:root{color-scheme:dark;--bg:#0e0f12;--card:#17181d;--line:rgba(255,255,255,.08);--text:#eceef2;--muted:#8b91a0;--acc:#0a84ff;--danger:#ff453a;--green:#30d158;--fill:rgba(120,120,128,.28);--field:#23252c;--btn:#0066d6;--btn-danger:#d63a30;--acc-text:#5aa9ff;--danger-text:#ff6b61}
html[data-mode=light]{color-scheme:light;--bg:#f4f5f7;--card:#fff;--line:rgba(60,60,67,.12);--text:#15171c;--muted:#5b6270;--acc:#007aff;--danger:#d93a31;--green:#28a745;--fill:rgba(120,120,128,.16);--field:#eef0f3;--btn:#0066d6;--btn-danger:#d63a30;--acc-text:#0062cc;--danger-text:#c4281f}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
main{max-width:36rem;margin:0 auto;padding:0 16px calc(40px + env(safe-area-inset-bottom))}
.top{position:sticky;top:0;z-index:4;margin:0 -16px;padding:calc(18px + env(safe-area-inset-top)) 16px 8px;background:var(--bg)}
header{display:flex;justify-content:space-between;align-items:center;gap:12px}
h1{font-size:2.1rem;line-height:1.05;font-weight:800;letter-spacing:-.03em;margin:0}
.sub{color:var(--muted);margin:.3rem 0 0}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
.icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--field);border:1px solid var(--line);color:var(--text);flex:none}
.icon svg{width:20px;height:20px}
.icon.plain{background:none;border:0;color:var(--muted);width:38px;height:38px}
.icon.plain:hover,.icon.plain:active{color:var(--text);background:var(--fill)}
.icon.plain.danger:hover,.icon.plain.danger:active{color:var(--danger)}
.cap{margin:1.4rem .2rem .45rem;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.stats{display:flex;padding:14px 4px}.stats div{flex:1;text-align:center;min-width:0;padding:0 4px}.stats div+div{border-left:1px solid var(--line)}
.stats b{display:block;font-size:1.6rem;font-variant-numeric:tabular-nums}.stats small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.row{display:flex;align-items:center;gap:12px;padding:14px 16px}.row+.row{border-top:1px solid var(--line)}
.row b{display:block;font-weight:600}.row small{color:var(--muted)}.grow{flex:1;min-width:0}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;background:var(--c,#888)}
.sw{width:51px;height:31px;border-radius:999px;background:var(--fill);position:relative;flex:none;transition:background .15s}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4);transition:left .15s}
.sw[aria-checked=true]{background:var(--green)}.sw[aria-checked=true]::after{left:22px}
.state{font-size:12px;font-weight:600;color:var(--muted)}.state.on{color:var(--green)}
.search{display:flex;gap:8px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0 14px;margin-bottom:.7rem;color:var(--muted)}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font:inherit;font-size:16px;padding:11px 0}
.u{padding:14px 16px}.u+.u{border-top:1px solid var(--line)}.u .head{display:flex;align-items:center;gap:12px}
.av{width:40px;height:40px;border-radius:50%;background:var(--fill);display:grid;place-items:center;font-weight:700;flex:none;text-transform:uppercase}
.u .name{font-weight:600;overflow-wrap:anywhere}.u small{color:var(--muted);display:block}
.chips{display:flex;gap:8px;margin:10px 0 0 52px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 6px 5px 12px;border-radius:999px;font-size:13px;font-weight:600;color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent)}
.chip button{width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--c) 22%,transparent);color:inherit;display:grid;place-items:center;font-size:11px;line-height:1}
.chip.add{background:none;border:1px dashed var(--line);color:var(--muted);padding:5px 12px;font-weight:500}
.empty{color:var(--muted);text-align:center;padding:22px 16px}
.warn{margin:.6rem .2rem 0;color:var(--danger);font-size:13px}
.pillbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 18px;border-radius:999px;background:var(--btn);color:#fff;font-weight:600;font-size:15px}
.pillbtn.ghost{background:var(--field);color:var(--text)}
.pillbtn.danger{background:transparent;color:var(--danger-text);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--danger-text) 55%,transparent)}
dialog{background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:26px;width:min(92vw,420px);padding:18px}
dialog::backdrop{background:rgba(0,0,0,.5)}
dialog h2{margin:0 0 4px;font-size:1.25rem;letter-spacing:-.02em}
dialog p{margin:.3rem 0 .8rem;color:var(--muted)}
dialog label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:12px 2px 4px}
dialog input[type=text],dialog input[type=password],dialog input[type=email],dialog input[type=url]{width:100%;background:var(--field);border:1px solid transparent;color:var(--text);border-radius:14px;padding:12px 14px;font:inherit;font-size:16px;outline:0}
dialog input:focus{border-color:var(--acc)}
dialog input[type=color]{width:44px;height:36px;border:0;background:none;padding:0}
.btns{display:flex;gap:8px;margin-top:16px}.btns button{flex:1;min-height:48px;padding:13px;border-radius:999px;font-weight:600;background:var(--field)}
.btns .primary{background:var(--btn);color:#fff}.btns .danger{background:var(--btn-danger);color:#fff}
.err{color:var(--danger);font-size:13px;min-height:18px;margin-top:8px}
.seg{display:flex;gap:3px;padding:3px;background:var(--field);border-radius:999px}.seg button{flex:1;padding:9px 4px;border-radius:999px;font-size:14px;font-weight:500}
.seg button[aria-pressed=true]{background:var(--card);font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.menu button.item{display:flex;width:100%;text-align:left;padding:14px 4px;border-top:1px solid var(--line);font-weight:500}
.menu button.item.danger{color:var(--danger)}
.pick{display:flex;gap:8px;flex-wrap:wrap}.pick button{padding:7px 14px;border-radius:999px;background:var(--field);font-weight:600;font-size:14px;border:1px solid transparent}
.pick button[aria-pressed=true]{background:color-mix(in srgb,var(--c) 18%,transparent);color:var(--c);border-color:var(--c)}
.appbox{border-top:1px solid var(--line);padding:12px 0 4px}.appbox:first-of-type{border-top:0}
.appbox .line{display:flex;gap:8px;align-items:center}.appbox .line input[type=text],.appbox .line input[type=url]{flex:1}
.tok{font:12px ui-monospace,Menlo,monospace;color:var(--muted);overflow-wrap:anywhere;margin:6px 2px 0}
.scroll{max-height:70vh;overflow:auto}
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,20px);padding:11px 18px;border-radius:999px;background:var(--text);color:var(--bg);font-weight:500;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}#toast.err{background:var(--danger);color:#fff}
.login{min-height:100dvh;display:grid;place-items:center;padding:16px}.login form{width:min(100%,340px)}.login h1{margin-bottom:16px}
.login input{width:100%;background:var(--card);border:1px solid var(--line);color:var(--text);border-radius:14px;padding:13px;font-size:16px}
.login button.go{width:100%;margin-top:10px;background:var(--btn);color:#fff;border-radius:999px;padding:13px;font-weight:600}
@media(prefers-reduced-motion:reduce){.sw,.sw::after,#toast{transition:none}}
.new{color:var(--acc-text);font-size:11px;font-weight:700;margin-left:6px}
.menu.gap{margin-top:14px}.cap.tight{margin-top:12px}.appbox.first{border:0}
dialog{max-height:90vh;max-height:90dvh;overflow:auto;overscroll-behavior:contain}
.u.tap{cursor:pointer}.u.tap:active{background:var(--fill)}.u.tap:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.u .go{color:var(--muted);font-size:1.6rem;line-height:1;padding:0 4px}
.chip.none{background:none;border:1px dashed var(--line);color:var(--muted);padding:5px 12px;font-weight:500}
.chips{margin-left:52px}.muted{color:var(--muted)}
#userDlg .head{display:flex;align-items:center;gap:12px}#userDlg h2{margin:0;overflow-wrap:anywhere}
.card.inner{background:var(--field);border:0;border-radius:16px}.card.inner .row{padding:12px 14px}.card.inner .row+.row,.card.inner button.item+button.item{border-top:1px solid var(--line)}
.card.inner button.item{display:flex;width:100%;text-align:left;padding:14px;font-weight:500}.card.inner button.item.danger{color:var(--danger)}
.search[hidden]{display:none}.capbtns{display:flex;gap:10px;align-items:center}
.pillbtn.round{padding:0;width:44px}.pillbtn.ghost[aria-pressed=true]{background:color-mix(in srgb,var(--acc) 18%,transparent);color:var(--acc-text);box-shadow:inset 0 0 0 1.5px var(--acc-text)}
button:focus:not(:focus-visible),.u.tap:focus:not(:focus-visible){outline:none}
html[data-mode=light] .chip:not(.add):not(.none){color:color-mix(in srgb,var(--c) 55%,#000)}
html[data-mode=light] .pick button[aria-pressed=true]{color:color-mix(in srgb,var(--c) 55%,#000)}
.u .meta2{display:block;color:var(--muted);font-size:13px}
.seg button[aria-pressed=true]{color:var(--text)}
.swatch{appearance:none;-webkit-appearance:none;width:44px;height:44px;border:0;border-radius:50%;padding:0;background:none;overflow:hidden;flex:none;cursor:pointer}
.swatch::-webkit-color-swatch-wrapper{padding:0}.swatch::-webkit-color-swatch{border:2px solid var(--line);border-radius:50%}.swatch::-moz-color-swatch{border:2px solid var(--line);border-radius:50%}
.tok{font:13px ui-monospace,Menlo,monospace;color:var(--text);opacity:.8}
html[data-mode=light] .state.on{color:#1c7c34}

/* ===== Glas-Stil (wie im Sneakerinventory): einfarbiger Hintergrund, deckende Karten, Glas nur für Bedienelemente und Popups ===== */
:root{--glass:rgba(66,66,74,.40);--glass-hi:rgba(98,98,108,.46);--rim:rgba(255,255,255,.15);--sheet:rgba(38,38,42,.92);--seg-on:rgba(120,120,128,.55);
  --spec:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(255,255,255,.04);--lift:0 1px 3px rgba(0,0,0,.28);--soft:0 14px 38px rgba(0,0,0,.55)}
html[data-mode=light]{--glass:rgba(255,255,255,.56);--glass-hi:rgba(255,255,255,.82);--rim:rgba(255,255,255,.85);--sheet:rgba(250,250,252,.92);--seg-on:#fff;
  --spec:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.3);--soft:0 1px 1px rgba(30,40,80,.04),0 14px 34px rgba(30,40,80,.11)}
@media(prefers-reduced-transparency:reduce){:root{--glass:var(--sheet);--glass-hi:var(--sheet)}}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",system-ui,sans-serif;font-size:16px}
h1{font-size:2.2rem;letter-spacing:-.032em}
.card{border-radius:22px;border-color:color-mix(in srgb,var(--text) 7%,transparent)}
html[data-mode=light] .card{box-shadow:0 1px 2px rgba(0,0,0,.04)}
/* Bedienelemente aus Glas */
.icon,.pillbtn.ghost{background:var(--glass);border:1px solid var(--rim);box-shadow:var(--spec),var(--soft);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%)}
.pillbtn.ghost{box-shadow:var(--spec)}
.pillbtn{box-shadow:var(--lift)}
.pillbtn.danger{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--danger-text) 55%,transparent)}
.pillbtn.ghost[aria-pressed=true]{background:color-mix(in srgb,var(--acc) 18%,transparent);box-shadow:inset 0 0 0 1.5px var(--acc-text)}
.icon.plain{background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.search{background:var(--fill);border:0;border-radius:22px;padding:0 16px}
.search:focus-within{box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 55%,transparent)}
.seg{background:var(--fill);border-radius:999px}
.seg button[aria-pressed=true]{background:var(--seg-on);box-shadow:0 1px 4px rgba(0,0,0,.18)}
.chip{box-shadow:none}
/* Popups */
dialog{background:var(--sheet);border:1px solid var(--rim);border-radius:30px;box-shadow:var(--spec),0 20px 60px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%)}
dialog::backdrop{background:rgba(0,0,0,.34);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog input[type=text],dialog input[type=password],dialog input[type=email],dialog input[type=url]{background:var(--fill);border-radius:16px}
.card.inner{background:var(--fill)}
.btns button{background:var(--fill)}
.btns .primary{background:var(--btn);box-shadow:var(--lift)}.btns .danger{background:var(--btn-danger);box-shadow:var(--lift)}
.menu button.item{border-top-color:var(--line)}
#toast{background:var(--sheet);color:var(--text);border:1px solid var(--rim);box-shadow:var(--spec),var(--soft);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%)}
#toast.err{background:var(--sheet);color:var(--danger-text)}
/* Anmeldung */
.login input{background:var(--fill);border:0;border-radius:22px;padding:15px 16px}
.login input:focus{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 55%,transparent)}
.login button.go{box-shadow:var(--lift)}
header>div:first-child{min-width:0;flex:1}.sub{overflow-wrap:anywhere}

/* ===== Button-Regeln wie im Sneakerinventory (siehe STYLE.md) ===== */
:root{--btn:var(--acc);--lift:inset 0 1px 0 rgba(255,255,255,.42),0 1px 3px rgba(0,0,0,.28)}
html[data-mode=light]{--danger:#ff3b30}
/* Primär */
.pillbtn,.btns .primary,.login button.go{background:var(--acc);color:#fff;border:0;box-shadow:var(--lift)}
.pillbtn,.btns button,.login button.go{font-size:15px;font-weight:600;border-radius:999px}
/* Sekundär (Ghost) */
.pillbtn.ghost,.btns button,.seg-none{background:var(--fill);color:var(--acc);border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.btns .primary{background:var(--acc);color:#fff;box-shadow:var(--lift)}
/* Gefahr */
.pillbtn.danger,.btns .danger{background:var(--fill);color:var(--danger);border:0;box-shadow:none}
/* Chip (Lupe): Glas, aktiv = Akzent gefüllt */
.pillbtn.ghost.round{background:var(--glass-hi);color:var(--text);border:1px solid var(--rim);box-shadow:var(--spec)}
.pillbtn.ghost.round[aria-pressed=true]{background:var(--acc);color:#fff;border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 3px rgba(0,0,0,.28)}
/* Rundes Icon in der Kopfzeile */
.icon{color:var(--text)}
/* Umschalter */
.seg button[aria-pressed=true]{color:var(--text);font-weight:600}
/* Schalter (iOS-Switch) behält Grün */