@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Unbounded:wght@500;600&display=swap");

:root {
  color-scheme: dark;
  --bg: #060607;
  --panel: rgba(17, 17, 20, 0.82);
  --panel-solid: #111114;
  --line: rgba(255, 255, 255, 0.09);
  --muted: #85858d;
  --text: #f6f4f8;
  --purple: #9500ff;
  --purple-dark: #47007a;
  --green: #6ee7a8;
  --red: #ff7c89;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: Inter, system-ui, sans-serif; font-size: 14px; }
button, select { font: inherit; }
button { color: inherit; }

.ambient { position: fixed; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(120px); opacity: .12; }
.ambient-one { width: 500px; height: 500px; top: -260px; left: 25%; background: var(--purple); }
.ambient-two { width: 420px; height: 420px; right: -260px; bottom: -160px; background: var(--purple-dark); }

.sidebar { position: fixed; z-index: 4; inset: 0 auto 0 0; width: 238px; padding: 30px 18px 22px; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: rgba(7,7,8,.93); backdrop-filter: blur(24px); }
.brand { padding: 0 10px; display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(149,0,255,.65); border-radius: 12px; background: linear-gradient(145deg,#9500ff,#47007a); box-shadow: 0 8px 30px rgba(149,0,255,.2); font: 600 15px Unbounded,sans-serif; }
.brand strong, .brand small, .profile strong, .profile small, .sidebar-foot strong, .sidebar-foot small { display: block; }
.brand strong { font: 600 13px Unbounded,sans-serif; }
.brand small { margin-top: 5px; color: #717178; font-size: 8px; font-weight: 700; letter-spacing: .18em; }
.main-nav { margin-top: 54px; display: grid; gap: 7px; }
.nav-item { width: 100%; padding: 12px 13px; display: flex; align-items: center; gap: 12px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: #85858d; cursor: pointer; text-align: left; transition: .18s ease; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.035); }
.nav-item.active { color: #fff; border-color: rgba(149,0,255,.24); background: linear-gradient(90deg,rgba(149,0,255,.18),rgba(149,0,255,.035)); }
.nav-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.045); font-size: 14px; }
.nav-item.active .nav-icon { background: rgba(149,0,255,.22); color: #c474ff; }
.sidebar-foot { margin-top: auto; padding: 15px 11px; display: flex; align-items: center; gap: 11px; border-top: 1px solid var(--line); color: #aaaab1; }
.status-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px rgba(110,231,168,.65); }
.sidebar-foot strong { font-size: 11px; font-weight: 600; }
.sidebar-foot small { margin-top: 3px; color: #66666d; font-size: 9px; }

.shell { position: relative; z-index: 1; min-height: 100vh; margin-left: 238px; padding: 0 36px 48px; }
.topbar { height: 108px; display: flex; align-items: center; justify-content: space-between; gap: 22px; border-bottom: 1px solid var(--line); }
.eyebrow, .panel-label { margin: 0 0 8px; color: #6f6f77; font-size: 9px; font-weight: 700; letter-spacing: .16em; }
h1 { margin: 0; font: 600 25px Unbounded,sans-serif; letter-spacing: -.035em; }
.topbar-actions { display: flex; align-items: center; gap: 22px; }
.range-select { min-width: 155px; padding: 8px 12px; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); }
.range-select span { color: #696970; font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.range-select select { padding: 0; border: 0; outline: 0; background: transparent; color: #dedde2; font-size: 11px; }
.profile { padding-left: 20px; display: flex; align-items: center; gap: 10px; border-left: 1px solid var(--line); }
.avatar { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: #202025; color: #d7b2f1; font-size: 10px; font-weight: 700; }
.profile strong { font-size: 11px; }.profile small { margin-top: 2px; color: #68686f; font-size: 9px; }
.mobile-menu { display: none; border: 0; background: none; font-size: 20px; }

.notice { margin: 22px 0; padding: 11px 14px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(149,0,255,.2); border-radius: 11px; background: rgba(149,0,255,.055); color: #aaa5ae; font-size: 11px; }
.notice strong { color: #d4badf; }.notice-icon { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: rgba(149,0,255,.2); color: #d4a1f8; font-size: 10px; font-weight: 700; }
.tab-panel { animation: reveal .24s ease; }.tab-panel[hidden] { display: none; }
@keyframes reveal { from { opacity: 0; transform: translateY(4px); } }

.kpi-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.kpi-card, .panel { position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(20px); }
.kpi-card { min-height: 142px; padding: 19px 20px; border-radius: 15px; }
.kpi-card.featured { border-color: rgba(149,0,255,.3); background: linear-gradient(135deg,rgba(149,0,255,.12),rgba(17,17,20,.84) 58%); }
.kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #898990; font-size: 10px; }
.trend { display: inline-flex; padding: 4px 6px; border-radius: 6px; font-size: 8px; font-weight: 700; }
.trend.positive { background: rgba(110,231,168,.09); color: var(--green); }.trend.negative { background: rgba(255,124,137,.09); color: var(--red); }.trend.neutral { background: rgba(255,255,255,.05); color: #aaa; }
.kpi-value { margin-top: 20px; display: block; font: 600 clamp(20px,2.1vw,30px) Unbounded,sans-serif; letter-spacing: -.05em; }
.kpi-context { margin-top: 9px; display: block; color: #66666e; font-size: 9px; }
.micro-bars { position: absolute; right: 17px; bottom: 17px; height: 27px; display: flex; align-items: end; gap: 3px; opacity: .5; }
.micro-bars i { width: 3px; border-radius: 3px; background: linear-gradient(#b857ff,#590092); }.micro-bars i:nth-child(1){height:24%}.micro-bars i:nth-child(2){height:41%}.micro-bars i:nth-child(3){height:32%}.micro-bars i:nth-child(4){height:55%}.micro-bars i:nth-child(5){height:49%}.micro-bars i:nth-child(6){height:72%}.micro-bars i:nth-child(7){height:61%}.micro-bars i:nth-child(8){height:84%}.micro-bars i:nth-child(9){height:76%}.micro-bars i:nth-child(10){height:100%}

.dashboard-grid { margin-top: 14px; display: grid; grid-template-columns: minmax(0,1.65fr) minmax(290px,.75fr); gap: 14px; }
.panel { padding: 21px; border-radius: 15px; }
.panel-head { min-height: 38px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.panel-head h2 { margin: 0; font-size: 14px; font-weight: 600; }.panel-label { margin-bottom: 5px; font-size: 8px; }
.legend { display: flex; gap: 14px; color: #717179; font-size: 8px; }.legend span { display: flex; align-items: center; gap: 5px; }.legend i { width: 13px; height: 2px; display: inline-block; }.legend-purple { background: #a527ff; }.legend-grey { background: #4c4c53; }
.chart-wrap { height: 252px; margin-top: 18px; } canvas { width: 100%; height: 100%; display: block; }
.funnel { margin-top: 22px; display: grid; gap: 16px; }.funnel div,.country-list div { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 7px; color: #8d8d95; font-size: 9px; }.funnel strong,.country-list strong { color: #dddce1; font-size: 9px; }.funnel i,.country-list i { grid-column: 1/-1; width: var(--width); height: 4px; display: block; border-radius: 8px; background: linear-gradient(90deg,var(--purple-dark),var(--purple)); }
.conversion-summary { margin-top: 25px; padding-top: 18px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); }.conversion-summary strong { font: 600 20px Unbounded,sans-serif; }.conversion-summary span { max-width: 110px; color: #6f6f77; font-size: 9px; line-height: 1.35; }
.wide-panel { grid-column: 1/-1; }.text-button { border: 0; background: none; color: #9a66bc; cursor: pointer; font-size: 9px; }
.table-scroll { margin: 17px -5px -3px; overflow-x: auto; } table { width: 100%; border-collapse: collapse; white-space: nowrap; } th { padding: 10px 12px; color: #616168; font-size: 8px; font-weight: 600; letter-spacing: .08em; text-align: right; text-transform: uppercase; } th:first-child,td:first-child { text-align: left; } td { padding: 13px 12px; border-top: 1px solid rgba(255,255,255,.055); color: #b6b5bb; font-size: 10px; text-align: right; } .rank { margin-right: 13px; color: #5e5e66; font-size: 8px; }

.traffic-panel { grid-column: 1/2; }.device-panel { grid-column: 2/3; }.geo-panel { grid-column: 1/2; }.source-panel { grid-column: 2/3; }
.donut-layout { min-height: 252px; display: flex; align-items: center; justify-content: center; gap: 25px; }.donut { width: 130px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#9500ff 0 61.4%,#652299 61.4% 95.6%,#3f3f46 95.6%); }.donut::before { content:""; position:absolute; width:92px; height:92px; border-radius:50%; background:#121215; }.donut div { z-index:1; text-align:center; }.donut strong,.donut span { display:block; }.donut strong { font:600 16px Unbounded,sans-serif; }.donut span { margin-top:4px; color:#6f6f77; font-size:8px; }.breakdown { min-width:100px; padding:0; display:grid; gap:14px; list-style:none; }.breakdown li { display:flex; justify-content:space-between; gap:15px; color:#85858d; font-size:9px; }.breakdown span { display:flex; align-items:center; gap:7px; }.breakdown strong { color:#e4e2e6; }
.dot { width:6px; height:6px; display:inline-block; border-radius:50%; }.dot.purple{background:#9500ff}.dot.violet{background:#652299}.dot.blue{background:#5d86d7}.dot.grey{background:#484850}
.country-list { margin-top: 22px; display:grid; gap:17px; }.country-list b { width: 24px; margin-right: 8px; display:inline-block; color:#d9d8dd; font-size:8px; }.country-list i { background:linear-gradient(90deg,#47007a,#9500ff); opacity:.75; }
.source-list { margin:18px 0 0; padding:0; display:grid; list-style:none; }.source-list li { padding:14px 0; display:grid; grid-template-columns:1fr auto; gap:3px 12px; border-top:1px solid rgba(255,255,255,.055); color:#96969d; font-size:9px; }.source-list li:first-child{border-top:0}.source-list span{display:flex;align-items:center;gap:8px}.source-list strong{color:#dddce1}.source-list small{grid-column:1/-1;padding-left:14px;color:#5d5d64;font-size:8px}
.privacy-pill { padding:5px 8px; border:1px solid rgba(110,231,168,.2); border-radius:99px; color:#82cda6; font-size:8px; }.persona-grid { margin-top:20px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.persona { padding:15px; display:grid; grid-template-columns:auto 1fr auto; align-items:start; gap:12px; border:1px solid rgba(255,255,255,.06); border-radius:12px; background:rgba(255,255,255,.018); }.persona-icon { width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:rgba(149,0,255,.13);color:#bf76ef;font-size:8px;font-weight:700}.persona strong{font-size:10px}.persona p{margin:6px 0 0;color:#717179;font-size:9px;line-height:1.55}.persona-share{color:#d2a6ed;font:500 12px Unbounded,sans-serif}.privacy-note{margin:15px 0 0;color:#5f5f66;font-size:8px}

@media (max-width: 1050px) { .kpi-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.traffic-panel,.device-panel,.geo-panel,.source-panel{grid-column:1}.wide-panel{grid-column:1}.device-panel .donut-layout{min-height:190px} }
@media (max-width: 720px) { .sidebar{width:76px;padding:27px 12px}.brand{padding:0;justify-content:center}.brand>span:last-child,.nav-item span:last-child,.sidebar-foot span:last-child{display:none}.main-nav{margin-top:45px}.nav-item{padding:10px;justify-content:center}.sidebar-foot{justify-content:center}.shell{margin-left:76px;padding:0 16px 35px}.topbar{height:auto;padding:22px 0;align-items:flex-start}.topbar-actions{gap:9px}.profile span:last-child{display:none}.profile{padding-left:10px}.range-select{min-width:132px}h1{font-size:20px}.persona-grid{grid-template-columns:1fr} }
@media (max-width: 510px) { .sidebar{transform:translateX(-100%);transition:.2s ease}.sidebar.open{transform:translateX(0);width:220px}.sidebar.open .brand>span:last-child,.sidebar.open .nav-item span:last-child,.sidebar.open .sidebar-foot span:last-child{display:block}.sidebar.open .nav-item{justify-content:flex-start}.shell{margin-left:0}.mobile-menu{display:block}.topbar{display:grid;grid-template-columns:auto 1fr}.topbar-actions{grid-column:1/-1;justify-content:space-between}.kpi-grid{grid-template-columns:1fr}.notice{line-height:1.45}.panel{padding:17px}.chart-wrap{height:210px}.persona{grid-template-columns:auto 1fr}.persona-share{grid-column:2}.donut-layout{flex-direction:column}.wide-panel{min-width:0} }

.refresh-button,.logout-button{height:39px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.035);color:#b8b7bd;cursor:pointer;font-size:10px}.refresh-button:hover,.logout-button:hover{border-color:rgba(149,0,255,.38);color:#fff}.refresh-button.loading span{display:inline-block;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.live-pill{padding:4px 7px;border-radius:99px;background:rgba(255,255,255,.05);color:#818188;font-size:8px}.live-pill.connected{background:rgba(110,231,168,.09);color:var(--green)}
.empty-state{min-height:245px;display:grid;place-content:center;text-align:center}.empty-state strong{font:500 16px Unbounded,sans-serif}.empty-state p{max-width:420px;margin:12px auto 0;color:#717179;font-size:10px;line-height:1.7}
.metric-list{margin-top:18px;display:grid;gap:13px}.metric-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;color:#92929a;font-size:9px}.metric-row strong{color:#e1dfe4}.metric-row i{grid-column:1/-1;width:var(--width);height:4px;border-radius:5px;background:linear-gradient(90deg,#47007a,#9500ff)}.metric-list.horizontal{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.metric-list.horizontal .metric-row{padding:12px;border:1px solid var(--line);border-radius:10px}.empty-row{padding:38px 0;color:#66666d;font-size:10px;text-align:center}

.login-page{min-height:100vh;display:grid;place-items:center;overflow:hidden}.login-shell{position:relative;z-index:2;width:min(430px,calc(100% - 36px))}.login-brand{margin:0 auto 24px;display:flex;align-items:center;justify-content:center;gap:12px}.login-brand strong,.login-brand small{display:block}.login-brand strong{font:600 13px Unbounded,sans-serif}.login-brand small{margin-top:5px;color:#717178;font-size:8px;font-weight:700;letter-spacing:.18em}.login-card{padding:38px;border:1px solid rgba(255,255,255,.11);border-radius:22px;background:rgba(14,14,17,.88);box-shadow:0 35px 100px rgba(0,0,0,.55);backdrop-filter:blur(28px)}.login-card h1{font-size:25px}.login-card>p:not(.eyebrow){margin:13px 0 28px;color:#777780;font-size:11px}.login-card label{display:block;margin-bottom:9px;color:#a3a1a8;font-size:9px;font-weight:600;letter-spacing:.05em}.password-field{height:50px;display:flex;border:1px solid var(--line);border-radius:12px;background:#09090b;transition:.18s}.password-field:focus-within{border-color:rgba(149,0,255,.65);box-shadow:0 0 0 3px rgba(149,0,255,.08)}.password-field input{min-width:0;flex:1;padding:0 15px;border:0;outline:0;background:transparent;color:#fff;font:500 16px Inter,sans-serif;letter-spacing:.08em}.password-field button{padding:0 14px;border:0;background:transparent;color:#777780;cursor:pointer;font-size:9px}.login-error{min-height:17px;margin:9px 0 0!important;color:var(--red)!important;font-size:9px!important}.login-submit{width:100%;height:50px;margin-top:8px;padding:0 17px;display:flex;align-items:center;justify-content:space-between;border:0;border-radius:12px;background:linear-gradient(100deg,#7600c9,#9500ff);color:#fff;cursor:pointer;font-size:11px;font-weight:600;box-shadow:0 12px 35px rgba(149,0,255,.2)}.login-submit:disabled{opacity:.55}.login-submit i{font-style:normal;font-size:17px}.secure-note{margin-top:21px;color:#5f5f67;font-size:8px;text-align:center}.secure-note span{margin-right:6px;color:var(--green);font-size:7px}
@media(max-width:720px){.metric-list.horizontal{grid-template-columns:repeat(2,1fr)}.logout-button{display:none}}@media(max-width:510px){.login-card{padding:28px 22px}.topbar-actions{flex-wrap:wrap}.refresh-button{margin-left:auto}}