:root{--primary: #FF00EA;--primary-hover: #e000ce;--primary-soft: #fdf2fe;--primary-border: rgba(255, 0, 234, .28);--primary-glow: 0 0 20px rgba(255, 0, 234, .35);--navy: #0f172a;--navy-2: #1e293b;--navy-3: #334155;--surface: #ffffff;--bg: #f8fafc;--card: #ffffff;--text: #0f172a;--text-muted: #64748b;--line: #e2e8f0;--line-strong: #cbd5e1;--success: #10b981;--success-soft: #ecfdf5;--warning: #f59e0b;--warning-soft: #fffbeb;--danger: #ef4444;--danger-soft: #fef2f2;--info: #06b6d4;--info-soft: #ecfeff;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 18px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 14px -2px rgba(15, 23, 42, .08), 0 2px 6px -1px rgba(0, 0, 0, .04);--shadow-lg: 0 10px 28px -4px rgba(15, 23, 42, .12), 0 4px 10px -2px rgba(0, 0, 0, .05);--shadow-pink: 0 8px 24px -4px rgba(255, 0, 234, .32);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}button{cursor:pointer;transition:all .18s cubic-bezier(.16,1,.3,1)}button:disabled{opacity:.5;cursor:not-allowed}.boot{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:radial-gradient(circle at 50% 40%,rgba(255,0,234,.06),transparent 60%),#fff;color:var(--navy);font-weight:600}.boot .spinner{width:32px;height:32px;border:3px solid rgba(255,0,234,.15);border-top-color:var(--primary);border-radius:50%;animation:spin .75s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.login{min-height:100vh;display:grid;grid-template-columns:1fr 1.1fr;background:#f1f5f9}.login-form{padding:clamp(32px,6vw,84px);display:flex;flex-direction:column;justify-content:center;background:#fff;border-right:1px solid var(--line)}.login-brand{display:flex;align-items:center;gap:16px;margin-bottom:36px}.login-brand img{height:44px;width:auto;object-fit:contain}.login-brand>span{width:2px;height:28px;background:var(--line-strong)}.login-brand b{font-size:16px;color:var(--navy);letter-spacing:-.2px}.login-copy h1{font-size:clamp(28px,3.2vw,42px);letter-spacing:-1px;margin:0 0 10px;color:var(--navy);font-weight:800}.login-copy h1 span{color:var(--primary);background:linear-gradient(135deg,#ff00ea,#b800a8);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.login-copy p{color:var(--text-muted);font-size:15px;line-height:1.5;margin:0 0 32px}.login form{display:flex;flex-direction:column;gap:16px}.login form label{font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--navy-3);margin-bottom:-8px}.input-wrap{height:50px;display:flex;align-items:center;gap:12px;padding:0 16px;border:1.5px solid var(--line);border-radius:var(--radius-md);background:#f8fafc;color:var(--text-muted);transition:all .18s ease}.input-wrap:focus-within{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3.5px #ff00ea24;color:var(--primary)}.input-wrap input{border:0;outline:0;background:transparent;flex:1;min-width:0;font-size:14px;color:var(--text)}.input-wrap input::placeholder{color:#94a3b8}.login-submit{height:50px;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:12px;background:linear-gradient(135deg,#ff00ea,#d600c4);color:#fff;font-weight:750;font-size:14px;border:0;border-radius:var(--radius-md);box-shadow:var(--shadow-pink)}.login-submit:hover:not(:disabled){background:linear-gradient(135deg,#ff26ed,#e600d3);transform:translateY(-1.5px);box-shadow:0 10px 28px -3px #ff00ea6b}.login-hint{font-size:12px;color:var(--text-muted);text-align:center;margin-top:4px}.login-photo{position:relative;overflow:hidden;background:#0f172a;display:flex;align-items:flex-end}.login-photo img{width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0;object-fit:cover;object-position:center;opacity:.82}.login-photo-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#0f172a33,#0f172ae0),radial-gradient(circle at 80% 20%,rgba(255,0,234,.35),transparent 50%)}.photo-caption{position:relative;z-index:2;padding:48px;color:#fff}.photo-caption h2{font-size:38px;font-weight:800;letter-spacing:-1px;margin:0 0 10px;line-height:1.1}.photo-caption h2 span{color:var(--primary)}.photo-caption p{color:#cbd5e1;font-size:15px;margin:0;max-width:420px;line-height:1.5}.app-shell{min-height:100vh;display:flex;background:var(--bg)}.sidebar{position:fixed;inset:0 auto 0 0;width:256px;background:linear-gradient(180deg,#0b1120,#0f172a);color:#e2e8f0;padding:20px 14px 16px;display:flex;flex-direction:column;z-index:30;border-right:1px solid rgba(255,255,255,.08)}.brand{display:flex;align-items:center;gap:12px;padding:6px 10px 18px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:16px}.brand img{height:38px;width:auto;object-fit:contain;background:#fffffff2;padding:4px 6px;border-radius:8px}.brand-text b{display:block;font-size:14px;color:#fff;letter-spacing:-.2px}.brand-text span{display:block;font-size:11px;color:#94a3b8}.brand-text .pink-tag{display:inline-block;background:#ff00ea2e;color:#ff00ea;font-size:9px;font-weight:800;padding:1px 6px;border-radius:4px;border:1px solid rgba(255,0,234,.35);margin-top:3px}.sidebar nav{display:flex;flex-direction:column;gap:4px;flex:1;overflow-y:auto}.nav-item{display:flex;align-items:center;gap:12px;height:42px;padding:0 12px;border-radius:var(--radius-md);border:0;background:transparent;color:#94a3b8;font-weight:600;font-size:13px;text-align:left;transition:all .16s ease;position:relative}.nav-item:hover{background:#ffffff0f;color:#fff}.nav-item.active{background:linear-gradient(135deg,#ff00ea2e,#ff00ea0f);color:#fff;border:1px solid rgba(255,0,234,.35);box-shadow:inset 3.5px 0 #ff00ea}.nav-item.active svg{color:#ff00ea;filter:drop-shadow(0 0 8px rgba(255,0,234,.5))}.nav-badge{margin-left:auto;font-size:10px;font-weight:800;padding:2px 7px;border-radius:999px;background:#ff00ea2e;color:#ff00ea;border:1px solid rgba(255,0,234,.35)}.sidebar-bottom{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:8px}.user-chip{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-md);background:#ffffff0a;border:1px solid rgba(255,255,255,.08)}.user-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#ff00ea,#7e0074);color:#fff;font-weight:800;font-size:12px;border:1.5px solid rgba(255,255,255,.2)}.user-avatar.small{width:30px;height:30px;font-size:11px}.user-chip-text{flex:1;min-width:0}.user-chip-text b{display:block;font-size:12px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-chip-text small{display:block;font-size:10px;color:#94a3b8}.logout-btn{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border:0;background:transparent;color:#cbd5e1;font-size:12px;font-weight:600;border-radius:var(--radius-sm)}.logout-btn:hover{background:#ef44441f;color:#f87171}.main-area{margin-left:256px;flex:1;min-height:100vh;display:flex;flex-direction:column}.topbar{height:64px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 32px;gap:20px;position:sticky;top:0;z-index:20}.global-search{height:40px;width:min(440px,45vw);display:flex;align-items:center;gap:10px;padding:0 14px;border:1.5px solid var(--line);border-radius:var(--radius-md);background:#f8fafc;color:var(--text-muted);transition:all .18s ease}.global-search:focus-within{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px #ff00ea1f;color:var(--primary)}.global-search input{border:0;outline:0;background:transparent;flex:1;min-width:0;font-size:13px;color:var(--text)}.top-actions{display:flex;align-items:center;gap:14px}.role-badge{background:#ff00ea14;color:var(--primary);font-size:11px;font-weight:750;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,0,234,.25);display:flex;align-items:center;gap:6px}.icon-btn{width:36px;height:36px;border-radius:var(--radius-md);border:1px solid var(--line);background:#fff;color:var(--text-muted);display:grid;place-items:center;padding:0}.icon-btn:hover{background:#f8fafc;color:var(--primary);border-color:var(--primary-border)}.content{padding:28px 32px 40px;max-width:1440px;width:100%;margin:0 auto}.breadcrumb{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted);margin-bottom:14px}.breadcrumb b{color:var(--navy);font-weight:700}.heading-row{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px;gap:16px}.heading-row h1{font-size:26px;font-weight:800;color:var(--navy);letter-spacing:-.6px;margin:0 0 6px}.heading-row p{color:var(--text-muted);font-size:13px;margin:0}.heading-actions{display:flex;align-items:center;gap:10px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--radius-md);font-weight:650;font-size:13px;border:1px solid transparent}.btn-primary{background:linear-gradient(135deg,#ff00ea,#db00c9);color:#fff;box-shadow:0 4px 14px #ff00ea47}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#ff2be9,#eb00d8);transform:translateY(-1px);box-shadow:0 6px 20px #ff00ea61}.btn-outline{border-color:var(--line);background:#fff;color:var(--navy-2)}.btn-outline:hover:not(:disabled){border-color:var(--primary-border);color:var(--primary);background:var(--primary-soft)}.btn-pink-soft{background:var(--primary-soft);color:var(--primary);border-color:var(--primary-border)}.btn-pink-soft:hover:not(:disabled){background:#ff00ea1f}.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:24px}.kpi-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow-sm);transition:all .2s ease;position:relative;overflow:hidden}.kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}.kpi-card:after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:transparent}.kpi-card.pink:after{background:#ff00ea}.kpi-card.warning:after{background:var(--warning)}.kpi-card.danger:after{background:var(--danger)}.kpi-card.success:after{background:var(--success)}.kpi-icon{width:48px;height:48px;border-radius:var(--radius-md);display:grid;place-items:center;flex-shrink:0}.kpi-icon.pink{background:var(--primary-soft);color:var(--primary)}.kpi-icon.warning{background:var(--warning-soft);color:var(--warning)}.kpi-icon.danger{background:var(--danger-soft);color:var(--danger)}.kpi-icon.success{background:var(--success-soft);color:var(--success)}.kpi-icon.info{background:var(--info-soft);color:var(--info)}.kpi-info span{font-size:12px;font-weight:600;color:var(--text-muted);display:block}.kpi-info b{font-size:26px;font-weight:800;color:var(--navy);display:block;line-height:1.15;margin:2px 0}.kpi-info small{font-size:11px;color:var(--text-muted)}.urgency-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}.urgency-box{padding:14px 16px;border-radius:var(--radius-md);border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .18s ease}.urgency-box:hover{border-color:var(--primary);background:var(--primary-soft)}.urgency-box b{font-size:20px;font-weight:800}.urgency-box span{font-size:12px;font-weight:600;color:var(--text-muted)}.urgency-box.kritis{border-left:4px solid var(--danger)}.urgency-box.perhatian{border-left:4px solid var(--warning)}.urgency-box.mendekati{border-left:4px solid var(--info)}.urgency-box.aman{border-left:4px solid var(--success)}.controls-bar{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px 18px;margin-bottom:18px;flex-wrap:wrap;box-shadow:var(--shadow-sm)}.control-item{display:flex;flex-direction:column;gap:5px}.control-item label{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--text-muted);letter-spacing:.03em}.control-item select,.control-item input{height:38px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#f8fafc;padding:0 10px;font-size:13px;color:var(--text);outline:0;min-width:140px;transition:border-color .16s ease}.control-item select:focus,.control-item input:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 2.5px #ff00ea1f}.controls-bar .search-box{flex:1;min-width:220px}.search-input-wrap{position:relative;display:flex;align-items:center}.search-input-wrap svg{position:absolute;left:10px;color:var(--text-muted)}.search-input-wrap input{width:100%;padding-left:34px!important}.table-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}.table-header{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;background:#fff}.table-header h2{font-size:16px;font-weight:750;color:var(--navy);margin:0 0 3px}.table-header p{font-size:12px;color:var(--text-muted);margin:0}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;white-space:nowrap;font-size:13px}th{background:#f8fafc;color:var(--navy-3);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}td{padding:13px 14px;border-bottom:1px solid #f1f5f9;color:var(--navy-2)}tr:hover td{background:#fdf6fe}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-weight:600;color:var(--navy-3);font-size:12px}.stage-chip{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;background:#f1f5f9;color:var(--navy-2);border:1px solid var(--line)}.stage-chip.pkwt1{background:#e0f2fe;color:#0369a1;border-color:#bae6fd}.stage-chip.pkwt2{background:#fef3c7;color:#b45309;border-color:#fde68a}.stage-chip.pkwt3{background:var(--primary-soft);color:var(--primary);border-color:var(--primary-border)}.stage-chip.pkwtt{background:#ecfdf5;color:#047857;border-color:#a7f3d0}.days-chip{display:inline-flex;align-items:center;justify-content:center;min-width:44px;padding:3px 8px;border-radius:var(--radius-sm);font-weight:750;font-size:11px}.days-chip.late{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}.days-chip.near{background:#fffbeb;color:#b45309;border:1px solid #fde68a}.days-chip.safe{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}.status-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:650}.status-chip.pending{background:#fff7ed;color:#c2410c;border:1px solid #ffedd5}.status-chip.saved{background:var(--primary-soft);color:var(--primary);border:1px solid var(--primary-border)}.status-chip.done{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}.action-btn{height:30px;padding:0 11px;border-radius:var(--radius-sm);font-size:11px;font-weight:700;border:1px solid var(--primary-border);background:#fff;color:var(--primary);display:inline-flex;align-items:center;gap:6px}.action-btn:hover:not(:disabled){background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 2px 8px #ff00ea4d}.pagination{padding:14px 20px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text-muted)}.pagination-controls{display:flex;align-items:center;gap:8px}.page-btn{width:32px;height:32px;border-radius:var(--radius-sm);border:1px solid var(--line);background:#fff;color:var(--text);display:grid;place-items:center;font-weight:600}.page-btn:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.drawer-scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a8c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:40;border:0;animation:fadeIn .18s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.drawer{position:fixed;right:0;top:0;bottom:0;width:min(520px,100vw);background:#fff;z-index:41;box-shadow:-10px 0 35px #0f172a38;display:flex;flex-direction:column;overflow-y:auto;padding:24px 28px;animation:slideDrawer .22s cubic-bezier(.16,1,.3,1)}@keyframes slideDrawer{0%{transform:translate(100%)}to{transform:translate(0)}}.drawer-header{display:flex;align-items:flex-start;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid var(--line)}.drawer-header span{font-size:11px;font-weight:800;color:var(--primary);letter-spacing:.08em;text-transform:uppercase}.drawer-header h2{font-size:20px;font-weight:800;color:var(--navy);margin:4px 0 0}.stepper{display:flex;align-items:center;justify-content:space-between;margin:20px 0;position:relative}.step-item{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;z-index:2}.step-circle{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#f1f5f9;color:var(--text-muted);font-weight:750;font-size:13px;border:2px solid #ffffff;box-shadow:0 0 0 1.5px var(--line);transition:all .18s ease}.step-item.active .step-circle{background:var(--primary);color:#fff;box-shadow:0 0 0 3px #ff00ea40}.step-item.completed .step-circle{background:var(--success);color:#fff;box-shadow:0 0 0 2px #10b98140}.step-label{font-size:10px;font-weight:700;color:var(--text-muted)}.step-item.active .step-label{color:var(--primary)}.stepper-line{position:absolute;top:16px;left:24px;right:24px;height:2px;background:var(--line);z-index:1}.drawer-employee-card{display:flex;align-items:center;gap:14px;background:#f8fafc;border:1px solid var(--line);border-radius:var(--radius-md);padding:14px 16px;margin-bottom:20px}.drawer-employee-card b{display:block;font-size:14px;color:var(--navy)}.drawer-employee-card small{display:block;color:var(--text-muted);font-size:11px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:16px;margin-bottom:20px}.detail-item dt{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--text-muted);margin-bottom:2px}.detail-item dd{font-size:13px;font-weight:600;color:var(--navy);margin:0}.decision-options{display:flex;flex-direction:column;gap:10px;margin:16px 0}.decision-radio{display:flex;align-items:flex-start;gap:12px;padding:14px;border:1.5px solid var(--line);border-radius:var(--radius-md);cursor:pointer;transition:all .16s ease;background:#fff}.decision-radio:hover{border-color:var(--primary-border);background:var(--primary-soft)}.decision-radio.selected{border-color:var(--primary);background:var(--primary-soft);box-shadow:0 0 0 1px var(--primary)}.decision-radio input[type=radio]{accent-color:var(--primary);margin-top:3px}.decision-radio b{display:block;font-size:13px;color:var(--navy)}.decision-radio span{display:block;font-size:11px;color:var(--text-muted);margin-top:2px}.alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--radius-md);font-size:12px;line-height:1.45;margin:14px 0}.alert.pink{background:var(--primary-soft);border:1px solid var(--primary-border);color:#9c008f}.alert.warning{background:var(--warning-soft);border:1px solid #fde68a;color:#b45309}.alert.error{background:var(--danger-soft);border:1px solid #fecaca;color:#b91c1c}.alert.success{background:var(--success-soft);border:1px solid #a7f3d0;color:#047857}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172abf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:50;display:flex;align-items:center;justify-content:center;padding:24px}.modal-card{width:min(880px,96vw);max-height:90vh;background:#fff;border-radius:var(--radius-xl);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 25px 60px -12px #00000059}.modal-header{padding:18px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.modal-header h3{margin:0;font-size:18px;font-weight:800;color:var(--navy)}.modal-body{padding:24px;overflow-y:auto;flex:1}.pdf-preview-box{background:#475569;border-radius:var(--radius-md);height:540px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;padding:24px;text-align:center}.pdf-sheet{background:#fff;color:#0f172a;width:min(500px,100%);height:100%;border-radius:4px;box-shadow:0 8px 30px #0000004d;padding:32px 36px;display:flex;flex-direction:column;font-size:11px;line-height:1.5;text-align:left;overflow-y:auto}.pdf-sheet-header{border-bottom:2px solid #0f172a;padding-bottom:12px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between}.pdf-sheet-header b{font-size:13px;letter-spacing:.05em}.mobile-nav-toggle{display:none}@media(max-width:900px){.sidebar{transform:translate(-100%);transition:transform .22s ease}.sidebar.open{transform:translate(0)}.mobile-scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a99;z-index:25}.main-area{margin-left:0}.mobile-nav-toggle{display:inline-flex}.kpi-grid,.urgency-grid{grid-template-columns:repeat(2,1fr)}.topbar{padding:0 16px}.content{padding:18px 16px 32px}.login{grid-template-columns:1fr}.login-photo{display:none}}@media(max-width:540px){.kpi-grid,.urgency-grid{grid-template-columns:1fr}.heading-row{flex-direction:column;align-items:flex-start}}