:root{--bg:#0b0d12;--card:#141821;--card-hover:#1a2030;--text:#e8ecf5;
        --muted:#7d879c;--accent:#8b5cf6;--accent-2:#22d3ee;--live:#ef4444;--ok:#22c55e}
  *{box-sizing:border-box;margin:0;padding:0}
  body{background:radial-gradient(1200px 600px at 20% -10%,#1e1b4b 0%,transparent 60%),
      radial-gradient(900px 500px at 100% 0%,#0e7490 0%,transparent 55%),var(--bg);
      color:var(--text);font-family:'Inter','Segoe UI',system-ui,sans-serif;
      min-height:100vh;padding:40px 24px}

  header{max-width:1200px;margin:0 auto 40px; display: flex; justify-content: space-between; align-items: center;}
  h1{font-size:32px;font-weight:700;letter-spacing:-.5px;display:flex;align-items:center;gap:12px}
  h1 .dot{width:12px;height:12px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 12px var(--accent-2)}
  header p{color:var(--muted);margin-top:8px;font-size:15px}

  .header-actions { display: flex; gap: 12px; align-items: center;}
  .btn-nav {
    text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.1);
    padding: 10px 20px; border-radius: 10px; font-weight: 600; font-size: 14px;
    transition: all 0.2s; cursor: pointer;
  }
  .btn-nav:hover { background: rgba(255,255,255,0.15); }

  .btn-primary {
    display: none; background: linear-gradient(135deg, var(--accent), #7c3aed);
    color: #fff; border: none; padding: 10px 20px; border-radius: 10px;
    cursor: pointer; font-weight: 600; font-size: 14px;
    box-shadow: 0 4px 12px rgba(139,92,246,.3); transition: all 0.2s;
  }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(139,92,246,.5); }

  .status-bar {
    max-width: 1200px; margin: 0 auto 30px; background: var(--card);
    border-radius: 16px; padding: 20px 24px; border: 1px solid rgba(255,255,255,.06);
    display: flex; align-items: center; justify-content: space-between;
  }
  .status-info { display: flex; align-items: center; gap: 24px; font-size: 14px; }
  .status-item span { color: var(--muted); margin-right: 8px; }
  .status-item b { color: var(--text); }
  .status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; }
  .dot-ok { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
  .dot-err { background: var(--live); box-shadow: 0 0 8px var(--live); }

  .grid{max-width:1200px;margin:0 auto;
        display:grid;grid-template-columns:repeat(auto-fill,minmax(480px,1fr));gap:20px}
  @media (max-width: 600px){ .grid{grid-template-columns:1fr} }

  .card{background:var(--card);border:1px solid rgba(255,255,255,.06);
        border-radius:16px;padding:24px;position:relative;
        display:block;transition:all .2s ease;overflow:hidden}
  .card:hover{background:var(--card-hover);transform:translateY(-2px);
              border-color:rgba(139,92,246,.4);box-shadow:0 12px 32px rgba(0,0,0,.4)}

  .card .name{font-size:20px;font-weight:600;margin-bottom:6px;
              display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .badge{font-size:11px;padding:3px 9px;border-radius:20px;
         font-weight:600;letter-spacing:.4px}
  .badge.rec{background:var(--ok);color:#fff;}
  .badge.off{background:rgba(125,135,156,.15);color:var(--muted)}

  .card .link{color:var(--muted);font-size:13px;margin-top:10px;word-break:break-all}
  .card-stats { margin-top: 16px; display: flex; gap: 16px; font-size: 13px; color: var(--muted); }
  .card-stats b { color: var(--text); }

  .action-btns { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; }
  .icon-btn {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    color: var(--text); width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: all 0.2s; text-decoration: none;
  }
  .icon-btn:hover { background: rgba(255,255,255,0.15); }
  .icon-btn.del:hover { background: rgba(239,68,68,0.8); border-color: #ef4444; color: #fff; }

  .admin-only { display: none; }

  .logout-btn { color: #fca5a5; }
  .restart-btn { color: #fca5a5; border-color: rgba(239,68,68,0.3); }
  .loading-box { padding: 20px; text-align: center; }
  .empty-message { color: var(--muted); }
  .card .name.admin-name { padding-right: 100px; }

  .modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(4px); z-index: 100; align-items: center; justify-content: center; }
  .modal.show { display: flex; }
  .modal-content { background: var(--card); padding: 32px; border-radius: 20px; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 16px; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 24px 64px rgba(0,0,0,.8); }
  .modal-content h2 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
  .modal-content input { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff; padding: 12px; border-radius: 10px; font-size: 14px; outline: none; }
  .modal-content input:focus { border-color: var(--accent); }
  .modal-content .btn-row { display: flex; gap: 10px; margin-top: 8px; }
  .modal-content button { flex: 1; padding: 12px; border-radius: 10px; border: none; cursor: pointer; font-weight: 600; }
  .modal-content .btn-save { background: var(--accent); color: #fff; }
  .modal-content .btn-cancel { background: rgba(255,255,255,0.1); color: #fff; }