*{box-sizing:border-box}
:root{
  --bg:#e9e5da;
  --surface:rgba(250,248,242,.72);
  --surface-strong:rgba(255,253,248,.90);
  --surface-soft:rgba(245,244,238,.58);
  --surface-tint:rgba(224,232,224,.62);
  --text:#29372f;
  --text-strong:#1f2c25;
  --muted:#6f7a72;
  --accent:#6d8878;
  --accent-deep:#3f6552;
  --accent-soft:rgba(109,136,120,.16);
  --accent-faint:rgba(109,136,120,.09);
  --border:rgba(47,64,54,.10);
  --border-strong:rgba(47,64,54,.16);
  --danger:#a83b32;
  --warning:#9b6b21;
  --shadow-soft:0 10px 28px rgba(30,42,35,.08);
  --shadow-card:0 4px 18px rgba(30,42,35,.065);
  --shadow-float:0 16px 40px rgba(30,42,35,.13);
  --nav-width:228px;
  --radius-xl:24px;
  --radius-lg:18px;
  --radius-md:14px;
  --radius-sm:10px;
}
html{min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{margin:0;min-height:100vh;color:var(--text);background:
  radial-gradient(circle at 10% 8%,rgba(214,223,205,.82),transparent 30%),
  radial-gradient(circle at 88% 16%,rgba(239,225,197,.68),transparent 27%),
  radial-gradient(circle at 64% 88%,rgba(198,217,205,.42),transparent 30%),
  linear-gradient(150deg,#eeeade 0%,#e4e4d9 52%,#e9e4d8 100%);
  background-attachment:fixed;
}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:rgba(248,247,242,.22);backdrop-filter:blur(1px)}
button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}h1,h2,h3,p{margin-top:0}h1,h2,h3{color:var(--text-strong)}
h1{font-size:1.42rem;line-height:1.12;margin-bottom:0;font-weight:760;letter-spacing:-.02em}
h2{font-size:1.75rem;line-height:1.12;margin-bottom:7px;font-weight:760;letter-spacing:-.025em}
h3{font-size:1.02rem;line-height:1.2;margin-bottom:0;font-weight:760}
.app-shell{min-height:100vh}

