/* AI Market Analytics · v2 · Coin-Seite (Design-Runde 19.10.: Telegram + SaaS, gepflegt von CHEF 3).
   Nur Ergaenzungen zum Kern (app.css). Farben nur ueber die Variablen, feste Farben nur in der Heatmap (Canvas). */

/* Abschnitt-Kopf: Titel bleibt ganz, der rechte Text darf umbrechen */
#a-coin .kopf>span:first-child{flex:0 0 auto}
#a-coin .kopf .rechts{min-width:0}

/* ---- Kopfkarte der Coin: Avatar, Kuerzel, Boerse links, darunter grosser Kurs und breite Kurve ---- */
.c-profil{background:var(--sec);margin:12px var(--rand) 0;border-radius:var(--rund);box-shadow:inset 0 0 0 1px var(--rahmen);padding:16px 16px 14px;
  display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:12px;align-items:center;text-align:left}
.c-profil .ava{width:48px;height:48px;font-size:15px;grid-row:1/3;grid-column:1}
/* vier Zeichen (XYZQ, PEPE): der Kern setzt .ava.vier 11 px fuer 40-px-Kreise, im 48-px-Kreis darf es groesser sein */
.c-profil .ava.vier{font-size:12.5px}
.c-profil h1{grid-column:2;margin:0;font-size:19px;font-weight:600;letter-spacing:-.015em;align-self:end;overflow-wrap:anywhere}
/* ohne Unterzeile steht das Kuerzel mittig neben dem Avatar */
.c-profil.c-solo h1{grid-row:1/3;align-self:center}
.c-profil small{grid-column:2;margin:1px 0 0;align-self:start;color:var(--hint);font-size:13.5px}
.c-profil .lade{grid-column:1/-1}
.c-kurs{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin-top:14px}
.c-kurs b{font-size:36px;font-weight:600;letter-spacing:-.035em;line-height:1.1}
.c-kurs .pille{font-size:14px}
.c-kurs .c-zeit{font-size:13px;color:var(--hint);margin-left:-4px}
.c-kurve{grid-column:1/-1;display:block;margin-top:12px}
.c-kurve:empty{display:none}
.c-kurve .spark{width:100%;height:76px}
.c-kurve .spark .fl{display:block;opacity:.13}
.c-kurve small{display:block;text-align:right;font-size:12.5px;margin-top:4px}
/* Lade-Geruest in der Form der fertigen Karte (Farbe --ton kommt aus dem Kern) */
.c-profil .c-lade-u{grid-column:2;width:88px;height:10px;margin-top:7px;align-self:start}
.c-profil .c-lade-a{width:156px;height:30px;border-radius:9px;margin-top:18px}
.c-profil .c-lade-b{height:76px;border-radius:10px;margin-top:14px}
/* Coin ohne Futures: der Satz steht in derselben Karte */
.c-profil-text{grid-column:1/-1;margin-top:14px;padding-top:12px;border-top:1px solid var(--trenn);color:var(--hint);font-size:14px;line-height:1.45;text-wrap:pretty}

/* ---- Zeilen ---- */
.c-ok{color:var(--long)} .c-gelb{color:var(--warn)} .c-rot{color:var(--short)} .c-info{color:var(--hint)}
.c-link{color:var(--akzent)}
.c-balken{margin-top:8px}
.c-umbruch .re{white-space:normal;flex:0 1 auto;min-width:0}
.c-nb{white-space:nowrap}
.c-abstand{margin-top:28px}

/* ---- Mehrere Teile als EINE Karte (Liquidationen, Plan): Linie zwischen den Teilen ---- */
.c-gruppe{background:var(--sec);margin:0 var(--rand);border-radius:var(--rund);overflow:hidden;box-shadow:inset 0 0 0 1px var(--rahmen)}
.c-gruppe>.liste,.c-gruppe>.kacheln{margin:0;border-radius:0;box-shadow:none;background:none}
.c-gruppe>*+*{border-top:1px solid var(--trenn)}

/* ---- Liquidationen: Verhaeltnis Longs gegen Shorts ---- */
.c-verh{padding:4px 16px 13px}
.c-verh-text{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;font-weight:500;margin-top:6px}
.c-verh+.zeile::before{content:"";position:absolute;top:0;left:14px;right:0;border-top:1px solid var(--trenn)}

/* ---- Heatmap: feste dunkle Flaeche oben in der Karte, Magnete darunter ---- */
.c-hm{display:block;width:100%;margin:0;background:var(--dunkel);line-height:0;padding:0}
.c-hm canvas{display:block;width:100%;height:220px}
.c-hm-lade{height:220px;margin:0 var(--rand);border-radius:var(--rund);background:var(--dunkel)}
.c-hm-karte{position:relative}
.c-hm-karte>.c-hm+.liste{border-top:0}
/* Rahmen ueber der Grafik (der Canvas deckt den inneren Rahmen der Karte sonst zu; dunkel ist --dunkel gleich dem Hintergrund) */
.c-hm-karte::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--rahmen);pointer-events:none}
.blatt-inhalt>.c-hm-karte{margin-top:12px}
.c-hm-chips{padding-top:10px}

/* ---- Reisstest: Auswahl dicht unter dem Kopf wie jede Karte ---- */
#a-coin [data-teil="riss"] .wahl{margin-top:0}

/* ---- Plan rechnen ---- */
.c-einheit{flex:0 0 14px;color:var(--hint);font-size:15px;margin-left:-5px}
/* Hinweis bei falscher Eingabe: ruhige Karte mit Symbol */
.c-hinweis{display:flex;align-items:center;gap:10px;margin:12px var(--rand) 0;padding:10px 14px 10px 10px;border-radius:14px;
  background:var(--sec);box-shadow:inset 0 0 0 1px var(--rahmen);font-size:14px;line-height:1.4}
@supports (color:color-mix(in srgb,red,blue)){.c-hinweis{background:color-mix(in srgb,var(--warn) 9%,var(--sec))}}
.c-hinweis span{min-width:0}


/* ---- Fragen zur Coin: feste Befehle, Antwort als Karte ---- */
.c-fragen+.c-gruppe{margin-top:8px}
.c-antwort .text p b{font-weight:600}

/* ---- Fuss ---- */
.c-fuss{margin-top:18px}