/* ══════════════════════════════════════════════════════════════════
   SOUNA — pure-black technical minimalism.
   Playfair Display (display, gradient-filled) + Inter (UI, labels and values)
   (labels, data). Colour is spent only on the mist gradient; everything else
   is white at varying opacity over black.
   ══════════════════════════════════════════════════════════════════ */
:root{
  /* ── palette ───────────────────────────────────────────────────────────
     Named after the mountain the brand is named after: volcanic rock, the
     steam above it, and the minerals in the water.

     BASALT  ground, opaque. Use for surfaces that must survive being exported,
             emailed or screenshotted, where alpha has nothing to sit on.
     VEIL    the same cool white at low alpha. This is what gives the black its
             blue cast; it is the house hairline and the house fill.
     STEAM   ink.
     MIST    the only chroma. Never a flat fill — it exists to be a gradient.
     Semantic colours are deliberately outside the mist range so that state can
     never be mistaken for decoration. */

  /* tuned to the logo ground (#07090c): black with the same cold cast */
  --basalt-0:#07090c;  /* page */
  --basalt-1:#0c0f13;  /* raised */
  --basalt-2:#12161b;  /* panel */
  --basalt-3:#1a1f26;  /* hover */
  --basalt-4:#242a32;  /* pressed, dividers on solid */

  --veil-1:rgba(214,235,253,.05);  /* fill, resting */
  --veil-2:rgba(214,235,253,.09);  /* fill, hover */
  --veil-3:rgba(214,235,253,.14);  /* hairline */
  --veil-4:rgba(214,235,253,.19);  /* border */
  --veil-5:rgba(214,235,253,.32);  /* border, hover */

  --steam-0:#ffffff;   /* max contrast, primary buttons */
  --steam-1:#f0f0f0;   /* body ink */
  --steam-2:#a0a0a0;   /* secondary */
  --steam-3:#6c6c6c;   /* muted, captions */
  --steam-4:#464a4d;   /* disabled, fine print */

  /* the logo gradient: cyan -> blue -> violet */
  --brand-1:#23fdff; --brand-2:#4098ff; --brand-3:#7a4dff;
  --spring:#7cefff;    /* brand cyan, softened for text */
  --iris:#a48cff;      /* brand violet, softened for text */
  --sulfur:#fcd9a8;    /* the yellow in the rock */
  --mist:linear-gradient(115deg,var(--brand-1),var(--brand-2) 50%,var(--brand-3));

  --ok:#6ee7a8;
  --warn:#f5a524;
  --danger:#ff6b6b;
  --info:#7cc4ff;

  /* ── semantic aliases (what components actually reference) ───────────── */
  --bg:var(--basalt-0); --bg-2:var(--basalt-0);
  --surface:rgba(20,21,23,.60); --surface-2:rgba(24,26,29,.85); --surface-3:rgba(32,35,38,.9);

  /* Permukaan panel melayang: dropdown, menu, tooltip. Dipisahkan dari
     --surface-2 supaya tema terang tidak perlu menambal satu per satu; sebelum
     ini .nav-pop dan .lang-menu menulis hitam langsung, jadi di tema terang
     keduanya jadi kotak hitam berisi teks gelap. */
  --pop:rgba(10,11,12,.97);

  /* Urutan lapisan, sekali untuk seluruh aplikasi. Angka yang ditulis
     sembarangan di tiap komponen adalah sebab "panel di dalam panel": panel
     dukungan pernah duduk di 90, di BAWAH sidebar yang 100. Aturannya satu
     arah: sesuatu yang dibuka DARI sesuatu yang lain harus punya angka lebih
     besar daripada yang membukanya. */
  --z-nav:50;        /* bilah halaman yang menempel */
  --z-fab:80;        /* tombol melayang */
  --z-sidebar:100;   /* sidebar studio */
  --z-banner:190;    /* spanduk simpan */
  --z-scrim:300;     /* lapisan gelap penuh layar */
  --z-panel:400;     /* panel yang duduk di atas lapisan itu (dukungan) */
  --z-popover:500;   /* popover milik satu kontrol (setelan, aksi) */
  --z-picker:600;    /* pemilih model - dibuka DARI popover */
  --z-dropdown:650;  /* daftar pilihan yang dibuka DARI panel mana pun.
                        Sempat memakai --z-popover, sama dengan panel
                        induknya, jadi siapa di atas siapa ditentukan
                        urutan DOM - dan karena menunya ditempel ke <body>
                        saat kontrolnya dibuat, ia sering LEBIH DULU
                        daripada panelnya lalu terbit di belakangnya. */
  --z-menu:700;      /* menu yang diportal ke <body> (bahasa) */
  --z-tooltip:800;
  --z-modal:900;     /* modal beli/konfirmasi */
  --z-lightbox:950;
  --z-skip:1000;     /* tautan lewati-ke-isi, harus di atas segalanya */
  --border:var(--veil-3); --border-2:var(--veil-4);
  --ink:var(--steam-1); --ink-2:var(--steam-2); --muted:var(--steam-3); --dim:var(--steam-4);
  --accent:var(--steam-0); --accent-deep:var(--steam-1); --accent-bg:rgba(214,235,253,.08);
  --on-accent:var(--basalt-0);
  --mist-1:var(--spring); --mist-2:var(--iris); --mist-3:var(--sulfur);
  --err:var(--danger);

  --glow:0 0 4px rgba(255,255,255,.06), 0 1px 14px rgba(255,255,255,.12), 0 3px 32px rgba(255,255,255,.18);
  --select-bg:rgba(214,235,253,.22); --select-ink:#fff;
  --scrim:rgba(0,0,0,.55);
  --topbar-fade:rgba(16,15,13,.82);
  --hero-ink:linear-gradient(168deg,#fff 38%,rgba(255,255,255,.5));

  --g-xs:8px; --g-sm:12px; --g-md:18px; --g-lg:28px; --g-xl:44px;
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-pill:999px;
  --sidenav-w:252px;
  --navtoggle-w:42px; --navtoggle-gap:12px;   /* dipakai tombol menu DAN ruang logo */
  --serif:"Playfair Display",Georgia,serif;
  --sans:"Inter",ui-sans-serif,system-ui,sans-serif;
  --mono:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;   /* labels, eyebrows, counters: Inter, tracked uppercase (the brand has no mono face) */
  --code:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;   /* code inside replies only: function, not brand */
}
/* ── LIGHT ────────────────────────────────────────────────────────────────
   Ditulis sebagai satu blok token, bukan sebagai tambalan per komponen. Yang
   dibalik hanya alias semantik yang memang sudah dirujuk komponen, jadi tema
   gelap tidak tersentuh sedikit pun - itu syarat yang membuat perubahan ini
   aman untuk tampilan yang sudah disetujui.

   Dua hal yang TIDAK ikut membalik, dan itu disengaja:
     - Lapisan gelap di atas media (pemutar video, kartu galeri). Teks putih di
       atas kerudung gelap adalah pilihan yang benar di kedua tema, karena yang
       ada di belakangnya foto, bukan halaman.
     - Topeng (mask-image) yang memakai #000. Itu bentuk, bukan warna.

   data-theme selalu berisi nilai yang SUDAH diputuskan ("light"/"dark"), tidak
   pernah "system": pemetaan preferensi ke nilai nyata dilakukan sekali di
   <head>, supaya CSS tidak perlu menduplikasi palet ini di dalam media query. */
:root[data-theme="light"]{
  --basalt-0:#ffffff;  /* page */
  --basalt-1:#fbfbfc;  /* raised */
  --basalt-2:#f4f5f7;  /* panel */
  --basalt-3:#eceef1;  /* hover */
  --basalt-4:#dde1e6;  /* pressed, dividers */

  /* Kerudung membalik arah: di gelap ia putih tipis, di terang ia tinta tipis.
     Nada birunya dipertahankan supaya garis rambutnya tetap terasa sekeluarga. */
  --veil-1:rgba(16,24,32,.035);
  --veil-2:rgba(16,24,32,.06);
  --veil-3:rgba(16,24,32,.10);
  --veil-4:rgba(16,24,32,.17);
  --veil-5:rgba(16,24,32,.30);

  --steam-0:#0b0d0f;   /* kontras maksimum: tombol utama jadi gelap di atas terang */
  --steam-1:#16191d;   /* tinta badan */
  --steam-2:#495059;   /* sekunder */
  --steam-3:#6a717a;   /* redup, keterangan */
  --steam-4:#9aa1a9;   /* nonaktif */

  /* gradasi logo dituakan supaya terbaca di atas putih */
  --brand-1:#0aa5c8; --brand-2:#2f6fe6; --brand-3:#5b3df5;

  /* Tiga warna rumah dituakan supaya terbaca di atas putih. Yang di gelap
     berfungsi sebagai cahaya, di terang harus berfungsi sebagai tinta. */
  --spring:#0880a3;
  --iris:#5b3df5;
  --sulfur:#96650f;

  --ok:#0f7a52; --warn:#9a6100; --danger:#b5342a; --info:#1866c9;

  --bg:var(--basalt-0); --bg-2:var(--basalt-0);
  --surface:rgba(255,255,255,.88); --surface-2:rgba(255,255,255,.95); --surface-3:#ffffff;
  --pop:rgba(255,255,255,.97);
  --border:var(--veil-3); --border-2:var(--veil-4);
  --ink:var(--steam-1); --ink-2:var(--steam-2); --muted:var(--steam-3); --dim:var(--steam-4);
  --accent:var(--steam-0); --accent-deep:#2a2f35; --accent-bg:rgba(16,24,32,.06);
  --on-accent:#ffffff;

  /* Di gelap, "glow" benar-benar cahaya. Di terang, cahaya di atas putih tidak
     terlihat - yang memberi kedalaman adalah bayangan. Jadi tokennya berganti
     peran, bukan sekadar berganti nilai. */
  --glow:0 1px 2px rgba(16,24,32,.07), 0 8px 24px -8px rgba(16,24,32,.16);
  --select-bg:rgba(16,24,32,.14); --select-ink:var(--steam-0);
  --scrim:rgba(16,24,32,.32);
  --topbar-fade:rgba(255,255,255,.82);
  --hero-ink:linear-gradient(168deg,#0b0d0f 34%,rgba(11,13,15,.62));
}

/* Sumber cahaya di balik halaman: di gelap ia cahaya putih, di terang ia justru
   harus jadi naungan - putih di atas putih tidak menghasilkan apa pun. */
:root[data-theme="light"] body{
  background-image:
    radial-gradient(1200px 620px at 50% -20%, rgba(16,24,32,.045), transparent 62%),
    radial-gradient(900px 500px at 92% 8%, rgba(91,75,196,.035), transparent 60%);
}

/* Kisi hero digambar dengan garis putih tipis; di atas putih ia hilang. */
:root[data-theme="light"] .hero-grid::before{
  background-image:
    linear-gradient(90deg, rgba(16,24,32,.05) 1px, transparent 1px),
    linear-gradient(rgba(16,24,32,.05) 1px, transparent 1px);
}
:root[data-theme="light"] .hero-grid::after{
  background-image:
    linear-gradient(90deg, rgba(16,24,32,.10) 1px, transparent 1px),
    linear-gradient(rgba(16,24,32,.10) 1px, transparent 1px);
}

/* Bayangan pekat yang dirancang untuk latar hitam terlihat seperti noda di atas
   putih. Geometrinya dipertahankan, hanya warnanya yang diringankan. */
:root[data-theme="light"] .modal{box-shadow:0 30px 90px -28px rgba(16,24,32,.28)}
:root[data-theme="light"] .toast{box-shadow:0 12px 40px -12px rgba(16,24,32,.24)}
:root[data-theme="light"] .popover{box-shadow:0 20px 70px -24px rgba(16,24,32,.24)}
:root[data-theme="light"] .menu,
:root[data-theme="light"] .lang-menu,
:root[data-theme="light"] .csel-menu,
:root[data-theme="light"] .nav-pop,
:root[data-theme="light"] .am-pop,
:root[data-theme="light"] .cs-pop{box-shadow:0 16px 50px -18px rgba(16,24,32,.26)}
/* Bilah halaman memakai hitam .72 sebagai kaca buram; di terang itu jadi pita
   gelap melintang di puncak halaman putih. */
:root[data-theme="light"] .page-nav{background:rgba(255,255,255,.78)}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow:hidden;
  /* one low, wide light source behind the fold — no grain, no colour wash */
  background-image:
    radial-gradient(1200px 620px at 50% -20%, rgba(214,235,253,.055), transparent 62%),
    radial-gradient(900px 500px at 92% 8%, rgba(196,181,253,.035), transparent 60%);
  background-repeat:no-repeat;
  background-attachment:fixed;
}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--accent);text-decoration:none}
.mono{font-family:var(--mono)}
.hidden{display:none!important}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:6px}
::selection{background:var(--select-bg);color:var(--select-ink)}

.serif{font-family:var(--serif)}
.label{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.hint{color:var(--muted);font-size:12px}
.gradient-text{background:linear-gradient(115deg,var(--mist-1),var(--mist-2) 55%,var(--mist-3));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* page-load reveal */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.reveal{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}

/* ── shell ── */
.app{display:grid;grid-template-columns:1fr;height:100vh}
/* Sidebar kini panel yang dipanggil, bukan kolom tetap: layar chat jadi lapang dan
   navigasi tetap satu ketukan. Perilaku geser ini dulu hanya untuk layar sempit -
   sekarang berlaku di semua lebar, jadi satu perilaku untuk semua ukuran. */
.sidenav{position:fixed;inset:0 auto 0 0;width:var(--sidenav-w);z-index:var(--z-sidebar);
  transform:translateX(-100%);transition:transform .2s}
.sidenav.open{transform:none}
.navtoggle{display:grid;position:fixed;top:var(--navtoggle-gap);left:var(--navtoggle-gap);z-index:var(--z-fab);
  width:var(--navtoggle-w);height:var(--navtoggle-w);place-items:center;background:var(--surface);
  border:1px solid var(--border);border-radius:11px;color:var(--ink);cursor:pointer}
.nav-backdrop.show{display:block;position:fixed;inset:0;background:var(--scrim);z-index:var(--z-nav)}

/* ── sidebar ── */
.sidenav{background:var(--bg-2);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:var(--g-md) var(--g-sm) var(--g-sm);gap:3px}
.brand{font-family:var(--sans);font-weight:600;font-size:19px;letter-spacing:-.03em;
  padding:6px 12px var(--g-lg);padding-left:calc(var(--navtoggle-gap) * 2 + var(--navtoggle-w));
  display:flex;align-items:center;gap:0;color:var(--ink);min-height:var(--navtoggle-w)}
/* the symbol stands in for the U, so it is sized to the cap height of the
   letters beside it and carries a hair of optical spacing after it */
/* sized to Inter's cap height so it sits in the word like a real capital */
.brand-mark{height:.72em;width:auto;flex:none;margin-right:.055em}
.brand .dot{color:var(--accent)}
/* logo dari docs/assets: tanda S + wordmark, dua versi menurut tema */
.brand-logo{display:inline-flex;align-items:center;gap:.34em;line-height:1;flex:none}
.brand-logo .bm{height:1.45em;width:auto}
.brand-logo .bw{height:.82em;width:auto}
.brand-logo .bl-light{display:none}
:root[data-theme="light"] .brand-logo .bl-light{display:block}
:root[data-theme="light"] .brand-logo .bl-dark{display:none}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-sm);color:var(--ink-2);cursor:pointer;font-weight:500;font-size:14.5px;transition:background .15s,color .15s}
.nav-item svg{width:18px;height:18px;flex:none;opacity:.85}
.nav-item:hover{background:var(--surface);color:var(--ink)}
.nav-item.active{background:var(--surface-2);color:var(--ink)}
.nav-item.active svg{color:var(--accent);opacity:1}
.spacer{flex:1}
.chats-head{display:flex;align-items:center;justify-content:space-between;padding:4px 12px 6px}
.newchat{background:var(--accent-bg);border:1px solid var(--border-2);color:var(--accent);border-radius:var(--r-sm);
  padding:3px 10px;font-size:12px;font-weight:600;cursor:pointer}
.newchat:hover{background:var(--accent);color:var(--on-accent)}
.chat-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px;min-height:40px;margin-bottom:8px}
.chat-row{display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:var(--r-sm);color:var(--ink-2);
  cursor:pointer;font-size:13px}
.chat-row:hover{background:var(--surface);color:var(--ink)}
.chat-row.active{background:var(--surface-2);color:var(--ink)}
.chat-row .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-row .x{opacity:0;color:var(--muted);font-size:12px}
.chat-row:hover .x{opacity:1} .chat-row .x:hover{color:var(--err)}
.acct{padding:12px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border)}
.acct-top{display:flex;align-items:center;gap:10px}
.acct-av{width:32px;height:32px;border-radius:9px;background:linear-gradient(150deg,var(--accent),var(--accent-deep));flex:none}
.acct-who{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-cr{font-size:11px;color:var(--accent);letter-spacing:.02em}
.acct-links{margin-top:9px;font-size:12px;display:flex;gap:10px}
.acct-links a{color:var(--ink-2)}.acct-links a:hover{color:var(--ink)}

/* ── main ── */
.main{overflow-y:auto;height:100vh;position:relative}
.topbar{display:flex;align-items:center;gap:var(--g-md);padding:18px var(--g-lg);position:sticky;top:0;background:linear-gradient(var(--bg),var(--topbar-fade));backdrop-filter:blur(8px);z-index:10;border-bottom:1px solid var(--border)}
.topbar h1{font-family:var(--serif);font-size:19px;font-weight:500}
.topbar .sub{color:var(--muted);font-size:12px;margin-left:2px}
.mode-toolbar{margin-left:auto;display:flex;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);padding:4px}
.mode-btn{display:flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--r-pill);color:var(--ink-2);cursor:pointer;font-size:13px;font-weight:500}
.mode-btn svg{width:16px;height:16px}
.mode-btn:hover{color:var(--ink)}
.mode-btn.active{background:var(--accent);color:var(--on-accent)}

.view{display:none}.view.active{display:block}
.canvas{max-width:880px;margin:0 auto;padding:var(--g-xl) var(--g-lg) 80px;display:flex;flex-direction:column;gap:var(--g-lg);min-height:calc(100vh - 64px)}
.hero{text-align:center;margin-top:6vh}
.hero h2{font-family:var(--serif);font-size:clamp(32px,5vw,52px);font-weight:500;letter-spacing:-.03em;line-height:1.05}
.hero h2 em{font-style:italic;color:var(--accent)}
.hero p{color:var(--ink-2);margin-top:12px;font-size:15px}

/* ── composer ── */
.composer{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-lg);padding:16px 18px;
  transition:border-color .2s;position:relative;z-index:20}
.composer:focus-within{border-color:var(--accent)}
.results{position:relative;z-index:1}
.composer textarea{width:100%;background:transparent;border:none;resize:none;font-size:16px;line-height:1.55;min-height:52px;max-height:260px;font-family:var(--sans)}
.composer textarea::placeholder{color:var(--muted)}
.composer textarea:focus{outline:none}
.cbar{display:flex;align-items:center;gap:8px;margin-top:12px}
.cbar .grow{flex:1}
.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-pill);font-size:13px;color:var(--ink-2);cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--border-2);color:var(--ink)}
.chip svg{width:15px;height:15px}
.chip select{background:transparent;border:none;color:var(--ink);cursor:pointer;max-width:220px;
  appearance:none;padding-right:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23a89f90' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right center}
/* every dropdown options panel uses the dark surface (consistency) */
select option{background:var(--surface-2);color:var(--ink)}
.grid audio,.lib-item>audio{width:100%;display:block}
.lib-item.audio{padding:14px;display:flex;align-items:center;background:var(--surface)}
.chip.cost{color:var(--accent);border-color:var(--accent-bg);background:var(--accent-bg)}
.run{height:42px;padding:0 22px;border:none;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);
  font-family:var(--serif);font-size:15px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.15s}
.run:hover{background:var(--accent-deep)}
.run:disabled{opacity:.5;cursor:wait}
.run svg{width:16px;height:16px}

.suggest{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:14px}

/* ── settings popover ── */
.pop-wrap{position:relative}
.popover{position:absolute;top:calc(100% + 10px);bottom:auto;left:0;width:330px;max-height:70vh;overflow-y:auto;
  background:var(--surface-2);border:1px solid var(--border-2);
  border-radius:var(--r-md);padding:var(--g-md);box-shadow:0 20px 70px -20px rgba(0,0,0,.8);z-index:30;display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column}
.seg{display:flex;gap:7px;flex-wrap:wrap}
.seg-btn{padding:7px 12px;background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-sm);cursor:pointer;font-size:13px;color:var(--ink-2);transition:.12s}
.seg-btn:hover{color:var(--ink);border-color:var(--border-2)}
.seg-btn.active{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}
.seg-aspect .seg-btn{display:flex;flex-direction:column;align-items:center;gap:6px}
.ar-box{border:1.5px solid currentColor;border-radius:2px;opacity:.85}
.ar-16-9,.ar-3-2,.ar-21-9{width:26px;height:15px}.ar-9-16,.ar-2-3,.ar-3-4{width:15px;height:26px}
.ar-1-1{width:20px;height:20px}.ar-4-3{width:24px;height:18px}
textarea.mini,input.mini{width:100%;background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-sm);padding:9px 11px;font-size:13px}
textarea.mini{resize:vertical;min-height:52px}
/* on-brand file inputs (replace native 'Choose File') */
input[type=file]{font-size:12.5px;color:var(--ink-2);padding:7px 9px}
input[type=file]::file-selector-button{background:var(--surface-3);border:1px solid var(--border-2);color:var(--ink);
  border-radius:var(--r-sm);padding:6px 12px;margin-right:11px;cursor:pointer;font-family:var(--sans);font-size:12.5px;font-weight:500}
input[type=file]::file-selector-button:hover{border-color:var(--ink-2)}
.toggle{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2);cursor:pointer}
.toggle input{accent-color:var(--accent)}

/* ── results ── */
.results-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--g-sm)}
.results-head h3{font-family:var(--serif);font-size:17px;font-weight:500}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--g-sm)}
.grid img{width:100%;border-radius:var(--r-md);border:1px solid var(--border);display:block;background:#000;transition:transform .2s}
.grid img:hover{transform:scale(1.012)}
.grid>.mp-video{aspect-ratio:1;border-radius:var(--r-md);border:1px solid var(--border);overflow:hidden}
.grid>.mp-audio{grid-column:1/-1;max-width:520px}
.empty{grid-column:1/-1;color:var(--muted);text-align:center;padding:46px 16px;font-size:13px;border:1px dashed var(--border);border-radius:var(--r-md)}
.status{font-size:13px;color:var(--ink-2);min-height:18px;text-align:center}
.status.err{color:var(--err)}

/* ── chat ── (stream scrolls internally; dock always below — no overlap) */
#view-chat.active{display:flex;flex-direction:column;height:100vh}
.chat-wrap{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;max-width:760px;margin:0 auto;padding:var(--g-lg) var(--g-lg) 0}
.chat-stream{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-bottom:18px}
.msg{padding:12px 16px;border-radius:14px;white-space:pre-wrap;max-width:80%;font-size:15px;line-height:1.6}
.msg.user{background:rgba(214,235,253,.07);border:1px solid var(--border-2);align-self:flex-end}
.msg.bot{background:var(--surface);border:1px solid var(--border);align-self:flex-start;white-space:normal;position:relative}
.chat-dock{padding:12px 0 18px;background:transparent;flex:none}
/* rendered markdown in bot bubbles */
.md{white-space:normal}
.md>:first-child{margin-top:0}.md>:last-child{margin-bottom:0}
.md p{margin:0 0 10px}
.md h1,.md h2,.md h3,.md h4{font-family:var(--serif,Georgia,serif);font-weight:600;line-height:1.3;margin:14px 0 8px}
.md h1{font-size:1.45em}.md h2{font-size:1.28em}.md h3{font-size:1.14em}.md h4{font-size:1em}
.md ul,.md ol{margin:6px 0 10px;padding-left:22px}.md li{margin:3px 0}
.md a{color:var(--accent);text-decoration:underline}
.md blockquote{margin:8px 0;padding:4px 14px;border-left:3px solid var(--accent);color:var(--ink-2)}
.md code{background:var(--bg-2);border:1px solid var(--border);border-radius:5px;padding:.1em .4em;font-family:var(--code);font-size:.88em}
.codeblock{margin:10px 0;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg-2)}
.cb-bar{display:flex;align-items:center;justify-content:space-between;padding:5px 10px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.cb-lang{font-family:var(--mono,monospace);font-size:11px;color:var(--muted);text-transform:lowercase}
.copy-code{background:none;border:none;color:var(--ink-2);font-size:12px;cursor:pointer;font-weight:600}
.copy-code:hover{color:var(--accent)}
.codeblock pre{margin:0;padding:12px 14px;overflow-x:auto}
.codeblock code{background:none;border:none;padding:0;font-size:13px;line-height:1.55;color:var(--ink)}
/* per-message hover actions */
.msg-actions{display:flex;gap:2px;margin-top:8px;opacity:0;transition:opacity .15s}
.msg:hover .msg-actions,.msg-actions:focus-within{opacity:1}
.msg.user .msg-actions{justify-content:flex-end}
.ma{background:none;border:1px solid transparent;border-radius:7px;color:var(--ink-2);cursor:pointer;
  width:28px;height:26px;font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.ma:hover{background:var(--surface-2);color:var(--accent);border-color:var(--border)}
.run.stop{background:var(--surface-2);color:var(--ink);border:1px solid var(--border-2)}
.run.stop:hover{background:var(--surface-3);color:var(--accent)}
.run.stop svg{width:15px;height:15px}
/* enhance button busy state */
#enhanceBtn.busy{opacity:.6;pointer-events:none}
#enhanceBtn.busy span::after{content:'…'}
/* persona select styled as a chip */
.chip-select{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-pill);
  color:var(--ink-2);font-size:13px;padding:7px 11px;cursor:pointer;font-family:var(--sans);max-width:180px}
.chip-select:hover{border-color:var(--accent)}
/* "use as input" indicator in studio uploads */
.used-input{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--accent);
  background:var(--accent-bg);border-radius:var(--r-md);font-size:13px;color:var(--ink)}
.used-input img{width:42px;height:42px;object-fit:cover;border-radius:8px}
/* saved / favorite prompts */
.saved-prompts{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:10px}
.saved-prompts:empty{display:none}
.saved-lbl{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin-right:2px}
.saved-chip{display:inline-flex;align-items:center;gap:6px;background:var(--accent-bg);border:1px solid var(--border-2);
  border-radius:var(--r-pill);font-size:12.5px;padding:5px 6px 5px 12px;color:var(--ink)}
.saved-chip .sp-t{cursor:pointer}.saved-chip:hover{border-color:var(--accent)}
.saved-chip .sp-x{background:none;border:none;color:var(--muted);cursor:pointer;font-size:12px;padding:0 3px;line-height:1}
.saved-chip .sp-x:hover{color:var(--accent)}
/* library NSFW blur (privacy when screen is visible to others) */
#libGrid.blurred img,#libGrid.blurred video{filter:blur(18px);transition:filter .18s}
#libGrid.blurred .lib-card:hover img,#libGrid.blurred .lib-card:hover video{filter:none}
#libBlur.on{color:var(--accent);border-color:var(--accent)}

