:root{--font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--bg-primary: #0f172a;--bg-secondary: #1e293b;--bg-card: rgba(30, 41, 59, .7);--bg-card-hover: rgba(51, 65, 85, .8);--bg-glass: rgba(15, 23, 42, .75);--text-main: #f8fafc;--text-muted: #94a3b8;--text-dim: #64748b;--border-color: rgba(255, 255, 255, .08);--border-glow: rgba(16, 185, 129, .3);--emerald-main: #10b981;--emerald-hover: #059669;--emerald-light: rgba(16, 185, 129, .15);--blue-main: #3b82f6;--blue-light: rgba(59, 130, 246, .15);--amber-main: #f59e0b;--amber-light: rgba(245, 158, 11, .15);--red-main: #ef4444;--red-light: rgba(239, 68, 68, .15);--purple-main: #8b5cf6;--purple-light: rgba(139, 92, 246, .15);--gold-main: #d97706;--gold-light: rgba(217, 119, 6, .15);--shadow-sm: 0 1px 3px rgba(0,0,0,.3);--shadow-md: 0 4px 12px rgba(0,0,0,.4);--shadow-lg: 0 10px 30px rgba(0,0,0,.5);--shadow-emerald: 0 4px 20px rgba(16, 185, 129, .25);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-full: 9999px;--transition-fast: all .2s cubic-bezier(.4, 0, .2, 1);--transition-normal: all .3s cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box;font-family:var(--font-family)}body{background-color:var(--bg-primary);color:var(--text-main);min-height:100vh;overflow-x:hidden;line-height:1.5;-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;top:-10%;right:-5%;width:500px;height:500px;background:radial-gradient(circle,#10b9811f,#0f172a00 70%);pointer-events:none;z-index:0}body:after{content:"";position:fixed;bottom:-10%;left:-5%;width:600px;height:600px;background:radial-gradient(circle,#3b82f61a,#0f172a00 70%);pointer-events:none;z-index:0}#root{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:#334155;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#475569}.glass-card{background:var(--bg-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1.25rem;transition:var(--transition-normal)}.glass-card:hover{border-color:#ffffff26}.glass-card-interactive{cursor:pointer}.glass-card-interactive:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--border-glow)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1.2rem;font-size:.875rem;font-weight:600;border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;transition:var(--transition-fast);white-space:nowrap}.btn-primary{background:linear-gradient(135deg,var(--emerald-main) 0%,#059669 100%);color:#fff;box-shadow:var(--shadow-emerald)}.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px)}.btn-secondary{background:#334155;color:var(--text-main);border:1px solid var(--border-color)}.btn-secondary:hover{background:#475569;color:#fff}.btn-outline{background:transparent;color:var(--emerald-main);border:1px solid var(--emerald-main)}.btn-outline:hover{background:var(--emerald-light)}.btn-danger{background:linear-gradient(135deg,var(--red-main) 0%,#dc2626 100%);color:#fff}.btn-danger:hover{filter:brightness(1.1)}.btn-warning{background:linear-gradient(135deg,var(--amber-main) 0%,#d97706 100%);color:#fff}.btn-sm{padding:.35rem .75rem;font-size:.8rem;border-radius:var(--radius-sm)}.btn-lg{padding:.8rem 1.6rem;font-size:1rem;border-radius:var(--radius-md)}.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .65rem;font-size:.75rem;font-weight:700;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.03em}.badge-risk-aman{background:#10b98133;color:#34d399;border:1px solid rgba(16,185,129,.4)}.badge-risk-waspada{background:#f59e0b33;color:#fbbf24;border:1px solid rgba(245,158,11,.4)}.badge-risk-tinggi{background:#f9731633;color:#fb923c;border:1px solid rgba(249,115,22,.4)}.badge-risk-kritis{background:#ef444433;color:#f87171;border:1px solid rgba(239,68,68,.4);animation:pulse-border 2s infinite}@keyframes pulse-border{0%{box-shadow:0 0 #ef444466}70%{box-shadow:0 0 0 6px #ef444400}to{box-shadow:0 0 #ef444400}}.form-group{margin-bottom:1.25rem;display:flex;flex-direction:column;gap:.4rem}.form-label{font-size:.85rem;font-weight:600;color:var(--text-muted)}.form-control{width:100%;padding:.65rem .9rem;background:#0f172a99;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-md);color:var(--text-main);font-size:.9rem;transition:var(--transition-fast)}.form-control:focus{outline:none;border-color:var(--emerald-main);box-shadow:0 0 0 3px #10b98126;background:#0f172ad9}.form-control::placeholder{color:var(--text-dim)}.table-container{width:100%;overflow-x:auto;border-radius:var(--radius-md);border:1px solid var(--border-color);background:#0f172a66}.custom-table{width:100%;border-collapse:collapse;text-align:left;font-size:.875rem}.custom-table th{background:#1e293be6;color:var(--text-muted);font-weight:700;padding:.85rem 1rem;border-bottom:1px solid var(--border-color);white-space:nowrap}.custom-table td{padding:.85rem 1rem;border-bottom:1px solid rgba(255,255,255,.05);color:var(--text-main)}.custom-table tbody tr{transition:var(--transition-fast)}.custom-table tbody tr:hover{background:#33415566}.matrix-table th,.matrix-table td{text-align:center;vertical-align:middle}.matrix-table td:first-child,.matrix-table th:first-child{text-align:left}.custom-checkbox{width:18px;height:18px;accent-color:var(--emerald-main);cursor:pointer}.app-container{display:flex;min-height:100vh}.sidebar{width:260px;background:#0f172af2;border-right:1px solid var(--border-color);display:flex;flex-direction:column;transition:var(--transition-normal);z-index:100}.sidebar-header{padding:1.5rem 1.25rem;display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--border-color)}.sidebar-logo{width:40px;height:40px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--emerald-main),#059669);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;box-shadow:var(--shadow-emerald)}.sidebar-nav{flex:1;padding:1rem .75rem;display:flex;flex-direction:column;gap:.35rem;overflow-y:auto}.nav-item{display:flex;align-items:center;gap:.75rem;padding:.7rem 1rem;color:var(--text-muted);font-weight:500;font-size:.9rem;border-radius:var(--radius-md);text-decoration:none;cursor:pointer;transition:var(--transition-fast)}.nav-item:hover{background:#33415580;color:var(--text-main)}.nav-item.active{background:linear-gradient(90deg,#10b98133,#10b9810d);color:var(--emerald-main);border-left:3px solid var(--emerald-main);font-weight:700}.main-content{flex:1;display:flex;flex-direction:column;min-width:0}.top-navbar{height:64px;background:#0f172acc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-color);padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between}.content-body{padding:1.5rem;flex:1}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0f172acc;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.modal-content{background:#1e293b;border:1px solid var(--border-color);border-radius:var(--radius-lg);width:100%;max-width:650px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:modal-pop .25s cubic-bezier(.175,.885,.32,1.275)}@keyframes modal-pop{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.modal-header{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between}.modal-body{padding:1.5rem}.modal-footer{padding:1rem 1.5rem;border-top:1px solid var(--border-color);display:flex;align-items:center;justify-content:flex-end;gap:.75rem;background:#0f172a4d}@media(max-width:768px){.app-container{flex-direction:column}.sidebar{width:100%;border-right:none;border-bottom:1px solid var(--border-color)}.top-navbar{padding:0 1rem}.content-body{padding:1rem}}