Upload 8 files

.gitattributes

@@ -1,35 +1,35 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,58 @@
+# syntax=docker/dockerfile:1.6
+FROM python:3.11-slim
+
+# ---------------------------------------------------------------
+# System setup
+# ---------------------------------------------------------------
+ENV PYTHONDONTWRITEBYTECODE=1 \
+    PYTHONUNBUFFERED=1 \
+    PIP_NO_CACHE_DIR=1 \
+    PIP_DISABLE_PIP_VERSION_CHECK=1 \
+    PORT=7860 \
+    POLL_INTERVAL=8 \
+    UPSTREAM_API=https://dooratre-db.hf.space \
+    MASTER_PASSWORD=Dbpassword2000$ \
+    UPSTREAM_ADMIN_SECRET=Dbpassword2000$ \
+    UPSTREAM_API_KEY=Dbpassword2000$
+
+# Minimal build deps (eventlet/greenlet sometimes need them on slim)
+RUN apt-get update && apt-get install -y --no-install-recommends \
+        curl \
+        build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+# ---------------------------------------------------------------
+# Non-root user (HF Spaces friendly)
+# ---------------------------------------------------------------
+RUN useradd -m -u 1000 appuser
+WORKDIR /app
+
+# ---------------------------------------------------------------
+# Python deps (cache layer)
+# ---------------------------------------------------------------
+COPY requirements.txt .
+RUN pip install --upgrade pip && pip install -r requirements.txt
+
+# ---------------------------------------------------------------
+# App source
+# ---------------------------------------------------------------
+COPY --chown=appuser:appuser . .
+
+USER appuser
+
+EXPOSE 7860
+
+HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3 \
+    CMD curl -fsS http://localhost:7860/health || exit 1
+
+# ---------------------------------------------------------------
+# Run with gunicorn + eventlet worker for Socket.IO
+# ---------------------------------------------------------------
+CMD ["gunicorn", \
+     "-k", "eventlet", \
+     "-w", "1", \
+     "--bind", "0.0.0.0:7860", \
+     "--access-logfile", "-", \
+     "--error-logfile", "-", \
+     "--timeout", "120", \
+     "app:app"]

README.md

@@ -1,10 +1,40 @@
----
-title: Admin
-emoji: 👁
-colorFrom: red
-colorTo: green
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
+title: Admin
+emoji: 🐢
+colorFrom: blue
+colorTo: blue
+sdk: docker
+pinned: false
+---
+
+# ServerClass Admin Console v2
+
+Pro real-time dashboard for the ServerClass DB mesh.
+
+## Features
+- 🔒 Single master-password unlock (server-side credential vault)
+- 💾 30-day signed-cookie session — no re-typing
+- 📡 Live Socket.IO updates every 8 seconds
+- 📱 Mobile-first PWA-style UI with bottom nav + safe-area insets
+- 📊 KPI cards, load chart, sortable/searchable tables, CSV export
+- 🌙 Dark glassmorphism theme
+
+## Environment variables
+| Variable | Default | Purpose |
+|----------|---------|---------|
+| `MASTER_PASSWORD` | `Dbpassword2000$` | What the user types to unlock |
+| `UPSTREAM_ADMIN_SECRET` | `Dbpassword2000$` | `X-Admin-Secret` sent to upstream |
+| `UPSTREAM_API_KEY` | `Dbpassword2000$` | `X-API-Key` sent to upstream |
+| `UPSTREAM_API` | `https://dooratre-db.hf.space` | Backing DB instance |
+| `FLASK_SECRET_KEY` | (auto) | Cookie signing key — **set in prod** |
+| `POLL_INTERVAL` | `8` | Seconds between auto-refreshes |
+
+## Keyboard
+- `Ctrl/Cmd + L` — lock dashboard
+- `/` — focus search on the current page
+
+## Local
+```
+pip install -r requirements.txt
+python app.py
+```

app.py

@@ -0,0 +1,249 @@
+"""
+ServerClass DB Admin Dashboard
+Flask + Socket.IO backend with background polling and real-time broadcasts.
+
+Auth model:
+  - One MASTER PASSWORD unlocks the dashboard.
+  - On unlock, server uses pre-configured ADMIN_SECRET / API_KEY against upstream.
+  - Session is stored in a signed cookie -> auto-login on revisit.
+  - Credentials are NEVER sent to the browser.
+"""
+import os
+import time
+import threading
+from typing import Dict, Any, Optional
+
+import requests
+from flask import (
+    Flask, render_template, request, jsonify,
+    session, redirect, url_for, make_response
+)
+from flask_socketio import SocketIO, emit, disconnect
+
+# -----------------------------------------------------------------------------
+# Configuration
+# -----------------------------------------------------------------------------
+UPSTREAM_API   = os.environ.get("UPSTREAM_API", "https://dooratre-db.hf.space")
+POLL_INTERVAL  = int(os.environ.get("POLL_INTERVAL", "8"))  # seconds
+SECRET_KEY     = os.environ.get("FLASK_SECRET_KEY", "ServerClass-Admin-Key-Change-Me-In-Prod-9182734")
+
+# The master password the user types to unlock the dashboard.
+MASTER_PASSWORD = os.environ.get("MASTER_PASSWORD", "Dbpassword2000$")
+
+# Upstream credentials (same value used for both X-Admin-Secret and X-API-Key).
+UPSTREAM_ADMIN_SECRET = os.environ.get("UPSTREAM_ADMIN_SECRET", "Dbpassword2000$")
+UPSTREAM_API_KEY      = os.environ.get("UPSTREAM_API_KEY",      "Dbpassword2000$")
+
+app = Flask(__name__)
+app.config.update(
+    SECRET_KEY=SECRET_KEY,
+    SESSION_COOKIE_NAME="sc_admin",
+    SESSION_COOKIE_HTTPONLY=True,
+    SESSION_COOKIE_SAMESITE="Lax",
+    PERMANENT_SESSION_LIFETIME=60 * 60 * 24 * 30,  # 30 days
+)
+socketio = SocketIO(app, cors_allowed_origins="*", async_mode="eventlet")
+
+# -----------------------------------------------------------------------------
+# Per-connection auth state (sid -> bool)
+# -----------------------------------------------------------------------------
+_authed_sids: Dict[str, bool] = {}
+_authed_lock = threading.Lock()
+
+
+def mark_authed(sid: str) -> None:
+    with _authed_lock:
+        _authed_sids[sid] = True
+
+
+def is_authed(sid: str) -> bool:
+    with _authed_lock:
+        return _authed_sids.get(sid, False)
+
+
+def drop_sid(sid: str) -> None:
+    with _authed_lock:
+        _authed_sids.pop(sid, None)
+
+
+# -----------------------------------------------------------------------------
+# Upstream API client (uses server-side credentials only)
+# -----------------------------------------------------------------------------
+def fetch_upstream() -> Dict[str, Any]:
+    result: Dict[str, Any] = {
+        "ok": True,
+        "users": [],
+        "total": 0,
+        "status": None,
+        "errors": {},
+        "timestamp": int(time.time()),
+    }
+
+    # Users (admin endpoint)
+    try:
+        r = requests.get(
+            f"{UPSTREAM_API}/admin/users",
+            headers={
+                "X-Admin-Secret": UPSTREAM_ADMIN_SECRET,
+                "Content-Type": "application/json",
+            },
+            timeout=15,
+        )
+        if r.ok:
+            data = r.json()
+            result["users"] = data.get("users", [])
+            result["total"] = data.get("total", len(result["users"]))
+        else:
+            result["errors"]["users"] = f"{r.status_code}: {r.text[:200]}"
+    except Exception as e:
+        result["errors"]["users"] = str(e)
+
+    # Server status
+    try:
+        r = requests.get(
+            f"{UPSTREAM_API}/api/server-status",
+            headers={
+                "X-API-Key": UPSTREAM_API_KEY,
+                "Content-Type": "application/json",
+            },
+            timeout=15,
+        )
+        if r.ok:
+            result["status"] = r.json()
+        else:
+            result["errors"]["status"] = f"{r.status_code}: {r.text[:200]}"
+    except Exception as e:
+        result["errors"]["status"] = str(e)
+
+    if result["errors"] and not result["users"] and not result["status"]:
+        result["ok"] = False
+
+    return result
+
+
+# -----------------------------------------------------------------------------
+# Background poller — pushes to authed sockets only
+# -----------------------------------------------------------------------------
+def background_poller():
+    while True:
+        socketio.sleep(POLL_INTERVAL)
+
+        with _authed_lock:
+            sids = [sid for sid, ok in _authed_sids.items() if ok]
+        if not sids:
+            continue
+
+        try:
+            payload = fetch_upstream()
+            payload["source"] = "auto"
+            for sid in sids:
+                socketio.emit("data_update", payload, to=sid)
+        except Exception as e:
+            for sid in sids:
+                socketio.emit("error", {"message": str(e)}, to=sid)
+
+
+# -----------------------------------------------------------------------------
+# Routes
+# -----------------------------------------------------------------------------
+@app.route("/")
+def index():
+    # If already unlocked, go straight to dashboard.
+    unlocked = bool(session.get("unlocked"))
+    return render_template(
+        "index.html",
+        poll_interval=POLL_INTERVAL,
+        unlocked=unlocked,
+    )
+
+
+@app.route("/api/unlock", methods=["POST"])
+def unlock():
+    data = request.get_json(silent=True) or {}
+    pw = (data.get("password") or "").strip()
+    if pw == MASTER_PASSWORD:
+        session.permanent = True
+        session["unlocked"] = True
+        return jsonify({"ok": True})
+    # small delay to discourage brute force
+    time.sleep(0.6)
+    return jsonify({"ok": False, "error": "Invalid password"}), 401
+
+
+@app.route("/api/lock", methods=["POST"])
+def lock():
+    session.pop("unlocked", None)
+    return jsonify({"ok": True})
+
+
+@app.route("/api/session")
+def session_state():
+    return jsonify({"unlocked": bool(session.get("unlocked"))})
+
+
+@app.route("/health")
+def health():
+    return jsonify({"status": "ok", "authed_sockets": len(_authed_sids)})
+
+
+# -----------------------------------------------------------------------------
+# Socket.IO events
+# -----------------------------------------------------------------------------
+@socketio.on("connect")
+def on_connect():
+    # Auto-authorize this socket if the HTTP session is unlocked.
+    if session.get("unlocked"):
+        mark_authed(request.sid)
+        emit("connected", {
+            "sid": request.sid,
+            "poll_interval": POLL_INTERVAL,
+            "authed": True,
+        })
+        # immediate snapshot
+        payload = fetch_upstream()
+        payload["source"] = "initial"
+        emit("data_update", payload)
+    else:
+        emit("connected", {
+            "sid": request.sid,
+            "poll_interval": POLL_INTERVAL,
+            "authed": False,
+        })
+
+
+@socketio.on("disconnect")
+def on_disconnect():
+    drop_sid(request.sid)
+
+
+@socketio.on("refresh")
+def on_refresh():
+    if not is_authed(request.sid):
+        emit("error", {"message": "Not authenticated"})
+        return
+    payload = fetch_upstream()
+    payload["source"] = "manual"
+    emit("data_update", payload)
+
+
+# -----------------------------------------------------------------------------
+# Start background poller at import time (gunicorn-friendly)
+# -----------------------------------------------------------------------------
+_poller_started = False
+_poller_lock = threading.Lock()
+
+def _ensure_poller():
+    global _poller_started
+    with _poller_lock:
+        if not _poller_started:
+            socketio.start_background_task(background_poller)
+            _poller_started = True
+
+_ensure_poller()
+
+# -----------------------------------------------------------------------------
+# Entry point (only used for local `python app.py`)
+# -----------------------------------------------------------------------------
+if __name__ == "__main__":
+    port = int(os.environ.get("PORT", 7860))
+    socketio.run(app, host="0.0.0.0", port=port, debug=False)

