/* ═══════════════════════════════════════════════════════════════
   DAD JOURNAL — DESIGN V4 „LAB-GRADE PRECISION" · APP
   Gestaltungsebene für app.html — gleiche Formsprache wie
   index / faq / checkout: scharfe Kanten, Glas-Panels,
   Mono-Micro-Labels, Akzentbalken, Datenzellen.

   WICHTIG: Alle Akzente laufen über var(--gold) / var(--gold2) /
   rgba(var(--accent),…) — dadurch funktionieren sämtliche Themes
   (Nasdaq-Blau, S&P-Rot, Dollar-Grün, Oil-Silber, Gold) weiterhin.
   Wird IMMER nach dem seiteneigenen <style> geladen.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Radien-Skala geschärft — greift auf alle Elemente, die die Tokens nutzen */
  --radius-sm:4px;
  --radius-md:6px;
  --radius-lg:8px;
  --line-app:rgba(255,255,255,.07);
  --line-app-2:rgba(255,255,255,.045);
}

/* ═══ 0. RUNDE INLINE-RADIEN EINFANGEN ═══
   Viele Karten/Panels sind direkt im Markup bzw. in JS-Templates mit festen
   Radien geschrieben (10–24px). Die werden hier auf die neue Skala gezogen,
   damit nichts weich aus der Reihe fällt. 50% (Punkte/Avatare) bleibt rund. */
[style*="border-radius:10px"],[style*="border-radius: 10px"],
[style*="border-radius:11px"],[style*="border-radius: 11px"]{
  border-radius:var(--radius-md)!important;}
[style*="border-radius:12px"],[style*="border-radius: 12px"],
[style*="border-radius:14px"],[style*="border-radius: 14px"],
[style*="border-radius:16px"],[style*="border-radius: 16px"],
[style*="border-radius:18px"],[style*="border-radius: 18px"],
[style*="border-radius:20px"],[style*="border-radius: 20px"],
[style*="border-radius:24px"],[style*="border-radius: 24px"]{
  border-radius:var(--radius-lg)!important;}

/* ═══ 1. KOPF & NAVIGATION ═══ */
header{border-bottom:1px solid var(--line-app)!important;}
.header-right{letter-spacing:.14em;}
.tab-btn{letter-spacing:.18em!important;font-size:9.5px!important;}
.tab-nav{border-bottom:1px solid var(--line-app);}
.tab-btn.active{border-bottom-width:2px!important;
  box-shadow:0 1px 0 0 rgba(var(--accent),.35);}
.acc-manage-btn{border-radius:var(--radius-sm)!important;}

/* ═══ 2. PANELS: Glas + scharfe Kante + Akzentbalken ═══ */
.kpi-cell,.equity-wrap,.cal-wrap,.symbol-table,.payout-card,.day-sidebar,
.trade-block,.coach-sidebar,.coach-main,.coach-session,.acc-card,
.rc-card,.rw-item2,.form-card,.ziel-card,.psych-card,.modal-inner{
  border-radius:var(--radius-md)!important;
}
.modal-box,.modal-inner,.login-box{border-radius:var(--radius-lg)!important;}

/* KPI-Kacheln: Linie oben → Akzentbalken links (wie die Datenmodule der Vorlage) */
.kpi-cell{position:relative;overflow:hidden;}
.kpi-cell::before{
  top:0!important;bottom:0!important;left:0!important;right:auto!important;
  width:2px!important;height:auto!important;border-radius:0!important;
  background:var(--gold)!important;opacity:.45!important;
  transition:opacity .2s;}
.kpi-cell:hover::before{opacity:1!important;}
.kpi-cell.gc::before{background:var(--green)!important;}
.kpi-cell.rc::before{background:var(--red)!important;}
.kpi-cell:hover{transform:translateY(-2px)!important;}

/* Panel-Hover einheitlich ruhiger */
.payout-card:hover,.acc-card:hover,.ziel-card:hover,.psych-card:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 0 0 1px rgba(var(--accent),.1),0 14px 40px rgba(0,0,0,.5)!important;}

/* ═══ 3. LABELS & ÜBERSCHRIFTEN ═══ */
.kpi-lbl,.goal-lbl,.wk-lbl,.cal-dow,.trade-sec-lbl,.field label,
.payout-markers span,.page-subtitle{letter-spacing:.18em!important;}
.kpi-sub,.di-num,.d-trades,.d-wr{letter-spacing:.1em;}

