/* Sahutly — terinspirasi HIG Apple (bukan tiruan). Semua font sistem, ikon SVG buatan sendiri. */

/* ============================================================ token warna (spek §4.1) */
:root {
  color-scheme: light dark;
  --logo-ink:#10264D; --logo-dots:#10264D;
  --label:#000000; --label-2:#636366; --label-3:#8A8A8E; --label-glass-2:#3A3A3C; --on-tint:#FFFFFF;
  --bg:#FFFFFF; --bg-2:#F2F2F7; --bg-3:#FFFFFF;
  --bg-grouped:#F2F2F7; --bg-grouped-2:#FFFFFF; --bg-grouped-3:#F2F2F7;
  --bg-elevated:#FFFFFF; --bg-window:#ECECF0;
  --fill-1:rgba(120,120,128,.20); --fill-2:rgba(120,120,128,.16); --fill-3:rgba(118,118,128,.12); --fill-4:rgba(116,116,128,.08);
  --press:rgba(0,0,0,.06);
  --separator:rgba(60,60,67,.29); --separator-opaque:#C6C6C8; --stroke-control:#8A8A8E;
  --tint:#0064D2; --tint-fill:#0064D2; --tint-fill-hover:#0058BA; --tint-wash:#E5F0FF;
  --green:#007A2D; --green-wash:#E8F6EC; --green-dot:#248A3D; --switch-on:#248A3D;
  --orange:#B04A00; --orange-wash:#FFF4E5; --orange-dot:#C55300;
  --red:#D70015; --red-wash:#FDECEE; --red-fill:#D70015; --red-dot:#D70015;
  --grey:#3A3A3C; --grey-wash:#EDEDF0; --grey-dot:#8A8A8E;
  --indigo:#4B3FCF; --indigo-wash:#ECEAFD;
  --bubble-in:#E9E9EB; --bubble-in-text:#000; --bubble-out:var(--tint-fill); --bubble-out-text:#FFF;
  --bubble-agent:#ECEAFD; --bubble-agent-text:#000;
  --glass:rgba(249,249,249,.80); --glass-strong:rgba(249,249,249,.92); --glass-solid:#F9F9F9;
  --glass-filter:blur(20px) saturate(180%);
  --glass-edge:inset 0 .5px 0 rgba(255,255,255,.9), inset 0 0 0 .5px rgba(0,0,0,.08);
  --lens:#E9E9EE; --scrim:rgba(0,0,0,.30); --focus:var(--tint);
  --shadow-1:0 1px 2px rgba(0,0,0,.05);
  --shadow-glass:0 8px 28px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08);
  --shadow-pop:0 12px 40px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08);
  --shadow-sheet:0 24px 64px rgba(0,0,0,.24), 0 2px 8px rgba(0,0,0,.10);
  /* nomor & avatar */
  --av-blue:#DCE9FB; --av-blue-ink:#185FA0; --av-teal:#D6F2EC; --av-teal-ink:#0B6B53;
  --av-purple:#EEE3F8; --av-purple-ink:#7A3FB0; --av-orange:#FCE8D4; --av-orange-ink:#9A4D00;
  --av-pink:#FBE0EA; --av-pink-ink:#B4235A; --av-indigo:#E4E2FB; --av-indigo-ink:#4B3FCF;
  --av-grey:#EDEDF0; --av-grey-ink:#3A3A3C;
  /* nama pengirim di grup */
  --gs-1:#B4235A; --gs-2:#0B6B53; --gs-3:#7A3FB0; --gs-4:#9A4D00; --gs-5:#185FA0; --gs-6:#5E6B00; --gs-7:#A63F2E; --gs-8:#2F6E8E;
  /* huruf */
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-rounded:ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", "Liberation Mono", monospace;
  --pt:calc(1rem / 16);
  /* jarak & sudut */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-bubble:18px; --r-lg:22px; --r-sheet:34px; --r-pill:999px;
  /* gerak */
  --ease-standard:cubic-bezier(.2,.8,.2,1); --ease-exit:cubic-bezier(.4,0,1,1); --ease-spring:cubic-bezier(.32,.72,0,1);
  --dur-press:100ms; --dur-fast:160ms; --dur-base:240ms; --dur-push:360ms; --dur-sheet:420ms;
  /* tata letak */
  --safe-t:env(safe-area-inset-top, 0px); --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-l:env(safe-area-inset-left, 0px); --safe-r:env(safe-area-inset-right, 0px);
  --nav-h:56px; --tab-space:96px; --gutter:16px;
  /* Tampilan 90%: seluruh dashboard (huruf, jarak, kontrol) diskalakan --z. Di layar sentuh, sasaran sentuh tetap 44 pt. */
  --z:.9; --tap:44px;
}
@media (pointer: coarse) { :root { --tap: calc(44px / var(--z)); } }
html { zoom: var(--z); }
@supports (transition-timing-function: linear(0, 1)) {
  :root { --ease-spring:linear(0, .157, .477 10%, .766 17%, .94 25%, 1.024 33%, 1.04 40%, 1.025 50%, 1.006 62%, 1); }
}
@media (prefers-color-scheme: dark) {
  :root {
    --logo-ink:#F2F5FA;
    --label:#FFFFFF; --label-2:#98989F; --label-3:#636366; --label-glass-2:#D1D1D6;
    --bg:#000000; --bg-2:#1C1C1E; --bg-3:#2C2C2E;
    --bg-grouped:#000000; --bg-grouped-2:#1C1C1E; --bg-grouped-3:#2C2C2E;
    --bg-elevated:#1C1C1E; --bg-window:#161618;
    --fill-1:rgba(120,120,128,.36); --fill-2:rgba(120,120,128,.32); --fill-3:rgba(118,118,128,.24); --fill-4:rgba(116,116,128,.18);
    --press:rgba(255,255,255,.08);
    --separator:rgba(84,84,88,.60); --separator-opaque:#38383A; --stroke-control:#8E8E93;
    --tint:#64B0FF; --tint-fill:#0060CC; --tint-fill-hover:#0058BB; --tint-wash:#0E2A4A;
    --green:#30D158; --green-wash:#12301C; --green-dot:#30D158; --switch-on:#30D158;
    --orange:#FFB15C; --orange-wash:#3A2A12; --orange-dot:#FF9F45;
    --red:#FF6165; --red-wash:#3B1416; --red-fill:#B3001A; --red-dot:#FF6165;
    --grey:#D1D1D6; --grey-wash:#2C2C2E; --grey-dot:#8E8E93;
    --indigo:#C4C0FF; --indigo-wash:#2E2B5C;
    --bubble-in:#2C2C2E; --bubble-in-text:#FFF; --bubble-agent:#2E2B5C; --bubble-agent-text:#FFF;
    --glass:rgba(28,28,30,.80); --glass-strong:rgba(28,28,30,.92); --glass-solid:#1C1C1E;
    --glass-edge:inset 0 .5px 0 rgba(255,255,255,.12), inset 0 0 0 .5px rgba(255,255,255,.08);
    --lens:#3A3A3C; --scrim:rgba(0,0,0,.50);
    --shadow-1:0 1px 2px rgba(0,0,0,.11);
    --shadow-glass:0 8px 28px rgba(0,0,0,.26), 0 1px 3px rgba(0,0,0,.18);
    --shadow-pop:0 12px 40px rgba(0,0,0,.40), 0 2px 6px rgba(0,0,0,.18);
    --shadow-sheet:0 24px 64px rgba(0,0,0,.53), 0 2px 8px rgba(0,0,0,.22);
    --av-blue:#10304F; --av-blue-ink:#8FC3FF; --av-teal:#0E3A31; --av-teal-ink:#5FD3B3;
    --av-purple:#35224A; --av-purple-ink:#D2A8FF; --av-orange:#3D2A12; --av-orange-ink:#FFB15C;
    --av-pink:#41182A; --av-pink-ink:#FF8FB6; --av-indigo:#26244F; --av-indigo-ink:#B7B3FF;
    --av-grey:#2C2C2E; --av-grey-ink:#D1D1D6;
    --gs-1:#FF7AA8; --gs-2:#4FD1A5; --gs-3:#C49BFF; --gs-4:#FFB15C; --gs-5:#6EB6FF; --gs-6:#C6D84A; --gs-7:#FF8A75; --gs-8:#7FC8E8;
  }
}
@media (prefers-contrast: more) {
  :root { --label-2:#3A3A3C; --separator:#8A8A8E; --tint:#0050A8; --tint-fill:#0050A8; --tint-fill-hover:#00448F; }
  @media (prefers-color-scheme: dark) { :root { --label-2:#D1D1D6; --separator:#8E8E93; --tint:#8CC4FF; --tint-fill:#0050A8; } }
}

/* ============================================================ huruf (spek §4.2) */
@media (pointer: coarse) {
  @supports (font: -apple-system-body) {
    html { font: -apple-system-body; font-family: var(--font); }
    :root { --pt: calc(1rem / 17); }
  }
}
:root {
  --t-large:700 calc(34 * var(--pt))/calc(41 * var(--pt)) var(--font);
  --t-title1:700 calc(28 * var(--pt))/calc(34 * var(--pt)) var(--font-rounded);
  --t-title2:700 calc(22 * var(--pt))/calc(28 * var(--pt)) var(--font);
  --t-title3:600 calc(20 * var(--pt))/calc(25 * var(--pt)) var(--font);
  --t-headline:600 calc(17 * var(--pt))/calc(22 * var(--pt)) var(--font);
  --t-body:400 max(calc(16px / var(--z)), calc(17 * var(--pt)))/calc(22 * var(--pt)) var(--font);
  --t-callout:400 calc(16 * var(--pt))/calc(21 * var(--pt)) var(--font);
  --t-subhead:400 calc(15 * var(--pt))/calc(20 * var(--pt)) var(--font);
  --t-footnote:400 calc(13 * var(--pt))/calc(18 * var(--pt)) var(--font);
  --t-caption1:400 calc(12 * var(--pt))/calc(16 * var(--pt)) var(--font);
  --t-caption2:600 max(11px, calc(11 * var(--pt)))/calc(13 * var(--pt)) var(--font);
  --row-min:52px; --ctl:var(--tap);
}
html[data-w="e"] {
  --t-large:700 calc(28 * var(--pt))/calc(34 * var(--pt)) var(--font);
  --t-title1:700 calc(24 * var(--pt))/calc(30 * var(--pt)) var(--font-rounded);
  --t-title2:700 calc(20 * var(--pt))/calc(25 * var(--pt)) var(--font);
  --t-title3:600 calc(17 * var(--pt))/calc(22 * var(--pt)) var(--font);
  --t-headline:600 calc(15 * var(--pt))/calc(20 * var(--pt)) var(--font);
  --t-body:400 calc(15 * var(--pt))/calc(20 * var(--pt)) var(--font);
  --t-callout:400 calc(14 * var(--pt))/calc(19 * var(--pt)) var(--font);
  --t-subhead:400 calc(13 * var(--pt))/calc(18 * var(--pt)) var(--font);
  --t-footnote:400 calc(12 * var(--pt))/calc(16 * var(--pt)) var(--font);
  --t-caption1:400 max(11px, calc(11 * var(--pt)))/calc(14 * var(--pt)) var(--font);
}
@media (pointer: fine) { html[data-w="e"] { --row-min:40px; --ctl:32px; } }
html[data-w="m"] { --gutter:24px; }
@media (min-width: 414px) { html[data-w="c"] { --gutter:20px; } }

/* ============================================================ dasar */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; height: 100%; }
body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg-grouped); color: var(--label);
  font: var(--t-body); font-family: var(--font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
html[data-mode="app"][data-w="e"] body { background: var(--bg-window); }
h1, h2, h3, p { margin: 0; }
a { color: var(--tint); text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:where(button) { appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0; text-align: inherit; }
button:disabled { cursor: default; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-contrast: more) { :focus-visible { outline-width: 3px; } }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.i { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; display: block; }
.i.s12 { width: 12px; height: 12px; } .i.s14 { width: 14px; height: 14px; } .i.s17 { width: 17px; height: 17px; }
.i.s20 { width: 20px; height: 20px; } .i.s26 { width: 26px; height: 26px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--label-2); }
.center { text-align: center; justify-content: center; }
.err { color: var(--red); }
.warn-text { color: var(--orange); }
kbd { font: 600 var(--t-footnote); font-family: var(--font); background: var(--fill-3); border-radius: 6px; padding: 2px 8px; white-space: nowrap; }

/* kaca: hanya untuk lapisan navigasi & kontrol (bar, composer, sheet, popover, toast) */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  box-shadow: var(--glass-edge), var(--shadow-glass);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--glass-solid); } }
@media (prefers-reduced-transparency: reduce) { .glass, dialog.sheet { background: var(--glass-solid) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } }
@media (prefers-contrast: more) {
  .glass { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--stroke-control); }
  .bubble, .chip, .tile { outline: 1px solid var(--stroke-control); outline-offset: -1px; }
}
@media (forced-colors: active) {
  .bubble, .chip, .glass, .tile, .seg, .ncard, .grp-b { border: 1px solid CanvasText; }
  .dot, .badge { forced-color-adjust: none; }
}

