/* ============================================================================
   GODTRADER Design-Layer (aus GODTRADER.dc.html, Claude Design, 2026-08-21).

   Liegt NACH style.css im Kaskaden-Fluss und re-skinnt die bestehende
   Oberflaeche auf die Design-Sprache des Canvas: Bebas Neue fuer Headlines,
   Space Grotesk fuer UI, JetBrains Mono fuer Zahlen; Flaechen #05070d/#080a11,
   Brand-Lila #a855f7/#7c3aed/#e879f9. Die PnL-Semantik (gruen = Gewinn,
   rot = Verlust) bleibt unangetastet - nur die Marke wechselt die Farbe.
   ========================================================================== */

:root {
  --bg: #05070d;
  --bg-soft: #080a11;
  --surface: #0b0e17;
  --surface-2: #111827;
  --surface-3: #17203a;
  --brand: #a855f7;
  --brand-deep: #7c3aed;
  --brand-hot: #e879f9;
  --lavender: #c4b5fd;
  --lavender-soft: #e9d5ff;
}

body {
  font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
}

/* Sanfter Lila-Schimmer statt des alten roten Glimmens. */
body::before {
  background:
    radial-gradient(circle at 12% 10%, rgba(168, 85, 247, 0.16), transparent 45%),
    radial-gradient(circle at 88% 78%, rgba(109, 40, 217, 0.14), transparent 50%);
}

/* --- Typo: Headlines in Bebas, Zahlen in Mono ----------------------------- */

.market-header h2,
.login-intro h1,
.login-panel h2 {
  font-family: "Bebas Neue", "Space Grotesk", sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  animation: gtGlow 4s ease-in-out infinite;
}

.market-header h2 { font-size: 40px; line-height: 0.95; }

.eyebrow {
  color: var(--lavender);
  letter-spacing: 0.18em;
}

.metric-tile strong,
.spec-hero strong,
.spec-item strong,
.chart-stats strong,
.position-levels strong,
.stat-box .value,
.data-table td,
.runtime-grid strong,
.prob-labels,
#gt-clock {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --- Karten: Gradient-Flaeche, 14px-Radius, Licht-Streifen oben ----------- */

.signal-card,
.panel,
.status-strip,
.metric-tile,
.runtime-card .runtime-grid > div {
  border-radius: 14px;
}

.panel,
.signal-card,
.status-strip {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(145deg, rgba(17, 24, 39, 0.9), rgba(8, 11, 18, 0.78));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(12px);
}

.panel::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #a855f7, #e879f9, transparent);
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.45);
  animation: gtStripe 2.6s ease-in-out infinite;
  pointer-events: none;
}

/* Das eingeklappte Memory-Panel braucht keinen Leuchtstreifen. */
.memory-panel::before { display: none; }

/* --- Sidebar (Design: dunkle Leiste, Icon-Nav, Status-Fuss) --------------- */

.topbar {
  background: #080a11;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* --- Marken-Kopf oben links (Nutzer-Design 2026-08-22) -------------------
   Mini-Krone mit Bob+Glow, LETWINNERSRUN als Gradient-Text mit
   Shimmer-Lauf, "by SH1N3XX" zwischen Haarlinien; dazu Atmen-Orb,
   schraeger Sheen-Streif und glimmende 2px-Unterkante. */

.topbar-brand.lwr-brand {
  position: relative;
  padding: 24px 22px 20px;
  overflow: hidden;
  border-bottom: 1px solid rgba(168, 85, 247, 0.22);
  background: radial-gradient(120% 130% at 30% -20%, rgba(124, 58, 237, 0.28), rgba(8, 10, 17, 0) 60%);
}
.lwr-brand-orb {
  position: absolute;
  left: -40px; top: -52px;
  width: 170px; height: 170px;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.32), transparent 68%);
  animation: lwrBreathe 5s ease-in-out infinite;
}
.lwr-brand-sheen { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lwr-brand-sheen span {
  position: absolute;
  top: 0; bottom: 0;
  width: 56px;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(232, 121, 249, 0.14), rgba(255, 255, 255, 0.18), rgba(232, 121, 249, 0.14), transparent);
  animation: lwrSheen 4.5s ease-in-out infinite;
}
/* Canvas-Iteration 2026-08-22 nachmittags: aus der Zeile wurde eine
   zentrierte Spalte - Krone thront ueber dem Schriftzug. */
.lwr-brand-row { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lwr-brand-text { width: 100%; text-align: center; }
.lwr-brand-crown {
  flex: 0 0 auto;
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.75)) drop-shadow(0 0 22px rgba(168, 85, 247, 0.4));
  animation: lwrCrownBob 5s ease-in-out infinite;
}
.lwr-brand-line {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #a855f7, #e879f9, #a855f7, transparent);
  background-size: 220% 100%;
  animation: lwrShimmer 5.5s linear infinite;
  opacity: 0.85;
}

