/* ============================================================
   PYTHAI Admin — "Oracle's Sanctum" (CSP-'self'-konform, self-hosted).
   Tokens aus dem PYTHAI Design System (colors/typography) inline gespiegelt.
   ============================================================ */

/* ---- Self-hosted Fonts (woff2, /fonts) ---- */
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/hanken-grotesk-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/hanken-grotesk-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/hanken-grotesk-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/hanken-grotesk-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2'); }

:root {
  --void:#08090C; --obsidian:#0E1014; --graphite:#15181E; --slate:#1D212A;
  --concrete:#2A2F39; --iron:#3A404C; --ash:#5A616E; --steel:#7C8492;
  --smoke:#9BA3B2; --mist:#C3C9D4; --bone:#E4DECE; --parchment:#F4F0E6;
  --oracle-deep:#8A6526; --oracle:#D4A94E; --oracle-bright:#F2CE7A; --oracle-pale:#F7E4B6;
  --oxblood:#7C2A38; --bull:#4FA578; --bear:#C4524C; --signal:#5B8FB8;
  --bg-input:#0B0D11;
  --text-primary:var(--parchment); --text-secondary:var(--smoke); --text-muted:var(--ash);
  --text-oracle:var(--oracle-bright); --text-on-gold:#1A1206;
  --border-subtle:var(--concrete); --border-strong:var(--iron); --border-oracle:rgba(212,169,78,0.40);
  --focus-ring:var(--oracle-bright);
  --glow-oracle:rgba(212,169,78,0.45); --glow-oracle-soft:rgba(242,206,122,0.16);

  --font-oracle:'Cormorant Garamond','Times New Roman',serif;
  --font-ui:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --tracking-wider:0.12em; --tracking-oracle:0.22em;
}

* { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0; background:var(--void); color:var(--text-primary);
  font-family:var(--font-ui); font-size:1rem; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
[hidden]{ display:none !important; }
a { color:var(--text-oracle); text-decoration:none; }
a:hover { color:var(--oracle-bright); }

/* ---- Shared primitives ---- */
.eyebrow { font-family:var(--font-mono); font-size:0.6875rem; font-weight:500;
  letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--text-oracle); }
.mono { font-family:var(--font-mono); }
.wordmark { font-family:var(--font-oracle); font-weight:500; letter-spacing:var(--tracking-oracle);
  color:var(--parchment); padding-left:var(--tracking-oracle); }

/* ============================================================
   AUTH — split screen (Sanctum-Zugang)
   ============================================================ */
.auth { min-height:100vh; display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); }
@media (max-width:820px){ .auth { grid-template-columns:1fr; } .auth__brand { display:none; } }

.auth__brand {
  position:relative; display:flex; flex-direction:column; justify-content:space-between;
  padding:56px 52px; overflow:hidden; background:var(--void);
  background-image:radial-gradient(120% 90% at 50% -10%, var(--glow-oracle-soft) 0%, transparent 55%);
  border-right:1px solid var(--border-subtle);
}
.auth__brand-lock { display:flex; align-items:center; gap:20px; }
.auth__brand-lock .wordmark { font-size:44px; }
.auth__brand-center { flex:1; display:flex; flex-direction:column; justify-content:center; gap:22px; max-width:420px; }
.auth__oracle-line { font-family:var(--font-oracle); font-weight:400; font-size:2rem; line-height:1.18;
  letter-spacing:-0.01em; color:var(--bone); }
.auth__brand-foot { font-family:var(--font-mono); font-size:0.6875rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--text-muted); }

.auth__panel { display:flex; align-items:center; justify-content:center; padding:40px 28px;
  background:var(--obsidian); }
.auth__card { width:100%; max-width:380px; }
.auth__card > .eyebrow { display:block; margin-bottom:10px; }
.auth__title { font-family:var(--font-oracle); font-weight:500; font-size:2.1rem; line-height:1.1;
  margin:0 0 6px; letter-spacing:-0.01em; }
.auth__sub { color:var(--text-secondary); font-size:0.9rem; margin:0 0 26px; }