/* ============================================================ boot & login */
.boot { height: 100%; display: grid; place-content: center; gap: 12px; justify-items: center; color: var(--label-2); font: var(--t-callout); padding: 24px; text-align: center; }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; display: inline-block; flex: none; animation: spin .8s linear infinite; opacity: .8; }
.boot .spin { width: 28px; height: 28px; }
@keyframes spin { to { transform: rotate(360deg); } }
.auth { height: 100%; overflow-y: auto; display: grid; place-items: center; padding: calc(24px + var(--safe-t)) var(--gutter) calc(24px + var(--safe-b)); background: var(--bg-grouped); }
.auth-card { width: min(100%, 400px); background: var(--bg-grouped-2); border-radius: var(--r-lg); padding: 28px 20px 24px; display: grid; gap: 16px; box-shadow: var(--shadow-1); }
.auth-card.wide { width: min(100%, 440px); }
.auth-glyph { width: 40px; height: 40px; color: var(--tint); }
.auth-mark { width: 56px; height: 56px; border-radius: 14px; display: block; }
.auth-t { font: var(--t-title2); }
.auth-lead { font: var(--t-callout); color: var(--label-2); margin-top: -8px; }
.auth-foot { font: var(--t-footnote); color: var(--label-2); text-align: center; }
.code-input { display: flex; gap: 6px; align-items: center; direction: ltr; }
.code-in {
  width: 0; flex: 1; min-width: 0; height: 52px; text-align: center; text-transform: uppercase;
  font: 600 clamp(20px, 6vw, 26px)/1 var(--font-mono); border-radius: var(--r-sm);
  background: var(--bg-2); border: 1px solid var(--stroke-control); color: var(--label); padding: 0;
}
.code-in:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.code-dash { width: 10px; height: 2px; background: var(--label-2); flex: none; display: block; }

/* ============================================================ isian */
.fieldblock { display: grid; gap: 6px; min-width: 0; }
.fieldblock label { font: var(--t-subhead); font-weight: 600; }
.fieldblock .opt { font-weight: 400; color: var(--label-2); }
.fieldblock input, .fieldblock textarea, .fieldblock select, .pform textarea, .pform input {
  width: 100%; min-height: var(--tap); border-radius: var(--r-sm); border: 1px solid var(--stroke-control);
  background: var(--bg); color: var(--label); padding: 10px 12px; font: var(--t-body); font-size: max(calc(16px / var(--z)), calc(17 * var(--pt)));
}
html[data-w="e"] .fieldblock input, html[data-w="e"] .fieldblock textarea, html[data-w="e"] .fieldblock select { min-height: 36px; padding: 7px 10px; font-size: 15px; }
.fieldblock textarea, .pform textarea { resize: vertical; min-height: 88px; line-height: 1.4; }
.fieldblock input:focus-visible, .fieldblock textarea:focus-visible, .fieldblock select:focus-visible, .pform textarea:focus-visible, .pform input:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.fieldblock [aria-invalid="true"] { border-color: var(--red); }
.f-wrap { display: flex; gap: 6px; align-items: stretch; }
.f-wrap input { flex: 1; min-width: 0; }
.f-toggle { flex: none; min-height: var(--tap); padding: 0 10px; border-radius: var(--r-sm); color: var(--tint); font: var(--t-subhead); font-weight: 600; }
.f-toggle:hover { background: var(--fill-4); }
.f-toggle:disabled { color: var(--label-3); }
.hint { font: var(--t-footnote); color: var(--label-2); display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.hint .i { flex: none; }
.hint.err, .row-hint.err { color: var(--red); }
.hint.green { color: var(--green); } .hint.orange { color: var(--orange); }
.form-err { font: var(--t-subhead); }
.note { border-radius: var(--r-md); padding: 10px 14px; font: var(--t-footnote); display: flex; gap: 8px; align-items: flex-start; }
.note .i { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.note.orange { background: var(--orange-wash); color: var(--orange); }
.note.blue { background: var(--tint-wash); color: var(--tint); }
.note .btn { margin-left: auto; }

/* ============================================================ tombol */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--ctl); padding: 0 20px; border-radius: var(--r-pill);
  font: var(--t-headline); white-space: nowrap; text-decoration: none; position: relative;
  transition: transform var(--dur-press) var(--ease-standard), background-color var(--dur-fast);
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn.pri { background: var(--tint-fill); color: var(--on-tint); }
.btn.pri:hover:not(:disabled) { background: var(--tint-fill-hover); }
.btn.tinted { background: var(--tint-wash); color: var(--tint); }
.btn.plain { color: var(--tint); padding: 0 10px; }
.btn.plain:hover:not(:disabled) { background: var(--fill-4); }
.btn.plain.red, .btn.red { color: var(--red); }
.btn.plain.red:disabled, .btn.red:disabled { color: var(--label-3); }
.btn.redfill { background: var(--red-fill); color: #fff; }
.btn.onred { background: #fff; color: #B3001A; }
.btn:disabled { background: var(--fill-2); color: var(--label-3); }
.btn.plain:disabled { background: none; }
.btn.sm { min-height: 36px; padding: 0 14px; font: var(--t-subhead); font-weight: 600; }
.btn.plain.sm { padding: 0 8px; }
html[data-w="e"] .btn.sm { min-height: 28px; }
@media (pointer: coarse) { .btn.sm { min-height: var(--tap); } }
.btn.block { width: 100%; }
.btn .spin { width: 16px; height: 16px; }
.gbtn { width: var(--tap); height: var(--tap); border-radius: 50%; display: inline-grid; place-items: center; color: var(--label); flex: none; position: relative; transition: transform var(--dur-press) var(--ease-spring); }
.gbtn:active { transform: scale(1.06); }
html[data-w="e"] .gbtn { width: 32px; height: 32px; }
html[data-w="e"] .gbtn .i { width: 18px; height: 18px; }
.gbtn.sm { width: 32px; height: 32px; }
.gbtn .badge { position: absolute; top: -4px; right: -6px; }
.backbtn { display: inline-flex; align-items: center; gap: 2px; height: var(--tap); padding: 0 14px 0 8px; border-radius: var(--r-pill); font: var(--t-body); color: var(--label); max-width: 50vw; }
.backbtn .i { width: 22px; height: 22px; stroke-width: 2.2; }
.back-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-w="e"] .backbtn { height: 32px; font: var(--t-subhead); }
.nav-l .backbtn { max-width: 100%; }

/* ============================================================ chip, titik, badge */
.chip { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 2px 8px; border-radius: var(--r-pill); font: var(--t-caption1); font-weight: 600; white-space: nowrap; flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.chip.orange { background: var(--orange-wash); color: var(--orange); }
.chip.green { background: var(--green-wash); color: var(--green); }
.chip.red { background: var(--red-wash); color: var(--red); }
.chip.grey { background: var(--grey-wash); color: var(--grey); }
.chip.blue { background: var(--tint-wash); color: var(--tint); }
.chip.indigo { background: var(--indigo-wash); color: var(--indigo); }
.chip.tag-blue { background: var(--av-blue); color: var(--av-blue-ink); } .chip.tag-teal { background: var(--av-teal); color: var(--av-teal-ink); }
.chip.tag-purple { background: var(--av-purple); color: var(--av-purple-ink); } .chip.tag-orange { background: var(--av-orange); color: var(--av-orange-ink); }
.chip.tag-pink { background: var(--av-pink); color: var(--av-pink-ink); } .chip.tag-indigo { background: var(--av-indigo); color: var(--av-indigo-ink); }
.chip.code { font-variant-numeric: tabular-nums; }
.chip .dot { width: 7px; height: 7px; }
.agent-chip { cursor: pointer; min-height: 28px; }
@media (pointer: coarse) { .agent-chip { min-height: 32px; } }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--grey-dot); }
.dot.green { background: var(--green-dot); } .dot.orange { background: var(--orange-dot); } .dot.red { background: var(--red-dot); }
.dot.grey { background: var(--grey-dot); } .dot.blue { background: var(--tint); }
.st { display: inline-flex; align-items: center; gap: 6px; }
.st.green { color: var(--green); } .st.blue { color: var(--tint); } .st.orange { color: var(--orange); } .st.red { color: var(--red); } .st.grey { color: var(--grey); }
.badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--red-fill); color: #fff; font: var(--t-caption2); display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; flex: none; }
.badge.blue { background: var(--tint-fill); }

