/* ===========================================================
   Element-Upgrade (Layout unverändert): Icon-Chips, Kanten-Licht,
   Sparklines in Kacheln, Verlaufsflächen unter Linien, Symbolbalken,
   Kalender-Zellen, Bot-Marker. Lädt nach shared.css.
   =========================================================== */

/* --- Kacheln & Panels: Licht-Kante oben, statt flacher 1px-Linie --- */
.hero-item, .kpi-tile, .panel{position:relative; isolation:isolate;}
.hero-item::after, .kpi-tile::after, .panel::after{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; z-index:2;
  background:linear-gradient(160deg, color-mix(in srgb, var(--brand) 55%, rgba(255,255,255,.35)) 0%, rgba(157,180,208,.10) 28%, transparent 60%, color-mix(in srgb, var(--brand) 22%, transparent) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.55; transition:opacity .22s ease;
}
.hero-item:hover::after, .kpi-tile:hover::after, .panel:hover::after{opacity:.95;}
.live-panel::after{background:linear-gradient(160deg, color-mix(in srgb, var(--good) 60%, rgba(255,255,255,.3)) 0%, transparent 55%);}

/* --- Icon-Chips: gefüllt, mit Verlauf und weichem Glow --- */
.tile-icon{
  width:30px; height:30px; border-radius:9px; color:var(--chip, var(--ink-soft));
  background:linear-gradient(145deg, color-mix(in srgb, var(--chip, #9db4d0) 34%, transparent), color-mix(in srgb, var(--chip, #9db4d0) 10%, transparent));
  border:1px solid color-mix(in srgb, var(--chip, #9db4d0) 42%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 6px 18px -6px color-mix(in srgb, var(--chip, #9db4d0) 70%, transparent);
}
.tile-icon .ic{width:15px; height:15px;}
.tile-icon.good{--chip:var(--good);} .tile-icon.bad{--chip:var(--bad);}
.tile-icon.amber{--chip:#e3a83c;} .tile-icon.blue{--chip:#4f8ff7;} .tile-icon.violet{--chip:#9085e9;}
.tile-icon.teal{--chip:#2dd4bf;} .tile-icon.magenta{--chip:#d55181;} .tile-icon.accent{--chip:var(--brand);}

/* --- Sparkline / Ring in Kacheln (vom Script eingesetzt) --- */
.fx-spark{position:absolute; left:0; right:0; bottom:0; height:52%; z-index:0; pointer-events:none; opacity:.7;
  -webkit-mask:linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 30%, #000 75%); mask:linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 30%, #000 75%);
  border-bottom-left-radius:var(--radius);
  border-bottom-right-radius:var(--radius); overflow:hidden;}
.fx-spark svg{display:block; width:100%; height:100%;}
.hero-item > .tile-head, .hero-item > .hero-value, .kpi-tile > .tile-head, .kpi-tile > .kpi-value{position:relative; z-index:1;}
.fx-ring{position:absolute; right:20px; top:50%; transform:translateY(-50%); width:40px; height:40px; z-index:0; pointer-events:none;}
.fx-ring svg{display:block; width:100%; height:100%; overflow:visible;}

/* --- Bot-Marker: Ring mit Glow statt flachem Punkt --- */
.bots-name .nav-tab-dot{width:10px; height:10px; box-shadow:0 0 0 3px color-mix(in srgb, currentColor 0%, transparent), 0 0 12px -1px var(--dot-glow, rgba(79,143,247,.7));}

/* --- Nach Symbol: Balken mit Glanz und Glow --- */
.symx-track{background:rgba(157,180,208,.08); box-shadow:inset 0 1px 2px rgba(0,0,0,.35);}
.symx-fill{overflow:hidden; box-shadow:0 0 14px -3px var(--fill-glow, rgba(157,180,208,.55));}
.symx-fill::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 60%);}
.symx-fill.pos::after{background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%), linear-gradient(180deg, rgba(255,255,255,.22), transparent 60%);}
.symx-fill.neg::after{background:linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%), linear-gradient(180deg, rgba(255,255,255,.22), transparent 60%);}

/* --- Kalender: Gewinn-/Verlusttage mit Innenlicht --- */
.cal-cell.has-data{position:relative; overflow:hidden;}
.cal-cell.has-data::before{content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(120% 90% at 0% 0%, var(--cal-glow, transparent), transparent 62%);}
.cal-cell.has-data[class*="pos"], .cal-cell.has-data[class*="good"], .cal-cell.has-data[class*="win"]{--cal-glow:rgba(52,211,153,.22);}
.cal-cell.has-data[class*="neg"], .cal-cell.has-data[class*="bad"], .cal-cell.has-data[class*="loss"]{--cal-glow:rgba(248,113,113,.2);}

/* --- Chart-Tooltip: Glas-Karte wie die Panels --- */
.chart-tooltip{background:linear-gradient(165deg, rgba(22,40,74,.94), rgba(10,18,34,.96)); border-color:rgba(157,180,208,.26); box-shadow:0 18px 40px -16px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter:blur(8px);}

@media (prefers-reduced-motion: no-preference){
  @keyframes fxSparkIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
  .fx-spark, .fx-ring{animation:fxSparkIn .7s .25s cubic-bezier(.16,.8,.3,1) both;}
}

/* ===========================================================
   Integration: Inhalt liegt IN der Szene statt davor.
   - Szene blendet nicht mehr hart in Navy aus, sondern bleibt bis
     zum unteren Rand als gedämpftes Licht sichtbar
   - Panels sind echtes Glas (mehr Transparenz, mehr Blur), nehmen
     die Farben dahinter auf
   - Kanten weicher, Schatten diffuser
   =========================================================== */
body::after{
  background-image:
    radial-gradient(120% 70% at 50% 0%, rgba(8,14,26,0) 0%, rgba(8,14,26,.35) 55%, rgba(8,14,26,.72) 100%),
    linear-gradient(180deg, rgba(8,14,26,.10) 0, rgba(8,14,26,.30) 30vh, rgba(8,14,26,.58) 70vh, rgba(8,14,26,.74) 100vh),
    var(--scene, url('./bg/scene.webp'));
  background-position:center, top center, top center;
  background-size:100% 100%, 100% 100%, cover;
}
@media (max-width:700px){
  body::after{
    background-image:
      linear-gradient(180deg, rgba(8,14,26,.15) 0%, rgba(8,14,26,.45) 50%, rgba(8,14,26,.75) 100%),
      var(--scene, url('./bg/scene.webp'));
    background-position:center, center 30%;
    background-size:cover, cover;
  }
}

.panel, .hero-item, .kpi-tile, .masthead, .app-bar:not(.is-stuck){
  background:
    radial-gradient(560px 340px at 6% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%),
    linear-gradient(165deg, rgba(22,40,74,.46) 0%, rgba(15,26,48,.52) 50%, rgba(10,18,34,.60) 100%);
  border-color:rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.02), 0 30px 80px -40px rgba(0,0,0,.65);
  backdrop-filter:blur(18px) saturate(1.45);
  -webkit-backdrop-filter:blur(18px) saturate(1.45);
}
.hero-item, .kpi-tile{
  background:
    radial-gradient(280px 170px at 0% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%),
    linear-gradient(165deg, rgba(22,40,74,.42) 0%, rgba(15,26,48,.50) 55%, rgba(10,18,34,.58) 100%);
}
.live-panel{
  background:
    radial-gradient(620px 300px at 0% 0%, color-mix(in srgb, var(--good) 14%, transparent), transparent 70%),
    linear-gradient(165deg, rgba(22,40,74,.48) 0%, rgba(15,26,48,.54) 48%, rgba(10,18,34,.62) 100%);
}
/* ===========================================================
   KLARES GLAS: kaum Blur, keine Eintrübung — Szene bleibt scharf
   sichtbar. Lesbarkeit kommt über Fasen, Reflexion und Text-Halo,
   nicht über Milchigkeit.
   =========================================================== */
.panel, .hero-item, .kpi-tile, .masthead, .app-bar:not(.is-stuck){
  background:
    linear-gradient(118deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 34%, rgba(255,255,255,.10) 37%, rgba(255,255,255,.025) 44%, rgba(255,255,255,0) 50%),
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 14%),
    linear-gradient(165deg, rgba(8,14,26,.10) 0%, rgba(8,14,26,.22) 100%) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  border-bottom-color:rgba(255,255,255,.07) !important;
  border-right-color:rgba(255,255,255,.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 1px 0 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.30),
    inset -1px 0 0 rgba(0,0,0,.18),
    0 1px 1px rgba(0,0,0,.20),
    0 22px 44px -22px rgba(0,0,0,.55) !important;
  backdrop-filter:blur(2px) saturate(1.15) contrast(1.04) !important;
  -webkit-backdrop-filter:blur(2px) saturate(1.15) contrast(1.04) !important;
}
.hero-item, .kpi-tile{
  background:
    linear-gradient(118deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,.12) 35%, rgba(255,255,255,.03) 42%, rgba(255,255,255,0) 48%),
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 18%),
    linear-gradient(165deg, rgba(8,14,26,.08) 0%, rgba(8,14,26,.20) 100%) !important;
}
.live-panel{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40), inset 1px 0 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.30),
    0 22px 44px -22px rgba(0,0,0,.55), 0 30px 70px -44px color-mix(in srgb, var(--good) 55%, transparent) !important;
}
.hero-item::after, .kpi-tile::after, .panel::after{opacity:.22;}
.hero-item:hover::after, .kpi-tile:hover::after, .panel:hover::after{opacity:.45;}
.hero-item, .kpi-tile, .panel{transition:transform .3s cubic-bezier(.16,.8,.3,1), box-shadow .3s ease, background-position .6s ease; background-size:220% 100%, 100% 100%, 100% 100% !important; background-position:100% 0, 0 0, 0 0 !important;}
.hero-item:hover, .kpi-tile:hover{background-position:0% 0, 0 0, 0 0 !important;}
/* Szene: oben klar, nach unten dunkler, damit Glas unten noch lesbar bleibt */
body::after{
  z-index:-2 !important;
  background-color:#070b1c;
  /* Markenfarbe tradingportfolio.ch = Grün (#34d399, Logo-Glow). Oben links Grün,
     unten rechts in Teal/Blau auslaufend - eine Farbfamilie, kein Pink/Violett. */
  background-image:
    radial-gradient(40% 36% at 96% 96%, rgba(45,170,200,.34) 0%, rgba(40,120,190,.14) 48%, transparent 76%),
    radial-gradient(44% 40% at 2% 2%, rgba(52,211,153,.36) 0%, rgba(30,160,130,.13) 50%, transparent 78%),
    radial-gradient(70% 62% at 50% 48%, #080e1a 0%, rgba(8,14,26,.92) 45%, rgba(8,14,26,0) 100%),
    linear-gradient(135deg, #0a2a2a 0%, #0a1a26 28%, #080e1a 50%, #0a1526 74%, #0c2238 100%) !important;
  background-size:100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
@media (max-width:700px){ body::after{ background-size:140% 100%, 140% 100%, 100% 100%, 100% 100% !important; } }


/* Vertiefte Zonen: getöntes, aber klares Glas */
.trades-scroll-x{background-color:rgba(6,10,20,.42); border-radius:var(--radius-sm); box-shadow:inset 0 1px 3px rgba(0,0,0,.45); padding:14px 0 8px;}
.trades-scroll-x .trade-grid-head{padding-top:2px;}
.trades-scroll-x .table-scroll{background:transparent;}
.cal-cell{background-color:rgba(6,10,20,.40); box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
.tile-icon{backdrop-filter:none;}


/* ===========================================================
   Segmentierte Balken (Quadrat-Blöcke) für "Nach Symbol"
   =========================================================== */
.symx-track{height:10px; border-radius:5px; background:rgba(255,255,255,.06); box-shadow:none;}
.symx-fill{opacity:1; box-shadow:0 0 12px -4px var(--fill-glow, rgba(157,180,208,.55));}
.symx-fill::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 70%); border-radius:inherit;}
.symx-zero{background:rgba(255,255,255,.35); top:-4px; bottom:-4px;}

/* Sticky Header: grünes, durchscheinendes Glas statt vollem Blau */
.app-bar.is-stuck{
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 40%),
    linear-gradient(180deg, rgba(14,52,44,.62) 0%, rgba(8,30,28,.70) 100%) !important;
  border-color:rgba(52,211,153,.22) !important;
  border-top-color:transparent !important;
  box-shadow:
    inset 0 -1px 0 rgba(52,211,153,.28),
    inset 0 1px 0 rgba(255,255,255,.10),
    0 14px 34px -14px rgba(0,0,0,.6) !important;
  backdrop-filter:blur(14px) saturate(1.4) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.4) !important;
}