.field { margin-bottom:16px; }
.field label { display:block; font-family:var(--font-mono); font-size:0.625rem; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--text-muted); margin-bottom:7px; }
.input {
  width:100%; padding:13px 14px; background:var(--bg-input); color:var(--text-primary);
  border:1px solid var(--border-strong); border-radius:8px; font-family:var(--font-ui); font-size:0.95rem;
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.input::placeholder { color:var(--ash); }
.input:focus { border-color:var(--border-oracle); box-shadow:0 0 0 3px var(--glow-oracle-soft); }

.btn {
  width:100%; padding:13px 18px; border:none; border-radius:8px; cursor:pointer;
  font-family:var(--font-ui); font-size:0.95rem; font-weight:600; letter-spacing:0.01em;
  transition:background .15s, transform .05s;
}
.btn--gold { background:var(--oracle); color:var(--text-on-gold); }
.btn--gold:hover { background:var(--oracle-bright); }
.btn--gold:active { transform:translateY(1px); }
.btn--gold:disabled { background:var(--iron); color:var(--ash); cursor:not-allowed; }
.btn--ghost { width:auto; background:transparent; color:var(--text-secondary); font-weight:500;
  padding:8px 0; font-size:0.85rem; }
.btn--ghost:hover { color:var(--text-oracle); }
.btn--inline { width:auto; }
.input--inline { max-width:280px; }

.auth__alt { margin-top:18px; display:flex; justify-content:space-between; align-items:center;
  font-size:0.82rem; color:var(--text-muted); }

.banner { padding:11px 14px; border-radius:8px; font-size:0.85rem; margin-bottom:18px;
  border:1px solid transparent; }
.banner--error { background:rgba(196,82,76,0.12); border-color:rgba(196,82,76,0.4); color:var(--bear); }
.banner--ok { background:rgba(79,165,120,0.12); border-color:rgba(79,165,120,0.4); color:var(--bull); }

/* ---- OTP (2FA) ---- */
.otp { display:flex; gap:10px; margin:4px 0 8px; }
.otp input {
  width:100%; aspect-ratio:1/1.15; text-align:center; font-family:var(--font-mono); font-size:1.4rem;
  color:var(--text-primary); background:var(--bg-input); border:1px solid var(--border-strong);
  border-radius:8px; outline:none; transition:border-color .15s, box-shadow .15s;
}
.otp input:focus { border-color:var(--border-oracle); box-shadow:0 0 0 3px var(--glow-oracle-soft); }
.otp--error input { border-color:rgba(196,82,76,0.55); }
.otp-meta { display:flex; align-items:center; gap:10px; color:var(--text-muted);
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; margin-bottom:20px; }
.otp-ring { width:26px; height:26px; transform:rotate(-90deg); }
.otp-ring circle { fill:none; stroke-width:2.5; }
.otp-ring .track { stroke:var(--border-strong); }
.otp-ring .prog { stroke:var(--oracle); transition:stroke-dashoffset 1s linear; }

/* ============================================================
   APP SHELL (nach Login)
   ============================================================ */
.shell { display:grid; grid-template-columns:248px 1fr; min-height:100vh; }
@media (max-width:720px){ .shell { grid-template-columns:1fr; } .shell__aside { display:none; } }

.shell__aside { background:var(--obsidian); border-right:1px solid var(--border-subtle);
  display:flex; flex-direction:column; padding:24px 18px; }
.shell__brand { display:flex; align-items:center; gap:12px; padding:6px 8px 22px; }
.shell__brand .wordmark { font-size:24px; }
.nav { display:flex; flex-direction:column; gap:3px; }
.nav a { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:8px;
  color:var(--text-secondary); font-size:0.9rem; font-weight:500; }
.nav a:hover { background:var(--graphite); color:var(--text-primary); }
.nav a.is-active { background:var(--graphite); color:var(--text-primary);
  box-shadow:inset 2px 0 0 var(--oracle); }
.nav a .ico { width:16px; height:16px; color:currentColor; opacity:0.8; }
.nav__spacer { flex:1; }
.chip { display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:10px;
  background:var(--graphite); border:1px solid var(--border-subtle); }
.chip__avatar { width:30px; height:30px; border-radius:50%; flex:none;
  background:linear-gradient(140deg,var(--oracle) 0%,var(--oxblood) 100%);
  display:flex; align-items:center; justify-content:center; color:var(--text-on-gold);
  font-family:var(--font-mono); font-weight:600; font-size:0.8rem; }
.chip__meta { min-width:0; }
.chip__name { font-size:0.82rem; color:var(--text-primary); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.chip__role { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text-muted); }

.shell__main { background:var(--void); min-width:0; }
.topbar { display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px; border-bottom:1px solid var(--border-subtle); }
.topbar__title { font-family:var(--font-oracle); font-weight:500; font-size:1.5rem; }
.topbar__clock { font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.1em;
  color:var(--text-muted); }
.content { padding:32px; max-width:960px; }

.card { background:var(--graphite); border:1px solid var(--border-subtle); border-radius:12px;
  padding:22px 24px; margin-bottom:20px; }
.card__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.card__title { font-family:var(--font-oracle); font-size:1.15rem; font-weight:600; margin:0; }

.kv { display:grid; grid-template-columns:140px 1fr; gap:8px 16px; font-size:0.9rem; }
.kv dt { font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-muted); align-self:center; }
.kv dd { margin:0; color:var(--text-primary); }