/* studio composer uploads (visible, not buried in settings) */
.uploads{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.uploads:empty{display:none}

/* ══════════════════════════════════════════════════════════════════
   COMPONENT LIBRARY (shared across all pages)
   ══════════════════════════════════════════════════════════════════ */
/* buttons — Resend's move: no fill, a 2px translucent edge, and light
   spilling out from under the element instead of a drop shadow. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;
  border-radius:var(--r-lg);border:1px solid var(--border-2);background:transparent;color:var(--ink-2);
  font-size:14px;font-weight:600;cursor:pointer;transition:color .16s,border-color .16s,background .16s,box-shadow .16s;
  white-space:nowrap}
.btn:hover{color:var(--ink);border-color:rgba(214,235,253,.32);background:rgba(214,235,253,.04)}
.btn:focus-visible{outline:2px solid var(--mist-1);outline-offset:2px}
.btn-primary{background:var(--accent);color:var(--on-accent);border-color:transparent;box-shadow:var(--glow)}
.btn-primary:hover{background:var(--accent-deep);color:var(--on-accent);border-color:transparent}
.btn-ghost{border-color:transparent;background:transparent}
.btn-ghost:hover{border-color:transparent;background:rgba(214,235,253,.06)}
.btn-sm{height:32px;padding:0 12px;font-size:13px;border-radius:var(--r-md)}
.btn-lg{height:48px;padding:0 20px;font-size:16px}
.btn-block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

/* inputs */
.input,.select,.textarea{width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:10px 12px;font-size:14px;color:var(--ink);transition:border-color .15s}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent)}
.textarea{resize:vertical;min-height:80px;line-height:1.55;font-family:var(--sans)}
.select{appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a89f90' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.field-row{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}

/* switch toggle */
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13.5px;color:var(--ink-2)}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{width:38px;height:22px;border-radius:var(--r-pill);background:var(--surface-3);border:1px solid var(--border-2);transition:.18s;flex:none;position:relative}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--ink-2);transition:.18s}
.switch input:checked+.track{background:var(--accent-bg);border-color:var(--accent)}
.switch input:checked+.track::after{transform:translateX(16px);background:var(--accent)}

/* badge */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;letter-spacing:.03em;padding:3px 9px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--ink-2);border:1px solid var(--border)}
.badge-accent{background:var(--accent-bg);color:var(--accent);border-color:var(--border-2)}
.badge-ok{background:rgba(124,200,140,.12);color:#7cc88c;border-color:rgba(124,200,140,.3)}
.badge-warn{background:rgba(232,180,90,.12);color:#e8b45a;border-color:rgba(232,180,90,.3)}

/* card (generic) */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--g-lg)}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--g-md)}
.panel-head h3{font-family:var(--serif);font-size:18px;font-weight:500}

/* modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(5,4,3,.66);backdrop-filter:blur(3px);z-index:var(--z-modal);display:grid;place-items:center;padding:20px;animation:fade .15s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-lg);max-width:460px;width:100%;
  padding:var(--g-lg);box-shadow:0 30px 90px -20px rgba(0,0,0,.8);animation:rise .25s both}
.modal h3{font-family:var(--serif);font-size:21px;font-weight:500;margin-bottom:8px}
.modal p{color:var(--ink-2);margin-bottom:var(--g-lg)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end}

/* toast */
.toast-host{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:var(--z-tooltip);display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--r-md);padding:11px 18px;font-size:13.5px;
  box-shadow:0 12px 40px -10px rgba(0,0,0,.7);display:flex;align-items:center;gap:10px;animation:rise .25s both;max-width:90vw}
.toast.ok{border-color:rgba(124,200,140,.4)} .toast.ok::before{content:"✓";color:#7cc88c}
.toast.err{border-color:rgba(224,138,124,.4)} .toast.err::before{content:"!";color:var(--err);font-weight:700}
.toast.info::before{content:"›";color:var(--accent)}

/* tooltip */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;bottom:130%;left:50%;transform:translateX(-50%) translateY(4px);
  background:var(--bg-2);color:var(--ink);border:1px solid var(--border-2);padding:5px 9px;border-radius:var(--r-sm);font-size:11.5px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:.15s;z-index:60}
[data-tip]:hover::after{opacity:1;transform:translateX(-50%)}

/* dropdown menu */
.menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--r-md);
  padding:6px;min-width:180px;box-shadow:0 16px 50px -16px rgba(0,0,0,.7);z-index:40}
.menu-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r-sm);color:var(--ink-2);cursor:pointer;font-size:13.5px}
.menu-item:hover{background:var(--surface-3);color:var(--ink)}
.menu-sep{height:1px;background:var(--border);margin:5px 4px}

/* ── landing ────────────────────────────────────────────────────────────
   Layout after invideo.io: centred serif hero, product frame, alternating
   feature rows, asymmetric bento, statement band, proof, pricing. */

.announce{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  padding:9px 20px;font-size:13px;background:var(--basalt-2);border-bottom:1px solid var(--border);
  color:var(--ink-2)}
.announce .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--basalt-0);background:var(--mist);border-radius:var(--r-pill);padding:3px 9px}
.announce b{color:var(--ink);font-weight:500}
.announce a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* nav menus — invideo's nav is a centred row of dropdown triggers with the
   account actions pinned right. Measured: 13.5px links, 8px/12px padding,
   6px radius. */
.nav-menu{display:none;align-items:center;gap:2px;justify-self:center}
@media(min-width:1000px){.nav-menu{display:flex}}
.nav-item-lp{position:relative}
.nav-trig{display:inline-flex;align-items:center;gap:5px;padding:8px 12px;border-radius:var(--r-sm);
  border:0;background:none;color:var(--ink-2);font-size:13.5px;cursor:pointer;transition:.15s;
  font-family:inherit}
.nav-trig:hover{color:var(--ink);background:var(--veil-1)}
.nav-trig svg{width:12px;height:12px;opacity:.6;transition:transform .18s}
.nav-item-lp.open .nav-trig{color:var(--ink);background:var(--veil-1)}
.nav-item-lp.open .nav-trig svg{transform:rotate(180deg)}
.nav-pop{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  min-width:250px;padding:8px;border:1px solid var(--border-2);border-radius:12px;
  background:var(--pop);backdrop-filter:blur(16px);
  box-shadow:0 24px 70px -22px rgba(0,0,0,.9);display:none;z-index:var(--z-popover)}
.nav-item-lp.open .nav-pop{display:block}
.nav-pop a{display:block;padding:10px 12px;border-radius:8px;color:var(--ink-2);font-size:13.5px;
  transition:.14s}
.nav-pop a:hover{background:var(--veil-2);color:var(--ink)}
.nav-pop a b{display:block;color:var(--ink);font-weight:500;font-size:13.5px;margin-bottom:2px}
.nav-pop a span{display:block;color:var(--muted);font-size:12px;line-height:1.45}

/* hero */
/* Hero grid: two 1px gradient layers on a 22px cell, masked so it dissolves
   before it reaches the content below. Drawn in veil white, not pure white, so
   it belongs to the same cool-black as every other hairline. */
.lp-hero{position:relative;max-width:1200px;margin:0 auto;padding:15vh 24px 0;text-align:center}
.hero-grid{position:absolute;inset:0 0 -620px 0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(90deg, rgba(214,235,253,.035) 1px, transparent 1px),
    linear-gradient(rgba(214,235,253,.035) 1px, transparent 1px);
  background-size:22px 22px;
  background-position:0 -4px, 0 -4px;
  -webkit-mask-image:linear-gradient(#000 0%, #000 62%, transparent 100%);
  mask-image:linear-gradient(#000 0%, #000 62%, transparent 100%)}
/* a brighter copy, lit through a soft radial window, so the grid is not flat */
.hero-grid::after{content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(90deg, rgba(214,235,253,.11) 1px, transparent 1px),
    linear-gradient(rgba(214,235,253,.11) 1px, transparent 1px);
  background-size:22px 22px;
  background-position:0 -4px, 0 -4px;
  -webkit-mask-image:radial-gradient(700px 360px at 50% 26%, #000 0%, transparent 72%);
  mask-image:radial-gradient(700px 360px at 50% 26%, #000 0%, transparent 72%)}
.lp-hero h1{font-family:var(--serif);font-size:clamp(40px,6.3vw,80px);font-weight:400;line-height:1.02;
  letter-spacing:-.025em;max-width:15ch;margin:0 auto;
  background:var(--hero-ink);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lp-hero h1 em{font-style:italic}
.lp-hero p{color:var(--ink-2);font-size:clamp(15px,1.35vw,17.5px);line-height:1.6;
  max-width:52ch;margin:26px auto 34px}
.lp-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* the chips sit where invideo puts collaborator cursors. Same device, but they
   carry model names, because this product has no multiplayer to point at. */
.hero-chips{position:absolute;inset:0;pointer-events:none;display:none}
@media(min-width:1080px){.hero-chips{display:block}}
.hero-chip{position:absolute;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--ink-2);
  background:var(--basalt-2);border:1px solid var(--border-2);border-radius:var(--r-pill);
  padding:6px 12px;white-space:nowrap;animation:chipIn .7s cubic-bezier(.2,.7,.2,1) both}
.hero-chip i{width:5px;height:5px;border-radius:50%;background:var(--mist-1);flex:none}
.hero-chip:nth-child(2) i{background:var(--mist-2)}
.hero-chip:nth-child(3) i{background:var(--mist-3)}
.hero-chip:nth-child(4) i{background:var(--mist-1)}
@keyframes chipIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hero-chip{animation:none}}
.hc-1{top:16%;left:4%;animation-delay:.35s}
.hc-2{top:30%;right:3%;animation-delay:.5s}
.hc-3{bottom:24%;left:9%;animation-delay:.65s}
.hc-4{bottom:16%;right:8%;animation-delay:.8s}

/* product frame under the hero */
.lp-frame{position:relative;max-width:1240px;margin:66px auto 0;padding:0 24px}
.frame{border:1px solid var(--border-2);border-radius:18px;overflow:hidden;background:var(--basalt-1);
  box-shadow:0 40px 120px -50px rgba(214,235,253,.22)}
.frame-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--border);
  background:var(--basalt-2)}
.frame-tab{font-size:12.5px;color:var(--muted);padding:6px 12px;border-radius:var(--r-sm);white-space:nowrap}
.frame-tab.on{color:var(--ink);background:var(--veil-2)}
.frame-body{aspect-ratio:16/9;display:grid;place-items:center;
  background:radial-gradient(700px 320px at 50% 0%, rgba(214,235,253,.05), transparent 70%)}
.frame-ph{text-align:center;color:var(--dim);font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.frame-ph svg{width:34px;height:34px;margin:0 auto 12px;display:block;opacity:.5}

/* Studio mock. Built from our own components rather than a screenshot, so it
   stays truthful when the product changes and costs nothing to load. */
/* the frame body centres a placeholder; the mock must instead fill it */
.frame-body.has-mock{display:block;aspect-ratio:auto;place-items:stretch;min-height:0}
.mock-studio{display:grid;grid-template-columns:270px minmax(0,1fr);width:100%;
  height:100%;min-height:430px;text-align:left}
@media(max-width:820px){.mock-studio{grid-template-columns:1fr}
  .mock-side{display:none}}
.mock-side{border-right:1px solid var(--border);padding:18px;display:flex;flex-direction:column;gap:14px}
.mock-label{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted)}
.mock-model{display:flex;align-items:center;gap:8px;border:1px solid var(--border-2);
  border-radius:var(--r-md);padding:9px 11px;font-size:12.5px;color:var(--ink)}
.mock-model .dot-ok{width:6px;height:6px;border-radius:50%;background:var(--mist-1);flex:none}
.mock-badge{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mist-1);border:1px solid rgba(165,243,252,.3);
  border-radius:var(--r-pill);padding:2px 6px}
.mock-msg{border:1px solid var(--border);border-radius:var(--r-md);background:var(--basalt-1);
  padding:11px 13px;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.mock-msg.me{background:var(--veil-2);color:var(--ink);border-color:var(--border-2)}
.mock-main{padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.mock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;flex:1;min-height:0}
@media(max-width:560px){.mock-grid{grid-template-columns:repeat(2,1fr)}}
.mock-tile{border:1px solid var(--border);border-radius:var(--r-md);background:var(--basalt-1);
  position:relative;overflow:hidden;min-height:92px;
  background-image:radial-gradient(120% 90% at 30% 10%, rgba(214,235,253,.07), transparent 70%)}
.mock-tile:nth-child(2){background-image:radial-gradient(120% 90% at 70% 20%, rgba(196,181,253,.10), transparent 70%)}
.mock-tile:nth-child(3){background-image:radial-gradient(120% 90% at 40% 80%, rgba(252,217,168,.08), transparent 70%)}
.mock-tile:nth-child(5){background-image:radial-gradient(120% 90% at 60% 40%, rgba(165,243,252,.09), transparent 70%)}
.mock-tile span{position:absolute;left:9px;bottom:8px;font-family:var(--mono);font-size:9.5px;
  color:var(--muted)}
.mock-bar{display:flex;align-items:center;gap:9px;border:1px solid var(--border-2);
  border-radius:var(--r-md);background:var(--basalt-1);padding:10px 12px}
.mock-bar .ph{flex:1;font-size:12.5px;color:var(--muted)}
.mock-run{font-size:11.5px;font-weight:600;color:var(--basalt-0);background:var(--steam-0);
  border-radius:var(--r-sm);padding:5px 11px}

/* real generations sitting in the mock and the feature visuals */
.mock-tile img,.visual img{width:100%;height:100%;object-fit:cover;display:block}
.mock-tile span{z-index:1;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.visual{padding:0}
.bento-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:4px}
.bento-strip img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-md);
  border:1px solid var(--border);display:block}

/* sections */
.lp-sect{max-width:1200px;margin:0 auto;padding:110px 24px}
.lp-sect.tight{padding-top:70px}
.lp-sect h2{font-family:var(--serif);font-size:clamp(30px,4vw,52px);font-weight:400;
  letter-spacing:-.02em;line-height:1.04;max-width:18ch}
.lp-sect.center{text-align:center}
.lp-sect.center h2{margin-inline:auto}
.lp-sect .lead{color:var(--ink-2);font-size:16.5px;line-height:1.62;max-width:56ch;margin-top:18px}
.lp-sect.center .lead{margin-inline:auto}

/* alternating feature rows */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}
.row2.flip .row2-text{order:2}
@media(max-width:880px){.row2{grid-template-columns:1fr;gap:32px}.row2.flip .row2-text{order:0}}
.row2 h2{font-size:clamp(28px,3.4vw,46px)}
.row2 p{color:var(--ink-2);font-size:15.5px;line-height:1.65;margin-top:16px;max-width:46ch}
.textlink{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-size:14px;
  font-weight:500;color:var(--ink);border-bottom:1px solid var(--border-2);padding-bottom:3px;
  transition:border-color .16s}
.textlink:hover{border-color:var(--ink)}
.visual{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--basalt-2);
  aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden}
.visual .frame-ph{padding:20px}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:48px}
.bento .cell{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--basalt-2);
  padding:28px;display:flex;flex-direction:column;gap:9px;min-height:190px}
.bento .cell.wide{grid-column:span 6;min-height:230px}
.bento .cell.half{grid-column:span 3}
.bento .cell.third{grid-column:span 2}
@media(max-width:880px){.bento{grid-template-columns:repeat(2,1fr)}
  .bento .cell.wide{grid-column:span 2}.bento .cell.half,.bento .cell.third{grid-column:span 1}}
@media(max-width:520px){.bento{grid-template-columns:1fr}
  .bento .cell.wide,.bento .cell.half,.bento .cell.third{grid-column:span 1}}
.bento h3{font-size:17px;font-weight:600;letter-spacing:-.015em}
.bento .cell.wide h3{font-family:var(--serif);font-weight:400;font-size:30px;letter-spacing:-.02em}
.bento p{color:var(--ink-2);font-size:13.5px;line-height:1.6}
.bento .n{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted)}
.bento .grow{flex:1}

/* statement band */
.band{border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:radial-gradient(900px 340px at 50% 120%, rgba(196,181,253,.07), transparent 70%)}
.band .lp-sect{padding-block:120px}
.band h2{font-family:var(--serif);font-size:clamp(32px,4.6vw,60px);max-width:20ch}

/* proof numbers */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:46px}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{border-top:1px solid var(--border-2);padding-top:20px;text-align:left}
.stat b{display:block;font-family:var(--serif);font-size:42px;font-weight:400;letter-spacing:-.02em;
  line-height:1}
.stat span{display:block;color:var(--ink-2);font-size:13.5px;margin-top:8px}

/* segmented toggle */
.seg-toggle{display:inline-flex;gap:4px;padding:4px;border-radius:var(--r-pill);
  border:1px solid var(--border-2);background:var(--basalt-2);margin:26px auto 0}
.seg-toggle button{border:0;background:none;color:var(--ink-2);font-size:13.5px;font-weight:500;
  padding:8px 18px;border-radius:var(--r-pill);cursor:pointer;transition:.16s}
.seg-toggle button.on{background:var(--veil-2);color:var(--ink)}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px;text-align:left}
@media(max-width:980px){.price-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.price-grid{grid-template-columns:1fr}}
.price-card{position:relative;border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--basalt-2);padding:28px 24px;display:flex;flex-direction:column}
.price-card.pop{border-color:var(--veil-5)}
.price-pop{position:absolute;top:-9px;right:20px;font-family:var(--mono);font-size:10px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--basalt-0);background:var(--steam-0);
  border-radius:var(--r-pill);padding:3px 9px}
.price-name{font-size:17px;font-weight:600;letter-spacing:-.015em}
.price-for{color:var(--muted);font-size:13px;margin-top:2px}
.price-amt{font-size:40px;font-weight:500;letter-spacing:-.035em;margin:18px 0 0;
  font-variant-numeric:tabular-nums}
.price-amt span{font-size:14px;font-weight:400;color:var(--muted);letter-spacing:0}
.price-note{color:var(--muted);font-size:12px;margin-top:4px}
.price-box{border:1px solid var(--border);border-radius:var(--r-md);background:var(--basalt-1);
  padding:14px;margin:18px 0;font-size:13px;color:var(--ink-2);min-height:74px}
.price-box b{color:var(--ink);font-weight:500}
.price-perks{list-style:none;display:grid;gap:9px;margin:18px 0 0}
.price-perks li{position:relative;padding-left:20px;color:var(--ink-2);font-size:13px;line-height:1.5}
.price-perks li::before{content:"";position:absolute;left:3px;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--veil-5)}
.price-card .btn{margin-top:22px}

/* credits explainer + comparison table */
.credit-note{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px;text-align:left}
@media(max-width:760px){.credit-note{grid-template-columns:1fr}}
.credit-note div{border:1px solid var(--border);border-radius:var(--r-md);background:var(--basalt-2);padding:18px 20px}
.credit-note b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px;font-weight:400}
.credit-note span{color:var(--ink-2);font-size:13.5px;line-height:1.55}

.cmp-wrap{overflow-x:auto;margin-top:56px;border:1px solid var(--border);border-radius:var(--r-lg)}
.cmp{width:100%;border-collapse:collapse;font-size:13.5px;text-align:left;min-width:640px}
.cmp th,.cmp td{padding:13px 18px;border-bottom:1px solid var(--border);vertical-align:middle}
.cmp thead th{font-size:14px;font-weight:600;color:var(--ink);background:var(--basalt-2);
  position:sticky;top:0}
.cmp thead th:first-child{font-family:var(--mono);font-size:11px;font-weight:400;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.cmp tbody th{font-weight:400;color:var(--ink-2)}
.cmp td{color:var(--ink);font-variant-numeric:tabular-nums}
.cmp tr.group th{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);background:var(--basalt-1);padding-top:16px;padding-bottom:10px}
.cmp .yes{color:var(--mist-1)}
.cmp .no{color:var(--dim)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:none}

/* footer */
.lp-footer{border-top:1px solid var(--border);padding:52px 24px 72px}
.lp-footer-in{max-width:1200px;margin:0 auto;display:flex;gap:26px;flex-wrap:wrap;align-items:center}
.lp-disclaimer{color:var(--dim);font-size:12px;line-height:1.65;max-width:70ch;margin-top:26px}
.lp-disclaimer a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}

/* email verification banner */
.verify-bar{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap;
  padding:9px 16px;font-size:13px;color:var(--ink);
  background:rgba(214,235,253,.05);border-bottom:1px solid var(--border-2)}
.verify-bar svg{width:16px;height:16px;color:var(--mist-1);flex:none}
.verify-bar form{display:inline;margin:0}
.verify-resend{background:none;border:none;color:var(--accent);font-weight:600;cursor:pointer;text-decoration:underline;padding:0;font-size:13px}
.verify-resend:hover{color:var(--accent-deep)}
/* A control, not a data label: monospace is reserved for values and eyebrows,
   so the language switcher takes the interface face like every other button. */
.lang-btn{background:transparent;border:1px solid var(--border);border-radius:var(--r-pill);padding:7px 12px;
  cursor:pointer;font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:.01em;
  text-transform:uppercase;color:var(--ink-2);line-height:1;display:inline-flex;align-items:center;
  gap:6px;transition:.16s}
.lang-btn:hover{border-color:var(--border-2);color:var(--ink);background:rgba(214,235,253,.04)}
/* CJK: the display serif has no kana or hanzi, so those scripts fall back to a
   system face that sets much wider. Ease the size and let the browser break
   lines the way Japanese actually breaks them. */
:lang(ja) .lp-hero h1,:lang(zh) .lp-hero h1{
  font-size:clamp(34px,5.4vw,64px);line-height:1.24;letter-spacing:0;
  line-break:strict;word-break:normal;overflow-wrap:normal}
:lang(ja) .lp-principle,:lang(zh) .lp-principle{font-size:clamp(22px,2.7vw,32px);line-height:1.5}
:lang(ja) .lp-sect h2,:lang(zh) .lp-sect h2{letter-spacing:0;line-height:1.32}
:lang(ja) .label,:lang(ja) .price-name,:lang(ja) .feat h3{letter-spacing:.02em}

/* language picker menu — portalled to <body>, so nothing can clip it */
.lang-menu{position:fixed;z-index:var(--z-menu);min-width:min(190px,calc(100vw - 16px));padding:6px;box-sizing:border-box;overflow:auto;overscroll-behavior:contain;
  background:var(--pop);backdrop-filter:blur(14px);
  border:1px solid var(--border-2);border-radius:var(--r-md);
  box-shadow:0 20px 60px -18px rgba(0,0,0,.9)}
.lang-item{display:block;width:100%;text-align:left;padding:9px 12px;border:0;background:none;
  border-radius:var(--r-sm);color:var(--ink-2);font-size:13.5px;cursor:pointer;transition:.14s}
.lang-item:hover,.lang-item:focus-visible{background:rgba(214,235,253,.07);color:var(--ink);outline:2px solid var(--border-2);outline-offset:-2px}
.lang-item.on{color:var(--ink);background:rgba(214,235,253,.05)}
.lang-item.on::after{content:"";float:right;width:5px;height:5px;border-radius:50%;
  background:var(--mist-1);margin-top:7px}

.admin-nav{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 22px}
.admin-nav a{padding:7px 14px;border-radius:var(--r-pill);border:1px solid var(--border);color:var(--ink-2);font-size:13px;font-weight:500}
.admin-nav a:hover{border-color:var(--border-2);color:var(--ink)}
.admin-nav a.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.check-row{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink);margin:4px 0 14px;cursor:pointer}
.check-row input{width:16px;height:16px;accent-color:var(--accent)}
.legal{max-width:760px;margin:0 auto;padding:48px 24px 80px}
.legal h1{font-family:var(--serif);font-size:38px;font-weight:400;letter-spacing:-.02em;margin-bottom:6px}
.legal h2{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:30px 0 8px}
.legal p,.legal li{color:var(--ink-2);font-size:14px;margin-bottom:8px}
.legal ul{padding-left:20px}

/* custom dropdown (csel) */
.csel{position:relative;display:inline-block}
.csel-trigger{display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:8px 13px;color:var(--ink);cursor:pointer;font-size:13px;max-width:260px;font-family:var(--sans)}
.csel-trigger:hover{border-color:var(--border-2)}
.csel-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csel-trigger svg{width:12px;height:12px;color:var(--ink-2);flex:none}
.csel-menu{position:fixed;min-width:250px;max-width:340px;background:var(--surface-2);
  border:1px solid var(--border-2);border-radius:var(--r-md);box-shadow:0 18px 54px -16px rgba(0,0,0,.75);z-index:var(--z-dropdown);
  padding:6px;max-height:min(360px,60vh);display:flex;flex-direction:column}
.csel-search{margin:4px 4px 6px;padding:8px 11px;background:var(--surface-3);border:1px solid var(--border);
  border-radius:var(--r-sm);color:var(--ink);font-size:13px;outline:none}
.csel-search:focus{border-color:var(--accent)}
.csel-list{overflow-y:auto}
.csel-opt{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:var(--r-sm);cursor:pointer;font-size:13px;color:var(--ink-2)}
.csel-opt>span:first-child{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csel-opt:hover{background:var(--surface-3);color:var(--ink)}
.csel-opt.active{color:var(--accent)}
.csel-badge{font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:1px 7px;border-radius:var(--r-pill);flex:none;border:1px solid transparent}
.csel-badge.unc{background:rgba(122,162,255,.12);color:#8ab0ff;border-color:rgba(122,162,255,.32)}
.csel-badge.e2ee{background:var(--accent-bg);color:var(--accent);border-color:var(--border-2)}
.csel-badge.priv{background:rgba(168,140,255,.12);color:#b69cff;border-color:rgba(168,140,255,.3)}
.csel-badge.anon{background:rgba(124,200,140,.12);color:#7cc88c;border-color:rgba(124,200,140,.3)}
.csel-badge.filtered{background:rgba(214,138,90,.14);color:#d6a06a;border-color:rgba(214,138,90,.34)}

/* admin stats */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:24px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:16px 18px}
.stat .v{font-family:var(--serif);font-size:26px;font-weight:500}
.stat .l{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.admin-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}
@media(max-width:760px){.admin-cols{grid-template-columns:1fr}}
.inline-form{display:flex;gap:6px;align-items:center}
.inline-form input{width:74px;padding:5px 8px;font-size:12px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--ink)}

/* billing */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:8px 0 28px}
.plan{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:14px;position:relative}
.plan.popular{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.plan-pop{position:absolute;top:-10px;left:22px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--accent);color:var(--on-accent);padding:3px 9px;border-radius:var(--r-pill)}
.plan h3{font-family:var(--serif);font-size:22px;font-weight:500}
.plan .tag{font-size:12px;color:var(--muted)}
.plan .price{font-family:var(--serif);font-size:30px;font-weight:500}
.plan .price small{font-size:13px;color:var(--ink-2);font-family:var(--sans)}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--ink-2);flex:1}
.plan li{display:flex;gap:8px} .plan li::before{content:"›";color:var(--accent)}
.plan.current{opacity:.7}
.pack-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:28px}
.pack{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:18px;text-align:center}
.pack .c{font-family:var(--serif);font-size:24px} .pack .p{color:var(--ink-2);font-size:13px;margin:4px 0 12px}
.htable{width:100%;border-collapse:collapse;font-size:13px}
.htable th{text-align:left;color:var(--muted);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:8px 10px;border-bottom:1px solid var(--border)}
.htable td{padding:9px 10px;border-bottom:1px solid var(--border);color:var(--ink-2)}
.htable .amt{color:var(--accent);font-family:var(--mono)}
.htable .amt.plus{color:#7cc88c}

/* standalone pages (auth, profile, billing, legal) */
.page{min-height:100vh;overflow-y:auto;display:block}
.page-nav .brand{padding:0;font-size:18px}
/* Three columns, not flex-with-spacers: the middle column is then centred on
   the page rather than on whatever is left over between the brand and the
   account buttons, which are never the same width. */
.page-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
  padding:16px 28px;border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:var(--z-nav);background:rgba(0,0,0,.72);backdrop-filter:blur(12px)}