/* ===========================================================
   AURORA-HINTERGRUND: grosse, weich verschwommene Farbwolken in
   Markenfarben (Grün, Teal, Blau, ein Hauch Violett), die langsam
   wandern. Glas nimmt die Farbe auf. Mitte durch dunklen Kern ruhiger.
   =========================================================== */
body::after{
  background-color:#070c18 !important;
  background-image:
    radial-gradient(60% 55% at 50% 45%, rgba(7,12,24,.78) 0%, rgba(7,12,24,.45) 55%, rgba(7,12,24,0) 100%),
    linear-gradient(160deg, #081a22 0%, #070c18 45%, #0a1024 100%) !important;
  background-size:100% 100%, 100% 100% !important;
}
:root{--scene:none; --fx-c1:#34d399; --fx-c2:#2563eb; --fx-c3:#14b8a6; --fx-c4:#4f8ff7; --fx-c5:#7c6cf0;}
.fx-aurora{position:fixed; inset:-20vh -10vw; z-index:-1; pointer-events:none; overflow:hidden; will-change:transform;}
.fx-blob{position:absolute; display:block; border-radius:50%; filter:blur(80px); opacity:.55; mix-blend-mode:screen; will-change:transform;}
.fx-blob-a{width:52vw; height:52vw; left:-6vw;  top:-14vw; background:radial-gradient(circle at 40% 40%, var(--fx-c1) 0%, color-mix(in srgb, var(--fx-c1) 55%, transparent) 35%, transparent 70%);}
.fx-blob-b{width:46vw; height:46vw; right:-8vw; top:10vh;  background:radial-gradient(circle at 50% 50%, var(--fx-c2) 0%, color-mix(in srgb, var(--fx-c2) 50%, transparent) 35%, transparent 70%); opacity:.5;}
.fx-blob-c{width:58vw; height:58vw; right:-14vw; bottom:-22vw; background:radial-gradient(circle at 50% 50%, var(--fx-c3) 0%, color-mix(in srgb, var(--fx-c3) 50%, transparent) 35%, transparent 70%);}
.fx-blob-d{width:38vw; height:38vw; left:6vw;  bottom:-6vw; background:radial-gradient(circle at 50% 50%, var(--fx-c4) 0%, color-mix(in srgb, var(--fx-c4) 45%, transparent) 35%, transparent 70%); opacity:.42;}
.fx-blob-e{width:30vw; height:30vw; left:42vw; top:-8vw;  background:radial-gradient(circle at 50% 50%, var(--fx-c5) 0%, color-mix(in srgb, var(--fx-c5) 40%, transparent) 35%, transparent 70%); opacity:.32;}
/* feines Korn gegen Banding, wie in der Referenz */
.fx-grain{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");}
@media (prefers-reduced-motion: no-preference){
  @keyframes fxDriftA{0%{transform:translate(0,0) scale(1)}33%{transform:translate(14vw,10vh) scale(1.12)}66%{transform:translate(4vw,22vh) scale(.92)}100%{transform:translate(0,0) scale(1)}}
  @keyframes fxDriftB{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-18vw,18vh) scale(1.15)}100%{transform:translate(0,0) scale(1)}}
  @keyframes fxDriftC{0%{transform:translate(0,0) scale(1)}40%{transform:translate(-16vw,-14vh) scale(.9)}75%{transform:translate(-4vw,-24vh) scale(1.1)}100%{transform:translate(0,0) scale(1)}}
  @keyframes fxDriftD{0%{transform:translate(0,0)}50%{transform:translate(22vw,-12vh)}100%{transform:translate(0,0)}}
  @keyframes fxDriftE{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-12vw,26vh) scale(1.25)}100%{transform:translate(0,0) scale(1)}}
  .fx-blob-a{animation:fxDriftA 22s ease-in-out infinite;}
  .fx-blob-b{animation:fxDriftB 26s ease-in-out infinite;}
  .fx-blob-c{animation:fxDriftC 30s ease-in-out infinite;}
  .fx-blob-d{animation:fxDriftD 19s ease-in-out infinite;}
  .fx-blob-e{animation:fxDriftE 24s ease-in-out infinite;}
}
@media (max-width:700px){ .fx-blob{filter:blur(56px);} }