/* ============================================================ avatar & cincin status nomor */
.av { border-radius: 50%; display: inline-grid; place-items: center; font-weight: 600; flex: none; position: relative; line-height: 1; letter-spacing: 0; user-select: none; }
.av.blue { background: var(--av-blue); color: var(--av-blue-ink); } .av.teal { background: var(--av-teal); color: var(--av-teal-ink); }
.av.purple { background: var(--av-purple); color: var(--av-purple-ink); } .av.orange { background: var(--av-orange); color: var(--av-orange-ink); }
.av.pink { background: var(--av-pink); color: var(--av-pink-ink); } .av.indigo { background: var(--av-indigo); color: var(--av-indigo-ink); }
.av.grey, .av.all { background: var(--av-grey); color: var(--av-grey-ink); }
.av24 { width: 24px; height: 24px; font-size: 10px; } .av28 { width: 28px; height: 28px; font-size: 11px; }
.av32 { width: 32px; height: 32px; font-size: 12px; } .av40 { width: 40px; height: 40px; font-size: 15px; }
.av48 { width: 48px; height: 48px; font-size: 18px; } .av56 { width: 56px; height: 56px; font-size: 21px; } .av64 { width: 64px; height: 64px; font-size: 24px; }
.av .i { width: 60%; height: 60%; }
html[data-w="e"] .av.list { width: 40px; height: 40px; font-size: 15px; }
.ring { position: relative; display: inline-grid; place-items: center; flex: none; border-radius: 50%; padding: 2px; border: 2px solid var(--grey-dot); }
.ring > .av { margin: 0; }
.ring24 > .av { width: 18px; height: 18px; font-size: 8px; } .ring32 > .av { width: 24px; height: 24px; font-size: 10px; }
.ring40 > .av { width: 32px; height: 32px; font-size: 12px; } .ring64 > .av { width: 56px; height: 56px; font-size: 21px; }
.ring.tone-green { border-color: var(--green-dot); } .ring.tone-orange { border-color: var(--orange-dot); }
.ring.tone-red { border-color: var(--red-dot); } .ring.tone-blue { border-color: var(--tint); } .ring.tone-grey { border-color: var(--grey-dot); }
.ring-dashed { border-style: dashed; }
.ring-action { border-style: dotted; }
.ring-glyph { position: absolute; right: -5px; top: -5px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 0 0 2px var(--bg-grouped-2); background: var(--grey-dot); }
.ring-glyph.blue { background: var(--tint-fill); } .ring-glyph.red { background: var(--red-fill); } .ring-glyph.orange { background: var(--orange-dot); } .ring-glyph.grey { background: #6C6C70; }
.ring-glyph .i { width: 10px; height: 10px; stroke-width: 2.4; }
.ring24 .ring-glyph { width: 12px; height: 12px; right: -4px; top: -4px; } .ring24 .ring-glyph .i { width: 8px; height: 8px; }
.ring64 .ring-glyph { width: 22px; height: 22px; } .ring64 .ring-glyph .i { width: 13px; height: 13px; }
.stack { display: inline-flex; } .stack .av { box-shadow: 0 0 0 2px var(--bg-grouped-2); } .stack .av + .av { margin-left: -8px; }

/* ============================================================ switch & segmented & cari */
.sw { position: relative; width: 51px; height: 31px; flex: none; display: inline-block; }
.sw input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 2; width: 100%; height: 100%; }
.sw input:disabled { cursor: default; }
.sw .tr { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--fill-1); box-shadow: inset 0 0 0 1.5px var(--stroke-control); transition: background-color var(--dur-base) var(--ease-standard); }
.sw .kn { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: var(--r-pill); background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.16); transition: transform var(--dur-base) var(--ease-spring), width var(--dur-fast); display: grid; place-items: center; color: var(--label-2); }
.sw .kn .spin { width: 13px; height: 13px; border-width: 1.5px; }
.sw input:checked ~ .tr { background: var(--switch-on); box-shadow: none; }
.sw input:checked ~ .kn { transform: translateX(20px); }
.sw input:active:not(:disabled) ~ .kn { width: 34px; }
.sw input:checked:active:not(:disabled) ~ .kn { transform: translateX(13px); }
.sw.kill input:checked ~ .tr { background: var(--red-fill); }
.sw input:focus-visible ~ .tr { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw input:disabled ~ .tr, .sw input:disabled ~ .kn { opacity: .5; }
html[data-w="e"] .sw { width: 40px; height: 24px; } html[data-w="e"] .sw .kn { width: 20px; height: 20px; }
html[data-w="e"] .sw input:checked ~ .kn { transform: translateX(16px); }
html[data-w="e"] .sw input:active:not(:disabled) ~ .kn { width: 25px; } html[data-w="e"] .sw input:checked:active:not(:disabled) ~ .kn { transform: translateX(11px); }
.seg { display: flex; background: var(--fill-3); border-radius: var(--r-pill); padding: 2px; gap: 2px; min-width: 0; }
.seg.block { width: 100%; }
.seg button { flex: 1 1 auto; min-height: 32px; border-radius: var(--r-pill); font: var(--t-subhead); font-weight: 600; color: var(--label); text-align: center; padding: 0 8px; white-space: nowrap; transition: background-color var(--dur-fast); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (pointer: coarse) { .seg button { min-height: var(--tap); } .ttab { min-height: var(--tap); } .row.field-row input.field, .row.field-row select.field { min-height: var(--tap); } }
html[data-w="e"] .seg button { min-height: 26px; }
.seg button[aria-pressed="true"] { background: var(--bg-elevated); box-shadow: var(--shadow-1), 0 0 0 .5px rgba(0,0,0,.06); }
@media (prefers-color-scheme: dark) { .seg button[aria-pressed="true"] { background: #636366; } }
.seg button:disabled { color: var(--label-3); }
.seg .cnt { color: var(--label-2); font-weight: 400; margin-left: 4px; }
.search { display: flex; align-items: center; gap: 6px; height: 36px; border-radius: var(--r-pill); background: var(--fill-3); padding: 0 6px 0 12px; color: var(--label-2); min-width: 0; }
html[data-w="e"] .search { height: 30px; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; font: var(--t-body); font-size: max(calc(16px / var(--z)), calc(17 * var(--pt))); outline: none; color: var(--label); padding: 0; height: 100%; }
html[data-w="e"] .search input { font-size: 14px; }
.search input::placeholder { color: var(--label-2); }
input::placeholder, textarea::placeholder { color: var(--label-2); opacity: 1; }
.search input::-webkit-search-cancel-button { display: none; }
.search:focus-within { box-shadow: 0 0 0 2px var(--focus); }
.search .clear { width: 28px; height: 28px; display: grid; place-items: center; color: var(--label-2); border-radius: 50%; }

/* ============================================================ meter */
.meter { display: grid; gap: 4px; font: var(--t-footnote); color: var(--label-2); min-width: 0; }
.meter .mt { display: flex; justify-content: space-between; gap: 8px; }
.meter .bar { height: 6px; border-radius: 3px; background: var(--fill-2); overflow: hidden; }
.meter .bar i { display: block; height: 100%; border-radius: 3px; background: var(--green-dot); }
.meter.warn .bar i { background: var(--orange-dot); } .meter.full .bar i { background: var(--red-dot); }
.meter b { font-weight: 600; color: var(--label); }
.meter.warn b { color: var(--orange); } .meter.full b { color: var(--red); }

/* ============================================================ daftar berkelompok (gaya Settings) */
.grp { margin: 0 0 32px; min-width: 0; }
.grp-h { font: var(--t-subhead); font-weight: 600; color: var(--label-2); padding: 0 16px 7px; margin: 0; }
.grp-b { background: var(--bg-grouped-2); border-radius: var(--r-lg); overflow: hidden; }
html[data-w="e"] .grp-b { border-radius: var(--r-md); }
.grp-b.pad { padding: 16px; display: grid; gap: 16px; }
.grp-f { font: var(--t-footnote); color: var(--label-2); padding: 7px 16px 0; margin: 0; }
.grp-f .err { color: var(--red); }
.grp.danger .grp-b { box-shadow: inset 0 0 0 1.5px var(--red); }
.row {
  display: flex; align-items: center; gap: 12px; min-height: var(--row-min); padding: 11px 16px; position: relative; width: 100%;
  text-align: left; background: transparent; color: var(--label); font: var(--t-body); text-decoration: none;
}
html[data-w="e"] .row { padding: 8px 14px; }
.row + .row::before, .row + .row-err + .row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: .5px; background: var(--separator); }
.row.ic + .row::before, .row + .row.ic::before { left: 60px; }
html[data-w="e"] .row.ic + .row::before, html[data-w="e"] .row + .row.ic::before { left: 50px; }
a.row:hover, button.row:hover:not(:disabled), label.row:hover { background: var(--fill-4); }
a.row:active, button.row:active:not(:disabled) { background: var(--press); }
.row:focus-visible { outline-offset: -3px; }
.row.disabled, button.row:disabled { color: var(--label-3); }
.row .rt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.row .rt small { display: block; font: var(--t-subhead); color: var(--label-2); margin-top: 2px; }
.row .rv { font: var(--t-body); color: var(--label-2); display: flex; align-items: center; gap: 6px; white-space: nowrap; flex: none; max-width: 50%; overflow: hidden; text-overflow: ellipsis; }
.row .chev { color: var(--label-3); width: 14px; height: 14px; stroke-width: 2.4; flex: none; }
.row .check { color: var(--tint); width: 20px; height: 20px; stroke-width: 2.4; }
.row[aria-pressed="true"] .rt, .row[aria-selected="true"] .rt { font-weight: 600; }
.rico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex: none; }
.rico .i { width: 19px; height: 19px; }
html[data-w="e"] .rico { width: 24px; height: 24px; border-radius: 6px; } html[data-w="e"] .rico .i { width: 15px; height: 15px; }
.rico.blue { background: var(--tint-fill); } .rico.red { background: var(--red-fill); } .rico.green { background: #248A3D; }
.rico.grey { background: #6C6C70; } .rico.orange { background: #C55300; } .rico.indigo { background: #4B3FCF; } .rico.pink { background: #B4235A; }
.rico.plain { background: none; color: var(--tint); }
.row.center { justify-content: center; text-align: center; }
.row.red { color: var(--red); }
.row.tintrow { color: var(--tint); }
.row.tintrow .i { color: var(--tint); }
.row.field-row { gap: 10px; flex-wrap: wrap; }
.row.field-row > .rt { flex: 0 1 auto; }
.row .field { flex: 1 1 140px; min-width: 0; border: 0; background: transparent; font: var(--t-body); font-size: max(calc(16px / var(--z)), calc(17 * var(--pt))); color: var(--label); text-align: right; outline: none; padding: 6px 0; }
html[data-w="e"] .row .field { font-size: 14px; }
.row select.field { text-align: right; text-align-last: right; appearance: none; -webkit-appearance: none; cursor: pointer; color: var(--tint); }
.row textarea.field { text-align: left; resize: vertical; min-height: 72px; width: 100%; flex-basis: 100%; background: var(--bg-2); border-radius: var(--r-sm); padding: 8px 12px; }
/* Fokus isian di dalam baris: cincin membulat mengikuti kotak isian, bukan kotak persegi memenuhi baris. */
.row .field { border-radius: var(--r-sm); padding-inline: 8px; }
.row .field:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.row select.field:focus-visible { outline-offset: 2px; }
.row .field:disabled { color: var(--label-2); }
.row.col { flex-direction: column; align-items: stretch; gap: 8px; }
.row.col > .rt { flex: none; }
.row .counter { font: var(--t-footnote); color: var(--label-2); }
.row-err { font: var(--t-footnote); color: var(--red); padding: 0 16px 10px; margin: 0; }
.row-hint { font: var(--t-footnote); color: var(--label-2); padding: 0 16px 8px; margin: 0; min-height: 0; }
.row-hint:empty { display: none; }
.row .minus { width: 32px; height: 32px; display: grid; place-items: center; margin: -6px 0 -6px -6px; flex: none; }
.row.switchrow .rt { flex: 1; }
.row.check-row input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--tint-fill); flex: none; margin: 0; }
.row.meters-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.row .two, .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .two { grid-template-columns: 1fr; } }
.saved { font: var(--t-footnote); color: var(--green); display: inline-flex; align-items: center; gap: 3px; transition: opacity .4s; white-space: nowrap; flex: none; }
.saved.gone { opacity: 0; }
.check-list { list-style: none; margin: 6px 0 8px; padding: 0; display: grid; gap: 4px; }
.check-list li { display: flex; gap: 6px; align-items: center; }
.check-list li.ok { color: var(--green); } .check-list li.no { color: var(--orange); }
.check-list li span { color: var(--label-2); }
.foot-hint { font: var(--t-footnote); color: var(--label-2); padding: 8px 16px 0; margin: 0; }
.foot-hint.center { text-align: center; padding: 16px; }
.inline-err { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-md); background: var(--red-wash); color: var(--red); font: var(--t-subhead); margin-bottom: 12px; flex-wrap: wrap; }
.inline-err > span { flex: 1; min-width: 160px; }
.inline-link { margin-left: 8px; font-weight: 600; }

