/* Loop Gain — Stitch "US Top 30 Surge" tasarım dilinden uyarlandı */
:root {
  color-scheme: light;
  --bg:#f7f5f0; --card:#ffffff; --well:#f4f1eb; --border:#eeeae2; --border2:#e5e0d8;
  --ink:#1e293b; --ink2:#475569; --muted:#64748b;
  --blue:#0284c7; --blue-l:#e0f2fe; --orange:#ea580c; --orange-l:#fff7ed;
  --green:#16a34a; --green-l:#dcfce7; --red:#dc2626; --red-l:#fee2e2;
  --up:#16a34a; --down:#dc2626; --grid:#eeeae2; --axis:#d9d4ca;
  --shadow: 0 4px 20px -2px rgba(25,33,48,.04), 0 1px 3px rgba(25,33,48,.03);
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4; --s6:#008300; --s7:#4a3aa7; --s8:#e34948; --s0:#9a9892;
  --hd: "Hanken Grotesk", system-ui, sans-serif; --bd: "Geist", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: dark;
  --bg:#0f141c; --card:#161d29; --well:#1c2432; --border:#243040; --border2:#2c3848;
  --ink:#e8edf5; --ink2:#b4bfd0; --muted:#8593a6;
  --blue:#38bdf8; --blue-l:rgba(56,189,248,.14); --orange:#fb923c; --orange-l:rgba(251,146,60,.14);
  --green:#4ade80; --green-l:rgba(74,222,128,.14); --red:#f87171; --red-l:rgba(248,113,113,.14);
  --up:#4ade80; --down:#f87171; --grid:#243040; --axis:#34415a; --shadow:none;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767; --s0:#6f6e69;
}}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0f141c; --card:#161d29; --well:#1c2432; --border:#243040; --border2:#2c3848;
  --ink:#e8edf5; --ink2:#b4bfd0; --muted:#8593a6;
  --blue:#38bdf8; --blue-l:rgba(56,189,248,.14); --orange:#fb923c; --orange-l:rgba(251,146,60,.14);
  --green:#4ade80; --green-l:rgba(74,222,128,.14); --red:#f87171; --red-l:rgba(248,113,113,.14);
  --up:#4ade80; --down:#f87171; --grid:#243040; --axis:#34415a; --shadow:none;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767; --s0:#6f6e69;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.45 var(--bd); padding:0 16px 84px; }
.wrap { max-width:1280px; margin:0 auto; }
h1,h2,h3,h4,.name,.value,.tile .value,.timer b,.px { font-family:var(--hd); letter-spacing:-.01em; }
h2 { font-size:16px; font-weight:700; margin:0 0 10px; } h3 { margin:0; font-size:20px; font-weight:800; } h4 { margin:0 0 8px; font-size:14px; font-weight:700; }
.muted { color:var(--muted); } .small { font-size:12px; font-weight:400; letter-spacing:0; }
.mono { font-variant-numeric:tabular-nums; }
.up { color:var(--up); } .down { color:var(--down); }
.card { background:var(--card); border:1px solid var(--border); border-radius:20px; padding:16px; box-shadow:var(--shadow); }
a { color:inherit; }

/* başlık */
.hdr { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0 10px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand .mark { width:40px; height:40px; border-radius:11px; box-shadow:0 2px 8px rgba(0,0,0,.18); }
.brand .name { display:block; font-size:20px; font-weight:800; line-height:1.05; }
.brand .tag { display:block; font-size:10px; font-weight:600; letter-spacing:.06em; color:var(--muted); text-transform:uppercase; margin-top:2px; }
.hdr-r { display:flex; align-items:center; gap:8px; }
.chip { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); background:var(--card); border-radius:999px; padding:3px 10px; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.chip .dot { width:7px; height:7px; border-radius:50%; background:var(--muted); }
.chip.tg.on { color:var(--blue); border-color:var(--blue); background:var(--blue-l); } .chip.tg.on .dot { background:var(--blue); }
.iconbtn { width:36px; height:36px; border-radius:50%; border:1px solid var(--border); background:var(--card); color:var(--ink); cursor:pointer; font:inherit; font-size:15px; display:inline-flex; align-items:center; justify-content:center; }
.userbtn { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); background:var(--card); border-radius:999px; padding:2px 12px 2px 3px; text-decoration:none; font-weight:600; }
@media (max-width:560px) { .userbtn .uname { display:none; } .userbtn { padding:2px; } }

