:root{
  --bg-start:#0b1020;
  --bg-end:#0a1232;
  --card:#101827;
  --muted:#9aa3b2;
  --text:#e6ebf5;
  --accent:#2b6cb0;      /* se sobreescribe dinámicamente desde app.js */
  --accent-2: var(--accent); /* derivado más claro para degradados (fallback) */
  --accent-3: var(--accent); /* derivado más oscuro para sombras/focus (fallback) */
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Si el navegador soporta color-mix, derivamos automáticamente
   un segundo tono basado en el accent actual (se ve mejor con rojo Netflix) */
@supports (color: color-mix(in oklab, #000, #fff)) {
  :root{
    --accent-2: color-mix(in oklab, var(--accent) 65%, white);
    --accent-3: color-mix(in oklab, var(--accent) 70%, black);
  }
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 50% 0%, #121a33 0%, transparent 60%),
    radial-gradient(1200px 800px at 50% 0%, #0a1228 0%, transparent 65%),
    linear-gradient(160deg, var(--bg-start), var(--bg-end));
  min-height:100%;
}
a{ color: var(--accent); text-decoration:none; }
h1,h2,h3 { margin:0; }

/* Layout base */
.wrap{
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; padding:24px;
}
.brand{ text-align:center; margin-bottom:24px; }
.brand .title{
  font-weight:700; font-size:32px; letter-spacing:.2px;
  background:linear-gradient(90deg,#6ee7f9, var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand .subtitle{ color:var(--muted); font-size:13px; margin-top:6px; }

/* Topbar (común App/Admin) */
.topbar{
  position:fixed; top:0; left:0; right:0; height:56px;
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(10,17,34,.7); backdrop-filter: blur(6px);
  z-index:20;
}
.topbar .burger{
  position:absolute; left:12px; top:8px; width:40px; height:40px; border-radius:10px;
  display:grid; place-items:center; background:#0b1424; border:1px solid #1b263a; cursor:pointer;
}
.topbar .title{ font-weight:700; display:flex; align-items:center; gap:8px; }
.admin-btn{
  position:absolute; right:12px; top:8px; padding:8px 12px; border-radius:10px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#fff; border:1px solid #1b263a; text-decoration:none; font-weight:600;
}
.topbar-logo{
  width:22px; height:22px;
  border-radius:6px; object-fit:contain;
  background:#0b1424; border:1px solid rgba(255,255,255,.06);
}

/* Contenedores */
.screen{ padding-top:72px; padding-bottom:24px; min-height:100vh; }
.content{ width: 880px; max-width: 96vw; margin: 0 auto; }
.center{ text-align:center; }