requirements.txt

@@ -0,0 +1,7 @@
+Flask==3.0.3
+Flask-SocketIO==5.3.6
+python-socketio==5.11.4
+python-engineio==4.9.1
+eventlet==0.36.1
+requests==2.32.3
+gunicorn==22.0.0

static/css/style.css

@@ -0,0 +1,1493 @@
+/* =============================================================
+   ServerClass Admin v2 — Pro Dark UI · Mobile-First
+   ============================================================= */
+
+:root {
+  /* Surfaces */
+  --bg:         #07070b;
+  --bg-soft:    #0c0c14;
+  --surface:    #11121c;
+  --surface-2:  #161725;
+  --surface-3:  #1d1f30;
+  --elevated:   #1a1c2b;
+  --line:       rgba(255,255,255,0.06);
+  --line-2:     rgba(255,255,255,0.10);
+
+  /* Text */
+  --text:       #f4f4f8;
+  --text-soft:  #b9bac8;
+  --text-mute:  #71748a;
+  --text-dim:   #4a4d65;
+
+  /* Accents */
+  --accent:        #7c7cff;
+  --accent-2:      #a78bfa;
+  --accent-glow:   rgba(124, 124, 255, 0.35);
+  --success:       #34d399;
+  --success-soft:  rgba(52, 211, 153, 0.15);
+  --warn:          #fbbf24;
+  --warn-soft:     rgba(251, 191, 36, 0.15);
+  --danger:        #f87171;
+  --danger-soft:   rgba(248, 113, 113, 0.15);
+
+  /* Radii */
+  --r-sm: 8px;
+  --r:    12px;
+  --r-lg: 18px;
+  --r-xl: 24px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
+  --shadow:    0 8px 24px rgba(0,0,0,0.35);
+  --shadow-lg: 0 20px 50px rgba(0,0,0,0.55);
+
+  /* Layout */
+  --sidebar-w: 248px;
+  --header-h:  64px;
+  --bottomnav-h: 68px;
+
+  /* Safe-area (iOS) */
+  --sa-t: env(safe-area-inset-top, 0px);
+  --sa-b: env(safe-area-inset-bottom, 0px);
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+*::selection { background: var(--accent); color: #fff; }
+
+html, body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 15px;
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+body {
+  background:
+    radial-gradient(1200px 600px at 80% -10%, rgba(124,124,255,0.15), transparent 60%),
+    radial-gradient(900px 500px at -10% 30%, rgba(167,139,250,0.08), transparent 60%),
+    var(--bg);
+  background-attachment: fixed;
+}
+
+.mono {
+  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.7rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  font-weight: 500;
+}
+
+button { font-family: inherit; cursor: pointer; }
+input  { font-family: inherit; }
+
+/* =============================================================
+   LOCK SCREEN
+   ============================================================= */
+.lock {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  padding-top: calc(24px + var(--sa-t));
+  padding-bottom: calc(24px + var(--sa-b));
+  background: var(--bg);
+  overflow: hidden;
+  animation: lockFadeIn 400ms ease;
+}
+.lock--hidden {
+  opacity: 0;
+  pointer-events: none;
+  transform: scale(0.98);
+  transition: opacity 350ms ease, transform 350ms ease;
+}
+.lock__bg {
+  position: absolute; inset: 0;
+  background:
+    radial-gradient(800px 500px at 30% 20%, rgba(124,124,255,0.22), transparent 60%),
+    radial-gradient(700px 500px at 80% 80%, rgba(167,139,250,0.18), transparent 60%);
+  filter: blur(20px);
+  animation: lockBgFloat 14s ease-in-out infinite alternate;
+}
+@keyframes lockBgFloat {
+  0%   { transform: translate(0,0) scale(1); }
+  100% { transform: translate(-20px,30px) scale(1.05); }
+}
+@keyframes lockFadeIn {
+  from { opacity: 0; transform: scale(0.96); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+.lock__card {
+  position: relative;
+  width: 100%;
+  max-width: 420px;
+  padding: 40px 32px;
+  background: rgba(17, 18, 28, 0.72);
+  backdrop-filter: blur(24px) saturate(160%);
+  -webkit-backdrop-filter: blur(24px) saturate(160%);
+  border: 1px solid var(--line-2);
+  border-radius: var(--r-xl);
+  box-shadow: var(--shadow-lg);
+}
+
+.lock__logo {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 36px;
+}
+.lock__logo-mark {
+  width: 44px; height: 44px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, var(--accent), var(--accent-2));
+  color: #fff;
+  display: grid; place-items: center;
+  box-shadow: 0 8px 24px var(--accent-glow);
+}
+.lock__logo-mark svg { width: 22px; height: 22px; }
+.lock__brand-name {
+  font-weight: 700;
+  font-size: 1rem;
+  letter-spacing: -0.01em;
+}
+.lock__brand-sub {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.65rem;
+  color: var(--text-mute);
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+}
+
+.lock__title {
+  font-size: 1.75rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin-bottom: 6px;
+}
+.lock__sub {
+  color: var(--text-soft);
+  margin-bottom: 28px;
+  font-size: 0.95rem;
+}
+
+.lock__form { display: flex; flex-direction: column; gap: 16px; }
+
+.lock__field {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.lock__input {
+  width: 100%;
+  padding: 16px 48px 16px 18px;
+  background: var(--surface);
+  border: 1.5px solid var(--line-2);
+  border-radius: var(--r);
+  color: var(--text);
+  font-size: 0.95rem;
+  letter-spacing: 0.02em;
+  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
+}
+.lock__input::placeholder { color: var(--text-dim); }
+.lock__input:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 4px var(--accent-glow);
+  background: var(--surface-2);
+}
+.lock__toggle {
+  position: absolute;
+  right: 8px;
+  width: 36px; height: 36px;
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  color: var(--text-mute);
+  display: grid; place-items: center;
+  transition: color 150ms ease, background 150ms ease;
+}
+.lock__toggle:hover { color: var(--text); background: var(--surface-2); }
+.lock__toggle svg { width: 18px; height: 18px; }
+
+.lock__submit {
+  margin-top: 4px;
+  padding: 16px 20px;
+  background: linear-gradient(135deg, var(--accent), var(--accent-2));
+  color: #fff;
+  border: none;
+  border-radius: var(--r);
+  font-weight: 600;
+  font-size: 0.95rem;
+  letter-spacing: 0.01em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  box-shadow: 0 10px 30px var(--accent-glow);
+  transition: transform 120ms ease, box-shadow 200ms ease, opacity 150ms ease;
+}
+.lock__submit:hover { transform: translateY(-1px); box-shadow: 0 16px 40px var(--accent-glow); }
+.lock__submit:active { transform: translateY(0); }
+.lock__submit:disabled { opacity: 0.6; cursor: wait; }
+.lock__submit-arrow { width: 18px; height: 18px; transition: transform 150ms ease; }
+.lock__submit:hover .lock__submit-arrow { transform: translateX(3px); }
+
+.lock__error {
+  min-height: 22px;
+  font-size: 0.85rem;
+  color: var(--danger);
+  text-align: center;
+  font-weight: 500;
+}
+.lock__error.shake { animation: shake 400ms ease; }
+@keyframes shake {
+  0%,100% { transform: translateX(0); }
+  20% { transform: translateX(-8px); }
+  40% { transform: translateX(8px); }
+  60% { transform: translateX(-5px); }
+  80% { transform: translateX(5px); }
+}
+
+.lock__footer {
+  margin-top: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: var(--text-dim);
+}
+.lock__footer .dot {
+  width: 6px; height: 6px;
+  border-radius: 50%;
+  background: var(--success);
+  box-shadow: 0 0 8px var(--success);
+}
+
+/* =============================================================
+   APP SHELL
+   ============================================================= */
+.app {
+  display: grid;
+  grid-template-columns: var(--sidebar-w) 1fr;
+  min-height: 100vh;
+  opacity: 1;
+  transition: opacity 300ms ease;
+}
+.app--hidden { opacity: 0; pointer-events: none; }
+
+/* =============================================================
+   SIDEBAR (desktop)
+   ============================================================= */
+.sidebar {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  background: rgba(12, 12, 20, 0.6);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-right: 1px solid var(--line);
+  padding: 24px 16px;
+  display: flex;
+  flex-direction: column;
+  z-index: 50;
+}
+
+.sidebar__brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px 24px;
+  border-bottom: 1px solid var(--line);
+  margin-bottom: 16px;
+}
+.sidebar__mark {
+  width: 38px; height: 38px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, var(--accent), var(--accent-2));
+  color: #fff;
+  display: grid; place-items: center;
+  box-shadow: 0 6px 18px var(--accent-glow);
+}
+.sidebar__mark svg { width: 20px; height: 20px; }
+.sidebar__title {
+  font-weight: 700;
+  font-size: 0.98rem;
+  letter-spacing: -0.01em;
+}
+.sidebar__subtitle {
+  color: var(--text-mute);
+  font-size: 0.62rem;
+}
+
+.sidebar__nav {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 11px 12px;
+  background: transparent;
+  border: none;
+  border-radius: var(--r);
+  color: var(--text-soft);
+  font-size: 0.92rem;
+  font-weight: 500;
+  text-align: left;
+  position: relative;
+  transition: background 150ms ease, color 150ms ease;
+}
+.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
+.nav-item:hover { background: var(--surface); color: var(--text); }
+.nav-item.active {
+  background: linear-gradient(135deg, rgba(124,124,255,0.15), rgba(167,139,250,0.08));
+  color: var(--text);
+}
+.nav-item.active::before {
+  content: "";
+  position: absolute;
+  left: -16px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 22px;
+  border-radius: 0 3px 3px 0;
+  background: linear-gradient(180deg, var(--accent), var(--accent-2));
+}
+.nav-item__count {
+  margin-left: auto;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.65rem;
+  background: var(--surface-2);
+  color: var(--text-mute);
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-weight: 500;
+}
+.nav-item.active .nav-item__count {
+  background: var(--accent);
+  color: #fff;
+}
+
+.sidebar__footer {
+  padding-top: 16px;
+  border-top: 1px solid var(--line);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.conn-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px 6px 8px;
+  background: var(--surface);
+  border: 1px solid var(--line-2);
+  border-radius: 999px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.65rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-soft);
+  flex: 1;
+}
+.conn-pill__dot {
+  width: 7px; height: 7px;
+  border-radius: 50%;
+  background: var(--text-dim);
+  box-shadow: 0 0 0 0 transparent;
+  flex-shrink: 0;
+}
+.conn-pill[data-state="on"] { color: var(--success); border-color: var(--success-soft); }
+.conn-pill[data-state="on"] .conn-pill__dot {
+  background: var(--success);
+  box-shadow: 0 0 10px var(--success);
+  animation: dotPulse 2s ease-in-out infinite;
+}
+.conn-pill[data-state="warn"] { color: var(--warn); border-color: var(--warn-soft); }
+.conn-pill[data-state="warn"] .conn-pill__dot {
+  background: var(--warn);
+  box-shadow: 0 0 8px var(--warn);
+}
+.conn-pill[data-state="off"] { color: var(--danger); border-color: var(--danger-soft); }
+.conn-pill[data-state="off"] .conn-pill__dot { background: var(--danger); }
+.conn-pill--mini {
+  padding: 3px 8px 3px 6px;
+  font-size: 0.6rem;
+  background: transparent;
+  border: none;
+}
+
+@keyframes dotPulse {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50%      { transform: scale(1.3); opacity: 0.75; }
+}
+
+.sidebar__logout {
+  width: 36px; height: 36px;
+  background: var(--surface);
+  border: 1px solid var(--line-2);
+  border-radius: 10px;
+  color: var(--text-mute);
+  display: grid; place-items: center;
+  transition: all 150ms ease;
+}
+.sidebar__logout:hover {
+  color: var(--danger);
+  border-color: var(--danger);
+  background: var(--danger-soft);
+}
+.sidebar__logout svg { width: 16px; height: 16px; }
+
+/* =============================================================
+   MAIN
+   ============================================================= */
+.main {
+  min-width: 0;
+  padding-bottom: calc(var(--bottomnav-h) + var(--sa-b));
+}
+
+/* =============================================================
+   TOPBAR (mobile-prominent)
+   ============================================================= */
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 24px;
+  padding-top: calc(14px + var(--sa-t));
+  background: rgba(7, 7, 11, 0.75);
+  backdrop-filter: blur(20px) saturate(160%);
+  -webkit-backdrop-filter: blur(20px) saturate(160%);
+  border-bottom: 1px solid var(--line);
+}
+
+.topbar__left, .topbar__right {
+  display: flex; align-items: center; gap: 10px;
+}
+.topbar__brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.topbar__mark {
+  width: 38px; height: 38px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, var(--accent), var(--accent-2));
+  color: #fff;
+  display: grid; place-items: center;
+  box-shadow: 0 6px 18px var(--accent-glow);
+  flex-shrink: 0;
+}
+.topbar__mark svg { width: 20px; height: 20px; }
+.topbar__title {
+  font-weight: 700;
+  font-size: 1rem;
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.topbar__sub {
+  color: var(--text-mute);
+  font-size: 0.62rem;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+}
+
+.icon-btn {
+  width: 40px; height: 40px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  color: var(--text-soft);
+  display: grid; place-items: center;
+  transition: all 150ms ease;
+}
+.icon-btn:hover {
+  background: var(--surface-2);
+  color: var(--text);
+  border-color: var(--line-2);
+}
+.icon-btn:active { transform: scale(0.94); }
+.icon-btn svg { width: 18px; height: 18px; }
+.icon-btn--mobile { display: none; }
+
+/* =============================================================
+   VIEWS
+   ============================================================= */
+.view {
+  padding: 32px 32px 40px;
+  max-width: 1400px;
+  margin: 0 auto;
+  display: none;
+  animation: viewFadeIn 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.view--active { display: block; }
+
+@keyframes viewFadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.view__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 24px;
+  margin-bottom: 28px;
+  flex-wrap: wrap;
+}
+.eyebrow { color: var(--accent); margin-bottom: 8px; }
+.view__title {
+  font-size: clamp(1.75rem, 3vw, 2.5rem);
+  font-weight: 800;
+  letter-spacing: -0.025em;
+  line-height: 1.1;
+  margin-bottom: 6px;
+}
+.view__sub {
+  color: var(--text-soft);
+  font-size: 0.95rem;
+  max-width: 560px;
+}
+
+.live-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 14px;
+  background: var(--success-soft);
+  border: 1px solid rgba(52, 211, 153, 0.3);
+  border-radius: 999px;
+  color: var(--success);
+  font-size: 0.65rem;
+}
+.live-indicator__pulse {
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  background: var(--success);
+  box-shadow: 0 0 10px var(--success);
+  animation: dotPulse 2s ease-in-out infinite;
+}
+
+/* =============================================================
+   KPI CARDS
+   ============================================================= */
+.kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-bottom: 28px;
+}
+
+.kpi {
+  position: relative;
+  padding: 22px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--r-lg);
+  overflow: hidden;
+  transition: transform 200ms ease, border-color 200ms ease;
+}
+.kpi:hover {
+  transform: translateY(-2px);
+  border-color: var(--line-2);
+}
+.kpi::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(400px 200px at 0% 0%, rgba(124,124,255,0.08), transparent 60%);
+  pointer-events: none;
+}
+.kpi--accent {
+  background: linear-gradient(135deg, rgba(124,124,255,0.12), rgba(167,139,250,0.05)), var(--surface);
+  border-color: rgba(124,124,255,0.25);
+}
+.kpi__icon {
+  width: 38px; height: 38px;
+  border-radius: 10px;
+  background: var(--surface-2);
+  border: 1px solid var(--line-2);
+  color: var(--accent);
+  display: grid; place-items: center;
+  margin-bottom: 14px;
+}
+.kpi--accent .kpi__icon {
+  background: linear-gradient(135deg, var(--accent), var(--accent-2));
+  color: #fff;
+  border-color: transparent;
+}
+.kpi__icon svg { width: 18px; height: 18px; }
+.kpi__label {
+  color: var(--text-mute);
+  margin-bottom: 8px;
+  font-size: 0.62rem;
+}
+.kpi__value {
+  font-size: 2rem;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  line-height: 1;
+  margin-bottom: 8px;
+  font-variant-numeric: tabular-nums;
+}
+.kpi__value-suffix { font-size: 0.65em; color: var(--text-mute); margin-left: 2px; }
+.kpi__trend {
+  color: var(--text-mute);
+  font-size: 0.65rem;
+}
+.kpi__bar {
+  position: relative;
+  height: 4px;
+  background: var(--surface-2);
+  border-radius: 999px;
+  margin: 10px 0 8px;
+  overflow: hidden;
+}
+.kpi__bar-fill {
+  position: absolute;
+  inset: 0 auto 0 0;
+  background: linear-gradient(90deg, var(--accent), var(--accent-2));
+  border-radius: 999px;
+  transition: width 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+/* =============================================================
+   CARDS
+   ============================================================= */
+.card {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--r-lg);
+  padding: 24px;
+  margin-bottom: 20px;
+}
+.card__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+}
+.card__eyebrow {
+  color: var(--accent);
+  margin-bottom: 4px;
+}
+.card__title {
+  font-size: 1.15rem;
+  font-weight: 700;
+  letter-spacing: -0.015em;
+}
+.card__legend {
+  display: flex;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.legend {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--text-mute);
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.65rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.legend__sw {
+  width: 10px; height: 10px;
+  border-radius: 3px;
+  display: inline-block;
+}
+.legend__sw--ok   { background: var(--success); }
+.legend__sw--warn { background: var(--warn); }
+.legend__sw--full { background: var(--danger); }
+
+.link-btn {
+  background: none;
+  border: none;
+  color: var(--accent);
+  font-size: 0.85rem;
+  font-weight: 500;
+  padding: 6px 10px;
+  border-radius: 8px;
+  transition: background 150ms ease;
+}
+.link-btn:hover { background: rgba(124,124,255,0.1); }
+
+/* =============================================================
+   CHART (load distribution)
+   ============================================================= */
+.chart {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
+  gap: 8px;
+  align-items: end;
+  height: 200px;
+  padding: 16px 8px 0;
+}
+.chart__empty {
+  grid-column: 1 / -1;
+  text-align: center;
+  color: var(--text-dim);
+  align-self: center;
+}
+.chart__bar {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.chart__bar-track {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  background: var(--surface-2);
+  border-radius: 8px;
+  overflow: hidden;
+  position: relative;
+}
+.chart__bar-fill {
+  width: 100%;
+  border-radius: 8px;
+  background: linear-gradient(180deg, var(--accent), var(--accent-2));
+  transition: height 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  min-height: 4px;
+  position: relative;
+}
+.chart__bar-fill[data-state="warn"] { background: linear-gradient(180deg, #fbbf24, #f59e0b); }
+.chart__bar-fill[data-state="full"] { background: linear-gradient(180deg, #f87171, #ef4444); }
+.chart__bar-fill::after {
+  content: attr(data-value);
+  position: absolute;
+  top: -22px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.62rem;
+  color: var(--text-soft);
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity 150ms ease;
+}
+.chart__bar:hover .chart__bar-fill::after { opacity: 1; }
+.chart__bar-label {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.6rem;
+  color: var(--text-mute);
+  letter-spacing: 0.06em;
+}
+
+/* =============================================================
+   SPLIT (recent users + top servers)
+   ============================================================= */
+.split {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+.split .card { margin-bottom: 0; }
+
+.recent {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.recent__empty {
+  padding: 32px 0;
+  color: var(--text-dim);
+  text-align: center;
+}
+.recent-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: var(--surface-2);
+  border: 1px solid var(--line);
+  border-radius: var(--r);
+  transition: background 150ms ease;
+}
+.recent-row:hover { background: var(--surface-3); }
+.recent-row__avatar {
+  width: 36px; height: 36px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--accent), var(--accent-2));
+  color: #fff;
+  display: grid; place-items: center;
+  font-weight: 700;
+  font-size: 0.85rem;
+  flex-shrink: 0;
+}
+.recent-row__body { flex: 1; min-width: 0; }
+.recent-row__name {
+  font-weight: 600;
+  font-size: 0.92rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.recent-row__meta {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.65rem;
+  color: var(--text-mute);
+  letter-spacing: 0.05em;
+}
+.recent-row__tag {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.65rem;
+  color: var(--text-soft);
+  padding: 4px 8px;
+  background: var(--surface);
+  border: 1px solid var(--line-2);
+  border-radius: 6px;
+  letter-spacing: 0.05em;
+  white-space: nowrap;
+}
+
+/* Top servers rows */
+.recent-row--server .recent-row__avatar {
+  background: var(--surface);
+  border: 1px solid var(--line-2);
+  color: var(--text);
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.72rem;
+}
+.recent-row__bar {
+  width: 100%;
+  height: 4px;
+  background: var(--surface);
+  border-radius: 999px;
+  margin-top: 6px;
+  overflow: hidden;
+}
+.recent-row__bar-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--accent), var(--accent-2));
+  transition: width 500ms ease;
+}
+.recent-row__bar-fill[data-state="warn"] { background: linear-gradient(90deg, var(--warn), #f59e0b); }
+.recent-row__bar-fill[data-state="full"] { background: linear-gradient(90deg, var(--danger), #ef4444); }
+
+/* =============================================================
+   TOOLBAR (search + filters)
+   ============================================================= */
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+}
+
+.search {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 240px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--r);
+  padding: 0 14px 0 12px;
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+}
+.search:focus-within {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 4px var(--accent-glow);
+}
+.search__icon {
+  width: 16px; height: 16px;
+  color: var(--text-mute);
+  flex-shrink: 0;
+}
+.search__input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  padding: 12px 12px;
+  font-size: 0.92rem;
+  color: var(--text);
+  min-width: 0;
+}
+.search__input::placeholder { color: var(--text-dim); }
+.search__input:focus { outline: none; }
+.search__hint {
+  color: var(--text-mute);
+  font-size: 0.62rem;
+  flex-shrink: 0;
+}
+
+.seg {
+  display: flex;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--r);
+  padding: 4px;
+}
+.seg__btn {
+  background: transparent;
+  border: none;
+  color: var(--text-soft);
+  padding: 8px 14px;
+  border-radius: 8px;
+  font-size: 0.82rem;
+  font-weight: 500;
+  transition: all 150ms ease;
+}
+.seg__btn.active {
+  background: linear-gradient(135deg, var(--accent), var(--accent-2));
+  color: #fff;
+  box-shadow: 0 4px 12px var(--accent-glow);
+}
+.seg__btn:not(.active):hover { color: var(--text); background: var(--surface-2); }
+
+/* =============================================================
+   BUTTONS
+   ============================================================= */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 11px 16px;
+  border-radius: var(--r);
+  font-size: 0.85rem;
+  font-weight: 500;
+  border: 1px solid transparent;
+  transition: all 150ms ease;
+  white-space: nowrap;
+}
+.btn--primary {
+  background: linear-gradient(135deg, var(--accent), var(--accent-2));
+  color: #fff;
+  box-shadow: 0 6px 18px var(--accent-glow);
+}
+.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px var(--accent-glow); }
+.btn--ghost {
+  background: var(--surface);
+  color: var(--text-soft);
+  border-color: var(--line-2);
+}
+.btn--ghost:hover { background: var(--surface-2); color: var(--text); }
+.btn--danger {
+  background: var(--danger-soft);
+  color: var(--danger);
+  border-color: rgba(248, 113, 113, 0.3);
+}
+.btn--danger:hover {
+  background: var(--danger);
+  color: #fff;
+  border-color: var(--danger);
+}
+
+/* =============================================================
+   SERVER CARDS GRID
+   ============================================================= */
+.cards-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+.server-card {
+  position: relative;
+  padding: 20px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--r-lg);
+  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
+  overflow: hidden;
+}
+.server-card:hover {
+  transform: translateY(-2px);
+  border-color: var(--line-2);
+  background: var(--surface-2);
+}
+.server-card__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+.server-card__num {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.72rem;
+  color: var(--text-mute);
+  letter-spacing: 0.08em;
+}
+.server-card__name {
+  font-size: 1.15rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  margin-top: 2px;
+}
+
+.server-card__metrics {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  margin-bottom: 14px;
+}
+.metric {
+  padding: 10px 12px;
+  background: var(--surface-2);
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+}
+.metric__label {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.58rem;
+  color: var(--text-mute);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+.metric__value {
+  font-size: 1.1rem;
+  font-weight: 700;
+  margin-top: 2px;
+  font-variant-numeric: tabular-nums;
+}
+
+.server-card__cap {
+  margin-bottom: 12px;
+}
+.server-card__cap-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 6px;
+}
+.server-card__cap-label {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.6rem;
+  color: var(--text-mute);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+.server-card__cap-value {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.78rem;
+  color: var(--text-soft);
+  font-variant-numeric: tabular-nums;
+}
+.server-card__bar {
+  height: 6px;
+  background: var(--surface-3);
+  border-radius: 999px;
+  overflow: hidden;
+}
+.server-card__bar-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--success), #10b981);
+  transition: width 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  border-radius: 999px;
+}
+.server-card__bar-fill[data-state="warn"] { background: linear-gradient(90deg, var(--warn), #f59e0b); }
+.server-card__bar-fill[data-state="full"] { background: linear-gradient(90deg, var(--danger), #ef4444); }
+
+.server-card__foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.server-card__url {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.65rem;
+  color: var(--text-mute);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+}
+
+/* Status pill */
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.62rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  font-weight: 500;
+}
+.pill__dot {
+  width: 6px; height: 6px;
+  border-radius: 50%;
+}
+.pill--ok    { background: var(--success-soft); color: var(--success); }
+.pill--ok .pill__dot { background: var(--success); box-shadow: 0 0 6px var(--success); }
+.pill--warn  { background: var(--warn-soft); color: var(--warn); }
+.pill--warn .pill__dot { background: var(--warn); }
+.pill--full  { background: var(--danger-soft); color: var(--danger); }
+.pill--full .pill__dot { background: var(--danger); }
+.pill--neutral { background: var(--surface-2); color: var(--text-mute); }
+.pill--neutral .pill__dot { background: var(--text-mute); }
+
+/* =============================================================
+   USERS TABLE
+   ============================================================= */
+.users-wrap {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--r-lg);
+  overflow: hidden;
+}
+
+.dataset {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+}
+.dataset thead th {
+  text-align: left;
+  padding: 14px 18px;
+  background: var(--surface-2);
+  border-bottom: 1px solid var(--line);
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.62rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-mute);
+  font-weight: 500;
+  white-space: nowrap;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+.dataset thead th.sortable { cursor: pointer; user-select: none; transition: color 150ms ease; }
+.dataset thead th.sortable:hover { color: var(--text); }
+.dataset thead th .sort-ind {
+  display: inline-block;
+  margin-left: 4px;
+  opacity: 0.4;
+}
+.dataset thead th.sort-asc .sort-ind,
+.dataset thead th.sort-desc .sort-ind { opacity: 1; color: var(--accent); }
+
+.dataset tbody td {
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--line);
+  vertical-align: middle;
+}
+.dataset tbody tr {
+  transition: background 120ms ease;
+}
+.dataset tbody tr:hover { background: var(--surface-2); }
+.dataset tbody tr:last-child td { border-bottom: none; }
+
+.cell-idx {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.75rem;
+  color: var(--text-dim);
+  width: 48px;
+}
+.cell-user {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+.cell-user__avatar {
+  width: 30px; height: 30px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--accent), var(--accent-2));
+  color: #fff;
+  display: grid; place-items: center;
+  font-weight: 700;
+  font-size: 0.72rem;
+  flex-shrink: 0;
+}
+.cell-user__name {
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 180px;
+}
+.cell-mono {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.78rem;
+  color: var(--text-soft);
+}
+.cell-meta {
+  color: var(--text-mute);
+  font-size: 0.82rem;
+  white-space: nowrap;
+}
+
+/* =============================================================
+   SETTINGS
+   ============================================================= */
+.settings {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--r-lg);
+  overflow: hidden;
+}
+.setting {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--line);
+  flex-wrap: wrap;
+}
+.setting:last-child { border-bottom: none; }
+.setting__label {
+  font-weight: 600;
+  font-size: 0.95rem;
+  margin-bottom: 4px;
+}
+.setting__hint {
+  color: var(--text-mute);
+  font-size: 0.82rem;
+}
+.setting__value {
+  color: var(--text-soft);
+  flex-shrink: 0;
+}
+
+/* =============================================================
+   ERROR STACK
+   ============================================================= */
+.error-stack {
+  padding: 0 32px;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+.error-stack:empty { display: none; }
+.error-banner {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 16px;
+  background: var(--danger-soft);
+  border: 1px solid rgba(248, 113, 113, 0.3);
+  border-radius: var(--r);
+  margin-top: 16px;
+  color: var(--text);
+}
+.error-banner__tag {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.6rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  background: var(--danger);
+  color: #fff;
+  padding: 3px 8px;
+  border-radius: 6px;
+  flex-shrink: 0;
+}
+.error-banner__msg {
+  font-size: 0.85rem;
+  word-break: break-word;
+  color: var(--text-soft);
+}
+
+/* =============================================================
+   EMPTY STATE
+   ============================================================= */
+.empty {
+  padding: 60px 20px;
+  text-align: center;
+  color: var(--text-dim);
+  background: var(--surface-2);
+  border-radius: var(--r);
+}
+
+/* =============================================================
+   BOTTOM NAV (mobile)
+   ============================================================= */
+.bottomnav {
+  display: none;
+  position: fixed;
+  bottom: 0; left: 0; right: 0;
+  z-index: 50;
+  background: rgba(7, 7, 11, 0.85);
+  backdrop-filter: blur(20px) saturate(160%);
+  -webkit-backdrop-filter: blur(20px) saturate(160%);
+  border-top: 1px solid var(--line);
+  padding: 8px 8px calc(8px + var(--sa-b));
+  justify-content: space-around;
+}
+.bottomnav__item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 4px;
+  background: transparent;
+  border: none;
+  color: var(--text-mute);
+  font-size: 0.62rem;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  border-radius: 10px;
+  transition: color 150ms ease, background 150ms ease;
+}
+.bottomnav__item svg { width: 22px; height: 22px; transition: transform 150ms ease; }
+.bottomnav__item.active {
+  color: var(--accent);
+}
+.bottomnav__item.active svg { transform: translateY(-1px); }
+.bottomnav__item:active { background: var(--surface); }
+
+/* =============================================================
+   TOASTS
+   ============================================================= */
+.toasts {
+  position: fixed;
+  top: calc(20px + var(--sa-t));
+  right: 20px;
+  z-index: 200;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  pointer-events: none;
+}
+.toast {
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  background: var(--surface);
+  border: 1px solid var(--line-2);
+  border-radius: var(--r);
+  box-shadow: var(--shadow);
+  color: var(--text);
+  font-size: 0.88rem;
+  max-width: 360px;
+  animation: toastIn 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.toast--success { border-color: rgba(52, 211, 153, 0.3); }
+.toast--success .toast__icon { color: var(--success); }
+.toast--error   { border-color: rgba(248, 113, 113, 0.3); }
+.toast--error .toast__icon { color: var(--danger); }
+.toast__icon { width: 18px; height: 18px; flex-shrink: 0; }
+.toast.out { animation: toastOut 200ms ease forwards; }
+@keyframes toastIn {
+  from { opacity: 0; transform: translateX(20px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+@keyframes toastOut {
+  to   { opacity: 0; transform: translateX(20px); }
+}
+
+/* =============================================================
+   FLASH PULSE
+   ============================================================= */
+@keyframes flash {
+  0%   { box-shadow: 0 0 0 0 var(--accent-glow); }
+  100% { box-shadow: 0 0 0 14px transparent; }
+}
+.flash { animation: flash 700ms ease-out; }
+
+/* =============================================================
+   RESPONSIVE
+   ============================================================= */
+@media (max-width: 1100px) {
+  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
+  .split { grid-template-columns: 1fr; }
+}
+
+@media (max-width: 860px) {
+  .app { grid-template-columns: 1fr; }
+  .sidebar { display: none; }
+  .bottomnav { display: flex; }
+  .icon-btn--mobile { display: grid; }
+  .view { padding: 20px 16px 32px; }
+  .error-stack { padding: 0 16px; }
+  .topbar { padding: 12px 16px; padding-top: calc(12px + var(--sa-t)); }
+  .view__head { margin-bottom: 20px; }
+  .card { padding: 18px; border-radius: var(--r); }
+  .toolbar { flex-direction: column; align-items: stretch; }
+  .seg { width: 100%; }
+  .seg__btn { flex: 1; text-align: center; }
+  .kpi { padding: 16px; }
+  .kpi__value { font-size: 1.6rem; }
+
+  /* Cards-as-rows for users on mobile */
+  .users-wrap { background: transparent; border: none; }
+  .dataset thead { display: none; }
+  .dataset, .dataset tbody, .dataset tr, .dataset td { display: block; width: 100%; }
+  .dataset tbody tr {
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-radius: var(--r);
+    padding: 14px 16px;
+    margin-bottom: 10px;
+  }
+  .dataset tbody td {
+    padding: 6px 0;
+    border: none;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+  }
+  .dataset tbody td::before {
+    content: attr(data-label);
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.6rem;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--text-mute);
+    flex-shrink: 0;
+  }
+  .dataset tbody td.cell-user-wrap::before { display: none; }
+  .cell-user__name { max-width: none; }
+}
+
+@media (max-width: 480px) {
+  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
+  .kpi { padding: 14px; }
+  .kpi__icon { width: 32px; height: 32px; margin-bottom: 10px; }
+  .kpi__value { font-size: 1.4rem; }
+  .view__title { font-size: 1.6rem; }
+  .lock__card { padding: 32px 24px; }
+  .lock__title { font-size: 1.4rem; }
+  .chart { height: 160px; }
+  .cards-grid { grid-template-columns: 1fr; }
+  .toasts { left: 16px; right: 16px; }
+  .toast { max-width: none; }
+}
+
+/* Reduce motion */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

static/js/dashboard.js

@@ -0,0 +1,705 @@
+/* =============================================================
+   ServerClass Admin v2 — Client
+   ============================================================= */
+
+(() => {
+  "use strict";
+
+  // -----------------------------------------------------------
+  // DOM helpers
+  // -----------------------------------------------------------
+  const $  = (id) => document.getElementById(id);
+  const $$ = (sel, root = document) => Array.from(root.querySelectorAll(sel));
+
+  const escapeHtml = (s) => {
+    if (s === null || s === undefined) return "";
+    return String(s)
+      .replace(/&/g, "&")
+      .replace(/</g, "<")
+      .replace(/>/g, ">")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#039;");
+  };
+
+  const fmtDate = (iso) => {
+    if (!iso) return "—";
+    try {
+      const d = new Date(iso);
+      if (isNaN(d)) return "—";
+      return d.toLocaleString(undefined, {
+        year: "numeric", month: "short", day: "2-digit",
+        hour: "2-digit", minute: "2-digit"
+      });
+    } catch { return "—"; }
+  };
+
+  const fmtRelative = (iso) => {
+    if (!iso) return "—";
+    const d = new Date(iso);
+    if (isNaN(d)) return "—";
+    const diff = (Date.now() - d.getTime()) / 1000;
+    if (diff < 60)   return "just now";
+    if (diff < 3600) return `${Math.floor(diff/60)}m ago`;
+    if (diff < 86400) return `${Math.floor(diff/3600)}h ago`;
+    if (diff < 86400*7) return `${Math.floor(diff/86400)}d ago`;
+    return d.toLocaleDateString(undefined, { month: "short", day: "2-digit" });
+  };
+
+  const fmtTime = (ts) => {
+    const d = ts ? new Date(ts * 1000) : new Date();
+    return d.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false });
+  };
+
+  const initial = (s) => (s || "?").trim().charAt(0).toUpperCase();
+
+  const flash = (el) => {
+    if (!el) return;
+    el.classList.remove("flash");
+    void el.offsetWidth;
+    el.classList.add("flash");
+  };
+
+  // -----------------------------------------------------------
+  // Toasts
+  // -----------------------------------------------------------
+  const toastContainer = $("toasts");
+  const toast = (msg, type = "info", ms = 3200) => {
+    if (!toastContainer) return;
+    const el = document.createElement("div");
+    el.className = `toast toast--${type}`;
+    const icon = type === "success"
+      ? `<svg class="toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>`
+      : type === "error"
+      ? `<svg class="toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>`
+      : `<svg class="toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>`;
+    el.innerHTML = `${icon}<span>${escapeHtml(msg)}</span>`;
+    toastContainer.appendChild(el);
+    setTimeout(() => {
+      el.classList.add("out");
+      setTimeout(() => el.remove(), 220);
+    }, ms);
+  };
+
+  // -----------------------------------------------------------
+  // LOCK SCREEN
+  // -----------------------------------------------------------
+  const lockScreen   = $("lockScreen");
+  const appEl        = $("app");
+  const unlockForm   = $("unlockForm");
+  const masterPw     = $("masterPassword");
+  const unlockBtn    = $("unlockBtn");
+  const lockError    = $("lockError");
+  const togglePw     = $("togglePw");
+
+  const showApp = () => {
+    lockScreen.classList.add("lock--hidden");
+    appEl.classList.remove("app--hidden");
+    document.body.dataset.unlocked = "true";
+    // Connect socket only after unlock to avoid extra noise
+    initSocket();
+    setTimeout(() => { try { masterPw.value = ""; } catch {} }, 400);
+  };
+
+  const showLock = () => {
+    lockScreen.classList.remove("lock--hidden");
+    appEl.classList.add("app--hidden");
+    document.body.dataset.unlocked = "false";
+    if (socket) { try { socket.disconnect(); } catch {} }
+  };
+
+  togglePw?.addEventListener("click", () => {
+    if (masterPw.type === "password") {
+      masterPw.type = "text";
+      togglePw.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>`;
+    } else {
+      masterPw.type = "password";
+      togglePw.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>`;
+    }
+    masterPw.focus();
+  });
+
+  unlockForm?.addEventListener("submit", async (e) => {
+    e.preventDefault();
+    const pw = (masterPw.value || "").trim();
+    if (!pw) return;
+    lockError.textContent = "";
+    unlockBtn.disabled = true;
+    const labelEl = unlockBtn.querySelector(".lock__submit-label");
+    const original = labelEl ? labelEl.textContent : "Unlock";
+    if (labelEl) labelEl.textContent = "Unlocking…";
+
+    try {
+      const res = await fetch("/api/unlock", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ password: pw }),
+        credentials: "same-origin",
+      });
+      const data = await res.json().catch(() => ({}));
+      if (res.ok && data.ok) {
+        if (labelEl) labelEl.textContent = "Welcome";
+        toast("Dashboard unlocked", "success", 1800);
+        setTimeout(showApp, 250);
+      } else {
+        lockError.textContent = data.error || "Invalid password";
+        lockError.classList.remove("shake");
+        void lockError.offsetWidth;
+        lockError.classList.add("shake");
+        masterPw.value = "";
+        masterPw.focus();
+      }
+    } catch (err) {
+      lockError.textContent = "Network error — try again";
+    } finally {
+      setTimeout(() => {
+        unlockBtn.disabled = false;
+        if (labelEl) labelEl.textContent = original;
+      }, 350);
+    }
+  });
+
+  // Focus password field on load if locked
+  if (document.body.dataset.unlocked !== "true") {
+    setTimeout(() => masterPw?.focus(), 200);
+  }
+
+  // Lock buttons
+  const doLock = async () => {
+    try {
+      await fetch("/api/lock", { method: "POST", credentials: "same-origin" });
+    } catch {}
+    toast("Dashboard locked", "info", 1500);
+    showLock();
+    setTimeout(() => masterPw?.focus(), 300);
+  };
+  $("lockBtn")?.addEventListener("click", doLock);
+  $("lockBtnMobile")?.addEventListener("click", doLock);
+  $("lockBtnSettings")?.addEventListener("click", doLock);
+
+  // -----------------------------------------------------------
+  // VIEW ROUTER
+  // -----------------------------------------------------------
+  const VIEW_TITLES = {
+    overview: "Overview",
+    servers:  "Servers",
+    users:    "Users",
+    settings: "Settings",
+  };
+  const topbarTitle = $("topbarTitle");
+
+  const setView = (name) => {
+    $$(".view").forEach((v) => v.classList.toggle("view--active", v.dataset.view === name));
+    $$(".nav-item").forEach((b) => b.classList.toggle("active", b.dataset.view === name));
+    $$(".bottomnav__item").forEach((b) => b.classList.toggle("active", b.dataset.view === name));
+    if (topbarTitle) topbarTitle.textContent = VIEW_TITLES[name] || "Dashboard";
+    if (history.replaceState) history.replaceState(null, "", `#${name}`);
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  $$(".nav-item, .bottomnav__item").forEach((btn) => {
+    btn.addEventListener("click", () => setView(btn.dataset.view));
+  });
+  $$("[data-jump]").forEach((btn) => {
+    btn.addEventListener("click", () => setView(btn.dataset.jump));
+  });
+
+  // Initial route from hash
+  const initialHash = (location.hash || "").replace("#", "");
+  if (VIEW_TITLES[initialHash]) setView(initialHash);
+
+  // -----------------------------------------------------------
+  // STATE
+  // -----------------------------------------------------------
+  let allUsers   = [];
+  let allServers = [];
+  let lastStatus = null;
+  let lastTotal  = 0;
+
+  let userSort = { key: "created_at", dir: "desc" };
+  let serverFilter = "all";
+
+  // -----------------------------------------------------------
+  // CONN INDICATORS
+  // -----------------------------------------------------------
+  const connPill      = $("connPill");
+  const connLabel     = $("connLabel");
+  const connPillMini  = $("connPillMini");
+  const connLabelMini = $("connLabelMini");
+  const lastSync      = $("lastSync");
+
+  const setConn = (state, label) => {
+    if (connPill)     connPill.dataset.state = state;
+    if (connPillMini) connPillMini.dataset.state = state;
+    if (connLabel)     connLabel.textContent     = label;
+    if (connLabelMini) connLabelMini.textContent = label;
+  };
+
+  // -----------------------------------------------------------
+  // ERRORS
+  // -----------------------------------------------------------
+  const errorBox = $("errorBox");
+  const renderErrors = (errors) => {
+    if (!errorBox) return;
+    if (!errors || Object.keys(errors).length === 0) {
+      errorBox.innerHTML = "";
+      return;
+    }
+    errorBox.innerHTML = Object.entries(errors).map(([k, v]) => `
+      <div class="error-banner">
+        <span class="error-banner__tag">${escapeHtml(k)}</span>
+        <span class="error-banner__msg">${escapeHtml(v)}</span>
+      </div>
+    `).join("");
+  };
+
+  // -----------------------------------------------------------
+  // RENDER: KPIs
+  // -----------------------------------------------------------
+  const renderKpis = (status, total) => {
+    $("kpiTotalUsers").textContent = total ?? "—";
+
+    if (status) {
+      const cap = (status.total_servers || 0) * (status.max_per_server || 0);
+      const pct = cap > 0 ? Math.round(((total || 0) / cap) * 100) : 0;
+
+      $("kpiServers").textContent = status.total_servers ?? "—";
+      $("kpiServersSub").textContent = `Max ${status.max_per_server ?? "—"} per node`;
+
+      $("kpiReservations").textContent = status.total_reservations ?? "—";
+      $("kpiReservationsSub").textContent = "Pending registrations";
+
+      $("kpiCapacity").innerHTML = `${pct}<span class="kpi__value-suffix">%</span>`;
+      $("kpiCapacitySub").textContent = `${total || 0} / ${cap}`;
+      const bar = $("kpiCapacityBar");
+      if (bar) bar.style.width = `${Math.min(pct, 100)}%`;
+
+      // Sidebar counts
+      const nServ = $("navServersCount"); if (nServ) nServ.textContent = status.total_servers ?? "—";
+    } else {
+      $("kpiServers").textContent = "—";
+      $("kpiReservations").textContent = "—";
+      $("kpiCapacity").innerHTML = `—<span class="kpi__value-suffix"></span>`;
+    }
+
+    const nUsers = $("navUsersCount");
+    if (nUsers) nUsers.textContent = total ?? "—";
+
+    flash($("kpiGrid"));
+  };
+
+  // -----------------------------------------------------------
+  // RENDER: LOAD CHART
+  // -----------------------------------------------------------
+  const renderChart = (servers) => {
+    const chart = $("loadChart");
+    if (!chart) return;
+    if (!servers || !servers.length) {
+      chart.innerHTML = `<div class="chart__empty mono">Awaiting data…</div>`;
+      return;
+    }
+    chart.innerHTML = servers.map((s) => {
+      const pct = s.max > 0 ? (s.effective / s.max) * 100 : 0;
+      const state = pct >= 100 ? "full" : pct >= 75 ? "warn" : "ok";
+      const h = Math.max(Math.min(pct, 100), 2);
+      return `
+        <div class="chart__bar" title="Server ${escapeHtml(String(s.server_num))}: ${s.effective}/${s.max}">
+          <div class="chart__bar-track">
+            <div class="chart__bar-fill" data-state="${state}" data-value="${s.effective}/${s.max}" style="height:${h}%"></div>
+          </div>
+          <div class="chart__bar-label">${String(s.server_num).padStart(2, "0")}</div>
+        </div>
+      `;
+    }).join("");
+  };
+
+  // -----------------------------------------------------------
+  // RENDER: RECENT USERS + TOP SERVERS
+  // -----------------------------------------------------------
+  const renderRecent = (users) => {
+    const box = $("recentUsers");
+    if (!box) return;
+    if (!users || !users.length) {
+      box.innerHTML = `<div class="recent__empty mono">No users yet.</div>`;
+      return;
+    }
+    const sorted = [...users].sort((a, b) => {
+      const da = new Date(a.created_at || a.last_login || 0).getTime();
+      const db = new Date(b.created_at || b.last_login || 0).getTime();
+      return db - da;
+    }).slice(0, 5);
+
+    box.innerHTML = sorted.map((u) => `
+      <div class="recent-row">
+        <div class="recent-row__avatar">${escapeHtml(initial(u.username))}</div>
+        <div class="recent-row__body">
+          <div class="recent-row__name">${escapeHtml(u.username || "—")}</div>
+          <div class="recent-row__meta">${escapeHtml(u.telegram_id || "no telegram")} · ${escapeHtml(fmtRelative(u.created_at || u.last_login))}</div>
+        </div>
+        <span class="recent-row__tag">S${escapeHtml(String(u.server_num ?? "?"))}</span>
+      </div>
+    `).join("");
+  };
+
+  const renderTopServers = (servers) => {
+    const box = $("topServers");
+    if (!box) return;
+    if (!servers || !servers.length) {
+      box.innerHTML = `<div class="recent__empty mono">No data yet.</div>`;
+      return;
+    }
+    const sorted = [...servers].sort((a, b) => {
+      const pa = a.max > 0 ? a.effective / a.max : 0;
+      const pb = b.max > 0 ? b.effective / b.max : 0;
+      return pb - pa;
+    }).slice(0, 5);
+
+    box.innerHTML = sorted.map((s) => {
+      const pct = s.max > 0 ? (s.effective / s.max) * 100 : 0;
+      const state = pct >= 100 ? "full" : pct >= 75 ? "warn" : "ok";
+      return `
+        <div class="recent-row recent-row--server">
+          <div class="recent-row__avatar">${String(s.server_num).padStart(2, "0")}</div>
+          <div class="recent-row__body">
+            <div class="recent-row__name">Server ${escapeHtml(String(s.server_num))}</div>
+            <div class="recent-row__meta">${s.effective} / ${s.max} · ${Math.round(pct)}%</div>
+            <div class="recent-row__bar"><div class="recent-row__bar-fill" data-state="${state}" style="width:${Math.min(pct, 100)}%"></div></div>
+          </div>
+          <span class="recent-row__tag">${s.available ? "Open" : "Full"}</span>
+        </div>
+      `;
+    }).join("");
+  };
+
+  // -----------------------------------------------------------
+  // RENDER: SERVERS GRID
+  // -----------------------------------------------------------
+  const renderServers = () => {
+    const box = $("serversContent");
+    const counter = $("serverCount");
+    if (!box) return;
+
+    let list = allServers || [];
+    const q = (($("serverSearch")?.value) || "").trim().toLowerCase();
+    if (q) {
+      list = list.filter((s) =>
+        String(s.server_num).includes(q) ||
+        (s.url || "").toLowerCase().includes(q) ||
+        (s.available ? "open" : "full").includes(q)
+      );
+    }
+    if (serverFilter === "open") list = list.filter((s) => s.available);
+    if (serverFilter === "full") list = list.filter((s) => !s.available);
+
+    if (counter) counter.textContent = `${list.length} node${list.length === 1 ? "" : "s"}`;
+
+    if (!list.length) {
+      box.innerHTML = `<div class="empty mono">No servers match current filter.</div>`;
+      return;
+    }
+
+    box.innerHTML = list.map((s) => {
+      const pct = s.max > 0 ? (s.effective / s.max) * 100 : 0;
+      const state = pct >= 100 ? "full" : pct >= 75 ? "warn" : "ok";
+      const pillClass = state === "full" ? "pill--full" : state === "warn" ? "pill--warn" : "pill--ok";
+      const pillLabel = state === "full" ? "Full" : state === "warn" ? "High Load" : "Healthy";
+
+      return `
+        <div class="server-card">
+          <div class="server-card__head">
+            <div>
+              <div class="server-card__num">NODE № ${String(s.server_num).padStart(2, "0")}</div>
+              <div class="server-card__name">Server ${escapeHtml(String(s.server_num))}</div>
+            </div>
+            <span class="pill ${pillClass}"><span class="pill__dot"></span>${pillLabel}</span>
+          </div>
+
+          <div class="server-card__metrics">
+            <div class="metric">
+              <div class="metric__label">Users</div>
+              <div class="metric__value">${s.users ?? 0}</div>
+            </div>
+            <div class="metric">
+              <div class="metric__label">Reserved</div>
+              <div class="metric__value">${s.reserved ?? 0}</div>
+            </div>
+          </div>
+
+          <div class="server-card__cap">
+            <div class="server-card__cap-head">
+              <span class="server-card__cap-label">Capacity</span>
+              <span class="server-card__cap-value">${s.effective ?? 0} / ${s.max ?? 0} · ${Math.round(pct)}%</span>
+            </div>
+            <div class="server-card__bar">
+              <div class="server-card__bar-fill" data-state="${state}" style="width:${Math.min(pct, 100)}%"></div>
+            </div>
+          </div>
+
+          <div class="server-card__foot">
+            <span class="server-card__url" title="${escapeHtml(s.url || "")}">${escapeHtml(s.url || "—")}</span>
+            <span class="pill pill--neutral"><span class="pill__dot"></span>${s.available ? "Open" : "Full"}</span>
+          </div>
+        </div>
+      `;
+    }).join("");
+  };
+
+  // Server filter / search bindings
+  $("serverSearch")?.addEventListener("input", renderServers);
+  $$("#serverFilter .seg__btn").forEach((b) => {
+    b.addEventListener("click", () => {
+      $$("#serverFilter .seg__btn").forEach((x) => x.classList.toggle("active", x === b));
+      serverFilter = b.dataset.filter;
+      renderServers();
+    });
+  });
+
+  // -----------------------------------------------------------
+  // RENDER: USERS TABLE
+  // -----------------------------------------------------------
+  const sortUsers = (users) => {
+    const { key, dir } = userSort;
+    const mult = dir === "asc" ? 1 : -1;
+    const get = (u) => {
+      switch (key) {
+        case "username":     return (u.username || "").toLowerCase();
+        case "telegram_id":  return (u.telegram_id || "").toLowerCase();
+        case "server_num":   return Number(u.server_num) || 0;
+        case "tokens_count": return Number(u.tokens_count) || 0;
+        case "last_login":   return new Date(u.last_login || 0).getTime();
+        case "created_at":
+        default:             return new Date(u.created_at || 0).getTime();
+      }
+    };
+    return [...users].sort((a, b) => {
+      const va = get(a), vb = get(b);
+      if (va < vb) return -1 * mult;
+      if (va > vb) return  1 * mult;
+      return 0;
+    });
+  };
+
+  const renderUsers = () => {
+    const box = $("usersContent");
+    const counter = $("userCount");
+    if (!box) return;
+
+    let list = allUsers || [];
+    const q = (($("userSearch")?.value) || "").trim().toLowerCase();
+    if (q) {
+      list = list.filter((u) =>
+        (u.username || "").toLowerCase().includes(q) ||
+        (u.telegram_id || "").toLowerCase().includes(q) ||
+        String(u.server_num || "").includes(q)
+      );
+    }
+    list = sortUsers(list);
+
+    if (counter) counter.textContent = `${list.length} record${list.length === 1 ? "" : "s"}`;
+
+    if (!list.length) {
+      box.innerHTML = `<div class="empty mono">No users match current filter.</div>`;
+      return;
+    }
+
+    const sortInd = (key) => {
+      if (userSort.key !== key) return `<span class="sort-ind">↕</span>`;
+      return userSort.dir === "asc"
+        ? `<span class="sort-ind">↑</span>`
+        : `<span class="sort-ind">↓</span>`;
+    };
+    const sortClass = (key) =>
+      userSort.key === key ? (userSort.dir === "asc" ? "sortable sort-asc" : "sortable sort-desc") : "sortable";
+
+    const rows = list.map((u, i) => {
+      const tokens = u.tokens_count || 0;
+      const tokensPill = tokens > 0
+        ? `<span class="pill pill--ok"><span class="pill__dot"></span>${tokens} token${tokens > 1 ? "s" : ""}</span>`
+        : `<span class="pill pill--neutral"><span class="pill__dot"></span>None</span>`;
+
+      return `
+        <tr>
+          <td class="cell-idx" data-label="#">${String(i + 1).padStart(3, "0")}</td>
+          <td class="cell-user-wrap" data-label="User">
+            <div class="cell-user">
+              <div class="cell-user__avatar">${escapeHtml(initial(u.username))}</div>
+              <div class="cell-user__name">${escapeHtml(u.username || "—")}</div>
+            </div>
+          </td>
+          <td data-label="Telegram"><span class="cell-mono">${escapeHtml(u.telegram_id || "—")}</span></td>
+          <td data-label="Server"><span class="pill pill--neutral"><span class="pill__dot"></span>S${escapeHtml(String(u.server_num ?? "?"))}</span></td>
+          <td data-label="Tokens">${tokensPill}</td>
+          <td data-label="Created"><span class="cell-meta">${escapeHtml(fmtDate(u.created_at))}</span></td>
+          <td data-label="Last seen"><span class="cell-meta">${escapeHtml(fmtRelative(u.last_login))}</span></td>
+        </tr>
+      `;
+    }).join("");
+
+    box.innerHTML = `
+      <table class="dataset">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th class="${sortClass('username')}"     data-sort="username">User ${sortInd('username')}</th>
+            <th class="${sortClass('telegram_id')}"  data-sort="telegram_id">Telegram ${sortInd('telegram_id')}</th>
+            <th class="${sortClass('server_num')}"   data-sort="server_num">Server ${sortInd('server_num')}</th>
+            <th class="${sortClass('tokens_count')}" data-sort="tokens_count">Tokens ${sortInd('tokens_count')}</th>
+            <th class="${sortClass('created_at')}"   data-sort="created_at">Created ${sortInd('created_at')}</th>
+            <th class="${sortClass('last_login')}"   data-sort="last_login">Last seen ${sortInd('last_login')}</th>
+          </tr>
+        </thead>
+        <tbody>${rows}</tbody>
+      </table>
+    `;
+
+    // Bind sort header clicks
+    $$("th.sortable", box).forEach((th) => {
+      th.addEventListener("click", () => {
+        const key = th.dataset.sort;
+        if (userSort.key === key) {
+          userSort.dir = userSort.dir === "asc" ? "desc" : "asc";
+        } else {
+          userSort.key = key;
+          userSort.dir = (key === "username" || key === "telegram_id") ? "asc" : "desc";
+        }
+        renderUsers();
+      });
+    });
+  };
+
+  // Search binding
+  $("userSearch")?.addEventListener("input", renderUsers);
+
+  // CSV export
+  $("exportBtn")?.addEventListener("click", () => {
+    if (!allUsers || !allUsers.length) {
+      toast("Nothing to export", "error", 1800);
+      return;
+    }
+    const headers = ["username", "telegram_id", "server_num", "tokens_count", "created_at", "last_login"];
+    const escapeCsv = (v) => {
+      if (v === null || v === undefined) return "";
+      const s = String(v).replace(/"/g, '""');
+      return /[",\n]/.test(s) ? `"${s}"` : s;
+    };
+    const lines = [headers.join(",")];
+    allUsers.forEach((u) => {
+      lines.push(headers.map((h) => escapeCsv(u[h])).join(","));
+    });
+    const blob = new Blob([lines.join("\n")], { type: "text/csv;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    const stamp = new Date().toISOString().slice(0, 19).replace(/[:T]/g, "-");
+    a.href = url;
+    a.download = `serverclass-users-${stamp}.csv`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+    toast(`Exported ${allUsers.length} users`, "success", 2200);
+  });
+
+  // -----------------------------------------------------------
+  // REFRESH BUTTON
+  // -----------------------------------------------------------
+  $("refreshBtn")?.addEventListener("click", () => {
+    if (!socket || !socket.connected) {
+      toast("Not connected", "error", 1600);
+      return;
+    }
+    setConn("warn", "REFRESHING");
+    socket.emit("refresh");
+  });
+
+  // -----------------------------------------------------------
+  // SOCKET.IO
+  // -----------------------------------------------------------
+  let socket = null;
+
+  const initSocket = () => {
+    if (socket) {
+      try { socket.connect(); } catch {}
+      return;
+    }
+    socket = io({ transports: ["websocket", "polling"] });
+
+    socket.on("connect", () => {
+      setConn("on", "LIVE");
+    });
+
+    socket.on("connected", (data) => {
+      if (data && data.poll_interval) {
+        const el = $("pollInterval");
+        if (el) el.textContent = data.poll_interval;
+      }
+      if (data && data.authed === false) {
+        // Session expired upstream — show lock screen
+        toast("Session expired", "error", 2200);
+        showLock();
+      }
+    });
+
+    socket.on("disconnect", () => {
+      setConn("off", "OFFLINE");
+    });
+
+    socket.on("connect_error", () => {
+      setConn("off", "ERROR");
+    });
+
+    socket.on("error", (data) => {
+      const msg = (data && data.message) || "Unknown error";
+      renderErrors({ socket: msg });
+      toast(msg, "error", 2600);
+    });
+
+    socket.on("data_update", (payload) => {
+      if (!payload) return;
+      if (payload.errors) renderErrors(payload.errors);
+
+      allUsers   = payload.users || [];
+      lastTotal  = payload.total ?? allUsers.length;
+      lastStatus = payload.status || null;
+      allServers = lastStatus ? (lastStatus.servers || []) : [];
+
+      renderKpis(lastStatus, lastTotal);
+      renderChart(allServers);
+      renderRecent(allUsers);
+      renderTopServers(allServers);
+      renderServers();
+      renderUsers();
+
+      if (lastSync) lastSync.textContent = fmtTime(payload.timestamp);
+      const tag = payload.source === "auto" ? "LIVE" : payload.source === "manual" ? "SYNCED" : "LIVE";
+      setConn("on", tag);
+
+      if (payload.source === "manual") toast("Refreshed", "success", 1200);
+    });
+  };
+
+  // -----------------------------------------------------------
+  // BOOT
+  // -----------------------------------------------------------
+  if (window.__UNLOCKED__ === true) {
+    // Already unlocked server-side — connect immediately
+    initSocket();
+  }
+
+  // Lock on Ctrl/Cmd + L
+  document.addEventListener("keydown", (e) => {
+    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "l") {
+      if (document.body.dataset.unlocked === "true") {
+        e.preventDefault();
+        doLock();
+      }
+    }
+    // Quick search "/"
+    if (e.key === "/" && document.body.dataset.unlocked === "true") {
+      const active = document.activeElement;
+      if (active && (active.tagName === "INPUT" || active.tagName === "TEXTAREA")) return;
+      e.preventDefault();
+      const visibleView = document.querySelector(".view--active")?.dataset.view;
+      if (visibleView === "users")   $("userSearch")?.focus();
+      if (visibleView === "servers") $("serverSearch")?.focus();
+    }
+  });
+})();

templates/index.html

@@ -0,0 +1,486 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, maximum-scale=1">
+<meta name="theme-color" content="#0a0a0f">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+<meta name="mobile-web-app-capable" content="yes">
+<title>ServerClass · Admin Console</title>
+
+<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%236366f1'/%3E%3Cpath d='M10 12h12M10 16h12M10 20h8' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E">
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+
+<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+<body data-unlocked="{{ 'true' if unlocked else 'false' }}">
+
+<!-- ============================================================
+     LOCK SCREEN
+     ============================================================ -->
+<div id="lockScreen" class="lock {% if unlocked %}lock--hidden{% endif %}">
+  <div class="lock__bg"></div>
+  <div class="lock__card">
+    <div class="lock__logo">
+      <div class="lock__logo-mark">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="3" y="11" width="18" height="11" rx="2"/>
+          <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+        </svg>
+      </div>
+      <div class="lock__brand">
+        <div class="lock__brand-name">ServerClass</div>
+        <div class="lock__brand-sub">Admin Console</div>
+      </div>
+    </div>
+
+    <h1 class="lock__title">Welcome back</h1>
+    <p class="lock__sub">Enter your master password to unlock the dashboard.</p>
+
+    <form id="unlockForm" class="lock__form" autocomplete="off">
+      <div class="lock__field">
+        <input
+          type="password"
+          id="masterPassword"
+          class="lock__input"
+          placeholder="Master password"
+          autocomplete="current-password"
+          spellcheck="false"
+          required>
+        <button type="button" class="lock__toggle" id="togglePw" aria-label="Show password">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+            <circle cx="12" cy="12" r="3"/>
+          </svg>
+        </button>
+      </div>
+
+      <button type="submit" class="lock__submit" id="unlockBtn">
+        <span class="lock__submit-label">Unlock</span>
+        <svg class="lock__submit-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M5 12h14M12 5l7 7-7 7"/>
+        </svg>
+      </button>
+
+      <div id="lockError" class="lock__error"></div>
+    </form>
+
+    <div class="lock__footer">
+      <span class="dot"></span>
+      <span class="mono">Secure · End-to-end signed session</span>
+    </div>
+  </div>
+</div>
+
+<!-- ============================================================
+     APP SHELL
+     ============================================================ -->
+<div id="app" class="app {% if not unlocked %}app--hidden{% endif %}">
+
+  <!-- Sidebar (desktop) -->
+  <aside class="sidebar">
+    <div class="sidebar__brand">
+      <div class="sidebar__mark">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="3" y="4" width="18" height="6" rx="1.5"/>
+          <rect x="3" y="14" width="18" height="6" rx="1.5"/>
+          <circle cx="7" cy="7" r=".8" fill="currentColor"/>
+          <circle cx="7" cy="17" r=".8" fill="currentColor"/>
+        </svg>
+      </div>
+      <div class="sidebar__name">
+        <div class="sidebar__title">ServerClass</div>
+        <div class="sidebar__subtitle mono">ADMIN · v2</div>
+      </div>
+    </div>
+
+    <nav class="sidebar__nav">
+      <button class="nav-item active" data-view="overview">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="3" y="3" width="7" height="9" rx="1.5"/>
+          <rect x="14" y="3" width="7" height="5" rx="1.5"/>
+          <rect x="14" y="12" width="7" height="9" rx="1.5"/>
+          <rect x="3" y="16" width="7" height="5" rx="1.5"/>
+        </svg>
+        <span>Overview</span>
+      </button>
+      <button class="nav-item" data-view="servers">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="3" y="4" width="18" height="6" rx="1.5"/>
+          <rect x="3" y="14" width="18" height="6" rx="1.5"/>
+          <circle cx="7" cy="7" r=".8" fill="currentColor"/>
+          <circle cx="7" cy="17" r=".8" fill="currentColor"/>
+        </svg>
+        <span>Servers</span>
+        <span class="nav-item__count" id="navServersCount">—</span>
+      </button>
+      <button class="nav-item" data-view="users">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
+          <circle cx="9" cy="7" r="4"/>
+          <path d="M22 21v-2a4 4 0 0 0-3-3.87"/>
+          <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+        </svg>
+        <span>Users</span>
+        <span class="nav-item__count" id="navUsersCount">—</span>
+      </button>
+      <button class="nav-item" data-view="settings">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="12" cy="12" r="3"/>
+          <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+        </svg>
+        <span>Settings</span>
+      </button>
+    </nav>
+
+    <div class="sidebar__footer">
+      <div class="conn-pill" id="connPill" data-state="off">
+        <span class="conn-pill__dot"></span>
+        <span class="conn-pill__label" id="connLabel">Connecting</span>
+      </div>
+      <button class="sidebar__logout" id="lockBtn" title="Lock dashboard">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+          <path d="M16 17l5-5-5-5"/>
+          <path d="M21 12H9"/>
+        </svg>
+      </button>
+    </div>
+  </aside>
+
+  <!-- Main canvas -->
+  <main class="main">
+
+    <!-- Topbar (mobile) -->
+    <header class="topbar">
+      <div class="topbar__left">
+        <div class="topbar__brand">
+          <div class="topbar__mark">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="3" y="4" width="18" height="6" rx="1.5"/>
+              <rect x="3" y="14" width="18" height="6" rx="1.5"/>
+            </svg>
+          </div>
+          <div>
+            <div class="topbar__title" id="topbarTitle">Overview</div>
+            <div class="topbar__sub mono">
+              <span class="conn-pill conn-pill--mini" id="connPillMini" data-state="off">
+                <span class="conn-pill__dot"></span>
+                <span id="connLabelMini">…</span>
+              </span>
+              · <span id="lastSync">—</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="topbar__right">
+        <button class="icon-btn" id="refreshBtn" title="Refresh">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M3 12a9 9 0 0 1 15-6.7L21 8"/>
+            <path d="M21 3v5h-5"/>
+            <path d="M21 12a9 9 0 0 1-15 6.7L3 16"/>
+            <path d="M3 21v-5h5"/>
+          </svg>
+        </button>
+        <button class="icon-btn icon-btn--mobile" id="lockBtnMobile" title="Lock">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="3" y="11" width="18" height="11" rx="2"/>
+            <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+          </svg>
+        </button>
+      </div>
+    </header>
+
+    <!-- Error banner -->
+    <div id="errorBox" class="error-stack"></div>
+
+    <!-- ===== VIEW: OVERVIEW ===== -->
+    <section class="view view--active" data-view="overview">
+
+      <div class="view__head">
+        <div>
+          <div class="eyebrow mono">DASHBOARD</div>
+          <h1 class="view__title">Overview</h1>
+          <p class="view__sub">Real-time snapshot of your distributed authentication mesh.</p>
+        </div>
+        <div class="view__head-meta">
+          <div class="live-indicator">
+            <span class="live-indicator__pulse"></span>
+            <span class="mono">LIVE</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- KPI cards -->
+      <div class="kpi-grid" id="kpiGrid">
+        <div class="kpi kpi--accent">
+          <div class="kpi__icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
+              <circle cx="9" cy="7" r="4"/>
+              <path d="M22 21v-2a4 4 0 0 0-3-3.87"/>
+              <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+            </svg>
+          </div>
+          <div class="kpi__label mono">TOTAL USERS</div>
+          <div class="kpi__value" id="kpiTotalUsers">—</div>
+          <div class="kpi__trend mono"><span id="kpiTotalUsersSub">Registered accounts</span></div>
+        </div>
+
+        <div class="kpi">
+          <div class="kpi__icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="3" y="4" width="18" height="6" rx="1.5"/>
+              <rect x="3" y="14" width="18" height="6" rx="1.5"/>
+              <circle cx="7" cy="7" r=".8" fill="currentColor"/>
+              <circle cx="7" cy="17" r=".8" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="kpi__label mono">SERVERS</div>
+          <div class="kpi__value" id="kpiServers">—</div>
+          <div class="kpi__trend mono"><span id="kpiServersSub">Online nodes</span></div>
+        </div>
+
+        <div class="kpi">
+          <div class="kpi__icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M12 8v4l3 3"/>
+              <circle cx="12" cy="12" r="10"/>
+            </svg>
+          </div>
+          <div class="kpi__label mono">RESERVATIONS</div>
+          <div class="kpi__value" id="kpiReservations">—</div>
+          <div class="kpi__trend mono"><span id="kpiReservationsSub">Pending registrations</span></div>
+        </div>
+
+        <div class="kpi">
+          <div class="kpi__icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
+            </svg>
+          </div>
+          <div class="kpi__label mono">CAPACITY</div>
+          <div class="kpi__value" id="kpiCapacity">—<span class="kpi__value-suffix">%</span></div>
+          <div class="kpi__bar">
+            <div class="kpi__bar-fill" id="kpiCapacityBar" style="width:0%"></div>
+          </div>
+          <div class="kpi__trend mono"><span id="kpiCapacitySub">— / —</span></div>
+        </div>
+      </div>
+
+      <!-- Capacity chart -->
+      <div class="card card--chart">
+        <div class="card__head">
+          <div>
+            <div class="card__eyebrow mono">DISTRIBUTION</div>
+            <h2 class="card__title">Server Load</h2>
+          </div>
+          <div class="card__legend">
+            <span class="legend"><i class="legend__sw legend__sw--ok"></i>Healthy</span>
+            <span class="legend"><i class="legend__sw legend__sw--warn"></i>High</span>
+            <span class="legend"><i class="legend__sw legend__sw--full"></i>Full</span>
+          </div>
+        </div>
+        <div class="chart" id="loadChart">
+          <div class="chart__empty mono">Awaiting data…</div>
+        </div>
+      </div>
+
+      <!-- Recent users + top servers -->
+      <div class="split">
+        <div class="card">
+          <div class="card__head">
+            <div>
+              <div class="card__eyebrow mono">RECENT</div>
+              <h2 class="card__title">Latest Users</h2>
+            </div>
+            <button class="link-btn" data-jump="users">View all →</button>
+          </div>
+          <div id="recentUsers" class="recent">
+            <div class="recent__empty mono">No users yet.</div>
+          </div>
+        </div>
+
+        <div class="card">
+          <div class="card__head">
+            <div>
+              <div class="card__eyebrow mono">TOP LOAD</div>
+              <h2 class="card__title">Busiest Servers</h2>
+            </div>
+            <button class="link-btn" data-jump="servers">View all →</button>
+          </div>
+          <div id="topServers" class="recent">
+            <div class="recent__empty mono">No data yet.</div>
+          </div>
+        </div>
+      </div>
+
+    </section>
+
+    <!-- ===== VIEW: SERVERS ===== -->
+    <section class="view" data-view="servers">
+      <div class="view__head">
+        <div>
+          <div class="eyebrow mono">INFRASTRUCTURE</div>
+          <h1 class="view__title">Servers</h1>
+          <p class="view__sub">Live capacity and health across every node.</p>
+        </div>
+      </div>
+
+      <div class="toolbar">
+        <div class="search">
+          <svg class="search__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="11" cy="11" r="8"/>
+            <path d="m21 21-4.35-4.35"/>
+          </svg>
+          <input type="text" id="serverSearch" class="search__input" placeholder="Filter servers by number, URL, or status…">
+          <span class="search__hint mono" id="serverCount">— nodes</span>
+        </div>
+        <div class="seg" id="serverFilter">
+          <button data-filter="all" class="seg__btn active">All</button>
+          <button data-filter="open" class="seg__btn">Open</button>
+          <button data-filter="full" class="seg__btn">Full</button>
+        </div>
+      </div>
+
+      <div id="serversContent" class="cards-grid">
+        <div class="empty mono">Loading servers…</div>
+      </div>
+    </section>
+
+    <!-- ===== VIEW: USERS ===== -->
+    <section class="view" data-view="users">
+      <div class="view__head">
+        <div>
+          <div class="eyebrow mono">DIRECTORY</div>
+          <h1 class="view__title">Users</h1>
+          <p class="view__sub">Every account, every token, every login.</p>
+        </div>
+      </div>
+
+      <div class="toolbar">
+        <div class="search">
+          <svg class="search__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="11" cy="11" r="8"/>
+            <path d="m21 21-4.35-4.35"/>
+          </svg>
+          <input type="text" id="userSearch" class="search__input" placeholder="Search username, telegram ID, server…">
+          <span class="search__hint mono" id="userCount">— records</span>
+        </div>
+        <button class="btn btn--ghost" id="exportBtn">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+            <polyline points="7 10 12 15 17 10"/>
+            <line x1="12" y1="15" x2="12" y2="3"/>
+          </svg>
+          Export CSV
+        </button>
+      </div>
+
+      <div id="usersContent" class="users-wrap">
+        <div class="empty mono">Loading users…</div>
+      </div>
+    </section>
+
+    <!-- ===== VIEW: SETTINGS ===== -->
+    <section class="view" data-view="settings">
+      <div class="view__head">
+        <div>
+          <div class="eyebrow mono">CONFIGURATION</div>
+          <h1 class="view__title">Settings</h1>
+          <p class="view__sub">Session and connection preferences.</p>
+        </div>
+      </div>
+
+      <div class="settings">
+        <div class="setting">
+          <div>
+            <div class="setting__label">Auto-refresh interval</div>
+            <div class="setting__hint">How often the dashboard pulls fresh data from upstream.</div>
+          </div>
+          <div class="setting__value mono"><span id="pollInterval">{{ poll_interval }}</span>s</div>
+        </div>
+
+        <div class="setting">
+          <div>
+            <div class="setting__label">Upstream API</div>
+            <div class="setting__hint">The backing ServerClass DB instance.</div>
+          </div>
+          <div class="setting__value mono">dooratre-db.hf.space</div>
+        </div>
+
+        <div class="setting">
+          <div>
+            <div class="setting__label">Session</div>
+            <div class="setting__hint">You stay signed in for 30 days on this device.</div>
+          </div>
+          <div class="setting__value">
+            <button class="btn btn--danger" id="lockBtnSettings">Lock dashboard</button>
+          </div>
+        </div>
+
+        <div class="setting">
+          <div>
+            <div class="setting__label">Build</div>
+            <div class="setting__hint">ServerClass Admin Console</div>
+          </div>
+          <div class="setting__value mono">v2.0 · MMXXV</div>
+        </div>
+      </div>
+    </section>
+
+  </main>
+
+  <!-- Mobile bottom nav -->
+  <nav class="bottomnav">
+    <button class="bottomnav__item active" data-view="overview">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="3" y="3" width="7" height="9" rx="1.5"/>
+        <rect x="14" y="3" width="7" height="5" rx="1.5"/>
+        <rect x="14" y="12" width="7" height="9" rx="1.5"/>
+        <rect x="3" y="16" width="7" height="5" rx="1.5"/>
+      </svg>
+      <span>Overview</span>
+    </button>
+    <button class="bottomnav__item" data-view="servers">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="3" y="4" width="18" height="6" rx="1.5"/>
+        <rect x="3" y="14" width="18" height="6" rx="1.5"/>
+        <circle cx="7" cy="7" r=".8" fill="currentColor"/>
+        <circle cx="7" cy="17" r=".8" fill="currentColor"/>
+      </svg>
+      <span>Servers</span>
+    </button>
+    <button class="bottomnav__item" data-view="users">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M16 21v-2a4a4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
+        <circle cx="9" cy="7" r="4"/>
+      </svg>
+      <span>Users</span>
+    </button>
+    <button class="bottomnav__item" data-view="settings">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="3"/>
+        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+      </svg>
+      <span>Settings</span>
+    </button>
+  </nav>
+
+</div>
+
+<!-- Toast container -->
+<div id="toasts" class="toasts" aria-live="polite"></div>
+
+<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
+<script>
+  window.__POLL_INTERVAL__ = {{ poll_interval }};
+  window.__UNLOCKED__ = {{ 'true' if unlocked else 'false' }};
+</script>
+<script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
+</body>
+</html>