:root{
--deep:#051C2C; --marine:#0B3A54; --signal:#2251FF; --cyan:#00A9F4;
--sky:#7FD5F5; --pale:#C7E8F8; --ink:#12212A; --slate:#65757E;
--rule:#D9E0E4; --mist:#F1F4F6; --paper:#FFFFFF; --alert:#E5321B;
--ok:#0E7A4A; --ok-bg:#E6F4EC; --warn:#7F5800; --warn-bg:#FDF4E3;
--alert-text:#B8281A; --slate2:#586870;
--alert-bg:#FDEEEC; --signal-bg:#EDF0FF; --cyan-bg:#E5F6FE;
--display:"Archivo",Helvetica,Arial,sans-serif;
--text:"Inter",Helvetica,Arial,sans-serif;
--mono:ui-monospace,"SF Mono",Menlo,monospace;
--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:26px;--s7:36px;--s8:52px;
--r-lg:12px;--r-md:9px;--r-sm:6px;--r-pill:980px;
--nav:58px;
--spring:cubic-bezier(.32,.72,0,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{min-height:100%;font-family:var(--text);font-size:14.5px;line-height:1.6;color:var(--ink);
background:var(--mist);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;text-align:left}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:4px}
button:active{transform:scale(.978);transition:transform 100ms ease-out}
h1,h2,h3,h4{font-family:var(--display);font-weight:700}
.dsp-xl{font-size:29px;font-weight:700;letter-spacing:-.025em;line-height:1.15}
.dsp-md{font-size:17px;font-weight:700;letter-spacing:-.018em;line-height:1.3}
.dsp-sm{font-size:15px;font-weight:600;letter-spacing:-.012em;line-height:1.35}
.kicker{font-family:var(--text);font-weight:600;font-size:12.5px;color:var(--cyan);letter-spacing:.005em}
.tiny{font-size:12.5px;color:var(--slate);line-height:1.5}
.mono{font-family:var(--mono);font-size:13px;letter-spacing:-.02em}
/* ============ NAV ============ */
.nav{position:sticky;top:0;z-index:70;height:var(--nav);background:var(--deep);
display:flex;align-items:center;gap:var(--s6);padding:0 var(--s6);color:#fff}
.wm{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:-.045em;white-space:nowrap}
.wm .a{color:#fff}.wm .b{color:var(--cyan)}
.navsecs{display:flex;gap:var(--s5);height:100%;align-items:center}
.navsec{font-size:14.5px;font-weight:500;color:rgba(255,255,255,.66);height:100%;display:flex;align-items:center;
border-bottom:2px solid transparent;transition:color 140ms var(--spring)}
.navsec:hover{color:#fff}
.navsec.on{color:#fff;font-weight:600;border-bottom-color:var(--cyan)}
.nav-sp{flex:1}
/* One button: shows the language currently in use. */
.langtog{height:30px;padding:0 13px;border:1px solid rgba(255,255,255,.22);border-radius:var(--r-sm);
font-size:12.5px;font-weight:600;color:rgba(255,255,255,.88);background:transparent;
transition:background 140ms var(--spring)}
.langtog:hover{background:rgba(255,255,255,.1)}
.navsearch{height:34px;min-width:340px;max-width:460px;padding:0 15px;border:1px solid rgba(255,255,255,.22);
border-radius:var(--r-sm);font-size:13px;color:rgba(255,255,255,.6);background:rgba(255,255,255,.05);
text-align:center;transition:all 140ms var(--spring)}
.navsearch:hover{background:rgba(255,255,255,.1)}
.navsearch:hover{border-color:rgba(255,255,255,.42);color:#fff}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--marine);border:1px solid rgba(255,255,255,.2);
color:#fff;display:grid;place-items:center;font-size:11px;font-weight:600;flex:0 0 auto}
/* ============ CONTEXT BAR ============ */
.ctxbar{background:var(--paper);border-bottom:1px solid var(--rule)}
.ctxbar-in{max-width:1320px;margin:0 auto;padding:var(--s5) var(--s6) 0}
.ctxrow{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.ctxsel{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 13px;
border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--paper);transition:border-color 140ms var(--spring)}
.ctxsel:hover{border-color:#B6C2C9}
.ctxsel .k{font-size:13px;color:var(--slate)}
.ctxsel .v{font-size:14.5px;font-weight:600;font-family:var(--display);letter-spacing:-.012em}
.ctxsel .car{font-size:9px;color:var(--slate);margin-left:2px}
.linkbtn{font-size:13.5px;color:var(--signal);font-weight:500}
.linkbtn:hover{text-decoration:underline}
.av{width:28px;height:28px;border-radius:50%;background:var(--mist);border:1.5px solid var(--paper);
margin-left:-7px;display:grid;place-items:center;font-size:10px;font-weight:600;color:var(--slate)}
.av:first-child{margin-left:0}
/* ============ STEP BAR ============ */
.steps{display:flex;align-items:center;padding:var(--s5) 0 0}
.step{display:flex;align-items:center;flex:0 0 auto}
.step-btn{display:flex;align-items:center;gap:11px;padding:0 0 var(--s5);cursor:pointer}
.step-n{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--rule);display:grid;place-items:center;
font-family:var(--mono);font-size:12px;font-weight:500;color:var(--slate);background:var(--paper);flex:0 0 auto;
transition:all 200ms var(--spring)}
.step.done .step-n{background:var(--marine);border-color:var(--marine);color:#fff}
.step.now .step-n{background:var(--deep);border-color:var(--deep);color:#fff}
.step-l{font-size:14.5px;color:var(--slate);white-space:nowrap}
.step.done .step-l{color:var(--ink)}
.step.now .step-l{color:var(--ink);font-weight:600}
.step-line{width:46px;height:1px;background:var(--rule);margin:0 var(--s4) var(--s5)}
.step-line.done{background:var(--marine)}
@media(max-width:1080px){.step-line{width:22px;margin:0 var(--s2) var(--s5)}.step-l{font-size:13px}}
/* ============ HERO DECISION PANEL ============ */
.hero{background:var(--deep);color:#fff;border-radius:var(--r-lg);overflow:hidden;margin-bottom:var(--s6);
display:grid;grid-template-columns:minmax(0,1fr) 340px}
@media(max-width:920px){.hero{grid-template-columns:minmax(0,1fr)}}
.hero-l{padding:var(--s7) var(--s7) var(--s7) var(--s7)}
.hero-h{font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-.028em;line-height:1.2;
margin-top:10px;max-width:16ch;color:#fff}
.hero-p{font-size:14.5px;color:var(--pale);line-height:1.65;margin-top:var(--s4);max-width:56ch}
.hero-a{display:flex;gap:var(--s2);margin-top:var(--s6);flex-wrap:wrap}
.hero-r{padding:var(--s7) var(--s7) var(--s7) var(--s6);border-left:1px solid rgba(255,255,255,.14)}
@media(max-width:920px){.hero-r{border-left:none;border-top:1px solid rgba(255,255,255,.14);padding-top:var(--s6)}}
.hero-rk{font-size:13px;color:rgba(255,255,255,.62)}
.hero-score{font-family:var(--display);font-size:56px;font-weight:700;letter-spacing:-.04em;line-height:1;
margin-top:11px;display:flex;align-items:baseline;gap:9px;color:#fff}
.hero-score small{font-family:var(--text);font-size:17px;font-weight:400;color:rgba(255,255,255,.62);letter-spacing:0}
.hero-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.18);margin-top:var(--s5);position:relative;overflow:visible}
.hero-bar i{display:block;height:100%;border-radius:3px;background:var(--cyan)}
.hero-bar u{position:absolute;top:-4px;width:2px;height:13px;background:#fff;text-decoration:none}
.hero-note{font-size:12.5px;color:var(--sky);margin-top:11px;line-height:1.5}
/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 20px;
border-radius:var(--r-sm);font-size:14.5px;font-weight:600;border:1px solid transparent;white-space:nowrap;
font-family:var(--text);transition:background 140ms var(--spring),border-color 140ms var(--spring)}
.btn-primary{background:var(--signal);color:#fff}.btn-primary:hover{background:#1A43E0}
.btn-onDeep{background:transparent;border-color:rgba(255,255,255,.34);color:#fff}
.btn-onDeep:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55)}
.btn-deep{background:var(--deep);color:#fff}.btn-deep:hover{background:var(--marine)}
.btn-sec{background:var(--paper);border-color:var(--rule);color:var(--ink);font-weight:500}
.btn-sec:hover{border-color:#B6C2C9}
.btn-sec.active{border-color:var(--signal);color:var(--signal)}
.btn-ghost{color:var(--slate);font-weight:500}.btn-ghost:hover{background:var(--mist);color:var(--ink)}
.btn-sm{height:33px;padding:0 14px;font-size:13px}
.btn-xs{height:28px;padding:0 11px;font-size:12.5px}
.btn[disabled]{opacity:.36;cursor:not-allowed}.btn[disabled]:active{transform:none}
/* ============ LAYOUT ============ */
.page{max-width:1320px;margin:0 auto;padding:var(--s6) var(--s6) var(--s8)}
.sect-h{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
.sect-h .sp{flex:1}
.grid{display:grid;gap:var(--s4)}
.tag{display:inline-flex;align-items:center;gap:6px;height:23px;padding:0 10px;border-radius:var(--r-sm);
font-size:12px;font-weight:500;white-space:nowrap;border:1px solid transparent}
.tag .d{width:5px;height:5px;border-radius:50%;flex:0 0 auto}
.t-alert{background:var(--alert-bg);color:var(--alert-text);border-color:#F3C4BD}.t-alert .d{background:var(--alert)}
.t-warn{background:var(--warn-bg);color:var(--warn);border-color:#EFD89C}.t-warn .d{background:#BF8500}
.t-ok{background:var(--ok-bg);color:var(--ok);border-color:#B3DEC6}.t-ok .d{background:var(--ok)}
.t-signal{background:var(--signal-bg);color:var(--signal);border-color:#C6D0FF}.t-signal .d{background:var(--signal)}
.t-mist{background:var(--mist);color:var(--slate2);border-color:var(--rule)}.t-mist .d{background:var(--slate)}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;margin-bottom:var(--s5)}
.card-h{padding:16px var(--s6);border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:var(--s3)}
.card-h .sp{flex:1}
.card-b{padding:var(--s6)}
.card-f{padding:13px var(--s6);border-top:1px solid var(--rule);background:var(--mist);
display:flex;align-items:center;gap:var(--s3);font-size:12.5px;color:var(--slate2)}
/* ============ STRIP ============ */
.strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--rule);
border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;margin-bottom:var(--s6)}
@media(max-width:1180px){.strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
.strip-c{background:var(--paper);padding:17px var(--s5);transition:background 140ms var(--spring);text-align:left;width:100%}
.strip-c:hover{background:var(--mist)}
.strip-k{font-size:12.5px;color:var(--slate);margin-bottom:7px}
.strip-v{font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:-.028em;line-height:1}
.strip-v small{font-family:var(--text);font-size:13.5px;font-weight:400;color:var(--slate);letter-spacing:0}
.strip-s{font-size:12px;color:var(--slate);margin-top:6px}
.strip-c.focus .strip-v{color:var(--cyan)}
/* ============ TABLE ============ */
/* One skin for every table in the product. .tbl-slim is the dense variant
used by the document and checklist tables: same structure, same controls,
less padding. See docs/specs/2026-09-21-table-pattern.md. */
.tbl{width:100%;border-collapse:collapse;background:var(--paper)}
.tbl thead th{text-align:left;padding:0;background:var(--mist);vertical-align:middle;
border-bottom:1px solid var(--rule);white-space:nowrap}
.tbl tbody td{padding:13px var(--s5);border-bottom:1px solid var(--rule);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:background 120ms var(--spring)}
.tbl tbody tr:hover{background:#FCFDFD}
.tbl tbody tr[data-nav]{cursor:pointer}
.tbl tbody tr[data-nav]:hover{background:var(--mist)}
.tbl tbody tr.picked{background:var(--signal-bg)}
.tbl-slim tbody td{padding:11px var(--s5);font-size:13.5px}
/* The Proyek table: more room between rows, and the same two-level type
hierarchy the "Aktivitas terakhir" feed already uses below it: 13.5px
for a row's own value (Klien, Sales, Jalur, Nilai, Tenggat, matching
.ft), 12px slate for a caption sitting under something else (Tahap's
stage label, matching .ftime). Not one flat size for the whole table,
which read too large. See ADR-018. */
.tbl-roomy tbody td{padding:22px var(--s5)}
.tbl-roomy .co{font-family:var(--text);font-weight:500;font-size:13.5px;letter-spacing:0}
.tbl-roomy .route,.tbl-roomy .mono,.tbl-roomy .salesname{font-size:13.5px}
/* A deadline as plain text, no pill: muted like any other secondary value
by default, and the one thing worth a colour is 5 working days or
fewer. Paired with the word "hari kerja" either way, so colour is never
the only signal. */
.duetxt{font-weight:500;font-size:13.5px;color:var(--slate);white-space:nowrap}
.duetxt.hot{color:var(--alert-text);font-weight:600}
/* Column head. A sortable head is a real button so it can be operated from
the keyboard. Sentence case, never uppercase: see design-principles 3. */
.thb{display:flex;align-items:center;gap:6px;width:100%;padding:11px var(--s5);
font-size:12px;font-weight:600;color:var(--slate2);transition:color 140ms var(--spring)}
.thb:hover{color:var(--ink)}
.thb .srt{font-size:11px;line-height:1;color:#C3CED4;transition:color 140ms var(--spring)}
.thb:hover .srt{color:var(--slate)}
.thb.on{color:var(--ink)}
.thb.on .srt{color:var(--signal)}
.th-plain{display:block;padding:11px var(--s5);font-size:12px;font-weight:600;color:var(--slate2)}
.tbl-slim .thb,.tbl-slim .th-plain{padding:10px var(--s5);font-size:12px}
/* Toolbar above the table, sits inside .card-h */
.tbar{display:flex;align-items:center;gap:var(--s3);width:100%;flex-wrap:wrap}
.tbar .sp{flex:1}
/* Wraps a filter trigger and its dropdown, a .rowmenu reused as a menu of
filter values rather than row actions. See ADR-015. */
.fwrap{position:relative;display:inline-flex}
/* The two cards below the Proyek table must start and end at the same
height. Their headers get a fixed minimum so a plain span on one side
and a btn-sm on the other still line up. See ADR-016. */
.grid.g-2 .sect-h{min-height:33px}
.tsearch{flex:0 1 320px;min-width:170px;height:40px;padding:0 var(--s4);border:1px solid var(--rule);
border-radius:var(--r-sm);background:var(--paper);font-size:13.5px;
transition:border-color 140ms var(--spring)}
.tsearch::placeholder{color:var(--slate)}
.tsearch:hover{border-color:#B6C2C9}
.caret{font-size:10px;color:var(--slate)}
/* Select column. Uses the existing .cbx, not a second checkbox. */
.ckcol{width:52px}
.tbl thead th.ckcol{padding:11px 0 11px var(--s5)}
.tbl tbody td.ckcol{padding-right:0}
/* Avatar. The only round things in the product, alongside dots. */
.avc{display:flex;align-items:center;gap:11px;min-width:0}
.av{width:var(--s7);height:var(--s7);border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:-.01em;
background:var(--mist);border:1px solid var(--rule);color:var(--slate)}
.av-m{background:var(--marine);border-color:var(--marine);color:#fff}
.avt{min-width:0}
.tbl-slim .av{width:28px;height:28px;font-size:11px}
/* Row overflow menu */
.morecol{width:56px}
.rowmore{width:28px;height:28px;border-radius:var(--r-sm);display:grid;place-items:center;margin-left:auto;
color:var(--slate);font-size:16px;line-height:1;transition:background 140ms var(--spring)}
.rowmore:hover,.rowmore.on{background:var(--mist);color:var(--ink)}
.rowmenu{position:fixed;z-index:80;min-width:196px;background:var(--paper);border:1px solid var(--rule);
border-radius:var(--r-md);box-shadow:0 16px 42px rgba(5,28,44,.17);padding:var(--s1) 0;display:none}
.rowmenu.open{display:block}
.rowmenu button{display:block;width:100%;padding:8px var(--s4);font-size:13.5px;
transition:background 120ms var(--spring)}
.rowmenu button:hover{background:var(--mist)}
.rowmenu .danger{color:var(--alert-text)}
.rowmenu .danger:hover{background:var(--alert-bg)}
.rowmenu .sepr{border:none;border-top:1px solid var(--rule);margin:var(--s1) 0}
/* Pagination, in .card-f */
.pg{display:flex;align-items:center;gap:var(--s1)}
.pgb{min-width:28px;height:28px;padding:0 8px;border-radius:var(--r-sm);display:grid;place-items:center;
font-size:12.5px;font-weight:500;color:var(--slate);transition:background 140ms var(--spring)}
.pgb:hover{background:var(--paper);color:var(--ink)}
.pgb.on{background:var(--deep);color:#fff;font-weight:600}
.pgb[disabled]{opacity:.36;cursor:not-allowed}
.pgb[disabled]:hover{background:none;color:var(--slate)}
/* Row (or list item) that matched no filter, or sits off the current page */
.hid{display:none}
.tblempty{padding:var(--s7) var(--s6);text-align:center;font-size:13.5px;color:var(--slate)}
.co{font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:-.012em}
.pj{font-size:12.5px;color:var(--slate);margin-top:3px}
.stepwrap{min-width:126px}
.stepbar{display:flex;gap:3px;margin-bottom:6px}
.sb{height:4px;flex:1;border-radius:2px;background:var(--rule)}
.sb.on{background:var(--marine)}.sb.now{background:var(--cyan)}.sb.lock{opacity:.45}
.stepdesc{font-size:12px;color:var(--slate);white-space:nowrap}
.route{font-size:12.5px;color:var(--slate);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.route i{width:6px;height:6px;border-radius:2px;display:block}
.r-tender i{background:var(--signal)}.r-direct i{background:var(--cyan)}.r-renew i{background:var(--marine)}
.feed{display:flex;gap:11px;padding:13px 0;border-bottom:1px solid var(--rule)}
.feed:last-child{border-bottom:none}
.ft{flex:1;min-width:0;font-size:13.5px;line-height:1.55}
.ft b{font-weight:600}
/* ============ FIELDS ============ */
.frow{display:flex;align-items:flex-start;gap:var(--s6);padding:15px 0;border-bottom:1px solid var(--rule)}
@media(max-width:760px){.frow{flex-wrap:wrap;gap:var(--s2)}}
.frow:last-child{border-bottom:none}
.fk{width:216px;flex:0 0 auto;font-size:13.5px;color:var(--slate);padding-top:11px;line-height:1.45}
@media(max-width:760px){.fk{width:100%;padding-top:0}}
.fc{flex:1;min-width:0;max-width:640px}
.fin{width:100%;height:42px;padding:0 13px;border:1px solid transparent;border-radius:var(--r-sm);
background:transparent;font-size:14.5px;transition:border-color 120ms var(--spring),background 120ms var(--spring)}
.fin:hover{border-color:var(--rule);background:var(--paper)}
.fin:focus{border-color:var(--signal);background:var(--paper);outline:none}
select.fin{cursor:pointer;-webkit-appearance:none;appearance:none;padding-right:30px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 11px center}
.fhint{font-size:12.5px;color:var(--slate);margin:6px 0 0 13px;line-height:1.55;max-width:60ch}
.fmark{flex:0 0 auto;font-size:12px;font-weight:600;padding:5px 11px;border-radius:var(--r-sm);
white-space:nowrap;margin-top:7px;cursor:pointer;border:1px solid transparent}
.fm-you{background:var(--mist);color:var(--slate);border-color:var(--rule);cursor:default}
.src{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--signal);
border-bottom:1px solid #C6D0FF;cursor:pointer}
.src:hover{border-bottom-color:var(--signal)}
.src::before{content:"\2197";font-size:9px}
/* ============ RISK ============ */
.dials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule)}
/* ============ SPEC ============ */
.spec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5) var(--s7)}
/* ============ EXTRACT ============ */
.rev{display:grid;grid-template-columns:minmax(0,1.45fr) 360px;gap:var(--s5);align-items:start}
@media(max-width:1140px){.rev{grid-template-columns:minmax(0,1fr)}}
.doctext{font-size:14px;line-height:2.05}
.doctext .cl{font-family:var(--mono);font-size:12px;color:var(--slate);display:block;margin:var(--s5) 0 7px}
.doctext .cl:first-child{margin-top:0}
.hl{background:var(--cyan-bg);border-bottom:2px solid var(--sky);border-radius:2px;padding:1px 0;cursor:pointer}
.hl:hover{background:var(--pale)}
.hl.flash{background:var(--sky)}
.cov{padding:11px var(--s5);border-bottom:1px solid var(--rule)}
.cov-t{flex:1;border-radius:1px;background:var(--marine);opacity:.32;min-height:3px}
.cov-t.gap{background:var(--alert);opacity:.4;height:16px !important}
.stmt{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-md);padding:var(--s5);margin-bottom:var(--s3)}
.stmt.chk{border-left:3px solid #BF8500}
.stmt.conf{border-left:3px solid var(--alert)}
.stmt.flash{border-color:var(--cyan);background:var(--cyan-bg)}
.stmt-k{font-size:12px;color:var(--slate);margin-bottom:7px;display:flex;align-items:center;gap:9px}
.stmt-v{font-size:15px;line-height:1.55;font-weight:500}
.stmt-n{font-size:13px;color:var(--slate);margin-top:8px;line-height:1.6;max-width:68ch}
.stmt-c{font-family:var(--mono);font-size:12px;color:var(--slate);margin-top:10px}
.stmt-a{display:flex;gap:8px;margin-top:13px}
.qgroup{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--slate);margin:var(--s6) 0 var(--s3)}
.qgroup:first-child{margin-top:0}
/* ============ CHECKLIST ============ */
.ckt{width:100%;border-collapse:collapse;background:var(--paper)}
.notebox{width:100%;min-height:48px;padding:7px 9px;border:1px solid var(--rule);border-radius:var(--r-sm);
font-size:12.5px;resize:vertical;background:var(--paper)}
/* ============ SUBMIT ORDER ============ */
.ord{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-md);display:flex;align-items:center;
gap:var(--s3);padding:12px var(--s4);margin-bottom:var(--s2);transition:border-color 140ms var(--spring)}
.ord.drag{border-color:var(--signal);background:var(--signal-bg)}
.ord-grip{color:var(--rule);font-size:14px;cursor:grab;letter-spacing:-2px}
.ord-grip:hover{color:var(--slate)}
.ord-n{font-family:var(--mono);font-size:12.5px;color:var(--slate);width:26px}
.ord-m{flex:1;min-width:0}
.ord-t{font-size:14px;font-weight:500}
.ord-s{font-size:12px;color:var(--slate);margin-top:3px}
.ordbtn{width:26px;height:26px;border-radius:var(--r-sm);border:1px solid var(--rule);display:grid;place-items:center;
font-size:10px;color:var(--slate);background:var(--paper)}
.ordbtn:hover{border-color:var(--signal);color:var(--signal)}
.gate{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--rule)}
.gate:last-child{border-bottom:none}
.gi{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:10px;color:#fff;flex:0 0 auto;margin-top:2px}
.gi-ok{background:var(--ok)}.gi-no{background:var(--alert)}.gi-w{background:#BF8500}
.gate-m{flex:1;font-size:14px;line-height:1.5}
.gate-s{font-size:12.5px;color:var(--slate);margin-top:3px}
.gate-a{font-size:12.5px;color:var(--signal)}
/* ============ ASSIGN ============ */
.rolecard{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-md);padding:var(--s5);margin-bottom:var(--s3)}
.rolecard-h{display:flex;align-items:center;gap:10px;margin-bottom:var(--s4)}
.rolecard-h b{font-family:var(--display);font-size:14.5px;font-weight:600;letter-spacing:-.012em}
.rolecard-h .sp{flex:1}
.roledot{width:9px;height:9px;border-radius:2px}
.person{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--rule)}
.person:last-child{border-bottom:none}
.pav{width:30px;height:30px;border-radius:50%;background:var(--mist);border:1px solid var(--rule);
display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--slate);flex:0 0 auto}
.pav.on{background:var(--marine);border-color:var(--marine);color:#fff}
.pname{flex:1;font-size:13.5px}
.prole{font-size:12px;color:var(--slate);margin-top:2px}
.toggle{width:40px;height:23px;border-radius:var(--r-pill);background:var(--rule);position:relative;flex:0 0 auto;
transition:background 180ms var(--spring)}
.toggle::after{content:'';position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;
background:var(--paper);transition:transform 220ms var(--spring);box-shadow:0 1px 2px rgba(5,28,44,.2)}
.toggle.on{background:var(--signal)}
.toggle.on::after{transform:translateX(17px)}
/* ============ CHAT ============ */
.chat{position:fixed;right:20px;bottom:20px;width:372px;z-index:80;background:var(--paper);
border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;
box-shadow:0 16px 42px rgba(5,28,44,.17);display:flex;flex-direction:column;
transition:height 280ms var(--spring);height:452px}
.chat.min{height:48px}
.chat-h{flex:0 0 auto;height:48px;display:flex;align-items:center;gap:10px;padding:0 var(--s4);
cursor:pointer;background:var(--deep);color:#fff}
.chat-h .t{font-family:var(--display);font-size:13.5px;font-weight:600;letter-spacing:-.012em}
.chat-h .sp{flex:1}
.chat-h .car{font-size:10px;color:var(--pale);transition:transform 220ms var(--spring)}
.chat.min .chat-h .car{transform:rotate(180deg)}
.chat-live{width:6px;height:6px;border-radius:50%;background:var(--cyan)}
.chat-src{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:9px var(--s4);
border-bottom:1px solid var(--rule);background:var(--mist);font-size:12px;color:var(--slate2)}
.srcseg{display:inline-flex;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-sm);
padding:2px;gap:2px;margin-left:auto}
.srcseg button{height:26px;padding:0 11px;border-radius:var(--r-sm);font-size:12px;color:var(--slate);white-space:nowrap}
.srcseg button.on{background:var(--marine);color:#fff;font-weight:500}
.chat-b{flex:1;overflow:auto;padding:var(--s4)}
.msg{margin-bottom:var(--s4);font-size:13.5px;line-height:1.6}
.msg.me{text-align:right}
.msg.me span{display:inline-block;background:var(--signal);color:#fff;padding:9px 13px;
border-radius:12px 12px 3px 12px;max-width:88%;text-align:left}
.msg.ai span{display:inline-block;background:var(--mist);border:1px solid var(--rule);padding:10px 13px;
border-radius:12px 12px 12px 3px;max-width:94%}
.msg .cite{display:block;margin-top:9px;font-family:var(--mono);font-size:12px;color:var(--signal);
border-top:1px solid var(--rule);padding-top:7px;cursor:pointer}
.chat-f{flex:0 0 auto;padding:10px var(--s4);border-top:1px solid var(--rule);display:flex;gap:8px}
.chat-f input{flex:1;height:35px;padding:0 13px;border:1px solid var(--rule);border-radius:var(--r-sm);
font-size:13px;background:var(--mist)}
.chat-f input:focus{outline:none;border-color:var(--signal);background:var(--paper)}
/* ============ MODALS ============ */
.scrim{position:fixed;inset:0;background:rgba(5,28,44,.44);z-index:90;display:none}
.scrim.open{display:block}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--paper);border-radius:var(--r-lg);
z-index:95;display:none;flex-direction:column;max-height:84vh;box-shadow:0 24px 58px rgba(5,28,44,.34);overflow:hidden}
.modal.open{display:flex}
.m-md{width:570px}.m-lg{width:760px}.m-xl{width:880px}
.m-h{padding:var(--s5) var(--s6);border-bottom:1px solid var(--rule)}
.m-h h4{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:-.022em}
.m-h p{font-size:13px;color:var(--slate);margin-top:4px}
.m-b{padding:var(--s6);overflow:auto}
.m-f{padding:var(--s4) var(--s6);border-top:1px solid var(--rule);display:flex;gap:var(--s2);justify-content:flex-end;background:var(--mist)}
.quote{font-size:13.5px;line-height:1.75;background:var(--mist);border:1px solid var(--rule);border-radius:var(--r-sm);padding:13px 15px}
.quote .hl{cursor:default}
.urlbar{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--mist);border:1px solid var(--rule);
border-radius:var(--r-sm);font-family:var(--mono);font-size:11.5px;color:var(--slate);margin-bottom:var(--s4)}
.ctl{width:100%;height:44px;padding:0 13px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--paper);font-size:14.5px}
.ctl-lg{height:50px;font-size:15.5px}
.lbl{font-size:13px;color:var(--slate);margin:var(--s5) 0 8px;display:flex;align-items:center;gap:8px}
.lbl b{font-size:14px}
.lbl b{color:var(--ink);font-weight:600}
.opt{display:flex;align-items:flex-start;gap:12px;padding:14px var(--s4);border:1px solid var(--rule);
border-radius:var(--r-sm);margin-bottom:var(--s2);cursor:pointer;transition:all 140ms var(--spring)}
.opt.on{border-color:var(--signal);background:var(--signal-bg)}
.opt-d{width:17px;height:17px;border-radius:50%;border:1.5px solid var(--rule);flex:0 0 auto;margin-top:3px;display:grid;place-items:center}
.opt.on .opt-d{border-color:var(--signal)}
.opt.on .opt-d::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--signal)}
.opt-t{font-family:var(--display);font-size:14.5px;font-weight:600;letter-spacing:-.012em}
.opt-s{font-size:13px;color:var(--slate);margin-top:4px;line-height:1.5}
.drop{border:1.5px dashed var(--rule);border-radius:var(--r-md);padding:var(--s6) var(--s5);text-align:center;
background:var(--mist);cursor:pointer;transition:all 160ms var(--spring)}
.drop:hover{border-color:var(--signal);background:var(--signal-bg)}
.drop .ic{font-size:20px;color:var(--slate);margin-bottom:7px}
.drop h5{font-family:var(--display);font-size:14.5px;font-weight:600;letter-spacing:-.012em}
.drop p{font-size:12.5px;color:var(--slate);margin-top:4px}
.fileic{width:27px;height:33px;border-radius:4px;background:var(--mist);border:1px solid var(--rule);
display:grid;place-items:center;font-size:8px;font-weight:700;color:var(--slate);flex:0 0 auto}
.fileic.pdf{background:var(--alert-bg);border-color:#F3C4BD;color:var(--alert)}
.fileic.xls{background:var(--ok-bg);border-color:#B3DEC6;color:var(--ok)}
.files{font-size:12px;color:var(--slate);margin-top:2px}
.cbx{width:18px;height:18px;border-radius:4px;border:1.5px solid var(--rule);flex:0 0 auto;display:grid;
place-items:center;font-size:10px;color:#fff;cursor:pointer;background:var(--paper)}
.cbx.on{background:var(--signal);border-color:var(--signal)}
.hidden{display:none !important}
@media(prefers-reduced-motion:reduce){*{transition:none !important}button:active{transform:none}}
/* ============ V16: STAGE SPINE ============ */
.step.future .step-n{opacity:.5}
.step.future .step-l{color:var(--slate)}
/* ============ V16: PROJECT STATUS ACTIONS ============ */
.statusbar{display:inline-flex;gap:var(--s1);align-items:center;margin-left:auto}
.stbtn{height:31px;padding:0 12px;border:1px solid var(--rule);border-radius:var(--r-sm);
font-size:13px;font-weight:500;background:var(--paper);color:var(--slate);transition:all 140ms var(--spring)}
.stbtn:hover{border-color:#B6C2C9;color:var(--ink)}
.stbtn.go{border-color:var(--signal);color:var(--signal)}
.stbtn.stop{border-color:var(--alert);color:var(--alert)}
/* ============ V16: SUB NAV ============ */
.subnav{display:flex;gap:2px;border-bottom:1px solid var(--rule);margin:0 0 var(--s6);overflow-x:auto}
.subnav button{padding:12px 15px;font-size:14px;color:var(--slate);border-bottom:2px solid transparent;
white-space:nowrap;display:flex;align-items:center;gap:8px;transition:color 140ms var(--spring)}
.subnav button:hover{color:var(--ink)}
.subnav button.on{color:var(--ink);font-weight:600;border-bottom-color:var(--deep)}
.subnav .sn{font-family:var(--mono);font-size:12px;color:var(--slate)}
.subnav .sd{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.sd.bad{background:var(--alert)}.sd.warn{background:var(--warn)}.sd.ok{background:var(--ok)}.sd.idle{background:var(--rule)}
/* ============ V16: HUB ============ */
.hub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin-bottom:var(--s6)}
/* ============ V16: DEPENDENCY CHAIN ============ */
.chain{display:flex;align-items:stretch;overflow-x:auto;padding:var(--s2) 0 var(--s3)}
.chain-n{flex:1 1 0;min-width:158px;border:1px solid var(--rule);border-radius:var(--r-md);
padding:12px var(--s4);background:var(--paper);text-align:left}
.chain-n.done{border-color:#9FCDB5;background:var(--ok-bg)}
.chain-n.now{border-color:var(--deep);box-shadow:inset 0 0 0 1px var(--deep)}
.chain-n.wait{background:var(--mist);color:var(--slate)}
.chain-k{font-family:var(--mono);font-size:12px;color:var(--slate)}
.chain-t{font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:-.014em;margin-top:5px}
.chain-s{font-size:12.5px;color:var(--slate);margin-top:6px;line-height:1.45}
.chain-a{display:grid;place-items:center;width:28px;flex:0 0 auto;color:#B6C2C9;font-size:15px}
/* ============ V16: IMPACT AND STALE ============ */
.impact{background:var(--warn-bg);border:1px solid #EBD6A8;border-radius:var(--r-lg);padding:var(--s5) var(--s6);
display:flex;gap:var(--s4);align-items:flex-start;margin-bottom:var(--s5)}
.stalechip{display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 9px;border-radius:var(--r-pill);
background:var(--warn-bg);color:var(--warn);font-size:12px;font-weight:600;border:1px solid #EBD6A8}
/* ============ V16: NEWS ============ */
.newsrow{display:flex;gap:var(--s6);padding:var(--s5) var(--s6);border-top:1px solid var(--rule);align-items:flex-start}
.news-d{font-family:var(--mono);font-size:12px;color:var(--slate);width:78px;flex:0 0 auto;padding-top:3px}
.news-b{flex:1;min-width:0}
.news-h{font-size:14.5px;font-weight:600;line-height:1.55;max-width:74ch}
.news-s{font-size:13px;color:var(--slate);margin-top:7px;line-height:1.65;max-width:78ch}
.news-l{display:flex;gap:11px;margin-top:11px;align-items:center;flex-wrap:wrap}
/* ============ V16: REVISIONS ============ */
.revs{display:flex;gap:var(--s3);margin-bottom:var(--s5);flex-wrap:wrap}
/* ============ V16: DELTA ============ */
.delta{padding:var(--s4) var(--s6);border-top:1px solid var(--rule);display:flex;gap:var(--s4);align-items:flex-start}
/* ============ V16: TASK INBOX ============ */
.taskrow{display:flex;align-items:center;gap:var(--s4);padding:13px var(--s6);border-top:1px solid var(--rule)}
.task-b{flex:1;min-width:0}
.task-t{font-size:14px;font-weight:500}
.task-s{font-size:12.5px;color:var(--slate);margin-top:3px}
/* ============ V16: PLACEHOLDER ============ */
.ph{border:1.5px dashed #C3CED4;border-radius:var(--r-lg);padding:var(--s8) var(--s7);text-align:center;background:var(--paper)}
/* ============ V16: MAPPING ============ */
.maprow{display:flex;align-items:center;gap:var(--s3);padding:11px var(--s6);border-top:1px solid var(--rule)}
/* ============ V16: MISC ============ */
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lockline{font-size:12.5px;color:var(--slate2);padding:11px var(--s6);background:var(--mist);
border-top:1px solid var(--rule);line-height:1.55}
/* ============ V17: RAK DOKUMEN ============ */
/* Document table. Skin comes from .tbl .tbl-slim, only the superseded row
is particular to this one. */
.dtbl tbody tr.super td{background:var(--mist)}
.dtbl tbody tr.super .dname{color:var(--slate)}
.dname{font-size:13.5px;font-weight:500;line-height:1.4;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dmeta{font-size:12px;color:var(--slate);margin-top:3px}
.dwho{font-size:13px}
.dwhen{font-family:var(--mono);font-size:12px;color:var(--slate);white-space:nowrap}
.newchip{display:inline-flex;align-items:center;height:21px;padding:0 8px;border-radius:var(--r-sm);
background:var(--cyan-bg);color:#0A6E96;font-size:12px;font-weight:700;letter-spacing:.04em;border:1px solid #A8DDF5}
.oldchip{display:inline-flex;align-items:center;height:21px;padding:0 8px;border-radius:var(--r-sm);
background:var(--paper);color:var(--slate2);font-size:12px;font-weight:600;border:1px solid var(--rule)}
.iconbtn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border:1px solid var(--rule);
border-radius:var(--r-sm);font-size:12.5px;font-weight:500;color:var(--slate);background:var(--paper);
white-space:nowrap;transition:all 140ms var(--spring)}
.iconbtn:hover{border-color:var(--signal);color:var(--signal)}
.dbar{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;padding:12px var(--s6);
border-bottom:1px solid var(--rule);background:var(--paper)}
/* ============ V17: GERBANG DUA ORANG ============ */
.vgate{display:flex;align-items:stretch;overflow-x:auto;padding:var(--s2) 0;scrollbar-width:none}
.vgate::-webkit-scrollbar{display:none}
.vg{flex:1 1 0;min-width:186px;border:1px solid var(--rule);border-radius:var(--r-md);
padding:12px var(--s4);background:var(--paper);text-align:left}
.vg.done{border-color:#9FCDB5;background:var(--ok-bg)}
.vg.now{border-color:var(--deep);box-shadow:inset 0 0 0 1px var(--deep)}
.vg.wait{background:var(--mist)}
.vg-k{font-family:var(--mono);font-size:12px;color:var(--slate)}
.vg-t{font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:-.014em;margin-top:5px}
.vg-s{font-size:12.5px;color:var(--slate);margin-top:6px;line-height:1.45}
.vg-a{display:grid;place-items:center;width:26px;flex:0 0 auto;color:#B6C2C9;font-size:15px}
/* ============ V17: KEMAJUAN PER TIM ============ */
.tprog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule)}
.tp{background:var(--paper);padding:15px var(--s5)}
/* ============ V17: AKSES ============ */
.axrow{display:flex;align-items:flex-start;gap:var(--s4);padding:12px var(--s6);border-top:1px solid var(--rule)}
.ax-k{width:196px;flex:0 0 auto;font-size:13.5px;font-weight:500}
.ax-v{flex:1;min-width:0;font-size:13px;color:var(--slate);line-height:1.55}
@media(max-width:820px){.axrow{flex-direction:column;gap:var(--s1)}.ax-k{width:auto}}
/* ============ V17: BERKAS BANYAK ============ */
.fstack{display:flex;flex-direction:column;gap:5px}
/* ============ V19: INFO TOOLTIP ============ */
.info{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;
border:1px solid var(--rule);background:var(--paper);color:var(--slate);
font-family:var(--display);font-size:10px;font-weight:700;line-height:1;cursor:help;
flex:0 0 auto;vertical-align:middle;position:relative;transition:all 140ms var(--spring)}
.info:hover,.info.on{border-color:var(--signal);color:var(--signal);background:var(--signal-bg)}
.info-pop{position:fixed;z-index:120;max-width:340px;background:var(--deep);color:#fff;
border-radius:var(--r-md);padding:13px 15px;font-size:12.5px;line-height:1.6;
box-shadow:0 14px 34px rgba(5,28,44,.34);display:none;font-weight:400;text-align:left;
font-family:var(--text);letter-spacing:0}
.info-pop.open{display:block}
.info-pop b{color:var(--cyan);font-weight:600;display:block;margin-bottom:5px;font-family:var(--display)}
/* ============ V19: ACCORDION ============ */
.acc{border-bottom:1px solid var(--rule)}
.acc:last-child{border-bottom:none}
.acc-h{display:flex;align-items:center;gap:var(--s5);padding:var(--s5) var(--s6);width:100%;
cursor:pointer;transition:background 140ms var(--spring)}
.acc-h:hover{background:var(--mist)}
.acc-t{font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:-.016em}
.acc-sub{font-size:13.5px;color:var(--slate);margin-top:5px;line-height:1.55;max-width:80ch}
.acc-m{flex:1;min-width:0}
.acc-car{color:var(--slate);font-size:10px;flex:0 0 auto;transition:transform 200ms var(--spring)}
.acc.open .acc-car{transform:rotate(180deg)}
.acc-b{display:none;padding:var(--s3) var(--s6) var(--s6);border-top:1px solid var(--rule);background:#FAFCFD}
.acc.open .acc-b{display:block}
.acc-b h6{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:14px;font-weight:700;
letter-spacing:-.012em;color:var(--ink);margin:var(--s6) 0 var(--s3);padding-bottom:9px;border-bottom:1px solid var(--rule)}
.acc-b h6 .sc{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--slate);margin-left:auto}
.acc-b ul{margin:0;padding-left:19px}
.acc-b ul li{font-size:13.5px;line-height:1.7;margin-bottom:10px;color:var(--ink);padding-left:3px}
.acc-b ul li::marker{color:#B6C2C9}
.acc-b ul li b{font-weight:600}
.acc-b ul li span.q{color:var(--slate)}
/* ============ V19: WORK IN PROGRESS ============ */
.wip{border:1.5px dashed #C3CED4;border-radius:var(--r-lg);padding:var(--s8) var(--s7);
text-align:center;background:var(--paper);margin-bottom:var(--s5)}
.wip-k{display:inline-flex;align-items:center;gap:7px;height:25px;padding:0 13px;border-radius:var(--r-pill);
background:var(--warn-bg);color:var(--warn);font-size:11.5px;font-weight:700;
font-family:var(--mono);letter-spacing:.06em;border:1px solid #EBD6A8}
.wip-t{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.024em;margin-top:var(--s5)}
.wip-s{font-size:14px;color:var(--slate);line-height:1.65;max-width:52ch;margin:11px auto 0}
/* ============ V19: TEAM SECTIONS ============ */
.team{margin-bottom:var(--s5)}
.team-h{display:flex;align-items:center;gap:var(--s3);padding:0 0 11px;flex-wrap:wrap}
.team-dot{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.team-n{font-family:var(--display);font-size:15.5px;font-weight:700;letter-spacing:-.016em}
.team-c{font-size:13px;color:var(--slate)}
.team-bar{height:4px;border-radius:2px;background:var(--rule);width:112px;overflow:hidden;flex:0 0 auto}
.team-bar i{display:block;height:100%;background:var(--marine)}
.team-bar i.bad{background:var(--alert)}.team-bar i.warn{background:#BF8500}
/* ============ V19: CHECKLIST TABLE, SLIM ============ */
/* Checklist table. Skin comes from .tbl .tbl-slim, the grip and the PIC
column are particular to this one. */
.ck2 tbody tr.drag{background:var(--signal-bg)}
.ck2 .grip{color:#C3CED4;cursor:grab;font-size:17px;user-select:none;display:block;text-align:center}
.ck2 .grip:hover{color:var(--slate)}
.ck2 .docn{font-weight:500;line-height:1.4}
.ck2 .pic{font-weight:500}
.ck2 .picteam{font-size:12px;color:var(--slate);margin-top:3px}
.due{white-space:nowrap}
.due b{font-weight:500}
.due span{display:block;font-size:12px;color:var(--slate);margin-top:3px}
.due.hot b{color:var(--alert-text)}.due.hot span{color:var(--alert-text)}
.due.soon b{color:var(--warn)}
/* ============ V19: SELECTION BAR ============ */
.selbar{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;padding:11px var(--s6);
border-bottom:1px solid var(--rule);background:var(--signal-bg)}
.selbar .n{font-size:13px;font-weight:600;color:var(--signal);margin-right:var(--s2)}
/* ============ V19: REVIEW SECTION BAND ============ */
.band{display:flex;align-items:center;gap:var(--s4);padding:var(--s5) var(--s6);background:var(--deep);
color:#fff;border-radius:var(--r-lg) var(--r-lg) 0 0;flex-wrap:wrap}
/* ============ V19: SUMMARY GRID ============ */
.sum{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule)}
@media(max-width:980px){.sum{grid-template-columns:minmax(0,1fr)}}
.sumblk{background:var(--paper);padding:var(--s5) var(--s6)}
.sumblk-h{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.09em;
text-transform:uppercase;color:var(--slate);padding-bottom:11px;margin-bottom:11px;border-bottom:1px solid var(--rule)}
.sumrow{display:flex;gap:var(--s4);padding:7px 0;font-size:13.5px;line-height:1.55;align-items:baseline}
.sumrow .k{width:150px;flex:0 0 auto;color:var(--slate);font-size:12.5px}
.sumrow .v{flex:1;min-width:0}
@media(max-width:560px){.sumrow{flex-direction:column;gap:2px}.sumrow .k{width:auto}}
/* ============ V19: NEWS CARDS ============ */
.nws{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
/* ============ V19: AWARDING ============ */
.awd{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);
border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;margin-bottom:var(--s5)}
@media(max-width:900px){.awd{grid-template-columns:repeat(2,minmax(0,1fr))}}
.awdc{background:var(--paper);padding:17px var(--s5)}
.awdc-k{font-size:12.5px;color:var(--slate)}
.awdc-v{font-family:var(--display);font-size:23px;font-weight:700;letter-spacing:-.026em;margin-top:7px;line-height:1}
.awdc-v small{font-family:var(--text);font-size:13px;font-weight:400;color:var(--slate);letter-spacing:0;margin-left:4px}
.awdc-s{font-size:12px;color:var(--slate);margin-top:7px}
/* ============ V20: FILE ACTION ============ */
.filebtn{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:var(--r-sm);
border:1px dashed var(--rule);font-size:12.5px;font-weight:500;color:var(--slate);background:var(--paper);
white-space:nowrap;transition:all 140ms var(--spring)}
.filebtn:hover{border-color:var(--signal);color:var(--signal);border-style:solid;background:var(--signal-bg)}
.filebtn.ok{border-style:solid;border-color:#B3DEC6;background:var(--ok-bg);color:var(--ok)}
.filebtn.ok:hover{border-color:var(--ok);background:#D8EEE2}
.fct{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
background:var(--ok);color:#fff;font-family:var(--mono);font-size:10px;font-weight:600}
/* ============ V20: ACCORDION SCORE ============ */
.accscore{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
width:66px;height:58px;border-radius:var(--r-md);flex:0 0 auto;border:1px solid transparent}
.accscore b{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.026em;line-height:1}
.accscore span{font-family:var(--mono);font-size:11px;margin-top:4px;opacity:.72}
.accscore.ok{background:var(--ok-bg);color:var(--ok);border-color:#B3DEC6}
.accscore.warn{background:var(--warn-bg);color:#8A6000;border-color:#EFD89C}
.accscore.bad{background:var(--alert-bg);color:var(--alert);border-color:#F3C4BD}
/* ============ V20: CHARTS ============ */
.chartgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
/* ============ V20: TASK POPUP ============ */
.tsk{display:flex;align-items:center;gap:var(--s4);padding:13px 0;border-bottom:1px solid var(--rule)}
/* ============ V16: LAYAR KECIL ============ */
.steps{overflow-x:auto;scrollbar-width:none}
.steps::-webkit-scrollbar{display:none}
.subnav{scrollbar-width:none}.subnav::-webkit-scrollbar{display:none}
.chain{scrollbar-width:none}.chain::-webkit-scrollbar{display:none}
@media(max-width:820px){
.page{padding:var(--s5) var(--s4) var(--s7)}
.card{overflow-x:auto}
.tbl{min-width:640px}
.strip{grid-template-columns:repeat(2,minmax(0,1fr))}
.delta,.newsrow{flex-direction:column;gap:var(--s2)}
.delta-k,.news-d{width:auto}
.statusbar{margin-left:0;width:100%;overflow-x:auto;padding-bottom:2px}
.nav{gap:var(--s3);padding:0 var(--s4)}
.navsearch{min-width:0;flex:1}
.navsecs{gap:var(--s4);overflow-x:auto;scrollbar-width:none}
.navsecs::-webkit-scrollbar{display:none}}
/* ============ v22 ============ */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--rule);margin-bottom:var(--s5)}
.tab{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;font-size:14px;font-weight:500;color:var(--slate);
border-bottom:2px solid transparent;margin-bottom:-1px;transition:color 140ms var(--spring)}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);font-weight:600;border-bottom-color:var(--signal)}
.tab .n{font-family:var(--mono);font-size:12px;padding:1px 7px;border-radius:9px;background:var(--mist);color:var(--slate)}
.tab.on .n{background:var(--signal-bg);color:var(--signal)}
.tabpane{display:none}.tabpane.on{display:block}
.mstep{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:12.5px;color:var(--slate)}
.mstep>span{display:inline-flex;align-items:center;gap:7px}
.mstep b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--rule);font-size:12px;color:var(--slate);font-weight:600}
.mstep .on b{border-color:var(--signal);background:var(--signal);color:#fff}
.mstep .on{color:var(--ink);font-weight:600}
.mstep .done b{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.mstep i{width:22px;height:1px;background:var(--rule)}
.step-pane{display:none}.step-pane.on{display:block}
.match{border:1px solid var(--rule);border-radius:var(--r-md);padding:var(--s4) var(--s5);display:flex;gap:14px;align-items:flex-start;margin-top:8px;cursor:pointer;background:var(--paper)}
.match.on{border-color:var(--signal);background:var(--signal-bg)}
.match-b{flex:1;min-width:0}
.match-t{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.012em}
.match-s{font-size:13px;color:var(--slate);margin-top:3px;line-height:1.55}
.match-g{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);gap:4px 12px;margin-top:9px;font-size:13px}
.match-g span:nth-child(odd){color:var(--slate)}
.srcrow{display:flex;align-items:flex-start;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule)}
.srcrow:last-child{border-bottom:none}
.srcrow-k{width:150px;flex:0 0 auto;font-size:12.5px;color:var(--slate);padding-top:4px}
.srcrow-v{flex:1;display:flex;flex-wrap:wrap;gap:6px}
.srcchip{display:inline-flex;align-items:center;gap:6px;height:27px;padding:0 10px;border:1px solid var(--rule);border-radius:var(--r-pill);
font-size:12.5px;background:var(--paper);color:var(--ink);white-space:nowrap}
.srcchip:hover{border-color:#B6C2C9}
.srcchip.off{opacity:.42;text-decoration:line-through}
.srcchip.src{color:var(--signal)}
.pulse{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--signal);animation:pulse22 1.1s infinite}
@keyframes pulse22{0%,100%{opacity:.25}50%{opacity:1}}
.searching{display:flex;align-items:center;gap:10px;padding:18px 0 6px;font-size:14px;color:var(--slate)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule)}
.fact{background:var(--paper);padding:15px var(--s5);min-width:0}
.fact-k{font-size:12px;color:var(--slate);display:flex;align-items:center;gap:6px;min-height:22px}
.fact-v{font-family:var(--display);font-size:16.5px;font-weight:600;letter-spacing:-.016em;margin-top:6px;line-height:1.3;overflow-wrap:anywhere}
.fact-s{font-size:12.5px;color:var(--slate);margin-top:4px;line-height:1.45}
.prov{width:7px;height:7px;border-radius:50%;flex:0 0 auto;display:inline-block}
.prov.ai{background:var(--ok)}.prov.you{background:var(--slate)}
.srcico{margin-left:auto;width:22px;height:22px;border-radius:6px;display:inline-grid;place-items:center;color:var(--slate);border:1px solid transparent;font-size:13px}
.srcico:hover{border-color:var(--rule);color:var(--signal);background:var(--mist)}
.legend2{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--slate);flex-wrap:wrap}
.legend2>span{display:inline-flex;align-items:center;gap:5px}
.legend2 i{display:inline-block;width:14px;height:9px;border-radius:2px}
.qrow{display:grid;grid-template-columns:minmax(0,1fr) 196px 74px;gap:var(--s5);align-items:start;padding:14px var(--s6);border-bottom:1px solid var(--rule)}
.qrow:last-child{border-bottom:none}
.q-t{font-size:14.5px;font-weight:500;line-height:1.45}
.q-sum{font-size:13px;color:var(--slate);margin-top:6px;line-height:1.55;max-width:70ch}
.q-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:var(--r-sm);overflow:hidden;background:var(--paper)}
.seg button{height:30px;padding:0 11px;font-size:12.5px;font-weight:500;color:var(--slate);border-right:1px solid var(--rule);white-space:nowrap}
.seg button:last-child{border-right:none}
.seg button:hover{background:var(--mist)}
.seg button.on{background:var(--deep);color:#fff;font-weight:600}
.seg button.on.bad{background:var(--alert)}.seg button.on.unk{background:var(--slate)}
.q-man{margin-top:9px;display:none;align-items:center;gap:8px}
.qrow.manual .q-man{display:flex}
.q-man input{flex:1;height:32px;padding:0 10px;border:1px solid #EFD89C;background:var(--warn-bg);border-radius:var(--r-sm);font-size:13px}
.q-man input.ok{border-color:var(--rule);background:var(--paper)}
.acc-b.flat{padding:0}
input.flash,textarea.flash,select.flash{border-color:var(--alert)!important;background:var(--alert-bg)!important}
.notebox.need{border-color:var(--alert)}
.hl.chk{background:var(--warn-bg);border-bottom-color:#BF8500}
.hl.conf{background:var(--alert-bg);border-bottom-color:var(--alert)}
.hl.user{background:var(--signal-bg);border-bottom-color:var(--signal)}
.stmt.user{border-left:3px solid var(--signal)}
.doctext::selection,.doctext *::selection{background:var(--pale)}
.ctxmenu{position:fixed;z-index:130;width:270px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-md);
box-shadow:0 12px 32px rgba(5,28,44,.18);padding:6px;display:none}
.ctxmenu.open{display:block}
.ctxmenu button{display:flex;flex-direction:column;align-items:flex-start;width:100%;padding:8px 10px;border-radius:6px;font-size:13.5px;font-weight:500;gap:1px}
.ctxmenu button:hover{background:var(--mist)}
.ctxmenu button small{font-size:12px;color:var(--slate);font-weight:400;line-height:1.4}
.ctxmenu .sel{font-size:12px;color:var(--slate);padding:6px 10px 8px;border-bottom:1px solid var(--rule);margin-bottom:4px;line-height:1.45;font-style:italic;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ckx-t{display:inline-flex;align-items:center;gap:7px;text-align:left;font:inherit;color:inherit}
.ckx-t .car{font-size:11px;color:#C3CED4;transition:transform 140ms var(--spring)}
.ckx-t.on .car{transform:rotate(180deg);color:var(--signal)}
.ckx{display:none;margin:9px 0 3px;padding:12px 14px;background:var(--mist);border-radius:var(--r-sm);font-size:13px;line-height:1.55;max-width:66ch;color:var(--ink)}
.ckx.open{display:block}
.ckx b{display:block;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--slate2);margin:10px 0 3px}
.ckx b:first-child{margin-top:0}
.ckx ul{padding-left:16px;margin:0}
.ckx li{margin:2px 0}
.ckx .cite{cursor:pointer}
.v-award [data-awd]{display:none}
.v-award.awd-pending [data-awd="pending"],.v-award.awd-won [data-awd="won"],.v-award.awd-lost [data-awd="lost"]{display:block}
.resbtn{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 22px;border-radius:var(--r-sm);font-weight:600;font-size:14.5px;
border:1.5px solid rgba(255,255,255,.34);color:#fff;transition:background 140ms var(--spring)}
.resbtn.win{background:var(--ok);border-color:var(--ok)}.resbtn.win:hover{background:#0B6A40}
.resbtn.lose{background:transparent}.resbtn.lose:hover{background:rgba(229,50,27,.28);border-color:#FF7A66}
.sumrow .cite{flex:0 0 auto;font-family:var(--mono);font-size:12px;color:var(--slate);border-bottom:1px dashed #C3CED4;cursor:pointer;white-space:nowrap}
.sumrow .cite:hover{color:var(--signal);border-color:var(--signal)}
.pdfprev{border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden}
.pdfprev-h{background:var(--deep);color:#fff;padding:12px 16px;font-family:var(--display);font-weight:700;font-size:14px;display:flex;align-items:center;gap:10px}
.pdfprev-h small{font-family:var(--text);font-weight:400;color:rgba(255,255,255,.6);font-size:12px;margin-left:auto}
.pdfsec{display:flex;gap:12px;padding:10px 16px;border-bottom:1px solid var(--rule);font-size:13.5px;align-items:baseline}
.pdfsec:last-child{border-bottom:none}
.pdfsec .n{font-family:var(--mono);font-size:12px;color:var(--slate);width:22px;flex:0 0 auto}
.pdfsec .k{width:190px;flex:0 0 auto;font-weight:600}
.pdfsec .v{flex:1;color:var(--slate);line-height:1.5}
.excl{background:var(--warn-bg);border:1px solid #EBD6A8;border-radius:var(--r-sm);padding:10px 14px;font-size:13px;color:#6B5312;margin-top:var(--s4);line-height:1.5}
.toast2{position:fixed;left:50%;bottom:28px;transform:translate(-50%,12px);background:var(--deep);color:#fff;padding:11px 16px;border-radius:var(--r-md);
font-size:13.5px;z-index:140;opacity:0;pointer-events:none;transition:all 200ms var(--spring);box-shadow:0 10px 30px rgba(5,28,44,.25);max-width:520px;line-height:1.45}
.toast2.open{opacity:1;transform:translate(-50%,0)}
/* ============ v23 ============ */
/* One status control per project, in the context bar. Advancing a stage
only ever happens from the hero, so this menu holds the four ways a
project stops: park, do not pursue, withdraw, lost. */
.stbtn.status{display:inline-flex;align-items:center;gap:7px;color:var(--slate)}
.stbtn.status b{color:var(--ink);font-weight:600}
.stbtn.status.parked b{color:var(--warn)}
.stbtn.status.stopped b{color:var(--alert-text)}
.stbtn.status .caret{font-size:10px}
/* Stage spine: only stages already reached are clickable */
.step.future .step-btn{cursor:default}
.step.future .step-btn:active{transform:none}
/* Sub nav lock, used while the requirements are not reviewed yet */
.subnav button.lock{color:#B6C2C9;cursor:not-allowed}
.subnav button.lock .sn{color:#C3CED4}
.subnav button.lock .lk{color:#B6C2C9;margin-left:1px;flex:0 0 auto}
/* Empty state for stage 03 while the project has no client document yet */
#v-p-extract.empty [data-full]{display:none!important}
#v-p-extract:not(.empty) [data-empty]{display:none!important}
/* Gate list inside a hero */
.hero .gate{border-color:rgba(255,255,255,.14);padding:11px 0}
.hero .gate-m{color:#fff;font-size:13.5px}
.hero .gate-s{color:rgba(255,255,255,.62)}
.hero .gate-a{color:var(--sky)}
.hero .gi{margin-top:1px}
.hero .gi-no{background:#FF7A66;color:var(--deep)}
.hero .gi-w{background:#F2C15C;color:var(--deep)}
/* Lock chip inside a button */
.lockchip{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--r-pill);
font-size:12px;font-weight:600;background:rgba(255,255,255,.14);color:#fff;letter-spacing:.01em}
.btn-primary .lockchip{background:rgba(255,255,255,.22)}
.btn-onDeep .lockchip{background:rgba(255,255,255,.14)}
/* Price chain and approval route reuse .chain and .vgate, in a card */
.chain-n.stale{border-color:#EBD6A8;background:var(--warn-bg)}
.chain-n.stale .chain-s{color:var(--warn)}
.chain-n{cursor:pointer}
.chain-n:hover{border-color:#B6C2C9}
.chain-n.now:hover{border-color:var(--deep)}
.card .chain,.card .vgate{padding:var(--s5) var(--s6)}
.card .chain{border-bottom:1px solid var(--rule)}
/* Grouping toggle on the checklist */
.grpseg{display:inline-flex;border:1px solid var(--rule);border-radius:var(--r-sm);overflow:hidden;background:var(--paper)}
.grpseg button{height:32px;padding:0 13px;font-size:13px;font-weight:500;color:var(--slate);border-right:1px solid var(--rule)}
.grpseg button:last-child{border-right:none}
.grpseg button.on{background:var(--deep);color:#fff;font-weight:600}
#ckFlat{display:none}
.ck-flat #ckFlat{display:block}
.ck-flat .team{display:none}
/* Tabs inside Laporan */
.tabs .info{margin-left:2px}
/* Small helper so a page title can carry the info icon without a paragraph */
.h1row{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s6)}
.h1row .sp{flex:1}
/* Compile modal groups */
.cmpgrp{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--slate2);
margin:var(--s4) 0 var(--s2);display:flex;align-items:center;gap:8px}
.cmpgrp:first-child{margin-top:0}
.cmpgrp small{font-weight:500;letter-spacing:0;text-transform:none;color:var(--slate)}
/* Hero action row can carry a note under the buttons */
.hero-an{font-size:12.5px;color:rgba(255,255,255,.62);margin-top:10px;line-height:1.5}
/* Venture adaptation, 23 Sep 2026. Reference inspected through Figma's browser UI.
Semantic selectors intentionally reuse the original mockup components. */
:root{
--deep:#171717;--marine:#404040;--ink:#242424;--slate:#737373;--slate2:#626262;
--signal:#292929;--cyan:#626262;--sky:#BDBDBD;--pale:#EDEDED;
--rule:#E8E8E8;--mist:#FAFAFA;--paper:#FFFFFF;
--ok:#347659;--ok-bg:#EDF7F0;--warn:#916D28;--warn-bg:#FFF8E8;
--alert:#CD605A;--alert-text:#AD4943;--alert-bg:#FFF0EE;
--signal-bg:#F0F0F0;--cyan-bg:#F2F2F2;
--display:"Inter",Helvetica,Arial,sans-serif;--mono:"Inter",Helvetica,Arial,sans-serif;
--r-lg:8px;--r-md:6px;--r-sm:5px;--s6:24px;--s7:32px;--s8:40px;
--nav:68px;--sidebar:216px;
}
body{background:#FFF;font-size:13px;line-height:1.55;padding-left:var(--sidebar)}
button:active{transform:none}
h1,h2,h3,h4{font-weight:600}
.ui-icon{width:18px;height:18px;flex:0 0 18px;opacity:.66;display:block}
.workspace-sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);background:#FAFAFA;border-right:1px solid var(--rule);z-index:75;display:flex;flex-direction:column;padding:0 12px}
.workspace-brand{display:flex;align-items:center;gap:10px;height:var(--nav);padding:0 12px;font-size:18px;font-weight:650;letter-spacing:-.5px;flex-shrink:0}
.workspace-brand small{font-size:10px;font-weight:400;letter-spacing:0;color:var(--slate);display:block;margin-top:0}
.brand-mark{display:grid;place-items:center;width:29px;height:32px;background:#171717;color:white;border-radius:5px;font-size:20px;font-weight:700;transform:skew(-6deg)}
.sidebar-group-label{font-size:11px;color:#858585;padding:25px 12px 11px}
.navsecs{display:flex;flex-direction:column;gap:4px;align-items:stretch;height:auto;overflow:visible}
.navsec,.sidebar-link{height:40px;padding:0 12px;display:flex;align-items:center;gap:11px;font-size:13px;font-weight:400;color:#727272;border:0;border-radius:5px;white-space:nowrap}
.navsec:hover,.sidebar-link:hover{background:#F0F0F0;color:#242424}
.navsec.on{background:#EDEDED;color:#171717;font-weight:500;border:0}
.navsec.on .ui-icon{opacity:1}
.sidebar-rule{height:1px;background:var(--rule);margin:24px 12px 0}
.sidebar-rule+.sidebar-group-label{padding-top:18px}
.sidebar-bottom{margin-top:auto;padding:16px 0}
.workspace-team{display:flex;align-items:center;gap:10px;border-top:1px solid var(--rule);padding:16px 10px 0}
.workspace-team b{font-size:12px;font-weight:500;display:block}.workspace-team small{font-size:10px;color:var(--slate)}
.workspace-team>.ui-icon{margin-left:auto;width:14px;height:14px;flex-basis:14px}
.team-monogram{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--rule);border-radius:4px;background:#FFF;font-size:12px}
.nav{height:var(--nav);padding:0 28px;gap:16px;background:#FFF;color:var(--ink);border-bottom:1px solid var(--rule);z-index:70}
.shell-toggle,.shell-notification{width:30px;height:32px;display:grid;place-items:center;border-radius:4px;position:relative;flex-shrink:0}
.shell-toggle:hover,.shell-notification:hover{background:#F5F5F5}
.shell-divider{height:20px;width:1px;background:var(--rule);flex-shrink:0}
.shell-crumb{font-size:12px;color:var(--slate)}.shell-page{font-size:12px;white-space:nowrap}
.nav>.ui-icon{width:12px;height:12px;flex-basis:12px;opacity:.4}
.navsearch{min-width:0;width:330px;max-width:380px;height:34px;display:flex;align-items:center;gap:9px;border:1px solid var(--rule);padding:0 10px;text-align:left;color:#929292;background:#FFF;font-size:11px;border-radius:5px}
.navsearch:hover{border-color:#C7C7C7;background:#FAFAFA;color:var(--ink)}
.navsearch .ui-icon{width:14px;height:14px;flex-basis:14px;opacity:.4}
.navsearch kbd{margin-left:auto;font:10px var(--text);color:#939393;white-space:nowrap;background:#F5F5F5;border:1px solid #EEE;padding:0 4px;border-radius:3px}
.langtog{border:1px solid var(--rule);color:var(--slate);font-size:11px;padding:0 8px;height:28px}
.langtog:hover{background:#F5F5F5}
.shell-notification>span{position:absolute;right:5px;top:5px;background:#CB776D;width:4px;height:4px;border-radius:50%}
.shell-profile{display:flex;align-items:center;gap:9px;white-space:nowrap;font-size:11px}.shell-profile small{display:block;color:var(--slate);font-size:10px}
.avatar{width:29px;height:29px;border:0;background:#E6DED5;color:#716354;font-size:10px}
.nav-sp{min-width:0}
.page{max-width:1600px;padding:28px 32px 48px}
.dsp-xl{font-size:25px;font-weight:600;letter-spacing:-.8px;line-height:1.3}.dsp-md{font-size:15px;font-weight:600}.dsp-sm{font-size:14px;font-weight:500}
.home-heading{flex-wrap:wrap;gap:16px}.home-heading>.sp{display:none}
.workspace-date{margin-left:auto;color:var(--slate);display:flex;align-items:center;gap:8px;font-size:11px;border:1px solid var(--rule);border-radius:5px;padding:7px 10px}
.workspace-date .ui-icon{width:13px;height:13px;flex-basis:13px}
.home-heading .btn{height:34px;font-size:12px;padding:0 14px}
.overview-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.overview-heading h2{font-size:13px;font-weight:500}.overview-heading .linkbtn{font-size:11px;color:var(--slate)}
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(170px,1.22fr);gap:12px;background:none;border:0;overflow:visible;margin-bottom:28px;border-radius:0}
.strip-c{position:relative;border:1px solid var(--rule);border-radius:6px;padding:17px 18px;min-height:112px;background:white;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:13px 7px;align-items:baseline}
.strip-c:hover{border-color:#C8C8C8;background:#FCFCFC}
.strip-k{grid-column:1/-1;font-size:11px;color:#737373;margin:0;padding-right:12px}
.strip-k:after{content:'›';position:absolute;right:16px;top:14px;font-size:16px;color:#9A9A9A}
.strip-v{font-size:28px;font-weight:500;line-height:1;letter-spacing:-1px}.strip-v small{font-size:15px;color:var(--ink)}
.strip-s{font-size:10px;color:#8B8B8B;margin:0}
.strip-c.focus{background:#FAFAFA;border-color:#D8D8D8}.strip-c.focus .strip-v{color:var(--ink)}
.strip-c:last-child{background:#FAFAFA}.strip-c:last-child .strip-s{grid-column:1/-1;margin-top:-4px}.strip-c:last-child{gap:8px}
.btn{height:36px;font-size:12px;font-weight:500;padding:0 14px;border-radius:5px}
.btn-primary,.btn-deep,.btn-cyan{background:#171717;border-color:#171717;color:#FFF}
.btn-primary:hover,.btn-deep:hover,.btn-cyan:hover{background:#383838;border-color:#383838}
.btn-sec{background:#FFF;color:#444;border-color:#DDD}.btn-sec:hover{border-color:#AFAFAF;background:#FAFAFA}
.btn-sm{height:31px;padding:0 11px;font-size:11px}.btn-xs{height:27px;padding:0 9px;font-size:10.5px}
.btn-ghost{color:var(--slate)}.btn[disabled]{opacity:.4}
.linkbtn{font-size:12px}.tiny{font-size:11px}.mono{font-size:12px;letter-spacing:0}
.card{border-color:var(--rule);border-radius:7px;box-shadow:none}
.card-h{padding:15px 18px}.card-b{padding:22px}.card-f{background:white;padding:13px 18px;font-size:11px}.card-f>.sp{flex:1}
.tbar{gap:8px}.tsearch{font-size:11px;height:32px;background:#FFF;border-color:var(--rule);border-radius:5px;min-width:180px;max-width:280px}
.tbl{font-size:12px}.tbl thead th{background:#FAFAFA;color:#838383;font-weight:400}
.thb{font-size:11px;font-weight:400;padding:12px 16px;gap:7px}.srt{color:#B8B8B8;font-size:8px}
.tbl tbody td{padding:13px 16px;border-color:#EEE}.tbl-roomy tbody td{padding:18px 16px}
.tbl-roomy .co{font-size:12px;font-weight:500}.tbl-roomy .route,.tbl-roomy .mono,.tbl-roomy .salesname,.duetxt{font-size:11px}
.tbl tbody tr:hover,.tbl tbody tr[data-nav]:hover{background:#FAFAFA}
.tbl .co{font-family:var(--text);font-weight:500}.pj{font-size:10.5px;line-height:1.5;color:#8B8B8B;margin-top:3px}
.avc{gap:10px}.avc>.av{width:30px;height:30px;border-radius:7px;background:#F0EEEB;color:#827563;border:1px solid #E8E4DE;font-size:10px}
.tbl tr:nth-child(4n+2) .avc>.av{background:#EAF1EF;color:#637F74;border-color:#DFEAE6}
.tbl tr:nth-child(4n+3) .avc>.av{background:#F0EDF5;color:#817093;border-color:#E7E1EF}
.tbl tr:nth-child(4n) .avc>.av{background:#EDF1F6;color:#667D92;border-color:#E0E7EF}
.avc>.av-m{border-radius:50%}
.stepbar{max-width:116px;gap:3px;margin-bottom:6px}.stepbar .sb{height:3px;border-radius:2px}.stepbar .sb.on{background:#B8B8B8}.stepbar .sb.now{background:#404040}.stepdesc{font-size:10px;color:#7B7B7B}
.route{font-size:11px;padding:2px 7px;border-radius:4px;background:#F3F0F9;color:#877499}.route i{width:4px;height:4px;border-radius:50%;background:currentColor}
.route.r-direct,.route.direct{background:#EDF6F0;color:#59846A}.route.r-renew,.route.renew{background:#FFF5E8;color:#9D7D4A}
.tag{height:22px;border:0;border-radius:4px;padding:0 7px;font-size:10.5px;font-weight:400}.tag .d{width:4px;height:4px}
.t-alert{color:var(--alert-text);background:var(--alert-bg)}.t-warn{color:var(--warn);background:var(--warn-bg)}.t-ok{color:var(--ok);background:var(--ok-bg)}.t-signal{color:#77648C;background:#F3EFF8}.t-signal .d{background:#9F8FB2}
.pg button{font-size:11px;border-radius:4px}.pg button.on{background:#F1F1F1;color:#171717;border-color:#DDD}
#v-home .sect-h .dsp-md{font-size:13px}.feed{padding:14px 0}.ft{font-size:12px}.ft b{font-weight:500}
.ctxbar{background:#FFF}.ctxbar-in{max-width:1600px;padding:24px 32px 0}
.ctxsel{height:36px;border-color:var(--rule);gap:8px}.ctxsel .v{font-size:13px;font-weight:500}.ctxsel .k,.ctxmeta{font-size:11px}
.steps{padding-top:23px}.step-btn{gap:8px;padding-bottom:20px}.step-n{width:25px;height:25px;font-size:10px;border-width:1px}.step-l{font-size:12px}.step-line{width:30px;margin:0 12px 20px;background:#E2E2E2}.step-line.done{background:#BFBFBF}.step.done .step-n{background:#EEE;border-color:#DDD;color:#666}.step.now .step-n{background:#292929;border-color:#292929}
.subnav{gap:16px;margin-bottom:24px}.subnav button{font-size:12px;padding:10px 2px;gap:7px}.subnav .sn{font-size:10px}.subnav button.on{font-weight:500}
.hero{background:#FAFAFA;border:1px solid var(--rule);color:var(--ink);border-radius:7px;grid-template-columns:minmax(0,1fr) 310px;margin-bottom:24px}
.hero-l{padding:28px}.hero-r{padding:28px;border-color:var(--rule);background:#F7F7F7}
.hero-h{font-size:25px;font-weight:600;letter-spacing:-.65px;line-height:1.3;color:var(--ink);max-width:26ch;margin-top:8px}
.hero-p{font-size:12px;line-height:1.8;color:var(--slate);margin-top:12px}.hero .kicker{color:#737373;font-size:11px}.hero-a{margin-top:20px}
.hero-rk,.hero-score small{color:var(--slate);font-size:12px}.hero-score{font-size:45px;color:var(--ink);font-weight:500}.hero-bar{background:#E5E5E5;height:4px}.hero-bar i{background:#767676}.hero-bar u{background:#333}
.hero-note,.hero-rule,.hero-rule b,.hero-an{color:var(--slate);font-size:11px}
.btn-onDeep{color:#444;border-color:#D4D4D4;background:#FFF}.btn-onDeep:hover{background:#EEE;border-color:#BEBEBE}
.hero .gate{border-color:var(--rule)}.hero .gate-m{color:var(--ink);font-size:12px}.hero .gate-s,.hero .gate-a{color:var(--slate);font-size:11px}
.hero .btn-onDeep .lockchip{background:#F0F0F0;color:#666}
.fk{font-size:12px}.fc{font-size:12px}.lbl{font-size:12px}.ctl{height:39px;font-size:12px}.ctl-lg{height:45px;font-size:14px}
.sumblk-h,.cmpgrp{text-transform:none;letter-spacing:0;font-size:12px;font-weight:500}.sumrow{font-size:12px}.sumrow .k{font-size:11px}
.acc-h,.team-h{font-size:12px}.team-n{font-size:14px;font-weight:500}.team-c{font-size:11px}
.hubc-t,.opt-t,.revc-t{font-size:14px;font-weight:500}
.scrim{background:rgba(0,0,0,.22);backdrop-filter:blur(2px)}.modal{max-width:calc(100vw - 32px);max-height:90dvh;border:1px solid #E3E3E3;border-radius:9px;box-shadow:0 16px 64px #0002}
.m-h{padding:20px 24px}.m-h h4{font-size:17px;font-weight:600}.m-b{padding:22px 24px}.m-f{background:#FAFAFA;padding:16px 24px}.m-h p{font-size:12px}
.rowmenu,.tpop{border-color:var(--rule);border-radius:6px;box-shadow:0 6px 24px #00000012}.rowmenu button{font-size:12px}
.chat{border-color:var(--rule);box-shadow:0 6px 24px #00000012}.chat-h{background:#FFF;color:var(--ink);border-bottom:1px solid var(--rule)}
body.sidebar-collapsed{--sidebar:0px}.sidebar-collapsed .workspace-sidebar{display:none}
:focus-visible{outline:2px solid #858585;outline-offset:3px}
@media(min-width:1650px){.page,.ctxbar-in{padding-left:44px;padding-right:44px}}
@media(max-width:1250px){body{--sidebar:186px}.page{padding:24px}.ctxbar-in{padding:20px 24px 0}.nav{padding:0 24px;gap:12px}.shell-crumb,.nav>.ui-icon{display:none}.navsearch{width:280px}.strip{gap:8px}.strip-c{padding:15px 12px}.strip-v{font-size:25px}.tbl-roomy tbody td{padding:16px 12px}.thb{padding:11px 12px}.tbl-roomy .avc>.av{display:none}.hero{grid-template-columns:minmax(0,1fr) 280px}}
@media(max-width:1050px){.shell-profile>span:last-child{display:none}.navsearch{width:250px}.card{overflow-x:auto}.tbl{min-width:720px}.strip{grid-template-columns:repeat(3,minmax(0,1fr))}.hero{grid-template-columns:1fr}.hero-r{border-left:0;border-top:1px solid var(--rule)}.rev{grid-template-columns:1fr}.step-line{width:18px;margin-left:8px;margin-right:8px}}
@media(max-width:760px){body{--sidebar:0px}.workspace-sidebar{display:none}.nav{height:58px;gap:10px;padding:0 16px}.shell-page{font-size:11px}.shell-crumb,.shell-divider,.shell-profile,.navsearch kbd{display:none}.navsearch{width:auto;flex:1}.navsearch span{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nav-sp{display:none}.shell-toggle{display:grid}.page{padding:22px 16px 36px}.ctxbar-in{padding:18px 16px 0}.home-heading{align-items:flex-start;gap:12px}.home-heading>div:first-child{width:100%}.home-heading .sp{display:none}.workspace-date{margin-left:0;margin-right:auto}.dsp-xl{font-size:23px}.strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.strip-c:last-child{grid-column:1/-1;grid-template-columns:auto 1fr auto;align-items:center;min-height:74px}.strip-c:last-child .strip-k{grid-column:auto}.strip-c:last-child .strip-s{grid-column:auto;margin:0;padding-right:8px}.strip-c:last-child .strip-k:after{display:none}.hero-l,.hero-r{padding:22px}.hero-h{font-size:23px}.hero-score{font-size:38px}.card-h{padding:14px}.card-b{padding:18px}.tbar .tsearch{max-width:none;width:100%;flex-basis:100%}.tbar .sp{display:none}.modal{max-width:calc(100vw - 24px)}.m-h,.m-b,.m-f{padding:18px}.m-f{flex-wrap:wrap}.chartgrid,.g-3,.awd,.hub,.tprog,.spec,.sum{grid-template-columns:1fr}.chat{max-width:calc(100vw - 24px);right:12px}.sidebar-mobile-open .workspace-sidebar{display:flex;width:216px;box-shadow:16px 0 48px #0002;top:58px}.sidebar-mobile-open .nav{z-index:80}.sidebar-mobile-open .workspace-brand{display:none}.tsearch{min-width:0}.ctxrow{gap:8px}.ctxsel{max-width:100%;height:auto;min-height:36px}.ctxsel .v{white-space:normal}.statusbar{flex-wrap:wrap}.hero-a .btn{white-space:normal;height:auto;min-height:36px}.mstep{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
/* Light decision panels also need readable secondary and outcome actions. */
.hero-ov,.hero-ov button{color:var(--slate)}
.hero .resbtn.lose{color:var(--alert-text);border-color:#E6C5C2;background:#FFF}
.hero .resbtn.lose:hover{background:var(--alert-bg)}
.hero .resbtn{height:36px;padding:0 14px;font-size:12px;font-weight:500}
.chat-h .car{color:var(--slate)}
@media(max-width:760px){.shell-page{max-width:75px;overflow:hidden;text-overflow:ellipsis}.workspace-date{font-size:10px}.strip-v{font-size:24px}.strip-c:last-child .strip-s{font-size:9px}.hero .resbtn{height:auto;min-height:36px}}
/* ==========================================================================
Revisi 23 Sep 2026 — perbaikan landing page.
Hanya UKURAN HURUF yang dinaikkan ke skala Venture (body 14/1.5, small 12)
dan dibatasi jadi sedikit ukuran saja supaya konsisten. Tinggi kontrol,
padding, lebar sidebar dan header sengaja dibiarkan seperti semula.
========================================================================== */
body{font-size:14px;line-height:1.5}
.dsp-xl{font-size:28px;letter-spacing:-.7px}.dsp-md{font-size:16px}.dsp-sm{font-size:15px}
.kicker{font-size:12px}.tiny{font-size:12px}.mono{font-size:13px}.linkbtn{font-size:13px}
.btn{font-size:14px}
.btn-sm{font-size:13px}
.btn-xs{font-size:12px}
.tag{font-size:12px}
.route{font-size:12px}
.tbl{font-size:14px}
.thb{font-size:13px}
.tbl-roomy .co{font-size:14px}
.tbl-roomy .route,.tbl-roomy .mono,.tbl-roomy .salesname,.duetxt{font-size:13px}
.pj{font-size:12.5px}
.stepdesc{font-size:12px}
.card-f{font-size:13px}
.pg button{font-size:13px}
.avc>.av{font-size:12px}
.avatar{font-size:12px}
.navsec,.sidebar-link{font-size:14px}
.sidebar-group-label{font-size:12px}
.workspace-brand{font-size:19px}.workspace-brand small{font-size:11px}
.workspace-team b{font-size:13px}.workspace-team small{font-size:11px}
.navsearch{font-size:13px;white-space:nowrap}
.navsearch>span{overflow:hidden;text-overflow:ellipsis}
.navsearch kbd{font-size:11px}
.langtog{font-size:12px}
.shell-crumb,.shell-page{font-size:13px}
.shell-profile{font-size:13px}.shell-profile small{font-size:11px}
.workspace-date{font-size:12px}
.home-heading .btn{font-size:14px}
.ft{font-size:13px}
.subnav button{font-size:13px}.step-l{font-size:13px}
.ctxsel .v{font-size:14px}.ctxsel .k,.ctxmeta{font-size:12px}
#v-home .sect-h .dsp-md{font-size:16px}
.overview-heading h2{font-size:14px}
/* kartu ringkasan pipeline: semua kartu tahap sama, tanpa kartu yang disorot */
.strip-k{font-size:13px}.strip-v{font-size:32px}.strip-s{font-size:12px}
.strip-c.focus{background:#FFF;border-color:var(--rule)}
.strip-c.focus:hover{border-color:#C8C8C8;background:#FCFCFC}
.strip-total{cursor:default}
.strip-c:last-child{background:#FFF}
.strip-total .strip-k:after{content:none}
/* kepala tabel: judul di kiri, kolom cari di kanan sebelum filter */
.tbar-title{font-size:15px;font-weight:500;color:var(--ink);white-space:nowrap}
.searchwrap{position:relative;display:flex;align-items:center;flex:0 1 280px;min-width:190px}
.searchwrap .ui-icon{position:absolute;left:11px;width:16px;height:16px;flex-basis:16px;opacity:.45;pointer-events:none}
.searchwrap .tsearch{flex:1 1 auto;width:100%;max-width:none;font-size:13px;padding:0 12px 0 34px}
/* kolom Member: cukup avatarnya, nama disembunyikan tapi tetap terbaca mesin */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.memc{display:flex;align-items:center;min-width:0}
.memc .avrow{display:flex;align-items:center}
.memc .av{width:28px;height:28px;margin-left:-8px;border:2px solid #FFF;font-size:11px;font-weight:500}
.memc .av:first-child{margin-left:0}
.m-ar{background:#EDF2FE;color:#4976F4}
.m-rd{background:#F4EDF7;color:#954BAF}
.m-sh{background:#EEF5F0;color:#589E67}
.m-mr{background:#FBF4EC;color:#D28E3D}
.m-fr{background:#F7EDED;color:#AF4B4B}
/* --- Revisi 2: ukuran huruf diturunkan satu tingkat, jalur dibuat monokrom,
dan tahap yang sudah lewat dibuat terbaca di stepbar. --- */
body{font-size:13px}
.dsp-xl{font-size:24px}.dsp-md{font-size:15px}.dsp-sm{font-size:14px}.tiny{font-size:12px}.mono{font-size:12px}.linkbtn{font-size:12px}
.btn{font-size:13px}.btn-sm{font-size:12px}.btn-xs{font-size:11px}
.tag{font-size:11.5px}
.tbl{font-size:13px}.thb{font-size:12px}
.tbl-roomy .co{font-size:13px}
.tbl-roomy .route,.tbl-roomy .mono,.tbl-roomy .salesname,.duetxt{font-size:12px}
.pj{font-size:12px}
.card-f{font-size:12px}.pg button{font-size:12px}
.strip-k{font-size:12px}.strip-v{font-size:28px}.strip-s{font-size:11.5px}
.overview-heading h2{font-size:13px}
.tbar-title{font-size:14px}
.searchwrap .tsearch{font-size:12px}
.navsec,.sidebar-link{font-size:13px}
.workspace-brand{font-size:17px}
.navsearch{font-size:12px}.langtog{font-size:11.5px}
.shell-crumb,.shell-page{font-size:12px}
.shell-profile{font-size:12px}
.avc>.av{font-size:11px}.avatar{font-size:11px}
.workspace-date{font-size:11.5px}
.home-heading .btn{font-size:13px}
.ft{font-size:12px}
.subnav button{font-size:12px}.step-l{font-size:12px}
.ctxsel .v{font-size:13px}.ctxsel .k,.ctxmeta{font-size:11.5px}
#v-home .sect-h .dsp-md{font-size:15px}
/* jalur: satu warna untuk semua rute */
.route,.route.r-tender,.route.r-direct,.route.direct,.route.r-renew,.route.renew{background:#F2F2F2;color:#5A5A5A}
.route i{background:#9A9A9A}
/* stepbar: tahap yang sudah lewat harus kelihatan sudah lewat */
.stepbar .sb{background:#E8E8E8}
.stepbar .sb.on{background:#8E8E8E}
.stepbar .sb.now{background:#242424}
/* --- Revisi 3 --- */
/* avatar member: lebih rapat, tiga dulu lalu "+N" */
.memc .av{width:26px;height:26px;margin-left:-6px;font-size:10px;cursor:default}
.memc .av-more{background:#EDEDED;color:#5A5A5A;font-size:10.5px}
.info-pop u{display:flex;justify-content:space-between;gap:20px;padding:3px 0;font-size:12px;text-decoration:none;color:#B4B4B4}
.info-pop u i{font-style:normal;color:#fff}
/* pindah bahasa tidak boleh menggeser apa pun: kunci lebar kontrol yang
tulisannya berubah panjang antara Indonesia dan Inggris */
.tbar .fwrap .btn{min-width:126px;justify-content:space-between}
.searchwrap{flex:0 0 280px}
.home-heading .btn{min-width:152px;justify-content:center}
.workspace-date{min-width:132px;justify-content:center}
.langtog{display:inline-flex;align-items:center;justify-content:center;text-align:center;min-width:38px;padding:0 10px;line-height:1}
.card-f [data-tcount]{min-width:230px;display:inline-block}
/* --- Revisi 4: modal Tambah Lead Baru --- */
#m-newlead .mstep{gap:18px;margin-top:12px}
/* langkah 1 rata kiri sejajar judul, langkah 2 tepat di tengah:
kolom 1fr di kiri dan kanan membuat kolom tengah selalu di titik tengah */
#m-newlead .mstep{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0;gap:18px}
#m-newlead .mstep-l{display:flex;align-items:center;gap:18px;min-width:0}
/* langkah 1 tidak lagi anak langsung .mstep, jadi jaraknya diatur ulang */
#m-newlead .mstep [data-ms]{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
#m-newlead .mstep-l i{flex:1 1 auto;width:auto;max-width:none}
#m-newlead .mstep>span{white-space:nowrap}
#m-newlead .m-b{padding-bottom:26px}
/* panah dropdown: pakai panah sendiri supaya tidak menempel ke tepi kotak */
select.ctl{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
select.ctl:hover{border-color:#C7C7C7}
/* ikon info dirapatkan ke tepi kanan supaya sejajar di semua label */
#m-newlead .lbl{gap:10px}
#m-newlead .lbl .info{margin-left:auto}
.ctl{height:40px;font-size:13px}
.lbl{font-size:12px}.lbl b{font-size:13px}
.match-t{font-size:14px}.match-s{font-size:12px}.match-g{font-size:12px}
.srcrow-k{font-size:12px;width:166px}
/* chip sumber: nama membuka situs, tanda silang mengecualikan */
.srcchip{padding:0 3px 0 10px;gap:2px;height:26px;font-size:12px}
.srcchip a{color:inherit;text-decoration:none}
.srcchip a:hover{text-decoration:underline}
.srcx{width:19px;height:19px;display:grid;place-items:center;border-radius:50%;color:#9A9A9A;font-size:9px;line-height:1}
.srcx:hover{background:#EDEDED;color:var(--ink)}
.srcchip.off{opacity:.45}
.srcchip.off a{text-decoration:line-through}
/* --- Revisi 5: asisten jadi panel kanan dengan pull tab yang bisa ditarik --- */
:root{--chatw:380px}
.chat{top:0;right:0;bottom:0;left:auto;width:var(--chatw);height:auto;
border:0;border-left:1px solid var(--rule);border-radius:0;
box-shadow:-12px 0 32px rgba(0,0,0,.06);overflow:visible;
transform:translateX(0);transition:transform 260ms var(--spring);z-index:82}
.chat.min{height:auto;transform:translateX(100%)}
.chat.dragging{transition:none}
body{transition:padding-right 260ms var(--spring)}
body.chat-open{padding-right:var(--chatw)}
.chat-h{height:var(--nav);cursor:default;padding:0 16px;background:#FFF;color:var(--ink);border-bottom:1px solid var(--rule)}
.chat-h .t{font-size:13px;font-weight:500}
.chat-live{background:#589E67}
.chat-close{width:28px;height:28px;display:grid;place-items:center;border-radius:5px;color:var(--slate);font-size:12px}
.chat-close:hover{background:#F2F2F2;color:var(--ink)}
.chat-tab{position:absolute;left:-34px;top:50%;transform:translateY(-50%);
width:34px;height:136px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
background:#171717;color:#fff;border-radius:8px 0 0 8px;
box-shadow:-4px 0 14px rgba(0,0,0,.14);cursor:grab;touch-action:none;user-select:none}
.chat-tab:hover{background:#333}
.chat-tab:active{cursor:grabbing}
.chat-tab .lbl{writing-mode:vertical-rl;transform:rotate(180deg);font-size:12px;font-weight:500;letter-spacing:.02em;white-space:nowrap}
.chat-tab .car{font-size:10px;line-height:1;transform:rotate(-90deg)}
.chat.min .chat-tab .car{transform:rotate(90deg)}
.chat-b{padding:16px}
.msg{font-size:13px}
.chat-src{font-size:12px;background:#FAFAFA}
.chat-f input{font-size:13px}
@media(max-width:900px){
body.chat-open{padding-right:0}
.chat{width:min(var(--chatw),100vw)}}
/* --- Revisi 6: bagian Pinned di sidebar --- */
.sidebar-group-btn{width:100%;display:flex;align-items:center;gap:11px;height:38px;padding:0 12px;
border-radius:5px;font-size:12px;color:#858585;margin-top:14px}
.sidebar-group-btn:hover{background:#F0F0F0;color:var(--ink)}
.sidebar-group-btn .ui-icon{opacity:.6}
.sidebar-group-btn .car{margin-left:0;font-size:9px;transition:transform 200ms var(--spring)}
.sidebar-group-btn.collapsed .car{transform:rotate(-90deg)}
.pin-n{margin-left:auto;background:#EDEDED;color:#5A5A5A;border-radius:10px;padding:1px 7px;font-size:10.5px;line-height:1.5}
.pinlist{display:grid;grid-template-rows:1fr;margin:4px 0 0 20px;
transition:grid-template-rows var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease)}
.pinlist.hide{grid-template-rows:0fr;opacity:0}
.pinlist-in{overflow:hidden;display:flex;flex-direction:column;gap:2px;
padding-left:8px;border-left:1px solid var(--rule)}
.pinrow{position:relative;display:flex;align-items:center;gap:8px;height:32px;padding:0 6px 0 5px;
border-radius:5px;font-size:12.5px;color:#4A4A4A;width:100%}
.pindot{width:7px;height:7px;border-radius:50%;border:1.5px solid #B4B4B4;background:transparent;flex:0 0 auto}
.pinrow:hover .pindot{border-color:#6E6E6E}
.pinrow:hover{background:#F0F0F0;color:var(--ink)}
.pinrow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
/* tombol lepas mengambang di atas ujung nama, jadi nama dapat ruang penuh */
.pinrow .unpin{position:absolute;right:6px;top:50%;transform:translateY(-50%);opacity:0;
width:20px;height:20px;display:grid;place-items:center;border-radius:4px;background:#F0F0F0;
color:var(--slate);font-size:9px}
.pinrow:hover .unpin{opacity:1}
.pinrow .unpin:hover{background:#E4E4E4;color:var(--ink)}
.pinempty{padding:6px 8px 4px 6px;font-size:11.5px;color:#9A9A9A;line-height:1.55}
/* ==========================================================================
Revisi 7 - Gerak. Semua animasi memakai token yang sama supaya seragam.
Aturan lengkapnya ada di docs/DESIGN.md bagian "Gerak".
========================================================================== */
:root{
--ease:cubic-bezier(.32,.72,0,1); /* standar, untuk hampir semua hal */
--ease-out:cubic-bezier(.22,1,.36,1); /* untuk sesuatu yang muncul */
--dur-1:120ms; /* mikro: warna, hover, fokus */
--dur-2:200ms; /* sedang: dropdown, menu, popover, caret, chip */
--dur-3:280ms; /* besar: panel, modal, sidebar */
}
/* 1. Mikro: perubahan warna dan border saat disentuh kursor */
.btn,.navsec,.sidebar-link,.sidebar-group-btn,.pinrow,.srcchip,.srcx,.rowmore,.iconbtn,
.strip-c,.tsearch,.ctl,.navsearch,.langtog,.shell-toggle,.shell-notification,.chat-close,
.thb,.pg button,.linkbtn,.match,.cbx,.info,.pindot,.step-btn,.subnav button{
transition:background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),
color var(--dur-1) var(--ease),opacity var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);
}
.tbl tbody tr{transition:background-color var(--dur-1) var(--ease)}
/* 2. Caret dan ikon yang berputar */
.sidebar-group-btn .car,.ctxsel .car,.caret,.srt,.chat-tab .car{
transition:transform var(--dur-2) var(--ease);
}
/* 3. Sesuatu yang muncul: menu, dropdown filter, popover, modal, tooltip.
Keluarnya tetap seketika karena elemennya dilepas dari tata letak. */
@keyframes rise-in{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes modal-in{from{opacity:0;transform:translate(-50%,-47%) scale(.985)}
to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.rowmenu.open,.info-pop.open,.ctxmenu.open,.tpop.open{animation:rise-in var(--dur-2) var(--ease-out)}
.scrim.open{animation:fade-in var(--dur-2) var(--ease-out)}
.modal.open{animation:modal-in var(--dur-3) var(--ease-out)}
/* 4. Sesuatu yang tetap ada di DOM: dianimasikan dua arah */
.chat{transition:transform var(--dur-3) var(--ease)}
body{transition:padding-right var(--dur-3) var(--ease)}
.toast2{transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.step-pane.on{animation:fade-in var(--dur-2) var(--ease-out)}
/* 5. Hormati setelan sistem yang meminta gerak dikurangi */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* --- Revisi 8: baris field lebih padat dan selalu satu baris --- */
.frow{align-items:center;gap:16px;padding:5px 0}
.fk{width:196px;padding-top:0;font-size:12px;line-height:1.4;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc{display:flex;align-items:center;gap:8px;min-width:0;max-width:560px}
.fc>.fin{flex:1 1 auto;width:auto;min-width:0}
.fin{height:32px;font-size:12.5px;padding:0 10px}
.frow>.fmark{margin-left:auto}
/* penanda sumber: ikon panah, bentuknya sama dengan yang di kartu Fakta utama */
.fmark.fm-src{width:24px;height:24px;padding:0;border:1px solid transparent;border-radius:6px;
display:inline-grid;place-items:center;font-size:13px;font-weight:400;
background:none;color:#9A9A9A}
.fmark.fm-src:hover{border-color:var(--rule);background:#FAFAFA;color:var(--ink)}
.fmark.fm-src.fm-warn{color:#D28E3D}
/* .src sudah menyisipkan panahnya sendiri lewat ::before, jadi dimatikan di sini */
.fmark.fm-src.src::before{content:none}
.fmark.fm-src.src{border-bottom:0}
/* "Perlu diisi manual" jadi catatan biasa, bukan kotak */
.fmark.fm-you{background:none;border-color:transparent;color:#9A9A9A;font-weight:400;padding:0 2px;font-size:11.5px}
/* --- Revisi 9: empat kartu profil sebagai matriks 2x2 yang ukurannya sama --- */
.grid2x2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;
gap:16px;margin-bottom:var(--s5)}
.grid2x2>.card{margin-bottom:0;display:flex;flex-direction:column;min-width:0}
.grid2x2>.card>.card-b{flex:1}
.grid2x2 .fk{width:172px;font-size:11.5px}
.grid2x2 .fc{max-width:none}
@media(max-width:1100px){.grid2x2{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}}
/* berita: sumber dan tag di pojok kanan atas, sejajar judulnya */
.news-t{display:flex;align-items:flex-start;gap:20px}
.news-t>.news-h{flex:1;min-width:0}
.news-t>.news-l{margin-top:0;flex:0 0 auto;justify-content:flex-end}
.news-l .tiny{display:none}
/* --- Revisi 10: halaman 01 Lead, kepala kartu berwarna dan label monokrom --- */
/* kepala kartu memakai abu yang sama dengan kepala tabel di halaman depan */
#v-p-lead .card-h{background:#FAFAFA}
#v-p-lead .grid2x2>.card>.card-h,#v-p-lead .card>.card-h{border-bottom:1px solid var(--rule)}
/* semua label di halaman ini monokrom */
#v-p-lead .tag{background:#F1F1F1;color:#5A5A5A}
#v-p-lead .tag .d{background:#9A9A9A}
#v-p-lead .prov.ai{background:#6E6E6E}
#v-p-lead .prov.you{background:#C6C6C6}
#v-p-lead .legend2 .lg-a{background:#6E6E6E}
#v-p-lead .legend2 .lg-b{background:#C6C6C6}
#v-p-lead .fmark.fm-src.fm-warn{color:#9A9A9A}
#v-p-lead .fmark.fm-you{color:#9A9A9A}
#v-p-lead .legend2 i{display:inline-block;width:14px;height:9px;border-radius:2px}
/* berita: sumber di atas, label di bawahnya, keduanya rata kanan */
/* sumber dan label diletakkan di pojok kanan atas baris, tidak ikut
menambah tinggi baris supaya judul dan ringkasannya tetap rapat */
#v-p-lead .newsrow{position:relative}
#v-p-lead .news-t>.news-l{position:absolute;top:var(--s5);right:var(--s6);
flex-direction:column;align-items:flex-end;gap:5px;margin-top:0}
#v-p-lead .news-h,#v-p-lead .news-s{max-width:calc(100% - 240px)}
#v-p-lead .news-s{margin-top:5px}
#v-p-lead .news-l .src{color:#5A5A5A;border-bottom-color:transparent}
#v-p-lead .news-l .src:hover{color:var(--ink);border-bottom-color:#B4B4B4}
/* --- Revisi 11: kartu teratas halaman 01 kembali hitam --- */
/* Kartu teratas halaman 01 dan 02: hitam, ukuran dan gaya identik. */
#v-p-lead .hero,#v-p-fs .hero{background:#171717;border-color:#171717;color:#fff}
#v-p-lead .hero-r,#v-p-fs .hero-r{background:#1F1F1F;border-color:rgba(255,255,255,.12)}
#v-p-lead .hero-h,#v-p-fs .hero-h{color:#fff}
#v-p-lead .hero .kicker,#v-p-fs .hero .kicker{color:rgba(255,255,255,.55)}
#v-p-lead .hero-rk,#v-p-fs .hero-rk,
#v-p-lead .hero-score small,#v-p-fs .hero-score small{color:rgba(255,255,255,.62)}
#v-p-lead .hero-score,#v-p-fs .hero-score{color:#fff}
#v-p-lead .hero-bar,#v-p-fs .hero-bar{background:rgba(255,255,255,.16)}
#v-p-lead .hero-bar i,#v-p-fs .hero-bar i{background:#fff}
#v-p-lead .hero-note,#v-p-fs .hero-note{color:rgba(255,255,255,.6)}
#v-p-lead .hero .info,#v-p-fs .hero .info{background:transparent;border-color:rgba(255,255,255,.4);color:rgba(255,255,255,.8)}
#v-p-lead .hero .info:hover,#v-p-lead .hero .info.on,
#v-p-fs .hero .info:hover,#v-p-fs .hero .info.on{border-color:#fff;color:#fff;background:rgba(255,255,255,.12)}
#v-p-lead .hero .btn-onDeep,#v-p-fs .hero .btn-onDeep{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
#v-p-lead .hero .btn-onDeep:hover,#v-p-fs .hero .btn-onDeep:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6)}
#v-p-lead .hero .btn-primary,#v-p-fs .hero .btn-primary{background:#fff;color:#171717;border-color:#fff}
#v-p-lead .hero .btn-primary:hover,#v-p-fs .hero .btn-primary:hover{background:#E4E4E4;border-color:#E4E4E4}
/* --- Revisi 12: kartu Fakta utama tetap empat per baris, tapi lebih tinggi --- */
#v-p-lead .facts{grid-template-columns:repeat(4,minmax(0,1fr))}
#v-p-lead .fact{padding:22px 20px;min-height:148px;display:flex;flex-direction:column}
#v-p-lead .fact-v{margin-top:10px}
#v-p-lead .fact-s{margin-top:10px}
@media(max-width:1100px){#v-p-lead .facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* --- Revisi 13: kolom baris field dikunci, panah dropdown sejajar --- */
/* Baris jadi grid tiga kolom: label, isi, penanda sumber. Baris yang tidak
punya penanda tetap menyisakan kolomnya, jadi semua isian berakhir di
garis yang sama. */
#v-p-lead .frow{display:grid;grid-template-columns:172px minmax(0,1fr) 24px;align-items:center;gap:16px}
#v-p-lead .fk{width:auto}
#v-p-lead .fc{max-width:none}
#v-p-lead .frow>.fmark{margin-left:0;justify-self:end}
#v-p-lead select.fin{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 10px center;padding-right:32px}
/* ==========================================================================
Revisi 14 - Halaman 02 Feasibility Study.
Hero disamakan dengan halaman 01, penilaian risiko dibuat lebih lapang,
dan skornya biner: satu pertanyaan satu poin.
========================================================================== */
#v-p-fs .hero{min-height:196px}
#v-p-lead .hero{min-height:196px}
#v-p-fs .hero-r{display:flex;flex-direction:column;justify-content:center}
#v-p-fs .hero-score{font-size:45px}
/* kepala area risiko */
#v-p-fs .acc-h{padding:20px 22px;gap:20px}
#v-p-fs .acc-t{font-size:14px;font-weight:600}
#v-p-fs .acc-sub{font-size:12.5px;margin-top:4px}
#v-p-fs .accscore{flex-direction:row;align-items:center;gap:12px;background:none;border:0;
padding:0;color:var(--ink);order:2;margin-left:auto;width:auto;height:auto;min-width:0;flex:0 0 auto}
#v-p-fs .accscore b{font-family:var(--text);font-size:14px;font-weight:600;letter-spacing:0}
#v-p-fs .accscore .of{font-family:var(--text);font-size:12px;margin:0;color:var(--slate);opacity:1;white-space:nowrap}
#v-p-fs .accscore b{white-space:nowrap}
#v-p-fs .acc-car{order:3}
/* baris pertanyaan: lebih lapang, kolomnya tetap */
#v-p-fs .acc-b.flat{background:#FFF}
#v-p-fs .qrow{grid-template-columns:minmax(0,1fr) 232px 40px;gap:28px;padding:20px 22px;align-items:start}
#v-p-fs .q-t{font-size:13.5px;font-weight:500;line-height:1.5}
#v-p-fs .q-sum{font-size:12.5px;margin-top:9px;line-height:1.6;max-width:74ch}
#v-p-fs .q-links{margin-top:11px;gap:8px}
#v-p-fs .srcchip{height:24px;font-size:11.5px;color:#5A5A5A;border-color:#E8E8E8;padding:0 9px}
#v-p-fs .srcchip:hover{border-color:#B4B4B4;color:var(--ink)}
/* pilihan jawaban monokrom */
#v-p-fs .seg{border-radius:6px}
#v-p-fs .seg button{height:32px;font-size:12px;font-weight:400;color:#6E6E6E}
#v-p-fs .seg button.on{background:#171717;color:#fff;font-weight:500}
/* poin per pertanyaan: satu penanda bulat, bukan pecahan */
#v-p-fs .q-pts{padding-top:0;display:flex;justify-content:flex-end}
/* alasan perubahan manual, monokrom */
#v-p-fs .q-man input{border-color:#E4E4E4;background:#FAFAFA}
#v-p-fs .q-man .tag{background:#F1F1F1;color:#5A5A5A}
#v-p-fs .q-man .tag .d{background:#9A9A9A}
/* kartu FS2: satu baris per field, kolomnya dikunci seperti halaman 01 */
#v-p-fs .frow{display:grid;grid-template-columns:200px minmax(0,1fr);align-items:center;gap:16px;padding:5px 0}
#v-p-fs .fk{width:auto;font-size:12px}
#v-p-fs .fc{max-width:none}
#v-p-fs .fin{height:32px;font-size:12.5px;padding:0 10px}
#v-p-fs .fin[readonly]{background:#FAFAFA;color:var(--slate)}
#v-p-fs .card-h{background:#FAFAFA}
/* --- Revisi 15: baris pertanyaan halaman 02 --- */
/* isi tiap dimensi dijorokkan dan diberi garis, seperti daftar Pinned */
#v-p-fs .acc-b.flat{position:relative;padding:0 0 0 58px}
#v-p-fs .acc-b.flat::before{content:"";position:absolute;left:34px;top:8px;bottom:8px;width:1px;background:#DCDCDC}
#v-p-fs .qrow{grid-template-columns:minmax(0,1fr) 304px;gap:28px;padding:18px 22px 18px 0}
/* inti jawaban lalu butir buktinya */
#v-p-fs .q-sum{color:var(--ink);font-size:12.5px;margin-top:8px;line-height:1.6}
#v-p-fs .q-bullets{margin:8px 0 0;padding-left:16px;list-style:none}
#v-p-fs .q-bullets li{position:relative;font-size:12.5px;color:var(--slate);line-height:1.65;margin-top:6px}
#v-p-fs .q-bullets li::before{content:"";position:absolute;left:-13px;top:8px;width:4px;height:4px;
border-radius:50%;border:1px solid #B4B4B4}
#v-p-fs .q-link{color:#5A5A5A;font-size:12px;border-bottom:1px solid #DDD;padding:0;height:auto;
display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
#v-p-fs .q-link:hover{color:var(--ink);border-bottom-color:#8E8E8E}
/* tiga pilihan jawaban dengan lebar yang sama */
#v-p-fs .seg{display:grid;grid-template-columns:repeat(3,1fr);width:100%}
#v-p-fs .seg button{width:100%;text-align:center;justify-content:center;padding:0 4px;font-size:11.5px}
/* skor dimensi: bar dengan lebar tetap, sama untuk semua dimensi */
#v-p-fs .areabar{width:96px;height:4px;border-radius:2px;background:#E8E8E8;overflow:hidden;flex:0 0 auto}
#v-p-fs .areabar i{display:block;height:100%;background:#2E2E2E;border-radius:2px}
/* --- Revisi 16: penugasan tim, fokus Sales dan monokrom --- */
#m-assign .rolecard{padding:18px 20px;margin-bottom:0}
#m-assign .roledot{width:7px;height:7px;border-radius:50%;background:#171717}
#m-assign .rolecard-h b{font-family:var(--text);font-size:13px;font-weight:600}
#m-assign .person{padding:11px 0;gap:12px}
#m-assign .pname{font-size:13px}
#m-assign .prole{font-size:11.5px}
#m-assign .pav{width:30px;height:30px;font-size:11px;background:#F1F1F1;border-color:#E4E4E4;color:#6E6E6E}
#m-assign .pav.on{background:#171717;border-color:#171717;color:#fff}
#m-assign .tag.t-lead{background:#F1F1F1;color:#5A5A5A;height:22px;padding:0 9px;font-size:11px}
/* sakelar dirapikan: ukuran tetap, warna monokrom, gerak mengikuti token */
#m-assign .toggle{width:38px;height:22px;background:#E0E0E0;transition:background var(--dur-1) var(--ease)}
#m-assign .toggle::after{width:18px;height:18px;top:2px;left:2px;box-shadow:0 1px 2px rgba(0,0,0,.18);
transition:transform var(--dur-2) var(--ease)}
#m-assign .toggle.on{background:#171717}
#m-assign .toggle.on::after{transform:translateX(16px)}
/* --- Revisi 17: halaman 03A, unggah dulu lalu daftar dokumen --- */
/* tampilan awal: hanya area unggah */
#v-p-extract.empty .dbar,#v-p-extract.empty #docTable,#v-p-extract.empty .card-f{display:none}
#v-p-extract.empty .dropwrap{padding:var(--s7) var(--s6)}
#v-p-extract.empty .drop{padding:56px var(--s6)}
#v-p-extract.empty .drop h5{font-size:16px}
/* setelah ada dokumen: area unggah diringkas di atas daftar */
#v-p-extract .dropwrap{padding:16px 18px}
#v-p-extract .drop{padding:20px 18px;display:flex;align-items:center;gap:14px;text-align:left;flex-wrap:wrap}
#v-p-extract .drop .ic{font-size:18px;margin:0;opacity:.5}
#v-p-extract .drop h5{font-size:13px;font-weight:500;margin:0}
#v-p-extract .drop p{font-size:12px;margin:2px 0 0;max-width:62ch;color:var(--slate)}
#v-p-extract .drop .btn{margin-left:auto}
#v-p-extract.empty .drop{display:block;text-align:center}
#v-p-extract.empty .drop .ic{font-size:26px;margin-bottom:10px;opacity:.6}
#v-p-extract.empty .drop p{margin:8px auto 0}
#v-p-extract.empty .drop .btn{margin:16px auto 0;display:inline-flex}
/* baris aksi di atas tabel */
#v-p-extract .dbar{display:flex;align-items:center;gap:10px;padding:10px 18px;border-top:1px solid var(--rule);
border-bottom:1px solid var(--rule);background:#FAFAFA}
#v-p-extract .dbar .sp{flex:1}
#v-p-extract .iconbtn.danger{color:var(--alert-text)}
#v-p-extract .iconbtn.danger:hover{background:var(--alert-bg)}
/* ikon jenis file memakai bentuk yang sama dengan avatar di tabel lain */
.av.fileic{border-radius:6px;font-size:9px;font-weight:600;letter-spacing:.02em;
background:#F1F1F1;color:#6E6E6E;border:1px solid #E4E4E4}
.av.fileic.pdf{background:#F7EDED;color:#AF4B4B;border-color:#F0DCDC}
.av.fileic.xls{background:#EEF5F0;color:#589E67;border-color:#DCEAE1}
.vchip,.newchip,.supchip{display:inline-block;font-size:9.5px;
font-weight:600;letter-spacing:.04em;padding:2px 6px;border-radius:4px;vertical-align:middle;margin-left:2px}
.newchip{background:#171717;color:#fff}
.supchip{background:#F1F1F1;color:#8A8A8A;text-decoration:none}
#v-p-extract tr.sup .co{color:#9A9A9A;text-decoration:line-through;text-decoration-color:#C8C8C8}
#v-p-extract tr.sup .pj,#v-p-extract tr.sup .tiny{color:#AFAFAF}
#v-p-extract tr.sup .supchip{text-decoration:none}
/* --- Revisi 18: daftar dokumen 03A --- */
.supchip{display:none}
#docOldTable tr .co{color:#8E8E8E}
#docOldTable tr .pj,#docOldTable tr .tiny{color:#AFAFAF}
#docOldCard{margin-top:0}
/* --- Revisi 19: halaman hasil ekstraksi 03A --- */
#v-p-extract .card-h{background:#FAFAFA}
#v-p-extract .vfhead-p{font-size:13px;color:var(--slate);line-height:1.6;max-width:86ch;margin:0}
#v-p-extract .vfprog{display:flex;align-items:center;gap:14px;margin-top:14px}
#v-p-extract .vfbar{flex:0 0 220px;height:4px;border-radius:2px;background:#E8E8E8;overflow:hidden}
#v-p-extract .vfbar i{display:block;height:100%;background:#171717;transition:width var(--dur-2) var(--ease)}
/* kartu ringkasan: selebar halaman, satu baris per field */
#v-p-extract .vfsum .card-b{padding:8px 22px 14px}
#v-p-extract .sumrow{display:grid;grid-template-columns:210px minmax(0,1fr);gap:16px;align-items:baseline;
padding:9px 0;border-bottom:1px solid #F0F0F0}
#v-p-extract .sumrow:last-child{border-bottom:none}
#v-p-extract .sumrow .k{font-size:12px;color:var(--slate)}
#v-p-extract .sumrow .v{font-size:13px;line-height:1.6}
#v-p-extract .sumblk-h{display:flex;align-items:center;gap:10px}
/* butir verifikasi: bentuk dan tombol yang sama untuk semua */
#v-p-extract .vflist{padding:6px 22px 16px}
#v-p-extract .vfitem{display:flex;align-items:flex-start;gap:20px;padding:14px 0;border-bottom:1px solid #F0F0F0}
#v-p-extract .vfitem:last-child{border-bottom:none}
#v-p-extract .vfmain{flex:1;min-width:0}
#v-p-extract .vfk{font-size:13px;font-weight:500}
#v-p-extract .vfopts{margin:7px 0 0;padding-left:16px;list-style:none}
#v-p-extract .vfopts li{position:relative;font-size:12.5px;color:var(--slate);line-height:1.65;margin-top:4px}
#v-p-extract .vfopts li::before{content:"";position:absolute;left:-13px;top:8px;width:4px;height:4px;
border-radius:50%;border:1px solid #B4B4B4}
#v-p-extract .vfopts li b{color:var(--ink);font-weight:500}
#v-p-extract .vfopts li span{color:#9A9A9A}
#v-p-extract .vfval{font-size:12.5px;margin-top:8px;display:none}
#v-p-extract .vfitem.done .vfval{display:block}
#v-p-extract .vfitem.done .vfopts{opacity:.55}
#v-p-extract .vfdone{display:inline-block;background:#171717;color:#fff;font-size:9.5px;font-weight:600;
letter-spacing:.04em;padding:2px 6px;border-radius:4px;margin-right:6px;vertical-align:middle}
#v-p-extract .vfitem>.btn{flex:0 0 auto;min-width:124px;justify-content:center}
#m-resolve .match{cursor:pointer}
#m-resolve .match.on{border-color:#171717;background:#FAFAFA}
#m-resolve .match-t{font-size:13px}
#m-resolve .match-s{font-size:12px}
/* --- Revisi 20: dokumen nonaktif dan riwayat ekstraksi --- */
/* kolom centang lurus di semua tabel */
.ckcol{width:52px;text-align:center}
.tbl td.ckcol,.tbl th.ckcol{padding-left:0;padding-right:0}
.tbl .ckcol .cbx{margin:0 auto}
.cbx[disabled]{opacity:.35;cursor:not-allowed;background:#F4F4F4;border-color:#E4E4E4}
/* baris dokumen nonaktif */
.supchip{display:inline-block}
#v-p-extract tr.sup{background:#FCFCFC}
#v-p-extract tr.sup .co{color:#9A9A9A;text-decoration:none}
/* riwayat ekstraksi, satu garis waktu ke bawah */
.exhist{list-style:none;margin:0;padding:4px 0 0}
.exrow{position:relative;display:flex;gap:18px;padding:0 0 18px 0}
.exrow:last-child{padding-bottom:2px}
.exrow::before{content:"";position:absolute;left:97px;top:18px;bottom:0;width:1px;background:var(--rule)}
.exrow:last-child::before{display:none}
.exrow::after{content:"";position:absolute;left:93px;top:6px;width:7px;height:7px;border-radius:50%;
border:1.5px solid #B4B4B4;background:#FFF}
.exrow.now::after{background:#171717;border-color:#171717}
.extime{width:88px;flex:0 0 auto;text-align:right;font-size:11.5px;color:var(--slate);line-height:1.5}
.extime b{display:block;font-weight:500;color:var(--ink);font-size:12px}
.exbody{flex:1;min-width:0;padding-left:16px}
.ext{font-size:13px;font-weight:500}
.exfiles{font-size:12px;color:var(--slate);line-height:1.6;margin-top:3px}
.exmeta{display:flex;align-items:center;gap:12px;margin-top:6px;font-size:11.5px;color:#9A9A9A}
.exmeta .src{font-size:11.5px;color:#5A5A5A}
/* --- Revisi 21: contoh dokumen nonaktif, penanda BARU hijau --- */
.newchip{background:#EEF5F0;color:#3F7A52;border:0;outline:0}
#v-p-extract tr.sup td{background:#FAFAFA}
#v-p-extract tr.sup .fileic{opacity:.55}
#v-p-extract tr.sup .tag{background:#F1F1F1;color:#8E8E8E}
#v-p-extract tr.sup .tag .d{background:#B4B4B4}
.tbl thead th.ckcol{text-align:center}
.tbl thead .ckcol .cbx{margin:0 auto}
/* --- Revisi 22: 03A sebagai empat panel yang digeser --- */
.swipe{position:relative;overflow:hidden}
.swipe-nav{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.swipe-steps{display:flex;gap:6px;flex-wrap:wrap}
.swipe-steps button{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:6px;
font-size:12px;color:#727272;border:1px solid transparent;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.swipe-steps button b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
background:#EDEDED;color:#8A8A8A;font-size:10px;font-weight:600}
.swipe-steps button:hover{background:#F2F2F2;color:var(--ink)}
.swipe-steps button.on{background:#F1F1F1;color:var(--ink);font-weight:500}
.swipe-steps button.on b{background:#171717;color:#fff}
.swipe-arrow{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--rule);border-radius:6px;
color:var(--slate);font-size:14px;background:#FFF;flex:0 0 auto}
.swipe-arrow:hover{border-color:#B4B4B4;color:var(--ink)}
.swipe-arrow[disabled]{opacity:.35;cursor:not-allowed}
.swipe-track{display:flex;align-items:flex-start;
transition:transform var(--dur-3) var(--ease),height var(--dur-3) var(--ease);touch-action:pan-y}
.swipe-pane{flex:0 0 100%;min-width:0;padding-right:2px}
/* panel review: sumber di kiri, butir di kanan, tinggi sama */
.rvsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:16px;align-items:stretch}
.rvsplit>.card{margin-bottom:0;display:flex;flex-direction:column;min-width:0}
.rvsplit .card-b{flex:1;min-height:0;overflow:auto;max-height:560px}
.rvpick{height:30px;font-size:11.5px;max-width:280px;padding-right:30px}
.rvdoc{padding:18px 22px;font-size:12.5px;line-height:1.8;color:#3F3F3F}
.rvdoc p{margin:0 0 12px}
.rvdoc mark{background:#FFF3D6;color:inherit;padding:1px 2px;border-radius:3px}
.rvpage{font-size:10.5px;letter-spacing:.04em;color:#9A9A9A;text-transform:uppercase;margin:16px 0 8px}
.rvpage:first-child{margin-top:0}
.rvmiss{color:#AF4B4B}
.rvlist{padding:6px 18px 16px}
.rvgroup{font-size:11px;letter-spacing:.04em;color:#9A9A9A;text-transform:uppercase;margin:14px 0 2px}
.rvlist .vfitem{flex-direction:column;align-items:stretch;gap:10px}
.rvlist .vfitem>.btn{align-self:flex-start;min-width:0}
/* master data */
#mdTable td{vertical-align:top}
#mdTable tr.md-open td{background:#FFFCF5}
#v-p-extract .vfprog{display:flex;align-items:center;gap:14px;margin:12px 0 16px}
#v-p-extract .vfbar{flex:0 0 220px;height:4px;border-radius:2px;background:#E8E8E8;overflow:hidden}
#v-p-extract .vfbar i{display:block;height:100%;background:#171717;transition:width var(--dur-2) var(--ease)}
/* baris ringkasan: sumber di pojok kanan */
#v-p-extract .sumrow{grid-template-columns:210px minmax(0,1fr) 24px}
#v-p-extract .sumrow .srcico{justify-self:end}
@media(max-width:1100px){.rvsplit{grid-template-columns:minmax(0,1fr)}}
/* --- Revisi 23: proses extract --- */
.exload{position:absolute;inset:0;z-index:20;display:none;align-items:flex-start;justify-content:center;
padding-top:96px;background:rgba(255,255,255,.94);backdrop-filter:blur(2px)}
.exload.on{display:flex;animation:fade-in var(--dur-2) var(--ease-out)}
.exload-b{width:min(420px,84%);text-align:center}
.exload-bar{height:4px;border-radius:2px;background:#E8E8E8;overflow:hidden}
.exload-bar i{display:block;height:100%;width:0;background:#171717;border-radius:2px;
transition:width 420ms var(--ease)}
.exload-t{font-size:14px;font-weight:500;margin-top:16px}
.exload-s{font-size:12.5px;color:var(--slate);margin-top:6px;min-height:19px}