/* ============================================================
   Piano Portal – Main Stylesheet
   Design: dark-navy + ivory + warm gold
   ============================================================ */

/* ---- Tokens ---------------------------------------------- */
:root {
  --nav-h:        56px;
  --c-bg:         #f4f2ee;
  --c-surface:    #ffffff;
  --c-surface-2:  #faf9f7;
  --c-nav:        #111827;
  --c-nav-border: #1f2937;
  --c-nav-text:   #d1cfc8;
  --c-nav-active: #c8a96e;
  --c-primary:    #1a2744;
  --c-accent:     #c8a96e;
  --c-accent-h:   #b8934e;
  --c-text:       #1a1a1a;
  --c-text-2:     #4b5563;
  --c-muted:      #9ca3af;
  --c-border:     #e5e2da;
  --c-border-2:   #d0cdc5;
  --c-blue:       #2563eb;
  --c-green:      #16a34a;
  --c-amber:      #d97706;
  --c-red:        #dc2626;
  --c-purple:     #7c3aed;
  --s-production: #6b7280;
  --s-warehouse:  #2563eb;
  --s-transit:    #d97706;
  --s-delivered:  #16a34a;
  --s-in_service: #7c3aed;
  --s-sold:       #065f46;
  --s-scrapped:   #dc2626;
  --shadow-sm:    0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);
  --shadow-md:    0 4px 12px rgba(0,0,0,.10),0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:    0 12px 40px rgba(0,0,0,.15),0 4px 8px rgba(0,0,0,.08);
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px;
  --t-fast: 120ms ease; --t-mid: 200ms ease;
}