.nav-right{display:flex;align-items:center;gap:10px;justify-self:end}
.page-nav .brand{font-size:21px;padding:0}
.page-nav .grow{flex:1}
.page-wrap{max-width:560px;margin:0 auto;padding:48px 24px 80px}
.page-wrap.wide{max-width:1040px}
.page-wrap.bare{max-width:none;padding:0}
.page-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:32px}
.page-title{font-family:var(--serif);font-size:30px;font-weight:500;letter-spacing:-.02em;margin-bottom:6px}
.page-sub{color:var(--ink-2);margin-bottom:28px}
.field-row label{display:block;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.alert{padding:11px 14px;border-radius:var(--r-sm);font-size:13.5px;margin-bottom:14px;border:1px solid}
.alert-error{background:var(--err-bg);border-color:rgba(224,138,124,.4);color:var(--err)}
.alert-success,.alert-message{background:rgba(110,231,168,.08);border-color:rgba(110,231,168,.3);color:var(--ok)}
.kv{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--border);font-size:14px}
.kv:last-child{border-bottom:none} .kv .k{color:var(--ink-2)}
.auth-alt{text-align:center;margin-top:18px;font-size:13.5px;color:var(--ink-2)}

/* ── library (redesigned gallery) ── */
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.lib-card{position:relative;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--surface);aspect-ratio:1}
.lib-card img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;transition:transform .25s}
.lib-card:hover img{transform:scale(1.04)}
.lib-card video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
/* music card */
.lib-card.music{aspect-ratio:auto;display:flex;flex-direction:column;gap:12px;padding:16px;justify-content:center}
.lib-card.music .mico{width:42px;height:42px;border-radius:11px;background:var(--accent-bg);display:grid;place-items:center}
.lib-card.music .mico svg{width:22px;height:22px;color:var(--accent)}
.lib-card.music audio{width:100%}
.lib-card.music .m-model{font-size:12px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* hover overlay */
.lib-ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:9px;
  opacity:0;transition:opacity .18s;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.5),transparent 30%,transparent 65%,rgba(0,0,0,.62))}
.lib-card:hover .lib-ov{opacity:1}
.lib-card.music .lib-ov{position:static;opacity:1;flex-direction:row;align-items:center;justify-content:space-between;padding:0;background:none;pointer-events:auto}
.lib-ov-top{display:flex;align-items:flex-start;justify-content:space-between;pointer-events:auto}
.lib-ov-bot{font-size:11px;color:#e8e2d6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:auto}
.lib-acts{display:flex;gap:6px;pointer-events:auto}
.lib-acts a,.lib-acts button{width:28px;height:28px;border-radius:7px;background:rgba(0,0,0,.55);border:1px solid var(--border-2);
  color:#fff;display:grid;place-items:center;cursor:pointer;font-size:13px;text-decoration:none}
.lib-acts a:hover{border-color:var(--accent);color:var(--accent)}
.lib-acts .del:hover{border-color:var(--err);color:var(--err)}
/* ── custom media players ── */
.mp-play,.mp-fs{cursor:pointer;border:none;display:grid;place-items:center}
.mp-play svg{width:14px;height:14px} .mp-fs svg{width:16px;height:16px}
.mp-seek{flex:1;height:5px;background:var(--surface-3);border-radius:3px;cursor:pointer;position:relative;min-width:40px}
.mp-fill{height:100%;background:var(--accent);border-radius:3px;width:0}
.mp-time{font-size:11px;color:var(--ink-2);font-variant-numeric:tabular-nums;min-width:36px;text-align:right;flex:none}
/* audio */
.mp-audio{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-pill);padding:7px 12px;width:100%}
.mp-audio .mp-play{width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--on-accent);flex:none}
/* video */
.mp-video{position:relative;width:100%;height:100%;background:#000;overflow:hidden}
.mp-video video{width:100%;height:100%;object-fit:contain;display:block;cursor:pointer}
.mp-big{position:absolute;inset:0;margin:auto;width:54px;height:54px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;backdrop-filter:blur(2px)}
.mp-big svg{width:22px;height:22px}
.mp-video.playing .mp-big{display:none}
.mp-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;padding:9px 11px;
  background:linear-gradient(transparent,rgba(0,0,0,.7));opacity:0;transition:opacity .15s}
.mp-video:hover .mp-bar,.mp-video:not(.playing) .mp-bar{opacity:1}
.mp-bar .mp-play{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;flex:none}
.mp-bar .mp-seek{background:rgba(255,255,255,.28)} .mp-bar .mp-fill{background:#fff}
.mp-bar .mp-time{color:#fff} .mp-fs{background:none;color:#fff;flex:none}

/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:var(--z-lightbox);display:grid;place-items:center;padding:40px;cursor:zoom-out;animation:fade .15s both}
.lightbox img,.lightbox video{max-width:92vw;max-height:92vh;border-radius:var(--r-md);box-shadow:0 20px 80px rgba(0,0,0,.6)}

/* generation progress (pending tile) */
.gen-card{position:relative;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);
  aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:hidden}
.gen-card.err{border-color:#7a3b34;aspect-ratio:auto;min-height:180px;padding:20px;overflow-wrap:anywhere}
.gen-card.err .gen-meta{min-width:0;text-align:center}
.gen-spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--border-2);border-top-color:var(--accent);animation:spin .8s linear infinite}
.gen-meta{display:flex;flex-direction:column;align-items:center;gap:2px}
.gen-label{font-size:12.5px;color:var(--ink-2)}
.gen-time{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.gen-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--surface-3);overflow:hidden}
.gen-bar>i{position:absolute;left:-40%;width:40%;height:100%;background:var(--accent);border-radius:2px;animation:slide 1.15s ease-in-out infinite}
@keyframes slide{0%{left:-40%}60%{left:60%}100%{left:110%}}

/* chat typing / reasoning indicator */
.msg.loading{color:var(--muted);display:flex;align-items:center}
.typing{display:inline-flex;gap:4px;align-items:center}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-2);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
.typing-label{font-size:12.5px;color:var(--muted);margin-right:8px}
@keyframes blink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* gallery lightbox (full viewer) */
.lb{position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:var(--z-lightbox);display:flex;flex-direction:column;animation:fade .15s both}
.lb-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:46px 76px 8px;min-height:0}
.lb-stage img,.lb-stage video{max-width:100%;max-height:100%;border-radius:var(--r-md);object-fit:contain;box-shadow:0 20px 80px rgba(0,0,0,.6)}
.lb-stage .lb-audio{width:min(560px,90%)}
.lb-x,.lb-prev,.lb-next{position:absolute;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;
  border-radius:50%;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(4px);z-index:2;line-height:1}
.lb-x{top:18px;right:18px;width:40px;height:40px;font-size:17px}
.lb-prev,.lb-next{top:46%;transform:translateY(-50%);width:46px;height:46px;font-size:26px}
.lb-prev{left:16px} .lb-next{right:16px}
.lb-x:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.2)}
.lb-panel{flex:none;max-height:36vh;overflow-y:auto;padding:14px 24px 24px;display:flex;flex-direction:column;gap:13px;align-items:center}
.lb-prompt{max-width:760px;width:100%;text-align:center}
.lb-model{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.lb-ptext{font-size:14px;color:#e8e2d6;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.lb-ptext.muted{color:var(--muted)}
.lb-bar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.lib-acts .ex{cursor:pointer}

/* skeleton / spinner */
.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);background-size:200% 100%;
  animation:shimmer 1.3s infinite;border-radius:var(--r-sm)}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.spinner{width:16px;height:16px;border:2px solid var(--border-2);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

.nav-backdrop{display:none}
.navtoggle svg{width:20px;height:20px}
.topbar{padding-left:64px}   /* ruang untuk tombol menu yang kini selalu tampak */
@media(max-width:820px){
  .sidenav{width:250px}
  .chat-wrap{padding-top:58px}
  .canvas{padding:64px var(--g-md) 80px}
}


/* ══════════════════════════════════════════════════════════════════
   PEMILIH MODEL — dialog bertab untuk katalog ratusan model.
   Seluruhnya memakai token rumah (basalt/veil/steam/mist); tidak ada
   warna baru diperkenalkan di sini, supaya ia terbaca sebagai bagian
   Souna dan bukan tempelan.
   ══════════════════════════════════════════════════════════════════ */
.mp-trigger{display:inline-flex;align-items:center;gap:var(--g-xs);max-width:100%;
  padding:7px 12px;border:1px solid var(--border);border-radius:var(--r-pill);
  background:var(--surface);color:var(--ink);font:500 13px/1 var(--sans);cursor:pointer;
  transition:border-color .15s,background .15s}
.mp-trigger:hover{border-color:var(--veil-5);background:var(--surface-2)}
.mp-trig-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22ch}
.mp-i{width:16px;height:16px;flex:0 0 auto}

.mp-overlay{position:fixed;inset:0;z-index:var(--z-picker);display:flex;align-items:flex-start;
  justify-content:center;padding:8vh 16px 16px;background:rgba(0,0,0,.62);
  backdrop-filter:blur(6px)}
.mp-overlay.hidden{display:none}
.mp-dialog{width:min(680px,100%);max-height:80vh;display:flex;flex-direction:column;
  background:var(--basalt-1);border:1px solid var(--veil-4);border-radius:var(--r-lg);
  box-shadow:0 24px 80px rgba(0,0,0,.6);overflow:hidden}

.mp-head{display:flex;align-items:center;gap:6px;padding:12px;border-bottom:1px solid var(--veil-3)}
.mp-search{flex:1;display:flex;align-items:center;gap:8px;padding:0 12px;
  background:var(--veil-1);border:1px solid var(--veil-3);border-radius:var(--r-pill);color:var(--muted)}
.mp-search:focus-within{border-color:var(--veil-5);color:var(--ink-2)}
.mp-search input{flex:1;padding:9px 0;border:0;background:none;color:var(--ink);
  font:400 14px/1 var(--sans);outline:none}
.mp-ico{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;
  border:1px solid var(--veil-3);border-radius:var(--r-md);background:var(--veil-1);
  color:var(--ink-2);cursor:pointer;transition:.15s}
.mp-ico:hover{background:var(--veil-2);color:var(--ink)}
.mp-ico.on{background:var(--accent-bg);border-color:var(--veil-5);color:var(--ink)}

.mp-panel{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;border-bottom:1px solid var(--veil-3);
  background:var(--basalt-2)}
.mp-panel.hidden{display:none}
.mp-chip{padding:5px 11px;border:1px solid var(--veil-3);border-radius:var(--r-pill);
  background:transparent;color:var(--ink-2);font:500 12px/1 var(--sans);cursor:pointer}
.mp-chip:hover{border-color:var(--veil-5);color:var(--ink)}
.mp-chip.on{background:var(--accent-bg);border-color:var(--veil-5);color:var(--ink)}

.mp-head,.mp-panel,.mp-tabs,.mp-foot{flex:0 0 auto}   /* jangan ikut dikompres oleh .mp-list */
.mp-tabs{display:flex;gap:2px;padding:8px 12px 0;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--veil-3)}
.mp-tabs::-webkit-scrollbar{display:none}
.mp-tab{padding:7px 12px;border:0;border-bottom:2px solid transparent;background:none;
  color:var(--muted);font:500 13px/1 var(--sans);white-space:nowrap;cursor:pointer}
.mp-tab:hover{color:var(--ink-2)}
.mp-tab.on{color:var(--ink);border-bottom-color:var(--steam-0)}

.mp-list{flex:1;overflow-y:auto;padding:8px;outline:none}
.mp-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-md);
  cursor:pointer;transition:background .12s}
.mp-row:hover,.mp-row.sorot{background:var(--veil-2)}
.mp-row.aktif{background:var(--accent-bg)}
.mp-nama{flex:0 1 auto;color:var(--ink);font:500 14px/1.2 var(--sans);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-badges{flex:1 1 auto;display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.mp-badge{padding:2px 7px;border-radius:var(--r-pill);font:600 10px/1.5 var(--mono);
  letter-spacing:.02em;white-space:nowrap;border:1px solid transparent}
.mp-b-unc{color:var(--sulfur);border-color:rgba(252,217,168,.28);background:rgba(252,217,168,.08)}
.mp-b-priv,.mp-b-e2ee{color:var(--spring);border-color:rgba(165,243,252,.26);background:rgba(165,243,252,.07)}
.mp-b-anon{color:var(--iris);border-color:rgba(196,181,253,.26);background:rgba(196,181,253,.07)}
.mp-b-cap{color:var(--steam-2);border-color:var(--veil-3);background:var(--veil-1)}
.mp-b-free{color:var(--ok);border-color:rgba(110,231,168,.26);background:rgba(110,231,168,.07)}
.mp-biaya{flex:0 0 auto;color:var(--muted);font:500 11px/1 var(--mono);white-space:nowrap}
.mp-fav{flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;padding:0;
  border:0;border-radius:var(--r-sm);background:none;color:var(--steam-4);cursor:pointer}
.mp-fav:hover{color:var(--ink-2);background:var(--veil-2)}
.mp-fav.on{color:var(--sulfur)}
.mp-fav.on .mp-i{fill:currentColor}
.mp-aktif-ikon{flex:0 0 auto;color:var(--ink)}
.mp-kosong{padding:32px 16px;text-align:center;color:var(--muted);font:400 13px/1.6 var(--sans)}

.mp-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 14px;border-top:1px solid var(--veil-3);background:var(--basalt-2);
  color:var(--dim);font:500 11px/1 var(--mono)}
.mp-hint{opacity:.75}

@media (max-width:560px){
  .mp-overlay{padding:0}
  .mp-dialog{width:100%;max-height:100vh;height:100vh;border-radius:0;border:0}
  .mp-badges{display:none}
  .mp-hint{display:none}
}


/* ══════════════════════════════════════════════════════════════════
   PANEL SETELAN CHAT — sakelar kemampuan + parameter sampling.
   Sepenuhnya token rumah; tak ada warna baru diperkenalkan di sini.
   ══════════════════════════════════════════════════════════════════ */
.cs-pop{position:fixed;z-index:var(--z-popover);width:min(360px,calc(100vw - 16px));max-height:70vh;
  display:flex;flex-direction:column;background:var(--basalt-1);border:1px solid var(--veil-4);
  border-radius:var(--r-lg);box-shadow:0 20px 60px rgba(0,0,0,.55);overflow:hidden}
.cs-pop.hidden{display:none}
.cs-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid var(--veil-3)}
.cs-h{color:var(--ink);font:600 14px/1 var(--sans)}
.cs-reset{border:0;background:none;color:var(--muted);font:500 12px/1 var(--sans);cursor:pointer;padding:4px}
.cs-reset:hover{color:var(--ink)}
.cs-body{flex:1;overflow-y:auto;padding:4px 0}

.cs-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 14px;border-bottom:1px solid var(--veil-1)}
.cs-row.hidden{display:none}
.cs-kiri{display:flex;align-items:flex-start;gap:10px;min-width:0}
.cs-i{width:17px;height:17px;flex:0 0 auto;color:var(--ink-2);margin-top:1px}
.cs-judul{color:var(--ink);font:500 13px/1.35 var(--sans)}
.cs-ket{color:var(--muted);font:400 11.5px/1.4 var(--sans);margin-top:2px}

.cs-toggle{flex:0 0 auto;width:40px;height:23px;padding:2px;border:1px solid var(--veil-4);
  border-radius:var(--r-pill);background:var(--veil-1);cursor:pointer;transition:.16s}
.cs-toggle span{display:block;width:17px;height:17px;border-radius:50%;
  background:var(--steam-3);transition:.16s}
.cs-toggle.on{background:var(--accent-bg);border-color:var(--veil-5)}
.cs-toggle.on span{transform:translateX(17px);background:var(--steam-0)}

.cs-slider{padding:11px 14px;border-bottom:1px solid var(--veil-1)}
.cs-sl-head{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.cs-sl-head .cs-judul{flex:1}
.cs-nilai{color:var(--ink-2);font:500 12px/1 var(--mono);min-width:34px;text-align:right}
.cs-kunci{display:grid;place-items:center;width:26px;height:26px;padding:0;flex:0 0 auto;
  border:1px solid var(--veil-3);border-radius:var(--r-sm);background:transparent;
  color:var(--steam-4);cursor:pointer}
.cs-kunci:hover{color:var(--ink-2)}
.cs-kunci.on{color:var(--ink);border-color:var(--veil-5);background:var(--accent-bg)}
.cs-slider input[type=range]{width:100%;height:3px;-webkit-appearance:none;appearance:none;
  background:var(--veil-3);border-radius:var(--r-pill);outline:none}
.cs-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;
  border-radius:50%;background:var(--steam-0);cursor:pointer;border:0}
.cs-slider input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;
  background:var(--steam-0);cursor:pointer;border:0}

/* select lama yang dipindahkan ke dalam panel harus ikut menyempit */
.cs-slot-effort,.cs-slot-persona{flex:0 0 auto;max-width:52%}
.cs-slot-effort .chip,.cs-slot-persona select{max-width:100%}

.chip.cs-btn.on{border-color:var(--veil-5);background:var(--accent-bg);color:var(--ink)}


/* ══════════════════════════════════════════════════════════════════
   MENU AKSI KOMPOSER
   ══════════════════════════════════════════════════════════════════ */
.am-pop{position:fixed;z-index:var(--z-popover);width:min(268px,calc(100vw - 16px));padding:6px;
  background:var(--basalt-1);border:1px solid var(--veil-4);border-radius:var(--r-lg);
  box-shadow:0 20px 60px rgba(0,0,0,.55)}
.am-pop.hidden{display:none}
.am-h{padding:8px 10px 6px;color:var(--muted);font:600 11px/1 var(--mono);letter-spacing:.06em;
  text-transform:uppercase}
.am-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;
  border-radius:var(--r-md);background:none;color:var(--ink);font:500 13px/1.2 var(--sans);
  text-align:left;cursor:pointer;position:relative}
.am-item:hover:not(:disabled){background:var(--veil-2)}
.am-item:disabled{color:var(--steam-4);cursor:not-allowed}
.am-i{width:17px;height:17px;flex:0 0 auto;color:var(--ink-2)}
.am-item:disabled .am-i{color:var(--steam-4)}
.am-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-biaya{flex:0 0 auto;color:var(--muted);font:500 11px/1 var(--mono)}
/* Alasan sebuah aksi mati ditampilkan, bukan disembunyikan: pemakai yang tidak
   tahu kenapa akan menyalahkan dirinya sendiri, lalu berhenti mencoba. */
.am-alasan{position:absolute;left:37px;right:10px;bottom:-1px;color:var(--steam-4);
  font:400 10.5px/1.3 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-item:disabled{padding-bottom:15px}
.chip.am-btn.on{border-color:var(--veil-5);background:var(--accent-bg);color:var(--ink)}


/* Komposer di tengah saat percakapan kosong, lalu turun ke bawah begitu pesan
   pertama muncul. Halaman awal jadi lapang, dan begitu ada isi, ruang baca yang
   menang. Kelas `kosong` dilepas di addBubble(), jadi perpindahannya mengikuti
   keadaan sungguhan - bukan tebakan dari tinggi elemen. */
.chat-wrap.kosong{justify-content:center;padding-bottom:10vh}
.chat-wrap.kosong .chat-stream{flex:0 0 auto;overflow:visible;padding-bottom:0}
.chat-wrap.kosong .hero{margin-top:0;margin-bottom:var(--g-lg)}
.chat-wrap{transition:padding-bottom .18s ease}
@media(prefers-reduced-motion:reduce){.chat-wrap{transition:none}}


/* ── pemilih tema di halaman Settings ───────────────────────────────────────
   Pratinjaunya memakai warna HARFIAH, bukan token, dan itu memang harus begitu:
   kartu "Light" wajib tampak terang meski halaman sedang gelap, karena gunanya
   menunjukkan pilihan yang BELUM dipakai. Ini satu-satunya tempat di berkas ini
   di mana warna mentah adalah jawaban yang benar. */
.tema-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:12px}
.tema-opt{position:relative;display:flex;flex-direction:column;gap:4px;cursor:pointer;
  padding:12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--veil-1);
  transition:border-color .15s,background .15s}
.tema-opt:hover{background:var(--veil-2);border-color:var(--border-2)}
.tema-opt.on{border-color:var(--accent);background:var(--accent-bg)}
.tema-opt input{position:absolute;opacity:0;pointer-events:none}
.tema-nama{font-weight:600;font-size:13.5px;margin-top:8px}
.tema-ket{color:var(--muted);font-size:12px}
.tema-prev{display:block;height:62px;border-radius:var(--r-sm);overflow:hidden;position:relative;
  border:1px solid var(--veil-3);padding:8px}
