:root{--font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--bg-primary: #010f0b;--bg-secondary: #021a13;--bg-card: #04261d;--bg-card-hover: #063327;--bg-glass: #021a13;--text-main: #ffffff;--text-muted: #a7f3d0;--text-dim: #6ee7b7;--border-color: #084232;--border-glow: #10b981;--emerald-main: #10b981;--emerald-hover: #059669;--emerald-light: #064e3b;--blue-main: #3b82f6;--blue-light: rgba(59, 130, 246, .2);--amber-main: #f59e0b;--amber-light: rgba(245, 158, 11, .2);--red-main: #ef4444;--red-light: rgba(239, 68, 68, .2);--purple-main: #8b5cf6;--purple-light: rgba(139, 92, 246, .2);--gold-main: #d97706;--gold-light: rgba(217, 119, 6, .2);--shadow-sm: 0 1px 3px rgba(0,0,0,.4);--shadow-md: 0 4px 14px rgba(0,0,0,.5);--shadow-lg: 0 10px 30px rgba(0,0,0,.6);--shadow-emerald: 0 4px 20px rgba(16, 185, 129, .3);--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,#10b98129,#031f1900 70%);pointer-events:none;z-index:0}body:after{content:"";position:fixed;bottom:-10%;left:-5%;width:600px;height:600px;background:radial-gradient(circle,#05966924,#031f1900 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:#135a4b;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#10b981}.content-body{padding:1.5rem;overflow-y:auto;flex:1;animation:fadeIn .35s cubic-bezier(.16,1,.3,1)}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.glass-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1.35rem;transition:var(--transition-normal);position:relative;box-shadow:var(--shadow-sm)}.glass-card:after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--emerald-main),transparent);opacity:.3;transition:opacity .3s}.glass-card:hover{border-color:var(--emerald-main);box-shadow:var(--shadow-md)}.glass-card:hover:after{opacity:.8}.glass-card-interactive{cursor:pointer}.glass-card-interactive:hover{transform:translateY(-3px);box-shadow:var(--shadow-emerald);border-color:var(--emerald-main)}.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:#10b98129;color:#10b981;border:1px solid rgba(16,185,129,.45);box-shadow:0 0 10px #10b98133;font-weight:700}.badge-risk-waspada{background:#f59e0b29;color:#f59e0b;border:1px solid rgba(245,158,11,.45);box-shadow:0 0 10px #f59e0b33;font-weight:700}.badge-risk-tinggi{background:#f973162e;color:#fb923c;border:1px solid rgba(249,115,22,.5);box-shadow:0 0 12px #f9731640;font-weight:700}.badge-risk-kritis{background:#ef444438;color:#f87171;border:1px solid rgba(239,68,68,.6);box-shadow:0 0 14px #ef444459;font-weight:800;animation:pulse-border 2.2s ease-in-out infinite}@keyframes pulse-border{0%,to{box-shadow:0 0 10px #ef44444d;border-color:#ef444480}50%{box-shadow:0 0 20px #ef4444a6;border-color:#f87171e6}}.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;align-items:flex-start}.sidebar{width:260px;height:100vh;position:sticky;top:0;flex-shrink:0;background:var(--bg-glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);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:600;font-size:.88rem;border-radius:var(--radius-md);text-decoration:none;cursor:pointer;transition:var(--transition-fast);position:relative}.nav-item:hover{background:var(--bg-card-hover);color:var(--text-main);transform:translate(3px)}.nav-item.active{background:linear-gradient(90deg,#10b98138,#10b9810a);color:var(--emerald-main);border-left:4px solid var(--emerald-main);font-weight:700;box-shadow:0 4px 12px #10b9811a}.main-content{flex:1;display:flex;flex-direction:column;min-width:0;min-height:100vh}.top-navbar{height:64px;position:sticky;top:0;z-index:90;background:var(--bg-glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);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}}body,.app-container,.sidebar,.top-navbar,.glass-card,.modal-content,.modal-footer,.table-container,th,td,.form-control,.btn,.nav-item,.badge,.top-nav-box{transition:background-color .65s cubic-bezier(.4,0,.2,1),color .65s cubic-bezier(.4,0,.2,1),border-color .65s cubic-bezier(.4,0,.2,1),box-shadow .65s cubic-bezier(.4,0,.2,1)!important}.theme-toggle-btn{position:relative;overflow:hidden}.theme-toggle-btn .theme-icon-sun{color:#fbbf24;transition:transform .65s cubic-bezier(.34,1.56,.64,1)}.theme-toggle-btn .theme-icon-moon{color:#38bdf8;transition:transform .65s cubic-bezier(.34,1.56,.64,1)}.theme-toggle-btn:hover .theme-icon-sun{transform:rotate(180deg) scale(1.2)}.theme-toggle-btn:hover .theme-icon-moon{transform:rotate(-360deg) scale(1.2)}body:before{content:"";position:fixed;top:-12%;right:-8%;width:580px;height:580px;background:radial-gradient(circle,#10b98129,#021a1400 70%);pointer-events:none;z-index:0;border-radius:50%;filter:blur(45px)}body:after{content:"";position:fixed;bottom:-15%;left:-8%;width:680px;height:680px;background:radial-gradient(circle,#05966924,#021a1400 75%);pointer-events:none;z-index:0;border-radius:50%;filter:blur(55px)}.app-container{background-image:radial-gradient(circle at 25px 25px,rgba(16,185,129,.09) 2px,transparent 0),radial-gradient(circle at 75px 75px,rgba(5,150,105,.07) 2px,transparent 0);background-size:100px 100px}[data-theme=dark]{--bg-primary: #010f0b;--bg-secondary: #021a13;--bg-card: #04261d;--bg-card-hover: #063327;--bg-glass: #021a13;--text-main: #f0fdf4;--text-muted: #a7f3d0;--text-dim: #6ee7b7;--border-color: #084232;--border-glow: #10b981}[data-theme=dark] .sidebar{background:#021a13;border-right:1px solid #084232}[data-theme=dark] .top-navbar{background:#021a13;border-bottom:1px solid #084232}[data-theme=dark] .glass-card,[data-theme=dark] .modal-content{background:#04261d;border:1px solid #084232;box-shadow:0 4px 18px #00000073}[data-theme=dark] .modal-footer{background:#021a13;border-top:1px solid #084232}[data-theme=dark] .btn-secondary{background:#021a13;color:#f0fdf4;border:1px solid #084232}[data-theme=dark] .btn-secondary:hover{background:#063327}[data-theme=dark] .table-container{background:#04261d;border:1px solid #084232}[data-theme=dark] th{background:#01140e;color:#a7f3d0;border-bottom:1px solid #084232}[data-theme=dark] td{border-bottom:1px solid #063327;color:#f0fdf4}[data-theme=dark] .form-control{background:#021a13;color:#fff;border:1px solid #084232}[data-theme=dark] .form-control:focus{background:#04261d;border-color:#10b981}[data-theme=light] .app-container{background-image:radial-gradient(circle at 25px 25px,rgba(5,150,105,.08) 2px,transparent 0),radial-gradient(circle at 75px 75px,rgba(2,132,199,.06) 2px,transparent 0)}[data-theme=light]{--bg-primary: #f4fbf7;--bg-secondary: #ffffff;--bg-card: #ffffff;--bg-card-hover: #f1f5f9;--bg-glass: rgba(255, 255, 255, .95);--text-main: #0f172a;--text-muted: #475569;--text-dim: #64748b;--border-color: #cbd5e1;--border-glow: rgba(5, 150, 105, .4);--emerald-main: #059669;--emerald-hover: #047857;--emerald-light: #059669;--shadow-sm: 0 1px 3px rgba(0,0,0,.06);--shadow-md: 0 4px 12px rgba(0,0,0,.08);--shadow-lg: 0 10px 30px rgba(0,0,0,.12);--shadow-emerald: 0 4px 20px rgba(5, 150, 105, .2)}[data-theme=light] .sidebar{background:#fff;border-right:1px solid #e2e8f0}[data-theme=light] .top-navbar{background:#fff;border-bottom:1px solid #e2e8f0}[data-theme=light] .glass-card,[data-theme=light] .modal-content{background:#fff;border:1px solid #cbd5e1;box-shadow:0 4px 14px #0000000d}[data-theme=light] .modal-footer{background:#f8fafc;border-top:1px solid #cbd5e1}[data-theme=light] .btn-secondary{background:#e2e8f0;color:#1e293b;border:1px solid #cbd5e1}[data-theme=light] .btn-secondary:hover{background:#cbd5e1;color:#0f172a}[data-theme=light] .table-container{background:#fff;border:1px solid #cbd5e1}[data-theme=light] th{background:#f1f5f9;color:#334155;border-bottom:1px solid #cbd5e1}[data-theme=light] td{border-bottom:1px solid #f1f5f9;color:#0f172a}[data-theme=light] .form-control{background:#f8fafc;color:#0f172a;border:1px solid #cbd5e1}[data-theme=light] .form-control:focus{background:#fff;border-color:#059669}.toast-container{position:fixed;top:1.25rem;right:1.25rem;z-index:9999;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1.25rem;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);font-size:.88rem;font-weight:600;animation:toast-slide .35s cubic-bezier(.175,.885,.32,1.275);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);min-width:280px;max-width:420px}@keyframes toast-slide{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.toast-success{background:var(--bg-card);border:1.5px solid #10b981;color:var(--text-main)}.toast-error{background:var(--bg-card);border:1.5px solid #ef4444;color:var(--text-main)}.toast-warning{background:var(--bg-card);border:1.5px solid #f59e0b;color:var(--text-main)}.toast-info{background:var(--bg-card);border:1.5px solid #3b82f6;color:var(--text-main)}.toast-content{display:flex;align-items:center;gap:.6rem}.toast-close-btn{background:transparent;border:none;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;opacity:.7;transition:opacity .2s}.toast-close-btn:hover{opacity:1}.spinner-rotate{animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}