:root {
  --bg: #f3f0e8;
  --panel: #fffdf9;
  --panel-strong: #f7f2e8;
  --text: #1d1c1a;
  --muted: #6d655c;
  --border: #d8cfc1;
  --accent: #9f3a1d;
  --accent-2: #1d6b6b;
  --shadow: 0 18px 50px rgba(44, 33, 22, 0.08);
  --radius: 22px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: radial-gradient(circle at top left, #f9f1df 0, #f3f0e8 42%, #ece9df 100%); color: var(--text); font-family: Georgia, "Noto Serif", serif; }
body { line-height: 1.55; }
a { color: inherit; }

.app-shell { min-height: 100vh; }
.site-header { position: sticky; top: 0; z-index: 20; padding: 18px 24px 14px; border-bottom: 1px solid var(--border); background: rgba(255, 252, 246, 0.92); backdrop-filter: blur(12px); }
.brand-row { display: flex; justify-content: space-between; gap: 16px; align-items: end; }
.main-panel { min-width: 0; padding: 20px 24px 40px; }
.main-panel-wide { padding-top: 18px; }
.brand { padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(140deg, rgba(255,255,255,0.96), rgba(247,242,232,0.96)); box-shadow: var(--shadow); }
.brand h1 { margin: 6px 0; font-size: 1.8rem; line-height: 1.1; }
.eyebrow { margin: 0; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.subcopy { margin: 0; color: var(--muted); font-size: 0.95rem; }

.top-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.nav-dropdown { position: relative; }
.nav-summary, .nav-link-inline { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,0.84); text-decoration: none; color: var(--muted); font-size: 0.94rem; font-weight: 700; cursor: pointer; }
.nav-summary::after { content: "▾"; font-size: 0.75rem; color: var(--accent); }
.nav-summary:hover, .nav-link-inline:hover, .nav-link-inline.active { color: var(--text); border-color: rgba(159, 58, 29, 0.35); background: rgba(159, 58, 29, 0.08); }
.dropdown-menu { display: none; position: absolute; left: 0; top: calc(100% + 8px); min-width: 260px; max-height: 65vh; overflow-y: auto; padding: 8px; border: 1px solid var(--border); border-radius: 18px; background: rgba(255,255,255,0.98); box-shadow: var(--shadow); }
.nav-dropdown:hover .dropdown-menu, .nav-dropdown:focus-within .dropdown-menu { display: block; }
.dropdown-link { display: block; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--muted); font-size: 0.92rem; }
.dropdown-link:hover, .dropdown-link.active { background: rgba(159, 58, 29, 0.08); color: var(--text); }

.topbar { display: flex; gap: 16px; justify-content: space-between; align-items: end; margin-bottom: 20px; }
.compact-topbar { margin-bottom: 18px; }
.topbar h2 { margin: 4px 0 0; font-size: 2rem; line-height: 1.1; }
.topbar-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.search-box input { width: min(420px, 100%); padding: 14px 16px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,0.92); font: inherit; }
.lang-switch { display: inline-flex; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,0.92); }
.lang-btn { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 0.9rem; font-weight: 700; padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.lang-btn.active { background: var(--accent); color: #fff; }

.content { display: grid; gap: 18px; }
.hero, .panel, .module-card, .screen-card, .api-card, .component-card { background: rgba(255,255,255,0.88); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.hero { padding: 26px; background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(244,237,225,0.96)); }
.hero-grid, .card-grid, .module-grid, .screen-grid, .api-grid, .component-grid, .summary-grid, .flow-grid { display: grid; gap: 16px; }
.hero-grid, .summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.module-grid, .flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.screen-grid, .api-grid, .component-grid, .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.panel { padding: 22px; }
.module-card, .screen-card, .api-card, .component-card { padding: 18px; }
.metric { padding: 16px; border-radius: 18px; background: var(--panel-strong); border: 1px solid var(--border); }
.metric .value { font-size: 2rem; font-weight: 700; }
.metric .label { color: var(--muted); font-size: 0.9rem; }
.bilingual { display: grid; gap: 8px; }
.bilingual p { margin: 0; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tag { display: inline-flex; align-items: center; border-radius: 999px; background: rgba(29, 107, 107, 0.1); color: var(--accent-2); padding: 6px 10px; font-size: 0.82rem; font-weight: 700; }
.list { margin: 0; padding-left: 18px; }
.list li { margin-bottom: 6px; }
.title-row { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.title-row h3, .title-row h4 { margin: 0; }
.muted { color: var(--muted); }
.path { font-family: "Courier New", monospace; font-size: 0.84rem; color: var(--accent-2); word-break: break-all; }
.empty-state { padding: 26px; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--muted); background: rgba(255,255,255,0.72); }
.section-title { margin: 0 0 8px; font-size: 1.3rem; }

@media (max-width: 1200px) {
  .hero-grid, .summary-grid, .screen-grid, .api-grid, .component-grid, .card-grid, .module-grid, .flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .site-header { padding: 16px; }
  .brand-row { flex-direction: column; align-items: stretch; }
  .topbar { flex-direction: column; align-items: stretch; }
  .topbar-actions { justify-content: stretch; }
  .search-box input { width: 100%; }
  .top-nav { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .dropdown-menu { position: fixed; left: 16px; right: 16px; top: 132px; min-width: auto; }
}

@media (max-width: 640px) {
  .main-panel { padding: 16px; }
  .hero, .panel, .module-card, .screen-card, .api-card, .component-card { padding: 16px; }
  .hero-grid, .summary-grid, .screen-grid, .api-grid, .component-grid, .card-grid, .module-grid, .flow-grid { grid-template-columns: 1fr; }
}