/* canlı şerit */
.live { display:flex; align-items:center; gap:16px; flex-wrap:wrap; position:relative; overflow:hidden; }
.live-l { flex:1 1 320px; min-width:0; }
.mkt { display:inline-flex; align-items:center; gap:7px; font-family:var(--hd); font-weight:800; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.mkt .dot { width:8px; height:8px; border-radius:50%; background:var(--muted); }
.mkt.open { color:var(--green); } .mkt.open .dot { background:var(--green); box-shadow:0 0 0 4px var(--green-l); }
.mkt.pre, .mkt.post { color:var(--orange); } .mkt.pre .dot, .mkt.post .dot { background:var(--orange); }
.live .sub { color:var(--muted); font-size:12px; margin:4px 0 10px; }
.btns { display:flex; gap:8px; flex-wrap:wrap; }
.pill { border:1px solid var(--border); background:var(--well); color:var(--ink); border-radius:999px; padding:9px 16px; font:inherit; font-weight:600; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px; transition:transform .12s, background .12s; }
.pill:hover { transform:translateY(-1px); } .pill:disabled { opacity:.5; transform:none; cursor:default; }
.pill.primary { background:var(--blue); border-color:var(--blue); color:#fff; }
.pill.orange { background:var(--orange-l); border-color:color-mix(in srgb, var(--orange) 35%, transparent); color:var(--orange); }
.pill.ghost { background:transparent; } .pill.small { padding:6px 12px; font-size:12px; }
.timer { display:inline-flex; align-items:center; gap:10px; border:1px solid var(--border); background:var(--well); border-radius:16px; padding:8px 16px 8px 10px; font-variant-numeric:tabular-nums; }
.timer .tl { display:block; font-size:10px; color:var(--muted); line-height:1.1; text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.timer b { font-size:24px; line-height:1.1; font-weight:800; }
.timer.soon b { color:var(--green); }
.ring { width:40px; height:40px; transform:rotate(-90deg); }
.ring circle { fill:none; stroke-width:3.2; } .ring .bg { stroke:var(--border2); }
.ring .fg { stroke:var(--green); stroke-linecap:round; stroke-dasharray:97.4; stroke-dashoffset:97.4; transition:stroke-dashoffset 1s linear; }
.bar { position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--well); }
.bar .fill { height:100%; width:0; background:linear-gradient(90deg, var(--blue), var(--green)); transition:width 1s linear; }
.error { background:var(--red-l); color:var(--red); border:1px solid color-mix(in srgb, var(--red) 30%, transparent); padding:8px 14px; border-radius:14px; margin-top:12px; }

/* telegram kartı */
.tgcard { display:flex; align-items:center; gap:12px; margin-top:12px; padding:12px 16px; border-color:color-mix(in srgb, var(--blue) 30%, var(--border)); background:color-mix(in srgb, var(--blue-l) 50%, var(--card)); }
.tg-ico { width:40px; height:40px; border-radius:12px; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; flex:none; }
.tg-body { flex:1; min-width:0; } .tg-title { font-weight:600; font-size:13px; } .tg-title b { color:var(--blue); }
.tg-meta { font-size:12px; color:var(--ink2); margin-top:2px; }
.tgcard.off { border-color:var(--border); background:var(--card); } .tgcard.off .tg-ico { background:var(--muted); } .tgcard.off .tg-title b { color:var(--muted); }

/* endeks şeridi */
.idx { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-top:12px; }
.idx div { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:8px 12px; display:flex; justify-content:space-between; align-items:baseline; font-variant-numeric:tabular-nums; }
.idx .s { font-family:var(--hd); font-weight:800; font-size:13px; letter-spacing:.03em; } .idx .p { font-weight:600; font-size:13px; }
@media (max-width:560px) { .idx { grid-template-columns:repeat(2, 1fr); } }

/* segment */
.segrow { display:flex; gap:8px; flex-wrap:wrap; }
.seg { display:inline-flex; background:var(--well); border:1px solid var(--border); border-radius:999px; padding:4px; gap:2px; margin-top:12px; max-width:100%; overflow-x:auto; }
.seg button { border:0; background:transparent; color:var(--ink2); padding:7px 14px; border-radius:999px; font:inherit; font-weight:600; font-size:13px; cursor:pointer; white-space:nowrap; }
.seg button.on { background:var(--card); color:var(--ink); box-shadow:var(--shadow); border:1px solid var(--border); }
.seg button .n { color:var(--muted); font-weight:500; margin-left:4px; }
.seg.small { margin:0 0 8px; } .seg.small button { padding:5px 12px; font-size:12px; }

/* metrik kutuları */
.tiles { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-top:12px; }
@media (max-width:860px) { .tiles { grid-template-columns:repeat(2, 1fr); } }
.tile .label { color:var(--muted); font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.tile .value { font-size:26px; font-weight:800; margin:4px 0 2px; line-height:1.1; } .tile .hint { color:var(--muted); font-size:12px; }

/* sektör filtresi */
.filt { margin-top:12px; padding:12px 16px; }
.filt-h { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.filt-l { font-family:var(--hd); font-weight:700; font-size:13px; }
.secsel { margin-left:auto; border:1px solid var(--border); background:var(--well); color:var(--ink); border-radius:999px; padding:6px 12px; font:inherit; font-size:12px; font-weight:600; }
.legend { display:flex; flex-wrap:wrap; gap:8px; }
.lg.all { background:var(--well); } .lg.on { background:var(--ink); color:var(--card); border-color:var(--ink); } .lg.on .n { color:inherit; opacity:.7; }
.lg { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); border-radius:999px; padding:5px 12px; background:var(--card); cursor:pointer; font-size:12px; font-weight:600; user-select:none; color:var(--ink); }
.lg .sw { width:9px; height:9px; border-radius:3px; display:inline-block; } .lg .n { color:var(--muted); font-weight:500; } .lg.dim { opacity:.45; }

/* grafikler */
.charts { display:grid; grid-template-columns:2fr 1fr; gap:12px; margin-top:12px; }
@media (max-width:900px) { .charts { grid-template-columns:1fr; } }
.chartwrap { position:relative; height:620px; } .chartwrap.short { height:320px; }

/* liste satırları */
.list { margin-top:12px; padding:8px 0 0; }
.list-h { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 16px 8px; flex-wrap:wrap; }
.list-h h2 { margin:0; font-size:14px; }
.rows { display:flex; flex-direction:column; }
.row { display:grid; grid-template-columns:30px 36px minmax(0,1fr) 96px 120px 110px; gap:12px; align-items:center; padding:10px 16px; border-top:1px solid var(--border); cursor:pointer; transition:background .12s; }
.row:hover { background:color-mix(in srgb, var(--well) 60%, transparent); }
.rk { width:28px; height:28px; border-radius:9px; background:var(--well); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:var(--hd); font-weight:800; font-size:12px; color:var(--ink2); }
.row:nth-child(1) .rk, .row:nth-child(2) .rk, .row:nth-child(3) .rk { background:var(--orange-l); color:var(--orange); border-color:color-mix(in srgb, var(--orange) 30%, transparent); }
.logo { width:36px; height:36px; border-radius:10px; object-fit:contain; background:#fff; border:1px solid var(--border); flex:none; }
.logo.fb { display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:700; background:var(--c); border:none; font-size:13px; }
.logo.fb[hidden] { display:none; }
.rinfo { min-width:0; }
.rtop { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sym { font-family:var(--hd); font-weight:800; font-size:16px; letter-spacing:.02em; }
.sec { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--border); background:var(--well); border-radius:6px; padding:1px 7px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--ink2); }
.sec .sw { width:7px; height:7px; border-radius:2px; }
.badge { font-size:10px; border-radius:5px; padding:1px 6px; font-weight:700; }
.badge.new { background:var(--blue-l); color:var(--blue); } .badge.up { background:var(--green-l); } .badge.down { background:var(--red-l); }
.rname { color:var(--ink2); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rmeta { color:var(--muted); font-size:11px; margin-top:1px; font-variant-numeric:tabular-nums; }
.rmeta b { color:var(--ink2); font-weight:600; }
svg.spark { width:120px; height:32px; display:block; justify-self:center; }
.rpx { text-align:right; font-variant-numeric:tabular-nums; }
.rpx .px { font-size:16px; font-weight:800; display:block; }
.pct { display:inline-block; margin-top:3px; background:var(--green-l); color:var(--green); border-radius:999px; padding:2px 9px; font-weight:700; font-size:13px; }
.d5 { font-size:11px; color:var(--muted); display:block; margin-top:2px; }
@media (max-width:640px) {
  .row { grid-template-columns:26px 32px minmax(0,1fr) 64px 72px 92px; gap:8px; padding:10px 12px; }
  .rvol b { font-size:12px; } .rvol .rv { font-size:9px; }
  svg.spark { width:72px; height:28px; } .rk { width:24px; height:24px; font-size:11px; } .logo { width:32px; height:32px; }
  .sym { font-size:15px; } .rpx .px { font-size:14px; } .pct { font-size:12px; padding:1px 7px; } .d5 { display:none; }
}

/* özet */
.ozet { margin-top:12px; background:var(--well); }
.ozet-h { font-family:var(--hd); font-weight:700; font-size:13px; margin-bottom:8px; }
.ozet-g { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.ozet-g div { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:8px 12px; }
.ozet-g .k { display:block; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.ozet-g b { font-family:var(--hd); font-size:16px; font-weight:800; }
@media (max-width:640px) { .ozet-g { grid-template-columns:repeat(2, 1fr); } }
footer { margin-top:16px; text-align:center; }

/* mobil alt menü */
.tabbar { display:none; }
@media (max-width:760px) {
  .tabbar { display:grid; grid-template-columns:repeat(4, 1fr); position:fixed; left:0; right:0; bottom:0; background:color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter:blur(12px); border-top:1px solid var(--border); padding:6px 0 calc(6px + env(safe-area-inset-bottom)); z-index:20; }
  .tabbar a { text-decoration:none; text-align:center; font-size:18px; color:var(--ink2); }
  .tabbar a span { display:block; font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-top:1px; }
  .chartwrap { height:520px; }
}

/* detay */
dialog { border:1px solid var(--border); border-radius:24px; background:var(--card); color:var(--ink); width:min(880px, 94vw); padding:18px; box-shadow:0 24px 48px -12px rgba(25,33,48,.2); }
dialog::backdrop { background:rgba(25,33,48,.35); backdrop-filter:blur(8px); }
.dhead { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:10px; }
.symcell { display:inline-flex; align-items:center; gap:8px; }
.dstats { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:8px; margin-bottom:10px; }
.dstats div { background:var(--well); border:1px solid var(--border); border-radius:12px; padding:6px 10px; }
.dstats .k { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.05em; font-weight:600; } .dstats .v { font-weight:700; font-family:var(--hd); }
dialog .chartwrap { height:340px; }
.sw { width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:6px; vertical-align:middle; }

/* teknik seviyeler */
.teknik { margin-top:12px; border-top:1px solid var(--border); padding-top:10px; }
.tgrid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:700px) { .tgrid { grid-template-columns:1fr; } }
.ladder { font-variant-numeric:tabular-nums; font-size:13px; }
.ladder .lv { display:grid; grid-template-columns:14px 1fr auto auto; gap:8px; align-items:center; padding:3px 8px; border-radius:8px; }
.ladder .lv .dot { width:8px; height:8px; border-radius:50%; background:var(--muted); }
.ladder .lv .pc { color:var(--muted); min-width:56px; text-align:right; } .ladder .lv .val { min-width:70px; text-align:right; }
.ladder .lv.price { background:var(--well); font-weight:700; }
.ladder .lv.res .dot, .ladder .lv.hi .dot { background:var(--down); } .ladder .lv.sup .dot, .ladder .lv.lo .dot { background:var(--up); }
.ladder .lv.vwap .dot { background:var(--blue); } .ladder .lv.target .dot { background:var(--green); } .ladder .lv.stop .dot { background:var(--red); }
.ladder .lv.target { color:var(--up); } .ladder .lv.stop { color:var(--down); }
.flags .f { display:flex; gap:6px; align-items:flex-start; font-size:13px; padding:3px 0; } .flags .f .i { width:16px; flex:none; text-align:center; }
.warns { margin-top:8px; }
.warns .w { font-size:12px; color:var(--ink2); background:var(--orange-l); border-left:3px solid var(--orange); padding:5px 8px; border-radius:0 8px 8px 0; margin:4px 0; }
.tkey { margin-top:10px; font-size:11px; color:var(--muted); line-height:1.5; } .tkey b { color:var(--ink2); font-weight:600; }

/* avatar */
.avatar { border-radius:50%; object-fit:cover; display:inline-block; vertical-align:middle; flex:none; border:1px solid var(--border); }
.avatar.fb { display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(160deg,#0284c7,#16a34a); color:#fff; font-weight:700; border:none; }
h1 .avatar { margin-right:8px; }

/* sinyal ışıkları */
.led { width:10px; height:10px; border-radius:50%; display:inline-block; flex:none; position:relative; }
.led.yukselen { background:var(--green); box-shadow:0 0 0 0 var(--green); animation:ledg 1.4s ease-out infinite; }
.led.dusen { background:var(--red); box-shadow:0 0 0 0 var(--red); animation:ledr 1.4s ease-out infinite; }
@keyframes ledg { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--green) 60%, transparent); opacity:1 } 70% { box-shadow:0 0 0 8px transparent; opacity:.55 } 100% { box-shadow:0 0 0 0 transparent; opacity:1 } }
@keyframes ledr { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--red) 60%, transparent); opacity:1 } 70% { box-shadow:0 0 0 8px transparent; opacity:.55 } 100% { box-shadow:0 0 0 0 transparent; opacity:1 } }
@media (prefers-reduced-motion: reduce) { .led { animation:none !important; } }
.ledkey { display:flex; gap:14px; flex-wrap:wrap; font-size:11px; color:var(--muted); align-items:center; }
.ledkey span { display:inline-flex; align-items:center; gap:6px; }
.row.dusen .pct { background:var(--orange-l); color:var(--orange); }
/* ışık = sıra rozeti */
.row.yukselen .rk, .row.dusen .rk { color:#fff; border-color:transparent; }
.row.yukselen .rk { background:var(--green); animation:ledg 1.4s ease-out infinite; }
.row.dusen .rk { background:var(--red); animation:ledr 1.4s ease-out infinite; }
.lg.led-f { gap:7px; }
.chip.warn { color:var(--orange); border-color:color-mix(in srgb, var(--orange) 40%, transparent); background:var(--orange-l); }
.chip.live { color:var(--green); border-color:color-mix(in srgb, var(--green) 40%, transparent); background:var(--green-l); }
/* hacim sütunu */
.rvol { display:flex; flex-direction:column; gap:2px; font-variant-numeric:tabular-nums; }
.rvol b { font-family:var(--hd); font-size:14px; font-weight:800; }
.rvol .rv { font-size:10px; color:var(--muted); font-weight:600; }
.rvol .rv.warm { color:var(--orange); } .rvol .rv.hot { color:var(--red); }
.rvbar { display:block; height:4px; border-radius:2px; background:var(--well); overflow:hidden; }
.rvbar span { display:block; height:100%; background:linear-gradient(90deg, var(--blue), var(--orange)); border-radius:2px; }
/* kalite / puan / açılış öncesi */
.pill.small.on { background:var(--green); border-color:var(--green); color:#fff; }
#kaliteBtn { margin-top:12px; align-self:center; }
.pmbanner { margin-top:12px; background:var(--orange-l); border:1px solid color-mix(in srgb, var(--orange) 35%, transparent); color:var(--ink); border-radius:14px; padding:8px 14px; font-size:13px; }
.puan { display:inline-flex; align-items:center; gap:4px; font-family:var(--hd); font-weight:800; font-size:11px; border-radius:6px; padding:1px 7px; background:var(--well); color:var(--ink2); border:1px solid var(--border); }
.puan.iyi { background:var(--green-l); color:var(--green); border-color:transparent; } .puan.orta { background:var(--orange-l); color:var(--orange); border-color:transparent; }
.kal { font-size:10px; color:var(--green); font-weight:700; }
.dlinks { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:10px 0 0; }
.puanbox { margin-left:auto; font-size:12px; color:var(--ink2); }
.puanbox b { font-family:var(--hd); font-size:18px; font-weight:800; margin-left:4px; }
.haber .h { padding:5px 0; border-bottom:1px solid var(--border); }
.haber .h a { text-decoration:none; font-weight:600; color:var(--ink); font-size:13px; } .haber .h a:hover { text-decoration:underline; }
.haber .h .m { display:block; color:var(--muted); font-size:11px; }
.stbar { display:flex; height:8px; border-radius:4px; overflow:hidden; background:var(--well); margin:6px 0 8px; }
.stbar span { display:block; height:100%; } .stbar .b { background:var(--green); } .stbar .s { background:var(--red); }
.st .m { padding:5px 0; border-bottom:1px solid var(--border); font-size:12px; }
.st .m .u { font-weight:600; color:var(--ink2); margin-right:4px; } .st .m .t { color:var(--muted); font-size:10px; margin-left:4px; }
.st .m .d { font-size:10px; border-radius:4px; padding:0 5px; font-weight:700; margin-right:4px; }
.st .m .d.Bullish { background:var(--green-l); color:var(--green); } .st .m .d.Bearish { background:var(--red-l); color:var(--red); }
/* çevrimiçi davetliler + toast */
.online { display:inline-flex; align-items:center; }
.online .avatar { width:26px; height:26px; margin-left:-8px; border:2px solid var(--card); box-shadow:0 0 0 2px var(--green); }
.online .avatar:first-child { margin-left:0; }
.online .n { font-size:11px; color:var(--green); font-weight:700; margin-left:6px; }
.toasts { position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; z-index:50; pointer-events:none; }
@media (max-width:760px) { .toasts { bottom:76px; left:16px; } }
.toast { pointer-events:auto; display:flex; align-items:center; gap:10px; background:var(--card); color:var(--ink); border:1px solid var(--border); border-left:4px solid var(--green); border-radius:14px; padding:10px 14px; box-shadow:0 12px 32px -4px rgba(25,33,48,.18); font-size:13px; min-width:240px; max-width:360px; animation:toastin .25s ease-out; }
.toast.out { animation:toastout .3s ease-in forwards; }
.toast .avatar { width:32px; height:32px; }
.toast b { font-family:var(--hd); } .toast .t { color:var(--muted); font-size:11px; display:block; }
.toast .x { margin-left:auto; border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:14px; }
@keyframes toastin { from { transform:translateY(12px); opacity:0 } to { transform:none; opacity:1 } }
@keyframes toastout { to { transform:translateY(12px); opacity:0 } }