/* ==========================================================================
   Embla · EMBER MINIMAL — flaches Dark (KEIN Glow/Verlauf), Gelb als Akzent
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#161618;           /* flaches Anthrazit */
  --surface:#202023;      /* Karte */
  --surface-2:#2a2a2e;
  --ink:#f3f1ec;          /* Text */
  --ink-2:#b8b4ac;
  --ink-3:#7c7a73;
  --line:#312f33;
  --yellow:#facc15;       /* einziger Akzent */
  --yellow-ink:#1c1605;
  --font:'Inter',system-ui,sans-serif;
  --r:14px; --r-l:20px; --r-xl:26px; --r-pill:999px;
  --ease:cubic-bezier(0.2,0.8,0.2,1);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased}
body{font-family:var(--font);color:var(--ink);background:var(--bg)}

.stage{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;background:#0d0d0f}
.phone{width:390px;height:844px;background:#000;border-radius:54px;padding:11px;position:relative;box-shadow:0 50px 90px -42px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06)}
.screen{width:100%;height:100%;border-radius:44px;overflow:hidden;position:relative;background:var(--bg);display:flex;flex-direction:column}
.island{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:122px;height:34px;background:#000;border-radius:20px;z-index:60}
.statusbar{height:54px;flex:none;display:flex;align-items:flex-end;justify-content:space-between;padding:0 26px 8px;color:#fff;font:600 15px/1 var(--font)}
.statusbar.abs{position:absolute;top:0;left:0;right:0;z-index:30}
.sb-r{display:flex;gap:7px;align-items:center}
.canvas{flex:1;overflow-y:auto}.canvas::-webkit-scrollbar{display:none}

.appbar{display:flex;align-items:center;justify-content:space-between;padding:6px 20px 12px;flex:none}
.brand{display:flex;align-items:center;gap:8px;font:800 21px/1 var(--font);letter-spacing:-.02em;color:#fff}
.brand .mk{color:var(--yellow)}
.iconbtn{width:40px;height:40px;border-radius:50%;background:var(--surface);border:1px solid var(--line);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer}

.t-display{font:800 38px/1.0 var(--font);letter-spacing:-.03em}
.t-h1{font:800 28px/1.04 var(--font);letter-spacing:-.025em}
.t-h2{font:700 22px/1.1 var(--font);letter-spacing:-.02em}
.over{font:700 11px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

.btn{border:none;cursor:pointer;font:700 16px/1 var(--font);border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:16px 22px;transition:transform .12s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-yellow{background:var(--yellow);color:var(--yellow-ink)}
.btn-soft{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.btn-ghost{background:none;color:var(--ink-2)}
.btn-block{width:100%}

.pill{display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--font);padding:9px 14px;border-radius:var(--r-pill);background:var(--surface);color:var(--ink-2);border:1px solid var(--line)}
.pill-yellow{background:var(--yellow);color:var(--yellow-ink);border-color:transparent}

.vchip{width:18px;height:18px;border-radius:50%;background:var(--yellow);display:inline-flex;align-items:center;justify-content:center;color:var(--yellow-ink);flex:none}
.vchip svg{width:11px;height:11px}
.verline{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);color:#fff;font:700 12px/1 var(--font);padding:7px 12px 7px 8px;border-radius:var(--r-pill);border:1px solid var(--line)}
.verline .vchip{background:var(--yellow);color:var(--yellow-ink)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl)}
.prompt{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:18px 20px}
.prompt .pl{font:700 11px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--yellow)}
.prompt .pa{margin-top:8px;font:600 18px/1.34 var(--font);color:#fff;letter-spacing:-.01em}

.tabbar{height:84px;flex:none;background:var(--bg);border-top:1px solid var(--line);display:flex;align-items:flex-start;justify-content:space-around;padding:12px 12px 0}
.tab{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;color:var(--ink-3);font:600 11px/1 var(--font);cursor:pointer}
.tab.active{color:#fff}.tab.active .ico{color:var(--yellow)}

.input{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;font:500 16px/1.2 var(--font);color:#fff}
.input:focus{outline:none;border-color:var(--yellow)}
.input::placeholder{color:var(--ink-3)}
.divider{height:1px;background:var(--line)}
.online{width:12px;height:12px;border-radius:50%;background:#3ad07f;border:2.5px solid var(--surface)}