.tema-prev .tp-bar{display:block;height:7px;width:52%;border-radius:3px;margin-bottom:7px}
.tema-prev .tp-line{display:block;height:5px;width:86%;border-radius:3px;margin-bottom:5px}
.tema-prev .tp-line.short{width:58%}
.tema-prev-dark{background:#0a0b0c}
.tema-prev-dark .tp-bar{background:#f0f0f0}
.tema-prev-dark .tp-line{background:rgba(214,235,253,.20)}
.tema-prev-light{background:#ffffff}
.tema-prev-light .tp-bar{background:#16191d}
.tema-prev-light .tp-line{background:rgba(16,24,32,.17)}
/* "System" digambar terbelah, karena itulah yang sebenarnya terjadi. */
.tema-prev-system{background:linear-gradient(105deg,#0a0b0c 0 50%,#ffffff 50% 100%)}
.tema-prev-system .tp-bar{background:#8b929b}
.tema-prev-system .tp-line{background:rgba(139,146,155,.55)}

/* Spanduk penyimpanan rusak. Muncul SEBELUM pemakai membelanjakan kredit, bukan
   sesudah hasilnya hilang - itu bedanya peringatan dan laporan kematian. */
.spanduk-simpan{position:sticky;top:0;z-index:var(--z-banner);display:flex;gap:12px;align-items:flex-start;
  padding:11px 16px;background:var(--surface-2);border-bottom:1px solid rgba(226,138,128,.45);
  font-size:13px;line-height:1.45;color:var(--steam-1)}
.spanduk-simpan b{color:#e28a80;font-weight:600}
.spanduk-simpan .tutup{margin-left:auto;flex:none;background:none;border:0;color:var(--steam-3);
  cursor:pointer;font-size:15px;line-height:1;padding:2px 6px}
.spanduk-simpan .tutup:hover{color:var(--steam-1)}

/* Judul bagian di dalam grid Library. grid-column:1/-1 supaya ia memotong
   seluruh baris, bukan menempati satu sel seperti kartu. */
.lib-sub{grid-column:1/-1;margin:18px 0 2px;font-size:12.5px;line-height:1.5;color:var(--steam-3)}
.lib-sub b{color:var(--steam-2);font-weight:600}

/* Modal beli-cepat di beranda. Sengaja kecil dan cuma dua isian: setiap kolom
   tambahan di sini adalah calon pembeli yang berubah pikiran. */
.beli-latar{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(0,0,0,.62);backdrop-filter:blur(3px)}
.beli-latar[hidden]{display:none}
.beli-kotak{position:relative;width:100%;max-width:400px;background:var(--surface-2);
  border:1px solid var(--border-2);border-radius:var(--r-lg,16px);padding:24px 22px 18px;
  box-shadow:0 24px 70px -20px rgba(0,0,0,.7)}
.beli-kotak h3{margin:0 0 2px;font-size:19px}
.beli-sub{margin:0 0 16px;color:var(--steam-2);font-size:13.5px}
.beli-kotak label{display:block;margin:12px 0 5px;font-size:12.5px;color:var(--steam-2)}
.beli-kotak input{width:100%;padding:11px 13px;border-radius:var(--r-md,10px);font-size:14.5px;
  background:var(--surface-1);border:1px solid var(--border-2);color:var(--steam-1)}
.beli-kotak input:focus{outline:none;border-color:var(--veil-5)}
.beli-nota{margin:14px 0 4px;font-size:12px;line-height:1.5;color:var(--steam-3)}
.beli-galat{margin:10px 0 0;font-size:13px;line-height:1.5;color:#e28a80}
.beli-galat a{color:#e28a80;text-decoration:underline}
.beli-kotak .btn{margin-top:14px}
.beli-masuk{margin:14px 0 0;text-align:center;font-size:12.5px;color:var(--steam-3)}
.beli-masuk a{color:var(--steam-2)}
.beli-tutup{position:absolute;top:10px;right:10px;background:none;border:0;cursor:pointer;
  color:var(--steam-3);font-size:15px;line-height:1;padding:6px 8px}
.beli-tutup:hover{color:var(--steam-1)}

/* Halaman Integrasi (admin). Statusnya sengaja terbaca dari jauh: yang paling
   sering salah di halaman kunci bukan nilainya, tapi keyakinan bahwa sesuatu
   sudah terpasang padahal belum. */
.intg{margin-bottom:16px}
.intg-kepala{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.intg-nama{margin:0 0 4px;font-size:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.intg-ringkas{margin:0;font-size:12.5px;line-height:1.5;color:var(--steam-3);max-width:62ch}
.intg-hint{margin:-8px 0 12px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.intg-hapus{color:#e28a80;display:inline-flex;gap:5px;align-items:center;cursor:pointer}
.intg-hasil{margin:0 0 12px;padding:9px 12px;border-radius:var(--r-md,10px);font-size:13px;
  background:var(--veil-1);border:1px solid var(--border-2)}
.intg-hasil.ok{border-color:rgba(124,200,140,.45);color:#7cc88c}
.intg-hasil.gagal{border-color:rgba(226,138,128,.45);color:#e28a80}
.intg-peringatan{border-color:rgba(226,138,128,.45)}
.pil{font-size:10.5px;font-weight:600;letter-spacing:.02em;padding:2px 7px;border-radius:var(--r-pill,999px);
  border:1px solid var(--border-2);color:var(--steam-3);text-transform:uppercase}
.pil-ok{color:#7cc88c;border-color:rgba(124,200,140,.45)}
.pil-sebagian{color:#d9b45f;border-color:rgba(217,180,95,.45)}
.pil-kosong{color:#e28a80;border-color:rgba(226,138,128,.45)}
.pil-enc{color:#8fb8d9;border-color:rgba(143,184,217,.4)}
.pil-env{color:var(--steam-3)}

/* Bilah mode Studio: ikon di tengah, label muncul saat
   disentuh. Yang dipindahkan bukan sekadar posisinya - dengan label selalu
   tampil, empat mode memakan lebar yang di ponsel mendorong komposer ke bawah. */
.mode-tabs{margin:0 auto;display:flex;gap:2px;padding:4px;border-radius:var(--r-pill,999px);
  background:var(--surface-2);border:1px solid var(--border-2)}
.mode-tabs .mode-btn{position:relative;padding:7px 11px;border-radius:var(--r-pill,999px);
  display:flex;align-items:center;gap:7px}
.mode-tabs .mode-btn svg{width:17px;height:17px;flex:none}
.mode-tabs .mode-btn span{display:none}          /* label diganti tooltip */
.mode-tabs .mode-btn.active span{display:inline} /* kecuali yang sedang aktif */
.mode-tabs .mode-btn::after{content:attr(data-tip);position:absolute;top:calc(100% + 7px);
  left:50%;transform:translateX(-50%);background:var(--surface-3,var(--basalt-3));
  color:var(--steam-1);font-size:11.5px;padding:4px 9px;border-radius:7px;white-space:nowrap;
  border:1px solid var(--border-2);opacity:0;pointer-events:none;transition:opacity .12s;z-index:40}
.mode-tabs .mode-btn:hover::after{opacity:1}
.mode-tabs .mode-assets{margin-left:4px;border-left:1px solid var(--border-2);border-radius:0 var(--r-pill,999px) var(--r-pill,999px) 0}

/* Sub-mode: pekerjaan berbeda di dalam satu kategori. */
.submodes{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin:0 0 12px}
.submodes:empty{display:none}
.submode{background:var(--surface-2);border:1px solid var(--border-2);color:var(--steam-2);
  border-radius:var(--r-pill,999px);padding:7px 15px;font-size:13px;cursor:pointer;
  transition:border-color .12s,color .12s,background .12s}
.submode:hover{border-color:var(--veil-5);color:var(--steam-1)}
.submode.active{background:var(--steam-0);border-color:var(--steam-0);color:var(--basalt-0);font-weight:600}

/* Keadaan kosong per mode. Ia menempati ruang yang sama dengan hasil, jadi
   begitu ada hasil ia menghilang sendiri tanpa memindahkan apa pun. */
.kosong{display:flex;justify-content:center;margin:6px 0 18px}
.kosong-kartu{max-width:420px;text-align:center;padding:30px 26px;border-radius:var(--r-lg,16px);
  border:1px solid var(--border-2);background:var(--surface-2)}
.kosong-kartu svg{width:34px;height:34px;color:var(--steam-3);margin-bottom:12px}
.kosong-kartu h3{margin:0 0 6px;font-size:17px}
.kosong-kartu p{margin:0;font-size:13.5px;line-height:1.55;color:var(--steam-3)}
.kosong-aksi{display:flex;gap:9px;justify-content:center;margin-top:16px;flex-wrap:wrap}

/* Pemilih aset: hasil lama dipakai ulang sebagai bahan edit, tanpa perlu
   diunduh lalu diunggah kembali. */
.aset-latar{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(0,0,0,.62);backdrop-filter:blur(3px)}
.aset-kotak{width:100%;max-width:620px;max-height:78vh;display:flex;flex-direction:column;
  background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--r-lg,16px);overflow:hidden}
.aset-kepala{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  border-bottom:1px solid var(--border-2)}
.aset-tutup{background:none;border:0;color:var(--steam-3);cursor:pointer;font-size:15px;padding:4px 8px}
.aset-tutup:hover{color:var(--steam-1)}
.aset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:9px;padding:14px;overflow:auto}
.aset-item{padding:0;border:1px solid var(--border-2);border-radius:var(--r-md,10px);overflow:hidden;
  background:var(--surface-1);cursor:pointer;aspect-ratio:1}
.aset-item:hover{border-color:var(--veil-5)}
.aset-item img{width:100%;height:100%;object-fit:cover;display:block}
.aset-kosong{grid-column:1/-1;margin:12px 4px;font-size:13px;color:var(--steam-3);text-align:center}

/* Lencana penyedia di pemilih model. Huruf awal, warna stabil per nama -
   bukan lambang resmi penyedia: itu merek pihak lain, dan hulu sendiri
   pemasok kita. */
.mp-prov{flex:none;width:22px;height:22px;border-radius:6px;display:inline-flex;
  align-items:center;justify-content:center;font-size:9.5px;font-weight:700;letter-spacing:.02em;
  color:hsl(var(--pw) 60% 78%);background:hsl(var(--pw) 45% 20%);
  border:1px solid hsl(var(--pw) 45% 32%)}
:root[data-theme="light"] .mp-prov{color:hsl(var(--pw) 55% 30%);background:hsl(var(--pw) 60% 94%);
  border-color:hsl(var(--pw) 45% 82%)}

/* Ringkasan setelan yang sedang berlaku, terbaca tanpa membuka apa pun. */
.ringkas-bar{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}
.ringkas-bar:empty{display:none}
.chip.ringkas{font-size:12px;padding:5px 10px;opacity:.9}
.chip.ringkas:hover{opacity:1}

/* Pricing controls: billing period and display currency side by side. */
.price-controls{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px}
.price-controls .seg-toggle{margin:0}
.cur-toggle button{min-width:54px;letter-spacing:.02em}

/* ══ app shell v2 ══
   Persistent sidebar on desktop, one 64px header per view, composer centred
   when a view is empty and docked once it has content, a single round send
   button at the far right of the control row. Phones: sidebar slides over
   the page, composer pinned to the bottom, studio modes in a dropdown. */
:root{--sidenav-w:300px;--topbar-h:64px;--ctl:32px}
.app{display:grid;grid-template-columns:var(--sidenav-w) 1fr;height:100vh;height:100dvh;overflow:hidden}
.app.nav-collapsed{grid-template-columns:1fr}
.app.nav-collapsed .sidenav{display:none}
.app.nav-collapsed .navtoggle{display:grid}
.main{overflow-y:auto;height:100vh;height:100dvh;position:relative;min-width:0}

/* sidebar: a real column, never off-canvas on desktop */
.sidenav{position:relative;inset:auto;transform:none;transition:none;width:auto;z-index:auto;
  background:var(--bg-2);border-right:1px solid var(--border);display:flex;flex-direction:column;
  padding:12px;gap:2px;height:100vh;height:100dvh;overflow:hidden}
.side-top{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 4px 0 8px;margin-bottom:12px}
.sidenav .brand{padding:0;min-height:0;font-size:19px;text-decoration:none;color:var(--ink)}
.side-collapse{color:var(--ink-2)}
.side-nav{display:flex;flex-direction:column;gap:0}
.nav-item{height:40px;padding:0 12px;border-radius:8px;gap:12px;font-size:14px;font-weight:400;color:var(--ink);transition:background .12s}
.nav-item svg{width:16px;height:16px;opacity:.9}
.nav-item:hover{background:var(--veil-1);color:var(--ink)}
.nav-item.active{background:var(--veil-2);color:var(--ink)}
.nav-item.active svg{color:var(--ink);opacity:1}
.chats-head{display:flex;align-items:center;justify-content:space-between;height:24px;padding:0 12px;margin-top:22px}
.side-label{font:700 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.newchat{background:transparent;border:1px solid var(--border);color:var(--ink-2);border-radius:8px;padding:3px 9px;font-size:12px;font-weight:500}
.newchat:hover{background:var(--veil-2);color:var(--ink);border-color:var(--border-2)}
.chat-list{flex:1;overflow-y:auto;margin:6px 0 8px;gap:1px}
.chat-row{height:40px;padding:0 11px;border-radius:8px;font-size:14px;color:var(--ink)}
.chat-row:hover{background:var(--veil-1)}
.chat-row.active{background:var(--veil-2)}
.acct{position:relative;display:flex;align-items:center;gap:10px;padding:8px;border:0;background:none;border-radius:8px}
.acct:hover{background:var(--veil-1)}
.acct-av{width:40px;height:40px;border-radius:8px;flex:none}
.acct-text{min-width:0;flex:1}
.acct-who{font-size:14px;font-weight:600;color:var(--ink)}
.acct-cr{font-size:12px;color:var(--ink-2);letter-spacing:0;margin-top:1px}
.acct-more{flex:none;color:var(--ink-2)}
.acct-menu{position:absolute;left:8px;right:8px;bottom:calc(100% + 6px);background:var(--surface-2);border:1px solid var(--border-2);
  border-radius:12px;padding:6px;box-shadow:0 18px 50px -18px rgba(0,0,0,.6);z-index:70}
.acct-menu[hidden]{display:none}
.acct-links{display:flex;flex-direction:column;gap:0;margin:0;font-size:14px}
.acct-links a{display:block;padding:9px 10px;border-radius:8px;color:var(--ink)}
.acct-links a:hover{background:var(--veil-2)}
.acct-menu-row{border-top:1px solid var(--border);margin-top:6px;padding-top:6px}
.acct-menu-row .lang-btn{width:100%;justify-content:flex-start;gap:8px;padding:8px 10px;border:0;background:none;border-radius:8px;font-family:var(--sans);font-size:14px;color:var(--ink);cursor:pointer}
.acct-menu-row .lang-btn:hover{background:var(--veil-2)}
.lang-code{font:500 12px var(--mono);color:var(--ink-2)}

/* shared 32px control + round send */
.ibtn{width:var(--ctl);height:var(--ctl);padding:0;display:inline-grid;place-items:center;border:1px solid var(--border);
  background:var(--veil-1);color:var(--ink-2);border-radius:8px;cursor:pointer;transition:background .12s,color .12s,border-color .12s;flex:none}
.ibtn svg{width:16px;height:16px}
.ibtn:hover{background:var(--veil-2);color:var(--ink)}
.ibtn.on,.chip.ibtn.on{background:var(--accent-bg);border-color:var(--veil-5);color:var(--ink)}
.send{width:var(--ctl);height:var(--ctl);padding:0;border:0;border-radius:50%;background:var(--accent);color:var(--on-accent);
  display:inline-grid;place-items:center;cursor:pointer;flex:none;transition:opacity .12s,transform .12s}
.send svg{width:16px;height:16px}
.send:hover{transform:translateY(-1px)}
.send:disabled{opacity:.45;cursor:wait;transform:none}
.send.stop{background:var(--danger);color:#fff}

/* header: one 64px row per view */
.topbar{height:var(--topbar-h);padding:0 20px;gap:12px;display:flex;align-items:center;position:sticky;top:0;z-index:10;
  background:var(--bg);border-bottom:1px solid var(--border);backdrop-filter:none}
.topbar-title{display:flex;align-items:center;gap:8px;font:600 16px/1 var(--sans);color:var(--ink);white-space:nowrap}
.topbar-title .sub{font-size:12px;color:var(--muted);font-weight:400;margin-left:2px}
.topbar-title svg{width:18px;height:18px;color:var(--ink-2)}
.topbar h1{display:none}
.top-newchat{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:8px;font-size:14px;font-weight:500;background:var(--veil-1);border:1px solid var(--border);color:var(--ink)}
.top-newchat svg{width:15px;height:15px}
.topbar-actions{margin-left:auto;display:flex;gap:6px}

/* studio: centred segmented icon toolbar, uniform 40x40 buttons */
.mode-toolbar{position:absolute;left:50%;transform:translateX(-50%);margin:0;display:flex;gap:8px;padding:5px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.mode-btn{width:40px;height:40px;padding:0;display:grid;place-items:center;border-radius:8px;color:var(--ink-2);gap:0;position:relative}
.mode-btn svg{width:18px;height:18px}
.mode-btn>span{display:none}
.mode-btn:hover{background:var(--veil-1);color:var(--ink)}
.mode-btn.active{background:var(--veil-2);color:var(--ink)}
.mode-btn[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;
  font:500 12px/1 var(--sans);color:var(--ink);background:var(--surface-2);border:1px solid var(--border-2);border-radius:6px;padding:5px 8px;opacity:0;pointer-events:none;transition:opacity .12s}
.mode-btn:hover::after,.mode-btn:focus-visible::after{opacity:1}
/* Older generic tooltip rules ([data-tip]::after above, .mode-tabs .mode-btn::after)
   fight this one; pin every geometry property so the label always sits below. */
.mode-tabs .mode-btn[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);bottom:auto;left:50%;right:auto;margin:0;
  transform:translateX(-50%);white-space:nowrap;font:500 12px/1 var(--sans);color:var(--ink);background:var(--surface-2);border:1px solid var(--border-2);
  border-radius:6px;padding:5px 8px;opacity:0;pointer-events:none;transition:opacity .12s;z-index:5}
.mode-tabs .mode-btn[data-tip]:hover::after,.mode-tabs .mode-btn[data-tip]:focus-visible::after{opacity:1;transform:translateX(-50%)}
.mode-toolbar.lib-filters{position:static;transform:none;margin-left:auto}
.mode-toolbar.lib-filters .mode-btn{width:auto;padding:0 12px;font-size:13px}
.mode-toolbar.lib-filters .mode-btn>span{display:inline}
.mode-dd{display:none}

/* composer: hairline, soft shadow, one control row */
.composer{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:12px 14px 12px;box-shadow:0 8px 30px -18px rgba(0,0,0,.5);z-index:20}
.composer:focus-within{border-color:var(--border-2)}
.studio-composer{border-radius:20px}
.composer textarea{min-height:44px;line-height:1.5;padding:4px 2px}
.cbar{display:flex;align-items:center;gap:8px;margin-top:8px;min-width:0;flex-wrap:nowrap}
.cbar .grow{flex:1 1 0;min-width:4px}
.cbar .chip{height:var(--ctl);padding:0 10px;border-radius:8px;background:var(--veil-1);border:1px solid var(--border);font-size:13px;gap:6px}
.cbar .chip.ibtn{padding:0;width:var(--ctl)}
.cbar .chip.ibtn svg{width:16px;height:16px}
.cbar .mp-trigger{height:var(--ctl);padding:0 10px;border-radius:8px;background:var(--veil-1);border:1px solid var(--border);font-size:13px;max-width:min(46vw,260px)}
.cbar .mp-trig-label{max-width:24ch}
.cbar select:not([data-csel]){height:var(--ctl);border-radius:8px}
.attach-name{display:none}
.attach-name:not(:empty){display:inline;max-width:10ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
#attachBtn:has(.attach-name:not(:empty)){width:auto;padding:0 10px}
.ringkas-bar{display:inline-flex;align-items:center;height:var(--ctl);padding:0 8px;font:500 12px var(--mono);color:var(--ink-2);white-space:nowrap}
.ringkas-bar:empty{display:none}
.cost-note{font:500 12px var(--mono);color:var(--muted);white-space:nowrap}
.cost-note:empty{display:none}
.chip.cost{display:none}
.run{display:none}

/* chat: centred when empty, docked when in conversation */
#view-chat.active{display:flex;flex-direction:column;height:100vh;height:100dvh}
.chat-wrap{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;max-width:832px;margin:0 auto;padding:0 16px}
.chat-stream{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:24px 0 18px}
.chat-wrap.kosong{justify-content:center;padding-bottom:6vh}
.chat-wrap.kosong .chat-stream{flex:0 0 auto;overflow:visible;padding:0}
.chat-wrap.kosong .hero{margin:0 0 22px}
.hero h2{font-family:var(--serif);font-size:30px;font-weight:400;letter-spacing:-.02em;line-height:1.1}
.hero p{font-size:14px;color:var(--ink-2);margin-top:8px}
.chat-wrap:not(.kosong) .hero{display:none}
.chat-dock{padding:10px 0 16px;flex:none}
.chat-dock .composer{width:100%}
.suggest{margin:14px 0 0;gap:8px;justify-content:center}
.suggest .chip{height:32px;padding:0 12px;border-radius:8px;background:var(--veil-1);font-size:13px}
.chat-wrap:not(.kosong) .suggest{display:none}
.msg{max-width:72%;font-size:16px;line-height:24px;border-radius:12px;padding:10px 16px}
.msg.user{background:var(--veil-2);border:0;align-self:flex-end}
.msg.bot{background:none;border:0;padding:0;max-width:100%;align-self:stretch}
.msg-actions{display:none;gap:2px;margin-top:6px;opacity:1}
.msg:hover .msg-actions,.msg-actions:focus-within{display:flex}
.msg.show-actions .msg-actions{display:flex}

/* studio: composer centred when there is nothing, results below once there is */
.canvas{max-width:760px;margin:0 auto;padding:16px 20px 40px;display:flex;flex-direction:column;gap:18px;min-height:calc(100vh - var(--topbar-h));min-height:calc(100dvh - var(--topbar-h))}
.canvas.kosong{justify-content:center;padding-bottom:12vh}
.canvas.kosong .studio-results{display:none}
.studio-top:empty{display:none}
.studio-results .results{margin-top:4px}
.results-head{display:none}
.lib-canvas{justify-content:flex-start;min-height:0;max-width:1100px}

/* verify notice: one slim line, never a wrapping bar */
.verify-bar{height:40px;display:flex;align-items:center;gap:10px;padding:0 20px;font-size:13px;color:var(--ink-2);background:var(--veil-1);border-bottom:1px solid var(--border);white-space:nowrap;overflow:hidden}
.verify-bar svg{width:16px;height:16px;flex:none}
.verify-bar span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.verify-bar form{margin:0;flex:none}
.verify-resend{background:none;border:0;color:var(--ink);font-weight:600;font-size:13px;cursor:pointer;text-decoration:underline;padding:0}

/* desktop: no floating hamburger; the sidebar has its own collapse control */
.navtoggle{display:none;position:fixed;top:12px;left:12px;z-index:60;width:40px;height:40px;place-items:center;
  background:var(--surface-2);border:1px solid var(--border);border-radius:10px;color:var(--ink);cursor:pointer}
.navtoggle svg{width:18px;height:18px}
.topbar{padding-left:20px}

/* phones and narrow tablets */
@media(max-width:999px){
  :root{--topbar-h:56px}
  .app,.app.nav-collapsed{grid-template-columns:1fr}
  .sidenav{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);z-index:55;transform:translateX(-100%);transition:transform .2s;display:flex;box-shadow:0 0 60px rgba(0,0,0,.4)}
  .sidenav.open{transform:none}
  .app.nav-collapsed .sidenav{display:flex}
  .side-collapse{display:none}
  .navtoggle{display:grid;top:8px;left:8px}
  .topbar{padding-left:60px;padding-right:12px}
  .topbar-title{font-size:15px}
  .topbar-title .sub{display:none}
  .studio-title{display:none}   /* phones: only the mode dropdown */
  .top-newchat span{display:none}
  .top-newchat{padding:0;width:40px;justify-content:center}
  /* studio modes: a centred dropdown instead of the bar */
  .mode-dd{display:inline-flex;align-items:center;gap:6px;position:absolute;left:50%;transform:translateX(-50%);height:36px;padding:0 10px;border-radius:8px;
    border:1px solid var(--border);background:var(--veil-1);color:var(--ink);font:600 14px var(--sans);cursor:pointer}
  .mode-dd svg{width:14px;height:14px}
  .mode-toolbar{display:none}
  .mode-toolbar.open{display:flex;flex-direction:column;gap:2px;position:absolute;top:calc(var(--topbar-h) - 6px);left:50%;transform:translateX(-50%);
    padding:6px;min-width:200px;background:var(--surface-2);border-color:var(--border-2);box-shadow:0 18px 50px -18px rgba(0,0,0,.6);z-index:30}
  .mode-toolbar.open .mode-btn{width:100%;height:40px;display:flex;justify-content:flex-start;gap:10px;padding:0 10px}
  .mode-toolbar.open .mode-btn>span{display:inline;font-size:14px}
  .mode-btn[data-tip]::after,.mode-tabs .mode-btn[data-tip]::after{display:none}
  .mode-toolbar.lib-filters{display:flex;position:static;transform:none;gap:2px;padding:3px}
  .mode-toolbar.lib-filters .mode-btn{height:32px;padding:0 9px;font-size:12px}
  .topbar-actions{display:none}
  /* chat: composer full width, pinned to the bottom */
  .chat-wrap{padding:0 8px}
  .chat-dock{padding:8px 0 calc(8px + env(safe-area-inset-bottom))}
  .chat-wrap.kosong{padding-bottom:2vh}
  .msg{max-width:88%}
  .cbar{gap:6px}
  .cbar .mp-trigger{max-width:40vw}
  .cbar .chip:not(.ibtn){padding:0 8px}
  .attach-name{display:none !important}
  #attachBtn:has(.attach-name:not(:empty)){width:var(--ctl);padding:0}
  /* studio: results scroll above a pinned composer */
  #view-studio.active{display:flex;flex-direction:column;height:100vh;height:100dvh}
  .canvas{flex:1;min-height:0;padding:8px 8px calc(8px + env(safe-area-inset-bottom));gap:10px;max-width:none}
  .canvas.kosong{justify-content:flex-end;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  .studio-results{flex:1;min-height:0;overflow-y:auto;order:1}
  .studio-top{order:0}
  .studio-composer{order:2;flex:none}
  .canvas.kosong .studio-composer{margin-top:auto}
  .lib-canvas{overflow-y:auto}
  .verify-bar{padding:0 12px 0 60px;font-size:12px}
}
@media(max-width:999px) and (min-height:700px){
  .canvas.kosong{justify-content:center}
  .canvas.kosong .studio-composer{margin-top:0}
}

/* v2 follow-ups after local QA: the old rule that labelled only the active
   studio tab is beaten here (uniform icon buttons), toasts sit above the pinned
   composer on phones, and result tiles keep a gutter from the screen edge. */
.mode-toolbar.mode-tabs .mode-btn.active>span,.mode-toolbar.mode-tabs .mode-btn>span{display:none}
.mode-toolbar.mode-tabs.open .mode-btn>span,.mode-toolbar.mode-tabs.open .mode-btn.active>span{display:inline}
@media(max-width:999px){
  .toast-host{top:calc(var(--topbar-h) + 10px);bottom:auto}
  .studio-results{padding:0 6px}
}

/* v2 layout budget: the main column is a flex stack, so the verify notice takes
   its 40px from the view instead of pushing the composer below the fold. Each
   active view fills the remainder and scrolls inside itself. */
.main{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
.verify-bar{flex:none;flex-wrap:nowrap;height:40px;min-height:40px}
.verify-bar span{flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.verify-bar form{flex:0 0 auto;margin:0}
.view.active{flex:1 1 0;min-height:0;display:flex;flex-direction:column;height:auto}
#view-chat.active,#view-studio.active{height:auto}
.topbar{flex:none}
.canvas{flex:1 1 0;min-height:0;overflow-y:auto;margin:0 auto;width:100%}
.canvas.kosong{overflow:visible}
.lib-canvas{overflow-y:auto}
@media(max-width:999px){
  .verify-bar{padding-left:60px;padding-right:12px;font-size:12px;gap:8px}
  .verify-resend{font-size:12px;white-space:nowrap}
  .canvas{overflow:visible}
  .canvas.kosong{overflow:visible}
}

/* Collapsed sidebar on desktop: the floating expand button sits over the header's
   left edge, so the header and the verify notice make room for it. */
.app.nav-collapsed .topbar{padding-left:64px}
.app.nav-collapsed .verify-bar{padding-left:64px}

/* ═══════════════════════════════════════════════════════════════════════════
   studio polish (14 Sep 2026): one shape system for the app shell.
   8px  controls: buttons, chips, segmented buttons, inputs, menu items
   12px containers: toolbar, popover, menus, tiles, toasts, cards
   16px large surfaces: the two composers and the empty-state card
   50%  the send button. Inter for words and, tracked, for values
   (ratios, seconds, resolutions, counts, credits). Control rows are 32px.
   Tokens live on :root because menus and toasts are appended to <body>.
   ═══════════════════════════════════════════════════════════════════════ */
:root{--r-ctl:8px;--r-box:12px;--r-panel:16px}
.app .btn{border-radius:var(--r-ctl);height:36px;padding:0 14px;font-size:13px}
.app .btn-sm{height:var(--ctl);padding:0 12px;border-radius:var(--r-ctl)}
.app .btn-primary{box-shadow:none}
.mode-toolbar.mode-tabs .mode-btn{border-radius:var(--r-ctl)}
/* large surfaces */
.composer,.studio-composer,.chat-dock .composer{border-radius:var(--r-panel)}
#studioKosong{margin:0}   /* the canvas also carries .kosong for its empty-state layout: never touch its auto margins */
.kosong-kartu{border-radius:var(--r-panel);padding:28px 26px 24px;background:var(--surface-2);border:1px solid var(--border)}
.kosong-kartu svg{width:32px;height:32px;color:var(--ink-2);margin-bottom:10px}
.kosong-kartu h3{font:600 16px/1.3 var(--sans);color:var(--ink);margin:0 0 4px}
.kosong-kartu p{font-size:13px;line-height:1.5;color:var(--ink-2)}
.kosong-aksi{margin-top:14px;gap:8px}
/* containers */
.popover,.toast,.csel-menu,.cs-pop,.am-pop,.acct-menu,.mode-toolbar,.mode-toolbar.open{border-radius:var(--r-box)}
.grid img,.grid>.mp-video,.gen-card,.empty,.lib-card,.aset-item,.lightbox img,.lightbox video{border-radius:var(--r-box)}
.gen-bar{background:var(--veil-2)}
.gen-label,.status{font-size:13px;color:var(--ink-2)}
.status{font-family:var(--sans);line-height:1.4}
.empty{font-size:13px}
.toast{font-size:13px;padding:10px 16px}
/* sub-modes: the same segmented group as the header toolbar, not black pills */
.studio-top{display:flex;flex-direction:column;align-items:center;gap:14px}
.submodes{display:inline-flex;gap:2px;padding:4px;margin:0;border:1px solid var(--border);border-radius:var(--r-box);background:var(--surface)}
.submodes:empty{display:none}
.submode{height:var(--ctl);padding:0 12px;border:1px solid transparent;border-radius:var(--r-ctl);background:transparent;color:var(--ink-2);font:500 13px/1 var(--sans)}
.submode:hover{background:var(--veil-1);color:var(--ink);border-color:transparent}
.submode.active{background:var(--veil-2);border-color:transparent;color:var(--ink);font-weight:600}
/* composer row: every chip is a 32px control; values are data, so mono */
.ringkas-bar{padding:0;gap:6px}
.ringkas-bar .chip,.chip.ringkas{height:var(--ctl);padding:0 10px;border-radius:var(--r-ctl);font:500 12px/1 var(--mono);opacity:1;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--border)}
.ringkas-bar .chip:hover{color:var(--ink);border-color:var(--border-2)}
.mp-trigger,.csel-trigger,.chip-select{height:var(--ctl);padding:0 10px;border-radius:var(--r-ctl);font:500 13px/1 var(--sans)}
/* settings panel: placePopover() measures the room, caps the height (it scrolls)
   or flips it above the composer when there is more room there */
.popover{width:min(380px,calc(100vw - 16px));padding:16px;gap:14px;top:calc(100% + 8px);overscroll-behavior:contain;background:var(--surface-2);border:1px solid var(--border-2)}
.popover.up{top:auto;bottom:calc(100% + 8px);box-shadow:0 -16px 60px -20px rgba(0,0,0,.6)}
.popover .label{margin-bottom:7px}
.seg{gap:6px}
.seg-btn{display:inline-flex;align-items:center;justify-content:center;height:var(--ctl);min-width:var(--ctl);padding:0 11px;border-radius:var(--r-ctl);font:500 12px/1 var(--mono);color:var(--ink-2);background:var(--veil-1);border:1px solid var(--border)}
.seg-btn:hover{background:var(--veil-2);color:var(--ink);border-color:var(--border-2)}
.seg-btn.active{background:var(--accent-bg);border-color:var(--accent);color:var(--ink)}
.seg-aspect .seg-btn{height:auto;min-width:50px;padding:8px 10px 7px;flex-direction:column;gap:5px}
textarea.mini,input.mini{border-radius:var(--r-ctl);background:var(--veil-1);border:1px solid var(--border);padding:8px 10px;color:var(--ink);font:400 13px/1.45 var(--sans)}
textarea.mini{min-height:48px}
textarea.mini:focus,input.mini:focus{outline:none;border-color:var(--veil-5)}
.popover .csel{display:block}
.popover .csel-trigger{width:100%;max-width:none;justify-content:space-between;background:var(--veil-1);border-color:var(--border)}
.popover .csel-trigger:hover{border-color:var(--border-2)}
.csel-opt{border-radius:6px}
.popover .switch{font-size:13px;color:var(--ink-2)}
/* the steps slider: our track and thumb, never the browser's blue */
.popover input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:3px;margin:12px 0 8px;padding:0;border:0;background:var(--veil-3);border-radius:999px;outline:none}
.popover input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--accent);border:2px solid var(--surface-2);box-shadow:0 0 0 1px var(--border-2);cursor:pointer}
.popover input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--accent);border:2px solid var(--surface-2);cursor:pointer}
.popover input[type=range]:focus-visible{outline:2px solid var(--veil-5);outline-offset:6px}
/* file inputs: a real field in our style, not the browser's bare button */
input[type=file].input{display:block;width:100%;height:36px;padding:0 10px 0 0;border:1px dashed var(--border-2);border-radius:var(--r-ctl);background:var(--veil-1);font:400 12.5px/34px var(--sans);color:var(--muted);cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
input[type=file].input::file-selector-button{height:28px;margin:0 10px 0 3px;padding:0 12px;vertical-align:middle;border-radius:6px;border:1px solid var(--border-2);background:var(--surface-2);color:var(--ink);font:500 12px/1 var(--sans);cursor:pointer}
input[type=file].input:hover{border-color:var(--ink-2)}
input[type=file].input:focus-visible{outline:2px solid var(--mist-1);outline-offset:2px}
.uploads{gap:8px;margin-top:10px}
.uploads .field .label{margin-bottom:6px}
/* result tile overlay: the type badge and model name read on any picture */
.lib-ov .badge{background:rgba(0,0,0,.55);color:#fff;border-color:rgba(255,255,255,.28)}
.lib-ov-bot{color:rgba(255,255,255,.92)}
.lib-acts a,.lib-acts button{border-radius:var(--r-ctl)}
/* chat settings: persona and effort use the same dropdown as everything else */
.cs-slot-effort .chip{background:none;border:0;padding:0;gap:8px;font:500 12px/1 var(--sans);color:var(--muted)}
.cs-slot-persona .csel-trigger,.cs-slot-effort .csel-trigger{max-width:200px}
/* admin forms: native <select>, drawn in our style */
select.input{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a89f90' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
select.input:focus{border-color:var(--accent);outline:none}
/* phones: one summary chip, the model trigger takes the remaining width, so the
   control row never wraps out of the composer (video mode had three chips) */
@media(max-width:999px){
  .ringkas-bar{flex-wrap:nowrap;overflow:hidden;padding:0}
  .ringkas-bar .chip:not(:first-child){display:none}
  .cbar .mp-trigger{flex:1 1 auto;min-width:64px;max-width:none}
  .cbar .grow{flex:0 0 0;min-width:0}
  .submodes{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .submodes::-webkit-scrollbar{display:none}
  .submode{white-space:nowrap}
  /* the settings panel becomes a bottom sheet: it never covers the header or the
     prompt, and it scrolls inside a fixed height (placePopover() stands down) */
  #settingsPop.popover,#settingsPop.popover.up{position:fixed;left:8px;right:8px;top:auto;bottom:8px;width:auto;max-width:none;transform:none;
    max-height:min(72vh,calc(100vh - 88px));z-index:60;box-shadow:0 -12px 40px -12px rgba(0,0,0,.7)}
}
/* every menu and dropdown surface names the house face explicitly, so nothing
   appended to <body> or drawn by the browser can fall back to the system font */
.mp-dialog,.mp-search input,.csel-menu,.csel-search,.mode-dd,.mode-toolbar,.acct-menu,.am-pop,.cs-pop,select,option{font-family:var(--sans)}

/* ═══ /start: the ad landing page (14 Sep 2026) ═══════════════════════════
   Same tokens and components as the home page (lp-sect, row2, band, pricing),
   plus a hero with real results, a two-column comparison, three steps, a
   privacy diagram, a gallery, an FAQ and a sticky bar on phones. */
.ad-top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:22px;max-width:1200px;margin:0 auto;padding:18px 24px;
  background:linear-gradient(180deg,var(--bg) 70%,transparent)}
.ad-top .brand{font-size:22px}
.ad-top .ad-go{height:40px;padding:0 18px;font-size:14px;border-radius:var(--r-md)}
.ad-hero{position:relative;max-width:1200px;margin:0 auto;padding:56px 24px 24px;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.ad-hero-text h1{font-family:var(--serif);font-size:clamp(40px,5.4vw,72px);font-weight:400;line-height:1.02;letter-spacing:-.02em;margin-top:22px;text-wrap:balance}
.ad-hero-text h1 em{font-style:italic}
.ad-hero-text p{color:var(--ink-2);font-size:clamp(15px,1.3vw,17.5px);line-height:1.6;max-width:50ch;margin-top:20px}
.ad-cta{justify-content:flex-start;align-items:center;margin-top:30px;gap:18px}
.ad-note{color:var(--muted);font-size:13.5px;line-height:1.45;max-width:26ch}
.ad-badge i{width:6px;height:6px;border-radius:50%;background:var(--mist-1);display:inline-block;margin-right:8px}
.ad-hero-art{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;align-items:stretch}
.ad-clip,.ad-pic{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:var(--basalt-2)}
.ad-clip{aspect-ratio:9/16}
.ad-clip video,.ad-pic img{width:100%;height:100%;object-fit:cover;display:block}
.ad-stack{display:grid;grid-template-rows:1fr 1fr;gap:14px}
.ad-tag{position:absolute;left:12px;bottom:12px;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 10px;backdrop-filter:blur(6px)}
.ad-state{padding-top:96px;padding-bottom:40px}
.ad-state h2{font-size:clamp(34px,5vw,64px);max-width:16ch;margin-inline:auto}
.ad-state h2 em,.lp-sect h2 em,.band h2 em{font-style:italic}
/* comparison */
.ad-cmp{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.ad-col{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--basalt-2)}
.ad-col-h{font-family:var(--serif);font-size:24px;padding:18px 24px;border-bottom:1px solid var(--border);color:var(--ink-2)}
.ad-col.us .ad-col-h{color:var(--ink);background:var(--veil-1)}
.ad-col ul{list-style:none;margin:0;padding:8px 24px 14px}
.ad-col li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--border);font-size:15px;color:var(--ink)}
.ad-col li:last-child{border-bottom:0}
.ad-col li::after{content:"✕";font-size:13px;color:var(--err);flex:none}
.ad-col.us li::after{content:"✓";color:var(--ink)}
.ad-col.other li{color:var(--ink-2)}
/* steps */
.ad-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px;text-align:left}
.ad-step{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--basalt-2);padding:28px 26px 30px;display:flex;flex-direction:column;gap:12px}
.ad-step .n{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ad-step h3{font-family:var(--serif);font-weight:400;font-size:28px;letter-spacing:-.015em}
.ad-step p{color:var(--ink-2);font-size:14.5px;line-height:1.6}
/* product shots + diagram */
.ad-shot{padding:0;background:var(--basalt-1)}
.ad-shot img{width:100%;display:block}
.ad-diagram{display:flex;flex-direction:column;gap:14px}
.ad-dia{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--basalt-2);padding:22px 24px}
.ad-dia.us{border-color:var(--border-2)}
.ad-dia-h{font-family:var(--serif);font-size:19px;color:var(--ink-2);width:100%;margin-bottom:6px}
.ad-dia.us .ad-dia-h{color:var(--ink)}
.ad-dia .chip{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:13.5px;color:var(--ink)}
.ad-dia .chip.bad{color:var(--err);border-color:rgba(224,138,124,.4);background:rgba(224,138,124,.08)}
.ad-dia .chip.good{color:#7cc88c;border-color:rgba(124,200,140,.4);background:rgba(124,200,140,.08)}
.ad-dia .arrow{width:26px;height:1px;background:var(--border-2);position:relative;flex:none}
.ad-dia .arrow::after{content:"";position:absolute;right:-1px;top:-3px;border:3.5px solid transparent;border-left-color:var(--border-2)}
/* gallery */
.ad-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
.ad-gallery .ad-pic{aspect-ratio:7/9}
/* faq */
.ad-faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
.ad-faq h2{font-size:clamp(28px,3.4vw,46px)}
.ad-faq-list{display:flex;flex-direction:column}
.ad-faq details{border-top:1px solid var(--border)}
.ad-faq details:last-child{border-bottom:1px solid var(--border)}
.ad-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-family:var(--serif);font-size:21px;color:var(--ink)}
.ad-faq summary::-webkit-details-marker{display:none}
.ad-faq summary::after{content:"+";font-family:var(--sans);font-size:22px;color:var(--muted);flex:none;transition:transform .15s}
.ad-faq details[open] summary::after{transform:rotate(45deg)}
.ad-faq details p{color:var(--ink-2);font-size:15px;line-height:1.65;padding:0 0 22px;max-width:60ch}
/* final band */
.ad-final .lp-sect{padding-block:90px}
.ad-final-in{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.ad-final h2{font-family:var(--serif);font-size:clamp(34px,5vw,64px);max-width:16ch}
/* sticky bar (phones) */
.ad-sticky{display:none}
@media(max-width:880px){
  .ad-hero{grid-template-columns:1fr;gap:34px;padding-top:28px}
  .ad-hero-art{grid-template-columns:1.1fr .9fr}
  .ad-cta{flex-direction:column;align-items:flex-start}
  .ad-cmp,.ad-steps,.ad-faq{grid-template-columns:1fr}
  .ad-faq{gap:24px}
  .ad-gallery{grid-template-columns:repeat(2,1fr)}
  .ad-top .hdr-link{display:none}
  .ad-sticky{display:flex;align-items:center;justify-content:space-between;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:var(--surface);border-top:1px solid var(--border);transform:translateY(110%);transition:transform .2s}
  .ad-sticky.show{transform:none}
  .ad-sticky span{font-size:13px;color:var(--ink-2)}
  .ad-sticky .ad-go{height:40px;padding:0 16px;font-size:14px;white-space:nowrap}
  .lp-footer{padding-bottom:110px}
}

/* ═══ marketing pages, ornament layer (15 Sep 2026) ═══════════════════════
   The three accent tokens (spring, iris, sulfur) were only used on badges.
   Here they carry the pages: a soft aurora behind the hero, a gradient on
   the italic word of every heading, hairlines and glows on the bands, dots
   on the eyebrows, and the "popular" plan. Everything is theme-aware because
   the tokens themselves change between dark and light. */
.lp-hero,.ad-hero,.band,.lp-footer{position:relative}
.lp-hero::before,.ad-hero::before{content:"";position:absolute;inset:-40px 0 -120px;z-index:-1;pointer-events:none;
  background:
    radial-gradient(52% 46% at 28% 18%, color-mix(in srgb, var(--iris) 16%, transparent), transparent 70%),
    radial-gradient(44% 40% at 74% 26%, color-mix(in srgb, var(--spring) 13%, transparent), transparent 70%),
    radial-gradient(40% 38% at 56% 86%, color-mix(in srgb, var(--sulfur) 11%, transparent), transparent 70%)}
.ad-hero::before{inset:-80px -24px -60px}
/* the italic word in every heading wears the palette */
.lp-hero h1 em,.lp-sect h2 em,.row2 h2 em,.band h2 em,.ad-hero-text h1 em,.ad-final h2 em,.bento .cell.wide h3 em{
  font-style:italic;background:var(--mist);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-right:.04em}
/* hero: model names as one centred strip, not four chips scattered around the headline */
.hero-chips{display:none!important}
.model-strip{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:34px}
.model-strip span{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border:1px solid var(--border);border-radius:999px;
  background:var(--veil-1);font:500 12px var(--mono);letter-spacing:.04em;color:var(--ink-2);white-space:nowrap}
.model-strip span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--spring)}
.model-strip span:nth-child(3n+2)::before{background:var(--iris)}
.model-strip span:nth-child(3n)::before{background:var(--sulfur)}
.model-strip span.more{color:var(--muted);border-style:dashed}
.model-strip span.more::before{display:none}
/* badge chips (used on the home page privacy row and the ad hero) */
.lp-badges{display:flex;flex-wrap:wrap;gap:8px}
.lp-badge{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border:1px solid var(--border);border-radius:999px;
  background:var(--veil-1);font:500 12.5px var(--sans);color:var(--ink-2);white-space:nowrap}
.lp-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--spring);flex:none}
.lp-badge:nth-child(3n+2)::before{background:var(--iris)}
.lp-badge:nth-child(3n)::before{background:var(--sulfur)}
.ad-badge i{display:none}
/* bands: a glow at the top and a spectral hairline on each edge */
.band{overflow:hidden}
.band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(55% 70% at 50% 0%, color-mix(in srgb, var(--iris) 13%, transparent), transparent 70%),
             radial-gradient(35% 50% at 82% 100%, color-mix(in srgb, var(--sulfur) 9%, transparent), transparent 70%)}
.band::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 5%,var(--spring) 35%,var(--iris) 55%,var(--sulfur) 75%,transparent 95%);opacity:.55}
.band>*{position:relative}
/* eyebrow dots per tool, numbers in the palette, the popular plan */
.bento .n{display:inline-flex;align-items:center;gap:8px}
.bento .n::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--spring)}
.bento .cell:nth-child(3n+2) .n::before{background:var(--iris)}
.bento .cell:nth-child(3n) .n::before{background:var(--sulfur)}
.stats .stat b{background:var(--mist);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-right:.06em}
.price-card.pop{border-color:color-mix(in srgb, var(--iris) 45%, var(--border))}
.price-card.pop::before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:1px;background:var(--mist);opacity:.9}
.price-pop{background:var(--mist);color:var(--basalt-0);border:0}
.credit-note b{display:inline-flex;align-items:center;gap:8px}
.credit-note b::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--spring)}
.credit-note div:nth-child(2) b::before{background:var(--iris)}
.credit-note div:nth-child(3) b::before{background:var(--sulfur)}
/* section rhythm: full-width sections carry a centred header */
.lp-sect.center .bento,.lp-sect.center .stats{text-align:left}
/* ad page */
.ad-col.us .ad-col-h{position:relative}
.ad-col.us .ad-col-h::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--mist);opacity:.8}
.ad-col.us li::after{color:var(--spring)}
.ad-step .n{display:inline-flex;align-items:center;gap:8px}
.ad-step .n::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--spring)}
.ad-step:nth-child(2) .n::before{background:var(--iris)}
.ad-step:nth-child(3) .n::before{background:var(--sulfur)}
.ad-shot{display:flex;justify-content:center;align-items:center;padding:30px;min-height:420px;border-radius:18px;
  background:radial-gradient(70% 70% at 30% 20%, color-mix(in srgb, var(--iris) 14%, transparent), transparent 70%),
             radial-gradient(60% 60% at 80% 90%, color-mix(in srgb, var(--spring) 10%, transparent), transparent 70%), var(--basalt-1)}
.ad-shot img{width:auto;max-width:100%;max-height:600px;border-radius:12px;border:1px solid var(--border-2);box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.ad-faq details[open] summary{color:var(--ink)}
.ad-faq details[open] summary::after{color:var(--spring)}
.ad-sticky::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--mist);opacity:.7}
.ad-final h2 em{font-style:italic}
@media(max-width:880px){
  .ad-dia{flex-direction:column;align-items:flex-start;gap:10px}
  .ad-dia .arrow{width:1px;height:18px;margin-left:22px}
  .ad-dia .arrow::after{right:-3px;top:auto;bottom:-1px;border:3.5px solid transparent;border-top-color:var(--border-2);border-left-color:transparent}
  .ad-shot{min-height:0;padding:18px}
  .model-strip{gap:6px}
  .model-strip span{height:28px;padding:0 10px;font-size:11px}
}
:root[data-theme="light"] .lp-hero::before,:root[data-theme="light"] .ad-hero::before{opacity:.75}
/* three plans, three columns, centred: the grid was still cut for four cards,
   which parked the cards in the left three quarters of the section */