.gt-logo {
  font-family: "Bebas Neue", sans-serif;
  font-size: 31px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  background: linear-gradient(90deg, #fff 0%, #f5d0fe 30%, #a855f7 55%, #f5d0fe 80%, #fff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(168, 85, 247, 0.6));
  animation: lwrShimmer 5.5s linear infinite;
}

.gt-logo-sub {
  margin-top: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.85);
}
.gt-logo-sub i { height: 1px; width: 22px; background: linear-gradient(90deg, transparent, rgba(232, 121, 249, 0.8)); }
.gt-logo-sub i:last-child { background: linear-gradient(90deg, rgba(232, 121, 249, 0.8), transparent); }

@keyframes lwrShimmer { 0% { background-position: 220% 0; } 100% { background-position: -220% 0; } }
@keyframes lwrSheen { 0% { left: -70px; } 55% { left: calc(100% + 30px); } 100% { left: calc(100% + 30px); } }
@keyframes lwrCrownBob {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.75)) drop-shadow(0 0 22px rgba(168, 85, 247, 0.4)); }
  50% { transform: translateY(-2px); filter: drop-shadow(0 0 12px rgba(232, 121, 249, 0.9)) drop-shadow(0 0 30px rgba(168, 85, 247, 0.55)); }
}
@keyframes lwrBreathe {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

.nav-item {
  border-radius: 8px;
  font-weight: 700;
}

.nav-item.active {
  background: rgba(168, 85, 247, 0.18);
  color: #fff;
  border-color: transparent;
  box-shadow: none;
}

.nav-item .gt-nav-svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: currentColor;
}

.gt-side-status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 14px 10px;
  padding: 9px 11px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
}

.gt-side-status i {
  width: 7px; height: 7px;
  border-radius: 999px;
  flex-shrink: 0;
  animation: gtDot 2s ease-in-out infinite;
}

.gt-avatar {
  width: 34px; height: 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800; color: #fff;
  flex-shrink: 0;
}

/* --- Command-Bar: Status-Pill + Uhr statt Such-Attrappe ------------------- */

.gt-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  height: 30px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gt-status-pill i {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  animation: gtDot 2s ease-in-out infinite;
}

.gt-status-pill.live { background: rgba(34, 197, 94, 0.14); color: #6dffbf; }
.gt-status-pill.paused { background: rgba(255, 209, 102, 0.12); color: #ffd166; }
.gt-status-pill.off { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6); }

#gt-clock {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.38);
}

/* --- Buttons & Chips ------------------------------------------------------ */

button.primary,
.login-submit {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  border: none;
  color: #fff;
  font-weight: 800;
}

.chip.active {
  background: rgba(168, 85, 247, 0.22);
  border-color: rgba(168, 85, 247, 0.5);
  color: #f3e8ff;
}

input:focus, select:focus, textarea:focus {
  border-color: rgba(168, 85, 247, 0.55) !important;
  outline: none;
}

