/* ==========================================================================
   STARK_TUTOR — HUD Design System
   Alles, was in Tailwind-Klassenketten unleserlich würde: Glows, Clip-Paths,
   Grid-Hintergrund, Animationen.

   Lesbarkeitsregel für dieses Projekt: Orbitron nur für Labels, Titel und
   kurze Zahlen. Fließtext im Chat bleibt in einer normalen Sans — ein
   Lernwerkzeug, dessen Antworten man buchstabieren muss, hilft niemandem.
   ========================================================================== */

:root {
  --nacht:        #070B14;
  --nacht-2:      #0A0F1D;
  --panel:        rgba(12, 19, 36, 0.72);
  --panel-fest:   #0C1324;

  --cyan:         #00F0FF;
  --stark:        #0072FF;
  --arc:          #7000FF;
  --amber:        #FFB800;
  --danger:       #FF0055;

  --linie:        rgba(0, 240, 255, 0.30);
  --linie-schwach: rgba(0, 240, 255, 0.12);
  --text:         #C6D6EC;
  --text-schwach: #6B7F9E;

  --glow-cyan:    0 0 12px rgba(0, 240, 255, 0.35);
  --glow-arc:     0 0 14px rgba(112, 0, 255, 0.40);
  --glow-danger:  0 0 12px rgba(255, 0, 85, 0.45);
}

* { -webkit-tap-highlight-color: transparent; }

body {
  background-color: var(--nacht);
  color: var(--text);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* --- Cyber-Grid im Hintergrund ------------------------------------------ */
.cyber-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 240, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 35%, transparent 78%);
}

.cyber-grid::after {           /* Arc-Schimmer oben */
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 0%, rgba(0, 114, 255, 0.13), transparent 70%),
    radial-gradient(ellipse 50% 35% at 85% 5%, rgba(112, 0, 255, 0.11), transparent 70%);
}

/* --- Typografie ---------------------------------------------------------- */
.font-hud   { font-family: 'Orbitron', ui-sans-serif, system-ui, sans-serif; letter-spacing: .06em; }
.font-daten { font-family: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace; }

.hud-label {
  font-family: 'Orbitron', ui-sans-serif, sans-serif;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-schwach);
}

.text-glow      { text-shadow: 0 0 10px rgba(0, 240, 255, .55); }
.text-glow-arc  { text-shadow: 0 0 12px rgba(112, 0, 255, .6); }

/* --- Panels (Glassmorphism) --------------------------------------------- */
.panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--linie-schwach);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.panel-hell { border-color: var(--linie); box-shadow: inset 0 0 22px rgba(0, 240, 255, .04); }

/* Ecken-Winkel wie im HUD */
.ecken::before, .ecken::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid var(--cyan);
  opacity: .65;
  pointer-events: none;
}
.ecken::before { top: -1px;    left: -1px;  border-right: 0; border-bottom: 0; }
.ecken::after  { bottom: -1px; right: -1px; border-left: 0;  border-top: 0; }

/* --- Cyber-Buttons ------------------------------------------------------- */
.cyber-btn {
  position: relative;
  font-family: 'Orbitron', ui-sans-serif, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--linie);
  background: rgba(0, 240, 255, .05);
  color: var(--cyan);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  transition: background .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease;
}
.cyber-btn:hover:not(:disabled) {
  background: rgba(0, 240, 255, .14);
  box-shadow: var(--glow-cyan), inset 0 0 14px rgba(0, 240, 255, .12);
  color: #DFFCFF;
}
.cyber-btn:focus-visible { outline: 1px solid var(--cyan); outline-offset: 2px; }
.cyber-btn:disabled { opacity: .32; cursor: not-allowed; }

.cyber-btn.aktiv {
  background: rgba(0, 240, 255, .18);
  border-color: var(--cyan);
  box-shadow: var(--glow-cyan), inset 0 0 16px rgba(0, 240, 255, .14);
  color: #EAFEFF;
}

