:root{--font-primary:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-secondary:"Inter", sans-serif;--blue-primary:#0052cc;--blue-hover:#0043a4;--blue-light:#e6f0ff;--blue-soft:#f0f7ff;--blue-accent:#06f;--blue-accent-glow:#0066ff26;--bg-gradient:linear-gradient(135deg, #f8faff 0%, #e8f0fe 50%, #dbe9fe 100%);--card-bg:#ffffffd9;--card-border:#fff9;--card-shadow:0 20px 40px -15px #0052cc1f, 0 0 50px 0 #0052cc08;--text-main:#1e293b;--text-muted:#64748b;--text-light:#94a3b8;--border-color:#cbd5e1;--border-hover:#94a3b8;--error-color:#ef4444;--error-bg:#fef2f2;--success-color:#22c55e;--radius-lg:20px;--radius-md:12px;--radius-sm:8px;--transition-fast:.2s ease;--transition-normal:.3s cubic-bezier(.4, 0, .2, 1);--transition-slow:.5s cubic-bezier(.4, 0, .2, 1)}@media (prefers-color-scheme:dark){:root:not(.light){--blue-primary:#3b82f6;--blue-hover:#60a5fa;--blue-light:#3b82f626;--blue-soft:#1e293b;--blue-accent:#60a5fa;--blue-accent-glow:#60a5fa40;--bg-gradient:radial-gradient(circle at top left, #0f172a 0%, #0b132b 50%, #020617 100%);--card-bg:#0f172acc;--card-border:#ffffff14;--card-shadow:0 20px 40px -15px #00000080, 0 0 50px 0 #3b82f60d;--text-main:#f8fafc;--text-muted:#94a3b8;--text-light:#64748b;--border-color:#334155;--border-hover:#475569;--error-color:#f87171;--error-bg:#ef44441a}}html.dark{--blue-primary:#3b82f6;--blue-hover:#60a5fa;--blue-light:#3b82f626;--blue-soft:#1e293b;--blue-accent:#60a5fa;--blue-accent-glow:#60a5fa40;--bg-gradient:radial-gradient(circle at top left, #0f172a 0%, #0b132b 50%, #020617 100%);--card-bg:#0f172acc;--card-border:#ffffff14;--card-shadow:0 20px 40px -15px #00000080, 0 0 50px 0 #3b82f60d;--text-main:#f8fafc;--text-muted:#94a3b8;--text-light:#64748b;--border-color:#334155;--border-hover:#475569;--error-color:#f87171;--error-bg:#ef44441a}body,.auth-container,.dashboard-sidebar,.dashboard-main,.stat-card,.chart-card,.overview-summary-card,.table-section,.search-bar,select,input,.modal-card,.tab-btn{transition:background var(--transition-normal), background-color var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal), box-shadow var(--transition-normal)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-primary);background:var(--bg-gradient);color:var(--text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;justify-content:center;align-items:center;min-height:100vh;display:flex;position:relative;overflow-x:hidden}body:before,body:after{content:"";z-index:-1;filter:blur(40px);background:radial-gradient(circle,#0066ff26 0%,#fff0 70%);border-radius:50%;width:400px;height:400px;animation:20s ease-in-out infinite alternate floatBackground;position:absolute}body:before{animation-delay:0s;top:-100px;left:-100px}body:after{animation-delay:-10s;bottom:-100px;right:-100px}@keyframes floatBackground{0%{transform:translate(0)scale(1)}to{transform:translate(80px,50px)scale(1.2)}}#root{justify-content:center;align-items:center;width:100%;min-height:100vh;display:flex}.auth-container{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-lg);width:100%;max-width:460px;box-shadow:var(--card-shadow);-webkit-backdrop-filter:blur(20px);transition:transform var(--transition-normal), box-shadow var(--transition-normal);margin:20px;padding:48px 40px;position:relative;overflow:hidden}@media (width<=480px){.auth-container{border-radius:var(--radius-md);padding:32px 24px}}.auth-header{text-align:center;margin-bottom:36px}.logo-wrapper{background:var(--blue-light);border-radius:var(--radius-md);width:56px;height:56px;color:var(--blue-accent);transition:transform var(--transition-normal);justify-content:center;align-items:center;margin-bottom:20px;display:inline-flex}.logo-wrapper:hover{transform:rotate(-10deg)scale(1.05)}.auth-header h1{color:var(--text-main);letter-spacing:-.5px;margin-bottom:8px;font-size:28px;font-weight:700}.auth-header p{color:var(--text-muted);font-size:15px;font-family:var(--font-secondary)}.auth-tabs{background:var(--blue-soft);border-radius:var(--radius-md);margin-bottom:28px;padding:6px;display:flex;position:relative}.tab-btn{color:var(--text-muted);cursor:pointer;border-radius:calc(var(--radius-md) - 4px);transition:color var(--transition-fast), background-color var(--transition-fast);font-size:14px;font-weight:600;font-family:var(--font-primary);z-index:1;background:0 0;border:none;flex:1;padding:10px 0}.tab-btn.active{color:var(--blue-primary);background:var(--card-bg);box-shadow:0 4px 10px #0052cc14}.auth-form{flex-direction:column;gap:20px;display:flex}.form-group{flex-direction:column;display:flex;position:relative}.form-label{color:var(--text-muted);font-size:14px;font-weight:600;font-family:var(--font-primary);margin-bottom:8px}.input-wrapper{align-items:center;display:flex;position:relative}.input-icon{color:var(--text-light);pointer-events:none;transition:color var(--transition-fast);position:absolute;left:16px}.auth-input{border:1.5px solid var(--border-color);border-radius:var(--radius-md);width:100%;color:var(--text-main);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);font-size:15px;font-weight:500;font-family:var(--font-primary);background:0 0;outline:none;padding:16px 16px 16px 48px}.auth-input:focus{border-color:var(--blue-accent);box-shadow:0 0 0 4px var(--blue-accent-glow)}.auth-input:focus~.input-icon,.auth-input:not(:placeholder-shown)~.input-icon{color:var(--blue-accent)}.auth-input.has-error{border-color:var(--error-color)}.auth-input.has-error:focus{box-shadow:0 0 0 4px #ef444426}.visibility-toggle{color:var(--text-light);cursor:pointer;transition:color var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:flex;position:absolute;right:16px}.visibility-toggle:hover{color:var(--blue-accent)}.auth-input::placeholder{color:var(--text-light);opacity:.8}.form-options{font-size:14px;font-family:var(--font-secondary);justify-content:space-between;align-items:center;margin-top:4px;display:flex}.remember-me{color:var(--text-muted);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;display:flex}.checkbox-custom{border:1.5px solid var(--border-color);width:18px;height:18px;transition:background-color var(--transition-fast), border-color var(--transition-fast);border-radius:4px;justify-content:center;align-items:center;display:flex;position:relative}.remember-me input{display:none}.remember-me input:checked+.checkbox-custom{background-color:var(--blue-accent);border-color:var(--blue-accent)}.checkbox-custom svg{fill:none;stroke:#fff;stroke-width:3px;stroke-dasharray:100;stroke-dashoffset:100px;width:12px;height:12px;transition:stroke-dashoffset .2s ease-in-out}.remember-me input:checked+.checkbox-custom svg{stroke-dashoffset:0}.forgot-password{color:var(--blue-accent);transition:color var(--transition-fast);font-weight:500;text-decoration:none}.forgot-password:hover{color:var(--blue-hover);text-decoration:underline}.error-message{color:var(--error-color);font-size:13px;font-family:var(--font-secondary);align-items:center;gap:6px;margin-top:6px;display:flex}.submit-btn{background:var(--blue-primary);color:#fff;border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);font-size:16px;font-weight:600;font-family:var(--font-primary);border:none;justify-content:center;align-items:center;gap:10px;padding:16px;display:flex;box-shadow:0 4px 12px #0052cc26}.submit-btn:hover{background:var(--blue-hover);transform:translateY(-1px);box-shadow:0 6px 20px #0052cc40}.submit-btn:active{transform:translateY(1px)}.submit-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.spinner{border:2.5px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:20px;height:20px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.social-divider{text-align:center;color:var(--text-light);font-size:13px;font-family:var(--font-secondary);align-items:center;margin:28px 0;display:flex}.social-divider:before,.social-divider:after{content:"";border-bottom:1.5px solid var(--border-color);opacity:.5;flex:1}.social-divider:not(:empty):before{margin-right:16px}.social-divider:not(:empty):after{margin-left:16px}.social-buttons{grid-template-columns:1fr 1fr;gap:12px;display:grid}.social-btn{background:var(--card-bg);border:1.5px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;color:var(--text-main);transition:background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);font-size:14px;font-weight:600;font-family:var(--font-primary);justify-content:center;align-items:center;gap:8px;padding:12px;display:flex}.social-btn:hover{background:var(--blue-soft);border-color:var(--blue-accent);transform:translateY(-1px)}.social-btn svg{width:18px;height:18px}.auth-switch{text-align:center;color:var(--text-muted);font-size:14px;font-family:var(--font-secondary);margin-top:28px}.auth-switch-btn{color:var(--blue-accent);cursor:pointer;transition:color var(--transition-fast);font-weight:600;font-family:var(--font-secondary);background:0 0;border:none}.auth-switch-btn:hover{color:var(--blue-hover);text-decoration:underline}.dashboard-layout{background:var(--bg-gradient);width:100%;min-height:100vh;display:flex}.dashboard-sidebar{-webkit-backdrop-filter:blur(25px)saturate(180%);z-index:10;background:linear-gradient(#f0f5ffd9 0%,#e1ebffd9 100%);border-right:1px solid #0052cc14;flex-direction:column;width:280px;padding:32px 24px;display:flex;position:fixed;top:0;bottom:0;left:0;box-shadow:10px 0 40px #0052cc05}html.dark .dashboard-sidebar{background:#0f172ab3;border-right:1px solid #ffffff0f;box-shadow:10px 0 40px #0003}.sidebar-brand{align-items:center;gap:14px;margin-bottom:48px;display:flex}.sidebar-brand .logo-wrapper{border-radius:var(--radius-md);width:44px;height:44px;margin-bottom:0;animation:4s ease-in-out infinite alternate logoPulse;box-shadow:0 4px 12px #0052cc26}@keyframes logoPulse{0%{filter:drop-shadow(0 0 #06f0);transform:scale(1)}to{filter:drop-shadow(0 0 8px #0066ff4d);transform:scale(1.03)}}.brand-name{letter-spacing:-.5px;background:linear-gradient(135deg, var(--blue-primary) 0%, var(--blue-accent) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:18px;font-weight:800}html.dark .brand-name{background:linear-gradient(135deg,#93c5fd 0%,#3b82f6 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.sidebar-nav{flex-direction:column;flex-grow:1;gap:10px;display:flex}.nav-item{border-radius:var(--radius-md);color:#475569;cursor:pointer;width:100%;transition:all var(--transition-fast);background:0 0;border:none;align-items:center;gap:14px;padding:14px 18px;font-size:14px;font-weight:700;text-decoration:none;display:flex;position:relative}.nav-item:before{content:"";background:var(--blue-accent);opacity:0;width:4px;height:50%;transition:all var(--transition-fast);border-radius:0 4px 4px 0;position:absolute;top:25%;left:0;transform:scaleY(.3)}.nav-item:hover{color:var(--blue-accent);background:#0066ff14}html.dark .nav-item:hover{color:var(--blue-accent);background:#ffffff08}.nav-item:hover:before{opacity:.5;transform:scaleY(1)}.nav-item:hover svg{color:var(--blue-accent);transform:translate(3px)}.nav-item.active{background:linear-gradient(135deg, var(--blue-primary) 0%, var(--blue-accent) 100%);box-shadow:0 8px 20px var(--blue-accent-glow);color:#fff!important}.nav-item.active:before{opacity:1;background:#fff;transform:scaleY(1.2)}.nav-item.active svg{color:#fff!important;transform:none!important}.sidebar-footer{border-top:1px solid #0052cc14;flex-direction:column;gap:20px;padding-top:24px;display:flex}html.dark .sidebar-footer{border-top:1px solid #ffffff14}.user-profile{border-radius:var(--radius-md);background:#fff;border:1px solid #0052cc14;padding:12px 14px;box-shadow:0 4px 12px #0052cc0a}html.dark .user-profile{background:#ffffff05;border:1px solid #ffffff0a}.user-avatar{background:linear-gradient(135deg, var(--blue-primary) 0%, var(--blue-accent) 100%);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:42px;height:42px;font-size:14px;font-weight:700;display:flex;box-shadow:0 4px 10px #0052cc26}.online-badge{background-color:var(--success-color);border:2px solid var(--card-bg);border-radius:50%;width:11px;height:11px;animation:2s infinite pulseOnline;position:absolute;bottom:1px;right:1px}@keyframes pulseOnline{0%{box-shadow:0 0 #22c55e66}70%{box-shadow:0 0 0 6px #22c55e00}to{box-shadow:0 0 #22c55e00}}.user-info{flex-direction:column;gap:2px;display:flex}.user-name{color:var(--text-main);letter-spacing:-.2px;font-size:14px;font-weight:700}.user-role{color:var(--text-muted);font-size:11px;font-weight:600;font-family:var(--font-secondary)}.logout-btn{border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);background:0 0;justify-content:center;align-items:center;gap:10px;width:100%;padding:12px;font-size:14px;font-weight:700;display:flex}.logout-btn:hover{color:var(--error-color);background:#ef444414;border-color:#ef44444d;box-shadow:0 4px 12px #ef44440d}.dashboard-main{flex-grow:1;width:calc(100% - 260px);max-width:1200px;margin-left:260px;padding:40px}.mobile-header{display:none}@media (width<=992px){.dashboard-layout{flex-direction:column}.mobile-header{background:var(--card-bg);border-bottom:1px solid var(--border-color);-webkit-backdrop-filter:blur(20px);z-index:99;justify-content:space-between;align-items:center;width:100%;padding:14px 24px;display:flex;position:sticky;top:0;box-shadow:0 4px 12px #0000000d}.menu-toggle-btn{color:var(--text-main);cursor:pointer;border-radius:var(--radius-sm);transition:background-color var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;padding:8px;display:flex}.menu-toggle-btn:hover{background-color:var(--blue-light)}.dashboard-sidebar{width:280px;height:100vh;transition:transform var(--transition-normal);z-index:1000;border-right:1px solid var(--card-border);border-bottom:none;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%)}.dashboard-sidebar.open{transform:translate(0)}.sidebar-backdrop{-webkit-backdrop-filter:blur(4px);z-index:999;animation:fadeIn var(--transition-normal);background:#0f172a66;position:fixed;inset:0}.dashboard-main{width:100%;margin-left:0;padding:24px}}.dashboard-header{justify-content:space-between;align-items:center;gap:20px;margin-bottom:32px;display:flex}@media (width<=600px){.dashboard-header{flex-direction:column;align-items:flex-start}.header-actions{flex-direction:column;width:100%}.header-actions button{width:100%}}.header-title h2{color:var(--text-main);letter-spacing:-.5px;margin-bottom:4px;font-size:26px;font-weight:700}.header-title p{color:var(--text-muted);font-size:14px;font-family:var(--font-secondary)}.header-actions{gap:12px;display:flex}.action-btn{border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);font-size:14px;font-weight:600;font-family:var(--font-primary);border:none;align-items:center;gap:8px;padding:12px 18px;display:flex}.action-btn.primary{background:var(--blue-primary);color:#fff;box-shadow:0 4px 12px #0052cc26}.action-btn.primary:hover{background:var(--blue-hover);transform:translateY(-1px)}.action-btn.secondary{background:var(--card-bg);border:1px solid var(--border-color);color:var(--text-main)}.action-btn.secondary:hover{background:var(--blue-soft);border-color:var(--blue-accent);transform:translateY(-1px)}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin-bottom:32px;display:grid}.stat-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-md);box-shadow:var(--card-shadow);transition:transform var(--transition-fast), box-shadow var(--transition-fast);align-items:center;gap:20px;padding:24px;display:flex}.stat-card:hover{transform:translateY(-2px);box-shadow:0 10px 25px #0052cc14}.stat-icon{border-radius:var(--radius-sm);justify-content:center;align-items:center;width:48px;height:48px;display:flex}.stat-icon.purple{color:#aa3bff;background:#aa3bff1a}.stat-icon.green{color:#22c55e;background:#22c55e1a}.stat-icon.red{color:#ef4444;background:#ef44441a}.stat-icon.orange{color:#fb923c;background:#fb923c1a}.stat-data{flex-direction:column;display:flex}.stat-label{color:var(--text-muted);margin-bottom:4px;font-size:13px;font-weight:600}.stat-value{color:var(--text-main);letter-spacing:-.2px;font-size:18px;font-weight:700}.visualization-section{grid-template-columns:1.8fr 1fr;gap:24px;margin-bottom:32px;display:grid}@media (width<=900px){.visualization-section{grid-template-columns:1fr}}.chart-card,.overview-summary-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-md);box-shadow:var(--card-shadow);padding:28px}.chart-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.chart-header h3,.overview-summary-card h3{color:var(--text-main);font-size:16px;font-weight:700}.chart-legend{gap:16px;display:flex}.legend-item{color:var(--text-muted);align-items:center;gap:6px;font-size:12px;font-weight:600;display:flex}.legend-color{border-radius:50%;width:8px;height:8px}.legend-color.pemasukan{background:#3b82f6}.legend-color.pengeluaran{background:#fb923c}.chart-body{width:100%}.custom-chart{width:100%;height:auto;overflow:visible}.chart-bar{transition:opacity var(--transition-fast), transform var(--transition-fast);cursor:pointer}.chart-bar:hover{opacity:1;transform-origin:bottom;transform:scaleY(1.02)}.summary-subtitle{color:var(--text-muted);margin-top:4px;margin-bottom:20px;font-size:12px}.summary-list{flex-direction:column;gap:12px;margin-bottom:20px;display:flex}.summary-item{justify-content:space-between;align-items:center;font-size:14px;display:flex}.summary-label{color:var(--text-muted);font-weight:500}.summary-value{font-weight:700}.summary-value.text-green{color:#22c55e}.summary-value.text-yellow{color:#eab308}.summary-value.text-red{color:#ef4444}.summary-divider{border-bottom:1px solid var(--border-color);opacity:.5}.progress-bar-wrapper{margin-top:24px}.progress-label{color:var(--text-muted);justify-content:space-between;margin-bottom:8px;font-size:13px;font-weight:600;display:flex}.progress-track{background:var(--blue-light);border-radius:4px;height:8px;overflow:hidden}.progress-fill{background:var(--blue-primary);height:100%;transition:width var(--transition-slow);border-radius:4px}.table-section{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-md);box-shadow:var(--card-shadow);padding:28px}.table-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;display:flex}.table-header h3{font-size:16px;font-weight:700}.table-controls{flex-wrap:wrap;gap:12px;display:flex}.search-bar{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-muted);align-items:center;gap:8px;max-width:280px;padding:8px 12px;display:flex}.search-bar input{font-family:var(--font-primary);color:var(--text-main);background:0 0;border:none;outline:none;width:100%;font-size:13px}.filter-select-group{gap:8px;display:flex}.filter-select-group select{border-radius:var(--radius-sm);border:1px solid var(--border-color);background:var(--card-bg);color:var(--text-main);font-family:var(--font-primary);cursor:pointer;outline:none;padding:8px 12px;font-size:13px;font-weight:600}.table-wrapper{width:100%;overflow-x:auto}table{border-collapse:collapse;text-align:left;width:100%;font-size:14px}th,td{border-bottom:1px solid var(--border-color);padding:16px}th{color:var(--text-muted);letter-spacing:.2px;background:var(--blue-soft);font-size:13px;font-weight:700}@media (prefers-color-scheme:dark){th{background:#1e293b80}}tbody tr{transition:background-color var(--transition-fast)}tbody tr:hover{background-color:var(--blue-soft)}.tx-name{color:var(--text-main);font-weight:700}.tx-block{font-family:var(--font-secondary);color:var(--text-muted);font-weight:600}.tx-category{color:var(--text-muted);background:var(--blue-light);border-radius:4px;padding:4px 8px;font-size:12px;font-weight:600}.tx-date{color:var(--text-light);font-size:13px}.tx-amount{font-weight:700}.tx-amount.pemasukan{color:#22c55e}.tx-amount.pengeluaran{color:#ef4444}.badge{border-radius:12px;align-items:center;padding:4px 10px;font-size:12px;font-weight:700;display:inline-flex}.badge.lunas{color:#22c55e;background:#22c55e1a}.badge.pending{color:#ca8a04;background:#eab3081a}.badge.tunggakan{color:#ef4444;background:#ef44441a}.btn-action-verify{background:var(--blue-primary);color:#fff;cursor:pointer;transition:background-color var(--transition-fast);border:none;border-radius:4px;padding:6px 12px;font-size:12px;font-weight:600}.btn-action-verify:hover{background:var(--blue-hover)}.action-completed{color:var(--text-light)}.empty-row{text-align:center;color:var(--text-muted);padding:32px 0}.modal-backdrop{-webkit-backdrop-filter:blur(8px);z-index:100;background:#0f172a66;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-lg);width:100%;max-width:520px;animation:modalSlideUp var(--transition-normal);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:32px;box-shadow:0 30px 60px -15px #00000040}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.modal-header h3{letter-spacing:-.3px;font-size:20px;font-weight:700}.close-modal-btn{color:var(--text-muted);cursor:pointer;transition:color var(--transition-fast);background:0 0;border:none}.close-modal-btn:hover{color:var(--error-color)}.modal-form{flex-direction:column;gap:16px;display:flex}.modal-form-error{background:var(--error-bg);color:var(--error-color);border-radius:var(--radius-sm);padding:12px;font-size:13px;font-weight:600}.modal-input{border:1px solid var(--border-color);border-radius:var(--radius-sm);width:100%;font-family:var(--font-primary);color:var(--text-main);transition:all var(--transition-fast);background:0 0;outline:none;padding:12px 16px;font-size:14px}.modal-input:focus{border-color:var(--blue-accent);box-shadow:0 0 0 3px var(--blue-accent-glow)}.form-row{gap:16px;display:flex}.flex-1{flex:1}.modal-radio-group{gap:20px;margin-top:4px;display:flex}.radio-label{color:var(--text-muted);cursor:pointer;align-items:center;gap:6px;font-size:14px;font-weight:600;display:flex}.radio-label input{width:16px;height:16px}.modal-submit-btn{margin-top:12px}.residents-view,.reports-view{animation:fadeIn var(--transition-normal)}.view-title-row{justify-content:space-between;align-items:center;gap:20px;margin-bottom:32px;display:flex}.view-title-row h2{color:var(--text-main);letter-spacing:-.5px;margin-bottom:4px;font-size:26px;font-weight:700}.view-title-row p{color:var(--text-muted);font-size:14px;font-family:var(--font-secondary)}@media (width<=768px){.view-title-row{flex-direction:column;align-items:flex-start}}.export-toast{background:var(--card-bg);border:1px solid var(--blue-accent);border-radius:var(--radius-sm);z-index:1000;color:var(--text-main);animation:slideInRight var(--transition-normal);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);align-items:center;gap:12px;padding:16px 24px;font-size:14px;font-weight:600;display:flex;position:fixed;bottom:24px;right:24px;box-shadow:0 10px 30px #0052cc26}@keyframes slideInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media print{body{color:#000;background:#fff;font-size:12pt}.dashboard-sidebar,.header-actions,.table-controls,.export-toast,.nav-item,.logout-btn{display:none!important}.dashboard-main{width:100%!important;margin-left:0!important;padding:0!important}.table-section,.chart-card,.overview-summary-card{page-break-inside:avoid;box-shadow:none!important;background:0 0!important;border:none!important;padding:0!important}th{color:#000!important;background:#f1f5f9!important}}.theme-toggle-floating{background:var(--card-bg);border:1px solid var(--card-border);width:44px;height:44px;box-shadow:var(--card-shadow);color:var(--text-main);cursor:pointer;z-index:100;transition:transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:50%;justify-content:center;align-items:center;display:flex;position:fixed;top:24px;right:24px}.theme-toggle-floating:hover{background:var(--blue-soft);color:var(--blue-accent);transform:scale(1.05)}.theme-toggle-btn{border-radius:var(--radius-md);background:var(--card-bg);border:1px solid var(--border-color);width:42px;height:42px;color:var(--text-main);cursor:pointer;transition:all var(--transition-fast);justify-content:center;align-items:center;display:flex}.theme-toggle-btn:hover{background:var(--blue-soft);border-color:var(--blue-accent);color:var(--blue-accent);transform:translateY(-1px)}.report-filter-section{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-md);box-shadow:var(--card-shadow);margin-bottom:24px;padding:20px}.report-filter-container{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;width:100%;display:flex}.report-filter-select{align-items:center;gap:8px;display:flex}.report-filter-select select{border-radius:var(--radius-sm);border:1px solid var(--border-color);background:var(--card-bg);color:var(--text-main);font-family:var(--font-primary);cursor:pointer;outline:none;padding:8px 12px;font-size:13px;font-weight:600}.report-filter-label{color:var(--text-muted);font-size:14px;font-weight:600}.report-metadata{color:var(--text-light);font-size:13px;font-weight:500}@media (width<=768px){.table-header{flex-direction:column;align-items:stretch}.table-controls{flex-direction:column;align-items:stretch;width:100%}.search-bar{width:100%;max-width:100%}.filter-select-group{flex-wrap:wrap;width:100%}.filter-select-group select{flex:1;min-width:120px}.report-filter-container{flex-direction:column;align-items:flex-start}.report-metadata{margin-top:4px}}@media (width<=576px){.form-row{flex-direction:column;gap:16px}.modal-card{padding:24px 20px}.modal-radio-group{flex-direction:column;align-items:flex-start;gap:10px}}.MuiTableCell-root{color:var(--text-main)!important;background-color:#0000!important}.MuiTableCell-head{color:var(--text-muted)!important;background-color:var(--blue-soft)!important}.MuiTableCell-body{color:var(--text-main)!important;border-bottom:1px solid var(--border-color)!important;background-color:#0000!important}.MuiTablePagination-root,.MuiTablePagination-selectLabel,.MuiTablePagination-displayedRows,.MuiTablePagination-select,.MuiTablePagination-actions,.MuiTablePagination-actions button,.MuiTablePagination-actions svg,.MuiButtonBase-root,.MuiIconButton-root,.MuiIconButton-root svg,.MuiTableSortLabel-root,.MuiTableSortLabel-icon,.MuiTableSortLabel-root:hover,.MuiTableSortLabel-root.Mui-active,.MuiTableSortLabel-root.Mui-active .MuiTableSortLabel-icon{color:var(--text-muted)!important}.MuiTextField-root input{color:var(--text-main)!important}.info-center-view{animation:fadeIn var(--transition-normal)}.info-center-layout{grid-template-columns:2fr 1fr;align-items:start;gap:24px;margin-top:24px;display:grid}@media (width<=992px){.info-center-layout{grid-template-columns:1fr}}.announcements-column,.announcement-list{flex-direction:column;gap:20px;display:flex}.announcement-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-md);box-shadow:var(--card-shadow);transition:transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);flex-direction:column;gap:14px;padding:24px;display:flex}.announcement-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px #0052cc14}.announcement-card.priority-high{border-left:5px solid var(--error-color);background:linear-gradient(90deg, #ef444408 0%, var(--card-bg) 100%)}.announcement-card-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex}.badge-group{align-items:center;gap:8px;display:flex}.announcement-category{text-transform:uppercase;letter-spacing:.5px;border-radius:20px;padding:4px 10px;font-size:11px;font-weight:700}.announcement-category.kegiatan{color:#3b82f6;background:#3b82f61a}.announcement-category.keamanan{color:#f97316;background:#f973161a}.announcement-category.kebersihan{color:#22c55e;background:#22c55e1a}.announcement-category.pengumuman{color:#a855f7;background:#a855f71a}.announcement-category.lainnya{color:#64748b;background:#64748b1a}.priority-badge.high{background:var(--error-bg);color:var(--error-color);text-transform:uppercase;letter-spacing:.5px;border-radius:20px;padding:4px 10px;font-size:11px;font-weight:700}.announcement-date{color:var(--text-light);font-size:12px;font-family:var(--font-secondary)}.announcement-card-body h3{color:var(--text-main);letter-spacing:-.3px;margin-bottom:8px;font-size:18px;font-weight:700}.announcement-card-body p{color:var(--text-muted);font-size:14px;line-height:1.6;font-family:var(--font-secondary)}.announcement-card-footer{border-top:1px solid var(--border-color);justify-content:flex-end;margin-top:4px;padding-top:12px;display:flex}.delete-announcement-btn{color:var(--text-light);cursor:pointer;transition:color var(--transition-fast);background:0 0;border:none;border-radius:4px;padding:4px 8px;font-size:12px;font-weight:600}.delete-announcement-btn:hover{color:var(--error-color);background-color:var(--error-bg)}.empty-state-card{background:var(--card-bg);border:2px dashed var(--border-color);border-radius:var(--radius-md);text-align:center;color:var(--text-muted);flex-direction:column;align-items:center;gap:12px;padding:48px;display:flex}.empty-state-card svg{color:var(--text-light);margin-bottom:8px}.empty-state-card h4{color:var(--text-main);font-size:16px;font-weight:700}.empty-state-card p{max-width:320px;font-size:14px}.contacts-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-md);box-shadow:var(--card-shadow);padding:24px}.contacts-card h3{color:var(--text-main);margin-bottom:4px;font-size:16px;font-weight:700}.contacts-subtitle{color:var(--text-muted);font-size:12px;line-height:1.4;font-family:var(--font-secondary);margin-bottom:20px}.contacts-list{flex-direction:column;gap:16px;display:flex}.contact-item{border-bottom:1px solid var(--border-color);flex-direction:column;gap:6px;padding-bottom:14px;display:flex}.contact-item:last-child{border-bottom:none;padding-bottom:0}.contact-info{flex-direction:column;gap:2px;display:flex}.contact-name{color:var(--text-main);font-size:14px;font-weight:700}.contact-role{color:var(--text-light);text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:600}.contact-phone{color:var(--blue-accent);width:fit-content;transition:color var(--transition-fast), transform var(--transition-fast);align-items:center;gap:6px;font-size:13px;font-weight:700;text-decoration:none;display:inline-flex}.contact-phone:hover{color:var(--blue-hover);transform:translate(2px)}.announcement-attachment-link{background:var(--blue-soft);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:13px;font-family:var(--font-secondary);align-items:center;margin-top:14px;padding:8px 12px;display:inline-flex}html.dark .announcement-attachment-link{background:#ffffff08}.attachment-anchor{transition:color var(--transition-fast);margin-right:6px;font-weight:700;text-decoration:none;color:var(--blue-accent)!important}.attachment-anchor:hover{color:var(--blue-hover)!important;text-decoration:underline!important}.attachment-size-lbl{color:var(--text-light);font-size:11px}.edit-announcement-btn{color:var(--text-light);cursor:pointer;transition:color var(--transition-fast), background-color var(--transition-fast);background:0 0;border:none;border-radius:4px;padding:4px 8px;font-size:12px;font-weight:600}.edit-announcement-btn:hover{color:var(--blue-accent);background-color:var(--blue-light)}html.dark .edit-announcement-btn:hover{background-color:#ffffff0d}@media (width<=768px){body:before,body:after{filter:none!important;animation:none!important;display:none!important}.auth-container,.dashboard-sidebar,.mobile-header,.modal-backdrop,.modal-card,.export-toast{-webkit-backdrop-filter:none!important}.auth-container{background-color:var(--card-bg)!important}.dashboard-sidebar{background:var(--card-bg)!important}.mobile-header,.modal-card{background-color:var(--card-bg)!important}.table-wrapper{-webkit-overflow-scrolling:touch}}