/* Desktop navigation — a floating Kitcherette glass rail. */
.side-nav{position:fixed;inset:12px auto 12px 12px;width:var(--nav-width);padding:12px;background:rgba(250,248,242,.70);border:1px solid rgba(255,255,255,.52);border-radius:24px;box-shadow:var(--shadow-soft);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:flex;flex-direction:column;z-index:20}
.brand-block{display:flex;align-items:center;gap:11px;padding:7px 8px 19px}
.brand-mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(145deg,#789584,#587566);color:#fff;display:grid;place-items:center;font-weight:820;font-size:1.15rem;box-shadow:0 6px 16px rgba(52,79,65,.18)}
.brand-block strong{display:block;font-size:.98rem;letter-spacing:-.01em}.brand-block span{display:block;color:var(--muted);font-size:.69rem;margin-top:1px}
.side-nav nav{display:grid;gap:5px}.nav-item{min-height:44px;border:0;background:transparent;border-radius:13px;padding:10px 12px;text-align:left;display:flex;gap:11px;align-items:center;color:var(--muted);font-weight:690;transition:background .15s ease,color .15s ease,transform .15s ease}.nav-item span{font-size:1.12rem;width:22px;text-align:center;opacity:.82}.nav-item:hover{background:rgba(255,255,255,.40);color:var(--text)}.nav-item:active{transform:scale(.985)}.nav-item.active{background:var(--accent-soft);color:var(--text-strong);box-shadow:inset 0 0 0 1px rgba(109,136,120,.08)}
.side-status{margin-top:auto;padding:11px 9px;color:var(--muted);font-size:.71rem;display:flex;gap:8px;align-items:center}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#9aa49e;box-shadow:0 0 0 3px rgba(154,164,158,.12)}.status-dot.ok{background:#4c9267;box-shadow:0 0 0 3px rgba(76,146,103,.12)}.status-dot.bad{background:var(--danger);box-shadow:0 0 0 3px rgba(168,59,50,.11)}

.main-column{margin-left:calc(var(--nav-width) + 24px);min-height:100vh}
.topbar{height:82px;padding:14px 28px;position:sticky;top:0;z-index:15;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to bottom,rgba(238,234,222,.76),rgba(238,234,222,.34),transparent);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.eyebrow{font-size:.63rem;letter-spacing:.145em;font-weight:830;color:var(--accent-deep);margin:0 0 5px;text-transform:uppercase}.top-actions{display:flex;align-items:center;gap:7px}.server-pill{display:flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid rgba(255,255,255,.48);border-radius:999px;background:rgba(250,248,242,.68);box-shadow:0 4px 14px rgba(30,42,35,.05);backdrop-filter:blur(8px);font-size:.71rem;color:var(--muted)}
.icon-button{width:42px;height:42px;border-radius:13px;border:1px solid rgba(255,255,255,.48);background:rgba(250,248,242,.70);box-shadow:0 4px 14px rgba(30,42,35,.06);font-size:1.15rem;display:grid;place-items:center;transition:.15s ease;backdrop-filter:blur(8px)}.icon-button:hover{background:rgba(255,253,248,.92);box-shadow:0 6px 18px rgba(30,42,35,.08)}.icon-button:active{transform:scale(.96)}
main{max-width:1450px;margin:0 auto;padding:16px 28px 96px}.view{display:none}.view.active{display:block}

/* Dashboard */
.hero-card{position:relative;overflow:hidden;display:flex;gap:30px;justify-content:space-between;align-items:flex-end;padding:30px;border:1px solid rgba(255,255,255,.50);border-radius:26px;background:linear-gradient(135deg,rgba(255,253,248,.80),rgba(226,235,225,.66));box-shadow:var(--shadow-soft);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hero-card::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-90px;top:-145px;background:rgba(109,136,120,.10);pointer-events:none}.hero-card>div,.hero-card>button{position:relative;z-index:1}.hero-card p:not(.eyebrow){max-width:680px;color:var(--muted);margin-bottom:0;line-height:1.52}.hero-card h2{font-size:2.05rem;max-width:720px}
.primary-button,.secondary-button,.load-more{min-height:40px;border-radius:12px;padding:9px 15px;font-weight:740;border:1px solid transparent;white-space:nowrap;transition:.15s ease}.primary-button{background:var(--accent-deep);color:#fff;box-shadow:0 5px 14px rgba(63,101,82,.17)}.primary-button:hover{filter:brightness(1.035);box-shadow:0 7px 18px rgba(63,101,82,.20)}.primary-button:active,.secondary-button:active,.load-more:active{transform:scale(.98)}.secondary-button,.load-more{background:rgba(250,248,242,.68);border-color:rgba(255,255,255,.52);color:var(--text);box-shadow:0 3px 12px rgba(30,42,35,.05);backdrop-filter:blur(7px)}.secondary-button:hover,.load-more:hover{background:rgba(255,253,248,.92);border-color:var(--border-strong)}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:13px}.metric-card{padding:17px 18px;background:rgba(250,248,242,.68);border:1px solid rgba(255,255,255,.48);border-radius:17px;box-shadow:var(--shadow-card);backdrop-filter:blur(10px)}.metric-card span,.metric-card small{display:block;color:var(--muted);font-size:.72rem}.metric-card strong{display:block;font-size:1.78rem;line-height:1.05;margin:8px 0 5px;font-weight:750;letter-spacing:-.035em}
.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:11px}.panel{background:rgba(250,248,242,.68);border:1px solid rgba(255,255,255,.48);border-radius:18px;padding:18px;box-shadow:var(--shadow-card);backdrop-filter:blur(10px)}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.status-list{display:grid;gap:0}.status-row{display:flex;justify-content:space-between;gap:20px;padding:10px 1px;border-bottom:1px solid var(--border)}.status-row:last-child{border-bottom:0}.status-row span{color:var(--muted)}

/* List surfaces */
.toolbar{display:grid;grid-template-columns:minmax(240px,1fr) repeat(3,minmax(135px,auto)) minmax(120px,auto);gap:7px;align-items:center}.sticky-toolbar{position:sticky;top:74px;z-index:12;margin:0 -6px 9px;padding:8px;border:1px solid rgba(255,255,255,.44);border-radius:17px;background:rgba(244,242,234,.66);box-shadow:0 7px 20px rgba(30,42,35,.055);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.toolbar select,.search-field{min-height:40px;border:1px solid var(--border);border-radius:11px;background:rgba(255,253,248,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}.toolbar select{padding:0 32px 0 11px}.search-field{display:flex;align-items:center;padding:0 11px;gap:8px}.search-field>span{opacity:.62}.search-field input{border:0;outline:0;background:transparent;min-width:0;width:100%;height:38px}.toolbar select:focus,.search-field:focus-within{outline:none;border-color:rgba(109,136,120,.58);box-shadow:0 0 0 2px rgba(109,136,120,.10)}
.section-summary{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:6px 2px 10px;color:var(--muted);font-size:.77rem}.admin-list{display:grid;gap:7px}.admin-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:13px 14px;border:1px solid rgba(255,255,255,.44);background:rgba(250,248,242,.66);border-radius:15px;box-shadow:0 3px 12px rgba(30,42,35,.042);backdrop-filter:blur(8px);transition:.15s ease}.admin-row:hover{background:rgba(255,253,248,.82);border-color:rgba(109,136,120,.20);box-shadow:0 5px 16px rgba(30,42,35,.06);transform:translateY(-1px)}.row-main{min-width:0}.row-title{font-weight:760;font-size:.96rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-strong)}.row-meta{display:flex;flex-wrap:wrap;gap:5px 11px;color:var(--muted);font-size:.71rem;margin-top:4px}.tag{display:inline-flex;padding:3px 7px;border-radius:999px;background:var(--accent-faint);border:1px solid rgba(109,136,120,.07);font-size:.65rem;font-weight:740;color:#52695c}.row-score{min-width:58px;text-align:right}.row-score strong{display:block;color:var(--accent-deep)}.row-score small{color:var(--muted);font-size:.67rem}.load-more{display:block;margin:15px auto 0}

/* Forms */
.dev-note{margin:10px 0 14px;padding:12px 14px;border-radius:13px;background:rgba(255,237,235,.78);border:1px solid rgba(168,59,50,.20);color:#8c332c;font-size:.8rem;box-shadow:var(--shadow-card)}.dev-note strong{font-weight:900}.settings-panel label,.editor-form label{display:grid;gap:6px;font-size:.73rem;font-weight:760;color:var(--muted);margin-bottom:12px}.settings-panel input,.editor-form input,.editor-form select,.editor-form textarea{width:100%;border:1px solid var(--border);border-radius:11px;background:rgba(255,253,248,.78);padding:10px 11px;color:var(--text);outline:none}.settings-panel input:focus,.editor-form input:focus,.editor-form select:focus,.editor-form textarea:focus{border-color:rgba(109,136,120,.56);box-shadow:0 0 0 2px rgba(109,136,120,.10)}.editor-form textarea{min-height:92px;resize:vertical}.button-row{display:flex;gap:8px;flex-wrap:wrap}.settings-note,.muted{color:var(--muted);font-size:.78rem;line-height:1.5}.architecture-flow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.architecture-flow span{padding:8px 12px;border-radius:11px;background:var(--accent-faint);border:1px solid rgba(109,136,120,.08);font-weight:730;font-size:.75rem}.architecture-flow b{color:var(--muted);font-weight:600}

.bottom-nav{display:none}
.drawer-backdrop{position:fixed;inset:0;background:rgba(29,39,34,.26);backdrop-filter:blur(3px);z-index:50}.editor-drawer{position:fixed;z-index:55;top:8px;right:8px;bottom:8px;width:min(660px,calc(100vw - 16px));height:auto;background:rgba(250,248,242,.92);border:1px solid rgba(255,255,255,.52);border-radius:24px;box-shadow:-14px 0 42px rgba(30,42,35,.15);transform:translateX(calc(100% + 24px));transition:transform .22s cubic-bezier(.22,.72,.18,1);display:flex;flex-direction:column;overflow:hidden;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.editor-drawer.open{transform:none}.drawer-head{padding:17px 18px 14px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start}.drawer-head h2{font-size:1.45rem;margin:0}.drawer-body{flex:1;overflow:auto;padding:17px 18px 30px}.drawer-actions{padding:10px 14px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--border);display:flex;gap:7px;justify-content:flex-end;background:rgba(250,248,242,.88);backdrop-filter:blur(12px)}.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.detail-section{padding:15px 0;border-top:1px solid var(--border)}.detail-section:first-child{border-top:0;padding-top:0}.detail-section h3{margin-bottom:10px}.ingredient-editor-row,.instruction-editor-row{display:grid;grid-template-columns:minmax(0,1fr) 90px 75px;gap:7px;margin-bottom:7px}.instruction-editor-row{grid-template-columns:36px minmax(0,1fr)}.instruction-editor-row span{padding-top:11px;text-align:center;color:var(--muted)}.source-box{background:var(--accent-faint);border:1px solid rgba(109,136,120,.08);padding:11px;border-radius:12px;color:var(--muted);font-size:.74rem;line-height:1.5}.toast{position:fixed;z-index:100;left:50%;bottom:22px;transform:translate(-50%,18px);opacity:0;pointer-events:none;background:#31483c;color:#fff;border-radius:999px;padding:9px 14px;font-size:.75rem;font-weight:730;box-shadow:var(--shadow-float);transition:.18s}.toast.show{opacity:1;transform:translate(-50%,0)}code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}

@media(max-width:1000px){.metric-grid{grid-template-columns:repeat(2,1fr)}.toolbar{grid-template-columns:1fr 1fr 1fr}.search-field{grid-column:1/-1}.panel-grid{grid-template-columns:1fr}}
@media(max-width:720px){
  :root{--mobile-nav:70px}
  body{background:radial-gradient(circle at 16% 5%,rgba(214,223,205,.78),transparent 34%),radial-gradient(circle at 90% 12%,rgba(239,225,197,.56),transparent 31%),linear-gradient(150deg,#eeeade,#e4e4d9)}
  .side-nav{display:none}.main-column{margin-left:0}.topbar{height:70px;padding:10px 14px;background:linear-gradient(to bottom,rgba(238,234,222,.82),rgba(238,234,222,.45),transparent)}.topbar h1{font-size:1.18rem}.topbar .eyebrow{font-size:.58rem;margin-bottom:3px}.server-pill{display:none}main{padding:10px 11px calc(var(--mobile-nav) + 35px)}
  .hero-card{padding:19px 17px;border-radius:21px;display:block}.hero-card h2{font-size:1.55rem;max-width:90%}.hero-card p:not(.eyebrow){font-size:.84rem}.hero-card .primary-button{margin-top:16px;width:100%}
  .metric-grid{grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}.metric-card{padding:13px;border-radius:15px}.metric-card strong{font-size:1.48rem;margin-top:6px}.metric-card small{font-size:.65rem}.panel-grid{gap:8px;margin-top:8px}.panel{padding:15px;border-radius:16px}
  .toolbar{grid-template-columns:1fr 1fr;position:sticky;top:69px;padding:7px;margin:0 -3px 8px;border-radius:15px}.search-field{grid-column:1/-1}.toolbar select,.toolbar .primary-button{min-width:0;width:100%;min-height:39px}.section-summary{align-items:center;margin-left:1px;margin-right:1px}.section-summary .secondary-button{padding:6px 9px;min-height:34px;font-size:.72rem}
  .admin-row{padding:11px 12px;border-radius:14px;gap:10px}.admin-row:hover{transform:none}.row-score{min-width:44px}.row-title{font-size:.93rem}.row-meta{font-size:.68rem}
  .bottom-nav{position:fixed;z-index:30;left:8px;right:8px;bottom:8px;height:calc(var(--mobile-nav) + env(safe-area-inset-bottom));padding:5px 6px env(safe-area-inset-bottom);background:rgba(250,248,242,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.48);border-radius:19px;box-shadow:0 10px 28px rgba(30,42,35,.12);display:grid;grid-template-columns:repeat(4,1fr)}.bottom-nav button{border:0;background:transparent;border-radius:13px;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;transition:.15s ease}.bottom-nav button span{font-size:1.15rem;line-height:1}.bottom-nav button small{font-size:.59rem;font-weight:720}.bottom-nav button.active{background:var(--accent-soft);color:var(--text-strong)}.bottom-nav button:active{transform:scale(.97)}
  .field-grid{grid-template-columns:1fr}.ingredient-editor-row{grid-template-columns:minmax(0,1fr) 78px 68px}.drawer-actions{justify-content:stretch}.drawer-actions button{flex:1}.editor-drawer{top:5px;right:5px;bottom:5px;width:calc(100vw - 10px);border-radius:21px}.drawer-body{padding:14px 13px 28px}.drawer-head{padding:14px 13px}.drawer-actions{padding-left:10px;padding-right:10px}
}

@media(prefers-color-scheme:dark){
  :root{--bg:#343a35;--surface:rgba(42,50,45,.76);--surface-strong:rgba(37,45,40,.92);--surface-soft:rgba(45,52,47,.62);--surface-tint:rgba(65,82,72,.62);--text:#e4e9e5;--text-strong:#f1f4f2;--muted:#a8b1aa;--accent:#789584;--accent-deep:#8eae9b;--accent-soft:rgba(120,149,132,.20);--accent-faint:rgba(120,149,132,.12);--border:rgba(238,236,225,.10);--border-strong:rgba(238,236,225,.16);--shadow-soft:0 12px 32px rgba(0,0,0,.20);--shadow-card:0 5px 18px rgba(0,0,0,.14)}
  html{background:#343a35}body{background:radial-gradient(circle at 12% 8%,rgba(75,91,78,.54),transparent 31%),radial-gradient(circle at 88% 15%,rgba(91,82,66,.38),transparent 28%),linear-gradient(150deg,#343a35,#303630)}body::before{background:rgba(40,46,42,.16)}
  .side-nav,.hero-card,.metric-card,.panel,.admin-row,.sticky-toolbar,.editor-drawer,.bottom-nav{border-color:rgba(255,255,255,.10)}
  .side-nav{background:rgba(42,49,44,.72)}.topbar{background:linear-gradient(to bottom,rgba(52,58,53,.82),rgba(52,58,53,.42),transparent)}.server-pill,.icon-button,.secondary-button,.load-more,.toolbar select,.search-field,.settings-panel input,.editor-form input,.editor-form select,.editor-form textarea{background:rgba(42,49,44,.76);border-color:rgba(255,255,255,.10)}
  .hero-card{background:linear-gradient(135deg,rgba(46,54,49,.85),rgba(54,67,59,.72))}.metric-card,.panel,.admin-row{background:rgba(42,49,44,.68)}.admin-row:hover{background:rgba(48,57,51,.84)}.sticky-toolbar{background:rgba(44,51,46,.72)}.tag,.architecture-flow span,.source-box{color:#b6c9bc}.drawer-actions{background:rgba(42,49,44,.88)}.dev-note{background:rgba(74,38,35,.74);border-color:rgba(255,180,170,.18);color:#ffb4aa}.toast{background:#d9e5dd;color:#223129}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.nav-item,.icon-button,.admin-row,.primary-button,.secondary-button,.load-more,.editor-drawer,.toast,.bottom-nav button{transition:none!important}}

/* v3 — dark mode surface correction. Cosmetic only. */
@media (prefers-color-scheme: dark) {
  html { color-scheme: dark; }

  /* The mobile navigation previously kept its light glass fill in dark mode. */
  .bottom-nav {
    background: rgba(34, 42, 37, .92);
    border-color: rgba(255, 255, 255, .11);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .30);
  }
  .bottom-nav button {
    color: var(--muted);
  }
  .bottom-nav button.active {
    background: rgba(120, 149, 132, .22);
    color: var(--text-strong);
  }

  /* Keep every floating glass surface on the same dark token family. */
  .server-pill,
  .icon-button,
  .secondary-button,
  .load-more,
  .sticky-toolbar,
  .editor-drawer,
  .drawer-actions,
  .toolbar select,
  .search-field,
  .settings-panel input,
  .editor-form input,
  .editor-form select,
  .editor-form textarea {
    background-color: rgba(38, 46, 41, .88);
    color: var(--text);
  }

  .editor-drawer {
    background: rgba(35, 43, 38, .96);
    box-shadow: -14px 0 42px rgba(0, 0, 0, .34);
  }
  .drawer-actions {
    background: rgba(35, 43, 38, .94);
  }
  .drawer-backdrop {
    background: rgba(8, 12, 10, .48);
  }

  .search-field input,
  .settings-panel input,
  .editor-form input,
  .editor-form select,
  .editor-form textarea {
    color: var(--text);
    caret-color: var(--accent-deep);
  }
  .search-field input::placeholder,
  .settings-panel input::placeholder,
  .editor-form input::placeholder,
  .editor-form textarea::placeholder {
    color: #8f9a92;
    opacity: 1;
  }
  .toolbar select option,
  .editor-form select option {
    background: #2c342f;
    color: var(--text);
  }

  .metric-card,
  .panel,
  .admin-row {
    border-color: rgba(255, 255, 255, .10);
  }

  .primary-button {
    background: #557563;
    color: #fff;
  }
}