:root{--color-bg:#0a0a0c;--color-sidebar:#111;--color-surface:#15151c;--color-surface-hover:#1c1c26;--color-border:#2a2a34;--color-brand:#f2811d;--color-accent:#f5e220;--color-text-primary:#f5f5f7;--color-text-secondary:#a1a1aa;--color-text-muted:#6b6b76;--color-status-success:#22c55e;--color-status-info:#3b82f6;--color-status-danger:#ef4444;--color-status-ai:#ec4899;--color-status-warning:#f59e0b;--color-stat-waiting:#f97316;--color-stat-reserved:#a855f7;--color-stat-inprogress:#3b82f6;--color-stat-completed:#22c55e;--color-stat-paid:#14b8a6;--color-stat-overdue:#ef4444;--color-stat-cancelled:#9ca3af;--color-cta:#d4f535;--color-cta-text:#0a0a0c;--color-pay:#16a34a;--color-button-bg:#2a2a32;--color-button-bg-hover:#38383f;--color-button-active-bg:#3a3a44;--font-display:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-body:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"JetBrains Mono", "Courier New", monospace;--fs-xs:.75rem;--fs-sm:.875rem;--fs-base:1rem;--fs-lg:1.25rem;--fs-xl:1.5rem;--fs-2xl:2rem;--fw-normal:400;--fw-semibold:600;--fw-bold:700;--fw-extrabold:800;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--shadow-card:0 1px 3px #0006;--shadow-elevated:0 8px 24px #00000080}body{background:var(--color-bg);color:var(--color-text-primary);font-family:var(--font-body);font-size:var(--fs-base);margin:0}ul,ol{margin:var(--space-2) 0;padding-left:20px}li{margin-bottom:4px}.app-shell{min-height:100vh;display:flex}.sidebar{background:var(--color-sidebar);width:260px;padding:var(--space-6) var(--space-4);gap:var(--space-2);border-right:none;flex-direction:column;display:flex}@media (width>=768px) and (width<=1024px){.sidebar{width:200px;padding:var(--space-4) var(--space-3)}.sidebar button{padding:var(--space-2) var(--space-3);font-size:var(--fs-xs)}}.hamburger-button{display:none}@media (width<=767px){.hamburger-button{top:var(--space-4);left:var(--space-4);z-index:60;background:var(--color-sidebar);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);color:var(--color-text-primary);cursor:pointer;font-size:20px;display:block;position:fixed}.sidebar{z-index:55;width:240px;max-width:80vw;height:100vh;transition:transform .2s;position:fixed;top:0;left:0;overflow-y:auto;transform:translate(-100%)}.sidebar.sidebar-open{transform:translate(0)}.sidebar-backdrop{display:none}.sidebar-backdrop.sidebar-open{z-index:50;background:#00000080;display:block;position:fixed;inset:0}}.sidebar .brand{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-style:italic;font-size:var(--fs-xl);color:var(--color-brand);letter-spacing:-.02em;margin-bottom:var(--space-6);text-align:center}.sidebar button{background:var(--color-button-bg);color:var(--color-text-primary);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);text-align:center;font-size:var(--fs-sm);font-weight:var(--fw-semibold);cursor:pointer;border:none;transition:background .15s}.sidebar button:hover{background:var(--color-button-bg-hover);color:var(--color-accent)}.sidebar button.active{background:var(--color-button-active-bg)}.sidebar .sidebar-footer{padding-top:var(--space-6);text-align:center;font-size:var(--fs-xs);color:var(--color-text-muted);margin-top:auto}.sidebar .sidebar-footer .role-name{color:var(--color-accent);font-weight:var(--fw-bold)}.content{padding:var(--space-8);flex:1}.page-title{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-size:var(--fs-2xl);color:var(--color-accent);margin-bottom:var(--space-6)}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-card)}.card.selectable{transition:border-color .15s,transform .1s}.card.selectable:hover{border-color:var(--color-accent)}.badge{align-items:center;gap:var(--space-1);font-size:var(--fs-xs);font-weight:var(--fw-bold);padding:2px var(--space-2);border-radius:var(--radius-sm);display:inline-flex}.badge-success{color:var(--color-status-success)}.badge-info{color:var(--color-status-info)}.badge-danger{color:var(--color-status-danger)}.badge-ai{color:var(--color-status-ai)}.badge-warning{color:var(--color-status-warning)}.login-page{background:var(--color-bg);justify-content:center;align-items:center;min-height:100vh;display:flex}.login-form{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-8) var(--space-6);box-sizing:border-box;text-align:center;align-items:center;gap:var(--space-2);flex-direction:column;width:380px;max-width:92vw;display:flex}.login-form .brand-logo{font-family:var(--font-display);font-weight:var(--fw-extrabold);color:var(--color-brand);font-style:italic;font-size:var(--fs-2xl);letter-spacing:-.02em;margin-bottom:var(--space-4)}.login-form h1{font-family:var(--font-display);font-weight:var(--fw-bold);color:var(--color-text-primary);font-style:normal;font-size:var(--fs-lg);margin:0}.login-form .subtitle{color:var(--color-text-secondary);font-size:var(--fs-sm);margin:0 0 var(--space-4)}.login-form label{align-items:flex-start;gap:var(--space-1);width:100%;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-text-primary);text-align:left;flex-direction:column;display:flex}.login-form .field-header{justify-content:space-between;align-items:center;width:100%;display:flex}.login-form .show-password-toggle{font-size:var(--fs-xs);font-weight:var(--fw-normal);color:var(--color-text-secondary);cursor:pointer;background:0 0;border:none;padding:0}.login-form input{box-sizing:border-box;border-radius:var(--radius-sm);width:100%;padding:var(--space-3);color:#14141c;font-size:var(--fs-base);background:#eef0f4;border:1px solid #d7dae0}.login-form input:focus{outline:2px solid var(--color-accent);outline-offset:1px}.login-form button[type=submit]{background:var(--color-cta);width:100%;color:var(--color-cta-text);border-radius:var(--radius-sm);padding:var(--space-3);font-weight:var(--fw-bold);font-size:var(--fs-base);cursor:pointer;margin-top:var(--space-2);border:none}.login-form .divider{align-items:center;gap:var(--space-3);width:100%;color:var(--color-text-muted);font-size:var(--fs-xs);margin:var(--space-2) 0;display:flex}.login-form .divider:before,.login-form .divider:after{content:"";background:var(--color-border);flex:1;height:1px}.login-form .btn-secondary{width:100%;color:var(--color-text-primary);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-3);font-weight:var(--fw-semibold);cursor:pointer;background:0 0}.login-form .footer-link{font-size:var(--fs-sm);color:var(--color-text-secondary);margin-top:var(--space-2)}.login-form .footer-link a{color:var(--color-accent);font-weight:var(--fw-semibold);text-decoration:none}.login-form .footer-copyright{font-size:var(--fs-xs);color:var(--color-text-muted);margin-top:var(--space-4)}.login-error{color:var(--color-status-danger);font-size:var(--fs-sm);text-align:left;width:100%;margin:0}.loading-screen{min-height:100vh;color:var(--color-text-secondary);background:var(--color-bg);justify-content:center;align-items:center;display:flex}.stat-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);text-align:center;min-width:90px}.stat-card .stat-number{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-size:var(--fs-xl)}.stat-card .stat-label{font-size:var(--fs-xs);color:var(--color-text-secondary);margin-top:var(--space-1)}.stat-waiting .stat-number{color:var(--color-stat-waiting)}.stat-reserved .stat-number{color:var(--color-stat-reserved)}.stat-inprogress .stat-number{color:var(--color-stat-inprogress)}.stat-completed .stat-number{color:var(--color-stat-completed)}.stat-paid .stat-number{color:var(--color-stat-paid)}.stat-overdue .stat-number{color:var(--color-stat-overdue)}.stat-cancelled .stat-number{color:var(--color-stat-cancelled)}.pill-outline{font-size:var(--fs-xs);font-weight:var(--fw-semibold);padding:2px var(--space-2);white-space:nowrap;text-align:center;background:0 0;border:1px solid;border-radius:999px;justify-content:center;align-items:center;gap:4px;display:inline-flex}.card-overdue{border-left:6px solid var(--color-status-danger)}.btn-cta{background:var(--color-cta);color:var(--color-cta-text);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-4);font-weight:var(--fw-bold);cursor:pointer;border:none}.btn-pay{background:var(--color-pay);color:#fff;border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);font-weight:var(--fw-bold);cursor:pointer;font-size:var(--fs-sm);border:none}.iklan-banner-info-btn{width:30px;height:30px;font-size:15px}@media (width<=767px){.iklan-banner-info-btn{width:22px;height:22px;font-size:11px}}.section-title{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-size:var(--fs-lg);color:var(--color-accent)}.topbar{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-6);border-bottom:1px solid var(--color-border);display:flex}.topbar input,.topbar select{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);color:var(--color-text-primary);font-size:var(--fs-sm)}.modal-overlay{z-index:50;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);gap:var(--space-3);flex-direction:column;width:420px;max-width:92vw;max-height:85vh;display:flex;overflow-y:auto}.modal-card h2{margin:0 0 var(--space-2);font-family:var(--font-display);font-size:var(--fs-lg)}.modal-card label{gap:var(--space-1);font-size:var(--fs-sm);font-weight:var(--fw-semibold);flex-direction:column;display:flex}.modal-card input,.modal-card select{border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);color:#14141c;font-size:var(--fs-base);background:#eef0f4;border:1px solid #d7dae0}.form-section-divider{border-top:1px solid var(--color-border);padding-top:var(--space-3);margin-top:var(--space-2)}.form-section-divider span{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--color-accent);text-transform:uppercase;letter-spacing:.03em}.form-section-note{font-size:var(--fs-xs);color:var(--color-text-muted);margin:4px 0 0}.ref-row{padding:var(--space-2) var(--space-2);border-bottom:1px solid var(--color-border);font-size:var(--fs-sm);border-radius:var(--radius-sm);justify-content:space-between;align-items:center;display:flex}.ref-row:last-child{border-bottom:none}.ref-row.selectable{cursor:pointer;transition:background .15s}.ref-row.selectable:hover{background:var(--color-button-bg-hover)}.ref-row.active{background:var(--color-button-active-bg)}.ref-row.active span:first-child{color:var(--color-accent);font-weight:var(--fw-bold)}.ref-row span:first-child{flex:1}.ref-row .chevron{color:var(--color-text-muted);margin-left:8px}.ref-row button.delete-btn{color:var(--color-status-danger);cursor:pointer;font-size:var(--fs-base);background:0 0;border:none;padding:0 4px}.ref-row-left{padding:var(--space-2) var(--space-2);border-bottom:1px solid var(--color-border);font-size:var(--fs-sm);justify-content:flex-start;align-items:center;gap:8px;display:flex}.ref-row-left button{color:var(--color-status-danger);cursor:pointer;font-size:var(--fs-base);background:0 0;border:none;padding:0 4px}input[type=date]::-webkit-calendar-picker-indicator{filter:invert();cursor:pointer}input[type=time]::-webkit-calendar-picker-indicator{filter:invert();cursor:pointer}.kop-cetak,.cetak-periode,.ttd-cetak,.catatan-cetak{display:none}@media print{@page{size:A4 portrait;margin:12mm 12mm 14mm}html,body{color:#000!important;background:#fff!important}.sidebar,.hamburger-button,.no-print,.area-cetak button{display:none!important}.app-shell{min-height:0!important;display:block!important}.content{margin:0!important;padding:0!important}.area-cetak,.area-cetak *{color:#000!important;box-shadow:none!important;text-shadow:none!important;background:0 0!important}.area-cetak{font-size:10.5pt;line-height:1.35}.area-cetak h2{display:none}.area-cetak h3{margin:10px 0 4px;font-size:11.5pt}.area-cetak .card{border:none!important;border-radius:0!important;margin:0 0 10px!important;padding:0!important}.area-cetak .ref-row-left{break-inside:avoid;page-break-inside:avoid;border-bottom:1px solid #bbb!important;padding:3px 0!important}.kop-cetak{text-align:center;border-bottom:2px solid #000;margin-bottom:12px;padding-bottom:8px;display:block}.kop-cetak-baris{justify-content:center;align-items:center;gap:12px;display:flex}.kop-cetak-logo{object-fit:contain;width:auto;height:52px}.kop-cetak-nama{font-size:15pt;font-weight:800}.kop-cetak-alamat{font-size:9.5pt}.kop-cetak-judul{letter-spacing:.5px;margin-top:8px;font-size:13pt;font-weight:800}.kop-cetak-periode,.kop-cetak-meta{font-size:9.5pt}.cetak-periode{text-align:center;margin:0 0 10px;font-weight:600;display:block}.ttd-cetak{break-inside:avoid;page-break-inside:avoid;justify-content:space-between;gap:24px;margin-top:28px;font-size:10pt;display:flex}.ttd-cetak>div{text-align:center;width:45%}.ttd-cetak .ttd-garis{border-top:1px solid #000;margin-top:56px;padding-top:4px}.catatan-cetak{margin-top:14px;font-size:8.5pt;display:block}.content>:not(:has(.area-cetak)){display:none!important}}:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}body{margin:0}#root{box-sizing:border-box;flex-direction:column;width:100%;min-height:100svh;display:flex}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}