.table { width:100%; border-collapse:collapse; font-size:0.88rem; }
.table th { text-align:left; font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--text-muted); font-weight:500; padding:8px 12px;
  border-bottom:1px solid var(--border-subtle); }
.table td { padding:11px 12px; border-bottom:1px solid var(--border-subtle); color:var(--text-primary); }
.table tr:last-child td { border-bottom:none; }
.badge { font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase;
  padding:3px 8px; border-radius:20px; border:1px solid var(--border-strong); color:var(--text-secondary); }
.badge--ok { color:var(--bull); border-color:rgba(79,165,120,0.4); }
.badge--bad { color:var(--bear); border-color:rgba(196,82,76,0.4); }
.mono-sm { font-family:var(--font-mono); font-size:0.78rem; }
.table tr.clickable { cursor:pointer; }
.table tr.clickable:hover td { background:var(--graphite); }
.json { font-family:var(--font-mono); font-size:0.78rem; line-height:1.6; color:var(--mist);
  background:var(--bg-input); border:1px solid var(--border-subtle); border-radius:8px;
  padding:14px 16px; max-height:440px; overflow:auto; white-space:pre-wrap; word-break:break-word; margin:0; }

.codes { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:14px; }
.codes code { font-family:var(--font-mono); font-size:0.9rem; letter-spacing:0.06em; padding:9px 12px;
  background:var(--bg-input); border:1px solid var(--border-subtle); border-radius:7px; color:var(--oracle-pale); }
.muted { color:var(--text-muted); font-size:0.82rem; }
.mt { margin-top:16px; }
.row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

/* ---- UI v2 (09.07.2026): Kachel-Uebersicht + Invite-Tool ---- */
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; margin-bottom:22px; }
.tile { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:20px 22px;
  background:var(--graphite); border:1px solid var(--border-subtle); border-radius:12px;
  cursor:pointer; text-align:left; transition:border-color .15s ease, background .15s ease; }
.tile:hover { border-color:var(--border-oracle); background:var(--slate); }
.tile__num { font-family:var(--font-oracle); font-weight:500; font-size:2rem; line-height:1; color:var(--text-oracle); }
.tile__label { font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-secondary); }
.tile__sub { font-size:0.78rem; color:var(--text-muted); }
.seg { display:flex; gap:8px; margin:6px 0 2px; }
.seg button { flex:1; padding:10px 12px; border-radius:7px; border:1px solid var(--border-strong); background:transparent;
  color:var(--text-secondary); font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; }
.seg button.is-on { border-color:var(--border-oracle); background:rgba(212,169,78,0.10); color:var(--text-oracle); }
.img-preview { width:100%; max-width:300px; border-radius:8px; border:1px solid var(--border-subtle); margin-top:10px; display:block; }
.hint-gold { font-family:var(--font-mono); font-size:0.72rem; color:var(--text-oracle); margin:8px 0 0; }