/* Design tokens: light and dark follow the phone's setting. */
:root{
  --bg:#f3f6f4;--surface:#fff;--surface-2:#eef3f0;--ink:#15221c;--muted:#5f7068;--line:#e0e7e3;
  --brand:#1f7a5a;--brand-ink:#fff;--brand-soft:#dcf2e8;--danger:#c0392b;--danger-soft:#fbe9e6;
  --radius:16px;--shadow:0 1px 2px rgba(16,32,25,.05),0 6px 18px rgba(16,32,25,.06);color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{
  --bg:#0d1411;--surface:#16201b;--surface-2:#1c2924;--ink:#e8f0ec;--muted:#93a69c;--line:#27362f;
  --brand:#3fb68b;--brand-ink:#07130d;--brand-soft:#173a2d;--danger:#ff7b6b;--danger-soft:#3a1d19;--shadow:none}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
h2{font-size:22px;letter-spacing:-.01em;margin:4px 0 2px}
h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:18px 4px 8px;font-weight:600}
details h3{margin:12px 16px 4px}
a{color:var(--brand)}

/* Shell */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:8px;
  padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px;background:color-mix(in srgb,var(--bg) 82%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top h1{margin:0;font-size:20px;font-weight:700;letter-spacing:-.01em}
.back{font-size:28px;line-height:1;text-decoration:none;color:var(--brand);padding:0 8px 4px 0}.back[hidden]{display:none}
main{max-width:720px;margin:0 auto;padding:16px}
.tabbar{position:fixed;inset:auto 0 0 0;z-index:20;display:flex;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px 6px;min-height:58px;color:var(--muted);text-decoration:none;font-size:11px}
.tabbar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabbar a[aria-current=page]{color:var(--brand);font-weight:600}

/* Cards and lists */
details,.add-form,#list,#plist,#found,#cand,.menu{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
#list:empty,#plist:empty,#found:empty,#cand:empty{display:none}
details{margin-bottom:10px}
summary{list-style:none;display:flex;align-items:center;gap:10px;padding:16px;min-height:56px;font-weight:600;cursor:pointer}
summary::-webkit-details-marker{display:none}
summary::after{content:"›";margin-left:4px;color:var(--muted);font-size:22px;transition:transform .15s}
details[open]>summary::after{transform:rotate(90deg)}
summary .m{margin-left:auto;background:var(--surface-2);padding:2px 10px;border-radius:999px;font-weight:500}
.prod,.line,.cat-row{border-top:1px solid var(--line)}
#list>.prod:first-child,#plist>.prod:first-child,#found>.prod:first-child,#cand>.prod:first-child,.cat-row:first-of-type{border-top:0}
.prod-head{display:block;width:100%;text-align:left;background:none;border:0;padding:14px 16px;min-height:56px;color:inherit;font:inherit;cursor:pointer}
.prod-head:active{background:var(--surface-2)}
.n{display:block;font-weight:600}
.m{display:block;font-size:13px;color:var(--muted)}
.prod.alert{box-shadow:inset 4px 0 0 var(--danger)}.prod.alert .n{color:var(--danger)}
.line{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px}
.line .m{display:block}
.empty,p.m{padding:8px 4px}
.prod-form{display:flex;flex-wrap:wrap;gap:12px;align-items:end;padding:6px 16px 16px;background:var(--surface-2)}
.prod-form[hidden]{display:none}
label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.prod-form input:not([type=checkbox]){width:110px}
.prod-form input.p-name,.prod-form input.c-name,.prod-form input.s-name,.add-form input.c-name{width:min(100%,260px)}
.boxes{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 16px;width:100%}.boxes legend{font-size:12px;color:var(--muted);padding:0 0 4px}
label.box{flex-direction:row;align-items:center;gap:8px;font-size:14px;color:var(--ink)}
label.box input{width:20px;height:20px;min-height:0;accent-color:var(--brand)}
.add-form{display:flex;flex-wrap:wrap;gap:12px;align-items:end;padding:16px;margin-bottom:14px}
.add-form .prod-form{background:none;padding:0;width:100%}
.start{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-bottom:14px}

/* Controls */
input,select{font:inherit;font-size:16px;min-height:48px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);max-width:100%}
input[type=search]{width:100%;margin-bottom:12px}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.row-btn,.save,.bar button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border:1px solid var(--brand);border-radius:12px;
  background:var(--brand);color:var(--brand-ink);font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.row-btn.alt{background:transparent;color:var(--brand)}
.row-btn:active,.save:active,.bar button:active{transform:scale(.98)}
[data-a^=archive]{color:var(--danger)!important;border-color:var(--danger)!important;background:transparent!important}
.tabs{display:flex;gap:4px;padding:4px;margin-bottom:14px;background:var(--surface-2);border-radius:14px}
.tabs .row-btn{flex:1;border:0;min-height:40px;background:transparent;color:var(--muted)}
.tabs .row-btn.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.err{color:var(--danger);font-size:14px;width:100%}.err:empty{display:none}
.bar{position:sticky;bottom:calc(66px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:16px;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.bar b{font-size:20px}
.menu{margin-bottom:14px}
.menu a,.menu-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px;color:var(--ink);text-decoration:none;font-size:16px;border-top:1px solid var(--line)}
.menu a:first-child,.menu-row:first-child{border-top:0}.menu a .m{font-size:22px}
.menu-row{flex-direction:row;color:var(--ink)}

/* Feedback */
.loading{color:var(--muted);text-align:center;padding:48px 0}
.loading::before{content:"";display:block;width:26px;height:26px;margin:0 auto 12px;border:3px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite}
.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:30;padding:10px 18px;border-radius:999px;
  background:var(--ink);color:var(--bg);font-size:14px;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.25);animation:pop .2s ease-out}
.flash{animation:flash 1.2s ease-out}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{from{opacity:0;transform:translate(-50%,8px)}}
@keyframes flash{from{background:var(--brand-soft)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}