/* Avoid continuously compositing five large blurred layers on dashboards. */
body:has(#navTabs) .fx-blob{animation:none !important; will-change:auto;}

/* ===========================================================
   Hierarchie: die vier Hero-Kacheln dominieren, KPI-Leiste tritt zurück
   =========================================================== */
@media (min-width:821px){
  .hero-stats{gap:14px; margin-bottom:14px;}
  .hero-item{padding:24px 24px 22px !important; gap:16px !important; min-height:148px;}
  .hero-value{font-size:clamp(30px, 2.6vw, 42px) !important; font-weight:500; letter-spacing:-.03em; line-height:1;}
  .hero-value .unit{font-size:13px !important; margin-left:4px;}
  .hero-label{font-size:11px !important;}
  .hero-item .tile-icon{width:34px; height:34px; border-radius:10px;}
  .hero-item .tile-icon .ic{width:17px; height:17px;}
  .hero-item .fx-spark{height:58%;}
  .hero-item .fx-ring{width:52px; height:52px; right:22px;}

  .kpi-grid{gap:10px; margin-bottom:14px;}
  .kpi-tile{padding:12px 14px 12px !important; gap:8px !important; min-height:0;}
  .kpi-value{font-size:17px !important; letter-spacing:-.01em;}
  .kpi-value .unit{font-size:10px !important;}
  .kpi-label{font-size:9.5px !important; letter-spacing:.1em; white-space:normal; overflow:visible; text-overflow:clip; min-width:0; line-height:1.25;}
  .kpi-tile .tile-icon{width:22px; height:22px; border-radius:7px;}
  .kpi-tile .tile-icon .ic{width:12px; height:12px;}
  .kpi-tile .tile-head{gap:7px;}
  .kpi-tile .fx-ring{width:30px; height:30px; right:12px;}
}

/* ===========================================================
   HERO-KARTE: eine grosse Kachel statt vier
   =========================================================== */
.hero-stats:has(.hero-card){grid-template-columns:1fr !important;}
.hero-card{display:grid !important; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:40px !important; align-items:center; padding:30px 32px !important; min-height:210px; overflow:hidden;}
.hero-card .hc-main{position:relative; z-index:1; display:flex; flex-direction:column; gap:14px; min-width:0;}
.hero-card .hc-value{font-size:clamp(44px, 4.4vw, 68px) !important; font-weight:500; letter-spacing:-.035em; line-height:.95; color:var(--ink);}
.hero-card .hc-value .unit{font-size:15px !important; margin-left:8px; letter-spacing:.04em;}
.hc-chips{display:flex; gap:10px; flex-wrap:wrap;}
.hc-chip{display:flex; align-items:baseline; gap:10px; padding:8px 14px; border-radius:999px; border:1px solid; backdrop-filter:blur(4px);}
.hc-chip.good{color:var(--good); border-color:rgba(52,211,153,.35); background:rgba(52,211,153,.10);}
.hc-chip.bad{color:var(--bad); border-color:rgba(248,113,113,.35); background:rgba(248,113,113,.10);}
.hc-chip-label{font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.75;}
.hc-chip-value{font-family:var(--font-mono); font-size:17px; font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:-.01em;}

.hero-card .hc-side{position:relative; z-index:1; display:flex; flex-direction:column; gap:12px; min-width:0;}
.hc-ends{display:flex; justify-content:space-between; gap:16px;}
.hc-end{display:flex; flex-direction:column; gap:4px;}
.hc-end.right{text-align:right; align-items:flex-end;}
.hc-end-label{font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted);}
.hc-end-value{font-family:var(--font-mono); font-size:15px; font-weight:500; font-variant-numeric:tabular-nums; color:var(--ink-soft);}
.hc-end-value.good{color:var(--good);} .hc-end-value.bad{color:var(--bad);}
.hc-bar{display:grid; grid-template-columns:repeat(48, minmax(0,1fr)); gap:3px; height:34px;}
.hc-seg{display:block; border-radius:2px; background:rgba(157,180,208,.10);}
.hc-seg.base{background:linear-gradient(180deg, rgba(157,180,208,.62), rgba(157,180,208,.38));}
.hc-seg.gain{background:linear-gradient(180deg, #5eeab4, #22b07f); box-shadow:0 0 10px -2px rgba(52,211,153,.75);}
.hc-seg.loss{background:transparent; box-shadow:inset 0 0 0 1px rgba(248,113,113,.7);}
.hc-seg.gain:last-of-type, .hc-seg.gain + .hc-seg.off{}
.hc-legend{display:flex; gap:18px;}
.hc-lg{display:flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; color:var(--ink-muted);}
.hc-lg::before{content:''; width:8px; height:8px; border-radius:2px;}
.hc-lg.base::before{background:rgba(157,180,208,.55);}
.hc-lg.gain::before{background:#34d399; box-shadow:0 0 6px rgba(52,211,153,.8);}
.hc-lg.loss::before{box-shadow:inset 0 0 0 1px rgba(248,113,113,.8);}
/* Kurve im Hintergrund über die ganze Karte */
.hero-card .fx-spark{left:0; right:0; height:70% !important; opacity:.5; -webkit-mask:linear-gradient(90deg, transparent 0, rgba(0,0,0,.25) 35%, #000 85%); mask:linear-gradient(90deg, transparent 0, rgba(0,0,0,.25) 35%, #000 85%);}
@media (prefers-reduced-motion: no-preference){
  @keyframes hcSegIn{from{opacity:0; transform:scaleY(.3);} to{opacity:1; transform:none;}}
  .hc-seg{animation:hcSegIn .45s cubic-bezier(.16,.8,.3,1) both; animation-delay:var(--d, 0ms);}
}
@media (max-width:820px){
  .hero-card{grid-template-columns:1fr; gap:22px !important; padding:20px !important;}
  .hero-card .hc-value{font-size:40px !important;}
  .hc-bar{height:26px; gap:2px;}
}


/* Hero-Karte: Zahl + eine ruhige Delta-Zeile, ohne Unterstreichung/Schatten */
.hero-card .has-tip{text-decoration:none;}
.hero-card .hc-main{gap:18px !important;}
.hero-card .hc-value.good{color:var(--good) !important;}
.hero-card .hc-value.bad{color:var(--bad) !important;}
.hero-card .hc-value .unit{color:var(--ink-muted) !important;}
.hc-delta{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.hc-pill{display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; font-family:var(--font-mono); font-size:15px; font-weight:500; font-variant-numeric:tabular-nums; line-height:1; border:1px solid;}
.hc-delta.good .hc-pill{color:var(--good); border-color:rgba(52,211,153,.30); background:rgba(52,211,153,.10);}
.hc-delta.bad .hc-pill{color:var(--bad); border-color:rgba(248,113,113,.30); background:rgba(248,113,113,.10);}
.hc-arrow{font-size:10px;}
.hc-since{font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); margin-left:4px;}
.hc-row, .hc-caption, .hc-chips{display:none;}

/* KPI-Leiste: gleiche Innenabstände, nichts läuft über den Rand */
@media (min-width:821px){
  .kpi-grid{grid-template-columns:repeat(3, minmax(0,1fr)) !important;}
  .kpi-tile{padding:14px 16px !important; min-width:0;}
  .kpi-value{font-size:clamp(14px, 1.2vw, 17px) !important; min-width:0; overflow:hidden; text-overflow:ellipsis;}
  .kpi-value > span:first-child{overflow:hidden; text-overflow:ellipsis;}
}

/* KPI-Leiste: immer ausgewogen (3+3 oder 6), nie 5+1 / 4+2.
   6 Spalten erst, wenn der Inhaltsbereich breit genug ist. */
@media (min-width:1200px) and (max-width:999px){ .kpi-grid{grid-template-columns:repeat(6, minmax(0,1fr)) !important;} }
@media (min-width:1500px){ .kpi-grid{grid-template-columns:repeat(6, minmax(0,1fr)) !important;} }

/* ---------- Hero Variante B: Ring ---------- */
.hv-b .hc-side{flex-direction:row !important; align-items:center; justify-content:flex-end; gap:28px !important;}
.hc-ring-wrap{position:relative; width:184px; height:184px; flex:none;}
.hc-ring{width:100%; height:100%; display:block; overflow:visible;}
.hc-tick{stroke-width:3.2; stroke-linecap:round;}
.hc-tick.base{stroke:rgba(157,180,208,.5);}
.hc-tick.gain{stroke:#34d399; filter:drop-shadow(0 0 3px rgba(52,211,153,.8));}
.hc-tick.loss{stroke:rgba(248,113,113,.75);}
.hc-ring-mid{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;}
.hc-ring-pct{font-family:var(--font-mono); font-size:30px; font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.hc-ring-pct.good{color:var(--good);} .hc-ring-pct.bad{color:var(--bad);}
.hc-ring-legend{display:flex; flex-direction:column; gap:16px;}
.hc-ring-legend .hc-lg{font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;}
@media (prefers-reduced-motion: no-preference){
  @keyframes hcTickIn{from{opacity:0;} to{opacity:1;}}
  .hc-tick{animation:hcTickIn .4s ease both; animation-delay:var(--d, 0ms);}
}

/* ---------- Hero Variante C: Kurve vollflächig + Rechnung ---------- */
.hv-c{min-height:240px;}
.hv-c .fx-spark{height:100% !important; opacity:.9 !important; -webkit-mask:linear-gradient(90deg, transparent 0, rgba(0,0,0,.15) 30%, #000 70%) !important; mask:linear-gradient(90deg, transparent 0, rgba(0,0,0,.15) 30%, #000 70%) !important;}
.hv-c .hc-side{align-items:flex-end;}
.hc-steps{display:flex; flex-direction:column; gap:10px; min-width:220px; padding:16px 18px; border-radius:12px; background:rgba(6,10,20,.45); border:1px solid rgba(255,255,255,.08);}
.hc-step{display:flex; justify-content:space-between; align-items:baseline; gap:20px;}
.hc-step.total{padding-top:10px; border-top:1px solid rgba(255,255,255,.12);}
.hc-end-value.strong{font-size:17px; font-weight:600;}

@media (max-width:820px){ .hv-b .hc-side{flex-direction:column !important; align-items:flex-start;} .hv-c .hc-side{align-items:stretch;} }

/* ---------- Demo-Umschalter ---------- */
.fx-var-switch{position:fixed; right:20px; bottom:20px; z-index:90; display:flex; align-items:center; gap:4px; padding:5px; border-radius:999px; background:rgba(8,14,26,.82); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(10px); box-shadow:0 12px 30px -10px rgba(0,0,0,.6);}
.fx-var-switch span{font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); padding:0 8px 0 10px;}
.fx-var-switch button{font-family:var(--font-mono); font-size:11px; padding:7px 12px; border-radius:999px; border:0; background:transparent; color:var(--ink-soft); cursor:pointer;}
.fx-var-switch button:hover{color:var(--ink);}
.fx-var-switch button.on{background:#34d399; color:#062018;}

/* ===========================================================
   HERO-BOARD: Portfoliowert + Performance-Vergleich + Kennzahlen
   in einer grossen Glasplatte
   =========================================================== */
.hero-board{display:grid !important; grid-template-columns:minmax(300px, 0.78fr) minmax(0, 1.6fr); grid-template-areas:"left right" "kpis kpis"; gap:0 !important; padding:0 !important; overflow:hidden;}
.hb-left{grid-area:left; padding:30px 32px 28px; border-right:1px solid rgba(255,255,255,.08); min-width:0; display:flex;}
.hb-right{grid-area:right; padding:26px 28px 18px; min-width:0; display:flex; flex-direction:column;}
.hb-right .chart-wrap{flex:1 1 auto; min-height:clamp(240px, 24vw, 330px);}
.hb-right .chart-wrap > svg.chart{position:absolute; inset:0; width:100%; height:100% !important;}
.hb-right .panel-head{margin-bottom:6px;}
.hb-kpis{grid-area:kpis; margin:0 !important; border-top:1px solid rgba(255,255,255,.08); padding:4px 8px !important;}

/* Hero-Karte im Board: keine eigene Platte, Inhalt gestapelt */
.hero-board .hero-stats{display:block !important; margin:0 !important; width:100%;}
.hero-board .hero-card{display:flex !important; flex-direction:column; justify-content:space-between; gap:26px !important; padding:0 !important; min-height:0; height:100%;
  background:none !important; border:0 !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; transform:none !important;}
.hero-board .hero-card::after{display:none;}
.hb-legend-bottom{justify-content:center; margin:12px 0 0 !important;}
.hb-kpis .kpi-value, .hb-kpis .kpi-value > span:first-child{overflow:visible !important; text-overflow:clip !important; white-space:nowrap;}
.hero-board .hero-card{overflow:visible !important;}
/* Titel links = Titel rechts (h2 im panel-head) */
.hero-board .hc-main .tile-head{min-height:34px; margin:0;}
.hero-board .hero-label{font-family:var(--font-body) !important; font-size:15px !important; font-weight:600 !important; text-transform:none !important; letter-spacing:normal !important; color:var(--ink) !important;}
.hb-left{padding-top:26px !important;}
.hero-board .hero-card .fx-spark{display:none;}
.hero-board .hero-card .tile-icon{display:none;}
.hero-board .hc-value{font-size:clamp(46px, 4.6vw, 76px) !important; color:var(--ink) !important;}
.hero-board .hc-value.bad{color:var(--bad) !important;}
.hero-board .hc-pill.pct{font-size:20px; padding:10px 16px; border-radius:12px;}
.hero-board .hc-delta > .hc-pill:not(.pct){background:none !important; border:0 !important; padding:0 4px; font-size:20px; font-weight:600;}
.hero-board .hc-delta > .hc-pill:not(.pct) .hc-arrow{display:none;}
.hero-board .hc-since{margin:-12px 0 0; text-transform:none; letter-spacing:.02em; font-size:11px; font-weight:500;}
.hero-board .hc-side{padding-top:22px; border-top:1px solid rgba(255,255,255,.08); gap:12px !important;}
.hc-comp-title{font-family:var(--font-body); font-size:13px; font-weight:500; color:var(--ink-soft);}
.hc-comp{display:flex; height:30px; border-radius:7px; overflow:hidden; gap:2px;}
.hc-comp-seg{display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:11px; font-weight:600; min-width:34px;}
.hc-comp-seg.base{background:linear-gradient(180deg, #6e88b0, #4d6690); color:#e6eef8;}
.hc-comp-seg.gain{background:linear-gradient(180deg, #4fe8b0, #22b07f); color:#05261a;}
.hc-comp-seg.loss{background:rgba(248,113,113,.18); color:var(--bad); box-shadow:inset 0 0 0 1px rgba(248,113,113,.6);}
.hc-comp-pcts{display:flex; justify-content:space-between; margin-top:-4px; font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--ink-muted);}
.hc-comp-pcts .good{color:var(--good);} .hc-comp-pcts .bad{color:var(--bad);}
.hc-comp-legend{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.hc-comp-item{display:flex; flex-direction:column; gap:5px;}
.hc-comp-item .hc-lg{font-family:var(--font-body); font-size:12px; letter-spacing:0; color:var(--ink-muted);}
.hc-comp-item .hc-lg::before{border-radius:50%;}
.hc-comp-item .hc-lg.base::before{background:#6e88b0;}
.hc-comp-item .hc-end-value{padding-left:15px;}

/* Kennzahlen als Zeile mit Trennern, ohne eigene Kacheln */
.hero-board .kpi-grid{grid-template-columns:repeat(6, minmax(0,1fr)) !important; gap:0 !important;}
.hero-board .kpi-tile{display:grid !important; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; column-gap:12px; row-gap:4px; align-items:center;
  padding:20px 22px !important; background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; transform:none !important;}
.hero-board .kpi-tile::after{display:none;}
.hero-board .kpi-tile + .kpi-tile{border-left:1px solid rgba(255,255,255,.08) !important;}
.hero-board .kpi-tile .tile-head{display:contents;}
.hero-board .kpi-tile .tile-icon{grid-row:1 / 3; width:30px; height:30px; background:none !important; border:0 !important; box-shadow:none !important;}
.hero-board .kpi-tile .tile-icon .ic{width:20px; height:20px;}
.hero-board .kpi-label{font-family:var(--font-body) !important; font-size:12px !important; text-transform:none !important; letter-spacing:0 !important; color:var(--ink-muted); white-space:nowrap !important;}
.hero-board .kpi-value{font-size:20px !important; font-weight:500;}
.hero-board .kpi-tile .fx-ring{display:none;}

/* Umbruch nach verfügbarer Inhaltsbreite (nicht Fensterbreite – Seitenmenü frisst Platz) */
.page{container:page / inline-size;}
.hb-left{container:hbleft / inline-size;}
.hero-board .hc-value{font-size:clamp(40px, 17cqi, 76px) !important; white-space:nowrap;}
.hero-board .hc-value .unit{font-size:clamp(12px, 3.4cqi, 16px) !important;}
.hero-board .hc-delta{flex-wrap:nowrap; gap:12px;}
.hero-board .hc-pill.pct, .hero-board .hc-delta > .hc-pill:not(.pct){font-size:clamp(14px, 4.6cqi, 20px);}
.hero-board{grid-template-columns:minmax(0, 1fr) minmax(0, 1.55fr) !important;}

@container page (max-width:1180px){
  .hero-board{grid-template-columns:minmax(0,1fr) !important; grid-template-areas:"left" "right" "kpis" !important;}
  .hb-left{border-right:0; border-bottom:1px solid rgba(255,255,255,.08);}
  .hero-board .hero-card{display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end; column-gap:40px; row-gap:22px;}
  .hero-board .hc-side{border-top:0; padding-top:0;}
  .hero-board .hc-value{font-size:clamp(40px, 8cqi, 72px) !important;}
  .hero-board .hc-pill.pct, .hero-board .hc-delta > .hc-pill:not(.pct){font-size:18px;}
  .hero-board .kpi-grid{grid-template-columns:repeat(3, minmax(0,1fr)) !important;}
  .hero-board .kpi-tile:nth-child(4){border-left:0 !important;}
  .hero-board .kpi-tile:nth-child(n+4){border-top:1px solid rgba(255,255,255,.08);}
}
@container page (max-width:640px){
  .hb-left, .hb-right{padding:18px 16px;}
  .hero-board .hero-card{grid-template-columns:minmax(0,1fr);}
  .hero-board .hc-value{font-size:clamp(36px, 14cqi, 56px) !important;}
  .hero-board .hc-delta{flex-wrap:wrap;}
  .hero-board .kpi-grid{grid-template-columns:repeat(2, minmax(0,1fr)) !important;}
  .hero-board .kpi-tile{padding:14px !important;}
  .hero-board .kpi-tile:nth-child(odd){border-left:0 !important;}
  .hero-board .kpi-tile:nth-child(4){border-left:1px solid rgba(255,255,255,.08) !important;}
  .hero-board .kpi-tile:nth-child(n+3){border-top:1px solid rgba(255,255,255,.08);}
}
.fx-var-switch{display:none !important;}
.hero-board .kpi-value{white-space:nowrap; font-size:clamp(15px, 1.5cqi, 20px) !important;}
.hero-board .kpi-label{white-space:normal !important;}
.hero-board .hero-card{align-items:stretch !important;}
.hero-board .hero-card > .hc-main, .hero-board .hero-card > .hc-side{width:100%; align-self:stretch; align-items:stretch;}
.hero-board .hc-main{align-items:flex-start !important;}
@container page (max-width:1180px){ .hero-board .hero-card{align-items:end !important;} }

/* Portfoliowert: kräftiger, nutzt die Höhe */
.hero-board .hc-main{flex:1 1 auto; gap:16px !important;}
.hero-board .hc-value{font-family:var(--font-display) !important; font-weight:700 !important; letter-spacing:-.045em !important; line-height:.9 !important; display:flex; align-items:flex-start; gap:10px;}
.hero-board .hc-value .unit{margin:.32em 0 0 !important; font-family:var(--font-mono); font-weight:600; letter-spacing:.06em !important;}
.hero-board .hc-value.good{text-shadow:0 0 38px rgba(52,211,153,.28);}
.hero-board .hc-since{margin:-8px 0 0;}
.hc-spark{position:relative; flex:1 1 auto; width:100%; min-height:70px; max-height:150px; margin-top:4px; color:var(--good);}
.hc-spark.bad{color:var(--bad);}
.hc-spark svg{position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible;}
.hc-spark-dot{position:absolute; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px rgba(52,211,153,.18), 0 0 14px currentColor;}
.hc-spark.bad .hc-spark-dot{box-shadow:0 0 0 4px rgba(248,113,113,.18), 0 0 14px currentColor;}
@container page (max-width:1180px){ .hc-spark{display:none;} }

/* Portfoliowert: Aufteilung auf Bots */
.hc-bots{display:flex; flex-direction:column; justify-content:center; gap:16px; width:100%; flex:1 1 auto; padding:6px 0 2px;}
.hc-bot{display:flex; flex-direction:column; gap:8px; min-width:0;}
.hc-bot-top{display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:baseline; gap:14px;}
.hc-bot-name{display:flex; align-items:center; gap:9px; min-width:0; font-family:var(--font-body); font-size:13px; font-weight:500; color:var(--ink-soft);}
.hc-bot-text{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.hc-bot-dot{width:8px; height:8px; border-radius:50%; flex:none; background:var(--c); box-shadow:0 0 8px var(--c);}
.hc-bot-val{font-family:var(--font-mono); font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap;}
.hc-bot-pct{font-family:var(--font-mono); font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; min-width:52px; text-align:right;}
.hc-bot-pct.good{color:var(--good);} .hc-bot-pct.bad{color:var(--bad);}
.hc-bot-track{position:relative; height:6px; border-radius:3px; background:rgba(255,255,255,.06); margin-right:66px;}
.hc-bot-fill{position:absolute; left:0; top:0; bottom:0; border-radius:3px; background:var(--c); opacity:.85;}
.hc-bot-share{position:absolute; right:-66px; top:50%; transform:translateY(-50%); width:52px; text-align:right; font-family:var(--font-mono); font-size:11px; color:var(--ink-muted);}

/* Ruhiger: Wolken gedämpft, Glas milchiger, damit der Inhalt vorne bleibt */
.fx-aurora{opacity:.7;}
.panel, .masthead{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 14%),
    linear-gradient(165deg, rgba(14,22,40,.46) 0%, rgba(8,14,26,.58) 100%) !important;
  backdrop-filter:blur(22px) saturate(1.1) !important;
  -webkit-backdrop-filter:blur(22px) saturate(1.1) !important;
  border-color:rgba(255,255,255,.14) !important;
}
.app-bar, .app-bar.is-stuck, .app-bar:not(.is-stuck){
  background:linear-gradient(165deg, rgba(14,22,40,.46) 0%, rgba(8,14,26,.58) 100%) !important;
  backdrop-filter:blur(22px) saturate(1.1) !important; -webkit-backdrop-filter:blur(22px) saturate(1.1) !important;
}

/* Alle Trades: Bot-Spalte breiter, Name ganz lesbar */

.trades-panel .day-modal-bot{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;}

/* Tages-Kalender + Monatsbilanz in einer Platte */
.cal-aside{display:none;}
@media (min-width:1400px){
  .cal-body{display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,320px); gap:28px; align-items:stretch;}
  .cal-aside{display:flex; flex-direction:column; gap:14px; padding:4px 0 0 28px; border-left:1px solid rgba(255,255,255,.08); min-width:0;}
}
.cal-aside-title{font-family:var(--font-body); font-size:13px; font-weight:500; color:var(--ink-soft);}
.cal-aside-empty{font-family:var(--font-body); font-size:13px; color:var(--ink-muted);}
.cal-aside-net{font-family:var(--font-display); font-size:34px; font-weight:700; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; display:flex; align-items:flex-start; gap:6px;}
.cal-aside-net .cal-unit{font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--ink-muted); margin-top:4px;}
.cal-aside-net.good{color:var(--good);} .cal-aside-net.bad{color:var(--bad);}
.cal-aside-sub{font-family:var(--font-body); font-size:12px; color:var(--ink-muted); margin-top:-6px;}
.cal-aside-curve{position:relative; flex:1 1 auto; min-height:90px; color:var(--good);}
.cal-aside-curve.bad{color:var(--bad);}
.cal-aside-curve svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
.cal-aside-curve .l{fill:none; stroke:currentColor; stroke-width:2; vector-effect:non-scaling-stroke; stroke-linejoin:round;}
.cal-aside-curve .a{fill:currentColor; opacity:.12;}
.cal-aside-curve .z{stroke:rgba(255,255,255,.14); stroke-dasharray:3 4; vector-effect:non-scaling-stroke;}
.cal-aside-ratio{display:flex; flex-direction:column; gap:8px;}
.cal-aside-bar{display:flex; gap:2px; height:6px; border-radius:3px; overflow:hidden; background:rgba(255,255,255,.06);}
.cal-aside-bar .w{background:var(--good);} .cal-aside-bar .l{background:var(--bad);}
.cal-aside-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:0; border:0; background:none; font:inherit; color:inherit; text-align:left; width:100%;}
.cal-aside-row + .cal-aside-row{padding-top:12px; border-top:1px solid rgba(255,255,255,.06);}
.cal-aside-row.click{cursor:pointer;} .cal-aside-row.click:hover .k{color:var(--ink);}
.cal-aside-row .k{font-family:var(--font-body); font-size:12.5px; color:var(--ink-muted);}
.cal-aside-row .v{font-family:var(--font-mono); font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap;}
.cal-aside-row .v.good{color:var(--good);} .cal-aside-row .v.bad{color:var(--bad);}

/* ===================== Mobile (< 1000 px) ===================== */
.fx-tabbar{display:none;}
@media (max-width:999px){
  body.has-tabbar .page{padding-bottom:calc(96px + env(safe-area-inset-bottom)) !important;}
  .fx-tabbar{display:flex; position:fixed; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:60; padding:6px; gap:4px; border-radius:20px;
    background:linear-gradient(165deg, rgba(14,22,40,.72), rgba(8,14,26,.86)); border:1px solid rgba(255,255,255,.14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 18px 40px -12px rgba(0,0,0,.7); backdrop-filter:blur(22px) saturate(1.2); -webkit-backdrop-filter:blur(22px) saturate(1.2);}
  .fx-tab{flex:1 1 0; min-width:0; min-height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border-radius:14px; border:0; background:none; color:var(--ink-muted); text-decoration:none; font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent;}
  .fx-tab.on{background:rgba(52,211,153,.14); color:var(--ink);}
  .fx-tab-ic{height:20px; display:flex; align-items:center; justify-content:center;}
  .fx-tab-ic svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
  .fx-tab.on .fx-tab-ic svg{color:var(--good);}
  .fx-tab-dot{width:12px; height:12px; border-radius:50%; display:block; box-shadow:0 0 10px currentColor;}
  .fx-tab-label{font-family:var(--font-body); font-size:11px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; padding:0 4px;}
  /* Konto-Dropdown im Kopf entfällt, die Tab-Leiste übernimmt */
  body.has-tabbar .app-bar .nav-select-wrap{display:none !important;}
  body.has-tabbar .app-bar .app-bar-nav{display:none !important;}
  /* Hintergrund ruhig und statisch */
  .fx-aurora{opacity:.45 !important;}
  .fx-blob{animation:none !important;}
  /* Platte oben */
  .hero-board .hb-kpis{padding:0 !important;}
  .hero-board .kpi-tile{padding:14px 16px !important;}
  .hero-board .kpi-tile:nth-child(odd){border-left:0 !important;}
  .hero-board .kpi-tile:nth-child(n+3){border-top:1px solid rgba(255,255,255,.08) !important;}
  .hc-bot-name{font-size:12.5px;}
  .hc-bot-val{font-size:14px;}
}

/* Teilen-Karte Portfolio */
.share-card-node:has(> .pfs){background:none !important; border:0 !important; padding:0 !important; margin:18px 0 0 !important;}
.pfs{display:flex; flex-direction:column; gap:20px;}
.pfs-top{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap;}
.pfs-label{font-family:var(--font-body); font-size:13px; color:#9db4d0;}
.pfs-value{font-family:var(--font-display); font-size:64px; font-weight:700; letter-spacing:-.045em; line-height:.95; color:#eef3fa; display:flex; align-items:flex-start; gap:8px; margin-top:8px;}
.pfs-unit{font-family:var(--font-mono); font-size:15px; font-weight:600; letter-spacing:.06em; color:#9db4d0; margin-top:8px;}
.pfs-sub{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:12px; font-size:13px;}
.pfs-sub .k{font-family:var(--font-body); color:#9db4d0;} .pfs-sub .v{font-family:var(--font-mono); font-weight:600; color:#eef3fa;} .pfs-sub .sep{color:#5d6f8a;}
.pfs-r{text-align:right;}
.pfs-pct{font-family:var(--font-display); font-size:52px; font-weight:700; letter-spacing:-.04em; line-height:1; margin-bottom:8px;}
.pfs-chart{padding:12px 10px 6px; border-radius:14px; background:rgba(0,0,0,.24); border:1px solid rgba(255,255,255,.08);}
.pfs-chart svg{width:100%; height:auto; display:block;}
.pfs-bots{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:12px 24px;}
.pfs-bot{display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:baseline; gap:6px 14px;}
.pfs-bot-name{display:flex; align-items:center; gap:9px; min-width:0; font-family:var(--font-body); font-size:14px; font-weight:500; color:#eef3fa; white-space:nowrap;}
.pfs-dot{width:9px; height:9px; border-radius:50%; flex:none;}
.pfs-bot-bal{font-family:var(--font-mono); font-size:14px; font-weight:600; color:#eef3fa; white-space:nowrap;}
.pfs-bot-pct{font-family:var(--font-mono); font-size:13px; font-weight:600; white-space:nowrap;}
.pfs-track{grid-column:1 / -1; height:5px; border-radius:3px; background:rgba(255,255,255,.07); position:relative; overflow:hidden;}
.pfs-fill{position:absolute; left:0; top:0; bottom:0; border-radius:3px;}
.pfs-kpis{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); padding-top:16px; border-top:1px solid rgba(255,255,255,.10);}
.pfs-kpi{display:flex; flex-direction:column; gap:6px; padding:0 12px; min-width:0;}
.pfs-kpi:first-child{padding-left:0;}
.pfs-kpi + .pfs-kpi{border-left:1px solid rgba(255,255,255,.08);}
.pfs-kpi-l{font-family:var(--font-body); font-size:11.5px; color:#9db4d0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pfs-kpi-v{font-family:var(--font-mono); font-size:16px; font-weight:600; color:#eef3fa; white-space:nowrap;}
@media (max-width:640px){
  .pfs-value{font-size:44px;} .pfs-pct{font-size:36px;}
  .pfs-top{align-items:flex-start;} .pfs-r{text-align:left;}
  .pfs-kpis{grid-template-columns:repeat(3, minmax(0,1fr)); row-gap:14px;}
  .pfs-kpi:nth-child(4){padding-left:0; border-left:0;}
}

/* Trades einheitlich: Eröffnung · Schluss · Symbol · Bot · Richtung …, Bot kompakt links */
/* measured against the longest real name ("AX DAILY PRO EA V2 (Mod 1-3)" needs 203 px): the bot
   column carries it in full and grows with a longer one, the remaining slack goes to Netto */
.trades-panel .trade-grid{gap:12px;}
.trades-panel .trade-grid.has-bot{--trade-cols:minmax(114px,1fr) minmax(114px,1fr) minmax(86px,.85fr) minmax(205px,1.5fr) minmax(76px,.8fr) minmax(46px,.6fr) minmax(80px,.9fr) minmax(80px,.9fr) minmax(58px,.8fr) minmax(58px,.9fr) minmax(32px,.5fr) !important;}
.trades-panel .trade-grid:not(.has-bot){--trade-cols:minmax(114px,1fr) minmax(114px,1fr) minmax(86px,.9fr) minmax(76px,.8fr) minmax(46px,.6fr) minmax(80px,.9fr) minmax(80px,.9fr) minmax(58px,.8fr) minmax(58px,.9fr) minmax(32px,.5fr) !important;}
.day-modal .trade-grid.has-bot{--trade-cols:110px 110px 82px minmax(205px,max-content) 72px 44px 76px 76px 56px minmax(56px,1fr) 30px !important; gap:8px;}
.trade-grid .day-modal-bot, .bw-row .day-modal-bot{justify-self:start; width:auto; max-width:100%; white-space:nowrap;}
.trade-cell:has(> .day-modal-bot){display:flex; justify-content:flex-start;}
/* Beste & schlechteste: Datum · Symbol · Bot (kompakt) · Richtung · Netto · R */
.bw-head.has-bot, .bw-row.has-bot{grid-template-columns:84px 72px 140px minmax(64px,1fr) 84px 44px !important;}
.bw-row .day-modal-bot{overflow:hidden; text-overflow:ellipsis;}

/* ===================== Startseite + Login im Dashboard-Stil ===================== */
.landing-page .page{max-width:1280px;}
.landing-page .app-bar{border-radius:18px !important; padding:12px 16px !important; margin-top:16px;}
.landing-page .site-nav a{font-size:14px; padding:8px 14px; border-radius:10px;}
.landing-page .toolbar .share-btn.primary, .auth-card .upload-submit, .landing-page .upload-submit{
  background:rgba(52,211,153,.16) !important; border:1px solid rgba(52,211,153,.42) !important; color:var(--ink) !important;
  border-radius:12px !important; box-shadow:0 10px 30px -12px rgba(52,211,153,.45) !important; text-transform:none !important; letter-spacing:0 !important;
  font-family:var(--font-body) !important; font-weight:600 !important; font-size:15px !important;}
.landing-page .toolbar .share-btn.primary{padding:9px 18px !important; font-size:13.5px !important;}
.landing-page .toolbar .share-btn.primary:hover, .auth-card .upload-submit:hover, .landing-page .upload-submit:hover{background:rgba(52,211,153,.26) !important;}
.landing-page .btn-ghost{border-radius:12px !important; border:1px solid rgba(255,255,255,.14) !important; background:rgba(255,255,255,.04) !important; color:var(--ink) !important; font-family:var(--font-body) !important; font-weight:500 !important; font-size:15px !important; text-transform:none !important; letter-spacing:0 !important;}
.landing-page .btn-ghost:hover{background:rgba(255,255,255,.08) !important;}
.landing-page .lang-switch{padding:3px; gap:2px; border-radius:10px; background:rgba(6,10,20,.30); border:1px solid rgba(255,255,255,.08);}
.landing-page .lang-switch button{padding:6px 10px; border-radius:7px; border:1px solid transparent;}
.landing-page .lang-switch button.active{background:rgba(52,211,153,.14); border-color:rgba(52,211,153,.30);}
.landing-page .hero{border-radius:22px !important; padding:64px 56px 56px !important;}
.landing-page .hero h1{font-size:clamp(34px, 4vw, 56px); letter-spacing:-.035em; line-height:1.03;}
.landing-page .hero h1 .hl{text-shadow:0 0 40px rgba(52,211,153,.35);}
.landing-page .eyebrow{font-size:11px; letter-spacing:.18em;}
.landing-page .hero-lead, .landing-page .feature p, .landing-page .faq details p, .landing-page .cta p{font-family:var(--font-body); font-size:16px; line-height:1.6;}
.landing-page .hero-points li{font-family:var(--font-body); font-size:13.5px;}
.landing-page .section-head h2, .landing-page .cta h2{font-size:clamp(26px, 3vw, 38px); letter-spacing:-.03em;}
.landing-page .section-note{font-size:11px; letter-spacing:.16em;}
.landing-page .feature{border-radius:18px !important; padding:28px !important; gap:14px;}
.landing-page .feature h3{font-size:18px;}
.landing-page .feature-num{width:36px; height:36px; border-radius:11px; font-size:12px; background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.35);}
.landing-page .faq, .landing-page .cta{border-radius:22px !important;}
.landing-page .faq summary{font-size:16px; padding:4px 0;}
.landing-page .faq details{border-color:rgba(255,255,255,.08);}
.landing-page .landing-foot{font-family:var(--font-body); font-size:13px; padding-bottom:28px;}
.auth-card{border-radius:22px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 14%), linear-gradient(165deg, rgba(14,22,40,.46) 0%, rgba(8,14,26,.58) 100%) !important;
  border:1px solid rgba(255,255,255,.14) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.40), 0 30px 70px -30px rgba(0,0,0,.7) !important;
  backdrop-filter:blur(22px) saturate(1.1) !important; -webkit-backdrop-filter:blur(22px) saturate(1.1) !important;}
.auth-card input{border-radius:10px !important; background:rgba(6,10,20,.35) !important; border:1px solid rgba(255,255,255,.12) !important; font-family:var(--font-body) !important; font-size:15px !important;}
.auth-card input:focus{border-color:rgba(52,211,153,.5) !important; outline:none;}
@media (max-width:980px){ .landing-page .hero{padding:36px 24px !important;} }
@media (max-width:560px){ .landing-page .hero{padding:26px 18px !important;} .landing-page .hero-lead{font-size:15px;} }

/* Startseite: Bild grösser */
@media (min-width:981px){
  .landing-page .page{max-width:1440px;}
  .landing-page .hero{grid-template-columns:minmax(320px, 9fr) minmax(420px, 14fr) !important; gap:28px !important; padding-right:28px !important;}
  .landing-page .hero-visual{padding:0 !important; margin-right:-8px;}
}

/* Startseite: Spiegelung/Schatten bleiben in der Platte */
.landing-page .hero{overflow:hidden !important;}
.landing-page .hero-visual .shot{-webkit-box-reflect:none !important;}
.landing-page .hero-visual .shot img{filter:drop-shadow(0 14px 18px rgba(0,0,0,.45)) !important;}

/* Login: gleiche Knöpfe, Umschalter und Schrift wie Startseite */
.auth-card .auth-submit{background:rgba(52,211,153,.16) !important; background-image:none !important; border:1px solid rgba(52,211,153,.42) !important; color:var(--ink) !important;
  border-radius:12px !important; box-shadow:0 10px 30px -12px rgba(52,211,153,.45) !important; text-transform:none !important; letter-spacing:0 !important;
  font-family:var(--font-body) !important; font-weight:600 !important; font-size:15px !important;}
.auth-card .auth-submit:hover{background:rgba(52,211,153,.26) !important;}
.auth-card .lang-switch{padding:3px; gap:2px; border-radius:10px; background:rgba(6,10,20,.30); border:1px solid rgba(255,255,255,.08);}
.auth-card .lang-switch button{padding:6px 10px; border-radius:7px; border:1px solid transparent; background:transparent;}
.auth-card .lang-switch button.active{background:rgba(52,211,153,.14); border-color:rgba(52,211,153,.30); color:var(--ink);}
.auth-card .auth-field label, .auth-card .auth-switch, .auth-card .auth-switch button, .auth-card .auth-back, .auth-card .auth-back a{font-family:var(--font-body) !important; text-transform:none !important; letter-spacing:0 !important; font-size:13px !important;}
.auth-card .auth-field label{color:var(--ink-soft) !important; font-weight:500;}
.auth-card .auth-switch button{color:var(--good) !important; font-weight:600;}
.auth-card .auth-title{font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;}
.auth-back, .auth-back a{font-family:var(--font-body) !important; text-transform:none !important; letter-spacing:0 !important; font-size:13px !important;}

/* ---------- Konten, die nicht mehr auf die Tab-Leiste passen ---------- */
.fx-menu-accounts{display:flex; flex-direction:column; gap:2px; padding:0 0 6px; margin:0 0 6px; border-bottom:1px solid rgba(255,255,255,.10);}
.fx-menu-account{display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:9px; font-family:var(--font-mono); font-size:12.5px; color:var(--ink); text-decoration:none;}
.fx-menu-account:hover{background:rgba(255,255,255,.06);}
.fx-menu-account.on{background:rgba(255,255,255,.10);}
.fx-menu-account .fx-tab-dot{width:8px; height:8px; border-radius:50%; flex:none;}

/* ---------- side menu: nothing wider than the menu itself ---------- */
.app-bar .toolbar .user-menu-wrap{max-width:100%; min-width:0;}
.app-bar .toolbar .user-menu-wrap > .share-btn.icon-only{max-width:100%; min-width:0; box-sizing:border-box;}
.app-bar .toolbar .user-menu-wrap > .share-btn.icon-only::after{min-width:0; flex:1 1 0 !important;}
.app-bar .toolbar .user-menu-dropdown{max-width:100%; box-sizing:border-box;}
.app-bar .toolbar .user-menu-email{overflow-wrap:anywhere;}

/* ---------- shared calendar: full width, the month summary underneath ---------- */
.share-card-node .cal-body{display:block !important;}
.share-card-node .cal-aside{display:grid !important; width:auto; min-width:0; margin:18px 0 0; padding:18px 0 0;
  border-left:0 !important; border-top:1px solid rgba(255,255,255,.10);
  grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:30px; row-gap:14px; align-content:start; align-items:start;}
.share-card-node .cal-aside-title{grid-column:1 / -1;}
.share-card-node .cal-aside-curve{display:none !important;}
@media (max-width:560px){
  .share-card-node .cal-aside{grid-template-columns:minmax(0,1fr); row-gap:8px;}
  .share-card-node .cal-aside-curve{grid-column:1; grid-row:auto; min-height:90px;}
}

/* ---------- Ein- und Auszahlungen: eigenes Band, aber im Raster der Tabelle ----------
   Datum bleibt unter "Eröffnung", das Abzeichen sitzt unter "Schluss", der Bot unter den anderen
   Bots, der Kommentar läuft ab "Richtung" und der Betrag steht in der Netto-Spalte. */
.trades-panel .trade-row.flow-row{border-radius:12px; border:1px solid rgba(79,143,247,.30);
  background:linear-gradient(100deg, rgba(79,143,247,.18), rgba(79,143,247,.05) 46%, rgba(79,143,247,.02) 100%);}
.trades-panel .trade-row.flow-row.out{border-color:rgba(248,196,113,.32);
  background:linear-gradient(100deg, rgba(248,196,113,.18), rgba(248,196,113,.05) 46%, rgba(248,196,113,.02) 100%);}
.trades-panel .trade-row.flow-row:hover{border-color:rgba(79,143,247,.45);}
.trades-panel .trade-row.flow-row.out:hover{border-color:rgba(248,196,113,.5);}
.trades-panel .trade-row.flow-row > .trade-cell{text-align:left;}
.trades-panel .trade-row.flow-row .flow-amt{font-family:var(--font-display); font-size:15px; letter-spacing:-.01em; text-align:right;}
/* Portfolio-Sicht: 1 Eröffnung, 2 Schluss, 3 Abzeichen, 4 Bot, 5 Kommentar, 6-9 Striche, 10 Betrag, 11 Strich */
.trades-panel .flow-row.has-bot > :nth-child(2), .trades-panel .flow-row.has-bot > :nth-child(6),
.trades-panel .flow-row.has-bot > :nth-child(7), .trades-panel .flow-row.has-bot > :nth-child(8),
.trades-panel .flow-row.has-bot > :nth-child(9), .trades-panel .flow-row.has-bot > :nth-child(11){display:none;}
.trades-panel .flow-row.has-bot > :nth-child(1){grid-column:1;}
.trades-panel .flow-row.has-bot > :nth-child(3){grid-column:2;}
.trades-panel .flow-row.has-bot > :nth-child(4){grid-column:4;}
.trades-panel .flow-row.has-bot > :nth-child(5){grid-column:5 / 10; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.trades-panel .flow-row.has-bot > :nth-child(10){grid-column:10;}
/* Konto-Sicht: 1 Eröffnung, 2 Schluss, 3 Abzeichen, 4 Kommentar, 5-8 Striche, 9 Betrag, 10 Strich */
.trades-panel .flow-row:not(.has-bot) > :nth-child(2), .trades-panel .flow-row:not(.has-bot) > :nth-child(5),
.trades-panel .flow-row:not(.has-bot) > :nth-child(6), .trades-panel .flow-row:not(.has-bot) > :nth-child(7),
.trades-panel .flow-row:not(.has-bot) > :nth-child(8), .trades-panel .flow-row:not(.has-bot) > :nth-child(10){display:none;}
.trades-panel .flow-row:not(.has-bot) > :nth-child(1){grid-column:1;}
.trades-panel .flow-row:not(.has-bot) > :nth-child(3){grid-column:2;}
.trades-panel .flow-row:not(.has-bot) > :nth-child(4){grid-column:4 / 9; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.trades-panel .flow-row:not(.has-bot) > :nth-child(9){grid-column:9;}
@media (max-width:560px){
  .trades-panel .trade-row.flow-row{border-radius:10px;}
  .trades-panel .trade-row.flow-row .flow-amt{font-size:13px;}
}

/* ---------- the chart tooltip belongs above the page, never clipped by a panel ---------- */
.chart-tooltip{position:fixed; z-index:70;}

/* ---------- landing header at phone width: logo and buttons on one line ---------- */
@media (max-width:480px){
  .app-bar-row{gap:6px;}
  .app-bar-row > .app-brand{flex:none; min-width:0; font-size:11px;}
  .app-bar-row > .toolbar{flex:none; gap:6px;}
  .app-bar-row > .toolbar .lang-switch button{padding-left:7px; padding-right:7px;}
  .app-bar-row > .toolbar .share-btn.primary{padding-left:11px; padding-right:11px;}
}

/* ---------- profile dialog ---------- */
.profile-modal .form-section{margin:18px 0 2px; padding-top:14px; border-top:1px solid rgba(255,255,255,.10); font-family:var(--font-mono); font-size:var(--fs-small); font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-muted);}
.profile-modal .form-hint{margin-top:5px; font-family:var(--font-body); font-size:11.5px; color:var(--ink-muted);}
.profile-modal input:disabled{opacity:.65; cursor:not-allowed;}

/* ---------- Handy: Auswertungen bekommen eigene Layouts statt gequetschter Tabellen ---------- */
@media (max-width:560px){
  /* der Kopf bleibt frei: Konten und Ansichten stehen unten in der Leiste bzw. unter "Mehr" */
  .app-bar-views{display:none !important;}

  /* Beste & schlechteste Trades: eine Zeile je Trade, nichts übereinander */
  .bw-head{display:none;}
  .bw-row, .bw-row.has-bot{display:flex !important; align-items:center; gap:8px; padding:9px 2px;}
  .bw-row > .bw-sym{order:1; font-family:var(--font-mono); font-size:12.5px; color:var(--ink);}
  .bw-row > .dir-badge{order:2; min-width:0; padding:2px 7px; font-size:10px;}
  .bw-row > .bw-date{order:3; margin-left:auto; font-size:11px; color:var(--ink-muted);}
  .bw-row > .bw-val{order:4; min-width:62px; text-align:right; font-size:12.5px;}
  .bw-row > .bw-r, .bw-row > .day-modal-bot{display:none !important;}
  .bw-section-label{margin-top:10px;}

  /* Nach Symbol: Name und Ergebnis oben, der Balken darunter über die volle Breite */
  .symx-row{grid-template-columns:minmax(0,1fr) auto !important; gap:5px 10px; padding:9px 0;}
  .symx-id{grid-column:1; grid-row:1;}
  .symx-net{grid-column:2; grid-row:1;}
  .symx-track{grid-column:1 / -1; grid-row:2; height:8px;}

  /* Alle Trades: zwei Zeilen je Trade, damit der Bot sichtbar bleibt */
  .trades-panel .trade-row.has-bot:not(.flow-row){display:grid !important; grid-template-columns:auto auto minmax(0,1fr); gap:3px 8px; align-items:center; padding:9px 4px;}
  .trades-panel .trade-row.has-bot:not(.flow-row) > :nth-child(3){grid-area:1 / 1; display:block !important;}
  .trades-panel .trade-row.has-bot:not(.flow-row) > :nth-child(5){grid-area:1 / 2; display:block !important;}
  .trades-panel .trade-row.has-bot:not(.flow-row) > :nth-child(10){grid-area:1 / 3; text-align:right !important; display:block !important;}
  .trades-panel .trade-row.has-bot:not(.flow-row) > :nth-child(4){grid-area:2 / 1 / auto / span 2; display:block !important; min-width:0;}
  .trades-panel .trade-row.has-bot:not(.flow-row) > :nth-child(2){grid-area:2 / 3; text-align:right !important; display:block !important; font-size:10.5px; color:var(--ink-muted);}
  .trades-panel .trade-row.has-bot:not(.flow-row) > :nth-child(1),
  .trades-panel .trade-row.has-bot:not(.flow-row) > :nth-child(6),
  .trades-panel .trade-row.has-bot:not(.flow-row) > :nth-child(7),
  .trades-panel .trade-row.has-bot:not(.flow-row) > :nth-child(8),
  .trades-panel .trade-row.has-bot:not(.flow-row) > :nth-child(9),
  .trades-panel .trade-row.has-bot:not(.flow-row) > :nth-child(11){display:none !important;}
  .trades-panel .trade-row.has-bot:not(.flow-row) .day-modal-bot{font-size:10px; padding:2px 7px;}
}

/* ---------- Portfolio-Karte: oben kompakter, die Konten bekommen den Platz ---------- */
.pfs{gap:16px;}
.pfs-value{font-size:52px; margin-top:6px;}
.pfs-unit{font-size:13px; margin-top:6px;}
.pfs-pct{font-size:40px; margin-bottom:6px;}
.pfs-sub{margin-top:9px; font-size:12.5px;}
.pfs-chart{padding:10px 8px 4px;}
.pfs-bots{grid-template-columns:minmax(0,1fr); gap:14px;}
.pfs-bot{grid-template-columns:minmax(0,1fr) auto auto; gap:7px 16px; align-items:baseline;}
.pfs-bot-name{overflow:hidden; text-overflow:ellipsis; font-size:14px;}
.pfs-bot-bal{font-size:14.5px;}
.pfs-track{height:6px; border-radius:3px;}
@media (max-width:560px){
  .pfs-value{font-size:38px;} .pfs-pct{font-size:30px;}
  .pfs-bots{gap:11px;}
}

/* Monatsbilanz auf der Karte: Kopfzeile, darunter vier gleich breite Felder wie die
   Kennzahlenleiste der Portfolio-Karte - keine halbleeren Spalten mehr. */
.share-card-node .cal-aside{display:grid !important; grid-template-columns:repeat(4, minmax(0,1fr)); column-gap:0; row-gap:12px; align-content:start;}
.share-card-node .cal-aside-curve{display:none !important;}
.share-card-node .cal-aside-title{grid-column:1 / -1; grid-row:1;}
.share-card-node .cal-aside-net{grid-column:1 / -1; grid-row:2; margin-top:-2px;}
.share-card-node .cal-aside-sub{grid-column:1 / -1; grid-row:3; margin-top:-4px;}
.share-card-node .cal-aside-ratio{grid-column:1; grid-row:4; gap:10px; padding:14px 18px 0 0; border-top:1px solid rgba(255,255,255,.10);}
.share-card-node .cal-aside-row{grid-row:4; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:7px; padding:14px 18px 0 !important; border-top:1px solid rgba(255,255,255,.10) !important; border-left:1px solid rgba(255,255,255,.08);}
.share-card-node .cal-aside-row .k{font-size:11.5px; color:var(--ink-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
.share-card-node .cal-aside-row .v{font-size:14px;}
@media (max-width:560px){
  .share-card-node .cal-aside{grid-template-columns:repeat(2, minmax(0,1fr));}
  .share-card-node .cal-aside-ratio, .share-card-node .cal-aside-row{grid-row:auto;}
  .share-card-node .cal-aside-row:nth-of-type(odd){border-left:0;}
}

/* ---------- Kopfzahl: Wert gross, Rendite als Marke daneben, Betrag darunter ---------- */
.hero-card .hc-value{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.hc-num{display:inline-flex; align-items:flex-start;}
.hc-pill.pct{font-size:17px; font-weight:600; padding:9px 16px; gap:8px; line-height:1;}
.hc-pill.pct.good{color:var(--good); border-color:rgba(52,211,153,.32); background:rgba(52,211,153,.12);}
.hc-pill.pct.bad{color:var(--bad); border-color:rgba(248,113,113,.32); background:rgba(248,113,113,.12);}
.hc-pill.pct .hc-arrow{font-size:14px; line-height:1;}
.hc-since{margin-left:0; font-family:var(--font-body); font-size:13px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--ink-muted); display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;}
.hc-since .v{font-family:var(--font-mono); font-weight:600; font-size:14px;}
.hc-since .v.good{color:var(--good);} .hc-since .v.bad{color:var(--bad);}
@media (max-width:560px){
  .hero-card .hc-value{gap:12px;}
  .hc-pill.pct{font-size:15px; padding:7px 13px;}
  .hc-since{font-size:12px;} .hc-since .v{font-size:13px;}
}

/* ---------- Kopfzahl: Luft zwischen Zahl, Währung, Marke und der Zeile darunter ---------- */
.hero-card .hc-value .hc-num{gap:0;}
.hero-card .hc-value .unit{margin-left:12px !important;}
.hero-card .hc-value{gap:26px;}
.hero-card .hc-pill.pct{padding:12px 22px; gap:12px; font-size:18px;}
.hero-card .hc-pill.pct .hc-arrow{font-size:13px;}
.hero-card .hc-since{font-size:14px; gap:8px;}
.hero-card .hc-since .v{font-size:16px;}
@media (max-width:560px){
  .hero-card .hc-value{gap:14px;}
  .hero-card .hc-value .unit{margin-left:9px !important;}
  .hero-card .hc-pill.pct{padding:9px 16px; gap:9px; font-size:15.5px;}
  .hero-card .hc-since{font-size:12.5px;} .hero-card .hc-since .v{font-size:14px;}
}

/* die Rendite darf neben der grossen Zahl bestehen: deutlich grösser, mit Luft um Pfeil und Zahl */
.hero-card .hc-pill.pct{font-size:24px; padding:14px 26px; gap:14px; font-weight:600;}
.hero-card .hc-pill.pct .hc-arrow{font-size:18px;}
@media (max-width:560px){
  .hero-card .hc-pill.pct{font-size:18px; padding:10px 18px; gap:10px;}
  .hero-card .hc-pill.pct .hc-arrow{font-size:14px;}
}

/* Die grosse Zahl zieht ihre Zeichen um 2.5 px zusammen (letter-spacing:-.035em); die Marke
   daneben erbte das und stand gequetscht da. Sie bekommt wieder normale Laufweite. */
.hero-card .hc-pill.pct, .hero-card .hc-pill.pct span{letter-spacing:normal;}

/* ---------- Namen stehen vollständig, auch die langen ---------- */
/* Beste & schlechteste Trades: mit mehreren Konten zählt der Bot mehr als die R-Spalte. Die
   entfällt in dieser Liste (sie steht weiter in "Alle Trades" und im Chart), dafür passt der Name. */
.bw-head.has-bot > :nth-child(6), .bw-row.has-bot > :nth-child(6){display:none !important;}
.bw-head.has-bot, .bw-row.has-bot{grid-template-columns:78px 70px minmax(150px,1fr) 64px 80px !important;}
/* Bots-Tabelle: die Namensspalte bekommt den Platz, den die Namen brauchen */
.bots-grid{grid-template-columns:minmax(250px,1.6fr) minmax(104px,1fr) 82px 104px 134px 104px 114px;}

/* ---------- Zeitraum-Auswahl in der Kopfkarte ---------- */
.hc-periods{display:flex; flex-direction:column; gap:2px;}
.hc-period{display:flex; align-items:baseline; justify-content:space-between; gap:14px; width:100%;
  padding:9px 12px; border:1px solid transparent; border-radius:10px; background:transparent; cursor:pointer; text-align:left;}
.hc-period:hover{background:rgba(255,255,255,.05);}
.hc-period.on{background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.28);}
.hc-period-label{font-family:var(--font-body); font-size:13px; color:var(--ink-soft);}
.hc-period.on .hc-period-label{color:var(--ink); font-weight:500;}
.hc-period-val{font-family:var(--font-mono); font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink-muted);}
.hc-period-val.good{color:var(--good);} .hc-period-val.bad{color:var(--bad);}
@media (max-width:560px){
  .hc-period{padding:8px 10px;}
  .hc-period-label{font-size:12.5px;} .hc-period-val{font-size:12.5px;}
}

/* ---------- Prop-Konto: Einstellungen ---------- */
.prop-box{margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.10);}
.prop-toggle{display:flex; align-items:center; gap:10px; cursor:pointer;}
.prop-toggle input{width:16px; height:16px; accent-color:var(--good);}
.prop-toggle-label{font-family:var(--font-mono); font-size:var(--fs-small); font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-soft);}
.prop-fields{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-top:12px;}
.prop-fields[hidden]{display:none;}
.prop-input{display:flex; align-items:center; gap:8px;}
.prop-input input{flex:1 1 auto; min-width:0;}
.prop-unit{font-family:var(--font-mono); font-size:13px; color:var(--ink-muted);}
@media (max-width:560px){.prop-fields{grid-template-columns:1fr;}}

/* ---------- Prop-Konto: Anzeige ---------- */
.prop-panel .prop-rows{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:26px;}
.prop-row{display:flex; flex-direction:column; gap:9px; min-width:0;}
.prop-row-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px;}
.prop-row-label{font-family:var(--font-body); font-size:13px; color:var(--ink-soft);}
.prop-row-val{font-family:var(--font-mono); font-size:15px; font-weight:600; font-variant-numeric:tabular-nums;}
.prop-row-val.good{color:var(--good);} .prop-row-val.bad{color:var(--bad);} .prop-row-val.warn{color:var(--daily);}
.prop-track{position:relative; height:8px; border-radius:4px; background:rgba(255,255,255,.07); overflow:hidden;}
.prop-fill{position:absolute; left:0; top:0; bottom:0; border-radius:4px; background:linear-gradient(180deg,#4fe8b0,#22b07f);}
.prop-fill.bad{background:linear-gradient(180deg,#fb8585,#cf4b4b);}
.prop-fill.warn{background:linear-gradient(180deg,#f3c377,#d79a36);}
.prop-row-sub{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-muted);}
@media (max-width:860px){.prop-panel .prop-rows{grid-template-columns:1fr; gap:18px;}}

/* ---------- Zeitraum-Leiste über dem Inhalt ---------- */
.period-bar{display:flex; justify-content:flex-end; margin:0 0 14px;}
.period-group{display:inline-flex; gap:2px; padding:3px; border:1px solid var(--line); border-radius:var(--radius-pill); background:rgba(6,10,20,.34);}
.period-btn{display:inline-flex; align-items:baseline; gap:8px; padding:7px 14px; border:0; border-radius:var(--radius-pill); background:transparent; cursor:pointer; color:var(--ink-muted); font-family:var(--font-body); font-size:12.5px;}
.period-btn:hover{color:var(--ink); background:rgba(255,255,255,.05);}
.period-btn.on{background:rgba(52,211,153,.16); color:var(--ink);}
.period-btn-val{font-family:var(--font-mono); font-size:11.5px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink-muted);}
.period-btn.on .period-btn-val.good{color:var(--good);} .period-btn.on .period-btn-val.bad{color:var(--bad);}
@media (max-width:700px){
  .period-bar{justify-content:stretch; margin-bottom:10px;}
  .period-group{width:100%; justify-content:space-between;}
  .period-btn{flex:1 1 auto; justify-content:center; padding:7px 6px; font-size:11.5px;}
  .period-btn-val{display:none;}
}

/* ---------- Panel-Kopf: erst Herunterladen, dann Teilen, beide rechts ---------- */
.panel-head .panel-download{order:2; margin-left:auto;}
.panel-head .panel-share:not(.panel-download){order:3; margin-left:4px;}

/* die drei Regeln stehen auf einer Linie, auch wenn eine Beschriftung umbricht */
.prop-fields{align-items:end;}
.prop-fields .form-field{gap:6px;}
.prop-fields .form-field > label{display:flex; align-items:flex-end; min-height:2.6em; line-height:1.3;}

/* ---------- Prop: Modell und Phase als Schalterreihe ---------- */
.prop-body[hidden]{display:none;}
.prop-body{margin-top:12px; display:flex; flex-direction:column; gap:12px;}
.prop-seg{display:inline-flex; gap:2px; padding:3px; border:1px solid var(--line); border-radius:var(--radius-pill); background:rgba(6,10,20,.3); align-self:flex-start;}
.prop-seg-btn{padding:6px 14px; border:0; border-radius:var(--radius-pill); background:transparent; color:var(--ink-muted); font-family:var(--font-body); font-size:12.5px; cursor:pointer;}
.prop-seg-btn:hover{color:var(--ink);}
.prop-seg-btn.on{background:rgba(52,211,153,.16); color:var(--ink);}
.prop-fields{grid-template-columns:repeat(4, minmax(0,1fr));}
.prop-fields .form-field[hidden]{display:none;}
@media (max-width:640px){.prop-fields{grid-template-columns:repeat(2, minmax(0,1fr));}}

/* ---------- Prop-Konto ist überall als solches erkennbar ---------- */
.prop-tag{flex:none; margin-left:7px; padding:2px 6px; border-radius:5px; font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.1em; color:#f3c377; background:rgba(243,195,119,.14); border:1px solid rgba(243,195,119,.32);}
.app-bar .nav-tab .prop-tag{margin-left:auto;}
.tile-head .prop-tag{align-self:center;}

/* ---------- Von-Bis im Kopf der Trade-Tafel ---------- */
.panel-head .date-range{order:1; margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  padding:4px 8px 4px 12px; border:1px solid var(--line); border-radius:var(--radius-pill); background:rgba(6,10,20,.3);}
.panel-head .date-range.on{border-color:rgba(52,211,153,.4);}
.panel-head .panel-download{order:2; margin-left:8px;}
.date-range-label{font-family:var(--font-mono); font-size:var(--fs-small); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-muted);}
.date-range-sep{color:var(--ink-muted);}
.date-range-input{font-family:var(--font-mono); font-size:12px; color:var(--ink); background:transparent; border:0; outline:none; padding:3px 2px; width:122px;}
.date-range-input::-webkit-calendar-picker-indicator{filter:invert(.7); cursor:pointer;}
.date-range-clear{width:22px; height:22px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; background:rgba(255,255,255,.08); color:var(--ink-soft); font-size:11px; cursor:pointer;}
.date-range-clear:hover{background:rgba(255,255,255,.16); color:var(--ink);}
@media (max-width:760px){
  .panel-head .date-range{order:4; margin-left:0; width:100%; justify-content:space-between; margin-top:8px;}
  .date-range-input{width:auto; flex:1 1 auto; min-width:0;}
}
/* die Phasenwahl gehört nur zum Two-Step-Modell - [hidden] muss das Flex-Layout schlagen */
.prop-body > .form-field[hidden]{display:none !important;}

/* das Abzeichen drängt den Namen nicht mehr an den Rand */
.prop-tag{margin-left:7px; padding:2px 5px; font-size:8.5px; letter-spacing:.08em;}
.app-bar .nav-tab{gap:0;}
.app-bar .nav-tab .prop-tag{margin-left:7px; flex:none;}
.app-bar .nav-tab .nav-tab-name{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;}
.hc-bot-name .prop-tag{margin-left:8px;}
.fx-tab-prop{margin-left:5px; padding:1px 4px; font-size:7.5px;}
/* Konto-Zeilen: etwas weniger Innenabstand, damit Name und Abzeichen nebeneinander passen */
@media (min-width:1000px){ .app-bar .nav-tab{padding-left:12px; padding-right:12px;} }

/* ---------- Handy: Trade-Zeilen wieder auf einer Linie ---------- */
@media (max-width:560px){
  /* der Bot steht als Farbpunkt vor dem Symbol statt als Zeile darunter */
  .trades-panel .trade-row.has-bot:not(.flow-row){display:flex !important; flex-wrap:nowrap; align-items:center; gap:8px; padding:9px 4px;}
  .trades-panel .trade-row.has-bot:not(.flow-row) > :nth-child(4){order:0; display:block !important; flex:none;}
  .trades-panel .trade-row.has-bot:not(.flow-row) > :nth-child(4) .day-modal-bot{
    display:block; width:9px; height:9px; padding:0; border:0; border-radius:50%;
    background:currentColor; font-size:0; line-height:0; overflow:hidden;}
  .trades-panel .trade-row.has-bot:not(.flow-row) > :nth-child(3){order:1; flex:0 1 auto; min-width:0;}
  .trades-panel .trade-row.has-bot:not(.flow-row) > :nth-child(5){order:2; flex:none;}
  .trades-panel .trade-row.has-bot:not(.flow-row) > :nth-child(2){order:3; flex:none; font-size:10.5px; color:var(--ink-muted);}
  .trades-panel .trade-row.has-bot:not(.flow-row) > :nth-child(10){order:4; margin-left:auto; flex:none; text-align:right !important;}
  .trades-panel .trade-row.has-bot:not(.flow-row) .sym-chip .sym-dot{display:none;}

  /* Legende des Vergleichs linksbündig */
  .chart-legend{justify-content:flex-start !important;}
}
/* ---------- Handy: im Tafelkopf stehen Herunterladen und Teilen beisammen rechts ---------- */
@media (max-width:760px){
  .panel-head .panel-download{margin-left:auto;}
  .panel-head .panel-share:not(.panel-download){margin-left:6px;}
}
/* die untere Leiste ist entfernt - kein Platzhalter mehr am Seitenende */
body.has-tabbar{padding-bottom:0 !important;}
.fx-tabbar{display:none !important;}

/* ---------- Admin im neuen Kleid ---------- */
.admin-grid-head{border-bottom-color:rgba(255,255,255,.14) !important;}
.admin-user{font-family:var(--font-body) !important; font-size:13.5px;}
.admin-bot .name .prop-tag{margin-left:8px;}
.admin-row .share-btn{padding:5px 11px; font-size:11.5px;}

/* ---------- Neuigkeiten-Fenster ---------- */
.news-modal{width:min(94vw, 540px); max-height:88vh; overflow:auto; gap:12px;}
.news-shots{display:flex; flex-direction:column; gap:14px;}
@media (min-width:760px){
  /* Bilder rechts, Text links - so passt das Fenster ohne Rollen auf den Schirm */
  .news-modal{width:min(94vw, 840px); display:grid; grid-template-columns:minmax(0,1fr) 370px; column-gap:26px; row-gap:11px; align-items:start;}
  .news-modal > :not(.news-shots):not(.share-card-close){grid-column:1;}
  .news-shots{grid-column:2; grid-row:1 / span 7;}
  .news-modal .news-actions{margin-top:8px;}
}
.news-badge{align-self:flex-start; justify-self:start; padding:3px 9px; border-radius:var(--radius-pill); font-family:var(--font-mono);
  font-size:9.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:#34d399; background:rgba(52,211,153,.14); border:1px solid rgba(52,211,153,.45);}
.news-lead{margin:0; font-size:14px; line-height:1.55; color:var(--ink-soft);}
.news-steps{margin:0; padding:0 0 0 20px; display:flex; flex-direction:column; gap:7px;
  font-size:13.5px; line-height:1.5; color:var(--ink-soft);}
.news-steps li::marker{color:#34d399; font-family:var(--font-mono); font-size:12px;}
.news-shot{margin:2px 0 0; display:flex; flex-direction:column; gap:7px;}
.news-shot img{display:block; width:100%; height:auto; border-radius:12px; border:1px solid var(--line); background:rgba(6,10,20,.4);}
.news-shot figcaption{font-size:12px; line-height:1.45; color:var(--ink-muted);}
.news-foot{margin:2px 0 0; font-size:12.5px; line-height:1.45; color:var(--ink-muted);}
.news-actions{display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:4px;}
.news-actions .upload-submit{width:auto; padding:10px 20px;}
@media (max-width:560px){
  .news-modal{padding:18px 14px 16px;}
  .news-actions .share-btn, .news-actions .upload-submit{flex:1 1 auto; justify-content:center;}
  .news-modal .news-actions{position:sticky; bottom:-17px; z-index:2; margin-bottom:-6px;
    padding:12px 0 10px; background:linear-gradient(to top, var(--surface) 78%, rgba(0,0,0,0));}
}

/* ---------- Durchschnitt / Bester / Schlechtester unter dem Diagrammkopf ---------- */
.bar-stats{display:flex; flex-direction:column; gap:7px;
  margin:0 0 16px; padding:0 0 14px; border-bottom:1px solid rgba(255,255,255,.08);}
.bar-stat{display:flex; align-items:baseline; justify-content:space-between; gap:10px; min-width:0;}
.bar-stat .k{font-family:var(--font-body); font-size:12px; color:var(--ink-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bar-stat .v{font-family:var(--font-mono); font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; flex:none;}
.bar-stat .v.good{color:var(--good);}
.bar-stat .v.bad{color:var(--bad);}
.bar-stat-when{color:var(--ink-muted); font-weight:500;}
/* im Kopf der Tafel darf das Teilen-Zeichen nicht in die naechste Zeile rutschen */
.breakdown-grid .panel-head{flex-wrap:nowrap;}
.breakdown-grid .panel-head .panel-total{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.breakdown-grid .panel-head .panel-share{margin-left:auto; flex:none;}

/* ---------- Karte: die Kopie behaelt ihre Breite von der Seite ---------- */
.share-card-frame.wide{width:min(96vw, 860px);}
.share-node-fit{overflow:hidden;}
.share-node-fit > *{transform-origin:top left;}
/* die Tafel bringt ihren eigenen Rahmen mit - die Bande braucht keinen zweiten */
.share-card-node:has(> .share-node-fit){background:none; border:0; padding:0; margin:16px 0 0;}
.share-node-fit > .panel{margin:0 !important;}

.share-node-fit, .share-node-fit *{animation:none !important;}

/* ---------- lange Karten: die Flaeche rollt, statt oben und unten abzuschneiden ---------- */
.share-overlay{align-items:flex-start !important; overflow:auto; overscroll-behavior:contain;}
.share-card-frame{margin:auto;}

/* der Verlauf steht gross daneben - im Kopf braucht es ihn kein zweites Mal */
.hero-board .hc-spark{display:none !important;}

/* ---------- Echtgeld-Abzeichen und sein Schalter ---------- */
.prop-tag + .prop-tag{margin-left:5px;}
.real-box{margin-top:14px;}
.real-box .form-hint{margin-top:6px;}

/* ---------- Beste & schlechteste: der Bot als Punkt, solange die Spalten schmal sind ---------- */
@media (min-width:561px) and (max-width:1500px){
  .bw-head.has-bot, .bw-row.has-bot{grid-template-columns:78px 70px 14px 64px minmax(80px,1fr) !important;}
  .bw-head.has-bot > :nth-child(3){font-size:0;}
  .bw-row.has-bot .day-modal-bot{width:10px; height:10px; padding:0; border:0; border-radius:50%;
    background:currentColor; font-size:0; line-height:0; overflow:hidden; justify-self:start;}
}