input[type="range"] { accent-color: #a855f7; }

/* --- Richtungs-Badges im Design-Look (Gradient-Pills) --------------------- */

.badge-long, .direction-badge.long {
  background: linear-gradient(135deg, #6dffbf, #2dd4bf) !important;
  color: #062014 !important;
  border: none !important;
  font-weight: 900;
}

.badge-short, .direction-badge.short {
  background: linear-gradient(135deg, #ff2a2a, #ff7777) !important;
  color: #fff7f2 !important;
  border: none !important;
  font-weight: 900;
}

/* --- Keyframes aus dem Canvas --------------------------------------------- */

@keyframes gtGlow {
  0%, 100% { text-shadow: 0 0 22px rgba(168, 85, 247, 0.32); }
  50% { text-shadow: 0 0 32px rgba(168, 85, 247, 0.52); }
}
@keyframes gtStripe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes gtDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes gtFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes gtPing2 {
  0% { transform: scale(0.6); opacity: 0.55; }
  100% { transform: scale(1.9); opacity: 0; }
}
@keyframes gtLineIn {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes gtBootBar { from { width: 0%; } to { width: 100%; } }
@keyframes gtWordReveal {
  0%, 68% { opacity: 0; transform: scale(0.9); }
  82%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes gtCandleIn {
  from { opacity: 0; transform: scaleY(0.4); }
  to { opacity: 1; transform: scaleY(1); }
}
@keyframes gtDrawLine { from { stroke-dashoffset: 500; } to { stroke-dashoffset: 0; } }

.screen-content > .market-header,
.dashboard-screen > .market-header {
  animation: gtFadeUp 0.4s ease both;
}

@media (prefers-reduced-motion: reduce) {
  .panel::before, .gt-logo, .market-header h2 { animation: none !important; }
  .gt-intro { display: none; }
}

/* --- Restfeinschliff: verbliebene Brand-Rot-Akzente -> Lila ---------------
   Bewusst NICHT umgefaerbt: button.danger, .close-position-btn, .badge.short,
   .pill-dot.paused - dort bedeutet Rot Gefahr/Short/Verlust, nicht Marke. */

.nav-item .gt-nav-svg {
  grid-row: 1 / -1;
  align-self: center;
  justify-self: center;
}

button.primary {
  box-shadow: 0 12px 30px rgba(168, 85, 247, 0.28);
}

.login-hero::after {
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0, rgba(255, 255, 255, 0.045) 1px, transparent 1px, transparent 7px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.22), transparent 24%, transparent 74%, rgba(232, 121, 249, 0.16));
}

.login-panel { border-top-color: rgba(168, 85, 247, 0.52); }

.brand-avatar,
.topbar-brand img {
  border-color: rgba(168, 85, 247, 0.75) !important;
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.36) !important;
}

.search-row input {
  background:
    linear-gradient(90deg, rgba(168, 85, 247, 0.08), transparent 26%),
    rgba(10, 8, 18, 0.88);
}

.search-item:hover { background: rgba(168, 85, 247, 0.12); }

/* --- Intro: Crown-Drop, originalgetreu aus GODTRADER.dc.html ---------------
   Neue Fassung (Nutzer-Design 2026-08-22, lwi*-Keyframes): 3,2s in einer
   Szene - die KRONE schlaegt von oben ein (Shake + Flash + Schockwellen-
   Ringe + Partikel-Bursts + Floor-Glow), dann fliegen die Buchstaben der
   Wortmarke einzeln mit 3D-Kipp herein, ein Sheen fegt drueber, Tags und
   Boot-Bar folgen. Cinema-Bars, Filmkorn, Vignette. Klick ueberspringt.
   Markup mit Inline-Styles 1:1 aus dem Canvas (playIntro in main.js);
   hier liegen nur Overlay-Rahmen und Keyframes. Abblende bei 3,2s,
   Ende 3,9s. */

.gt-intro {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  background: #020106;
  cursor: pointer;
  transition: opacity 0.6s ease;
}
.gt-intro.fading { opacity: 0; pointer-events: none; }

/* 3,2s-Fahrplan des Canvas (lwi*-Familie, 2026-08-22) */
@keyframes lwiFlash { 0% { opacity: 0; } 8%, 12% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes lwiRing { 0%, 9% { opacity: 0; transform: scale(0.1); } 16% { opacity: 0.95; } 55%, 100% { opacity: 0; transform: scale(2.7); } }
@keyframes lwiRing2 { 0%, 12% { opacity: 0; transform: scale(0.1); } 19% { opacity: 0.7; } 70%, 100% { opacity: 0; transform: scale(3.3); } }
@keyframes lwiCrown {
  0% { opacity: 0; transform: translateY(-44vh) scale(3.2); filter: blur(16px); }
  10% { opacity: 1; transform: translateY(0) scale(0.92); filter: blur(0px); }
  16% { transform: translateY(0) scale(1.07); }
  24%, 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0px); }
}
@keyframes lwiShake {
  0%, 9% { translate: 0 0; }
  12% { translate: -8px 6px; }
  15% { translate: 7px -5px; }
  18% { translate: -5px 3px; }
  21% { translate: 3px -2px; }
  24%, 100% { translate: 0 0; }
}
@keyframes lwiBurst { 0%, 9% { opacity: 0; transform: translateX(0) scale(1); } 15% { opacity: 1; } 62%, 100% { opacity: 0; transform: translateX(230px) scale(0.15); } }
@keyframes lwiBurstB { 0%, 9% { opacity: 0; transform: translateX(0) scale(1); } 15% { opacity: 1; } 55%, 100% { opacity: 0; transform: translateX(150px) scale(0.1); } }
@keyframes lwiFloorGlow { 0%, 9% { opacity: 0; transform: scaleX(0.3); } 25% { opacity: 0.85; } 100% { opacity: 0.5; transform: scaleX(1); } }
@keyframes lwiLetter {
  from { opacity: 0; transform: translateY(30px) rotateX(55deg); filter: blur(10px); }
  to { opacity: 1; transform: translateY(0) rotateX(0deg); filter: blur(0px); }
}
@keyframes lwiWordGlow {
  0%, 25% { filter: drop-shadow(0 0 0 rgba(168, 85, 247, 0)); }
  55%, 100% { filter: drop-shadow(0 0 26px rgba(168, 85, 247, 0.55)) drop-shadow(0 0 70px rgba(168, 85, 247, 0.3)); }
}
@keyframes lwiWordSheen {
  0%, 40% { left: -90px; opacity: 0; }
  45% { opacity: 1; }
  62% { left: calc(100% + 50px); opacity: 1; }
  63%, 100% { left: calc(100% + 50px); opacity: 0; }
}
@keyframes lwiTag { 0%, 45% { opacity: 0; transform: translateY(10px); } 58%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes lwiTagB { 0%, 52% { opacity: 0; transform: translateY(10px); } 65%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes lwiBoot { 0%, 58% { width: 0%; } 96%, 100% { width: 100%; } }
@keyframes lwiSettle { 0% { transform: scale(1.08); } 30% { transform: scale(1); } 100% { transform: scale(1.015); } }
@keyframes lwrRays { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes lwrBarIn { from { transform: scaleY(0); } to { transform: scaleY(1); } }


/* Hero-Panel: warm-roter Altbestand -> Canvas-Flaeche mit Lila-Anstrich. */
.market-header {
  border-color: rgba(255, 255, 255, 0.1);
  border-left-color: #a855f7;
  background:
    linear-gradient(110deg, rgba(168, 85, 247, 0.14), transparent 40%),
    linear-gradient(145deg, rgba(17, 24, 39, 0.92), rgba(8, 11, 18, 0.86));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  border-radius: 14px;
}
.market-header::before {
  background-image: linear-gradient(90deg, rgba(196, 181, 253, 0.06) 1px, transparent 1px);
}

/* --- Feinschliff auf Nutzerfeedback (2026-08-21 abends) ------------------- */

/* Schlanke, dunkle Scrollbalken ueberall - die klobigen System-Balken haben
   die Karten zerschnitten. Duenn, rund, Lila beim Anfassen. */
* { scrollbar-width: thin; scrollbar-color: rgba(168, 85, 247, 0.35) rgba(255, 255, 255, 0.04); }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(168, 85, 247, 0.28);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: rgba(168, 85, 247, 0.5); }

/* Offene Positionen: Tabelle so verdichten, dass sie ohne Querscrollen in
   ihre Panel-Haelfte passt - die P&L-Zeile brach vorher fuenffach um. */
#positions-slot .data-table { table-layout: auto; }
#positions-slot .data-table td {
  padding: 8px 6px;
  font-size: 12px;
  white-space: nowrap;
}
#positions-slot .data-table th {
  padding: 8px 6px;
  font-size: 10px;
  white-space: normal;
}
#positions-slot .direction-badge,
#positions-slot .badge {
  padding: 2px 7px;
  font-size: 10px;
}
#positions-slot .data-table td small { font-size: 10px; }
#positions-slot .close-position-btn { height: 28px; padding: 0 10px; font-size: 10.5px; }

