:root{--bg:#0b0d12;--card:#141821;--card-hover:#1a2030;--text:#e8ecf5;
        --muted:#7d879c;--accent:#8b5cf6;--accent-2:#22d3ee;--live:#ef4444}
  *{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-add {
    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-add.visible { display: block; }
  .btn-add:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(139,92,246,.5); }

  .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 a { text-decoration: none; color: inherit; display: block; }

  .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.live{background:var(--live);color:#fff;box-shadow:0 0 12px rgba(239,68,68,.6)}
  .badge.off{background:rgba(125,135,156,.15);color:var(--muted)}
  .badge.rec{background:rgba(139,92,246,.2);color:#c4b5fd}
  .badge.load{background:rgba(125,135,156,.1);color:var(--muted);animation:pulse 1.5s infinite}
  @keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}

  .card .link{color:var(--muted);font-size:13px;margin-top:10px;word-break:break-all}
  .card .arrow{position:absolute;right:20px;bottom:20px;font-size:22px;
               color:var(--accent);opacity:0;transform:translateX(-6px);
               transition:all .2s}
  .card:hover .arrow{opacity:1;transform:translateX(0)}

  .delete-btn {
    display: none;
    position: absolute; top: 16px; right: 16px;
    background: rgba(239,68,68,0.1); color: #ef4444;
    border: 1px solid rgba(239,68,68,0.3); border-radius: 8px;
    width: 32px; height: 32px; align-items: center; justify-content: center;
    cursor: pointer; font-size: 16px; z-index: 10; transition: all 0.2s;
  }
  .delete-btn.visible { display: flex; }
  .delete-btn:hover { background: rgba(239,68,68,0.8); color: #fff; border-color: #ef4444; }

  .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-primary { background: var(--accent); color: #fff; }
  .modal-content .btn-primary:hover { background: #7c3aed; }
  .modal-content .btn-secondary { background: rgba(255,255,255,0.1); color: #fff; }
  .modal-content .btn-secondary:hover { background: rgba(255,255,255,0.2); }

  .logout-btn { display: none; color: #fca5a5; }
  .loading-box { padding: 20px; text-align: center; }
  .empty-message { color: var(--muted); }