/* Xoic Studio - tampilan semua halaman (editor + PM).
   Bagian atas SAMA PERSIS dengan situs Request Ikon (token warna, header, form, chip, kotak Masuk).
   Edit token warna di :root. Cek tampilan, lalu jalankan Deploy ke Netlify.bat. */

:root {
  /* ===== MODE TERANG (putih) ===== */
  --page:#FFFFFF; --head:rgba(255,255,255,.92); --box:#F7F8FA; --field:#FFFFFF; --seg:#E9ECF0; --raised:#FFFFFF;
  --heading:#0E2433; --text:#1F2A33; --muted:#64707D; --line:#DFE4EA; --line-2:#EBEEF2; --hover:#F2F4F7; --bg:#F2F4F7;
  --logo:#0E2433; --strong:#0E2433; --on-strong:#FFFFFF; --ring:rgba(14,36,51,.10); --shadow:rgba(14,36,51,.12); --overlay:rgba(14,36,51,.55);
  --orange:#F93B15; --orange-h:#D92F0C; --link:#D92F0C; --orange-t:#FEECE7;
  --ok:#17834A; --ok-t:#E5F4EC; --warn:#8A5300; --warn-t:#FFF2DE; --info:#1D4E89; --info-t:#E7EEF8;
  --r-lg:14px; --r:10px; --r-sm:7px;
  color-scheme: light;
}
/* ===== MODE GELAP (biru gelap) ===== */
:root[data-theme="dark"] {
  --page:#0D1013; --head:rgba(13,16,19,.94); --box:#14181C; --field:#0A0D10; --seg:#0A0D10; --raised:#1F252B;
  --heading:#F2F4F6; --text:#D4D9DE; --muted:#8A939C; --line:#242A30; --line-2:#1A1F24; --hover:#171B20; --bg:#171B20;
  --logo:#FFFFFF; --strong:#F2F4F6; --on-strong:#0A0D10; --ring:rgba(242,246,249,.12); --shadow:rgba(0,0,0,.55); --overlay:rgba(0,0,0,.72);
  --orange:#F93B15; --orange-h:#FF5533; --link:#FF8466; --orange-t:rgba(249,59,21,.16);
  --ok:#5FD497; --ok-t:rgba(46,182,110,.16); --warn:#FFC266; --warn-t:rgba(255,170,60,.15); --info:#8DB8F2; --info-t:rgba(90,150,230,.18);
  color-scheme: dark;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:15px/1.5 "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--text); background:var(--page); transition:background-color .2s, color .2s; }
button, input, select, textarea { font:inherit; color:inherit; }
a { color:var(--link); font-weight:500; text-decoration-thickness:1px; text-underline-offset:2px; }
b, strong, th, h1, h2, h3 { font-weight:500; }
[hidden] { display:none !important; }
:focus-visible { outline:2px solid var(--orange); outline-offset:2px; }

/* top bar */
.top { background:var(--head); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px); color:var(--heading); position:sticky; top:0; z-index:10; border-bottom:1px solid var(--line); }
.top-in { max-width:1180px; margin:0 auto; padding:18px max(16px, env(safe-area-inset-left)); display:flex; align-items:center; gap:16px; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:14px; min-width:0; }
.logo { width:170px; height:auto; flex:none; }
.brand-sep { width:1px; height:26px; background:var(--line); }
.brand-name { font-weight:500; font-size:16px; color:var(--heading); white-space:nowrap; }
.clock { display:flex; align-items:center; gap:10px; background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:8px 16px 8px 10px; color:var(--heading); white-space:nowrap; }
.clock-dot { width:22px; height:22px; border-radius:50%; background:conic-gradient(var(--orange) var(--p, 0%), var(--line) 0); position:relative; flex:none; }
.clock-dot::after { content:""; position:absolute; inset:5px; border-radius:50%; background:var(--bg); }
.clock b { font-weight:500; font-variant-numeric:tabular-nums; }
.clock span { font-size:13.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.top-right { display:flex; align-items:center; gap:10px; }
.nav-link { display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:999px; background:var(--orange); color:#fff; font-size:14px; font-weight:500; text-decoration:none; white-space:nowrap; }
.nav-link:hover { background:var(--orange-h); }
.nav-link svg { width:17px; height:17px; flex:none; }
.logo path[fill="#0E2433"] { fill:var(--logo); }
.theme { width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); background:var(--bg); color:var(--heading); cursor:pointer; }
.theme:hover { border-color:var(--muted); }
.theme svg { width:18px; height:18px; }
.theme .i-sun { display:none; }
:root[data-theme="dark"] .theme .i-sun { display:block; }
:root[data-theme="dark"] .theme .i-moon { display:none; }

/* layout */
.wrap { max-width:1180px; margin:0 auto; padding:36px max(16px, env(safe-area-inset-left)) 48px; }
.intro { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:4px 0 20px; }
.intro h1 { font-size:30px; line-height:1.15; letter-spacing:-.02em; margin:0; color:var(--heading); font-weight:500; }
.intro p { margin:6px 0 0; color:var(--muted); max-width:860px; }
.grid { display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:20px; align-items:start; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); }
.panel-h { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px 0; }
.panel-h h2 { font-size:17px; margin:0; color:var(--heading); font-weight:500; }
.panel-b { padding:16px 20px 20px; }
.side { position:sticky; top:96px; max-height:calc(100vh - 116px); display:flex; flex-direction:column; }
.side .panel-b { overflow:auto; padding-top:12px; }
/* hanya form request yang ada di dalam kotak; status tampil terbuka di halaman */
.main { background:var(--box); border-color:var(--line); }
.main .seg { background:var(--seg); }
.main .settings { background:var(--field); }
.side { background:none; border:0; border-radius:0; }
.side .panel-h, .side .listbar, .side .panel-b { padding-left:4px; padding-right:4px; }

/* tabs (mobile) */
.tabs { display:none; }