/* ---- Reset ----------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;-webkit-font-smoothing:antialiased}
body{font-family:'Inter',system-ui,sans-serif;background:var(--c-bg);color:var(--c-text);min-height:100vh;display:flex;flex-direction:column}
a{color:var(--c-primary);text-decoration:none}
a:hover{color:var(--c-accent)}
img{max-width:100%}

/* ---- Top Nav --------------------------------------------- */
.topnav{position:sticky;top:0;z-index:100;height:var(--nav-h);background:var(--c-nav);border-bottom:1px solid var(--c-nav-border);display:flex;align-items:center;padding:0 1.25rem;gap:1rem;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.topnav__brand{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.topnav__logo-icon{width:28px;height:28px;color:var(--c-accent)}
.topnav__brand-name{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:600;color:#fff;letter-spacing:.01em;white-space:nowrap}
.topnav__version{font-size:.65rem;color:var(--c-muted);font-variant-numeric:tabular-nums;margin-left:.25rem}
.topnav__menu{display:flex;align-items:center;gap:.15rem;flex:1;overflow-x:auto;scrollbar-width:none}
.topnav__menu::-webkit-scrollbar{display:none}
.topnav__item{display:flex;align-items:center;gap:.4rem;padding:.45rem .75rem;border-radius:var(--r-sm);color:var(--c-nav-text);font-size:.82rem;font-weight:500;white-space:nowrap;transition:background var(--t-fast),color var(--t-fast);text-decoration:none}
.topnav__item svg{width:17px;height:17px;flex-shrink:0;opacity:.8}
.topnav__item:hover{background:rgba(255,255,255,.07);color:#fff}
.topnav__item--active{background:rgba(200,169,110,.15);color:var(--c-accent)!important}
.topnav__item--active svg{opacity:1}
.topnav__right{display:flex;align-items:center;gap:.75rem;flex-shrink:0;margin-left:auto}
.topnav__user{display:flex;align-items:center;gap:.75rem}
.topnav__user-name{display:flex;align-items:center;gap:.4rem;color:var(--c-nav-text);font-size:.82rem}
.topnav__user-badge{background:var(--c-accent);color:var(--c-nav);font-size:.65rem;font-weight:700;padding:.1rem .35rem;border-radius:4px;letter-spacing:.05em}
.topnav__logout{color:var(--c-muted);display:flex;align-items:center;transition:color var(--t-fast)}
.topnav__logout svg{width:18px;height:18px}
.topnav__logout:hover{color:var(--c-red)}

/* ---- Burger Menu (mobile) -------------------------------- */
.burger-btn{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:.4rem;flex-shrink:0}
.burger-btn span{display:block;width:22px;height:2px;background:var(--c-nav-text);border-radius:2px;transition:all .25s ease;transform-origin:center}
.burger-btn--open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger-btn--open span:nth-child(2){opacity:0;transform:scaleX(0)}
.burger-btn--open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- Language Switcher (Globe) --------------------------- */
.lang-switcher{position:relative}
.lang-switcher__btn{display:flex;align-items:center;gap:.35rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-sm);padding:.35rem .6rem;cursor:pointer;color:var(--c-nav-text);font-size:.8rem;font-weight:600;transition:background var(--t-fast),color var(--t-fast);letter-spacing:.04em}
.lang-switcher__btn:hover{background:rgba(255,255,255,.12);color:#fff}
.lang-switcher__globe{width:16px;height:16px;flex-shrink:0}
.lang-switcher__current{font-size:.75rem}
.lang-switcher__menu{display:none;position:absolute;top:calc(100% + 6px);right:0;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);box-shadow:var(--shadow-lg);min-width:150px;z-index:300;overflow:hidden;animation:dropIn .15s ease}
.lang-switcher__menu--open{display:block}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.lang-switcher__option{display:flex;align-items:center;gap:.6rem;padding:.65rem 1rem;font-size:.85rem;color:var(--c-text);text-decoration:none;transition:background var(--t-fast)}
.lang-switcher__option:hover{background:var(--c-bg);color:var(--c-text)}
.lang-switcher__option--active{background:rgba(200,169,110,.08)}
.lang-switcher__code{font-weight:700;font-size:.75rem;letter-spacing:.05em;color:var(--c-primary);min-width:24px}
.lang-switcher__label{flex:1}
.lang-switcher__check{width:14px;height:14px;color:var(--c-accent)}
.lang-badge{display:inline-block;padding:.1rem .4rem;border-radius:4px;font-size:.68rem;font-weight:700;letter-spacing:.06em;margin-right:.25rem}
.lang-badge--en{background:#dbeafe;color:#1e3a8a}
.lang-badge--de{background:#fef3c7;color:#78350f}
.lang-badge--zh{background:#ffe4e6;color:#881337}
.modal__langs{display:flex;justify-content:center;gap:.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--c-border)}
.modal__lang-btn{padding:.3rem .7rem;border-radius:var(--r-sm);font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--c-text-2);border:1.5px solid var(--c-border-2);transition:all var(--t-fast);text-decoration:none}
.modal__lang-btn:hover{border-color:var(--c-accent);color:var(--c-accent)}
.modal__lang-btn--active{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-nav)}

/* ---- Flash ----------------------------------------------- */
.flash{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.5rem;font-size:.85rem;font-weight:500;border-bottom:2px solid transparent}
.flash--success{background:#d1fae5;color:#065f46;border-color:#6ee7b7}
.flash--error{background:#fee2e2;color:#7f1d1d;border-color:#fca5a5}
.flash--warning{background:#fef3c7;color:#78350f;border-color:#fcd34d}
.flash--info{background:#dbeafe;color:#1e3a5f;border-color:#93c5fd}
.flash__close{background:none;border:none;cursor:pointer;font-size:1.1rem;opacity:.6}
.flash__close:hover{opacity:1}

/* ---- Main ------------------------------------------------ */
.main{flex:1;padding:1.75rem 2rem;max-width:1400px;width:100%;margin:0 auto}

/* ---- Form Fields ----------------------------------------- */
.field{display:flex;flex-direction:column;gap:.35rem}
.field__label{font-size:.8rem;font-weight:600;color:var(--c-text-2);text-transform:uppercase;letter-spacing:.04em}
.field__input,.field__select,.field__textarea{width:100%;padding:.6rem .85rem;border:1.5px solid var(--c-border-2);border-radius:var(--r-sm);font-size:.9rem;font-family:inherit;color:var(--c-text);background:var(--c-surface);transition:border-color var(--t-fast),box-shadow var(--t-fast);outline:none}
.field__input:focus,.field__select:focus,.field__textarea:focus{border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(200,169,110,.18)}
.field__textarea{resize:vertical;min-height:90px}
.field__hint{font-size:.75rem;color:var(--c-muted);margin-top:.25rem;display:block}
.field__hint code{background:var(--c-bg);padding:.05rem .3rem;border-radius:3px;font-size:.73rem}

/* ---- Buttons --------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1.1rem;border-radius:var(--r-sm);font-size:.875rem;font-weight:600;font-family:inherit;cursor:pointer;border:1.5px solid transparent;transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast);text-decoration:none;white-space:nowrap}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn svg{width:16px;height:16px;flex-shrink:0}
.btn--primary{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
.btn--primary:hover:not(:disabled){background:#0f1a32;color:#fff;box-shadow:var(--shadow-sm)}
.btn--accent{background:var(--c-accent);color:var(--c-nav);border-color:var(--c-accent)}
.btn--accent:hover:not(:disabled){background:var(--c-accent-h);color:var(--c-nav)}
.btn--ghost{background:transparent;color:var(--c-text-2);border-color:var(--c-border-2)}
.btn--ghost:hover:not(:disabled){background:var(--c-surface-2);color:var(--c-text)}
.btn--danger{background:var(--c-red);color:#fff;border-color:var(--c-red)}
.btn--full{width:100%;justify-content:center}
.btn--sm{padding:.35rem .75rem;font-size:.8rem}

/* ---- Page layout ----------------------------------------- */
.page{display:flex;flex-direction:column;gap:1.75rem}
.page__head{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.page__title{font-family:'Playfair Display',serif;font-size:1.6rem;color:var(--c-primary);font-weight:600}
.page__sub{font-size:.875rem;color:var(--c-muted)}
.page__actions{display:flex;gap:.5rem;margin-left:auto;align-items:center}

/* ---- Stat Cards ------------------------------------------ */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.stat-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);padding:1.25rem 1.5rem;display:flex;align-items:center;gap:1rem;box-shadow:var(--shadow-sm);text-decoration:none;color:var(--c-text);transition:box-shadow var(--t-mid),transform var(--t-mid)}
.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);color:var(--c-text)}
.stat-card__icon{width:44px;height:44px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stat-card__icon svg{width:22px;height:22px}
.stat-card__icon--blue{background:#dbeafe;color:var(--c-blue)}
.stat-card__icon--green{background:#d1fae5;color:var(--c-green)}
.stat-card__icon--amber{background:#fef3c7;color:var(--c-amber)}
.stat-card__icon--purple{background:#ede9fe;color:var(--c-purple)}
.stat-card__value{font-size:1.75rem;font-weight:700;line-height:1;color:var(--c-primary);font-variant-numeric:tabular-nums}
.stat-card__label{font-size:.8rem;color:var(--c-muted);margin-top:.2rem}

/* ---- Dashboard grid -------------------------------------- */
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.card--wide{grid-column:1/-1}

/* ---- Cards ----------------------------------------------- */
.card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);box-shadow:var(--shadow-sm);overflow:hidden}
.card__head{padding:1rem 1.25rem;border-bottom:1px solid var(--c-border);display:flex;align-items:center;justify-content:space-between}
.card__title{font-size:.9rem;font-weight:600;color:var(--c-primary);text-transform:uppercase;letter-spacing:.04em}
.card__link{font-size:.8rem;color:var(--c-accent)}
.card__body{padding:1.25rem}
.card__body--flush{padding:0}

/* ---- Bar rows (dashboard brand chart) -------------------- */
.bar-row{display:flex;align-items:center;gap:.75rem;margin-bottom:.65rem}
.bar-row:last-child{margin-bottom:0}
.bar-row__label{font-size:.82rem;min-width:80px;color:var(--c-text-2)}
.bar-row__track{flex:1;height:8px;background:var(--c-bg);border-radius:4px;overflow:hidden}
.bar-row__fill{height:100%;background:var(--c-accent);border-radius:4px;transition:width .4s ease}
.bar-row__count{font-size:.82rem;font-weight:600;min-width:28px;text-align:right;color:var(--c-text)}
.status-row{display:flex;align-items:center;justify-content:space-between;padding:.45rem 0;border-bottom:1px solid var(--c-border)}
.status-row:last-child{border-bottom:none}
.status-row__count{font-weight:700;color:var(--c-primary)}

/* ---- Status Pills ---------------------------------------- */
.pill{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:999px;font-size:.73rem;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8;flex-shrink:0}
.pill--production{background:#f3f4f6;color:var(--s-production)}
.pill--warehouse{background:#dbeafe;color:var(--s-warehouse)}
.pill--transit{background:#fef3c7;color:var(--s-transit)}
.pill--delivered{background:#d1fae5;color:var(--s-delivered)}
.pill--in_service{background:#ede9fe;color:var(--s-in_service)}
.pill--sold{background:#d1fae5;color:var(--s-sold)}
.pill--scrapped{background:#fee2e2;color:var(--s-scrapped)}

/* ---- Tables ---------------------------------------------- */
.table{width:100%;border-collapse:collapse;font-size:.85rem}
.table th{text-align:left;padding:.65rem 1rem;font-size:.73rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--c-muted);background:var(--c-surface-2);border-bottom:1px solid var(--c-border);white-space:nowrap}
.table td{padding:.7rem 1rem;border-bottom:1px solid var(--c-border);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr:hover{background:var(--c-surface-2)}
.table--compact td,.table--compact th{padding:.55rem .85rem}
.table-scroll{overflow-x:auto}

/* ---- Misc ------------------------------------------------ */
.muted{color:var(--c-muted)}
.empty{color:var(--c-muted);font-size:.875rem}
.mono{font-family:'SF Mono','Fira Code',monospace;font-size:.85rem}
.link-mono{font-family:'SF Mono','Fira Code',monospace;font-size:.8rem;color:var(--c-primary);font-weight:600}
.link-mono:hover{color:var(--c-accent)}
.hidden{display:none!important}
mark{background:rgba(200,169,110,.3);border-radius:2px;padding:0 1px}

/* ---- Footer ---------------------------------------------- */
.sitefooter{height:36px;border-top:1px solid var(--c-border);background:var(--c-nav);display:flex;align-items:center;padding:0 1.5rem;gap:.75rem;font-size:.75rem;color:var(--c-muted)}
.sitefooter__sep{opacity:.3}

/* ---- Detail grid ----------------------------------------- */
.detail-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:1rem;align-items:start}

/* ---- Definition list ------------------------------------- */
.dl{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.25rem;font-size:.875rem}
.dl dt{color:var(--c-muted);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;padding-top:.1rem}
.dl dd{color:var(--c-text)}
.dl a{color:var(--c-primary)}
.dl a:hover{color:var(--c-accent)}

/* ---- Form grid ------------------------------------------- */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}

/* ---- Brand tabs ------------------------------------------ */
.brand-tabs{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.1rem}
.brand-tabs::-webkit-scrollbar{display:none}
.brand-tab{padding:.45rem 1rem;border-radius:var(--r-sm);border:1.5px solid var(--c-border-2);font-size:.83rem;font-weight:500;white-space:nowrap;text-decoration:none;color:var(--c-text-2);background:var(--c-surface);transition:all var(--t-fast);display:flex;align-items:center;gap:.4rem}
.brand-tab:hover{border-color:var(--c-accent);color:var(--c-accent)}
.brand-tab--active{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
.brand-tab--active:hover{color:#fff}
.brand-tab__count{background:rgba(255,255,255,.2);border-radius:10px;padding:.05rem .4rem;font-size:.72rem}

/* ---- Brand chips ----------------------------------------- */
.brand-chip{display:inline-block;padding:.1rem .45rem;border-radius:4px;font-size:.72rem;font-weight:700;letter-spacing:.04em}
.brand-chip--bch{background:#1a2744;color:#c8a96e}
.brand-chip--hof{background:#1e3a5f;color:#93c5fd}
.brand-chip--zim{background:#3b1f1f;color:#fca5a5}
.brand-chip--feu{background:#1a3a2a;color:#6ee7b7}

/* ---- Color chip ------------------------------------------ */
.color-chip{display:inline-block;padding:.2rem .7rem;border-radius:4px;font-size:.75rem;font-weight:700;letter-spacing:.04em;vertical-align:middle;line-height:1.4;min-width:60px;text-align:center}

/* ---- Row actions ----------------------------------------- */
.row-actions{display:flex;gap:.25rem;align-items:center;flex-wrap:nowrap}

/* ---- Sortable column headers ----------------------------- */
.th-sort{color:inherit;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:.2rem}
.th-sort:hover{color:var(--c-accent)}
.th-sort--active{color:var(--c-primary)}

/* ---- Toolbar --------------------------------------------- */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.toolbar__left{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.toolbar__right{display:flex;align-items:center;gap:.5rem}

/* ---- Search wrap ----------------------------------------- */
.search-wrap{position:relative;flex:1;min-width:200px;max-width:360px}
.search-wrap__icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--c-muted);pointer-events:none}
.search-wrap__input{padding-left:2.25rem}

/* ---- Check label ----------------------------------------- */
.check-label{display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--c-text-2);cursor:pointer;white-space:nowrap}
.check-label input{accent-color:var(--c-accent)}

/* ---- Translation Manager --------------------------------- */
.trans-stats{display:flex;align-items:center;justify-content:space-between;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);padding:.75rem 1.25rem;font-size:.85rem;color:var(--c-text-2)}
.trans-stats__langs{display:flex;gap:.4rem}
.trans-table .trans-table__key-col{width:240px}
.trans-table__key-cell{vertical-align:top}
.key-name{font-family:'SF Mono','Fira Code',monospace;font-size:.78rem;color:var(--c-primary);font-weight:600;display:block}
.missing-badge{display:inline-block;margin-top:.25rem;font-size:.68rem;background:#fee2e2;color:var(--c-red);padding:.1rem .35rem;border-radius:4px;font-weight:600}
.trans-row--missing{background:#fff9f9}
.trans-row--missing:hover{background:#fff3f3}
.trans-cell{vertical-align:top;min-width:180px}
.trans-cell__display{padding:.25rem 0;font-size:.85rem;cursor:pointer;border-radius:4px;transition:background var(--t-fast);min-height:28px}
.trans-cell__display:hover{background:var(--c-bg);padding:.25rem .4rem}
.trans-cell__display--empty{color:var(--c-muted);font-style:italic}
.trans-cell__edit{display:none}
.trans-cell__textarea{width:100%;border:1.5px solid var(--c-accent);border-radius:var(--r-sm);padding:.4rem .6rem;font-size:.85rem;font-family:inherit;resize:vertical;min-height:60px;outline:none}
.trans-cell__actions{display:flex;gap:.4rem;margin-top:.35rem}

/* ---- Pagination ------------------------------------------ */
.pagination{display:flex;align-items:center;justify-content:center;gap:1rem}
.pagination__btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-sm);border:1.5px solid var(--c-border-2);color:var(--c-text-2);font-size:1rem;text-decoration:none;transition:all var(--t-fast)}
.pagination__btn:hover{background:var(--c-surface);color:var(--c-accent);border-color:var(--c-accent)}
.pagination__info{font-size:.85rem;color:var(--c-muted)}

/* ---- Toast notification ---------------------------------- */
.toast{position:fixed;bottom:1.5rem;right:1.5rem;z-index:999;padding:.75rem 1.25rem;border-radius:var(--r-md);font-size:.85rem;font-weight:600;box-shadow:var(--shadow-lg);opacity:0;transform:translateY(12px);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.toast--in{opacity:1;transform:none}
.toast--success{background:#d1fae5;color:#065f46}
.toast--error{background:#fee2e2;color:#7f1d1d}

/* ---- Lookup result --------------------------------------- */
.lookup-wrap{position:relative}
.lookup-result{display:none;background:#fff;border:1.5px solid var(--c-accent);border-radius:var(--r-sm);padding:.75rem 1rem;margin-top:.5rem;animation:fadeIn .2s ease}
.lookup-result.visible{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.lookup-result__name{font-weight:700;color:var(--c-primary);font-size:.9rem}
.lookup-result__meta{font-size:.8rem;color:var(--c-muted);margin-top:.2rem}

/* ---- Drag handle ----------------------------------------- */
.instr-row.drag-over{background:rgba(200,169,110,.12);outline:2px dashed var(--c-accent)}
.instr-row.dragging{opacity:.4}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .main{padding:1.25rem 1rem}
  .dash-grid{grid-template-columns:1fr}
  .detail-grid{grid-template-columns:1fr}
  .topnav__user-name span:not(.topnav__user-badge){display:none}
}

@media (max-width: 768px) {
  .burger-btn{display:flex}
  .topnav__right{order:3}
  .topnav{flex-wrap:nowrap}
  .topnav__brand{flex:1}
  .topnav__version{display:none}
  .topnav__menu{display:none;position:fixed;top:var(--nav-h);left:0;right:0;background:var(--c-nav);border-bottom:1px solid var(--c-nav-border);flex-direction:column;padding:.75rem 0;z-index:99;box-shadow:0 8px 24px rgba(0,0,0,.4);animation:slideDown .2s ease}
  .topnav__menu--open{display:flex}
  @keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .topnav__item{padding:.85rem 1.5rem;border-radius:0;font-size:.95rem;gap:.75rem}
  .topnav__item svg{width:20px;height:20px}
  .main{padding:1rem}
}

@media (max-width: 600px) {
  .topnav__item span{display:none}
  .topnav__item{padding:.45rem .55rem}
  .stat-grid{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
}