/* SupplyKlik — "Bersih" / "Clean" theme (DESIGN §6.6.2), the second look next to "The Matrix" (app.css).
   Design language and its source: DESIGN §6.6.2 (no third-party name, logo, imagery or font here): light by default —
   white and #F5F5F7 bands, near-black text, a grey secondary text, blue links and pill buttons — generous space,
   large tight headlines in the platform's system font, a translucent sticky bar, large rounded cards
   with soft shadows and a subtle fade-in on scroll; dark when the OS prefers dark. Semantic colours stay distinct:
   amber warning (and every "open room · not encrypted" label), red danger and key changes, green verified — each
   with its icon and words. No digital rain, no glow, no terminal chrome; monospace only for security and
   recovery codes.
   Every rule is scoped to html[data-theme="clean"] (set before first paint by js/theme-boot.js). Component rules
   use :where(), so they have the same specificity as the app.css rules they replace and win only by coming later:
   app.css's more specific local rules keep working. The colour tokens are screen-only, so printing still uses
   app.css's black-on-white print tokens. Every text/background pair is checked in tests/ui/theme-contrast.test.js.
   Sections follow app.css: 1 tokens · 2 base · 3 utilities · 4 shell · 5 buttons · 6 forms · 7 cards, badges,
   avatars · 8 landing · 9 search · 10 categories, rooms · 11–13 cards, profile, editor · 14 static pages ·
   15 states · 16 dialogs, toasts · 17 chat · D2 · v2 U1–U3 · 21 theme switch · 22 motion · 23 rain off. */

/* ===== 1. Tokens ===== */
:root[data-theme="clean"] {
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --r1: 12px; --r2: 18px; --r-pill: 980px; --r-lg: 24px;
  --glow-text: none; --glow-text-sm: none;
  --c-glow: transparent; --c-glow-soft: transparent;
  --header-h: 52px;
  --ease: cubic-bezier(.25, .1, .25, 1);
}
@media (min-width: 600px) { :root[data-theme="clean"] { --header-h: 56px; } }
/* Light (default). Card and panel edges (--c-border-dim) are decorative hairlines: cards stand out by fill and
   shadow; every control boundary (inputs, checkboxes, outline buttons) is --c-border-strong, ≥ 3:1. */
@media screen {
  :root[data-theme="clean"] {
    color-scheme: light;
    --c-bg: #F5F5F7; --c-surface: #FFFFFF; --c-surface-2: #F5F5F7;
    --c-border: #D2D2D7;                        /* hairline dividers */
    --c-border-dim: #E3E3E8;                    /* card and panel edges (decorative) */
    --c-border-strong: #86868B;                 /* ≥ 3:1: inputs, checkboxes, control outlines */
    --c-text: #1D1D1F; --c-muted: #6E6E73; --c-heading: #1D1D1F; --c-heading-ink: #FFFFFF;
    --c-primary: #0066CC; --c-primary-ink: #FFFFFF; --c-primary-soft: #EDF5FE;
    --c-accent: #1D1D1F; --c-accent-ink: #FFFFFF; --c-accent-hover: #000000;
    --c-success: #1A7F37; --c-success-ink: #FFFFFF; --c-success-soft: #EAF7EE;
    --c-warning: #9A5B00; --c-warning-ink: #FFFFFF; --c-warning-soft: #FFF5E6; --c-warning-text: #6B3F00;
    --c-warning-border: #A86B00;
    --c-danger: #D70015; --c-danger-ink: #FFFFFF; --c-danger-soft: #FFF1F0; --c-danger-text: #9F000F;
    --c-danger-hover: #B80012;
    --c-focus: #0071E3;
    --c-overlay: rgba(0, 0, 0, .32);
    --c-skeleton: #C7C7CC;
    --c-selection: #B4D5FE;
    --c-button: #0071E3; --c-button-hover: #0062C3; --c-button-ink: #FFFFFF;
    --c-nav-bg: rgba(255, 255, 255, .8);        /* translucent bar; only --c-text/--c-heading words sit on it */
    --c-thread-bg: #FFFFFF; --c-bubble-other: #E9E9EB; --c-bubble-own: #0071E3; --c-bubble-own-ink: #FFFFFF;
    --c-av-ink: #1D1D1F;
    --c-av0: #DCE8F8; --c-av1: #DDF0E2; --c-av2: #FBE7D3; --c-av3: #E8E1F6; --c-av4: #F8DDE5; --c-av5: #DCEFF1;
    --shadow-card: 2px 4px 12px rgba(0, 0, 0, .08);
    --shadow: 2px 6px 20px rgba(0, 0, 0, .14);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, .16), 0 0 0 1px rgba(0, 0, 0, .04);
  }
}
/* Dark: black and #1D1D1F surfaces, #F5F5F7 text, the blue family lightened for contrast. */
@media screen and (prefers-color-scheme: dark) {
  :root[data-theme="clean"] {
    color-scheme: dark;
    --c-bg: #000000; --c-surface: #1D1D1F; --c-surface-2: #2C2C2E;
    --c-border: #38383A;
    --c-border-dim: #38383A;
    --c-border-strong: #7C7C80;
    --c-text: #F5F5F7; --c-muted: #A1A1A6; --c-heading: #F5F5F7; --c-heading-ink: #000000;
    --c-primary: #2997FF; --c-primary-ink: #000000; --c-primary-soft: #0B2A4A;
    --c-accent: #F5F5F7; --c-accent-ink: #1D1D1F; --c-accent-hover: #FFFFFF;
    --c-success: #30D158; --c-success-ink: #000000; --c-success-soft: #0B2E16;
    --c-warning: #FFB340; --c-warning-ink: #000000; --c-warning-soft: #33240A; --c-warning-text: #FFD48A;
    --c-warning-border: #A87516;
    --c-danger: #FF6961; --c-danger-ink: #000000; --c-danger-soft: #3B1212; --c-danger-text: #FFC9C5;
    --c-danger-hover: #FF8A84;
    --c-focus: #2997FF;
    --c-overlay: rgba(0, 0, 0, .6);
    --c-skeleton: #48484A;
    --c-selection: #1F4C80;
    --c-button: #0071E3; --c-button-hover: #0062C3; --c-button-ink: #FFFFFF;
    --c-nav-bg: rgba(22, 22, 23, .8);
    --c-thread-bg: #000000; --c-bubble-other: #262628; --c-bubble-own: #0071E3; --c-bubble-own-ink: #FFFFFF;
    --c-av-ink: #F5F5F7;
    --c-av0: #1C3557; --c-av1: #1E3D29; --c-av2: #4A2E14; --c-av3: #352A52; --c-av4: #4A2030; --c-av5: #163E44;
    --shadow-card: none;
    --shadow: 0 0 0 1px rgba(255, 255, 255, .14);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .1);
  }
}
/* Paper: app.css's print tokens (black ink on white) apply; these are the Clean theme's own extra tokens. */
@media print {
  :root[data-theme="clean"] {
    --c-accent-hover: #000000; --c-danger-hover: #000000; --c-selection: #FFFFFF; --c-heading-ink: #000000;
    --c-button: #FFFFFF; --c-button-hover: #FFFFFF; --c-button-ink: #000000;
    --c-nav-bg: #FFFFFF; --c-thread-bg: #FFFFFF; --c-bubble-other: #FFFFFF; --c-bubble-own: #FFFFFF; --c-bubble-own-ink: #000000;
    --shadow-card: none; --shadow: none; --shadow-lg: none;
  }
}

