*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --bg: #02020a;
      --surface: rgba(10,8,24,0.85);
      --surface2: rgba(16,14,32,0.9);
      --border: rgba(212,175,100,0.1);
      --border2: rgba(212,175,100,0.22);
      --text: #ede8ff;
      --text2: rgba(212,175,100,0.55);
      --text3: rgba(212,175,100,0.28);
      --accent: #a78bfa;
      --accent-bg: rgba(167,139,250,0.1);
      --accent-text: #c4b5fd;
      --green-bg: rgba(52,211,153,0.1);
      --green-text: #34d399;
      --red-bg: rgba(248,113,113,0.08);
      --red-text: #f87171;
      --red-border: rgba(248,113,113,0.3);
      --gold: rgba(212,175,100,1);
      --gold-dim: rgba(212,175,100,0.35);
      --cinzel: 'Cinzel', serif;
      --syne: 'Syne', sans-serif;
      --mono: 'DM Mono', monospace;
      --radius: 10px;
      --radius-lg: 16px;
    }
    html, body { min-height: 100vh; background: var(--bg); overflow-x: hidden; }
    body {
      font-family: var(--syne);
      color: var(--text);
      font-size: 15px;
      line-height: 1.6;
    }

    /* ── CANVAS ── */
    #bg-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

    /* ── GRID OVERLAY ── */
    body::before {
      content: '';
      position: fixed; inset: 0; z-index: 1; pointer-events: none;
      background-image: linear-gradient(rgba(212,175,100,0.018) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(212,175,100,0.018) 1px, transparent 1px);
      background-size: 52px 52px;
    }

    /* ── HEADER ── */
    header {
      background: rgba(2,2,10,0.88);
      border-bottom: 1px solid var(--border);
      padding: 0 1.5rem;
      display: flex; align-items: center; gap: 12px;
      height: 60px;
      position: sticky; top: 0; z-index: 10;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }
    header::after {
      content: '';
      position: absolute; bottom: 0; left: 5%; right: 5%; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(212,175,100,0.3), transparent);
    }
    .logo-back {
      display: flex; align-items: center; gap: 6px;
      font-family: var(--cinzel); font-size: 11px; letter-spacing: .18em;
      color: var(--text3); text-decoration: none;
      padding: 5px 14px; border: 1px solid var(--border);
      border-radius: 20px; transition: color .2s, border-color .2s;
    }
    .logo-back:hover { color: var(--gold-dim); border-color: var(--border2); }
    .logo {
      display: flex; align-items: center; gap: 10px;
      font-family: var(--cinzel); font-weight: 600; font-size: 15px;
      color: var(--text); text-decoration: none; letter-spacing: .06em;
    }
    .logo-icon {
      width: 32px; height: 32px; background: rgba(91,156,246,0.15);
      border: 1px solid rgba(91,156,246,0.3); border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      color: #5b9cf6; font-size: 11px; font-weight: 700;
      font-family: var(--mono); letter-spacing: .05em;
    }
    .header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
    #total-badge {
      font-family: var(--mono); font-size: 11px;
      background: rgba(212,175,100,0.06); border: 1px solid var(--border);
      border-radius: 20px; padding: 3px 12px; color: var(--text3);
    }
    .status-wrap { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--text3); }
    .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text3); transition: background .3s; }
    .status-dot.online { background: #34d399; box-shadow: 0 0 8px #34d399; }
    .status-dot.error { background: #f87171; }

    /* ── BUTTONS ── */
    .btn-primary {
      height: 34px; background: rgba(167,139,250,0.12);
      border: 1px solid rgba(167,139,250,0.3);
      border-radius: 20px; padding: 0 18px;
      font-family: var(--cinzel); font-size: 11px; font-weight: 600;
      letter-spacing: .12em; color: var(--accent-text);
      cursor: pointer; white-space: nowrap;
      transition: background .2s, border-color .2s, box-shadow .2s;
    }
    .btn-primary:hover { background: rgba(167,139,250,0.2); border-color: rgba(167,139,250,0.5); box-shadow: 0 0 20px rgba(167,139,250,0.2); }
    .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
    .btn-sm {
      height: 30px; background: transparent;
      border: 1px solid var(--border); border-radius: 8px;
      padding: 0 12px; font-family: var(--mono); font-size: 11px;
      cursor: pointer; color: var(--text3);
      transition: background .15s, border-color .15s, color .15s;
      white-space: nowrap;
    }
    .btn-sm:hover { background: rgba(212,175,100,0.06); border-color: var(--border2); color: var(--text2); }
    .btn-sm:disabled { opacity: 0.4; cursor: not-allowed; }
    .btn-danger { color: var(--red-text); border-color: rgba(248,113,113,0.2); }
    .btn-danger:hover { background: var(--red-bg); border-color: var(--red-border); }

    /* ── MAIN ── */
    main { max-width: 940px; margin: 0 auto; padding: 2rem 1rem 5rem; position: relative; z-index: 2; }

    /* ── PAGE HEADER ── */
    .page-head { margin-bottom: 2rem; }
    .page-eyebrow { font-family: var(--mono); font-size: 9.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--text3); margin-bottom: .6rem; }
    .page-title { font-family: var(--cinzel); font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 900; letter-spacing: -.01em; line-height: 1.1; margin-bottom: .5rem; }
    .page-title .grad { background: linear-gradient(120deg, #5b9cf6 0%, #a78bfa 55%, #d4af64 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .page-orn { display: flex; align-items: center; gap: 12px; margin: 1rem 0 1.5rem; }
    .page-orn-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(212,175,100,.18), transparent); }
    .page-orn-sym { font-family: var(--cinzel); font-size: 12px; color: rgba(212,175,100,.22); }

    /* ── TOOLBAR ── */
    .toolbar { display: flex; gap: 8px; margin-bottom: 1.2rem; flex-wrap: wrap; }
    .toolbar input[type="text"] {
      flex: 1; min-width: 180px; height: 38px;
      border: 1px solid var(--border); border-radius: var(--radius);
      padding: 0 14px; font-family: var(--mono); font-size: 12px;
      background: var(--surface); color: var(--text);
      outline: none; transition: border-color .2s, box-shadow .2s;
    }
    .toolbar input:focus { border-color: var(--border2); box-shadow: 0 0 0 3px rgba(212,175,100,0.07); }
    .toolbar select {
      height: 38px; border: 1px solid var(--border); border-radius: var(--radius);
      padding: 0 12px; font-family: var(--mono); font-size: 12px;
      background: var(--surface); color: var(--text);
      outline: none; cursor: pointer; min-width: 140px;
    }
    .stats { font-family: var(--mono); font-size: 11px; color: var(--text3); margin-bottom: 1rem; }

    .skeleton { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.25rem; }
    .skel-line { background: rgba(212,175,100,0.05); border-radius: 4px; height: 13px; margin-bottom: 10px; animation: shimmer 1.6s ease-in-out infinite; }
    @keyframes shimmer { 0%,100%{opacity:1}50%{opacity:.35} }

    /* ── EMPTY ── */
    .empty { text-align: center; color: var(--text3); padding: 5rem 1rem; }
    .empty-icon { font-size: 32px; margin-bottom: 14px; }
    .empty p { font-family: var(--cinzel); font-size: 13px; letter-spacing: .08em; }

    .overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 100; align-items: center; justify-content: center; padding: 1rem; backdrop-filter: blur(6px); }
    .overlay.open { display: flex; }
    .modal {
      background: #08081a; border: 1px solid var(--border2);
      border-radius: 20px; padding: 1.8rem;
      width: min(560px, 100%); max-height: 92vh; overflow-y: auto;
      position: relative;
    }
    .modal::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg,transparent,rgba(212,175,100,.4),transparent); }
    .modal h2 { font-family: var(--cinzel); font-size: 15px; font-weight: 600; letter-spacing: .1em; margin-bottom: 1.4rem; color: var(--text); }
    .field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
    .field label { font-family: var(--cinzel); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--text3); }
    .field input[type="text"], .field select, .field textarea {
      width: 100%; border: 1px solid var(--border); border-radius: var(--radius);
      padding: 9px 13px; font-family: var(--mono); font-size: 12.5px;
      background: rgba(2,2,10,0.8); color: var(--text);
      outline: none; transition: border-color .2s;
    }
    .field input:focus, .field select:focus, .field textarea:focus { border-color: rgba(167,139,250,0.4); box-shadow: 0 0 0 3px rgba(167,139,250,0.06); }
    .field textarea { min-height: 220px; font-family: var(--mono); font-size: 12px; resize: vertical; line-height: 1.65; }
    .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 1.4rem; }

    #toast {
      position: fixed; bottom: 2.5rem; left: 50%;
      transform: translateX(-50%) translateY(20px);
      background: #0e0e1c; color: var(--text);
      border: 1px solid var(--border2);
      padding: 10px 22px; border-radius: 24px;
      font-family: var(--mono); font-size: 12px;
      opacity: 0; transition: all .25s; pointer-events: none; z-index: 999;
      white-space: nowrap; backdrop-filter: blur(10px);
    }
    #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
    #toast.error-toast { background: rgba(248,113,113,0.12); border-color: var(--red-border); color: var(--red-text); }

    #lock-screen {
      display: none; position: fixed; inset: 0;
      background: #02020a; z-index: 1000;
      align-items: center; justify-content: center; flex-direction: column;
    }
    #lock-screen.active { display: flex; }
    #lock-screen::before {
      content: ''; position: fixed; inset: 0; pointer-events: none;
      background-image: linear-gradient(rgba(212,175,100,0.018) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(212,175,100,0.018) 1px, transparent 1px);
      background-size: 52px 52px;
    }
    .lock-box {
      background: rgba(8,8,26,0.95); border: 1px solid var(--border2);
      border-radius: 24px; padding: 2.8rem 2.2rem;
      width: min(380px, 92vw);
      display: flex; flex-direction: column; align-items: center;
      position: relative; backdrop-filter: blur(20px);
    }
    .lock-box::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg,transparent,rgba(91,156,246,.5),transparent); }
    .lock-box::after { content: ''; position: absolute; top: 14px; left: 14px; width: 14px; height: 14px; border-top: 1px solid var(--border2); border-left: 1px solid var(--border2); }
    .lock-rune { font-family: var(--cinzel); font-size: 30px; color: rgba(91,156,246,0.7); margin-bottom: 1rem; }
    .lock-title { font-family: var(--cinzel); font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: 4px; letter-spacing: .08em; }
    .lock-sub { font-family: var(--mono); font-size: 11px; color: var(--text3); margin-bottom: 1.6rem; text-align: center; letter-spacing: .06em; }
    .lock-input-wrap { position: relative; width: 100%; margin-bottom: 12px; }
    .lock-input {
      width: 100%; background: rgba(2,2,10,0.8);
      border: 1px solid var(--border); border-radius: 10px;
      padding: 11px 44px 11px 16px;
      font-family: var(--mono); font-size: 14px; color: var(--text);
      outline: none; transition: border-color .2s;
    }
    .lock-input:focus { border-color: rgba(91,156,246,0.5); box-shadow: 0 0 0 3px rgba(91,156,246,0.07); }
    .lock-input.shake { animation: shake .35s ease; border-color: var(--red-text); }
    .lock-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text3); font-size: 14px; padding: 4px; }
    .lock-toggle:hover { color: var(--text2); }
    .lock-btn {
      width: 100%; background: rgba(91,156,246,0.12);
      border: 1px solid rgba(91,156,246,0.3); border-radius: 10px;
      padding: 12px;
      font-family: var(--cinzel); font-size: 12px; font-weight: 600; letter-spacing: .16em;
      color: #89b4fa; cursor: pointer; transition: background .2s, box-shadow .2s;
      margin-bottom: 12px; text-transform: uppercase;
    }
    .lock-btn:hover { background: rgba(91,156,246,0.2); box-shadow: 0 0 24px rgba(91,156,246,0.18); }
    .lock-btn:disabled { opacity: .4; cursor: not-allowed; }
    .lock-error { font-family: var(--mono); font-size: 11px; color: var(--red-text); min-height: 16px; text-align: center; }
    .lock-hint { font-family: var(--mono); font-size: 10px; color: var(--text3); margin-top: 1.2rem; text-align: center; line-height: 1.8; }
    @keyframes shake { 0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)} }
    @media (max-width: 650px) {
      header { padding: 0 1rem; flex-wrap: wrap; height: auto; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
      header .logo-back { flex-shrink: 0; }
      header .logo { flex-wrap: wrap; }
      .header-right { order: 3; width: 100%; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
      .header-right .btn-primary { flex: 1; min-width: 0; }
      .toolbar { gap: 6px; }
      .toolbar input[type="text"] { min-width: 0; width: 100%; }
      .toolbar select { min-width: 0; flex: 1; }
      .page-title { font-size: 1.6rem !important; }
    }