/* Strategie-Erinnerung: aus dem rohen <pre>-Klotz eine ruhige Lesekarte. */
.memory-panel summary {
  cursor: pointer;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  padding: 2px 0;
  list-style: none;
}
.memory-panel summary::-webkit-details-marker { display: none; }
.memory-panel summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 9px;
  color: #a855f7;
  transition: transform 0.2s ease;
}
.memory-panel[open] summary::before { transform: rotate(90deg); }
.memory-pre {
  margin: 14px 0 0;
  max-height: 290px; /* Fallback, wenn nicht im Spalten-Stretch */
  overflow: auto;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  background: rgba(5, 7, 13, 0.6);
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
  white-space: pre-wrap;
}

/* Zwei unabhaengige Spalten statt eines Rasters mit gekoppelten Zeilenhoehen:
   vorher riss die hohe Positionen-Karte rechts eine Luecke zwischen
   Strategie-Erinnerung und Entscheidungs-Log links. */
.dash-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* --- Chart-Screen (GODTRADER Chart.dc.html) ------------------------------- */

.gt-chart-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.gt-chart-title { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.gt-chart-title .symbol {
  font-family: "Bebas Neue", sans-serif;
  font-size: 34px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}
.gt-chart-title .venue {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.gt-chart-price { text-align: right; }
.gt-chart-price .last {
  font-family: "JetBrains Mono", monospace;
  font-size: 30px;
  font-weight: 800;
  color: #fff;
}
.gt-chart-price .change {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
}

.gt-tf-row { margin: 10px 0 4px; }
.chip.gt-tf {
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  font-weight: 800;
  border-radius: 999px;
}

/* Scan-Lichtband: ein lila Lichtstreifen wandert alle 7s ueber die Kerzen. */
.gt-chart-frame { position: relative; }
.gt-scan-belt {
  position: absolute;
  inset: 0 0 30px 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 8px;
}
.gt-scan-belt i {
  position: absolute;
  top: 0; bottom: 0;
  width: 130px;
  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.12), transparent);
  animation: gtScan 7s linear infinite;
}
@keyframes gtScan {
  from { transform: translateX(-160px); }
  to { transform: translateX(110vw); }
}
@media (prefers-reduced-motion: reduce) { .gt-scan-belt { display: none; } }

