:root { --paper:#f7f4ee; --surface:#fff; --navy:#0b3b5c; --navy-dark:#082a42; --emerald:#1e8f6f; --ink:#10262f; --muted:#6b7678; --line:#e7e6e1; --soft:#e7eef3; --danger:#d95757; --warning:#d69b32; --shadow:0 18px 50px rgba(16,38,47,.08); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,Arial,sans-serif; }
button,input,select { font:inherit; }
button { cursor:pointer; }
[hidden] { display:none !important; }
h1,h2,h3 { font-family:Poppins,Inter,sans-serif; margin:0; letter-spacing:-.03em; }
p { line-height:1.55; }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:28px; background:radial-gradient(circle at 15% 15%,rgba(30,143,111,.14),transparent 30%),radial-gradient(circle at 90% 85%,rgba(11,59,92,.16),transparent 35%),var(--paper); }
.login-card { width:min(500px,100%); background:rgba(255,255,255,.94); border:1px solid rgba(16,38,47,.07); border-radius:30px; padding:38px; box-shadow:var(--shadow); }
.brand-lockup,.rail-brand { display:flex; align-items:center; gap:13px; }
.brand-lockup strong,.rail-brand strong { display:block; font:700 15px Poppins; letter-spacing:.02em; color:var(--navy); }
.brand-lockup span:not(.brand-mark),.rail-brand span:not(.brand-mark) { display:block; margin-top:1px; font-size:10px; font-weight:700; letter-spacing:.16em; color:var(--emerald); }
.brand-mark { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,var(--navy),var(--emerald)); transform:rotate(-5deg); box-shadow:0 8px 18px rgba(11,59,92,.18); }
.login-copy { margin:62px 0 32px; }
.eyebrow { color:var(--emerald); font-weight:800; font-size:11px; letter-spacing:.16em; }
.login-copy h1 { font-size:38px; line-height:1.15; margin:10px 0 13px; }
.login-copy p { color:var(--muted); margin:0; }
.primary-button,.secondary-button,.danger-button { border:0; border-radius:13px; min-height:46px; padding:0 18px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:10px; }
.primary-button { color:white; background:linear-gradient(135deg,var(--navy),var(--emerald)); box-shadow:0 10px 25px rgba(11,59,92,.17); }
.login-card .primary-button { width:100%; }
.primary-button svg { width:21px; height:21px; background:white; padding:2px; border-radius:4px; }
.secondary-button { color:var(--navy); background:var(--soft); }
.danger-button { color:#fff; background:var(--danger); }
.text-button { border:0; padding:6px 0; color:var(--navy); background:none; font-weight:700; }
.security-note { color:var(--muted); font-size:11px; text-align:center; margin:22px 0 0; }
.error-message { color:var(--danger); font-size:13px; min-height:20px; margin:14px 0 0; }
.portal { min-height:100vh; display:grid; grid-template-columns:258px 1fr; }
.rail { position:fixed; inset:0 auto 0 0; width:258px; background:var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:28px 20px 22px; z-index:10; }
.rail-brand { padding:0 9px 34px; }
.rail-brand .brand-mark { width:38px; height:38px; border-radius:12px; }
.rail nav { display:flex; flex-direction:column; gap:6px; }
.nav-item { min-height:48px; display:flex; align-items:center; gap:13px; border:0; border-radius:13px; padding:0 14px; color:var(--muted); background:transparent; font-weight:700; text-align:left; }
.nav-item span { width:24px; font-size:19px; text-align:center; }
.nav-item:hover { background:#f6f6f2; color:var(--ink); }
.nav-item.active { color:var(--navy); background:var(--soft); }
.rail-footer { margin-top:auto; padding:18px 8px 0; border-top:1px solid var(--line); }
.admin-identity { display:flex; gap:10px; align-items:center; min-width:0; }
.admin-identity>span { flex:0 0 36px; height:36px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--emerald); font-size:12px; font-weight:800; }
.admin-identity div { min-width:0; }
.admin-identity strong { display:block; font-size:11px; overflow:hidden; text-overflow:ellipsis; }
.admin-identity small { color:var(--muted); text-transform:capitalize; }
.rail-footer .text-button { margin:12px 0 0 46px; font-size:12px; }
.workspace { grid-column:2; min-width:0; }
.topbar { min-height:116px; display:flex; align-items:center; justify-content:space-between; padding:24px clamp(28px,4vw,64px); border-bottom:1px solid var(--line); background:rgba(247,244,238,.88); backdrop-filter:blur(14px); position:sticky; top:0; z-index:5; }
.topbar h1 { font-size:28px; margin-top:5px; }
.live-pill,.status-pill { display:inline-flex; align-items:center; gap:7px; border-radius:999px; background:#e8f5f0; color:var(--emerald); padding:8px 12px; font-size:11px; font-weight:800; }
.live-pill i { width:7px; height:7px; border-radius:50%; background:var(--emerald); box-shadow:0 0 0 4px rgba(30,143,111,.12); }
.page-content { padding:34px clamp(28px,4vw,64px) 64px; max-width:1500px; margin:0 auto; }
.toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:24px; }
.toolbar-copy p { margin:5px 0 0; color:var(--muted); font-size:13px; }
.period-control { display:flex; gap:6px; background:#eeece6; border-radius:12px; padding:4px; }
.period-control button { border:0; border-radius:9px; padding:8px 12px; background:transparent; color:var(--muted); font-size:12px; font-weight:700; }
.period-control button.active { background:white; color:var(--navy); box-shadow:0 3px 9px rgba(16,38,47,.08); }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; }
.metric-card,.panel { background:var(--surface); border:1px solid rgba(16,38,47,.065); border-radius:19px; box-shadow:0 9px 30px rgba(16,38,47,.04); }
.metric-card { padding:19px; min-height:132px; display:flex; flex-direction:column; justify-content:space-between; }
.metric-card .metric-label { color:var(--muted); font-size:12px; font-weight:700; }
.metric-card strong { font:700 29px Poppins; }
.metric-card small { color:var(--muted); font-size:11px; }
.metric-card small.positive { color:var(--emerald); }
.dashboard-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:16px; margin-top:16px; }
.panel { padding:22px; min-width:0; }
.panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.panel-header h2 { font-size:16px; }
.panel-header span { color:var(--muted); font-size:11px; }
.bar-row { display:grid; grid-template-columns:105px 1fr 38px; gap:12px; align-items:center; margin:14px 0; font-size:12px; }
.bar-track { height:8px; background:#eff0ec; border-radius:20px; overflow:hidden; }
.bar-fill { height:100%; min-width:3px; border-radius:20px; background:linear-gradient(90deg,var(--navy),var(--emerald)); }
.insight-list { display:grid; gap:10px; }
.insight { display:flex; justify-content:space-between; align-items:center; padding:13px 0; border-bottom:1px solid var(--line); }
.insight:last-child { border-bottom:0; }
.insight span { color:var(--muted); font-size:12px; }
.insight strong { font-size:14px; }
.search-row { display:flex; gap:10px; width:min(570px,100%); }
.input { width:100%; min-height:44px; border:1px solid var(--line); border-radius:12px; padding:0 14px; color:var(--ink); background:#fff; outline:none; }
.input:focus { border-color:var(--emerald); box-shadow:0 0 0 3px rgba(30,143,111,.1); }
.table-panel { padding:0; overflow:hidden; }
table { width:100%; border-collapse:collapse; }
th { padding:13px 18px; text-align:left; background:#fbfaf7; color:var(--muted); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
td { padding:15px 18px; border-top:1px solid var(--line); font-size:12px; vertical-align:middle; }
tr.clickable:hover td { background:#fcfcf9; cursor:pointer; }
.user-cell strong { display:block; font-size:12px; }
.user-cell span { color:var(--muted); font-size:11px; }
.status-pill { padding:5px 9px; font-size:10px; }
.status-pill.neutral { background:#f0f1ee; color:var(--muted); }
.status-pill.danger { background:#fceaea; color:var(--danger); }
.status-pill.warning { background:#fbf1df; color:#9b6b17; }
.pagination { display:flex; justify-content:flex-end; align-items:center; gap:12px; padding:15px 18px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
.pagination button { border:1px solid var(--line); border-radius:9px; background:white; padding:7px 10px; color:var(--navy); font-weight:700; }
.pagination button:disabled { opacity:.4; cursor:default; }
.empty-state { padding:55px 24px; text-align:center; color:var(--muted); }
.loading { display:grid; place-items:center; min-height:320px; color:var(--muted); }
.loading::before { content:""; width:27px; height:27px; border:3px solid var(--line); border-top-color:var(--emerald); border-radius:50%; animation:spin .7s linear infinite; margin-right:10px; }
@keyframes spin { to { transform:rotate(360deg); } }
.modal-backdrop { position:fixed; inset:0; z-index:50; background:rgba(8,42,66,.42); display:grid; place-items:center; padding:20px; backdrop-filter:blur(5px); }
.modal { width:min(560px,100%); max-height:min(780px,90vh); overflow:auto; background:#fff; border-radius:23px; padding:28px; box-shadow:0 30px 80px rgba(8,42,66,.25); position:relative; }
.modal-close { position:absolute; right:18px; top:15px; width:34px; height:34px; border:0; background:#f2f3ef; border-radius:50%; font-size:21px; color:var(--muted); }
.modal h2 { font-size:22px; padding-right:36px; }
.modal .subtitle { color:var(--muted); margin:5px 0 23px; font-size:13px; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:20px 0; }
.detail-item { background:#f8f7f3; border-radius:12px; padding:13px; }
.detail-item span { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.05em; }
.detail-item strong { display:block; margin-top:5px; font-size:13px; }
.form-group { margin:15px 0; }
.form-group label { display:block; font-size:11px; font-weight:800; margin-bottom:7px; }
.form-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:22px; }
.action-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:18px; }
.action-grid button { min-height:42px; border:1px solid var(--line); border-radius:11px; background:white; color:var(--navy); font-weight:700; }
.action-grid button.danger-outline { color:var(--danger); border-color:#f1cece; }
.toast { position:fixed; right:26px; bottom:26px; z-index:80; color:#fff; background:var(--ink); border-radius:12px; padding:13px 17px; font-size:12px; box-shadow:var(--shadow); }
.audit-event { font-weight:700; color:var(--navy); }
.audit-meta { color:var(--muted); font-size:10px; }
@media(max-width:1050px){.metric-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.portal{grid-template-columns:82px 1fr}.rail{width:82px;padding:24px 12px}.rail-brand div,.nav-item:not(.active){font-size:0}.rail-brand{padding-left:8px}.rail-brand .brand-mark{flex:0 0 38px}.nav-item{justify-content:center;padding:0}.nav-item span{font-size:19px}.admin-identity div,.rail-footer .text-button{display:none}.workspace{grid-column:2}}
@media(max-width:700px){.portal{display:block}.rail{position:fixed;inset:auto 0 0;width:auto;height:66px;flex-direction:row;padding:8px 12px;border-right:0;border-top:1px solid var(--line)}.rail-brand,.rail-footer{display:none}.rail nav{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.nav-item,.nav-item:not(.active){display:flex;flex-direction:column;gap:1px;font-size:9px;justify-content:center}.nav-item span{line-height:20px}.workspace{padding-bottom:72px}.topbar{min-height:94px;padding:18px 20px}.topbar h1{font-size:24px}.page-content{padding:24px 18px 45px}.metric-grid{grid-template-columns:1fr 1fr}.toolbar{align-items:flex-start;flex-direction:column}.table-panel{overflow:auto}.login-card{padding:27px}.login-copy{margin-top:45px}.login-copy h1{font-size:31px}}