/* Sektionsköpfe: Punkt-Marker links, Meta-Angabe rechts (Muster der Vorlage) */
.sec{letter-spacing:.2em!important;gap:10px;padding-bottom:11px;
  justify-content:flex-start;   /* sonst schiebt space-between Köpfe OHNE Meta-Span nach rechts */
  border-bottom:1px solid var(--line-app)!important;}
.sec::before{content:'';width:5px;height:5px;flex-shrink:0;
  background:var(--gold2);box-shadow:0 0 6px rgba(var(--accent),.8);}
.sec > span:last-of-type{margin-left:auto;letter-spacing:.16em;}

.page-title{letter-spacing:-.02em;}

/* ═══ 4. TABELLEN: Datenzeilen mit Hover-Kante ═══ */
.wtable th{letter-spacing:.18em!important;}
.wtable tbody tr{border-left:2px solid transparent;transition:background .15s,border-color .15s;}
.wtable tbody tr:hover{border-left-color:var(--gold);}
.symbol-table{overflow:hidden;}

/* ═══ 5. KALENDER ═══ */
.cal-day.today{border-radius:0!important;outline-width:1px!important;}
.d-deadline{border-radius:var(--radius-sm)!important;letter-spacing:.1em;}
.wk-bar,.mbar,.goal-track,.goal-fill,.symbol-bar-track,.symbol-bar-fill{
  border-radius:2px!important;}

/* ═══ 6. CHIPS & BADGES: eckig statt Pille ═══ */
.chip{border-radius:3px!important;letter-spacing:.1em;text-transform:uppercase;}

/* ═══ 7. FORMULARE: technisch, mit Akzent-Unterkante ═══ */
.field input,.field select,.field textarea,
.field-input,.field-textarea,
.trade-row input,.trade-row select,.link-input,
.acc-dropdown,select{
  border-radius:var(--radius-sm)!important;}
.field input,.field select,.field textarea,
.field-input,.field-textarea,.link-input,.acc-dropdown,select{
  border-bottom-color:rgba(var(--accent),.28)!important;}
.field input:focus,.field select:focus,.field textarea:focus,
.field-input:focus,.field-textarea:focus,
.trade-row input:focus,.trade-row select:focus,.link-input:focus,
.acc-dropdown:focus,select:focus{
  border-color:var(--gold)!important;
  box-shadow:0 1px 0 0 var(--gold),0 4px 18px rgba(var(--accent),.12)!important;}
.field-label{letter-spacing:.18em;}

/* ═══ 8. BUTTONS ═══ */
.btn-save,.btn-add,.btn-add-account,.btn-backup,.lf-btn,
.btn-del,.btn-expand,.modal-close{border-radius:var(--radius-sm)!important;}
.btn-save,.lf-btn{letter-spacing:.16em!important;text-transform:uppercase;}
.btn-add,.btn-add-account,.btn-backup{letter-spacing:.14em;text-transform:uppercase;}

/* ═══ 9. MODALE ═══ */
.modal-head,.modal-foot{border-color:var(--line-app)!important;}
.modal-title{letter-spacing:.16em;text-transform:uppercase;font-size:12px;}

/* ═══ 10. JOURNAL-SEITENLEISTE ═══ */
.day-item{border-bottom:1px solid var(--line-app-2);}
.day-item.active{border-left-width:2px!important;}
.trade-row{border-radius:var(--radius-sm)!important;}
.trade-block{border-radius:var(--radius-sm)!important;}

/* ═══ 11. LOGIN-SCHIRM ═══ */
.login-box{border-radius:var(--radius-lg)!important;padding:42px 40px 36px!important;}
.login-sub{letter-spacing:.24em;}
.lf-field label{letter-spacing:.18em;}
.lf-field input{border-radius:var(--radius-sm)!important;
  border-bottom-color:rgba(var(--accent),.3)!important;}
.lf-field input:focus{border-color:var(--gold)!important;
  box-shadow:0 1px 0 0 var(--gold),0 4px 18px rgba(var(--accent),.12)!important;}
.lf-btn,.lf-btn2{border-radius:var(--radius-sm)!important;}
.lf-btn{letter-spacing:.18em;text-transform:uppercase;font-size:13px;}
.lf-btn2{letter-spacing:.1em;}

