/* FUDCOS mockup styles. Tokens from design-system.html */
:root{
  --f-title:"Space Grotesk",system-ui,sans-serif;
  --f-body:"DM Sans",system-ui,sans-serif;
  --f-sub:"DM Sans",system-ui,sans-serif;
  --bg-0:#d9cdb9; --bg-1:#ece3d2;
  --cream:#f3ece1; --cream-hi:#fbf7f0; --cream-deep:#e6dccb;
  --ink:#2b2118; --ink-2:#6f6253; --ink-3:#a09282;
  --gold-1:#f4dc9a; --gold-2:#d9a94a; --gold-3:#a8741f; --gold-4:#6b4510;
  --gold-grad:linear-gradient(145deg,var(--gold-1),var(--gold-2) 45%,var(--gold-3));
  --good:#2f8a4b; --bad:#d23a2a; --warn:#b98419; --rim:.9;
  /* accent plate tokens (gold by default; themes recolor them) */
  --g-hi:#fbe9ad; --g-mid:#e6b850; --g-lo:#cf9b34; --g-edge:#a8741f; --g-text:#3b2406; --g-tsh:rgba(255,244,205,.7); --g-sh:120 80 15; --g-in:rgba(255,255,255,.75); --g-glow:217 169 74;
  --sh-dark:120 96 62;
  --raise: 6px 8px 14px rgb(var(--sh-dark)/.28), -5px -5px 12px rgba(255,255,255,.95);
  --raise-sm: 3px 4px 8px rgb(var(--sh-dark)/.26), -3px -3px 7px rgba(255,255,255,.95);
  --press: inset 3px 4px 7px rgb(var(--sh-dark)/.28), inset -3px -3px 6px rgba(255,255,255,.95);
  --r-lg:22px; --r-md:14px; --r-sm:10px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --serif:var(--f-title); --sans:var(--f-body);
}
:root[data-mode=dark]{
  --sh-dark:0 0 0; --warn:#e6b850; --rim:.07;
  --raise: 6px 8px 14px rgba(0,0,0,.5), -4px -4px 10px rgba(255,240,210,.05);
  --raise-sm: 3px 4px 8px rgba(0,0,0,.45), -3px -3px 6px rgba(255,240,210,.05);
  --press: inset 3px 4px 7px rgba(0,0,0,.5), inset -3px -3px 6px rgba(255,240,210,.05);
}
/* light themes (light1 = base tokens above) */
:root[data-theme=light2]{--cream:#eef0f3;--cream-hi:#f8f9fb;--cream-deep:#dde1e8;--ink:#20242c;--ink-2:#596070;--ink-3:#8f96a5;--bg-0:#cfd5df;--bg-1:#e6eaf0;--sh-dark:98 108 130}
:root[data-theme=light3]{--cream:#eef1e7;--cream-hi:#f8faf3;--cream-deep:#dde3d0;--ink:#25291f;--ink-2:#5d6450;--ink-3:#949b86;--bg-0:#cfd6be;--bg-1:#e7ecdb;--sh-dark:100 112 80}
/* dark themes */
:root[data-theme=dark1]{--cream:#2c241c;--cream-hi:#382e24;--cream-deep:#221b15;--ink:#f3ece1;--ink-2:#c2b5a3;--ink-3:#8a7d6c;--bg-0:#14100c;--bg-1:#2a2018}
:root[data-theme=dark2]{--cream:#023859;--cream-hi:#0d4a72;--cream-deep:#012a47;--ink:#e6f8fb;--ink-2:#9fc9d6;--ink-3:#6b98ab;--bg-0:#010f26;--bg-1:#011c40;--good:#7bd88f;--bad:#ff8a80;--warn:#ffcf7a;--gold-1:#d3f5f9;--gold-2:#54acbf;--gold-3:#a7ebf2;--gold-4:#26658c;--g-hi:#d3f5f9;--g-mid:#a7ebf2;--g-lo:#54acbf;--g-edge:#54acbf;--g-text:#011c40;--g-tsh:rgba(255,255,255,.35);--g-sh:84 172 191;--g-in:rgba(255,255,255,.5);--g-glow:167 235 242}
/* Luna palette: A7EBF2 / 54ACBF / 26658C / 023859 / 011C40 */
:root[data-theme=dark3]{--cream:#222b25;--cream-hi:#2c372f;--cream-deep:#19201b;--ink:#e9efe8;--ink-2:#b2bdb1;--ink-3:#7b877a;--bg-0:#0f1511;--bg-1:#1b2620}
/* ---- special themes: built from the supplied palettes ---- */
/* Rose Gold (light): Rose Pearl Dust / Vibrant Rose Glimmer / Imperial Rose Gold / Noir Rose Gold Velvet */
:root[data-theme=rosegold]{--cream:#f9ebe5;--cream-hi:#fff6f2;--cream-deep:#ecd0ca;--ink:#2e1a1b;--ink-2:#7a5757;--ink-3:#a88886;--bg-0:#d9b3ae;--bg-1:#efd6d0;--sh-dark:140 84 84;
  --gold-1:#f4d6d1;--gold-2:#cf9a96;--gold-3:#9c5e5b;--gold-4:#6e3f3f;
  --g-hi:#f8dfda;--g-mid:#dba9a4;--g-lo:#b07878;--g-edge:#8c5555;--g-text:#3a1c1e;--g-tsh:rgba(255,240,236,.7);--g-sh:120 60 60;--g-glow:207 154 150}
/* Red Romance (dark): Red Rose #640A15/#4B040E/#3A0208 + Midnight Rose #9D3737/#E12D33/#9E2029 + Noguchi #75020f/#51080d/#2b0307 */
:root[data-theme=romance]{--cream:#3d0a11;--cream-hi:#4d0e17;--cream-deep:#2b0307;--ink:#f8e4e1;--ink-2:#d3a7a5;--ink-3:#9c6c6d;--bg-0:#0b0405;--bg-1:#2f050b;--good:#7bd88f;--bad:#ff8a80;--warn:#ffb36b;
  --gold-1:#f6b8ba;--gold-2:#e0454c;--gold-3:#ff7f86;--gold-4:#75020f;
  --g-hi:#ee6a6f;--g-mid:#c4232b;--g-lo:#8f1520;--g-edge:#5c0a12;--g-text:#fff0ee;--g-tsh:rgba(60,0,8,.6);--g-sh:225 45 51;--g-in:rgba(255,190,190,.4);--g-glow:225 45 51}
/* Gold Noir (dark, neon): black with orange-gold glow */
:root[data-theme=noir]{--cream:#1d120b;--cream-hi:#28180d;--cream-deep:#0f0805;--ink:#f7eee5;--ink-2:#cdb7a4;--ink-3:#8c7666;--bg-0:#080403;--bg-1:#1a0d06;--good:#7bd88f;--bad:#ff7b6b;--warn:#ffb04a;
  --gold-1:#ffc987;--gold-2:#ff8a2a;--gold-3:#ffa257;--gold-4:#7a3208;
  --g-hi:#ffb66b;--g-mid:#ff7a1a;--g-lo:#d9480a;--g-edge:#ffb066;--g-text:#1a0a03;--g-tsh:rgba(255,220,170,.5);--g-sh:255 106 19;--g-in:rgba(255,235,200,.55);--g-glow:255 122 26}
:root[data-theme=noir] .panel,:root[data-theme=noir] .rail{box-shadow:var(--raise),inset 0 0 0 1px rgba(255,138,42,.16)}
:root[data-theme=noir] .btn.gold,:root[data-theme=noir] .plate,:root[data-theme=noir] .tabbar .fab{box-shadow:var(--raise-sm),0 0 16px rgb(var(--g-sh)/.5)}
:root[data-theme=noir] .ni.active{box-shadow:var(--press),0 0 14px rgb(var(--g-sh)/.25)}
:root[data-theme=romance] .panel{box-shadow:var(--raise),inset 0 0 0 1px rgba(225,45,51,.14)}
:root[data-theme=romance] .btn.gold,:root[data-theme=romance] .plate,:root[data-theme=romance] .tabbar .fab{box-shadow:var(--raise-sm),0 0 12px rgb(var(--g-sh)/.35)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:15px/1.5 var(--sans);color:var(--ink);min-height:100vh;background:linear-gradient(160deg,var(--bg-1),var(--bg-0));background-attachment:fixed}
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.num{font-variant-numeric:tabular-nums}
.cap{font-size:12px;color:var(--ink-3)}
.muted{color:var(--ink-2)}
.up{color:var(--bad);font-weight:600}.down{color:var(--good);font-weight:600}

/* ---------- layout ---------- */
.app{display:grid;grid-template-columns:232px 1fr;gap:18px;padding:16px;min-height:100vh;max-width:1500px;margin:0 auto}
.rail{position:sticky;top:16px;align-self:start;height:calc(100vh - 32px);display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:24px;background:var(--cream);box-shadow:var(--raise)}
.brand{display:flex;align-items:center;gap:12px;font:600 23px "Cormorant Garamond",Georgia,serif;letter-spacing:.2em;margin:6px 6px 20px;color:var(--ink)}
.brand .mark{width:52px;height:52px;padding:7px;box-sizing:border-box;object-fit:contain;flex:none;border-radius:16px;background:linear-gradient(145deg,var(--cream-hi),var(--cream-deep));box-shadow:var(--raise-sm)}
.brand span{display:block;line-height:1.05}
.brand i{font-style:normal;color:#b8734b}
:root[data-mode=dark] .brand i{color:#e0a27c}
.brand small{display:block;font:600 8.5px var(--f-sub);letter-spacing:.3em;color:var(--gold-3);margin-top:4px}
.ni{position:relative;display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:14px;font-weight:500;color:var(--ink-2);cursor:pointer;transition:box-shadow .3s var(--ease),color .2s}
.ni:hover{box-shadow:var(--raise-sm)}
.ni.active{color:var(--gold-3);font-weight:700;box-shadow:var(--press)}
/* gold "C" edge: follows the pill's rounded left corners */
.ni.active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:18px;border-left:4px solid var(--gold-2);border-radius:14px 0 0 14px;filter:drop-shadow(-1px 0 4px color-mix(in srgb,var(--gold-2) 65%,transparent));pointer-events:none}
.ic{width:21px;height:21px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rail .sp{flex:1}
.who{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;box-shadow:var(--press);font-size:12px}
.who i{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e9a24a,#7a3b18);background-size:cover;background-position:center;flex:none}
.oav{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e9a24a,#7a3b18);background-size:cover;background-position:center;display:inline-block;flex:none}
.themes{display:flex;gap:12px;flex-wrap:wrap}
.themes .seg button{display:inline-flex;align-items:center;gap:8px}
.dot{width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(150,140,125,.75)}
.who b{display:block;font-size:13px}.who span{font-size:11px;color:var(--ink-3)}
.main{min-width:0;display:flex;flex-direction:column;gap:18px;padding-bottom:40px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:6px 4px 0}
.top h1{font-size:30px;line-height:1.1}
.top .sub{color:var(--ink-2);font-size:14px}
.tools{display:flex;gap:10px;align-items:center;position:relative}
.tabbar{display:none}
.panel{background:var(--cream);border-radius:var(--r-lg);padding:20px;box-shadow:var(--raise)}
.panel>header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.panel h2{font-size:19px}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}
.g-dash{grid-template-columns:1.25fr 1fr}
@media(max-width:1100px){.g-dash,.g3{grid-template-columns:1fr}}

/* ---------- controls ---------- */
.btn{font:600 14px var(--sans);color:var(--ink);background:var(--cream);border:0;border-radius:var(--r-md);padding:11px 18px;cursor:pointer;box-shadow:var(--raise-sm);transition:box-shadow .3s var(--ease),transform .15s;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn:active,.btn.on{box-shadow:var(--press);transform:none}
.btn.gold{color:var(--g-text);text-shadow:none;background:linear-gradient(145deg,color-mix(in srgb,var(--g-hi) 80%,#fff),var(--g-mid));border:0;box-shadow:var(--raise-sm)}
.btn.gold:active{background:linear-gradient(145deg,var(--g-mid),color-mix(in srgb,var(--g-hi) 80%,#fff));box-shadow:var(--press)}
.btn.sm{padding:8px 13px;font-size:13px}
.btn.ic-only{width:42px;height:42px;padding:0;justify-content:center;border-radius:50%}
.btn.danger{color:var(--bad)}
.btn[disabled]{opacity:.5;pointer-events:none}
.inp,select.inp,textarea.inp{font:15px var(--sans);color:var(--ink);background:var(--cream);border:0;border-radius:var(--r-md);padding:11px 14px;box-shadow:var(--press);outline:none;width:100%}
.inp:focus{box-shadow:var(--press),0 0 0 2px var(--gold-2)}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}
.field{display:flex;flex-direction:column;gap:6px}
.field>label{font-size:12px;color:var(--ink-2);font-weight:500}
.hint{font-size:13px;color:var(--gold-3);font-weight:700}
.frow{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.seg{display:inline-flex;align-self:flex-start;max-width:100%;padding:4px;border-radius:14px;box-shadow:var(--press);gap:4px;flex-wrap:wrap}
.seg button{border:0;background:none;color:var(--ink-2);font:600 13px var(--sans);padding:8px 14px;border-radius:10px;cursor:pointer}
.seg button.on{color:var(--gold-3);background:var(--cream);box-shadow:var(--raise-sm)}
.switch{position:relative;width:52px;height:30px;border-radius:16px;box-shadow:var(--press);cursor:pointer;flex:none;border:0;background:var(--cream)}
.switch::after{content:"";position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:50%;background:var(--cream-hi);box-shadow:var(--raise-sm);transition:transform .3s var(--ease),background .3s}
.switch.on::after{transform:translateX(22px);background:linear-gradient(180deg,var(--g-hi),var(--g-lo))}
.switch[disabled]{opacity:.5;cursor:not-allowed}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:14px;background:var(--cream);box-shadow:var(--raise-sm);font-size:14px;font-weight:600;cursor:pointer;border:0;color:var(--ink)}
.search{position:relative;flex:1;min-width:160px;max-width:320px}
.search .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--ink-3)}
.search .inp{padding-left:40px}
.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;background:var(--cream);box-shadow:var(--press);color:var(--ink-2)}
.pill.master{color:var(--gold-3)}

/* dropdown */
.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;background:var(--cream);border-radius:var(--r-md);box-shadow:var(--raise);padding:8px;z-index:30;display:none}
.menu.open{display:block}
.menu button{display:flex;width:100%;justify-content:space-between;align-items:center;border:0;background:none;color:var(--ink);font:500 14px var(--sans);padding:10px 12px;border-radius:10px;cursor:pointer;text-align:left}
.menu button:hover,.menu button.on{box-shadow:var(--press)}
.menu hr{border:0;height:1px;background:rgba(120,96,62,.2);margin:6px 0}

/* ---------- hero ring (flat gold + pressed well) ---------- */
.svgring{position:relative;display:grid;place-items:center}
.svgring svg{display:block}
.svgring .mid{position:absolute;text-align:center;border-radius:50%;display:grid;place-content:center;background:linear-gradient(145deg,var(--cream-deep),var(--cream-hi));box-shadow:inset 6px 7px 12px rgb(var(--sh-dark)/.34),inset -5px -5px 10px rgba(255,255,255,.95),0 1px 0 rgba(255,255,255,.9)}
:root[data-mode=dark] .svgring .mid{background:var(--cream-deep);box-shadow:inset 5px 6px 10px rgba(0,0,0,.6),inset -3px -3px 8px rgba(255,240,210,.06)}
.mid b{font:500 34px/1 var(--serif);display:block}
.mid span{font-size:12px;color:var(--ink-2)}
.hero{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center}
@media(max-width:640px){.hero{grid-template-columns:1fr;justify-items:center;text-align:center}}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;width:100%}
.kpi{background:var(--cream);border-radius:var(--r-md);padding:14px 16px;box-shadow:var(--raise-sm);text-align:left}
.kpi small{color:var(--ink-2);font-size:13px}
.kpi strong{display:block;font:500 26px var(--serif);margin:2px 0}
.tick{height:6px;border-radius:4px;box-shadow:var(--press);margin-top:8px;overflow:hidden}
.tick i{display:block;height:100%;background:linear-gradient(180deg,var(--gold-1),var(--g-lo));border-radius:4px}

/* ---------- lists, cards ---------- */
.feed{display:flex;flex-direction:column;gap:6px}
.frow2{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;cursor:pointer;transition:box-shadow .25s}
.frow2:hover{box-shadow:var(--raise-sm)}
.thumb{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:22px;flex:none;box-shadow:var(--raise-sm);background:linear-gradient(145deg,var(--cream-hi),var(--cream-deep))}
.grow{flex:1;min-width:0}
.grow b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(262px,1fr))}
/* recipe card: outer raised card, pillowy image frame with depth, frosted label, pressed stats tray */
.rc{background:var(--cream);border-radius:28px;padding:10px;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s;box-shadow:var(--raise),inset 0 0 0 1.5px rgba(255,255,255,var(--rim,.9))}
.rc:hover{transform:translateY(-3px)}
.rc-img{position:relative;height:172px;border-radius:22px;overflow:hidden;background-size:cover;background-position:center;display:grid;place-items:center;
  box-shadow:0 14px 18px -8px rgb(var(--sh-dark)/.5),0 2px 5px rgb(var(--sh-dark)/.25)}
.rc-img::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.42));z-index:1;pointer-events:none}
.rc-img::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  box-shadow:inset 0 3px 8px rgba(255,255,255,.4),inset 0 -22px 30px rgba(0,0,0,.28),inset 0 0 28px rgba(0,0,0,.26)}
.rc-img .emo{font-size:68px;filter:drop-shadow(0 8px 8px rgba(0,0,0,.25));margin-bottom:22px}
.rc-glass{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px 9px 13px;border-radius:17px;color:#fff;
  background:rgba(34,22,14,.30);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);border:1px solid rgba(255,255,255,.3);box-shadow:0 5px 12px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.25)}
.rc-glass .tt{min-width:0}
.rc-glass b{display:block;font:600 15px var(--serif);text-shadow:0 1px 3px rgba(0,0,0,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-glass .sb{display:block;font-size:11px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-pct{flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:13px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.32);font:600 14px var(--sans);font-variant-numeric:tabular-nums}
.sdot{width:8px;height:8px;border-radius:50%;box-shadow:0 0 8px currentColor;background:currentColor}
.rc-pct .c-good{color:#6fe08c}.rc-pct .c-warn{color:#ffcf6b}.rc-pct .c-bad{color:#ff8578}
.rc-tray{margin:10px 2px 2px;padding:13px 6px 12px;border-radius:20px;box-shadow:var(--press)}
.rc-stats{display:grid;grid-template-columns:1fr 1fr 1fr}
.rc-stats>div{padding:0 10px;border-left:1px solid rgba(120,96,62,.2);min-width:0}
.rc-stats>div:first-child{border-left:0}
.rc-stats b{display:block;font:600 14px var(--serif);font-variant-numeric:tabular-nums;white-space:nowrap}
.rc-stats small{display:block;font-size:10.5px;color:var(--ink-3);line-height:1.25;margin-top:2px}
.rc-bar{position:relative;height:7px;border-radius:5px;box-shadow:var(--press);margin:13px 12px 0}
.rc-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:linear-gradient(180deg,var(--gold-1),var(--g-lo))}
.rc-bar u{position:absolute;top:-4px;width:2px;height:15px;background:var(--ink-2);border-radius:1px}
.well{display:inline-block;text-align:center;padding:8px 12px;border-radius:12px;background:var(--cream);box-shadow:var(--press);font-weight:700;font-variant-numeric:tabular-nums;font-size:15px;line-height:1.1}
.well small{display:block;font-weight:500;font-size:10px;color:var(--ink-3)}
.c-good{color:var(--good)}.c-warn{color:var(--warn)}.c-bad{color:var(--bad)}

/* ---------- tables ---------- */
.tbl{border-radius:var(--r-md);padding:8px 14px 14px;box-shadow:var(--raise-sm);overflow-x:auto;background:var(--cream)}
table{width:100%;border-collapse:separate;border-spacing:0 8px;font-size:14px}
th{font:600 11px var(--f-sub);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:6px 10px;white-space:nowrap}
td{padding:8px 10px;vertical-align:middle}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
td small.sub,.sub{display:block;color:var(--ink-3);font-size:12px}
tr.click{cursor:pointer}
tr.click:hover td{background:color-mix(in srgb,var(--gold-2) 10%,transparent)}
tr.click td:first-child{border-radius:12px 0 0 12px}tr.click td:last-child{border-radius:0 12px 12px 0}
.plate{display:inline-block;min-width:140px;text-align:right;padding:11px 16px;border-radius:13px;font:600 18px var(--serif);color:var(--g-text);background:linear-gradient(145deg,color-mix(in srgb,var(--g-hi) 80%,#fff),var(--g-mid));border:0;box-shadow:var(--raise-sm)}
.tbl .inp{padding:8px 10px;border-radius:10px}
.tbl select.inp{padding-right:28px}

/* ---------- recipe editor ---------- */
.ed{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;align-items:start}
@media(max-width:1100px){.ed{grid-template-columns:1fr}}
.photo{position:relative;height:190px;border-radius:var(--r-md);box-shadow:var(--press);display:grid;place-items:center;text-align:center;color:var(--ink-3);overflow:hidden;cursor:pointer;background-size:cover;background-position:center}
.photo input{position:absolute;inset:0;opacity:0;cursor:pointer}
.photo b{display:block;font-size:44px}
.sumrow{display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid rgba(120,96,62,.15);font-size:14px}
.sumrow:first-of-type{border-top:0}
details.adv{margin-top:14px;border-radius:var(--r-md);box-shadow:var(--raise-sm);padding:12px 16px}
details.adv summary{cursor:pointer;font-weight:600;list-style:none}
details.adv[open] summary{margin-bottom:12px}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-size:14px;cursor:pointer;margin-bottom:4px}

/* ---------- sheet (modal) ---------- */
.veil{position:fixed;inset:0;background:rgba(40,28,14,.42);display:none;align-items:center;justify-content:center;padding:16px;z-index:50}
.veil.open{display:flex}
.sheet{width:100%;max-width:480px;max-height:92vh;overflow:auto;background:var(--cream);border-radius:var(--r-lg);padding:22px;box-shadow:var(--raise);display:flex;flex-direction:column;gap:14px}
.sheet h2{font-size:20px}
.sheet .acts{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--cream);padding:11px 18px;border-radius:14px;font-size:14px;opacity:0;pointer-events:none;transition:.35s var(--ease);z-index:80}
.toast.show{opacity:1;transform:translateX(-50%)}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login .card{width:100%;max-width:400px;background:var(--cream);border-radius:26px;padding:34px 28px;box-shadow:var(--raise);display:flex;flex-direction:column;gap:16px}
.login .brand{flex-direction:column;text-align:center;font-size:34px;margin:0 0 6px;gap:10px}
.login .brand .mark{width:108px;height:108px;padding:16px;border-radius:50%;box-shadow:var(--raise)}
.login .tools{justify-content:center}

/* ---------- chart ---------- */
.chart{width:100%;height:auto;display:block}
.chart text{font:11px var(--f-sub);fill:var(--ink-3)}

/* ---------- mobile ---------- */
@media(max-width:860px){
  .app{grid-template-columns:1fr;padding:12px 12px 96px}
  .rail{display:none}
  .top h1{font-size:24px}
  .tabbar{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));height:60px;border-radius:22px;background:var(--cream);box-shadow:var(--raise);align-items:center;justify-content:space-around;z-index:40}
  .tabbar a{display:grid;place-items:center;width:52px;height:46px;color:var(--ink-3);border-radius:14px}
  .tabbar a.active{color:var(--gold-3);box-shadow:var(--press)}
  .tabbar .fab{width:48px;height:48px;border-radius:50%;margin-top:-24px;color:var(--g-text);background:linear-gradient(145deg,color-mix(in srgb,var(--g-hi) 80%,#fff),var(--g-mid));border:0;box-shadow:var(--raise-sm)}
  .g2{grid-template-columns:1fr}
  .panel{padding:16px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Event Planner ---------- */
.ev-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.ev{display:flex;gap:14px;padding:16px;border-radius:24px;background:var(--cream);box-shadow:var(--raise),inset 0 0 0 1.5px rgba(255,255,255,var(--rim,.9));cursor:pointer;transition:transform .25s var(--ease)}
.ev:hover{transform:translateY(-3px)}
.ev-date{flex:none;width:62px;height:72px;border-radius:18px;display:grid;place-content:center;text-align:center;box-shadow:var(--press);color:var(--gold-3)}
.ev-date b{font:600 26px/1 var(--serif);color:var(--ink)}
.ev-date span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-top:2px}
.ev-main{flex:1;min-width:0}
.ev-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ev-top h3{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-bar{height:8px;border-radius:5px;box-shadow:var(--press);margin:12px 0 8px;position:relative;overflow:hidden}
.ev-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(180deg,var(--gold-1),var(--g-lo))}
.ev-bar i.over{background:linear-gradient(180deg,#ff9b8f,var(--bad))}
.ev-nums{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--ink-2);flex-wrap:wrap}
.ev-nums b{color:var(--ink)}
.pill.st-draft,.pill.st-notbought{color:var(--ink-3)}.pill.st-planned,.pill.st-extra{color:var(--gold-3)}
.pill.st-purchased,.pill.st-ok{color:var(--good)}.pill.st-done{color:var(--ink-2)}.pill.st-short{color:var(--bad)}
.evl{display:grid;grid-template-columns:1fr 310px;gap:18px;align-items:start}
.evl-side{position:sticky;top:16px}
@media(max-width:1100px){.evl{grid-template-columns:1fr}.evl-side{position:static}}
.res-msg{margin-top:12px;padding:10px 12px;border-radius:12px;box-shadow:var(--press);font-size:14px}
.res-msg.ok b{color:var(--good)}.res-msg.bad b{color:var(--bad)}
.evl>div{min-width:0}
.evl-side{min-width:0}
.tbl table{min-width:0}

/* quick-add bottom sheet */
.tabbar .fab{border:0;cursor:pointer;display:grid;place-items:center;font:inherit}
.veil.bottom{align-items:flex-end;padding:0}
.veil.bottom .sheet{max-width:none;border-radius:26px 26px 0 0;padding-bottom:calc(22px + env(safe-area-inset-bottom));animation:sheetUp .28s var(--ease)}
@keyframes sheetUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.qa-list{display:flex;flex-direction:column;gap:10px}
.qa-item{display:flex;align-items:center;gap:14px;text-align:left;border:0;cursor:pointer;color:var(--ink);font:inherit;background:var(--cream);border-radius:18px;padding:12px 14px;box-shadow:var(--raise-sm);transition:box-shadow .25s}
.qa-item:active{box-shadow:var(--press)}
.qa-item .grow b{display:block}
.qa-item .cap{display:block;white-space:normal}

/* the "+" sits inside the bar, flush with the other keys */
.tabbar .fab{width:46px;height:46px;margin-top:0;border-radius:16px}
.tabbar .fab .ic{width:22px;height:22px}