.price-grid{grid-template-columns:repeat(3,1fr);max-width:980px;margin-left:auto;margin-right:auto}
@media(max-width:980px){.price-grid{grid-template-columns:1fr;max-width:520px}}

/* ═══ phones: the marketing pages (15 Sep 2026) ══════════════════════════
   One line of announcement, a scrolling model strip, no side panel in the
   hero mock, 40px+ tap targets, nothing under 11px, tighter section rhythm. */
html{-webkit-text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent}
.ad-hero::before{inset:-80px 0 -60px}
@media(max-width:820px){
  .announce{flex-wrap:nowrap;gap:8px;padding:8px 14px;font-size:12px;line-height:1.3}
  .announce .tag{flex:none}
  .announce>span:not(.tag){min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .announce a{display:none}
}
@media(max-width:560px){
  .lp-sect{padding:72px 20px}
  .lp-sect.tight{padding-top:52px}
  .band .lp-sect{padding-block:80px}
  .lp-hero{padding:56px 20px 0}
  .lp-cta .btn{height:48px}
  .model-strip{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding:2px 20px;margin:28px -20px 0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent)}
  .model-strip::-webkit-scrollbar{display:none}
  .mock-side{display:none}
  .mock-tile span{display:none}
  .frame-tab{padding:8px 10px}
  .mock-label,.bento .n,.price-pop,.cmp tr.group th,.credit-note b,.ad-step .n,.ad-tag,.model-strip span.more{font-size:11px}
  .textlink{min-height:44px;margin-top:12px}
  .hdr-link{display:inline-flex;align-items:center;min-height:40px}
  .lp-footer-in{gap:14px 22px}
  .btn-sm{height:40px;padding:0 14px}
  .lang-btn{min-height:40px}
  .bento .cell{padding:22px 20px}
  .stats{gap:10px}.stat b{font-size:34px}
  .price-controls{gap:10px}
  .ad-top{padding:14px 20px}
  .ad-hero{padding:24px 20px 8px;gap:26px}
  .ad-hero-text h1{font-size:clamp(38px,11vw,48px)}
  .ad-cta{gap:12px}
  .ad-state{padding-top:64px}
  .ad-steps{gap:10px}.ad-step{padding:22px 20px 24px}
  .ad-faq summary{font-size:19px;padding:16px 0}
  .ad-final .lp-sect{padding-block:64px}
  .ad-final h2{font-size:clamp(34px,10vw,44px)}
}

/* ═══ one aurora for the whole page (15 Sep 2026) ══════════════════════════
   The hero and band washes were boxes: each pseudo-element ended at its
   section's edge and the glow was cut there on scroll. Now a single layer
   under the whole page carries every glow, placed by page height, so nothing
   has an edge to cut at. Bands keep a translucent veil so the same light
   shows through them. */
.lp-hero::before,.ad-hero::before{content:none}
.page-wrap.bare{position:relative;isolation:isolate}
.page-wrap.bare::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 14% at 26% 3%,  color-mix(in srgb, var(--iris) 17%, transparent), transparent 70%),
    radial-gradient(48% 12% at 76% 6%,  color-mix(in srgb, var(--spring) 14%, transparent), transparent 70%),
    radial-gradient(44% 10% at 58% 15%, color-mix(in srgb, var(--sulfur) 10%, transparent), transparent 70%),
    radial-gradient(56% 11% at 18% 38%, color-mix(in srgb, var(--spring) 9%, transparent), transparent 70%),
    radial-gradient(52% 11% at 84% 56%, color-mix(in srgb, var(--iris) 10%, transparent), transparent 70%),
    radial-gradient(60% 10% at 40% 74%, color-mix(in srgb, var(--sulfur) 8%, transparent), transparent 70%),
    radial-gradient(56% 12% at 62% 93%, color-mix(in srgb, var(--iris) 9%, transparent), transparent 70%)}
.band{background:color-mix(in srgb, var(--basalt-1) 55%, transparent)}
.band::before{background:radial-gradient(55% 90% at 50% 0%, color-mix(in srgb, var(--iris) 10%, transparent), transparent 70%)}
:root[data-theme="light"] .page-wrap.bare::before{opacity:.8}
:root[data-theme="light"] .band{background:color-mix(in srgb, var(--surface-2) 45%, transparent)}
:root[data-theme="light"] .band::before{background:radial-gradient(55% 60% at 50% 0%, color-mix(in srgb, var(--iris) 7%, transparent), transparent 70%)}
/* /start header: frosted like the site nav, not a solid band with a fade */
.ad-top{padding:14px 24px;background:color-mix(in srgb, var(--bg) 72%, transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.ad-top .brand{font-size:21px}
.ad-top{height:68px;padding:0 24px;box-sizing:border-box}
.ad-top .ad-go{height:40px;line-height:1}
/* the eyebrow in the credit notes is a line of its own, not inline with the sentence */
.credit-note b{display:flex;margin-bottom:8px}

/* ═══ header blends with the page (15 Sep 2026) ═══════════════════════════
   The aurora lived on the content wrap, so the announcement bar and nav above
   it sat on flat black: a visible seam at the header's bottom edge. The layer
   now covers the whole body on the marketing pages, the nav is transparent at
   rest, and the /start header only frosts once the page has scrolled. */
body:has(.page-wrap.bare){position:relative;isolation:isolate}
body:has(.page-wrap.bare)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 14% at 26% 3%,  color-mix(in srgb, var(--iris) 17%, transparent), transparent 70%),
    radial-gradient(48% 12% at 76% 6%,  color-mix(in srgb, var(--spring) 14%, transparent), transparent 70%),
    radial-gradient(44% 10% at 58% 15%, color-mix(in srgb, var(--sulfur) 10%, transparent), transparent 70%),
    radial-gradient(56% 11% at 18% 38%, color-mix(in srgb, var(--spring) 9%, transparent), transparent 70%),
    radial-gradient(52% 11% at 84% 56%, color-mix(in srgb, var(--iris) 10%, transparent), transparent 70%),
    radial-gradient(60% 10% at 40% 74%, color-mix(in srgb, var(--sulfur) 8%, transparent), transparent 70%),
    radial-gradient(56% 12% at 62% 93%, color-mix(in srgb, var(--iris) 9%, transparent), transparent 70%)}
body:has(.page-wrap.bare) .page-wrap.bare::before{content:none}
body:has(.page-wrap.bare) .page-nav{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent}
body:has(.page-wrap.bare) .announce{background:color-mix(in srgb, var(--basalt-2) 55%, transparent);border-bottom-color:var(--veil-2)}
.ad-top{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent;transition:background-color .2s,border-color .2s}
.ad-top.scrolled{background:color-mix(in srgb, var(--bg) 72%, transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--border)}
:root[data-theme="light"] body:has(.page-wrap.bare)::before{opacity:.8}

/* ═══ app polish pass 2 (15 Sep 2026) ══════════════════════════════════════
   larger result tiles, a closable settings sheet on phones, an inline
   dismissible verify notice, message actions you can actually hit, utility
   pages without the sales chrome, video tiles with a glyph, focus rings. */
.grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
/* Empty library: an icon tile, a title, one line of context, then the button
   with 22px of air above it. The old version put the button 14px under a
   single sentence, which read as one cramped block. */
.lib-grid .empty,.grid .empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:72px 24px 76px;text-align:center}
.lib-grid .empty .empty-ic,.grid .empty .empty-ic{width:44px;height:44px;border-radius:12px;border:1px solid var(--border-2);background:var(--veil-1);display:grid;place-items:center;color:var(--ink-2);margin-bottom:18px}
.lib-grid .empty .empty-ic svg,.grid .empty .empty-ic svg{width:20px;height:20px}
.lib-grid .empty h3,.grid .empty h3{margin:0 0 6px;font:600 15px/1.3 var(--sans);color:var(--ink);letter-spacing:-.01em}
.lib-grid .empty p,.grid .empty p{margin:0 0 22px;max-width:38ch;font-size:13.5px;line-height:1.55;color:var(--muted)}
.pop-done{display:none;margin-top:4px}
@media(max-width:999px){
  .pop-done{display:inline-flex}
  #settingsPop.popover::before{content:"";display:block;width:36px;height:4px;border-radius:2px;background:var(--veil-4);margin:-4px auto 10px}
}
.verify-bar{position:relative;justify-content:flex-start;padding-right:44px}
.verify-bar .verify-resend{margin-left:auto}
.verify-dismiss{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:28px;height:28px;display:grid;place-items:center;border:0;background:none;color:var(--muted);border-radius:6px;cursor:pointer}
.verify-dismiss svg{width:14px;height:14px}
.verify-dismiss:hover{background:var(--veil-2);color:var(--ink)}
.msg-actions{gap:4px;margin-top:8px}
.ma{width:28px;height:28px;display:inline-grid;place-items:center;font-size:14px;border-radius:6px;color:var(--muted)}
.ma:hover{color:var(--ink);background:var(--veil-2);border-color:transparent}
.lib-card.video{position:relative}
.lib-card.video::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/18px no-repeat;border:1px solid rgba(255,255,255,.25)}
.lib-card.video:hover::after{opacity:.9}
body.utility .announce,body.utility .nav-menu{display:none}
body.utility .page-nav{position:static;background:transparent;backdrop-filter:none}
/* keyboard focus is visible on every control in the shell */
.app :is(button,a,[role=button],[tabindex]):focus-visible,.mp-overlay :is(button,input):focus-visible,.cs-pop :is(button,input):focus-visible{outline:2px solid var(--spring);outline-offset:2px;border-radius:8px}
.app :is(input,textarea,select):focus-visible{outline:2px solid var(--spring);outline-offset:1px}

