/* Ysii-App – Farben aus der Referenzkarte: Hologramm-Blau, Licht-Cyan, Weiß, Violettblau */
:root {
  --bg: #050a18;
  --bg2: #0a1430;
  --panel: rgba(14, 28, 64, 0.72);
  --line: rgba(127, 184, 255, 0.22);
  --text: #e8f2ff;
  --muted: #8fa6cc;
  --holo: #7fb8ff;
  --cyan: #8ff0ff;
  --violet: #7b6cff;
  --mood: var(--holo);
  --level: 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(ellipse at 30% 20%, #10224d 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--text);
  overflow: hidden;
}
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button {
  background: linear-gradient(180deg, #2a5bd7, #1d3f9e);
  border: 1px solid rgba(143, 240, 255, 0.35);
  border-radius: 10px;
  padding: 10px 16px;
  cursor: pointer;
}
button:hover { filter: brightness(1.15); }
button.ghost { background: transparent; }
button.small { padding: 2px 8px; font-size: 0.85em; }
button.wide { width: 100%; margin-top: 12px; }
input, select, textarea {
  background: rgba(5, 10, 24, 0.7);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
.icon-btn { background: transparent; border: none; font-size: 1.4em; padding: 6px 10px; }

/* ---------- Hologramm ---------- */
.holo[data-mood="ruhig"] { --mood: #7fb8ff; }
.holo[data-mood="frech"] { --mood: #b38bff; }
.holo[data-mood="lieb"] { --mood: #ff9ad5; }
.holo[data-mood="nachdenklich"] { --mood: #8ff0ff; }
.holo[data-mood="alarm"] { --mood: #ff5a5a; }
.holo {
  position: relative;
  width: min(42vh, 380px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transition: --mood 0.6s;
}
.holo > canvas { position: absolute; inset: -14%; width: 128%; height: 128%; pointer-events: none; }   /* der Ring (das 3D-Gesicht liegt tiefer) */
.face {
  position: relative;
  width: var(--fw, 78%);   /* Ausschnitt je Porträt (app.js, avatarFrame) */
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  animation: flicker 7s steps(1) infinite;
  /* Bewegung kommt aus app.js (Kopf neigen, schweben, beim Sprechen nicken) */
  transform: perspective(700px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--sc, 1));
  will-change: transform;
  box-shadow: 0 0 calc(30px + 60px * var(--level)) color-mix(in srgb, var(--mood) 70%, transparent),
              inset 0 0 40px rgba(0, 0, 0, 0.5);
  -webkit-mask-image: radial-gradient(circle, #000 62%, transparent 72%);
          mask-image: radial-gradient(circle, #000 62%, transparent 72%);
}
/* freigestellter Avatar: Maske kommt inline aus app.js (das Bild selbst), Scan und Tönung bleiben nur auf der Figur */
.face.free { border-radius: 0; overflow: visible; box-shadow: none; -webkit-mask-size: cover; mask-size: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.face img, .face video.anim {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--fpos, 50% 50%); display: block;
  filter: saturate(0.85) brightness(calc(1 + 0.25 * var(--level))) contrast(1.05);
  opacity: 0.93;
  /* Parallaxe: Bild wandert leicht gegen die Kopfbewegung -> Tiefe; --fz/--fy: Zoom und Lage je Porträt */
  transform: scale(var(--fz, 1.08)) translate(var(--ix, 0px), calc(var(--iy, 0px) + var(--fy, 0%)));
}
/* Mimik-Clips (LivePortrait) liegen exakt über dem Standbild und werden nur beim Abspielen sichtbar */
.face video.anim { position: absolute; inset: 0; opacity: 0; transition: opacity 0.12s; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.face video.anim.on { opacity: 0.93; }
.face.glitch img, .face.glitch video.anim { filter: saturate(1.4) hue-rotate(-20deg) brightness(1.3); transform: scale(var(--fz, 1.08)) translate(calc(var(--ix, 0px) + 6px), calc(var(--iy, 0px) + var(--fy, 0%))) skewX(-4deg); }
.face.glitch::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 7px, color-mix(in srgb, var(--mood) 55%, transparent) 7px 9px);
  mix-blend-mode: screen;
}
.face .scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(143, 240, 255, 0.10) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
  animation: scan 9s linear infinite;
}
.face .tint {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 40%, transparent 30%, color-mix(in srgb, var(--mood) 45%, transparent) 100%);
  mix-blend-mode: screen;
  opacity: calc(0.55 + 0.4 * var(--level));
  transition: background 0.6s;
}
.platform {
  position: absolute; bottom: -6%; width: 70%; height: 12%;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--mood) 80%, transparent);
  box-shadow: 0 0 24px var(--mood), inset 0 0 24px color-mix(in srgb, var(--mood) 50%, transparent);
  opacity: 0.7;
}
/* 🧊 3D-Porträt (face3d.js): Canvas mit den vorgerechneten Kopfhaltungen statt Standbild, die Clips liegen weiter darüber */
.face canvas.face3d { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fpos, 50% 50%); display: none; opacity: 0.93;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  filter: saturate(0.85) brightness(calc(1 + 0.25 * var(--level))) contrast(1.05); transform: scale(var(--fz, 1.08)) translate(var(--ix, 0px), calc(var(--iy, 0px) + var(--fy, 0%))); }
.face.d3 canvas.face3d { display: block; }
.face.d3 img { visibility: hidden; }   /* sonst schimmert das starre Standbild durch die 7 % Transparenz */
.face.glitch canvas.face3d { filter: saturate(1.4) hue-rotate(-20deg) brightness(1.3); transform: scale(var(--fz, 1.08)) translate(calc(var(--ix, 0px) + 6px), calc(var(--iy, 0px) + var(--fy, 0%))) skewX(-4deg); }
.modal-panel.f3-ask { width: min(420px, 100%); gap: 10px; }
.f3-ask p { margin: 0; line-height: 1.5; }
.holo.thinking .face { animation: flicker 2s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .face { transform: none; } .face img { transform: scale(var(--fz, 1.08)) translateY(var(--fy, 0%)); } .face video.anim { display: none; } }
@keyframes flicker { 0%, 100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: 0.75; } 94% { opacity: 1; } 96% { opacity: 0.88; } 97% { opacity: 1; } }
@keyframes scan { from { background-position: 0 0; } to { background-position: 0 200px; } }

/* ---------- Login ---------- */
.screen { height: 100%; }
#login { display: grid; place-items: center; padding: 16px; }
.login-card {
  width: min(380px, 100%);
  padding: 28px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  text-align: center;
  backdrop-filter: blur(8px);
}
.login-card h1 { letter-spacing: 0.4em; margin: 18px 0 4px; font-weight: 300; }
.login-card .logo { display: block; margin: 0 auto; width: 180px; height: auto; }
.sub { color: var(--muted); margin: 0 0 20px; font-size: 0.9em; }
#loginForm { display: grid; gap: 10px; }
/* Auge im Passwortfeld: zeigt das Getippte (Wunsch DigC 28.10.) */
.pw-wrap { position: relative; }
.pw-wrap input { width: 100%; padding-right: 46px; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 38px; height: 38px; padding: 0; background: none; border: none; color: var(--muted); }
.pw-eye svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pw-eye[aria-pressed="true"] { color: var(--cyan); }
.pw-eye[aria-pressed="true"] .strike { display: none; }
.err { color: #ff8a8a; min-height: 1.2em; margin: 4px 0 0; }

/* ---------- App-Layout ---------- */
#app { display: grid; grid-template-columns: minmax(300px, 40%) 1fr; grid-template-rows: minmax(0, 1fr); }
.stage {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  border-right: 1px solid var(--line);
  background: radial-gradient(circle at 50% 45%, rgba(42, 91, 215, 0.18), transparent 60%);
}
/* Sternchen hinter dem Gesicht (Wunsch Nyria, Freigabe DigC 28.10.): wenige, ruhig funkelnd */
.stage { isolation: isolate; }
/* über dem Chat stapeln, sonst verschwindet die Stimmungs-Legende ⓘ am Handy hinter den Nachrichten (Nyria 29.10.) */
.stage { z-index: 3; }
.stars { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.stars i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #f4faff; box-shadow: 0 0 3px #fff, 0 0 8px #8ff0ff; opacity: 0.15; animation: twinkle var(--d) ease-in-out var(--w) infinite; }
/* Glitzer-Sterne: feiner Strahlenkranz, sichtbar mit dem Funkeln */
.stars i.glint::before, .stars i.glint::after { content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--s) * 8); height: 1px; background: linear-gradient(90deg, transparent, rgba(210, 248, 255, 0.95), transparent); transform: translate(-50%, -50%); }
.stars i.glint::after { transform: translate(-50%, -50%) rotate(90deg); }
/* winzige Hintergrundsterne: ohne Schein, langsam und schwach, geben dem Himmel Tiefe */
.stars i.far { background: #cfe4ff; box-shadow: none; animation-name: twinkle-far; }
@keyframes twinkle { 0%, 100% { opacity: 0.12; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.3); } }
@keyframes twinkle-far { 0%, 100% { opacity: 0.22; } 50% { opacity: 0.75; } }
@media (prefers-reduced-motion: reduce) { .stars i { animation: none; opacity: 0.45; } .stars i.far { opacity: 0.25; } }
/* 🔋 Akkusparmodus (akku.js): Sterne stehen still, nur die 31 hellen; kein Flackern und keine Scanlinien am Gesicht */
.akku .stars i { animation: none; opacity: 0.45; }
.akku .stars i:nth-child(n+32) { display: none; }
.akku .face, .akku .holo.thinking .face, .akku .face .scan { animation: none; }
/* verdeckt ein Modul das Hologramm (app.js setzt .covered), pausieren alle Dauer-Animationen dahinter */
.covered .stars i, .covered .face, .covered .face .scan { animation-play-state: paused; }
.akku-mark { display: none; font-size: 0.85em; opacity: 0.75; cursor: help; }
.akku .akku-mark { display: inline; }
#app.compact .stars i:nth-child(n+31) { display: none; }
/* Funkloch-Hinweis statt Anmeldeseite */
#offline { display: grid; place-items: center; padding: 16px; }
#offline .offline-big { font-size: 1.15em; margin: 14px 0 6px; }
#offline button { margin-top: 14px; width: 100%; }
.nameplate { text-align: center; }
.nameplate .title { letter-spacing: 0.5em; font-weight: 300; font-size: 1.4em; }
.state { color: var(--muted); font-size: 0.9em; margin-top: 4px; min-height: 1.2em; }
#gear { position: absolute; top: 12px; left: 12px; }
/* Anhang-Menü + Kamera */
.attach-menu { position: fixed; z-index: 30; display: grid; gap: 2px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); }
.attach-menu[hidden] { display: none; }
.attach-menu button { width: auto; text-align: left; padding: 8px 14px; background: none; border: none; border-radius: 8px; color: inherit; font-size: 1em; }
.attach-menu button:hover { background: rgba(127, 184, 255, 0.15); }
.cam-panel { gap: 10px; }
.cam-view { display: grid; place-items: center; background: #000; border-radius: 12px; overflow: hidden; min-height: 200px; }
.cam-view video, .cam-view canvas { width: 100%; max-height: 60vh; object-fit: contain; display: block; }
.cam-view [hidden] { display: none; }
.cam-btns { justify-content: center; }
.cam-btns [hidden] { display: none; }

/* Smileys + Reaktionen */
.composer #emojiBtn { width: 44px; padding: 0; }
/* deckend, damit der Chat nicht durchscheint */
.emoji-pop { position: fixed; z-index: 30; display: flex; flex-direction: column; width: min(320px, calc(100vw - 16px)); padding: 8px; background: #0b1630; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); }
.emoji-pop[hidden] { display: none; }
.emoji-pop .quick { flex: none; display: flex; justify-content: space-between; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.emoji-pop .grid { display: grid; grid-template-columns: repeat(8, 1fr); max-height: 180px; min-height: 0; overflow-y: auto; }
.emoji-pop button { background: none; border: none; width: auto; padding: 4px 0; font-size: 1.35em; line-height: 1.2; border-radius: 8px; cursor: pointer; }
.emoji-pop button:hover, .emoji-pop button:focus-visible { background: rgba(127, 184, 255, 0.15); }
.reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; white-space: normal; }
.reacts .react { width: auto; padding: 1px 8px; font-size: 0.9em; border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line); color: inherit; }
.reacts .react.mine { border-color: var(--holo); background: rgba(127, 184, 255, 0.18); }
.reacts .react.ysii:not(.mine) { border-color: var(--mc, var(--holo)); }
.msg .react-add { background: none; border: none; width: auto; padding: 0 4px; font-size: 0.95em; color: var(--muted); opacity: 0; transition: opacity 0.15s; }
.msg:hover .react-add, .msg .react-add:focus-visible { opacity: 1; }
@media (hover: none) { .msg .react-add { opacity: 0.6; } }

/* Farblegende */
.nameplate { position: relative; }
.info-btn { background: none; border: none; padding: 0 2px; width: auto; font-size: 0.6em; letter-spacing: 0; color: var(--muted); vertical-align: super; cursor: pointer; }
.info-btn:hover, .info-btn[aria-expanded=true] { color: var(--mood, var(--holo)); }
.mood-pop { position: absolute; z-index: 5; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 8px; width: max-content; max-width: min(280px, 80vw);
  padding: 10px 12px; background: #0b1632; border: 1px solid var(--line); border-radius: 12px; text-align: left; font-size: 0.85em; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); }   /* deckend, sonst funkeln die Sterne durch (Nyria) */
.mood-pop[hidden] { display: none; }
.mood-pop p { margin: 0 0 6px; color: var(--muted); }
.mood-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.mood-row.now { font-weight: 600; }
.mood-row small { color: var(--muted); font-weight: 400; }
.mood-row .sw { width: 14px; height: 14px; border-radius: 50%; flex: none; }

/* Lautstärke + Stumm auf dem Hauptscreen */
.vol { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; gap: 4px; }
.vol .icon-btn { padding: 6px 8px; }
.vol input[type=range] { width: 110px; accent-color: var(--holo); }
.vol input.off { opacity: 0.35; }

.chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; position: relative; }
.chat-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--line); color: var(--muted);
}
.chat-head .head-right { display: flex; align-items: center; gap: 6px; }
.chat-head .icon-btn { font-size: 1em; padding: 2px 6px; }
/* Modul-Menü ☰: Kacheln mit Icon und Namen */
.mod-wrap { position: relative; display: inline-flex; }
.mod-menu { position: fixed; z-index: 60;   /* top/right setzt app.js beim Öffnen, damit es auch am Handy nicht übersteht */ width: min(330px, calc(100vw - 24px)); display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 10px; font-size: 16px; background: #0b1632; border: 1px solid var(--line);   /* deckend (Nyria: Schrift schien durch) */ border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); }
.mod-menu[hidden] { display: none; }
.chat-head .mod-menu .icon-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 1.55em; padding: 10px 4px 8px;
  border-radius: 12px; background: rgba(127, 184, 255, 0.07); border: 1px solid transparent; color: var(--text, #e8f2ff); }
.chat-head .mod-menu .icon-btn:hover { border-color: var(--line); background: rgba(127, 184, 255, 0.14); }
.chat-head .mod-menu .icon-btn[hidden] { display: none; }
/* Bücherzelle: gut lesbare Leseansicht */
.bk-text { font-size: 1.08em; line-height: 1.65; max-width: 62ch; }
.bk-text p { margin: 0 0 12px; }
/* Blättern (DigC 30.10.): Pfeile oben und unten, Seitenzahl in der Mitte; Inhaltsverzeichnis auf der Titelseite.
   minmax(0, 1fr): der lange Buchtitel in der Leiste darf die Spalte nicht aufblähen (am Handy rutschte ▶ sonst aus dem Bild).
   touch-action: waagerechtes Wischen gehört dem Blättern, nicht der „Zurück“-Geste des Browsers; Scrollen und Zoomen bleiben. */
.bk-read { grid-template-columns: minmax(0, 1fr); touch-action: pan-y pinch-zoom; }
#bookView { overscroll-behavior-x: none; }
.bk-nav { display: flex; align-items: center; gap: 10px; }
.bk-nav button { min-width: 58px; padding: 7px 12px; font-size: 1.05em; }
.bk-nav button:disabled { opacity: 0.3; cursor: default; filter: none; }
.bk-pn { flex: 1; min-width: 0; text-align: center; color: var(--muted); font-size: 0.9em; line-height: 1.35; }
.bk-pn small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.8; }
.bk-img { display: block; width: 100%; height: auto; border-radius: 6px; background: #fff; }
.bk-toc { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.bk-toc button { width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; text-align: left; padding: 7px 12px; }
.bk-toc small { color: var(--muted); }
/* Einstellungen: Ysiis Gesicht wählen (Porträts, DigC 30.10.) */
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin: 6px 0; }
.pt-item { display: grid; gap: 4px; }
.pt { display: grid; justify-items: center; gap: 3px; padding: 8px 6px; background: transparent; border-color: var(--line); text-align: center; }
.pt:disabled { opacity: 0.55; cursor: default; }
.pt img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; background: #0a1430; }
.pt span { font-weight: 600; font-size: 0.9em; }
.pt small { color: var(--muted); font-size: 0.75em; }
.pt.on { border-color: var(--cyan); background: rgba(61, 224, 255, 0.08); }
.pt-add { display: grid; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
/* Einstellungen: Push-Arten einzeln abwählbar (Nyria/DigC 30.10.) */
.push-kinds { display: grid; gap: 2px; margin-top: 6px; }
.push-kinds .hint { margin: 0 0 4px; }
/* 🎵 DigCs Songs: Suno-Player oben (bleibt beim Scrollen stehen), darunter die Liste mit Cover, Stil, Länge und Wiedergaben */
.sg-player { position: sticky; top: 0; z-index: 2; background: #0b1632;   /* deckend: --panel ist halb durchsichtig, die Liste schimmerte durch */
  padding-bottom: 4px; box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.7); }
.sg-frame { overflow: hidden; border-radius: 12px; height: 180px; }
.sg-frame iframe { display: block; width: 100%; height: 180px; border: 0; transform-origin: 0 0; }
.sg-pick { margin: 0; padding: 16px; text-align: center; border: 1px dashed var(--line); border-radius: 12px; }
.sg-now { margin: 4px 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-count { margin-left: auto; align-self: center; }
.sg-list { display: grid; gap: 4px; }
.sg-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 6px 10px 6px 6px; background: transparent; border-color: transparent; }
.sg-row:hover { border-color: var(--line); }
.sg-row.on { border-color: var(--cyan); background: rgba(61, 224, 255, 0.08); }
.sg-row img, .sg-ph { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; display: grid; place-items: center; background: #0b1632; }
.sg-main { display: grid; min-width: 0; }
.sg-main b, .sg-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-main small, .sg-meta small { color: var(--muted); }
.sg-meta { display: grid; justify-items: end; font-size: 0.85em; }
.sg-e { font-size: 0.85em; opacity: 0.8; }
/* Mini-Player (DigC 30.10.: weiterlaufen lassen, Controls zeigen): dasselbe Fenster, nur geschrumpft auf den Suno-Player,
   unten rechts über der Eingabezeile (bottom setzt songs.js); der Chat bleibt bedienbar */
.sg-minibtns { display: none; }
#songModal.sg-mini { inset: auto 8px 84px auto; width: min(340px, calc(100% - 16px)); padding: 0; background: none; display: block; z-index: 15; pointer-events: none; }
#songModal.sg-mini .modal-panel { pointer-events: auto; width: 100%; height: auto; max-height: none; padding: 6px; gap: 0; background: #0b1632; border-radius: 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55); }
#songModal.sg-mini header, #songModal.sg-mini #songView > :not(#songPlayer), #songModal.sg-mini .sg-now { display: none; }
#songModal.sg-mini #songView { overflow: visible; padding: 0; }
#songModal.sg-mini .sg-player { position: static; padding: 0; box-shadow: none; }
#songModal.sg-mini .sg-minibtns { display: flex; gap: 6px; justify-content: flex-end; margin-top: 5px; }
body.sg-mini-on #msgs { padding-bottom: 170px; }   /* letzte Nachricht lässt sich über den Mini-Player scrollen */
/* Gemeinschaftsbuch: eingeklebte Seiten (Gedichte bleiben zeilengenau) */
.bk-page { padding: 4px 0 6px; }
.bk-page h4 { margin: 0 0 2px; font-size: 1.1em; }
.bk-poems.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .bk-poems.two { grid-template-columns: 1fr; } }
.bk-poem { white-space: pre-wrap; font-family: Lora, Georgia, 'Times New Roman', serif; font-size: 1.05em; line-height: 1.6; }
textarea.bk-poem { white-space: pre-wrap; }
.bk-why { font-style: italic; color: var(--muted); margin: 8px 0 2px; }
/* Portal-Arcade: Spiel im Vollbild-Rahmen */
.ar-hero { display: flex; gap: 14px; align-items: center; }
.ar-hero img { height: 120px; filter: drop-shadow(0 0 10px rgba(255, 90, 40, 0.6)) brightness(1.15); }
.ar-hero h3 { margin: 0 0 6px; }
.ar-board { margin: 4px 0 0; padding-left: 22px; }
.ar-board li { padding: 4px 0; border-bottom: 1px solid var(--line); }
.ar-board li span { float: right; color: var(--muted); }
.ar-board li.me b { color: #ffd36b; }
.arcade-full { position: fixed; inset: 0; z-index: 1000; background: #05060f; }
.arcade-full[hidden] { display: none; }
.arcade-full iframe { width: 100%; height: 100%; border: 0; display: block; }
.arcade-full #arcadeExit { position: absolute; top: calc(8px + env(safe-area-inset-top)); left: 8px; z-index: 2; background: rgba(20, 30, 70, 0.6); }
/* Technik-Deck */
.dv-photo { display: flex; flex-direction: column; gap: 6px; }
.dv-prev { max-width: 100%; max-height: 240px; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); }
.dv-sum ul { margin: 4px 0 8px 18px; padding: 0; }
.dv-sum p { margin: 0 0 8px; }
/* Archiv-Deck */
.ar-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 10px; }
.ar-tools input[type=search] { flex: 1 1 220px; min-width: 0; }
.ar-tools select { flex: 0 1 220px; min-width: 0; }
.ar-list { display: flex; flex-direction: column; gap: 6px; }
.ar-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: rgba(5, 10, 24, 0.5); color: inherit; }
.ar-ic { font-size: 22px; flex: none; }
.ar-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ar-main b, .ar-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-main small, .ar-side small { color: var(--muted); }
.ar-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.ar-frist { font-size: 12px; padding: 1px 7px; border-radius: 8px; background: rgba(255, 190, 60, 0.18); color: #ffd27a; white-space: nowrap; }
.ar-frist.late { background: rgba(255, 80, 80, 0.2); color: #ff9a9a; }
.ar-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 8px 0; }
.ar-dl dt { color: var(--muted); }
.ar-dl dd { margin: 0; overflow-wrap: anywhere; }
.ar-q { padding: 8px 12px; border-radius: 10px; background: rgba(255, 190, 60, 0.14); }
.ar-files { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.ar-files img { width: 110px; height: 150px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.ar-chip { font-size: 13px; padding: 3px 9px; border-radius: 8px; border: 1px solid var(--line); }
@media (max-width: 560px) { .ar-dl { grid-template-columns: 1fr; } .ar-dl dd { margin-bottom: 6px; } }
a.btn-link { display: inline-block; padding: 8px 14px; border-radius: 10px; background: var(--holo, #3d7bff); color: #fff; text-decoration: none; }
.mod-lbl { font-size: 11px; line-height: 1.2; text-align: center; color: var(--muted); }
/* Sternenpiano: freies Spiel, Aufnahme läuft */
button.rec-on { background: #b3263b; border-color: #ff5a5a; color: #fff; }
/* Sternengitarre (Auftrag DigC 29.10.) */
.modal-panel.guitar-panel { width: min(1000px, 100%); height: min(88vh, 100%); gap: 10px; }
.guitar-panel header h2 { margin: 0; font-size: 1.15em; }
/* flex statt grid: im engen Handy-Layout dürfen die Abschnitte nicht unter ihre Texthöhe gestaucht werden */
.guitar-view { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overflow-x: clip; min-height: 0; padding-right: 4px; }
.guitar-view > * { min-width: 0; flex: none; }
.guitar-view h3 { margin: 0; color: var(--cyan); font-size: 1em; }
.gsrc { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(5, 10, 24, 0.5); }
.gsrc .btns { flex-wrap: wrap; }
.gsrc .hint { margin: 0; }
.glevel { height: 6px; border-radius: 3px; background: rgba(127, 184, 255, 0.15); overflow: hidden; }
.glevel.big { height: 18px; border-radius: 9px; }
.glevel i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4dffa6, #8ff0ff 60%, #ff5ad1); transition: width 0.08s linear; }
.gtiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.gtile { padding: 16px 10px; font-size: 1em; text-align: center; }
.gcard { display: grid; justify-items: center; gap: 4px; }
.gchord { color: #cfe3ff; }
.gchordbox { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.gfb { min-height: 1.4em; margin: 0; font-weight: 700; }
.gfb.ok { color: #4dffa6; }
.gfb.bad { color: #ff9a9a; }
.gstrings { flex-wrap: wrap; }
.gtuner { display: grid; justify-items: center; gap: 10px; padding: 16px 0; }
.gnote { font-size: 64px; font-weight: 800; color: #cfe3ff; line-height: 1; }
.gnote.ok { color: #4dffa6; text-shadow: 0 0 18px rgba(77, 255, 166, 0.6); }
.gneedle { position: relative; width: min(420px, 100%); height: 26px; border-radius: 13px; background: linear-gradient(90deg, rgba(255, 90, 90, 0.35), rgba(77, 255, 166, 0.35) 45% 55%, rgba(255, 90, 90, 0.35)); }
.gneedle .gmid { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; background: #fff; opacity: 0.6; }
.gneedle i { position: absolute; left: 50%; top: -6px; width: 6px; height: 38px; margin-left: -3px; border-radius: 3px; background: #ffd36b; transition: left 0.1s linear; }
.gneedle i.ok { background: #4dffa6; }
.gstage { position: relative; height: min(52vh, 420px); border: 1px solid var(--line); border-radius: 12px; background: rgba(3, 6, 16, 0.6); overflow: hidden; }
.gstage canvas { width: 100%; height: 100%; display: block; }
.gpair { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; }
.gpair > div, .gprog > div { padding: 6px; border: 2px solid transparent; border-radius: 12px; opacity: 0.55; transition: all 0.15s; }
.gpair > div.on, .gprog > div.on { border-color: #8ff0ff; opacity: 1; box-shadow: 0 0 16px rgba(143, 240, 255, 0.35); }
.gpair .gbig { display: grid; justify-items: center; opacity: 1; border: 0; }
.gpair .gbig b { font-size: 1.6em; color: #ffd36b; }
.gprog { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.gsend { display: grid; justify-items: center; gap: 12px; text-align: center; }
/* Bass (DigC 29.10.) */
.ginst { flex-wrap: wrap; }
.gtips { margin: 0; padding: 8px 10px; border-left: 3px solid #ff5ad1; background: rgba(255, 90, 209, 0.06); border-radius: 8px; }
.gmeter { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 0.8em; color: var(--muted); }
.gm-bar { position: relative; height: 34px; border-radius: 10px; background: rgba(127, 184, 255, 0.08); overflow: hidden; }
.gm-bar .gm-ok { position: absolute; left: 36.7%; width: 26.6%; top: 0; bottom: 0; background: rgba(77, 255, 166, 0.12); }
.gm-bar .gm-mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: #fff; opacity: 0.6; }
.gm-bar i { position: absolute; top: 25%; width: 8px; height: 50%; margin-left: -4px; border-radius: 4px; background: #ff9a9a; opacity: 0.85; }
.gm-bar i.ok { background: #4dffa6; }
.gm-bar i.mid { background: #ffd36b; }
.gbeat { margin: 0; font-size: 1.2em; letter-spacing: 2px; color: #ffd36b; min-height: 1.4em; }
.gfind { display: grid; justify-items: center; gap: 4px; padding: 14px 0; }
.gfind b { font-size: 72px; line-height: 1; color: #8ff0ff; text-shadow: 0 0 18px rgba(143, 240, 255, 0.5); }
.groot { display: grid; justify-items: center; gap: 2px; min-width: 96px; padding: 10px; }
.groot b { font-size: 1.6em; color: #cfe3ff; }
.gsend .glevel { width: 100%; }
/* Kombüse / Rezeptbuch (Wunsch Maschunya, Freigabe DigC 29.10.) */
.modal-panel.recipe-panel { width: min(820px, 100%); height: min(88vh, 100%); gap: 10px; }
.recipe-panel header h2 { margin: 0; font-size: 1.15em; }
.recipe-view { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overflow-x: clip; min-height: 0; padding-right: 4px; }
.recipe-view > * { min-width: 0; flex: none; }
.rc-tags { flex-wrap: wrap; }
.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.rc-card { display: grid; gap: 4px; padding: 0 0 10px; overflow: hidden; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: rgba(5, 10, 24, 0.5); color: inherit; }
.rc-card img, .rc-card .rc-ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: grid; place-items: center; font-size: 42px; background: rgba(127, 184, 255, 0.06); }
.rc-card b, .rc-card small { padding: 0 10px; overflow-wrap: anywhere; }
.rc-card small { color: var(--muted); font-size: 0.78em; }
.rc-view { display: grid; gap: 8px; }
.rc-view h3 { margin: 0; color: var(--cyan); font-size: 1.2em; }
.rc-view h4 { margin: 6px 0 0; font-size: 0.95em; color: #ffd36b; }
.rc-hero { width: 100%; max-height: 260px; object-fit: cover; border-radius: 12px; }
.rc-port { display: flex; align-items: center; gap: 10px; }
.rc-port b { font-size: 1.3em; min-width: 1.5em; text-align: center; }
.rc-ing, .rc-steps { margin: 0; padding-left: 1.4em; display: grid; gap: 4px; overflow-wrap: anywhere; }
.rc-note { margin: 0; white-space: pre-wrap; color: var(--muted); }
.rc-cook { font-size: 1.15em; }
.rc-check li { cursor: pointer; padding: 4px 0; }
.rc-check li.done { text-decoration: line-through; opacity: 0.45; }
.rc-nutr { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(77, 255, 166, 0.05); }
.rc-nrow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.rc-tap { cursor: pointer; }
.rc-miss { color: #ffd36b; }
/* Neuigkeiten (DigC 29.10.) */
.modal-panel.news-panel { width: min(720px, 100%); height: min(88vh, 100%); gap: 10px; }
.news-panel header h2 { margin: 0; font-size: 1.15em; }
.news-item { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(5, 10, 24, 0.5); }
.news-item.fresh { border-color: #8ff0ff; box-shadow: 0 0 14px rgba(143, 240, 255, 0.2); }
.news-item header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-bottom: 6px; }
.news-item header small { margin-left: auto; color: var(--muted); font-size: 0.8em; }
.news-new { font-size: 0.7em; padding: 1px 7px; border-radius: 9px; background: #ff5ad1; color: #fff; font-weight: 700; text-transform: uppercase; }
.news-text { font-size: 0.92em; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.news-text p { margin: 0.4em 0; }
/* Kopfleiste: mit vielen Modulen auf dem Handy etwas enger */
@media (max-width: 600px) { .chat-head .head-right { gap: 2px; } .chat-head .icon-btn { padding: 2px 3px; font-size: 0.95em; } }
/* Fit & Ernährung (Auftrag DigC 29.10.) */
.modal-panel.fit-panel { width: min(860px, 100%); height: min(90vh, 100%); gap: 10px; }
.fit-panel header h2 { margin: 0; font-size: 1.15em; }
.fit-tabs { flex-wrap: wrap; }
.fit-day { display: flex; align-items: center; justify-content: center; gap: 12px; }
.fit-sum { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(5, 10, 24, 0.5); }
.fit-big { display: grid; place-items: center; width: 118px; height: 118px; border-radius: 50%; border: 6px solid #4dffa6; box-shadow: 0 0 18px rgba(77, 255, 166, 0.3); flex: none; text-align: center; }
.fit-big.over { border-color: #ff9a9a; box-shadow: 0 0 18px rgba(255, 90, 90, 0.3); }
.fit-big b { font-size: 1.8em; line-height: 1; }
.fit-big small { color: var(--muted); font-size: 0.75em; }
.fit-sumtxt { flex: 1 1 260px; display: grid; gap: 6px; min-width: 0; }
.fit-bar { height: 8px; border-radius: 4px; background: rgba(127, 184, 255, 0.12); overflow: hidden; }
.fit-bar i { display: block; height: 100%; background: linear-gradient(90deg, #4dffa6, #8ff0ff); }
.fit-bar.over i { background: #ff9a9a; }
.fit-macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font-size: 0.82em; color: var(--muted); }
.fit-macros b { color: #cfe3ff; }
.fit-meal { padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; }
.fit-mh { display: flex; align-items: center; gap: 8px; }
.fit-mh span { margin-left: auto; color: var(--muted); font-size: 0.85em; }
.fit-entry { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid rgba(127, 184, 255, 0.08); font-size: 0.9em; }
.fit-entry span:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.fit-entry small { color: var(--muted); }
.fit-res { display: grid; gap: 4px; max-height: 46vh; overflow-y: auto; }
.fit-res h4 { margin: 6px 0 2px; font-size: 0.85em; color: #ffd36b; }
.fit-hit { display: grid; gap: 2px; text-align: left; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(5, 10, 24, 0.5); color: inherit; }
.fit-hit small { color: var(--muted); }
.fit-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #8ff0ff; border-radius: 10px; margin-top: 6px; }
.fit-pick input { max-width: 90px; }
.fit-vid { width: 100%; max-height: 260px; border-radius: 10px; background: #000; }
.fit-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 170px; align-items: end; }
.fit-wd { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; }
.fit-wd i { width: 70%; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #8ff0ff, #4d7cff); min-height: 2px; }
.fit-wd i.over { background: linear-gradient(180deg, #ff9a9a, #b3263b); }
.fit-wd s { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed #ffd36b; }
.fit-wd .n, .fit-wd small { font-size: 0.7em; color: var(--muted); }
.fit-chart { width: 100%; height: 160px; }
.fit-goal b { font-size: 1.4em; color: #4dffa6; }
.fit-actf { flex-wrap: wrap; }
.fit-actf input[type=number] { max-width: 100px; }
.fit-player { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 10px 0; }
.fit-player .fit-bar { width: 100%; }
.fit-clock { font-size: 88px; font-weight: 800; line-height: 1; color: #8ff0ff; text-shadow: 0 0 22px rgba(143, 240, 255, 0.5); }
.fit-clock.rest, .fit-clock.ready { color: #ffd36b; text-shadow: 0 0 22px rgba(255, 211, 107, 0.4); }
.fit-ex { font-size: 1.5em; }
/* Tagebuch (Vorschlag Nyria, Freigabe DigC 01.11.); Karten und Panel vom Zyklus-Kalender */
.dy-bar { align-items: center; }
.dy-bar select { padding: 4px 8px; max-width: 100%; }
.dy-msg { color: #4dffa6; font-size: 0.85em; }
.dy-day { display: grid; gap: 8px; }
.dy-day h3 { margin: 6px 0 0; font-size: 0.95em; color: #ffc2d8; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.dy-moods { font-size: 1.1em; letter-spacing: 2px; }
.modal-panel .dy-entry header { display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
.dy-mood { font-size: 1.4em; line-height: 1; }
.dy-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.dy-text p { margin: 0 0 6px; }
.dy-entry footer { display: flex; align-items: center; gap: 8px; }
.dy-entry footer small { color: var(--muted); }
.dy-entry footer .btns { margin-left: auto; }
.dy-entry footer button { padding: 2px 8px; }
.dy-moodpick button { font-size: 1.25em; padding: 4px 8px; }
.dy-moodpick button.on { background: rgba(255, 122, 168, 0.35); border-color: #ff7aa8; }
.dy-edit textarea { width: 100%; min-height: 180px; resize: vertical; font: inherit; }
.dy-foot { justify-content: space-between; align-items: center; }
/* Filter Privat / Board / Log + Zeitraum */
.dy-filter button, .dy-range button { padding: 4px 10px; }
.dy-filter button.on, .dy-range button.on { background: rgba(255, 122, 168, 0.35); border-color: #ff7aa8; }
.dy-range { align-items: center; font-size: 0.9em; }
.dy-range label { display: inline-flex; align-items: center; gap: 4px; }
.dy-range input[type=date] { padding: 3px 6px; max-width: 150px; }
.dy-img { display: block; }
.dy-img img { display: block; width: 100%; max-width: 560px; height: auto; border-radius: 10px; margin: 2px auto 6px; }
.dy-board { border-left: 3px solid #7ad7ff; background: rgba(122, 215, 255, 0.06); }
.dy-log { border: 1px dashed rgba(255, 255, 255, 0.18); border-radius: 10px; padding: 6px 10px; font-size: 0.88em; }
.dy-log summary { cursor: pointer; color: var(--muted); }
.dy-log ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; }
.dy-log li { display: flex; gap: 8px; align-items: baseline; overflow-wrap: anywhere; }
.dy-log time { min-width: 3.2em; color: var(--muted); font-variant-numeric: tabular-nums; }
.dy-re { color: var(--muted); }
/* Offene Fragen (asks.js) */
#askBtn { position: relative; }
.ak-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #ff4f8b; color: #fff; font-size: 10px; line-height: 16px; text-align: center; font-weight: 700; }
.ak-list { display: grid; gap: 8px; }
.ak-group { display: grid; gap: 6px; }
.ak-group h3 { margin: 6px 0 0; font-size: 0.95em; color: #ffc2d8; }
.cy-card.ak-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; text-align: left; width: 100%; cursor: pointer; font: inherit; color: inherit; }
.ak-item b { flex: 1 1 60%; overflow-wrap: anywhere; }
.ak-item small { color: var(--muted); width: 100%; }
.ak-item.unseen { border-color: #ff7aa8; }
.ak-new { background: #ff4f8b; color: #fff; border-radius: 6px; padding: 0 5px; font-size: 0.75em; }
.ak-chip { font-size: 0.78em; border-radius: 8px; padding: 1px 7px; background: rgba(255, 255, 255, 0.08); white-space: nowrap; }
.ak-offen { background: rgba(255, 200, 60, 0.18); }
.ak-beantwortet { background: rgba(77, 255, 166, 0.16); }
.ak-erledigt { background: rgba(160, 160, 160, 0.18); }
.ak-thread { display: grid; gap: 8px; margin: 8px 0; }
.ak-msg { max-width: 88%; padding: 8px 11px; border-radius: 14px; background: rgba(122, 215, 255, 0.10); overflow-wrap: anywhere; }
.ak-msg.me { justify-self: end; background: rgba(255, 122, 168, 0.16); }
.ak-msg small { display: block; color: var(--muted); margin-bottom: 3px; }
.ak-msg p { margin: 0 0 4px; }
.ak-q { border: 1px solid rgba(255, 255, 255, 0.15); }
.ak-ed { padding: 0 4px; font-size: 0.85em; }
.ak-optlist { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ak-optlist span { border: 1px dashed rgba(255, 255, 255, 0.3); border-radius: 8px; padding: 1px 7px; font-size: 0.85em; }
.ak-quick { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 6px 0; }
.ak-quick button { padding: 3px 9px; font-size: 0.88em; }
.ak-sug { border-color: #ffd36e; }
#akText, .ak-edit textarea { width: 100%; resize: vertical; font: inherit; box-sizing: border-box; }
.ak-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; }
.ak-edit label { display: grid; gap: 3px; }
/* Zyklus-Kalender (Vorschlag Maschunya, Freigabe DigC 29.10.) */
.modal-panel.cycle-panel { width: min(640px, 100%); height: min(92vh, 100%); gap: 10px; }
.cycle-panel header h2 { margin: 0; font-size: 1.15em; }
.cy-card { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(5, 10, 24, 0.5); }
.cy-card h3 { margin: 0; font-size: 1em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cy-card h3 small { color: var(--muted); font-weight: 400; }
.cy-card h3 .cy-msg { margin-left: auto; color: #4dffa6; }
.cy-card label { display: grid; gap: 4px; }
.cy-card label.row { display: flex; align-items: center; gap: 8px; }
.cy-sum { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(5, 10, 24, 0.5); }
.cy-big { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; border: 5px solid #ff7aa8; box-shadow: 0 0 18px rgba(255, 122, 168, 0.3); flex: none; text-align: center; }
.cy-big b { font-size: 2em; line-height: 1; }
.cy-big small { color: var(--muted); font-size: 0.68em; }
.cy-sum.ph-fertile .cy-big, .cy-sum.ph-ovulation .cy-big { border-color: #4dffc3; box-shadow: 0 0 18px rgba(77, 255, 195, 0.3); }
.cy-sum.ph-follicular .cy-big, .cy-sum.ph-luteal .cy-big { border-color: #b59cff; box-shadow: 0 0 18px rgba(181, 156, 255, 0.25); }
.cy-sum.ph-late .cy-big { border-color: #ffd36b; }
.cy-sumtxt { flex: 1 1 auto; display: grid; gap: 4px; min-width: 0; font-size: 0.92em; }
.cy-sumtxt small { color: var(--muted); }
.cy-sumtxt .hint { margin: 2px 0 0; }
.cy-phase { font-weight: 700; color: #ffc2d8; }
.cy-late { color: #ffd36b; }
.cy-ok { color: #4dffc3; }
.cy-warn { margin: 0; padding: 8px 10px; border: 1px solid rgba(255, 211, 107, 0.5); border-radius: 10px; color: #ffe2a0; font-size: 0.88em; }
.cy-quick { align-items: center; flex-wrap: wrap; }
.cy-quick button.on { background: #ff5a8a; border-color: #ff5a8a; }
.cy-mhead { display: flex; align-items: center; justify-content: center; gap: 12px; text-transform: capitalize; }
.cy-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; width: 100%; max-width: 420px; margin: 0 auto; }
.cy-legend { justify-content: center; }
.cy-wd { text-align: center; font-size: 0.75em; color: var(--muted); }
.cy-d { position: relative; aspect-ratio: 1; min-height: 34px; padding: 0; border-radius: 50%; border: 2px solid transparent; background: rgba(127, 184, 255, 0.06); color: inherit; font-size: 0.9em; cursor: pointer; }
.cy-d.fut { color: #b9c7e2; }
.cy-d.fe { background: rgba(77, 255, 195, 0.22); }
.cy-d.pp { border: 2px dashed #ff7aa8; }
.cy-d.f1 { background: rgba(255, 122, 168, 0.25); }
.cy-d.f2 { background: rgba(255, 90, 138, 0.5); }
.cy-d.f3 { background: rgba(255, 70, 120, 0.75); color: #fff; }
.cy-d.f4 { background: #e0245e; color: #fff; }
.cy-d.ov::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #ffd36b; pointer-events: none; }
.cy-d.today { font-weight: 800; box-shadow: 0 0 0 2px #8ff0ff; }
.cy-d.sel { outline: 2px solid #fff; outline-offset: 2px; }
.cy-d i { position: absolute; bottom: 3px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #ffd36b; }
.cy-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.78em; color: var(--muted); }
.cy-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cy-legend .lg { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 2px solid transparent; }
.cy-legend .lg.f3 { background: rgba(255, 70, 120, 0.75); }
.cy-legend .lg.pp { border: 2px dashed #ff7aa8; }
.cy-legend .lg.fe { background: rgba(77, 255, 195, 0.35); }
.cy-legend .lg.ov { border-color: #ffd36b; }
.cy-legend .lg.mk { width: 6px; height: 6px; background: #ffd36b; }
.cy-row { display: grid; gap: 4px; }
.cy-row > b { font-size: 0.85em; color: var(--muted); font-weight: 600; }
.cy-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cy-chip { padding: 4px 10px; border-radius: 14px; border: 1px solid var(--line); background: rgba(5, 10, 24, 0.5); color: inherit; font-size: 0.85em; cursor: pointer; }
.cy-chip.on { background: rgba(255, 90, 138, 0.35); border-color: #ff7aa8; color: #fff; }
.cy-more summary { cursor: pointer; color: var(--muted); font-size: 0.88em; margin-bottom: 6px; }
.cy-more { display: grid; gap: 8px; }
.cy-more input[type=number] { max-width: 120px; }
.cy-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.cy-stat { display: grid; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.cy-stat small { color: var(--muted); font-size: 0.78em; }
.cy-stat b { font-size: 1.3em; color: #ffc2d8; }
.cy-hist { display: grid; gap: 4px; }
.cy-hrow { display: grid; grid-template-columns: 64px minmax(0, 1fr) 28px; align-items: center; gap: 8px; font-size: 0.85em; }
.cy-hrow small { color: var(--muted); }
.cy-hbar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: rgba(127, 184, 255, 0.08); }
.cy-hbar i { display: block; height: 100%; background: rgba(181, 156, 255, 0.55); }
.cy-hbar i.p { background: #ff5a8a; }
/* To-do-Liste (Auftrag DigC 29.10.) */
/* LCD neben dem Menü: heute fällige To-dos als 7-Segment-Ziffern */
.lcd { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 32px; padding: 2px 7px 3px; margin-right: 4px;
  border-radius: 6px; border: 1px solid transparent; cursor: pointer; vertical-align: middle;
  background: linear-gradient(180deg, #121722, #0b0f18) padding-box, linear-gradient(160deg, #e6ebf2, #7d8696 45%, #c9d0da 70%, #5d6573) border-box;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); }
.lcd[hidden] { display: none; }
.lcd .lcd-cap { font: 600 6.5px/1 system-ui, sans-serif; letter-spacing: 0.16em; color: #8e98a8; }
.lcd svg { width: 28px; height: 19px; display: block; overflow: visible; }
.lcd rect { fill: rgba(150, 165, 185, 0.1); }
.lcd rect.on { fill: #4fd2ff; filter: drop-shadow(0 0 1.5px rgba(79, 210, 255, 0.8)); }
.lcd.zero rect.on { fill: #6b7584; filter: none; }
.lcd:hover rect.on { filter: drop-shadow(0 0 2.5px rgba(79, 210, 255, 1)); }
.todo-btn { position: relative; }
.todo-btn.has-n::after { content: attr(data-n); position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #ff5ad1; color: #fff; font-size: 10px; line-height: 16px; text-align: center; font-weight: 700; }
.modal-panel.todo-panel { width: min(640px, 100%); gap: 10px; }
.todo-panel header h2 { margin: 0; font-size: 1.15em; }
.todo-view { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; overflow-y: auto; overflow-x: clip; min-height: 0; padding-right: 4px; }
.todo-view > * { min-width: 0; }
.todo-add { display: flex; gap: 6px; min-width: 0; }
.todo-add input:first-child { flex: 1 1 auto; min-width: 0; }
.todo-add input[type=date] { flex: 0 1 150px; min-width: 0; }
.todo-tabs { align-items: center; flex-wrap: wrap; }
.todo-tabs small { opacity: 0.75; }
.todo-tabs select { margin-left: auto; padding: 4px 8px; max-width: 100%; }
.todo-list, .todo-sub { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.todo-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(5, 10, 24, 0.5); }
.todo-item.p1 { border-left: 3px solid #ffd36b; }
.todo-item.p2 { border-left: 3px solid #ff5a5a; }
.todo-item.done { opacity: 0.55; }
.todo-item.done .todo-t { text-decoration: line-through; }
.todo-check { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--cyan); }
.todo-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; text-align: left; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.todo-t { overflow-wrap: anywhere; }
.todo-n { color: var(--muted); overflow-wrap: anywhere; }
.tchips { display: flex; flex-wrap: wrap; gap: 4px; }
.tchip { font-size: 0.75em; padding: 1px 7px; border-radius: 9px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.tchip.late { color: #ff9a9a; border-color: rgba(255, 90, 90, 0.6); }
.tchip.hot { color: #ff9a9a; }
.tchip.warm { color: #ffd36b; }
.todo-empty { padding: 12px; text-align: center; }
.todo-edit { display: grid; gap: 10px; }
.todo-edit h3 { margin: 0; font-size: 1em; color: var(--cyan); }
.todo-edit .hint:empty { display: none; }
.todo-edit label { display: grid; gap: 4px; font-size: 0.85em; color: var(--muted); min-width: 0; }
.todo-edit label > input, .todo-edit label > select, .todo-edit textarea { min-width: 0; width: 100%; box-sizing: border-box; }
.todo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.todo-sub li { display: flex; align-items: center; gap: 6px; }
.todo-subt { flex: 1 1 auto; min-width: 0; }
.todo-set summary { cursor: pointer; color: var(--muted); }
button.danger { color: #ff9a9a; border-color: rgba(255, 90, 90, 0.5); }
/* Putzstation (Haushalts-Spiel) */
.putz-panel { gap: 10px; background: rgba(10, 20, 48, 0.96); }   /* Nyria 02.11.: Chat schien durch, dichter Hintergrund wie auf der Brücke */
.putz-panel header h2 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 1.15em; min-width: 0; overflow-wrap: anywhere; }
.putz-panel .small-ico { font-size: 0.8em; padding: 2px 6px; }
.putz-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: 0.9em; }
.putz-stats b { color: var(--cyan); }
/* overflow-x: clip statt hidden: sonst kann ein fokussiertes Feld den Inhalt seitlich verschieben */
.putz-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; overflow-y: auto; overflow-x: clip; min-height: 0; padding-right: 4px; }
.putz-body > * { min-width: 0; }
.pcoach .row > span { min-width: 0; }
.pcoach .row input[type=date] { min-width: 0; flex: 1 1 auto; }
.putz-body h3 { margin: 6px 0 0; font-size: 0.95em; color: var(--cyan); }
.ptoday, .ptasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ptoday li, .ptasks li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: rgba(5, 10, 24, 0.5); }
.ptoday .clean { justify-content: center; color: var(--muted); }
/* Deck-Ansicht (Nyria 31.10.): heute erledigt = grün, fällig = orange markiert, „zuletzt“ direkt am Punkt */
.ptasks li { flex-wrap: wrap; }
.ptasks li.pt-done { background: rgba(76, 255, 138, 0.09); border-color: rgba(76, 255, 138, 0.55); }
.ptasks li.pt-done .tick { background: #4cff8a; border-color: #4cff8a; color: #06210f; }
.ptasks li.pt-done .tn { color: rgba(232, 236, 248, 0.7); }
.ptasks li.pt-due { border-color: #ffb347; box-shadow: inset 3px 0 0 #ffb347; }
/* Nyria 02.11.: auf dem Handy wurde der Name zur schmalen Spalte gequetscht. Name bekommt die ganze Zeile, „zuletzt“, Balken und ✕ rutschen darunter */
@media (max-width: 560px) {
  .ptasks .tn { flex: 1 1 calc(100% - 50px); overflow-wrap: break-word; }
  .ptasks .plast { margin-left: 42px; }
  .ptasks .pbar { flex: 1 1 auto; max-width: 120px; }
  .ptasks .pdel { margin-left: auto; }
}
.pdone { display: inline-block; margin-left: 6px; font-style: normal; font-size: 0.78em; color: #4cff8a; }
.plast { flex: none; padding: 3px 7px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 0.75em; white-space: nowrap; }
.phist { flex-basis: 100%; padding: 2px 0 0 42px; color: var(--muted); font-size: 0.8em; }
.tick { flex: none; width: 34px; height: 34px; padding: 0; border-radius: 50%; background: transparent; border: 1.5px solid var(--cyan); color: var(--cyan); font-weight: 700; }
.tick:hover { background: rgba(143, 240, 255, 0.15); }
.tn { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tn small { display: block; color: var(--muted); font-size: 0.78em; }
.tf { color: #ffb3e6; font-size: 0.8em; white-space: nowrap; }
.pbar { flex: none; width: 56px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.pbar i { display: block; height: 100%; border-radius: 3px; }
.pbar.ok i { background: var(--cyan); }
.pbar.mid i { background: #ffd36b; }
.pbar.low i { background: #ff5ad1; }
.prooms { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
/* Auswahlfelder haben eine eigene Mindestbreite; ohne das schieben sie auf dem Handy das ganze Deck über den Rand */
.proom, .ptasks li, .padd select, .pedit select, .padd input, .pedit input { min-width: 0; }
.proom { border: 1px solid var(--line); border-radius: 12px; background: rgba(14, 28, 64, 0.5); }
.proom summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; }
.proom summary::-webkit-details-marker { display: none; }
.proom[open] summary { border-bottom: 1px solid var(--line); }
.proom .rn { flex: 1; min-width: 0; font-weight: 600; }
.proom .rn small { color: var(--muted); font-weight: 400; }
.ndue { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #ff5ad1; color: #fff; font-size: 0.75em; line-height: 20px; text-align: center; }
.proom .ptasks, .proom .padd { margin: 8px 10px; }
.proom .pdelroom { margin: 0 10px 10px; }
.padd { display: flex; gap: 6px; }
.padd input { flex: 1; min-width: 0; padding: 6px 10px; }
.padd select { padding: 6px; max-width: 42%; }
.padd button { flex: none; padding: 6px 12px; }
.padd .icon-in { flex: none; width: 3.2em; text-align: center; }
.pdel { flex: none; padding: 2px 6px; color: var(--muted); }
/* Neu-laden-Banner (Befehl vom Terminal, wenn die App gerade beschäftigt ist) */
.reload-banner { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 60; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 12px; border: 1px solid var(--cyan); background: rgba(14, 28, 64, 0.95); color: var(--cyan); box-shadow: 0 0 24px rgba(143, 240, 255, 0.35); }
/* Sternenpiano */
.modal-panel.piano-panel { width: min(1100px, 100%); height: min(86vh, 100%); gap: 8px; }
.piano-panel #pianoMidi { margin: 0; }
.piano-view { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overflow-x: clip; }
.plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.psong { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: rgba(14, 28, 64, 0.5); color: inherit; }
.psong:hover { border-color: var(--cyan); }
.psong small, .plevel { color: var(--muted); font-size: 0.85em; }
.pstars { color: #ffd36b; font-size: 0.9em; letter-spacing: 1px; }
.psetup { display: flex; flex-direction: column; gap: 10px; }
.psetup h3 { margin: 0; color: var(--cyan); }
.phands { display: flex; flex-wrap: wrap; gap: 8px; }
.phands button { display: flex; flex-direction: column; align-items: center; min-width: 120px; }
.phands button.on { border-color: var(--cyan); box-shadow: 0 0 12px rgba(143, 240, 255, 0.35); }
.phands small { color: #ffd36b; letter-spacing: 1px; }
.pplay { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.ptop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.ptop b { color: var(--cyan); }
.ptop #pianoScore { color: var(--muted); font-variant-numeric: tabular-nums; flex: 1; }
.ptop label { display: flex; align-items: center; gap: 4px; font-size: 0.9em; color: var(--muted); }
.ptop .pctl input[type=range] { width: 110px; accent-color: var(--cyan); }
.ptop .pctl b { min-width: 3.2em; color: var(--cyan); font-variant-numeric: tabular-nums; }
/* Spielfläche: fallende Noten links, Song-Übersicht rechts (Wunsch DigC 29.10.); Canvas absolut in Boxen, damit sie die Höhe sicher füllen */
.pstage { flex: 1; min-height: 240px; display: flex; gap: 8px; }
.pmain, .pov-box { position: relative; min-width: 0; }
.pmain { flex: 1; }
.pstage canvas, .pov-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#pianoCanvas { border: 1px solid var(--line); border-radius: 12px; background: radial-gradient(ellipse at 50% 0%, rgba(14, 28, 64, 0.9), rgba(3, 6, 16, 0.95)); touch-action: none; }
#pianoOverview { border: 1px solid var(--line); border-radius: 10px; cursor: crosshair; touch-action: none; }
.pov-side { flex: none; width: 150px; display: flex; flex-direction: column; gap: 4px; }
.pov-side .pov-box { flex: 1; }
/* Trenn-Regler unter der Übersicht: eingerückt wie der Notenbereich (links 24 px Taktnummern, rechts 6 px Rand) */
.pov-split { display: flex; flex-direction: column; gap: 2px; }
.pov-split input[type=range] { width: calc(100% - 30px); margin: 0 6px 0 24px; accent-color: #ffffff; }
.pov-split > span { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.pov-split small { color: var(--cyan); font-size: 0.78em; }
.psect { font-size: 0.9em; }
.psect .hint { margin: 0; }
.psetup-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 16px; align-items: start; }
.pov-wrap { display: flex; flex-direction: column; gap: 4px; }
.pov-wrap .pov-box { height: min(58vh, 440px); }
/* Übersicht per 🗺 ausgeschaltet: verschwindet, Spielfläche und Einstellungen nehmen die volle Breite */
.ov-off .pov-side, .ov-off .pov-wrap, .ov-off .psect .hint { display: none; }
.ov-off .psetup-wrap { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 640px) {
  .pov-side { width: 64px; }
  .psetup-wrap { grid-template-columns: minmax(0, 1fr); }
  .pov-wrap .pov-box { height: 220px; }
}
/* Sternenpiano Version 2: Regal, Upload, Einstellungen, Latenz-Abgleich */
.ptools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ptools .hint { margin: 0; }
.pupload { cursor: pointer; padding: 6px 12px; border: 1px dashed var(--cyan); border-radius: 10px; color: var(--cyan); font-size: 0.9em; }
.pupload:hover { background: rgba(143, 240, 255, 0.1); }
.pshelf { margin: 14px 0 6px; font-size: 0.95em; color: var(--cyan); }
.pfield { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.pfield input:not([type]), .pfield select { min-width: 0; padding: 6px 10px; }
.pfield input:not([type]) { flex: 1 1 200px; }
.pfield small { color: var(--muted); }
.ptracks { display: grid; gap: 6px; }
.ptracks .pfield { justify-content: space-between; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: rgba(5, 10, 24, 0.5); }
.ptracks .pfield > span { min-width: 0; overflow-wrap: anywhere; }
.ptracks .psplit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ptracks .psplit small { color: var(--cyan); }
.ploop { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.ploop .row { display: flex; align-items: center; gap: 6px; }
.pcalib-pad { height: 140px; font-size: 1.2em; border: 2px solid var(--cyan); border-radius: 16px; background: rgba(14, 28, 64, 0.6); color: var(--cyan); touch-action: none; }
.pcalib-pad.hit { animation: ppulse 0.25s ease-out; }
@keyframes ppulse { from { background: rgba(77, 255, 166, 0.45); } to { background: rgba(14, 28, 64, 0.6); } }
/* Sternenpiano Version 4: MP3 umwandeln */
.pradio { display: grid; gap: 4px; }
.pradio .row { display: flex; align-items: center; gap: 6px; }
.pspin { font-size: 2.4em; animation: pspin 1.6s ease-in-out infinite; }
@keyframes pspin { 0%, 100% { transform: translateY(0) rotate(-8deg); opacity: 0.7; } 50% { transform: translateY(-8px) rotate(8deg); opacity: 1; } }
.presult { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 20px 0; }
.presult h3 { margin: 0; color: var(--cyan); }
.pbig { font-size: 2.6em; color: #ffd36b; letter-spacing: 6px; text-shadow: 0 0 18px rgba(255, 211, 107, 0.6); }
.pnew { color: #ff5ad1; font-weight: 600; margin: 0; }
/* Version 3: Wochenbalken, Abzeichen, Bearbeiten */
.tn.edit { cursor: pointer; }
.pedit { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.pedit input { flex: 1 1 100%; min-width: 0; padding: 6px 10px; }
.pedit select { flex: 1 1 40%; min-width: 0; padding: 6px; }
.pedit button { flex: none; padding: 6px 12px; }
.pweek .bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 90px; padding: 6px 4px 0; }
.pweek .bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 2px; }
.pweek .bar i { display: block; width: 70%; min-height: 3px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--cyan), #2a5bd7); }
.pweek .bar.today i { background: linear-gradient(180deg, #ffd36b, #ff5ad1); box-shadow: 0 0 8px rgba(255, 90, 209, 0.5); }
.pweek .bar .n { font-size: 0.75em; color: var(--muted); min-height: 1em; }
.pweek .bar small { font-size: 0.75em; color: var(--muted); }
.pweek .hint { margin: 4px 0 0; color: var(--muted); font-size: 0.8em; }
.pbadges { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.pbadge { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 12px; background: rgba(5, 10, 24, 0.5); opacity: 0.45; text-align: center; }
.pbadge span { font-size: 1.6em; }
.pbadge small { font-size: 0.7em; line-height: 1.2; }
.pbadge.got { opacity: 1; border-color: rgba(255, 211, 107, 0.6); box-shadow: 0 0 10px rgba(255, 211, 107, 0.25); }
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 70; pointer-events: none; }
.badge-toast { position: fixed; z-index: 60; left: 50%; bottom: 90px; transform: translateX(-50%); padding: 10px 16px; border-radius: 14px; background: #0b1630; border: 1px solid #ffd36b; color: #fff3b0; box-shadow: 0 0 20px rgba(255, 211, 107, 0.4); animation: toast 3.2s ease forwards; pointer-events: none; max-width: calc(100vw - 32px); text-align: center; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 20px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -10px); } }
.pcoach input[type=date] { padding: 4px 8px; }
.pcoach { display: grid; gap: 8px; margin-top: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(5, 10, 24, 0.5); }
.pcoach .row { display: flex; align-items: center; gap: 8px; }
.pcoach select { padding: 4px 8px; }
.pcoach .hint { margin: 0; color: var(--muted); font-size: 0.8em; }
.pcrew { padding: 6px 0; border-top: 1px solid var(--line); color: var(--fg, inherit); font-size: 0.85em; line-height: 1.5; overflow-wrap: anywhere; }
.pcrew:first-child { border-top: 0; }
.spark { position: fixed; z-index: 50; pointer-events: none; color: #fff3b0; text-shadow: 0 0 6px #ffd36b, 0 0 12px #ff9ad5; animation: spark 0.9s ease-out forwards; }
@keyframes spark { from { transform: translate(-50%, -50%) scale(1); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.4); opacity: 0; } }
.spark-plus { position: fixed; z-index: 50; pointer-events: none; font-weight: 700; color: var(--cyan); text-shadow: 0 0 8px var(--cyan); animation: plusup 1.2s ease-out forwards; }
@keyframes plusup { from { transform: translate(-50%, -50%); opacity: 1; } to { transform: translate(-50%, -260%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .spark { display: none; } }
/* Suche im Chat */
.search-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.search-bar input { flex: 1; min-width: 0; padding: 6px 10px; }
.search-bar button { width: 36px; padding: 6px 0; }
.search-count { min-width: 3.5em; color: var(--muted); font-size: 0.8em; text-align: center; white-space: nowrap; }
mark.hit { background: rgba(143, 240, 255, 0.3); color: inherit; border-radius: 3px; }
mark.hit.cur { background: var(--cyan); color: #04122a; }
.conn { width: 10px; height: 10px; border-radius: 50%; background: #3a4a6a; }
.conn.on { background: #4dffa6; box-shadow: 0 0 8px #4dffa6; }
.msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin; scrollbar-color: var(--holo) transparent; }
.msgs > :first-child { margin-top: auto; }
.msgs .older { align-self: center; font-size: 0.8em; padding: 6px 14px; }
.msg .meta .src { padding: 0 6px; border-radius: 6px; background: rgba(88, 101, 242, 0.25); font-size: 0.9em; }
/* Knopf „nach unten“, erscheint, wenn man hochgescrollt hat */
.to-bottom {
  position: absolute; right: 18px; bottom: 84px; z-index: 2;
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  font-size: 1.3em; line-height: 1; box-shadow: 0 0 14px rgba(127, 184, 255, 0.45);
}
.to-bottom .badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 9px;
  background: var(--cyan); color: #04122a; font-size: 0.55em; line-height: 18px; font-weight: 600; }
.msg {
  max-width: min(78%, 680px);
  padding: 10px 14px;
  border-radius: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg.user { align-self: flex-end; background: linear-gradient(180deg, #2a5bd7, #1f4ab8); border-bottom-right-radius: 4px; }
.msg.ysii {
  align-self: flex-start; background: var(--panel); border: 1px solid var(--line); border-bottom-left-radius: 4px;
  border-left: 3px solid var(--mc, var(--holo));
}
.msg .meta { display: flex; gap: 8px; align-items: center; margin-top: 6px; color: var(--muted); font-size: 0.75em; }
/* Auswahl-Knöpfe unter Ysii-Nachrichten (Wunsch DigC 29.10.) */
.msg .choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; white-space: normal; }
.msg .choices button { padding: 6px 14px; border-radius: 16px; border: 1px solid var(--mc, var(--holo)); background: rgba(127, 184, 255, 0.1); color: var(--text); font-size: 0.9em; cursor: pointer; }
.msg .choices button:hover:not(:disabled) { background: rgba(127, 184, 255, 0.25); }
.msg .choices button:disabled { opacity: 0.45; cursor: default; }
.msg .choices button.picked { opacity: 1; background: var(--mc, var(--holo)); color: #050a18; font-weight: 700; }
.msg .play { background: none; border: none; padding: 0 4px; font-size: 1.1em; }
/* Knöpfe bleiben unten, wenn das Eingabefeld bei langen Texten wächst (Höhe begrenzt autosize() in app.js) */
.composer { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.composer textarea { flex: 1; resize: none; box-sizing: border-box; min-height: 46px; line-height: 1.35; }
.composer button { width: 52px; height: 46px; font-size: 1.2em; }
.composer #attach { width: 44px; padding: 0; }
/* Anhänge */
.atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.msg .att { max-width: 100%; border-radius: 10px; }
.msg .att.img img { display: block; max-width: min(100%, 320px); max-height: 320px; border-radius: 10px; object-fit: cover; }
.msg .att.img { cursor: zoom-in; }
.msg video.att { max-height: 320px; }
/* Bildbetrachter (Nyria 31.10.) */
#lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(3, 5, 12, 0.94); display: flex; align-items: center; justify-content: center; touch-action: none; overflow: hidden; }
#lightbox[hidden] { display: none; }
#lightbox img { max-width: 100vw; max-height: 100vh; object-fit: contain; transform-origin: center; user-select: none; -webkit-user-drag: none; will-change: transform; }
#lightbox .lb-bar { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px; display: flex; gap: 10px; }
#lightbox .lb-bar a, #lightbox .lb-bar button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(10, 14, 28, 0.75); color: #fff; font-size: 20px; display: flex; align-items: center; justify-content: center; text-decoration: none; padding: 0; }
.msg audio.att { width: min(100%, 300px); }
.msg .att.file { display: inline-block; padding: 6px 10px; background: rgba(255, 255, 255, 0.08); color: inherit; text-decoration: none; word-break: break-all; }
.pending { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; }
.pending .chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 6px 4px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: 0.8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pending .chip img { width: 32px; height: 32px; object-fit: cover; border-radius: 6px; }
.pending .x { background: none; border: none; padding: 0 4px; width: auto; color: var(--muted); }
.chat.drop { outline: 2px dashed var(--holo); outline-offset: -8px; }
/* Sprachnachricht */
.composer #micBtn { width: 44px; padding: 0; }
.rec-bar { display: flex; align-items: center; gap: 10px; padding: 12px; border-top: 1px solid var(--line); }
.rec-bar[hidden], .composer[hidden] { display: none; }
.rec-bar canvas { flex: 1; min-width: 0; height: 32px; }
.rec-bar button { width: 52px; font-size: 1.2em; }
.rec-bar #recCancel { width: 44px; }
.rec-dot { width: 12px; height: 12px; border-radius: 50%; background: #ff5a5a; animation: recblink 1s infinite; flex: none; }
@keyframes recblink { 50% { opacity: 0.25; } }
/* Memory-Fenster */
.modal { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.6); }
.modal[hidden] { display: none; }
.modal-panel { width: min(760px, 100%); max-height: min(86vh, 100%); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; box-shadow: 0 0 40px rgba(127, 184, 255, 0.15); }
.modal-panel header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.modal-panel h2 { margin: 0; font-size: 1.15em; }
/* Captain: Vorschläge der Crew */
#gear.has-dot::after { content: ''; position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: #ff5a8a; box-shadow: 0 0 6px #ff5a8a; }
.prop-filter { margin: 10px 0; }
.prop-filter button { padding: 4px 10px; font-size: 0.85em; background: transparent; }
.prop-filter button.on { background: linear-gradient(180deg, #2a5bd7, #1d3f9e); }
/* zweite Filterleiste: Abschnitte (Sternenpiano, Putzstation …) */
.prop-section { margin-top: -4px; }
.prop-section button { font-size: 0.8em; border-style: dashed; }
.prop-section button.on { border-style: solid; }
.prop-sec { display: flex; align-items: center; gap: 6px; font-size: 0.8em; color: var(--muted); }
.prop-sec select { font-size: 1em; padding: 2px 6px; min-width: 0; }
.prop-list { overflow-y: auto; min-height: 0; display: grid; align-content: start; gap: 10px; padding-right: 4px; }
.prop { display: grid; gap: 6px; padding: 10px 12px; background: rgba(5, 10, 24, 0.5); border: 1px solid var(--line); border-left: 3px solid var(--holo); border-radius: 10px; }
.prop.st-angenommen { border-left-color: #4dffa6; }
.prop.st-aufgeschoben { border-left-color: #ffc85a; }
.prop.st-abgelehnt { border-left-color: #ff5a5a; opacity: 0.75; }
.prop-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.prop-head .area { font-size: 0.8em; color: var(--muted); white-space: nowrap; }
.prop-meta { font-size: 0.8em; color: var(--muted); }
.prop-detail { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.92em; }
.prop-note { margin: 0; font-size: 0.85em; color: #8ff0ff; }
.prop-noteIn { font-size: 0.85em; padding: 6px 10px; }
.mem-body { overflow-y: auto; min-height: 0; white-space: pre-wrap; line-height: 1.5; overflow-wrap: anywhere; padding-right: 4px; user-select: text; }
.mem-body ul, .mem-body ol { margin: 4px 0; padding-left: 1.4em; white-space: normal; }
.mem-body li { white-space: pre-wrap; margin: 2px 0; }
.mem-body .h { font-weight: 700; margin: 12px 0 4px; color: var(--cyan, #8ff0ff); }
.mem-body .h1 { font-size: 1.2em; } .mem-body .h2 { font-size: 1.08em; }

/* Markdown in Nachrichten */
.msg ul, .msg ol { margin: 4px 0; padding-left: 1.4em; white-space: normal; }
.msg li { margin: 2px 0; white-space: pre-wrap; }
.msg blockquote { margin: 4px 0; padding: 2px 0 2px 10px; border-left: 3px solid var(--mc, var(--holo)); opacity: 0.9; }
.msg .h { font-weight: 700; margin: 6px 0 2px; }
.msg .h1 { font-size: 1.25em; } .msg .h2 { font-size: 1.12em; } .msg .h3 { font-size: 1em; }
.msg hr { border: none; border-top: 1px solid var(--line); margin: 8px 0; }
.msg a { color: var(--cyan, #8ff0ff); text-decoration: underline; text-underline-offset: 2px; }
.msg.user a { color: #fff; }
.msg code { padding: 1px 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.1); font-size: 0.9em; }
.msg .transcript { margin-top: 6px; font-size: 0.85em; font-style: italic; opacity: 0.8; }

/* ---------- Einstellungen ---------- */
.drawer { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: flex-end; z-index: 10; }
.drawer-panel {
  width: min(440px, 100%); height: 100%; overflow-y: auto;
  background: var(--bg2); border-left: 1px solid var(--line); padding: 16px;
}
.drawer-panel header { display: flex; justify-content: space-between; align-items: center; }
.drawer-panel h2 { margin: 0; font-weight: 400; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-top: 14px; }
.card h3 { margin: 0 0 10px; font-size: 1em; font-weight: 500; display: flex; justify-content: space-between; align-items: center; }
.card label { display: block; margin: 10px 0; color: var(--muted); font-size: 0.9em; }
.card label select, .card label input[type=range] { display: block; width: 100%; margin-top: 4px; }
.card label.row { display: flex; gap: 8px; align-items: center; color: var(--text); }
.card output { color: var(--cyan); float: right; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; }
.hint { color: var(--muted); font-size: 0.85em; min-height: 1em; }
.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 0.9em; }
.status-grid div { background: rgba(5, 10, 24, 0.5); border-radius: 8px; padding: 8px; }
.status-grid b { display: block; color: var(--muted); font-weight: 400; font-size: 0.8em; }
.user-list { display: grid; gap: 6px; font-size: 0.9em; }
.user-list .u { display: flex; justify-content: space-between; align-items: center; gap: 6px; background: rgba(5, 10, 24, 0.5); border-radius: 8px; padding: 6px 8px; }
/* Name + Rolle + Sprache in einer Zeile, „Anlegen“ darunter über die volle Breite (passte sonst nicht in die Schublade) */
.add-user { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; margin-top: 10px; }
.add-user > * { min-width: 0; }
.add-user button[type=submit] { grid-column: 1 / -1; }

/* ---------- Handy ---------- */
@media (max-width: 760px) {
  #app { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .stage { flex-direction: row; gap: 14px; padding: 10px 16px 10px 56px; border-right: none; border-bottom: 1px solid var(--line); }
  .holo { width: 96px; }
  .nameplate { text-align: left; }
  #gear { top: 50%; transform: translateY(-50%); }
  .vol { position: static; margin-left: auto; flex-direction: column; gap: 0; }
  .mood-pop { left: 0; transform: none; }
  .composer { gap: 4px; padding: 10px 8px; }
  .composer #attach, .composer #emojiBtn, .composer #micBtn { width: 36px; }
  .composer button { width: 44px; }
  .vol input[type=range] { width: 76px; }
  .msgs { padding: 10px 12px; gap: 8px; }
  .msg { max-width: 88%; padding: 8px 12px; font-size: 0.95em; line-height: 1.4; }
  .add-user { grid-template-columns: minmax(0, 1fr) auto auto; }
  .holo { cursor: pointer; }
  /* Kompakt-Modus: Gesicht antippen oder ins Eingabefeld tippen -> schmale Leiste, der Chat bekommt den Platz */
  #app.compact .stage { padding: 4px 12px 4px 48px; gap: 10px; }
  #app.compact .holo { width: 40px; }
  #app.compact .holo > canvas, #app.compact .platform, #app.compact .vol input[type=range] { display: none; }   /* nur der Ring, nicht das 3D-Gesicht */
  #app.compact .nameplate { display: flex; align-items: baseline; gap: 10px; }
  #app.compact .nameplate .title { font-size: 1em; letter-spacing: 0.3em; }
  #app.compact .state { margin-top: 0; font-size: 0.8em; }
  #app.compact .chat-head { padding: 4px 14px; font-size: 0.8em; }
}

.prop .prop-del { margin-left: auto; color: var(--muted); }

/* ---------- Captain-Brücke (captain.js, Auftrag DigC 01.11.) ---------- */
.cb-lcd .cb-lcd-led { width: 11px; height: 11px; margin-top: 3px; border-radius: 50%; background: #3a4352; box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.8); }
.cb-lcd .cb-lcd-led.cb-ok { background: #3ee08a; box-shadow: 0 0 6px rgba(62, 224, 138, 0.8); }
.cb-lcd .cb-lcd-led.cb-warn { background: #ffc94d; box-shadow: 0 0 6px rgba(255, 201, 77, 0.8); }
.cb-lcd .cb-lcd-led.cb-err { background: #ff5a5a; box-shadow: 0 0 7px rgba(255, 90, 90, 0.9); animation: cb-blink 1.4s ease-in-out infinite; }
@keyframes cb-blink { 50% { opacity: 0.45; } }
.modal-panel.cb-panel { position: relative; width: min(1100px, 100%); max-width: 100%; min-width: 0; height: min(92vh, 100%); gap: 10px; overflow: hidden; }
.modal-panel.cb-panel { background: rgba(10, 20, 48, 0.96); }   /* dichte Datenseite: Chat dahinter nicht durchscheinen lassen */
.cb-view { gap: 14px; }
.cb-view * { min-width: 0; }
.cb-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cb-banner { margin: 0; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255, 90, 90, 0.5); background: rgba(255, 90, 90, 0.08); color: #ffb3b3; }
.cb-sec { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(5, 10, 24, 0.45); }
.cb-sec > h3 { margin: 0; font-size: 1.02em; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.cb-sub { margin: 4px 0 0; font-size: 0.9em; color: var(--muted); font-weight: 600; }
.cb-none { margin: 0; font-style: italic; }
.cb-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.cb-tile { display: grid; gap: 8px; align-content: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(14, 28, 64, 0.45); }
.cb-tile h4 { margin: 0; font-size: 0.98em; display: flex; align-items: baseline; gap: 8px; }
.cb-tile h4 small { color: var(--muted); font-weight: 400; }
.cb-tile-st { margin: 0; }
.cb-errtxt { margin: 0; color: #ffb3b3; overflow-wrap: anywhere; }
.cb-busy { margin: 0; color: #ffd36b; }
/* Ampel */
.cb-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #5d6573; vertical-align: middle; flex: none; }
.cb-dot.cb-ok { background: #3ee08a; box-shadow: 0 0 5px rgba(62, 224, 138, 0.7); }
.cb-dot.cb-warn { background: #ffc94d; box-shadow: 0 0 5px rgba(255, 201, 77, 0.7); }
.cb-dot.cb-err { background: #ff5a5a; box-shadow: 0 0 6px rgba(255, 90, 90, 0.8); }
.cb-lage { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
.cb-chip { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(14, 28, 64, 0.5); }
.cb-chip small { grid-column: 2; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-chip.cb-c-warn { border-color: rgba(255, 201, 77, 0.55); }
.cb-chip.cb-c-err { border-color: rgba(255, 90, 90, 0.65); background: rgba(255, 90, 90, 0.08); }
.cb-chip.cb-c-off { opacity: 0.7; }
/* Balken */
.cb-meter { display: grid; gap: 3px; }
.cb-meter-h { display: flex; justify-content: space-between; gap: 8px; font-size: 0.88em; }
.cb-meter-h span { color: var(--muted); }
.cb-meter-h b { font-weight: 600; text-align: right; }
.cb-bar { position: relative; height: 9px; border-radius: 5px; overflow: hidden; background: rgba(127, 184, 255, 0.1); }
.cb-bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #2a8cff, var(--cyan)); transition: width 0.6s ease; }
.cb-bar.cb-warn i { background: linear-gradient(90deg, #d79a1f, #ffc94d); }
.cb-bar.cb-err i { background: linear-gradient(90deg, #c22c3f, #ff5a5a); }
.cb-bar.cb-done i { background: linear-gradient(90deg, #1f9e5c, #3ee08a); }
.cb-bar.cb-akku i { background: linear-gradient(90deg, #1f9e5c, #3ee08a); }
.cb-bar.cb-akku.cb-warn i { background: linear-gradient(90deg, #d79a1f, #ffc94d); }
.cb-bar.cb-akku.cb-err i { background: linear-gradient(90deg, #c22c3f, #ff5a5a); }
.cb-bar.cb-unk i { width: 0; }
.cb-bar.cb-indet i { width: 35%; animation: cb-indet 1.6s ease-in-out infinite; }
@keyframes cb-indet { 0% { transform: translateX(-100%); } 100% { transform: translateX(290%); } }
@media (prefers-reduced-motion: reduce) { .cb-bar.cb-indet i { animation: none; width: 100%; opacity: 0.4; } .cb-lcd .cb-lcd-led.cb-err { animation: none; } }
.cb-kvs { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); }
.cb-kv { display: grid; gap: 1px; font-size: 0.88em; }
.cb-kv span { color: var(--muted); }
.cb-kv.cb-warn b { color: #ffc94d; }
.cb-kv.cb-err b { color: #ff7a7a; }
/* Aufgaben */
.cb-tasks { display: grid; gap: 8px; }
.cb-task { display: grid; gap: 5px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(14, 28, 64, 0.45); }
.cb-task.cb-t-err { border-color: rgba(255, 90, 90, 0.6); }
.cb-task.cb-t-done { opacity: 0.75; }
.cb-task-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.cb-task-h b { overflow-wrap: anywhere; }
.cb-task-h .cb-state { margin-left: auto; font-size: 0.88em; color: var(--muted); }
.cb-tag { display: inline-block; padding: 0 7px; border-radius: 8px; font-size: 0.78em; color: var(--muted); border: 1px solid var(--line); }
.cb-tag:empty { display: none; }
/* Tabellen: am Handy als Karten (keine waagrechte Scrollleiste) */
.cb-tab { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.cb-tab th { text-align: left; font-weight: 600; color: var(--muted); padding: 4px 8px; border-bottom: 1px solid var(--line); }
.cb-tab td { padding: 6px 8px; border-bottom: 1px solid rgba(127, 184, 255, 0.08); vertical-align: top; overflow-wrap: anywhere; }
.cb-tab td.cb-warn { color: #ffc94d; }
.cb-tab td.cb-err { color: #ff7a7a; }
.cb-tab code { font-size: 0.92em; }
@media (max-width: 760px) {
  .cb-tab thead { display: none; }
  .cb-tab, .cb-tab tbody, .cb-tab tr, .cb-tab td { display: block; width: 100%; }
  .cb-tab tr { margin-bottom: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: rgba(14, 28, 64, 0.4); }
  .cb-tab, .cb-tab tr { box-sizing: border-box; }
  .cb-tab td { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; padding: 3px 0; border: none; }
  .cb-tab td::before { content: attr(data-l); flex: 0 0 36%; color: var(--muted); font-size: 0.9em; }
  .modal-panel.cb-panel { height: 100%; max-height: 100%; padding: 12px; }
  #cbModal { padding: 6px; }
  .cb-sec { padding: 10px; }
}
/* Zähler-Kacheln */
.cb-stats { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
.cb-stat { display: grid; gap: 2px; align-content: start; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(14, 28, 64, 0.5); font: inherit; color: inherit; }
button.cb-stat { cursor: pointer; }
button.cb-stat:disabled { cursor: default; filter: none; }
button.cb-stat:not(:disabled):hover { border-color: rgba(143, 240, 255, 0.55); }
.cb-stat.hot { border-color: rgba(255, 90, 209, 0.6); box-shadow: 0 0 10px rgba(255, 90, 209, 0.2); }
.cb-stat-n { font-size: 1.45em; font-weight: 700; line-height: 1.1; }
.cb-stat-l { font-size: 0.86em; }
.cb-stat small { color: var(--muted); font-size: 0.78em; overflow-wrap: anywhere; }
.cb-inline { margin-top: 4px; }
/* Einstellungen */
.cb-dl { margin: 0; display: grid; gap: 4px; }
.cb-dl > div { display: grid; grid-template-columns: minmax(min(9em, 40%), 1fr) minmax(0, auto); align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px solid rgba(127, 184, 255, 0.08); }
.cb-dl dt { color: var(--muted); font-size: 0.9em; }
.cb-dl dd { margin: 0; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; text-align: right; overflow-wrap: anywhere; }
/* Schalter */
.cb-sws { display: grid; gap: 8px; }
.cb-sw { display: grid; gap: 2px; }
.cb-sw small { margin-left: 2px; }
.cb-act { text-align: left; }
.cb-lock { font-size: 0.85em; }
.cb-tog { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.cb-tog input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cb-knob { position: relative; flex: none; width: 40px; height: 22px; border-radius: 11px; background: rgba(127, 184, 255, 0.15); border: 1px solid var(--line); transition: background 0.2s; }
.cb-knob::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #c9d4e6; transition: transform 0.2s; }
.cb-tog input:checked + .cb-knob { background: #1f9e5c; border-color: #3ee08a; }
.cb-tog input:checked + .cb-knob::after { transform: translateX(18px); background: #fff; }
.cb-tog input:focus-visible + .cb-knob { outline: 2px solid var(--cyan); outline-offset: 2px; }
.cb-tog input:disabled + .cb-knob { opacity: 0.5; }
.cb-tog.busy { cursor: progress; }
/* Bestätigen/Passwort im Fenster */
.cb-dlg { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 16px; border-radius: 16px; background: rgba(0, 0, 0, 0.55); }
.cb-dlg-box { display: grid; gap: 10px; width: min(380px, 100%); padding: 16px; border-radius: 14px; border: 1px solid rgba(143, 240, 255, 0.4); background: #0b1630; box-shadow: 0 0 30px rgba(127, 184, 255, 0.25); }
.cb-dlg-box h3 { margin: 0; font-size: 1.05em; }
.cb-dlg-box p { margin: 0; }
.cb-dlg-box label { display: grid; gap: 4px; }
.cb-dlg-err { min-height: 1em; color: #ff9a9a; font-size: 0.9em; }
.cb-toast { position: fixed; z-index: 60; left: 50%; bottom: 90px; transform: translateX(-50%); padding: 10px 16px; border-radius: 14px; background: #0b1630; border: 1px solid #3ee08a; color: #d9ffe9; box-shadow: 0 0 20px rgba(62, 224, 138, 0.35); animation: toast 3.2s ease forwards; pointer-events: none; max-width: calc(100vw - 32px); text-align: center; }
.cb-toast.bad { border-color: #ff5a5a; color: #ffd0d0; box-shadow: 0 0 20px rgba(255, 90, 90, 0.35); }

/* ---------- Lerndeck (edu.js) ---------- */
.ed-view { gap: 12px; }
.ed-title { margin: 0; font-size: 1.1em; color: var(--cyan); overflow-wrap: anywhere; }
.ed-h { margin: 6px 0 0; font-size: 0.95em; color: var(--muted); font-weight: 600; }
.ed-today { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(143, 240, 255, 0.35); background: linear-gradient(135deg, rgba(42, 91, 215, 0.25), rgba(123, 108, 255, 0.18)); }
.ed-today-n { display: grid; gap: 2px; min-width: 0; }
.ed-today-n b { font-size: 2.4em; line-height: 1; color: var(--cyan); }
.ed-today-n small { color: var(--muted); overflow-wrap: anywhere; }
.ed-done { margin: 0; }
button.ed-go { padding: 14px 22px; font-size: 1.05em; font-weight: 600; border-radius: 12px; }
.ed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.ed-tile { position: relative; display: grid; gap: 4px; justify-items: start; padding: 12px; min-height: 104px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: rgba(5, 10, 24, 0.5); min-width: 0; }
.ed-tile.ed-empty { opacity: 0.6; }
.ed-tile b { overflow-wrap: anywhere; }
.ed-tile small { color: var(--muted); font-size: 0.78em; }
.ed-ico { font-size: 30px; line-height: 1; }
.ed-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.75em; font-weight: 600; background: #ff5ad1; color: #fff; }
.ed-tile .ed-badge { position: absolute; top: 8px; right: 8px; }
.ed-badge.big { font-size: 0.85em; background: rgba(123, 108, 255, 0.35); }
.ed-docs { display: grid; gap: 8px; }
.ed-doc { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 10px; padding: 6px 10px 6px 6px; text-align: left; border: 1px solid var(--line); border-left: 3px solid var(--holo); border-radius: 10px; background: rgba(5, 10, 24, 0.5); min-width: 0; }
.ed-doc.st-bereit { border-left-color: #4dffa6; }
.ed-doc.st-fehler { border-left-color: #ff5a5a; }
.ed-doc.st-saeubern, .ed-doc.st-analyse { border-left-color: #ffc85a; }
.ed-doc img, .ed-doc .ed-ph { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; display: grid; place-items: center; font-size: 28px; background: rgba(127, 184, 255, 0.08); }
.ed-doc-t { display: grid; gap: 2px; min-width: 0; }
.ed-doc-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-doc-t small { color: var(--muted); font-size: 0.8em; overflow-wrap: anywhere; }
.ed-tabs { margin: 0; }
.ed-wait { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(255, 200, 90, 0.1); border: 1px solid rgba(255, 200, 90, 0.4); }
.ed-wait::before { content: ''; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 8px; border-radius: 50%; border: 2px solid #ffc85a; border-right-color: transparent; vertical-align: -1px; animation: ed-spin 1s linear infinite; }
@keyframes ed-spin { to { transform: rotate(360deg); } }
.ed-err { display: grid; gap: 8px; justify-items: start; padding: 10px 12px; border-radius: 10px; background: rgba(255, 90, 90, 0.1); border: 1px solid rgba(255, 90, 90, 0.45); }
.ed-err p { margin: 0; overflow-wrap: anywhere; }
.ed-md { white-space: pre-wrap; line-height: 1.5; overflow-wrap: anywhere; user-select: text; }
.ed-md ul, .ed-md ol { margin: 4px 0; padding-left: 1.4em; white-space: normal; }
.ed-md li { white-space: pre-wrap; margin: 2px 0; }
.ed-md .h { font-weight: 700; margin: 10px 0 4px; color: var(--cyan); }
.ed-md .h1 { font-size: 1.2em; } .ed-md .h2 { font-size: 1.08em; }
.ed-md blockquote { margin: 4px 0; padding: 2px 0 2px 10px; border-left: 3px solid var(--holo); }
.ed-md hr { border: none; border-top: 1px solid var(--line); margin: 8px 0; }
.ed-md code { padding: 1px 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.1); font-size: 0.92em; }
.ed-md a { color: var(--cyan); }
.ed-sketches, .ed-pages { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }   /* einzelne Seite/Skizze nutzt die volle Breite */
.ed-sk, .ed-page { margin: 0; display: grid; gap: 4px; min-width: 0; }
.ed-sk img { width: 100%; max-height: 420px; object-fit: contain; background: #fff; border-radius: 10px; padding: 6px; }
.ed-page img { width: 100%; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.ed-sk figcaption, .ed-page figcaption { font-size: 0.8em; color: var(--muted); overflow-wrap: anywhere; }
.ed-det summary { cursor: pointer; color: var(--cyan); padding: 6px 0; }
.ed-sec { display: grid; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(5, 10, 24, 0.4); }
.ed-sec h3, .ed-sec h4 { margin: 0; font-size: 1em; }
.ed-sec h4 small { color: var(--muted); font-weight: 400; font-size: 0.85em; }
.ed-task { display: grid; gap: 4px; padding: 8px 0; border-top: 1px solid var(--line); }
.ed-task:first-of-type { border-top: none; }
.ed-sol { margin: 6px 0 0; padding: 6px 10px; border-radius: 8px; background: rgba(77, 255, 166, 0.08); }
.ed-fb { padding: 8px 0; border-top: 1px solid var(--line); }
.ed-foot { margin-top: 4px; }
.ed-pick { gap: 10px; }
.ed-pickbtn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 16px; border-radius: 10px; cursor: pointer; color: var(--text); font-size: 1em; background: linear-gradient(180deg, #2a5bd7, #1d3f9e); border: 1px solid rgba(143, 240, 255, 0.35); }
.todo-edit label.ed-pickbtn { display: inline-flex; color: var(--text); font-size: 1em; }
.ed-pickbtn.ghost { background: transparent; }
.ed-prev { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.ed-prev:empty { display: none; }
.ed-pv { position: relative; display: grid; gap: 2px; min-width: 0; }
.ed-pv img, .ed-pv .ed-ph { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; display: grid; place-items: center; font-size: 30px; background: rgba(127, 184, 255, 0.08); }
.ed-pv small { font-size: 0.7em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-pv button { position: absolute; top: 4px; right: 4px; background: rgba(5, 10, 24, 0.8); }
.ed-clist { display: grid; gap: 8px; }
.ed-crow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(5, 10, 24, 0.45); }
.ed-cq { display: grid; gap: 2px; min-width: 0; flex: 1 1 220px; }
.ed-cq b, .ed-cq span { overflow-wrap: anywhere; white-space: pre-wrap; }
.ed-cq span { color: var(--muted); font-size: 0.9em; }
.ed-cq small { color: var(--muted); font-size: 0.75em; }
/* Lernmodus: große Karte zum Umdrehen */
.ed-learn { display: grid; gap: 12px; }
.ed-progrow { display: flex; align-items: center; gap: 10px; }
.ed-progrow small { color: var(--muted); white-space: nowrap; }
.ed-prog { flex: 1; height: 8px; border-radius: 999px; background: rgba(127, 184, 255, 0.15); overflow: hidden; }
.ed-prog i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--holo), var(--cyan)); transition: width 0.3s ease; }
.ed-card { perspective: 1200px; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.ed-card:focus-visible .ed-face { box-shadow: 0 0 0 2px var(--cyan); }
.ed-card-in { display: grid; transition: transform 0.45s ease; transform-style: preserve-3d; }
.ed-card.flip .ed-card-in { transform: rotateY(180deg); }
.ed-face { grid-area: 1 / 1; display: grid; align-content: center; gap: 10px; min-height: min(46vh, 340px); padding: 22px 18px; border-radius: 16px; text-align: center; font-size: 1.12em; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid rgba(143, 240, 255, 0.35); background: linear-gradient(160deg, rgba(42, 91, 215, 0.3), rgba(10, 20, 48, 0.9)); min-width: 0; }
.ed-face small { color: var(--muted); font-size: 0.72em; }
.ed-back { transform: rotateY(180deg); background: linear-gradient(160deg, rgba(123, 108, 255, 0.3), rgba(10, 20, 48, 0.9)); }
.ed-face .ed-md ul, .ed-face .ed-md ol { text-align: left; }
.ed-tap { color: var(--muted); font-size: 0.7em; opacity: 0.8; }
/* Akkusparmodus / weniger Bewegung: kein Drehen, Seiten einfach umschalten */
.ed-card.ed-still .ed-card-in, .akku .ed-card-in { transition: none; transform: none !important; }
.ed-card.ed-still .ed-face, .akku .ed-card .ed-face { backface-visibility: visible; transform: none; }
.ed-card.ed-still .ed-back, .akku .ed-card .ed-back { visibility: hidden; }
.ed-card.ed-still.flip .ed-back, .akku .ed-card.flip .ed-back { visibility: visible; }
.ed-card.ed-still.flip .ed-front, .akku .ed-card.flip .ed-front { visibility: hidden; }
.akku .ed-prog i, .akku .ed-wait::before { transition: none; animation: none; }
@media (prefers-reduced-motion: reduce) { .ed-card-in, .ed-prog i { transition: none; } .ed-wait::before { animation: none; } }
.ed-rate { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
button.ed-r { padding: 16px 10px; font-size: 1.02em; font-weight: 600; border-radius: 12px; }
button.ed-r.ok { background: linear-gradient(180deg, #1f9e62, #146b43); border-color: rgba(77, 255, 166, 0.5); }
button.ed-r.mid { background: linear-gradient(180deg, #b8862a, #7d5a17); border-color: rgba(255, 200, 90, 0.5); }
button.ed-r.bad { background: linear-gradient(180deg, #b83a4a, #7d2330); border-color: rgba(255, 90, 90, 0.5); }
button.ed-r:disabled { opacity: 0.45; }
button.ed-r.on { opacity: 1; box-shadow: 0 0 0 2px #fff; }
.ed-sum { justify-items: center; text-align: center; }
.ed-sum .ed-fbk { text-align: left; width: 100%; }
.ed-big { font-size: 48px; line-height: 1; }
.ed-sum h3 { margin: 0; }
.ed-score { font-size: 1.4em; font-weight: 700; color: var(--cyan); margin: 0; }
/* Quiz */
.ed-qbox { padding: 16px; border-radius: 14px; font-size: 1.1em; border: 1px solid rgba(143, 240, 255, 0.35); background: rgba(42, 91, 215, 0.18); }
.ed-opts { display: grid; gap: 8px; }
button.ed-opt { padding: 14px 16px; text-align: left; font-size: 1em; border-radius: 12px; background: rgba(5, 10, 24, 0.55); border: 1px solid var(--line); min-height: 52px; }
button.ed-opt.ok { background: rgba(31, 158, 98, 0.45); border-color: #4dffa6; }
button.ed-opt.bad { background: rgba(184, 58, 74, 0.45); border-color: #ff5a5a; }
button.ed-opt:disabled { cursor: default; }
.ed-ans { display: grid; gap: 4px; color: var(--muted); font-size: 0.9em; }
.ed-ans textarea { width: 100%; min-width: 0; }
.ed-fbk { display: grid; gap: 6px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(5, 10, 24, 0.5); }
.ed-fbk.ok { border-color: rgba(77, 255, 166, 0.6); }
.ed-fbk.bad { border-color: rgba(255, 90, 90, 0.6); }
.ed-expl { color: var(--muted); font-size: 0.92em; }
/* Einstellungen */
.todo-edit label.ed-row { display: flex; gap: 8px; align-items: center; color: var(--text); font-size: 0.95em; }
.todo-edit label.ed-row input { width: auto; }
.ed-flist { display: grid; gap: 6px; }
.ed-frow { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 6px; align-items: center; }
#edFNew.ed-frow { grid-template-columns: 56px minmax(0, 1fr) auto; }
.ed-frow input { min-width: 0; width: 100%; }
.ed-ficon { text-align: center; }
/* Lernstand */
.ed-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.ed-kpis div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(5, 10, 24, 0.5); }
.ed-kpis b { font-size: 1.5em; color: var(--cyan); }
.ed-kpis small { color: var(--muted); font-size: 0.78em; }
.ed-leitner { display: grid; gap: 10px; }
.ed-lrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; align-items: end; }
.ed-lname { overflow-wrap: anywhere; font-size: 0.9em; }
.ed-lbars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; height: 52px; }
.ed-lb { position: relative; display: flex; align-items: flex-end; border-radius: 6px; background: rgba(127, 184, 255, 0.08); overflow: hidden; }
.ed-lb i { display: block; width: 100%; background: var(--holo); }
.ed-lb.b1 i { background: #ff5a8a; } .ed-lb.b2 i { background: #ffc85a; } .ed-lb.b3 i { background: #7fb8ff; } .ed-lb.b4 i { background: #8ff0ff; } .ed-lb.b5 i { background: #4dffa6; }
.ed-lb small { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; font-size: 0.7em; color: #fff; text-shadow: 0 0 3px #000; }
.ed-qr { margin: 0; overflow-wrap: anywhere; }
.ed-qr small { color: var(--muted); }
/* Fächer: Farbe + Langname (Stundenplan) */
.ed-flist .ed-frow { grid-template-columns: 56px minmax(0, 1fr) 44px auto auto; }
.ed-frow .ed-fcolor { width: 44px; height: 36px; padding: 2px; min-width: 0; cursor: pointer; }
.ed-frow .ed-flang { grid-column: 2 / -1; font-size: 0.88em; }
.ed-flist .ed-frow + .ed-frow { padding-top: 6px; border-top: 1px solid var(--line); }
/* Stundenplan */
.ed-klasse { color: var(--muted); font-size: 0.75em; font-weight: 400; }
button.ed-nowline { text-align: left; padding: 10px 12px; border-radius: 10px; font-size: 0.9em; background: rgba(42, 91, 215, 0.18); border: 1px solid rgba(143, 240, 255, 0.3); overflow-wrap: anywhere; }
.ed-now { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ed-now > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(143, 240, 255, 0.35); background: linear-gradient(135deg, rgba(42, 91, 215, 0.22), rgba(123, 108, 255, 0.14)); min-width: 0; }
.ed-now small { color: var(--muted); font-size: 0.75em; }
.ed-now b { color: var(--cyan); overflow-wrap: anywhere; }
.ed-now span { font-size: 0.85em; overflow-wrap: anywhere; }
.ed-plan-wrap { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.ed-plan { display: grid; grid-template-columns: 52px repeat(5, minmax(96px, 1fr)); gap: 3px; min-width: 540px; }
.ed-pd { grid-row: 1; text-align: center; font-weight: 600; font-size: 0.85em; padding: 4px 0; border-radius: 6px; color: var(--muted); }
.ed-pd.today { color: var(--cyan); background: rgba(143, 240, 255, 0.12); }
.ed-pt { grid-column: 1; display: grid; align-content: center; justify-items: center; gap: 1px; font-size: 0.8em; color: var(--muted); }
/* Handy: Stundenzeiten bleiben beim waagerechten Scrollen links stehen (deckend, sonst schimmern die Blöcke durch) */
.ed-pt, .ed-ph0 { position: sticky; left: 0; z-index: 2; background: #0b1632; border-radius: 6px; }
.ed-pt b { color: var(--text); }
.ed-pt small { font-size: 0.82em; line-height: 1.15; text-align: center; }
.ed-pc { border-radius: 6px; background: rgba(127, 184, 255, 0.05); }
.ed-pc.today { background: rgba(143, 240, 255, 0.09); }
button.ed-pb { z-index: 1; display: grid; align-content: start; gap: 1px; min-width: 0; padding: 5px 6px; text-align: left; border-radius: 8px; font-size: 0.82em; line-height: 1.2;
  border: 1px solid rgba(255, 255, 255, 0.12); border-left: 4px solid var(--fc, var(--holo)); background: rgba(5, 10, 24, 0.75); background: color-mix(in srgb, var(--fc, #4f8cff) 26%, rgba(5, 10, 24, 0.85)); overflow: hidden; }
button.ed-pb b { overflow-wrap: anywhere; }
button.ed-pb small { color: var(--text); opacity: 0.8; font-size: 0.9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.ed-pb .ed-pnote { white-space: normal; font-style: italic; }
button.ed-pb.now { box-shadow: 0 0 0 2px #fff, 0 0 14px var(--fc, var(--holo)); }
.ed-fristen { display: grid; gap: 8px; }
button.ed-frist { display: grid; grid-template-columns: minmax(64px, auto) minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 10px; text-align: left; border-radius: 10px; border: 1px solid var(--line); border-left: 4px solid var(--fc, var(--holo)); background: rgba(5, 10, 24, 0.5); min-width: 0; }
button.ed-frist.warn { border-color: rgba(255, 200, 90, 0.6); border-left-color: var(--fc, var(--holo)); }
button.ed-frist.late { background: rgba(255, 90, 90, 0.08); }
.ed-fk { font-weight: 600; font-size: 0.85em; overflow-wrap: anywhere; }
.ed-ft { display: grid; gap: 2px; min-width: 0; }
.ed-ft b { overflow-wrap: anywhere; }
.ed-ft small { color: var(--muted); font-size: 0.8em; overflow-wrap: anywhere; }
.ed-ft small.ed-fwarn { color: #ffc85a; }
.ed-rlist { display: grid; gap: 6px; }
.ed-rrow { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.ed-rrow input { min-width: 0; width: 100%; }
.ed-crow .ed-dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: var(--fc, var(--holo)); }
@media (max-width: 520px) {
  .ed-flist .ed-frow { grid-template-columns: 40px minmax(0, 1fr) 36px auto auto; gap: 4px; }
  .ed-frow .ed-fcolor { width: 36px; }
  .ed-now { grid-template-columns: minmax(0, 1fr); }
  .ed-rrow { grid-template-columns: 52px minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 4px; }
  button.ed-frist { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ed-today { padding: 12px; }
  .ed-today .ed-go { width: 100%; }
  .ed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ed-sketches, .ed-pages { grid-template-columns: minmax(0, 1fr); }
  .ed-lrow { grid-template-columns: minmax(0, 1fr); }
  .ed-frow { grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 4px; }
  #edFNew.ed-frow { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .ed-face { min-height: 42vh; font-size: 1.05em; }
}

/* ---------- ✏️ Schlicht-Modus (Auftrag DigC 04.11.) ----------
   Pro Gerät (localStorage 'ysii-schlicht', Klasse .lineart am <html>, gesetzt in index.html und app.js).
   Nur der Chat: weiß, schwarze Linien, keine Verläufe, Schatten, Leuchten oder Filter; Hologramm ausgeblendet.
   Emojis, Bilder, Comics, Anhänge und Audio bleiben farbig; Module, Einstellungen und Login bleiben wie sie sind. */
.la-only { display: none; }
html.lineart .la-only { display: inline-flex; }
html.lineart #app { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); background: #fff; }   /* auch am Handy: nur der Chat */
html.lineart .stage { display: none; }
html.lineart .chat {
  --text: #111; --muted: #444; --line: #111; --holo: #111; --cyan: #111; --panel: #fff;
  color-scheme: light; background: #fff; color: #111;
}
/* Stimmungsfarbe kommt inline an jeder Ysii-Nachricht (app.js), deshalb hier !important */
html.lineart .chat .msg { --mc: #111 !important; }
html.lineart .chat *, html.lineart .chat *::before, html.lineart .chat *::after { box-shadow: none !important; text-shadow: none !important; filter: none !important; }
/* Kopfleiste */
html.lineart .chat-head { justify-content: flex-start; gap: 10px; background: #fff; color: #111; border-bottom: 1.5px solid #111; }
html.lineart .chat-head .head-right { margin-left: auto; }
html.lineart .chat-head #who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #444; font-size: 0.85em; }
html.lineart .la-title { align-items: baseline; gap: 8px; font-weight: 600; white-space: nowrap; }
html.lineart .la-state { font-weight: 400; font-size: 0.8em; color: #444; }
@media (max-width: 600px) { html.lineart .chat-head #who { display: none; } }   /* Handy: Platz für die Knöpfe, „Ysii“ reicht */
/* Knöpfe und Felder: weiß, schwarze Linie */
html.lineart .chat button { background: #fff; color: #111; border: 1.5px solid #111; }
html.lineart .chat button:hover { background: #f2f2f2; }
html.lineart .chat button:focus-visible, html.lineart .chat input:focus-visible, html.lineart .chat textarea:focus-visible, html.lineart .chat a:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
html.lineart .head-right > .icon-btn, html.lineart .mod-wrap > .icon-btn { border-radius: 8px; }
html.lineart .chat input, html.lineart .chat select, html.lineart .chat textarea { background: #fff; color: #111; border: 1.5px solid #111; }
html.lineart .chat ::placeholder { color: #666; opacity: 1; }
html.lineart .conn { background: #fff; border: 1.5px solid #111; }
html.lineart .conn.on { background: #111; }
/* LCDs: einfarbig, Ziffern schwarz */
html.lineart .chat .lcd { background: #fff; border: 1.5px solid #111; border-radius: 6px; }
html.lineart .chat .lcd .lcd-cap { color: #111; }
html.lineart .chat .lcd rect { fill: rgba(0, 0, 0, 0.07); }
html.lineart .chat .lcd rect.on, html.lineart .chat .lcd.zero rect.on { fill: #111; }
html.lineart .chat .cb-lcd .cb-lcd-led { background: #fff; border: 1.5px solid #111; }
/* Zustand über Form statt Farbe: ok gefüllt, Warnung dicker Ring, Fehler gefüllt und blinkend */
html.lineart .chat .cb-lcd .cb-lcd-led:is(.cb-ok, .cb-err) { background: #111; }
html.lineart .chat .cb-lcd .cb-lcd-led.cb-warn { background: #fff; border-width: 3.5px; }
/* Zähler an Knöpfen */
html.lineart .chat .todo-btn.has-n::after, html.lineart .chat .ak-badge, html.lineart .chat .to-bottom .badge { background: #111; color: #fff; }
/* Modul-Menü: weißes Feld, Kacheln mit Linie (Emojis bleiben) */
html.lineart .chat .mod-menu { background: #fff; border: 1.5px solid #111; }
html.lineart .chat .mod-menu .icon-btn { background: #fff; border: 1.5px solid #111; color: #111; }
html.lineart .chat .mod-menu .icon-btn:hover { background: #f2f2f2; }
/* Suche */
html.lineart .search-bar { background: #fff; border-bottom: 1.5px solid #111; }
html.lineart .chat mark.hit { background: transparent; color: inherit; text-decoration: underline 2px; }
html.lineart .chat mark.hit.cur { background: #111; color: #fff; }
/* Nachrichten: Ysii links mit spitzer Ecke unten links, eigene rechts mit 2px-Linie und spitzer Ecke unten rechts */
html.lineart .msgs { background: #fff; scrollbar-color: #111 transparent; }
html.lineart .chat .msg { color: #111; }
html.lineart .chat .msg.ysii { background: #fff; border: 1.5px solid #111; border-radius: 14px 14px 14px 3px; }
html.lineart .chat .msg.user { background: #fff; border: 2px solid #111; border-radius: 14px 14px 3px 14px; }
html.lineart .chat .msg .meta { color: #444; }
html.lineart .chat .msg .meta .src { background: transparent; border: 1px solid #111; }
html.lineart .chat .msg a, html.lineart .chat .msg.user a { color: #111; text-decoration: underline; }
html.lineart .chat .msg a.att { text-decoration: none; }
html.lineart .chat .msg code { background: transparent; border: 1px solid #111; }
html.lineart .chat .msg blockquote { border-left-color: #111; }
html.lineart .chat .msg hr { border-top-color: #111; }
html.lineart .chat .msg .att.file { background: #fff; border: 1px solid #111; color: #111; }
html.lineart .chat .msg .choices button { background: #fff; border: 1.5px solid #111; color: #111; }
html.lineart .chat .msg .choices button.picked { background: #111; color: #fff; }
html.lineart .chat .reacts .react { background: #fff; border: 1px solid #111; color: #111; }
html.lineart .chat .reacts .react.mine { border-width: 2px; }
/* kleine Symbole in den Nachrichten und Anhang-Chips ohne Rahmen */
html.lineart .chat .msg .play, html.lineart .chat .msg .react-add, html.lineart .chat .pending .x { background: none; border: none; color: #111; }
/* unten: Anhänge, „nach unten“, Eingabe, Aufnahme */
html.lineart .chat .pending .chip { background: #fff; border: 1.5px solid #111; color: #111; }
html.lineart .chat .to-bottom { background: #fff; border: 1.5px solid #111; }
html.lineart .composer, html.lineart .rec-bar { background: #fff; border-top: 1.5px solid #111; }
html.lineart .chat .rec-dot { background: #111; }
html.lineart .chat.drop { outline-color: #111; }
/* Punkt am ⚙ (offene Vorschläge für den Captain), schwarz statt rot */
html.lineart #laGear { position: relative; }
html.lineart #laGear.has-dot::after { content: ''; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: #111; }
/* weißer Hintergrund auch beim Überscrollen (iOS) – Login bleibt dunkel */
html.lineart body:has(#app:not([hidden])) { background: #fff; }
/* Handy: Kopfleiste passt mit allen 4 LCDs, ⚙ und 🔊 bleiben erreichbar */
@media (max-width: 600px) {
  html.lineart .chat-head { padding: 8px 10px; gap: 6px; }
  html.lineart .la-state { display: none; }
  html.lineart .chat .lcd { margin-right: 0; padding: 2px 4px; }
  html.lineart .chat-head .head-right { min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
}

/* Lerndeck: Blättern durch die Dokumente eines Fachs */
.ed-pager{justify-content:space-between;align-items:center;margin-bottom:4px}
.ed-pager .hint{margin:0}

/* Wischen im Lerndeck: waagerechte Gesten nicht als Browser-Zurück deuten (Test 05.11.: Wisch nach rechts verließ die App) */
html,body{overscroll-behavior-x:none}
#eduView{touch-action:pan-y pinch-zoom;overscroll-behavior-x:none}