/* Positions-Tabelle, letzte Runde: Kleinzeilen duerfen umbrechen, nur die
   Hauptwerte bleiben einzeilig - damit passt alles ohne Querscrollen. */
#positions-slot .data-table td small { white-space: normal; }
#positions-slot .close-position-btn { padding: 0 8px; }
#positions-slot .data-table td { padding: 8px 5px; }

/* Scan-Band sicher ueber den Chart-Canvases + letzte Pixel der Tabelle. */
.gt-scan-belt { z-index: 5; }
#positions-slot .data-table td:first-child { padding-left: 2px; }
#positions-slot .data-table td:last-child { padding-right: 2px; }

/* 4px Restueberhang: Symboltext minimal kleiner, dann passt die Tabelle satt. */
#positions-slot .data-table td:first-child { font-size: 11.5px; }
#positions-slot .data-table th:nth-child(3) { max-width: 64px; }

/* Trade-Level-Pills an der rechten Chart-Kante (Nutzerwunsch): die Kurs-Skala
   bleibt links, Stop/Entry/Take-Profit/Live-Preis stehen rechts am Level. */
.gt-right-tags {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 30px;
  width: 0;
  pointer-events: none;
  z-index: 6;
}
.gt-tag {
  position: absolute;
  right: 4px;
  transform: translateY(-50%);
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2.5px 8px;
  border-radius: 5px;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* Der Stop-Pill ist der Griff zum Nachziehen (Owner 2026-09-04: "direkt an dem
   Stop-Loss-Button ziehen"): als einziges Tag klickbar, Cursor bleibt bewusst
   der normale Pfeil, Beruehrung startet keinen Seiten-Scroll. */
#gt-tag-stop {
  pointer-events: auto;
  cursor: default;
  user-select: none;
  touch-action: none;
}

/* Stop nachgezogen (Owner-Wunsch 2026-09-02): Pill pulst, Banner gleitet ein. */
.gt-tag.gt-tag-moved { animation: gtTagMoved 1.4s ease-out 2; }
@keyframes gtTagMoved {
  0% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.9), 0 2px 10px rgba(0, 0, 0, 0.45); transform: translateY(-50%) scale(1); }
  40% { box-shadow: 0 0 0 10px rgba(250, 204, 21, 0), 0 2px 10px rgba(0, 0, 0, 0.45); transform: translateY(-50%) scale(1.12); }
  100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0), 0 2px 10px rgba(0, 0, 0, 0.45); transform: translateY(-50%) scale(1); }
}
.gt-stop-banner {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 8;
  transform: translateX(-50%) translateY(-6px);
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(250, 204, 21, 0.65);
  background: rgba(20, 14, 4, 0.92);
  color: #fde68a;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 24px rgba(250, 204, 21, 0.25);
  animation: gtBannerIn 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
  pointer-events: none;
}
.gt-stop-banner .ico { color: #facc15; font-weight: 800; margin-right: 4px; }
.gt-stop-banner b { color: #fff; }
.gt-stop-banner b.up { color: #22c55e; }
.gt-stop-banner.out { animation: gtBannerOut 0.6s ease-in both; }
@keyframes gtBannerIn { from { opacity: 0; transform: translateX(-50%) translateY(-18px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes gtBannerOut { to { opacity: 0; transform: translateX(-50%) translateY(-12px); } }

/* Live-Vorschau am gezogenen Stop (2026-09-04): folgt der Linie, zeigt Preis
   und gesicherte USDT, waehrend die Maus die Stop-Linie verschiebt. */
#gt-stop-drag-tip {
  position: absolute;
  left: 14px;
  z-index: 9;
  padding: 6px 12px;
  border-radius: 9px;
  border: 1px solid rgba(250, 204, 21, 0.65);
  background: rgba(20, 14, 4, 0.94);
  color: #fde68a;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 18px rgba(250, 204, 21, 0.22);
  pointer-events: none;
}
#gt-stop-drag-tip b { color: #fff; }
#gt-stop-drag-tip b.up { color: #22c55e; }
#gt-stop-drag-tip b.down { color: #f04464; }

/* Changelog-Redesign (Owner 2026-09-04): Neuheiten gross und leuchtend,
   gewoehnliche Updates kompakt. */
.cl-entry.cl-compact { padding: 12px 18px; }
.cl-entry.cl-compact .cl-title { font-size: 17px; }
.cl-entry.cl-compact .cl-sum { font-size: 12px; opacity: 0.8; margin: 3px 0 7px; }
.cl-entry.cl-compact .cl-items { font-size: 11.5px; opacity: 0.85; }
.cl-entry.cl-feature {
  border-color: rgba(168, 85, 247, 0.55);
  box-shadow: 0 0 36px rgba(168, 85, 247, 0.16), inset 0 0 46px rgba(168, 85, 247, 0.05);
}
.cl-entry.cl-feature .cl-title { font-size: 27px; }
.cl-entry.cl-feature .cl-sum { font-size: 14px; }
.cl-neu { color: #e879f9; letter-spacing: 0.12em; font-weight: 800; }

/* Bestaetigungsfenster im Deck-Design (Owner 2026-09-04) - ersetzt das
   Browser-confirm() beim Stop-Verschieben. */
.gt-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 2, 12, 0.72);
  backdrop-filter: blur(6px);
  animation: gtConfirmIn 0.18s ease-out both;
}
.gt-confirm {
  width: min(400px, calc(100vw - 40px));
  padding: 20px 22px 18px;
  border-radius: 16px;
  border: 1px solid rgba(168, 85, 247, 0.42);
  background: linear-gradient(180deg, rgba(24, 16, 44, 0.98), rgba(12, 8, 24, 0.98));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(168, 85, 247, 0.16);
}
.gt-confirm.danger { border-color: rgba(240, 68, 100, 0.5); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(240, 68, 100, 0.16); }
.gt-confirm h3 { margin: 4px 0 14px; font-size: 25px; letter-spacing: 0.04em; color: #fff; }
.gt-confirm-rows { display: grid; gap: 7px; }
.gt-confirm-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.gt-confirm-rows span { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(196, 181, 253, 0.62); }
.gt-confirm-rows strong { font-family: "JetBrains Mono", monospace; font-size: 13px; color: #fff; }
.gt-confirm-note { margin: 13px 0 0; font-size: 11.5px; line-height: 1.55; color: rgba(196, 181, 253, 0.72); }
.gt-confirm-acts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.gt-confirm-acts .lg-cta { min-width: 132px; }
@keyframes gtConfirmIn { from { opacity: 0; } to { opacity: 1; } }

/* ---- News-Reiter (Owner 2026-09-05: "wirklich nur relevante Cryptonews ...
   gerne auch mit Bildern und grafisch an den Rest der Homepage angepasst") ----

   Dieselbe Glas-Karte, dieselben Lila-Verlaeufe, dieselbe Mono-Vorzeile wie im
   Rest des Decks. Die erste Meldung bekommt die grosse Karte: bei Nachrichten
   ist die Rangfolge die halbe Aussage, und eine Wand aus gleich grossen
   Kacheln wuerde sie einebnen. */
/* Kursleiste im Seitenkopf (Owner 2026-09-05): fuenf grosse Werte, jeder ein
   Knopf in seinen Chart. Bewusst flach und mono wie die uebrige Kopfzeile -
   sie soll ablesbar sein, nicht um Aufmerksamkeit kaempfen. */
/* Kursleiste im Seitenkopf (Owner 2026-09-05). Bewusst OHNE Rahmen, Grund und
   Trennstriche: die gerahmte Bandfassung war dem Owner zu laut ("das
   neutralere war viel besser"). Es bleibt schlichter Mono-Text wie der Rest
   der Kopfzeile - nur beim Ueberfahren hebt sich der einzelne Wert ab, damit
   erkennbar bleibt, dass er anklickbar ist.

   `align-items: center` auf BEIDEN Ebenen: die Zeilenhoehe der Kurse ist
   groesser als die der Prozentzahl daneben, und mit `baseline` sass die
   Leiste dadurch sichtbar hoeher als "BOT AKTIV". */
.head-coins {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.head-coins::-webkit-scrollbar { display: none; }
.head-coin {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  line-height: 1.2;
  color: rgba(233, 213, 255, 0.6);
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}
.head-coin:hover {
  background: rgba(168, 85, 247, 0.14);
  border-color: rgba(232, 121, 249, 0.45);
  color: #f5d0fe;
}
.head-coin .hc-sym { font-weight: 700; letter-spacing: 0.06em; color: rgba(233, 213, 255, 0.85); }
.head-coin .hc-price { color: inherit; }
.head-coin .hc-chg { font-size: 9.5px; font-weight: 700; }
.head-coin .hc-chg.up { color: #2dd481; }
.head-coin .hc-chg.down { color: #f04464; }
/* Keine Muenzen mehr ausblenden: das Band scrollt, also bleibt jeder Wert
   erreichbar. Nur die Tagesveraenderung faellt eng weg - sie ist die
   Zusatzinformation, der Kurs ist die Hauptsache. */
/* Gemessen: mit Tagesveraenderung braucht das Band rund 620px. Ab hier
   abwaerts ist die dafuer noetige Luft weg, also faellt die Veraenderung -
   der Kurs ist die Hauptsache, die Veraenderung die Zugabe. */
@media (max-width: 1400px) {
  .head-coin .hc-chg { display: none; }
  .head-coin { padding: 3px 9px; }
}
/* Gemessen: mit 48vw blieben bei 900px nur 14px Luft zum Schriftzug links.
   Das Band nimmt hier deshalb weniger und scrollt entsprechend frueher. */
@media (max-width: 1024px) {
  .head-coins { max-width: 30vw; }
  .head-coin { padding: 3px 8px; font-size: 10.5px; }
}

/* `.l3d-page` ist `position:absolute; inset:0` und zentriert seinen Inhalt
   senkrecht - fuer jeden bisherigen Reiter richtig, denn die passen alle auf
   einen Schirm. Eine Nachrichtenliste passt nicht: zentriert schob sie ihren
   eigenen Anfang aus dem Bild, und weil nichts scrollte, war die oberste (also
   wichtigste) Meldung schlicht nicht erreichbar. Diese Seite faengt deshalb
   oben an und scrollt selbst. */
.l3d-page.news-page {
  align-items: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Doppelklasse, sonst gewinnt `.msg-wrap { width: min(760px,100%) }` aus
   lwr3d.css - die Datei wird nach dieser geladen, und beide Regeln waeren
   sonst gleich stark. Mit 760px stuenden hier statt vier nur zwei Spalten. */
.msg-wrap.news-wrap { width: min(1180px, 94vw); }
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  /* Ohne `start` streckt das Raster jede Karte auf die hoechste der Zeile -
     eine Meldung ohne Bild wurde so zu einem hohen leeren Kasten. */
  align-items: start;
  gap: 13px;
  margin-top: 13px;
}
.news-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  border-radius: 15px;
  border: 1px solid rgba(168, 85, 247, 0.3);
  background: linear-gradient(165deg, rgba(24, 16, 43, 0.9), rgba(9, 11, 20, 0.92));
  box-shadow: 0 12px 30px rgba(4, 6, 12, 0.45), inset 0 1px 0 rgba(233, 213, 255, 0.06);
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.news-card:hover {
  transform: translateY(-2px);
  border-color: rgba(232, 121, 249, 0.55);
  box-shadow: 0 18px 40px rgba(4, 6, 12, 0.6), 0 0 26px rgba(232, 121, 249, 0.14);
}
/* Die Heldenkarte: Bild links, Text rechts - und auf schmalen Schirmen
   untereinander wie die uebrigen. */
.news-card.hero { flex-direction: row; align-items: stretch; }
.news-card.hero .news-shot { flex: 0 0 44%; max-width: 44%; }
.news-card.hero .news-shot img { height: 100%; min-height: 190px; }
.news-card.hero .news-body { justify-content: center; gap: 9px; padding: 20px 22px; }
.news-card.hero .news-title { font-size: 20px; line-height: 1.28; }
.news-shot { position: relative; overflow: hidden; background: rgba(168, 85, 247, 0.08); }
/* Bild blendet ein, sobald es geladen ist (main.js setzt "ok"); der Kasten
   bleibt im Layout. display:none war falsch: ein lazy geladenes Bild in einem
   unsichtbaren Kasten laedt nie (Owner: "bitte Bilder wieder rein"). */
.news-shot img { opacity: 0; transition: opacity 0.4s ease; }
.news-shot.ok img { opacity: 1; }
.news-shot img { display: block; width: 100%; height: 152px; object-fit: cover; }
/* Ein Farbschleier legt die fremden Pressebilder auf die Palette des Decks -
   ohne ihn wirkt jede Karte wie ein Fremdkoerper. */
.news-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.16), rgba(9, 11, 20, 0.62));
}
.news-body { display: flex; flex-direction: column; gap: 7px; padding: 13px 15px 15px; }
.news-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.6);
}
.news-dot { opacity: 0.4; }
.news-tag {
  padding: 2px 8px;
  border-radius: 99px;
  font-weight: 700;
  letter-spacing: 0.1em;
  border: 1px solid currentColor;
  background: rgba(168, 85, 247, 0.12);
}
.news-tag.reg { color: #c4b5fd; }
.news-tag.etf { color: #7dd3fc; }
.news-tag.sec { color: #fda4af; }
.news-tag.macro { color: #fbbf24; }
.news-tag.venue { color: #f5d0fe; }
.news-tag.net { color: #86efac; }
.news-tag.mkt { color: rgba(233, 213, 255, 0.75); }
.news-dir { font-size: 10px; }
.news-dir.up { color: #2dd481; }
.news-dir.down { color: #f04464; }
.news-title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.36;
  color: #f6efff;
}
.news-sum { font-size: 12.5px; line-height: 1.55; color: rgba(196, 181, 253, 0.72); }
.news-coins { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.news-coin {
  padding: 1px 7px;
  border-radius: 99px;
  border: 1px solid rgba(168, 85, 247, 0.3);
  background: rgba(168, 85, 247, 0.1);
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  color: rgba(233, 213, 255, 0.8);
}
@media (max-width: 720px) {
  .news-card.hero { flex-direction: column; }
  .news-card.hero .news-shot { flex: none; max-width: 100%; }
  .news-card.hero .news-shot img { height: 178px; min-height: 0; }
  .news-card.hero .news-body { padding: 14px 16px 16px; }
  .news-card.hero .news-title { font-size: 17px; }
}

/* Suchzeile: der Slash ist Marke, kein Verlust. */
.search-icon { color: #a855f7; }
.search-row input:focus {
  border-color: rgba(168, 85, 247, 0.7);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.12);
}

/* Metric-Kacheln (Balance/Equity/...): raus aus den grauen Kaesten, rein in
   die Kartenflaeche des Designs - ueberall, auch im Hero und auf System. */
.metric-tile {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(5, 7, 13, 0.55);
  box-shadow: none;
}
.metric-tile span { color: rgba(196, 181, 253, 0.55); }

.market-pulse {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
}
.market-pulse > div { background: #0b0e17; }

/* Chart-Rahmen: das graublaue Altbild passt nicht mehr - dunkle Lila-Flaeche
   mit ruhigen Spaltenlinien, wie die Chart-Karte im Canvas. */
.chart-frame {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background:
    repeating-linear-gradient(90deg, rgba(196, 181, 253, 0.025) 0, rgba(196, 181, 253, 0.025) 1px, transparent 1px, transparent 64px),
    linear-gradient(145deg, rgba(17, 24, 39, 0.55), rgba(5, 7, 13, 0.85));
}


/* Spalten-Buendigkeit ohne Pixelraten: beide Spalten strecken auf gleiche
   Hoehe, und das letzte Panel jeder Spalte nimmt den Rest auf - links waechst
   die Strategie-Erinnerung, rechts die Positionen-Karte. Kein Spalt mehr,
   egal wie lang das Strategie-Dokument oder wie viele Positionen offen sind. */
.dashboard-grid { align-items: stretch; }
.dash-col > *:last-child { flex: 1 1 auto; }
.dash-col > .memory-panel { flex: 0 0 auto; }
.dash-col > .memory-panel[open] {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.memory-panel[open] .memory-pre {
  /* flex-basis 0 + height 0: der Inhalt darf die Spaltenhoehe nicht treiben -
     sonst diktiert das 34-KB-Dokument beide Spalten (gemessen: 17.229px). */
  flex: 1 1 0;
  height: 0;
  min-height: 240px;
  max-height: none;
}


/* Chart-Karte: fehlte in der Kartenliste und blieb grau-teal. */
.chart-panel {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(17, 24, 39, 0.9), rgba(8, 11, 18, 0.78));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

/* Loeschen einzelner Trades im Tradelog. */
.trade-delete-btn {
  color: var(--red);
  border-color: rgba(240, 68, 100, 0.4);
}
.trade-delete-btn:hover:not(:disabled) { background: rgba(240, 68, 100, 0.12); }

/* Login: letzte Koralle-Akzente -> Designfarben. */
.login-intro h1 span { color: #c4b5fd !important; -webkit-text-fill-color: #c4b5fd; background: none !important; }
.intro-copy-block .eyebrow { color: #c4b5fd; }
.login-boot-line b, .login-boot .num, .intro-step .step-num { color: #a855f7 !important; }

/* Lightbox fuer die PnL-Kartenvorschau. */
.gt-lightbox {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(5, 7, 13, 0.86);
  backdrop-filter: blur(6px);
}
.gt-lightbox-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: min(92vw, 520px);
}
.gt-lightbox-inner img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: 14px;
  border: 1px solid rgba(168, 85, 247, 0.35);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6), 0 0 40px rgba(168, 85, 247, 0.15);
}
.gt-lightbox-actions { display: flex; gap: 10px; }