/* the phone sheet is solid: a translucent surface let the compose bar show through the controls */
@media(max-width:999px){ #settingsPop.popover,#settingsPop.popover.up{background:var(--basalt-1);backdrop-filter:none;-webkit-backdrop-filter:none} }

/* ═══ polish pass 4 (15 Sep 2026): utility pages on phones ═══════════════
   The signed-in header kept six controls on one row and overflowed the phone
   screen. Now the brand keeps its row (with the language switch), and the
   account buttons wrap underneath. Theme cards become rows so no card is left
   alone on a second line. */
@media(max-width:640px){
  body.utility .page-nav{position:relative;grid-template-columns:1fr;gap:12px;padding:14px 16px}
  body.utility .nav-right{justify-self:stretch;flex-wrap:wrap;justify-content:flex-start;gap:8px}
  body.utility .nav-right .hdr-link{display:none}
  body.utility .nav-right .lang-btn{position:absolute;right:16px;top:11px}
  body.utility .page-wrap{padding:36px 20px 64px}
  .tema-grid{grid-template-columns:1fr}
  .tema-opt{display:grid;grid-template-columns:96px 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:2px;align-items:center}
  .tema-prev{grid-row:1/3;height:56px}
  .tema-nama{grid-column:2;align-self:end;margin-top:0}
  .tema-ket{grid-column:2;align-self:start}
}
/* the promo field uppercases what you type, not its placeholder */
#couponCode::placeholder{text-transform:none}

/* ═══ polish pass 8 (15 Sep 2026): from the 53-state pixel audit ═══════════ */
/* the settings panel is a solid raised surface on every screen size: an 85%
   surface let the result cards show through the controls on desktop */
#settingsPop.popover{background:var(--basalt-2)}
/* text boxes: the composer border already shows focus, so the inner box keeps
   no ring; other text inputs get a quiet one. Buttons keep the spring ring. */
.app .composer :is(textarea,input):focus-visible{outline:none}
.app :is(input,textarea,select):focus-visible,.mp-overlay input:focus-visible,.cs-pop input:focus-visible{outline:1px solid var(--veil-5);outline-offset:2px}
/* empty studio: the composer sits higher so the panel under it has room on a 900px screen */
.canvas.kosong{padding-bottom:24vh}
/* the verify notice takes 40px above the topbar; without this the canvas was 40px taller than the screen and centred the composer too low */
body:has(.verify-bar) .canvas{min-height:calc(100vh - var(--topbar-h) - 40px);min-height:calc(100dvh - var(--topbar-h) - 40px)}
/* panel rhythm: 12px between sections, tighter aspect tiles, 44px mini boxes */
#settingsPop.popover{gap:12px}
.seg-aspect .seg-btn{padding:4px 9px 3px;gap:4px;min-width:48px}
.popover textarea.mini{min-height:36px}
#settingsPop .label{margin-bottom:5px}
#settingsPop.popover{padding:14px 16px}
/* sidebar brand on the topbar centre line: 12px inset + 40px row = 32px, like the 64px bar */
.side-top{height:40px;margin-bottom:16px}
/* phone drawer: the fixed menu button covers the top-left corner, the brand moves right of it */
@media(max-width:999px){ .sidenav.open .side-top{padding-left:52px} }
/* house file control (see enhanceFilePickers in app.js) */
.fp-native{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:0!important;opacity:0;pointer-events:none;border:0!important}
.field{position:relative}
.filepick{display:flex;align-items:center;gap:10px;min-height:36px;padding:3px;border:1px dashed var(--border-2);border-radius:var(--r-ctl);background:var(--veil-1);cursor:pointer;font:400 12.5px var(--sans);color:var(--muted);transition:border-color .12s}
.filepick:hover{border-color:var(--ink-2)}
.filepick:focus-visible{outline:2px solid var(--spring);outline-offset:2px}
.filepick .fp-btn{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:6px;border:1px solid var(--border-2);background:var(--surface-2);color:var(--ink);font-weight:500;white-space:nowrap;flex:none}
.filepick .fp-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filepick.has .fp-name{color:var(--ink)}
.filepick .fp-thumb{width:28px;height:28px;border-radius:6px;background:center/cover no-repeat var(--surface-3);border:1px solid var(--border-2);flex:none;margin-right:1px}

/* ═══ polish pass 9 (15 Sep 2026): brand type only ══════════════════════════
   JetBrains Mono retired. Values and counters keep equal-width digits so
   columns of prices and credits still line up; code keeps a monospace stack. */
body{font-variant-numeric:tabular-nums}
.codeblock pre,.md pre,.md pre code{font-family:var(--code);font-variant-numeric:normal}

/* ═══ ad landing page, pass 2 (15 Sep 2026): proof, architecture, captions ═══ */
.ad-note{display:flex;flex-direction:column;gap:3px;font-size:13.5px;line-height:1.4;color:var(--muted)}
.ad-note b{color:var(--ink);font-weight:500}
.ad-cap{position:absolute;left:10px;right:10px;bottom:10px;display:flex;flex-direction:column;gap:2px;padding:7px 10px;border-radius:8px;
  background:rgba(0,0,0,.58);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-size:12px;line-height:1.35;text-align:left}
.ad-cap-p{color:rgba(255,255,255,.92)}
.ad-cap-m{color:rgba(255,255,255,.62);font-size:11.5px}
.ad-fig{margin:0}
.ad-tag{display:none}
.ad-proof{padding-top:8px}
.ad-proof-h{font-size:clamp(22px,2.6vw,30px)}
.ad-proof .model-strip{margin-top:22px}
.ad-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:960px;margin:30px auto 0}
.ad-num{padding:18px 16px;border:1px solid var(--border);border-radius:var(--r-box);background:var(--veil-1);text-align:center}
.ad-num b{display:block;font:500 34px/1 var(--serif);letter-spacing:-.01em;background:var(--mist);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding:0 .04em 6px}
.ad-num span{display:block;font-size:12.5px;line-height:1.4;color:var(--muted)}
.ad-founder{max-width:680px;margin:30px auto 0;padding:22px 24px;border:1px solid var(--border);border-radius:var(--r-panel);background:var(--veil-1);text-align:left}
.ad-founder-k{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.ad-founder p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.ad-founder-sign{margin-top:12px;font:italic 500 15px var(--serif);color:var(--ink)}
.ad-free-cap{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted);text-align:center}
.ad-trust{margin:18px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted);text-align:center}
.ad-trust a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.ad-sticky span{font-size:13px;color:var(--ink-2)}
@media(max-width:880px){
  .ad-nums{grid-template-columns:repeat(2,1fr);gap:10px}
  .ad-num b{font-size:28px}
  .ad-founder{padding:18px}
}
/* hero note beside the button gets room; captions wrap instead of clipping */
.ad-cta{align-items:center;gap:18px;flex-wrap:wrap}
.ad-note{flex:1 1 260px;max-width:360px}
.ad-cap,.ad-cap *{white-space:normal;word-break:normal}
/* on phones the CTA stacks, so the note keeps its natural height (flex-basis is vertical there) */
@media(max-width:640px){ .ad-cta{flex-direction:column;align-items:center} .ad-note{flex:0 0 auto;max-width:none;text-align:center} }
/* the 30-second tour in the steps band: a poster with one play button, controls appear once it plays */
.ad-tour{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:center;max-width:1040px;margin:44px auto 0;text-align:left}
.ad-tour-text h3{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.01em;margin:0 0 10px}
.ad-tour-text p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2);max-width:40ch}
.ad-tour-frame{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--border-2);background:var(--basalt-1);box-shadow:0 30px 80px -30px rgba(0,0,0,.8);aspect-ratio:16/9}
.ad-tour-frame video{display:block;width:100%;height:100%;object-fit:cover}
.ad-tour-play{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:10px;border:0;background:rgba(0,0,0,.28);color:#fff;cursor:pointer;font:600 15px var(--sans);transition:background .15s}
.ad-tour-play:hover{background:rgba(0,0,0,.42)}
.ad-tour-play svg{width:22px;height:22px;padding:14px;box-sizing:content-box;border-radius:50%;background:#fff;color:#000}
.ad-tour-play[hidden]{display:none}
@media(max-width:880px){ .ad-tour{grid-template-columns:1fr;gap:16px;text-align:center} .ad-tour-text p{max-width:none} }

/* ═══ proof ledger (15 Sep 2026) ═══════════════════════════════════════════
   No stat cards. One hairline-framed row: the unit as a small eyebrow, the
   figure as a lining Inter numeral, one line of context. The only colour sits
   on the zero, the number that carries the privacy claim. The home page
   .stats rows share the treatment. */
.ad-proof{padding-top:104px}
.ad-proof .model-strip{margin-top:28px}
.ad-nums,.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:1040px;margin:52px auto 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);text-align:left}
.ad-num,.stats .stat{padding:28px 30px 30px;border:0;border-left:1px solid var(--border);border-radius:0;background:none;text-align:left}
.ad-num:first-child,.stats .stat:first-child{border-left:0}
.ad-num-k{display:block;font:500 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.ad-num b,.stats .stat b{display:block;font:600 46px/1 var(--sans);letter-spacing:-.035em;font-variant-numeric:lining-nums tabular-nums;color:var(--ink);background:none;-webkit-text-fill-color:currentColor;padding:0;margin:0 0 12px}
.ad-num.zero b{background:var(--mist);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-right:.06em}
.ad-num-d,.stats .stat span{display:block;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.stats .stat b[style]{font-size:19px;line-height:1.3;margin-bottom:8px}
.ad-founder{max-width:660px;margin:56px auto 0;padding:2px 0 2px 26px;border:0;border-left:1px solid var(--border-2);border-radius:0;background:none;text-align:left}
.ad-founder-k{font:500 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.ad-founder p{margin:0;font:italic 400 21px/1.5 var(--serif);letter-spacing:-.005em;color:var(--ink)}
.ad-founder-sign{margin-top:16px;font:500 13px var(--sans);letter-spacing:.02em;color:var(--muted)}
/* pricing: the notes, the table and the trust line align with the 980px card row */
.credit-note,.cmp-wrap,.ad-trust,#pricing>.hint{max-width:980px;margin-left:auto;margin-right:auto}
.cmp-all{margin:0;padding:16px 18px 18px;font-size:13px;line-height:1.55;color:var(--muted);text-align:left;border-top:1px solid var(--border)}
@media(max-width:880px){
  .ad-proof{padding-top:64px}
  .ad-nums,.stats{grid-template-columns:repeat(2,1fr)}
  .ad-num:nth-child(3),.stats .stat:nth-child(3){border-left:0}
  .ad-num:nth-child(n+3),.stats .stat:nth-child(n+3){border-top:1px solid var(--border)}
  .ad-num,.stats .stat{padding:20px 18px 22px}
  .ad-num b,.stats .stat b{font-size:36px}
  .ad-founder{margin-top:40px;padding-left:18px}
  .ad-founder p{font-size:18px}
}
/* the sticky bar is opaque enough that the section behind it never reads through */
.ad-sticky{background:rgba(6,7,8,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.stats .stat.zero b{background:var(--mist);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-right:.06em}

/* ═══ studio, pass 3 (15 Sep 2026): labeled modes, prompt card, suggestions ═══ */
@media(min-width:1000px){
  /* the labeled tabs sit centred in a pill group the same height as the pills plus 4px of air */
  #modeToolbar.mode-tabs{height:auto;padding:4px;gap:2px;display:flex;align-items:center;border-radius:999px}
  #modeToolbar.mode-tabs .mode-btn span{display:inline;font-size:13px;font-weight:500;letter-spacing:-.005em}
  #modeToolbar.mode-tabs .mode-btn{width:auto;height:36px;padding:0 14px 0 11px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:999px}   /* no place-items here: that shorthand resets align-items */
  #modeToolbar.mode-tabs .mode-btn.active{background:var(--accent);color:var(--on-accent)}
  #modeToolbar.mode-tabs .mode-btn[data-tip]::after,#modeToolbar.mode-tabs .mode-btn[data-tip]:hover::after{display:none}
}
.studio-composer{position:relative;isolation:isolate;border-radius:20px;padding:16px 16px 14px;
  background:linear-gradient(180deg,var(--veil-2),var(--veil-1)),var(--surface-2);border:1px solid var(--border-2);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04);transition:border-color .15s,box-shadow .15s}
.studio-composer:focus-within{border-color:color-mix(in srgb,var(--spring) 45%,var(--border-2));box-shadow:0 0 0 4px color-mix(in srgb,var(--spring) 9%,transparent),0 30px 80px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04)}
.studio-composer textarea{font-size:17px;line-height:1.5;min-height:60px;padding:4px 4px 2px}
.canvas.kosong .studio-composer::before{content:"";position:absolute;inset:-90px -110px;z-index:-1;pointer-events:none;
  background:radial-gradient(52% 58% at 50% 48%,color-mix(in srgb,var(--iris) 13%,transparent),transparent 72%)}
.composer .send{width:36px;height:36px}
.composer .send svg{width:16px;height:16px}
.sugs{display:none;flex-wrap:wrap;justify-content:center;gap:8px;margin:14px auto 0;max-width:760px}
.canvas.kosong .sugs{display:flex}
.sug{display:inline-flex;align-items:center;height:32px;padding:0 13px;border:1px solid var(--border);border-radius:999px;background:var(--veil-1);color:var(--ink-2);font:400 13px var(--sans);cursor:pointer;max-width:100%;transition:border-color .12s,color .12s,background .12s}
.sug::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--spring);margin-right:9px;flex:none}
.sug:nth-child(3n+2)::before{background:var(--iris)}
.sug:nth-child(3n)::before{background:var(--sulfur)}
.sug:hover{color:var(--ink);border-color:var(--border-2);background:var(--veil-2)}
.sug:focus-visible{outline:2px solid var(--spring);outline-offset:2px}
@media(max-width:999px){ .sugs{order:3;gap:6px;margin-top:10px} .sug{height:30px;font-size:12.5px;padding:0 11px} }


/* ad page header: language switch as a quiet pill; the copy reloads in the chosen language */
.ad-lang{position:relative;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 30px 0 12px;border:1px solid var(--border);border-radius:999px;background:var(--veil-1);color:var(--ink-2);font:500 13px var(--sans);cursor:pointer;margin-right:6px}
.ad-lang:hover{border-color:var(--border-2);color:var(--ink)}
.ad-lang svg{width:15px;height:15px;flex:none}
.ad-lang select{appearance:none;-webkit-appearance:none;background:none;border:0;color:inherit;font:inherit;padding:0;margin:0;cursor:pointer;outline:none;max-width:150px}
.ad-lang select option{color:#111;background:#fff}
.ad-lang::after{content:"";position:absolute;right:12px;top:50%;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg);opacity:.7}
.ad-lang:focus-within{border-color:color-mix(in srgb,var(--spring) 45%,var(--border-2))}
@media(max-width:640px){ .ad-lang{padding:0 26px 0 10px;height:32px} .ad-lang select{max-width:96px;font-size:12.5px} }

/* ═══ freedom section facts (15 Sep 2026): the privacy facts live under the freedom copy, one hairline list, no boxes ═══ */
.ad-facts{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--border)}
.ad-facts li{display:flex;gap:12px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--border)}
.ad-facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--spring);flex:none;margin-top:8px}
.ad-facts li:nth-child(2)::before{background:var(--iris)}
.ad-facts li:nth-child(3)::before{background:var(--sulfur)}
.ad-facts b{display:block;font-size:15px;font-weight:600;line-height:1.45;color:var(--ink);letter-spacing:-.005em;margin-bottom:3px}
.ad-facts span{display:block;font-size:14px;line-height:1.55;color:var(--ink-2)}
@media(max-width:640px){ .ad-facts{margin-top:22px} .ad-facts li{padding:14px 0} }

/* chat list: a chat whose reply is still streaming carries a breathing dot */
.chat-row.busy .t{display:flex;align-items:center;gap:8px}
.chat-row.busy .t::after{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--spring);animation:breathe 1.4s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){ .chat-row.busy .t::after{animation:none} }

/* ═══ model picker pass 2 (15 Sep 2026): one ring on the search pill, boxless header icons,
   two-line rows with traits as words (colour carries the meaning, no pills) ═══ */
.mp-search input:focus-visible{outline:none}
.mp-head{gap:4px;padding:10px 10px 10px 12px}
.mp-ico{border-color:transparent;background:transparent;color:var(--muted);border-radius:8px}
.mp-ico:hover{background:var(--veil-2);color:var(--ink)}
.mp-ico.on{background:var(--veil-3);border-color:transparent;color:var(--ink)}
.mp-row{gap:12px;padding:8px 10px}
.mp-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.mp-nama{font:500 14px/1.25 var(--sans)}
.mp-badges{flex:none;display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 12px/1.3 var(--sans);color:var(--muted);letter-spacing:.01em}
.mp-badge{display:inline;padding:0;border:0;background:none;border-radius:0;font:inherit;letter-spacing:inherit;color:var(--muted)}
.mp-badge+.mp-badge::before{content:"\00b7";margin:0 7px;color:var(--dim)}
.mp-b-unc{color:var(--sulfur)} .mp-b-priv,.mp-b-e2ee{color:var(--spring)} .mp-b-anon{color:var(--iris)} .mp-b-cap{color:var(--muted)} .mp-b-free{color:var(--ok)}
.mp-biaya{font:500 12px/1 var(--sans);color:var(--dim)}

/* Baris pertama: nama dan lencana bersebelahan. Baris kedua: spesifikasi yang
   diambil dari katalog - durasi, resolusi, konteks. Pemakai memilih model video
   berdasarkan berapa detik dan resolusi berapa yang bisa dihasilkannya, dan
   sebelum ini keduanya baru terlihat SESUDAH model dipilih. */
.mp-baris1{display:flex;align-items:baseline;gap:9px;min-width:0}
/* Keterangan model: prosa, jadi huruf sans dan warna yang lebih terang
   daripada baris spesifikasi di bawahnya. Keduanya sengaja dibedakan -
   yang satu dibaca, yang satu dipindai. */
.mp-desc{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:400 12px/1.4 var(--sans);color:var(--ink-2);letter-spacing:.005em}
.mp-spek{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:500 11.5px/1.35 var(--mono);color:var(--dim);letter-spacing:.01em}
.mp-spek span+span::before{content:"\00b7";margin:0 7px;color:var(--veil-5)}
.mp-b-mode{color:var(--ink-2);font-weight:600}
.mp-foot{font:500 11px/1 var(--sans)}
@media (max-width:560px){ .mp-badges{display:block} }

/* attach: icon-only until a file is chosen, then icon + name on one line */
#attachBtn:has(.attach-name:not(:empty)){display:inline-flex;align-items:center;gap:6px;width:auto;padding:0 10px}

/* ═══ ad page: hero art for a landscape clip (16 Sep 2026). The 30 s studio clip is 16:9, so it gets
   the full width of the art column and the two stills sit under it, instead of a 9:16 crop that cut heads. ═══ */
.ad-hero-art{grid-template-columns:1fr;gap:14px;align-items:start}
.ad-clip{aspect-ratio:16/9}
.ad-stack{grid-template-rows:none;grid-template-columns:1fr 1fr;gap:14px}
.ad-stack .ad-pic{aspect-ratio:4/5}
@media(max-width:640px){ .ad-hero-art{gap:10px} .ad-stack{gap:10px} .ad-clip,.ad-pic{border-radius:12px} }
/* compare table: the scroll wrapper must not grow with its content, and on phones the four columns fit the width */
.cmp-wrap{max-width:100%;min-width:0}
@media(max-width:640px){
  .cmp{min-width:0;font-size:12.5px}
  .cmp th,.cmp td{padding:11px 8px}
  .cmp thead th{font-size:12.5px}
  .cmp tbody th{padding-left:12px}
  .cmp-all{padding:12px 12px 14px}
}

/* ad page header on phones (16 Sep 2026): brand, language pill and button must add up to less than the screen */
@media(max-width:640px){
  .ad-top{padding:0 16px;gap:10px}
  .ad-top .brand{font-size:19px;min-width:0}
  .ad-top .ad-lang{padding:0 24px 0 10px;margin-right:0}
  .ad-top .ad-lang select{max-width:34px;font-size:12.5px}
  .ad-top .ad-go{height:36px;padding:0 12px;font-size:13px;white-space:nowrap}
  .ad-sticky span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ad-sticky .ad-go{flex:none}
}

/* ═══ mobile native pass (16 Sep 2026): touch targets, 16px inputs, hover fallbacks, safe areas, phone nav ═══ */
html{-webkit-text-size-adjust:100%}
.nav-open{display:none}
@media(max-width:640px){
  /* signed-in visitors on the public pages: one button into the app; billing, settings and logout live inside it */
  .page-nav .nav-right .hdr-link,.page-nav .nav-right .btn-ghost{display:none}
  .page-nav .nav-right .nav-open{display:inline-flex}
  .cbar .chip,.chip,.composer .chip,.cbar .mp-trigger,.mp-trig-label,.submode,.newchat{font-size:12.5px}
  .mp-badges,.mp-badge,.mp-biaya{font-size:12px}
  .mp-dialog{padding-bottom:env(safe-area-inset-bottom)}
  .sidenav{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
}
@media(pointer:coarse){
  a,button,[role=button],summary,label,select,.chip,.mode-btn,.nav-item,.chat-row{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .btn{min-height:40px}
  .btn-sm{min-height:36px}
  .send,.composer .send{width:40px;height:40px}
  .chip,.ibtn,.newchat,.submode,.mp-ico,.cbar .mp-trigger,.csel-trigger,.chip-select,.lang-btn{min-height:38px}
  .ibtn,.mp-ico,.lang-btn{min-width:38px}
  .mode-btn{min-height:36px}
  .mp-tab{padding-top:10px;padding-bottom:10px}
  .mp-row{min-height:52px}
  /* small icons keep their look; the tappable area grows around them */
  .mp-fav,.ma,.chat-row .x,.cs-kunci,.cs-toggle{position:relative}
  .mp-fav::after,.ma::after,.chat-row .x::after,.cs-kunci::after{content:"";position:absolute;inset:-8px}
  .cs-toggle::after{content:"";position:absolute;inset:-10px -12px}
  /* there is no hover on a phone: controls that hover reveals stay visible */
  .chat-row .x{opacity:.6}
  .msg-actions{opacity:.75}
  .lp-footer a,.lp-footer .hdr-link,.ad-trust a{display:inline-block;padding:8px 6px;margin:-8px -2px}
  /* iOS zooms into any field under 16px */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),textarea,select,.input,.mp-search input,#librarySearch{font-size:16px}
  .ad-top .ad-lang select{font-size:16px;max-width:36px}
}

/* touch targets over dashboard.css (16 Sep 2026): body.dashboard adds the point of specificity Codex's rules lack */
@media(pointer:coarse){
  body.dashboard .cbar .send,body.dashboard .composer .send{width:40px;height:40px}
  body.dashboard #modeToolbar.mode-tabs .mode-btn{height:36px;min-height:36px}
  body.dashboard .submode{height:36px;min-height:36px}
  body.dashboard #view-library .lib-filters .mode-btn{height:36px;min-height:36px}
  .cs-reset{position:relative}
  .cs-reset::after{content:"";position:absolute;inset:-10px -8px}
  input[type=checkbox],input[type=radio]{width:20px;height:20px}
}

/* narrow chips (16 Sep 2026): aspect chips like 1:1 and the sidebar + New get a thumb-wide minimum */
@media(pointer:coarse){ .cbar .chip,.chip{min-width:36px;justify-content:center} #newChat.newchat{min-width:36px} }

/* live phone fixes (16 Sep 2026): verify bar clears the nav toggle, picker header fits Codex's narrow card, library icons thumb-sized */
@media(max-width:640px){
  .dashboard .verify-bar{padding-left:60px}
  .mp-search{min-width:0}
  .mp-search input{min-width:0;width:100%}
}
@media(pointer:coarse){
  .verify-dismiss{width:36px;height:36px}
  .lib-acts .dl,.lib-acts .del{width:36px;height:36px;display:inline-grid;place-items:center}
}

/* verify bar clears the toggle, stronger than dashboard.css (16 Sep 2026) */
@media(max-width:640px){ body.dashboard .verify-bar,body.dashboard .main .verify-bar{padding-left:60px} }

/* ad page language menu (16 Sep 2026): the studio's own list under the pill, eight languages, no browser select */
.ad-lang-wrap{position:relative;margin-right:6px}
.ad-lang{appearance:none;-webkit-appearance:none;margin:0;font-family:var(--sans);line-height:1}
.ad-lang:hover{border-color:var(--border-2);color:var(--ink)}
.ad-lang[aria-expanded="true"]{border-color:color-mix(in srgb,var(--spring) 45%,var(--border-2));color:var(--ink)}
.ad-lang-code{display:none}
.ad-lang-menu{position:absolute;top:calc(100% + 8px);right:0;left:auto;min-width:210px;z-index:80}
.ad-lang-menu .lang-item{padding:10px 12px;font-size:13.5px}
.ad-lang-menu .lang-item:lang(ja){font-family:var(--sans)}
@media(max-width:640px){
  .ad-lang-name{display:none}
  .ad-lang-code{display:inline;font-size:12.5px;letter-spacing:.04em}
  .ad-top .ad-lang{padding:0 24px 0 10px}
  .ad-lang-menu{min-width:200px}
}

/* japanese display text (16 Sep 2026): Playfair has no kana, so the fallback is a named serif and the latin tracking is lifted */
:lang(ja) .ad-hero-text h1,:lang(ja) .lp-sect h2,:lang(ja) .ad-state h2,:lang(ja) .band h2,:lang(ja) .ad-final h2,:lang(ja) .ad-founder p,:lang(ja) .ad-faq summary,:lang(ja) .ad-col-h,:lang(ja) .ad-step h3,:lang(ja) .ad-tour-text h3{font-family:var(--serif),"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP","Source Han Serif JP",serif;letter-spacing:0;line-height:1.28}
:lang(ja) .ad-hero-text h1{font-size:clamp(34px,4.6vw,60px)}
:lang(ja) body,:lang(ja) .ad-lang-menu .lang-item{font-family:var(--sans),"Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif}

/* ═══ price rail on phones (16 Sep 2026): the three cards become a swipe rail with scroll snap, opening on the popular plan ═══ */
.price-dots{display:none}
@media(max-width:640px){
  .price-grid{display:flex;grid-template-columns:none;max-width:none;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    padding:14px 20px 6px;margin:22px -20px 0;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;position:relative;-webkit-overflow-scrolling:touch}
  .price-grid::-webkit-scrollbar{display:none}
  .price-card{flex:0 0 min(82vw,320px);scroll-snap-align:center;scroll-snap-stop:always}
  .price-dots{display:flex;justify-content:center;gap:6px;margin-top:10px}
  .price-dot{width:24px;height:24px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .price-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--veil-4);transition:transform .2s,background .2s}
  .price-dot.on::before{background:var(--ink);transform:scale(1.3)}
}

/* price rail: edge cards centre too (16 Sep 2026): side padding = half the free width, so the first and last card snap to the middle */
@media(max-width:640px){ .price-grid{padding-left:calc((100vw - min(82vw,320px)) / 2);padding-right:calc((100vw - min(82vw,320px)) / 2);scroll-padding-inline:calc((100vw - min(82vw,320px)) / 2)} }

/* brand in the ad header and footers (16 Sep 2026): the sidebar brand clears the nav toggle with a 66px left pad and a deep
   bottom pad; here there is no toggle, so the wordmark sits flush left and on the header's centre line */
.ad-top .brand,.lp-footer .brand,.ad-final .brand{padding:0;min-height:0;line-height:1}

/* phone header padding matches the content edge (16 Sep 2026); the wordmark no longer needs the room */
@media(max-width:640px){ .ad-top{padding:0 20px} }

/* ═══ coded illustrations (16 Sep 2026): the model picker and the prompt stack, drawn with markup instead of screenshots ═══ */
.ill{position:relative;border:1px solid var(--border);border-radius:18px;background:linear-gradient(180deg,var(--basalt-2),var(--bg) 92%);padding:16px;overflow:hidden;text-align:left;box-shadow:0 30px 80px -40px rgba(0,0,0,.8)}
.ill::before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:1px;background:var(--mist);opacity:.85}
.ill-tabs{display:flex;gap:4px;padding:4px;border:1px solid var(--border);border-radius:999px;background:var(--veil-1);width:max-content;max-width:100%}
.ill-tab{border:0;background:none;color:var(--muted);font:500 12.5px var(--sans);padding:0 13px;height:30px;border-radius:999px;cursor:pointer;transition:background .18s,color .18s;white-space:nowrap}
.ill-tab:hover{color:var(--ink)}
.ill-tab[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.ill-rows{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column}
.ill-row{display:flex;align-items:center;gap:12px;padding:11px 6px;border-top:1px solid var(--border);animation:illIn .32s both}
.ill-rows .ill-row:nth-child(2){animation-delay:.06s} .ill-rows .ill-row:nth-child(3){animation-delay:.12s} .ill-rows .ill-row:nth-child(4){animation-delay:.18s}
@keyframes illIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ill-mono{flex:none;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font:700 9.5px var(--sans);letter-spacing:.02em;color:hsl(var(--h) 60% 78%);background:hsl(var(--h) 45% 20%);border:1px solid hsl(var(--h) 45% 32%)}
.ill-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ill-name{font:500 14px/1.25 var(--sans);color:var(--ink)}
.ill-traits{font:500 12px/1.3 var(--sans);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ill-traits i{font-style:normal;color:var(--dim);margin:0 6px}
.ill-traits b{font-weight:500;color:var(--spring)} .ill-traits b.anon{color:var(--iris)}
.ill-meta{flex:none;font:500 12px var(--sans);color:var(--dim);font-variant-numeric:tabular-nums}
.ill-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding-top:12px;border-top:1px solid var(--border)}
.ill-bal{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border:1px solid var(--border);border-radius:999px;background:var(--veil-1);color:var(--ink);font:500 12.5px var(--sans);white-space:nowrap;font-variant-numeric:tabular-nums}
.ill-bal i{width:6px;height:6px;border-radius:50%;background:var(--spring)}
.ill-same{font:400 12.5px/1.4 var(--sans);color:var(--muted);text-align:right}
.ill-set{display:flex;flex-direction:column}
.ill-set .ill-row{padding:12px 6px;justify-content:space-between;animation:none}
.ill-set .ill-row:first-child{border-top:0;padding-top:4px}
.ill-k{font:500 13.5px/1.3 var(--sans);color:var(--ink)}
.ill-v{display:inline-flex;align-items:center;gap:6px;font:500 13px var(--sans);color:var(--ink-2);white-space:nowrap}
.ill-v svg{width:12px;height:12px;opacity:.6}
.ill-switch{position:relative;flex:none;width:40px;height:23px;border-radius:999px;border:1px solid var(--veil-4);background:var(--veil-2);cursor:pointer;padding:0;transition:background .2s,border-color .2s}
.ill-switch::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:var(--ink-2);transition:left .2s,background .2s}
.ill-switch[aria-checked="true"]{background:var(--ink);border-color:var(--ink)}
.ill-switch[aria-checked="true"]::after{left:19px;background:var(--bg)}
.ill-stack-h{margin:18px 0 4px;padding:0 6px;font:500 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ill-msg{display:grid;grid-template-columns:minmax(9ch,auto) 1fr;gap:12px;align-items:baseline;padding:10px 6px;border-top:1px solid var(--border);font:400 13.5px/1.5 var(--sans);color:var(--ink-2);max-height:140px;overflow:hidden;transition:opacity .25s,max-height .3s,padding .3s}
.ill-msg b{font:500 12px/1.5 var(--sans);color:var(--muted);white-space:nowrap}
.ill-msg.sys{color:var(--dim);letter-spacing:.1em} .ill-msg.sys b{letter-spacing:0;color:var(--dim)}
.ill-stack[data-off="true"] .ill-msg.sys{opacity:0;max-height:0;padding-top:0;padding-bottom:0;border-top-width:0}
.ill-msg.bot{color:var(--ink)} .ill-msg.bot b{color:var(--spring)}
.ill-typed{min-height:1.5em;display:block}
.ill-cursor::after{content:"";display:inline-block;width:7px;height:14px;background:var(--ink);margin-left:2px;vertical-align:-2px;animation:blink 1s steps(2) infinite}
@media(max-width:640px){ .ill{padding:14px 12px;border-radius:14px} .ill-same{display:none} .ill-meta{display:none} .ill-tab{padding:0 11px} .ill-msg{grid-template-columns:1fr;gap:2px} }
@media(prefers-reduced-motion:reduce){ .ill-row{animation:none} .ill-cursor::after{animation:none} .ill-msg,.ill-switch,.ill-switch::after{transition:none} }

/* ═══ RU Bali angle (16 Sep 2026): «Знакомо?» pains as three quiet columns, payment methods as a chip row ═══ */
.ad-pains{display:grid;grid-template-columns:repeat(3,1fr);margin-top:40px;text-align:left;border-top:1px solid var(--border)}
.ad-pain{padding:26px 26px 28px;border-bottom:1px solid var(--border);border-right:1px solid var(--border)}
.ad-pain:last-child{border-right:0}
.ad-pain-q{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.3;color:var(--ink);margin:0 0 12px;letter-spacing:0}
.ad-pain-a{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0}
.ad-pay{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:28px}
.ad-pay span{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border:1px solid var(--border);border-radius:999px;font:500 13px var(--sans);color:var(--ink);background:var(--veil-1)}
.ad-pay span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--spring)}
.ad-pay span:nth-child(2)::before{background:var(--iris)} .ad-pay span:nth-child(3)::before{background:var(--sulfur)} .ad-pay span:nth-child(4)::before{background:var(--ink-2)}
.ad-pay-note{margin:18px auto 0;max-width:56ch;font-size:13px;line-height:1.55;color:var(--muted)}
@media(max-width:820px){ .ad-pains{grid-template-columns:1fr;margin-top:28px} .ad-pain{border-right:0;padding:20px 4px 22px} .ad-pain-q{font-size:20px} }

