/* Design Read: ruang kerja pengelola akun karakter AI (affiliate fashion), untuk satu operator yang mengurus beberapa karakter dari laptop, bahasa visual app dashboard bersih dengan kotak warna pastel dan ilustrasi kecil (arahan user), dial ENERGY 2 / RHYTHM 2 / MOTION 2 (transisi halus, geser kartu, panel geser dari bawah di HP; semua mati kalau perangkat minta kurangi gerak).
   Layout: bingkai aplikasi, rail ikon gelap di kiri (9 halaman), topbar dengan pemilih karakter, isi halaman berupa grid kartu.
   Warna: netral abu kebiruan untuk kerangka; kotak pastel (peach, lilac, sage, sky, butter, rose) membedakan jenis info; satu aksen = warna karakter aktif (dipilih di halaman Karakter).
   Tema: sengaja selalu terang (putih) sesuai arahan user, tidak ikut mode gelap perangkat.
   Font: Bricolage Grotesque untuk judul (berkarakter, tetap rapi), Plus Jakarta Sans untuk isi (buatan Jakarta, enak di layar kecil). */
:root{
  --stage:#e8e6f4; --app:#ffffff; --surface:#f5f4f9; --line:#e7e5ee; --line2:#d3d0de; --fg:#1c1a23; --muted:#646172; --label:#45424f; --ink:#1c1a23; --ink-fg:#ffffff;
  --peach:#fdebdf; --lilac:#ece6fb; --sage:#e3f1e6; --sky:#e2eefb; --butter:#faf2d4; --rose:#fbe5ea;
  --ok:#1d6a3d; --ok-bg:#e1f2e6; --warn:#8a4b00; --warn-bg:#fdecd2; --bad:#9b1c2c; --bad-bg:#fbe3e6;
  --acc:#8a1f33; --ring:color-mix(in srgb,var(--acc) 18%,transparent);
  --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --sans:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px;
  color-scheme:light;
}
html,body{height:100%}
body{margin:0;background:var(--stage);color:var(--fg);font-family:var(--sans);font-size:14px;line-height:1.5}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.shell{display:grid;grid-template-columns:96px 1fr;gap:0;max-width:1320px;margin:0 auto;min-height:100%;box-sizing:border-box;padding:20px}
.frame{display:contents}
/* rail */
.rail{position:sticky;top:20px;z-index:10;align-self:start;height:calc(100vh - 40px);display:flex;flex-direction:column;align-items:center;gap:14px;padding-block:6px}
.logo{width:48px;height:48px;border-radius:16px;background:var(--acc);display:grid;place-items:center;color:#fff}
.logo svg{width:26px;height:26px}
.navpill{display:flex;flex-direction:column;gap:6px;background:var(--ink);padding:8px;border-radius:32px}
.navbtn{width:64px;height:58px;border-radius:22px;border:0;background:transparent;color:var(--ink-fg);opacity:.6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;position:relative;padding:0}
.navlbl{font-size:10.5px;font-weight:700;letter-spacing:.01em;line-height:1}
.navbtn svg{width:21px;height:21px}
.navbtn[aria-current="page"]{background:var(--ink-fg);color:var(--ink);opacity:1}
.navbtn:hover{opacity:1}
.navbtn .dot{position:absolute;top:7px;right:13px;width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 2px var(--ink)}
.tip{position:absolute;left:58px;top:50%;transform:translateY(-50%);background:var(--ink);color:var(--ink-fg);font-size:12px;font-weight:600;padding:5px 10px;border-radius:8px;white-space:nowrap;pointer-events:none;opacity:0;z-index:5}
.navbtn:hover .tip,.navbtn:focus-visible .tip{opacity:1}
/* main */
.main{background:var(--app);border-radius:var(--r-xl);padding:26px 30px 34px;min-width:0;display:flex;flex-direction:column;gap:22px;box-shadow:0 30px 60px -40px rgba(20,16,40,.35)}
.top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hello{flex:1;min-width:200px}
.hello h1{margin:0;font-family:var(--display);font-weight:700;font-size:26px;line-height:1.15}
.hello p{margin:2px 0 0;color:var(--muted);font-size:13px}
.hello p b{color:var(--acc);font-weight:600}
.charsel{position:relative}
.charbtn{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--app);border-radius:999px;padding:5px 14px 5px 5px;cursor:pointer}
.charbtn .av{width:36px;height:36px}
.charbtn span{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.charbtn small{color:var(--muted);font-size:11px}
.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:240px;background:var(--app);border:1px solid var(--line);border-radius:var(--r-md);padding:6px;z-index:20;box-shadow:0 18px 40px -18px rgba(0,0,0,.35)}
.menu button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;padding:8px;border-radius:10px;cursor:pointer;text-align:left}
.menu button:hover{background:var(--surface)}
.menu .av{width:30px;height:30px}
.av{border-radius:50%;object-fit:cover;background:var(--lilac);display:grid;place-items:center;font-weight:700;color:var(--acc);flex:none;overflow:hidden}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:999px;padding:10px 18px;font-weight:600;cursor:pointer;background:var(--ink);color:var(--ink-fg);text-decoration:none;white-space:nowrap}
.btn svg{width:17px;height:17px}
.btn.acc{background:var(--acc);color:#fff}
.btn.ghost{background:var(--app);color:var(--fg);border-color:var(--line)}
.btn.soft{background:var(--surface);color:var(--fg)}
.btn.sm{padding:7px 12px;font-size:13px}
.btn.danger{background:transparent;color:var(--bad);border-color:var(--line)}
.btn[disabled]{opacity:.5;cursor:default}
.iconbtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--app);display:grid;place-items:center;cursor:pointer}
.iconbtn svg{width:18px;height:18px}
/* page head */
.phead{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.phead h2{margin:0;font-family:var(--display);font-weight:700;font-size:34px;line-height:1.05;letter-spacing:-.01em;flex:1;min-width:220px}
.phead h2 small{display:block;font-family:var(--sans);font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0;margin-top:6px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--app);border-radius:999px;padding:7px 14px;font-weight:600;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--ink-fg);border-color:var(--ink)}
/* grid & cards */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
.card{border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;background:var(--app);min-width:0;display:flex;flex-direction:column;gap:12px}
.card h3{margin:0;font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.card h3 .sp{flex:1}
.box{border-radius:var(--r-lg);padding:16px;min-width:0;display:flex;flex-direction:column;gap:8px}
.peach{background:var(--peach)} .lilac{background:var(--lilac)} .sage{background:var(--sage)} .sky{background:var(--sky)} .butter{background:var(--butter)} .rose{background:var(--rose)}
.tile .ico{width:38px;height:38px;border-radius:12px;background:var(--app);display:grid;place-items:center}
.tile .ico svg{width:19px;height:19px}
.tile .lbl{font-size:13px;color:var(--muted);font-weight:600}
.tile .num{font-family:var(--display);font-size:30px;font-weight:700;line-height:1}
.tile .sub{font-size:12px;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:12px}
.hero{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;border-radius:var(--r-lg);padding:20px;background:var(--lilac)}
.hero .av{width:84px;height:84px;font-size:30px;box-shadow:0 0 0 4px var(--app)}
.hero h3{margin:0;font-family:var(--display);font-size:24px}
.hero p{margin:4px 0 0;color:var(--muted)}
.hero .illo{width:150px}
.illo{display:block;max-width:100%;height:auto}
.plats{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.pt{display:inline-flex;align-items:center;gap:6px;background:var(--app);border-radius:999px;padding:4px 10px 4px 4px;font-size:12px;font-weight:600}
.pbadge{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:800;flex:none}
.pbadge.lg{width:42px;height:42px;border-radius:13px;font-size:16px}
.list{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row .grow{flex:1;min-width:0}
.row .grow b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .grow span{display:block;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.time{font-variant-numeric:tabular-nums;font-weight:700;font-size:13px;background:var(--surface);border-radius:8px;padding:4px 8px}
.pill{font-size:11px;font-weight:700;border-radius:999px;padding:3px 9px;white-space:nowrap}
.st-baru,.st-ide{background:var(--sky);color:var(--fg)}
.st-draf{background:var(--butter);color:var(--fg)}
.st-siap{background:var(--lilac);color:var(--fg)}
.st-terkirim,.st-terposting{background:var(--ok-bg);color:var(--ok)}
.st-lewati{background:var(--surface);color:var(--muted)}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:26px 16px;border:1px dashed var(--line);border-radius:var(--r-lg)}
.empty .illo{width:150px}
.empty b{font-size:15px}
.empty p{margin:0;color:var(--muted);max-width:42ch}
/* forms
   Form dibangun sebagai ruang kerja, bukan daftar isian: panel abu berisi kartu putih per bagian (.fsec),
   tiap kartu punya judul + satu kalimat keterangan, lalu kolomnya. Kolom isian satu gaya di semua halaman:
   tinggi 44px (target sentuh), garis tipis, fokus = garis aksen + cincin tipis aksen (pengganti outline). */
form.panel{border-radius:var(--r-lg);background:var(--surface);padding:20px;display:flex;flex-direction:column;gap:14px}
form.panel h3{margin:0;font-size:16px}
form.panel h3.fclose{display:flex;align-items:center;gap:8px}
form.panel h3.fclose .sp{flex:1}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f.full{grid-column:1 / -1}
.f label{font-size:12.5px;font-weight:600;color:var(--label)}
.f :is(input:not([type=file]):not([type=checkbox]):not([type=radio]),select,textarea),.rowin input,.rowin select{border:1px solid var(--line);background:var(--app);border-radius:12px;padding:10px 13px;min-height:44px;width:100%;box-sizing:border-box;min-width:0;line-height:1.4}
.f textarea{resize:vertical;min-height:72px}
.f .hint{font-size:12px;color:var(--muted)}
::placeholder{color:var(--muted);opacity:1}
/* select: panah sendiri supaya sama di semua browser */
.f select,.rowin select{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646172' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;background-size:16px;cursor:pointer}
@media (hover:hover){.f :is(input,select,textarea):hover,.rowin :is(input,select):hover{border-color:var(--line2)}}
.f :is(input,select,textarea):focus,.rowin :is(input,select):focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--ring)}
/* kolom dengan awalan, mis. "Rp" di kolom harga */
.affix{display:flex;align-items:center;border:1px solid var(--line);background:var(--app);border-radius:12px;min-height:44px;box-sizing:border-box;padding-left:13px;gap:6px;color:var(--muted);font-weight:600;font-size:13px}
.f .affix input{border:0!important;box-shadow:none!important;padding-left:0;background:transparent;min-height:42px}
.affix:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--ring)}
/* kartu bagian di dalam form */
.fsec,.thbox{display:flex;flex-direction:column;gap:12px;background:var(--app);border:1px solid var(--line);border-radius:var(--r-md);padding:16px;min-width:0}
.fsec-h{display:flex;flex-direction:column;gap:2px}
.fsec-h b{font-size:14px;font-weight:700}
.fsec-h span{font-size:12px;color:var(--muted)}
.fsecs{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;align-items:start}
.fcol{display:flex;flex-direction:column;gap:14px;min-width:0}
.fhead{display:flex;align-items:center;gap:10px}
.fhead h3{flex:1}
/* bilah simpan: menempel di bawah layar selama form panjang di-scroll */
.formbar{position:sticky;bottom:16px;z-index:5;display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--app);border:1px solid var(--line);border-radius:999px;padding:8px;box-shadow:0 16px 32px -20px rgba(20,16,40,.45)}
.formbar .sp{flex:1}
.formbar .err{flex-basis:100%;order:5;padding:0 12px 4px}
.err:empty{display:none}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.err{color:var(--bad);font-size:13px;margin:0}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.sw{width:34px;height:34px;border-radius:50%;border:3px solid var(--app);box-shadow:0 0 0 1px var(--line);cursor:pointer}
.sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--fg)}
/* comments */
.cmt{border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;display:flex;flex-direction:column;gap:10px}
.cmt .who{display:flex;align-items:center;gap:10px}
.cmt .who b{font-weight:700}
.cmt .who .sp{flex:1}
.cmt q{display:block;quotes:none;background:var(--surface);border-radius:14px 14px 14px 4px;padding:10px 12px}
.cmt textarea{border:1px solid var(--line);background:var(--app);border-radius:14px 14px 4px 14px;padding:10px 12px;width:100%;box-sizing:border-box;min-height:64px;resize:vertical}
/* calendar */
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.day{border-radius:var(--r-md);background:var(--surface);padding:10px;display:flex;flex-direction:column;gap:8px;min-height:150px;min-width:0}
.day.today{background:var(--lilac)}
.day .dh{display:flex;align-items:baseline;justify-content:space-between}
.day .dh b{font-family:var(--display);font-size:20px}
.day .dh span{font-size:12px;color:var(--muted);font-weight:600}
.slot{box-sizing:border-box;border-radius:12px;background:var(--app);padding:8px;display:flex;flex-direction:column;gap:4px;cursor:pointer;border:0;text-align:left;width:100%}
.slot .t{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:12px;font-weight:700}
.slot p{margin:0;font-size:12px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.addday{border:1px dashed var(--line);background:transparent;border-radius:10px;padding:6px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;margin-top:auto}
/* chart */
.chartwrap{position:relative}
.chartwrap svg{display:block;width:100%;height:auto;overflow:visible}
.ctip{position:absolute;pointer-events:none;background:var(--ink);color:var(--ink-fg);font-size:12px;padding:6px 9px;border-radius:8px;white-space:nowrap;transform:translate(-50%,-115%)}
.tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{text-align:left;padding:9px 8px;border-top:1px solid var(--line);font-size:13px}
.tbl th{color:var(--muted);font-weight:600;border-top:0}
.tbl td.n,.tbl th.n{text-align:right}
.scroll{overflow-x:auto}
.demo{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:var(--butter);color:var(--warn);border-radius:6px;padding:2px 6px;white-space:nowrap}
.demobar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-radius:var(--r-md);padding:12px 14px;background:var(--butter);font-size:13px}
.demobar span{flex:1;min-width:200px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--ink-fg);padding:10px 16px;border-radius:999px;font-weight:600;font-size:13px;z-index:50}
.banner{border-radius:var(--r-md);padding:12px 14px;background:var(--warn-bg);color:var(--warn);font-size:13px}
.persona{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.preview{border-radius:var(--r-lg);padding:16px;background:var(--surface);display:flex;flex-direction:column;gap:10px}
.post{background:var(--app);border-radius:16px;padding:12px 14px;display:flex;gap:10px}
.post .av{width:34px;height:34px}
.post p{margin:2px 0 0;white-space:pre-wrap}
.charcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.cc{border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;display:flex;align-items:center;gap:12px;background:var(--app);cursor:pointer;text-align:left}
.cc[aria-current="true"]{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.cc .av{width:46px;height:46px}
.cc span{display:flex;flex-direction:column;min-width:0}
.cc small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---- interaktif ---- */
.pbody{display:flex;flex-direction:column;gap:22px;min-width:0}
button.box{border:0;text-align:left;cursor:pointer;font:inherit;color:inherit;width:100%}
.tile .top2{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.tile[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--fg)}
.tile[aria-pressed="false"] .num{opacity:.85}
.spark{display:block;flex:none;overflow:visible}
.up{color:var(--ok);font-weight:700}
.down{color:var(--bad);font-weight:700}
.rowbtn{width:100%;border:0;border-top:1px solid var(--line);background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:0}
.rowbtn:first-child{border-top:0}
.rowbtn:hover{background:var(--surface)}
.seg{display:inline-flex;background:var(--surface);border-radius:999px;padding:4px;gap:2px;flex:none}
.seg button{border:0;background:transparent;border-radius:999px;padding:6px 13px;font-weight:600;font-size:13px;cursor:pointer;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--app);color:var(--fg);box-shadow:0 1px 3px rgba(20,16,40,.14)}
.filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filters .sp{flex:1}
.navlbl{min-width:0}
.legend{display:flex;gap:6px;flex-wrap:wrap}
.lg{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--app);border-radius:999px;padding:5px 12px 5px 10px;font-size:12px;font-weight:600;cursor:pointer}
.lg i{width:16px;height:3px;border-radius:2px;display:block}
.lg[aria-pressed="false"]{opacity:.5;text-decoration:line-through}
.lg[aria-pressed="false"] i{background:var(--line)!important}
.swatch{width:10px;height:10px;border-radius:50%;display:inline-block}
.ctip{line-height:1.45}
.ctip b{display:block;font-weight:700}
.ctip .r{display:flex;align-items:center;gap:6px}
.ctip i{width:8px;height:8px;border-radius:50%;display:block;box-shadow:0 0 0 1.5px var(--ink-fg)}
.tbl tr.dim td{opacity:.55}
kbd{font-family:var(--sans);font-size:11px;font-weight:700;background:var(--app);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:0 6px;color:var(--fg);line-height:18px;display:inline-block}
.search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:9px 10px 9px 14px;color:var(--muted);cursor:pointer;min-width:230px;font-weight:500}
.search svg{width:16px;height:16px;flex:none}
.search kbd{margin-left:auto}
.search:hover{color:var(--fg)}
.toast{display:flex;align-items:center;gap:12px}
.tact{border:0;background:transparent;color:var(--ink-fg);font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0}
/* jadwal */
.slot{position:relative;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab}
.slot .ttl{display:block}
.slot-open{border:0;background:none;padding:0;text-align:left;font:inherit;font-weight:700;font-size:13px;cursor:pointer;color:inherit}
.slot-open:hover{text-decoration:underline;text-underline-offset:2px}
.stbtn{border:0;cursor:pointer;margin-left:auto;font-family:inherit}
.stbtn:hover{box-shadow:inset 0 0 0 1px rgba(20,16,40,.25)}
.slot.dragging{opacity:.35}
.dragghost{position:fixed!important;left:0;top:0;z-index:60;pointer-events:none;margin:0;box-shadow:0 20px 36px -12px rgba(20,16,40,.45)}
.day.drop,.mcell.drop{box-shadow:inset 0 0 0 2px var(--acc);background:var(--app)}
body.is-dragging,body.is-dragging *{cursor:grabbing!important;user-select:none}
.month{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.mhead{font-size:12px;font-weight:700;color:var(--muted);padding:0 6px}
.mcell{background:var(--surface);border-radius:12px;min-height:108px;padding:6px;display:flex;flex-direction:column;gap:4px;min-width:0}
.mcell.out{opacity:.5}
.mcell.today{background:var(--lilac)}
.mnum{border:0;background:none;font-family:var(--display);font-weight:700;font-size:15px;padding:1px 7px;border-radius:8px;cursor:pointer;align-self:flex-start;color:inherit}
.mnum:hover{background:var(--app)}
.minis{display:flex;flex-direction:column;gap:3px;min-width:0}
.slot.mini{flex-direction:row;align-items:center;gap:6px;padding:4px 6px;border-radius:8px}
.slot.mini .slot-open{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.sdot{width:8px;height:8px;border-radius:50%;flex:none}
.sd-ide{background:#2a78d6}.sd-draf{background:#c98500}.sd-siap{background:#6250d6}.sd-terposting{background:var(--ok)}
.more{border:0;background:none;font-size:11px;font-weight:700;color:var(--muted);text-align:left;padding:0 6px;cursor:pointer}
.more:hover{color:var(--fg)}
.hintline{margin:0;font-size:12px;color:var(--muted)}
/* komentar */
.inbox{display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:16px;align-items:start}
.clist{display:flex;flex-direction:column;gap:6px;min-width:0}
.crow{position:relative;border-radius:16px;background:var(--app);border:1px solid var(--line)}
.crow:hover{border-color:#d6d3e0}
.crow[aria-current="true"]{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc);background:var(--surface)}
.crow .open{width:100%;border:0;background:none;text-align:left;padding:10px 12px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:3px 10px;align-items:center;cursor:pointer;font:inherit;color:inherit;border-radius:16px}
.who2{display:flex;align-items:center;gap:6px;min-width:0}
.who2 b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who2 small{font-size:11px;white-space:nowrap}
.crow .txt{grid-column:2 / 4;color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qa{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--app);box-shadow:0 6px 16px -8px rgba(20,16,40,.35);opacity:0;pointer-events:none}
.crow:hover .qa,.crow:focus-within .qa{opacity:1;pointer-events:auto}
.iconbtn.sm{width:32px;height:32px}
.iconbtn.sm svg{width:16px;height:16px}
.iconbtn[disabled]{opacity:.4;cursor:default}
.cpanel{position:sticky;top:20px;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;display:flex;flex-direction:column;gap:12px;background:var(--app);min-width:0}
.cpanel .who{display:flex;align-items:center;gap:12px}
.cpanel .who .sp{flex:1}
.cpanel q{display:block;quotes:none;background:var(--surface);border-radius:14px 14px 14px 4px;padding:12px 14px;font-size:15px}
.cpanel textarea{border:1px solid var(--line);background:var(--app);border-radius:14px 14px 4px 14px;padding:12px 14px;width:100%;box-sizing:border-box;min-height:96px;resize:vertical}
.cfoot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px}
.keys{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted);flex:1;min-width:200px}
.keys kbd{margin-right:2px}
.cnav{display:flex;align-items:center;gap:6px;margin-left:auto}
.mclose,.scrim{display:none}
/* cari cepat */
.palbg{position:fixed;inset:0;background:rgba(20,16,40,.32);z-index:70;display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px}
.pal{width:min(580px,100%);background:var(--app);border-radius:20px;box-shadow:0 30px 60px -20px rgba(20,16,40,.45);overflow:hidden;display:flex;flex-direction:column;max-height:70vh}
.pal .pin{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);color:var(--muted)}
.pal .pin svg{width:18px;height:18px;flex:none}
.pal input{flex:1;border:0;outline:0;font-size:16px;background:transparent;min-width:0;color:var(--fg)}
.pal ul{list-style:none;margin:0;padding:6px;overflow:auto}
.pal .grp{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding:10px 10px 4px}
.pal [role="option"]{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;cursor:pointer}
.pal [role="option"][aria-selected="true"]{background:var(--surface)}
.pal .ic{width:30px;height:30px;border-radius:10px;background:var(--surface);display:grid;place-items:center;flex:none}
.pal [aria-selected="true"] .ic{background:var(--app)}
.pal .ic svg{width:16px;height:16px}
.pal .l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal small{color:var(--muted);font-size:12px;white-space:nowrap}
.pal .none{padding:24px;text-align:center;color:var(--muted)}
.pal .pfoot{border-top:1px solid var(--line);padding:8px 14px;font-size:12px;color:var(--muted);display:flex;gap:16px;flex-wrap:wrap}
@media (max-width:760px){
  .search{min-width:0;padding:10px;border-radius:50%}
  .search .stx,.search kbd{display:none}
  .newpost span{display:none}
  .newpost{padding:10px}
  .inbox{grid-template-columns:1fr}
  .cpanel{display:none}
  .inbox.open .cpanel{display:flex;position:fixed;left:0;right:0;bottom:0;top:auto;max-height:88vh;overflow:auto;border-radius:24px 24px 0 0;z-index:45;box-shadow:0 -20px 40px -20px rgba(0,0,0,.35);padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  .inbox.open .scrim{display:block;position:fixed;inset:0;background:rgba(20,16,40,.35);z-index:44}
  .mclose{display:grid}
  .keys{display:none}
  .qa{display:none}
  .month{gap:3px}
  .mhead{padding:0 2px;text-align:center}
  .mcell{min-height:58px;padding:3px;border-radius:9px;align-items:center}
  .mnum{font-size:13px;padding:1px 4px;align-self:center}
  .minis{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:3px}
  .slot.mini{padding:2px;background:transparent}
  .slot.mini .slot-open{display:none}
  .more{padding:0;font-size:10px}
  .palbg{padding-top:8vh}
}

/* produk */
.storebox{gap:10px}
.storehead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.storehead .ico{width:38px;height:38px;border-radius:12px;background:var(--app);display:grid;place-items:center;flex:none}
.storehead .ico svg{width:19px;height:19px}
.storehead a.small{display:block;color:var(--fg);font-weight:600;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.storestats{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.storestats b{color:var(--fg);font-size:15px}
.warnline{color:var(--warn)}
.warnline b{color:var(--warn)}
.psearch{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:0 14px;height:40px;background:var(--app);color:var(--muted);min-width:200px}
.psearch svg{width:16px;height:16px;flex:none}
.psearch input{border:0;outline:0;background:transparent;flex:1;min-width:0;color:var(--fg)}
.psearch:focus-within{outline:2px solid var(--acc);outline-offset:2px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.ptable{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.prow{display:grid;grid-template-columns:52px minmax(0,2.4fr) 120px 110px 110px 110px 44px;gap:14px;align-items:center;padding:8px 14px;border-top:1px solid var(--line);background:var(--app)}
.prow:first-child{border-top:0}
.prow:not(.phead2):hover{background:var(--surface)}
.prow.off .pthumb img{opacity:.45;filter:grayscale(.6)}
.phead2{background:var(--surface);font-size:12px;font-weight:600;color:var(--muted);padding-block:10px}
.pthumb{width:52px;height:64px;border-radius:10px;overflow:hidden;border:0;padding:0;background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.pthumb img{width:100%;height:100%;object-fit:cover;display:block}
.pthumb svg{width:18px;height:18px}
.pinfo{min-width:0;display:flex;flex-direction:column;gap:3px}
.pinfo .pcname{-webkit-line-clamp:1}
.pmeta2{font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.tagd.sm{font-size:10px;padding:1px 7px;box-shadow:none;background:var(--lilac)}
.tagd.sm.off{background:var(--ink);color:var(--ink-fg)}
.tagd.sm.warn{background:var(--warn-bg);color:var(--warn)}
.pcol{font-size:13px;font-variant-numeric:tabular-nums;min-width:0}
.c-price{display:flex;flex-direction:column;line-height:1.25}
.c-price s{font-size:11px;color:var(--muted)}
.c-act{justify-self:end}
.pgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.pgrid .pcimg{aspect-ratio:1/1}
.pgrid .pcbody{padding:8px 10px 10px}
.pgrid .pcname{font-size:13px}
@media (max-width:1080px){.prow{grid-template-columns:52px minmax(0,1fr) 100px 90px 44px}.prow .c-sold,.prow .c-com,.phead2 .pc3,.phead2 .pc5{display:none}}
@media (max-width:760px){.phead2{display:none}.prow{grid-template-columns:48px minmax(0,1fr) 40px;gap:10px;padding:8px 10px}.prow .c-price,.prow .c-buy{grid-column:2;display:flex;flex-direction:row;gap:8px;align-items:baseline}.prow .c-buy::before{content:attr(data-l) ":";color:var(--muted);font-size:12px}.prow .c-act{grid-row:1;grid-column:3}.pthumb{width:48px;height:60px;grid-row:span 3}}

.pc{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--app);display:flex;flex-direction:column;min-width:0}
.pc.off .pcimg img{opacity:.45;filter:grayscale(.6)}
.pcimg{position:relative;display:block;width:100%;aspect-ratio:3/4;border:0;padding:0;background:var(--surface);cursor:pointer}
.pcimg img{width:100%;height:100%;object-fit:cover;display:block}
.noph{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;color:var(--muted);font-size:12px;font-weight:600}
.noph svg{width:24px;height:24px}
.pcbadges{position:absolute;left:8px;right:48px;top:8px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.pcbadges .tagd{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tagd{font-size:11px;font-weight:700;background:var(--app);color:var(--fg);border-radius:999px;padding:3px 9px;box-shadow:0 2px 8px -3px rgba(0,0,0,.3)}
.tagd.off{background:var(--ink);color:var(--ink-fg)}
.pcbody{padding:10px 12px 12px;display:flex;flex-direction:column;gap:3px;min-width:0}
.pcname{all:unset;cursor:pointer;font-weight:700;font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcname:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
.pcprice{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.pcprice s{font-size:12px;color:var(--muted)}
.disc{font-size:11px;font-weight:700;color:var(--bad);background:var(--bad-bg);border-radius:6px;padding:1px 6px}
.pcmeta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pceye{position:absolute;right:8px;top:8px;background:var(--app)}
.chip.tog{display:inline-flex;align-items:center;gap:8px}
.chip.tog .box2{width:18px;height:18px;border-radius:6px;border:1.5px solid var(--muted);display:grid;place-items:center;flex:none}
.chip.tog[aria-pressed="true"] .box2{border-color:var(--ink-fg);background:var(--ink-fg);color:var(--ink)}
.chip.tog .box2 svg{width:13px;height:13px}
.pthumbs{display:flex;gap:10px;flex-wrap:wrap}
.pthumbs figure{position:relative;margin:0;width:84px}
.pthumbs img{width:84px;aspect-ratio:3/4;object-fit:cover;border-radius:12px;display:block}
.pthumbs figcaption{position:absolute;left:6px;bottom:6px;font-size:10px;font-weight:700;background:var(--ink);color:var(--ink-fg);border-radius:6px;padding:1px 6px}
.pthumbs .rm,.pthumbs .mkcover{position:absolute;width:26px;height:26px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;background:var(--ink);color:var(--ink-fg)}
.pthumbs .rm{top:-6px;right:-6px}
.pthumbs .mkcover{left:6px;bottom:6px;background:var(--app);color:var(--fg);box-shadow:0 2px 6px -2px rgba(0,0,0,.35)}
.pthumbs .rm svg,.pthumbs .mkcover svg{width:14px;height:14px}
.addph{width:84px;aspect-ratio:3/4;border:1.5px dashed var(--line);border-radius:12px;display:grid;place-content:center;justify-items:center;gap:4px;color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;background:var(--app)}
.addph svg{width:20px;height:20px}
.addph:focus-within{outline:2px solid var(--acc);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.rows{display:flex;flex-direction:column;gap:8px}
.rowin{display:grid;gap:8px;align-items:center}
.store3{grid-template-columns:150px minmax(0,1fr) 150px 32px}
.size6{grid-template-columns:minmax(0,1.2fr) repeat(4,minmax(0,1fr)) 32px}
.rhead span{font-size:11px;font-weight:600;color:var(--muted);padding-left:4px}
@media (max-width:760px){.store3{grid-template-columns:1fr 32px}.store3 input[type=url]{grid-column:1 / -1;grid-row:2}.store3 input[type=number]{grid-column:1 / -1;grid-row:3}.size6{grid-template-columns:repeat(3,minmax(0,1fr))}.size6 button{grid-column:3}.rhead{display:none}.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.psearch{flex:1 1 100%}}

/* karakter */
.persona2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px;align-items:start}
.idcard{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--app);overflow:hidden;display:flex;flex-direction:column}
.idtop{display:flex;align-items:center;gap:18px;padding:22px 20px;background:linear-gradient(135deg,color-mix(in srgb,var(--tint) 20%,#fff),color-mix(in srgb,var(--tint) 7%,#fff) 55%,var(--lilac));border-bottom:1px solid var(--line)}
.avedit{position:relative;flex:none;cursor:pointer;border-radius:50%}
.avedit .av{box-shadow:0 0 0 4px var(--app),0 0 0 6px var(--tint)}
.avcam{position:absolute;right:2px;bottom:2px;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--ink-fg);display:grid;place-items:center;box-shadow:0 0 0 3px var(--app)}
.avcam svg{width:17px;height:17px}
.avedit:focus-within{outline:2px solid var(--tint);outline-offset:4px}
.idname{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding-bottom:4px}
.idname input{border:1px solid transparent;background:transparent;border-radius:10px;padding:4px 8px;margin-left:-8px;width:100%;box-sizing:border-box;min-width:0}
.idname input:hover{background:rgba(255,255,255,.6)}
.idname input:focus{outline:none;background:var(--app);border-color:var(--line)}
.bigname{font-family:var(--display);font-size:28px;font-weight:700;line-height:1.1}
.nicheinp{font-size:13px;color:var(--muted)}
.aibadge{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;background:var(--app);border-radius:999px;padding:3px 9px 3px 7px;margin-top:4px}
.aibadge svg{width:13px;height:13px}
.idstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:16px 20px 0}
.ist{border:1px solid var(--line);background:var(--app);border-radius:14px;padding:10px 12px;text-align:left;cursor:pointer;display:flex;flex-direction:column;line-height:1.2;font:inherit;color:inherit}
.ist:hover{background:var(--surface)}
.ist b{font-family:var(--display);font-size:22px}
.ist span{font-size:12px;color:var(--muted)}
.idbody{padding:16px 20px 20px;display:flex;flex-direction:column;gap:14px}
.persona2 textarea{border:1px solid var(--line);background:var(--app);border-radius:14px;padding:11px 13px;width:100%;box-sizing:border-box;resize:none;overflow:hidden;min-height:48px;line-height:1.5}
.persona2 textarea:focus,.vb input:focus,.linkin:focus-within{outline:2px solid var(--tint);outline-offset:1px}
.swatches2{display:flex;gap:10px;flex-wrap:wrap}
.sw2{width:36px;height:36px;border-radius:50%;border:0;background:var(--c);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 0 0 2px var(--app),0 0 0 3px var(--line)}
.sw2[aria-pressed="true"]{box-shadow:0 0 0 2px var(--app),0 0 0 4px var(--c)}
.sw2 svg{width:16px;height:16px}
.linkin{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:14px;padding:4px 4px 4px 12px;background:var(--app);color:var(--muted)}
.linkin svg{width:16px;height:16px;flex:none}
.linkin input{border:0;outline:0;background:transparent;flex:1;min-width:0;padding:7px 0;color:var(--fg)}
.voice2{gap:14px;padding:20px}
.vhead h3{margin:0}
.vhead p{margin:2px 0 0}
.vb{display:flex;flex-direction:column;gap:8px}
.vbh{display:flex;align-items:center;gap:10px}
.vbh label{font-weight:700;font-size:14px;display:block}
.vbh small{display:block;font-size:12px;color:var(--muted)}
.vbi{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none}
.vbi svg{width:16px;height:16px}
.vb input{border:1px solid var(--line);background:var(--app);border-radius:14px;padding:10px 13px;width:100%;box-sizing:border-box;min-width:0}
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pvrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;min-height:6px}
.gchip{font-size:12px;font-weight:600;background:var(--peach);border-radius:999px;padding:3px 10px}
.emo{font-size:20px;line-height:1;width:34px;height:34px;display:grid;place-items:center;background:var(--butter);border-radius:10px}
.tpost{background:var(--surface);border-radius:var(--r-lg);padding:14px;display:flex;flex-direction:column;gap:10px}
.tphead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tpcard{background:var(--app);border-radius:18px;padding:14px;display:flex;gap:12px;box-shadow:0 8px 20px -16px rgba(20,16,40,.4)}
.tpcard .av{width:38px;height:38px}
.tpbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.tpwho{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px}
.tpai{font-size:10px;font-weight:800;background:var(--ink);color:var(--ink-fg);border-radius:5px;padding:1px 5px}
.tptext{margin:0;white-space:pre-wrap;font-size:14px}
.tpacts{display:flex;gap:16px;color:var(--muted);margin-top:4px}
.tpacts svg{width:18px;height:18px}
.savebar{grid-column:1 / -1;position:relative;bottom:16px;z-index:5;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--app);border:1px solid var(--line);border-radius:999px;padding:8px 8px 8px 20px;box-shadow:0 16px 32px -20px rgba(20,16,40,.45)}
.savestate{flex:1;min-width:160px;font-size:13px;color:var(--muted)}
.savestate.on{color:var(--warn);font-weight:600}
.savebar.stick{position:sticky}
.savebar .err{flex-basis:100%;order:5}
.cc{--ring:var(--line)}
.cc .av{box-shadow:0 0 0 2px var(--app),0 0 0 3px var(--ring)}
@media (max-width:1080px){.persona2,.fsecs{grid-template-columns:1fr}}
@media (max-width:760px){.vgrid{grid-template-columns:1fr}.idstats{gap:6px;padding-inline:16px}.idbody{padding-inline:16px}.idtop{padding:18px 16px;gap:14px}.idtop .av{width:84px!important;height:84px!important}.bigname{font-size:24px}.savebar,.formbar{bottom:calc(88px + env(safe-area-inset-bottom,0px));border-radius:20px}form.panel{padding:14px}.fsec,.thbox{padding:14px}}

@media (max-width:1080px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.split,.persona{grid-template-columns:1fr}.week{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .shell{grid-template-columns:1fr;padding:0;padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .main{border-radius:0;padding:18px 16px 24px;box-shadow:none}
  .rail{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;flex-direction:row;justify-content:center;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:var(--app);border-top:1px solid var(--line);z-index:30}
  .logo{display:none}
  .navpill{flex-direction:row;padding:6px}
  .navbtn{width:44px;height:44px}
  .tip{display:none}
  .g2,.g3,.fields{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .week{grid-template-columns:1fr}
  .hero{grid-template-columns:auto 1fr}
  .hero .illo{display:none}
  .phead h2{font-size:28px}
}
@media (prefers-reduced-motion:no-preference){
  .btn,.chip,.navbtn,.slot,.cc,.seg button,.lg,.crow,.rowbtn,.search{transition:transform .12s ease,background-color .15s ease,opacity .15s ease,border-color .15s ease,box-shadow .15s ease}
  .btn:active,.chip:active,.navbtn:active,.seg button:active{transform:scale(.96)}
  .lift{transition:transform .16s ease,box-shadow .16s ease}
  .lift:hover{transform:translateY(-2px);box-shadow:0 14px 26px -18px rgba(20,16,40,.4)}
  button.box.lift:active{transform:translateY(0) scale(.99)}
  .tip{transition:opacity .12s ease}
  .qa{transition:opacity .12s ease}
  .pg-enter{animation:pgIn .24s ease-out both}
  @keyframes pgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .toast{animation:toastIn .2s ease-out}
  @keyframes toastIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
  .pal{animation:popIn .16s ease-out}
  .palbg{animation:fadeIn .16s ease-out}
  @keyframes popIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  .sheet-in{animation:sheetIn .26s cubic-bezier(.2,.8,.2,1) both}
  @keyframes sheetIn{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
  .ctip{transition:left .08s linear,top .08s linear}
  /* Gerak di form (MOTION 2, tanpa loop): in-up = form/kartu yang baru dibuka naik pelan, jadi mata tahu
     di mana dia muncul; in-fade = isi kotak Media saat jenisnya diganti; in-pop = pilihan yang baru diklik
     (chip, segmen, foto baru) sebagai tanda klik diterima; flash = caption yang baru diisi AI disorot sebentar.
     Diputar sekali lewat enter() di studio.js. */
  .in-up{animation:inUp .3s cubic-bezier(.2,.8,.2,1) both}
  @keyframes inUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .in-fade{animation:fadeIn .22s ease-out both}
  .in-pop{animation:inPop .26s cubic-bezier(.3,1.4,.5,1) both}
  @keyframes inPop{from{transform:scale(.9)}to{transform:none}}
  .popmenu{animation:popIn .14s ease-out}
  .popmenu.up{animation:popUp .14s ease-out}
  .calday,.topt{transition:background-color .12s ease,color .12s ease}
  @keyframes popUp{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
  .pickchev svg{transition:transform .15s ease}
  .pickbtn[aria-expanded="true"] .pickchev svg{transform:rotate(180deg)}
  .flash{animation:flash .9s ease-out}
  @keyframes flash{0%{background-color:var(--butter)}100%{background-color:var(--app)}}
  .f :is(input,select,textarea),.rowin :is(input,select),.affix,.iconin,.prop,.compose,.ttlin{transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}
  .capcount span{transition:color .15s ease}
  .chip.tog .box2{transition:background-color .15s ease,border-color .15s ease}
  .formbar .btn.acc:hover{transform:translateY(-1px)}
}


/* ---- hosting sendiri: login, menu Threads, dialog kirim ---- */
.shell.solo{grid-template-columns:1fr;max-width:560px;align-items:start}
.shell.solo .main{margin-top:8vh}
.loginbox{display:flex;flex-direction:column;gap:14px;max-width:380px;width:100%;margin:8px auto}
.loginbox h1{margin:0;font-family:var(--display);font-size:30px;line-height:1.1}
.loginbox p{margin:0}
.railout{margin-top:auto;color:var(--fg);opacity:.55}
.railout:hover{background:var(--app)}
.banner.bad{background:var(--bad-bg);color:var(--bad)}
.banner.ok{background:var(--ok-bg);color:var(--ok)}
.banner a{color:inherit;font-weight:700}
.linkbtn{border:0;background:none;padding:0;font:inherit;color:var(--acc);font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
/* dialog draf seminggu */
.senddlg.wddlg{width:min(900px,calc(100% - 32px))}
.wdtbl td{vertical-align:top}
.wdtbl input:not([type=checkbox]),.wdtbl select{width:100%;min-width:0;box-sizing:border-box}
.wdtbl td:nth-child(3){width:96px}
.wdtbl td:nth-child(4){width:130px}
.wdtbl td:nth-child(5){min-width:220px}
.wdplat{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* carousel di form rencana */
.carlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.caritem{position:relative;display:flex;flex-direction:column;gap:4px}
.caritem img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:10px;background:var(--surface)}
.carnum{position:absolute;left:6px;top:6px;min-width:20px;height:20px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 5px}
.caracts{display:flex;justify-content:center;gap:2px}
.cwarntext{color:var(--warn);margin:0}
.sendcar{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.sendcar img{width:96px;height:120px;object-fit:cover;border-radius:10px;flex:none}
.pvcount{position:absolute;right:8px;top:8px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px}
.pvnav{position:absolute;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#111;display:grid;place-items:center;cursor:pointer}
.pvnav svg{width:16px;height:16px}
.pvnav.prev{left:8px}
.pvnav.next{right:8px}
.pvdots{display:flex;justify-content:center;gap:4px;padding:8px 0 0;background:#fff}
.pvdots span{width:6px;height:6px;border-radius:50%;background:#c7c7c7}
.pvdots span.on{background:#0095f6}
/* tabel angka per posting di Analitik */
.pstbl td{vertical-align:middle}
.psname{display:flex;align-items:center;gap:8px;min-width:180px}
.psname .linkbtn{text-align:left}
/* badge platform + status kirim di kartu Jadwal (pengganti label teks "Terkirim ke ...") */
.pmark{position:relative;display:inline-flex;flex:none;text-decoration:none;border-radius:8px}
.pmk{position:absolute;right:-5px;bottom:-5px;width:14px;height:14px;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 2px var(--app)}
.pmk svg{width:9px;height:9px;stroke-width:3}
.pm-terkirim .pmk{background:var(--ok);color:#fff}
.pm-terjadwal .pmk{background:var(--acc);color:#fff}
.pm-disetujui .pmk,.pm-diproses .pmk{background:var(--sky);color:var(--fg)}
.pm-gagal .pmk{background:var(--bad);color:#fff}
/* platform belum disetujui / jadwal masih isi lama: badge pudar + tanda seru */
.pm-belum .pmk,.pm-lama .pmk{background:var(--warn);color:#fff}
.pm-belum .pbadge{opacity:.45}
.slotwarn{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;font-size:11px;font-weight:700;line-height:1.3;color:var(--warn);background:var(--warn-bg);border-radius:6px;padding:2px 6px}
.slotwarn svg,.mwarn svg{width:12px;height:12px;stroke-width:2.8;flex:none}
.mwarn{display:inline-flex;color:var(--warn);flex:none}
.pm-menghapus .pmk,.pm-dihapus .pmk{background:var(--muted);color:#fff}
.pm-dihapus .pbadge{opacity:.4}
a.pmark:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* editor rencana posting: judul besar (suara display yang sama dengan judul halaman), baris properti
   berbentuk pil kecil, lalu caption sebagai kartu tulis utama karena itu isi yang paling lama dikerjakan. */
.ttlin{font-family:var(--display);font-size:24px;font-weight:700;line-height:1.2;border:1px solid transparent;background:transparent;border-radius:12px;padding:6px 10px;margin:-4px 0 0 -11px;width:calc(100% + 11px);box-sizing:border-box;min-width:0;color:var(--fg)}
.ttlin::placeholder{color:var(--muted);font-weight:600}
@media (hover:hover){.ttlin:hover{background:var(--app)}}
.ttlin:focus{outline:none;background:var(--app);border-color:var(--acc);box-shadow:0 0 0 3px var(--ring)}
.props{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.prop{display:inline-flex;align-items:center;gap:6px;min-height:40px;box-sizing:border-box;background:var(--app);border:1px solid var(--line);border-radius:12px;padding:0 4px 0 11px;color:var(--muted)}
.prop > svg{width:16px;height:16px;flex:none}
.prop input{border:0;background-color:transparent;font-weight:600;font-size:13px;color:var(--fg);padding:8px 4px;min-width:0;border-radius:8px}
.prop input:focus{outline:none}
.prop:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--ring)}
.prop .psep{width:1px;align-self:stretch;margin:9px 4px;background:var(--line)}
/* status memakai warna yang sama dengan label status di kartu Jadwal */
.prop.pstat{border-color:transparent;color:var(--fg)}
.prop.st-ide{background:var(--sky)}
.prop.st-draf{background:var(--butter)}
.prop.st-siap{background:var(--lilac)}
.prop.st-terposting{background:var(--ok-bg)}
/* menu pilihan (pengganti select bawaan). Di kolom form tampil seperti kolom isian; di baris properti
   editor tampil sebagai pil. Menu melayang di atas isi, jadi satu-satunya yang diberi bayangan besar. */
.pick{position:relative;min-width:0}
.pickbtn{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;box-sizing:border-box;border:1px solid var(--line);background:var(--app);border-radius:12px;padding:0 10px 0 13px;cursor:pointer;text-align:left;color:var(--fg);font-weight:500}
.pickbtn > svg{width:16px;height:16px;flex:none;color:var(--muted)}
.pickval{flex:1;min-width:0;display:flex;align-items:center;gap:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pickval .pbadge{width:20px;height:20px;border-radius:6px;font-size:10px}
.pickchev{display:grid;place-items:center;color:var(--muted);flex:none}
.pickchev svg{width:16px;height:16px}
@media (hover:hover){.pickbtn:hover{border-color:var(--line2)}}
.pickbtn:focus{outline:none}
.pickbtn:focus-visible,.pickbtn[aria-expanded="true"]{border-color:var(--acc);box-shadow:0 0 0 3px var(--ring)}
.prop.pick,.prop.dt{padding:0}
.prop .pickbtn{border:0;background:transparent;min-height:38px;padding:0 8px 0 11px;font-weight:600;font-size:13px;gap:6px;box-shadow:none;width:auto}
.prop.dt .pickbtn{padding:0 10px}
.prop .pickbtn:focus-visible,.prop .pickbtn[aria-expanded="true"]{box-shadow:none;background:var(--surface)}
.prop:has(.pickbtn[aria-expanded="true"]),.prop:has(.pickbtn:focus-visible){border-color:var(--acc);box-shadow:0 0 0 3px var(--ring)}
.popmenu{position:fixed;z-index:90;margin:0;padding:6px;background:var(--app);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -18px rgba(20,16,40,.4);box-sizing:border-box;max-width:calc(100vw - 16px)}
.pickmenu{list-style:none;max-height:300px;overflow:auto}
/* kalender */
.calpop{padding:12px;width:292px}
.calhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.calhead b{font-family:var(--display);font-size:16px;text-transform:capitalize}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.calwd{font-size:11px;font-weight:700;color:var(--muted);text-align:center;padding:4px 0}
.calday{height:36px;border:0;border-radius:10px;background:transparent;font:inherit;font-weight:600;font-size:13px;cursor:pointer;color:var(--fg);font-variant-numeric:tabular-nums}
.calday.out{color:var(--muted);opacity:.6}
.calday.today{box-shadow:inset 0 0 0 1.5px var(--acc);color:var(--acc)}
.calday[aria-pressed="true"]{background:var(--acc);color:#fff;box-shadow:none}
@media (hover:hover){.calday:not([aria-pressed="true"]):hover{background:var(--surface)}}
.calday:focus{outline:none}
.calday:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.calfoot{display:flex;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
/* jam */
.timepop{padding:10px;width:176px}
.thead2{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:11px;font-weight:700;color:var(--muted);text-align:center;padding-bottom:6px}
.tcols{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tcol{display:flex;flex-direction:column;gap:2px;max-height:228px;overflow:auto;scrollbar-width:thin;position:relative}
.topt{border:0;background:transparent;border-radius:9px;min-height:34px;font:inherit;font-weight:600;font-size:13px;font-variant-numeric:tabular-nums;cursor:pointer;color:var(--fg);flex:none}
.topt[aria-pressed="true"]{background:var(--acc);color:#fff}
@media (hover:hover){.topt:not([aria-pressed="true"]):hover{background:var(--surface)}}
.topt:focus{outline:none}
.topt:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.pickopt{display:flex;align-items:center;gap:10px;padding:9px 10px;min-height:40px;box-sizing:border-box;border-radius:10px;cursor:pointer;font-size:13.5px;font-weight:500;white-space:nowrap}
.pickopt .grow{flex:1}
.pickopt > svg{width:16px;height:16px;color:var(--acc);flex:none}
.pickopt .pbadge{width:22px;height:22px;border-radius:7px;font-size:10px}
.pickopt[aria-selected="true"]{font-weight:700}
@media (hover:hover){.pickopt:hover{background:var(--surface)}}
.pickopt:focus{outline:none;background:var(--surface);box-shadow:inset 0 0 0 2px var(--ring)}
.wdtbl .pickbtn{min-height:38px}
.store3 .pickbtn{min-height:44px}
.props .chip{min-height:40px;border-radius:12px}
.compose{display:flex;flex-direction:column;gap:10px;background:var(--app);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px 12px}
.compose:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--ring)}
.compose-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.compose-h label{font-weight:700;font-size:14px}
.capcount{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.capcount .bad{color:var(--bad);font-weight:700}
.compose textarea{border:0;outline:none;background:transparent;resize:none;width:100%;box-sizing:border-box;min-height:150px;padding:0;font-size:15px;line-height:1.6;color:var(--fg);overflow:hidden}
.capbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:10px}
.capbar .small{flex:1;min-width:180px}
.iconin{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--app);border-radius:12px;min-height:44px;box-sizing:border-box;padding:0 4px 0 13px;color:var(--muted)}
.iconin svg{width:16px;height:16px;flex:none}
.f .iconin input{border:0!important;box-shadow:none!important;background:transparent;padding-left:0;min-height:42px}
.iconin:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--ring)}
@media (max-width:760px){
  .formbar{flex-wrap:nowrap;gap:6px;padding:6px}
  .formbar .btn{padding:10px 14px}
  .formbar .icomob{padding:10px 12px}
  .formbar .icomob .btxt{display:none}
  .formbar .err{display:none}
  .formbar:has(.err:not(:empty)){flex-wrap:wrap}
  .formbar:has(.err:not(:empty)) .err{display:block}
  .ttlin{font-size:20px}
  .prop{flex:1 1 auto}
  .props .chip{flex:1 1 auto;justify-content:center}
}
/* pratinjau ala HP di samping form rencana; warnanya meniru aplikasi (mode terang), bukan tema Studio */
.pformwrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.pvaside{position:sticky;top:20px}
#pvbox{display:flex;flex-direction:column;gap:10px}
.pvtop{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:34px}
/* Bingkai HP: garis tebal warna tinta dan sudut besar, cukup untuk terbaca "ini layar HP" tanpa gambar perangkat palsu. */
.phone{background:#fff;border:6px solid var(--ink);border-radius:30px;padding:16px 0 14px;max-height:72vh;overflow:auto;box-shadow:0 24px 40px -30px rgba(20,16,40,.55);scrollbar-width:thin}
/* pratinjau toko: warna dan bentuk meniru tema Lemari Lia (cream, coklat espresso, aksen maroon) */
.phone.toko{--tk-bg:#f6f0e6;--tk-sf:#ece3d5;--tk-fg:#2b211a;--tk-mu:#6a5b4c;--tk-ink:#3a2a1f;--tk-acc:#8a1f33;--tk-accbg:#f1dcd8;background:var(--tk-bg);color:var(--tk-fg);padding:16px 14px}
.phone.toko.off .tk-img,.phone.toko.off .tk-media{filter:grayscale(.7)}
.tk-home{display:flex;flex-direction:column;gap:10px}
.tk-card{width:52%;display:flex;flex-direction:column;gap:6px}
.tk-img{position:relative;border-radius:18px;overflow:hidden;background:var(--tk-sf);aspect-ratio:3/4}
.tk-img img{width:100%;height:100%;object-fit:cover;display:block}
.tk-noimg{height:100%;display:grid;place-items:center;font-size:12px;color:var(--tk-mu);text-align:center;padding:8px}
.tk-badge{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:6px;background:var(--tk-bg);color:var(--tk-fg);font-size:10px;font-weight:700;padding:3px 9px 3px 3px;border-radius:999px;max-width:calc(100% - 16px);box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-badge img{width:18px;height:18px;border-radius:50%;object-fit:cover;flex:none}
.tk-badge.mini{padding:2px;gap:0;border-radius:50%;min-width:22px;min-height:22px;justify-content:center}
.tk-ainote{position:absolute;left:10px;right:10px;bottom:10px;background:rgba(20,14,10,.62);color:#fff;font-size:10px;font-weight:600;padding:5px 9px;border-radius:10px}
.pthumbs.ai img{outline:2px solid var(--acc);outline-offset:-2px}
.tk-price{position:absolute;right:8px;bottom:8px;background:var(--tk-ink);color:#faf5ec;font-size:11px;font-weight:700;padding:5px 9px;border-radius:999px;font-variant-numeric:tabular-nums}
.tk-name{margin:0;font-size:13px;font-weight:700;line-height:1.3}
.tk-meta,.tk-note{margin:0;font-size:11px;color:var(--tk-mu)}
.tk-note{padding-top:6px;border-top:1px dashed #ddd1bf}
.tk-detail{display:flex;flex-direction:column;gap:12px;margin:-16px -14px 0}
.tk-media{position:relative;aspect-ratio:4/5;background:var(--tk-sf);overflow:hidden}
.tk-media img{width:100%;height:100%;object-fit:cover;display:block}
.tk-count{position:absolute;right:10px;bottom:10px;background:rgba(58,42,31,.8);color:#faf5ec;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px}
.tk-body{display:flex;flex-direction:column;gap:10px;padding:0 14px}
.tk-body .tk-badge{position:static;align-self:flex-start;background:var(--tk-sf)}
.tk-h{margin:0;font-size:18px;font-weight:800;line-height:1.2}
.tk-shop{margin:-6px 0 0;font-size:12px;color:var(--tk-mu)}
.tk-pricebox{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tk-pricebox b{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.tk-pricebox s{font-size:12px;color:var(--tk-mu)}
.tk-disc{font-size:11px;font-weight:700;color:var(--tk-acc);background:var(--tk-accbg);border-radius:6px;padding:1px 6px}
.tk-row{display:flex;flex-direction:column;gap:6px;font-size:12px}
.tk-lbl{font-size:11px;font-weight:700;color:var(--tk-mu)}
.tk-chips{display:flex;flex-wrap:wrap;gap:6px}
.tk-chip{background:var(--tk-sf);border-radius:999px;padding:4px 10px;font-size:11px;font-weight:600}
.tk-buy{display:flex;flex-direction:column;gap:6px}
.tk-btn{display:block;text-align:center;background:var(--tk-ink);color:#faf5ec;border-radius:999px;padding:10px;font-size:12px;font-weight:700}
.tk-btn.light{background:var(--tk-sf);color:var(--tk-fg)}
.tk-fine{font-size:10px;color:var(--tk-mu);text-align:center}
.tk-warn{margin:0;font-size:11px;font-weight:600;color:#8a4b00;background:#fdebd0;border-radius:10px;padding:8px 10px}
.tk-info{margin:0;font-size:12px;white-space:pre-wrap;color:var(--tk-fg)}
.tk-rev{display:flex;flex-direction:column;gap:6px;padding-bottom:4px}
.tk-rev q{display:block;quotes:none;font-size:12px;background:var(--tk-sf);border-radius:14px 14px 14px 4px;padding:8px 10px}
.pvpost{display:flex;flex-direction:column;gap:9px;font-size:13px;line-height:1.45;color:#0c0c0c}
.pvhead{display:flex;align-items:center;gap:9px;padding:0 12px}
.pvhead b{display:block;font-size:13px}
.pvsub{display:block;font-size:11px;color:#6b6b6b}
.pvav{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none;background:var(--surface);display:grid;place-items:center;font-weight:700}
.pvmedia{position:relative;background:#efefef}
.pvmedia.reel{aspect-ratio:9/16;max-height:440px;overflow:hidden}
.pvimg{display:block;width:100%;height:auto}
.pvmedia.reel .pvimg{width:100%;height:100%;object-fit:cover}
.pvreel{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:4px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px}
.pvreel svg{width:12px;height:12px}
.pvempty{padding:44px 18px;text-align:center;color:#6b6b6b;font-size:12px}
.pvacts{display:flex;gap:15px;padding:0 12px}
.pvacts svg{width:22px;height:22px}
.pvcap{margin:0;padding:0 12px;white-space:pre-wrap;overflow-wrap:anywhere}
.pvtag{color:#00376b}
.pvfaint{color:#6b6b6b}
.pvmore{border:0;background:none;padding:0;font:inherit;color:#6b6b6b;cursor:pointer}
.pvmore:hover{text-decoration:underline}
.pvmeta{margin:0;padding:0 12px;font-size:11px;color:var(--muted)}
.pvmeta.bad{color:var(--bad);font-weight:700}
/* Dengan pratinjau di samping, bagian form produk satu kolom supaya baris link toko (toko, URL, harga) tetap lega. */
.pformwrap .fsecs{grid-template-columns:1fr}
@media (max-width:1100px){
  .pformwrap{grid-template-columns:minmax(0,1fr)}
  .pvaside{position:static;max-width:380px}
  .phone{max-height:none}
}
/* kotak Foto, Threads, dan Instagram di form rencana (gaya kartu sama dengan .fsec) */
.thhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.thbox p{margin:0}
.thhead svg{width:18px;height:18px}
.photorow{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.photorow .grow{flex:1;min-width:200px;display:flex;flex-direction:column;gap:6px}
.photoprev{width:96px;height:120px;border-radius:var(--r-md);object-fit:cover;background:var(--surface);flex:none}
.photoprev.empty{display:grid;place-items:center;color:var(--muted)}
.photoprev.empty svg{width:28px;height:28px}
.fitpick{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.fitpick .seg{flex-wrap:wrap}
.thhead .seg{margin-left:4px}
.progress{height:6px;border-radius:999px;background:var(--surface);overflow:hidden;max-width:320px}
.progress span{display:block;height:100%;background:var(--acc);transition:width .2s}
video.photoprev{background:#000}
/* foto yang gagal dimuat dua kali: kotak keterangan, klik untuk coba lagi */
.imgfail{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;border:1.5px dashed var(--line2);background:var(--surface);color:var(--muted);font:inherit;font-size:11px;font-weight:600;line-height:1.3;text-align:center;padding:8px;cursor:pointer;border-radius:var(--r-md)}
.imgfail svg{width:20px;height:20px;flex:none}
@media (hover:hover){.imgfail:hover{color:var(--fg);border-color:var(--muted)}}
.pvimg.imgfail{width:100%;min-height:180px;border-radius:0}
.caritem .imgfail{width:100%;aspect-ratio:4/5;border-radius:10px}
.sendcar .imgfail{width:96px;height:120px;flex:none;border-radius:10px}
/* halaman Threads dan Instagram */
.steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;max-width:62ch}
.igthumb{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none;background:var(--surface)}
.thconnect{flex-direction:row;align-items:center;gap:18px;flex-wrap:wrap}
.thconnect .illo{width:150px}
.thconnect .grow{flex:1;min-width:220px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.thconnect p{margin:0;max-width:62ch}
.thhero p{overflow-wrap:anywhere}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.mtile{background:var(--surface);border-radius:var(--r-md);padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.mtile .num{font-family:var(--display);font-size:24px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.mtile .lbl{font-size:12px;color:var(--muted);font-weight:600}
/* dialog Setujui & kirim */
.senddlg{border:0;padding:0;border-radius:var(--r-lg);width:min(560px,calc(100% - 32px));max-height:calc(100vh - 48px);overflow:auto;background:var(--app);color:var(--fg);box-shadow:0 30px 60px -20px rgba(20,16,40,.45)}
.senddlg::backdrop{background:rgba(20,16,40,.4)}
.sendbody{display:flex;flex-direction:column;gap:12px;padding:22px}
.sendbody h2{margin:0;font-family:var(--display);font-size:24px}
.sendbody p{margin:0}
.sendbody q{display:block;quotes:none;background:var(--surface);border-radius:14px 14px 14px 4px;padding:10px 12px;font-size:13px}
.sendtext{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--butter);border-radius:var(--r-md);padding:14px 16px;font-size:15px}
.sendimg{max-width:100%;max-height:260px;border-radius:var(--r-md);object-fit:contain;align-self:flex-start}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.checks li{border-radius:var(--r-sm);padding:8px 12px;font-size:13px;background:var(--surface)}
.checks .cerr{background:var(--bad-bg);color:var(--bad)}
.checks .cwarn{background:var(--warn-bg);color:var(--warn)}
.checks .cok{background:var(--ok-bg);color:var(--ok)}
.tick{display:flex;gap:10px;align-items:flex-start;font-size:13px;cursor:pointer}
.tick input{width:18px;height:18px;margin-top:2px;accent-color:var(--acc);flex:none}
@media (prefers-reduced-motion:no-preference){.senddlg[open]{animation:popIn .16s ease-out}}
@media (max-width:760px){
  .navpill{gap:2px;width:100%;max-width:440px;justify-content:space-between}
  .navbtn{width:auto;flex:1 1 0;min-width:0;max-width:44px}
  .railout{display:none}
  .thconnect .illo{display:none}
  .sendbody{padding:18px 16px}
}
/* menu akun dan halaman pengguna */
.menusep{border-top:1px solid var(--line);margin:6px 4px 4px;padding:8px 6px 2px}
.menusep small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.temppw{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:16px;font-weight:700;letter-spacing:.04em;background:var(--app);border-radius:10px;padding:8px 12px;user-select:all}
.aicell{display:flex;flex-direction:column;gap:6px;min-width:200px}
.aicell .actions{gap:6px}
/* tombol mata di kolom password */
.pwwrap{position:relative;display:flex}
.pwwrap input{flex:1;padding-right:46px}
.pweye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;background:transparent;border-radius:10px;display:grid;place-items:center;color:var(--muted);cursor:pointer}
.pweye:hover{color:var(--fg);background:var(--surface)}
.pweye:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.pweye svg{width:19px;height:19px}
.schedbox{display:flex;flex-direction:column;gap:6px}
.schedbox p{margin:0}
.banner.warn{background:var(--warn-bg);color:var(--warn)}
.banner.warn .linkbtn{color:inherit}

/* Lanjutan Threads: kartu tulis kecil di kotak Threads, balasan di pratinjau HP, tanda di kartu Jadwal,
   dan dialog pilih produk. */
.compose.fu textarea{min-height:76px;font-size:14px}
.sendtext.sm{font-size:13px;padding:10px 12px}
.sendfu{display:flex;flex-direction:column;gap:6px;border-left:3px solid var(--line2);padding-left:12px}
.fubox .sendtext{background:var(--surface)}
.pvreply{display:flex;flex-direction:column;gap:7px;margin:2px 12px 0 26px;padding:10px 0 0 12px;border-left:2px solid #e2e2e2}
.pvreply .pvhead,.pvreply .pvcap,.pvreply .pvmeta{padding:0}
.pvreply .pvav{width:24px;height:24px;font-size:11px}
.pvlink{display:flex;flex-direction:column;gap:2px;border:1px solid #e2e2e2;border-radius:12px;padding:8px 10px;font-size:12px;color:#5f5f5f;overflow-wrap:anywhere}
.pvlink b{color:#0c0c0c;font-size:12px}
.futag{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;line-height:1;border-radius:6px;padding:3px 6px;background:var(--surface);color:var(--label)}
.futag svg{width:11px;height:11px;stroke-width:2.6;flex:none}
.futag.fu-terkirim{background:var(--ok-bg);color:var(--ok)}
.futag.fu-gagal{background:var(--bad-bg);color:var(--bad)}
.futag.fu-kirim{background:var(--sky);color:var(--fg)}
.futag.fu-ikut{background:var(--lilac);color:var(--fg)}
.futag.fu-dihapus,.futag.fu-batal{color:var(--muted)}
.fupick{display:flex;flex-direction:column;gap:2px;max-height:min(46vh,380px);overflow:auto;border:1px solid var(--line);border-radius:var(--r-md);padding:4px}
.furow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;cursor:pointer;min-height:44px;box-sizing:border-box}
.furow.off{cursor:default;color:var(--muted)}
.furow input{width:18px;height:18px;accent-color:var(--acc);flex:none;margin:0}
.furow img,.fuph{width:40px;height:40px;border-radius:10px;object-fit:cover;flex:none;background:var(--surface);display:grid;place-items:center;color:var(--muted)}
.fuph svg{width:18px;height:18px}
.furow .grow{min-width:0;display:flex;flex-direction:column;gap:2px}
.furow b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.furow small{font-size:12px;color:var(--muted)}
.furow:has(input:focus-visible){outline:2px solid var(--acc);outline-offset:-2px}
@media (hover:hover){.furow:not(.off):hover{background:var(--surface)}}

/* Tinjau draf (Jadwal): rencana yang belum disetujui, dibaca utuh lalu dicentang per platform */
.rv{display:flex;flex-direction:column;gap:14px;min-width:0}
.rvtop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rvtop .sp,.rvhead .sp,.rvbar .sp{flex:1}
.rv > p{margin:0}
.rvsec{margin:6px 0 0;font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.rvcard{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--app);padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.rvhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rvwhen{font-family:var(--display);font-size:16px;white-space:nowrap}
.rvttl{font-weight:600;min-width:0;overflow-wrap:anywhere}
.rvbody{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:start}
.rvmedia{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.rvthumb{position:relative;width:150px;aspect-ratio:4/5;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--surface);padding:0;cursor:zoom-in;display:grid;place-items:center;color:var(--muted);font:inherit;font-size:12px}
.rvthumb img{width:100%;height:100%;object-fit:cover;display:block}
.rvthumb.empty{cursor:default;align-content:center;gap:4px}
.rvthumb.empty svg{width:26px;height:26px}
.rvthumb .imgfail{width:100%;height:100%;border-radius:0}
.rvmedia.car .rvthumb{width:72px}
.rvtag{position:absolute;left:6px;bottom:6px;background:rgba(20,16,40,.72);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:1px 8px}
.rvvid svg{width:28px;height:28px}
.rvtext{display:flex;flex-direction:column;gap:8px;min-width:0}
.rvtext .sendtext{font-size:14px}
.rvtext p{margin:0}
.rvcount{margin-left:0}
.rvmeta{font-size:12px;color:var(--label);overflow-wrap:anywhere}
.rvplats{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.rvplat{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;min-width:0}
.rvplat.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.rvplat p{margin:0}
.rvpick{display:flex;align-items:center;gap:10px;flex-wrap:wrap;cursor:pointer;min-height:32px}
.rvpick .grow{flex:1;min-width:120px}
.rvpick input,.cchk input{width:20px;height:20px;margin:0;accent-color:var(--acc);flex:none;cursor:pointer}
.rvpick input:disabled,.cchk input:disabled{cursor:not-allowed}
.rvst{display:inline-block;align-self:flex-start;font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px;background:var(--surface);color:var(--muted)}
.rv-ok{background:var(--ok-bg);color:var(--ok)}
.rv-warn{background:var(--warn-bg);color:var(--warn)}
.rv-bad{background:var(--bad-bg);color:var(--bad)}
.rvold summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--muted)}
.rvold[open]{display:flex;flex-direction:column;gap:6px}
.rvbar{position:sticky;bottom:16px;z-index:5;display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--app);border:1px solid var(--line);border-radius:999px;padding:8px 8px 8px 18px;box-shadow:0 16px 32px -20px rgba(20,16,40,.45)}
.zoomdlg{width:min(720px,calc(100% - 32px))}
.zoomdlg .sendbody{padding:12px 16px 18px}
.zoombox{display:flex;flex-direction:column;gap:10px;align-items:center}
.zoomimg{max-width:100%;max-height:72vh;border-radius:var(--r-md);object-fit:contain}
/* dialog persetujuan yang dikumpulkan: daftar ringkas, lalu progres per item */
.bulkdlg{width:min(660px,calc(100% - 32px))}
.bulklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:42vh;overflow:auto}
.bulklist li{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;font-size:13px}
.bulksum{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
.bulksnip{flex-basis:100%;color:var(--muted);overflow-wrap:anywhere}
.bulkpair{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.bulkwho{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bulkpair q{margin:0}
.bulkst{font-size:12px;font-weight:600;overflow-wrap:anywhere}
.bulkst:empty{display:none}
.bulkst.ok{color:var(--ok)}
.bulkst.bad{color:var(--bad)}
.bulkst.warn{color:var(--warn)}
.bulkst.run{color:var(--acc)}
.bulkprog{font-weight:600;font-size:13px}
.bulkprog:empty{display:none}
/* Komentar: draf balasan yang bisa dicentang */
.bulkbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;background:var(--surface)}
.bulkbar .grow{flex:1;min-width:200px}
.crow.bulk{display:grid;grid-template-columns:34px minmax(0,1fr)}
.crow.picked{border-color:var(--acc)}
.cchk{display:flex;justify-content:flex-end;padding-top:12px}
.cmain{min-width:0}
.crow.bulk .open{padding-left:8px}
.crow .txt.full{white-space:normal;overflow-wrap:anywhere}
.crow.bulk .qa{top:8px;transform:none}
.cbulk{display:flex;flex-direction:column;gap:6px;padding:0 12px 12px 8px;min-width:0}
.cbulk p{margin:0}
.creply p{margin:2px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--butter);border-radius:12px 12px 4px 12px;padding:8px 10px;font-size:13px}
@media (max-width:760px){
  .rvbody{grid-template-columns:1fr}
  .rvthumb{width:132px}
  .rvbar{bottom:calc(88px + env(safe-area-inset-bottom,0px));border-radius:20px;padding:8px 8px 8px 14px}
  .rvbar .btn{flex:1 1 100%}
  .rvcard{padding:14px}
}

/* Ruang Tim (khusus admin): pantauan kerja tim agen, satu halaman ala grup WhatsApp (arahan Awal 16 Okt 2026).
   Header grup di atas, banner "Perlu kamu" yang disematkan, area chat yang mengisi sisa tinggi layar dan
   menggulir sendiri, lalu bar tipis "hanya untuk mantau" di posisi kolom ketik. Area chat sengaja lebih gelap
   (biru bayi tegas) dari bubble putih supaya tiap bubble jelas terlihat; bagian lain Studio tetap terang.
   Pesan Laras di kanan dengan hijau muda ala WA. Titik "mengetik" hanya untuk status kerja (keadaan nyata)
   dan diam kalau perangkat minta kurangi gerak. */
.charbtn{position:relative}
.rt-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:999px;background:var(--acc);color:#fff;font-size:11px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.charbtn .rt-badge{position:absolute;top:-3px;left:30px;box-shadow:0 0 0 2px var(--app)}
.menu .rt-badge{margin-left:auto}
/* tinggi: halaman Ruang Tim mengisi layar, area chat yang menggulir */
/* 56px = padding shell 2 x 20px + margin bawaan body 2 x 8px, supaya halaman tidak ikut menggulir */
.shell.tim .main{height:calc(100vh - 56px);height:calc(100dvh - 56px);min-height:560px;box-sizing:border-box}
.shell.tim .pbody{flex:1;min-height:0}
.wa{--wa-bg:#a8d3f2;position:relative;flex:1;min-height:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--wa-bg)}
/* header grup */
.wa-head{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;background:var(--app);border-bottom:1px solid var(--line);min-height:64px;box-sizing:border-box}
.wa-gav{width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none;display:grid;place-items:center;background:var(--lilac);color:var(--acc)}
.wa-gav img{width:100%;height:100%;object-fit:cover}
.wa-gav svg{width:22px;height:22px}
.wa-htext{flex:1;min-width:0}
.wa-htext h2{margin:0;font-family:var(--display);font-size:18px;line-height:1.2}
.wa-sub{margin:1px 0 0;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-sub.busy{color:var(--ok);font-weight:600;display:flex;align-items:center;gap:6px}
.wa-sub.busy span{overflow:hidden;text-overflow:ellipsis}
.wa-upd{font-size:12px;color:var(--muted);white-space:nowrap}
.wa-hbtn{position:relative;width:44px;height:44px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--label);flex:none}
.wa-hbtn svg{width:22px;height:22px}
.wa-hbtn:hover,.wa-hbtn[aria-expanded="true"]{background:var(--surface);color:var(--fg)}
.wa-hdot{position:absolute;top:9px;right:9px;width:9px;height:9px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 2px var(--app)}
/* panel anggota (melayang di atas chat, satu-satunya yang diberi bayangan) */
.wa-panel{position:absolute;top:70px;right:12px;width:min(360px,calc(100% - 24px));max-height:calc(100% - 84px);overflow:auto;box-sizing:border-box;background:var(--app);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 18px 40px -18px rgba(20,16,40,.4);z-index:6;padding:12px 10px}
.wa-ptop{display:flex;align-items:center;gap:8px;padding:0 4px}
.wa-ptop .sp{flex:1}
.wa-phint{margin:2px 4px 8px;font-size:12px;color:var(--muted)}
.wa-plist{display:flex;flex-direction:column;gap:2px}
.rt-mem{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;border:1px solid transparent;background:transparent;border-radius:14px;padding:9px 8px;cursor:pointer;min-width:0}
.rt-mem[aria-pressed="true"]{background:var(--surface);border-color:var(--acc)}
@media (hover:hover){.rt-mem:not([aria-pressed="true"]):hover{background:var(--surface)}}
.rt-mtext{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.rt-mname{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rt-mname b{font-size:14px}
.rt-task{font-size:12.5px;color:var(--label);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.rt-seen{font-size:11.5px;color:var(--muted)}
/* avatar inisial dan status */
.rt-av{position:relative;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;font-family:var(--display);font-weight:700;font-size:15px;line-height:1}
.tc-aksen{background:var(--acc);color:#fff}
.tc-peach{background:var(--peach);color:#8a4b00}
.tc-lilac{background:var(--lilac);color:#4b3d91}
.tc-sage{background:var(--sage);color:#2f6b3a}
.tc-sky{background:var(--sky);color:#1d4f91}
.tc-butter{background:var(--butter);color:#6b5200}
.tc-rose{background:var(--rose);color:#8a2a44}
.rt-av[data-st]::after{content:"";position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;border:2px solid var(--app);box-sizing:border-box;background:#a9a6b5}
.rt-av[data-st="kerja"]::after{background:#d9731f}
.rt-av[data-st="nunggu"]::after{background:#3a78c9}
.rt-st{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px;white-space:nowrap}
.rt-st-kerja{background:#fde3cc;color:#8a4b00}
.rt-st-nunggu{background:var(--sky);color:#1d4f91}
.rt-st-santai{background:var(--surface);color:var(--muted)}
.rt-dots{display:inline-flex;align-items:center;gap:2px;flex:none}
.rt-dots i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.6}
/* saringan aktif */
.wa-filter{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 16px;background:var(--app);border-bottom:1px solid var(--line);font-size:12.5px}
/* pesan disematkan: Perlu kamu */
.wa-pin{position:relative;z-index:4;background:var(--app);border-bottom:1px solid var(--line)}
.wa-pinbar{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;border:0;background:transparent;padding:6px 16px;text-align:left;cursor:pointer}
@media (hover:hover){.wa-pinbar:hover{background:var(--surface)}}
.wa-pinic{width:32px;height:32px;border-radius:50%;background:var(--peach);color:#8a4b00;display:grid;place-items:center;flex:none}
.wa-pinic svg{width:17px;height:17px}
.wa-pintext{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.wa-pintext b{font-size:13px;color:#8a4b00}
.wa-pintext span{font-size:13px;color:var(--label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-pinchev{color:var(--muted);display:grid}
.wa-pinchev svg{width:18px;height:18px}
/* daftar terbuka melayang di atas chat, jadi posisi gulir chat tidak bergeser */
.wa-pinlist{position:absolute;left:0;right:0;top:100%;list-style:none;margin:0;padding:2px 16px 14px;display:flex;flex-direction:column;gap:8px;max-height:min(50vh,360px);overflow:auto;background:var(--app);border-bottom:1px solid var(--line);box-shadow:0 18px 30px -20px rgba(20,16,40,.45)}
.rt-td{display:flex;gap:12px;align-items:flex-start;background:#fff8f1;border:1px solid #f5e1cf;border-radius:14px;padding:12px}
.rt-check{position:relative;flex:none;width:28px;height:28px;border-radius:50%;border:2px solid var(--line2);background:var(--app);color:transparent;display:grid;place-items:center;cursor:pointer;padding:0}
.rt-check::before{content:"";position:absolute;inset:-8px}
.rt-check svg{width:15px;height:15px}
.rt-check:hover,.rt-check:focus-visible{border-color:var(--ok);color:var(--ok)}
.rt-tdtext{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.rt-tdtext p{margin:0;font-weight:600;overflow-wrap:anywhere}
.rt-tdmeta{font-size:12px;color:var(--muted)}
.rt-go{align-self:flex-start;margin-top:4px}
/* area chat */
.wa-chat{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;padding:10px 6% 18px;
  background-color:var(--wa-bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200' fill='none' stroke='%2393c4ea' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M34 34a5 5 0 1 1 5-5v3L25 42h28L39 32'/%3E%3Cpath d='M128 24h28a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4h-18l-8 6v-6a4 4 0 0 1-2-4V28a4 4 0 0 1 4-4z'/%3E%3Cpath d='M70 102h22l-2 22H72z'/%3E%3Cpath d='M75 106v-5a6 6 0 0 1 12 0v5'/%3E%3Crect x='140' y='108' width='30' height='21' rx='5'/%3E%3Ccircle cx='155' cy='118.5' r='5.5'/%3E%3Cpath d='M44 172c-7-4-12-8-12-12a6 6 0 0 1 12-2 6 6 0 0 1 12 2c0 4-5 8-12 12z'/%3E%3Ccircle cx='110' cy='176' r='2.5'/%3E%3Ccircle cx='186' cy='72' r='2.5'/%3E%3Ccircle cx='12' cy='104' r='2.5'/%3E%3Cpath d='M120 160l4 4 8-9'/%3E%3C/svg%3E");
  background-size:200px 200px}
.wa-chat:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.wa-chip{align-self:center;display:inline-flex;align-items:center;gap:6px;background:var(--app);border:0;border-radius:8px;padding:5px 12px;font-size:12px;font-weight:600;color:var(--label);box-shadow:0 1px 1px rgba(11,20,26,.14)}
.wa-day{margin:12px 0 4px}
.wa-older{margin:6px 0 2px;cursor:pointer;min-height:36px}
.wa-older svg{width:14px;height:14px}
.wa-none{margin:auto;max-width:44ch;text-align:center;background:var(--app);border-radius:var(--r-md);padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.wa-none p{margin:0;color:var(--muted)}
.wa-run{display:flex;align-items:flex-start;gap:10px;margin-top:10px}
.wa-run.me{justify-content:flex-end}
.wa-run > .rt-av{box-shadow:0 0 0 2px var(--app)}
.wa-bubs{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;max-width:min(78%,560px)}
.wa-run.me .wa-bubs{align-items:flex-end}
/* bubble: putih bersih di atas biru, garis halus + bayangan tipis supaya tepinya tegas */
.wa-bub{position:relative;background:#fff;border-radius:10px;padding:6px 10px 7px;box-sizing:border-box;max-width:100%;min-width:0;box-shadow:0 1px 1.5px rgba(11,20,26,.18),0 0 0 1px rgba(11,20,26,.04)}
.wa-bub.me{background:#dcf8c6}
.wa-bub.tail{border-top-left-radius:0}
.wa-bub.tail::before{content:"";position:absolute;top:0;left:-8px;width:8px;height:13px;background:inherit;clip-path:polygon(100% 0,0 0,100% 100%)}
.wa-bub.me.tail{border-top-left-radius:10px;border-top-right-radius:0}
.wa-bub.me.tail::before{left:auto;right:-8px;clip-path:polygon(0 0,100% 0,0 100%)}
.wa-name{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:13px;font-weight:700;margin-bottom:2px}
.wa-bub.me .wa-name{color:#1f6b35}
.wa-role{font-size:11.5px;font-weight:500;color:var(--muted)}
.wa-kind{display:inline-block;font-size:11px;font-weight:700;border-radius:5px;padding:1px 7px;margin:2px 0 4px}
.wa-kind.k-mulai{background:var(--sky);color:#1d4f91}
.wa-kind.k-selesai{background:var(--ok-bg);color:var(--ok)}
.wa-kind.k-nunggu{background:var(--warn-bg);color:var(--warn)}
.wa-kind.k-masalah{background:var(--bad-bg);color:var(--bad)}
.wa-bub.me .wa-kind{background:rgba(255,255,255,.7)}
.wa-text{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.45}
.wa-text a{color:#0b5aa0;text-decoration:underline;text-underline-offset:2px}
.wa-bub.me .wa-text a{color:#1d5e2c}
.wa-time{float:right;margin:7px 0 -4px 14px;font-size:11px;line-height:1;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.wa-bub.me .wa-time{color:#4d5f4e}
.wa-timerow{display:flex;justify-content:flex-end;margin-top:4px}
.wa-timerow .wa-time{float:none;margin:0}
/* gambar di dalam bubble: 4:5, satu besar atau grid 2x2 (+N kalau lebih dari 4) */
.wa-imgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;margin:2px -6px 6px;width:min(300px,calc(100% + 12px));border-radius:8px;overflow:hidden}
.wa-imgs.n1{grid-template-columns:minmax(0,1fr);width:min(260px,calc(100% + 12px))}
.wa-img{position:relative;display:block;aspect-ratio:4/5;border:0;padding:0;background:#dfe9f1;cursor:zoom-in;min-width:0;overflow:hidden}
.wa-img img{display:block;width:100%;height:100%;object-fit:cover}
.wa-img .imgfail{width:100%;height:100%;font-size:11px}
.wa-more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(11,20,26,.55);color:#fff;font-family:var(--display);font-size:24px;font-weight:700}
.wa-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.wa-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:6px;margin:4px 0 7px}
.wa-stat{display:flex;flex-direction:column;gap:1px;background:rgba(255,255,255,.7);border:1px solid rgba(0,0,0,.06);border-radius:10px;padding:6px 9px}
.wa-stat b{font-family:var(--display);font-size:18px;line-height:1.1;font-variant-numeric:tabular-nums}
.wa-stat span{font-size:11.5px;color:var(--muted);font-weight:600}
.wa-chart{margin:8px 0 2px;padding:8px 10px;background:rgba(255,255,255,.7);border:1px solid rgba(0,0,0,.06);border-radius:10px;display:flex;flex-direction:column;gap:5px}
.wa-chart figcaption{font-size:12px;font-weight:700;margin-bottom:2px}
.wa-bar{display:grid;grid-template-columns:minmax(60px,34%) 1fr auto;align-items:center;gap:8px;font-size:12px}
.wa-bar .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-bar .trk{height:9px;border-radius:999px;background:rgba(0,0,0,.07);overflow:hidden}
.wa-bar .fill{display:block;height:100%;border-radius:999px;background:var(--acc);transform-origin:left center}
.wa-bar .val{font-weight:700;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:no-preference){.wa-bar .fill{animation:wa-grow .7s cubic-bezier(.2,.7,.2,1) both}}
@keyframes wa-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.wa-link{display:inline-flex;align-items:center;gap:6px;min-height:34px;box-sizing:border-box;max-width:100%;border:1px solid #cfe0ee;background:#f2f8fd;border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600;color:#0b4f8c;text-decoration:none}
.wa-bub.me .wa-link{background:rgba(255,255,255,.75);border-color:#b8dca0;color:#1d5e2c}
.wa-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-link svg{width:14px;height:14px;flex:none}
@media (hover:hover){.wa-link:hover{background:#e3f0fa}}
/* kaki: posisi kolom ketik WA, hanya catatan */
.wa-foot{margin:0;display:flex;align-items:center;gap:10px;padding:11px 16px;background:var(--surface);border-top:1px solid var(--line);font-size:12.5px;color:var(--label)}
.wa-foot svg{width:18px;height:18px;flex:none;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){
  .rt-dots i{animation:rtDot 1.2s ease-in-out infinite}
  .rt-dots i:nth-child(2){animation-delay:.15s}
  .rt-dots i:nth-child(3){animation-delay:.3s}
  @keyframes rtDot{0%,70%,100%{opacity:.3;transform:none}35%{opacity:1;transform:translateY(-2px)}}
  .rt-mem,.rt-check,.wa-link,.wa-pinbar,.wa-hbtn{transition:background-color .15s ease,border-color .15s ease,color .15s ease}
  .wa-panel{animation:popIn .16s ease-out}
}
@media (max-width:1000px){.wa-chat{padding-inline:3%}}
@media (max-width:760px){
  .charbtn .rt-badge{left:28px}
  /* HP: sapaan disembunyikan supaya chat dapat tinggi, Ruang Tim selebar layar, rail bawah tetap terlihat */
  .shell.tim .main{height:calc(100vh - 92px);height:calc(100dvh - 92px - env(safe-area-inset-bottom,0px));min-height:480px;padding:10px 0 0;gap:10px}
  .shell.tim .hello{display:none}
  .shell.tim .top{padding:0 16px;justify-content:flex-end}
  .wa{border-radius:0;border-inline:0;border-bottom:0}
  .wa-head{padding:8px 8px 8px 12px;gap:10px}
  .wa-gav{width:40px;height:40px}
  .wa-upd{display:none}
  .wa-chat{padding:8px 10px 14px}
  .wa-bubs{max-width:84%}
  .wa-run{gap:8px}
  .wa-run > .rt-av{width:28px!important;height:28px!important;font-size:12px!important}
  .wa-panel{top:62px;right:8px;width:calc(100% - 16px)}
  .wa-pinbar{padding:6px 12px}
  .wa-pinlist{padding:2px 12px 12px}
  .wa-link{min-height:40px}
  .wa-foot{padding:10px 12px}
}

/* Halaman produk (24 per halaman) */
.pager{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.pager .pnums{display:flex;align-items:center;gap:4px}
.pager .pnum{min-width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--app);font:600 13px var(--sans);cursor:pointer;color:var(--fg)}
.pager .pnum[aria-current="page"]{background:var(--ink);color:var(--ink-fg);border-color:transparent}
.pager .pinfo2{min-width:90px;text-align:center}

/* Nimbrung: cari posting Threads orang buat dibalas (halaman Komentar) */
.pill.nb{background:var(--lilac);color:var(--fg)}
.nbform{display:flex;flex-direction:column;gap:10px}
.nbq{display:flex;gap:8px;flex-wrap:wrap}
.nbq input{flex:1 1 200px;min-width:0}
.nbres{display:flex;flex-direction:column;gap:8px}
.nbitem{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.nbtxt{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.nblist{display:flex;flex-direction:column;gap:12px}
.nbcard{border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--app)}
.nbcard.done{opacity:.75}
.nbcard q.nbpost{display:block;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}
.nbcard textarea{width:100%;min-height:72px;resize:vertical}
.nbcap{display:inline-flex;align-items:center;gap:6px}
.nbimg{position:relative;width:120px}
.nbimg img{width:120px;aspect-ratio:4/5;object-fit:cover;border-radius:10px;display:block}
.nbimg .iconbtn{position:absolute;top:4px;right:4px;background:var(--app)}
.nbpick{display:flex;flex-direction:column;gap:8px;border:1px dashed var(--line2);border-radius:12px;padding:10px}
.nbthumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px}
.nbthumb{padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:none;cursor:pointer}
.nbthumb:hover,.nbthumb:focus-visible{border-color:var(--acc)}
.nbthumb img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.cmedia{display:flex;gap:6px;flex-wrap:wrap}
.cmedia img{width:110px;height:110px;object-fit:cover;border-radius:10px;display:block}

/* polling Threads */
.pollopts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pvpoll{display:grid;gap:6px;margin:8px 0}
.pvpoll span{border:1px solid var(--line);border-radius:var(--r-md);padding:8px 12px;font-size:13px}

/* Beranda: Hari ini */
.today{display:flex;flex-direction:column;gap:12px}
.todaylist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.todayrow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-md);background:var(--app)}
.todayrow .ico{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;background:var(--surface)}
.todayrow .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.todayrow.bad .ico{color:var(--bad, #b42318)}
.todayrow.warn .ico{color:var(--warn)}
.todayact{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:640px){ .todayrow{flex-wrap:wrap} .todayact{width:100%;justify-content:flex-start} }
/* Look */
.lookcard{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden}
.lookimg{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--app)}
.lookimg.noimg{display:grid;place-items:center;color:var(--muted);font-size:13px}
.lookbody{display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px}
.lookpick{display:flex;gap:8px;flex-wrap:wrap}
.lookthumb{padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:none;cursor:pointer;width:72px}
.lookthumb img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.lookthumb[aria-pressed="true"]{border-color:var(--acc)}

/* Nimbrung: mode cicil */
.cicilbar{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line)}
.cicilbar.on{background:var(--warn-bg);border-color:transparent}
.cicilbar .ico{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;background:var(--app)}
.cicilbar .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
@media (max-width:640px){ .cicilbar{flex-wrap:wrap} }

/* Navigasi grup: tab di atas halaman (Interaksi, Toko, Laporan) */
.subnav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.subtab{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--app);color:var(--fg);font:inherit;font-weight:700;font-size:14px;cursor:pointer;position:relative}
.subtab[aria-selected="true"]{background:var(--ink);color:var(--ink-fg);border-color:var(--ink)}
.subcnt{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--acc);color:#fff;font-size:11px;display:inline-grid;place-items:center;box-sizing:border-box}
.subtab .dot{width:8px;height:8px;border-radius:50%;background:var(--acc)}
@media (max-width:760px){
  /* Bar bawah HP: menu dibagi rata selebar layar, label nggak mepet tepi */
  .rail{padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px))}
  .navpill{width:100%;max-width:560px;box-sizing:border-box;justify-content:space-between;border-radius:22px;gap:4px;padding:5px}
  .navbtn{flex:1 1 0;min-width:0;width:auto;height:50px;border-radius:16px;gap:2px}
  .navbtn svg{width:19px;height:19px}
  .navlbl{font-size:10px}
  .navbtn .dot{top:6px;right:calc(50% - 16px)}
  .subnav{position:sticky;top:0;z-index:5;background:var(--surface);padding:8px 0}
  .railout{display:none}
}

/* Beranda bento (20 Okt 2026): kartu besar per kerjaan, tiap kartu bisa diklik */
.alerts{display:flex;flex-direction:column;gap:8px}
.alert{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;font-weight:600;font-size:14px;padding:12px 16px;border-radius:var(--r-md);border:0;background:var(--warn-bg);color:var(--warn);cursor:pointer}
.alert.bad{background:var(--bad-bg);color:var(--bad)}
.alert svg{width:18px;height:18px;flex:none}
.alert svg:last-child{margin-left:auto}
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;grid-auto-flow:dense}
.bhero{grid-column:span 2;grid-row:span 2;padding:22px;gap:10px;justify-content:flex-start}
.bhtop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.bhero .av{width:88px;height:88px;font-size:30px;box-shadow:0 0 0 4px var(--app)}
.bhero .illo{width:120px}
.bhero h3{margin:4px 0 0;font-family:var(--display);font-size:30px;line-height:1.05}
.bhero p{margin:0;color:var(--muted);font-size:14px;max-width:46ch}
.bfoll{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:var(--r-md);border:0;background:var(--app);cursor:pointer;font:inherit;text-align:left}
.bfoll > span{display:flex;align-items:baseline;gap:8px}
.bfoll .num{font-family:var(--display);font-size:34px;font-weight:700;line-height:1}
.bfoll .lbl{font-size:13px;color:var(--muted);font-weight:600}
.btile{border:0;font:inherit;text-align:left;cursor:pointer;min-height:168px;padding:18px;gap:4px}
.btile .bthead{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:auto}
.btile .ico{width:40px;height:40px;border-radius:12px;background:var(--app);display:grid;place-items:center}
.btile .ico svg{width:20px;height:20px}
.btile .go{width:30px;height:30px;border-radius:50%;background:var(--app);display:grid;place-items:center;opacity:.7}
.btile .go svg{width:15px;height:15px}
.btile .num{font-family:var(--display);font-size:40px;font-weight:700;line-height:1;margin-top:14px}
.btile .lbl{font-size:15px;font-weight:700}
.btile .sub{font-size:12.5px;color:var(--muted)}
@media (hover:hover){.btile:hover .go,.bfoll:hover{opacity:1}.btile:hover{box-shadow:inset 0 0 0 2px var(--line2)}}
@media (max-width:1080px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.bhero{grid-row:auto}}
@media (max-width:760px){.bento{gap:10px}.btile{min-height:132px;padding:14px}.btile .num{font-size:32px;margin-top:10px}.bhero{padding:18px}.bhero .illo{display:none}.bhero h3{font-size:26px}}

/* Beranda dinamis: kartu kerjaan yang kosong jadi polos, yang paling mendesak menonjol */
.btile.zero{background:var(--surface)}
.btile.zero .num{color:var(--muted)}
.btile.zero .ico{background:var(--app)}
.btile.hot{box-shadow:inset 0 0 0 2px var(--fg)}
@media (max-width:760px){
  /* header ringkas: judul + tombol bulat, pilih karakter cuma avatar */
  .top{flex-wrap:nowrap;gap:8px;align-items:center}
  .hello{min-width:0}
  .hello h1{font-size:21px}
  .hello p{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .charbtn{padding:2px;border:0;background:none}
  .charbtn > span:last-child{display:none}
  .search,.newpost{width:40px;height:40px;padding:0;display:grid;place-items:center;flex:none}
  /* kartu Lia jadi baris ringkas */
  .bhero{grid-column:1 / -1;display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:4px;padding:14px 16px;align-items:center}
  .bhtop{grid-row:span 2}
  .bhero .av{width:58px;height:58px;font-size:22px;box-shadow:0 0 0 3px var(--app)}
  .bhero h3{font-size:22px;margin:0}
  .bhero p{font-size:12.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .bhero .plats{display:none}
  .bfoll{grid-column:1 / -1;margin-top:8px;padding:10px 12px}
  .bfoll .num{font-size:26px}
  .bfoll .spark{width:80px}
  /* kartu kerjaan ringkas */
  .btile{min-height:0;padding:13px 14px;gap:1px;border-radius:20px}
  .btile .go{display:none}
  .btile .ico{width:32px;height:32px;border-radius:10px}
  .btile .ico svg{width:17px;height:17px}
  .btile .num{font-size:28px;margin-top:10px}
  .btile .lbl{font-size:13px}
  .btile .sub{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .btile.hot{grid-column:span 2}
  .btile.hot .num{font-size:36px}
  /* menu bawah: penanda aktif cuma di belakang ikon, label tetap terbaca */
  .navbtn[aria-current="page"]{background:transparent;color:var(--ink-fg)}
  .navbtn[aria-current="page"] svg{background:var(--ink-fg);color:var(--ink);border-radius:999px;padding:3px 14px;box-sizing:content-box}
}
/* Pratinjau video: tombol Putar di atas cuplikan */
.pvplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;cursor:pointer}
.pvplay svg{width:28px;height:28px;margin-left:3px}
.pvplay:hover{background:rgba(0,0,0,.7)}
.pvopen{position:absolute;right:8px;top:8px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;text-decoration:none}

/* Layar loading: logo gantungan baju berayun (21 Okt 2026) */
.loader{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;min-height:52vh;padding:32px 16px}
.loader b{font-family:var(--display);font-size:20px;margin-top:6px}
.loader p{margin:0;color:var(--muted);font-size:14px}
.ldlogo{position:relative;width:88px;height:96px;display:flex;flex-direction:column;align-items:center}
.ldhang{width:72px;height:72px;border-radius:24px;background:var(--acc);color:#fff;display:grid;place-items:center;transform-origin:50% 0;animation:ldswing 1.6s ease-in-out infinite}
.ldhang svg{width:38px;height:38px}
.ldshadow{width:46px;height:8px;border-radius:50%;background:var(--line);margin-top:12px;animation:ldshadow 1.6s ease-in-out infinite}
.lddots{display:flex;gap:6px;margin-top:6px}
.lddots i{width:7px;height:7px;border-radius:50%;background:var(--acc);opacity:.25;animation:lddot 1.2s ease-in-out infinite}
.lddots i:nth-child(2){animation-delay:.15s}
.lddots i:nth-child(3){animation-delay:.3s}
@keyframes ldswing{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes ldshadow{0%,100%{transform:translateX(-5px) scaleX(.85)}50%{transform:translateX(5px) scaleX(.85)}25%,75%{transform:scaleX(1)}}
@keyframes lddot{0%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.ldhang,.ldshadow,.lddots i{animation:none}.lddots i{opacity:.6}}
.box.butter > .illo{width:120px;flex:none}

/* TikTok (pantau, 21 Okt 2026) */
.ttgoal{gap:10px}
.ttnums{display:flex;gap:28px;flex-wrap:wrap}
.ttnums > div{display:flex;flex-direction:column}
.ttnums .num{font-family:var(--display);font-size:32px;font-weight:700;line-height:1}
.ttnums .lbl{font-size:13px;color:var(--muted);font-weight:600}
.ttbar{height:10px;border-radius:999px;background:var(--app);overflow:hidden}
.ttbar span{display:block;height:100%;background:var(--acc);border-radius:999px}
.ttconn{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md)}
.ttconn .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.ttvids{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.ttvid{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit}
.ttvid img,.ttcover{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:12px;background:var(--app)}
.ttvmeta{display:flex;flex-direction:column;gap:2px}
.ttvt{font-size:13px;font-weight:600;line-height:1.3}
.ttvstat{display:flex;align-items:center;gap:3px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.ttvstat svg{width:12px;height:12px}

/* Kalender: kartu yang udah nggak jalan (22 Okt 2026) */
.slot.faded{opacity:.5}
.slot.faded:hover,.slot.faded:focus-within{opacity:.85}
.slot.gone .ttl,.slot.gone .mt,.slot.failed .ttl,.slot.failed .mt{text-decoration:line-through;text-decoration-thickness:1.5px}
.slot.failed{background:#fdeeee}
/* Judul kartu Jadwal ringkas (22 Okt 2026) */
.slot .ttl .slot-open{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:left}
.slot .ttags{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 1px}
.slot .ttag{font-size:10.5px;font-weight:700;line-height:1.2;padding:2px 6px;border-radius:6px;background:var(--app);color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot .t{flex-wrap:wrap;row-gap:4px;min-width:0}
.slot .t .stbtn{margin-left:auto;flex:none;font-size:10.5px;padding:2px 7px}
.slot .ttags .futag{font-size:10.5px;padding:2px 6px}