/* placeholder (tanpa kilau) */
.ph { display: grid; gap: 4px; padding: 8px 0; }
.ph-row { display: flex; gap: 12px; align-items: center; padding: 10px 16px; }
.ph-av { width: var(--tap); height: var(--tap); border-radius: 50%; background: var(--fill-4); flex: none; }
.ph-lines { flex: 1; display: grid; gap: 8px; }
.ph-lines i { height: 12px; border-radius: 6px; background: var(--fill-4); display: block; }
.ph-lines i + i { width: 70%; }

/* kosong */
.empty { text-align: center; padding: 48px 24px; color: var(--label-2); font: var(--t-callout); display: grid; justify-items: center; gap: 8px; }
.empty-i { width: 64px; height: 64px; color: var(--label-3); stroke-width: 1.25; }
.empty-t { font: var(--t-title2); color: var(--label); margin-top: 4px; }
.empty-b { max-width: 34ch; }
.empty .btn { margin-top: 10px; }
.example { margin-top: 12px; background: var(--bg-grouped-2); border-radius: var(--r-md); padding: 14px 16px; display: grid; gap: 10px; justify-items: start; text-align: left; color: var(--label); max-width: 420px; }

/* ============================================================ kerangka aplikasi */
.app { position: fixed; inset: 0; height: var(--vvh, 100%); display: flex; overflow: hidden; }
.stage { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.main { flex: 1; position: relative; min-height: 0; outline: none; }
.host { position: absolute; inset: 0; overflow: hidden; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--bg-elevated); color: var(--tint); padding: 10px 16px; border-radius: var(--r-md); box-shadow: var(--shadow-pop); }
.skip:focus { top: 12px; }

/* layar standar */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); }
.screen.grouped { background: var(--bg-grouped); }
.navbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  min-height: calc(var(--nav-h) + var(--safe-t)); padding: calc(6px + var(--safe-t)) calc(8px + var(--safe-r)) 6px calc(8px + var(--safe-l));
  display: flex; align-items: center; gap: 8px; transition: background-color var(--dur-fast), box-shadow var(--dur-fast);
}
.navbar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; pointer-events: none; opacity: 0; background: linear-gradient(var(--glass), transparent); transition: opacity var(--dur-fast); }
.screen.scrolled > .navbar { background: var(--glass); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); box-shadow: inset 0 -.5px 0 var(--separator); }
.screen.scrolled > .navbar::after { opacity: 1; }
@media (prefers-reduced-transparency: reduce) { .screen.scrolled > .navbar { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.nav-l, .nav-r { display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; }
.nav-r { justify-content: flex-end; }
.nav-title { font: var(--t-headline); opacity: 0; transition: opacity var(--dur-fast); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; max-width: 50%; text-align: center; pointer-events: none; }
.nav-title.show { opacity: 1; }
.scroller {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  padding-top: calc(var(--nav-h) + var(--safe-t)); padding-bottom: calc(var(--tab-space) + var(--safe-b));
  scroll-padding-top: calc(var(--nav-h) + var(--safe-t) + 16px); scroll-padding-bottom: calc(var(--tab-space) + var(--safe-b));
  -webkit-overflow-scrolling: touch;
}
.app.no-tabbar .scroller { padding-bottom: calc(24px + var(--safe-b)); }
.sentinel { height: 1px; }
.page { padding: 0 calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l)); margin: 0 auto; width: 100%; }
html[data-w="m"] .page.narrow { max-width: 728px; }
html[data-w="e"] .page { max-width: 1100px; padding: 0 32px; }
html[data-w="e"] .page.narrow { max-width: 760px; }
.large-title { font: var(--t-large); margin: 4px 0 4px; overflow-wrap: anywhere; }
.large-title:focus { outline: none; }
.large-sub { font: var(--t-subhead); color: var(--label-2); margin: 0 0 16px; }
.large-title + .banners, .large-title + .list-controls, .large-title + .tiles, .large-title + .grp { margin-top: 12px; }

/* banner */
.banners { display: grid; gap: 8px; margin: 8px 0 16px; }
.banner { display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 6px 8px 6px 14px; font: var(--t-subhead); border-radius: var(--r-md); }
.banner .bt { flex: 1; min-width: 0; }
.banner .bt small { display: block; font: var(--t-footnote); color: var(--label-2); }
.banner.kill { background: var(--red-fill); color: #fff; font-weight: 600; animation: bannerIn var(--dur-base) var(--ease-standard); }
.banner.kill .bsub { font-weight: 400; }
.banner.offline { color: var(--label); }
.banner.amber { background: var(--orange-wash); color: var(--orange); }
.banner.amber b { font-weight: 600; }
.banner.amber .btn { color: var(--orange); font-weight: 600; }
@keyframes bannerIn { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* tab bar bawah (HP) */
.tabbar {
  position: fixed; z-index: 30; left: calc(12px + var(--safe-l)); right: calc(12px + var(--safe-r)); bottom: max(12px, calc(var(--safe-b) - 8px));
  height: 64px; border-radius: var(--r-pill); display: flex; padding: 4px; max-width: 520px; margin: 0 auto;
}
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: var(--t-caption2); color: var(--label); position: relative; z-index: 1; border-radius: var(--r-pill); min-width: 0; text-decoration: none; }
.tab .tl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tab[aria-current="page"] { color: var(--tint); }
.tab .badge { position: absolute; top: 3px; left: calc(50% + 5px); }
.lens { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n)); border-radius: var(--r-pill); background: var(--lens); transform: translateX(calc(var(--sel) * 100%)); transition: transform 320ms var(--ease-spring); }

/* tab bar atas melayang (iPad) */
.toptabs { align-self: center; margin: calc(10px + var(--safe-t)) auto 0; display: flex; gap: 2px; padding: 4px; border-radius: var(--r-pill); z-index: 30; position: relative; flex: none; max-width: calc(100% - 32px); overflow-x: auto; }
.ttab { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); font: var(--t-subhead); font-weight: 600; color: var(--label); white-space: nowrap; text-decoration: none; }
.ttab[aria-current="page"] { background: var(--lens); color: var(--tint); }
.ttab:hover:not([aria-current]) { background: var(--fill-4); }
html[data-w="m"] .navbar { padding-top: 6px; min-height: var(--nav-h); }
html[data-w="m"] .scroller { padding-top: var(--nav-h); padding-bottom: calc(32px + var(--safe-b)); scroll-padding-top: calc(var(--nav-h) + 16px); }

