:root { --bg:#0b0f14; --fg:#e6edf3; --muted:#9fb0c0; --accent:#6cb4ff; --line:#1e2631; --warn:#fff3bf; --na:#e9ecef; --note:#ffe8cc; }
*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--bg); color:var(--fg); font:14px/1.4 system-ui,Segoe UI,Roboto,Arial; }
.topbar{ position:sticky; top:0; z-index:10; display:flex; gap:24px; align-items:center; padding:10px 16px; background:#0d1320; border-bottom:1px solid var(--line); }
.brand{ font-weight:700; }
.menu .link, .menu button{ margin-right:10px; background:transparent; color:var(--fg); border:1px solid var(--line); padding:8px 10px; border-radius:8px; cursor:pointer; }
main{ padding:16px; max-width:1100px; margin:0 auto; }
.view{ display:none; } .view.active{ display:block; }
.bar{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.bar h1{ margin:0; font-size:20px; }
.actions button, #newClientBtn{ background:#1b2a41; color:var(--fg); border:1px solid var(--line); padding:8px 10px; border-radius:8px; cursor:pointer; }
.actions select{ background:#0f1520; border:1px solid var(--line); color:var(--fg); padding:6px 8px; border-radius:6px;}
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ border:1px solid var(--line); padding:8px; vertical-align: middle; }
.table thead th{ background:#111a28; }
.search input{ width:100%; padding:8px; border-radius:8px; border:1px solid var(--line); background:#0f1520; color:#e6edf3; }
.soft{ background:#0f1520; padding:10px; border:1px solid var(--line); border-radius:8px; margin-bottom:10px;}
.grid-wrap{ overflow:auto; }
.grid input, .grid select{ width:100%; background:#0f1520; color:#e6edf3; border:1px solid var(--line); border-radius:6px; padding:6px; }
.grid .row-pending{ background:var(--warn); color:#222; }
.grid .row-na{ background:var(--na); color:#222; }
.grid .note-bg{ background:var(--note); color:#222; }
.total-row td{ background:#111a28; font-weight:700; }
.right{ text-align:right; }
.tag{ display:inline-block; padding:3px 8px; border-radius:999px; background:#111a28; border:1px solid var(--line); color:var(--muted); font-size:12px;}
dialog{ border:1px solid var(--line); border-radius:10px; background:#0f1520; color:#e6edf3; padding:16px; }
dialog form label{ display:block; margin:8px 0; }
dialog input{ width:100%; background:#0f1520; color:#e6edf3; border:1px solid var(--line); border-radius:6px; padding:8px; }
dialog menu{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }
button.primary{ background:var(--accent); color:#001; border:0; }
.small{ font-size:12px; color:var(--muted); }
input[type="file"]{ color:#e6edf3; }