/* xLearning — Admin Design-System (professionell, hell, ruhig) */
:root{
  --bg:#f4f6fb; --surface:#ffffff; --surface-2:#f8fafc;
  --text:#0f172a; --muted:#64748b; --line:#e6e8ee; --line-2:#eef1f6;
  --acc:#4f46e5; --acc-700:#4338ca; --acc-soft:#eef2ff;
  --ok:#16a34a; --ok-soft:#e9f7ee; --warn:#b45309; --warn-soft:#fef3e2; --danger:#dc2626; --danger-soft:#fde8e8;
  --radius:14px; --radius-sm:9px; --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
  --shadow-lg:0 10px 40px rgba(16,24,40,.12);
}
:root[data-theme="dark"]{
  --bg:#0d0f14; --surface:#161922; --surface-2:#1d212b;
  --text:#e7e9ee; --muted:#94a0b3; --line:#2a2f3b; --line-2:#222734;
  --acc:#6366f1; --acc-700:#7c83ff; --acc-soft:#20234a;
  --ok:#34d399; --ok-soft:#10271f; --warn:#fbbf24; --warn-soft:#2a2110; --danger:#f87171; --danger-soft:#2a1416;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35); --shadow-lg:0 12px 48px rgba(0,0,0,.55);
}
:root[data-theme="dark"] .topbar{ background:rgba(22,25,34,.85) }
:root[data-theme="dark"] .gate{ background:radial-gradient(1200px 600px at 50% -10%, #1a1f3a 0%, var(--bg) 55%) }
*{ box-sizing:border-box }
html,body{ height:100% }
body{ margin:0; background:var(--bg); color:var(--text);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; }
.muted,.mut{ color:var(--muted) } .ok{ color:var(--ok) } .warn{ color:var(--warn) }
.hide{ display:none!important } .sp{ flex:1 } small{ color:var(--muted) }
code{ background:var(--surface-2); border:1px solid var(--line); padding:1px 6px; border-radius:6px; font-size:.86em }
h1,h2,h3{ margin:0 }

/* ---- Brand ---- */
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px; color:var(--text) }
.brand .logo{ width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,var(--acc),#7c83ff);
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:15px; box-shadow:var(--shadow) }
.brand .sub{ color:var(--muted); font-weight:500; font-size:13px }

/* ---- Top bar ---- */
.topbar{ position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:14px;
  padding:12px 22px; background:rgba(255,255,255,.85); backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line) }
.userchip{ display:flex; align-items:center; gap:8px; padding:5px 10px 5px 5px; border:1px solid var(--line); border-radius:999px; background:var(--surface) }
.userchip .av{ width:26px; height:26px; border-radius:50%; background:var(--acc-soft); color:var(--acc-700); display:grid; place-items:center; font-weight:700; font-size:12px }
.userchip .email{ font-size:13px; color:var(--muted); max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.role-pill{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--acc-700); background:var(--acc-soft); padding:2px 8px; border-radius:999px }

/* ---- Layout ---- */
.container{ max-width:960px; margin:0 auto; padding:26px 22px 80px }
.page-head{ margin:6px 0 18px } .page-head h1{ font-size:22px; font-weight:700 } .page-head p{ margin:4px 0 0; color:var(--muted) }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin:16px 0; box-shadow:var(--shadow) }
.card > h2{ font-size:15px; font-weight:700; margin-bottom:4px } .card > .hint{ color:var(--muted); font-size:13px; margin:0 0 14px }
.section-sep{ height:1px; background:var(--line-2); margin:16px 0 }

/* ---- Forms ---- */
label.fld{ display:block; font-size:12px; font-weight:600; color:var(--muted); margin:0 0 5px }
input,select,textarea{ font:inherit; color:var(--text); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:9px 11px; outline:none; transition:border-color .15s,box-shadow .15s; width:100% }
input:focus,select:focus,textarea:focus{ border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-soft) }
textarea{ min-height:72px; resize:vertical }
.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center } .row > *{ flex:0 0 auto }
.row .grow{ flex:1 1 160px; min-width:120px }
.stack{ display:flex; flex-direction:column; gap:12px }