/* ═══ admin overview (24 Sep 2026): chart tokens validated for both surfaces, headline strip, KPI tiles, cards, tables ═══ */
:root{--ac-1:#1a9bb0;--ac-2:#c08226;--ac-3:#d95f86;--ac-4:#8574e8;--ac-5:#2aa86f;--ac-muted:#5c6066;--ac-grid:rgba(214,235,253,.10)}
:root[data-theme="light"]{--ac-1:#0d83a8;--ac-2:#a0640a;--ac-3:#c23a70;--ac-4:#5a48cc;--ac-5:#0f7a52;--ac-muted:#9aa0a8;--ac-grid:rgba(16,24,32,.08)}
.page-wrap.wide.dash-wrap{max-width:1240px}
.dash-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:6px}
.dash-top .page-title{margin-bottom:2px}
.dash-k{font:500 11px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dash-k-sub{text-transform:none;letter-spacing:0;color:var(--dim);font-weight:400}
.dash-sub{font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:6px}
.dash-delta{font-weight:600;font-variant-numeric:tabular-nums}
.dash-delta.up{color:var(--ok)} .dash-delta.down{color:var(--err)}
.dash-head{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:12px;margin:18px 0 22px}
.dash-hero,.dash-tile,.dash-kpi,.dash-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px;min-width:0}
.dash-hero{position:relative;overflow:hidden}
.dash-hero::before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:1px;background:var(--mist);opacity:.9}
.dash-hero-v{font:600 52px/1.05 var(--sans);letter-spacing:-.03em;color:var(--ink);margin-top:10px;word-break:break-word}
.dash-v{font:600 28px/1.15 var(--sans);letter-spacing:-.02em;color:var(--ink);margin-top:10px}
.dash-kv{font:600 22px/1.15 var(--sans);letter-spacing:-.015em;color:var(--ink);margin-top:8px}
.dash-filter{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 8px}
.dash-ranges{display:flex;gap:4px;flex-wrap:wrap;padding:4px;border:1px solid var(--border);border-radius:999px;background:var(--veil-1)}
.dash-ranges a{height:30px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;font:500 12.5px var(--sans);color:var(--muted);white-space:nowrap}
.dash-ranges a:hover{color:var(--ink)}
.dash-ranges a.on{background:var(--ink);color:var(--bg)}
.dash-custom{display:flex;align-items:center;gap:8px}
.dash-custom input[type=date]{height:32px;padding:0 10px;font:500 13px var(--sans);color:var(--ink);background:var(--veil-1);border:1px solid var(--border);border-radius:8px;color-scheme:dark}
:root[data-theme="light"] .dash-custom input[type=date]{color-scheme:light}
.dash-custom.on input[type=date]{border-color:var(--border-2)}
.dash-scope{font-size:12.5px;color:var(--muted);margin:0 0 16px}
.dash-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:18px}
.dash-kpi{padding:14px 16px}
.dash-kpi .dash-sub{margin-top:4px;font-size:12px}
.dash-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.dash-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:12px}
.dash-card{margin-bottom:0}
.ac-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.ac-head h3{font:600 14px/1.3 var(--sans);color:var(--ink);margin:0;letter-spacing:-.005em}
.ac-head .hint{font-size:12px}
.ac-plot{width:100%;min-height:220px}
.ac-plot svg{display:block;width:100%;height:auto;outline:none;overflow:visible}
.ac-plot svg:focus-visible{outline:2px solid var(--spring);outline-offset:4px;border-radius:6px}
.ac-grid{stroke:var(--ac-grid);stroke-width:1}
.ac-tick{fill:var(--muted);font:500 11px var(--sans);font-variant-numeric:tabular-nums}
.ac-bar{transition:opacity .12s} .ac-bar.on{opacity:.78}
.ac-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ac-dot{stroke:var(--basalt-1);stroke-width:2}
:root[data-theme="light"] .ac-dot{stroke:#fff}
.ac-cross{stroke:var(--ink-2);stroke-width:1;opacity:.6;pointer-events:none}
.ac-legend{display:flex;gap:14px;flex-wrap:wrap;font:500 12px var(--sans);color:var(--ink-2)}
.ac-legend span{display:inline-flex;align-items:center;gap:6px}
.ac-legend i,.ac-tip-r i{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none}
.ac-legend i.line,.ac-tip-r i.line{height:2px;width:14px;border-radius:1px}
.ac-tip{position:fixed;z-index:var(--z-tooltip);min-width:150px;padding:8px 10px;background:var(--pop);border:1px solid var(--border-2);border-radius:10px;box-shadow:0 16px 40px -16px rgba(0,0,0,.8);pointer-events:none;font:500 12.5px/1.4 var(--sans);color:var(--ink-2);backdrop-filter:blur(10px)}
.ac-tip-h{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.ac-tip-r{display:flex;align-items:center;gap:8px;padding:2px 0}
.ac-tip-r b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}
.ac-tip-r span{color:var(--muted)}
.ac-table{margin-top:8px;font-size:12px}
.ac-table summary{cursor:pointer;color:var(--muted);list-style:none;display:inline-flex;align-items:center;gap:6px}
.ac-table summary::before{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.ac-table[open] summary::before{transform:rotate(45deg)}
.ac-table table{width:100%;border-collapse:collapse;margin-top:8px;max-height:220px}
.ac-table th,.ac-table td{padding:5px 8px;border-bottom:1px solid var(--border);text-align:left;color:var(--ink-2)}
.ac-table th{color:var(--muted);font-weight:500;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.ac-table .num,.dash-t .num{text-align:right;font-variant-numeric:tabular-nums}
.dash-t{width:100%;border-collapse:collapse;font-size:13px}
.dash-t th{text-align:left;color:var(--muted);font-weight:500;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:8px 8px;border-bottom:1px solid var(--border)}
.dash-t td{padding:8px 8px;border-bottom:1px solid var(--border);color:var(--ink-2);vertical-align:middle}
.dash-t tr:last-child td{border-bottom:0}
.dash-t td:first-child{color:var(--ink)}
.dash-share{display:inline-block;width:56px;height:5px;border-radius:3px;background:var(--veil-2);vertical-align:middle;margin-right:8px;overflow:hidden}
.dash-share i{display:block;height:100%;background:var(--ac-1);border-radius:3px}
.dash-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:1px}
.dash-funnel{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.dash-frow{display:grid;grid-template-columns:120px 1fr 52px 44px;align-items:center;gap:10px;font-size:13px}
.dash-fl{color:var(--ink-2)}
.dash-fbar{height:8px;border-radius:4px;background:var(--veil-2);overflow:hidden}
.dash-fbar i{display:block;height:100%;background:var(--ac-1);border-radius:4px}
.dash-frow b{color:var(--ink)}
.dash-fp{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;font-size:12px}
.dash-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 16px;margin:6px 0 4px}
.dash-mini.four{grid-template-columns:repeat(4,1fr);margin-bottom:12px}
.dash-note{font-size:12.5px;line-height:1.5;color:var(--muted);margin:12px 0 0}
.dash-note b{color:var(--ink);font-weight:600}
.dash-health{display:flex;gap:6px 14px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--muted)}
.dash-health span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);margin-right:7px;vertical-align:1px}
.dash-health span.warn{color:var(--ink)} .dash-health span.warn::before{background:var(--warn)}
.dash-st{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.03em;border:1px solid var(--border);color:var(--ink-2)}
.dash-st.paid{color:var(--ok);border-color:rgba(110,231,168,.3)} .dash-st.failed{color:var(--err);border-color:rgba(255,120,120,.3)} .dash-st.review{color:var(--warn);border-color:rgba(245,165,36,.35)}
.dash-cohort .cell{position:relative;color:var(--ink)}
.dash-cohort .cell[style]{background:color-mix(in srgb, var(--ac-1) calc(var(--p) * 100%), transparent)}
.dash-cohort .cell[style]::after{content:"";position:absolute;inset:0;pointer-events:none}
@media(max-width:1100px){ .dash-kpis{grid-template-columns:repeat(4,1fr)} .dash-head{grid-template-columns:1fr 1fr} .dash-grid3{grid-template-columns:1fr 1fr} }
@media(max-width:820px){ .dash-grid2,.dash-grid3{grid-template-columns:1fr} .dash-kpis{grid-template-columns:repeat(3,1fr)} .dash-frow{grid-template-columns:100px 1fr 48px 40px} }
@media(max-width:560px){ .dash-head{grid-template-columns:1fr} .dash-kpis{grid-template-columns:repeat(2,1fr)} .dash-hero-v{font-size:40px} .dash-mini{grid-template-columns:1fr 1fr} .dash-mini.four{grid-template-columns:1fr 1fr} .dash-ranges{overflow-x:auto;flex-wrap:nowrap;max-width:100%;scrollbar-width:none} .dash-t{font-size:12px} .dash-t th,.dash-t td{padding:7px 6px} }

/* dash tables scroll inside their card on narrow screens instead of widening the page */
.dash-card{overflow-x:auto;overscroll-behavior-x:contain}
.dash-t{min-width:100%}
@media(max-width:560px){ .dash-frow{grid-template-columns:88px 1fr 44px 36px;font-size:12px} .dash-health{font-size:11.5px} }

/* dash filter shrinks (24 Sep 2026): flex items default to min-width:auto, which let the range row push the page wider on phones */
.dash-filter>*{min-width:0} .dash-ranges{min-width:0;max-width:100%} .dash-custom{flex-wrap:wrap}
@media(max-width:560px){ .dash-ranges{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch} .dash-custom input[type=date]{flex:1 1 120px;min-width:0} }

/* ═══ admin shell (24 Sep 2026): every admin page shares the tab row, cards, tables, pills, filters and pagers ═══ */
.page-wrap.adm{max-width:1240px}
.adm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:4px}
.adm-head .page-title{margin:0 0 4px;font-size:28px;overflow-wrap:anywhere}
.adm-sub{font-size:13px;line-height:1.55;color:var(--muted);margin:0;max-width:78ch}
.adm-sub a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.adm-crumb{font-size:12px;color:var(--muted);margin:0 0 4px}
.adm-crumb a{color:var(--ink-2)}
.adm-badges{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-top:8px}
.adm-actions{display:flex;gap:6px;flex-wrap:wrap;flex:none}
.page-wrap.adm .admin-nav{display:flex;gap:2px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:12px 0 20px;border-bottom:1px solid var(--border)}
.page-wrap.adm .admin-nav::-webkit-scrollbar{display:none}
.page-wrap.adm .admin-nav a{flex:none;padding:10px 12px;border:0;border-bottom:2px solid transparent;border-radius:0;margin-bottom:-1px;background:none;color:var(--muted);font:500 13px var(--sans);white-space:nowrap}
.page-wrap.adm .admin-nav a:hover{color:var(--ink);background:none;border-bottom-color:var(--veil-4)}
.page-wrap.adm .admin-nav a.on{color:var(--ink);border-bottom-color:var(--ink);background:none}
.page-wrap.adm .page-card{padding:18px 20px;border-radius:14px;margin-bottom:12px;overflow-x:auto;overscroll-behavior-x:contain;min-width:0}
.page-wrap.adm .admin-cols{gap:12px;margin-bottom:12px} .page-wrap.adm .admin-cols>*{min-width:0;margin-bottom:0}
.page-wrap.adm .adm-cols-form{grid-template-columns:minmax(280px,380px) 1fr}
.page-wrap.adm .label{font:600 14px/1.3 var(--sans);letter-spacing:-.005em;text-transform:none;color:var(--ink);margin:0 0 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.page-wrap.adm .label .hint{font-weight:400}
.page-wrap.adm .htable{font-size:13px}
.page-wrap.adm .htable th{font-weight:500;padding:8px 8px}
.page-wrap.adm .htable td{padding:9px 8px;vertical-align:middle;color:var(--ink-2)}
.page-wrap.adm .htable tr:last-child td{border-bottom:0}
.page-wrap.adm .htable td:first-child,.page-wrap.adm .htable td a{color:var(--ink)}
.page-wrap.adm .htable .num{text-align:right;font-variant-numeric:tabular-nums}
.page-wrap.adm .htable .amt{color:var(--ink);font-family:var(--sans);font-variant-numeric:tabular-nums;text-align:right}
.page-wrap.adm .htable .amt.plus,.page-wrap.adm .htable .num.plus{color:var(--ok)}
.page-wrap.adm .htable b{color:var(--ink)}
.page-wrap.adm .nowrap{white-space:nowrap}
.page-wrap.adm .mono{font-family:var(--code);font-size:12px}
.page-wrap.adm .adm-text{min-width:260px;max-width:560px;white-space:pre-wrap;overflow-wrap:anywhere}
.page-wrap.adm .adm-clip{max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-wrap.adm .adm-json{display:block;max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--code);font-size:12px;color:var(--muted);background:none}
.page-wrap.adm tr.adm-dim td{opacity:.5}
.page-wrap.adm .inline{display:inline;margin:0}
.page-wrap.adm .inline+.inline{margin-left:4px}
.page-wrap.adm .muted{color:var(--muted)}
.st{display:inline-block;padding:2px 8px;border-radius:999px;font:600 11px/1.5 var(--sans);letter-spacing:.03em;border:1px solid var(--border);color:var(--ink-2);white-space:nowrap;vertical-align:middle}
.st-ok,.st-paid,.st-done,.st-active,.st-claimed{color:var(--ok);border-color:rgba(110,231,168,.32)}
.st-err,.st-failed{color:var(--err);border-color:rgba(255,120,120,.32)}
.st-warn,.st-review{color:var(--warn);border-color:rgba(245,165,36,.36)}
.st-info{color:var(--spring);border-color:rgba(165,243,252,.3)}
.st-muted,.st-pending,.st-queued,.st-off{color:var(--muted)}
.adm-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.adm-filters .input{width:auto;min-width:160px;height:36px;padding:0 12px;font-size:13.5px}
.adm-filters select.input{padding-right:30px}
.adm-filters .hint{margin-left:auto}
.adm-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:12px}
.adm-stats>div{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px;min-width:0}
.adm-stats b{display:block;font:600 20px/1.2 var(--sans);letter-spacing:-.01em;color:var(--ink);margin-top:6px;overflow-wrap:anywhere}
.adm-stats b small{font-size:12px;font-weight:400;color:var(--muted)}
.adm-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 0;font-size:12.5px;color:var(--muted)}
.adm-pager-btns{display:flex;gap:6px}
.adm-back{margin:0 0 14px;display:flex;align-items:center;gap:10px}
.adm-details summary{cursor:pointer;color:var(--muted);font-size:12px;margin-top:4px}
.adm-details pre{white-space:pre-wrap;font-family:var(--code);font-size:12px;line-height:1.5;max-height:320px;overflow:auto;margin:8px 0 0;padding:10px 12px;background:var(--veil-1);border-radius:8px;color:var(--ink-2)}
.page-wrap.adm .field-row{margin-bottom:14px}
.page-wrap.adm .field-row label{display:flex;align-items:center;gap:8px;font:500 12px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.page-wrap.adm .field-row .hint{margin-top:6px;font-size:12.5px;line-height:1.5}
.page-wrap.adm .input{font-size:14px}
.page-wrap.adm input.input,.page-wrap.adm select.input{height:38px;padding:0 12px}
.page-wrap.adm textarea.input{padding:10px 12px;min-height:44px;resize:vertical}
.page-wrap.adm .field-row .input{width:100%}
.page-wrap.adm hr{border:0;border-top:1px solid var(--border);margin:18px 0}
.adm-switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--border);cursor:pointer}
.adm-switch-row:first-of-type{border-top:0}
.adm-switch-row span{display:flex;flex-direction:column;gap:3px;min-width:0}
.adm-switch-row b{font-weight:500;color:var(--ink);font-size:14px}
.adm-switch-row .hint{font-size:12.5px;line-height:1.5}
.adm-switch-row input{appearance:none;-webkit-appearance:none;flex:none;width:40px;height:23px;border-radius:999px;border:1px solid var(--veil-4);background:var(--veil-2);position:relative;cursor:pointer;margin:0;transition:background .2s,border-color .2s}
.adm-switch-row input::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:var(--ink-2);transition:left .2s,background .2s}
.adm-switch-row input:checked{background:var(--ink);border-color:var(--ink)} .adm-switch-row input:checked::after{left:19px;background:var(--bg)}
.adm-switch-row input:focus-visible{outline:2px solid var(--spring);outline-offset:2px}
.adm-switch-row input:disabled{opacity:.5;cursor:not-allowed}
.adm-groups{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.adm-group{margin-bottom:0}
.adm-group-desc{margin:-6px 0 14px;max-width:70ch}
.adm-savebar{position:sticky;bottom:12px;display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:14px;padding:10px 12px 10px 16px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:12px;z-index:5}
.adm-warn{border-color:rgba(255,120,120,.4)} .adm-warn p{margin:6px 0 0;font-size:13px;color:var(--ink-2)}
.adm-inline-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:10px 0 12px}
.page-wrap.adm .intg-kepala{margin-bottom:8px} .page-wrap.adm .intg-kepala .label{margin-bottom:6px}
.page-wrap.adm .intg-hint{margin:6px 0 0}
.page-wrap.adm .task-filters{padding:16px 18px} .page-wrap.adm .task-list .page-card{margin:0}
.page-wrap.adm .task-tabs{display:flex;gap:4px;padding:4px;border:1px solid var(--border);border-radius:999px;background:var(--veil-1);width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none;margin:0 0 14px}
.page-wrap.adm .task-tabs a{flex:none;height:32px;display:inline-flex;align-items:center;padding:0 14px;border:0;border-radius:999px;font:500 13px var(--sans);color:var(--muted);white-space:nowrap;text-decoration:none}
.page-wrap.adm .task-tabs a.on{background:var(--ink);color:var(--bg)}
.page-wrap.adm .task-notice{margin:0 0 12px}
@media(max-width:1000px){ .adm-groups{grid-template-columns:1fr} .adm-stats{grid-template-columns:repeat(3,1fr)} .page-wrap.adm .adm-cols-form{grid-template-columns:1fr} }
@media(max-width:640px){
  .adm-head{flex-direction:column;align-items:stretch;gap:10px} .adm-head .page-title{font-size:24px}
  .page-wrap.adm .page-card{padding:14px 14px} .adm-stats{grid-template-columns:1fr 1fr;gap:8px} .adm-stats b{font-size:18px}
  .adm-filters .input{min-width:0;flex:1 1 140px} .adm-filters .hint{margin-left:0;flex-basis:100%}
  .adm-savebar{bottom:8px;padding:8px 10px} .page-wrap.adm .htable{font-size:12.5px} .page-wrap.adm .htable th,.page-wrap.adm .htable td{padding:8px 6px}
}
@media(pointer:coarse){ .page-wrap.adm .input,.adm-filters .input{font-size:16px} }

/* admin touch hit areas (24 Sep 2026): row links and summaries grow their tap area without moving the layout */
@media(pointer:coarse){
  .page-wrap.adm .htable td a:not(.btn){display:inline-block;padding:9px 0;margin:-9px 0}
  .page-wrap.adm .adm-details summary,.page-wrap.adm .ac-table summary{padding:8px 0}
  .page-wrap.adm .adm-crumb a,.page-wrap.adm .adm-sub a{display:inline-block;padding:8px 0;margin:-8px 0}
}

/* admin nav scroll hint (24 Sep 2026): on phones the tab row fades at the right edge so the hidden tabs are implied */
@media(max-width:820px){ .page-wrap.adm .admin-nav{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent);padding-right:44px} }

/* ── panel dukungan (dirancang ulang 26 Sep 2026) ───────────────────────────
   Permukaan padat --pop, bukan kaca. Panel lama memakai --surface-2 (85%) dengan
   blur, jadi gambar dan cahaya di belakangnya ikut terbaca di dalam panel, dan
   lapisan gelap se-layar mengubah seluruh halaman jadi abu-abu di tema terang.
   Sekarang tidak ada lapisan gelap di layar lebar; klik di luar panel tetap
   menutupnya. Semua warna dari token, jadi tema terang hanya butuh bayangan. */
.sup-fab{position:fixed;right:20px;bottom:max(20px,var(--sup-above,0px));z-index:var(--z-fab);
  width:46px;height:46px;padding:0;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--border-2);background:var(--pop);color:var(--ink);font:600 19px/1 var(--sans);cursor:pointer;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 10px 30px -8px rgba(0,0,0,.6);
  transition:border-color .15s,transform .15s,bottom .2s ease}
.sup-fab:hover{border-color:var(--veil-5);transform:translateY(-1px)}
.sup-fab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
:root[data-theme="light"] .sup-fab{box-shadow:0 8px 24px -8px rgba(16,24,32,.32)}
.sup-fab-q{display:block;transform:translateY(-.5px)}
/* Selama panel terbuka tombolnya tidak dibutuhkan, dan lencananya sempat
   mengintip di sisi kanan panel. */
body.sup-open .sup-fab{opacity:0;pointer-events:none}
/* Jumlah balasan admin yang belum dibaca. Satu merah untuk kedua tema: teks
   putih 4,8:1 di atasnya, dan tetap di atas 4:1 terhadap halaman hitam. */
.sup-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;
  margin-left:6px;border-radius:9px;background:#d92d20;color:#fff;font:700 11px/1 var(--sans);
  font-variant-numeric:tabular-nums;letter-spacing:0;vertical-align:middle}
.sup-fab .sup-count{position:absolute;top:-5px;right:-5px;margin:0;box-shadow:0 0 0 2px var(--bg)}
.sup-fab.is-new::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:2px solid #d92d20;
  pointer-events:none;animation:supDenyut 1.6s ease-out 3 both}
@keyframes supDenyut{from{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(1.6)}}

.sup-wrap{position:fixed;inset:0;z-index:var(--z-modal);background:transparent;
  display:flex;align-items:flex-end;justify-content:flex-end;padding:20px}
/* `display:flex` di atas MENGALAHKAN atribut `hidden`, dan tanpa baris ini
   lapisan ini menutupi setiap halaman yang memuat widget: tak terlihat karena
   transparan, tapi menelan semua klik di seluruh situs. */
.sup-wrap[hidden]{display:none}
/* Lampiran gambar di widget dukungan. Pratinjau kecil supaya kotak kirim tidak
   terdorong keluar layar di ponsel, dan gambar di dalam gelembung dibatasi
   tingginya supaya satu tangkapan layar panjang tidak menelan seluruh utas. */
.tkt-lampiran{display:inline-block;margin:8px 8px 0 0;text-decoration:none}
.tkt-lampiran img{display:block;max-width:320px;max-height:240px;border-radius:8px;
  border:1px solid var(--border-2);object-fit:contain}
.tkt-lampiran small{display:block;margin-top:4px;color:var(--dim);font-size:11.5px}
/* Balasan bot dirender sebagai markdown seperlunya, jadi gelembungnya perlu
   tahu cara menggambar daftar dan paragraf. Margin dibuat rapat: gelembung
   chat yang memakai jarak bawaan peramban terlihat seperti halaman artikel
   yang tersesat ke dalam kotak kecil. */
/* Sakelar bulanan/tahunan di halaman tagihan. */
.term-switch{display:inline-flex;gap:2px;padding:3px;margin:0 0 12px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--border)}
.term-switch button{border:0;background:none;color:var(--ink-2);cursor:pointer;
  padding:6px 14px;border-radius:8px;font:500 13px/1 var(--sans);
  transition:background .15s,color .15s}
/* Pil aktifnya dulu var(--surface-3). Di tema gelap itu terbaca; di tema terang
   surface-3 adalah #ffffff DI ATAS surface-2 yang rgba(255,255,255,.95) - nol
   kontras, jadi di landing sakelarnya terlihat seperti tidak ada yang terpilih
   sama sekali. Sejak tahunan jadi bawaan, yang tak terlihat itu justru penanda
   harga mana yang sedang berlaku. Dibalik jadi pil pekat: satu-satunya keadaan
   yang tidak bisa salah baca, dan sama di kedua tema karena ink/bg memang
   bertukar. */
.term-switch button.on{background:var(--ink);color:var(--bg)}
/* Di halaman harga landing sakelarnya berdiri di antara paragraf pengantar dan
   kartu-kartunya, jadi jarak ATAS dan BAWAHnya harus sama. Sebelumnya 20 px di
   atas dan 56 px di bawah (12 miliknya sendiri + 44 milik grid): ia terbaca
   menempel ke kalimat dan mengambang jauh dari yang ia kendalikan. Yang bawah
   ditulis lewat `#lpTerm + .price-grid` supaya halaman tanpa sakelar tetap
   memakai 44 px miliknya. */
#lpTerm{margin:32px 0 0}
#lpTerm + .price-grid{margin-top:32px}

/* Halaman tagihan: label seksi 9 px di atas, kartu 20 px di bawah. Disamakan,
   lebih rapat daripada di landing karena di sini sakelarnya duduk di dalam
   daftar setelan, bukan di tengah halaman kampanye. */
/* 5, bukan 14: label seksi di atasnya SUDAH menyumbang margin-bottom 9 px, jadi
   jarak atas totalnya 14 - sama persis dengan yang di bawah. Menulis 14 di sini
   menghasilkan 23 di atas dan 14 di bawah, dan itu yang terjadi sebelum diukur. */
#termSwitch{margin:5px 0 0}
#termSwitch + .plan-grid{margin-top:14px}
.plan .term-note{margin-top:-4px}
.sup-text p{margin:0 0 8px}
.sup-text p:last-child{margin-bottom:0}
.sup-text ul,.sup-text ol{margin:0 0 8px;padding-left:20px}
.sup-text ul:last-child,.sup-text ol:last-child{margin-bottom:0}
.sup-text li{margin:0 0 4px}
.sup-text li:last-child{margin-bottom:0}
.sup-text strong{font-weight:600;color:var(--ink)}
.sup-text code{font-family:var(--mono);font-size:.92em;background:var(--surface-3);
  padding:1px 5px;border-radius:5px}