/* sidebar (Mac) */
.sidebar { width: 252px; margin: 8px 0 8px 8px; border-radius: 18px; display: flex; flex-direction: column; padding: 10px 8px 8px; overflow: hidden; position: relative; z-index: 2; flex: none; }
.sb-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px; gap: 8px; }
.sb-brand { display: flex; align-items: center; min-width: 0; color: var(--logo-ink); }
.sb-logo-full { height: 30px; width: auto; display: block; }
.sb-live { display: inline-flex; align-items: center; gap: 5px; font: var(--t-footnote); color: var(--label-glass-2); }
.sb-scroll { flex: 1; overflow-y: auto; min-height: 0; margin: 0 -4px; padding: 0 4px; }
.sb-sec { font: var(--t-footnote); font-weight: 600; color: var(--label-glass-2); padding: 14px 10px 4px; margin: 0; }
.sb-item { display: flex; align-items: center; gap: 9px; min-height: 32px; padding: 4px 8px; border-radius: 10px; font: 13px/16px var(--font); color: var(--label); width: 100%; text-align: left; position: relative; text-decoration: none; }
.sb-item.numrow { min-height: 38px; }
.sb-item:hover:not(:disabled) { background: var(--fill-4); }
.sb-item:disabled { color: var(--label-3); }
.sb-item[aria-current="page"] { background: var(--lens); }
.sb-item[aria-current="page"] > .i { color: var(--tint); }
.sb-item[aria-current="true"] { background: var(--fill-3); }
.sb-item[aria-current="true"] .lbl { font-weight: 600; }
.sb-item > .i { width: 18px; height: 18px; color: var(--label-glass-2); }
.sb-item .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-item .lbl small { display: block; font: 400 12px/15px var(--font); color: var(--label-glass-2); overflow: hidden; text-overflow: ellipsis; }
.sb-item .lbl small.orange { color: var(--orange); } .sb-item .lbl small.red { color: var(--red); } .sb-item .lbl small.blue { color: var(--tint); }
.sb-item .trail { display: flex; gap: 4px; align-items: center; font: var(--t-footnote); color: var(--label-glass-2); white-space: nowrap; }
.sb-num { position: relative; }
.sb-num .ib { position: absolute; right: 6px; top: 50%; margin-top: -13px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--tint); opacity: 0; background: var(--bg-elevated); box-shadow: var(--shadow-1); }
.sb-num:hover .ib, .sb-num .ib:focus-visible { opacity: 1; }
.sb-num:hover .trail { visibility: hidden; }
.sb-stack { width: 24px; height: 24px; border-radius: 50%; background: var(--fill-2); display: grid; place-items: center; color: var(--label); flex: none; }
.sb-plus { width: 24px; height: 24px; display: grid; place-items: center; color: var(--tint); flex: none; }
.sb-foot { border-top: .5px solid var(--separator); padding-top: 6px; margin-top: 6px; }
.sb-foot .sb-item { min-height: 46px; }
.sb-foot .sb-item > .i { width: 14px; height: 14px; }
html[data-w="e"] .stage { margin: 0; }
html[data-w="e"] .navbar { padding: 10px 24px 6px; min-height: 52px; }
html[data-w="e"] .scroller { padding-top: 52px; padding-bottom: 40px; scroll-padding-top: 68px; }
html[data-w="e"] .screen { background: var(--bg); }
html[data-w="e"] .screen.grouped { background: var(--bg-grouped); }

/* Number Pill */
.pill { display: inline-flex; align-items: center; gap: 8px; height: var(--tap); padding: 0 12px 0 5px; border-radius: var(--r-pill); max-width: 100%; font: var(--t-headline); color: var(--label); position: relative; min-width: 0; }
.pill .pn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pill .i.s14 { color: var(--label-2); stroke-width: 2.4; }
.pill .pill-badge { position: absolute; top: -4px; right: -6px; }
.nav-l .pill { max-width: min(60vw, 320px); }
.nav-l:has(> .pill) { flex: 3 1 auto; }

/* ============================================================ animasi dorong/kembali */
.host.anim-push { animation: pushIn var(--dur-push) var(--ease-spring); }
.host.anim-pop { animation: popIn 270ms var(--ease-spring); }
@keyframes pushIn { from { transform: translateX(100%); } to { transform: none; } }
@keyframes popIn { from { transform: translateX(-30%); opacity: .6; } to { transform: none; opacity: 1; } }