/* ---- Buttons ---- */
button{ font:inherit; cursor:pointer; border-radius:var(--radius-sm); border:1px solid transparent; padding:9px 14px; font-weight:600;
  background:var(--acc); color:#fff; transition:filter .15s,background .15s,border-color .15s; white-space:nowrap }
button:hover{ background:var(--acc-700) } button:disabled{ opacity:.5; cursor:default }
button.ghost{ background:var(--surface); color:var(--text); border-color:var(--line) } button.ghost:hover{ background:var(--surface-2) }
button.danger{ background:var(--danger-soft); color:var(--danger); border-color:transparent } button.danger:hover{ filter:brightness(.97) }
button.sm{ padding:5px 10px; font-size:13px } button.icon{ padding:6px 9px; line-height:1 }
.link{ background:none; border:none; color:var(--acc-700); padding:0; font-weight:600 } .link:hover{ background:none; text-decoration:underline }

/* ---- Tabs ---- */
.tabs{ display:flex; gap:4px; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:4px; width:max-content; max-width:100% }
.tabs button{ background:transparent; color:var(--muted); border:none; padding:7px 14px; border-radius:999px; font-size:14px }
.tabs button:hover{ color:var(--text); background:transparent }
.tabs button.on{ background:var(--surface); color:var(--text); box-shadow:var(--shadow) }

/* ---- Tables ---- */
table{ width:100%; border-collapse:collapse; margin-top:6px }
th,td{ text-align:left; padding:9px 10px; border-bottom:1px solid var(--line-2); font-size:14px; vertical-align:top }
th{ color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.3px }
tr:last-child td{ border-bottom:none }

/* ---- Badges ---- */
.badge{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--surface-2); color:var(--muted); border:1px solid var(--line) }
.badge.live{ background:var(--ok-soft); color:var(--ok); border-color:transparent }
.badge.draft{ background:var(--warn-soft); color:var(--warn); border-color:transparent }
.badge.type{ background:var(--acc-soft); color:var(--acc-700); border-color:transparent }

/* ---- Module-Karten ---- */
.mod{ border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin-top:12px; background:var(--surface); transition:box-shadow .15s }
.mod:hover{ box-shadow:var(--shadow) }
.mod .head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; row-gap:8px }
.mod .head h3{ font-size:15px; font-weight:650; flex:1 1 120px; min-width:0 }
.mod .head .acts{ display:flex; align-items:center; gap:6px; flex-wrap:nowrap; margin-left:auto }
.editor{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--line) }
.grid input{ width:100% }
.empty{ text-align:center; color:var(--muted); padding:30px 10px; border:1px dashed var(--line); border-radius:var(--radius); margin-top:12px }

/* ---- Auth-Gate (vorgeschaltet) ---- */
.gate{ position:fixed; inset:0; display:grid; place-items:center; padding:20px;
  background:radial-gradient(1200px 600px at 50% -10%, #eef2ff 0%, var(--bg) 55%) }
.gate-card{ width:100%; max-width:400px; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:30px 28px; box-shadow:var(--shadow-lg) }
.gate-card .brand{ justify-content:center; margin-bottom:6px } .gate-card .brand .logo{ width:38px; height:38px; font-size:18px }
.gate-card h1{ text-align:center; font-size:20px; font-weight:700; margin:14px 0 2px }
.gate-card .tag{ text-align:center; color:var(--muted); font-size:13px; margin-bottom:20px }
.gate-card .stack > button{ width:100% } .gate-card .alt{ text-align:center; margin-top:14px; font-size:13px; color:var(--muted) }

/* ---- Statusmeldung ---- */
.toast{ font-size:13px; min-height:18px; margin:0 0 4px } .toast.ok{ color:var(--ok) } .toast.warn{ color:var(--warn) }

@media(max-width:640px){ .container{ padding:18px 14px 64px } .topbar{ padding:10px 14px } .userchip .email{ max-width:120px } }