:root{--bg-page: #0a0a12;--bg-surface: #0e0e1a;--bg-input: #12121e;--bg-sidebar: #0c0c18;--bg-hover: rgba(129, 140, 248, .04);--bg-selected: rgba(129, 140, 248, .06);--border: #1a1a2e;--border-light: #16162a;--border-subtle: #12121e;--accent: #818cf8;--accent-light: #a5b4fc;--accent-bg: rgba(99, 102, 241, .1);--money: #34d399;--danger: #dc2626;--danger-light: #f87171;--danger-bg: rgba(220, 38, 38, .1);--warning: #fbbf24;--success: #34d399;--text: #ffffff;--text-primary: #e2e2e8;--text-muted: #8888a0;--text-dim: #52526b;--text-faint: #3d3d55;--font-ui: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "DM Mono", "Courier New", monospace;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:var(--font-ui);font-size:13px;background:var(--bg-page);color:var(--text-primary)}#root{display:grid;grid-template-rows:48px 1fr 28px;grid-template-columns:180px 1fr;grid-template-areas:"topbar  topbar" "sidenav main" "status  status";height:100vh;overflow:hidden}.topbar{grid-area:topbar;background:var(--bg-surface);border-bottom:1px solid var(--border);color:var(--text-muted);padding:0 20px;display:flex;align-items:center;gap:12px;font-size:13px}.topbar strong{color:var(--text);font-size:15px;font-weight:700;letter-spacing:-.3px}.topbar .env-badge{background:var(--danger);color:#fff;font-size:9px;font-weight:600;padding:2px 8px;border-radius:3px;letter-spacing:.5px}.env-badge-dev{background:var(--success);color:#fff;font-size:9px;font-weight:600;padding:2px 8px;border-radius:3px;letter-spacing:.5px}.topbar .user{margin-left:auto;color:var(--text-dim);font-size:12px;display:flex;align-items:center;gap:12px}.topbar .user button{background:transparent;border:1px solid var(--border);color:var(--text-muted);cursor:pointer;font-family:var(--font-ui);font-size:11px;font-weight:500;padding:5px 12px;border-radius:5px;text-decoration:none}.topbar .user button:hover{border-color:var(--text-dim)}.sidenav{grid-area:sidenav;background:var(--bg-sidebar);border-right:1px solid var(--border-light);overflow-y:auto;padding:12px 0}.sidenav a{display:block;padding:8px 20px;color:var(--text-dim);text-decoration:none;font-size:13px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:1px}.sidenav a:hover{background:#ffffff08;color:var(--text-muted)}.sidenav a.active{background:var(--accent-bg);color:var(--accent-light);font-weight:500;border-left:2px solid var(--accent)}.sidenav .nav-section{padding:6px 20px;font-size:10px;color:var(--text-faint);text-transform:uppercase;letter-spacing:2px;font-weight:600;margin-top:20px;margin-bottom:4px;border-top:none}.main-area{grid-area:main;display:flex;flex-direction:column;overflow:hidden}.breadcrumb{padding:6px 16px;background:var(--bg-surface);border-bottom:1px solid var(--border);font-size:12px;color:var(--text-muted);flex-shrink:0}.breadcrumb a{color:var(--accent);text-decoration:none}.breadcrumb a:hover{text-decoration:underline}.toolbar{padding:8px 16px;border-bottom:1px solid var(--border);background:var(--bg-page);display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex-shrink:0}.toolbar label{display:none}.toolbar input[type=text],.toolbar select{background:var(--bg-input);border:1px solid var(--border);color:var(--text-primary);padding:8px 12px;font-size:12px;font-family:var(--font-ui);border-radius:var(--radius-md);outline:none}.toolbar input[type=text]:focus,.toolbar select:focus{border-color:var(--accent)}.toolbar input[type=text]{width:240px}.toolbar select{color:var(--text-muted);cursor:pointer}.toolbar .count{margin-left:auto;color:var(--text-faint);font-size:11px;font-weight:500;background:var(--bg-input);padding:5px 12px;border-radius:20px}.statusbar{grid-area:status;padding:0 20px;background:var(--bg-page);border-top:1px solid var(--border-subtle);font-size:10px;color:var(--text-faint);display:flex;gap:16px;align-items:center}.statusbar .last-action{margin-left:auto}.table-wrap{flex:1;overflow:auto;padding:0 24px 24px}.table-wrap>table{background:var(--bg-surface);border:1px solid var(--border-light);border-radius:var(--radius-lg);overflow:hidden}table{width:100%;border-collapse:collapse}thead th{background:var(--bg-surface);border-bottom:1px solid var(--border);padding:10px 16px;text-align:left;font-weight:600;white-space:nowrap;position:sticky;top:0;z-index:1;font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-faint)}.clickable-rows tr{cursor:pointer}tbody tr:hover{background:var(--bg-hover)}tbody tr.selected{background:var(--bg-selected)}td{padding:12px 16px;border-bottom:1px solid var(--border-subtle);white-space:nowrap;vertical-align:middle;font-size:13px}td.id{font-size:11px;color:var(--text-dim);font-family:var(--font-mono)}td.money{color:var(--money);font-weight:600;font-family:var(--font-mono)}.btn{padding:8px 20px;font-size:13px;font-family:var(--font-ui);font-weight:500;border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;border-radius:var(--radius-md);min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:background .15s,border-color .15s}.btn:hover{background:#ffffff0a;border-color:var(--text-dim)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}.btn-primary:hover{background:#6d79f4}.btn-danger{background:var(--danger-bg);color:var(--danger-light);border-color:#dc262633}.btn-danger:hover{background:#dc262626}.btn-danger-solid{background:var(--danger);color:#fff;border-color:var(--danger);font-weight:600}.btn-danger-solid:hover{background:#c52222}.btn-ghost{background:transparent;color:var(--text-dim);border:none}.btn-ghost:hover{color:var(--text-muted);background:#ffffff0a}.btn-sm{padding:6px 14px;font-size:12px;min-height:30px}.badge{font-size:10px;padding:2px 8px;border-radius:3px;font-weight:500;display:inline-block}.badge-active{background:#34d3991a;color:var(--success)}.badge-inactive{background:#8888a01a;color:var(--text-muted)}.badge-paid{background:var(--accent-bg);color:var(--accent)}.badge-overdue{background:var(--danger-bg);color:var(--danger-light)}.badge-pending{background:#fbbf241a;color:var(--warning)}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}.detail-panel{position:fixed;right:0;top:48px;bottom:28px;width:420px;background:var(--bg-surface);border-left:1px solid var(--border);box-shadow:-8px 0 30px #0006;display:flex;flex-direction:column;z-index:10;animation:slideIn .2s ease}.detail-panel-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.detail-panel-header span{font-size:16px;font-weight:600;color:var(--text)}.detail-panel-header button{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:18px;line-height:1;padding:4px 8px}.detail-panel-header button:hover{color:var(--text-muted)}.detail-panel-ops{padding:12px 20px;border-bottom:1px solid var(--border);background:var(--bg-surface);display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0}.detail-panel-body{flex:1;overflow-y:auto}.detail-section{padding:16px 20px;border-bottom:1px solid var(--border-subtle)}.detail-section h4{font-size:10px;text-transform:uppercase;color:var(--text-faint);letter-spacing:1.5px;font-weight:600;margin-bottom:10px}.kv-row{display:flex;gap:8px;margin-bottom:6px;font-size:12px}.kv-key{color:var(--text-dim);min-width:110px;flex-shrink:0}.kv-val{color:var(--text-primary);word-break:break-all}.kv-val.money{color:var(--money);font-weight:600;font-family:var(--font-mono)}.kv-val.id{font-size:11px;color:var(--text-muted);font-family:var(--font-mono)}.mini-table{width:100%;border-collapse:collapse;font-size:11px;margin-top:8px}.mini-table th{background:var(--bg-input);padding:4px 8px;text-align:left;font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--text-faint)}.mini-table td{padding:4px 8px;border-bottom:1px solid var(--border-subtle);color:var(--text-primary);font-size:11px}.form-field{margin-bottom:10px}.form-field label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:6px}.form-field input,.form-field select,.form-field textarea{width:100%;border:1px solid var(--border);padding:8px 12px;font-size:13px;font-family:var(--font-ui);background:var(--bg-input);color:var(--text-primary);border-radius:var(--radius-md);outline:none}.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--accent)}.form-field textarea{resize:vertical;height:80px}.form-error{color:var(--danger-light);font-size:11px;margin-top:4px}.detail-section input,.detail-section select,.detail-section textarea{background:var(--bg-input);border:1px solid var(--border);color:var(--text-primary);font-family:var(--font-ui);font-size:12px;padding:4px 8px;border-radius:var(--radius-sm);outline:none}.detail-section input:focus,.detail-section select:focus,.detail-section textarea:focus{border-color:var(--accent)}.page-content{flex:1;overflow:auto;padding:24px 28px}.page-title{font-size:22px;font-weight:700;color:var(--text);letter-spacing:-.5px;margin-bottom:20px}.split-layout{display:flex;flex:1;overflow:hidden}.login-page{display:flex;align-items:center;justify-content:center;height:100vh;flex-direction:column;gap:16px;background:var(--bg-page);color:var(--text-primary);grid-column:1 / -1;grid-row:1 / -1}.login-page button{font-family:var(--font-ui);font-size:14px;font-weight:500;padding:10px 24px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer}.login-page button:hover{background:#6d79f4}dialog{border:1px solid var(--border);padding:24px;min-width:340px;font-family:var(--font-ui);font-size:13px;background:var(--bg-surface);color:var(--text-primary);border-radius:var(--radius-lg)}dialog::backdrop{background:#00000080}dialog h3{margin-bottom:12px;font-size:16px;font-weight:600;color:var(--text)}dialog p{margin-bottom:16px;color:var(--text-muted)}dialog .dialog-actions{display:flex;gap:8px;justify-content:flex-end}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:300px;text-align:center}.empty-state-icon{font-size:36px;opacity:.3;margin-bottom:12px}.empty-state-title{font-size:15px;font-weight:600;color:var(--text-primary);margin:0 0 6px}.empty-state-description{font-size:12px;color:var(--text-dim);max-width:260px;margin:0}.progress-track{width:100%;height:6px;background:var(--bg-input);border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:var(--accent);transition:width .2s}.text-muted{color:var(--text-muted)}.text-danger{color:var(--danger-light)}.text-success{color:var(--success)}.text-warning{color:var(--warning)}.mt-8{margin-top:8px}