/* ============================================================ chat: daftar */
.list-controls { display: grid; gap: 10px; margin: 8px 0 8px; }
.chat-list { margin: 0 calc(-1 * var(--gutter)); }
.chat-ul { list-style: none; margin: 0; padding: 0; }
.chat-row { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 14px 10px 0; position: relative; text-align: left; min-height: 64px; color: var(--label); text-decoration: none; transition: background-color var(--dur-fast); }
@media (pointer: coarse) { .chat-row { min-height: 76px; padding: 12px 16px 12px 0; gap: 12px; } }
.chat-ul li + li .chat-row::after { content: ""; position: absolute; top: 0; right: 0; left: 72px; height: .5px; background: var(--separator); }
@media (pointer: coarse) { .chat-ul li + li .chat-row::after { left: 84px; } }
.chat-row:hover { background: var(--fill-4); }
.chat-row:active { background: var(--press); }
.chat-row:focus-visible { outline-offset: -3px; }
.chat-row[aria-current="page"] { background: var(--tint-wash); }
.chat-row[aria-current="page"]::after, .chat-ul li:has(.chat-row[aria-current="page"]) + li .chat-row::after { display: none; }
.gut { width: 14px; flex: none; display: grid; place-items: center; align-self: center; padding-left: 4px; }
.cr-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cr-l1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cr-name { font: var(--t-headline); font-weight: 400; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unread .cr-name { font-weight: 600; }
.cr-l1 .chip.tag { min-height: 20px; padding: 0 7px; }
.cr-time { margin-left: auto; font: var(--t-subhead); color: var(--label-2); white-space: nowrap; flex: none; }
.unread .cr-time { color: var(--tint); }
.cr-l1 .chev { color: var(--label-3); }
.cr-l2 { display: flex; gap: 8px; align-items: flex-end; }
.cr-prev { flex: 1; min-width: 0; font: var(--t-subhead); color: var(--label-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cr-prev b { font-weight: 600; color: var(--label-2); }
.cr-prev b .i { display: inline-block; vertical-align: -1px; margin-right: 2px; }
.cr-prev .draft { color: var(--tint); }
.cr-ind { display: flex; gap: 4px; align-items: center; flex: 0 1 auto; max-width: 50%; min-width: 0; overflow: hidden; }
.cr-ind .chip { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.newpill { position: sticky; top: 4px; z-index: 10; margin: 0 auto 6px; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: var(--r-pill); font: var(--t-subhead); font-weight: 600; color: var(--tint); animation: fadeIn var(--dur-base); }
.col-list .newpill { position: absolute; top: auto; left: 50%; transform: translateX(-50%); margin: 0; z-index: 12; }

/* split (iPad 2 panel, Mac 3 kolom) */
.screen.split { background: var(--bg); }
.screen.split > .banners { margin: 8px 16px 0; }
.cols { flex: 1; display: flex; min-height: 0; }
.col-list { width: 320px; flex: none; border-right: .5px solid var(--separator); display: flex; flex-direction: column; background: var(--bg); min-height: 0; position: relative; }
html[data-w="e"] .col-list { width: 340px; }
.col-head { padding: 8px 16px 8px; display: grid; gap: 8px; }
html[data-w="e"] .col-head { padding: 16px 16px 8px; }
.col-tools { display: flex; align-items: center; gap: 8px; min-width: 0; }
.col-tools .pill { max-width: 220px; }
.sp { flex: 1; }
.col-head .tt { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.col-title { font: var(--t-large); }
html[data-w="m"] .col-title { font: var(--t-title1); font-family: var(--font); }
.col-title:focus { outline: none; }
.col-sub { font: var(--t-subhead); color: var(--label-2); margin-top: -6px; }
.col-head .list-controls { margin: 0; }
.scroll { flex: 1; overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.col-list .chat-row { padding-left: 2px; }
.col-conv { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; background: var(--bg); }
.col-conv.empty-conv { justify-content: center; }
.tb { display: flex; align-items: center; gap: 12px; padding: 10px 16px; min-height: 60px; border-bottom: .5px solid var(--separator); flex: none; }
.tb .tname { flex: 1; min-width: 0; }
.tb .tname h1 { font: var(--t-headline); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb .tname h1:focus { outline: none; }
.tb .tname span { font: var(--t-footnote); color: var(--label-2); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================ chat: percakapan */
.screen.conv-screen { background: var(--bg); }
.col-conv.solo { position: absolute; inset: 0; }
.conv-nav { display: flex; align-items: center; gap: 8px; padding: calc(6px + var(--safe-t)) calc(8px + var(--safe-r)) 8px calc(8px + var(--safe-l)); flex: none; position: relative; z-index: 20; background: linear-gradient(var(--bg) 70%, transparent); }
.conv-nav .nav-l, .conv-nav .nav-r { flex: 0 0 auto; }
.cv-cap { flex: 1; display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: var(--r-pill); min-width: 0; max-width: 100%; margin: 0 auto; text-align: left; justify-content: center; }
.cv-cap .cn { min-width: 0; display: grid; }
.cv-cap .cn b { font: var(--t-headline); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-cap .cn span { font: var(--t-caption1); color: var(--label-glass-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.solo > .banners { margin: 0 16px 8px; }
.conv-body { flex: 1; display: flex; min-height: 0; }
.conv-main { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
.inspector { width: 300px; flex: none; border-left: .5px solid var(--separator); overflow-y: auto; padding: 16px; background: var(--bg-grouped); }
.thread-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; overscroll-behavior: contain; position: relative; }
.thread-top { height: 1px; }
.thread { display: flex; flex-direction: column; padding: 8px 16px 16px; max-width: 760px; margin: 0 auto; width: 100%; }
.thread-loading { display: flex; gap: 8px; align-items: center; justify-content: center; color: var(--label-2); font: var(--t-footnote); padding: 16px; }
.hist { text-align: center; font: var(--t-footnote); color: var(--label-2); margin: 8px 0; }
.older-btn { align-self: center; margin: 4px 0; }
.date-chip { position: sticky; top: 6px; z-index: 5; align-self: center; background: var(--bg-2); color: var(--label-2); font: var(--t-caption1); font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); margin: 12px 0 2px; }
.mrow { display: flex; flex-direction: column; align-items: flex-start; margin-top: 12px; max-width: 100%; }
.mrow.out { align-items: flex-end; }
.mrow.cont { margin-top: 2px; }
.mrow.flash .bubble { animation: flashWash 2s ease-out; }
@keyframes flashWash { 0%, 60% { box-shadow: 0 0 0 4px var(--tint-wash); } 100% { box-shadow: none; } }
.sender { font: var(--t-caption1); font-weight: 600; margin: 0 0 3px 14px; color: var(--sc, var(--label-2)); }
.bwrap { display: flex; align-items: center; gap: 6px; max-width: min(78%, 36rem); }
.mrow.out .bwrap { flex-direction: row; }
.bubble { padding: 8px 14px; border-radius: var(--r-bubble); font: var(--t-body); white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; max-width: 65ch; }
.bubble.in { background: var(--bubble-in); color: var(--bubble-in-text); }
.bubble.in.tail { border-bottom-left-radius: var(--r-xs); }
.bubble.human { background: var(--bubble-out); color: var(--bubble-out-text); }
.bubble.agent { background: var(--bubble-agent); color: var(--bubble-agent-text); }
.bubble.human.tail, .bubble.agent.tail { border-bottom-right-radius: var(--r-xs); }
.bubble.failed { box-shadow: 0 0 0 2px var(--red); }
.mrow.out:last-child .bubble { animation: bubbleIn 200ms var(--ease-standard); }
@keyframes bubbleIn { from { transform: translateY(8px) scale(.98); opacity: .5; } to { transform: none; opacity: 1; } }
.quote { display: block; border-left: 3px solid currentColor; padding: 2px 0 2px 8px; margin: 2px 0 6px; opacity: .8; font: var(--t-subhead); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.media { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-weight: 600; white-space: normal; }
.media small { display: block; font: var(--t-footnote); font-weight: 400; opacity: .85; }
.mbox { width: 40px; height: 40px; border-radius: 10px; background: rgba(0,0,0,.08); display: grid; place-items: center; flex: none; }
@media (prefers-color-scheme: dark) { .mbox { background: rgba(255,255,255,.1); } }
.bubble.human .mbox { background: rgba(255,255,255,.18); }
.mtext { display: block; margin-top: 4px; }
.cap { font: var(--t-footnote); color: var(--label-2); margin-top: 4px; display: flex; gap: 0; align-items: center; flex-wrap: wrap; padding: 0 4px; }
.cap .who, .cap .state { display: inline-flex; gap: 3px; align-items: center; }
.cap .i { width: 12px; height: 12px; }
.cap .sep { padding: 0 4px; }
.cap.fail { color: var(--red); gap: 4px; }
.cap.fail .btn { min-height: 32px; }
.fail-btn { width: 28px; height: 28px; border-radius: 50%; background: var(--red-fill); color: #fff; display: grid; place-items: center; flex: none; position: relative; }
.fail-btn::before { content: ""; position: absolute; inset: -8px; }
.fail-btn .i { width: 18px; height: 18px; stroke-width: 2.2; }
.reply-sender { margin-top: 2px; }
.sys { align-self: center; text-align: center; background: var(--bg-2); border-radius: 14px; padding: 6px 12px; font: var(--t-footnote); color: var(--label-2); margin-top: 14px; max-width: 88%; display: inline-flex; gap: 6px; align-items: center; }
.unread-div { display: flex; align-items: center; gap: 10px; margin-top: 16px; font: var(--t-footnote); font-weight: 600; color: var(--tint); }
.unread-div::before, .unread-div::after { content: ""; flex: 1; height: 1px; background: var(--tint); opacity: .5; }
.jump { position: absolute; right: 16px; bottom: calc(100% - 100% + 84px); width: var(--tap); height: var(--tap); border-radius: 50%; display: grid; place-items: center; z-index: 24; animation: fadeIn var(--dur-base); }
.conv-main > .jump { bottom: auto; top: auto; }
.pcards { padding: 8px 16px 0; display: grid; gap: 8px; flex: none; max-width: 760px; width: 100%; margin: 0 auto; max-height: 45%; overflow-y: auto; }
.pcards .mcard { background: var(--orange-wash); }
.ppill { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 6px; border-radius: var(--r-pill); font: var(--t-subhead); font-weight: 600; color: var(--label); justify-self: center; }
.composer-area { flex: none; padding: 6px 10px calc(10px + var(--safe-b)); display: grid; gap: 6px; max-width: 780px; width: 100%; margin: 0 auto; position: relative; z-index: 25; }
.app.no-tabbar .composer-area { padding-bottom: max(10px, var(--safe-b)); }
.composer { display: flex; align-items: flex-end; gap: 8px; }
.composer.blocked { border-radius: var(--r-lg); padding: 10px 14px; align-items: center; justify-content: center; flex-wrap: wrap; }
.comp-block { flex: 1; text-align: center; font: var(--t-subhead); color: var(--label-glass-2); min-width: 200px; }
.comp-plus { width: 40px; height: 40px; }
.comp-field { flex: 1; display: flex; align-items: flex-end; border-radius: 22px; min-height: var(--tap); padding: 4px 4px 4px 14px; gap: 6px; min-width: 0; }
.comp-field textarea { flex: 1; border: 0; background: transparent; resize: none; font: var(--t-body); font-size: max(calc(16px / var(--z)), calc(17 * var(--pt))); padding: 7px 0; max-height: 142px; outline: none; color: var(--label); height: 36px; min-width: 0; overflow-y: auto; line-height: 22px; }
.comp-field textarea::placeholder { color: var(--label-glass-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comp-field:focus-within { box-shadow: var(--glass-edge), 0 0 0 2px var(--focus); }
.send { width: 32px; height: 32px; border-radius: 50%; background: var(--tint-fill); color: #fff; display: grid; place-items: center; flex: none; margin: 2px; position: relative; transition: transform var(--dur-fast) var(--ease-spring); }
.send::before { content: ""; position: absolute; inset: -6px; }
.send .i { width: 18px; height: 18px; stroke-width: 2.4; }
.send:disabled { background: var(--fill-2); color: var(--label-3); }
.collide { display: flex; gap: 6px; align-items: center; font: var(--t-footnote); font-weight: 600; color: var(--orange); background: var(--orange-wash); border-radius: var(--r-md); padding: 6px 12px; }
.once-hint { border-radius: var(--r-md); padding: 8px 8px 8px 14px; display: flex; gap: 8px; align-items: center; font: var(--t-footnote); color: var(--label); }
.once-hint p { flex: 1; }
.attach { display: flex; align-items: center; gap: 8px; border-radius: var(--r-pill); padding: 2px 4px 2px 12px; font: var(--t-footnote); width: max-content; max-width: 100%; }
.meter.comp { padding: 6px 14px; border-radius: 14px; width: max-content; min-width: 220px; justify-self: center; color: var(--label-glass-2); }
.info-chat .grp { margin-bottom: 20px; }
.nd-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; margin: 4px 0 24px; }
.nd-head h2 { font: var(--t-title2); margin-top: 6px; overflow-wrap: anywhere; }
.nd-head p { font: var(--t-subhead); color: var(--label-2); }

/* ============================================================ menunggu */
.kinds { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; margin-bottom: 8px; }
.kinds::-webkit-scrollbar { display: none; }
.kinds button { flex: none; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: var(--fill-3); font: var(--t-subhead); font-weight: 600; white-space: nowrap; }
@media (pointer: coarse) { .kinds button { min-height: var(--tap); } }
.kinds button[aria-pressed="true"] { background: var(--label); color: var(--bg); }
.mlist { display: grid; gap: 12px; margin-bottom: 20px; }
.mcard { background: var(--bg-grouped-2); border-radius: var(--r-lg); padding: 14px 16px; display: grid; gap: 10px; min-width: 0; }
html[data-w="e"] .mcard { border-radius: var(--r-md); }
.mcard .mh { display: flex; align-items: center; gap: 8px; font: var(--t-subhead); min-width: 0; }
.mcard .mh b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard .mh .age { margin-left: auto; color: var(--label-2); white-space: nowrap; }
.mcard .who { display: flex; align-items: center; gap: 8px; font: var(--t-subhead); color: var(--label-2); flex-wrap: wrap; }
.mcard .who strong { color: var(--label); font: var(--t-headline); }
.mcard .mt { font: var(--t-callout); overflow-wrap: anywhere; white-space: pre-wrap; }
.mcard .mt.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.mcard .mt.muted { color: var(--label-2); font: var(--t-footnote); }
.mcard .more { justify-self: start; margin: -6px 0 0 -8px; }
.mcard.done { opacity: .8; }
.mcard.done-now .pdone, .pdone { display: flex; gap: 6px; align-items: center; font: var(--t-subhead); color: var(--green); font-weight: 600; }
.pact { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pform { display: grid; gap: 8px; }
.pform label { font: var(--t-subhead); font-weight: 600; }
.pform .fn { font: var(--t-footnote); color: var(--label-2); }
.pform .opt { font-weight: 400; color: var(--label-2); }
.done-sec { margin-bottom: 16px; }
.disclose { display: flex; align-items: center; gap: 6px; font: var(--t-headline); color: var(--label); padding: 10px 4px; width: 100%; min-height: var(--tap); }
.disclose .i { transition: transform var(--dur-fast); color: var(--label-2); }
.disclose[aria-expanded="true"] .i { transform: rotate(90deg); }

/* ============================================================ ringkasan */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
html[data-w="m"] .tiles, html[data-w="e"] .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile { background: var(--bg-grouped-2); border-radius: var(--r-lg); padding: 12px 14px 14px; text-align: left; display: grid; gap: 6px; color: var(--label); text-decoration: none; transition: transform var(--dur-press); min-width: 0; }
html[data-w="e"] .tile { border-radius: var(--r-md); }
.tile:hover { background: var(--fill-4); background: color-mix(in srgb, var(--bg-grouped-2) 92%, var(--label)); }
.tile:active { transform: scale(.98); }
.tile .tl { font: var(--t-footnote); color: var(--label-2); display: flex; align-items: center; gap: 6px; }
.tile .tl .i { width: 17px; height: 17px; }
.tile .tv { font: var(--t-title1); font-variant-numeric: tabular-nums; }
.cards { display: grid; gap: 12px; }
html[data-w="m"] .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
html[data-w="e"] .cards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-items: start; }
.ncard { background: var(--bg-grouped-2); border-radius: var(--r-lg); padding: 14px 16px; position: relative; overflow: hidden; display: grid; gap: 12px; text-align: left; min-width: 0; }
html[data-w="e"] .ncard { border-radius: var(--r-md); }
.ncard.problem::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grey-dot); }
.ncard.problem.tone-orange::before { background: var(--orange-dot); } .ncard.problem.tone-red::before { background: var(--red-dot); } .ncard.problem.tone-blue::before { background: var(--tint); }
.ncard .stretch { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.ncard .stretch:hover { background: var(--fill-4); }
.ncard .stretch:focus-visible { outline-offset: -3px; }
.ncard > *:not(.stretch) { position: relative; z-index: 1; pointer-events: none; }
.ncard .lift, .ncard .lift *, .ncard a:not(.stretch), .ncard button { pointer-events: auto; }
.ncard .nh { display: flex; align-items: center; gap: 12px; }
.ncard .nh h3 { margin: 0; font: var(--t-title3); flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ncard .nh h3 small { display: block; font: var(--t-subhead); color: var(--label-2); margin-top: 2px; }
.ncard .fresh { font: var(--t-footnote); color: var(--label-2); margin-top: -6px; }
.ncard .fixline { font: var(--t-callout); color: var(--label-2); }
.mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.mini div { display: grid; }
.mini b { font: var(--t-headline); font-family: var(--font-rounded); }
.mini span { font: var(--t-caption1); color: var(--label-2); }
.meters { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nfoot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: var(--t-subhead); color: var(--label-2); }
.admins { display: inline-flex; align-items: center; gap: 6px; }
.nlink { display: flex; align-items: center; justify-content: space-between; border-top: .5px solid var(--separator); padding-top: 10px; font: var(--t-subhead); font-weight: 600; color: var(--tint); width: 100%; min-height: 32px; }
.hero { background: var(--bg-grouped-2); border-radius: var(--r-lg); padding: 28px 20px; display: grid; gap: 12px; justify-items: center; text-align: center; margin: 8px 0 20px; }
.hero h2 { font: var(--t-title2); }
.hero p { font: var(--t-callout); color: var(--label-2); max-width: 36ch; }
.hero-glyph { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--tint-wash); color: var(--tint); }
.hero-glyph .i { width: 34px; height: 34px; }
.checklist { background: var(--bg-grouped-2); border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 20px; }
.cl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cl-head h2 { font: var(--t-headline); }
.cl { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.cl li { display: flex; align-items: center; gap: 10px; font: var(--t-callout); min-height: 32px; }
.cl li.ok { color: var(--label-2); } .cl li.ok .i { color: var(--green); }
.cl li.no .i { color: var(--label-3); }
.single { margin-bottom: 20px; }
.sec-h { font: var(--t-title3); margin: 0 0 10px; }

/* ============================================================ panel koneksi */
.plate { background: var(--bg-grouped-2); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 32px; }
html[data-w="e"] .plate { border-radius: var(--r-md); }
.plate-top { height: 4px; background: var(--grey-dot); }
.plate.tone-green .plate-top { background: var(--green-dot); } .plate.tone-blue .plate-top { background: var(--tint); }
.plate.tone-orange .plate-top { background: var(--orange-dot); } .plate.tone-red .plate-top { background: var(--red-dot); }
.plate-b { padding: 16px; display: grid; gap: 12px; }
html[data-w="e"] .plate-b { padding: 20px 24px; }
.plate-head { display: flex; }
.plate h3 { font: var(--t-title3); overflow-wrap: anywhere; }
.plate .lead { font: var(--t-callout); color: var(--label-2); margin-top: -6px; }
.plate .reason { font: var(--t-footnote); color: var(--label-2); }
.qr-wrap { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; }
html[data-w="c"] .qr-wrap { grid-template-columns: 1fr; gap: 16px; justify-items: center; }
.qr { width: min(264px, 72vw); aspect-ratio: 1; background: #fff; border-radius: var(--r-md); padding: 12px; box-shadow: inset 0 0 0 1px var(--separator); display: grid; place-items: center; }
.qr img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.qr.dim img { opacity: .35; filter: blur(2px); }
.qr-wait { color: #55555A; font: var(--t-footnote); text-align: center; padding: 16px; }
.qr-cap { font: var(--t-footnote); color: var(--label-2); margin: 8px 0 0; text-align: center; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 10px; }
.steps li { counter-increment: s; display: flex; gap: 10px; align-items: flex-start; font: var(--t-callout); }
.steps li::before { content: counter(s); flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--fill-3); display: grid; place-items: center; font: var(--t-caption1); font-weight: 600; font-variant-numeric: tabular-nums; margin-top: -1px; }
.pairform, .pairresult { display: grid; gap: 12px; }
.pairform .btn { justify-self: start; }
.code-cap { font: var(--t-callout); color: var(--label-2); }
.code { display: flex; align-items: center; gap: 6px; direction: ltr; user-select: all; transition: opacity .3s; }
.code.dim { opacity: .45; }
.code > span[aria-hidden] { flex: 1; max-width: var(--tap); aspect-ratio: 4/5; border-radius: 10px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--stroke-control); display: grid; place-items: center; font: 600 clamp(22px, 7vw, 32px)/1 var(--font-mono); }
.code .code-dash { width: 10px; height: 3px; flex: none; }
.success { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 24px 8px; }
.success h3 { font: var(--t-title3); }
.big-check { width: 72px; height: 72px; border-radius: 50%; background: var(--switch-on); color: #fff; display: grid; place-items: center; animation: popScale 420ms var(--ease-spring); }
.big-check .i { width: 40px; height: 40px; stroke-width: 2.6; }
@keyframes popScale { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.loss { margin: 0 0 4px; padding-left: 1.2em; font: var(--t-callout); display: grid; gap: 4px; }
.lead { font: var(--t-callout); color: var(--label-2); }
.lead.strong { color: var(--red); font-weight: 600; }
.quote-box { background: var(--bg-2); border-radius: var(--r-md); padding: 12px 14px; font: var(--t-callout); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ============================================================ pengetahuan */
.know { display: grid; gap: 16px; }
.know.with-guide { grid-template-columns: 1fr 280px; align-items: start; }
.know-main { display: grid; gap: 8px; min-width: 0; padding-top: 8px; }
.know-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.know-status { font: var(--t-footnote); color: var(--label-2); flex: 1; }
.know-status.dirty { color: var(--orange); } .know-status.err { color: var(--red); }
.know-size { font: var(--t-footnote); color: var(--label-2); }
.know-size.warn { color: var(--orange); } .know-size.over { color: var(--red); font-weight: 600; }
.know-ta { width: 100%; min-height: 60vh; border-radius: var(--r-md); border: 1px solid var(--stroke-control); background: var(--bg-grouped-2); color: var(--label); padding: 14px 16px; font: var(--t-body); font-size: max(calc(16px / var(--z)), calc(17 * var(--pt))); line-height: 1.5; resize: vertical; }
.know-ta:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.guide-panel { background: var(--bg-grouped-2); border-radius: var(--r-md); padding: 14px 16px; position: sticky; top: 8px; }
.guide-panel h2 { font: var(--t-headline); margin-bottom: 8px; }
.guide { font: var(--t-callout); display: grid; gap: 8px; }
.guide ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }

/* ============================================================ pengguna, aktivitas, pengingat */
.user-row .un, .rem-row .un { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.user-row .meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.perm-glyphs { display: inline-flex; gap: 4px; color: var(--label-2); align-items: center; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.filter-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: var(--fill-3); font: var(--t-subhead); font-weight: 600; }
@media (pointer: coarse) { .filter-pill { min-height: var(--tap); } }
.audit-row .rt small { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.audit-row .rt small:empty { display: none; }
.rem-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: var(--t-subhead); color: var(--label); margin-top: 4px; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; align-items: center; margin: 0; padding: 4px 0; }
.keys dd { margin: 0; font: var(--t-callout); }

/* ============================================================ sheet, alert, menu, toast */
dialog { color: var(--label); }
dialog::backdrop { background: var(--scrim); animation: fadeIn var(--dur-base); }
dialog.closing::backdrop { opacity: 0; transition: opacity 150ms; }
dialog.sheet {
  padding: 0; border: 0; overflow: hidden; display: flex; flex-direction: column;
  background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  box-shadow: var(--glass-edge), var(--shadow-sheet);
  width: min(560px, calc(100% - 32px)); max-width: none; max-height: min(85vh, 900px); border-radius: var(--r-lg);
  animation: fadeScale var(--dur-base) var(--ease-standard);
}
dialog.sheet:not([open]) { display: none; }
html[data-w="e"] dialog.sheet { width: 520px; background: var(--bg-elevated); }
html[data-w="c"] dialog.sheet {
  margin: auto 0 0; inset: auto 8px 8px; width: calc(100% - 16px); max-height: 62vh; border-radius: var(--r-sheet);
  animation: sheetUp var(--dur-sheet) var(--ease-spring); touch-action: pan-y;
}
html[data-w="c"] dialog.sheet.large { inset: auto 0 0; width: 100%; max-height: calc(var(--vvh, 100vh) - var(--safe-t) - 12px); height: calc(var(--vvh, 100vh) - var(--safe-t) - 12px); border-radius: var(--r-sheet) var(--r-sheet) 0 0; background: var(--glass-solid); }
html[data-w="c"] dialog.sheet.dragging { transition: none; animation: none; }
html[data-w="c"] dialog.sheet.closing { animation: sheetDown 170ms var(--ease-exit) forwards; }
dialog.sheet.closing { animation: fadeOut 150ms var(--ease-exit) forwards; }
.grabber-hit { padding: 6px 0 2px; flex: none; cursor: grab; touch-action: none; }
.grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--fill-1); margin: 0 auto; }
.sheet-h { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 6px 10px; min-height: 52px; flex: none; gap: 8px; touch-action: none; }
.sheet-h h2 { margin: 0; font: var(--t-headline); text-align: center; overflow-wrap: anywhere; max-width: 60vw; }
.sheet-h h2:focus { outline: none; }
.sheet-h .l { justify-self: start; } .sheet-h .rgt { justify-self: end; }
.sheet-b { overflow-y: auto; padding: 8px 16px calc(20px + var(--safe-b)); display: grid; gap: 16px; align-content: start; min-height: 0; flex: 1; }
.sheet-b > .grp { margin-bottom: 0; }
.sheet-b .grp-b { background: var(--bg-grouped-2); }
html[data-w="c"] .sheet-b .grp-b { background: var(--bg-elevated); }
dialog.alert { width: 300px; max-width: calc(100% - 48px); border: 0; padding: 20px 16px 14px; border-radius: var(--r-lg); text-align: center; background: var(--glass-strong); animation: fadeScale var(--dur-base) var(--ease-standard); }
dialog.alert.closing { animation: fadeOut 150ms forwards; }
dialog.alert h2 { font: var(--t-headline); margin: 0 0 6px; }
dialog.alert p { font: var(--t-footnote); color: var(--label-glass-2); margin: 0 0 14px; }
.alert-btns { display: grid; gap: 8px; }
dialog.actionsheet { border: 0; padding: 0 8px calc(8px + var(--safe-b)); margin: auto 0 0; inset: auto 0 0; width: 100%; max-width: 100%; background: transparent; display: grid; gap: 8px; animation: sheetUp var(--dur-sheet) var(--ease-spring); overflow: visible; }
dialog.actionsheet:not([open]) { display: none; }
dialog.actionsheet.closing { animation: sheetDown 170ms var(--ease-exit) forwards; }
.as-group { border-radius: 14px; overflow: hidden; display: grid; }
.as-group.pad { padding: 16px; gap: 8px; text-align: left; }
.as-group.pad b { font: var(--t-headline); } .as-group.pad p { font: var(--t-callout); color: var(--label-glass-2); }
.as-group.pad .btn { justify-self: end; }
.as-head { text-align: center; padding: 14px 16px 10px; font: var(--t-footnote); color: var(--label-glass-2); border-bottom: .5px solid var(--separator); }
.as-head b { display: block; font-weight: 600; color: var(--label-glass-2); }
.as-head p { margin-top: 2px; }
.mi { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 16px; font: var(--t-body); font-size: 19px; color: var(--tint); width: 100%; border-top: .5px solid var(--separator); }
.as-group > .mi:first-child, .as-head + .mi { border-top: 0; }
.mi.red { color: var(--red); }
.mi.cancel { font-weight: 600; }
.mi:disabled { color: var(--label-3); }
.mi:active { background: var(--press); }
.mi:focus-visible { outline-offset: -3px; }
dialog.popover { border: 0; padding: 6px; margin: 0; position: fixed; inset: auto; width: 280px; max-width: calc(100% - 16px); border-radius: var(--r-md); animation: fadeIn var(--dur-fast); }
dialog.popover::backdrop { background: transparent; }
dialog.popover.closing { animation: fadeOut 120ms forwards; }
.pop-list { display: grid; }
.pop-list .as-head { border: 0; padding: 6px 10px 6px; text-align: left; }
.pop-list .mi { justify-content: flex-start; min-height: 40px; font: var(--t-body); color: var(--label); border: 0; border-radius: 10px; padding: 0 10px; }
@media (pointer: coarse) { .pop-list .mi { min-height: var(--tap); } }
.pop-list .mi:hover { background: var(--fill-3); }
.pop-list .mi .i { color: var(--label-glass-2); }
.pop-list .mi.red, .pop-list .mi.red .i { color: var(--red); }
.pop-pad { padding: 8px 10px; display: grid; gap: 6px; font: var(--t-footnote); }
.pop-pad b { font: var(--t-subhead); font-weight: 600; }
.pop-pad .btn { justify-self: end; }
.toasts { position: fixed; z-index: 60; left: 0; right: 0; bottom: calc(96px + var(--safe-b)); display: flex; justify-content: center; pointer-events: none; padding: 0 16px; }
html[data-w="m"] .toasts { bottom: calc(24px + var(--safe-b)); }
html[data-w="e"] .toasts { justify-content: flex-start; left: 276px; bottom: 20px; }
html:not([data-mode="app"]) .toasts { bottom: 24px; }
.toast { pointer-events: auto; border-radius: var(--r-pill); padding: 10px 18px; font: var(--t-subhead); color: var(--label); display: flex; align-items: center; gap: 8px; animation: toastIn 200ms var(--ease-standard); max-width: 100%; }
.toast .ok { color: var(--green); }
.toast.out { opacity: 0; transition: opacity 150ms; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sheetUp { from { transform: translateY(105%); } to { transform: none; } }
@keyframes sheetDown { to { transform: translateY(105%); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes fadeScale { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* ============================================================ gerak dikurangi (spek §4.4) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-property: opacity !important; transition-duration: 150ms !important; scroll-behavior: auto !important; }
  .host.anim-push, .host.anim-pop, dialog.sheet, dialog.actionsheet, dialog.alert, dialog.popover, .toast, .banner.kill, .newpill, .jump, .big-check { animation: fadeIn 150ms linear !important; }
  .mrow.out:last-child .bubble, .mrow.flash .bubble { animation: none !important; }
  .mrow.flash .bubble { box-shadow: 0 0 0 4px var(--tint-wash); }
  dialog.closing { animation: fadeOut 120ms linear forwards !important; }
  .spin { animation: none !important; border-right-color: currentColor; opacity: .5; }
  .btn:active:not(:disabled), .tile:active, .gbtn:active { transform: none; }
  .lens { transition: none !important; }
}

/* ============================================================ media di chat & Space */
.mwrap { display: grid; gap: 6px; justify-items: start; max-width: 100%; }
.mimg { display: block; padding: 0; border: 0; background: none; border-radius: 12px; overflow: hidden; cursor: zoom-in; max-width: 100%; }
.mimg img { display: block; max-width: min(100%, 320px); max-height: 320px; min-width: 160px; min-height: 110px; object-fit: cover; background: var(--fill-3); border-radius: 12px; }
.msticker { display: block; width: 128px; height: 128px; object-fit: contain; }
.mvideo { display: block; max-width: min(100%, 320px); max-height: 320px; border-radius: 12px; background: #000; }
.maudio { display: block; width: min(100%, 280px); height: 40px; }
.mstate { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font: var(--t-subhead); padding: 4px 0; white-space: normal; }
.mstate .mst { flex: 1 1 140px; min-width: 0; }
.mstate .btn { min-height: 32px; }
.mfile { display: flex; align-items: center; gap: 10px; padding: 2px 0; white-space: normal; min-width: 0; max-width: 100%; }
.mfn { display: block; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.mfn small { display: block; font: var(--t-footnote); font-weight: 400; opacity: .85; }
.mdel { display: inline-flex; align-items: center; gap: 6px; font-style: italic; opacity: .75; white-space: normal; }
.msum { display: flex; gap: 6px; align-items: flex-start; font: var(--t-footnote); opacity: .92; padding: 6px 8px; border-radius: 10px; background: rgba(0,0,0,.06); white-space: normal; max-width: 100%; }
.msum .i { flex: none; margin-top: 2px; }
.bubble.human .msum { background: rgba(255,255,255,.18); }
@media (prefers-color-scheme: dark) { .msum { background: rgba(255,255,255,.08); } }
.bubble .btn.plain { color: inherit; text-decoration: underline; }
.attach .afn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach .afn small { opacity: .8; }
.readyrow { align-items: center; }
.readyrow.ok .rt { color: var(--green); font-weight: 600; }
.readyrow.no .rt { color: var(--orange); font-weight: 600; }
.lightbox .sheet-b { display: grid; place-items: center; padding: 8px; }
.lb { display: grid; place-items: center; width: 100%; }
.lb img { max-width: 100%; max-height: 70vh; border-radius: var(--r-md); object-fit: contain; }

/* Space per chat */
.space { display: grid; gap: 12px; }
.sp-note { font: var(--t-footnote); color: var(--label-2); }
.sp-list { display: grid; gap: 0; background: var(--bg-grouped-2); border-radius: var(--r-md); overflow: hidden; }
.sp-row { display: flex; gap: 12px; padding: 12px 14px; align-items: flex-start; border-top: .5px solid var(--separator); }
.sp-row:first-child { border-top: 0; }
.sp-thumb { flex: none; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--fill-3); display: grid; place-items: center; padding: 0; border: 0; color: var(--label-2); }
.sp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-body { min-width: 0; flex: 1; display: grid; gap: 4px; justify-items: start; }
.sp-t { font: var(--t-callout); font-weight: 600; overflow-wrap: anywhere; }
.sp-t small { display: block; font: var(--t-footnote); font-weight: 400; color: var(--label-2); }
.sp-sum { font: var(--t-footnote); color: var(--label); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; overflow-wrap: anywhere; }
.sp-tag { flex: none; }
.sp-url { font: var(--t-caption1); color: var(--label-2); overflow-wrap: anywhere; font-family: var(--font-mono); }
.sp-act { display: flex; gap: 8px; flex-wrap: wrap; }

dialog.dropdown { padding: 6px; overflow-y: auto; }
.numlist { display: grid; gap: 2px; }
.numlist .numrow, .numlist .numadd { width: 100%; border: 0; border-radius: 10px; background: transparent; text-align: left; padding: 8px 10px; }
.numlist .numrow:hover, .numlist .numadd:hover { background: var(--fill-3); }
.numlist .numrow[aria-pressed="true"] { background: var(--fill-3); }
.numlist .numadd { margin-top: 4px; border-top: 1px solid var(--separator, var(--fill-3)); border-radius: 0 0 10px 10px; }

.mcard .age.tone-warn { color: var(--orange); }
.mcard .age.tone-late { color: var(--red); font-weight: 600; }
.sum-line { font: var(--t-subhead); color: var(--label-2); margin: 0 0 10px; }
.bulk { margin: 0 0 12px; }
.proof { display: grid; gap: 6px; }
.ctx { display: grid; gap: 6px; }
.ctx-t { justify-self: start; margin-left: -8px; }
.ctx-list { list-style: none; margin: 0; padding: 8px 10px; display: grid; gap: 6px; background: var(--fill-3); border-radius: var(--r-md); }
.ctx-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; font: var(--t-footnote); }
.ctx-list li b { font-weight: 600; color: var(--label-2); }
.ctx-list li.me b { color: var(--blue); }
.ctx-list li span { overflow-wrap: anywhere; white-space: pre-wrap; }
.ctx-list li time { color: var(--label-2); white-space: nowrap; }

/* Pita lingkungan non-produksi (APP_LABEL), tidak menutupi apa pun dan tidak menerima klik */
html[data-env]::before { content: attr(data-env); position: fixed; top: 0; right: 12px; z-index: 9999; padding: 1px 10px 2px; border-radius: 0 0 8px 8px; background: #C55300; color: #fff; font: 700 11px/16px var(--font); letter-spacing: .06em; pointer-events: none; }