:root{
  --cream:#faf7f0;--cream-50:#fdfbf6;--cream-100:#f7f1e3;--cream-200:#ede2c7;
  --navy:#0e2348;--navy-700:#08152c;--navy-400:#3e527d;--navy-300:#6f80aa;--navy-100:#d8dfee;--navy-50:#f0f3f9;
  --gold:#c9a227;--gold-400:#d4ad34;--gold-600:#a4811f;--gold-100:#faf0c8;
  --ink:#0e2348;--ink-soft:#364668;--mut:#6e7184;
  --good:#2f8f5b;--bad:#b8433a;
  --bg:var(--cream);--panel:#fffdf8;--line:var(--cream-200);--txt:var(--ink);
  --shadow:0 1px 2px rgba(14,35,72,.05),0 6px 20px rgba(14,35,72,.06);
  --font-display:'Fraunces',Georgia,serif;--font-sans:'Manrope',-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font:15px/1.55 var(--font-sans);display:flex;min-height:100vh}
a{color:var(--navy-400);text-decoration:none}
a:hover{color:var(--gold-600)}

.side{width:232px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--line);padding:26px 0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:700;letter-spacing:.3px;color:var(--navy);padding:0 24px 24px;font-size:19px;line-height:1.2}
.brand-logo{width:34px;height:34px;object-fit:contain;flex-shrink:0}
.brand-text{display:flex;flex-direction:column}
.brand span,.brand .tag{display:block;font-family:var(--font-sans);font-weight:700;letter-spacing:3px;color:var(--gold-600);font-size:9px;text-transform:uppercase;margin-top:3px}
.login-card .brand{padding:0;justify-content:center;text-align:center}
.login-card .brand-text{align-items:center}
.login-card .login-logo{width:52px;height:52px;margin:0 auto 4px;display:block}
.side nav{display:flex;flex-direction:column;flex:1;gap:2px;padding:0 12px}
.side nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;color:var(--ink-soft);border-radius:9px;font-size:13.5px;font-weight:600}
.side nav a .ic{width:17px;height:17px;flex-shrink:0;opacity:.7}
.side nav a:hover{background:var(--cream-100);color:var(--navy)}
.side nav a.on{background:var(--gold-100);color:var(--gold-600)}
.side nav a.on .ic{opacity:1;color:var(--gold-600)}
.logout{display:flex;align-items:center;gap:11px;margin:10px 12px 0;padding:10px 12px;color:var(--mut);font-size:12.5px;font-weight:600;border-radius:9px}
.logout .ic{width:15px;height:15px}
.logout:hover{background:var(--cream-100);color:var(--bad)}

main{flex:1;padding:32px 36px;max-width:1380px}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:16px;flex-wrap:wrap}
h1{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:10px}
.periods{display:flex;gap:6px}
.periods a{padding:6px 14px;border:1px solid var(--line);border-radius:20px;color:var(--mut);font-size:12.5px;font-weight:700;background:var(--panel)}
.periods a.on{color:var(--cream);border-color:var(--navy);background:var(--navy)}
.periods a:hover:not(.on){border-color:var(--navy-300);color:var(--navy)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:14px;margin-bottom:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:17px 19px;box-shadow:var(--shadow)}
.card.hi{border-color:var(--gold);background:linear-gradient(165deg,var(--gold-100),var(--panel) 65%)}
.card .ic{width:18px;height:18px;color:var(--gold-600);opacity:.9;margin-bottom:9px;display:block}
.card h3{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.6px;font-weight:700}
.card b{font-family:var(--font-display);font-size:28px;font-weight:700;display:block;margin-top:4px;color:var(--navy);line-height:1.15}
.card small{color:var(--mut);font-size:11.5px}
.delta{font-size:11.5px;margin-left:7px;font-weight:700}.delta.up{color:var(--good)}.delta.down{color:var(--bad)}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:19px 21px;margin-bottom:16px;overflow-x:auto;box-shadow:var(--shadow)}
.panel h3{font-size:13px;margin-bottom:13px;color:var(--navy);font-weight:700;display:flex;align-items:center;gap:8px}
.panel h3 .ic{width:15px;height:15px;color:var(--gold-600);flex-shrink:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1000px){
  .grid2,.grid3{grid-template-columns:1fr}
  body{flex-direction:column}
  .side{width:100%;height:auto;position:static;flex-direction:row;overflow-x:auto;padding:16px 12px}
  .side nav{flex-direction:row}
  .logout{display:none}
  main{padding:20px}
}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;color:var(--mut);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:9px 10px;border-bottom:1px solid var(--cream-100);color:var(--ink-soft)}
tr:last-child td{border-bottom:0}
tr:hover td{background:var(--cream-50)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
td.bad{color:var(--bad);font-weight:700}
.mut{color:var(--mut)}
.badge{background:var(--navy);color:var(--gold-100);font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;letter-spacing:.5px}
.pulse{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--good);animation:pu 1.6s infinite;margin-left:2px}
@keyframes pu{50%{opacity:.25}}
.timeline{list-style:none;border-left:2px solid var(--line);margin:9px 0 0 8px;padding-left:19px}
.timeline li{margin-bottom:9px;position:relative;font-size:13px;color:var(--ink-soft)}
.timeline li:before{content:'';position:absolute;left:-24px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--mut);border:2px solid var(--panel)}
.timeline li.pv:before{background:var(--gold)}
.timeline li.form:before{background:var(--good)}
.timeline li.ev.rage_click:before,.timeline li.ev.error:before{background:var(--bad)}
.timeline .ts{color:var(--mut);font-size:11px;margin-right:6px}
.journey h3{color:var(--navy);font-weight:700;font-size:13.5px}

.login-body{display:flex;align-items:center;justify-content:center;background:var(--bg)}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:38px 34px;width:330px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow)}
.login-card .lockic{width:28px;height:28px;color:var(--gold-600);margin:0 auto}
.login-card .brand{padding:0;text-align:center}
.login-card input{background:var(--cream-50);border:1px solid var(--line);border-radius:10px;padding:11px 13px;color:var(--ink);font-size:14px;font-family:var(--font-sans)}
.login-card input:focus{outline:none;border-color:var(--gold)}
.login-card button{background:var(--navy);color:var(--cream);border:0;border-radius:10px;padding:12px;font-weight:700;font-family:var(--font-sans);font-size:14px;cursor:pointer;letter-spacing:.2px}
.login-card button:hover{background:var(--navy-700)}
.err{color:var(--bad);font-size:12.5px}