:root { color-scheme: dark; --bg:#090b0f; --panel:#11151b; --panel2:#151a21; --line:#262e38; --text:#f4f6f8; --muted:#8e99a8; --accent:#c6ff42; }
* { box-sizing: border-box; }
body { margin:0; min-width:390px; min-height:600px; color:var(--text); background:#05070a; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button { font:inherit; }
.app { width:100%; min-height:600px; overflow:hidden; background:radial-gradient(circle at 78% -10%,rgba(198,255,66,.13),transparent 34%),var(--bg); }
.header { height:74px; padding:0 20px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line); }
.logo { width:42px; height:42px; display:grid; align-content:center; gap:4px; padding:9px; border-radius:12px; background:var(--accent); transform:rotate(-3deg); }
.logo span { display:block; height:3px; border-radius:4px; background:#11160a; }
.logo span:nth-child(2) { width:75%; }
.logo span:nth-child(3) { width:48%; }
.brand { flex:1; }
.brand strong,.brand small { display:block; }
.brand strong { font-size:16px; letter-spacing:-.02em; }
.brand small { margin-top:2px; color:var(--muted); font-size:10px; }
.mode { padding:5px 8px; border:1px solid #3e4a2c; border-radius:999px; color:var(--accent); background:rgba(198,255,66,.07); font-size:9px; font-weight:900; letter-spacing:.12em; }
.overview { margin:18px; padding:20px; display:flex; align-items:center; justify-content:space-between; gap:18px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,#151a20,#0e1116); }
.eyebrow { color:var(--accent); font-size:9px; font-weight:900; letter-spacing:.15em; }
.overview h1 { margin:5px 0 3px; font-size:20px; letter-spacing:-.04em; }
.overview h1 strong { font-size:34px; }
.overview p { max-width:220px; margin:0; color:var(--muted); font-size:10px; line-height:1.5; }
.score { width:72px; height:72px; display:grid; place-content:center; border:1px solid #546733; border-radius:50%; text-align:center; background:radial-gradient(circle,rgba(198,255,66,.12),transparent 65%); box-shadow:inset 0 0 0 6px rgba(198,255,66,.025); }
.score span { font-size:22px; font-weight:900; }
.score small { color:var(--muted); font-size:8px; }
.quick-grid { margin:0 18px; display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.action { min-height:86px; padding:13px; display:grid; grid-template-columns:30px 1fr; grid-template-rows:auto auto; column-gap:9px; border:1px solid var(--line); border-radius:14px; color:var(--text); background:var(--panel); text-align:left; cursor:pointer; transition:.18s ease; }
.action:hover { border-color:#48533b; transform:translateY(-1px); }
.action--primary { border-color:#4c5e2d; background:linear-gradient(140deg,rgba(198,255,66,.14),#11151b 62%); }
.action__icon { grid-row:1/3; width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:#11150a; background:var(--accent); font-weight:900; }
.action strong { align-self:end; font-size:11px; }
.action small { color:var(--muted); font-size:9px; }
.groups-section { margin:22px 18px 72px; }
.section-title { margin-bottom:10px; display:flex; justify-content:space-between; color:var(--muted); font-size:9px; font-weight:900; letter-spacing:.12em; }
.section-title small { font-weight:600; letter-spacing:0; }
.groups { display:grid; gap:7px; }
.group { padding:11px 13px; display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center; border:1px solid var(--line); border-radius:12px; background:var(--panel2); }
.group__icon { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; color:#14170f; background:var(--group-color,#c6ff42); font-size:12px; font-weight:900; text-transform:uppercase; }
.group strong,.group small { display:block; }
.group strong { max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.group small { margin-top:3px; color:var(--muted); font-size:9px; }
.group__count { min-width:28px; padding:5px 7px; border-radius:999px; color:var(--muted); background:#090c10; text-align:center; font-size:9px; }
.empty { padding:28px 20px; border:1px dashed var(--line); border-radius:14px; color:var(--muted); text-align:center; font-size:11px; }
footer { position:fixed; bottom:0; width:100%; min-height:52px; padding:0 18px; display:flex; align-items:center; gap:8px; border-top:1px solid var(--line); background:rgba(9,11,15,.94); backdrop-filter:blur(14px); color:var(--muted); font-size:9px; }
.status-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px rgba(198,255,66,.6); }
footer button { margin-left:auto; border:0; color:var(--text); background:transparent; font-size:9px; cursor:pointer; }
@media (min-width:700px) { body { min-width:0; display:grid; place-items:center; min-height:100vh; padding:32px; background:#05070a; } .app { width:390px; border:1px solid var(--line); border-radius:22px; box-shadow:0 30px 100px rgba(0,0,0,.5); } footer { position:absolute; width:388px; border-radius:0 0 22px 22px; } }