/* ═══ 12. TICKER ═══ */
.dad-ticker{border-bottom:1px solid var(--line-app)!important;}
.dad-live{letter-spacing:.2em;}
.dad-tick.flash{border-radius:2px;}

/* ═══════════════════════════════════════════════════════════════
   13. FORMSPRACHE DER STARTSEITE
   Übernimmt die Gestaltung von index.html in die App: kühles
   Blaugrau statt warmem Creme, Glas-Panels mit Haarlinien-Kante,
   IBM Plex Sans für Überschriften und Fließtext, ruhige Knöpfe
   ohne Versalien. Zahlen, Tabellen und Kennzahlen bleiben Mono —
   so wie sie es auch in den Produktbildern der Startseite sind.
   Nichts hier ändert Verhalten, nur Aussehen.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Farbklima 1:1 aus index.html.
     Wirkung auf die Themes: Diese Zeilen stehen NACH den [data-theme]-Blöcken
     in app.html und haben dieselbe Spezifität — dadurch teilen sich jetzt alle
     Themes dieselbe Grundfläche und unterscheiden sich nur noch in der
     Akzentfarbe (Blau, Gold, Rot, Silber, Grün). Genau so ist es auch auf der
     Startseite: eine Palette, ein Akzent. */
  --bg:#050505;
  --bg2:#0d0d0d;
  --bg3:#121317;
  --bg4:#181a1f;
  --text:#f0f2f8;
  --text2:#a8adbd;
  --dim:#8a8fa0;
  --dim2:rgba(255,255,255,.07);
  --line-app:rgba(255,255,255,.07);
  --line-app-2:rgba(255,255,255,.045);
  --panel-app:rgba(20,22,28,.45);
  --shadow-sm:none;
  --shadow-md:0 14px 40px rgba(0,0,0,.5);
}

/* ── 13.1 Kopfzeile wie die Navigation der Startseite ── */
header{
  background:rgba(6,7,9,.94)!important;
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.1)!important;
}
.tab-nav{
  background:rgba(6,7,9,.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-app);
}
.tab-btn.active{box-shadow:0 1px 0 0 rgba(var(--accent),.5);}

/* ── 13.2 Glas-Panels: derselbe Aufbau wie die Bento-Karten ── */
.kpi-cell,.equity-wrap,.cal-wrap,.payout-card,.acc-card,.rc-card,
.form-card,.ziel-card,.psych-card,.coach-sidebar,.coach-main,
.trade-block,.day-sidebar,.symbol-wrap,.goal-wrap,.payout-history-wrap{
  background:var(--panel-app)!important;
  border:1px solid var(--line-app)!important;
  box-shadow:none!important;
}
/* Bewusst OHNE backdrop-filter: die Startseite hat ein Dutzend Karten, das
   Dashboard hat hunderte Zellen. Ein Weichzeichner je Zelle kostet bei jedem
   Scrollen Rechenzeit; die durchscheinende Fläche allein ergibt denselben
   Eindruck. Weichgezeichnet wird nur die große Fläche: Kopf, Tableiste,
   Anmeldung. */
/* Hover: blaue Kante und ein ruhiger Auftrieb — wie .bc auf der Startseite */
.kpi-cell:hover,.payout-card:hover,.acc-card:hover,.ziel-card:hover,
.psych-card:hover,.rc-card:hover{
  border-color:rgba(var(--accent),.32)!important;
  box-shadow:0 0 0 1px rgba(var(--accent),.08),0 14px 40px rgba(0,0,0,.5)!important;
}
/* Innenflächen (Werteblöcke in Karten) heller absetzen statt neuer Kasten */
.trade-row,.payout-history-row,.rw-item2{
  background:rgba(255,255,255,.022)!important;
  border-color:var(--line-app-2)!important;
}

/* ── 13.3 Typografie: Sans für Titel und Fließtext ── */
.page-title,.modal-title,.psych-card-title,.settings-title,
.coach-title,.acc-card-name,.login-title{
  font-family:var(--sans)!important;
  letter-spacing:-.02em!important;
  text-transform:none!important;
  font-weight:600!important;
}
.page-title{font-weight:700!important;letter-spacing:-.03em!important;}
.page-subtitle,.settings-hint,.psych-lbl+span,.modal-sub{
  font-family:var(--sans)!important;color:var(--text2)!important;
}
/* Mono bleibt, wo Zahlen stehen — Kennzahlen, Tabellen, Kalender, Journal */
.kpi-val,.wtable,.cal-wrap,.payout-card-val,.acc-kpi,.di-pnl,.goal-num{
  font-family:var(--mono)!important;
}

