/* bLoopServer — shared shell.
   Dark by default; light is opt-in via the toggle (data-theme="light").
   Data-mark colours (--accent / --live) are a validated pair: they stay apart
   under every colour-vision simulation on both surfaces. */

:root {
  color-scheme: dark;

  --bg:        #0b0b0c;
  --bg-glow:   #14141a;
  --surface:   #141416;
  --surface-2: #1b1b1f;
  --raise:     #232328;

  --ink:       #f4f4f2;
  --ink-2:     #a9a8a2;
  --ink-3:     #74736e;

  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.05);
  --grid:      #2c2c2a;

  --accent:    #3987e5;
  --accent-2:  #6da7ec;
  --live:      #14b866;
  --warn:      #fab219;
  --bad:       #e35b5b;

  --shadow:    0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
  --r:         13px;
  --r-sm:      8px;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg:        #f7f7f5;
  --bg-glow:   #ffffff;
  --surface:   #ffffff;
  --surface-2: #fbfbf9;
  --raise:     #f1f1ee;

  --ink:       #101011;
  --ink-2:     #55544f;
  --ink-3:     #8a8983;

  --line:      rgba(11,11,11,.11);
  --line-2:    rgba(11,11,11,.06);
  --grid:      #e4e3dd;

  --accent:    #2a78d6;
  --accent-2:  #1c5cab;
  --live:      #0a8f4d;
  --warn:      #b57d00;
  --bad:       #cf3b3b;

  --shadow:    0 1px 2px rgba(11,11,11,.05), 0 8px 24px -14px rgba(11,11,11,.18);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 18px 56px;
  min-height: 100vh;
  background:
    radial-gradient(1100px 520px at 50% -220px, var(--bg-glow), transparent 70%),
    var(--bg);
  color: var(--ink);
  font: 14px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1040px; margin: 0 auto; display: grid; gap: 15px; }
.wrap > *, .row > * { min-width: 0; }

/* ---------- top bar ---------- */

.topbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 22px 2px 8px;
}
.brand { display: flex; align-items: baseline; gap: 9px; }
.brand h1 {
  margin: 0; font-size: 17px; font-weight: 640; letter-spacing: -.02em;
}
.brand .dotmark {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  align-self: center;
}

nav { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; }
nav a {
  color: var(--ink-2); text-decoration: none; font-size: 13px; font-weight: 500;
  padding: 6px 11px; border-radius: 999px; transition: background .15s, color .15s;
}
nav a:hover { color: var(--ink); background: var(--raise); }
nav a[aria-current="page"] { color: var(--ink); background: var(--raise); }

.theme-toggle {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  width: 30px; height: 30px; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center; font-size: 13px; padding: 0;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-3); }

/* ---------- sidebar (wide screens) ----------
   Same markup as the top bar; from here up it becomes a fixed left rail. */
:root { --side: 216px; }

@media (min-width: 880px) {
  body { padding-left: calc(var(--side) + 20px); }

  .topbar {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--side);
    flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0;
    padding: 24px 14px 18px;
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border-right: 1px solid var(--line);
    overflow-y: auto; z-index: 10;
  }
  .topbar .brand { margin: 0 6px 24px; }

  nav { flex-direction: column; margin-left: 0; gap: 3px; width: 100%; }
  nav a { display: block; padding: 8px 12px; border-radius: var(--r-sm); font-size: 13.5px; }

  .theme-toggle { margin-top: auto; }

  .wrap { margin: 0 auto; padding-top: 24px; }
}

/* ---------- surfaces ---------- */

.card {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 17px 18px;
  box-shadow: var(--shadow);
}
.card > h2 {
  font-size: 11.5px; font-weight: 600; margin: 0 0 14px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .07em;
  display: flex; align-items: center; gap: 8px;
}
.card > h2 .count { color: var(--ink-3); font-weight: 400; letter-spacing: 0; text-transform: none; }
.card > .lead { color: var(--ink-2); font-size: 13px; margin: -6px 0 15px; }

.sub { color: var(--ink-3); font-size: 12.5px; overflow-wrap: anywhere; }

/* ---------- controls ---------- */

input, select, button, textarea {
  font: inherit; color: var(--ink);
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 11px;
  min-width: 0; max-width: 100%;
  transition: border-color .15s, background .15s;
}
input::placeholder { color: var(--ink-3); }
input, select { width: 100%; }
input:hover, select:hover { border-color: var(--ink-3); }
input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent;
}
input[aria-invalid="true"] { border-color: var(--bad); }

