@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap');

:root {
  --bg: #f7f6f2;
  --bg2: #efede8;
  --white: #ffffff;
  --black: #0f0f0e;
  --text: #2c2c2a;
  --muted: #8a8880;
  --border: #e2e0da;
  --green: #1a6b3c;
  --green-light: #eaf2ed;
  --green-hover: #155c32;
  --red: #c0392b;
  --red-light: #fdf0ee;
  --amber: #d97706;
  --amber-light: #fef3c7;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.09), 0 2px 8px rgba(0,0,0,0.05);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body { background:var(--bg); color:var(--text); font-family:'DM Sans',sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; }

/* TYPOGRAPHY */
.serif { font-family: 'Instrument Serif', serif; }
h1,h2,h3,h4 { font-family:'Instrument Serif',serif; font-weight:400; letter-spacing:-0.03em; line-height:1.1; color:var(--black); }
h1 { font-size: clamp(36px,5vw,60px); }
h2 { font-size: clamp(28px,4vw,44px); }
h3 { font-size: clamp(20px,3vw,28px); }
h4 { font-size: 20px; }
p { color: var(--text); }

/* LAYOUT */
.container { max-width: 1200px; margin: 0 auto; padding: 0 48px; }
.container-sm { max-width: 800px; margin: 0 auto; padding: 0 48px; }
.section { padding: 72px 0; }
.section-sm { padding: 48px 0; }

/* NAV */
.nav {
  position: sticky; top:0; z-index:200;
  background: rgba(247,246,242,0.93);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  height: 64px;
}
.nav-inner {
  height: 64px; display:flex; align-items:center;
  justify-content: space-between; gap:24px;
}
.nav-logo { font-family:'Instrument Serif',serif; font-size:23px; color:var(--black); letter-spacing:-0.5px; }
.nav-logo span { color:var(--green); }
.nav-search {
  display:flex; align-items:center;
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-sm); overflow:hidden;
  width:300px; transition: border-color 0.15s;
}
.nav-search:focus-within { border-color: var(--green); }
.nav-search input { flex:1; border:none; outline:none; padding:9px 14px; font-size:14px; background:transparent; color:var(--text); }
.nav-search input::placeholder { color:var(--muted); }
.nav-search button { background:var(--green); border:none; padding:9px 14px; color:white; cursor:pointer; font-size:14px; transition:background 0.15s; }
.nav-search button:hover { background:var(--green-hover); }
.nav-links { display:flex; align-items:center; gap:20px; }
.nav-link { font-size:14px; font-weight:500; color:var(--muted); transition:color 0.15s; }
.nav-link:hover { color:var(--black); }
.nav-link.active { color:var(--black); }
.nav-avatar {
  width:36px; height:36px; border-radius:50%;
  background:var(--green-light); color:var(--green);
  font-size:13px; font-weight:600; display:flex;
  align-items:center; justify-content:center; cursor:pointer;
  border: 1px solid var(--border);
}

/* BUTTONS */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 20px; border-radius:var(--radius-sm); font-size:14px; font-weight:500; cursor:pointer; border:none; transition:all 0.15s; text-decoration:none; white-space:nowrap; }
.btn-lg { padding:13px 28px; font-size:15px; }
.btn-sm { padding:7px 14px; font-size:13px; }
.btn-primary { background:var(--green); color:white; }
.btn-primary:hover { background:var(--green-hover); transform:translateY(-1px); }
.btn-secondary { background:var(--white); color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover { border-color:#bbb; background:var(--bg); }
.btn-danger { background:var(--red); color:white; }
.btn-danger:hover { background:#a93226; }
.btn-ghost { background:transparent; color:var(--text); border:1px solid var(--border); }
.btn-ghost:hover { background:var(--bg2); }
.btn-block { width:100%; }

/* CARDS */
.card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:24px; }
.card-hover:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); transition:all 0.2s; }

/* BADGES */
.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:100px; font-size:12px; font-weight:500; }
.badge-green { background:var(--green-light); color:var(--green); }
.badge-amber { background:var(--amber-light); color:var(--amber); }
.badge-red { background:var(--red-light); color:var(--red); }
.badge-gray { background:var(--bg2); color:var(--muted); }

/* AVATAR */
.avatar { border-radius:50%; background:var(--green-light); color:var(--green); font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:'DM Sans',sans-serif; }
.avatar-sm { width:32px; height:32px; font-size:12px; }
.avatar-md { width:44px; height:44px; font-size:16px; }
.avatar-lg { width:64px; height:64px; font-size:22px; }
.avatar-xl { width:96px; height:96px; font-size:32px; }

/* FORMS */
.form-group { margin-bottom:20px; }
.form-label { display:block; font-size:14px; font-weight:500; color:var(--black); margin-bottom:6px; }
.form-control { width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:14px; color:var(--text); background:var(--white); outline:none; transition:border-color 0.15s; }
.form-control:focus { border-color:var(--green); }
.form-control::placeholder { color:var(--muted); }
textarea.form-control { resize:vertical; min-height:120px; }
.form-hint { font-size:12px; color:var(--muted); margin-top:5px; }

/* STATUS INDICATORS */
.status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.status-dot.green { background:#22c55e; }
.status-dot.amber { background:var(--amber); }
.status-dot.red { background:var(--red); }

/* STARS */
.stars { color:#f59e0b; letter-spacing:1px; }

/* TAGS */
.tag { display:inline-block; padding:4px 10px; background:var(--bg2); border-radius:6px; font-size:12px; color:var(--muted); border:1px solid var(--border); }

/* DIVIDER */
.divider { height:1px; background:var(--border); margin:24px 0; }

/* EMPTY STATE */
.empty-state { text-align:center; padding:64px 24px; }
.empty-state .empty-icon { font-size:48px; margin-bottom:16px; }
.empty-state h3 { margin-bottom:8px; font-size:20px; }
.empty-state p { color:var(--muted); font-size:15px; }

/* SIDEBAR LAYOUT */
.layout-sidebar { display:grid; grid-template-columns:260px 1fr; gap:32px; align-items:start; }
.layout-sidebar-wide { display:grid; grid-template-columns:300px 1fr; gap:32px; align-items:start; }

/* PAGE HEADER */
.page-header { padding:48px 0 32px; border-bottom:1px solid var(--border); margin-bottom:40px; }
.page-header h1 { margin-bottom:8px; }
.page-header p { color:var(--muted); font-size:16px; }

/* ALERT */
.alert { padding:14px 18px; border-radius:var(--radius-sm); font-size:14px; margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.alert-green { background:var(--green-light); color:var(--green); border:1px solid #c6dece; }
.alert-amber { background:var(--amber-light); color:var(--amber); border:1px solid #fcd34d; }
.alert-red { background:var(--red-light); color:var(--red); border:1px solid #f5c6c2; }

/* RESPONSIVE */
@media(max-width:900px) {
  .container, .container-sm { padding:0 20px; }
  .nav-search { display:none; }
  .layout-sidebar, .layout-sidebar-wide { grid-template-columns:1fr; }
  h1 { font-size:32px; }
  h2 { font-size:26px; }
  .section { padding:48px 0; }
}