.cyber-btn.arc { border-color: rgba(112, 0, 255, .45); background: rgba(112, 0, 255, .08); color: #C9A6FF; }
.cyber-btn.arc:hover:not(:disabled) { background: rgba(112, 0, 255, .18); box-shadow: var(--glow-arc); color: #E7DAFF; }

.cyber-btn.amber { border-color: rgba(255, 184, 0, .45); background: rgba(255, 184, 0, .07); color: var(--amber); }
.cyber-btn.amber:hover:not(:disabled) { background: rgba(255, 184, 0, .16); box-shadow: 0 0 12px rgba(255,184,0,.35); }

/* --- Eingabefelder ------------------------------------------------------- */
.cyber-feld {
  background: rgba(3, 8, 18, .75);
  border: 1px solid var(--linie-schwach);
  color: var(--text);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.cyber-feld::placeholder { color: #4B5D79; }
.cyber-feld:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px rgba(0, 240, 255, .25), var(--glow-cyan);
}

/* --- Statuspunkte mit Puls ---------------------------------------------- */
.puls {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 999px;
  flex: none;
}
.puls::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  border: 1px solid currentColor;
  opacity: 0;
  animation: pulsring 2.2s ease-out infinite;
}
@keyframes pulsring {
  0%   { transform: scale(.6); opacity: .85; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { opacity: 0; }
}
.puls.ruht::after { animation: none; }

.status-ok      { background: var(--cyan);   color: var(--cyan);   box-shadow: 0 0 8px rgba(0,240,255,.7); }
.status-warn    { background: var(--amber);  color: var(--amber);  box-shadow: 0 0 8px rgba(255,184,0,.7); }
.status-fehler  { background: var(--danger); color: var(--danger); box-shadow: 0 0 8px rgba(255,0,85,.7); }
.status-leer    { background: #33445F;       color: #33445F; }

/* --- Dropzone mit laufender Randanimation -------------------------------- */
.dropzone {
  position: relative;
  border: 1px dashed rgba(0, 240, 255, .28);
  background: rgba(0, 240, 255, .022);
  transition: background .2s ease, border-color .2s ease;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--cyan); background: rgba(0, 240, 255, .06); }

.dropzone::before {                       /* umlaufender Lichtstreifen */
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1px;
  background: linear-gradient(115deg, transparent 20%, rgba(0,240,255,.85) 45%, rgba(112,0,255,.85) 55%, transparent 80%);
  background-size: 300% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.dropzone.scharf::before { opacity: 1; animation: randlauf 1.6s linear infinite; }
.dropzone.scharf { border-color: transparent; background: rgba(0, 240, 255, .09); }
@keyframes randlauf { from { background-position: 150% 0; } to { background-position: -150% 0; } }

/* --- Segment-Ladebalken der Lernphasen ---------------------------------- */
.segment {
  position: relative;
  height: 5px;
  flex: 1;
  background: rgba(0, 240, 255, .07);
  border: 1px solid var(--linie-schwach);
  overflow: hidden;
}
.segment > i {
  position: absolute;
  inset: 0;
  display: block;
  width: 0;
  background: linear-gradient(90deg, var(--stark), var(--cyan));
  box-shadow: 0 0 10px rgba(0, 240, 255, .55);
  transition: width .5s cubic-bezier(.22,.61,.36,1);
}
.segment.aktiv { border-color: var(--cyan); }
.segment.aktiv > i { animation: segmentpuls 1.9s ease-in-out infinite; }
@keyframes segmentpuls { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.45); } }

/* --- Retention-Balken (segmentiert) ------------------------------------- */
.retention {
  display: flex;
  gap: 2px;
  height: 8px;
}
.retention > span {
  flex: 1;
  background: rgba(0, 240, 255, .08);
  border: 1px solid transparent;
}
.retention > span.voll {
  background: linear-gradient(180deg, var(--cyan), var(--stark));
  box-shadow: 0 0 7px rgba(0, 240, 255, .5);
}
.retention.warn > span.voll { background: linear-gradient(180deg, var(--amber), #A66E00); box-shadow: 0 0 7px rgba(255,184,0,.5); }
.retention.kritisch > span.voll { background: linear-gradient(180deg, var(--danger), #8B0030); box-shadow: 0 0 7px rgba(255,0,85,.5); }

/* --- Arc Reactor -------------------------------------------------------- */
.arc-ring circle { transition: stroke-dashoffset 1s cubic-bezier(.22,.61,.36,1); }
.arc-kern { animation: arcatem 3.6s ease-in-out infinite; transform-origin: center; }
@keyframes arcatem {
  0%, 100% { opacity: .82; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.045); }
}

/* --- Chat --------------------------------------------------------------- */
.blase-tutor {
  background: linear-gradient(180deg, rgba(10,18,34,.9), rgba(8,14,28,.9));
  border: 1px solid var(--linie-schwach);
  border-left: 2px solid var(--cyan);
  box-shadow: -6px 0 18px -12px rgba(0, 240, 255, .8);
}
.blase-nutzer {
  background: linear-gradient(180deg, rgba(0, 114, 255, .16), rgba(0, 114, 255, .08));
  border: 1px solid rgba(0, 114, 255, .38);
  border-right: 2px solid var(--stark);
  color: #DCEBFF;
}

/* Markdown-Ausgabe */
.md p { margin: 0 0 .6rem; }
.md p:last-child { margin-bottom: 0; }
.md h1, .md h2, .md h3 {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: .04em;
  color: #EAFEFF;
  margin: .9rem 0 .45rem;
  line-height: 1.35;
}
.md h1 { font-size: 1.05rem; } .md h2 { font-size: 1rem; } .md h3 { font-size: .94rem; }
.md ul, .md ol { margin: 0 0 .6rem 1.25rem; }
.md ul { list-style: '▸  '; } .md ol { list-style: decimal; }
.md li { margin: .18rem 0; }
.md li::marker { color: var(--cyan); }
.md code {
  font-family: 'Fira Code', ui-monospace, monospace;
  background: rgba(0, 240, 255, .08);
  border: 1px solid var(--linie-schwach);
  padding: .05rem .32rem;
  font-size: .86em;
  color: #9FF3FF;
}
.md pre {
  position: relative;
  background: #04070F;
  border: 1px solid var(--linie-schwach);
  border-left: 2px solid rgba(112, 0, 255, .6);
  padding: .75rem .9rem;
  overflow-x: auto;
  margin: 0 0 .65rem;
  font-size: .82rem;
}
.md pre code { background: none; border: 0; padding: 0; color: #B9CBE6; }
.md blockquote {
  border-left: 2px solid rgba(255, 184, 0, .55);
  background: rgba(255, 184, 0, .04);
  padding: .4rem .75rem;
  color: #D8C79A;
  margin: 0 0 .6rem;
}
.md a { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; }
.md strong { color: #EAFEFF; font-weight: 600; }
.md hr { border: 0; border-top: 1px solid var(--linie-schwach); margin: .85rem 0; }

/* Syntax-Highlighting (eigene Token, kein Fremdcode auf LLM-Ausgabe) */
.tok-schluessel { color: #FF6EC7; }
.tok-text       { color: #7CE38B; }
.tok-zahl       { color: #FFB800; }
.tok-komm       { color: #4B6180; font-style: italic; }
.tok-funktion   { color: #00F0FF; }

/* --- Scrollbalken -------------------------------------------------------- */
.scroll-hud::-webkit-scrollbar { width: 7px; height: 7px; }
.scroll-hud::-webkit-scrollbar-thumb { background: rgba(0, 240, 255, .22); }
.scroll-hud::-webkit-scrollbar-thumb:hover { background: rgba(0, 240, 255, .4); }
.scroll-hud::-webkit-scrollbar-track { background: transparent; }

/* --- Baum ---------------------------------------------------------------- */
.baum-ebene { position: relative; }
.baum-ebene::before {
  content: '';
  position: absolute;
  left: .58rem; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--linie-schwach), transparent);
}
.baum-zeile.aktiv {
  background: linear-gradient(90deg, rgba(0, 240, 255, .14), transparent);
  border-left: 2px solid var(--cyan);
}
.baum-zeile.drop-ziel {
  outline: 1px dashed var(--cyan);
  outline-offset: -1px;
  background: rgba(0, 240, 255, .1);
}

/* --- Tipp-Anzeige -------------------------------------------------------- */
@keyframes tippen { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }
.tippt-punkt { animation: tippen 1.4s infinite; background: var(--cyan); }
.tippt-punkt:nth-child(2) { animation-delay: .18s; }
.tippt-punkt:nth-child(3) { animation-delay: .36s; }

/* --- Graph --------------------------------------------------------------- */
.graph-flaeche { touch-action: none; cursor: grab; display: block; }
.graph-flaeche.zieht { cursor: grabbing; }

/* --- Kurzmeldungen ------------------------------------------------------- */
.toast {
  border: 1px solid var(--linie);
  background: rgba(7, 12, 24, .94);
  backdrop-filter: blur(10px);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.toast.ok     { border-color: rgba(0, 240, 255, .5); box-shadow: var(--glow-cyan); }
.toast.fehler { border-color: rgba(255, 0, 85, .55); box-shadow: var(--glow-danger); color: #FFC2D4; }

/* --- Barrierefreiheit ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   VIEW 04 — RECOVERY_PROTOCOL
   ========================================================================== */

/* --- BRAC-Balken: drei Phasen über 90 Minuten ---------------------------- */
.brac-spur {
  position: relative;
  height: 26px;
  background: rgba(0, 240, 255, .05);
  border: 1px solid var(--linie-schwach);
  overflow: hidden;
}
.brac-spur > .brac-zone {
  position: absolute;
  top: 0; bottom: 0;
  border-right: 1px dashed rgba(0, 240, 255, .22);
}
.brac-spur > .brac-fuell {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 0;
  background: linear-gradient(90deg, rgba(0,114,255,.55), rgba(0,240,255,.55));
  box-shadow: 0 0 14px rgba(0, 240, 255, .45);
  transition: width .9s linear, background .6s ease;
}
.brac-spur.phase2 > .brac-fuell { background: linear-gradient(90deg, rgba(0,240,255,.5), rgba(255,184,0,.6)); }
.brac-spur.phase3 > .brac-fuell {
  background: linear-gradient(90deg, rgba(255,184,0,.55), rgba(255,0,85,.65));
  box-shadow: 0 0 16px rgba(255, 0, 85, .5);
}
.brac-spur > .brac-kopf {
  position: absolute;
  top: -2px; bottom: -2px;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 10px rgba(255,255,255,.9);
  transition: left .9s linear;
}
.brac-marke {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Fira Code', ui-monospace, monospace;
  font-size: 9px;
  color: rgba(198, 214, 236, .55);
  pointer-events: none;
}

/* --- Visual Anchor ------------------------------------------------------- */
.anker-punkt { animation: ankerAtem 4s ease-in-out infinite; transform-origin: center; }
@keyframes ankerAtem {
  0%, 100% { r: 7;  opacity: .95; }
  50%      { r: 11; opacity: 1; }
}
.anker-ring-1 { animation: ankerWelle 4s ease-out infinite; transform-origin: center; }
.anker-ring-2 { animation: ankerWelle 4s ease-out infinite 1.3s; transform-origin: center; }
.anker-ring-3 { animation: ankerWelle 4s ease-out infinite 2.6s; transform-origin: center; }
@keyframes ankerWelle {
  0%   { transform: scale(.35); opacity: .75; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* --- NSDR-Lockscreen ----------------------------------------------------- */
#nsdr-schirm {
  background: radial-gradient(ellipse at center, #05080F 0%, #01030699 60%, #000 100%);
  backdrop-filter: blur(6px) brightness(.35);
  -webkit-backdrop-filter: blur(6px) brightness(.35);
}
#nsdr-schirm .nsdr-warnung {
  border: 1px solid rgba(255, 0, 85, .35);
  background: rgba(255, 0, 85, .05);
  animation: nsdrGlimmen 6s ease-in-out infinite;
}
@keyframes nsdrGlimmen {
  0%, 100% { opacity: .55; }
  50%      { opacity: .9; }
}
#nsdr-schirm .nsdr-uhr { animation: nsdrGlimmen 6s ease-in-out infinite; }

/* --- Checkliste ---------------------------------------------------------- */
.check-zeile {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .7rem;
  border: 1px solid var(--linie-schwach);
  background: rgba(0, 240, 255, .02);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.check-zeile:hover { border-color: rgba(0, 240, 255, .3); background: rgba(0, 240, 255, .05); }
.check-kasten {
  flex: none;
  width: 15px; height: 15px;
  border: 1px solid var(--linie);
  display: grid;
  place-items: center;
  font-size: 10px;
  color: transparent;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.check-zeile.erledigt .check-kasten {
  background: var(--cyan);
  color: #04070F;
  box-shadow: var(--glow-cyan);
}
.check-zeile.erledigt .check-text { color: var(--text-schwach); text-decoration: line-through; }

/* --- Systemhinweise im Chat ---------------------------------------------- */
.blase-system {
  border: 1px solid rgba(255, 184, 0, .38);
  border-left: 2px solid var(--amber);
  background: rgba(255, 184, 0, .06);
  color: #E9D6A6;
}

/* ==========================================================================
   VIEW 05 — DRILL_MODE (Quiz)
   ========================================================================== */

/* --- Lektionsfortschritt ------------------------------------------------- */
.drill-fortschritt {
  height: 10px;
  background: rgba(0, 240, 255, .07);
  border: 1px solid var(--linie-schwach);
  overflow: hidden;
}
.drill-fortschritt > i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--stark), var(--cyan));
  box-shadow: 0 0 12px rgba(0, 240, 255, .55);
  transition: width .45s cubic-bezier(.22,.61,.36,1);
}

/* --- Herzen -------------------------------------------------------------- */
.herz { transition: opacity .3s ease, transform .3s ease; }
.herz.leer { opacity: .18; transform: scale(.85); }
@keyframes herzBruch {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(.85); }
}
.herz.bricht { animation: herzBruch .45s ease-out; }

/* --- Antwortkarten ------------------------------------------------------- */
.drill-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  padding: .85rem 1rem;
  text-align: left;
  border: 1px solid var(--linie-schwach);
  background: rgba(10, 18, 34, .6);
  color: var(--text);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .1s ease;
}
.drill-option:hover:not(:disabled) {
  border-color: var(--cyan);
  background: rgba(0, 240, 255, .08);
  box-shadow: var(--glow-cyan);
}
.drill-option:active:not(:disabled) { transform: translateY(1px); }
.drill-option:focus-visible { outline: 1px solid var(--cyan); outline-offset: 2px; }
.drill-option:disabled { cursor: default; }

.drill-taste {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border: 1px solid var(--linie);
  font-family: 'Fira Code', ui-monospace, monospace;
  font-size: 11px;
  color: var(--cyan);
}

.drill-option.richtig {
  border-color: var(--cyan);
  background: rgba(0, 240, 255, .14);
  box-shadow: var(--glow-cyan), inset 0 0 20px rgba(0, 240, 255, .1);
}
.drill-option.richtig .drill-taste { background: var(--cyan); color: #04070F; border-color: var(--cyan); }

.drill-option.falsch {
  border-color: var(--danger);
  background: rgba(255, 0, 85, .12);
  box-shadow: var(--glow-danger);
  animation: drillWackeln .35s ease-out;
}
.drill-option.falsch .drill-taste { background: var(--danger); color: #fff; border-color: var(--danger); }
@keyframes drillWackeln {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

.drill-option.verblasst { opacity: .38; }

/* --- Auswertungsleiste --------------------------------------------------- */
.drill-feedback {
  border-top: 1px solid var(--linie-schwach);
  animation: drillHoch .28s ease-out;
}
@keyframes drillHoch {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.drill-feedback.gut   { background: rgba(0, 240, 255, .07); border-top-color: rgba(0, 240, 255, .4); }
.drill-feedback.boese { background: rgba(255, 0, 85, .07);  border-top-color: rgba(255, 0, 85, .4); }

/* --- Ergebnisschirm ------------------------------------------------------ */
@keyframes drillRein {
  from { transform: scale(.94); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.drill-ergebnis { animation: drillRein .4s cubic-bezier(.22,.61,.36,1); }