button {
  cursor: pointer; width: auto; font-weight: 520;
  background: var(--raise);
}
button:hover:not(:disabled) { border-color: var(--ink-3); }
button:active:not(:disabled) { transform: translateY(.5px); }
button:disabled { opacity: .42; cursor: not-allowed; }
button.primary {
  background: var(--accent); border-color: transparent; color: #fff;
}
button.primary:hover:not(:disabled) { background: var(--accent-2); }
button.danger { color: var(--bad); }
button.sm { padding: 4px 10px; font-size: 12.5px; border-radius: 7px; }

.row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
label { display: block; font-weight: 500; margin-bottom: 4px; font-size: 13px; }
.help { color: var(--ink-3); font-size: 12px; margin-top: 5px; overflow-wrap: anywhere; }

/* ---------- list items ---------- */

.item { padding: 13px 0; border-bottom: 1px solid var(--line-2); }
.item:first-child { padding-top: 0; }
.item:last-child { border-bottom: none; padding-bottom: 0; }
.item .top { display: flex; gap: 11px; align-items: baseline; }
.item .nm { font-weight: 540; overflow-wrap: anywhere; flex: 1 1 auto; letter-spacing: -.01em; }
.item .pct { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; font-size: 13px; }
.item .meta {
  color: var(--ink-3); font-size: 12px; margin-top: 3px;
  display: flex; gap: 12px; flex-wrap: wrap;
}

/* ---------- progress ---------- */

.bar { height: 4px; background: var(--grid); border-radius: 99px; overflow: hidden; margin-top: 9px; }
.bar > i {
  display: block; height: 100%; border-radius: 99px;
  background: var(--accent);
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.bar > i.live {
  background: linear-gradient(90deg, var(--live), color-mix(in srgb, var(--live) 55%, var(--accent)));
}

.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--live);
  display: inline-block; flex: 0 0 auto;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 60%, transparent);
  animation: ping 1.8s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 55%, transparent); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- avatar ---------- */

.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 620; letter-spacing: -.02em; color: #fff;
  border: 1px solid var(--line);
  overflow: hidden; user-select: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.lg { width: 42px; height: 42px; font-size: 15px; }

/* ---------- stats ---------- */

.stat { display: flex; gap: 26px; flex-wrap: wrap; }
.stat > div .k {
  font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em;
}
.stat > div .v {
  font-size: 20px; font-weight: 620; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; margin-top: 1px;
}

.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--raise); color: var(--ink-2);
}

/* ---------- canvas blocks ---------- */

canvas { display: block; width: 100%; }
.canvas-host { position: relative; }
.tip {
  position: absolute; pointer-events: none; opacity: 0; transition: opacity .12s;
  background: var(--ink); color: var(--bg); padding: 5px 9px; border-radius: 7px;
  font-size: 12px; white-space: nowrap; transform: translate(-50%, -132%); z-index: 5;
  font-variant-numeric: tabular-nums;
}
.tip.on { opacity: 1; }
.legend { display: flex; gap: 15px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); margin-top: 11px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ---------- messages ---------- */

.note { border-radius: var(--r-sm); padding: 10px 12px; font-size: 13px; margin-top: 10px; }
.note.err  { background: color-mix(in srgb, var(--bad) 13%, transparent);  color: var(--bad); }
.note.warn { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--ink); }
.note.ok   { background: color-mix(in srgb, var(--live) 13%, transparent); color: var(--ink); }
.note ul { margin: 7px 0 0; padding-left: 18px; }

.empty { color: var(--ink-3); font-size: 13px; padding: 6px 0; }

code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12px; color: var(--ink-2);
  background: var(--raise); padding: 1px 5px; border-radius: 5px;
}

video { width: 100%; border-radius: var(--r-sm); background: #000; margin-top: 11px; }

a.plain { color: var(--accent); text-decoration: none; }
a.plain:hover { text-decoration: underline; }

.spin {
  display: inline-block; width: 11px; height: 11px;
  border: 2px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.table-scroll { overflow-x: auto; }

@media (max-width: 560px) {
  .stat { gap: 18px; }
  .stat > div .v { font-size: 17px; }
}