:root { --accent: #1f4e79; --accent-soft: #e1eefa; }
body { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }

.nav-item { display:flex; align-items:center; gap:.75rem; padding:.6rem 1rem; border-radius:.5rem; color:#cbd5e1; cursor:pointer; transition:.15s; font-size:.9rem; }
.nav-item:hover { background:#1e293b; color:#fff; }
.nav-item.active { background:var(--accent); color:#fff; }

.card { background:#fff; border:1px solid #e2e8f0; border-radius:.75rem; box-shadow:0 1px 2px rgba(0,0,0,.04); padding:1.25rem; }
.kpi { background:#fff; border:1px solid #e2e8f0; border-radius:.75rem; padding:.75rem 1rem; }
.kpi .label { font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:#64748b; }
.kpi .value { font-size:1.5rem; font-weight:600; color:#0f172a; margin-top:.25rem; }
.kpi .delta { font-size:.75rem; margin-top:.25rem; }

.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .9rem; border-radius:.5rem; font-size:.875rem; font-weight:500; border:1px solid transparent; cursor:pointer; transition:.15s; }
.btn:disabled { opacity:.4; cursor:not-allowed; }
.btn-primary { background:var(--accent); color:#fff; } .btn-primary:hover:not(:disabled) { opacity:.9; }
.btn-secondary { background:#fff; color:#334155; border-color:#cbd5e1; } .btn-secondary:hover:not(:disabled) { background:#f8fafc; }
.btn-danger { background:#fff; color:#b91c1c; border-color:#fca5a5; } .btn-danger:hover:not(:disabled) { background:#fef2f2; }
.btn-sm { padding:.35rem .65rem; font-size:.75rem; }

.input, .select, .textarea { width:100%; border:1px solid #cbd5e1; border-radius:.5rem; padding:.5rem .75rem; font-size:.875rem; background:#fff; }
.input:focus, .select:focus, .textarea:focus { outline:none; box-shadow:0 0 0 3px #bfdbfe; border-color:#60a5fa; }
.label { display:block; font-size:.75rem; font-weight:500; color:#475569; margin-bottom:.25rem; }

.table { width:100%; font-size:.875rem; border-collapse:collapse; }
.table th { text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:#64748b; font-weight:500; padding:.5rem .75rem; border-bottom:1px solid #e2e8f0; background:#f8fafc; white-space:nowrap; }
.table td { padding:.5rem .75rem; border-bottom:1px solid #f1f5f9; vertical-align:top; }
.table tr:hover td { background:#f8fafc; }

.badge { display:inline-block; padding:.1rem .5rem; border-radius:999px; font-size:.7rem; font-weight:500; white-space:nowrap; }
.badge-green { background:#d1fae5; color:#065f46; } .badge-gray { background:#f1f5f9; color:#334155; }
.badge-blue { background:#dbeafe; color:#1e40af; } .badge-amber { background:#fef3c7; color:#92400e; } .badge-red { background:#fee2e2; color:#991b1b; }

.tabs { display:flex; gap:.25rem; border-bottom:1px solid #e2e8f0; margin-bottom:1.5rem; overflow-x:auto; }
.tab { padding:.6rem 1rem; font-size:.875rem; font-weight:500; color:#64748b; border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap; }
.tab:hover { color:#1e293b; } .tab.active { color:var(--accent); border-color:var(--accent); }

.toast { padding:.75rem 1rem; border-radius:.5rem; box-shadow:0 10px 15px rgba(0,0,0,.15); font-size:.875rem; color:#fff; animation:fade 4s forwards; }
@keyframes fade { 0%,80% { opacity:1 } 100% { opacity:0 } }

.progress { width:100%; height:.75rem; background:#e2e8f0; border-radius:999px; overflow:hidden; }
.progress > div { background:var(--accent); height:100%; transition:width .4s; }

.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:40; display:flex; align-items:flex-start; justify-content:center; padding-top:2.5rem; overflow-y:auto; }
.modal { background:#fff; border-radius:.75rem; box-shadow:0 20px 40px rgba(0,0,0,.2); width:100%; max-width:42rem; padding:1.5rem; margin-bottom:2.5rem; }

.md h1 { font-size:1.5rem; font-weight:700; margin:.5rem 0 .75rem; } .md h2 { font-size:1.2rem; font-weight:600; margin:1.5rem 0 .5rem; color:var(--accent); } .md h3 { font-size:1rem; font-weight:600; margin:1rem 0 .25rem; }
.md table { font-size:.8rem; margin:.75rem 0; width:100%; border-collapse:collapse; } .md th, .md td { border:1px solid #e2e8f0; padding:.25rem .5rem; text-align:left; } .md th { background:#f8fafc; }
.md blockquote { border-left:4px solid #93c5fd; background:#eff6ff; padding:.5rem .75rem; margin:.75rem 0; font-size:.875rem; }
.md ul { list-style:disc; padding-left:1.5rem; margin:.5rem 0; font-size:.875rem; } .md li { margin:.25rem 0; } .md p { margin:.5rem 0; font-size:.875rem; } .md hr { margin:1rem 0; } .md em { color:#475569; }

.cell-edit { width:100%; background:transparent; border:1px solid transparent; border-radius:.25rem; padding:.15rem .3rem; font-size:.85rem; }
.cell-edit:hover { border-color:#cbd5e1; } .cell-edit:focus { border-color:#60a5fa; background:#fff; outline:none; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.8rem; }
.truncate-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }