/* --- Design system variables --- */
:root{
  --bg: #0b1020;
  --surface: #0f172a; /* slate-900 */
  --surface-2:#111827; /* gray-900 */
  --text: #e5e7eb; /* gray-200 */
  --muted:#94a3b8; /* slate-400 */
  --primary:#6ee7b7; /* emerald-300 */
  --primary-600:#10b981; /* emerald-500 */
  --danger:#fca5a5; /* red-300 */
  --info:#93c5fd; /* blue-300 */
  --success:#86efac; /* green-300 */
  --border:#1f2937; /* gray-800 */
  --ring:#22d3ee; /* cyan-400 */
  /* Accents used by the scroll visuals */
  --accent:#22d3ee;       /* cyan-400 */
  --accent-700:#0ea5e9;   /* sky-500 */
  --surface-1:#0b1220;    /* slightly darker base for layered bg */
  --radius:16px;
  --shadow-lg:0 30px 80px rgba(2,6,23,.45);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

html {
  scroll-behavior: smooth;
}

/* Active tab highlight in top nav */
.topbar nav a.active {
  color: var(--text);
  border-bottom: 2px solid var(--primary);
  padding-bottom: 4px;
}

/* --- Brand + Loader + Course Grid additions --- */
.brand{display:flex;align-items:center;gap:8px;color:var(--text);text-decoration:none}
.brand-logo{width:28px;height:28px;border-radius:50%;vertical-align:middle}
.brand-fallback{font-weight:800;letter-spacing:.04em}

.loader-backdrop{position:fixed;inset:0;background:rgba(2,6,23,.65);backdrop-filter: blur(3px);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .2s ease}
.loader-backdrop.show{opacity:1;pointer-events:auto}
.loader{width:44px;height:44px;border-radius:50%;border:3px solid rgba(255,255,255,.22);border-top-color: var(--primary);animation:spin .9s linear infinite;will-change:transform}
@keyframes spin{to{transform:rotate(360deg)}}

.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.course-card{display:flex;gap:12px;align-items:center;padding:18px;border:1px solid rgba(148,163,184,.18);border-radius:18px;background:linear-gradient(180deg,rgba(15,23,42,.92),rgba(11,18,32,.85));text-decoration:none;color:var(--text);transition:transform .15s ease,border-color .25s ease,box-shadow .25s ease}
.course-card:hover{transform:translateY(-3px);border-color:rgba(148,163,184,.45);box-shadow:0 20px 45px rgba(2,6,23,.32)}
.course-icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(180deg,rgba(148,163,184,.1),rgba(11,17,32,.85));border:1px solid rgba(148,163,184,.25);font-size:22px;box-shadow:0 12px 24px rgba(2,6,23,.28)}
.course-title{font-weight:700}
.course-sub{font-size:.85rem;color:var(--muted)}

/* --- Base / reset --- */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);line-height:1.6}
body.is-loading{cursor:wait}
body.is-loading *{cursor:wait !important}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:
  radial-gradient(900px 600px at 15% -10%,rgba(34,211,238,.18),transparent 60%),
  radial-gradient(700px 520px at 85% 0%,rgba(16,185,129,.2),transparent 62%),
  linear-gradient(180deg,rgba(11,17,32,.92),rgba(4,9,22,.95));
pointer-events:none;filter:saturate(1.05);}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:rgba(15,23,42,.6);border-radius:999px}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#1f2937,#0f172a);border-radius:999px;border:2px solid rgba(11,17,32,.85)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#334155,#1e293b)}
a{color:#93c5fd;text-decoration:none}
a:hover{filter:brightness(1.1)}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:8px}

/* --- Layout helpers --- */
.container{max-width:1100px;margin:0 auto;padding:24px}

/* --- Topbar --- */
.topbar{position:sticky;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--surface-2);border-bottom:1px solid var(--border);backdrop-filter: blur(6px)}
.topbar .brand{font-weight:800;letter-spacing:.04em}
.topbar nav{display:flex;gap:12px}
.topbar a{color:var(--muted)}
.topbar a:hover{color:var(--text)}
.topbar__right{display:flex;align-items:center;gap:16px}
.lang-form{display:flex;align-items:center;gap:6px}
.lang-select{padding:6px 10px;border:1px solid var(--border);border-radius:10px;background:#0b1220;color:var(--text);font-size:.9rem}
.lang-select:focus{outline:2px solid var(--ring);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lang-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,.75);backdrop-filter:blur(4px);z-index:1200;padding:24px}
.lang-modal.show{display:flex}
.lang-modal__dialog{max-width:360px;width:100%;border-radius:16px;padding:24px;background:linear-gradient(180deg,rgba(15,23,42,.95),rgba(11,18,32,.95));border:1px solid rgba(148,163,184,.22);box-shadow:0 20px 60px rgba(8,12,24,.55);text-align:center;backdrop-filter:blur(6px)}
.lang-modal__body{color:var(--muted);margin:0 0 20px}
.lang-modal__actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.lang-modal .lang-choice{min-width:120px}

/* --- Cards --- */
.card{background:linear-gradient(180deg,rgba(148,163,184,.08),rgba(15,23,42,.7));border:1px solid rgba(148,163,184,.18);border-radius:16px;padding:20px;box-shadow:0 28px 60px rgba(2,6,23,.35);backdrop-filter:blur(4px)}
.card + .card{margin-top:16px}

/* --- Typography --- */
h1{font-size:1.8rem;margin:0 0 12px}
h2{font-size:1.25rem;margin:0 0 10px;color:var(--muted)}
.muted{color:var(--muted)}

/* --- Lists (lessons etc.) --- */
ol{list-style:none;padding:0;margin:0}
li{padding:14px 16px;border-radius:14px;margin:10px 0;background:linear-gradient(180deg,rgba(15,23,42,.9),rgba(12,18,34,.88));border:1px solid rgba(148,163,184,.18);display:flex;align-items:center;justify-content:space-between;gap:14px;transition:transform .18s ease, border-color .22s ease, box-shadow .22s ease}
li:hover{transform:translateY(-2px);border-color:rgba(148,163,184,.35);box-shadow:0 16px 32px rgba(2,6,23,.25)}
.lesson-link{color:var(--text);text-decoration:none;display:flex;align-items:center;gap:10px;flex:1}
.lesson-link .title{font-weight:600}
.badge{font-size:.75rem;padding:4px 8px;border-radius:999px;border:1px solid var(--border);color:var(--muted)}

