*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', sans-serif; background: #f0f2f5; color: #222; }
a { color: inherit; }

/* ── App shell ── */
.app-shell { display:flex; flex-direction:column; min-height:100vh; }
header.topbar { background:#1a56db; color:#fff; padding:12px 24px; display:flex; align-items:center; justify-content:space-between; }
header.topbar .logo { display:flex; align-items:center; gap:10px; font-size:1.1rem; font-weight:600; text-decoration:none; }
header.topbar .user-area { display:flex; align-items:center; gap:14px; font-size:.88rem; }
header.topbar .user-area .uname { color:#bfdbfe; }

nav.tabs { background:#fff; border-bottom:1px solid #e0e0e0; display:flex; gap:4px; padding:0 16px; flex-wrap:wrap; }
nav.tabs a { padding:12px 18px; text-decoration:none; font-size:.9rem; color:#555; border-bottom:3px solid transparent; transition:.2s; }
nav.tabs a.active, nav.tabs a:hover { color:#1a56db; border-bottom-color:#1a56db; }

main.page { padding:24px; max-width:1180px; margin:auto; width:100%; }

/* ── Common ── */
h1.page-title { font-size:1.3rem; color:#1e293b; margin-bottom:18px; }
h2 { margin-bottom:16px; font-size:1.15rem; color:#333; }
.card { background:#fff; border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,.08); padding:20px; margin-bottom:20px; }
.muted { color:#64748b; font-size:.88rem; }
table { width:100%; border-collapse:collapse; font-size:.88rem; }
th,td { padding:9px 12px; border-bottom:1px solid #f0f0f0; text-align:left; }
th { font-weight:600; background:#f7f8fa; }
tr:hover td { background:#fafbff; }

.btn { padding:7px 14px; border:none; border-radius:6px; cursor:pointer; font-size:.85rem; font-weight:500; transition:.15s; text-decoration:none; display:inline-block; }
.btn-primary { background:#1a56db; color:#fff; } .btn-primary:hover { background:#1e40af; }
.btn-danger  { background:#e02424; color:#fff; } .btn-danger:hover  { background:#b91c1c; }
.btn-warning { background:#d97706; color:#fff; } .btn-warning:hover { background:#b45309; }
.btn-success { background:#057a55; color:#fff; } .btn-success:hover { background:#046c4e; }
.btn-ghost   { background:#e5e7eb; color:#374151; } .btn-ghost:hover { background:#d1d5db; }
.btn-sm { padding:4px 10px; font-size:.8rem; }
.btn:disabled { opacity:.55; cursor:not-allowed; }

.badge { display:inline-block; padding:2px 8px; border-radius:12px; font-size:.78rem; font-weight:600; }
.badge-locked   { background:#fde8e8; color:#c53030; }
.badge-unlocked { background:#def7ec; color:#03543f; }

/* ── Forms ── */
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-size:.85rem; font-weight:500; margin-bottom:5px; }
.form-group input,.form-group select,.form-group textarea { width:100%; padding:8px 10px; border:1px solid #d1d5db; border-radius:6px; font-size:.9rem; font-family:inherit; }
.form-group textarea { height:80px; resize:vertical; }

/* ── Modal ── */
.modal-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:999; align-items:center; justify-content:center; }
.modal-backdrop.open { display:flex; }
.modal { background:#fff; border-radius:12px; padding:28px; width:520px; max-width:95vw; max-height:90vh; overflow-y:auto; }
.modal h3 { margin-bottom:18px; }
.form-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }

/* ── Chips ── */
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.chip { padding:5px 12px; border-radius:16px; font-size:.83rem; border:1px solid #d1d5db; cursor:pointer; transition:.15s; user-select:none; }
.chip.selected { background:#1a56db; color:#fff; border-color:#1a56db; }

/* ── Toast ── */
#toast { position:fixed; bottom:24px; right:24px; background:#1e293b; color:#fff; padding:12px 20px; border-radius:8px; font-size:.88rem; display:none; z-index:9999; }
#toast.err { background:#b91c1c; }

/* ── Login ── */
.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; background:linear-gradient(135deg,#1E3A5F,#0F172A); }
.login-box { background:#fff; border-radius:16px; padding:40px 36px; width:380px; max-width:95vw; box-shadow:0 8px 32px rgba(0,0,0,.25); }
.login-box h1 { font-size:1.4rem; font-weight:700; color:#1a56db; margin-bottom:6px; text-align:center; }
.login-box p  { font-size:.85rem; color:#64748b; text-align:center; margin-bottom:28px; }
.login-error  { background:#fde8e8; color:#c53030; padding:10px 14px; border-radius:8px; font-size:.85rem; margin-bottom:16px; }

/* ── Dashboard ── */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:22px; }
.stat-card { background:#fff; border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,.08); padding:18px 20px; }
.stat-card .value { font-size:1.7rem; font-weight:700; color:#1a56db; }
.stat-card .label { font-size:.8rem; color:#64748b; margin-top:2px; }
.stat-card.green  .value { color:#057a55; }
.stat-card.amber  .value { color:#d97706; }
.stat-card.violet .value { color:#7c3aed; }

.filter-bar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:18px; }
.filter-bar label { font-size:.85rem; color:#475569; }
.filter-bar input, .filter-bar select { padding:6px 10px; border:1px solid #d1d5db; border-radius:6px; font-size:.85rem; }

.chart-wrap { position:relative; height:280px; }
.bar-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:.85rem; }
.bar-row .bar-label { width:180px; flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-row .bar-track { flex:1; background:#eef2f7; border-radius:6px; height:20px; overflow:hidden; }
.bar-row .bar-fill  { height:100%; background:#1a56db; border-radius:6px; }
.bar-row .bar-value { width:70px; text-align:right; flex-shrink:0; color:#475569; }