/* Componenten (03-design-system.md). */
.page{display:flex;flex-direction:column;gap:var(--sp-4)}
.page__h{margin-bottom:var(--sp-1)} .page__h h1{font-size:var(--fs-lg);font-weight:650}

/* Card */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-4);box-shadow:var(--shadow)}
@media(min-width:960px){.card{padding:var(--sp-5)}}
.card--accent{border-left:3px solid var(--c,var(--accent))}
.card__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-3)}
.card__h h2{font-size:var(--fs-md);font-weight:600}

/* Stat */
.stat__v{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:var(--fs-stat);font-weight:700;line-height:1.1}
.stat__l{font-size:var(--fs-tiny);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;margin-top:2px}
.stat__d{font-size:var(--fs-sm);font-family:var(--font-num)} .stat__d.up{color:var(--success)} .stat__d.down{color:var(--danger)}
.stat__s{font-size:var(--fs-sm);color:var(--muted)}

/* Buttons + fields */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;height:40px;padding:0 var(--sp-4);border-radius:var(--r-sm);font-weight:600;font-size:var(--fs-sm);transition:filter var(--dur-fast),background var(--dur-fast)}
.btn--primary{background:var(--accent);color:var(--on-accent)} .btn--primary:hover{filter:brightness(1.06)}
.btn--ghost{border:1px solid var(--border);color:var(--text)} .btn--ghost:hover{background:var(--surface-2)}
.btn--subtle{background:var(--surface-2);color:var(--text)} .btn--subtle:hover{filter:brightness(.97)}
.btn--danger{background:var(--danger);color:#fff}
.ibtn{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-sm);color:var(--muted)} .ibtn:hover{background:var(--surface-2);color:var(--text)}
.btnrow{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.btn:focus-visible,.ibtn:focus-visible,.seg__b:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--ring)}
.field{display:flex;flex-direction:column;gap:var(--sp-1);margin-bottom:var(--sp-3)}
.field__l{font-size:var(--fs-tiny);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.field__i{height:40px;padding:0 var(--sp-3);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);width:100%}
.field__h{font-size:var(--fs-sm);color:var(--muted)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--sp-3)} @media(max-width:560px){.grid2{grid-template-columns:1fr}}
.seg{display:inline-flex;background:var(--surface-2);border-radius:var(--r-sm);padding:3px;gap:2px}
.seg__b{padding:6px 14px;border-radius:6px;font-size:var(--fs-sm);font-weight:600;color:var(--muted)}
.seg__b.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}

/* List-row */
.row{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-3) 0;border-bottom:1px solid var(--border);text-align:left}
.row:last-child{border-bottom:none} .row__ic{color:var(--muted);display:grid;place-items:center}
.row__t{flex:1;display:flex;flex-direction:column;min-width:0}
.row__title{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row__sub{font-size:var(--fs-sm);color:var(--muted)}
.row__v{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-weight:600}

/* Landing */
.landing{display:flex;flex-direction:column;gap:var(--sp-6)}
.lhead{display:flex;align-items:center;justify-content:space-between}
.lhead__g{font-size:var(--fs-lg);font-weight:650} .lhead__d{color:var(--muted);font-size:var(--fs-sm)}
.avatar{width:40px;height:40px;border-radius:var(--r-pill);background:var(--accent-weak);color:var(--accent);font-weight:700;display:grid;place-items:center}
.domain__h{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-tiny);text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--c);margin-bottom:var(--sp-3)}
.sumgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-3)}
.sumcard{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--c);border-radius:var(--r-md);padding:var(--sp-4);text-align:left;display:flex;flex-direction:column;gap:2px;box-shadow:var(--shadow)}
.sumcard__l{font-size:var(--fs-tiny);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.sumcard__v{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:var(--fs-xl);font-weight:700}
.sumcard__s{font-size:var(--fs-sm);color:var(--muted)}

/* Empty / sheet / toast / charts */
.empty{text-align:center;padding:var(--sp-9) var(--sp-4);color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:var(--sp-3)}
.empty__ic{width:2.5em;height:2.5em;color:var(--faint)}
.sheet-ov{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:60;display:flex;align-items:flex-end;justify-content:center;animation:fade var(--dur)}
.sheet{background:var(--surface);width:100%;max-height:88dvh;overflow:auto;border-radius:var(--r-lg) var(--r-lg) 0 0;padding:var(--sp-5);padding-bottom:calc(var(--sp-5) + var(--safe-b));animation:up var(--dur-slow) var(--ease)}
.sheet__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-4)} .sheet__h h2{font-size:var(--fs-md);font-weight:600}
@media(min-width:640px){.sheet-ov{align-items:center}.sheet{max-width:460px;border-radius:var(--r-lg);animation:pop var(--dur) var(--ease)}}
@keyframes fade{from{opacity:0}} @keyframes up{from{transform:translateY(100%)}} @keyframes pop{from{transform:scale(.96);opacity:0}}
@media(prefers-reduced-motion){.sheet,.sheet-ov,#toast{animation:none;transition:none}}
#toast{position:fixed;left:50%;bottom:calc(var(--tabbar-h) + var(--safe-b) + var(--sp-4));transform:translate(-50%,20px);background:var(--text);color:var(--bg);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:500;opacity:0;pointer-events:none;transition:all var(--dur);z-index:80}
@media(min-width:960px){#toast{bottom:var(--sp-6)}}
#toast.show{opacity:1;transform:translate(-50%,0)} #toast.danger{background:var(--danger);color:#fff}
.spark{width:100%;height:32px;display:block} .ring__t{font-family:var(--font-num);font-size:14px;font-weight:700;fill:var(--text)}