:root { --bg:#121412; --panel:#1b1e1b; --panel2:#232723; --text:#eef1ea; --muted:#9aa394; --faint:#6b7366;
  --lime:#c6f432; --amber:#f2b23a; --pink:#ff6b9a; --blue:#6fb6ff; --mono: ui-monospace, "SF Mono", Menlo, monospace; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; background:var(--bg); color:var(--text); font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
header { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px; background:rgba(18,20,18,.94); backdrop-filter:blur(8px); }
.brand { font-weight:700; font-size:1.15rem; display:flex; align-items:center; gap:8px; }
.dot { width:11px; height:11px; border-radius:50%; background:var(--lime); }
main { padding:6px 14px calc(110px + env(safe-area-inset-bottom)); max-width:640px; margin:0 auto; }
.pad { padding:16px 4px; }
.muted { color:var(--muted); } .faint { color:var(--faint); font-size:.85rem; }
.chip { background:var(--panel2); color:var(--text); border:0; border-radius:99px; padding:6px 12px; font:600 .8rem var(--mono); }
.btn { display:block; width:100%; border:0; border-radius:14px; padding:15px; font:700 1rem system-ui; background:var(--panel2); color:var(--text); }
.btn.primary { background:var(--lime); color:#141a05; }
.btn.small { display:inline-block; width:auto; padding:9px 14px; font-size:.88rem; }
.row { display:flex; gap:10px; } .row > * { flex:1; }
.card { background:var(--panel); border-radius:16px; padding:14px; margin:12px 0; }
.card h3 { margin:0 0 6px; font-size:1rem; }
.card.ask { border:1px solid var(--amber); }
.fab { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(18px + env(safe-area-inset-bottom)); z-index:6;
  width:min(92vw,600px); display:flex; gap:10px; }
.fab .btn { box-shadow:0 8px 24px rgba(0,0,0,.45); }
.item { display:flex; gap:12px; align-items:center; background:var(--panel); border-radius:14px; padding:10px; margin:10px 0; text-decoration:none; color:inherit; }
.item img { width:68px; height:68px; object-fit:cover; border-radius:10px; background:var(--panel2); flex:none; }
.item .t { font-weight:600; font-size:.95rem; } .item .s { font-size:.8rem; color:var(--muted); margin-top:2px; }
.badge { display:inline-block; border-radius:8px; padding:3px 8px; font:700 .74rem var(--mono); }
.b-einzeln { background:var(--lime); color:#141a05; } .b-buendeln { background:var(--blue); color:#04121f; }
.b-zurueckstellen { background:var(--panel2); color:var(--muted); } .b-detail { background:var(--amber); color:#241600; }
.b-wait { background:var(--panel2); color:var(--text); } .b-err { background:var(--pink); color:#2a0010; }
.thumbs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:8px 0 12px; }
.thumbs img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; }
textarea { width:100%; min-height:90px; border-radius:12px; border:1px solid var(--panel2); background:var(--bg); color:var(--text);
  padding:10px; font:inherit; resize:vertical; }
input[type=number], input[type=password], input[type=text] { width:100%; border-radius:12px; border:1px solid var(--panel2); background:var(--bg);
  color:var(--text); padding:12px; font:inherit; }
.mic.rec { background:var(--pink); color:#2a0010; }
.big { font:700 1.6rem var(--mono); color:var(--lime); }
.kv { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:.9rem; margin:8px 0; }
.kv b { color:var(--muted); font-weight:500; }
table { width:100%; border-collapse:collapse; font-size:.85rem; } td { padding:5px 2px; border-top:1px solid var(--panel2); }
td.r { text-align:right; font-family:var(--mono); } tr.on td { color:var(--lime); }
.ev { font-size:.82rem; margin:6px 0; word-break:break-word; } .ev a { color:var(--blue); }
details summary { cursor:pointer; color:var(--muted); font-size:.9rem; margin:8px 0; }
.back { background:none; border:0; color:var(--muted); font:600 .95rem system-ui; padding:8px 0; }
.judge { display:flex; gap:10px; align-items:center; padding:8px 0; border-top:1px solid var(--panel2); }
.judge img { width:44px; height:44px; border-radius:8px; object-fit:cover; }
.judge .t { flex:1; font-size:.85rem; } .judge .p { font:700 .9rem var(--mono); }
.seg { display:flex; gap:6px; } .seg button { flex:1; } .seg button.on { background:var(--lime); color:#141a05; }
.spin { display:inline-block; width:12px; height:12px; border:2px solid var(--muted); border-top-color:transparent; border-radius:50%; animation:s 1s linear infinite; vertical-align:-1px; }
@keyframes s { to { transform:rotate(360deg); } }
#toast { position:fixed; left:50%; top:calc(64px + env(safe-area-inset-top)); transform:translateX(-50%) translateY(-20px); opacity:0; z-index:9;
  background:var(--pink); color:#2a0010; font-weight:600; padding:10px 16px; border-radius:12px; max-width:90vw; transition:.25s; pointer-events:none; }
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.new { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--lime); margin-right:6px; vertical-align:2px; }
.btn:disabled { opacity:.4; }
.chip { white-space:nowrap; }
.brand { white-space:nowrap; }