:root {
  --bg:#0a0e1a; --bg2:#0e1424; --panel:#131b30; --panel2:#172037;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --text:#e8edf7; --muted:#8a98b8; --faint:#5e6b8a;
  --accentA:#22d3ee; --accentB:#6366f1; --accentText:#22d3ee;
  --green:#34d399; --amber:#fbbf24; --rose:#fb7185;
  --soft:rgba(255,255,255,.04); --soft2:rgba(255,255,255,.06);
  --code-bg:#0a1120; --header-bg:rgba(10,14,26,.72);
  --glow1:rgba(99,102,241,.18); --glow2:rgba(34,211,238,.12);
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
html[data-theme="light"] {
  --bg:#eef1f7; --bg2:#e6eaf2; --panel:#ffffff; --panel2:#f4f7fb;
  --line:rgba(15,23,42,.10); --line2:rgba(15,23,42,.16);
  --text:#0f1a30; --muted:#54627a; --faint:#8a96aa;
  --accentText:#0e7490;
  --soft:rgba(15,23,42,.045); --soft2:rgba(15,23,42,.07);
  --header-bg:rgba(238,241,247,.8);
  --glow1:rgba(99,102,241,.10); --glow2:rgba(34,211,238,.10);
  --shadow:0 8px 24px rgba(15,23,42,.10);
}
* { box-sizing:border-box; }
html,body { height:100%; margin:0; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--glow1), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, var(--glow2), transparent 55%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
}
button { cursor:pointer; border:none; border-radius:10px; padding:9px 16px; font-size:13px; font-weight:600;
  color:#05101e; background:linear-gradient(135deg,var(--accentA),var(--accentB)); box-shadow:0 6px 16px rgba(99,102,241,.35); transition:transform .08s ease, filter .15s ease; }
button:hover { filter:brightness(1.07); } button:active { transform:translateY(1px); }
button.ghost { background:var(--panel); color:var(--text); border:1px solid var(--line2); box-shadow:none; }
button.sm { padding:6px 12px; font-size:12px; }
input,select { background:var(--panel); border:1px solid var(--line2); color:var(--text); border-radius:9px; padding:9px 11px; font-size:13px; outline:none; }
input:focus,select:focus { border-color:var(--accentB); box-shadow:0 0 0 3px rgba(99,102,241,.22); }
a { color:inherit; }
.hidden { display:none !important; }

/* logo: Sherlock mark, swapped by theme (white-on-dark / black-on-light).
   In the header he floats: absolutely positioned so he spans over the banner
   and overflows down into the page (transparent PNG, so it reads cleanly). */
.logo { position:absolute; left:16px; top:2px; width:80px; height:88px; flex:0 0 auto;
  pointer-events:none; z-index:11; background:transparent;
  background-image:url('whiteonblack.png'); background-size:contain; background-repeat:no-repeat; background-position:left bottom;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.4)); }
html[data-theme="light"] .logo { background-image:url('blackonwhite.png'); filter:drop-shadow(0 8px 16px rgba(15,23,42,.2)); }
/* in the login card he's in normal flow, just larger */
.logo.lg { position:static; top:auto; width:72px; height:84px; z-index:auto; filter:none; }

.avatar { border-radius:11px; display:grid; place-items:center; font-weight:800; color:#06121f; background:linear-gradient(135deg,var(--accentA),var(--accentB)); }

/* ---- auth ---- */
#authView { min-height:100vh; display:grid; place-items:center; padding:24px; }
.authcard { width:100%; max-width:380px; background:linear-gradient(180deg,var(--panel),var(--bg2)); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); padding:28px; }
.authcard .brand { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.authcard h1 { font-size:19px; margin:0; }
.authcard .tag { color:var(--muted); font-size:13px; margin:2px 0 22px; }
.authcard label { font-size:11px; text-transform:uppercase; letter-spacing:.7px; color:var(--faint); display:block; margin:14px 0 5px; }
.authcard input { width:100%; }
.authcard button.primary { width:100%; margin-top:20px; padding:11px; }
.authcard .switch { text-align:center; margin-top:16px; font-size:13px; color:var(--muted); }
.authcard .switch a { color:var(--accentText); cursor:pointer; font-weight:600; }
.msg { font-size:12.5px; margin-top:12px; min-height:16px; }
.msg.err { color:var(--rose); } .msg.ok { color:var(--green); }

/* ---- header ---- */
header { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:14px; padding:10px 22px;
  background:var(--header-bg); backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--line); overflow:visible; }
