*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:Courier New,Courier,monospace;font-size:13px;background:#fff;color:#111}#root{display:grid;grid-template-rows:30px 1fr 24px;grid-template-columns:160px 1fr;grid-template-areas:"topbar  topbar" "sidenav main" "status  status";height:100vh;overflow:hidden}.topbar{grid-area:topbar;background:#1a1a2e;color:#ccc;padding:0 12px;display:flex;align-items:center;gap:12px;font-size:12px}.topbar strong{color:#fff}.topbar .env-badge{background:#dc2626;color:#fff;font-size:10px;font-weight:700;padding:1px 5px;border-radius:2px}.env-badge-dev{background:#16a34a;color:#fff;font-size:10px;font-weight:700;padding:1px 5px;border-radius:2px}.topbar .user{margin-left:auto;color:#888}.topbar .user button{background:none;border:none;color:#888;cursor:pointer;font-family:inherit;font-size:12px;text-decoration:underline}.sidenav{grid-area:sidenav;background:#f8f8f8;border-right:1px solid #ddd;overflow-y:auto;padding:6px 0}.sidenav a{display:block;padding:5px 12px;color:#333;text-decoration:none;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidenav a:hover{background:#e8e8e8}.sidenav a.active{background:#1a1a2e;color:#fff}.sidenav .nav-section{padding:8px 12px 3px;font-size:10px;color:#999;text-transform:uppercase;letter-spacing:.05em;border-top:1px solid #e0e0e0;margin-top:4px}.main-area{grid-area:main;display:flex;flex-direction:column;overflow:hidden}.breadcrumb{padding:4px 12px;background:#f0f0f0;border-bottom:1px solid #ddd;font-size:11px;color:#666;flex-shrink:0}.breadcrumb a{color:#1a1a2e;text-decoration:none}.breadcrumb a:hover{text-decoration:underline}.toolbar{padding:5px 12px;border-bottom:1px solid #ddd;background:#fafafa;display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0}.toolbar label{color:#555}.toolbar input[type=text],.toolbar select{border:1px solid #ccc;padding:2px 6px;font-size:12px;font-family:monospace;background:#fff}.toolbar input[type=text]{width:200px}.toolbar .count{margin-left:auto;color:#888}.statusbar{grid-area:status;padding:3px 12px;background:#f0f0f0;border-top:1px solid #ddd;font-size:10px;color:#666;display:flex;gap:16px;align-items:center}.table-wrap{flex:1;overflow:auto}table{width:100%;border-collapse:collapse}thead th{background:#f0f0f0;border-bottom:2px solid #ccc;padding:3px 8px;text-align:left;font-weight:700;white-space:nowrap;position:sticky;top:0;z-index:1;font-size:12px}.clickable-rows tr{cursor:pointer}tbody tr:hover{background:#f5f5ff}tbody tr.selected{background:#e8e8ff}td{padding:3px 8px;border-bottom:1px solid #eee;white-space:nowrap;vertical-align:middle;font-size:12px}td.id{font-size:10px;color:#888}td.money{color:#166534;font-weight:700}.btn{padding:2px 8px;font-size:12px;font-family:monospace;border:1px solid #aaa;background:#f0f0f0;cursor:pointer}.btn:hover{background:#e0e0e0}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:#1a1a2e;color:#fff;border-color:#1a1a2e}.btn-primary:hover{background:#2d2d50}.btn-danger{background:#fff0f0;color:#dc2626;border-color:#dc2626}.btn-danger:hover{background:#fecaca}.btn-sm{padding:1px 5px;font-size:11px}.badge{font-size:10px;padding:1px 5px;border-radius:2px;font-weight:700}.badge-active{background:#dcfce7;color:#166534}.badge-inactive{background:#f3f4f6;color:#6b7280}.badge-paid{background:#dbeafe;color:#1e40af}.badge-overdue{background:#fee2e2;color:#991b1b}.badge-pending{background:#fef9c3;color:#854d0e}.detail-panel{width:360px;border-left:1px solid #ccc;display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}.detail-panel-header{padding:5px 10px;background:#1a1a2e;color:#fff;font-weight:700;font-size:12px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.detail-panel-header button{background:none;border:none;color:#aaa;cursor:pointer;font-size:14px;line-height:1}.detail-panel-ops{padding:5px 10px;border-bottom:1px solid #ddd;background:#fafafa;display:flex;gap:5px;flex-wrap:wrap;flex-shrink:0}.detail-panel-body{flex:1;overflow-y:auto}.detail-section{padding:8px 10px;border-bottom:1px solid #eee}.detail-section h4{font-size:10px;text-transform:uppercase;color:#999;letter-spacing:.05em;margin-bottom:5px}.kv-row{display:flex;gap:8px;margin-bottom:3px;font-size:12px}.kv-key{color:#666;min-width:110px;flex-shrink:0}.kv-val{color:#111;word-break:break-all}.kv-val.money{color:#166534;font-weight:700}.kv-val.id{font-size:10px;color:#888}.mini-table{width:100%;border-collapse:collapse;font-size:11px;margin-top:4px}.mini-table th{background:#f0f0f0;padding:2px 6px;text-align:left;font-weight:700}.mini-table td{padding:2px 6px;border-bottom:1px solid #f0f0f0}.form-field{margin-bottom:8px}.form-field label{display:block;font-size:11px;color:#555;margin-bottom:2px}.form-field input,.form-field select,.form-field textarea{width:100%;border:1px solid #ccc;padding:3px 6px;font-size:12px;font-family:monospace;background:#fff}.form-field textarea{resize:vertical;height:80px}.form-error{color:#dc2626;font-size:11px;margin-top:2px}.page-content{flex:1;overflow:auto;padding:12px}.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:#f8f8f8}dialog{border:1px solid #ccc;padding:20px;min-width:300px;font-family:monospace;font-size:13px}dialog::backdrop{background:#0000004d}dialog h3{margin-bottom:12px;font-size:14px}dialog p{margin-bottom:16px;color:#555}dialog .dialog-actions{display:flex;gap:8px;justify-content:flex-end}.text-muted{color:#888}.text-danger{color:#dc2626}.text-success{color:#166534}.mt-8{margin-top:8px}