.sup-pratinjau{position:relative;display:inline-block;margin:0 0 8px}
.sup-pratinjau img{display:block;max-width:120px;max-height:90px;border-radius:8px;
  border:1px solid var(--border-2);object-fit:cover}
.sup-pratinjau button{position:absolute;top:-6px;right:-6px;width:20px;height:20px;
  border-radius:50%;border:1px solid var(--border-2);background:var(--surface-2);
  color:var(--ink);font-size:13px;line-height:1;cursor:pointer;padding:0}
/* Ikon lampiran DI DALAM kotak kirim, seperti kotak chat yang sudah dikenal
   orang. Sebelumnya ia baris tersendiri di bawah kotak: memakan tinggi yang
   berharga di ponsel, dan terbaca seperti tindakan terpisah alih-alih bagian
   dari menyusun satu pesan. */
.sup-box{display:flex;align-items:flex-end;gap:6px}
.sup-lampir{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;flex:none;border-radius:8px;cursor:pointer;
  color:var(--ink-2);background:none;border:0}
.sup-lampir:hover{color:var(--ink);background:var(--surface-3)}
.sup-lampir svg{width:17px;height:17px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sup-lampiran,.sup-lampiran-pratinjau{display:block;margin:8px 0 0}
.sup-lampiran img,.sup-lampiran-pratinjau{max-width:100%;max-height:220px;
  border-radius:8px;border:1px solid var(--border-2);object-fit:contain}
.sup-panel{display:flex;flex-direction:column;width:392px;max-width:100%;height:min(600px,calc(100dvh - 40px));
  background:linear-gradient(var(--pop),var(--pop)),var(--bg);border:1px solid var(--border-2);border-radius:18px;overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8);animation:supMuncul .18s ease-out}
:root[data-theme="light"] .sup-panel{box-shadow:0 28px 70px -24px rgba(16,24,32,.32),0 2px 8px rgba(16,24,32,.06)}
@keyframes supMuncul{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}

.sup-head{display:flex;align-items:center;gap:6px;padding:14px 10px 13px 18px;border-bottom:1px solid var(--border)}
.sup-head:has(#supBack:not([hidden])){padding-left:8px}
.sup-head-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.sup-head strong{font:500 19px/1.2 var(--serif);letter-spacing:-.01em;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sup-sub::first-letter{text-transform:uppercase}
.sup-sub{font-size:12px;line-height:1.35;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sup-icon{flex:none;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:10px;
  background:none;color:var(--ink-2);cursor:pointer;transition:background .15s,color .15s}
.sup-icon svg{width:18px;height:18px}
.sup-icon:hover{background:var(--veil-2);color:var(--ink)}
.sup-icon:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

.sup-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 16px 12px;
  display:flex;flex-direction:column;gap:10px}
.sup-note{margin:2px 8px;font-size:12.5px;line-height:1.5;color:var(--muted);text-align:center}
.sup-body>.sup-note:first-child{margin:0 0 2px;text-align:left}
.sup-hello{margin-top:auto;padding:0 4px 6px;display:flex;flex-direction:column;gap:10px}
.sup-hello-t{margin:0;font:400 30px/1.1 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.sup-hello-p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2);max-width:36ch}

.sup-msg{max-width:86%;padding:9px 13px;border-radius:16px;font-size:14px;line-height:1.55;color:var(--ink)}
.sup-msg .sup-text{white-space:pre-wrap;overflow-wrap:anywhere}
.sup-me{align-self:flex-end;background:var(--veil-2);border-bottom-right-radius:6px}
.sup-bot{align-self:flex-start;background:var(--veil-1);border:1px solid var(--border);border-bottom-left-radius:6px}
.sup-admin{align-self:flex-start;background:var(--accent-bg);border:1px solid var(--border-2);border-bottom-left-radius:6px}
.sup-who{display:flex;align-items:baseline;gap:8px;margin-bottom:3px}
.sup-who-name{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.sup-who-time{font-size:11px;color:var(--muted)}

.sup-thread{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 10px 11px 14px;
  background:var(--veil-1);border:1px solid var(--border);border-radius:12px;color:var(--ink);font:inherit;cursor:pointer;
  transition:background .15s,border-color .15s}
.sup-thread:hover{background:var(--veil-2);border-color:var(--border-2)}
.sup-thread:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sup-thread-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.sup-thread-subj{font-size:13.5px;font-weight:500;line-height:1.35;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sup-thread.is-unread .sup-thread-subj{font-weight:650}
.sup-thread-meta{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);white-space:nowrap;min-width:0}
.sup-st{display:inline-flex;align-items:center;gap:6px}
.sup-st::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--dim)}
.sup-st-answered::before{background:var(--ok)}
.sup-st-open::before{background:var(--warn)}
.sup-st-bot::before{background:var(--muted)}
.sup-thread-time{overflow:hidden;text-overflow:ellipsis}
.sup-thread-time::before{content:"·";margin-right:8px;color:var(--dim)}
.sup-new{flex:none;display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;
  background:#d92d20;color:#fff;font:700 10.5px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase}
.sup-chev{flex:none;width:16px;height:16px;color:var(--dim)}

.sup-foot{padding:10px 12px 12px;border-top:1px solid var(--border)}
.sup-box{display:flex;align-items:flex-end;gap:8px;padding:6px 6px 6px 14px;background:var(--surface);
  border:1px solid var(--border-2);border-radius:14px;transition:border-color .15s}
.sup-box:focus-within{border-color:var(--accent)}
.sup-box textarea{flex:1;min-width:0;max-height:132px;margin:0;padding:7px 0;border:0;background:transparent;resize:none;
  color:var(--ink);font:400 14px/1.5 var(--sans)}
.sup-box textarea::placeholder{color:var(--muted)}
.sup-box textarea:focus,.sup-box textarea:focus-visible{outline:none;box-shadow:none}
.sup-send{flex:none;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;
  background:var(--accent);color:var(--on-accent);cursor:pointer;transition:opacity .15s,transform .15s}
.sup-send svg{width:17px;height:17px}
.sup-send:hover{transform:translateY(-1px)}
.sup-send[disabled]{opacity:.45;cursor:default;transform:none}
.sup-send:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sup-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-top:10px;padding:0 2px}
.sup-actions:not(:has(>:not([hidden]))){display:none}
.sup-link{display:inline-flex;align-items:center;gap:6px;padding:0;background:none;border:0;color:var(--ink-2);
  font:500 12.5px/1.3 var(--sans);cursor:pointer}
.sup-link:hover{color:var(--ink)}
.sup-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
/* Minta manusia adalah tindakan yang menonjol; menutup percakapan adalah
   pilihan, sepelan mungkin tanpa disembunyikan. */
.sup-human{height:30px;padding:0 12px;border:1px solid var(--border-2);border-radius:999px}
.sup-human:hover{border-color:var(--veil-5);background:var(--veil-1)}
.sup-human svg{width:14px;height:14px}
.sup-quiet{color:var(--muted);font-weight:400}
.sup-quiet:hover{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}

@media (max-width:640px){
  .sup-wrap{padding:0}
  .sup-panel{width:100%;height:100%;height:100dvh;border-radius:0;border:0;box-shadow:none;animation:none}
  .sup-head{padding-top:calc(12px + env(safe-area-inset-top))}
  .sup-foot{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .sup-fab{right:14px;bottom:max(calc(14px + env(safe-area-inset-bottom)),var(--sup-above,0px));width:44px;height:44px}
}
@media (pointer:coarse){ .sup-box textarea{font-size:16px} }
@media (prefers-reduced-motion:reduce){
  .sup-fab,.sup-panel{transition:none;animation:none}
  .sup-fab.is-new::after{display:none}
}

/* ── tiket di panel admin (26 Sep 2026): kerangka admin yang sama dengan
   halaman lain, utas bergaya obrolan, dan kotak balasan yang terbaca di kedua
   tema (sebelumnya textarea bawaan peramban: putih, dengan teks putih). ── */
.page-wrap.adm .task-tabs .tkt-n{margin-left:7px;font-size:11.5px;font-variant-numeric:tabular-nums;opacity:.65}
.page-wrap.adm .tkt-table .tkt-who{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.page-wrap.adm .tkt-table .tkt-subj-cell{max-width:440px}
.page-wrap.adm .tkt-subj{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.page-wrap.adm .tkt-subj:hover{text-decoration:underline;text-underline-offset:2px}
.page-wrap.adm .page-card.tkt-card{padding:0;overflow:hidden}
.tkt-thread{display:flex;flex-direction:column;gap:14px;padding:22px 24px;max-height:min(62vh,640px);
  overflow-y:auto;overscroll-behavior:contain}
.tkt-msg{display:flex;flex-direction:column;gap:5px;max-width:min(72%,680px)}
.tkt-meta{display:flex;align-items:baseline;gap:8px;font-size:11.5px;color:var(--muted)}
.tkt-meta b{font-weight:600;color:var(--ink-2)}
.tkt-body{padding:10px 14px;border:1px solid var(--border);border-radius:14px;font-size:14px;line-height:1.55;
  color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.tkt-user{align-self:flex-start}
.tkt-user .tkt-body{background:var(--veil-1);border-bottom-left-radius:5px}
.tkt-bot{align-self:flex-start}
.tkt-bot .tkt-body{background:transparent;border-style:dashed;color:var(--ink-2);border-bottom-left-radius:5px}
.tkt-admin{align-self:flex-end;align-items:flex-end}
.tkt-admin .tkt-body{background:var(--accent-bg);border-color:var(--border-2);border-bottom-right-radius:5px}
.tkt-empty{margin:0;color:var(--muted);font-size:13px}
.tkt-reply{padding:18px 24px 20px;border-top:1px solid var(--border);background:var(--veil-1)}
.tkt-reply-label{display:block;margin:0 0 8px;font:600 11.5px var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.page-wrap.adm textarea.tkt-input{display:block;width:100%;min-height:116px;padding:12px 14px;border-radius:12px;
  background:var(--bg);border:1px solid var(--border-2);color:var(--ink);font:400 14px/1.55 var(--sans);resize:vertical}
.page-wrap.adm textarea.tkt-input::placeholder{color:var(--muted)}
.page-wrap.adm textarea.tkt-input:focus{outline:none;border-color:var(--accent)}
.tkt-reply-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px}
.tkt-reply-bar .hint{margin:0;max-width:70ch;font-size:12.5px;line-height:1.5}
.tkt-reply-bar .btn{flex:none}
@media (max-width:640px){
  .tkt-thread{padding:16px 14px;max-height:none}
  .tkt-msg{max-width:92%}
  .tkt-reply{padding:14px}
  .tkt-reply-bar{flex-direction:column;align-items:stretch}
  .page-wrap.adm .tkt-table .tkt-who{max-width:140px}
}

/* ── pusat bantuan ───────────────────────────────────────────────────────────
   Satu kolom yang bisa dibaca, bukan kisi kartu. Halaman ini dibuka orang yang
   sedang tersangkut, dan kartu memaksa mata memilih sebelum membaca. */
.help{max-width:760px;margin:0 auto;padding:48px 22px 90px}
.help h1{font:400 40px/1.1 var(--serif);letter-spacing:-.02em;margin:0 0 8px}
.help .hint{color:var(--muted);font-size:14px;margin:0 0 26px}
.help-ask{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:16px 18px;margin:0 0 22px;border:1px solid var(--border-2);border-radius:var(--r-md);
  background:var(--surface)}
.help-ask-h{font:600 15px/1.3 var(--sans);color:var(--ink)}
.help-ask-p{font:400 13.5px/1.5 var(--sans);color:var(--muted);margin-top:3px}
.help-cari{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.help-cari input{flex:1 1 auto;padding:11px 14px;border:1px solid var(--border-2);
  border-radius:var(--r-md);background:var(--veil-1);color:var(--ink);font:400 14px/1.3 var(--sans)}
.help-cari input:focus{outline:none;border-color:var(--veil-5);background:var(--veil-2)}
.help-hitung{font:500 12px/1 var(--mono);color:var(--dim);white-space:nowrap}
.help-toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.help-toc a{padding:6px 11px;border:1px solid var(--border);border-radius:var(--r-pill);
  font:500 12.5px/1.2 var(--sans);color:var(--ink-2);text-decoration:none}
.help-toc a:hover{background:var(--veil-2);color:var(--ink)}
.help-bagian{padding:22px 0;border-top:1px solid var(--border)}
.help-bagian h2{font:400 24px/1.25 var(--serif);color:var(--ink);margin:0 0 10px;scroll-margin-top:80px}
.help-bagian h3{font:600 14px/1.3 var(--sans);color:var(--ink);margin:18px 0 6px;
  text-transform:uppercase;letter-spacing:.06em}
.help-bagian p{font:400 14.5px/1.65 var(--sans);color:var(--ink-2);margin:0 0 11px}
.help-bagian ul{margin:0 0 12px;padding-left:20px}
.help-bagian li{font:400 14.5px/1.6 var(--sans);color:var(--ink-2);margin:0 0 5px}
.help-bagian code{font:500 13px/1 var(--mono);color:var(--ink);background:var(--veil-2);
  padding:2px 5px;border-radius:5px}
.help-kosong{padding:26px 0;color:var(--muted);font-size:14px}
.help-tiket{padding:22px 0;border-top:1px solid var(--border)}
.help-tiket h2{font:400 22px/1.25 var(--serif);margin:0 0 12px}
.help-tiket ul{list-style:none;margin:0;padding:0}
.help-tiket li{margin:0 0 7px}
.help-tiket-b{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:11px 14px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--veil-1);
  color:var(--ink-2);font:400 14px/1.3 var(--sans);text-align:left;cursor:pointer}
.help-tiket-b:hover{background:var(--veil-2);color:var(--ink)}
.help-tiket-s{font:600 10.5px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.08em;
  padding:2px 8px;border-radius:var(--r-pill);border:1px solid var(--border-2);color:var(--muted)}
.help-s-open{color:var(--sulfur);border-color:var(--sulfur)}
.help-s-answered{color:var(--spring);border-color:var(--spring)}
@media (max-width:620px){
  .help{padding:34px 16px 70px}
  .help h1{font-size:31px}
  .help-ask{flex-direction:column;align-items:flex-start}
}

/* Durasi pada kartu hasil. Hanya muncul kalau memang tersimpan bersama hasilnya;
   yang lama tidak membawanya, dan menebak dari ukuran berkas bukan jawaban. */
.lib-dur{display:inline-flex;align-items:center;padding:2px 7px;border-radius:var(--r-pill);
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.22);color:#fff;
  font:600 10.5px/1.5 var(--mono);letter-spacing:.02em;backdrop-filter:blur(6px)}

/* Gelembung keterangan: satu untuk hover dan ketukan. Memakai --pop supaya ia
   ikut tema, dan --z-tooltip supaya berada di atas panel yang membukanya. */
.ket-pop{position:fixed;z-index:var(--z-tooltip);max-width:min(280px,calc(100vw - 16px));
  padding:9px 12px;border:1px solid var(--border-2);border-radius:10px;background:var(--pop);
  color:var(--ink-2);font:400 12.5px/1.5 var(--sans);box-shadow:0 16px 44px -18px rgba(0,0,0,.7);
  backdrop-filter:blur(12px);pointer-events:none;animation:fade .12s both}

/* Pratinjau: kalimat, bukan kartu. Ia duduk di antara chip setelan dan tombol
   Create, tempat mata memang berhenti sebelum menekan. */
.pratinjau{margin:6px 0 0;font:400 12.5px/1.5 var(--sans);color:var(--muted);
  max-width:62ch}

/* Panel penyimpanan lokal di /settings */
.storage-row{display:flex;align-items:center;gap:18px;margin-bottom:14px}
.storage-num{font:600 24px/1.1 var(--sans);color:var(--ink)}
.storage-bar{flex:1 1 auto;height:8px;border-radius:999px;background:var(--veil-2);overflow:hidden}
.storage-bar span{display:block;height:100%;width:0;background:var(--ink-2);border-radius:999px;transition:width .3s}
.storage-acts{display:flex;gap:10px;flex-wrap:wrap}

/* Tombol tanya di bilah ringkasan: pintu keterangan yang bekerja di layar sentuh */
.ringkas-tanya{min-width:26px;justify-content:center;font-weight:700;color:var(--muted)}
.ringkas-tanya:hover{color:var(--ink)}

/* continue with Google (25 Sep 2026): a quiet outlined button above the form, the official G mark, an "or" rule under it */
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--surface-2);border:1px solid var(--border-2);color:var(--ink);font-weight:600;text-decoration:none}
.btn-google:hover{border-color:var(--veil-5);background:var(--surface-3);color:var(--ink)}
.btn-google svg{width:18px;height:18px;flex:none}
.auth-google-note{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--muted);text-align:center}
.auth-google-note a{color:var(--ink)}
.auth-or{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--muted);font:500 11px var(--sans);letter-spacing:.08em;text-transform:uppercase}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--border)}

/* community feed (26 Sep 2026): masonry of server-made thumbnails, hover previews for video, the library's lightbox shell */
.dashboard .canvas.feed-canvas{max-width:1280px;gap:18px;padding-top:22px}
/* the view is overflow:hidden and only the library's canvas is told to scroll (by id), so say it for the feed too, at every width */
.dashboard #view-feed .canvas.feed-canvas{overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch}
.feed-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-bottom:4px}
.feed-intro h1{margin:0 0 6px;font:500 26px/1.15 var(--serif,'Playfair Display',serif);letter-spacing:-.01em;color:var(--ink)}
.feed-intro p{margin:0;max-width:62ch;font-size:13.5px;line-height:1.55;color:var(--muted)}
.feed-grid{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:var(--gap,14px);align-items:start}
.feed-col{display:flex;flex-direction:column;gap:var(--gapy,18px);min-width:0}
.feed-card{display:block;margin:0;padding:0;min-width:0}
.feed-media{position:relative;aspect-ratio:var(--ar,1);border-radius:12px;overflow:hidden;background:var(--surface-2);cursor:zoom-in;outline:none}
.feed-media.loading{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:shimmer 1.3s infinite}
.feed-media:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.feed-media>img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s,opacity .3s}
.feed-media.loading>img{opacity:0}
.feed-media:hover>img{transform:scale(1.03)}
.feed-media.broken>img{opacity:.25}
.feed-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.feed-ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:9px;opacity:0;transition:opacity .18s;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.5),transparent 32%,transparent 60%,rgba(0,0,0,.66))}
.feed-media:hover .feed-ov,.feed-media:focus-visible .feed-ov{opacity:1}
.feed-ov-top{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.feed-ov-top .badge{max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:rgba(0,0,0,.55);border-color:rgba(255,255,255,.18);color:#fff}
.feed-ov-top .badge-accent{color:var(--accent)}
.feed-ov-bot{font-size:12px;line-height:1.35;color:#f2ede4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.feed-play{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.22);color:#fff;display:grid;place-items:center;backdrop-filter:blur(3px);pointer-events:none;transition:opacity .18s}
.feed-play svg{width:20px;height:20px;margin-left:2px}
.feed-media.playing .feed-play{opacity:0}
.feed-cap{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:7px 3px 0;min-width:0;font-size:11.5px;color:var(--muted);line-height:1.2}
.feed-likes{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--muted)}
.feed-likes svg{width:14px;height:14px}
.feed-skel .feed-media{cursor:default}
.feed-status{display:flex;justify-content:center;align-items:center;gap:10px;min-height:44px;font-size:13px;color:var(--muted)}
.feed-err{color:var(--err)}
.feed-more{height:1px}
.feed-lb .lb-stage video,.feed-lb .lb-stage img{max-height:100%}
.feed-lb .lb-stage{cursor:zoom-out}
.feed-lb .lb-stage>*{cursor:default}
.feed-lb .lb-model{text-transform:none;letter-spacing:0;font-size:12.5px;color:#a0a0a0;margin-bottom:8px}
.feed-lb .lb-mm{color:#ffffff;font-weight:600}
.feed-lb .lb-title{color:#f0f0f0}
.feed-lb .lb-ptext{color:#e8e2d6}
.feed-lb .lb-ptext.muted{color:#8a8a8a}
.feed-lb .lb-tags .badge{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#e8e2d6}
.feed-lb .lb-bar .btn{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);color:#f0f0f0}
.feed-lb .lb-bar .btn:hover{background:rgba(255,255,255,.14)}
.feed-lb .lb-bar .btn.btn-primary{background:#ffffff;border-color:#ffffff;color:#000000}
.feed-lb .lb-bar .btn:focus-visible{outline:2px solid #a5f3fc;outline-offset:2px}
.lb-title{font:600 16px/1.3 var(--sans);color:var(--ink);margin-bottom:6px}
.lb-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.dashboard #view-feed .lib-filters{position:static;display:flex;transform:none;gap:4px;margin:0;padding:0;background:none;border:0;border-radius:0}
.dashboard #view-feed .lib-filters .mode-btn{height:32px;min-height:32px;padding:0 13px;border-radius:999px;font:400 13px var(--sans);border:0}
.dashboard #view-feed .lib-filters .mode-btn.active{background:var(--veil-2)}
@media (max-width:560px){
  .dashboard .canvas.feed-canvas{padding:14px 12px 60px;gap:12px}
  .feed-intro h1{font-size:21px}
  .feed-intro p{font-size:13px}
  .feed-media{border-radius:10px}
  .feed-cap{margin-top:5px;font-size:11px}
  .dashboard #view-feed .lib-filters .mode-btn{height:36px;min-height:36px;padding:0 10px;font-size:12px}
}

/* early-bird top-up (26 Sep 2026): pack cards with a struck reference price, the LP pack strip, a Top up button in the sidebar, and a promo bar frozen above the app shell */
.pack{position:relative}
.pack.best{border-color:var(--accent)}
.pack-pop{position:absolute;top:-10px;left:50%;transform:translateX(-50%);padding:3px 10px;border-radius:999px;background:var(--accent);color:var(--on-accent);font:600 11px var(--sans);white-space:nowrap}
.pack .nm{font:500 12px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:4px}
.pack .p{display:flex;align-items:baseline;justify-content:center;gap:8px;flex-wrap:wrap;color:var(--ink);font-size:15px;margin:6px 0 8px}
.pack .hint{margin:0 0 12px;font-size:11.5px;line-height:1.45}
.pack .p .old{color:var(--muted);font-size:12.5px;text-decoration:line-through}
.pack .p b{font-weight:600;font-size:17px}
.pack .save{display:inline-block;margin:0 0 8px;padding:2px 9px;border-radius:999px;background:var(--accent-bg);color:var(--accent);border:1px solid var(--border-2);font:600 11px var(--sans)}
.pack .pc{font-size:11.5px;color:var(--muted);margin-bottom:12px}
.pack-strip{margin-top:26px;padding:20px 20px 16px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);text-align:left}
/* Judul, keterangan, tombol, lalu kartu-kartunya - keempatnya dulu menumpuk
   tanpa jarak sama sekali, jadi keterangannya terbaca menempel ke tombol dan
   tombolnya menempel ke kartu. */
.pack-strip .hint{margin-bottom:12px}
.pack-strip-grid{margin-top:16px}
.pack-strip-head{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.pack-strip-head b{font:600 15px var(--sans);color:var(--ink)}
.pack-strip-head span{font-size:13px;color:var(--muted);line-height:1.5}
.pack-strip-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pack-mini{position:relative;padding:16px 14px 14px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--veil-1);text-align:center}
.pack-mini.best{border-color:var(--accent)}
.pack-mini .price-pop{top:-10px}
.pm-n{font:500 11px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.pm-c{font-family:var(--serif);font-size:22px;color:var(--ink);margin:6px 0 0}
.pm-c span{font:400 12px var(--sans);color:var(--muted)}
.pm-p{display:flex;justify-content:center;align-items:baseline;gap:7px;flex-wrap:wrap;margin:6px 0 8px}
.pm-p s{color:var(--muted);font-size:12.5px}
.pm-p b{font-weight:600;font-size:16px;color:var(--ink)}
.pm-s{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--accent-bg);color:var(--accent);border:1px solid var(--border-2);font:600 11px var(--sans)}
@media (max-width:640px){
  .pack-strip{padding:16px 14px 12px}
  .pack-strip-grid{grid-template-columns:1fr;gap:10px}
  .pack-mini{display:grid;grid-template-columns:1fr auto;grid-template-areas:"n s" "c p";align-items:center;text-align:left;padding:12px 14px}
  .pm-n{grid-area:n}.pm-c{grid-area:c;font-size:19px;margin:0}.pm-p{grid-area:p;justify-content:flex-end;margin:0}.pm-s{grid-area:s;justify-self:end}
}
/* sidebar foot (26 Sep 2026): Help and Billing are the same kind of row as the nav above them; Top up is a quiet
   ghost control on the Billing row (the promo bar carries the loud version); a hairline separates the account block */
.dashboard .side-foot{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-bottom:8px;margin-bottom:6px;border-bottom:1px solid var(--border)}
.dashboard .side-credits{display:flex;align-items:center;gap:8px;margin:0}
.dashboard .side-credits .side-billing{margin:0;flex:1;min-width:0}
.dashboard .side-topup{flex:none;height:28px;display:inline-flex;align-items:center;padding:0 11px;margin-right:4px;border-radius:999px;border:1px solid var(--border-2);background:transparent;color:var(--ink);font:500 12px var(--sans);text-decoration:none;white-space:nowrap}
.dashboard .side-topup:hover{background:var(--veil-1);border-color:var(--veil-5)}
.dashboard .app.nav-collapsed .side-foot{display:none}
.dashboard .side-topup:focus-visible,.promo-bar:focus-visible{outline:2px solid var(--mist-1);outline-offset:2px}
.promo-bar:focus-visible{outline-offset:-3px}
body.dashboard{--promo-h:0px}
body.dashboard.has-promo{--promo-h:38px}
.promo-bar{height:var(--promo-h);display:flex;align-items:center;justify-content:center;gap:12px;padding:0 16px;background:var(--bg-2);border-bottom:1px solid var(--border);color:var(--ink-2);font:400 13px/1 var(--sans);text-decoration:none;white-space:nowrap;overflow:hidden}
.promo-bar:hover{color:var(--ink-2)}
.promo-bar svg{width:14px;height:14px;color:var(--ink-2);flex:none}
.promo-bar span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.promo-bar b{flex:none;display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:13px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--veil-5)}
.promo-bar b::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg);margin-left:2px}
.promo-bar:hover b{text-decoration-color:currentColor}
body.dashboard.has-promo .app{height:calc(100dvh - var(--promo-h))}
body.dashboard.has-promo .main{height:calc(100dvh - var(--promo-h))}
body.dashboard.has-promo .sidenav{height:calc(100dvh - var(--promo-h))}
@media (max-width:999px){ body.dashboard.has-promo .sidenav{height:auto} }
body.dashboard.has-promo .navtoggle{top:calc(var(--navtoggle-gap,12px) + var(--promo-h))}
@media (max-width:560px){
  body.dashboard.has-promo{--promo-h:46px}
  .promo-bar{font-size:12px;gap:10px;padding:0 12px;justify-content:space-between}
  .promo-bar span{white-space:normal;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .promo-bar b{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .feed-media>img,.feed-ov,.feed-play,.btn-google,.pack,.pack-mini{transition:none}
  .feed-media.loading{animation:none;background:var(--surface-2)}
  .feed-media:hover>img{transform:none}
}
.beli-umur{display:flex;align-items:flex-start;gap:9px;margin:14px 0 0;font-size:13px;color:var(--ink);cursor:pointer}
.beli-umur input{width:16px;height:16px;margin-top:1px;accent-color:var(--accent)}

/* Cloudflare Turnstile: keeps its height while loading so the button below does not jump */
.ts-box{min-height:65px;margin:4px 0 14px}