:root{
  --navy-950:#0b1220;
  --navy-900:#111c33;
  --navy-800:#182743;
  --navy-700:#253858;
  --indigo:#4f46e5;
  --indigo-2:#6366f1;
  --violet:#7c3aed;
  --blue:#2563eb;
  --cyan:#0891b2;
  --coral:#f05268;
  --orange:#f97345;
  --amber:#d99a18;
  --pink:#db3f83;
  --green:#15966a;
  --bg:#f4f6fa;
  --surface:#ffffff;
  --surface-soft:#f8fafc;
  --surface-tint:#f6f7ff;
  --text:#17233b;
  --muted:#66758d;
  --border:#dde3ec;
  --border-strong:#ccd5e2;
  --success:#137a59;
  --success-bg:#eaf8f2;
  --warning:#8a5d10;
  --warning-bg:#fff7df;
  --danger:#b9364e;
  --danger-bg:#fff0f3;
  --info:#315f9e;
  --info-bg:#eef5ff;
  --shadow-xs:0 1px 2px rgba(15,23,42,.04);
  --shadow-sm:0 6px 18px rgba(15,23,42,.055);
  --shadow-md:0 14px 34px rgba(15,23,42,.08);
  --radius:16px;
  --radius-sm:10px;
  --sidebar:264px;
  --topbar:68px;
  --content-max:1540px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.sidebar-open{overflow:hidden}
a{color:var(--indigo);text-decoration:none;transition:.18s var(--ease)}
a:hover{color:#4338ca}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
img,svg{max-width:100%}
h1,h2,h3,h4{margin-top:0;color:var(--navy-900);line-height:1.22;letter-spacing:-.015em}
h1{font-size:clamp(1.7rem,2.5vw,2.25rem)}
h2{font-size:clamp(1.35rem,2vw,1.7rem);margin-bottom:6px}
h3{font-size:1.02rem}
p{margin:6px 0 0}.muted,small{color:var(--muted)}

.ui-icon{width:19px;height:19px;display:inline-block;flex:0 0 auto}
.brand-logo-icon{width:24px;height:24px}
.icon-button{display:inline-grid;place-items:center;border:0;background:transparent}
.icon-button .ui-icon{width:20px;height:20px}

/* App chrome */
.topbar{
  height:var(--topbar);
  position:sticky;
  top:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 22px;
  color:#fff;
  background:linear-gradient(115deg,var(--navy-950),#17284a 70%,#243662);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 24px rgba(11,18,32,.14);
}
.topbar-left,.topbar-actions,.topbar-user,.brand{display:flex;align-items:center}
.topbar-left{gap:10px;min-width:0}
.brand{gap:10px;color:#fff;min-width:0}
.brand:hover{color:#fff}
.brand-mark{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;position:relative;flex:0 0 auto;
  background:linear-gradient(145deg,var(--indigo-2),var(--violet));
  box-shadow:0 8px 18px rgba(99,102,241,.28),inset 0 0 0 1px rgba(255,255,255,.18);
}
.brand-mark i{position:absolute;width:7px;height:7px;border-radius:50%;background:#fb7185;right:-1px;top:-1px;border:2px solid var(--navy-950)}
.brand-copy{display:flex;flex-direction:column;min-width:0}
.brand b{font-size:1rem;white-space:nowrap}.brand b em{font-style:normal;color:#b8c7ff}
.brand small{font-size:.66rem;color:#aebbd3;white-space:nowrap}
.topbar-actions{gap:10px;min-width:0}
.notification-link{width:39px;height:39px;border-radius:11px;color:#e7edff;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.09);position:relative}
.notification-link:hover{color:#fff;background:rgba(255,255,255,.13)}
.notification-count{position:absolute;right:-6px;top:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;display:grid;place-items:center;background:#fb6178;color:#fff;border:2px solid #17284a;font-size:.64rem;font-weight:800}
.topbar-divider{width:1px;height:28px;background:rgba(255,255,255,.12)}
.topbar-user{gap:9px;min-width:0}
.topbar-user>span:last-child{display:flex;flex-direction:column;min-width:0;max-width:220px}
.topbar-user b,.topbar-user small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-user b{font-size:.8rem;color:#fff}.topbar-user small{font-size:.68rem;color:#aebbd3}
.avatar{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;position:relative;background:#eef2ff;color:var(--indigo);font-weight:850;flex:0 0 auto}
.avatar i{position:absolute;width:9px;height:9px;border-radius:50%;right:-1px;bottom:-1px;background:#34d399;border:2px solid #17284a}
.menu-toggle{display:none;width:40px;height:40px;border-radius:10px;color:#fff;padding:0}
.menu-toggle:hover{background:rgba(255,255,255,.1)}

.app-shell{display:flex;align-items:stretch;min-height:calc(100vh - var(--topbar));width:100%}
.sidebar{
  width:var(--sidebar);flex:0 0 var(--sidebar);height:calc(100vh - var(--topbar));position:sticky;top:var(--topbar);z-index:900;
  display:flex;flex-direction:column;gap:8px;padding:14px 12px 12px;background:#fff;border-right:1px solid var(--border);overflow-y:auto;overscroll-behavior:contain;
}
.sidebar-workspace{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #e4e7f7;border-radius:13px;background:linear-gradient(145deg,#f6f7ff,#fff);flex:0 0 auto}
.workspace-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--indigo),var(--violet));flex:0 0 auto}
.workspace-icon .ui-icon{width:17px;height:17px}.sidebar-workspace div{display:flex;flex-direction:column;min-width:0}
.sidebar-workspace small{font-size:.61rem;text-transform:uppercase;letter-spacing:.09em}.sidebar-workspace b{font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-nav{display:flex;flex-direction:column;gap:3px;min-height:min-content}
.nav-section{margin:13px 9px 5px;color:#9aa7bb;font-size:.62rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.nav-section:first-child{margin-top:2px}
.nav-item{display:flex;align-items:center;gap:10px;min-height:43px;padding:6px 8px;border-radius:11px;color:#53627a;font-weight:720;position:relative}
.nav-icon{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;color:#728198;background:#f5f7fa}
.nav-icon .ui-icon{width:17px;height:17px}.nav-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item:hover{background:#f7f8fb;color:var(--navy-900)}.nav-item:hover .nav-icon{background:#eef0ff;color:var(--indigo)}
.nav-item.active{color:#3730a3;background:#efefff}.nav-item.active .nav-icon{color:#fff;background:linear-gradient(145deg,var(--indigo),var(--violet))}
.nav-item.active:after{content:"";width:5px;height:5px;border-radius:50%;margin-left:auto;background:#fb6178;flex:0 0 auto}
.sidebar-user{margin-top:auto;padding:12px 3px 2px;border-top:1px solid var(--border);flex:0 0 auto}
.sidebar-user-main{display:flex;align-items:center;gap:9px;padding:0 5px}.sidebar-avatar{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#eef0ff;color:var(--indigo);font-weight:850;flex:0 0 auto}
.sidebar-user-main>div{display:flex;flex-direction:column;min-width:0}.sidebar-user-main b{font-size:.76rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-user small{font-size:.65rem}
.sidebar-user-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:9px}.sidebar-user-actions form{margin:0;display:flex}
.sidebar-user-actions a,.sidebar-user-actions button{min-width:0;width:100%;display:flex;align-items:center;justify-content:center;gap:5px;padding:7px 6px;border:1px solid #e4e9f0;border-radius:9px;background:#f8fafc;color:#5e6b80;font-size:.69rem;font-weight:750}
.sidebar-user-actions a:hover,.sidebar-user-actions button:hover{color:var(--indigo);background:#f1f2ff}.sidebar-user-actions .ui-icon{width:13px;height:13px}
.sidebar-overlay{display:none}

.main-content{flex:1;min-width:0;width:100%;max-width:var(--content-max);margin:0 auto;padding:24px clamp(18px,2.3vw,32px) 44px}
.full-width{max-width:none}

/* Page headers, cards, panels */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.page-head-premium{padding:16px 18px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-xs)}
.page-head-premium .page-title-wrap{display:flex;align-items:center;gap:12px;min-width:260px;flex:1}.page-title-wrap p{margin-bottom:0;max-width:760px;color:var(--muted)}
.page-title-icon-large{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;color:#fff;background:linear-gradient(145deg,var(--indigo),var(--violet))}.page-title-icon-large .ui-icon{width:22px;height:22px}
.page-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.eyebrow{margin-bottom:4px;color:var(--indigo);font-size:.65rem;font-weight:850;letter-spacing:.11em;text-transform:uppercase}.eyebrow.light{display:flex;align-items:center;gap:6px;color:#c8d4ff}.eyebrow.light .ui-icon{width:14px;height:14px}
.panel{margin:0 0 16px;padding:17px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-xs)}
.panel:hover{border-color:#d4dbe6}.panel summary{cursor:pointer;color:var(--navy-900);padding:1px;list-style-position:inside}.panel summary+form{margin-top:16px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.panel-head h3,.panel-title-icon h3{margin:0}
.panel-title-icon{display:flex;align-items:center;gap:10px}.panel-title-icon>span{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--indigo);background:#eff0ff}.panel-title-icon>span .ui-icon{width:17px;height:17px}.panel-title-icon>div{display:flex;flex-direction:column}
.soft-panel,.quick-panel{background:linear-gradient(150deg,#fff,#fafbff)}.accent-panel{position:relative;overflow:hidden}.accent-panel:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(var(--indigo),var(--coral))}
.text-link{display:inline-flex;align-items:center;gap:5px;font-size:.76rem;font-weight:800}.text-link .ui-icon{width:14px;height:14px}

/* Dashboard */
.dashboard-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px;padding:25px 26px;border-radius:20px;color:#fff;background:linear-gradient(125deg,#111c33 0%,#203a67 60%,#4c3e91 100%);box-shadow:var(--shadow-md)}
.dashboard-hero-copy{min-width:0;max-width:760px}.dashboard-hero h1{margin:5px 0 7px;color:#fff;font-size:clamp(1.65rem,2.6vw,2rem)}.dashboard-hero p{margin:0;color:#d1d9ea;max-width:690px}
.dashboard-hero-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;flex:0 0 auto}.hero-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}.hero-meta span{display:inline-flex;align-items:center;gap:6px;color:#dce5f8;font-size:.7rem}.hero-meta .ui-icon{width:14px;height:14px;color:#b9c9f5}
.hero-orb{position:absolute;border-radius:50%;pointer-events:none;opacity:.75}.orb-one{width:160px;height:160px;right:-60px;top:-90px;background:radial-gradient(circle,rgba(251,113,133,.42),transparent 70%)}.orb-two{width:180px;height:180px;right:170px;bottom:-150px;background:radial-gradient(circle,rgba(34,211,238,.24),transparent 70%)}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:12px;margin:16px 0 20px}.stat-card{position:relative;overflow:hidden;min-width:0;padding:15px;border:1px solid var(--border);border-radius:14px;background:#fff;color:inherit;box-shadow:var(--shadow-xs)}
.stat-card:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--indigo)}.stat-card:after{display:none}.stat-card:hover{transform:translateY(-1px);border-color:#ccd4e2;box-shadow:var(--shadow-sm);color:inherit}
.stats-dashboard .stat-card{display:flex;align-items:center;gap:11px}.stat-card>div{min-width:0}.stat-card span:not(.stat-icon){display:block;color:var(--muted);font-size:.72rem;font-weight:700}.stat-card strong{display:block;margin-top:2px;color:var(--navy-900);font-size:1.55rem;letter-spacing:-.035em}.stat-card small{display:block;margin-top:1px;font-size:.66rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat-icon{width:40px;height:40px;border-radius:11px;display:grid!important;place-items:center;flex:0 0 auto;color:var(--indigo);background:#eef0ff}.stat-icon .ui-icon{width:19px;height:19px}
.stat-indigo:before{background:var(--indigo)}.stat-cyan:before{background:var(--cyan)}.stat-violet:before{background:var(--violet)}.stat-coral:before{background:var(--coral)}.stat-amber:before{background:var(--amber)}.stat-blue:before{background:var(--blue)}.stat-green:before{background:var(--green)}.stat-pink:before{background:var(--pink)}.stat-slate:before{background:#64748b}
.stat-cyan .stat-icon{color:var(--cyan);background:#e9fbff}.stat-violet .stat-icon{color:var(--violet);background:#f3edff}.stat-coral .stat-icon{color:var(--coral);background:#fff0f3}.stat-amber .stat-icon{color:#a76d08;background:#fff7df}.stat-blue .stat-icon{color:var(--blue);background:#edf5ff}.stat-green .stat-icon{color:var(--green);background:#eaf8f2}.stat-pink .stat-icon{color:var(--pink);background:#fff0f8}.stat-slate .stat-icon{color:#64748b;background:#f1f5f9}
.stat-card.warning strong{color:var(--warning)}.stat-card.danger strong{color:var(--danger)}.stat-card.success strong{color:var(--success)}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.8fr);gap:16px;align-items:start}
.quick-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px}.quick-action{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px 11px;border:1px solid var(--border);border-radius:12px;background:#fff;color:inherit}.quick-action:hover{background:#fafbff;border-color:#cfd6e3;color:inherit}.quick-action>span{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--indigo);background:#eff0ff}.quick-action>span .ui-icon{width:17px;height:17px}.quick-action>div{display:flex;flex-direction:column;min-width:0}.quick-action b{font-size:.77rem;color:var(--navy-900)}.quick-action small{font-size:.65rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.quick-action .qa-arrow{width:14px;height:14px;color:#9ca8ba}.qa-coral>span{color:var(--coral);background:#fff0f3}.qa-cyan>span{color:var(--cyan);background:#e9fbff}.qa-pink>span{color:var(--pink);background:#fff0f8}.qa-violet>span{color:var(--violet);background:#f3edff}.qa-indigo>span{color:var(--indigo);background:#eff0ff}
.voice-toolbar{margin-bottom:0!important;padding-top:11px;border-top:1px solid var(--border)}

/* Forms and controls */
label{display:block;margin:0 0 5px;color:#495970;font-size:.72rem;font-weight:750}
input,select,textarea{width:100%;max-width:100%;min-width:0;padding:9px 10px;border:1px solid #d1d9e5;border-radius:9px;outline:none;background:#fff;color:var(--text);transition:border-color .15s,box-shadow .15s,background .15s}
input:hover,select:hover,textarea:hover{border-color:#bfc9d8}input:focus,select:focus,textarea:focus{border-color:#8581f3;box-shadow:0 0 0 3px rgba(79,70,229,.10)}textarea{min-height:78px;resize:vertical}
input[type=file]{padding:7px;background:#fbfcfe}input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--indigo)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;align-items:start}.form-grid>div{min-width:0}.form-grid .span-2,.form-grid .span-3{grid-column:1 / -1}.compact-form{margin-top:13px;padding-top:13px;border-top:1px solid var(--border)}
.check-label{display:flex;align-items:flex-start;gap:7px;margin-top:7px;font-weight:500}.check-label input{margin-top:3px}.field-help{display:block;margin-top:4px;color:var(--muted);font-size:.66rem}
.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:7px 11px;border:1px solid #d0d8e3;border-radius:9px;background:#fff;color:#40506a;font-weight:750;line-height:1.2;white-space:nowrap;box-shadow:var(--shadow-xs);transition:.16s var(--ease)}.btn .ui-icon{width:15px;height:15px}.btn:hover{border-color:#c2cae5;background:#f8f9ff;color:var(--indigo)}
.btn.primary{border-color:transparent;background:linear-gradient(135deg,var(--indigo),var(--violet));color:#fff;box-shadow:0 6px 15px rgba(79,70,229,.18)}.btn.primary:hover{color:#fff;filter:brightness(.98);box-shadow:0 8px 20px rgba(79,70,229,.23)}
.btn.hero-primary{border-color:transparent;background:linear-gradient(135deg,#f05268,#f97345);color:#fff}.btn.hero-primary:hover{color:#fff;filter:brightness(.98)}.btn.hero-secondary{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;box-shadow:none}.btn.hero-secondary:hover{background:rgba(255,255,255,.14);color:#fff}
.btn.success{border-color:transparent;background:var(--success);color:#fff}.btn.small{min-height:31px;padding:5px 8px;border-radius:8px;font-size:.7rem}.btn.ghost{background:transparent}.btn-soft{background:#f5f7fa!important;color:#526178!important;border-color:#e0e5ec!important}.btn-soft:hover{background:#eef0ff!important;color:var(--indigo)!important}.primary-filter{background:#f1f1ff!important;color:var(--indigo)!important;border-color:#d7d7ff!important}.danger-btn{background:#fff3f5!important;color:var(--danger)!important;border-color:#efc2cb!important}.danger-btn:hover{background:#ffe9ee!important}
.actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.actions form{margin:0;display:inline-flex}.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:13px 0}
.filters{display:grid;grid-template-columns:minmax(220px,1fr) repeat(3,minmax(130px,auto));gap:8px;align-items:end;margin:13px 0 16px;padding:10px;border:1px solid var(--border);border-radius:13px;background:#fff;box-shadow:var(--shadow-xs)}.filters input[type=search]{min-width:0;background:#fbfcfe}.filters select{width:100%;min-width:0}.filter-date{display:grid;grid-template-columns:auto minmax(120px,1fr);gap:6px;align-items:center;margin:0}.filter-date input{width:100%}

/* Alerts */
.alert{margin:0 0 14px;padding:10px 12px;border:1px solid #cbd8f1;border-radius:10px;background:var(--info-bg);color:var(--info);box-shadow:var(--shadow-xs)}.alert.success{border-color:#bce6d6;background:var(--success-bg);color:#236e54}.alert.danger{border-color:#efc0c9;background:var(--danger-bg);color:#9d3044}.alert.warning{border-color:#efd99f;background:var(--warning-bg);color:#795613}.alert.info{border-color:#cbd8f1;background:var(--info-bg);color:var(--info)}
.alert-icon{display:flex;align-items:flex-start;gap:9px}.alert-icon>span{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;background:rgba(49,95,158,.08)}.alert-icon .ui-icon{width:16px;height:16px}

/* Tables */
.table-wrap{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:12px;background:#fff;box-shadow:var(--shadow-xs)}
.table-wrap table{min-width:720px;border:0}table{width:100%;border-collapse:collapse;background:#fff}th,td{padding:11px 12px;text-align:left;vertical-align:top;border-bottom:1px solid #edf0f4}th{position:relative;background:#f8fafc;color:#758399;font-size:.65rem;font-weight:850;letter-spacing:.055em;text-transform:uppercase;white-space:nowrap}td{overflow-wrap:anywhere}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:#fafbff}.table-primary{font-weight:800;color:#29385d}.table-primary:hover{color:var(--indigo)}.empty{padding:26px!important;text-align:center;color:var(--muted)}
.pagination{display:flex;gap:5px;flex-wrap:wrap;margin:13px 0}.pagination a{min-width:31px;padding:5px 7px;text-align:center;border:1px solid var(--border);border-radius:8px;background:#fff}.pagination a.active{border-color:transparent;background:var(--indigo);color:#fff}
.route-compact{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.route-compact .ui-icon{width:12px;height:12px;color:#9aa7b9}.route-compact b{font-size:.72rem}

/* Status */
.badge{display:inline-flex;align-items:center;max-width:100%;padding:3px 7px;border:1px solid transparent;border-radius:999px;font-size:.64rem;font-weight:820;white-space:nowrap}
.badge.pending,.badge.draft,.badge.menunggu{background:#fff4d8;color:#7d5b0a;border-color:#f4df9e}.badge.diproses,.badge.dikirim,.badge.diterima{background:#eaf4ff;color:#286698;border-color:#cde6fa}.badge.selesai,.badge.disetujui,.badge.dibalas{background:#eaf8f2;color:#216e53;border-color:#c8eadc}.badge.dikembalikan,.badge.ditolak,.badge.overdue{background:#fff0f3;color:#a33348;border-color:#efc7cf}.badge.rahasia{background:#f4edff;color:#6840a3;border-color:#dfd0f6}.badge.segera{background:#fff0f3;color:#a33348}.badge.penting{background:#fff5dd;color:#7d5b0a}.badge.biasa{background:#f1f4f8;color:#59677d}.badge.menunggu_persetujuan{background:#f4efff;color:#6840a3;border-color:#ddd0f5}

/* Detail and workflow */
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px}.detail-grid>div{min-width:0;padding:10px 11px;border:1px solid #e5e9ef;border-radius:10px;background:#fafbfd}.detail-grid small,.detail-grid b{display:block}.detail-grid small{font-size:.64rem}.detail-grid b{margin-top:2px;font-size:.76rem;overflow-wrap:anywhere}.detail-panel{margin-top:12px}.detail-subject{margin:4px 0 8px}.compact-details-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.workflow-timeline{position:relative;margin-top:12px;padding-left:16px;border-left:2px solid #e4e8ef}.timeline-item{position:relative;margin:0 0 10px;padding:11px 12px;border:1px solid var(--border);border-radius:11px;background:#fff}.timeline-item:before{content:"";position:absolute;left:-22px;top:16px;width:10px;height:10px;border-radius:50%;background:#94a3b8;border:2px solid #fff;box-shadow:0 0 0 2px #dfe4eb}.timeline-item.completed:before{background:var(--green)}.timeline-item.rejected:before{background:var(--coral)}.timeline-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}.timeline-meta{font-size:.66rem;color:var(--muted)}.timeline-action{margin-top:7px}.route{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.route-unit{font-weight:800}

/* Internal submission flow */
.internal-flow{display:grid;grid-template-columns:repeat(5,minmax(130px,1fr));gap:8px;margin:14px 0 16px;padding:10px;border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:var(--shadow-xs)}
.internal-flow>i{display:none}.internal-flow>div{min-width:0;padding:11px 8px;text-align:center;border-radius:10px;background:#fafbfd;border:1px solid #edf0f5}.internal-flow>div span{width:34px;height:34px;margin-bottom:6px;border-radius:10px;display:inline-grid;place-items:center;background:#eef0ff;color:var(--indigo)}.internal-flow>div:nth-of-type(2) span{background:#fff0f3;color:var(--coral)}.internal-flow>div:nth-of-type(3) span{background:#e9fbff;color:var(--cyan)}.internal-flow>div:nth-of-type(4) span{background:#f3edff;color:var(--violet)}.internal-flow>div:nth-of-type(5) span{background:#eaf8f2;color:var(--green)}.internal-flow>div span .ui-icon{width:17px;height:17px}.internal-flow>div b,.internal-flow>div small{display:block}.internal-flow>div b{font-size:.75rem}.internal-flow>div small{margin-top:2px;font-size:.62rem;color:var(--muted)}
.submission-stats{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.submission-stats .stat-card{text-decoration:none;color:inherit}.submission-stats .stat-card:nth-child(1):before{background:var(--amber)}.submission-stats .stat-card:nth-child(2):before{background:var(--cyan)}.submission-stats .stat-card:nth-child(3):before{background:var(--indigo)}.submission-stats .stat-card:nth-child(4):before{background:var(--coral)}.submission-stats .stat-card:nth-child(5):before{background:var(--green)}
.submission-callout{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.submission-callout form{margin:0}.internal-summary-panel{margin:14px 0}.internal-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:11px}.internal-summary-grid a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;padding:10px 11px;border:1px solid var(--border);border-radius:10px;background:#fbfcfe;color:inherit}.internal-summary-grid a:hover{background:#fff;border-color:#cfd6e3;color:inherit}.internal-summary-grid span{font-size:.69rem;color:var(--muted)}.internal-summary-grid b{font-size:1.05rem;color:var(--navy-900)}

/* Attachments */
.attachment-list{margin:11px 0;padding:10px;border:1px solid var(--border);border-radius:11px;background:#fafbfd}.attachment-list>b{display:block;margin-bottom:6px}.attachment-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid #e8ecf2}.attachment-row:first-of-type{border-top:0}.attachment-row>div{min-width:0}.attachment-row a{font-weight:750;overflow-wrap:anywhere}.attachment-row small{display:block;margin-top:2px;font-size:.64rem}.attachment-row form{margin:0;flex:0 0 auto}
.reply-upload-fields{margin:10px 0;padding:10px;border:1px solid #c8eadc;border-radius:10px;background:#f4fbf8}.reply-upload-fields[hidden]{display:none}.reply-upload-fields label:first-child{margin-top:0}

/* Board */
.board{display:grid;grid-template-columns:repeat(3,minmax(260px,1fr));gap:12px;align-items:start;overflow-x:auto;padding-bottom:3px}.column{min-width:260px;min-height:300px;padding:10px;border:1px solid var(--border);border-radius:13px;background:#f8fafc}.column:nth-child(1){border-top:3px solid var(--amber)}.column:nth-child(2){border-top:3px solid var(--blue)}.column:nth-child(3){border-top:3px solid var(--green)}.column.drag-over{background:#f1f1ff;border-color:#aaa7ef}.column h3{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 9px}.column .count{padding:2px 7px;border-radius:999px;background:#fff;border:1px solid var(--border);font-size:.65rem}.drop-zone{min-height:230px}.card{margin-bottom:8px;padding:10px;border:1px solid var(--border);border-radius:10px;background:#fff;box-shadow:var(--shadow-xs);cursor:grab}.card:hover{border-color:#cbd4e0}.card:active{cursor:grabbing}.card.dragging{opacity:.55}.card small{display:block;font-size:.64rem}.card-title{margin-bottom:5px;font-weight:800}.card-status-label{margin-top:7px}.card-status-select{padding:6px 8px;font-size:.7rem}

/* Accounts, organization, monitoring */
.account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.account-grid .panel{margin:0}.inline-details>summary{cursor:pointer;list-style:none}.inline-details>summary::-webkit-details-marker{display:none}.mini-form{min-width:250px}.user-actions{display:flex;gap:6px;flex-wrap:wrap}.org-badge{display:inline-flex;align-items:center;padding:3px 7px;border-radius:999px;background:#eef0ff;color:var(--indigo);font-size:.64rem;font-weight:800}
.unit-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:11px}.unit-card{position:relative;overflow:hidden;padding:13px;border:1px solid var(--border);border-radius:12px;background:#fff}.unit-card:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(var(--indigo),var(--cyan))}.unit-card h3{margin:0 0 3px}.unit-card .unit-code{font-size:.63rem;font-weight:850;letter-spacing:.08em;color:var(--indigo)}
.progress-row{display:grid;grid-template-columns:minmax(120px,1fr) minmax(140px,2fr) 64px;gap:9px;align-items:center;margin:8px 0}.progress-track{height:7px;border-radius:999px;background:#e8edf3;overflow:hidden}.progress-bar{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--indigo),var(--cyan))}.progress-row strong{text-align:right;font-size:.72rem}.sla-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:9px}.sla-metric{padding:12px;border:1px solid var(--border);border-radius:10px;background:#fbfcfe}.sla-metric strong{display:block;font-size:1.2rem;color:var(--navy-900)}
.notification-list{display:grid;gap:8px}.notification-item{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:10px;align-items:start;padding:11px;border:1px solid var(--border);border-radius:11px;background:#fff}.notification-item.unread{border-color:#cfd0ff;background:#fafaff}.notification-dot{width:7px;height:7px;margin-top:7px;border-radius:50%;background:#c4ccd8}.notification-item.unread .notification-dot{background:var(--indigo)}.notification-item h4{margin:0 0 2px}.notification-item p{margin:0;color:#52627a}.notification-item .meta{margin-top:5px;color:var(--muted);font-size:.64rem}.notification-actions{display:flex;gap:6px;align-items:center}
.progress-native{width:100%;height:7px;border:0;border-radius:999px;overflow:hidden;background:#e8edf3}.progress-native::-webkit-progress-bar{background:#e8edf3}.progress-native::-webkit-progress-value{background:linear-gradient(90deg,var(--indigo),var(--cyan))}.progress-native::-moz-progress-bar{background:var(--indigo)}

/* Auth */
.auth-page{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - var(--topbar));padding:24px!important;background:radial-gradient(circle at 10% 20%,rgba(99,102,241,.10),transparent 30%),radial-gradient(circle at 90% 80%,rgba(240,82,104,.08),transparent 28%)}
.auth-wrap{width:100%;display:flex;align-items:center;justify-content:center}.auth-card{width:min(100%,560px);padding:26px;border:1px solid var(--border);border-radius:20px;background:#fff;box-shadow:var(--shadow-md)}.auth-card-premium{width:min(100%,980px);padding:0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);overflow:hidden}
.auth-showcase{position:relative;overflow:hidden;min-height:500px;padding:38px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;background:linear-gradient(145deg,#111c33,#253c70 65%,#49388e)}.auth-showcase-badge{display:inline-flex;align-items:center;gap:6px;width:max-content;padding:6px 9px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.08);font-size:.66rem;font-weight:800}.auth-showcase-badge .ui-icon{width:14px;height:14px}.auth-logo{width:48px;height:48px;margin-bottom:17px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.16)}.auth-logo .ui-icon{width:25px;height:25px}.auth-showcase h1{margin:0;color:#fff;font-size:clamp(1.75rem,3vw,2.25rem)}.auth-showcase h1 em{font-style:normal;color:#c4cdff}.auth-showcase p{max-width:470px;color:#d1daee}.auth-features{display:flex;gap:8px;flex-wrap:wrap}.auth-features span{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.08);font-size:.64rem}.auth-features .ui-icon{width:13px;height:13px}.auth-glow{position:absolute;border-radius:50%;pointer-events:none}.auth-glow-a{width:220px;height:220px;right:-110px;top:-100px;background:radial-gradient(circle,rgba(244,114,182,.26),transparent 70%)}.auth-glow-b{width:200px;height:200px;left:-120px;bottom:-110px;background:radial-gradient(circle,rgba(34,211,238,.20),transparent 70%)}
.auth-form-panel{padding:38px 34px;display:flex;flex-direction:column;justify-content:center}.auth-form-head{display:flex;gap:10px;align-items:center;margin-bottom:22px}.auth-form-head h2{margin:0}.auth-form-head p{margin-top:3px}.auth-mini-icon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:var(--indigo);background:#eef0ff;flex:0 0 auto}.auth-mini-icon .ui-icon{width:19px;height:19px}.auth-form label{margin-top:12px}.input-with-icon{position:relative}.input-with-icon>span{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#8b98aa;display:grid}.input-with-icon .ui-icon{width:16px;height:16px}.input-with-icon input{padding-left:35px}.auth-submit{width:100%;margin-top:18px;min-height:41px}.auth-security{display:flex;align-items:center;gap:6px;margin-top:17px;color:var(--muted);font-size:.64rem}.auth-security .ui-icon{width:14px;height:14px}.brand-login{display:flex;align-items:center;gap:11px;margin-bottom:18px}.brand-login .brand-mark{width:42px;height:42px}.brand-login h2{margin:0}.brand-login small{font-size:.66rem}

/* Utilities */
.setup-issues{padding-left:20px}.voice-output{font-weight:750;color:var(--indigo)}code{padding:2px 4px;border-radius:4px;background:#eef1f5}.mt-10{margin-top:10px}.mt-12{margin-top:12px}.mt-14{margin-top:14px}.badge-top{margin-top:5px}

/* Responsive */
@media(max-width:1180px){
  :root{--sidebar:244px}
  .dashboard-grid{grid-template-columns:1fr}
  .dashboard-hero{align-items:flex-start;flex-direction:column}
  .dashboard-hero-actions{justify-content:flex-start}
  .filters{grid-template-columns:minmax(200px,1fr) repeat(2,minmax(130px,1fr))}
}

@media(max-width:980px){
  .menu-toggle{display:grid}
  .sidebar{position:fixed;left:calc(-1 * var(--sidebar) - 24px);top:var(--topbar);height:calc(100vh - var(--topbar));box-shadow:18px 0 45px rgba(11,18,32,.18);transition:left .2s var(--ease)}
  body.sidebar-open .sidebar{left:0}
  .sidebar-overlay{display:block;position:fixed;inset:var(--topbar) 0 0 0;z-index:850;background:rgba(11,18,32,.43);opacity:0;visibility:hidden;transition:.18s}
  body.sidebar-open .sidebar-overlay{opacity:1;visibility:visible}
  .main-content{padding:20px 18px 38px}
  .auth-card-premium{grid-template-columns:1fr;max-width:720px}.auth-showcase{min-height:300px;padding:28px}.auth-form-panel{padding:30px}
  .internal-flow{grid-template-columns:repeat(5,minmax(118px,1fr));overflow-x:auto}.internal-flow>div{min-width:118px}
  .board{grid-template-columns:repeat(3,minmax(250px,1fr))}
}

@media(max-width:760px){
  :root{--topbar:62px}
  body{font-size:13px}
  .topbar{padding:0 12px;gap:10px}.brand small{display:none}.brand-mark{width:36px;height:36px;border-radius:10px}.topbar-actions{gap:7px}.topbar-divider{display:none}.topbar-user>span:last-child{display:none}
  .main-content{padding:14px 11px 30px}
  .page-head-premium{padding:14px}.page-head-premium .page-title-wrap{align-items:flex-start;min-width:0}.page-title-icon-large{width:42px;height:42px}.page-actions{width:100%;justify-content:flex-start}.page-actions .btn{flex:1 1 auto}
  .dashboard-hero{padding:20px 17px;border-radius:17px}.dashboard-hero-actions{width:100%}.dashboard-hero-actions .btn{flex:1 1 170px}.hero-meta{gap:9px}
  .stats-grid{grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:9px}.stat-card{padding:12px}.stats-dashboard .stat-card{display:block}.stat-icon{width:36px;height:36px;margin-bottom:8px}.stat-card strong{font-size:1.4rem}
  .form-grid,.account-grid{grid-template-columns:1fr}.form-grid .span-2,.form-grid .span-3{grid-column:1}.compact-details-2{grid-template-columns:1fr}
  .filters{grid-template-columns:1fr 1fr}.filters input[type=search]{grid-column:1 / -1}.filter-date{grid-template-columns:auto 1fr}
  .table-wrap{border-radius:10px}.table-wrap table{min-width:680px}th,td{padding:10px 9px}
  .internal-flow{grid-template-columns:1fr;overflow:visible}.internal-flow>div{min-width:0;text-align:left;display:grid;grid-template-columns:34px 1fr;column-gap:9px;align-items:center}.internal-flow>div span{grid-row:1 / 3;margin:0}.internal-flow>div b,.internal-flow>div small{text-align:left}
  .attachment-row{align-items:flex-start;flex-direction:column}.attachment-row form,.attachment-row .btn{width:100%}
  .notification-item{grid-template-columns:8px minmax(0,1fr)}.notification-actions{grid-column:2;justify-content:flex-start}
  .progress-row{grid-template-columns:1fr auto}.progress-track{grid-column:1 / -1;grid-row:2}.progress-row strong{grid-column:2;grid-row:1}
  .auth-page{padding:10px!important;align-items:flex-start}.auth-card{border-radius:16px}.auth-showcase{min-height:260px;padding:22px}.auth-features{display:none}.auth-form-panel{padding:25px 21px}.auth-form-head{align-items:flex-start}
}

@media(max-width:520px){
  .brand-copy b{font-size:.9rem}.notification-link{width:36px;height:36px}.topbar-user{display:none}
  .page-head-premium .page-title-wrap{gap:9px}.page-title-icon-large{width:38px;height:38px;border-radius:11px}.page-title-icon-large .ui-icon{width:19px;height:19px}
  .page-actions{display:grid;grid-template-columns:1fr}.page-actions .btn{width:100%}
  .dashboard-hero-actions{display:grid;grid-template-columns:1fr;width:100%}.dashboard-hero-actions .btn{width:100%}
  .stats-grid,.submission-stats,.internal-summary-grid,.unit-card-grid,.sla-card{grid-template-columns:1fr}
  .filters{grid-template-columns:1fr}.filters input[type=search]{grid-column:auto}.filters .btn{width:100%}
  .actions{align-items:stretch}.actions>.btn,.actions>form,.actions>form .btn{width:100%}
  .submission-callout{align-items:stretch;flex-direction:column}.submission-callout .btn{width:100%}
  .mini-form{min-width:0;width:100%}
  .auth-showcase{min-height:230px}.auth-showcase h1{font-size:1.6rem}.auth-form-panel{padding:22px 18px}
}

/* Aksesibilitas dan komponen operasional v4 */
.skip-link{position:fixed;left:16px;top:-80px;z-index:9999;background:#fff;color:#111c33;padding:12px 16px;border-radius:10px;box-shadow:var(--shadow);font-weight:800}
.skip-link:focus{top:16px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid #38bdf8;outline-offset:3px}
button:disabled,select:disabled{cursor:not-allowed;opacity:.55}
.text-danger{color:#b42318;font-weight:800}
.preference-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:16px;align-items:center}
.document-controls{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.pagination-gap,.pagination-total{display:inline-flex;align-items:center;padding:8px;color:var(--muted)}
.pagination-total{margin-left:auto;font-size:13px;font-weight:700}
.internal-summary-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
@media(max-width:520px){.internal-summary-grid{grid-template-columns:1fr}}