/* --- Forms --- */
form{display:grid;gap:12px}
label{display:grid;gap:6px}
input,select,textarea{padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#0b1220;color:var(--text)}
input[type="file"]{color:var(--muted)}

/* --- Buttons --- */
button,.btn{appearance:none;border:none;background:var(--primary);color:#0b1020;font-weight:700;padding:10px 14px;border-radius:10px;cursor:pointer;transition:filter .2s ease, transform .06s ease}
button:hover,.btn:hover{filter:brightness(1.05)}
button:active,.btn:active{transform:translateY(1px)}
button[disabled]{opacity:.6;cursor:not-allowed}
button.ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
/* Aliases for older class names used in views */
.btn-primary{ background: var(--primary-600); color:#04121a; }
.btn-danger{ background: var(--danger); color:#1b0b0b; }
.btn-full{ width: 100%; }
.btn.small{ padding: 6px 10px; font-size: .9rem; }

/* --- Alerts / Flash --- */
.flash{padding:.6rem .9rem;margin:.6rem 0;border-radius:12px;border:1px solid var(--border)}
.flash-error{background:rgba(220,38,38,.08);color:#fecaca}
.flash-info{background:rgba(59,130,246,.08);color:#bfdbfe}
.flash-success{background:rgba(16,185,129,.08);color:#bbf7d0}
.alert{padding:.6rem .9rem;border-radius:12px;border:1px solid var(--border);background:rgba(59,130,246,.08);color:#bfdbfe}
.alert-error{background:rgba(220,38,38,.08);color:#fecaca}
.alert-success{background:rgba(16,185,129,.08);color:#bbf7d0}
.alert-info{background:rgba(59,130,246,.08);color:#bfdbfe}

/* --- Media (video/pdf) --- */
video{border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.25);background:#000}
.pdf-frame{position:relative;overflow:hidden;border-radius:12px}
.pdf-frame iframe{display:block;width:100%;border:0;border-radius:12px}
.pdf-watermark{position:absolute;inset:0;pointer-events:none;opacity:.15;color:#e5e7eb;font-weight:800;text-transform:uppercase;display:grid;place-items:center;letter-spacing:.25rem;transform:rotate(-18deg);user-select:none;mix-blend-mode:overlay}

/* --- Subtle motion --- */
@media (prefers-reduced-motion:no-preference){a,button,li{transition:all .2s ease}}

/* =============================
   Apple‑style scroll bits
   ============================= */

/* Progress bar */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: transparent; z-index: 50; }
.progress__bar { width: 100%; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--accent), var(--accent-700)); box-shadow: 0 1px 6px color-mix(in oklab, var(--accent) 40%, transparent); transition: transform .1s linear; }

/* Pinned hero */
.pin { height: 180vh; /* taller section to allow scroll play */ }
.pin__inner { position: sticky; top: 0; display: grid; place-items: center; min-height: 100vh; background:
  radial-gradient(1200px 600px at 10% -10%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%),
  radial-gradient(800px 400px at 110% 10%, color-mix(in oklab, var(--accent-700) 14%, transparent), transparent 65%),
  var(--surface-1);
}
.mega { font-size: clamp(2.2rem, 4.8vw + 1rem, 5rem); line-height: 1.04; margin: 0 0 12px; text-wrap: balance; }
.mega .accent { display: block; background: linear-gradient(90deg, var(--accent), var(--accent-700)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: clamp(1rem, .6vw + .9rem, 1.25rem); color: var(--muted); margin: 0 0 18px; }
.cta { display: flex; gap: 10px; flex-wrap: wrap; }

/* Motion driven by --hero-p (0..1 set in JS) */
.pin__inner [data-animate="scale-fade"] {
  transform: scale(calc(1 + (1 - var(--hero-p, 1)) * 0.15)) translateY(calc((1 - var(--hero-p, 1)) * -12px));
  opacity: calc(.6 + var(--hero-p, 1) * .4);
  transition: transform .06s linear, opacity .12s linear;
}
.pin__inner [data-animate="fade-up"] {
  transform: translateY(calc((1 - var(--hero-p, 1)) * 24px));
  opacity: var(--hero-p, 1);
  transition: transform .06s linear, opacity .12s linear;
}

/* Scrollytelling */
.scrolly { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; align-items: start; width: 100%; max-width: 1200px; margin: 0 auto; padding: 48px 24px; }
.scrolly__sticky { position: sticky; top: 76px; align-self: start; height: calc(100vh - 76px); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-lg); }
.device { width: 100%; height: 100%; border-radius: inherit; background:
  radial-gradient(60% 40% at 60% 20%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 60%),
  radial-gradient(40% 30% at 20% 60%, color-mix(in oklab, var(--accent-700) 8%, transparent), transparent 60%),
  linear-gradient(180deg, color-mix(in oklab, var(--surface) 70%, var(--surface-1)), var(--surface-1));
}
.scrolly__steps { display: grid; gap: 18px; }
.step { opacity: .6; transform: translateY(12px) scale(.98); transition: opacity .35s ease, transform .35s ease; }
.step.is-active { opacity: 1; transform: translateY(0) scale(1); }

@media (max-width: 980px) {
  .scrolly { grid-template-columns: 1fr; }
  .scrolly__sticky { position: relative; height: 300px; top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .progress__bar { transition: none; }
  .pin__inner [data-animate], .step { transition: none; transform: none !important; opacity: 1 !important; }
}

/* Rebind animations to per-section --p (fallback to --hero-p for older markup) */
.pin__inner [data-animate="scale-fade"]{
  transform: scale(calc(1 + (1 - var(--p, var(--hero-p, 1))) * 0.15))
             translateY(calc((1 - var(--p, var(--hero-p, 1))) * -12px));
  opacity: calc(.6 + var(--p, var(--hero-p, 1)) * .4);
  transition: transform .06s linear, opacity .12s linear;
}
.pin__inner [data-animate="fade-up"]{
  transform: translateY(calc((1 - var(--p, var(--hero-p, 1))) * 24px));
  opacity: var(--p, var(--hero-p, 1));
  transition: transform .06s linear, opacity .12s linear;
}

/* Make the scrolly section long enough for the sticky preview to work */
.scrolly__steps { display: grid; gap: 28px; padding-bottom: 40vh; }
.step { min-height: 70vh; display: grid; align-content: center; }

/* Optional: make each pin a little longer so the effect is obvious */
.pin { height: 200vh; } /* was 180vh */

/* ===== Home add-ons (team, proof, trust) ===== */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin-top:12px}
.stat{padding:18px;border-radius:18px;background:linear-gradient(180deg,rgba(148,163,184,.06),rgba(15,23,42,.7));border:1px solid rgba(148,163,184,.18);text-align:center;box-shadow:0 18px 40px rgba(2,6,23,.35)}
.stat .num{font-size:2rem;font-weight:800;letter-spacing:.02em}
.stat .label{color:var(--muted);font-size:.9rem}

.home .pin__inner .container{max-width:900px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.home .stats{justify-items:center}
.home .team-grid{justify-content:center;text-align:center}
.home .team-grid .member{background:linear-gradient(180deg,rgba(148,163,184,.12),rgba(15,23,42,.78));border:1px solid rgba(148,163,184,.22)}
.home .trustbar{gap:12px}

.list{list-style:none;margin:0;padding:0;border-radius:16px;border:1px solid rgba(148,163,184,.2);background:linear-gradient(180deg,rgba(17,24,39,.92),rgba(11,18,32,.9));box-shadow:0 20px 50px rgba(2,6,23,.35);overflow:hidden;backdrop-filter:blur(6px)}
.list>.item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(30,41,59,.7);background:transparent;transition:background .25s ease,transform .18s ease}
.list>.item:last-child{border-bottom:0}
.list>.item:hover{background:rgba(30,41,59,.68);transform:translateY(-1px)}
.drag{width:22px;text-align:center;cursor:grab;user-select:none;color:var(--muted);transition:color .2s ease}
.drag:hover{color:var(--text)}
.sortable-chosen{background:rgba(30,41,59,.82)!important}

ol li{background:linear-gradient(180deg,rgba(15,23,42,.9),rgba(12,18,34,.9));border:1px solid rgba(148,163,184,.15)}
ol li:hover{border-color:rgba(148,163,184,.35)}

.plan-grid{display:flex;flex-wrap:wrap;gap:18px;margin:18px 0}
.plan-card{flex:1 1 220px;padding:18px;border-radius:18px;background:linear-gradient(180deg,rgba(148,163,184,.08),rgba(15,23,42,.72));border:1px solid rgba(148,163,184,.18);box-shadow:0 18px 36px rgba(2,6,23,.28)}
.plan-card__title{font-size:1.1rem;font-weight:700;margin-bottom:8px}
.plan-card p{margin:0;color:var(--muted)}

.payment-grid{display:grid;gap:18px;margin-top:12px}
@media (min-width: 720px){ .payment-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
.payment-card{padding:18px;border-radius:18px;background:linear-gradient(180deg,rgba(17,24,39,.92),rgba(11,18,32,.88));border:1px solid rgba(148,163,184,.16);box-shadow:0 14px 32px rgba(2,6,23,.28);display:grid;gap:12px}
.payment-card__title{font-weight:700;font-size:1.05rem}
.payment-card p{margin:0;color:var(--muted)}
.payment-iban{border:1px dashed rgba(148,163,184,.35);border-radius:12px;padding:12px;background:rgba(15,23,42,.6);display:grid;gap:4px}
.payment-iban__label{font-size:.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.payment-iban__value{font-family:"Courier New",monospace;font-size:.95rem;color:var(--text)}

.sticky-cta__inner{background:linear-gradient(180deg,rgba(15,23,42,.92),rgba(11,17,32,.9));border:1px solid rgba(148,163,184,.18);box-shadow:0 18px 40px rgba(2,6,23,.4)}

.home .cta .btn{min-width:170px;justify-content:center}
.home #devices .container,.home #security .container,.home #proof .container,.home #team .container,.home #cta .container{gap:18px}

.team-grid{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin-top:12px}
.team-grid .avatar{border-radius:18px;border:1px solid rgba(148,163,184,.24)}
.team-grid .role{color:var(--muted);margin-top:6px}

.member{padding:18px;border-radius:20px;background:linear-gradient(180deg,rgba(148,163,184,.08),rgba(15,23,42,.72));border:1px solid rgba(148,163,184,.18);display:grid;gap:10px;align-content:start;box-shadow:0 20px 45px rgba(2,6,23,.32)}
.avatar{width:64px;height:64px;border-radius:50%;background:#0b1220;border:1px solid rgba(148,163,184,.24);display:block;margin:0 auto}
.member .name{font-weight:700}
.member .role{color:var(--muted);font-size:.9rem}

.trustbar{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:12px;color:var(--muted)}
.trustbar .pill{border:1px solid rgba(148,163,184,.18);border-radius:999px;padding:6px 14px;background:linear-gradient(180deg,rgba(148,163,184,.08),rgba(15,23,42,.75));box-shadow:0 14px 30px rgba(2,6,23,.25)}

/* ===== Admin UI (non‑breaking additions) ===== */
/* Containers */
.admin-header{
  position: sticky; top: 0; z-index: 60;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  display: flex; align-items: center; gap: 10px;
}
.admin-container{ max-width: 1100px; margin: 24px auto; padding: 0 16px; }

/* Subtabs (segmented control) */
.subtabs{
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap;
  margin: 8px 0 18px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(2,6,23,.25);
}
.subtabs .btn{
  padding: 8px 14px;
  line-height: 1;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  position: relative;
  transition: color .2s ease, background-color .25s ease, transform .08s ease;
}
.subtabs .btn:hover{ color: var(--text); background: rgba(255,255,255,.02); }
.subtabs .btn:active{ transform: translateY(1px); }

/* Active tab look, scoped to subtabs to avoid global changes */
.subtabs .btn--primary{
  background: var(--primary-600);
  color: #04121a;
  box-shadow: 0 8px 22px rgba(16,185,129,.35), inset 0 1px 0 rgba(255,255,255,.08);
}
.subtabs .btn--ghost{ border-color: transparent; }

/* Generic sections used across admin views */
.section{ margin: 18px 0 24px; }
.section-title{ font-size: 1.35rem; margin: 0 0 12px; letter-spacing: .01em; }

/* Page wrappers */
.wrap{ max-width: 1100px; margin: 0 auto; padding: 24px 16px; }
.pagehead{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }

/* Auth layout */
.auth-main{ min-height: calc(100vh - 70px); display: grid; align-content: center; justify-items: center; padding: 24px 16px; }
.auth-card{ width: 100%; max-width: 420px; }
.form-help{ margin-top: 10px; text-align: right; }
.small{ font-size: .875rem; }
.center{ text-align: center; }
.footer{ margin: 24px 0; padding: 12px 16px; text-align: center; color: var(--muted); border-top: 1px solid var(--border); }

/* Tiny utilities */
.row{ display:flex; flex-wrap:wrap; gap: 10px; }
.gap-md{ gap: 12px; }
.mt16{ margin-top: 16px; }

/* ===== Home page refinements ===== */
/* Unified background so the gradient doesn't reset per section */
body.home{
  background:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(800px 400px at 110% 10%, color-mix(in oklab, var(--accent-700) 14%, transparent), transparent 65%),
    var(--surface-1);
  background-attachment: fixed, fixed, fixed;
}
/* Let pinned sections be transparent to reveal the unified background */
body.home .pin__inner{ background: transparent; }

/* Section 2 tweaks: make the supporting note feel intentional */
body.home #devices .lead{
  max-width: 56ch;
  margin-left: auto; margin-right: auto;
  color: color-mix(in oklab, var(--muted) 92%, var(--text));
}
body.home #devices .hero-media{
  height: clamp(260px, 34vw, 440px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

/* Sticky CTA shown near the end */
.sticky-cta{
  position: fixed; inset: auto 16px 16px 16px; z-index: 80;
  pointer-events: none; opacity: 0; transform: translateY(14px);
  transition: opacity .25s ease, transform .25s ease;
}
.sticky-cta__inner{
  display: flex; gap: 10px; justify-content: center; align-items: center;
  padding: 10px; border: 1px solid var(--border); border-radius: 12px;
  background: color-mix(in oklab, var(--surface) 85%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-lg);
}
.sticky-cta.show{ opacity: 1; transform: translateY(0); pointer-events: auto; }

@media (min-width: 720px){
  .sticky-cta{ inset: auto 20px 20px auto; }
  .sticky-cta__inner{ padding: 12px 14px; }
}

/* Lists for drag & drop */
.list{ list-style: none; margin: 0; padding: 0; border: 1px dashed var(--border); border-radius: 12px; background: var(--surface); }
.list > .item{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.list > .item:last-child{ border-bottom: 0; }
.list > .item:hover{ background: #0e152b; }
.drag{ width: 22px; text-align: center; cursor: grab; user-select: none; color: var(--muted); }
.drag:active{ cursor: grabbing; }
.sortable-chosen{ background: #0e152b !important; }
.sortable-ghost{ opacity: .5; }

/* Badges (variants) */
.badge + .badge{ margin-left: 6px; }
.badge--warn{ color: #fbbf24; border-color: #4b5563; }
.badge--ok{ color: var(--success); border-color: #374151; }
.badge--danger{ color: var(--danger); border-color: #374151; }

/* Forms */
.form-row{
  display: grid; grid-template-columns: 160px 1fr;
  gap: 10px 16px; align-items: center; margin-bottom: 12px;
}
.form-row .hint{ grid-column: 2 / 3; color: var(--muted); font-size: .85rem; }
.form-check{ display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }

/* Optional pretty switch for published toggle */
.form-switch{ display: inline-flex; align-items: center; gap: 10px; }
.form-switch input[type="checkbox"]{
  appearance: none; width: 42px; height: 24px; border-radius: 999px; position: relative;
  background: #1f2937; border: 1px solid var(--border); transition: background .2s ease, border-color .2s ease;
}
.form-switch input[type="checkbox"]::after{
  content:""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: #0b1220;
  box-shadow: 0 1px 2px rgba(0,0,0,.4); transition: transform .2s ease;
}
.form-switch input[type="checkbox"]:checked{
  background: var(--primary-600); border-color: var(--primary-600);
}
.form-switch input[type="checkbox"]:checked::after{ transform: translateX(18px); }

/* Buttons (variants) */
.btn--primary{ background: var(--primary-600); color: #04121a; }
.btn--primary:hover{ filter: brightness(1.1); }
.btn--danger{ background: var(--danger); color: #1b0b0b; }
.btn--ghost{ background: transparent; border: 1px solid var(--border); color: var(--text); }

/* Tables (optional for admin lists) */
.table{
  width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface);
}
.table th, .table td{ padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.table th{ background: #0e152b; color: var(--muted); font-weight: 700; }
.table tr:last-child td{ border-bottom: 0; }