header .brand { display:flex; align-items:center; gap:11px; margin-left:86px; }
header h1 { font-size:16px; margin:0; } header .brand p { margin:0; font-size:11px; color:var(--muted); }
header .spacer { margin-left:auto; }
header .who { font-size:12.5px; color:var(--muted); margin-right:10px; }

.container { padding:42px 22px 22px; max-width:1180px; margin:0 auto; }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
h2.section { font-size:14px; text-transform:uppercase; letter-spacing:1.1px; color:var(--muted); margin:0; font-weight:700; }

/* ---- sites ---- */
.sites { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.sitecard { background:linear-gradient(180deg,var(--panel),var(--bg2)); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
.sitecard .top { display:flex; align-items:center; gap:11px; }
.sitecard .top .avatar { width:40px; height:40px; font-size:15px; }
.sitecard .name { font-weight:700; font-size:15px; }
.sitecard .dom { font-size:12px; color:var(--muted); }
.sitecard .actions { display:flex; gap:8px; margin-top:12px; }

.newform { background:linear-gradient(180deg,var(--panel),var(--bg2)); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:16px; box-shadow:var(--shadow); }
.newform .fields { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.newform .f { display:flex; flex-direction:column; gap:5px; }
.newform label { font-size:10px; text-transform:uppercase; letter-spacing:.7px; color:var(--faint); }

/* ---- site detail / filters ---- */
.filters { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:16px;
  background:linear-gradient(180deg,var(--panel),var(--bg2)); border:1px solid var(--line); border-radius:14px; padding:13px 14px; }
.filters .f { display:flex; flex-direction:column; gap:5px; }
.filters label { font-size:10px; text-transform:uppercase; letter-spacing:.7px; color:var(--faint); }

.split { display:grid; grid-template-columns:380px 1fr; gap:18px; align-items:start; }
@media (max-width:900px){ .split { grid-template-columns:1fr; } }

.companies { display:flex; flex-direction:column; gap:10px; }
.company { text-align:left; width:100%; background:linear-gradient(180deg,var(--panel),var(--bg2)); border:1px solid var(--line); border-radius:var(--radius); padding:14px 15px; box-shadow:var(--shadow); color:var(--text); font:inherit; cursor:pointer; transition:border-color .15s ease; }
.company:hover { border-color:var(--line2); }
.company.active { border-color:transparent; box-shadow:0 0 0 2px var(--accentB), var(--shadow); }
.company .r1 { display:flex; align-items:center; gap:10px; }
.company .avatar { width:38px; height:38px; }
.company .nm { font-weight:700; font-size:15px; } .company .dm { font-size:12px; color:var(--muted); }
.badge { margin-left:auto; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:3px 8px; border-radius:999px; color:var(--green); background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.3); }
.badge.edu,.badge.relay { color:#c4b5fd; background:rgba(167,139,250,.12); border-color:rgba(167,139,250,.3); }
.badge.residential { color:#67e8f9; background:rgba(34,211,238,.1); border-color:rgba(34,211,238,.3); }
.badge.vpn,.badge.proxy { color:var(--amber); background:rgba(251,191,36,.1); border-color:rgba(251,191,36,.3); }
.badge.tor { color:var(--rose); background:rgba(251,113,133,.1); border-color:rgba(251,113,133,.3); }
.badge.hosting,.badge.unknown { color:var(--muted); background:var(--soft2); border-color:var(--line2); }
.metrics { display:flex; gap:15px; margin-top:11px; }
.metric .v { font-size:15px; font-weight:700; } .metric .k { font-size:10px; color:var(--faint); text-transform:uppercase; letter-spacing:.6px; }
.company .seen { margin-top:8px; font-size:11.5px; color:var(--faint); }
.flag { width:18px; height:13px; border-radius:2px; vertical-align:-2px; margin-right:6px; box-shadow:0 0 0 1px var(--line2); }
.vmeta { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px 59px; }
.chip { font-size:11.5px; color:var(--muted); background:var(--soft); border:1px solid var(--line); border-radius:8px; padding:4px 9px; }
.chip b { color:var(--text); font-weight:600; }
.chip.warn { color:var(--amber); background:rgba(251,191,36,.1); border-color:rgba(251,191,36,.3); }

/* clickable site cards */
.sitecard.clickable { cursor:pointer; transition:border-color .15s ease, transform .08s ease; }
.sitecard.clickable:hover { border-color:var(--line2); }
.sitecard.clickable:active { transform:translateY(1px); }
.sitecard .chev { margin-left:auto; color:var(--faint); font-size:24px; line-height:1; padding-left:8px; }

/* setup modal */
.modal { position:fixed; inset:0; z-index:50; background:rgba(4,8,18,.72); backdrop-filter:blur(5px); display:grid; place-items:center; padding:20px; }
.modal.hidden { display:none; }
.modal-card { width:100%; max-width:640px; max-height:88vh; overflow:auto; background:linear-gradient(180deg,var(--panel),var(--bg2)); border:1px solid var(--line2); border-radius:18px; box-shadow:var(--shadow); }
.modal-head { display:flex; align-items:flex-start; gap:12px; padding:20px 22px 10px; position:sticky; top:0; background:var(--panel); border-bottom:1px solid var(--line); }
.modal-title { font-size:18px; font-weight:800; }
.modal-sub { font-size:13px; color:var(--muted); margin-top:2px; }
.iconbtn { margin-left:auto; background:var(--panel); border:1px solid var(--line2); color:var(--muted); border-radius:9px; padding:6px 11px; box-shadow:none; }
.modal-body { padding:8px 22px 22px; }
.setup-label { font-size:11px; text-transform:uppercase; letter-spacing:.9px; color:var(--accentText); font-weight:700; margin:18px 0 9px; }
.codebox { display:flex; align-items:center; gap:10px; background:var(--code-bg); border:1px solid var(--line2); border-radius:10px; padding:12px 14px; }
.codebox code { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11.5px; color:var(--accentA); word-break:break-all; flex:1; line-height:1.55; }
.setup-note { font-size:12.5px; color:var(--muted); margin-top:11px; line-height:1.65; }
.setup-foot { font-size:12.5px; color:var(--muted); margin-top:20px; padding-top:14px; border-top:1px solid var(--line); line-height:1.65; }
.pills { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.pill { background:var(--panel); color:var(--muted); border:1px solid var(--line2); border-radius:999px; padding:7px 14px; font-size:12.5px; font-weight:600; box-shadow:none; }
.pill.on { color:#05101e; background:linear-gradient(135deg,var(--accentA),var(--accentB)); border-color:transparent; }
.steps { margin:0; padding-left:20px; }
.steps li { font-size:13.5px; color:var(--text); margin-bottom:11px; line-height:1.6; }
.steps b { font-weight:700; }
.steps code { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; background:var(--soft2); padding:1px 5px; border-radius:5px; color:var(--accentText); }

.panel { background:linear-gradient(180deg,var(--panel),var(--bg2)); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; min-height:340px; }
.phead { display:flex; align-items:center; gap:13px; }
.phead .avatar { width:46px; height:46px; font-size:18px; } .phead .nm { font-size:20px; font-weight:800; } .phead .dm { font-size:13px; color:var(--muted); }
.psub { color:var(--muted); font-size:13px; margin:3px 0 20px 59px; }
.session { border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin-bottom:16px; background:var(--soft); }
.shead { display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.shead .vt { font-weight:700; font-size:14px; } .shead .wn { font-size:12px; color:var(--muted); }
.shead .total { margin-left:auto; text-align:right; }
.shead .total .v { font-size:20px; font-weight:800; background:linear-gradient(135deg,var(--accentA),var(--accentB)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.shead .total .k { font-size:10px; color:var(--faint); text-transform:uppercase; letter-spacing:.6px; }
.ribbon { display:flex; height:10px; border-radius:999px; overflow:hidden; margin-bottom:18px; background:var(--soft2); }
.ribbon span { height:100%; }
.timeline { position:relative; margin-left:6px; }
.step { position:relative; padding:0 0 22px 34px; } .step:last-child { padding-bottom:4px; }
.step::before { content:""; position:absolute; left:11px; top:22px; bottom:-4px; width:2px; background:linear-gradient(var(--accentB),rgba(99,102,241,.15)); }
.step:last-child::before { display:none; }
.dot { position:absolute; left:0; top:1px; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:800; color:#06121f; background:linear-gradient(135deg,var(--accentA),var(--accentB)); box-shadow:0 0 0 4px rgba(99,102,241,.15); }
.dot.end { background:linear-gradient(135deg,var(--amber),#f59e0b); box-shadow:0 0 0 4px rgba(251,191,36,.15); }
.step .path { font-weight:600; font-size:14px; margin-bottom:7px; word-break:break-all; }
.barwrap { display:flex; align-items:center; gap:10px; }
.bar { height:12px; border-radius:999px; background:linear-gradient(90deg,var(--accentA),var(--accentB)); min-width:6px; box-shadow:0 2px 8px rgba(34,211,238,.25); }
.bar.open { background:repeating-linear-gradient(90deg,var(--amber),var(--amber) 6px,transparent 6px,transparent 11px); box-shadow:none; }
.dwell { font-size:13px; font-weight:700; white-space:nowrap; } .dwell .unit { color:var(--muted); font-weight:600; }
.exittag { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; padding:2px 7px; border-radius:999px; margin-left:8px; }
.exittag.left { color:var(--muted); background:var(--soft2); border:1px solid var(--line2); }
.exittag.unknown { color:var(--amber); background:rgba(251,191,36,.1); border:1px solid rgba(251,191,36,.3); }
.empty { display:grid; place-items:center; height:280px; text-align:center; color:var(--muted); }
.empty .big { font-size:15px; color:var(--text); margin-bottom:6px; }
.skeleton { color:var(--faint); font-size:13px; padding:24px 4px; }
.err-inline { color:var(--rose); font-size:13px; padding:10px 0; }

/* journey column header bar (back button hidden on desktop) */
.jbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
#journeyBack { display:none; text-decoration:none; }

/* ---- mobile ---- */
@media (max-width:760px) {
  /* tapping a visitor opens the journey as a full-screen slide-in panel */
  #journeyCol { position:fixed; inset:0; z-index:45; background:var(--bg); padding:14px 14px 28px;
    overflow:auto; transform:translateX(100%); transition:transform .22s ease; visibility:hidden;
    -webkit-overflow-scrolling:touch; }
  #journeyCol.open { transform:translateX(0); visibility:visible; }
  #journeyCol .jbar { position:sticky; top:0; background:var(--bg); padding:4px 0 10px; margin-bottom:8px; z-index:2; }
  #journeyBack { display:inline-block; }
  .jtitle { display:none; }
  header { padding:10px 14px; gap:10px; }
  header .who { display:none; }
  .logo { left:10px; width:58px; height:66px; }
  header .brand { margin-left:58px; }
  header h1 { font-size:15px; }
  .container { padding:26px 14px 20px; }
  .row-between { flex-wrap:wrap; }
  .sites { grid-template-columns:1fr; }
  .filters { gap:8px; padding:11px 12px; }
  .filters .f { flex:1 1 calc(50% - 5px); }
  .filters .f > select, .filters .f > input { width:100%; }
  #applyFilters { flex:1 1 100%; }
  .split { gap:14px; }
  .vmeta { margin-left:0; }
  .psub { margin-left:0; }
  .phead .nm { font-size:18px; }
  .panel { padding:16px; }
  .newform .fields { gap:8px; }
  .newform .f { flex:1 1 100%; }
  .newform #siteDomains { width:100% !important; }
  .modal { padding:12px; }
  .modal-head { padding:16px 16px 10px; }
  .modal-body { padding:6px 16px 18px; }
}