/* ── 13.4 Sektionsköpfe: Punkt + blauer Meta-Chip ── */
.sec{font-family:var(--mono);}
.sec > span:last-of-type{
  border:1px solid rgba(var(--accent),.25);
  background:rgba(var(--accent),.06);
  border-radius:3px;padding:4px 9px;
  color:var(--gold2);font-size:8.5px;
}

/* ── 13.5 Knöpfe: ruhig, sans, ohne Versalien (Muster .h-btn) ── */
.btn-save,.btn-add,.btn-add-account,.btn-backup,.lf-btn,.payout-btn,
.acc-manage-btn,.btn-expand{
  font-family:var(--sans)!important;
  font-size:13px!important;
  font-weight:550!important;
  letter-spacing:normal!important;
  text-transform:none!important;
  border-radius:6px!important;
  padding:11px 22px!important;
}
.btn-save,.payout-btn,.lf-btn{
  background:var(--gold)!important;border:1px solid var(--gold)!important;color:#fff!important;
  box-shadow:none!important;
}
.btn-save:hover,.payout-btn:hover,.lf-btn:hover{background:var(--gold2)!important;border-color:var(--gold2)!important;}
.btn-add,.btn-add-account,.btn-backup,.acc-manage-btn,.btn-expand,.lf-btn2{
  background:transparent!important;
  border:1px solid rgba(255,255,255,.16)!important;
  color:var(--text)!important;
}
.btn-add:hover,.btn-add-account:hover,.btn-backup:hover,.acc-manage-btn:hover,.btn-expand:hover{
  border-color:rgba(var(--accent),.45)!important;background:rgba(var(--accent),.06)!important;
}

/* ── 13.6 Eingabefelder wie das Suchfeld der FAQ-Seite ── */
.field input,.field select,.field textarea,.field-input,.field-textarea,
.link-input,.acc-dropdown,select,.lf-field input,.psych-textarea{
  background:rgba(255,255,255,.02)!important;
  border:1px solid var(--line-app)!important;
  border-bottom-color:rgba(var(--accent),.35)!important;
}

/* ── 13.7 Anmeldung: derselbe Auftritt wie der Hero ── */
.login-box{
  background:var(--panel-app)!important;
  border:1px solid var(--line-app)!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 80px rgba(0,0,0,.6)!important;
}
.login-title{font-size:26px!important;}
.lf-btn{width:100%;}

/* ── 13.8 Modale ── */
.modal-box,.modal-inner{
  background:#0d0e12!important;
  border:1px solid var(--line-app)!important;
}

/* ── 13.9 Trennlinien und Tabellenkanten auf Haarlinie ── */
.wtable th,.wtable td,.cal-day,.day-item,.modal-head,.modal-foot,
.acc-list-item,.coach-msg{border-color:var(--line-app-2)!important;}
.wtable thead th{border-bottom:1px solid var(--line-app)!important;}

/* ── 13.10 Long Term und Evaluation mitziehen ──
   Beide Module bringen eigene Klassen mit (lt-*, ev-*). Damit sie nicht als
   Fremdkörper zwischen den Dashboards stehen, bekommen sie dieselbe Fläche. */
.lt-panel,.lt-metrik,.lt-info-block,.lt-filter,.ev-panel{
  background:var(--panel-app)!important;
  border:1px solid var(--line-app)!important;
  box-shadow:none!important;
}
.lt-metrik:hover{border-color:rgba(var(--accent),.32)!important;}
.lt-metrik-l,.lt-hinweis,.ev-hinweis{color:var(--dim)!important;}
.lt-inp,.lt-fsel,.lt-fsuche,.lt-fzahl,.lt-feld input,.lt-feld select{
  background:rgba(255,255,255,.02)!important;
  border:1px solid var(--line-app)!important;
  border-bottom-color:rgba(var(--accent),.35)!important;
}
.lt-tab{letter-spacing:.14em;}
.lt-bar{border-radius:2px!important;}