/* form */
.field { margin-bottom:18px; }
.field > label, .flabel { display:block; font-weight:500; font-size:13.5px; color:var(--heading); margin-bottom:6px; }
.hint { font-size:12.5px; color:var(--muted); margin-top:6px; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
input[type=text], input[type=email], input[type=password], select, textarea { width:100%; background:var(--field); border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 11px; font-size:14px; }
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, select:focus, textarea:focus { border-color:var(--strong); outline:none; box-shadow:0 0 0 3px var(--ring); }
textarea { resize:vertical; }
.link-rows { display:flex; flex-direction:column; gap:8px; }
.link-row { display:grid; grid-template-columns:30px minmax(0,1fr) 34px; gap:8px; align-items:start; }
.link-no { height:38px; display:grid; place-items:center; border-radius:var(--r-sm); background:var(--seg); color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; }
.link-row.bad input { border-color:var(--orange); }
.check { display:flex; align-items:center; gap:6px; font-size:12.5px; margin-top:5px; min-width:0; }
.check:empty { display:none; }
.check span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.check svg { flex:none; }
.check.ok { color:var(--ok); } .check.bad { color:var(--link); }
.link-x { height:38px; border:0; background:none; color:var(--muted); border-radius:var(--r-sm); cursor:pointer; display:grid; place-items:center; }
.link-x:hover { background:var(--hover); color:var(--heading); }
.btn-add { margin-top:10px; border:1px dashed var(--line); background:none; color:var(--heading); border-radius:var(--r-sm); padding:8px 14px; font-size:13.5px; font-weight:500; cursor:pointer; }
.btn-add:hover { border-color:var(--muted); background:var(--hover); }
details.tip { margin-top:10px; font-size:13px; }
details.tip summary { cursor:pointer; color:var(--muted); font-weight:500; }
details.tip div { margin-top:8px; padding:10px 12px; background:var(--bg); border-radius:var(--r-sm); color:var(--muted); }
details.tip code { color:var(--heading); word-break:break-all; font-size:12.5px; }

.settings { border:1px solid var(--line); border-radius:var(--r); padding:14px; display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.settings .full { grid-column:1 / -1; }
.color { display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:var(--r-sm); padding:4px 4px 4px 10px; background:var(--field); }
.color:focus-within { border-color:var(--strong); box-shadow:0 0 0 3px var(--ring); }
.color input[type=text] { background:transparent; border:0; padding:5px 0; box-shadow:none !important; min-width:0; }
.color input[type=color] { width:30px; height:30px; border:0; padding:0; background:none; border-radius:6px; cursor:pointer; flex:none; }
.color input[type=color]::-webkit-color-swatch-wrapper { padding:0; }
.color input[type=color]::-webkit-color-swatch { border:1px solid var(--line); border-radius:6px; }
.seg { display:flex; background:var(--bg); border-radius:var(--r-sm); padding:3px; gap:3px; }
.seg button { flex:1; border:0; background:none; padding:6px 8px; border-radius:5px; font-size:13.5px; font-weight:500; color:var(--muted); cursor:pointer; }
.seg button[aria-pressed="true"] { background:var(--raised); color:var(--heading); box-shadow:0 1px 2px var(--shadow); }
.fmt { display:flex; align-items:center; height:38px; font-weight:500; color:var(--heading); }
.fmt small { font-weight:500; color:var(--muted); margin-left:8px; }

.submit { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:4px; }
.btn { border:1px solid var(--line); background:var(--field); color:var(--heading); border-radius:var(--r-sm); padding:9px 14px; font-weight:500; font-size:14px; cursor:pointer; }
.btn:hover { border-color:var(--muted); }
.btn-primary { background:var(--orange); border-color:var(--orange); color:#fff; padding:11px 22px; font-size:15px; }
.btn-primary:hover { background:var(--orange-h); border-color:var(--orange-h); }
.btn:disabled { opacity:.55; cursor:not-allowed; }
.btn-ghost { border:0; background:none; color:var(--muted); padding:6px 4px; font-weight:500; font-size:13px; }
.btn-ghost:hover { color:var(--heading); }
.msg { font-size:13.5px; font-weight:500; }
.msg.ok { color:var(--ok); } .msg.bad { color:var(--link); }

.banner { border-radius:var(--r); padding:10px 14px; font-size:13.5px; margin-bottom:16px; background:var(--warn-t); color:var(--warn); }

/* status list */
.filters { display:flex; gap:4px; background:var(--bg); padding:3px; border-radius:var(--r-sm); }
.filters button { border:0; background:none; padding:5px 10px; border-radius:5px; font-size:12.5px; font-weight:500; color:var(--muted); cursor:pointer; white-space:nowrap; }
.filters button[aria-pressed="true"] { background:var(--raised); color:var(--heading); box-shadow:0 1px 2px var(--shadow); }
.listbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; padding:12px 20px 0; }
.listbar select { width:auto; padding:5px 8px; font-size:12.5px; }
.list { display:flex; flex-direction:column; }
details.req { border-bottom:1px solid var(--line-2); }
details.req:last-of-type { border-bottom:0; }
.req-sum { list-style:none; cursor:pointer; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:2px 12px; align-items:center; padding:12px 4px; border-radius:var(--r-sm); }
.req-sum::-webkit-details-marker { display:none; }
.req-sum:hover { background:var(--hover); }
.req-sum:focus-visible { outline-offset:-2px; }
.dots { grid-row:1 / span 2; display:flex; }
.dots i { width:20px; height:20px; border-radius:50%; border:2px solid var(--page); box-shadow:0 0 0 1px var(--line); }
.dots i + i { margin-left:-8px; }
.req-title { font-weight:500; color:var(--heading); font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.req-meta { font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; grid-column:2; }
.chip { grid-row:1 / span 2; grid-column:3; font-size:12px; font-weight:500; padding:3px 10px; border-radius:999px; white-space:nowrap; }
.st-baru { background:var(--info-t); color:var(--info); }
.st-diproses { background:var(--warn-t); color:var(--warn); }
.st-perlu-ganti { background:var(--orange-t); color:var(--link); }
.st-selesai { background:var(--ok-t); color:var(--ok); }
.req-body { padding:2px 4px 14px 44px; font-size:13.5px; }
.icons { list-style:none; margin:0 0 10px; padding:0; }
.icons li { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px dashed var(--line-2); }
.icons li:last-child { border-bottom:0; }
.icons b { color:var(--heading); font-weight:500; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; color:var(--muted); font-size:13px; margin:0 0 10px; }
.kv dt { font-weight:500; color:var(--text); }
.kv dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.sw { display:inline-block; width:11px; height:11px; border-radius:3px; border:1px solid var(--line); vertical-align:-1px; margin-right:4px; }
.note { background:var(--bg); border-radius:var(--r-sm); padding:10px 12px; color:var(--text); }
.note .files { margin-top:6px; font-size:12.5px; color:var(--muted); overflow-wrap:anywhere; }
.note .files b { color:var(--ok); }
.btn-drive { display:inline-flex; align-items:center; gap:8px; margin-top:10px; padding:7px 12px; font-size:13px; text-decoration:none; }
.btn-drive svg { color:var(--muted); }
.req-act { display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-top:10px; font-size:13px; color:var(--muted); }
.btn-del { color:var(--link); padding:6px 12px; font-size:13px; }
.empty { text-align:center; color:var(--muted); padding:32px 12px; font-size:14px; }
.more { margin:10px auto 0; display:block; }

/* pin gate */
.gate-bg { position:fixed; inset:0; background:var(--overlay); display:grid; place-items:center; padding:16px; z-index:20; }
.gate { background:var(--box); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; width:100%; max-width:380px; box-shadow:0 20px 50px var(--shadow); }
.gate h2 { margin:0 0 4px; font-size:20px; color:var(--heading); }
.gate p { margin:0 0 16px; color:var(--muted); font-size:14px; }
.gate form.login { display:flex; flex-direction:column; gap:6px; }
.gate form.login label { font-size:13px; color:var(--muted); margin-top:4px; }
.gate form.login .btn { margin-top:12px; justify-content:center; }
.gate input { width:100%; min-width:0; font-size:16px; }
.pw { display:flex; align-items:center; gap:6px; background:var(--field); border:1px solid var(--line); border-radius:var(--r-sm); padding-right:6px; }
.pw:focus-within { border-color:var(--strong); box-shadow:0 0 0 3px var(--ring); }
.pw input { border:0 !important; box-shadow:none !important; background:transparent !important; }
.pw-eye { border:0; background:none; color:var(--muted); font-size:12.5px; padding:4px 6px; cursor:pointer; border-radius:6px; }
.pw-eye:hover { color:var(--heading); }
.me { display:flex; align-items:center; gap:6px; background:var(--field); border:1px solid var(--line); border-radius:var(--r-sm); padding-right:6px; }
.me input { border:0 !important; box-shadow:none !important; background:transparent !important; color:var(--heading); cursor:default; }
.me-out { border:0; background:none; color:var(--muted); font-size:12.5px; padding:4px 8px; cursor:pointer; border-radius:6px; white-space:nowrap; }
.me-out:hover { color:var(--heading); background:var(--line); }
.gate .msg { display:block; margin-top:10px; }

@media (max-width: 900px) {
  .grid { grid-template-columns:1fr; }
  .side { position:static; max-height:none; }
  .tabs { display:flex; gap:4px; background:var(--box); border:1px solid var(--line); padding:4px; border-radius:var(--r); margin-bottom:14px; }
  .tabs button { flex:1; border:0; background:none; padding:9px; border-radius:var(--r-sm); font-weight:500; color:var(--muted); cursor:pointer; }
  .tabs button[aria-selected="true"] { background:var(--strong); color:var(--on-strong); }
  .grid[data-view="form"] .side { display:none; }
  .grid[data-view="status"] .main { display:none; }
}
@media (max-width: 600px) {
  .brand-sep, .brand-name { display:none; }
  .logo { width:128px; }
  .top-in { padding-top:14px; padding-bottom:14px; }
  .wrap { padding-top:24px; }
  .clock span { display:none; }
  .theme { width:36px; height:36px; }
  .nav-link { width:36px; height:36px; padding:0; justify-content:center; }
  .nav-link span { display:none; }
  .intro h1 { font-size:23px; }
  .intro { margin-bottom:14px; }
  .panel-h, .panel-b, .listbar { padding-left:14px; padding-right:14px; }
  .row2, .settings { grid-template-columns:1fr; }
  .req-body { padding-left:4px; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }


/* =====================================================================
   XOIC STUDIO - aplikasi (sidebar, dashboard, board, review, finance, tools).
   Memakai token warna di atas, ditambah token kanvas di bawah ini.
   ===================================================================== */
:root { --canvas:#ECEFF3; --side:#F7F8FA; --panel:#FFFFFF; --tint:#FFF3EE; --tint-2:#FFE3D8; --ring-o:rgba(249,59,21,.18); }
:root[data-theme="dark"] { --canvas:#050607; --side:#0B0D10; --panel:#0F1215; --tint:rgba(249,59,21,.10); --tint-2:rgba(249,59,21,.18); --ring-o:rgba(249,59,21,.28); }
body.appbody { background:var(--canvas); }

/* ---------- shell ---------- */
.app { display:grid; grid-template-columns:268px minmax(0, 1fr); gap:16px; padding:16px max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left)); min-height:100vh; }
.sb { position:sticky; top:16px; height:calc(100vh - 32px); background:var(--side); border:1px solid var(--line); border-radius:20px; padding:18px 14px; display:flex; flex-direction:column; gap:14px; overflow:auto; }
.sb-logo { display:flex; align-items:center; justify-content:space-between; padding:2px 6px 14px; border-bottom:1px solid var(--line); }
.sb-brand { display:flex; align-items:center; gap:10px; font-size:19px; font-weight:500; color:var(--heading); letter-spacing:-.01em; }
.sb-name { display:flex; flex-direction:column; line-height:1.1; }
.sb-name small { font-size:11.5px; font-weight:400; color:var(--muted); letter-spacing:0; margin-top:3px; }
.sb-brand .mark { flex:none; box-shadow:0 4px 12px var(--ring-o); border-radius:11px; }
.sb-role { font-size:11.5px; font-weight:500; color:var(--link); background:var(--orange-t); padding:3px 9px; border-radius:999px; }
.sb-user { display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:10px 10px 10px 10px; box-shadow:0 1px 2px var(--shadow); }
.sb-av { width:38px; height:38px; border-radius:11px; background:linear-gradient(135deg, var(--orange), #FF7A4D); color:#fff; display:grid; place-items:center; font-weight:500; font-size:14px; flex:none; }
.sb-user .who-n { font-weight:500; color:var(--heading); font-size:14px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-user .who-s { font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-user > div { min-width:0; flex:1; }
.sb-out { border:0; background:none; color:var(--muted); font-size:12px; padding:6px 8px; border-radius:8px; cursor:pointer; }
.sb-out:hover { background:var(--hover); color:var(--heading); }
.sb-sec { font-size:12px; font-weight:500; color:var(--muted); padding:4px 8px 0; display:flex; align-items:center; gap:8px; }
.sb-sec::after { content:""; flex:1; height:1px; background:var(--line); }
.sb-nav { display:flex; flex-direction:column; gap:2px; }
.sb-nav a { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; color:var(--text); text-decoration:none; font-size:14.5px; font-weight:400; border:1px solid transparent; }
.sb-nav a svg { width:20px; height:20px; flex:none; color:var(--muted); }
.sb-nav a:hover { background:var(--hover); }
.sb-nav a[aria-current="page"] { background:var(--panel); border-color:var(--line); box-shadow:0 1px 3px var(--shadow); color:var(--heading); font-weight:500; }
.sb-nav a[aria-current="page"] svg { color:var(--orange); }
.sb-nav .count { margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--orange-t); color:var(--link); font-size:11.5px; font-weight:500; display:inline-grid; place-items:center; }
.sb-sp { flex:1; }
.sb-promo { background:linear-gradient(160deg, var(--tint-2), var(--tint) 55%, var(--panel)); border:1px solid var(--line); border-radius:16px; padding:14px; }
.sb-promo .ph-ic { width:32px; height:32px; border-radius:10px; background:var(--orange); color:#fff; display:grid; place-items:center; margin-bottom:8px; }
.sb-promo .ph-ic svg { width:18px; height:18px; }
.sb-promo h3 { margin:0; font-size:15px; font-weight:500; color:var(--heading); }
.sb-promo p { margin:4px 0 12px; font-size:13px; color:var(--muted); }
.sb-promo .btn-dark { display:block; width:100%; text-align:center; text-decoration:none; background:var(--strong); color:var(--on-strong); border-radius:10px; padding:10px; font-size:13.5px; font-weight:500; border:0; cursor:pointer; }
.sb-promo .btn-dark:hover { opacity:.92; }

.content { background:var(--panel); border:1px solid var(--line); border-radius:20px; min-width:0; display:flex; flex-direction:column; }
.content-h { display:flex; align-items:center; gap:14px; padding:20px 28px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.content-h h1 { font-size:22px; margin:0; color:var(--heading); font-weight:500; letter-spacing:-.01em; }
.content-h .crumb { font-size:13px; color:var(--muted); }
.content-h .crumb a { color:var(--muted); font-weight:400; text-decoration:none; }
.content-h .crumb a:hover { color:var(--heading); }
.content-h .acts { margin-left:auto; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.content-b { padding:24px 28px 40px; min-width:0; }
.menu-btn { display:none; width:40px; height:40px; border-radius:12px; border:1px solid var(--line); background:var(--panel); color:var(--heading); cursor:pointer; place-items:center; }
.menu-btn svg { width:20px; height:20px; }
.tseg { display:flex; gap:3px; background:var(--bg); padding:3px; border-radius:12px; border:1px solid var(--line); }
.tseg button { width:36px; height:32px; border:0; border-radius:9px; background:none; color:var(--muted); display:grid; place-items:center; cursor:pointer; }
.tseg button svg { width:17px; height:17px; }
.tseg button[aria-pressed="true"] { background:var(--panel); color:var(--orange); box-shadow:0 1px 2px var(--shadow); }
.icon-act { position:relative; width:40px; height:40px; border-radius:12px; border:1px solid var(--line); background:var(--panel); color:var(--heading); display:grid; place-items:center; text-decoration:none; }
.icon-act svg { width:18px; height:18px; }
.icon-act .dot { position:absolute; top:8px; right:9px; width:8px; height:8px; border-radius:50%; background:var(--orange); border:2px solid var(--panel); }
.sb-scrim { display:none; }

/* ---------- blok umum ---------- */
.sec-h { display:flex; align-items:center; gap:12px; margin:30px 0 14px; flex-wrap:wrap; }
.sec-h h2 { font-size:19px; margin:0; color:var(--heading); font-weight:500; }
.sec-h .acts { margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.sec-h:first-child { margin-top:0; }
.btn-o { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); background:var(--panel); color:var(--heading); border-radius:10px; padding:8px 13px; font-size:13.5px; font-weight:500; cursor:pointer; text-decoration:none; white-space:nowrap; }
.btn-o:hover { border-color:var(--muted); }
.btn-o svg { width:16px; height:16px; color:var(--muted); }
.btn-or { display:inline-flex; align-items:center; gap:7px; border:0; background:var(--orange); color:#fff; border-radius:10px; padding:9px 15px; font-size:13.5px; font-weight:500; cursor:pointer; box-shadow:0 4px 12px var(--ring-o); white-space:nowrap; }
.btn-or:hover { background:var(--orange-h); }
.btn-or svg { width:16px; height:16px; }
.btn-or:disabled { opacity:.55; cursor:not-allowed; }
.mono { font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.muted { color:var(--muted); }

/* chip status */
.chip.inline { grid-row:auto; grid-column:auto; display:inline-flex; align-items:center; gap:6px; }
.chip .d { width:7px; height:7px; border-radius:50%; background:currentColor; }
.st-todo { background:var(--bg); color:var(--muted); }
.st-editing { background:var(--info-t); color:var(--info); }
.st-revisi { background:var(--warn-t); color:var(--warn); }
.st-approval { background:var(--orange-t); color:var(--link); }
.st-uploaded { background:var(--ok-t); color:var(--ok); }
.st-dikirim { background:var(--info-t); color:var(--info); }
.st-disetujui { background:var(--warn-t); color:var(--warn); }
.st-dibayar { background:var(--ok-t); color:var(--ok); }
.st-belum { background:var(--bg); color:var(--muted); }
.tag-senja { background:var(--warn-t); color:var(--warn); }
.tag-standart { background:var(--info-t); color:var(--info); }
.chip-late { background:var(--orange-t); color:var(--link); }
.chip-plain { background:var(--bg); color:var(--muted); }
.flag { font-size:12.5px; font-weight:500; color:var(--link); white-space:nowrap; display:inline-flex; align-items:center; gap:5px; }
.flag::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--orange); }
.due-ok { color:var(--ok); } .due-soon { color:#C46A00; } .due-late { color:var(--link); } .due-none { color:var(--muted); }
:root[data-theme="dark"] .due-soon { color:var(--warn); }

/* ---------- kartu statistik ---------- */
.stats { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; }
.stat { border:1px solid var(--line); border-radius:16px; background:var(--panel); display:flex; flex-direction:column; min-width:0; }
.stat-t { padding:16px 16px 14px; flex:1; }
.stat-l { display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text); }
.stat-l::before { content:""; width:3px; height:15px; border-radius:2px; background:var(--bar, var(--orange)); }
.stat-v { display:flex; align-items:flex-end; gap:6px; margin-top:14px; color:var(--heading); }
.stat-v b { font-size:30px; line-height:1; font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.stat-v b.txt { font-size:22px; letter-spacing:-.01em; }
.stat-v small { font-size:16px; color:var(--muted); padding-bottom:2px; }
.stat-v .pill { margin-left:auto; font-size:12px; font-weight:500; padding:3px 9px; border-radius:999px; background:var(--orange-t); color:var(--link); align-self:center; white-space:nowrap; }
.stat-v .pill.ok { background:var(--ok-t); color:var(--ok); }
.stat-v .pill.mute { background:var(--bg); color:var(--muted); }
.stat-s { font-size:12.5px; color:var(--muted); margin-top:4px; }
.prog { position:relative; height:8px; border-radius:999px; margin-top:14px; background:repeating-linear-gradient(90deg, var(--line) 0 2px, transparent 2px 5px); overflow:hidden; }
.prog i { position:absolute; inset:0 auto 0 0; border-radius:999px; background:linear-gradient(90deg, #FF7A4D, var(--orange)); }
.stat-f { display:flex; align-items:center; gap:8px; padding:11px 16px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }
.stat-f .ic { width:22px; height:22px; border-radius:7px; display:grid; place-items:center; background:var(--ok-t); color:var(--ok); flex:none; }
.stat-f .ic.o { background:var(--orange-t); color:var(--link); }
.stat-f .ic.m { background:var(--bg); color:var(--muted); }
.stat-f .ic svg { width:13px; height:13px; }
.stat-f b { color:var(--heading); font-weight:500; }

/* ---------- fokus (carousel kartu prioritas) ---------- */
.focus { display:grid; grid-template-columns:minmax(220px, 1fr) minmax(0, 2.4fr); gap:14px; margin-top:14px; background:var(--side); border:1px solid var(--line); border-radius:18px; padding:14px; }
.focus-i { padding:8px 10px; display:flex; flex-direction:column; }
.focus-i .lbl { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text); }
.focus-i .lbl svg { width:16px; height:16px; color:var(--orange); }
.focus-i h3 { margin:12px 0 6px; font-size:20px; font-weight:500; color:var(--heading); letter-spacing:-.01em; }
.focus-i p { margin:0; font-size:13.5px; color:var(--muted); }
.focus-l { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px, 1fr); gap:12px; overflow-x:auto; padding-bottom:2px; }
.fc { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:4px; min-height:150px; text-decoration:none; color:inherit; cursor:pointer; }
.fc:hover { border-color:var(--muted); }
.fc .t { font-weight:500; color:var(--heading); font-size:15px; line-height:1.3; }
.fc .s { font-size:13px; color:var(--muted); }
.fc .b { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:14px; font-size:13px; }
.ringp { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px; padding:3px 4px 3px 10px; font-size:12.5px; color:var(--text); font-variant-numeric:tabular-nums; }
.ringp svg { width:18px; height:18px; }
.ringp.ok { color:var(--info); border-color:var(--info-t); background:var(--info-t); }

/* ---------- tabel per status ---------- */
.gt { border-top:1px solid var(--line); }
.gt-g { border-bottom:1px solid var(--line); }
.gt-h { display:flex; align-items:center; gap:10px; padding:14px 2px; cursor:pointer; user-select:none; }
.gt-h .chev { width:24px; height:24px; border:0; background:none; color:var(--muted); display:grid; place-items:center; cursor:pointer; border-radius:6px; transition:transform .15s; }
.gt-h .chev svg { width:16px; height:16px; }
.gt-g.closed .chev { transform:rotate(-90deg); }
.gt-h .chip { font-size:13px; padding:4px 12px; }
.gt-h .n { color:var(--muted); font-variant-numeric:tabular-nums; }
.gt-g.closed .gt-t { display:none; }
.gt-t { overflow-x:auto; margin:0 0 10px 34px; }
.gt table { width:100%; border-collapse:collapse; min-width:720px; }
.gt th { text-align:left; font-size:12.5px; font-weight:400; color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
.gt td { padding:12px 10px; border-bottom:1px solid var(--line-2); font-size:14px; color:var(--text); white-space:nowrap; }
.gt tr:last-child td { border-bottom:0; }
.gt tbody tr { cursor:pointer; }
.gt tbody tr:hover td { background:var(--hover); }
.gt td.name { white-space:normal; min-width:240px; }
.gt td.name b { font-weight:500; color:var(--heading); display:flex; align-items:center; gap:10px; }
.gt td.name b::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--dotc, var(--muted)); flex:none; }
.gt td.name span { display:block; font-size:12.5px; color:var(--muted); padding-left:18px; }
.who-c { display:inline-flex; align-items:center; gap:8px; }
.av { width:22px; height:22px; border-radius:7px; background:var(--strong); color:var(--on-strong); font-size:10px; font-weight:500; display:inline-grid; place-items:center; flex:none; }

/* ---------- board ---------- */
.toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.toolbar select, .content-h select { width:auto; max-width:220px; border-radius:10px; }
.board { display:grid; grid-template-columns:repeat(6, minmax(200px, 1fr)); gap:12px; overflow-x:auto; padding-bottom:8px; align-items:start; }
.col { background:var(--side); border:1px solid var(--line); border-radius:16px; padding:10px; min-height:220px; transition:border-color .15s, background-color .15s; }
.col.over { border-color:var(--orange); background:var(--orange-t); }
.col-h { display:flex; align-items:center; gap:8px; padding:4px 4px 10px; margin-bottom:10px; border-bottom:2px solid var(--line); font-size:13.5px; font-weight:500; color:var(--heading); }
.col-h::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--muted); }
.col-todo .col-h { border-color:var(--muted); }
.col-editing .col-h { border-color:var(--info); } .col-editing .col-h::before { background:var(--info); }
.col-revisi .col-h { border-color:var(--warn); } .col-revisi .col-h::before { background:var(--warn); }
.col-approval .col-h { border-color:var(--orange); } .col-approval .col-h::before { background:var(--orange); }
.col-uploaded .col-h { border-color:var(--ok); } .col-uploaded .col-h::before { background:var(--ok); }
.col-h .n { margin-left:auto; color:var(--muted); font-weight:400; font-variant-numeric:tabular-nums; }
.col-list { display:flex; flex-direction:column; gap:10px; min-height:60px; }
.col .empty { padding:18px 6px; font-size:13px; }
.vc { background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; cursor:pointer; color:inherit; text-align:left; }
.vc:hover { border-color:var(--muted); box-shadow:0 4px 14px var(--shadow); }
.vc:focus-visible { outline:2px solid var(--orange); outline-offset:2px; }
.vc[draggable="true"] { cursor:grab; }
.vc.dragging { opacity:.45; }
.vc-thumb { position:relative; aspect-ratio:16 / 10; background:#0B1E2B; display:grid; place-items:center; overflow:hidden; }
.vc-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vc-ph { color:#3E5A70; font-size:22px; font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.vc-ver, .vc-master { position:absolute; top:8px; font-size:11.5px; font-weight:500; padding:2px 8px; border-radius:999px; background:rgba(4,12,18,.72); color:#F2F6F9; }
.vc-ver { right:8px; } .vc-master { left:8px; background:var(--orange); color:#fff; }
.vc-b { padding:10px 12px 12px; }
.vc .t { font-weight:500; color:var(--heading); font-size:14px; line-height:1.35; }
.vc .k { font-size:12px; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vc-f { display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; margin:10px 0 0; padding-top:10px; border-top:1px solid var(--line-2); }
.vc-f div { min-width:0; }
.vc-f dt { font-size:10.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.vc-f dd { margin:2px 0 0; font-size:12.5px; color:var(--text); display:flex; align-items:center; gap:5px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vc-f dd.late { color:var(--link); } .vc-f dd.warn { color:var(--warn); }
.vc-f .chip { font-size:11px; padding:1px 8px; }
.vc-flags { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.vc-st { margin-top:10px; width:100%; padding:6px 8px; font-size:12.5px; border-radius:9px; }
.late { color:var(--link); }
.viewseg { display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:space-between; margin-bottom:16px; }

/* ---------- daftar tugas (mode Daftar) ---------- */
.group { margin-bottom:26px; }
.group-h { display:flex; align-items:center; gap:10px; padding:0 4px 6px; border-bottom:1px solid var(--line); }
.group-h h2 { font-size:17px; margin:0; color:var(--heading); font-weight:500; }
.task { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:2px 12px; align-items:center; padding:12px 4px; border-radius:var(--r-sm); border-bottom:1px solid var(--line-2); text-decoration:none; color:inherit; cursor:pointer; }
.task:last-child { border-bottom:0; }
.task:hover { background:var(--hover); }
.task-no { grid-row:1 / span 2; width:42px; height:42px; border-radius:10px; background:var(--bg); color:var(--heading); display:grid; place-items:center; font-size:13px; font-weight:500; font-variant-numeric:tabular-nums; }
.task-title { font-weight:500; color:var(--heading); font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.task-meta { grid-column:2; font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.task-chips { grid-row:1 / span 2; grid-column:3; display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }

/* ---------- review video ---------- */
.rv-head { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.rv-head h2 { margin:0; font-size:24px; color:var(--heading); font-weight:500; letter-spacing:-.01em; }
.rv-head .meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; color:var(--muted); font-size:13.5px; }
.rv-head .acts { margin-left:auto; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.rv-head select { width:auto; border-radius:10px; }
.review { display:grid; grid-template-columns:360px minmax(0, 1fr); gap:20px; align-items:start; }
.rv-left { width:100%; max-width:360px; display:flex; flex-direction:column; gap:12px; }
.player { position:relative; width:100%; aspect-ratio:9 / 16; max-height:calc(100vh - 140px); background:#071520; border-radius:16px; overflow:hidden; display:grid; place-items:center; box-shadow:0 10px 30px var(--shadow); }
.player iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.player .ph { color:#8EA2B4; text-align:center; padding:24px; font-size:13.5px; max-width:260px; }
.player .ph .btn { margin-top:12px; }
.vbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.vbar .seg button { flex:none; padding:5px 12px; }
.vbar .sp { flex:1; }
.vinfo { font-size:12.5px; color:var(--muted); }
.vnote { background:var(--bg); border-radius:10px; padding:10px 12px; font-size:13.5px; color:var(--text); }
.rv-card { border:1px solid var(--line); border-radius:16px; background:var(--panel); padding:14px; }
.rv-card .flabel { margin-bottom:6px; }
.rv-right { border:1px solid var(--line); border-radius:18px; background:var(--panel); display:flex; flex-direction:column; min-width:0; max-height:calc(100vh - 120px); position:sticky; top:16px; }
.rv-tabs { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.rv-tabs .sp { flex:1; }
.rv-body { padding:6px 16px 10px; overflow:auto; flex:1; min-height:120px; }
.composer { border-top:1px solid var(--line); padding:14px 16px 16px; background:var(--side); border-radius:0 0 18px 18px; }
.composer textarea { min-height:70px; background:var(--panel); }
.composer .bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
.composer .bar .sp { flex:1; }
.tcin { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.tcin input[type=text] { width:78px; text-align:center; font-variant-numeric:tabular-nums; }
.kind { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.kind input[type=number] { width:64px; background:var(--field); border:1px solid var(--line); border-radius:var(--r-sm); padding:6px 8px; font-size:14px; }
.cm { padding:12px 2px; border-bottom:1px solid var(--line-2); }
.cm:last-child { border-bottom:0; }
.cm-h { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); margin-bottom:4px; flex-wrap:wrap; }
.cm-h b { color:var(--heading); font-weight:500; font-size:13.5px; }
.tc { font-size:12px; font-weight:500; padding:2px 8px; border-radius:999px; background:var(--info-t); color:var(--info); font-variant-numeric:tabular-nums; }
.cm-t { white-space:pre-wrap; overflow-wrap:anywhere; color:var(--text); font-size:14px; }
.cm.rev { display:grid; grid-template-columns:22px minmax(0,1fr); gap:0 8px; }
.cm.rev .cm-h, .cm.rev .cm-t, .cm.rev .cm-a { grid-column:2; }
.cm.rev .box { grid-row:1 / span 3; padding-top:2px; }
.cm.rev .box input { width:16px; height:16px; accent-color:var(--orange); }
.cm.rev.done .cm-t { color:var(--muted); text-decoration:line-through; text-decoration-color:var(--line); }
.cm-a { display:flex; gap:12px; align-items:center; margin-top:6px; font-size:12.5px; color:var(--muted); }
.cm-a .btn-ghost { padding:0; font-size:12.5px; }
.cm-a .ok { color:var(--ok); font-weight:500; }
.cm-sec { font-size:12.5px; font-weight:500; color:var(--muted); padding:14px 2px 4px; display:flex; justify-content:space-between; }
.linkgrid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0 14px; }
.linkgrid a { margin:0; justify-content:flex-start; }
.linkgrid a.off { opacity:.45; pointer-events:none; }
.brief-sec { margin-bottom:16px; }
.brief-sec .flabel { margin-bottom:4px; }
.brief-txt { white-space:pre-wrap; color:var(--text); font-size:14px; }
.cl { display:flex; gap:10px; align-items:flex-start; padding:7px 0; border-bottom:1px dashed var(--line-2); font-size:14px; cursor:pointer; }
.cl:last-child { border-bottom:0; }
.cl input { width:16px; height:16px; margin-top:3px; accent-color:var(--orange); flex:none; }
.log { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:13.5px; padding-top:10px; }
.log dt { color:var(--muted); font-variant-numeric:tabular-nums; }
.log dd { margin:0; color:var(--text); }

.props { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px; margin:-6px 0 20px; padding:12px; border:1px solid var(--line); border-radius:16px; background:var(--side); }
.prop { display:flex; flex-direction:column; gap:5px; min-width:0; }
.prop > span { font-size:10.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.prop select, .prop input[type=datetime-local] { padding:7px 9px; font-size:13.5px; border-radius:9px; background:var(--panel); }
.prop.chk { flex-direction:row; align-items:center; gap:8px; align-self:end; padding-bottom:8px; font-size:13.5px; color:var(--text); cursor:pointer; }
.prop.chk input { width:16px; height:16px; accent-color:var(--orange); }
.prop.chk span { font-size:13.5px; letter-spacing:0; text-transform:none; color:var(--text); font-weight:400; }
.asg td { vertical-align:middle; }
.asg input[type=text], .asg select, .asg input[type=datetime-local] { padding:7px 9px; font-size:13.5px; border-radius:9px; min-width:0; }
.asg .k input { width:140px; }
.asg .j input { min-width:220px; }
.asg .row-act { white-space:nowrap; }
.asg select { min-width:140px; }
.asg tr.dirty td { background:var(--orange-t); }
.pcards { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; }
.pcard { border:1px solid var(--line); border-radius:16px; padding:16px; background:var(--panel); text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:10px; }
.pcard:hover { border-color:var(--muted); box-shadow:0 4px 14px var(--shadow); }
.pcard b { font-weight:500; color:var(--heading); font-size:15.5px; }
.pcard .row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:13px; color:var(--muted); }
.vc-edit { position:absolute; bottom:8px; right:8px; border:0; border-radius:8px; background:rgba(4,12,18,.72); color:#F2F6F9; font-size:11.5px; font-weight:500; padding:4px 9px; cursor:pointer; }
.vc-edit:hover { background:var(--orange); }

/* ---------- tools ---------- */
.tools { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:12px; }
.tool { display:flex; gap:12px; align-items:flex-start; border:1px solid var(--line); border-radius:14px; padding:14px; background:var(--panel); text-decoration:none; color:inherit; }
.tool:hover { border-color:var(--muted); box-shadow:0 4px 14px var(--shadow); }
.tool .ti { width:40px; height:40px; border-radius:12px; background:var(--orange-t); color:var(--orange); display:grid; place-items:center; flex:none; font-weight:500; }
.tool .ti svg { width:20px; height:20px; }
.tool b { display:block; color:var(--heading); font-weight:500; font-size:14.5px; }
.tool span { display:block; font-size:13px; color:var(--muted); margin-top:2px; }
.tool .go { margin-left:auto; color:var(--muted); }
.tool .go svg { width:16px; height:16px; }

/* ---------- finance ---------- */
.fin { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); gap:16px; align-items:start; }
.fin-box { border:1px solid var(--line); border-radius:16px; background:var(--side); padding:18px; }
.fin-box h3 { margin:0 0 4px; font-size:16px; color:var(--heading); font-weight:500; }
.fin-box > p { margin:0 0 14px; color:var(--muted); font-size:13.5px; }
.vlist { list-style:none; margin:10px 0 0; padding:0; max-height:260px; overflow:auto; }
.vlist li { display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px dashed var(--line-2); font-size:13.5px; }
.vlist li:last-child { border-bottom:0; }
.vlist b { font-weight:500; color:var(--heading); }
.fin-sum { display:flex; align-items:flex-end; gap:8px; color:var(--heading); }
.fin-sum b { font-size:34px; font-weight:500; line-height:1; letter-spacing:-.02em; }
.fin-sum small { font-size:16px; color:var(--muted); }
.steps { display:flex; gap:6px; margin:12px 0 4px; }
.steps i { flex:1; height:6px; border-radius:999px; background:var(--line); }
.steps i.on { background:var(--orange); }
.steps-l { display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted); }

/* ---------- tabel PM ---------- */
.tbl { width:100%; border-collapse:collapse; }
.tbl th, .tbl td { text-align:left; padding:11px 10px; border-bottom:1px solid var(--line-2); vertical-align:middle; font-size:14px; }
.tbl th { font-size:12.5px; color:var(--muted); font-weight:400; }
.tbl tr:last-child td { border-bottom:0; }
.tbl td .row-act { display:flex; gap:6px; justify-content:flex-end; }
.tbl-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:16px; padding:4px 10px; background:var(--panel); }
.inline-pw { display:flex; gap:6px; }
.minibar { width:110px; height:6px; border-radius:999px; background:var(--line); overflow:hidden; display:inline-block; vertical-align:middle; margin-right:8px; }
.minibar i { display:block; height:100%; background:var(--orange); border-radius:999px; }

/* ---------- dialog & toast ---------- */
dialog.dlg { border:1px solid var(--line); border-radius:18px; padding:0; width:min(640px, calc(100vw - 32px)); background:var(--panel); color:var(--text); box-shadow:0 20px 50px var(--shadow); }
dialog.dlg::backdrop { background:var(--overlay); }
.dlg-h { padding:20px 24px 4px; }
.dlg-h h2 { margin:0; font-size:20px; color:var(--heading); font-weight:500; }
.dlg-b { padding:14px 24px 4px; max-height:68vh; overflow:auto; }
.dlg-f { display:flex; gap:10px; justify-content:flex-end; align-items:center; padding:14px 24px 20px; }
.dlg-f .sp { flex:1; }
.checkline { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text); cursor:pointer; }
.checkline input { width:16px; height:16px; accent-color:var(--orange); }
input[type=datetime-local], input[type=number], input[type=month] { width:100%; background:var(--field); border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 11px; font-size:14px; }
input[type=datetime-local]:focus, input[type=number]:focus { border-color:var(--strong); outline:none; box-shadow:0 0 0 3px var(--ring); }
#toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%, 16px); background:var(--strong); color:var(--on-strong); padding:10px 18px; border-radius:999px; font-size:13.5px; font-weight:500; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:60; max-width:calc(100vw - 32px); }
#toast.show { opacity:1; transform:translate(-50%, 0); }
#toast.bad { background:var(--orange); color:#fff; }

/* halaman ikon di dalam panel */
.content-b .intro { margin-top:0; }
.content-b .wrap { padding:0; }

/* ---------- segmented control (filter, tab, versi) gaya baru ---------- */
.filters, .seg { display:inline-flex; gap:2px; background:var(--side); border:1px solid var(--line); padding:3px; border-radius:12px; box-shadow:none; }
.main .seg, .settings .seg { background:var(--side); }
.filters button, .seg button { border:0; background:none; padding:7px 13px; border-radius:9px; font-size:13px; font-weight:500; color:var(--muted); cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; transition:background-color .15s, color .15s; }
.filters button:hover, .seg button:hover { color:var(--heading); }
.filters button[aria-pressed="true"], .seg button[aria-pressed="true"] { background:var(--panel); color:var(--heading); box-shadow:0 1px 2px var(--shadow), 0 0 0 1px var(--line); }
.filters button[aria-pressed="true"]::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--orange); }
.filters .n { font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.lseg { display:flex; gap:2px; background:var(--bg); padding:3px; border-radius:12px; border:1px solid var(--line); }
.lseg button { height:32px; padding:0 10px; border:0; border-radius:9px; background:none; color:var(--muted); font-size:12.5px; font-weight:500; cursor:pointer; }
.lseg button[aria-pressed="true"] { background:var(--panel); color:var(--orange); box-shadow:0 1px 2px var(--shadow); }
/* chip dengan ikon */
.chip svg { width:13px; height:13px; flex:none; }
.chip-ver { background:var(--strong); color:var(--on-strong); }
/* checklist video finance */
.vpick { border:1px solid var(--line); border-radius:14px; background:var(--panel); margin-top:12px; }
.vpick-g { border-bottom:1px solid var(--line-2); }
.vpick-g:last-child { border-bottom:0; }
.vpick-h { display:flex; align-items:center; gap:10px; padding:11px 14px; font-weight:500; color:var(--heading); font-size:14px; background:var(--side); border-radius:14px 14px 0 0; }
.vpick-g + .vpick-g .vpick-h { border-radius:0; }
.vpick-h .muted { font-weight:400; font-size:12.5px; margin-left:auto; }
.vpick label { display:flex; align-items:center; gap:10px; padding:9px 14px; font-size:13.5px; cursor:pointer; border-top:1px dashed var(--line-2); }
.vpick label:hover { background:var(--hover); }
.vpick input { width:16px; height:16px; accent-color:var(--orange); flex:none; }
.vpick label b { font-weight:500; color:var(--heading); }
.vpick label .muted { margin-left:auto; font-size:12.5px; white-space:nowrap; }
.vpick .old { font-size:11px; color:var(--warn); background:var(--warn-t); border-radius:999px; padding:1px 7px; }
.pcard-top { display:flex; align-items:flex-start; gap:10px; }
.pcard-top b { flex:1; }
.pcard .set { border:1px solid var(--line); background:var(--panel); border-radius:9px; padding:5px 10px; font-size:12.5px; font-weight:500; color:var(--heading); cursor:pointer; }
.pcard .set:hover { border-color:var(--orange); color:var(--orange); }
.pcard .due { font-size:12.5px; }

/* ---------- notifikasi ---------- */
.nhost { position:relative; display:inline-flex; }
.npanel { position:absolute; top:calc(100% + 8px); right:0; width:min(380px, 88vw); background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:0 16px 40px var(--shadow); z-index:30; overflow:hidden; }
.np-h { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); }
.np-h b { font-weight:500; color:var(--heading); }
.np-h .btn-ghost { margin-left:auto; font-size:12.5px; }
.np-l { max-height:60vh; overflow:auto; }
.np-i { display:flex; gap:10px; width:100%; text-align:left; border:0; background:none; padding:11px 14px; border-bottom:1px solid var(--line-2); cursor:pointer; color:inherit; text-decoration:none; }
.np-i:hover { background:var(--hover); }
.np-i.unread { background:var(--tint); }
.np-i.unread .np-t { color:var(--heading); font-weight:500; }
.np-ic { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--bg); color:var(--muted); flex:none; }
.np-ic svg { width:16px; height:16px; }
.np-ic.t-revisi { background:var(--warn-t); color:var(--warn); } .np-ic.t-versi, .np-ic.t-tugas { background:var(--info-t); color:var(--info); }
.np-ic.t-finance, .np-ic.t-status { background:var(--ok-t); color:var(--ok); } .np-ic.t-komentar, .np-ic.t-ikon { background:var(--orange-t); color:var(--link); }
.np-t { display:block; font-size:13.5px; color:var(--text); line-height:1.35; }
.np-w { display:block; font-size:12px; color:var(--muted); margin-top:2px; }

/* ---------- balasan & gambar komentar ---------- */
.cm-reps { margin:8px 0 0; padding-left:14px; border-left:2px solid var(--line); }
.cm-reps .cm { padding:8px 0; border-bottom:0; }
.cm.rev .cm-reps { grid-column:2; }
.cm-img { display:block; margin-top:8px; max-width:240px; max-height:200px; border-radius:10px; border:1px solid var(--line); object-fit:cover; cursor:zoom-in; }
.replying { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:6px 10px; margin-bottom:8px; }
.replying svg { width:15px; height:15px; flex:none; }
.replying b { color:var(--heading); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1; }
.replying button { border:0; background:none; color:var(--muted); cursor:pointer; padding:0 2px; }
.attach { display:flex; align-items:center; gap:10px; margin-top:8px; }
.attach img { width:56px; height:56px; object-fit:cover; border-radius:9px; border:1px solid var(--line); }
.icon-btn2 { width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--muted); display:grid; place-items:center; cursor:pointer; flex:none; }
.icon-btn2:hover { color:var(--heading); border-color:var(--muted); }
.icon-btn2 svg { width:17px; height:17px; }

/* ---------- dashboard analitik ---------- */
.dgrid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); gap:14px; }
.dgrid + .dgrid { margin-top:14px; }
.dgrid.two { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
.dcol { display:flex; flex-direction:column; gap:14px; min-width:0; }
.dc { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:18px; min-width:0; position:relative; display:flex; flex-direction:column; }
.dcol .dc { flex:1; }
.dc-h { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.dc-h h3 { margin:0; font-size:16px; font-weight:500; color:var(--heading); }
.dc-sub { font-size:12.5px; color:var(--muted); margin:-8px 0 12px; }
.big { display:flex; align-items:baseline; gap:8px; color:var(--heading); margin-bottom:12px; }
.big b { font-size:30px; font-weight:500; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }
.big small { font-size:14px; color:var(--muted); }
.big.xl b { font-size:44px; }
.split { display:flex; gap:4px; height:12px; }
.split i { border-radius:999px; min-width:6px; }
.split i.rest { background:var(--bg); border:1px solid var(--line); }
.lg { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:12px; font-size:12.5px; color:var(--muted); }
.lg span { display:inline-flex; align-items:center; gap:6px; }
.lg b { width:9px; height:9px; border-radius:50%; display:inline-block; flex:none; }
.lg b.rest { background:var(--line); }
.lg b.hatch { background:repeating-linear-gradient(135deg, var(--line) 0 2px, transparent 2px 4px); border:1px solid var(--line); }
.lg.top { justify-content:flex-start; gap:16px; margin:-4px 0 4px; }
.filters.mini { align-self:flex-start; margin-bottom:6px; }
.filters.mini button { padding:5px 11px; font-size:12.5px; }
.filters.mini button[aria-pressed="true"] { background:var(--strong); color:var(--on-strong); box-shadow:none; }
.filters.mini button[aria-pressed="true"]::before { display:none; }
.ot .big { margin:auto 0 12px; padding-top:14px; }
.hbar { height:44px; border-radius:12px; background:repeating-linear-gradient(135deg, var(--line) 0 2px, transparent 2px 7px); border:1px solid var(--line); overflow:hidden; }
.hbar i { display:block; height:100%; border-radius:11px; background:linear-gradient(90deg, #FF7A4D, var(--orange)); transition:width .3s; }
.gwrap { position:relative; width:100%; max-width:260px; margin:4px auto 0; }
.gauge { display:block; width:100%; }
.gauge line { stroke-width:7.5; stroke-linecap:round; }
.gauge line.on { stroke:var(--orange); }
.gauge line.off { stroke:var(--line); }
.gval { position:absolute; left:0; right:0; bottom:2px; text-align:center; }
.gval b { font-size:32px; font-weight:500; color:var(--heading); letter-spacing:-.02em; }
.delta { display:flex; align-items:center; gap:8px; justify-content:center; margin:14px auto 0; padding:7px 8px 7px 14px; border:1px solid var(--line); border-radius:999px; font-size:12.5px; color:var(--muted); width:max-content; max-width:100%; }
.delta span { font-weight:500; }
.delta.up span { color:var(--ok); } .delta.down span { color:var(--link); }
.delta i { width:22px; height:22px; border-radius:7px; display:grid; place-items:center; background:var(--ok-t); color:var(--ok); }
.delta.down i { background:var(--orange-t); color:var(--link); transform:scaleY(-1); }
.delta i svg { width:13px; height:13px; }
/* grafik tren */
.tbars { display:flex; gap:10px; align-items:stretch; flex:1; min-height:240px; max-height:380px; }
.tbars.dense { gap:3px; }
.tb { flex:1; display:flex; flex-direction:column; min-width:0; outline:none; cursor:default; }
.tb .track { flex:1; position:relative; border-radius:14px; background:repeating-linear-gradient(135deg, var(--line) 0 1.5px, transparent 1.5px 7px); display:flex; align-items:flex-end; overflow:hidden; }
.tbars.dense .tb .track { border-radius:5px; }
.tb .track i { display:flex; justify-content:center; width:100%; border-radius:14px; background:var(--strong); padding-top:8px; transition:height .3s; }
.tbars.dense .tb .track i { border-radius:5px; padding:0; }
.tb .track i span { width:30px; height:22px; border-radius:999px; background:rgba(255,255,255,.16); color:var(--on-strong); font-size:11.5px; font-weight:500; display:grid; place-items:center; font-variant-numeric:tabular-nums; }
.tb.hot .track i { background:linear-gradient(180deg, #FF7A4D, var(--orange)); }
.tb.hot .track i span { background:rgba(255,255,255,.25); color:#fff; }
.tb:hover .track i, .tb:focus .track i { filter:brightness(1.15); }
.tb em { font-style:normal; font-size:12px; color:var(--muted); text-align:center; margin-top:8px; height:16px; white-space:nowrap; }
.tb.now em { color:var(--orange); font-weight:500; }
.tr .tip { position:absolute; transform:translate(-50%, -100%); background:var(--strong); color:var(--on-strong); font-size:12px; font-weight:500; padding:5px 9px; border-radius:8px; white-space:nowrap; pointer-events:none; z-index:5; }
/* pipeline + tabel */
.pipe { display:flex; gap:3px; height:10px; margin-bottom:10px; }
.pipe i { border-radius:999px; min-width:6px; }
.p-todo { background:var(--muted); } .p-editing { background:var(--info); } .p-revisi { background:var(--warn); } .p-approval { background:var(--orange); } .p-uploaded { background:var(--ok); } .p-none { background:var(--line); }
.pipe-lg { display:flex; flex-wrap:wrap; gap:6px 12px; margin-bottom:12px; }
.pipe-lg span { display:inline-flex; align-items:center; gap:6px; font-size:13px; }
.pipe-lg b { font-weight:500; color:var(--heading); font-variant-numeric:tabular-nums; }
.dtbl { overflow-x:auto; margin:0 -4px; }
.dtbl table { width:100%; border-collapse:collapse; min-width:420px; }
.dtbl td.vt b { display:block; }
.dtbl td.vt span { display:block; font-size:12px; color:var(--muted); max-width:220px; overflow:hidden; text-overflow:ellipsis; }
.dtbl th { text-align:left; font-size:12px; font-weight:400; color:var(--muted); padding:8px 6px; border-bottom:1px solid var(--line); white-space:nowrap; }
.dtbl td { padding:10px 6px; border-bottom:1px solid var(--line-2); font-size:13.5px; white-space:nowrap; }
.dtbl td b { font-weight:500; color:var(--heading); }
.dtbl tr[data-open] { cursor:pointer; }
.dtbl tr[data-open]:hover td { background:var(--hover); }
.dtbl tr:last-child td { border-bottom:0; }
.due-c { display:inline-flex; align-items:center; gap:6px; }
.due-c svg { width:14px; height:14px; color:var(--muted); }
.dash-h { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 16px; }
.dash-h .sp { flex:1; }
.dash-h .ctx { font-size:13px; color:var(--muted); }
@media (max-width:1200px) { .dgrid { grid-template-columns:repeat(2, minmax(0, 1fr)); } .dgrid .gc { grid-column:1 / -1; } .dgrid.two { grid-template-columns:1fr; } }
@media (max-width:700px) { .dgrid { grid-template-columns:1fr; } .tbars { height:200px; gap:5px; } .tb .track i span { width:24px; font-size:10.5px; } }

/* ---------- profil & avatar ---------- */
.av { overflow:hidden; }
.av img, .sb-av img { width:100%; height:100%; object-fit:cover; display:block; }
.sb-av { overflow:hidden; }
.sb-me { display:flex; align-items:center; gap:10px; min-width:0; flex:1; text-decoration:none; color:inherit; border-radius:10px; }
.sb-me:hover .who-n { color:var(--orange); }
.sb-me > div { min-width:0; flex:1; }
.prof { display:grid; grid-template-columns:minmax(240px, 320px) minmax(0, 1fr); gap:16px; align-items:start; max-width:900px; }
.prof-card { align-items:center; text-align:center; gap:6px; }
.prof-pic { width:132px; height:132px; border-radius:50%; overflow:hidden; background:linear-gradient(135deg, var(--orange), #FF7A4D); display:grid; place-items:center; margin:6px 0 8px; box-shadow:0 0 0 4px var(--panel), 0 0 0 5px var(--line); }
.prof-pic img { width:100%; height:100%; object-fit:cover; }
.prof-pic span { color:#fff; font-size:40px; font-weight:500; }
.prof-n { font-size:18px; font-weight:500; color:var(--heading); }
.prof-acts { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center; margin-top:12px; }
.cm-h .av { width:22px; height:22px; border-radius:50%; font-size:9.5px; }
@media (max-width:760px) { .prof { grid-template-columns:1fr; } }

/* ---------- player sendiri ---------- */
.player.native { background:#000; }
.player.native video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
.marks { position:relative; height:18px; margin:2px 6px 0; border-radius:999px; background:var(--bg); border:1px solid var(--line); }
.mk { position:absolute; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; border:2px solid var(--panel); background:var(--info); cursor:pointer; padding:0; box-shadow:0 1px 3px var(--shadow); }
.mk.rev { background:var(--warn); } .mk.ok { background:var(--ok); }
.mk:hover, .mk:focus-visible { transform:scale(1.3); }
.psrc { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.psrc .sp { flex:1; }
.psrc .btn-o { flex:1; justify-content:center; min-width:0; }
button.tc { border:0; cursor:pointer; display:inline-flex; align-items:center; gap:4px; font:inherit; font-size:12px; font-weight:500; }
button.tc svg { width:12px; height:12px; }
button.tc:hover { background:var(--info); color:#fff; }
.cm { cursor:default; border-radius:10px; transition:background-color .3s; }
.cm:has(> .cm-h .tc) { cursor:pointer; }
.cm.hl { animation:cmhl 1.6s ease; }
@keyframes cmhl { 0%, 40% { background:var(--orange-t); } 100% { background:transparent; } }
.pick { color:var(--orange); border-color:var(--orange-t); }

/* ---------- responsif ---------- */
@media (max-width: 1200px) {
  .stats { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .focus { grid-template-columns:1fr; }
}
@media (max-width: 1000px) {
  .review { grid-template-columns:1fr; }
  .rv-left { margin:0 auto; }
  .rv-right { position:static; max-height:none; }
  .fin { grid-template-columns:1fr; }
}
@media (max-width: 900px) {
  .app { grid-template-columns:1fr; padding:0; gap:0; }
  .sb { position:fixed; z-index:50; top:0; left:0; bottom:0; height:auto; width:min(300px, 86vw); border-radius:0 20px 20px 0; transform:translateX(-105%); transition:transform .2s; padding-top:calc(18px + env(safe-area-inset-top)); }
  body.sb-open .sb { transform:none; }
  body.sb-open .sb-scrim { display:block; position:fixed; inset:0; z-index:40; background:var(--overlay); }
  .content { border-radius:0; border:0; min-height:100vh; }
  .content-h { padding:12px 16px; position:sticky; top:0; z-index:20; background:var(--panel); flex-wrap:nowrap; gap:10px; }
  .content-h > div:nth-child(2) { flex:1; min-width:0; }
  .content-h h1 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .content-h .crumb { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .content-h .acts { flex-wrap:nowrap; gap:6px; }
  .content-h h1 { font-size:19px; }
  .content-b { padding:18px 16px 40px; }
  .menu-btn { display:grid; }
  .board { grid-template-columns:repeat(6, 80vw); scroll-snap-type:x mandatory; }
  .col { scroll-snap-align:start; }
}
@media (max-width: 600px) {
  .stats { grid-template-columns:1fr; }
  .linkgrid { grid-template-columns:1fr; }
  .task { grid-template-columns:auto minmax(0,1fr); }
  .task-chips { grid-row:auto; grid-column:2; justify-content:flex-start; margin-top:6px; }
  .content-h .acts .hide-s { display:none; }
  .gt-t { margin-left:0; }
}

@media (max-width: 600px) {
  .content-h { flex-wrap:wrap !important; }
  .content-h .acts { width:100%; flex-wrap:wrap !important; margin-left:0; gap:8px; }
  .content-h .acts select { flex:1; min-width:140px; max-width:none; }
  /* panel notifikasi di HP: menempel di layar, tidak melebar keluar */
  .npanel { position:fixed; top:max(12px, env(safe-area-inset-top)); left:12px; right:12px; width:auto; }
  .np-l { max-height:calc(100dvh - 110px); }
}
/* jangan sampai halaman bisa digeser ke samping di HP */
html, body.appbody { overflow-x:clip; }

/* ===== tombol "Buka brief" di tab Brief ===== */
.brief-open { display:flex; align-items:center; gap:12px; padding:12px 14px; margin:2px 0 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--tint); color:var(--heading); text-decoration:none; transition:border-color .15s, background-color .15s; }
.brief-open:hover { border-color:var(--orange); background:var(--tint-2); }
.brief-open .bo-ic { width:36px; height:36px; border-radius:10px; background:var(--orange); color:#fff; display:grid; place-items:center; flex:none; }
.brief-open .bo-ic svg { width:19px; height:19px; }
.brief-open .bo-t { display:flex; flex-direction:column; min-width:0; flex:1; }
.brief-open .bo-t b { font-weight:500; font-size:14.5px; }
.brief-open .bo-t span { font-size:12.5px; color:var(--muted); }
.brief-open .bo-p { display:flex; flex-direction:column; align-items:flex-end; gap:5px; font-size:12.5px; font-variant-numeric:tabular-nums; }
.brief-open .bo-p b { font-weight:500; }
.brief-open .bo-p i { display:block; width:64px; height:4px; border-radius:4px; background:var(--line); overflow:hidden; position:relative; }
.brief-open .bo-p i::after { content:""; position:absolute; inset:0 auto 0 0; width:var(--p); background:var(--orange); border-radius:4px; }
.brief-open .bo-x { color:var(--muted); display:grid; }
.brief-open .bo-x svg { width:16px; height:16px; }
.docpick { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.docpick .docname { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:var(--heading); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.docpick .docname svg, .docbtn svg { width:16px; height:16px; flex:none; }
.docbtn { display:inline-flex; align-items:center; gap:6px; cursor:pointer; margin-left:auto; }

/* ===== halaman brief (tab baru) ===== */
.bp-body { background:var(--canvas); min-height:100vh; margin:0; }
.bp-top { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:14px; padding:10px 20px; background:var(--head); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.bp-back { display:inline-flex; align-items:center; gap:6px; color:var(--muted); text-decoration:none; font-size:13.5px; font-weight:500; padding:6px 8px 6px 4px; border-radius:8px; }
.bp-back:hover { color:var(--heading); background:var(--hover); }
.bp-back svg { width:18px; height:18px; }
.bp-id { display:flex; align-items:center; gap:10px; min-width:0; }
.bp-mark { display:grid; flex:none; }
.bp-mark svg { width:26px; height:26px; border-radius:8px; }
.bp-name { display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.bp-name b { font-weight:500; color:var(--heading); font-size:14.5px; font-variant-numeric:tabular-nums; }
.bp-name span { color:var(--muted); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:34vw; }
.bp-tabs { margin:0 auto; flex:none; }
.bp-tabs[hidden] { display:none; }
.bp-n { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--orange); color:#fff; font-size:11px; }
.bp-right { display:flex; align-items:center; gap:12px; margin-left:auto; }
.bp-tabs:not([hidden]) + .bp-right { margin-left:0; }
.bp-prog { display:flex; align-items:center; gap:8px; font-size:13px; font-variant-numeric:tabular-nums; color:var(--heading); }
.bp-prog b { font-weight:500; }
.bp-prog i { display:block; width:110px; height:6px; border-radius:6px; background:var(--line); overflow:hidden; }
.bp-prog i span { display:block; height:100%; width:0; background:var(--orange); border-radius:6px; transition:width .25s; }
.bp-prog.full i span { background:var(--ok); }
.bp-save { font-size:12.5px; color:var(--muted); min-width:64px; text-align:right; }
.bp-save.bad { color:var(--link); }
.bp-main { max-width:960px; margin:0 auto; padding:24px 20px 60px; }
.bp-load { color:var(--muted); text-align:center; padding:60px 0; }
.bp-gate { max-width:420px; margin:80px auto; text-align:center; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:32px 24px; }
.bp-gate h2 { margin:0 0 6px; font-weight:500; color:var(--heading); font-size:20px; }
.bp-gate p { color:var(--muted); margin:0 0 18px; font-size:14px; }
.bp-gate .btn { display:inline-flex; text-decoration:none; }
.bp-docwrap { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:0 1px 3px var(--shadow); }
.bp-docwrap iframe { display:block; width:100%; height:80vh; border:0; background:#fff; }
.bp-foot { color:var(--muted); font-size:12.5px; text-align:center; margin:14px 0 0; }
.bp-paper { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:36px 40px 26px; box-shadow:0 1px 3px var(--shadow); }
.bp-head { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.bp-logo .logo { width:170px; max-width:42vw; height:auto; display:block; }
:root[data-theme="dark"] .bp-logo .logo path[fill="#0E2433"] { fill:#F2F6F9; }
.bp-hdr { text-align:right; color:var(--muted); font-size:12.5px; line-height:1.5; }
.bp-hdr b { color:var(--heading); font-weight:500; }
.bp-rule { height:3px; border-radius:3px; background:linear-gradient(90deg, var(--orange) 0 64px, var(--line) 64px); margin:18px 0 26px; }
.bp-title { margin-bottom:22px; }
.bp-title h1 { margin:0; font-weight:500; font-size:26px; letter-spacing:.04em; color:var(--heading); }
.bp-title h2 { margin:4px 0 0; font-weight:500; font-size:15.5px; color:var(--orange); font-variant-numeric:tabular-nums; }
.bp-title p { margin:8px 0 0; color:var(--muted); font-size:13.5px; }
.bp-title p b { color:var(--heading); font-weight:500; }
.bp-sec { display:grid; grid-template-columns:150px 1fr; gap:22px; padding:20px 0; border-top:1px solid var(--line-2); }
.bp-sec.old { opacity:.62; }
.bp-lbl { display:flex; flex-direction:column; gap:3px; }
.bp-no { font-size:11.5px; font-weight:500; letter-spacing:.08em; color:var(--orange); }
.bp-ttl { font-size:15px; font-weight:500; color:var(--heading); }
.bp-bd { min-width:0; font-size:14px; color:var(--text); }
.bp-txt { white-space:pre-wrap; line-height:1.6; }
.bp-txt a { color:var(--link); }
.bp-links { display:flex; flex-wrap:wrap; gap:8px; }
.bp-links .btn-drive { margin:0; }
.bp-intro { margin:12px 0 8px; color:var(--muted); font-size:13px; }
.bp-txt + .bp-intro { margin-top:14px; }
.bp-tw { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); }
.bp-tb { width:100%; border-collapse:collapse; font-size:13.5px; }
.bp-tb th { text-align:left; font-weight:500; color:var(--muted); font-size:12px; padding:8px 10px; background:var(--box); border-bottom:1px solid var(--line); white-space:nowrap; }
.bp-tb td { padding:9px 10px; border-bottom:1px solid var(--line-2); vertical-align:top; }
.bp-tb tr:last-child td { border-bottom:0; }
.bp-tb tbody tr { cursor:pointer; transition:background-color .12s; }
.bp-tb tbody tr:hover { background:var(--hover); }
.bp-tb tbody tr.on { background:var(--ok-t); }
.bp-tb tbody tr.on td:not(.cb):not(.nk) { color:var(--muted); }
.bp-tb .cb { width:34px; text-align:center; }
.bp-tb .t { font-variant-numeric:tabular-nums; white-space:nowrap; }
.bp-tb .nk { min-width:260px; line-height:1.5; }
.bp-box { display:inline-block; width:18px; height:18px; border-radius:5px; border:1.6px solid var(--line); background:var(--field); vertical-align:middle; position:relative; flex:none; transition:background-color .12s, border-color .12s; }
.bp-box.on { background:var(--ok); border-color:var(--ok); }
.bp-box.on::after { content:""; position:absolute; left:5px; top:1.5px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
:root[data-theme="dark"] .bp-box.on::after { border-color:#0E2433; }
.bp-cl { list-style:none; margin:0; padding:0; }
.bp-cl li { display:flex; gap:12px; align-items:flex-start; padding:10px 12px; border-radius:var(--r-sm); cursor:pointer; transition:background-color .12s; }
.bp-cl li + li { border-top:1px dashed var(--line-2); }
.bp-cl li:hover { background:var(--hover); }
.bp-cl li.on > span:last-child:not(.bp-rv), .bp-cl li.on .bp-rv > span[data-notr] { color:var(--muted); text-decoration:line-through; text-decoration-color:var(--line); }
.bp-cl .bp-box { margin-top:1px; }
.bp-rv { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; min-width:0; line-height:1.5; }
.bp-rv .tc { flex:none; }
.bp-img { display:block; max-width:220px; max-height:160px; border-radius:8px; border:1px solid var(--line); margin-top:4px; }
.bp-tag { display:inline-flex; font-size:11.5px; font-weight:500; padding:2px 8px; border-radius:999px; background:var(--bg); color:var(--muted); }
.bp-tag.ok { background:var(--ok-t); color:var(--ok); }
.bp-pfoot { display:flex; justify-content:space-between; gap:12px; margin-top:18px; padding-top:14px; border-top:1px solid var(--line-2); color:var(--muted); font-size:12px; }
.bp-cl li:focus-visible, .bp-tb tr:focus-visible { outline:2px solid var(--orange); outline-offset:-2px; }
@media (max-width:760px) {
  .bp-top { flex-wrap:wrap; gap:10px; padding:10px 14px; }
  .bp-back span, .bp-save { display:none; }
  .bp-name span { max-width:48vw; }
  .bp-tabs { order:5; width:100%; margin:0; }
  .bp-tabs button { flex:1; justify-content:center; }
  .bp-prog i { width:64px; }
  .bp-main { padding:14px 12px 40px; }
  .bp-paper { padding:22px 16px 18px; }
  .bp-hdr { display:none; }
  .bp-sec { grid-template-columns:1fr; gap:10px; }
}
@media print {
  .bp-top { display:none; }
  .bp-body { background:#fff; }
  .bp-paper { border:0; box-shadow:none; padding:0; }
}

/* ===== aplikasi desktop: file lokal, tool lokal, konsol ===== */
.dfiles { border:1px solid var(--line); border-radius:var(--r); padding:10px; margin-bottom:10px; background:var(--panel); display:flex; flex-direction:column; gap:6px; }
.dfh { display:flex; align-items:center; gap:6px; font-size:13px; }
.dfh b { font-weight:500; color:var(--heading); }
.dfh .sp { flex:1; }
.dfile { display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:1px solid var(--line-2); background:var(--field); color:var(--text); border-radius:var(--r-sm); padding:8px 10px; cursor:pointer; font:inherit; transition:border-color .12s, background-color .12s; }
.dfile:hover { border-color:var(--orange); background:var(--tint); }
.dfile svg { width:18px; height:18px; color:var(--muted); flex:none; }
.dfn { display:flex; flex-direction:column; min-width:0; flex:1; }
.dfn b { font-weight:500; font-size:13.5px; color:var(--heading); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dfn span { font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; direction:rtl; text-align:left; }
.dfm { display:flex; flex-direction:column; align-items:flex-end; gap:3px; font-size:11.5px; color:var(--muted); flex:none; }
.dfm > span:not(.bp-tag) { white-space:nowrap; }
.ltools { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:14px; }
.lt { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); padding:16px; display:flex; flex-direction:column; gap:10px; }
.lt.off { opacity:.6; }
.lt-h { display:flex; align-items:center; gap:10px; }
.lt-h b { font-weight:500; color:var(--heading); font-size:15px; }
.lt-ic { width:34px; height:34px; border-radius:10px; background:var(--tint); color:var(--orange); display:grid; place-items:center; flex:none; }
.lt-ic svg { width:18px; height:18px; }
.lt-ok { margin-left:auto; font-size:12px; color:var(--link); }
.lt p { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.lt-run { display:flex; gap:8px; margin-top:auto; }
.lt-run input { flex:1; min-width:0; font-variant-numeric:tabular-nums; }
.lt-run input:not(:placeholder-shown) { text-transform:uppercase; }
.sec-h .sp { flex:1; }
.dtc { position:fixed; right:18px; bottom:18px; z-index:80; width:min(560px, calc(100vw - 36px)); background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:0 12px 40px var(--shadow); overflow:hidden; }
.dtc[hidden] { display:none; }
.dtc-h { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line); font-size:13.5px; }
.dtc-h b { font-weight:500; color:var(--heading); }
.dtc-h .sp { flex:1; }
.dtc-k { font-variant-numeric:tabular-nums; color:var(--muted); }
.dtc-st { font-size:11.5px; font-weight:500; padding:2px 8px; border-radius:999px; }
.dtc-st.run { background:var(--info-t); color:var(--info); }
.dtc-st.ok { background:var(--ok-t); color:var(--ok); }
.dtc-st.bad { background:var(--orange-t); color:var(--link); }
.dtc-log { margin:0; padding:10px 12px; height:260px; overflow:auto; font:12px/1.55 ui-monospace, "Cascadia Mono", Consolas, monospace; background:#0B1D29; color:#C9D6E0; white-space:pre-wrap; word-break:break-word; }
.dtc-log .ok { color:#5FD497; }
.dtc-log .bad { color:#FF8466; }

.psrc .chip.inline { min-width:0; max-width:100%; overflow:hidden; }
.psrc .chip.inline span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.psrc .btn-ghost { white-space:nowrap; padding-left:6px; padding-right:6px; }
.psrc:has(> .chip.inline) { flex-wrap:nowrap; }

/* ===== board gaya ClickUp (warna mengikuti token status situs) ===== */
.board { gap:10px; }
.col { background:color-mix(in srgb, var(--c) 6%, var(--side)); border:1px solid color-mix(in srgb, var(--c) 14%, var(--line)); border-radius:14px; padding:10px 8px 8px; min-height:140px; display:flex; flex-direction:column; }
.col.over { border-color:var(--c); background:color-mix(in srgb, var(--c) 14%, var(--side)); }
.col-h { border:0; padding:2px 4px 10px; margin:0; gap:8px; }
.col-h::before { display:none; }
.col-pill { display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 7px; border-radius:7px; background:var(--c); color:#fff; font-size:11.5px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; }
.col-todo .col-pill { background:var(--panel); color:var(--heading); box-shadow:inset 0 0 0 1px var(--line); }
:root[data-theme="dark"] .col-pill { color:#0E2433; }
:root[data-theme="dark"] .col-todo .col-pill { color:var(--heading); }
.col-pill svg { width:13px; height:13px; }
.col-h .n { margin-left:0; color:var(--c); font-weight:500; }
.col-todo .col-h .n { color:var(--muted); }
.col-list { gap:8px; min-height:8px; }
.col .empty { padding:14px 6px; }
.col-add { display:flex; align-items:center; gap:6px; margin-top:6px; padding:7px 8px; border:0; background:none; color:var(--c); font:inherit; font-size:13px; font-weight:500; border-radius:8px; cursor:pointer; text-align:left; opacity:.85; }
.col-todo .col-add { color:var(--muted); }
.col-add:hover { opacity:1; background:color-mix(in srgb, var(--c) 10%, transparent); }
.col-add svg { width:15px; height:15px; }
.vc { border-radius:11px; padding:10px 11px 11px; display:flex; flex-direction:column; gap:6px; box-shadow:0 1px 2px var(--shadow); transition:border-color .12s, box-shadow .12s, transform .12s; }
.vc:hover { border-color:color-mix(in srgb, var(--orange) 45%, var(--line)); box-shadow:0 6px 18px var(--shadow); }
.vc-top { display:flex; align-items:center; gap:6px; min-height:20px; }
.vc-top .sp { flex:1; }
.vc-kode { font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.vc-mst { display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:500; color:var(--link); }
.vc-mst svg { width:11px; height:11px; }
.vc-new { font-size:10.5px; font-weight:500; color:#fff; background:var(--orange); border-radius:999px; padding:1px 7px; white-space:nowrap; }
.vc-more { width:24px; height:22px; display:grid; place-items:center; border:0; border-radius:6px; background:none; color:var(--muted); cursor:pointer; opacity:0; transition:opacity .12s; }
.vc:hover .vc-more, .vc:focus-within .vc-more { opacity:1; }
.vc-more:hover { background:var(--hover); color:var(--heading); }
.vc-more svg { width:16px; height:16px; }
@media (hover:none) { .vc-more { opacity:1; } }
.vc .t { font-size:14px; line-height:1.35; }
.vc .k { margin-top:-3px; }
.vc-chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:2px; }
.vchip { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 8px; border:1px solid var(--line); border-radius:7px; font-size:12px; color:var(--text); background:var(--panel); white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.vchip svg { width:13px; height:13px; color:var(--muted); flex:none; }
.vchip.late { color:var(--link); border-color:color-mix(in srgb, var(--orange) 35%, var(--line)); }
.vchip.late svg { color:var(--link); }
.vchip.ghost { color:var(--muted); border-style:dashed; }
.vchip.person { padding-left:3px; }
.vchip .av { width:18px; height:18px; font-size:9px; }
.vc-chips .chip { height:24px; font-size:12px; padding:0 8px; border-radius:7px; }
.vc-chips .chip svg { width:12px; height:12px; }
.vc-foot { display:flex; align-items:center; gap:6px 12px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin-top:2px; }
.vf { display:inline-flex; align-items:center; gap:5px; }
.vf svg { width:13px; height:13px; }
.vf.warn { color:var(--warn); } .vf.ok { color:var(--ok); }
.vc-st { margin-top:4px; padding:5px 8px; font-size:12px; border-radius:8px; color:var(--muted); background:var(--side); border-color:var(--line-2); }

/* ===== jendela tugas (gaya ClickUp) ===== */
body.tm-open { overflow:hidden; }
.tm-bg { position:fixed; inset:0; z-index:55; background:var(--overlay); display:grid; place-items:center; padding:24px; animation:tmIn .14s ease-out; }
@keyframes tmIn { from { opacity:0; } to { opacity:1; } }
.tm { width:min(1440px, 100%); height:min(94vh, 1000px); background:var(--panel); border:1px solid var(--line); border-radius:18px; box-shadow:0 24px 70px rgba(4,12,18,.35); overflow:hidden; display:flex; }
.tm-in { flex:1; min-width:0; display:flex; flex-direction:column; }
.tm-in > .empty { margin:auto; }
.tm-top { display:flex; align-items:center; gap:8px; padding:10px 14px 10px 20px; border-bottom:1px solid var(--line); background:var(--panel); }
.tm-top .sp { flex:1; }
.tm-crumb { display:flex; align-items:center; gap:8px; min-width:0; font-size:13px; color:var(--muted); }
.tm-crumb span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:40vw; }
.tm-crumb b { font-weight:500; color:var(--heading); }
.tm-crumb .sl { color:var(--line); }
.tm-x { width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:9px; background:none; color:var(--muted); cursor:pointer; }
.tm-x:hover { background:var(--hover); color:var(--heading); }
.tm-x svg { width:18px; height:18px; }
.tm-body { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0, 1fr) minmax(360px, 440px); }
.tm-main { overflow:auto; padding:22px 34px 40px; }
.tm-kind { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; }
.tm-title { margin:10px 0 18px; font-size:26px; line-height:1.25; font-weight:500; color:var(--heading); letter-spacing:-.01em; }
.tp { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:2px 28px; padding-bottom:20px; border-bottom:1px solid var(--line-2); }
.tp-row { display:grid; grid-template-columns:120px minmax(0, 1fr); align-items:center; gap:10px; min-height:40px; }
.tp-l { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.tp-l svg { width:15px; height:15px; flex:none; }
.tp-v { display:flex; align-items:center; gap:8px; min-width:0; font-size:13.5px; color:var(--text); flex-wrap:wrap; }
.tp-v .muted { font-size:12.5px; }
.tp-ctl { width:auto; max-width:100%; padding:6px 10px; font-size:13.5px; border-radius:8px; border:1px solid transparent; background:transparent; color:var(--text); cursor:pointer; }
.tp-ctl:hover, .tp-ctl:focus { border-color:var(--line); background:var(--field); }
.tp-ctl.late { color:var(--link); }
.tp-st { width:auto; padding:5px 10px; font-size:12px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; border-radius:7px; border:0; cursor:pointer; }
.tp-person { display:inline-flex; align-items:center; gap:7px; }
.tp-late { color:var(--link); }
.tp-chk { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text); cursor:pointer; }
.tp-chk input { width:16px; height:16px; accent-color:var(--orange); }
.tm-sec { padding:22px 0 4px; }
.tm-sec + .tm-sec { border-top:1px solid var(--line-2); margin-top:18px; }
.tm-sec h3 { margin:0 0 14px; font-size:15px; font-weight:500; color:var(--heading); }
.tm-video { display:grid; grid-template-columns:minmax(220px, 300px) minmax(0, 1fr); gap:20px; align-items:start; }
.tm-player .player { max-height:64vh; }
.tm-vside { display:flex; flex-direction:column; gap:12px; min-width:0; }
.tm-side { border-left:1px solid var(--line); background:var(--side); display:flex; flex-direction:column; min-height:0; }
.tm-side .rv-tabs { background:var(--panel); }
.tm-side .rv-body { flex:1; min-height:0; overflow:auto; }
.tm-side .composer { border-radius:0; }
@media (max-width:1000px) {
  .tm-bg { padding:0; }
  .tm { height:100%; height:100dvh; border-radius:0; border:0; }
  .tm-body { display:block; overflow:auto; }
  .tm-main { overflow:visible; padding:18px 16px 24px; }
  .tm-side { border-left:0; border-top:1px solid var(--line); }
  .tm-side .rv-body { overflow:visible; }
  .tp { grid-template-columns:1fr; }
  .tm-video { grid-template-columns:1fr; }
  .tm-player { max-width:320px; margin:0 auto; width:100%; }
  .tm-top .btn-ghost[data-act="reload"] { display:none; }
}

.col.col-todo { --c:var(--muted); } .col.col-editing { --c:var(--info); } .col.col-revisi { --c:var(--warn); } .col.col-approval { --c:var(--orange); } .col.col-uploaded { --c:var(--ok); }
.vc-kode { white-space:nowrap; }
.vc-foot .sp { flex:1; }
.tp .tp-ctl { border:1px solid transparent; background:transparent; box-shadow:none; height:auto; }
.tp .tp-ctl:hover, .tp .tp-ctl:focus { border-color:var(--line); background:var(--field); }
.tm-novid { border:1px dashed var(--line); border-radius:14px; padding:22px 18px; text-align:center; color:var(--muted); font-size:13.5px; background:var(--side); }
.tm-novid svg { width:26px; height:26px; color:var(--muted); display:block; margin:0 auto 8px; }
.tm-video.novid { grid-template-columns:minmax(200px, 280px) minmax(0, 1fr); }
@media (max-width:1000px) {
  .tm-crumb span:first-child, .tm-crumb .sl { display:none; }
  .tm-top { padding:8px 8px 8px 16px; }
  .tm-top .btn-ghost { white-space:nowrap; }
  .tm-title { font-size:22px; }
}
:root[data-theme="dark"] .player:not(.native) { background:#08090B; }

/* ===== warna status (menyala) ===== */
:root { --s-todo:#8A96A3; --s-editing:#FF7A00; --s-revisi:#F5203B; --s-approval:#1F7BFF; --s-qaext:#8B5CF6; --s-uploaded:#10B964; }
:root[data-theme="dark"] { --s-todo:#8A939C; --s-editing:#FF8A1F; --s-revisi:#FF3B54; --s-approval:#3D8EFF; --s-qaext:#A78BFA; --s-uploaded:#22D07A; }
.st-todo, .st-editing, .st-revisi, .st-approval, .st-qaext, .st-uploaded { --s:var(--s-todo); background:color-mix(in srgb, var(--s) 14%, transparent); color:var(--s); }
.st-editing { --s:var(--s-editing); } .st-revisi { --s:var(--s-revisi); } .st-approval { --s:var(--s-approval); } .st-qaext { --s:var(--s-qaext); } .st-uploaded { --s:var(--s-uploaded); }
:root:not([data-theme="dark"]) .st-editing { color:#D45F00; } :root:not([data-theme="dark"]) .st-uploaded { color:#0A8F4D; }
.st-todo { background:var(--bg); color:var(--muted); }
.col.col-todo { --c:var(--s-todo); } .col.col-editing { --c:var(--s-editing); } .col.col-revisi { --c:var(--s-revisi); } .col.col-approval { --c:var(--s-approval); } .col.col-qaext { --c:var(--s-qaext); } .col.col-uploaded { --c:var(--s-uploaded); }
.col-pill, :root[data-theme="dark"] .col-pill { color:#fff; }
:root[data-theme="dark"] .col-todo .col-pill { color:var(--heading); }
.col { background:color-mix(in srgb, var(--c) 8%, var(--side)); border-color:color-mix(in srgb, var(--c) 22%, var(--line)); }
.p-todo { background:var(--s-todo); } .p-editing { background:var(--s-editing); } .p-revisi { background:var(--s-revisi); } .p-approval { background:var(--s-approval); } .p-qaext { background:var(--s-qaext); } .p-uploaded { background:var(--s-uploaded); }
.sb-promo button.btn-dark { width:100%; border:0; font:inherit; cursor:pointer; }
.sb-promo button.btn-dark:disabled { opacity:.7; cursor:progress; }
.sb-promo .ph-link { display:block; text-align:center; margin-top:8px; font-size:12.5px; color:var(--muted); text-decoration:none; }
.sb-promo .ph-link:hover { color:var(--heading); }

/* ---------- Panduan (editor) ---------- */
.guide { max-width:960px; }
.g-bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px; }
.g-search { flex:1 1 240px; min-width:180px; border:1px solid var(--line); background:var(--field); color:var(--heading); border-radius:var(--r-sm); padding:9px 12px; font:inherit; font-size:13.5px; }
.g-search:focus { outline:none; border-color:var(--orange); }
.g-btn { border:1px solid var(--line); background:var(--panel); color:var(--heading); border-radius:var(--r-sm); padding:8px 12px; font:inherit; font-size:12.5px; cursor:pointer; }
.g-btn:hover { border-color:var(--orange); color:var(--orange); }
.g-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:4px; }
.g-chip { font-size:12.5px; padding:6px 12px; border:1px solid var(--line); border-radius:999px; color:var(--heading); text-decoration:none; background:var(--panel); }
.g-chip:hover { border-color:var(--orange); color:var(--orange); }
.g-grp { font-size:12px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); margin:26px 0 10px; scroll-margin-top:80px; }
.g-sec { border:1px solid var(--line); border-radius:var(--r); background:var(--panel); margin-bottom:8px; scroll-margin-top:80px; overflow:hidden; }
.g-sec[open] { border-color:color-mix(in srgb, var(--orange) 35%, var(--line)); box-shadow:var(--shadow); }
.g-sec[hidden], .g-grp[hidden], .g-empty[hidden] { display:none; }
.g-sec summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:14px 16px; }
.g-sec summary::-webkit-details-marker { display:none; }
.g-sec summary:hover { background:var(--hover); }
.g-sec summary:focus-visible { outline:2px solid var(--orange); outline-offset:-2px; }
.g-no { font-size:11px; font-weight:600; letter-spacing:.5px; color:var(--orange); min-width:20px; }
.g-h { flex:1; font-size:15px; font-weight:500; color:var(--heading); }
.g-n { font-size:12px; color:var(--muted); }
.g-chev { width:18px; height:18px; color:var(--muted); transition:transform .18s; flex:none; }
.g-sec[open] .g-chev { transform:rotate(180deg); }
.g-body { padding:4px 18px 20px 50px; display:grid; gap:22px; }
.g-body.has-img { grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); align-items:start; }
.g-txt ul { margin:0; padding-left:18px; color:var(--text); font-size:14px; line-height:1.65; }
.g-txt li { margin-bottom:7px; }
.g-txt li::marker { color:var(--orange); }
.g-note { margin:0 0 12px; padding:9px 12px; border-radius:var(--r-sm); background:var(--warn-t); color:var(--warn); font-size:13px; }
.g-rules { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; margin:0 0 14px; }
.g-rule { border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 12px; background:var(--box); font-size:13px; }
.g-rule b { display:block; color:var(--ok); font-size:16px; font-weight:600; }
.g-rule s { color:var(--muted); }
.g-img { display:block; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--box); box-shadow:var(--shadow); }
.g-img img { display:block; width:100%; height:auto; }
.g-empty { margin:20px 0; text-align:center; }
@media (max-width:760px) { .g-body.has-img { grid-template-columns:1fr; gap:14px; } .g-body { padding:4px 16px 18px; } .g-n { display:none; } }

/* ---------- Onboarding (editor) ---------- */
.onb { max-width:860px; }
.onb-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
.onb-step { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); color:var(--text); text-decoration:none; font-size:13px; }
.onb-step b { display:block; color:var(--heading); font-weight:500; font-size:14px; }
.onb-step .n { flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--orange-t); color:var(--orange); font-weight:600; font-size:12px; }
.onb-step.done .n { background:var(--ok-t); color:var(--ok); }
.onb-step .n svg { width:14px; height:14px; }
.onb-ok { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:var(--r); background:var(--ok-t); color:var(--ok); font-size:13.5px; margin-bottom:16px; }
.onb-ok svg { width:18px; height:18px; flex:none; }
.contract { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:34px 40px; color:var(--text); font-size:14px; line-height:1.65; }
.contract h2 { font-size:22px; color:var(--heading); font-weight:500; margin:0 0 4px; }
.contract h3 { font-size:15px; color:var(--heading); font-weight:500; margin:22px 0 6px; }
.contract p { margin:0 0 10px; }
.contract ul { margin:0 0 8px; padding-left:20px; }
.contract li { margin-bottom:4px; }
.contract mark { background:var(--warn-t); color:var(--warn); border-radius:3px; padding:0 3px; }
.onb-form { margin-top:16px; padding:18px 20px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); display:grid; gap:14px; }
.onb-name { display:grid; gap:6px; max-width:420px; }
.onb-name input { border:1px solid var(--line); background:var(--field); color:var(--heading); border-radius:var(--r-sm); padding:9px 12px; font:inherit; }
.onb-act { display:flex; align-items:center; gap:12px; }
.onb-act .btn-or:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
@media (max-width:700px) { .onb-steps { grid-template-columns:1fr; } .contract { padding:22px 18px; } }

/* ---------- tombol muat ulang ---------- */
.icon-act.spin svg { animation:xspin .6s linear infinite; }
@keyframes xspin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .icon-act.spin svg { animation:none; } }

/* ---------- kartu notifikasi HP ---------- */
.np-f { border-top:1px solid var(--line); }
.np-f:empty { display:none; }
.push-card { display:flex; align-items:center; gap:12px; padding:12px 14px; flex-wrap:wrap; }
.push-card .pc-ic { flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--orange-t); color:var(--orange); }
.push-card .pc-ic svg { width:18px; height:18px; }
.push-card .pc-t { flex:1 1 180px; min-width:0; }
.push-card .pc-t b { display:block; font-weight:500; color:var(--heading); font-size:13.5px; }
.push-card .pc-t span { display:block; font-size:12.5px; color:var(--muted); line-height:1.4; margin-top:2px; }
.push-card .pc-t span.bad { color:var(--orange); }
.push-card .pc-a { display:flex; gap:6px; align-items:center; }
.push-card .btn-or, .push-card .btn-o { padding:7px 12px; font-size:12.5px; }
.push-card.compact { padding:11px 14px; }
.prof-push { margin-top:14px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); }

/* ---------- chat ---------- */
.chat-wrap { display:grid; grid-template-columns:300px minmax(0,1fr); gap:14px; height:calc(100dvh - 150px); min-height:420px; }
.chat-wrap.single { grid-template-columns:minmax(0,1fr); max-width:820px; }
.chat-list { border:1px solid var(--line); border-radius:var(--r); background:var(--panel); overflow:auto; min-height:0; }
.chat-li { display:flex; gap:10px; align-items:center; width:100%; text-align:left; border:0; background:none; padding:11px 14px; border-bottom:1px solid var(--line-2); cursor:pointer; color:inherit; font:inherit; text-decoration:none; }
.chat-li:hover { background:var(--hover); }
.chat-li[aria-current="true"] { background:var(--orange-t); }
.chat-li .cl-t { flex:1; min-width:0; }
.chat-li .cl-n { display:flex; justify-content:space-between; gap:8px; font-size:13.5px; color:var(--heading); font-weight:500; }
.chat-li .cl-n small { font-weight:400; color:var(--muted); font-size:11.5px; white-space:nowrap; }
.chat-li .cl-m { display:block; font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.chat-li.unread .cl-m { color:var(--heading); font-weight:500; }
.chat-li .cl-c { flex:none; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--orange); color:#fff; font-size:11.5px; font-weight:600; display:grid; place-items:center; }
.chat-pane { min-height:0; min-width:0; }
.chat { display:flex; flex-direction:column; min-height:0; height:100%; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); overflow:hidden; }
.chat-h { display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--line); }
.chat-who { display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.chat-who b { font-weight:500; color:var(--heading); font-size:14px; }
.chat-who span { font-size:12px; }
.chat-back { display:none; padding:6px; }
.chat-back svg { width:18px; height:18px; transform:rotate(90deg); }
.chat-b { flex:1; min-height:0; overflow:auto; padding:14px 16px; display:flex; flex-direction:column; gap:6px; background:var(--bg); }
.chat-day { align-self:center; font-size:11.5px; color:var(--muted); margin:10px 0 4px; }
.msg { align-self:flex-start; max-width:min(80%,520px); padding:8px 12px 6px; border-radius:14px 14px 14px 4px; background:var(--panel); border:1px solid var(--line); color:var(--text); font-size:14px; line-height:1.45; white-space:pre-wrap; word-break:break-word; }
.msg small { display:block; margin-top:3px; font-size:11px; color:var(--muted); text-align:right; }
.msg.me { align-self:flex-end; border-radius:14px 14px 4px 14px; background:var(--orange-t); border-color:color-mix(in srgb, var(--orange) 28%, var(--line)); color:var(--heading); }
.msg.pending { opacity:.6; }
.msg a { color:var(--link); text-decoration:underline; }
.chat-f { display:flex; gap:8px; align-items:flex-end; padding:10px; border-top:1px solid var(--line); background:var(--panel); }
.chat-f textarea { flex:1; resize:none; min-height:40px; max-height:120px; border:1px solid var(--line); background:var(--field); color:var(--heading); border-radius:12px; padding:9px 12px; font:inherit; font-size:14px; line-height:1.4; }
.chat-f textarea:focus { outline:none; border-color:var(--orange); }
.chat-f .btn-or { height:40px; padding:0 14px; display:inline-flex; align-items:center; gap:6px; }
.chat-f .btn-or svg { width:16px; height:16px; }
.chat-empty { display:grid; place-items:center; height:100%; border:1px dashed var(--line); border-radius:var(--r); color:var(--muted); font-size:14px; padding:20px; text-align:center; }
@media (max-width:760px) {
  .chat-wrap { grid-template-columns:1fr; height:calc(100dvh - 128px); }
  .chat-wrap[data-view="thread"] .chat-list { display:none; }
  .chat-wrap[data-view="list"] .chat-pane { display:none; }
  .chat-back { display:inline-flex; }
  .chat-f .btn-or span { display:none; }
  .chat-f .btn-or { width:44px; padding:0; justify-content:center; }
}