:root{--navy:#073B7A;--blue:#0057B8;--blue2:#0A4FA3;--cyan:#2B7FD3;--yellow:#F4C300;--yellow2:#FFD84A;--black:#111111;--page:#F3EFD9;--text:#161616;--muted:#5F6268;--border:#C9B85C;--soft:#FFF3B5;--white:#FFFDF3;--success:#16834a;--warning:#9A6500;--danger:#B42318;--shadow:0 12px 30px rgba(17,17,17,.12)}
*{box-sizing:border-box}body{margin:0;font-family:"Segoe UI",Arial,sans-serif;background:var(--page);color:var(--text)}button,input,select,textarea{font:inherit}a{color:inherit;text-decoration:none}
.topbar{min-height:70px;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:12px}.brandmark{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,var(--navy),var(--blue2));color:#fff;font-weight:900}.brand h1{margin:0;color:var(--navy);font-size:18px}.brand p{margin:3px 0 0;color:var(--muted);font-size:11px}
.shell{width:min(1450px,96%);margin:22px auto 60px;display:grid;grid-template-columns:280px minmax(0,1fr);gap:20px;align-items:start}
.side{position:sticky;top:92px;display:grid;gap:12px}.panel,.card{background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow)}.panel{padding:17px}.panel h3{margin:0;color:var(--navy);font-size:15px}.small{color:var(--muted);font-size:10px;line-height:1.55}
.nav{display:grid;gap:7px}.nav a,.nav button{display:block;width:100%;border:0;text-align:left;padding:10px 11px;border-radius:10px;background:#f7fafc;color:#42566a;font-size:10px;font-weight:800;cursor:pointer}.nav a.active{background:var(--soft);color:var(--navy)}
.main{display:grid;gap:17px}.hero{padding:23px 25px;color:#fff;border-radius:19px;background:radial-gradient(circle at 88% 12%,rgba(56,189,248,.28),transparent 28%),linear-gradient(135deg,var(--navy),#14598f);box-shadow:var(--shadow)}.hero h2{margin:0;font-size:27px}.hero p{max-width:900px;margin:9px 0 0;color:#d4e8f6;font-size:12px;line-height:1.65}
.grid{display:grid;gap:12px}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{padding:15px}.stat span{font-size:9px;color:var(--muted);font-weight:800}.stat strong{display:block;margin-top:7px;color:var(--navy);font-size:25px}
.field{display:grid;gap:6px}.field label{font-size:9px;color:#42566a;font-weight:900}.field input,.field select,.field textarea{width:100%;border:1px solid var(--border);border-radius:9px;background:#fff;outline:none}.field input,.field select{height:40px;padding:0 10px}.field textarea{min-height:90px;padding:10px;resize:vertical}
.btn{min-height:40px;border:0;border-radius:10px;padding:0 13px;cursor:pointer;font-size:10px;font-weight:900}.primary{color:#fff;background:linear-gradient(135deg,var(--navy),var(--blue2))}.soft{color:var(--navy);background:var(--soft);border:1px solid #c7dceb}.success{color:#fff;background:var(--success)}.danger{color:var(--danger);background:#fff0ef}
.notice{padding:12px 14px;border:1px solid #c9deed;border-radius:12px;background:#f0f8fd;color:#315a76;font-size:10px;line-height:1.6}.warn{background:#fff5df;border-color:#eed49b;color:#765015}
.item{overflow:hidden}.itemhead{padding:13px 15px;background:#f8fafc;border-bottom:1px solid #e7edf2;display:flex;justify-content:space-between;gap:12px}.itemhead h4{margin:3px 0 0;color:#30485c;font-size:12px}.itemhead p{margin:4px 0 0;color:var(--muted);font-size:9px;line-height:1.45}.code{color:var(--blue);font-size:9px;font-weight:900}.itembody{padding:14px 15px}
.evidence{padding:11px;border:1px solid #dce6ed;border-radius:11px;background:#fbfdfe;margin-top:8px}.evtitle{display:flex;justify-content:space-between;gap:10px;align-items:start}.evtitle strong{font-size:10px;color:#344c5f}.badge{display:inline-block;padding:5px 8px;border-radius:999px;font-size:8px;font-weight:900}.ok{color:#11683b;background:#e8f8ee}.wait{color:#8a5805;background:#fff3d8}.bad{color:#a1281f;background:#fff0ef}.info{color:var(--blue);background:var(--soft)}
.evgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-top:9px}.actions{display:flex;gap:8px;flex-wrap:wrap}.mt{margin-top:14px}
.progress{height:8px;border-radius:999px;background:#e7edf2;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:999px}
.tablewrap{overflow:auto;border:1px solid var(--border);border-radius:12px}table{width:100%;border-collapse:collapse;min-width:760px}th{padding:9px;background:#eef5f9;color:#3d586b;font-size:8px;text-align:left}td{padding:9px;border-top:1px solid #e6edf2;font-size:9px;vertical-align:top}
.account{display:flex;align-items:center;gap:8px}.pill{padding:7px 9px;border-radius:999px;color:var(--blue);background:var(--soft);font-size:9px;font-weight:900}
.login-grid{width:min(1120px,92%);min-height:100vh;margin:auto;display:grid;grid-template-columns:1fr 430px;gap:48px;align-items:center}.intro h1{margin:18px 0 0;color:var(--navy);font-size:48px;line-height:1.07}.intro h1 span{color:var(--blue2)}.intro p{font-size:14px;color:var(--muted);line-height:1.7}.login-card{padding:30px;border:1px solid var(--border);border-radius:24px;background:#fff;box-shadow:var(--shadow)}.login-card h2{margin:0;color:var(--navy)}.rolecards{display:grid;gap:8px}.rolecard{padding:12px;border:1px solid #dce6ed;border-radius:12px;background:#fbfdfe;cursor:pointer}.rolecard:hover{border-color:#91bfe1;background:#f2f9fd}.rolecard strong{display:block;color:var(--navy);font-size:11px}.rolecard span{display:block;margin-top:3px;color:var(--muted);font-size:9px}
@media(max-width:900px){.shell{grid-template-columns:1fr}.side{position:static}.g4,.g3,.g2{grid-template-columns:1fr 1fr}.evgrid{grid-template-columns:1fr}.login-grid{grid-template-columns:1fr;padding:35px 0}.intro h1{font-size:38px}}
@media(max-width:600px){.g4,.g3,.g2{grid-template-columns:1fr}.topbar{padding:10px 12px}.shell{width:92%}.hero h2{font-size:22px}.login-grid{width:90%}}

/* Auditee complete workspace */
.workspace-list{display:grid;gap:10px}
.workspace-card{padding:14px;border:1px solid #dce6ed;border-radius:14px;background:#fbfdfe}
.workspace-card h4{margin:0;color:var(--navy);font-size:12px}.workspace-card p{margin:5px 0 0;color:var(--muted);font-size:9px;line-height:1.55}
.workspace-card .actions{margin-top:11px}
.timeline{display:grid;gap:8px}.timeline-row{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:start;padding:11px;border:1px solid #e0e8ee;border-radius:12px;background:#fff}
.timeline-no{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--soft);color:var(--blue);font-size:9px;font-weight:900}
.timeline-row strong{display:block;color:#334d60;font-size:10px}.timeline-row p{margin:4px 0 0;color:var(--muted);font-size:8.5px;line-height:1.5}
.approval-box{padding:14px;border:1px solid #bcdaca;border-radius:13px;background:#f4fbf6}
.approval-box.pending{border-color:#edd39b;background:#fff8e9}
.approval-title{display:flex;align-items:start;justify-content:space-between;gap:10px}
.approval-title strong{color:#225a3b;font-size:11px}.approval-box.pending .approval-title strong{color:#765015}
.approval-meta{margin-top:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.approval-meta div{padding:8px;border-radius:9px;background:rgba(255,255,255,.75);font-size:8.5px;color:#53697a}
.approval-meta b{display:block;margin-bottom:2px;color:#334d60}
.checkline{display:flex;align-items:flex-start;gap:8px;padding:11px;border:1px solid #dce5ec;border-radius:11px;background:#fff;color:#40586a;font-size:9px;line-height:1.55}
.checkline input{margin-top:2px}
.readonly-block{padding:11px;border:1px solid #dce6ed;border-radius:11px;background:#f8fbfd}
.readonly-block label{display:block;color:#6e8190;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.35px}
.readonly-block p{margin:5px 0 0;color:#344f62;font-size:9px;line-height:1.55;white-space:pre-wrap}
.finding-selector{display:grid;gap:7px}.finding-selector button{width:100%;border:1px solid #dce5ec;border-radius:10px;padding:10px;text-align:left;background:#f9fbfc;cursor:pointer}
.finding-selector button.active{border-color:#8fbfe2;background:#eef7fd}.finding-selector strong{display:block;color:#334d60;font-size:10px}.finding-selector span{display:block;margin-top:3px;color:#7a8b98;font-size:8px}
.rtl-table{display:grid;gap:8px}.rtl-row{display:grid;grid-template-columns:34px minmax(0,1.2fr) minmax(0,1fr) minmax(130px,.6fr) 135px 135px minmax(0,.9fr);gap:7px;align-items:start;padding:9px;border:1px solid #e0e8ee;border-radius:11px;background:#fbfdfe}
.rtl-row .rowno{width:30px;height:38px;display:grid;place-items:center;border-radius:8px;background:var(--soft);color:var(--blue);font-size:9px;font-weight:900}
.rtl-row input,.rtl-row textarea{width:100%;border:1px solid var(--border);border-radius:8px;padding:8px;font-size:9px;background:#fff}
.rtl-row input{height:38px}.rtl-row textarea{min-height:58px;resize:vertical}
.section-title{padding:10px 12px;border-radius:11px;background:#edf5fb;color:var(--navy);font-size:10px;font-weight:900;margin-bottom:10px}
.locked{opacity:.62;pointer-events:none}
.kpi-label{font-size:8px;color:var(--muted);font-weight:900;text-transform:uppercase}
.kpi-value{margin-top:5px;color:var(--navy);font-size:18px;font-weight:900}
@media(max-width:1180px){.rtl-row{grid-template-columns:34px 1fr 1fr}.rtl-row>*:nth-child(n+4){grid-column:auto}.approval-meta{grid-template-columns:1fr}}
@media(max-width:700px){.rtl-row{grid-template-columns:1fr}.rtl-row .rowno{width:100%}.timeline-row{grid-template-columns:32px 1fr}.timeline-row>.badge{grid-column:2}}


/* =========================================================
   TEMA UNRIKA — BIRU, KUNING, HITAM
   ========================================================= */
body{
  background:
    radial-gradient(circle at 88% 8%,rgba(244,195,0,.16),transparent 24%),
    linear-gradient(135deg,#f5f0d8,#efe7bd 48%,#f7f3df);
  color:var(--text);
}
.topbar{
  background:linear-gradient(90deg,#0b0b0b,#161616);
  border-bottom:4px solid var(--yellow);
  box-shadow:0 5px 18px rgba(0,0,0,.16);
}
.brandmark{
  background:linear-gradient(145deg,var(--blue),var(--navy));
  color:var(--yellow);
  border:2px solid var(--yellow);
  box-shadow:0 7px 18px rgba(0,0,0,.28);
}
.brand h1{color:var(--yellow)}
.brand p{color:#f2f2f2}
.account .pill{
  color:var(--black);
  background:var(--yellow);
  border:1px solid #dbac00;
}
.topbar .soft{
  color:var(--yellow);
  background:#202020;
  border:1px solid var(--yellow);
}
.panel{
  background:linear-gradient(180deg,#111,#1c1c1c);
  border-color:#2d2d2d;
  color:#fff;
}
.panel h3{color:var(--yellow)}
.panel .small{color:#d7d7d7}
.nav a,.nav button{
  background:#252525;
  color:#f5f5f5;
  border-left:4px solid transparent;
}
.nav a:hover,.nav button:hover{
  background:#303030;
  color:var(--yellow);
  border-left-color:var(--yellow);
}
.nav a.active{
  background:var(--yellow);
  color:var(--black);
  border-left-color:var(--blue);
}
.hero{
  position:relative;
  overflow:hidden;
  color:#fff;
  border:2px solid var(--yellow);
  background:
    radial-gradient(circle at 92% 8%,rgba(244,195,0,.28),transparent 26%),
    linear-gradient(135deg,#062d5e,var(--blue));
  box-shadow:0 14px 32px rgba(7,59,122,.22);
}
.hero:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:6px;
  background:var(--yellow);
}
.hero h2{color:#fff}
.hero p{color:#f7eebd}
.card{
  background:var(--white);
  border-color:#d6c45f;
  box-shadow:0 10px 25px rgba(17,17,17,.08);
}
.stat{
  border-top:5px solid var(--yellow);
}
.stat span{color:#5a5a5a}
.stat strong{color:var(--blue)}
.itemhead{
  background:linear-gradient(90deg,#fff6c9,#fffbea);
  border-bottom:1px solid #d9c45a;
}
.itemhead h4{color:var(--black)}
.itemhead p{color:#5b5b5b}
.code{color:var(--blue)}
.evidence,.workspace-card,.readonly-block{
  background:#fffbea;
  border-color:#ddcf86;
}
.field label{color:#252525}
.field input,.field select,.field textarea{
  background:#fff;
  color:#151515;
  border-color:#b9a94c;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(0,87,184,.12);
}
.btn.primary,.primary{
  color:var(--black);
  background:linear-gradient(135deg,var(--yellow),var(--yellow2));
  border:1px solid #d3a900;
  box-shadow:0 6px 14px rgba(120,92,0,.18);
}
.btn.primary:hover,.primary:hover{
  filter:brightness(.97);
}
.btn.soft,.soft{
  color:var(--yellow);
  background:var(--black);
  border:1px solid var(--yellow);
}
.notice{
  color:#151515;
  background:#fff3b5;
  border-color:#d6b936;
}
.warn{
  color:#171717;
  background:#ffe38a;
  border-color:#c99a00;
}
.info{
  color:var(--blue);
  background:#fff1a8;
}
.progress{
  background:#ddd4a5;
}
.progress span{
  background:linear-gradient(90deg,var(--blue),var(--yellow));
}
.tablewrap{
  border-color:#c8b552;
  background:#fffdf3;
}
th{
  background:var(--blue);
  color:var(--yellow);
  border-color:#0b4d90;
}
td{
  border-top-color:#ddd4a1;
  background:#fffdf3;
}
.approval-box{
  border-color:#c3a817;
  background:#fff8cf;
}
.approval-box.pending{
  border-color:#d1a700;
  background:#fff0a0;
}
.section-title{
  background:var(--black);
  color:var(--yellow);
  border-left:6px solid var(--blue);
}
.timeline-row{
  border-color:#d4c46e;
  background:#fffdf3;
}
.timeline-no{
  background:var(--yellow);
  color:var(--black);
}
.badge.info{
  color:var(--blue);
  background:#fff0a5;
}


/* Footer identitas pengembang */
.avc-footer{
  margin-top:28px;
  padding:18px 22px;
  text-align:center;
  font-size:12px;
  line-height:1.65;
  color:#5f6f7e;
  background:#fffdf3;
  border-top:1px solid #d8c66a;
}
.avc-footer strong{color:#073b7a}
.avc-footer .developer{font-weight:700;color:#4a4a4a}
@media print{
  .topbar,.side,.actions,.no-print,.avc-footer{display:none!important}
  .shell{display:block!important}.main{max-width:none!important;width:100%!important;padding:0!important}
  body{background:#fff!important;color:#111!important}
  .card,.hero{box-shadow:none!important;break-inside:avoid}
}