:root{--surface-ground:#f0f4f8;--surface-raised:#fff;--surface-sunken:#eef2f7;--surface-overlay:#0f244880;--ink-primary:#0f172a;--ink-secondary:#475569;--ink-tertiary:#94a3b8;--ink-inverse:#f8fafc;--brand-primary:#1b3a6b;--brand-hover:#152d54;--brand-accent:#3b6fcc;--brand-subtle:#eef3fb;--brand-strong:#0f2448;--brand-gradient:linear-gradient(135deg,#1b3a6b 0%,#3b6fcc 100%);--status-aman:#0a8a52;--status-aman-dark:#34d399;--status-aman-bg:#edf7f3;--status-aman-bg-d:#34d3991a;--status-aman-border:#0a8a522e;--status-aman-border-d:#34d39933;--status-hati:#b87008;--status-hati-dark:#fbb83f;--status-hati-bg:#faf6eb;--status-hati-bg-d:#fbb83f1a;--status-hati-border:#b870082e;--status-hati-border-d:#fbb83f33;--status-bahaya:#b82828;--status-bahaya-dark:#f87171;--status-bahaya-bg:#f7eeee;--status-bahaya-bg-d:#f871711a;--status-bahaya-border:#b828282e;--status-bahaya-border-d:#f8717133;--status-draft:#94a3b8;--status-pending:#b87008;--status-approved:#0a8a52;--status-rejected:#b82828;--status-info:#3b6fcc;--sidebar-bg:#0f2448;--sidebar-text:#c8d8f0;--sidebar-muted:#7a99c5;--sidebar-active-bg:#1b3a6b;--sidebar-active-txt:#fff;--sidebar-hover:#3b6fcc2e;--sidebar-border:#ffffff12;--sidebar-accent:#3b6fcc;--border-default:#e2e8f0;--border-strong:#cbd5e1;--border-focus:var(--brand-accent);--font-sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;--font-mono:"JetBrains Mono","SF Mono","Cascadia Code","Fira Code",ui-monospace,monospace;--text-display:2.25rem;--text-title:1.5rem;--text-heading:1.125rem;--text-body:1rem;--text-label:.875rem;--text-caption:.8125rem;--text-overline:.6875rem;--text-micro:.625rem;--leading-display:1.1;--leading-title:1.25;--leading-heading:1.35;--leading-body:1.55;--leading-label:1.4;--leading-caption:1.4;--leading-overline:1.3;--weight-display:700;--weight-title:700;--weight-heading:600;--weight-body:400;--weight-label:500;--weight-overline:600;--tracking-tight:-.02em;--tracking-overline:.08em;--tracking-mono:-.02em;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-3-5:14px;--space-4-5:18px;--space-5-5:22px;--shadow-sm:0 1px 3px #0f24480f;--shadow-md:0 1px 4px #0f24480f;--shadow-lg:0 8px 24px #0f24481f,0 2px 8px #0f24480f;--shadow-focus:0 0 0 3px var(--brand-subtle);--shadow-btn:0 2px 8px #1b3a6b40;--shadow-toast:0 8px 24px #0f24484d;--radius-xs:3px;--radius-sm:5px;--radius-md:7px;--radius-lg:9px;--radius-xl:12px;--radius-full:9999px;--duration-fast:.1s;--duration-normal:.2s;--duration-slow:.35s;--duration-slower:.5s;--ease-default:cubic-bezier(.22,1,.36,1);--ease-bounce:cubic-bezier(.34,1.56,.64,1);--opacity-hover:.88;--opacity-active:.75;--opacity-disabled:.45;--opacity-subtle:.3;--opacity-muted:.7;--opacity-threshold:.25;--sidebar-width:196px;--header-height:48px;--bottom-nav-height:56px;--breakpoint-mobile:768px;--breakpoint-tablet:1024px;--breakpoint-desktop:1280px;--z-base:0;--z-raised:10;--z-sticky:20;--z-overlay:30;--z-modal:40;--z-toast:50}[data-theme=field]{--surface-ground:#080e1a;--surface-raised:#0f1a2e;--surface-sunken:#0a1220;--surface-overlay:#000000a6;--ink-primary:#e8f0fc;--ink-secondary:#8ba8d4;--ink-tertiary:#4d6a9a;--ink-inverse:#0f1a2e;--brand-primary:#5b8fe8;--brand-hover:#7aa8f0;--brand-accent:#7aa8f0;--brand-subtle:#5b8fe81f;--brand-strong:#3b6fcc;--brand-gradient:linear-gradient(135deg,#5b8fe8 0%,#7aa8f0 100%);--border-default:#1a2e4a;--border-strong:#243d5c;--sidebar-bg:#050d1a;--sidebar-text:#8aadda;--sidebar-muted:#4d6a9a;--sidebar-active-bg:#0f2448;--sidebar-hover:#5b8fe826;--sidebar-border:#ffffff0d;--shadow-sm:0 1px 2px #00000040;--shadow-md:0 2px 8px #0000004d,0 1px 2px #0003;--shadow-lg:0 8px 24px #0006,0 2px 8px #00000040;--shadow-btn:0 2px 8px #00000059;--shadow-toast:0 8px 24px #00000073;--shadow-focus:0 0 0 3px var(--brand-subtle)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;font-size:16px}body{font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--leading-body);color:var(--ink-primary);background:var(--surface-ground);transition:background var(--duration-normal)linear,color var(--duration-normal)linear}h1,h2,h3,h4,h5,h6{font-family:var(--font-sans);font-weight:var(--weight-heading);line-height:var(--leading-heading);color:var(--ink-primary)}p{color:var(--ink-secondary);line-height:var(--leading-body)}a{color:var(--brand-accent);text-decoration:none}a:hover{text-decoration:underline}.mono,code,kbd,pre{font-family:var(--font-mono);letter-spacing:var(--tracking-mono);font-variant-numeric:tabular-nums}.overline{font-size:var(--text-overline);font-weight:var(--weight-overline);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--ink-tertiary)}.currency{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-mono)}.currencyDisplay{font-family:var(--font-mono);font-size:var(--text-display);font-weight:var(--weight-display);font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:var(--leading-display)}.currencyNegative{color:var(--status-bahaya)}[data-theme=field] .currencyNegative{color:var(--status-bahaya-dark)}.appShell{flex-direction:column;height:100vh;display:flex;overflow:hidden}.appHeader{height:var(--header-height);background:var(--surface-raised);border-bottom:1px solid var(--border-default);box-shadow:var(--shadow-md);z-index:var(--z-sticky);flex-shrink:0}.appBody{flex:1;display:flex;overflow:hidden}.appSidebar{width:var(--sidebar-width);background:var(--sidebar-bg);scrollbar-width:thin;scrollbar-color:var(--sidebar-border)transparent;flex-shrink:0;overflow-y:auto}.appContent{background:var(--surface-ground);padding:var(--space-5);scrollbar-width:thin;scrollbar-color:var(--border-strong)transparent;flex:1;overflow-y:auto}.sidebarNav{flex-direction:column;min-height:100%;padding:12px 0;display:flex}.sidebarSectionLabel{font-size:var(--text-overline);font-weight:var(--weight-overline);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--sidebar-muted);padding:var(--space-4)var(--space-4)var(--space-2)}.sidebarItem{align-items:center;gap:var(--space-2);border-radius:var(--radius-md);width:calc(100% - 12px);font-family:var(--font-sans);font-size:var(--text-label);color:var(--sidebar-text);cursor:pointer;text-align:left;transition:background var(--duration-fast)var(--ease-default),color var(--duration-fast)var(--ease-default);background:0 0;border:none;border-right:2.5px solid #0000;margin:1px 6px;padding:8px 11px;font-weight:400;text-decoration:none;display:flex}.sidebarItem:hover{background:var(--sidebar-hover)}.sidebarItem[data-active=true],.sidebarItemActive{background:var(--sidebar-active-bg);color:var(--sidebar-active-txt);border-right-color:var(--sidebar-accent);font-weight:600}.sidebarSubGroup{border-left:1.5px solid var(--sidebar-border);margin:2px 0 3px 28px}.sidebarSubItem{font-family:var(--font-sans);color:var(--sidebar-muted);cursor:pointer;text-align:left;width:100%;transition:color var(--duration-fast)var(--ease-default);background:0 0;border:none;padding:5px 10px;font-size:12px;font-weight:400;text-decoration:none;display:block}.sidebarSubItem:hover{color:var(--sidebar-text)}.sidebarSubItem[data-active=true],.sidebarSubItemActive{color:#fff;font-weight:600}.sidebarBadge{border-radius:var(--radius-full);background:var(--status-hati);color:#fff;justify-content:center;align-items:center;min-width:16px;height:16px;margin-left:auto;padding:0 4px;font-size:9px;font-weight:700;display:inline-flex}.sidebarFooter{padding:10px var(--space-2);margin-top:auto}.sidebarDivider{background:var(--sidebar-border);height:1px;margin-bottom:10px}.sidebarPlanWidget{border-radius:var(--radius-md);border:1px solid var(--sidebar-border);background:#ffffff0a;padding:9px 11px}.sidebarPlanMeta{color:var(--sidebar-muted);margin-bottom:3px;font-size:10px}.sidebarPlanRow{justify-content:space-between;align-items:center;display:flex}.sidebarPlanName{color:#5b8fe8;font-size:11.5px;font-weight:600}[data-theme=field] .sidebarPlanName{color:#7aa8f0}.sidebarPlanPrice{font-family:var(--font-mono);color:var(--sidebar-muted);font-size:10px}.card{background:var(--surface-raised);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);transition:background var(--duration-normal)linear;overflow:hidden}.cardHeader{padding:var(--space-4)var(--space-4)var(--space-3);border-bottom:1px solid var(--border-default);justify-content:space-between;align-items:flex-start;gap:var(--space-3);display:flex}.cardOverline{font-size:var(--text-overline);font-weight:var(--weight-overline);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--ink-tertiary);margin-bottom:var(--space-1)}.cardTitle{font-size:var(--text-heading);font-weight:var(--weight-heading);color:var(--ink-primary);line-height:var(--leading-heading)}.cardBody{padding:var(--space-4)}.cardFooter{padding:var(--space-3)var(--space-4);border-top:1px solid var(--border-default);gap:var(--space-2);background:#0f244804;align-items:center;display:flex}[data-theme=field] .cardFooter{background:#0000001a}.card[data-status=aman]{border-left:3.5px solid var(--status-aman)}.card[data-status=hati]{border-left:3.5px solid var(--status-hati);background:var(--status-hati-bg)}.card[data-status=bahaya]{border-left:3.5px solid var(--status-bahaya);background:var(--status-bahaya-bg)}[data-theme=field] .card[data-status=hati]{background:var(--status-hati-bg-d)}[data-theme=field] .card[data-status=bahaya]{background:var(--status-bahaya-bg-d)}.budgetBar{background:var(--surface-sunken);border-radius:4px;height:8px;position:relative}.budgetBarFill{height:100%;transition:width .5s var(--ease-default),background .3s ease;border-radius:4px}.budgetBarThreshold{background:var(--status-bahaya);opacity:.25;border-radius:1px;width:1.5px;position:absolute;top:-2px;bottom:-2px;left:85%}.budgetBarFill[data-status=aman]{background:var(--status-aman)}.budgetBarFill[data-status=hati]{background:var(--status-hati)}.budgetBarFill[data-status=bahaya]{background:var(--status-bahaya)}.budgetBarFill[data-status=over]{background:repeating-linear-gradient(-45deg,var(--status-bahaya),var(--status-bahaya)4px,#7a1111 4px,#7a1111 8px)}[data-theme=field] .budgetBarFill[data-status=aman]{background:var(--status-aman-dark)}[data-theme=field] .budgetBarFill[data-status=hati]{background:var(--status-hati-dark)}[data-theme=field] .budgetBarFill[data-status=bahaya]{background:var(--status-bahaya-dark)}.btn{justify-content:center;align-items:center;gap:var(--space-2);font-family:var(--font-sans);font-size:var(--text-label);border-radius:var(--radius-md);cursor:pointer;transition:opacity var(--duration-fast)var(--ease-default),background var(--duration-fast)var(--ease-default);white-space:nowrap;font-weight:600;text-decoration:none;display:inline-flex}.btn:disabled{opacity:.45;cursor:not-allowed}.btnSm{font-size:var(--text-caption);padding:6px 12px}.btnMd{font-size:var(--text-label);padding:8px 16px}.btnLg{font-size:var(--text-body);padding:12px 22px}.btnFull{width:100%}.btnPrimary{background:var(--brand-gradient);color:#fff;box-shadow:var(--shadow-btn);border:none}.btnPrimary:hover:not(:disabled){opacity:.88}.btnPrimary:active:not(:disabled){opacity:.75}.btnSecondary{color:var(--ink-primary);border:1px solid var(--border-default);box-shadow:none;background:0 0}.btnSecondary:hover:not(:disabled){background:var(--surface-sunken)}.btnDanger{color:var(--status-bahaya);border:1px solid var(--status-bahaya);box-shadow:none;background:0 0}.btnDanger:hover:not(:disabled){background:var(--status-bahaya);color:#fff}[data-theme=field] .btnDanger{color:var(--status-bahaya-dark);border-color:var(--status-bahaya-dark)}.btnGhost{color:var(--brand-accent);box-shadow:none;background:0 0;border:none}.btnGhost:hover:not(:disabled){background:var(--brand-subtle)}.btn:focus-visible{box-shadow:var(--shadow-focus);outline:none}.input{width:100%;padding:var(--space-3)var(--space-4);font-family:var(--font-sans);font-size:var(--text-body);color:var(--ink-primary);background:var(--surface-sunken);border:1.5px solid var(--border-default);border-radius:var(--radius-md);transition:border-color var(--duration-fast)var(--ease-default),box-shadow var(--duration-fast)var(--ease-default);-webkit-appearance:none}.input::placeholder{color:var(--ink-tertiary)}.input:focus{border-color:var(--brand-accent);box-shadow:var(--shadow-focus);outline:none}.input:invalid:not(:placeholder-shown){border-color:var(--status-bahaya);box-shadow:0 0 0 3px var(--status-bahaya-bg)}[data-theme=field] .input:invalid:not(:placeholder-shown){box-shadow:0 0 0 3px var(--status-bahaya-bg-d)}.inputCurrency{font-family:var(--font-mono);font-size:var(--text-body);text-align:right;letter-spacing:var(--tracking-mono);padding-left:40px}.select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394A3B8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding-right:36px}.label{font-size:var(--text-label);font-weight:var(--weight-label);color:var(--ink-secondary);margin-bottom:var(--space-2);display:block}.labelRequired:after{content:" *";color:var(--status-bahaya)}.fieldHint{font-size:var(--text-caption);color:var(--ink-tertiary);margin-top:var(--space-1)}.fieldError{font-size:var(--text-caption);color:var(--status-bahaya);margin-top:var(--space-1)}[data-theme=field] .fieldError{color:var(--status-bahaya-dark)}.badge{border-radius:var(--radius-sm);white-space:nowrap;align-items:center;gap:4px;padding:2px 8px;font-size:11px;font-weight:600;line-height:1.4;display:inline-flex}.badge[data-dot=true]:before{content:"";background:currentColor;border-radius:50%;flex-shrink:0;width:5px;height:5px}.badgeDraft{background:var(--surface-sunken);color:var(--ink-tertiary)}.badgePending{background:var(--status-hati-bg);color:var(--status-hati);border:1px solid var(--status-hati-border)}.badgeApproved{background:var(--status-aman-bg);color:var(--status-aman);border:1px solid var(--status-aman-border)}.badgeRejected{background:var(--status-bahaya-bg);color:var(--status-bahaya);border:1px solid var(--status-bahaya-border)}.badgeInfo{background:var(--brand-subtle);color:var(--brand-accent);border:1px solid #3b6fcc33}[data-theme=field] .badgePending{background:var(--status-hati-bg-d);color:var(--status-hati-dark);border-color:var(--status-hati-border-d)}[data-theme=field] .badgeApproved{background:var(--status-aman-bg-d);color:var(--status-aman-dark);border-color:var(--status-aman-border-d)}[data-theme=field] .badgeRejected{background:var(--status-bahaya-bg-d);color:var(--status-bahaya-dark);border-color:var(--status-bahaya-border-d)}.sekilas{align-items:center;gap:var(--space-3);background:var(--surface-raised);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);margin-bottom:var(--space-4);flex-wrap:wrap;padding:9px 14px;font-size:12px;font-weight:500;display:flex}.sekilasLabel{color:var(--ink-tertiary)}.sekilasValue{font-family:var(--font-mono);letter-spacing:var(--tracking-mono);color:var(--ink-primary);font-weight:600}.sekilasSep{background:var(--border-default);flex-shrink:0;width:1px;height:14px}.toast{top:calc(var(--header-height) + 8px);background:var(--brand-primary);color:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-toast);z-index:var(--z-toast);white-space:nowrap;animation:toastIn var(--duration-slow)var(--ease-bounce);padding:8px 16px;font-size:12.5px;font-weight:600;position:fixed;left:50%;transform:translate(-50%)}@keyframes toastIn{0%{opacity:0;transform:translate(-50%)translateY(-12px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.modalOverlay{background:var(--surface-overlay);z-index:var(--z-modal);padding:var(--space-4);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--surface-raised);border:1px solid var(--border-default);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);width:100%;max-width:480px;overflow:hidden}.modalHeader{padding:var(--space-5)var(--space-5)var(--space-4);border-bottom:1px solid var(--border-default)}.modalBody{padding:var(--space-5)}.modalFooter{padding:var(--space-4)var(--space-5);border-top:1px solid var(--border-default);justify-content:flex-end;gap:var(--space-3);background:#0f244804;display:flex}[data-theme=field] .modalFooter{background:#0000001a}.table{border-collapse:collapse;width:100%;font-size:var(--text-label)}.table thead tr{border-bottom:1.5px solid var(--border-default)}.table th{padding:var(--space-2)var(--space-3);text-align:left;font-size:var(--text-overline);font-weight:var(--weight-overline);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--ink-tertiary);white-space:nowrap}.table td{padding:var(--space-3);border-bottom:1px solid var(--border-default);color:var(--ink-secondary);vertical-align:middle}.table tbody tr:last-child td{border-bottom:none}.table tbody tr:hover td{background:var(--surface-sunken)}.table td.tdAmount,.table th.thAmount{text-align:right;font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:var(--tracking-mono);color:var(--ink-primary);font-weight:600}.bottomNav{background:var(--sidebar-bg);border-top:1px solid var(--sidebar-border);z-index:var(--z-sticky);flex-shrink:0;justify-content:space-around;padding:5px 0 7px;display:none}.bottomNavItem{color:var(--sidebar-muted);font-family:var(--font-sans);cursor:pointer;background:0 0;border:none;flex-direction:column;justify-content:center;align-items:center;gap:2px;min-height:44px;padding:3px 14px;font-size:10px;font-weight:400;text-decoration:none;display:flex}.bottomNavItem[data-active=true]{color:#fff;font-weight:600}.emptyState{text-align:center;padding:var(--space-12)var(--space-8);justify-content:center;align-items:center;gap:var(--space-3);flex-direction:column;display:flex}.emptyStateIcon{margin-bottom:var(--space-2);opacity:.5;font-size:32px}.emptyStateTitle{font-size:var(--text-heading);font-weight:var(--weight-heading);color:var(--ink-primary)}.emptyStateDesc{font-size:var(--text-body);color:var(--ink-secondary);max-width:320px;line-height:var(--leading-body)}.skeleton{background:linear-gradient(90deg,var(--surface-sunken)25%,var(--border-default)50%,var(--surface-sunken)75%);border-radius:var(--radius-md);background-size:200% 100%;animation:1.5s ease-in-out infinite skeletonPulse}@keyframes skeletonPulse{0%{background-position:200% 0}to{background-position:-200% 0}}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:var(--ink-tertiary)}:focus-visible{outline:2px solid var(--brand-accent);outline-offset:2px}:focus:not(:focus-visible){outline:none}button,a,[role=button],select{min-width:44px;min-height:44px}@media (max-width:767px){.appSidebar{display:none}.bottomNav{display:flex}.input,select,textarea{min-height:48px;font-size:16px}.btnPrimary{width:100%;padding:14px}.appContent{padding:var(--space-4)}}@media (min-width:768px){.appSidebar{display:block}.bottomNav{display:none}}@media (min-width:1024px){.appContent{padding:var(--space-6)}}.auth-wrapper{min-height:100vh;padding:var(--space-5);background:var(--surface-ground);justify-content:center;align-items:center;display:flex}@media (max-width:767px){.auth-wrapper{padding:var(--space-4)}}@media print{.appSidebar,.appHeader,.bottomNav,.toast{display:none}.appContent{padding:0}body{color:#000;background:#fff}}