:root{
  --bg:#eef3fb; --surface:#fff; --surface-2:#f5f8fd;
  --ink:#16233a; --ink-2:#475569; --muted:#94a3b8;
  --line:#e5ebf3; --line-strong:#cdd8e7;
  --accent:#2563eb; --accent-d:#1d4ed8; --accent-soft:#eaf1ff;
  --warm:#1e40af; --warm-soft:#e6edff;
  --green:#0f9d6b; --green-soft:#e3f6ee;
  --danger:#dc2626; --danger-soft:#fde8e8;
  --radius:12px; --shadow:0 1px 2px rgba(20,40,80,.04),0 8px 24px rgba(20,40,80,.06);
  --sidebar:248px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:"Work Sans",system-ui,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.45}
[hidden]{display:none !important}

/* ============ LOGIN ============ */
.login-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  background:linear-gradient(160deg,#13294d,#0f1d33 70%);padding:30px}
.login-card{width:100%;max-width:440px;background:var(--surface);border-radius:18px;padding:30px 30px 24px;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.login-brand{display:flex;align-items:center;gap:13px;margin-bottom:6px}
.sb-logo{width:38px;height:38px;border-radius:10px;background:var(--accent);display:grid;place-items:center;font-weight:700;color:#fff;font-size:18px;flex:none;box-shadow:0 4px 14px rgba(37,99,235,.45)}
.sb-logo.lg{width:46px;height:46px;border-radius:12px;font-size:22px}
.login-brand b{font-size:18px;font-weight:700;letter-spacing:-.01em;display:block;line-height:1.15}
.login-brand small{color:var(--muted);font-size:11.5px;font-weight:500}
.login-hint{color:var(--ink-2);font-size:13px;margin:14px 0 18px}
.lbl{font-size:12px;font-weight:600;color:var(--ink-2);display:block;margin-bottom:7px;margin-top:4px}
.login-div{display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:var(--muted);font-size:11.5px;font-weight:600}
.login-div::before,.login-div::after{content:"";flex:1;height:1px;background:var(--line)}
.role-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.role-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  border:1.5px solid var(--line-strong);background:var(--surface-2);border-radius:12px;padding:11px 12px;font-family:inherit;transition:.15s}
.role-opt:hover{border-color:var(--muted)}
.role-opt.active{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px var(--accent-soft)}
.ro-ic{width:38px;height:38px;border-radius:10px;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.ro-ic.alt{background:#0f9d6b}
.ro-t{display:flex;flex-direction:column;min-width:0}
.ro-t b{font-size:14px;font-weight:600}
.ro-t small{font-size:11.5px;color:var(--muted)}
.ro-uc{margin-left:auto;font-family:"Space Mono";font-size:10px;color:var(--accent);background:#fff;border:1px solid var(--line);padding:2px 7px;border-radius:20px;white-space:nowrap}
.login-card input{width:100%;height:44px;border:1.5px solid var(--line-strong);border-radius:10px;background:var(--surface-2);padding:0 14px;font-family:inherit;font-size:14px;color:var(--ink);outline:none}
.login-card input:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3.5px var(--accent-soft)}
.login-foot{font-size:11px;color:var(--muted);text-align:center;margin:14px 0 0}
.login-note{color:#7f93b3;font-size:12px;max-width:420px;text-align:center}

/* ============ APP SHELL ============ */
.app{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}
.sidebar{background:#0f1d33;color:#cdd8ea;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sb-brand{display:flex;align-items:center;gap:11px;padding:20px 20px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.sb-brand b{color:#fff;font-size:15px;font-weight:600;display:block;line-height:1.2}
.sb-brand small{color:#7f93b3;font-size:11px;font-weight:500}
.sb-sec{padding:18px 14px 6px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#5e7299}
.sb-nav{display:flex;flex-direction:column;gap:2px;padding:0 10px}
.sb-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;color:#aebbd2;font-size:13.5px;font-weight:500;cursor:pointer;background:none;border:none;width:100%;text-align:left;font-family:inherit;transition:.15s}
.sb-item:hover{background:rgba(255,255,255,.05);color:#fff}
.sb-item.active{background:var(--accent);color:#fff;font-weight:600;box-shadow:0 4px 12px rgba(37,99,235,.35)}
.sb-item .ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8}
.sb-item .ct{margin-left:auto;font-family:"Space Mono";font-size:10.5px;background:rgba(255,255,255,.12);padding:1px 7px;border-radius:20px}
.sb-foot{margin-top:auto;padding:14px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:11px}
.sb-ava{width:34px;height:34px;border-radius:9px;background:#26477e;display:grid;place-items:center;font-weight:700;font-size:13px;color:#cfe0ff;flex:none}
.sb-foot b{color:#fff;font-size:12.5px;display:block;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-foot small{color:#7f93b3;font-size:11px}
.sb-logout{margin-left:auto;background:none;border:none;color:#7f93b3;cursor:pointer;padding:6px;border-radius:7px;display:grid;place-items:center}
.sb-logout:hover{background:rgba(255,255,255,.08);color:#fff}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:13px 30px}
.crumbs{font-size:14px;color:var(--muted);font-weight:500}
.crumbs b{color:var(--ink);font-weight:600}
.crumbs .sep{margin:0 4px;color:var(--line-strong)}
.topbar h1{font-size:16px;margin:0;font-weight:600;letter-spacing:-.01em}
.role{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);padding:6px 12px;border-radius:20px}
.role .dot{width:7px;height:7px;border-radius:50%;background:var(--green)}
.period{font-size:12px;font-weight:600;color:var(--accent);background:var(--accent-soft);padding:6px 12px;border-radius:20px}

.content{padding:24px 30px 70px;max-width:1340px;width:100%;margin-left:auto;margin-right:auto}
.vhead{display:flex;align-items:flex-end;gap:16px;margin-bottom:20px}
.vhead h2{margin:0;font-size:22px;letter-spacing:-.02em;font-weight:700}
.vhead p{margin:5px 0 0;color:var(--ink-2);font-size:13.5px;max-width:none}
.vhead>div{min-width:0}
.vhead .auto{margin-left:auto;width:auto}
.link-back{background:none;border:none;color:var(--accent);font-family:inherit;font-weight:600;font-size:12.5px;cursor:pointer;display:inline-flex;gap:6px;align-items:center;padding:0;margin-bottom:8px}

/* ============ CARDS / FORM ============ */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:1fr 348px;gap:22px;align-items:start}
.form-col{display:flex;flex-direction:column;gap:18px;min-width:0}
.card-head{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line)}
.card-head .n{width:26px;height:26px;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-family:"Space Mono";font-weight:700;font-size:12px;flex:none}
.card-head h3{margin:0;font-size:14.5px;font-weight:600}
.card-head p{margin:1px 0 0;font-size:11.5px;color:var(--muted)}
.fuzzy-tag{margin-left:auto;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);background:var(--accent-soft);padding:3px 9px;border-radius:6px;display:flex;align-items:center;gap:5px}
.fuzzy-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.card-body{padding:20px 22px}
.grid{display:grid;gap:16px 18px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:12.5px;font-weight:600;color:var(--ink-2);display:flex;gap:5px;align-items:center}
.req{color:var(--danger);font-weight:700}
.field .hint{font-size:11px;color:var(--muted)}
.control{position:relative}
input,select{width:100%;height:42px;border:1.5px solid var(--line-strong);border-radius:9px;background:var(--surface-2);padding:0 13px;font-family:inherit;font-size:13.5px;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
input::placeholder{color:var(--muted)}
input:focus,select:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3.5px var(--accent-soft)}
select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px}
.control.sel::after{content:"";position:absolute;right:15px;top:50%;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.control .tail{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-family:"Space Mono";font-size:11.5px;color:var(--muted);pointer-events:none}
.field.invalid input,.field.invalid select{border-color:var(--danger);background:var(--danger-soft)}
.field .err-msg{display:none;font-size:11px;color:var(--danger);font-weight:600}
.field.invalid .err-msg{display:block}

/* ============ SUMMARY PANEL ============ */
.summary-col{display:flex;flex-direction:column;gap:16px;position:sticky;top:80px}
.sum-card{padding:18px 20px}
.sum-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:0 0 14px;display:flex;align-items:center;gap:8px}
.comp-row{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.bar{flex:1;height:8px;border-radius:6px;background:#e7eef7;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--accent);border-radius:6px;transition:width .25s}
.comp-pct{font-family:"Space Mono";font-weight:700;font-size:13px}
.comp-meta{font-size:11.5px;color:var(--muted)}
.crisp{display:flex;flex-direction:column;gap:2px;padding:13px 0;border-bottom:1px dashed var(--line)}
.crisp:last-child{border-bottom:none;padding-bottom:0}
.crisp .top{display:flex;align-items:baseline;gap:8px}
.crisp .name{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.crisp .val{margin-left:auto;font-family:"Space Mono";font-weight:700;font-size:14px;color:var(--ink)}
.crisp .cls{font-size:11px;color:var(--accent);font-weight:600}
.crisp .skbar{height:6px;border-radius:5px;background:#e7eef7;overflow:hidden;margin-top:7px}
.crisp .skbar>i{display:block;height:100%;background:var(--accent);border-radius:5px;transition:width .25s}
.est-note{font-size:11px;color:var(--muted);margin:12px 0 0;line-height:1.4}
.res-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.res-skor{font-family:"Space Mono";font-weight:700;font-size:30px;letter-spacing:-.02em;line-height:1}
.res-meta{display:flex;flex-direction:column;gap:5px}
.res-kelas{font-size:12px;font-weight:600;color:var(--ink-2)}

/* ============ BUTTONS ============ */
.btn{appearance:none;border:1.5px solid var(--line-strong);background:var(--surface);cursor:pointer;font-family:inherit;font-weight:600;font-size:13.5px;color:var(--ink);padding:11px 16px;border-radius:9px;display:inline-flex;gap:9px;align-items:center;justify-content:center;transition:.15s}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.primary:hover{background:var(--accent-d);border-color:var(--accent-d)}
.btn.primary:disabled,.btn:disabled{background:#aebfdc;border-color:#aebfdc;color:#fff;cursor:not-allowed}
.btn.ghost{background:none;border-color:transparent;color:var(--accent)}
.btn.ghost:hover{background:var(--accent-soft);border-color:transparent}
.btn.sm{padding:7px 12px;font-size:12px}
.btn.danger{color:var(--danger);border-color:transparent}
.btn.danger:hover{background:var(--danger-soft)}
.action-bar{display:flex;flex-direction:column;gap:10px}

/* ============ TABLE ============ */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:16px 18px;border-bottom:1px solid var(--line)}
.search{flex:1;min-width:200px;max-width:360px;position:relative;display:flex;align-items:center}
.search svg{position:absolute;left:13px;color:var(--muted)}
.search input{padding-left:36px;height:40px}
.filter{width:auto;min-width:150px}
.filter select{height:40px}
.table-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;padding:12px 14px;border-bottom:1.5px solid var(--line-strong);white-space:nowrap}
.tbl td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl tr.exp-row td{background:var(--surface-2)}
.person b{font-weight:600;font-size:13px;display:block}
.person small{color:var(--muted);font-size:11px;font-family:"Space Mono"}
.mono{font-family:"Space Mono";font-size:11.5px;color:var(--ink-2)}
.rank-n{font-family:"Space Mono";font-weight:700;font-size:13px;text-align:center;color:var(--ink-2)}
.gauge{display:flex;align-items:center;gap:9px}
.scorebar{height:8px;border-radius:6px;background:#e7eef7;overflow:hidden;flex:1;min-width:60px}
.scorebar>i{display:block;height:100%;border-radius:6px}
.gv{font-family:"Space Mono";font-weight:700;font-size:12px;width:34px}
.row-act{display:flex;gap:4px;justify-content:flex-end}
.icon-btn{width:30px;height:30px;border-radius:7px;border:1px solid var(--line);background:var(--surface);cursor:pointer;display:grid;place-items:center;color:var(--ink-2)}
.icon-btn:hover{border-color:var(--muted);color:var(--ink)}
.icon-btn.del:hover{color:var(--danger);border-color:var(--danger)}
.empty{padding:50px 20px;text-align:center;color:var(--muted);font-size:13.5px}
.link-btn{background:none;border:none;color:var(--accent);font-family:inherit;font-weight:600;font-size:12px;cursor:pointer;padding:6px 8px;border-radius:6px}
.link-btn:hover{background:var(--accent-soft)}

.badge{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap;display:inline-block}
.b-warm{background:var(--warm-soft);color:var(--warm)}
.b-blue{background:var(--accent-soft);color:var(--accent)}
.b-grey{background:#eef2f8;color:var(--ink-2)}
.b-green{background:var(--green-soft);color:var(--green)}

/* stat cards */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.stat-card .v{font-family:"Space Mono";font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1}
.stat-card .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-top:6px}
.stat-card.accent .v{color:var(--accent)}
.stat-card.warm .v{color:var(--warm)}

/* ============ RANKING ============ */
.rank-grid{display:grid;grid-template-columns:1fr 280px;gap:20px;align-items:start}
.rank-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:80px}
.desil-chart{display:flex;align-items:flex-end;gap:6px;height:96px}
.desil-chart .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.desil-chart .col i{width:100%;border-radius:5px 5px 2px 2px;background:var(--line-strong);min-height:3px}
.desil-chart .col.hot i{background:var(--warm)}
.desil-chart .col span{font-family:"Space Mono";font-size:9px;color:var(--muted)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--ink-2);font-weight:500;margin-top:13px}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.stat-line{display:flex;justify-content:space-between;font-size:12.5px;padding:7px 0;border-bottom:1px dashed var(--line)}
.stat-line:last-child{border-bottom:none}
.stat-line span{color:var(--ink-2)}
.stat-line b{font-family:"Space Mono"}
.fz{display:flex;flex-direction:column;gap:8px}
.fz-row{display:grid;grid-template-columns:100px 1fr 120px;gap:9px;align-items:center;font-size:11.5px}
.fz-row .lab{color:var(--ink-2);font-weight:600}
.fz-track{height:7px;border-radius:5px;background:#dbe5f3;overflow:hidden}
.fz-track>i{display:block;height:100%;background:var(--accent)}
.fz-row .val{font-family:"Space Mono";font-size:10.5px;color:var(--muted);text-align:right}
.xai{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:6px 0}
.xai h4{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 12px}
.narasi{font-size:12.5px;color:var(--ink-2);line-height:1.55;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:12px 14px}
.narasi b{color:var(--ink)}

/* ============ LAPORAN ============ */
.lap-grid{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
.lap-config{position:sticky;top:80px}
.approve-list{display:flex;flex-direction:column;gap:2px;max-height:340px;overflow:auto}
.approve-item{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:8px;font-size:12.5px;cursor:pointer}
.approve-item:hover{background:var(--surface-2)}
.approve-item .ck{width:18px;height:18px;border-radius:5px;border:1.6px solid var(--line-strong);flex:none;position:relative}
.approve-item.on .ck{background:var(--accent);border-color:var(--accent)}
.approve-item.on .ck::after{content:"";position:absolute;left:5px;top:1.5px;width:5px;height:9px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(42deg)}
.approve-item .ai-name{flex:1;min-width:0}
.approve-item .ai-name b{font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.approve-item .ai-name small{color:var(--muted);font-size:10.5px;font-family:"Space Mono"}
.doc{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 28px rgba(20,40,80,.10);padding:38px 42px;font-size:12px;color:var(--ink)}
.doc .kop{display:flex;gap:16px;align-items:center;border-bottom:2.5px solid var(--ink);padding-bottom:16px;margin-bottom:18px}
.doc .seal{width:54px;height:54px;border-radius:50%;border:1.6px dashed var(--line-strong);display:grid;place-items:center;font-family:"Space Mono";font-size:8px;color:var(--muted);text-align:center;flex:none}
.doc h3{margin:0;font-size:15px;letter-spacing:.01em}
.doc .meta-row{display:flex;gap:22px;font-size:11px;margin-bottom:14px;color:var(--ink-2);flex-wrap:wrap}
.doc table{width:100%;border-collapse:collapse;font-size:11px;margin-top:4px}
.doc th,.doc td{border:1px solid var(--line-strong);padding:7px 9px;text-align:left}
.doc th{background:var(--surface-2);font-size:10px;text-transform:uppercase;letter-spacing:.04em}
.doc tfoot td{font-weight:700;background:var(--surface-2)}
.doc .sign{display:flex;justify-content:flex-end;margin-top:30px}
.doc .sign .box{text-align:center;font-size:11px;color:var(--ink-2)}
.doc .sign .line{height:48px}
.doc-empty{padding:70px 20px;text-align:center;color:var(--muted)}

#json_wrap{margin-top:4px}
#json_preview{font-family:"Space Mono";font-size:10px;line-height:1.5;background:#0f1d33;color:#c9d6ee;border-radius:9px;padding:13px;max-height:240px;overflow:auto;white-space:pre;margin:0}

/* ============ TOAST ============ */
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,140%);background:var(--ink);color:#fff;padding:12px 20px;border-radius:10px;font-size:13px;font-weight:500;box-shadow:0 10px 30px rgba(0,0,0,.25);z-index:60;transition:transform .3s}
.toast.show{transform:translate(-50%,0)}
.toast.ok{background:#0f9d6b}.toast.err{background:var(--danger)}

@media (max-width:1120px){
  .form-grid,.rank-grid,.lap-grid{grid-template-columns:1fr}
  .summary-col,.rank-side,.lap-config{position:static}
  .stat-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .app{grid-template-columns:1fr}
  .sidebar{display:none}
}

/* ============ SIDEBAR COLLAPSE ============ */
.sb-brand-txt{min-width:0;flex:1}
.sb-toggle{background:none;border:none;color:#7f93b3;cursor:pointer;padding:6px;border-radius:7px;display:grid;place-items:center;flex:none;transition:transform .2s}
.sb-toggle:hover{background:rgba(255,255,255,.08);color:#fff}
.sb-item .lbl-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app.sb-collapsed{grid-template-columns:72px 1fr}
.app.sb-collapsed .sb-brand-txt,
.app.sb-collapsed .sb-sec,
.app.sb-collapsed .sb-item .lbl-t,
.app.sb-collapsed .sb-foot b,
.app.sb-collapsed .sb-foot small{display:none}
.app.sb-collapsed .sb-brand{justify-content:center;padding:18px 0;gap:0;flex-wrap:wrap}
.app.sb-collapsed .sb-toggle{transform:rotate(180deg)}
.app.sb-collapsed .sb-nav{padding:0 12px}
.app.sb-collapsed .sb-item{justify-content:center;padding:11px 0}
.app.sb-collapsed .sb-foot{justify-content:center;padding:14px 0}
.app.sb-collapsed .sb-logout{margin-left:0}

/* ============ STATUS DROPDOWN (daftar) ============ */
.control.sel.mini select{height:32px;font-size:11.5px;font-weight:600;padding:0 28px 0 11px;border-radius:7px}
.control.sel.mini::after{right:11px;width:6px;height:6px}
.control.sel.mini.st-grey select{color:var(--ink-2);background:#eef2f8;border-color:var(--line-strong)}
.control.sel.mini.st-blue select{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-soft)}
.control.sel.mini.st-green select{color:var(--green);background:var(--green-soft);border-color:var(--green-soft)}

/* ============ LAPORAN RANKED LIST (read-only, top-N) ============ */
.approve-item .rk{width:22px;height:22px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;font-family:"Space Mono";font-size:11px;font-weight:700;color:var(--ink-2);flex:none}
.approve-item.on{background:var(--warm-soft)}
.approve-item.on .rk{background:var(--warm);color:#fff;border-color:var(--warm)}

/* ============ PRINT - only the official document ============ */
@media print{
  @page{margin:12mm}
  body{background:#fff}
  .sidebar,.topbar,.vhead,.lap-config,.toast,.login-screen,#lap-stats{display:none !important}
  .content.view{display:none !important}
  #view-laporan{display:block !important}
  .app,.main,.lap-grid{display:block !important;min-height:0}
  #view-laporan.content{padding:0 !important;max-width:none !important;margin:0 !important}
  .doc{border:none !important;box-shadow:none !important;border-radius:0 !important;padding:0 !important}
}