/* ===== 2. Base ===== */
:where(html[data-theme="clean"]) body { font: 17px/1.47 var(--font); letter-spacing: -.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
:where(html[data-theme="clean"]) h1, :where(html[data-theme="clean"]) h2, :where(html[data-theme="clean"]) h3, :where(html[data-theme="clean"]) h4 { font-weight: 600; letter-spacing: -.015em; }
:where(html[data-theme="clean"]) h1, :where(html[data-theme="clean"]) h2 { text-shadow: none; }
:where(html[data-theme="clean"]) h1 { font-size: 32px; line-height: 1.125; font-weight: 700; letter-spacing: -.022em; }
:where(html[data-theme="clean"]) h2 { font-size: 24px; line-height: 1.17; }
:where(html[data-theme="clean"]) h3 { font-size: 19px; line-height: 1.26; }
:where(html[data-theme="clean"]) h4 { font-size: 17px; }
@media (min-width: 600px) { :where(html[data-theme="clean"]) h1 { font-size: 40px; line-height: 1.1; } :where(html[data-theme="clean"]) h2 { font-size: 28px; } }
:where(html[data-theme="clean"]) a { text-decoration-thickness: 1px; text-underline-offset: .18em; }
:where(html[data-theme="clean"]) a:hover { text-decoration-thickness: 1px; text-shadow: none; }
:where(html[data-theme="clean"]) strong, :where(html[data-theme="clean"]) b { font-weight: 600; }
:where(html[data-theme="clean"]) ::selection { background: var(--c-selection); color: var(--c-text); }
:where(html[data-theme="clean"]) .lead { font-size: 19px; line-height: 1.42; }

/* ===== 4. App shell ===== */
/* The bar is translucent (blur + saturate, like a frosted pane) with a solid fallback; only --c-text and
   --c-heading words sit directly on it, and they stay ≥ 4.5:1 over the darkest content behind it. */
:where(html[data-theme="clean"]) .app-header { background: var(--c-nav-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--c-border); box-shadow: none; }
:where(html[data-theme="clean"]) .bottom-nav { background: var(--c-nav-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--c-border); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :where(html[data-theme="clean"]) .app-header, :where(html[data-theme="clean"]) .bottom-nav { background: var(--c-surface); }
}
@media (prefers-reduced-transparency: reduce) {
  :where(html[data-theme="clean"]) .app-header, :where(html[data-theme="clean"]) .bottom-nav { background: var(--c-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
:where(html[data-theme="clean"]) .brand { font-size: 17px; font-weight: 600; letter-spacing: -.02em; text-shadow: none; }
:where(html[data-theme="clean"]) .brand .logo-mark { filter: none; }
:where(html[data-theme="clean"]) .logo-mark .logo-tile { fill: var(--c-button); }
:where(html[data-theme="clean"]) .logo-mark .logo-bubble { fill: var(--c-button-ink); }
:where(html[data-theme="clean"]) .logo-mark .logo-dot { fill: var(--c-button); }
:where(html[data-theme="clean"]) .logo-mark .logo-link { stroke: var(--c-button); }
:where(html[data-theme="clean"]) .nav-link { font-size: 14px; font-weight: 400; letter-spacing: -.01em; }
:where(html[data-theme="clean"]) .nav-link:hover { color: var(--c-heading); }
:where(html[data-theme="clean"]) .nav-link { position: relative; }
:where(html[data-theme="clean"]) .nav-link[aria-current="page"] { color: var(--c-heading); background: transparent; box-shadow: none; font-weight: 600; text-shadow: none; }
/* The current page: a 2 px bar under the label (a shape, not only a colour). */
:where(html[data-theme="clean"]) .nav-link[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 1px; background: var(--c-heading); }
:where(html[data-theme="clean"]) .lang-toggle { color: var(--c-text); font-weight: 600; letter-spacing: .02em; }
:where(html[data-theme="clean"]) .lang-toggle:hover { border-color: var(--c-text); box-shadow: none; }
:where(html[data-theme="clean"]) .app-header .btn-tertiary { color: var(--c-heading); }
:where(html[data-theme="clean"]) .menu-panel { border-color: var(--c-border-dim); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; }
:where(html[data-theme="clean"]) .menu-item { border-radius: 8px; }
/* Menus use a smaller size than the 17 px body, in a slightly wider panel, so items such as "Ganti ke tampilan Matrix"
   stay on one line (review L5); rows keep their 44 px height. */
:where(html[data-theme="clean"]) .menu-panel { min-width: 264px; }
:where(html[data-theme="clean"]) .menu-item { font-size: 15px; }
:where(html[data-theme="clean"]) .menu-alert, :where(html[data-theme="clean"]) .menu-alert.is-info { box-shadow: 0 0 0 2px var(--c-surface); }
:where(html[data-theme="clean"]) .menu-panel .menu-heading { font-size: 13px; }
:where(html[data-theme="clean"]) .app-footer { background: var(--c-bg); border-top: 1px solid var(--c-border); font-size: 13px; line-height: 1.5; }
:where(html[data-theme="clean"]) .app-footer a { text-decoration: none; }
:where(html[data-theme="clean"]) .app-footer a:hover { color: var(--c-text); text-decoration: underline; }
:where(html[data-theme="clean"]) .app-footer .footer-brand { text-shadow: none; font-weight: 600; font-size: 15px; }
/* The landing's last band (the join panel) is grey, so its footer is white: the white / grey rhythm runs to the end
   (review N2). Other pages sit on the grey page colour and keep the grey footer. */
:where(html[data-theme="clean"]) body[data-view="landing"] .app-footer { background: var(--c-surface); }
/* Demo mode is information, not a warning: a neutral grey ribbon with the info icon, centred under the bar, so amber
   stays reserved for warnings and the open-room label (review I1). */
:where(html[data-theme="clean"]) .demo-banner { background: var(--c-surface-2); color: var(--c-text); border-bottom-color: var(--c-border); font-size: 13px; }
:where(html[data-theme="clean"]) .demo-banner .container { justify-content: center; text-align: center; }
:where(html[data-theme="clean"]) .demo-banner .icon { color: var(--c-muted); }
:where(html[data-theme="clean"]) .bottom-nav a { color: var(--c-text); font-size: 11px; letter-spacing: 0; }
:where(html[data-theme="clean"]) .bottom-nav a[aria-current="page"] { color: var(--c-heading); font-weight: 600; text-shadow: none; }
:where(html[data-theme="clean"]) .bottom-nav a[aria-current="page"]::before { background: var(--c-button); box-shadow: none; left: 34%; right: 34%; border-radius: 0 0 3px 3px; }

/* ===== 5. Buttons: pills ===== */
:where(html[data-theme="clean"]) .btn { border-radius: var(--r-pill); font-weight: 500; letter-spacing: -.01em; }
:where(html[data-theme="clean"]) .btn-primary { background: var(--c-button); border-color: var(--c-button); color: var(--c-button-ink); box-shadow: none; }
:where(html[data-theme="clean"]) .btn-primary:hover { background: var(--c-button-hover); border-color: var(--c-button-hover); box-shadow: none; }
:where(html[data-theme="clean"]) .btn-accent { box-shadow: none; }
:where(html[data-theme="clean"]) .btn-accent:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); box-shadow: none; }
:where(html[data-theme="clean"]) .btn-secondary { border-color: var(--c-primary); }
:where(html[data-theme="clean"]) .btn-secondary:hover { box-shadow: none; }
:where(html[data-theme="clean"]) .btn-danger:hover { background: var(--c-danger-hover); border-color: var(--c-danger-hover); box-shadow: none; }
:where(html[data-theme="clean"]) .btn[disabled], :where(html[data-theme="clean"]) .btn[aria-disabled="true"] { opacity: .42; }

/* ===== 6. Forms ===== */
:where(html[data-theme="clean"]) .field-label { font-weight: 600; }
:where(html[data-theme="clean"]) .fieldset > legend, :where(html[data-theme="clean"]) .legend { font-weight: 600; }
:where(html[data-theme="clean"]) .input, :where(html[data-theme="clean"]) .select, :where(html[data-theme="clean"]) .textarea { background: var(--c-surface); }
:where(html[data-theme="clean"]) .input:focus-visible, :where(html[data-theme="clean"]) .select:focus-visible, :where(html[data-theme="clean"]) .textarea:focus-visible { box-shadow: none; }
:where(html[data-theme="clean"]) .check input[type="checkbox"], :where(html[data-theme="clean"]) .check input[type="radio"] { background: var(--c-surface); }
:where(html[data-theme="clean"]) .check input[type="checkbox"] { border-radius: 6px; }
:where(html[data-theme="clean"]) .check input[type="checkbox"]::after { border-color: var(--c-button-ink); border-width: 0 2px 2px 0; }
:where(html[data-theme="clean"]) .check input[type="radio"]::after { background: var(--c-button); }
:where(html[data-theme="clean"]) .check input[type="checkbox"]:checked { background: var(--c-button); border-color: var(--c-button); }
:where(html[data-theme="clean"]) .check input[type="radio"]:checked { border-color: var(--c-button); }
:where(html[data-theme="clean"]) .check input:hover { border-color: var(--c-button); }
:where(html[data-theme="clean"]) .error-summary h2 { font-size: 19px; }

/* ===== 7. Cards, badges, avatars ===== */
:where(html[data-theme="clean"]) .card { border-color: var(--c-border-dim); box-shadow: var(--shadow-card); padding: 20px; }
:where(html[data-theme="clean"]) .card-flush { padding: 0; }
@media (min-width: 600px) { :where(html[data-theme="clean"]) .card { padding: 24px; } :where(html[data-theme="clean"]) .card-flush { padding: 0; } }
@media (hover: hover) and (pointer: fine) {
  :where(html[data-theme="clean"]) .card-hover { transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
  :where(html[data-theme="clean"]) .card-hover:hover { box-shadow: var(--shadow); border-color: var(--c-border-dim); }
}
:where(html[data-theme="clean"]) .badge { font-weight: 600; letter-spacing: 0; }
:where(html[data-theme="clean"]) .badge-trust-verified { box-shadow: none; }
:where(html[data-theme="clean"]) .chip { background: var(--c-surface); }
:where(html[data-theme="clean"]) .chip button:hover { background: var(--c-surface-2); }
:where(html[data-theme="clean"]) .avatar { border-radius: 50%; border-color: transparent; text-shadow: none; font-weight: 600; letter-spacing: 0; }
:where(html[data-theme="clean"]) .avatar.has-image { border-color: var(--c-border-dim); }
:where(html[data-theme="clean"]) .notice { border-radius: 14px; }

/* ===== 8. Landing: a centred product-style hero, then alternating white / #F5F5F7 bands ===== */
:where(html[data-theme="clean"]) body[data-view="landing"] .app-main { padding-top: 0; }
:where(html[data-theme="clean"]) .hero { padding-block: 56px 64px; background: var(--c-surface); text-align: center; }
@media (min-width: 600px) { :where(html[data-theme="clean"]) .hero { padding-block: 96px 104px; } }
:where(html[data-theme="clean"]) .hero-terminal { max-width: 880px; margin-inline: auto; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
:where(html[data-theme="clean"]) .term-bar { display: none; }
:where(html[data-theme="clean"]) .hero-terminal-body { padding: 0; }
@media (min-width: 600px) { :where(html[data-theme="clean"]) .hero-terminal-body { padding: 0; } }
:where(html[data-theme="clean"]) .hero h1 { font-size: 40px; line-height: 1.08; font-weight: 700; letter-spacing: -.028em; max-width: 16ch; margin: 0 auto 16px; }
@media (min-width: 600px) { :where(html[data-theme="clean"]) .hero h1 { font-size: 56px; line-height: 1.07; } }
@media (min-width: 1024px) { :where(html[data-theme="clean"]) .hero h1 { font-size: 64px; line-height: 1.06; } }
:where(html[data-theme="clean"]) .hero h1::after { content: none; animation: none; }
:where(html[data-theme="clean"]) .hero .lead { font-size: 19px; line-height: 1.42; color: var(--c-muted); max-width: 40ch; margin: 0 auto 32px; }
@media (min-width: 600px) { :where(html[data-theme="clean"]) .hero .lead { font-size: 21px; line-height: 1.38; } }
:where(html[data-theme="clean"]) .hero .lead::before { content: none; }
/* "end-to-end" never breaks at a hyphen in the centred subhead (review N3; landing.js wraps hyphenated words). */
:where(html[data-theme="clean"]) .hero .lead .lead-compound { white-space: nowrap; }
:where(html[data-theme="clean"]) .hero-panel { max-width: 640px; margin-inline: auto; padding: 0; background: transparent; border: 0; text-align: start; }
/* The search's label, hint and error sit on the hero's centre line, under the centred headline (review N4). */
:where(html[data-theme="clean"]) .hero-panel .field-label, :where(html[data-theme="clean"]) .hero-panel .field-hint, :where(html[data-theme="clean"]) .hero-panel .field-error { text-align: center; justify-content: center; }
:where(html[data-theme="clean"]) .hero-secondary { justify-content: center; gap: 12px 32px; margin-top: 28px; }
/* "Pelajari ›"-style text links: no icon, a chevron after the words, underline on hover. */
:where(html[data-theme="clean"]) .hero-secondary a:not(.btn) { font-size: 17px; text-decoration: none; }
:where(html[data-theme="clean"]) .hero-secondary a:not(.btn) .icon { display: none; }
:where(html[data-theme="clean"]) .hero-secondary a:not(.btn)::after, :where(html[data-theme="clean"]) .section-head > a::after { content: "\203A" / ""; margin-inline-start: .3em; font-size: 1.15em; line-height: 1; }
:where(html[data-theme="clean"]) .hero-secondary a:not(.btn):hover, :where(html[data-theme="clean"]) .section-head > a:hover { text-decoration: underline; }
:where(html[data-theme="clean"]) .section { padding-block: 56px; background: var(--c-surface); }
:where(html[data-theme="clean"]) .section:nth-of-type(even) { background: var(--c-bg); }
@media (min-width: 600px) { :where(html[data-theme="clean"]) .section { padding-block: 80px; } }
:where(html[data-theme="clean"]) .section + .section { border-top: 0; }
:where(html[data-theme="clean"]) .section h2::before, :where(html[data-theme="clean"]) .join-cta h2::before { content: none; }
:where(html[data-theme="clean"]) .section h2 { font-size: 28px; line-height: 1.14; font-weight: 700; letter-spacing: -.022em; }
@media (min-width: 600px) { :where(html[data-theme="clean"]) .section h2 { font-size: 40px; line-height: 1.1; } }
:where(html[data-theme="clean"]) .section-head { margin-bottom: 28px; }
:where(html[data-theme="clean"]) .section-head > a { font-size: 17px; text-decoration: none; white-space: nowrap; }
:where(html[data-theme="clean"]) .how-grid { gap: 20px; }
:where(html[data-theme="clean"]) .how-step { background: var(--c-surface-2); border-color: transparent; box-shadow: none; padding: 28px; }
:where(html[data-theme="clean"]) .how-step .value-icon { width: 48px; height: 48px; border-radius: 50%; border-color: transparent; background: var(--c-primary-soft); filter: none; margin-bottom: 16px; }
:where(html[data-theme="clean"]) .how-step h3 { font-size: 21px; }
:where(html[data-theme="clean"]) .how-step p { font-size: 17px; }
:where(html[data-theme="clean"]) .tile-grid { gap: 12px; }
:where(html[data-theme="clean"]) .tile { border-color: transparent; box-shadow: var(--shadow-card); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
:where(html[data-theme="clean"]) .tile:hover { border-color: transparent; box-shadow: var(--shadow); }
:where(html[data-theme="clean"]) .tile-title { font-weight: 600; }
/* Roomy cards (review L7): more padding, 17 px names, wider gaps; from 600 px columns of at least 260 px, so 2 on
   tablets, 3 at 1024 px and 4 from about 1180 px (16 categories fill 4 rows). */
:where(html[data-theme="clean"]) .tile { gap: 8px; min-height: 72px; padding: 16px 14px; }
:where(html[data-theme="clean"]) .tile-sub { margin-top: 2px; }
@media (min-width: 600px) {
  :where(html[data-theme="clean"]) .tile-grid { gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  :where(html[data-theme="clean"]) .tile { gap: 16px; min-height: 104px; padding: 20px 24px; }
  :where(html[data-theme="clean"]) .tile-title { font-size: 17px; line-height: 1.29; }
  :where(html[data-theme="clean"]) .tile-sub { font-size: 14px; }
}
@media (min-width: 1024px) { :where(html[data-theme="clean"]) .tile-grid { gap: 20px; } }
:where(html[data-theme="clean"]) .tile > .icon { color: var(--c-muted); }
:where(html[data-theme="clean"]) .tile-mark { border-radius: 50%; }
:where(html[data-theme="clean"]) .join-cta { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; background: var(--c-surface); border-color: transparent; border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: 40px 24px; }
@media (min-width: 600px) { :where(html[data-theme="clean"]) .join-cta { grid-template-columns: minmax(0, 1fr); padding: 56px 48px; } }
:where(html[data-theme="clean"]) .join-cta p { color: var(--c-muted); font-size: 19px; max-width: 46ch; margin-inline: auto; }

/* ===== 9. Product-type search ===== */
:where(html[data-theme="clean"]) .search-input-wrap .icon { color: var(--c-muted); }
:where(html[data-theme="clean"]) .type-search-hero .input { min-height: 56px; font-size: 17px; border-radius: 14px; }
:where(html[data-theme="clean"]) .type-search-hero .btn { min-height: 56px; }

/* ===== 10. Categories and room lists ===== */
:where(html[data-theme="clean"]) .rli-link { border-color: transparent; box-shadow: var(--shadow-card); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
:where(html[data-theme="clean"]) .rli-link:hover { border-color: transparent; box-shadow: var(--shadow); }
:where(html[data-theme="clean"]) .rli-link > .icon { color: var(--c-muted); }
:where(html[data-theme="clean"]) .rli-name { font-weight: 600; }
:where(html[data-theme="clean"]) .room-list-item.is-skeleton { border-color: transparent; box-shadow: var(--shadow-card); }
:where(html[data-theme="clean"]) .welcome-panel { border-color: transparent; }
:where(html[data-theme="clean"]) .welcome-panel h2 { font-size: 19px; }

/* ===== 11–13. Supplier cards, profile, profile editor ===== */
/* Dashed terminal rules become hairlines. */
:where(html[data-theme="clean"]) .sc-foot { border-top-style: solid; }
:where(html[data-theme="clean"]) .fact-list > div, :where(html[data-theme="clean"]) .cert, :where(html[data-theme="clean"]) .hours-table th, :where(html[data-theme="clean"]) .hours-table td, :where(html[data-theme="clean"]) .quote-table th, :where(html[data-theme="clean"]) .quote-table td, :where(html[data-theme="clean"]) .member-item { border-bottom-style: solid; }
:where(html[data-theme="clean"]) .sc-name, :where(html[data-theme="clean"]) .profile-section h2, :where(html[data-theme="clean"]) .form-section > h2 { font-weight: 600; }
:where(html[data-theme="clean"]) .profile-section h2, :where(html[data-theme="clean"]) .form-section > h2 { font-size: 21px; }
:where(html[data-theme="clean"]) .product { border-color: transparent; }
:where(html[data-theme="clean"]) .form-section { border-color: transparent; box-shadow: var(--shadow-card); }
:where(html[data-theme="clean"]) .repeater-item { border-color: transparent; }
:where(html[data-theme="clean"]) .save-bar { box-shadow: var(--shadow-lg); border-top-color: var(--c-border); }
@media (min-width: 600px) { :where(html[data-theme="clean"]) .save-bar { border-color: var(--c-border-dim); } }

/* ===== 14. Static pages ===== */
:where(html[data-theme="clean"]) .static-body .prose { border-color: transparent; box-shadow: var(--shadow-card); }
:where(html[data-theme="clean"]) .prose h2 { font-size: 24px; }
:where(html[data-theme="clean"]) .prose p, :where(html[data-theme="clean"]) .prose li { font-size: 17px; line-height: 1.6; }
:where(html[data-theme="clean"]) .toc { border-left-width: 2px; border-left-color: var(--c-border); background: transparent; }
:where(html[data-theme="clean"]) .toc h2 { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; }
:where(html[data-theme="clean"]) .limits-list li { border-color: transparent; background: var(--c-bg); }
:where(html[data-theme="clean"]) .limits-list li::before { border-radius: 50%; }

/* ===== 15. States ===== */
:where(html[data-theme="clean"]) .empty-state { border-color: transparent; box-shadow: var(--shadow-card); }
:where(html[data-theme="clean"]) .state-icon { border-radius: 50%; border-color: transparent; }
:where(html[data-theme="clean"]) .empty-state h2, :where(html[data-theme="clean"]) .error-state h2 { font-size: 21px; }
:where(html[data-theme="clean"]) .skeleton { border-radius: 8px; }
:where(html[data-theme="clean"]) .skeleton-bubble { border-radius: var(--r2); }

/* ===== 16. Dialogs and toasts ===== */
:where(html[data-theme="clean"]) .dialog { border-color: var(--c-border-dim); box-shadow: var(--shadow-lg); }
:where(html[data-theme="clean"]) .dialog::backdrop { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
:where(html[data-theme="clean"]) .dialog-header { border-bottom-color: transparent; padding: 16px 16px 12px 24px; }
:where(html[data-theme="clean"]) .dialog-header h2 { font-size: 21px; font-weight: 600; }
:where(html[data-theme="clean"]) .dialog-body { padding: 8px 24px 20px; }
:where(html[data-theme="clean"]) .dialog-footer { border-top-color: var(--c-border); padding: 14px 24px 18px; }
/* Key-change interstitial and destructive confirmations stay red: frame, tinted header, red title. */
:where(html[data-theme="clean"]) .dialog-alert, :where(html[data-theme="clean"]) .dialog-danger { border-color: var(--c-danger); box-shadow: var(--shadow-lg); }
:where(html[data-theme="clean"]) .dialog-alert .dialog-header, :where(html[data-theme="clean"]) .dialog-danger .dialog-header { padding-block: 16px; }
:where(html[data-theme="clean"]) .toast { background: var(--c-surface); border-color: var(--c-border-dim); border-radius: 14px; box-shadow: var(--shadow-lg); }
:where(html[data-theme="clean"]) .toast-error { background: var(--c-danger-soft); border-color: var(--c-danger); box-shadow: var(--shadow-lg); }
:where(html[data-theme="clean"]) .toast .toast-action { border-radius: var(--r-pill); background: var(--c-surface); font-weight: 500; }

/* ===== 17. Chat: a white message list, grey bubbles for theirs, blue for mine ===== */
@media (min-width: 1024px) {
  :where(html[data-theme="clean"]) .chat-layout { border-inline-color: var(--c-border); }
  :where(html[data-theme="clean"]) .chat-layout .chat-pane-list { border-right-color: var(--c-border); }
}
:where(html[data-theme="clean"]) .chat-pane-head { border-bottom-color: var(--c-border); }
:where(html[data-theme="clean"]) .chat-pane-head h1, :where(html[data-theme="clean"]) .chat-pane-head h2 { font-size: 21px; font-weight: 700; }
:where(html[data-theme="clean"]) .chat-list-item { border-bottom-color: var(--c-border); }
:where(html[data-theme="clean"]) .chat-list-item[aria-current="page"] { box-shadow: inset 3px 0 0 var(--c-button); }
:where(html[data-theme="clean"]) .cli-name { font-weight: 600; }
:where(html[data-theme="clean"]) .chat-list-item.is-unread .cli-name, :where(html[data-theme="clean"]) .chat-list-item.is-unread .cli-preview { font-weight: 600; }
:where(html[data-theme="clean"]) .chat-empty-pane { background: var(--c-thread-bg); }
:where(html[data-theme="clean"]) .thread-header { border-bottom-color: var(--c-border); }
:where(html[data-theme="clean"]) .thread-header .th-name { font-size: 17px; font-weight: 600; text-shadow: none; }
:where(html[data-theme="clean"]) .message-list { background: var(--c-thread-bg); gap: 6px; }
:where(html[data-theme="clean"]) .day-separator { background: transparent; border-color: transparent; font-weight: 600; letter-spacing: 0; }
:where(html[data-theme="clean"]) .msg-sender { color: var(--c-muted); font-weight: 600; }
/* Theirs: grey, left, a small corner toward the sender. Mine: blue with white words, right — side, fill and
   ink all differ. */
:where(html[data-theme="clean"]) .bubble { background: var(--c-bubble-other); border-color: transparent; border-radius: var(--r2); padding: 8px 14px; line-height: 1.38; }
:where(html[data-theme="clean"]) .msg-own .bubble { background: var(--c-bubble-own); color: var(--c-bubble-own-ink); border-color: transparent; border-bottom-right-radius: 6px; box-shadow: none; }
:where(html[data-theme="clean"]) .msg-other .bubble { border-bottom-left-radius: 6px; }
/* A failed message is no longer blue: red frame on a red tint, with "Gagal terkirim" and [Coba lagi] below. */
/* A held message keeps its red frame and tint, as a solid hairline (dashed terminal rules become hairlines, N5). */
:where(html[data-theme="clean"]) .held-notice { border-style: solid; }
:where(html[data-theme="clean"]) .msg.is-failed .bubble { background: var(--c-danger-soft); color: var(--c-danger-text); border-color: var(--c-danger); }
:where(html[data-theme="clean"]) .system-line.is-e2ee { background: var(--c-surface-2); border-color: transparent; border-radius: 14px; }
/* The icon hugs the words (review L6): a line that wraps fills the width, so its text starts next to the icon instead
   of being centred far from it; a one-line notice is still centred as a whole. */
:where(html[data-theme="clean"]) .system-line { text-align: start; }
:where(html[data-theme="clean"]) .system-line > span { flex: 0 1 auto; min-width: 0; }
:where(html[data-theme="clean"]) .unread-divider { text-transform: none; letter-spacing: 0; font-weight: 600; }
/* RFQ / quote cards: a rounded card with a sentence-case strip — the request grey, the quote blue. */
:where(html[data-theme="clean"]) .biz-card { border-color: var(--c-border-dim); box-shadow: var(--shadow-card); }
:where(html[data-theme="clean"]) .biz-card.is-rfq { border-color: var(--c-border-dim); }
:where(html[data-theme="clean"]) .biz-card-strip { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; padding: 10px 16px; }
:where(html[data-theme="clean"]) .biz-card.is-quote .biz-card-strip { background: var(--c-button); color: var(--c-button-ink); }
/* The request strip is a grey well with heading-colour words (15.5:1 light, 12.8:1 dark), not a near-black (or, in dark,
   near-white) slab (review L3); it differs from the blue quote strip by fill, icon and words. */
:where(html[data-theme="clean"]) .biz-card.is-rfq .biz-card-strip { background: var(--c-surface-2); color: var(--c-heading); }
:where(html[data-theme="clean"]) .biz-card-body { padding: 16px; }
:where(html[data-theme="clean"]) .biz-card-actions { padding: 0 16px 16px; }
:where(html[data-theme="clean"]) .composer { border-top-color: var(--c-border); }
:where(html[data-theme="clean"]) .composer textarea { background: var(--c-surface); border-radius: 22px; padding-inline: 16px; }
:where(html[data-theme="clean"]) .composer .btn-icon { border-radius: 50%; }
:where(html[data-theme="clean"]) .composer-send { background: var(--c-button); color: var(--c-button-ink); box-shadow: none; }
:where(html[data-theme="clean"]) .composer-blocked { border-radius: 14px; }
:where(html[data-theme="clean"]) .file-chip { border-color: var(--c-border-dim); background: var(--c-surface-2); border-radius: 14px; }
:where(html[data-theme="clean"]) .image-view { border-color: var(--c-border-dim); border-radius: 14px; }
/* Security and recovery codes keep monospace digits (tabular, grouped) in a grey well. */
/* A surface tile with a hairline: visible on the grey page (verify view), in white dialogs and in dark mode. */
:where(html[data-theme="clean"]) .security-code { background: var(--c-surface); border-color: var(--c-border-dim); text-shadow: none; font-weight: 600; letter-spacing: .04em; }
:where(html[data-theme="clean"]) .recovery-code { background: var(--c-surface-2); border: 1px solid var(--c-border-dim); text-shadow: none; font-weight: 600; }
:where(html[data-theme="clean"]) .trust-panel { border-color: var(--c-border-dim); }
:where(html[data-theme="clean"]) .progress-steps span { border-radius: 2px; }
:where(html[data-theme="clean"]) .progress-steps span.is-done { background: var(--c-button); box-shadow: none; }
:where(html[data-theme="clean"]) .auth-card h1 { font-size: 32px; }

/* ===== D2. Chat details, account and settings ===== */
:where(html[data-theme="clean"]) .th-verify { font-weight: 600; }
:where(html[data-theme="clean"]) .settings-section h2, :where(html[data-theme="clean"]) .settings-advanced summary h2 { font-size: 21px; }
:where(html[data-theme="clean"]) .quote-live-total { text-shadow: none; }

/* ===== v2 U1. Notices, open rooms, members ===== */
:where(html[data-theme="clean"]) .menu-dot { box-shadow: none; }
:where(html[data-theme="clean"]) .public-badge { font-weight: 600; }
:where(html[data-theme="clean"]) .room-layout { background: var(--c-thread-bg); }
@media (min-width: 1024px) {
  :where(html[data-theme="clean"]) .room-layout { border-inline-color: var(--c-border); }
  :where(html[data-theme="clean"]) .room-members { border-left-color: var(--c-border); }
}
:where(html[data-theme="clean"]) .room-header { border-bottom-color: var(--c-border); }
:where(html[data-theme="clean"]) .rh-names h1, :where(html[data-theme="clean"]) .rh-name { font-size: 21px; letter-spacing: -.015em; }
@media (max-width: 599.98px) { :where(html[data-theme="clean"]) .rh-names h1, :where(html[data-theme="clean"]) .rh-name { font-size: 17px; } }
/* The room log: a plain list of posts (no "> " prompt), own posts with a blue rule and the "Anda" chip. */
:where(html[data-theme="clean"]) .room-log { background: var(--c-thread-bg); }
:where(html[data-theme="clean"]) .rl-prompt { display: none; }
:where(html[data-theme="clean"]) .room-line { border-inline-start-width: 3px; }
:where(html[data-theme="clean"]) .room-line:hover, :where(html[data-theme="clean"]) .room-line:focus-within { background: var(--c-surface-2); }
:where(html[data-theme="clean"]) .room-line.is-own { border-inline-start-color: var(--c-button); }
:where(html[data-theme="clean"]) .rl-name, :where(html[data-theme="clean"]) .rl-you, :where(html[data-theme="clean"]) .rel-chip, :where(html[data-theme="clean"]) .mc-name, :where(html[data-theme="clean"]) .mcd-name { font-weight: 600; }
:where(html[data-theme="clean"]) .room-composer { border-top-width: 2px; }
:where(html[data-theme="clean"]) .rc-input { border-radius: 22px; padding-inline: 16px; }
/* The system font fits the 320 px field at full size (app.css shrinks the monospace placeholder there). */
@media (max-width: 359.98px) { :where(html[data-theme="clean"]) .rc-input::placeholder { font-size: inherit; } }
:where(html[data-theme="clean"]) .rc-notice { border-radius: 12px; }
:where(html[data-theme="clean"]) .member-row { border-bottom-color: var(--c-border); }
:where(html[data-theme="clean"]) .activity.is-now { color: var(--c-success); }

/* ===== v2 U2. Profiles, reviews, partners ===== */
:where(html[data-theme="clean"]) .tab-list { border-bottom-color: var(--c-border); }
:where(html[data-theme="clean"]) .tab { font-weight: 500; }
:where(html[data-theme="clean"]) .tab.is-selected { color: var(--c-heading); border-bottom-color: var(--c-heading); font-weight: 600; }
:where(html[data-theme="clean"]) .review-summary { font-weight: 600; }
:where(html[data-theme="clean"]) .partner-row, :where(html[data-theme="clean"]) .request-item, :where(html[data-theme="clean"]) .proposal-item { border-color: transparent; box-shadow: var(--shadow-card); }
:where(html[data-theme="clean"]) .rq-note, :where(html[data-theme="clean"]) .proposal-note { border-inline-start-width: 3px; border-radius: 0 12px 12px 0; background: var(--c-surface-2); }
:where(html[data-theme="clean"]) .pr-name, :where(html[data-theme="clean"]) .rq-name, :where(html[data-theme="clean"]) .proposal-name { font-weight: 600; }
/* One filled action per row (review L4): "Chat pribadi" is an outline pill, as on the profile; "Minta Penawaran"
   stays the filled one. */
:where(html[data-theme="clean"]) .partner-row .pr-chat { background: var(--c-surface); border-color: var(--c-primary); color: var(--c-primary); }
:where(html[data-theme="clean"]) .partner-row .pr-chat:hover { background: var(--c-primary-soft); border-color: var(--c-primary); color: var(--c-primary); }

/* ===== 21. Theme switch ===== */
:where(html[data-theme="clean"]) .theme-option { font-weight: 500; background: var(--c-surface); }
:where(html[data-theme="clean"]) .theme-option:hover { color: var(--c-text); border-color: var(--c-text); }
/* The chosen footer pill is outlined, not filled (review N1): a 2 px heading-colour ring (border + inset ring, so
   nothing moves) and the check mark; small under a fine pointer, 44 px for touch. */
:where(html[data-theme="clean"]) .theme-option[aria-pressed="true"] { background: var(--c-surface); border-color: var(--c-heading); color: var(--c-heading); box-shadow: inset 0 0 0 1px var(--c-heading); }
@media (pointer: fine) { :where(html[data-theme="clean"]) .theme-option { min-height: 32px; padding: 0 12px; font-size: 13px; } }
:where(html[data-theme="clean"]) .theme-choice { border-color: var(--c-border-strong); }
:where(html[data-theme="clean"]) .theme-choice[aria-pressed="true"] { border-color: var(--c-button); background: var(--c-surface); }
:where(html[data-theme="clean"]) .theme-choice-name { font-weight: 600; }
:where(html[data-theme="clean"]) .theme-choice[aria-pressed="true"] .theme-choice-check { background: var(--c-button); border-color: var(--c-button); color: var(--c-button-ink); }

/* ===== 22. Motion: a soft rise on load and a fade-in on scroll, only when motion is welcome ===== */
@keyframes clean-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes clean-reveal { from { opacity: 0; transform: translateY(28px); } }
@media (prefers-reduced-motion: no-preference) {
  :where(html[data-theme="clean"]) .hero h1, :where(html[data-theme="clean"]) .hero .lead, :where(html[data-theme="clean"]) .hero-panel, :where(html[data-theme="clean"]) .hero-secondary { animation: clean-rise .8s var(--ease) both; }
  :where(html[data-theme="clean"]) .hero .lead { animation-delay: .08s; }
  :where(html[data-theme="clean"]) .hero-panel { animation-delay: .16s; }
  :where(html[data-theme="clean"]) .hero-secondary { animation-delay: .24s; }
  @media (hover: hover) and (pointer: fine) {
    :where(html[data-theme="clean"]) .tile:hover, :where(html[data-theme="clean"]) .rli-link:hover, :where(html[data-theme="clean"]) .card-hover:hover { transform: translateY(-2px); }
  }
  /* Scroll-driven where supported (no script, nothing hidden where it is not): each block fades and slides in as
     it enters the viewport and is fully shown before it is fully in view. */
  @supports (animation-timeline: view()) {
    :where(html[data-theme="clean"]) .section-head, :where(html[data-theme="clean"]) .section .container > h2, :where(html[data-theme="clean"]) .tile-grid > li, :where(html[data-theme="clean"]) .how-grid > li, :where(html[data-theme="clean"]) .join-cta {
      animation: clean-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
  }
}

/* ===== 23. No digital rain in this theme (main.js does not mount it; this is the second line of defence) ===== */
:where(html[data-theme="clean"]) .matrix-rain { display: none; }