/* =========================================================
       FinLens — TEKNİK ANALİZ TERMİNALİ
       Midnight Glass UI (TITANIUM 100vh LOCK EDITION)
       ========================================================= */

    :root{
      /* ── MIDNIGHT GLASS — FinLens v1.0 (Navy tema) ── */
      --bg0:#1A1E26;          /* body — outer shell background     */
      --bg1:#222831;          /* topbar / ticker / panel shell     */
      --bg2:#2A2F3A;          /* card surface                      */
      --bg3:#31363F;          /* raised / inputs / hover           */
      --ink:#F2F4FA;          /* primary text                      */
      --muted:#B8BDD4;        /* secondary text                    */
      --muted2:#7A8090;       /* labels / metadata                 */
      --line:rgba(255,255,255,.08);
      --line2:rgba(255,255,255,.04);
      --glass:#2A2F3A;        /* card surface = bg2                */
      --glass2:#31363F;       /* elevated card = bg3               */
      --shadow:0 4px 20px rgba(0,0,0,.60);
      --neon:#34A863;         /* BUY / UP / positive               */
      --neon2:#34A863;
      --warn:#9EA3BE;         /* neutral — no amber                */
      --bad:#FF1744;          /* SELL / DOWN / danger              */
      --good:#34A863;
      --radius:8px;
      --radius2:12px;
      --pad:14px;
      --pad2:20px;
      --mono: 'JetBrains Mono','SF Mono','Roboto Mono',Menlo,'Courier New',monospace;
      --sans: -apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',system-ui,sans-serif;
      --gold:#34A863;
      --gold-bright:#34A863;
      /* ── TICKER STRIP TOKENS ── */
      --topbar-bg:#1A1E26;
      --ticker-bg:#222831;
      --corp-green:#34A863;
      --corp-red:#FF1744;
      --chip-bg-green:rgba(52,168,99,.08);
      --chip-bg-red:rgba(255,23,68,.08);
    }
    *{box-sizing:border-box}
    
       /* 1) 100vh kilidi (Safari dahil) — dış scroll kesin kapalı */
     html, body {
  margin: 0; padding: 0; background: var(--bg0); color: #fff;
  width: 100%;
  height: 100vh;
  height: 100dvh;                 /* Safari/mac taşma fix */
  overflow: hidden !important;
  overscroll-behavior: none;      /* yukarı “rubber band” kapat */
  display: flex; flex-direction: column;
  font-family: var(--sans);
}

/* Safari/mac rubber-band kesin kilit */
body{
  position: fixed;
  inset: 0;
}

    /* Scrollbars */
    ::-webkit-scrollbar{width:4px;height:4px}
    ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:999px;border:1px solid transparent;min-height:20px}
    ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28)}
    /* Track: her zaman kenar boşluklu — scroll çizgisi kenarlara yapışmaz */
    ::-webkit-scrollbar-track{background:transparent;margin-top:10px;margin-bottom:10px}

    /* ── UNIVERSAL SCROLL INSET PATCH ──────────────────────────────────────
       Scrollbar must never touch panel border. All scroll containers get
       4px right inset: content padding + scrollbar margin-in.
       ─────────────────────────────────────────────────────────────────── */
    #panel-trading #watchlist,
    #panel-trading #aiFeed,
    #panel-trading #alarmList,
    #panel-ai-nav .feed,
    #panel-history .table-scroll,
    #panel-ai-signals #alarmList,
    #panel-ai-signals .panel-body,
    #panel-backtest .panel-body,
    #panel-ai-summary .panel-body,
    #panel-performance .panel-body,
    .panel-shell .panel-body,
    .feed,
    .list {
      scrollbar-gutter: stable;
      padding-right: 4px;
    }
    /* Webkit: track inset — iç scroll öğeleri kenardan uzak dursun */
    #panel-trading #watchlist::-webkit-scrollbar-track,
    #panel-trading #aiFeed::-webkit-scrollbar-track,
    #panel-ai-nav .feed::-webkit-scrollbar-track,
    #panel-history .table-scroll::-webkit-scrollbar-track,
    .feed::-webkit-scrollbar-track {
      margin-top: 8px;
      margin-bottom: 14px;
    }
    /* aiFeed özel — scrollbar yuvası dip kenara yapışmasın (2mm boşluk) */
    #panel-trading #aiFeed::-webkit-scrollbar-track {
      margin-bottom: 20px !important;
      margin-top: 8px !important;
    }
    /* aiFeed içeriği dibe yapışmasın */
    #panel-trading #aiFeed {
      padding-bottom: 6px !important;
    }
    /* Watchlist özel */
    #panel-trading #watchlist::-webkit-scrollbar-track {
      margin-bottom: 14px !important;
    }
    #panel-trading #watchlist {
      padding-bottom: 4px !important;
    }

    .app {
      flex: 1; display: flex; flex-direction: column; min-height: 0;
      padding: 18px 10px 6px; gap: 10px;
    }
   
    .shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  background: var(--bg1);
  box-shadow: var(--shadow);
  overflow: hidden;
  width: 100%;         /* Tüm genişliği kullan */
  /* max-width / max-height / margin yok */
}

    /* Top bar */
   .topbar {
  flex-shrink: 0;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background: var(--topbar-bg);
  border-bottom: 1px solid rgba(255,255,255,.08);
  gap: 10px;
  transition: height .2s ease-out, min-height .2s ease-out, max-height .2s ease-out, padding .2s ease-out;

  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
    .brand { display: flex; align-items: center; gap: 10px; min-width: 210px; opacity: 1; }
    .logo {
      width: 32px; height: 32px; border-radius: 8px; background: #34A863;
      border: none; display: grid; place-items: center;
      overflow: hidden; box-shadow: 0 2px 8px rgba(52,168,99,.35);
    }
    .logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
    .brand-text { display: flex; flex-direction: column; gap: 2px; }
    .brand { flex-shrink: 0 !important; white-space: nowrap !important; flex-wrap: nowrap !important; }
    .brand-text { white-space: nowrap !important; flex-shrink: 0 !important; }
    .brand-title { 
      font-size: 12px; letter-spacing: .18em; margin: 0; text-transform: uppercase; line-height: 1.15; font-weight: 800; 
      color: rgba(255,255,255,.96); text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 10px 22px rgba(0,0,0,.45);
      white-space: nowrap !important;
    }
    .brand .sub { 
      font-size: 10px; color: rgba(255,255,255,.78); letter-spacing: .14em; text-transform: uppercase; margin-top: 1px; 
      text-shadow: 0 1px 0 rgba(0,0,0,.35);
    }
    
    .pills { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; justify-content: center; min-width: max-content; }
    .pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--bg2); padding: 6px 10px; border-radius: 999px; font-size: 11px; color: var(--muted); user-select: none; white-space: nowrap; flex: 0 0 auto; }
    .dot { width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.25); }
    .dot.live { background: var(--corp-green); box-shadow: 0 0 0 6px rgba(52,168,99,.15); }
    .dot.sim { background: rgba(255,255,255,.38); box-shadow: none; }
    .pill strong { color: var(--ink); font-weight: 700; }
    
    .rightbar { display: flex; align-items: center; gap: 8px; justify-content: flex-end; min-width: 260px; }
    .btn { appearance: none; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: var(--ink); padding: 7px 10px; border-radius: 12px; font-size: 12px; cursor: pointer; font-weight: 600; transition: transform .12s ease, background .12s ease, border-color .12s ease; }
    .btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.20); }
    .btn:active { transform: translateY(1px); }
    .btn.primary { border-color: rgba(52,168,99,.40); background: rgba(52,168,99,.12); color: var(--neon); }
    .btn.primary:hover { background: rgba(52,168,99,.20); border-color: rgba(52,168,99,.55); }
    .btn.ghost { background: transparent; border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.88); }
    .btn.ghost:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.24); color: #fff; }
    /* AL butonu — yeşil/buy */
    .btn.buy { border-color: rgba(52,168,99,.45); background: rgba(52,168,99,.13); color: #34A863; font-weight: 700; letter-spacing: .04em; }
    .btn.buy:hover { background: rgba(52,168,99,.22); border-color: rgba(52,168,99,.65); }
    /* SAT butonu — kırmızı/sell */
    .btn.sell { border-color: rgba(255,23,68,.32); background: rgba(255,23,68,.09); color: #FF6478; font-weight: 700; letter-spacing: .04em; }
    .btn.sell:hover { background: rgba(255,23,68,.17); border-color: rgba(255,23,68,.50); }
    /* UYARI — amber (sıfırlama / geri dönüşü olmayan işlemler) */
    .btn.warn { border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.09); color: rgba(251,191,36,.92); font-weight: 600; }
    .btn.warn:hover { background: rgba(251,191,36,.17); border-color: rgba(251,191,36,.55); }
    /* TEHLİKE — çıkış / oturum sil */
    .btn.danger { border-color: rgba(255,23,68,.22); background: transparent; color: rgba(255,100,120,.80); font-weight: 600; }
    .btn.danger:hover { background: rgba(255,23,68,.08); border-color: rgba(255,23,68,.38); color: #FF6478; }
    /* AL / SAT — kompakt, sabit boyut */
    #btnBuy, #btnSell {
      flex: 0 0 auto;
      width: auto;
      min-width: 46px;
      padding: 6px 14px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .06em;
    }
    .toggle { display: flex; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.04); }
    .toggle button { border: 0; background: transparent; color: var(--muted); padding: 7px 10px; min-width: 40px; font-size: 12px; cursor: pointer; font-weight: 700; }
    .toggle button.active { color: var(--ink); background: rgba(255,255,255,.06); }
    .disclaimer { margin-left: 8px; font-size: 10px; color: rgba(231,238,252,.78); padding: 5px 8px; max-width: 380px; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.20); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* ── TOPBAR BUTONLARI — kompakt, tutarlı ── */
    #btnNotif, #btnLogout, #btnReset, #btnShortcuts {
      padding: 5px 10px;
      font-size: 11px;
      white-space: nowrap;
      color: rgba(255,255,255,.88);
      font-weight: 600;
    }
    /* ── EKLE butonu — kompakt ── */
    #btnAddWl {
      padding: 5px 10px;
      font-size: 11px;
      white-space: nowrap;
    }

    /* Ticker row */
    .tickerbar{
  flex-shrink: 0;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 0 12px;
  background: var(--ticker-bg);
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: height .2s ease-out, min-height .2s ease-out, max-height .2s ease-out, padding .2s ease-out;

  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
    .ticker-left { display: flex; align-items: center; gap: 12px; }
    .symbol {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  min-width: 180px;
}

    .symbol .pair { font-family: var(--mono); font-weight: 800; letter-spacing: .06em; }
    .symbol .tf { font-size: 11px; color: var(--muted); padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); }
    .quote { display: flex; align-items: baseline; gap: 10px; }

   

/* No-price state: “Simulating…” daha ölçülü */
#uiPrice.is-sim{
  font-size: 1.55rem !important;
  letter-spacing: -1px;
  opacity: .86;
  padding: 6px 10px;
}

    .quote .chg { font-family: var(--mono); font-size: 11px; padding: 4px 7px; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); }
    .chg.up   { color: var(--corp-green); border-color: rgba(52,168,99,.30); background: var(--chip-bg-green); box-shadow: none; text-shadow: none; }
    .chg.down { color: var(--corp-red);   border-color: rgba(239,68,68,.30);  background: var(--chip-bg-red);   box-shadow: none; text-shadow: none; }

    /* Price tick: zero visual feedback — price is permanently neutral per spec */
    #uiPrice.glow-up, #uiPrice.up, #uiPrice.glow-down, #uiPrice.down { background: none !important; box-shadow: none !important; }
    .ticker-right { display: flex; gap: 10px; align-items: center; flex-wrap: nowrap; justify-content: flex-end; min-width: max-content; }
    .stat {
  min-width: 130px;
  padding: 7px 9px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  display: grid;
  gap: 4px;
}
    .stat .k { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .10em; }
    .stat .v { font-family: var(--mono); font-size: 12px; color: var(--ink); }

    /* ── FOCUS MODE ─────────────────────────────────────────────── */
    /* Body-level class .focus-mode drives everything via CSS cascade */
    .focus-mode .tickerbar            { height: 44px !important; min-height: 44px !important; max-height: 44px !important; }
    .focus-mode .stat                 { display: none !important; }
    .focus-mode .kpi-more-btn         { display: inline-flex !important; }
    /* FOCUS toggle button active state */
    #btnFocus.active                  { background: rgba(52,168,99,.12) !important; border-color: rgba(52,168,99,.40) !important; color: var(--corp-green) !important; }

    /* "Details ↓" trigger — hidden by default, shown only in focus mode */
    .kpi-more-btn {
      display: none;
      align-items: center;
      gap: 5px;
      font-family: var(--mono);
      font-size: 10px;
      color: var(--muted2);
      padding: 4px 9px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: transparent;
      cursor: pointer;
      white-space: nowrap;
      transition: color .12s ease, border-color .12s ease;
      flex: 0 0 auto;
    }
    .kpi-more-btn:hover { color: var(--muted); border-color: rgba(255,255,255,.18); }

    /* KPI dropdown panel */
    .kpi-dropdown {
      display: none;
      position: absolute;
      z-index: 200;
      top: calc(100% + 6px);
      right: 0;
      min-width: 200px;
      background: var(--bg3);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: var(--radius);
      box-shadow: 0 8px 24px rgba(0,0,0,.60);
      padding: 8px 0;
      overflow: hidden;
    }
    .kpi-dropdown.open { display: block; }
    .kpi-dropdown-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 7px 14px;
      gap: 24px;
    }
    .kpi-dropdown-row:hover { background: rgba(255,255,255,.04); }
    .kpi-dropdown-row .kd-label { font-size: 10px; color: var(--muted2); text-transform: uppercase; letter-spacing: .10em; }
    .kpi-dropdown-row .kd-val   { font-family: var(--mono); font-size: 12px; color: var(--ink); }
    /* ── END FOCUS MODE ─────────────────────────────────────────── */

    /* Nav */
    .nav{
  flex-shrink: 0;
  height: 50px;
  min-height: 50px;
  max-height: 50px;
  padding: 0 10px;
  display:flex;
  align-items:center;
  gap: 6px;

  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;

  border-bottom: 1px solid rgba(255,255,255,.08);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
    .tab {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  padding: 5px 14px;
  font-size: 11px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
  white-space: nowrap;
  flex: 0 0 auto;
  line-height: 1.4;
  letter-spacing: .01em;
  min-width: 64px;
  text-align: center;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
    .tab:hover { background: rgba(255,255,255,.07); color: var(--ink); border-color: rgba(255,255,255,.16); }
    .tab.active { color: #fff; border-color: rgba(52,168,99,.35); background: rgba(52,168,99,.12); font-weight: 700; }
    .nav .search { margin-left: auto; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); min-width: 240px; flex: 0 0 auto; }
    .nav input { border: 0; outline: 0; background: transparent; color: var(--ink); width: 100%; font-size: 12px; }
    .kbd { font-family: var(--mono); font-size: 10px; color: var(--muted); border: 1px solid rgba(255,255,255,.10); padding: 3px 7px; border-radius: 9px; }

    /* Main Container */
   .main {
  flex: 1;
  padding: 8px 12px 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 0 !important; /* requested */
}

/* (dosyada yoksa bile sorun değil) cockpit wrapper future-proof */
.cockpit { gap: 0 !important; }
    
    .panel { display: none; flex-direction: column; flex: 1; min-height: 0; }
    .panel.active { display: flex; }
    
    .panel-shell {
      flex: 1; display: flex; flex-direction: column; min-height: 0;
      border: 1px solid var(--line); border-radius: var(--radius2);
      background: var(--bg1); overflow: hidden;
    }
    .panel-head { flex-shrink: 0; padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .panel-title { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; color: var(--muted); }
    .panel-sub { margin: 2px 0 0; color: var(--muted2); font-size: 11px; }
    
    .panel-body { flex: 1; overflow: hidden; padding: 14px; display: flex; flex-direction: column; }
    
    .foot {
  flex-shrink: 0;
  min-height: 24px;
  padding: 3px 16px;
  border-top: 1px solid rgba(255,255,255,.07);
  color: rgba(231,238,252,.68);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center; /* single status line */
  gap: 12px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-family: var(--mono);
}
.foot::-webkit-scrollbar{height:0;width:0}
.foot > *{ display:none !important; }
.foot::before{
  content:"FinLens • Teknik Analiz • Twelve Data + Binance";
  opacity: .82;
}
    .foot::-webkit-scrollbar{height:0;width:0}

    /* Cards */
    .grid { display: grid; gap: 12px; }
    .glass { border: 1px solid var(--line); background: var(--bg2); border-radius: var(--radius); padding: var(--pad); box-shadow: var(--shadow); }
    .glass.soft { background: var(--bg3); }
    .glass .hdr { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
    .glass .hdr h3 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; color: var(--muted); }
    
    /* ── BADGE SİSTEMİ ─────────────────────────────────────────────
       .badge          → etiket: kategori / kaynak / bilgi (Sim, Global, AI Core…)
       .badge.status   → canlı durum: sol nokta + yeşil (Güncel, Canlı…)
       .badge.action   → tıklanabilir: pointer + hover efekti (Göstergeler, Analizler…)
       .badge.green    → yeşil vurgu (Sanal Para vb.)
       ──────────────────────────────────────────────────────────── */
    .badge { font-size: 10px; color: var(--muted2); border: 1px solid rgba(255,255,255,.09); padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.04); letter-spacing: .05em; user-select: none; }
    .badge.green { border-color: rgba(52,168,99,.28); color: var(--corp-green); background: rgba(52,168,99,.08); }
    .badge.warn { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: var(--muted2); }
    /* Durum badge'i — yeşil nokta + biraz daha parlak */
    .badge.status { color: var(--corp-green); border-color: rgba(52,168,99,.22); background: rgba(52,168,99,.07); padding-left: 6px; }
    .badge.status::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--corp-green); margin-right: 5px; vertical-align: middle; box-shadow: 0 0 0 3px rgba(52,168,99,.15); }
    /* Eylem badge'i — tıklanabilir, hover'da belirginleşir */
    .badge.action { cursor: pointer; color: var(--muted); border-color: rgba(255,255,255,.12); transition: background .14s ease, border-color .14s ease, color .14s ease; }
    .badge.action:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: var(--ink); }
    /* BIST gecikme göstergesi — sarı/amber uyarı etiketi */
    .delay-badge {
      font-size: 9px; font-weight: 600;
      color: #F59E0B;
      background: rgba(245,158,11,.10);
      border: 1px solid rgba(245,158,11,.28);
      border-radius: 4px;
      padding: 1px 5px;
      letter-spacing: 0.2px;
      vertical-align: middle;
      margin-left: 4px;
      white-space: nowrap;
      user-select: none;
    }
    #delayBadge {
      display: none; /* JS tarafından kontrol edilir */
      font-size: 9px; font-weight: 600;
      color: #F59E0B;
      background: rgba(245,158,11,.10);
      border: 1px solid rgba(245,158,11,.28);
      border-radius: 4px;
      padding: 2px 7px;
      white-space: nowrap;
      align-self: center;
      cursor: default;
    }

    .krow { display: flex; gap: 8px; flex-wrap: wrap; }
    .kpi {
  flex: 1;
  min-width: 120px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  display: grid;
  gap: 3px;
}
    .kpi .k { font-size: 10px; color: var(--muted2); letter-spacing: .10em; text-transform: uppercase; }
    .kpi .v { font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--ink); }

/* ══ EMPTY STATE + SIM INDICATORS ══════════════════════════════════════ */
    .empty-state {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      flex: 1; min-height: 160px; gap: 10px; padding: 24px;
      color: var(--muted2); text-align: center;
    }
    .empty-state .es-title { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
    .empty-state .es-body { font-size: 12px; line-height: 1.7; max-width: 380px; }
    .sim-banner {
      display: flex; align-items: center; gap: 8px; padding: 7px 12px; margin-bottom: 10px;
      background: rgba(52,168,99,.06); border: 1px solid rgba(52,168,99,.20);
      border-radius: var(--radius); font-size: 11px; color: var(--corp-green);
    }
    .sim-banner strong { font-weight: 700; letter-spacing: .05em; }
    .ai-sentence {
      font-size: 13px; line-height: 1.65; padding: 12px 14px;
      background: rgba(255,255,255,.03); border-radius: var(--radius);
      border-left: 2px solid var(--corp-green); color: var(--ink);
    }
    .ai-sentence .why-tag { display: block; margin-top: 8px; font-size: 11px; color: var(--muted2); border-top: 1px solid var(--line2); padding-top: 8px; }
    .ai-sentence .invalidation { display: block; margin-top: 4px; font-size: 11px; color: var(--warn); font-style: italic; }

/* ===== TRADING COCKPIT — Midnight Glass 100vh Lock (SOURCE OF TRUTH) ===== */

/* Panel kabuğu: 100vh içinde esnesin */
#panel-trading .panel-shell{
  display:flex;
  flex-direction:column;
  min-height:0;
}

/* Trading: panel-body dış scroll ALMAZ. Scroll sadece listelerde */
#panel-trading .panel-body{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  overflow:hidden;
  overscroll-behavior:none;
  padding:12px 18px 14px;
}

/* 3 kolon cockpit grid: tam yükseklik */
#panel-trading .trading-grid{
  display:grid;
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(260px, 300px);
  gap:12px;
  flex:1 1 0;
  min-width:0;
  width:100%;
  height:100%;
  min-height:0;
  align-items:stretch;
}

/* ── 1100px: Sol kolon gizle, 2-kolon layout ── */
@media (max-width: 1100px) {
  #panel-trading .trading-grid {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 280px) !important;
  }
  #panel-trading .trading-grid > .grid:nth-child(1) {
    display: none !important;
  }
  /* Sağ kolon: tam yükseklik + dikey scroll */
  #panel-trading .trading-grid > .grid:nth-child(3) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: calc(100vh - 158px) !important; /* topbar56+tickerbar56+nav50=162 - tolerans4 */
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255,255,255,0.15) transparent !important;
    padding-bottom: 28px !important; /* Eğitim Cüzdanı altında nefes alanı */
  }
  /* Orta kolon: taşan içerik clip yerine scroll — dar ekranda üst üste gelmesin */
  #panel-trading .trading-grid > .grid:nth-child(2) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: calc(100vh - 158px) !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255,255,255,0.10) transparent !important;
  }
  /* ÖNEMLİ: Her iki glass kart da doğal yüksekliğine sahip (flex:0 0 auto)
     Böylece parent column scroll ile ikisi birden görünür — overlap engellenir */
  #panel-trading .trading-grid > .grid:nth-child(3) > .glass:nth-child(1) {
    flex: 0 0 auto !important;     /* Watchlist: doğal yükseklik, flex:1→0 */
    min-height: 0 !important;      /* min-height:80px override */
    max-height: 55vh !important;   /* Watchlist'in ekranın fazlasını yememesi için */
    overflow-y: auto !important;   /* Watchlist kendi içinde scroll */
    overflow-x: hidden !important;
  }
  #panel-trading .trading-grid > .grid:nth-child(3) > .glass:nth-child(2) {
    flex: 0 0 auto !important;     /* Eğitim Cüzdanı: doğal yükseklik */
    overflow: visible !important;  /* İçerik kesilmesin */
    min-height: 0 !important;
  }
  /* ── Tickerbar stat kartları ≤1100px'de sıkışık: gizle ── */
  .tickerbar .stat,
  .tickerbar [data-kpi-card] { display: none !important; }
  /* ── Odak butonu geniş ekrana özel ── */
  #btnFocus { display: none !important; }
}
/* ── 860px: Sağ kolon daha dar ── */
@media (max-width: 860px) {
  #panel-trading .trading-grid {
    grid-template-columns: minmax(0, 1fr) minmax(200px, 230px) !important;
  }
  /* NOT: max-height burada OLMAMALI — v13 mobil fix ile çakışıyordu,
     tablet (769-860px) aralığında wallet kolonunu taşırıyordu.
     Grid'in kendi overflow:hidden + height:100% yönetimi yeterli. */
  #panel-trading .trading-grid > .grid:nth-child(3) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}

/* Kolonlar: flex-column + min-height:0 */
#panel-trading .trading-grid > .grid{
  display:flex;
  flex-direction:column;
  gap:12px;           /* trading-grid gap ile eşit: tutarlı 12px sistemi */
  min-height:0;
  height:100%;
  overflow:hidden;
}

/* Çocuklar küçülebilsin — margin:0 ile gap haricinde boşluk yok */
#panel-trading .trading-grid > .grid > *{
  min-height:0;
  margin:0;
}

/* Middle: RSI/MACD ↔ Smart Tools */
#panel-trading .two-charts{
  margin:0;           /* artık gap:12px hallediyoor, ekstra margin gereksiz */
}
#panel-trading .smart-tools-card{
  margin:0 !important;
  position:relative;
  z-index:2;
}



/* TRUE BOTTOM ALIGNMENT — margin-top:auto yok.
   Slack’i “büyüyen” kartlarda eritiyoruz. */
@media (min-width: 981px){

  /* LEFT: Timeframes fixed height, AI Feed grows to fill remaining */
  #panel-trading .trading-grid > .grid:nth-child(1) > .glass:nth-child(2){
    flex:0 0 auto;
  }
  #panel-trading .trading-grid > .glass:nth-child(1) > .glass:nth-child(3),
  #panel-trading .trading-grid > .grid:nth-child(1) > .glass:nth-child(3){
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    min-height:0;
  }

  /* MIDDLE: Price büyür → RSI/MACD + Smart Tools alt hizaya oturur */
  #panel-trading .trading-grid > .grid:nth-child(2) > .glass.chart-main{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  #panel-trading .trading-grid > .grid:nth-child(2) > .glass.chart-main .chart-wrap{
    flex:1 1 auto;
    height:auto;
    min-height:170px;
  }

  /* RIGHT COL — Option A: Watchlist flex:1 1 0 (shrinkable), Trade Sim flex:0 0 auto (fixed)
     Column itself: overflow:hidden so nothing clips outside 100vh,
     but Trade Sim is always last and never cropped because watchlist
     absorbs all available space AND shrinks when space is tight.      */
  #panel-trading .trading-grid > .grid:nth-child(3){
    overflow: hidden;   /* re-assert: column never bleeds outside grid */
  }
  #panel-trading .trading-grid > .grid:nth-child(3) > .glass:nth-child(1){
    flex: 1 1 0;        /* grows AND shrinks — gives space back to Trade Sim */
    min-height: 80px;   /* never collapses completely */
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #panel-trading #watchlist{
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
  }
  /* Trade Sim card — rigid, never grows, never shrinks, never cropped */
  #panel-trading .trading-grid > .grid:nth-child(3) > .glass:nth-child(2){
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;  /* krow/kpi must never clip */
  }
}

/* Local scroll — lists only */
#panel-trading #aiFeed{
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
}
#panel-trading #alarmList{
  max-height:220px;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
}

/* Trading panel head/sub gizli */
#panel-trading .panel-sub, #panel-trading .panel-head { display:none !important; }

/* ── YASAL UYARI BARI (Alt, body flex akışında, kalıcı) ──────── */
#globalDisclaimer {
  flex-shrink: 0;
  background: rgba(6,11,26,.97);
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 5px 16px;
  font-size: 10px;
  color: rgba(180,185,210,.52);
  flex-wrap: wrap;
  line-height: 1.4;
  min-height: 26px;
}
#globalDisclaimer .disc-icon { color: rgba(255,200,60,.65); font-size: 11px; flex-shrink:0; }
#globalDisclaimer .disc-text { flex:1; min-width: 200px; }
#globalDisclaimer .disc-links { display:flex; gap:10px; flex-shrink:0; }
#globalDisclaimer .disc-links a {
  color: rgba(120,160,255,.65);
  text-decoration: none;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  white-space: nowrap;
}
#globalDisclaimer .disc-links a:hover { color: rgba(120,160,255,1); text-decoration:underline; }
@media (max-width:640px){ #globalDisclaimer { font-size:9px; padding:4px 10px; gap:8px; } }

/* ── YASAL ONAY MODALİ (İlk açılış) ─────────────────────────── */
#legalModal {
  position: fixed; inset: 0; z-index: 99000;
  background: rgba(4,8,20,.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
#legalModal.hidden { display: none; }
#legalModalBox {
  background: linear-gradient(145deg,rgba(16,22,42,.98),rgba(10,14,28,.98));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  max-width: 560px; width: 100%;
  padding: 32px 28px 24px;
  box-shadow: 0 32px 80px rgba(0,0,0,.7);
  display: flex; flex-direction: column; gap: 18px;
}
#legalModalBox .lm-brand {
  display: flex; align-items: center; gap: 10px;
}
#legalModalBox .lm-logo {
  width: 36px; height: 36px;
  background: #34A863;
  border-radius: 9px; border: none;
  box-shadow: 0 2px 8px rgba(52,168,99,.35);
  display: grid; place-items: center; overflow: hidden;
  flex-shrink: 0;
}
#legalModalBox .lm-title { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing:.02em; }
#legalModalBox .lm-sub { font-size: 11px; color: var(--muted); margin-top:2px; }
#legalModalBox .lm-body {
  font-size: 12px; line-height: 1.7; color: rgba(180,185,210,.85);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px; padding: 14px 16px;
  max-height: 220px; overflow-y: auto;
  scrollbar-gutter: stable; padding-right: 12px;
}
#legalModalBox .lm-body h4 {
  font-size: 11px; font-weight: 700; letter-spacing:.10em; text-transform:uppercase;
  color: rgba(120,160,255,.8); margin: 12px 0 6px; padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.06);
}
#legalModalBox .lm-body h4:first-child { margin-top:0; border-top:none; padding-top:0; }
#legalModalBox .lm-body p { margin: 0 0 6px; }
#legalModalBox .lm-body ul { margin:4px 0 6px; padding-left:16px; }
#legalModalBox .lm-body ul li { margin-bottom:3px; }
#legalModalBox .lm-check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12px; color: rgba(200,205,225,.85); cursor: pointer;
}
#legalModalBox .lm-check input[type=checkbox] { margin-top:2px; flex-shrink:0; accent-color:#22C55E; }
#legalModalBox .lm-accept {
  background: linear-gradient(135deg,#16a34a,#15803d);
  color: #fff; border: none; border-radius: 10px;
  padding: 13px 20px; font-size: 13px; font-weight: 700;
  cursor: pointer; letter-spacing:.02em;
  transition: opacity .2s; opacity: .5; pointer-events: none;
  width: 100%;
}
#legalModalBox .lm-accept.ready { opacity: 1; pointer-events: auto; }
#legalModalBox .lm-accept.ready:hover { background: linear-gradient(135deg,#15803d,#166534); }
#legalModalBox .lm-footer {
  font-size: 10px; color: rgba(120,130,160,.5); text-align: center; line-height:1.5;
}

/* Kısa ekran koruması */
@media (max-height: 860px){
  #panel-trading .trading-grid > .grid:nth-child(2) > .glass.chart-main .chart-wrap{
    min-height:150px;
  }
}

/* ===== AI SIGNALS – GENİŞ TABLO + SAĞDA ALARM KARTI ===== */

.panel-ai-signals .panel-body {
  padding: 14px 20px 18px;
}

.ai-signals-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(320px, 1.1fr);
  gap: 18px;
  width: 100%;
  align-items: stretch;
  /* ── dead-space fix: grid fills panel-body ── */
  flex: 1;
  min-height: 0;
}

/* Each glass card in signals grid stretches to fill column height */
.ai-signals-grid > .glass {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Signal table fills its card, enabling internal scroll if many rows */
.ai-signals-grid > .glass:first-child table {
  flex: 1;
}
/* Alarm list fills remaining card space */
.panel-ai-signals #alarmList {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

    /* Cockpit */
    .chip-row { display: flex; gap: 10px; flex-wrap: wrap; }
    .chip { cursor: pointer; user-select: none; padding: 8px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: var(--muted); font-size: 12px; font-weight: 800; transition: transform .12s ease, background .12s ease, color .12s ease; }
    .chip:hover { background: rgba(255,255,255,.06); color: var(--ink); }
    .chip.active { border-color: rgba(52,168,99,.30); background: rgba(52,168,99,.10); color: var(--ink); }
    
    .form-row { display: flex; gap: 10px; align-items: center; }
    .field { width: 100%; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.22); color: var(--ink); padding: 10px 12px; border-radius: 14px; outline: 0; font-family: var(--mono); font-size: 12px; }
    .mini { font-size: 11px; color: var(--muted); line-height: 1.45; }

 .chart-card { padding: 8px 10px; }
canvas { width: 100%; height: 100%; display: block; touch-action: pan-y pinch-zoom; }
/* Canvas fills chart-wrap exactly — no overflow */
.chart-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit;
  z-index: 1;
}
/* Legend sits above canvas */
.chart-wrap .chart-legend {
  z-index: 2;
}

/* Chart çerçevesi daha ince ve alçak */
.chart-wrap{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
  backdrop-filter: blur(1px) !important;
  border-radius: 12px;
  padding: 0;
  height: 190px;
  min-height: 160px;
  position: relative;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
}

/* ══ PERFORMANCE PANEL — 2-column grid, chart fills left, stats right ══ */
#panel-performance .panel-body {
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: 1fr 300px !important;
  gap: 12px !important;
  padding: 14px !important;
  align-items: stretch !important;
}
#panel-performance .chart-wrap { height: auto !important; min-height: 0 !important; }

/* ══ PATCH 3: AI NAVIGATOR — flex column layout, feed scrolls, panel does not ══ */
/* Desktop only — mobile scroll owner is merged BLOCK-M15 */
@media (min-width: 769px) {
  #panel-ai-nav .panel-body      { overflow: hidden !important; }
}
#panel-ai-nav .panel-body > .glass {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* Upper blocks are fixed height — do not shrink */
#panel-ai-nav .hdr,
#panel-ai-nav .ai-meta,
#panel-ai-nav .ai-rec,
#panel-ai-nav .ai-tf           { flex-shrink: 0; }
/* ai-grid-2 stretches into remaining space */
#panel-ai-nav .ai-grid-2 {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px;
  align-items: stretch;
}
/* Each half-panel inside ai-grid-2 is a flex column — eşit yükseklik */
#panel-ai-nav .ai-grid-2 > .glass {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
/* KAP paneli tam genişlik — iki kolonu kaplar */
#panel-ai-nav .ai-grid-2 > #kapPanel {
  grid-column: 1 / -1;
}
/* Feed scrolls internally; panel does not scroll */
#panel-ai-nav .feed {
  height: auto !important; flex: 1; min-height: 0; overflow-y: auto;
}

/* ══ P0-3: TRADING PANEL — panel-body never creates outer scroll ══ */
/* Desktop only — mobile scroll owner is BLOCK-M2 */
@media (min-width: 769px) {
  #panel-trading .panel-body       { overflow: hidden !important; }
}

/* ══ P0-3b: HISTORY — scroll container ══ */
/* Desktop only — mobile scroll owner is BLOCK-M7 */
@media (min-width: 769px) {
  #panel-history .panel-body       { overflow: hidden !important; }
}
/* AI-SUMMARY: glass fills panel and scrolls internally — panel-body is bounded */
#panel-ai-summary .panel-body    { overflow: hidden !important; align-content: unset !important; }

/* ══ BACKTEST SINGLE-VIEW (no-scroll fit-to-screen) ══════════════════
   Hedef: tüm içerik — banner + form + KPI + equity + tradelog —
   panelin mevcut yüksekliğine sığmalı; dikey scroll OLMAMALI.
   Equity (flex:3) ve Trade Log (flex:2) kalan alanı oransal paylaşır.
   ══════════════════════════════════════════════════════════════════ */

/* btResults: kalan alanın tamamını al */
#btResults {
  max-width: 100%;
  overflow: hidden;
}
/* KPI row: dar ekranlarda alt satıra geç */
#btResults .krow {
  flex-wrap: wrap;
  overflow-x: hidden;
}
/* Trade log: yatay overflow kendi içinde scroll'lanır */
#btTradeLog {
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-width: 100%;
  word-break: break-all;
}
/* Backtest equity canvas wrapper: flex ile dinamik yükseklik */
#panel-backtest .chart-wrap {
  overflow: hidden;
  max-width: 100%;
}
/* Empty state filler */
#btEmptyState {
  flex: 1 !important;
  min-height: 0 !important;
}

/* History: glass card fills panel, inner table-scroller scrolls */
#panel-history .panel-body > .glass {
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
#panel-history .panel-body > .glass > .hdr { flex-shrink: 0; }
#panel-history .table-scroll {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
}
/* AI Trade Summary: glass fills panel-body, scrolls internally when FAZ-2 content overflows */
#panel-ai-summary .panel-body > .glass {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
/* All direct content rows: never shrink — glass scrolls instead */
#panel-ai-summary .panel-body > .glass > .hdr,
#panel-ai-summary .panel-body > .glass > .krow,
#panel-ai-summary .panel-body > .glass > .ai-rec { flex-shrink: 0; }
/* Warning + breakdown cards added by FAZ-2: also non-shrinking */
#panel-ai-summary .panel-body > .glass > #sumWarningCard,
#panel-ai-summary .panel-body > .glass > #sumBreakdownCard { flex-shrink: 0; }
/* Notes inner card: fixed, no stretch */
#panel-ai-summary .panel-body > .glass > .glass.soft {
  flex: 0 0 auto;
}
/* ── BACKTEST PANEL-BODY: fit-to-screen, no scroll ──────────────────
   overflow:hidden → panel kesinlikle dışarı taşmaz.
   gap:6px        → öğeler arası dikey boşluk minimum.
   padding azaltıldı → dikey yer kazanımı.
   btResults (flex:1) + btEmptyState (flex:1) kalan alanı doldurur. */
#panel-backtest .panel-body {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  gap: 6px !important;
  align-content: unset !important;
  padding: 10px 14px 10px !important;
}
/* btResults: flex:1 ile kalan alanı tam doldur */
#btResults {
  flex: 1 !important;
  min-height: 0 !important;
}

/* Chart canvas backgrounds — match panel surface */
#panel-trading .chart-wrap canvas,
#panel-trading #wrapRSI canvas,
#panel-trading #wrapMACD canvas {
  border-radius: 6px;
}
#panel-trading #wrapRSI .glass,
#panel-trading #wrapMACD .glass {
  background: var(--bg2, #0d1526) !important;
}

/* Smart Tools ↔ RSI/MACD: gap:12px sistemi halledior, ekstra margin gereksiz */
#panel-trading .two-charts{
  margin: 0 !important;
  position: relative;
  z-index: 1;
}

/* Smart Tools üst çizgiyi incelt + üstteki shadow “binmeyi” maskele */
#panel-trading .smart-tools-card{
  margin: 0 !important;
  border-top: none !important;    /* kalın borderı kaldır */
  position: relative;
  z-index: 5;
}

/* Shadow mask band (binme hissini bitiren asıl şey) */
#panel-trading .smart-tools-card::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:14px;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0));
  pointer-events:none;
  z-index:1;
}

/* Hairline separator (0.5px hissi) */
#panel-trading .smart-tools-card::before{
  content:"";
  position:absolute;
  left:14px; right:14px; top:0;
  height:1px;
  background: rgba(255,255,255,0.07);
  transform: scaleY(.5);
  transform-origin: top;
  opacity: .85;
  pointer-events:none;
  z-index:2;
}

/* Smart Tools 3-col: balanced proportions */
#panel-trading .smart-tools-card .kpi-row,
#panel-trading .smart-tools-card .tools-row {
  display: grid !important;
  grid-template-columns: 1fr 1.2fr 1fr !important;
  gap: 8px !important;
}
#panel-trading .smart-tools-card .kpi-item,
#panel-trading .smart-tools-card .tool-cell {
  min-width: 0;
}

/* İçerik pseudo’ların üstünde kalsın */
#panel-trading .smart-tools-card > *{
  position: relative;
  z-index: 3;
}

.chart-wrap.small{
  height: 120px;
  min-height: 100px;
  overflow: hidden;
}

    .chart-legend { position: absolute; top: 10px; left: 10px; display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--muted); z-index: 10; pointer-events: none; }
    .legend-dot { width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,.20); display: inline-block; margin-right: 6px; }
    .legend-item { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.25); }

    /* Intelligence panel */
    .list { display: flex; flex-direction: column; gap: 10px; }
    .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18); cursor: pointer; }
    .row.stale{opacity:.55}
    .row.stale .sub{color:rgba(251,191,36,.85)}
    .row .sym { font-family: var(--mono); font-weight: 900; 
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90px; }
    .row .sub { font-size: 11px; color: var(--muted); }
    .row .px { font-family: var(--mono); font-weight: 900; }
    .row .chg { font-family: var(--mono); font-size: 11px; }
    .chg.up   { color: var(--corp-green); }
    .chg.down { color: var(--corp-red); }
    .feed { height: 220px; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 10px; }
    
    .msg { border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); border-radius: 16px; padding: 10px 12px; display: grid; gap: 4px; }
    .msg .t { font-size: 11px; color: var(--muted); }
    .msg .b { font-size: 12px; line-height: 1.35; word-break: break-word; overflow-wrap: break-word; }
    .msg .tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: rgba(231,238,252,.92); border: 1px solid rgba(255,255,255,.12); padding: 4px 8px; border-radius: 999px; background: rgba(0,0,0,.18); width: max-content; }
    .tag.ok { border-color: rgba(35,209,139,.35); background: rgba(35,209,139,.08); }
    .tag.warn { border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.08); }
    .tag.bad { border-color: rgba(255,77,109,.35); background: rgba(255,77,109,.08); }

    /* AI Navigator */
    .ai-meta { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; margin-bottom: 10px; }
    .ai-pill { border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18); border-radius: 14px; padding: 8px 10px; display: grid; gap: 4px; }
    .ai-pill .k { font-size: 11px; color: var(--muted); letter-spacing: .10em; text-transform: uppercase; }
    .ai-pill .v { font-family: var(--mono); font-weight: 900; font-size: 13px; }
    .ai-rec { border: 1px solid rgba(52,168,99,.22); background: linear-gradient(180deg, rgba(52,168,99,.10), rgba(52,168,99,.04)); border-radius: 12px; padding: 12px; margin-bottom: 12px; display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
    .ai-rec strong { font-family: var(--mono); letter-spacing: .08em; }
    .ai-tf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
    .tf { border: 1px solid rgba(255,255,255,.09); background: rgba(0,0,0,.14); border-radius: 12px; padding: 7px 9px; display: grid; gap: 5px; }
    .tf .top { display: flex; align-items: center; justify-content: space-between; }
    .tf .top .k { font-size: 10px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
    .tf .top .mono { font-size: 9px; color: var(--muted2); }
    .tf .sig { font-family: var(--mono); font-weight: 900; font-size: 11px; letter-spacing: .04em; padding: 4px 8px; border-radius: 999px; width: max-content; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); }
    .sig.buy { border-color: rgba(35,209,139,.35); background: rgba(35,209,139,.08); color: var(--good); }
    .sig.sell { border-color: rgba(255,77,109,.35); background: rgba(255,77,109,.08); color: var(--bad); }
    .sig.hold { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.03); color: rgba(231,238,252,.86); }
    .tf .conf { font-family: var(--mono); font-size: 10px; color: var(--muted); }

    /* ── Güven Skoru Bar (qual-bar) ──────────────────────────────────────── */
    .qual-bar { display: inline-flex; gap: 3px; align-items: center; }
    .qb { display: inline-block; width: 7px; height: 7px; border-radius: 2px; background: rgba(255,255,255,.10); transition: background .25s; }
    .qb.on { background: rgba(52,168,99,.75); }
    /* Renk kodlaması: güven seviyesine göre */
    .qual-bar.c-low  .qb.on { background: rgba(255,71,87,.70);  }   /* ≤20% */
    .qual-bar.c-med  .qb.on { background: rgba(255,152,0,.80);  }   /* ≤40% */
    .qual-bar.c-mid  .qb.on { background: rgba(242,193,90,.85); }   /* ≤60% */
    .qual-bar.c-hi   .qb.on { background: rgba(52,168,99,.80);  }   /* ≤80% */
    .qual-bar.c-max  .qb.on { background: rgba(0,230,118,.90);  }   /* >80% */
    /* signalsTable'da biraz daha büyük */
    #panel-ai-signals #signalsTable .qb { width: 9px; height: 9px; }
    #panel-ai-signals #signalsTable .qual-bar { gap: 4px; }
    /* ──────────────────────────────────────────────────────────────────────── */

    .ai-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
    /* TF çelişki uyarısı — gizli by default, .show sınıfı ile gösterilir */
    .tf-conflict-card { display: none; padding: 5px 10px; margin: 4px 0 4px; border-radius: 8px; font-size: 11px; font-weight: 600; color: rgba(251,191,36,.90); background: rgba(251,191,36,.07); border: 1px solid rgba(251,191,36,.18); line-height: 1.4; }
    .tf-conflict-card.show { display: block; }
    #aiTfGrid { margin-top: 4px; }

    /* Tables */
    table { width: 100%; border-collapse: collapse; }
    th, td { padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 12px; }
    /* AI Signals: compact rows */
    #panel-ai-signals #signalsTable tr { height: 36px; }
    #panel-ai-signals #signalsTable td { padding: 4px 10px; vertical-align: middle; }
    #panel-ai-signals table { width: 100%; border-collapse: collapse; }
    th { color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; text-align: left; }
    td { color: rgba(231,238,252,.90); }
    .mono { font-family: var(--mono); }

    .ai-pill .v, .tf .conf, .row .sym, .row .px { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tf .sig { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

       @media (max-width: 1200px) {
      /* Keep Trading cockpit layout responsive via clamp() columns.
         Collapse only non-cockpit grids here. */
      .ai-signals-grid { grid-template-columns: 1fr; }
      .ai-meta { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .ai-tf { grid-template-columns: repeat(3, minmax(0,1fr)); }
      .ai-grid-2 { grid-template-columns: 1fr; }
    }
    @media (max-width: 820px){
      .brand { min-width: auto; }
      .rightbar { min-width: auto; flex-wrap: wrap; justify-content: flex-end; }
      .nav .search { min-width: 220px; }
      .disclaimer { max-width: 260px; }
      .ai-tf { grid-template-columns: repeat(2, minmax(0,1fr)); }
    }
    @media (max-width: 640px){
      .disclaimer { display: none; }
      .nav .search { min-width: 180px; }
    }
    @media (max-width: 1100px) {
      #btnNotif { font-size: 0; min-width: 36px; padding: 7px 8px; }
      #btnNotif::before { content: "🔔"; font-size: 13px; }
      #btnShortcuts { font-size: 0; min-width: 36px; padding: 7px 8px; }
      #btnShortcuts::before { content: "⌨"; font-size: 14px; }
      .brand .sub { display: none !important; }
      .brand { min-width: auto !important; gap: 8px !important; }
      .brand-title { font-size: 11px !important; letter-spacing: .12em !important; }
    }
    @media (max-width: 900px) {
      .pill #statusText { display: none; }
      #healthMode { display: none; }
      #healthLatency { display: none; }
    }
    @media (max-width: 540px) {
      .ticker-right .stat:nth-child(n+3) { display: none !important; }
      /* Akıllı araçlar: 3 kart yan yana sıkıştır */
      #panel-trading .smart-tools-card .krow { flex-direction: row !important; flex-wrap: nowrap !important; gap: 6px !important; overflow-x: auto !important; }
      #panel-trading .smart-tools-card .kpi { min-width: 80px !important; flex: 0 0 auto !important; }
    }
    @media (max-width: 600px) {
      #topbarPlanBadge { display: none !important; }
      #paperWalletDisplay { display: none !important; }
    }
    @media (max-width: 480px) {
      .main { padding: 6px 6px 8px !important; }
      /* Çok dar ekranlarda RSI+MACD alt alta */
      #panel-trading .two-charts {
        grid-template-columns: 1fr !important;
        min-height: 200px !important;
      }
      #panel-trading #wrapRSI,
      #panel-trading #wrapRSI .glass,
      #panel-trading #wrapMACD,
      #panel-trading #wrapMACD .glass {
        min-height: 90px !important;
        height: 90px !important;
        overflow: hidden !important;
      }
      #panel-trading .chart-wrap.small {
        height: 62px !important;
        min-height: 62px !important;
      }
    }

    /* ── MOBİL SCROLL FIX v2 ─────────────────────────────────────────────
       body position:fixed tüm scroll zincirini kilitliyor.
       Mobilde tüm zinciri açıp .main'i scroll container yapıyoruz.
    ─────────────────────────────────────────────────────────────────── */
    @media (max-width: 768px) {
      /* 1. Body kilidini kaldır */
      html {
        height: auto !important;
        overflow: auto !important;
        overflow-x: hidden !important;
      }
      body {
        position: relative !important;
        inset: auto !important;
        height: auto !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: auto !important;
      }
      /* 2. App zinciri: sabit yükseklik yerine doğal akış */
      .app, .shell {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
        min-height: 0 !important;
        flex: none !important;
      }
      .main {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
        min-height: 0 !important;
        flex: none !important;
      }
      /* 3. Panel zinciri: doğal yükseklik — .panel display'e dokunma! */
      .panel-shell, .panel-body {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
        min-height: 0 !important;
        flex: none !important;
        display: block !important;
      }
      /* Panel görünürlüğü: sadece active olan görünür */
      .panel:not(.active) { display: none !important; }
      .panel.active { display: block !important; }
      /* Trading grid dar ekranda tek sütun */
      #panel-trading .trading-grid {
        grid-template-columns: 1fr !important;
        height: auto !important;
      }
      #panel-trading .trading-grid > .grid:nth-child(1),
      #panel-trading .trading-grid > .grid:nth-child(3) {
        display: none !important;
      }
      #panel-trading .trading-grid > .grid:nth-child(2) {
        max-height: none !important;
        overflow: visible !important;
      }
      /* 4. İç glass container'lar */
      .glass {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
        min-height: 0 !important;
      }
      /* 5. Inner scroll alanları: sınırlı yükseklik, smooth scroll */
      #panel-trading #watchlist,
      #panel-trading #aiFeed,
      #panel-trading #alarmList,
      .feed, .list {
        max-height: 240px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
      }
      /* 6. Tab bar yatay scroll */
      .tabs, .tab-bar {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
      }
      .tabs::-webkit-scrollbar,
      .tab-bar::-webkit-scrollbar { display: none !important; }
      /* 7. Canvas touch: dikey kaydırmayı sayfaya bırak */
      canvas { touch-action: pan-y !important; }
      /* 8. Cockpit override */
      #panel-trading .cockpit,
      #panel-trading .cockpit-row,
      #panel-trading .cockpit-col {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
      }
      /* 9. Performance panel grid → tek sütun mobilde */
      #panel-performance .panel-body {
        grid-template-columns: 1fr !important;
        display: block !important;
      }
    }

    /* ── FAZ-1 Toast Notification ────────────────────────────────────── */
    #tiq-toast-container {
      position: fixed; bottom: 24px; right: 24px; z-index: 99999;
      display: flex; flex-direction: column-reverse; gap: 8px;
      pointer-events: none;
    }
    .tiq-toast {
      min-width: 220px; max-width: 360px; padding: 10px 16px;
      border-radius: 12px; font-size: 12px; font-weight: 600;
      line-height: 1.5; color: #fff; pointer-events: auto;
      box-shadow: 0 8px 28px rgba(0,0,0,.55);
      animation: toastIn .20s cubic-bezier(.2,.9,.2,1) both;
    }
    .tiq-toast.error   { background: rgba(220,60,60,.92);  border: 1px solid rgba(255,100,100,.3); }
    .tiq-toast.success { background: rgba(34,160,90,.92);  border: 1px solid rgba(78,230,130,.3); }
    .tiq-toast.info    { background: rgba(50,120,200,.92); border: 1px solid rgba(100,160,255,.3); }
    .tiq-toast.warn    { background: rgba(180,130,20,.92); border: 1px solid rgba(240,190,60,.3); }
    @keyframes toastIn  { from{opacity:0;transform:translateY(12px) scale(.96)} to{opacity:1;transform:none} }
    @keyframes toastOut { from{opacity:1;transform:none} to{opacity:0;transform:translateY(8px) scale(.97)} }
    /* Watchlist input loading state */
    #btnAddWl.loading { opacity:.55; cursor:not-allowed; }

    /* Auth Gate */
    .auth-gate { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 22px; background: radial-gradient(1100px 620px at 20% 15%, rgba(110,170,210,.16), transparent 60%), radial-gradient(900px 520px at 80% 20%, rgba(255,255,255,.06), transparent 55%), rgba(0,0,0,.70); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); }
    .auth-gate.show { display: flex; animation: authFade .18s ease-out both; }
    @keyframes authFade { from{opacity:0} to{opacity:1} }
    .auth-card { width: min(860px, 94vw); border-radius: 26px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)); box-shadow: 0 26px 90px rgba(0,0,0,.60); overflow: hidden; display: grid; grid-template-columns: 340px 1fr; animation: authPop .22s cubic-bezier(.2,.9,.2,1) both; }
    @keyframes authPop { from{ transform: translateY(8px) scale(.985); opacity:.92; } to{ transform: translateY(0) scale(1); opacity:1; } }
    @keyframes eqPulse { 0%,100%{transform:scaleY(.55);opacity:.3} 50%{transform:scaleY(1);opacity:.65} }
    .auth-left { padding: 22px; border-right: 1px solid rgba(255,255,255,.10); background: radial-gradient(680px 420px at 20% 20%, rgba(120,160,255,.12), transparent 60%), rgba(0,0,0,.18); display: flex; flex-direction: column; justify-content: center; gap: 14px; }
    .auth-brand { display: flex; gap: 14px; align-items: center; }
    .auth-logo { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: #34A863; border: none; box-shadow: 0 4px 16px rgba(52,168,99,.40); overflow: hidden; }
    .auth-logo img { width: 86%; height: 86%; object-fit: contain; display: block; }
    .auth-brand-title { font-size: 14px; letter-spacing: .18em; text-transform: uppercase; font-weight: 900; color: rgba(231,238,252,.96); }
    .auth-kicker { margin-top: 2px; font-size: 11px; letter-spacing: .20em; text-transform: uppercase; color: rgba(231,238,252,.70); }
    .auth-legal { font-size: 11px; color: rgba(231,238,252,.62); border-top: 1px solid rgba(255,255,255,.10); padding-top: 12px; line-height: 1.5; }
    .auth-right { padding: 0; display: flex; flex-direction: column; }
    .auth-head { padding: 22px 22px 14px; border-bottom: 1px solid rgba(255,255,255,.10); }
    .auth-mini { font-size: 12px; letter-spacing: .20em; text-transform: uppercase; color: rgba(231,238,252,.62); margin-bottom: 10px; }
    .auth-title { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: rgba(231,238,252,.96); }
    .auth-sub { margin: 8px 0 0; color: rgba(231,238,252,.75); font-size: 12px; line-height: 1.45; }
    .auth-body { padding: 18px 22px 22px; display: grid; gap: 12px; }
    .auth-row { display: grid; gap: 8px; }
    .auth-row label { font-size: 11px; color: rgba(231,238,252,.72); letter-spacing: .10em; text-transform: uppercase; }
    .auth-input { width: 100%; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.22); color: var(--ink); padding: 12px; border-radius: 14px; outline: 0; font-family: var(--sans); font-size: 13px; transition: border-color .15s ease, box-shadow .15s ease; }
    .auth-input:focus { border-color: rgba(110,170,210,.40); box-shadow: 0 0 0 4px rgba(110,170,210,.14); }
    .auth-input.mono { font-family: var(--mono); letter-spacing: .14em; }
    .auth-login-btn { height: 52px; border-radius: 999px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; margin-top: 8px; background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08)); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 18px 60px rgba(0,0,0,.35); cursor: pointer; color: var(--ink); }
    .auth-login-btn:hover { transform: translateY(-1px); }
    .auth-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
    .auth-hint { font-size: 11px; color: rgba(231,238,252,.70); }
    .auth-status { font-size: 12px; color: rgba(231,238,252,.66); border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); padding: 6px 10px; border-radius: 999px; }
    .auth-err { display: none; margin-top: 6px; font-size: 12px; color: rgba(251,191,36,.95); }
    .auth-err.show { display: block; }
    @media (max-width: 860px) { .auth-card { grid-template-columns: 1fr; } .auth-left { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.10); } }
    body.locked .shell { filter: blur(6px) saturate(.9); transform: scale(.995); pointer-events: none; user-select: none; }

    /* Panel layout fix */
    .panel-shell{
      display:flex;
      flex-direction:column;
    }
   .panel-shell .panel-body{
      flex:1 1 auto;
      min-height:0;
      overflow-y:auto;
    }

/* Watchlist layout + remove button */
.list .row {
  align-items: center;
  display: flex;
  padding: 7px 8px;
  border-radius: 6px;
  transition: background .12s ease;
  cursor: pointer;
}
.list .row:hover {
  background: rgba(255,255,255,.04);
}

/* Active watchlist row — left accent */
.list .row[data-wl-row].is-active,
.list .row[style*="border-left:2px solid var(--corp-green)"] {
  background: rgba(52,168,99,.05) !important;
}

.list .row .wl-main {
  flex: 1;
  min-width: 0;
}

.list .row .wl-meta {
  text-align: right;
  font-variant-numeric: tabular-nums;
  margin-right: 6px;
}

.wl-remove {
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(248,113,113,.70);
  font-size: 11px;
  padding: 0 7px;
  min-width: 22px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* Varsayılan: görünmez — sadece satır hover'ında belirir */
  opacity: 0;
  flex-shrink: 0;
  transition: opacity .15s ease, background .15s ease, border-color .15s ease;
}

/* Satır hover'ında × belir */
.list .row:hover .wl-remove {
  opacity: 1;
}

.wl-remove:hover {
  background: rgba(248,113,113,.12);
  border-color: rgba(248,113,113,.35);
  color: rgba(248,113,113,.95);
}

.wl-remove:active {
  background: rgba(248,113,113,.20);
  opacity: .95;
}

/* Mobil / touch: hover yok — X butonu ve alt metin her zaman görünür olmalı */
@media (hover: none) {
  .wl-remove {
    opacity: 1 !important;
  }
  .list .row .wl-main .sub {
    opacity: 1 !important;
  }
}

/* "Geçmek için tıkla" alt metni — sadece hover'da göster */
.list .row .wl-main .sub {
  transition: opacity .15s ease;
}
.list .row:not(:hover) .wl-main .sub {
  opacity: 0;
}

/* ===== TRADING — FINAL OVERRIDES (single source of truth) ===== */

/* uiPrice — canonical block moved to FINAL OVERRIDES below */

/* Chart grid + blur(2px) */
.chart-wrap{
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

/* RSI + MACD kesin yan yana + SHADOW BLEED KÖKTEN KES */
#panel-trading .two-charts{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;

  margin: 0 0 1px 0 !important;      /* tam 1px micro gap */
  padding-bottom: 1px !important;    /* clip band */
  overflow: hidden !important;       /* ASIL FIX: gölge taşmasını keser */

  position: relative;
  z-index: 1;
}

/* Smart Tools: maske yok + hairline separator */
#panel-trading .smart-tools-card{
  margin: 0 !important;
  padding: 10px 12px 10px;
  border-top: none !important;
  position: relative;
  z-index: 2;
  isolation: isolate;
}

/* Dosyada daha önce eklenmiş mask varsa kesin iptal */
#panel-trading .smart-tools-card::after{ content: none !important; }

/* Hairline separator (0.5px hissi) */
#panel-trading .smart-tools-card::before{
  content:"";
  position:absolute;
  left:14px; right:14px;
  top:0;
  height:1px;
  background: rgba(255,255,255,0.08);
  transform: scaleY(.5);
  transform-origin: top;
  opacity: .95;
  pointer-events:none;
}

/* ✅ SMART TOOLS: 3 KPI YANYANA (senin istediğin gibi) */
#panel-trading .smart-tools-card .smart-tools-row{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch;
}

#panel-trading .smart-tools-card .smart-tools-row .kpi{
  min-width: 0;
  min-height: 58px;
  padding: 7px 10px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Dar ekran kırılımı bozulmadan */
@media (max-width: 980px){
  #panel-trading .smart-tools-card .smart-tools-row{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}
@media (max-width: 680px){
  #panel-trading .smart-tools-card .smart-tools-row{
    grid-template-columns: 1fr !important;
  }
}

/* AI Trade Summary: responsive — glass fills panel and scrolls (FAZ-2 overflow fix) */
#panel-ai-summary .panel-body {
  overflow: hidden;
}
#panel-ai-summary .panel-body > .glass {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
/* AI Signals panel: true flex column — grid fixed height, filler div below takes all remaining space */
#panel-ai-signals .panel-body {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;      /* bounded parent — filler flex:1 works */
  align-content: unset !important;
}
/* Grid: content-fit, does NOT grow */
#panel-ai-signals .panel-body > .ai-signals-grid {
  flex: 0 0 auto !important;
}
/* All direct children default fixed — except last (filler div) */
#panel-ai-signals .panel-body > *:not(:last-child) {
  flex: 0 0 auto;
}
/* Filler div (last child): takes ALL remaining vertical space */
#panel-ai-signals .panel-body > *:last-child {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Compact (safe) */
.topbar{ padding: 4px 18px 4px; }
.tickerbar{ padding: 4px 18px 6px; }
.tickerbar .symbol{ padding: 4px 10px; }
.tab{ padding: 5px 14px; border-radius: 8px; min-width: 64px; height: 28px; }
.kpi{ min-height: 58px; padding: 6px 12px 7px; }

/* ===== TICKER STRIP v2 — PRICE + DELTA (SINGLE SOURCE OF TRUTH) ===== */
/* Price: always neutral white — NEVER green/red under any direction */
#uiPrice {
  font-family: var(--mono) !important;
  font-size: clamp(22px, 1.8vw, 32px) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  padding: 0 6px !important;
  color: var(--ink) !important;           /* #F2F4FA — immutable */
  text-shadow: none !important;           /* no glow ever */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  border-radius: 6px;
  transition: background .18s ease-out;
}
#uiPrice .dec {
  font-size: .62em !important;
  opacity: .78 !important;
  position: relative;
  top: -0.10em !important;
  margin-left: 1px;
}
/* Delta chip — corporate subdued, never larger than price */
#uiChange {
  font-size: 11px !important;
  padding: 4px 8px !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
/* ===== END TICKER STRIP v2 ===== */

/* ═══════════════════════════════════════════════════════════════════════
   AI TRADE SUMMARY — FIT-TO-SCREEN OVERFLOW FIX (FINAL / ADIM 3.3)
   Root cause: .panel-shell .panel-body { flex: 1 1 auto } (line ~1028)
   sets flex-basis = content-size → panel-body grows unboundedly past 100vh.
   Fix: force flex-basis:0 + height:0 on panel-body so flex-grow fills
   exactly the available space, then glass takes all of it and scrolls.
═══════════════════════════════════════════════════════════════════════ */
#panel-ai-summary {
  overflow: hidden !important;
  min-height: 0 !important;
  flex: 1 1 0 !important;
}
#panel-ai-summary .panel-shell {
  overflow: hidden !important;
  min-height: 0 !important;
  flex: 1 1 0 !important;
}
#panel-ai-summary .panel-body {
  /* Override .panel-shell .panel-body { flex: 1 1 auto } — must use 0-basis */
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;      /* basis=0 → height = only what flex-grow assigns */
  height: 0 !important;        /* belt-and-suspenders: force overflow trigger */
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 14px !important;
  align-content: unset !important;
  box-sizing: border-box !important;
}
#panel-ai-summary .panel-body > .glass {
  /* height: 0 is the CRITICAL missing piece.
     Without a definite height, overflow-y: auto on a block flex item
     never triggers — the browser sizes it to its content instead.
     flex: 1 1 0 + height: 0 together mean: "start at 0, grow to fill
     the available space". Any content beyond that triggers the scrollbar. */
  display: block !important;
  flex: 1 1 0 !important;
  height: 0 !important;        /* ← THE FIX: makes the height definite */
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}
/* Every direct child of glass must NOT stretch the glass height */
#panel-ai-summary .panel-body > .glass > * {
  flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   FAZ 4 / ADIM 4.2 — PRO GATE OVERLAY
   Premium panellerde plan=free kullanıcıya blur + upgrade ekranı gösterir.
   .pro-gate eklenen panelin .panel-shell üzerine konumlanır.
═══════════════════════════════════════════════════════════════════════ */
.pro-gate {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  /* frosted glass — blurs the panel content behind */
  backdrop-filter: blur(10px) saturate(0.7);
  -webkit-backdrop-filter: blur(10px) saturate(0.7);
  background: rgba(13,17,23,0.72);
  border-radius: var(--radius2);
  pointer-events: all;
}
.pro-gate-card {
  background: var(--bg2);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 32px 36px 28px;
  text-align: center;
  max-width: 360px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.pro-gate-icon {
  font-size: 36px;
  margin-bottom: 12px;
  line-height: 1;
}
.pro-gate-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.pro-gate-sub {
  font-size: 12px;
  color: var(--muted2);
  line-height: 1.6;
  margin-bottom: 20px;
}
.pro-gate-features {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 22px;
  text-align: left;
}
.pro-gate-features li {
  list-style: none;
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.pro-gate-features li::before {
  content: "✓";
  color: #34a863;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}
.pro-gate-btn {
  display: inline-block;
  background: linear-gradient(135deg, #34a863 0%, #1d8348 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  border: none;
  border-radius: 10px;
  padding: 11px 28px;
  cursor: pointer;
  transition: opacity .15s, transform .10s;
  width: 100%;
}
.pro-gate-btn:hover { opacity: .88; transform: translateY(-1px); }
.pro-gate-btn:active { transform: translateY(0); }
.pro-gate-plan-badge {
  display: inline-block;
  margin-top: 14px;
  font-size: 10px;
  color: var(--muted2);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 3px 10px;
  letter-spacing: .06em;
}
/* panel-shell must be position:relative so the gate absolute-positions inside it */
.panel-shell { position: relative; }

/* ═══════════════════════════════════════════════════════════════════════════
   GUEST BANNER — topbar altı sticky kayıt teşvik bandı
═══════════════════════════════════════════════════════════════════════════ */
.guest-banner {
  width: 100%;
  background: rgba(20, 32, 48, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  z-index: 60;
  flex-shrink: 0;
}
.guest-banner-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 9px 20px;
}
.guest-banner-text {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.guest-banner-title {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  letter-spacing: .02em;
}
.guest-banner-sub {
  font-size: 11px;
  color: rgba(160,185,230,.60);
}
.guest-banner-btn {
  flex-shrink: 0;
  background: linear-gradient(135deg, #22a863 0%, #1a7d4c 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  cursor: pointer;
  transition: opacity .15s, transform .10s;
  white-space: nowrap;
}
.guest-banner-btn:hover { opacity: .88; transform: translateY(-1px); }
.guest-banner-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(255,255,255,.30);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color .15s;
}
.guest-banner-close:hover { color: rgba(255,255,255,.65); }
@media (max-width: 600px) {
  .guest-banner-inner { padding: 8px 14px; gap: 10px; }
  .guest-banner-sub { display: none; }
  .guest-banner-btn { font-size: 11px; padding: 7px 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUTH FEATURE GATE — misafir kullanıcılara premium panel overlay
═══════════════════════════════════════════════════════════════════════════ */
.auth-feature-gate {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px) saturate(0.6);
  -webkit-backdrop-filter: blur(12px) saturate(0.6);
  background: rgba(10, 15, 25, 0.65);
  border-radius: var(--radius2);
  pointer-events: all;
}
.auth-feature-gate-card {
  background: var(--bg2);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 28px 32px 24px;
  text-align: center;
  max-width: 320px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.auth-feature-gate-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .10em;
  color: rgba(140,170,255,.85);
  background: rgba(99,132,220,.12);
  border: 1px solid rgba(99,132,220,.25);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 14px;
}
.auth-feature-gate-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.45;
  margin-bottom: 8px;
}
.auth-feature-gate-sub {
  font-size: 11px;
  color: var(--muted2);
  line-height: 1.6;
  margin-bottom: 20px;
}
.auth-feature-gate-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.auth-feature-gate-btn-secondary {
  flex: 1;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.80);
  font-size: 12px;
  font-weight: 600;
  border-radius: 9px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background .15s;
}
.auth-feature-gate-btn-secondary:hover { background: rgba(255,255,255,.10); }
.auth-feature-gate-btn-primary {
  flex: 1;
  background: linear-gradient(135deg, #22a863 0%, #1a7d4c 100%);
  border: none;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 9px;
  padding: 9px 16px;
  cursor: pointer;
  transition: opacity .15s, transform .10s;
}
.auth-feature-gate-btn-primary:hover { opacity: .88; transform: translateY(-1px); }

/* ── Demo Mode Banner ── */
#demoBanner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9999;
  background: rgba(15, 22, 40, .96);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(52,168,99,.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 28px;
  box-shadow: 0 -8px 32px rgba(0,0,0,.4);
  animation: demoSlideUp .4s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes demoSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.demo-banner-left { display: flex; align-items: center; gap: 12px; }
.demo-banner-badge {
  background: rgba(52,168,99,.15);
  border: 1px solid rgba(52,168,99,.3);
  color: rgba(52,168,99,.9);
  font-size: 10px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 6px;
  white-space: nowrap; flex-shrink: 0;
}
.demo-banner-text { font-size: 13px; color: rgba(255,255,255,.75); line-height: 1.4; }
.demo-banner-text strong { color: #fff; font-weight: 600; }
.demo-banner-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.demo-banner-cta {
  background: #34A863; color: #fff;
  font-size: 13px; font-weight: 700;
  padding: 9px 20px; border-radius: 8px;
  border: none; cursor: pointer; font-family: inherit;
  box-shadow: 0 0 18px rgba(52,168,99,.35);
  transition: background .15s, transform .12s;
  white-space: nowrap;
}
.demo-banner-cta:hover { background: #3dba70; transform: translateY(-1px); }
.demo-banner-close {
  background: none; border: none;
  color: rgba(255,255,255,.3); font-size: 18px;
  cursor: pointer; padding: 4px; line-height: 1;
  transition: color .15s;
}
.demo-banner-close:hover { color: rgba(255,255,255,.65); }
@media (max-width: 640px) {
  #demoBanner { flex-direction: column; padding: 14px 16px; gap: 12px; }
  .demo-banner-left { flex-direction: column; align-items: flex-start; gap: 6px; }
  .demo-banner-actions { width: 100%; }
  .demo-banner-cta { flex: 1; text-align: center; }
}

/* topbar plan badge */
#topbarPlanBadge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(52,168,99,.35);
  background: rgba(52,168,99,.10);
  color: rgba(52,168,99,.90);
  display: none;   /* shown only when plan data is loaded */
}
#topbarPlanBadge.plan-free {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--muted2);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
#topbarPlanBadge.plan-free:hover {
  border-color: rgba(52,168,99,.40);
  background: rgba(52,168,99,.08);
  color: rgba(52,168,99,.90);
}

/* ── Upgrade Modal ─────────────────────────────────────────────────────── */
#upgradeModal {
  display: none; position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.72); backdrop-filter: blur(6px);
  align-items: center; justify-content: center;
}
#upgradeModal.open { display: flex; }
#upgradeModalCard {
  background: var(--panel); border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px; padding: 32px 28px; max-width: 420px; width: 92%;
  box-shadow: 0 24px 64px rgba(0,0,0,.55); text-align: center;
  animation: fadeScaleIn .22s ease;
}
@keyframes fadeScaleIn { from { opacity:0; transform: scale(.92); } to { opacity:1; transform: scale(1); } }
#upgradeModalCard .um-icon { font-size: 36px; margin-bottom: 10px; }
#upgradeModalCard .um-title { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
#upgradeModalCard .um-sub { font-size: 13px; color: var(--muted2); margin-bottom: 20px; line-height: 1.6; }
#upgradeModalCard .um-price { font-size: 28px; font-weight: 900; color: rgba(52,168,99,.95); margin-bottom: 4px; }
#upgradeModalCard .um-period { font-size: 11px; color: var(--muted2); margin-bottom: 20px; }
#upgradeModalCard .um-features { text-align: left; margin: 0 0 22px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
#upgradeModalCard .um-features li { font-size: 13px; display: flex; align-items: center; gap: 8px; }
#upgradeModalCard .um-features li::before { content: "✓"; color: rgba(52,168,99,.9); font-weight: 900; flex-shrink: 0; }
#upgradeModalCard .um-btn {
  width: 100%; padding: 13px; border-radius: 12px; border: none;
  background: linear-gradient(135deg, rgba(52,168,99,.85), rgba(32,140,78,.9));
  color: #fff; font-size: 15px; font-weight: 800; cursor: pointer;
  transition: opacity .15s;
}
#upgradeModalCard .um-btn:hover { opacity: .88; }
#upgradeModalCard .um-btn:disabled { opacity: .5; cursor: not-allowed; }
#upgradeModalCard .um-cancel { font-size: 12px; color: var(--muted2); margin-top: 12px; cursor: pointer; }
#upgradeModalCard .um-cancel:hover { color: var(--fg); }
#upgradeModalCard .um-note { font-size: 11px; color: var(--muted2); margin-top: 14px; opacity: .65; }
/* ═══════════════════════════════════════════════════════════════════════ */

/* ── SCROLL LOCK — MASAÜSTÜ ONLY (min-width: 769px) ─────────────────────
   Mobilde bu blok ÇALIŞMAZ — mobil kurallar yukarıdaki @media(max-width:768px)
   bloğu tarafından yönetilir. Desktop fixed-canvas düzeni için gerekli.   */
@media (min-width: 769px) {
  html {
    overflow: hidden !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
  }
  body {
    overflow: hidden !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    position: fixed !important;
    inset: 0 !important;
    overscroll-behavior: none !important;
  }
  .app,
  .shell,
  .main {
    overflow: hidden !important;
    max-height: 100% !important;
    min-height: 0 !important;
  }
  .app {
    flex: 1 1 0 !important;
  }
  .tab-bar,
  .panel,
  .panel-shell {
    overflow: hidden !important;
    min-height: 0 !important;
  }
}

    
    /* Fix 7 — Responsive chart height */
    @media (max-width: 540px) {
      .chart-wrap { min-height: 160px !important; max-height: 220px !important; }
    }
    @media (max-width: 480px) {
      .chart-wrap { min-height: 130px !important; max-height: 180px !important; }
    }

    /* Fix 8 — Scroll shadow indicators for scrollable panels */
    .glass.scrollable-panel {
      position: relative;
    }
    .glass.scrollable-panel::after {
      content: '';
      position: sticky;
      bottom: 0;
      left: 0;
      right: 0;
      height: 32px;
      display: block;
      background: linear-gradient(transparent, rgba(0,0,0,0.18));
      pointer-events: none;
      border-radius: 0 0 12px 12px;
    }

    /* Fix 9 — Eğitim Cüzdanı mobile order: above watchlist */

  
    /* Fix 10 — Touch targets minimum 44px on mobile */

    /* Fix 11 — Prevent text selection on interactive elements */
    button, .btn, .tab-btn, .btab, 

    /* Fix 12 — Loading skeleton pulse for watchlist (visual polish) */
    .wl-empty-hint {
      color: rgba(255,255,255,0.4);
      font-size: 12px;
      text-align: center;
      padding: 20px 8px;
      letter-spacing: 0.02em;
    }

    /* Fix 13 — Safe area insets for notched phones (iPhone X+) */
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
    }

  
    /* Fix 14 — Keyboard focus indicator */
    :focus-visible {
      outline: 2px solid rgba(100,200,255,0.7);
      outline-offset: 2px;
    }
    button:focus:not(:focus-visible),
    input:focus:not(:focus-visible) {
      outline: none;
    }

  
    /* ── Landscape short screens (Nest Hub 600px tall) ── */
    @media (max-width: 1100px) and (max-height: 650px) {
      .chart-wrap { min-height: 100px !important; max-height: 140px !important; }
      .glass { padding: 8px !important; }
      .topbar { height: 42px !important; min-height: 42px !important; }
      .nav { height: 34px !important; min-height: 34px !important; }
      .tickerbar { padding: 2px 8px !important; }
      /* chart-main: flex:1 kısa ekranda tüm yüksekliği yemez — AKILLI ARAÇLAR görünür */
      #panel-trading .trading-grid > .grid:nth-child(2) > .glass.chart-main {
        flex: 0 0 auto !important;
        min-height: 0 !important;
      }
      /* RSI+MACD kompakt */
      #panel-trading .two-charts {
        height: 88px !important;
        min-height: 80px !important;
        max-height: 96px !important;
      }
      #panel-trading #wrapRSI,
      #panel-trading #wrapMACD {
        height: 88px !important;
        min-height: 80px !important;
        max-height: 96px !important;
        flex: 1 1 0 !important;
      }
      /* KPI kartları kompakt — değerler görünür */
      #panel-trading .smart-tools-card .smart-tools-row .kpi {
        min-height: 42px !important;
        padding: 4px 8px !important;
      }
      #panel-trading .smart-tools-card .smart-tools-row .kpi .k {
        font-size: 8px !important;
        letter-spacing: 0.05em !important;
      }
      #panel-trading .smart-tools-card .smart-tools-row .kpi .v {
        font-size: 11px !important;
      }
      /* panel-body: fallback scroll — içerik yine de taşarsa scroll ile erişilir */
      #panel-trading .panel-body {
        overflow-y: auto !important;
      }
    }

    /* ── Very narrow phones ≤360px (Galaxy S8+, Z Fold 5 closed) ── */


    /* ── Eğitim Cüzdanı: ensure Öz Sermaye always visible ── */


/* ═══════════════════════════════════════════════════════════════════════════
   FinLens — CLEAN MOBILE ARCHITECTURE v1.0 (SINGLE SOURCE OF TRUTH)
   ═══════════════════════════════════════════════════════════════════════════
   REMOVED BROKEN PATTERNS (v2–v11, 12 conflicting @media blocks):
   • overflow:hidden fighting overflow:visible on .glass
   • flex:1 children inside scroll containers → 0px canvas height
   • Cascading !important wars destroying specificity
   • Multiple panel-body overflow declarations contradicting each other

   CLEAN SYSTEM:
   • Option B: each .panel-body is the ONE scroll container per panel
   • .main → overflow:hidden (distributes height, never scrolls)
   • .panel-body → flex:1; overflow-y:auto (content flows naturally)
   • All direct children: flex:0 0 auto (content-sized inside scroll container)
   • #bt-charts-wrapper: concrete calc(55vh) height — bypasses flex:1 collapse
   ═══════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════
   1. APP SHELL FOUNDATION ≤768px
   ════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Edge-to-edge shell */
  .app   { padding: 0 !important; gap: 0 !important; }
  .shell { border-radius: 0 !important; border-left: none !important; border-right: none !important; border-top: none !important; }

  /* TOPBAR: 48px compact */
  .topbar {
    height: 48px !important; min-height: 48px !important; max-height: 48px !important;
    padding: 0 8px !important; overflow: hidden !important; flex-shrink: 0 !important;
  }
  .brand .sub, .pills, #btnNotif, #btnShortcuts,
  #topbarPlanBadge, #paperWalletDisplay, #btnReset { display: none !important; }
  .brand-title      { font-size: 11px !important; white-space: nowrap !important; }
  #userPill         { padding: 3px 7px !important; font-size: 10px !important; }
  #btnLogout        { font-size: 10px !important; padding: 5px 8px !important; white-space: nowrap !important; }

  /* TICKERBAR: 40px, price + change only */
  .tickerbar {
    height: 40px !important; min-height: 40px !important; max-height: 40px !important;
    padding: 0 8px !important; overflow: hidden !important; flex-shrink: 0 !important;
  }
  .tickerbar .stat, .tickerbar [data-kpi-card],
  .kpi-more-btn, #btnFocus, #btnKpiMore { display: none !important; }
  .symbol     { min-width: 0 !important; width: auto !important; padding: 3px 7px !important; gap: 5px !important; }
  .symbol .pair { font-size: 12px !important; letter-spacing: 0 !important; }
  .symbol .tf   { font-size: 9px !important; padding: 2px 5px !important; }
  #uiPrice    { font-size: 17px !important; }
  #uiChange   { font-size: 10px !important; padding: 3px 6px !important; }

  /* NAV: 40px, horizontal scroll, all 7 tabs reachable */
  .nav {
    height: 40px !important; min-height: 40px !important; max-height: 40px !important;
    padding: 0 6px !important; gap: 4px !important; overflow-x: auto !important;
    overflow-y: hidden !important; flex-wrap: nowrap !important;
    flex-shrink: 0 !important; scrollbar-width: none !important;
    /* scroll-snap kaldırıldı: snap-back tüm 375–430px ekranlarda tab 5-7'yi erişilemez yapıyordu */
    position: relative !important;
  }
  .nav::-webkit-scrollbar { display: none !important; }
  .nav .search { display: none !important; }
  .nav .tab {
    font-size: 10px !important; padding: 4px 10px !important;
    white-space: nowrap !important; flex: 0 0 auto !important; flex-shrink: 0 !important;
    min-width: 0 !important; height: 26px !important;
    /* scroll-snap-align: start kaldırıldı — snap noktaları max-scroll'u aştığından snap-back oluşuyordu */
  }

  /* MAIN: zero padding, never scrolls */
  .main { padding: 0 !important; overflow: hidden !important; }

  /* PANEL: full height column */
  .panel { isolation: isolate !important; }
  .panel.active {
    display: flex !important; flex-direction: column !important;
    flex: 1 1 0 !important; min-height: 0 !important; overflow: hidden !important;
    /* Görsel zemin: 20px kalıcı boşluk + notch güvenli alan */
    padding-bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
  }

  /* PANEL-SHELL: fills panel */
  .panel-shell {
    flex: 1 1 0 !important; display: flex !important; flex-direction: column !important;
    min-height: 0 !important; overflow: hidden !important;
  }

  /* PANEL-HEAD: compact, never shrinks */
  .panel-head { padding: 8px 10px !important; flex-shrink: 0 !important; }
  .panel-title { font-size: 11px !important; }

  /* PANEL-BODY: THE scroll container for all panels */
  .panel-body {
    flex: 1 1 0 !important; min-height: 0 !important;
    overflow-y: auto !important; overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important;
    /* 72px alt boşluk: içerik scroll sonunda nefes alır */
    padding: 8px 8px 72px !important;
    display: flex !important; flex-direction: column !important; gap: 8px !important;
    box-sizing: border-box !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255,255,255,.15) transparent !important;
  }
  .panel-body::-webkit-scrollbar { width: 3px !important; }
  .panel-body::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.18) !important;
    border-radius: 999px !important;
    min-height: 24px !important;
  }
  /* Scroll göstergesi panel kenarından uzak dursun */
  .panel-body::-webkit-scrollbar-track {
    background: transparent !important;
    margin-top: 8px !important;
    margin-bottom: 12px !important;
  }

  /* FOOTER: hidden on mobile */
  .foot { display: none !important; }

  /* Scroll sonu nefes alanı — panel-body sonuna sabit boşluk elemanı ekle */
  .panel-body::after {
    content: '' !important;
    display: block !important;
    height: 40px !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
  }

  /* GLASS CARDS: natural height inside scroll container */
  .glass {
    flex-shrink: 0 !important; height: auto !important; max-height: none !important;
    overflow: visible !important; min-height: 0 !important;
    padding: 10px !important; box-sizing: border-box !important; width: 100% !important;
  }
  /* Exception: chart-wrap must clip canvas */
  .chart-wrap { overflow: hidden !important; position: relative !important; }

  /* ALERT BANNER */
  #trapBanner { padding: 6px 10px !important; margin-bottom: 0 !important; }
  #trapBadges { display: none !important; }
  /* Neden? butonu mobilde de görünsün */
  #trapWhyBtn { display: inline-block !important; }

  /* NAV: scroll hint pseudo-elements — JS .has-right/.has-left ile toggle edilir */
  .nav::after, .nav::before {
    content: ""; position: absolute; top: 0; width: 44px; height: 100%;
    pointer-events: none; opacity: 0; transition: opacity 0.2s ease; z-index: 2;
  }
  .nav::after  { right: 0; background: linear-gradient(to left,  var(--bg1) 50%, transparent); }
  .nav::before { left:  0; background: linear-gradient(to right, var(--bg1) 50%, transparent); }
  /* Sadece aktifken (ok görününce) tıklanabilir yap */
  .nav.has-left::before  { opacity: 1; pointer-events: all; cursor: pointer; }
  .nav.has-right::after  { opacity: 1; pointer-events: all; cursor: pointer;
    content: "›" !important; display: flex !important;
    align-items: center !important; justify-content: flex-end !important;
    padding-right: 6px !important; color: rgba(255,255,255,0.85) !important;
    font-size: 20px !important; font-weight: 700 !important; }

  /* AI Signals: mobilde dikey scroll aktif */
  #panel-ai-signals .panel-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}

/* ════════════════════════════════════════════
   2. TRADING PANEL ≤768px
   ════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Grid: single column, natural height, panel-body scrolls it */
  /* 140px alt padding: MACD/RSI sonrası nefes alanı garanti */
  /* KRİTİK: overflow:hidden → overflow-y:auto — panel-body artık scroll container */
  #panel-trading .panel-body {
    padding: 8px 8px 140px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: block !important;  /* flex → block: trading-grid'i sıkıştırmasın */
    -webkit-overflow-scrolling: touch !important;
  }
  /* ── MOBİL LAYOUT (v11) — CSS Grid `grid-template-areas`
     ESKİ: flex-direction: column-reverse → iOS Safari + Chrome Android'de
           URL bar açılıp kapanırken viewport reflow'unda overlap üretiyordu
           (SIM ÖZ SERMAYE'nin üstüne FİYAT paneli biniyordu).
     YENİ: Grid 2 satır, hücreler fiziksel olarak ayrı → overlap imkansız.
           "wallet" satır 1 (cüzdan üstte), "chart" satır 2 (grafik altta). */
  /* MOBİL LAYOUT (v13)
     Kök sorun: ≤860px bloğundan gelen max-height:calc(100vh-140px) kuralı
     nth-child(3)'e uygulanıyordu. overflow:visible ile birleşince wallet
     içeriği chart alanına taşıyordu.
     v12 hatası: overflow:hidden canvas GPU compositing layer'ı kesmiyordu,
     sadece glass card arka planını gizliyordu → "FİYAT" başlığı kayboldu.
     v13 çözümü: CSS Grid korundu, overflow:visible korundu,
     SADECE max-height:none eklendi → kayma imkânsız, canvas görünür. */
  #panel-trading .trading-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    grid-template-areas: unset !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #panel-trading .trading-grid > .grid {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* KOLON ATAMASI:
     nth-child(1) = Sol Kolon  → gizli
     nth-child(2) = Orta Kolon (Fiyat/RSI/MACD) → "chart" alanı
     nth-child(3) = Sağ Kolon  (Takip/Cüzdan)   → "wallet" alanı
     max-height:none → ≤860px bloğunun calc(100vh-140px) kuralını iptal eder */
  #panel-trading .trading-grid > .grid:nth-child(1) {
    display: none !important;
  }
  #panel-trading .trading-grid > .grid:nth-child(2) {
    grid-area: unset !important;
    order: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100% !important;
    padding: 0 !important;
  }
  #panel-trading .trading-grid > .grid:nth-child(3) {
    grid-area: unset !important;
    order: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100% !important;
    padding: 0 !important; /* ≤1100px padding-bottom:28px override */
  }

  /* Middle column inner order */
  #panel-trading .glass.chart-main  { order: 1 !important; flex: 0 0 auto !important; height: auto !important; }
  #panel-trading .two-charts        { order: 2 !important; }
  #panel-trading .smart-tools-card  { order: 3 !important; }

  /* All trading glass: natural height */
  #panel-trading .trading-grid .glass {
    flex: 0 0 auto !important; height: auto !important; min-height: 0 !important;
  }

  /* Price chart */
  #panel-trading .chart-wrap {
    height: 200px !important; min-height: 200px !important; max-height: 200px !important;
    overflow: hidden !important;
  }

  /* RSI + MACD: Fiyat grafiği gibi tam genişlik, alt alta — canvas kendi kutusuna oturacak */
  #panel-trading .two-charts {
    display: flex !important; flex-direction: column !important; gap: 8px !important;
    flex: 0 0 auto !important; overflow: visible !important;
    width: 100% !important; height: auto !important;
  }
  /* wrapRSI ve wrapMACD zaten .glass — doğrudan hedefliyoruz */
  #panel-trading #wrapRSI,
  #panel-trading #wrapMACD {
    width: 100% !important; flex: 0 0 auto !important;
    overflow: hidden !important; /* canvas klip */
    box-sizing: border-box !important;
    padding: 8px 8px 6px 8px !important;
    height: auto !important;
  }
  #panel-trading .chart-wrap.small {
    height: 80px !important; min-height: 80px !important;
    overflow: hidden !important; width: 100% !important;
    position: relative !important;
  }
  /* KRİTİK: canvas display:inline yerine block + height:100%
     → getBoundingClientRect() chart-wrap boyutunu doğru okur
     → JS resize() canvas'ı frame'e tam oturtur */
  #panel-trading .chart-wrap.small canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Smart tools: horizontal scroll row */
  #panel-trading .smart-tools-card { flex: 0 0 auto !important; height: auto !important; }
  #panel-trading .smart-tools-card .smart-tools-row {
    display: flex !important; flex-direction: row !important;
    flex-wrap: nowrap !important; overflow-x: auto !important;
    gap: 8px !important; scrollbar-width: none !important;
  }
  #panel-trading .smart-tools-card .smart-tools-row::-webkit-scrollbar { display: none !important; }
  #panel-trading .smart-tools-card .smart-tools-row .kpi {
    flex: 0 0 auto !important; min-width: 90px !important;
  }

  /* Watchlist: bounded, scrolls internally */
  #panel-trading #watchlist {
    max-height: 260px !important; overflow-y: auto !important; overflow-x: hidden !important;
  }

  /* Eğitim Cüzdanı ↔ Fiyat arası boşluk: artık trading-grid `gap: 8px` ile sağlanıyor.
     v10'daki margin-bottom/top patch'leri kaldırıldı — grid hücreleri zaten ayrı satırlar. */

  /* Watchlist row layout: no overflow */
  .list .row {
    display: flex !important; align-items: center !important;
    flex-wrap: nowrap !important; gap: 6px !important;
    padding: 9px 10px !important; overflow: hidden !important;
    min-height: 44px !important; /* dokunma alanı garanti */
  }
  .list .row .wl-main { flex: 1 1 0 !important; min-width: 0 !important; overflow: hidden !important; }
  .list .row .wl-meta {
    flex: 0 0 auto !important; text-align: right !important;
    font-size: 11px !important; line-height: 1.4 !important; margin-right: 2px !important;
  }
  .wl-remove { flex-shrink: 0 !important; width: 24px !important; height: 20px !important; font-size: 10px !important; padding: 0 !important; }

  /* Watchlist input row */
  #panel-trading #glassTakip .form-row {
    display: flex !important; flex-direction: row !important;
    gap: 5px !important; align-items: center !important; flex-wrap: nowrap !important;
  }
  #panel-trading #glassTakip .form-row #wlInput {
    flex: 1 1 0 !important; min-width: 0 !important;
    font-size: 11px !important; padding: 6px 8px !important;
  }
  #panel-trading #glassTakip .form-row #btnAddWl {
    flex: 0 0 auto !important; white-space: nowrap !important; font-size: 11px !important;
  }

  /* Signal feed: bounded — mobil'de daha kompakt */
  #panel-trading #aiFeed { max-height: 140px !important; overflow-y: auto !important; }

  /* Buy/Sell: kompakt, dokunma alanı korunur */
  #btnBuy, #btnSell {
    font-size: 11px !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 48px !important;
    padding: 8px 14px !important;
  }
}

/* ════════════════════════════════════════════
   3. BACKTEST PANEL ≤768px — Canvas fix
   ROOT CAUSE: panel-body = scroll container.
   flex:1 children resolve to content-height (0px).
   Canvas gets h=1 from Math.max(1,0) → never draws.
   FIX: #btResults → flex:0 0 auto (content-sized).
        #bt-charts-wrapper → concrete vh height.
   ════════════════════════════════════════════ */
@media (max-width: 768px) {

  #panel-backtest .panel-body {
    overflow-y: auto !important; overflow-x: hidden !important;
    display: flex !important; flex-direction: column !important; gap: 6px !important;
  }

  /* btResults: content-sized — display controlled by JS, not CSS */
  #btResults {
    flex: 0 0 auto !important; min-height: 0 !important;
    flex-direction: column !important; gap: 6px !important;
  }

  /* bt-charts-wrapper: CONCRETE height — independent of flex chain */
  #bt-charts-wrapper {
    height: calc(55vh - 90px) !important;
    min-height: 210px !important; max-height: 420px !important;
    flex: none !important;
    display: flex !important; flex-direction: column !important;
    gap: 6px !important; overflow: hidden !important;
  }

  /* Equity glass: 60% */
  #bt-charts-wrapper > .glass:first-child,
  #bt-charts-wrapper > .glass.soft:first-child {
    flex: 3 !important; min-height: 0 !important;
    overflow: hidden !important; height: auto !important;
  }
  #bt-charts-wrapper > .glass:first-child .chart-wrap,
  #bt-charts-wrapper > .glass.soft:first-child .chart-wrap {
    flex: 1 !important; min-height: 0 !important;
    height: 100% !important; overflow: hidden !important;
  }

  /* Trade log: 40% */
  #bt-charts-wrapper > .glass:last-child,
  #bt-charts-wrapper > .glass.soft:last-child {
    flex: 2 !important; min-height: 0 !important;
    overflow: hidden !important; height: auto !important;
  }

  /* Backtest form: clean stacked grid — 4 rows, 2 equal columns (≤768px = mobil + Reels 520px) */
  #bt-run-form { padding: 10px 10px 8px !important; }
  #bt-run-form > div {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    align-items: stretch !important;
    min-width: 0 !important; max-width: 100% !important;
  }
  #bt-run-form > div > span:first-child {
    grid-column: 1; grid-row: 1;
    font-size: 10px !important; letter-spacing: .12em !important;
    align-self: center !important;
  }
  #bt-run-form > div > .badge {
    grid-column: 2; grid-row: 1;
    justify-self: start !important; align-self: center !important;
  }
  #btSymbol {
    grid-column: 1 / -1; grid-row: 2;
    width: 100% !important; min-width: 0 !important; box-sizing: border-box !important;
    font-size: 13px !important; padding: 7px 8px !important; flex: unset !important;
  }
  #btStrategy {
    grid-column: 1; grid-row: 3;
    width: 100% !important; min-width: 0 !important;
    font-size: 12px !important; padding: 7px 6px !important; flex: unset !important;
  }
  #btTf {
    grid-column: 2; grid-row: 3;
    width: 100% !important; min-width: 0 !important;
    font-size: 12px !important; padding: 7px 6px !important; flex: unset !important;
  }
  #btPeriod {
    grid-column: 1; grid-row: 4;
    width: 100% !important; min-width: 0 !important;
    font-size: 12px !important; padding: 7px 6px !important; flex: unset !important;
  }
  #btRunBtn {
    grid-column: 2; grid-row: 4;
    width: 100% !important;
    padding: 7px 0 !important; font-size: 12px !important;
    white-space: nowrap !important; border-radius: 8px !important; flex: unset !important;
  }
  #btErrorMsg { grid-column: 1 / -1; grid-row: 5; }

  /* Backtest KPI: 2×2 grid */
  #btResults .krow {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important;
  }
  #btResults .kpi { min-width: 0 !important; flex: unset !important; }
  #btResults .kpi .k { font-size: 9px !important; }
  #btResults .kpi .v { font-size: 12px !important; }

  /* Trade log scroll */
  #btTradeLog { overflow-x: auto !important; overflow-y: auto !important; }

  /* Empty state: flex:1 kısıtlandı — boş state yarım ekran kaplamaz */
  #btEmptyState {
    flex: 0 0 auto !important;
    min-height: 140px !important;
    max-height: 180px !important;
  }

/* ════════════════════════════════════════════
   4. PERFORMANCE PANEL ≤768px
   ════════════════════════════════════════════ */

  #panel-performance .panel-body {
    display: flex !important; flex-direction: column !important;
    overflow-y: auto !important; overflow-x: hidden !important; gap: 8px !important;
  }
  #panel-performance .panel-body > * {
    flex-shrink: 0 !important; height: auto !important; max-height: none !important;
  }
  /* Equity canvas: concrete height */
  #panel-performance .chart-wrap {
    height: calc(40vh - 50px) !important;
    min-height: 200px !important; max-height: 340px !important;
    flex: none !important; overflow: hidden !important;
  }
  /* Perf grid: single column */
  #panel-performance .perf-body,
  #panel-performance .perf-grid {
    display: flex !important; flex-direction: column !important;
    gap: 8px !important; grid-template-columns: unset !important;
  }

/* ════════════════════════════════════════════
   5. ANALİZ MERKEZİ ≤768px
   ════════════════════════════════════════════ */

  .ai-rec {
    flex-direction: column !important; gap: 8px !important;
    width: 100% !important; box-sizing: border-box !important; overflow: visible !important;
  }
  .ai-rec > div {
    min-width: 0 !important; width: 100% !important; flex: 0 0 auto !important;
  }
  #aiRecommendation {
    word-break: break-word !important; overflow-wrap: break-word !important;
    white-space: normal !important; font-size: 12px !important;
  }
  .ai-meta {
    grid-template-columns: repeat(5, minmax(0,1fr)) !important; gap: 5px !important;
  }
  .ai-pill { padding: 7px 8px !important; }
  .ai-pill .k { font-size: 10px !important; }
  .ai-pill .v { font-size: 12px !important; }
  .ai-tf {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 8px !important;
  }
  .ai-grid-2 { grid-template-columns: 1fr !important; gap: 8px !important; }
  #panel-ai-nav .panel-body > .glass { overflow-x: hidden !important; }
  #panel-ai-nav .feed {
    max-height: 280px !important; overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

/* ════════════════════════════════════════════
   6. STRATEJİ GEÇMİŞİ ≤768px — Table scroll
   ════════════════════════════════════════════ */

  #panel-history .panel-body > .glass {
    overflow: hidden !important; display: flex !important;
    flex-direction: column !important; flex: 0 0 auto !important;
    min-height: 0 !important; max-height: 60vh !important;
  }
  #panel-history .table-scroll {
    flex: 1 !important; overflow-y: auto !important;
    overflow-x: auto !important; -webkit-overflow-scrolling: touch !important;
  }
  #panel-history .table-scroll table { width: max-content !important; min-width: 100% !important; }
  #panel-history .table-scroll th,
  #panel-history .table-scroll td {
    white-space: nowrap !important; min-width: 52px !important;
    padding: 6px 8px !important; font-size: 11px !important;
  }
  #panel-history .table-scroll th { font-size: 10px !important; }

/* ════════════════════════════════════════════
   7. İŞLEM ÖZETİ ≤768px
   ════════════════════════════════════════════ */

  /* FIX M7-A: panel-body scroll override.
     Problem: L1367 global rule #panel-ai-summary .panel-body { overflow:hidden !important }
     has spec (1,1,0)+!important — beats mobile .panel-body (spec 0,1,0)+!important.
     Same selector here, later source order → this block wins. */
  #panel-ai-summary .panel-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* FIX M7-B: glass must be content-sized, not a scroll container.
     Problem: L1379 global rule sets height:0 + overflow-y:auto (spec 1,2,0)+!important
     → display:block flex item with height:0 scroll region = 0px on mobile WebKit.
     Same selector here, later source order → flex:0 0 auto + height:auto wins. */
  #panel-ai-summary .panel-body > .glass {
    flex: 0 0 auto !important;
    height: auto !important;
    overflow: visible !important;
    min-height: 0 !important;
  }

  #panel-ai-summary .ai-rec {
    flex-direction: column !important; gap: 8px !important; width: 100% !important;
  }
  #panel-ai-summary .ai-rec > div { min-width: 0 !important; width: 100% !important; }
  #panel-ai-summary .krow {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 6px !important;
  }

/* ════════════════════════════════════════════
   8. TEKNİK SİNYALLER ≤768px
   ════════════════════════════════════════════ */

  #panel-ai-signals .panel-body { padding: 8px 8px 40px !important; }
  /* FIX M8-A: signal table glass — allow horizontal scroll so all 4 columns visible.
     Glass has overflow:visible (mobile .glass rule). Panel-body clips overflow-x:hidden.
     This gives the table glass its own horizontal scroll instead of being clipped. */
  #panel-ai-signals .ai-signals-grid > .glass:first-child {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #panel-ai-signals .ai-signals-grid > .glass:first-child table {
    width: max-content !important;
    min-width: 100% !important;
  }
  #panel-ai-signals #alarmList {
    max-height: 300px !important; overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

/* ════════════════════════════════════════════
   9. COLLAPSİBLE CARDS ≤768px
   ════════════════════════════════════════════ */

  .glass.collapsible.collapsed > *:not(.hdr) {
    display: none !important; max-height: 0 !important;
    overflow: hidden !important; padding: 0 !important; margin: 0 !important;
  }
  .glass.collapsible:not(.collapsed) > *:not(.hdr) {
    display: unset !important; max-height: none !important;
  }
  .glass.collapsible:not(.collapsed) .form-row { display: flex !important; }
  .glass.collapsible:not(.collapsed) .feed {
    display: flex !important; flex-direction: column !important;
  }

/* ════════════════════════════════════════════
   10. OVERFLOW TEXT PROTECTION ≤768px
   ════════════════════════════════════════════ */

  #aiRecommendation, #sumText, #navSimBanner {
    word-break: break-word !important;
    overflow-wrap: break-word !important; hyphens: auto !important;
  }
  .badge {
    max-width: 100% !important; overflow: hidden !important;
    text-overflow: ellipsis !important; white-space: nowrap !important;
  }
  .krow .kpi { min-width: 0 !important; flex: 1 1 calc(50% - 6px) !important; }

  /* Panel ghost scroll prevention */
  .app, .shell, .main, .panel { overscroll-behavior: none !important; }
  .panel:not(.active) { display: none !important; overflow: hidden !important; }

/* FIX B: ANALiZ MERKEZi panel-body must scroll on mobile.
   Same selector as base rule => wins because it comes later in source. */
  #panel-ai-nav .panel-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  #panel-ai-nav .panel-body > .glass {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  #panel-ai-nav .ai-grid-2 {
    grid-template-columns: 1fr !important;
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
  }
  #panel-ai-nav .ai-grid-2 > .glass {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    flex: none !important;
  }
  #panel-ai-nav #aiFeed2 {
    max-height: 240px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex: none !important;
    height: auto !important;
  }
  #panel-ai-nav #newsContext {
    max-height: 200px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ════════════════════════════════════════════
   11. ≤480px REFINEMENTS
   ════════════════════════════════════════════ */
@media (max-width: 480px) {

  #uiPrice      { font-size: 15px !important; }
  .symbol .pair { font-size: 11px !important; }

  #panel-trading .chart-wrap {
    height: 170px !important; min-height: 170px !important; max-height: 170px !important;
  }
  /* RSI + MACD: stack vertically on very small */
  #panel-trading .two-charts {
    flex-direction: column !important; height: auto !important;
    min-height: 0 !important; max-height: none !important; overflow: visible !important;
  }
  #panel-trading #wrapRSI,
  #panel-trading #wrapMACD {
    height: auto !important; min-height: 0 !important;
    max-height: none !important; flex: 0 0 auto !important;
  }
  #panel-trading .chart-wrap.small { height: 80px !important; min-height: 80px !important; }

  #panel-ai-summary .krow {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
  .ai-meta { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

  #bt-charts-wrapper {
    height: calc(52vh - 70px) !important; min-height: 200px !important;
  }
  .glass { padding: 8px !important; }
}

/* ════════════════════════════════════════════
   12. ≤400px REFINEMENTS
   ════════════════════════════════════════════ */
@media (max-width: 400px) {

  .nav .tab { font-size: 9px !important; padding: 3px 7px !important; }

  #panel-trading .chart-wrap {
    height: 150px !important; min-height: 150px !important; max-height: 150px !important;
  }
  #btnBuy, #btnSell { font-size: 10px !important; padding: 5px 6px !important; }

  .ai-meta {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 5px !important;
  }
  .ai-pill .k { font-size: 9px !important; }
  .ai-pill .v { font-size: 10px !important; }

  #panel-history .table-scroll th,
  #panel-history .table-scroll td {
    padding: 4px 5px !important; min-width: 40px !important; font-size: 10px !important;
  }
  #panel-history .table-scroll th { font-size: 9px !important; }

  #bt-charts-wrapper {
    height: calc(50vh - 60px) !important; min-height: 190px !important;
  }
  .ai-rec > div:last-child .badge { font-size: 9px !important; padding: 3px 6px !important; }
  #panel-ai-summary .krow {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

/* ════════════════════════════════════════════
   13. ≤360px (Galaxy S8, Z Fold)
   ════════════════════════════════════════════ */
@media (max-width: 360px) {

  .topbar      { padding: 0 4px !important; }
  .brand-title { font-size: 10px !important; }
  .tickerbar   { height: 36px !important; min-height: 36px !important; padding: 0 4px !important; }
  #uiPrice     { font-size: 13px !important; }
  #uiChange    { font-size: 9px !important; padding: 2px 4px !important; }
  .symbol .pair { font-size: 10px !important; }
  .symbol .tf   { font-size: 8px !important; padding: 1px 3px !important; }
  #btnBuy, #btnSell { font-size: 10px !important; padding: 4px 5px !important; }

  #panel-trading .chart-wrap {
    height: 140px !important; min-height: 140px !important; max-height: 140px !important;
  }
  .krow .kpi { min-width: 0 !important; }

  #bt-charts-wrapper {
    height: calc(48vh - 50px) !important; min-height: 180px !important;
  }
  #btResults .kpi .k { font-size: 8px !important; }
  #btResults .kpi .v { font-size: 11px !important; }
  .glass { padding: 8px !important; }
}

/* ════════════════════════════════════════════
   14. LANDSCAPE PHONE SAFETY
   ════════════════════════════════════════════ */
@media (max-width: 768px) and (max-height: 500px) and (orientation: landscape) {
  .topbar    { height: 36px !important; min-height: 36px !important; max-height: 36px !important; }
  .tickerbar { height: 32px !important; min-height: 32px !important; max-height: 32px !important; }
  .nav       { height: 34px !important; min-height: 34px !important; max-height: 34px !important; }
  #panel-trading .chart-wrap { height: 120px !important; min-height: 120px !important; }
  #panel-trading .two-charts { height: 90px !important; min-height: 90px !important; }
  #bt-charts-wrapper { height: calc(45vh - 40px) !important; min-height: 150px !important; }
}

/* ════════════════════════════════════════════
   15. TABLET 641–860px — Desktop-like layout
   ════════════════════════════════════════════ */
@media (min-width: 641px) and (max-width: 860px) {

  .main { overflow: hidden !important; }
  .panel.active {
    display: flex !important; flex-direction: column !important;
    flex: 1 1 0 !important; min-height: 0 !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
    overflow: hidden !important;
  }
  .panel-shell {
    flex: 1 1 0 !important; display: flex !important;
    flex-direction: column !important; min-height: 0 !important; overflow: hidden !important;
  }
  .panel-body {
    flex: 1 1 0 !important; min-height: 0 !important;
    overflow-y: auto !important; overflow-x: hidden !important;
  }
  .panel-body::after {
    content: '' !important;
    display: block !important;
    height: 40px !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
  }
  .nav .search { display: none !important; }
  .nav .tab    { font-size: 11px !important; padding: 5px 10px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE BUG-FIX PATCH v33.1
   Targeted fixes: collapsible display-revert, Analiz Merkezi overflow,
   TAKiP LiSTESi scroll, KOKPiT chips, Al/Sat size, nav hint, tablet topbar
   ═══════════════════════════════════════════════════════════════════════ */


/* FIX A-2: TAKiP LiSTESi form-row and watchlist list lose flex */
@media (max-width: 768px) {
  #glassTakip .form-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }
  #glassTakip #watchlist {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    max-height: 220px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
  #glassTakip #watchlist .row {
    display: flex !important;
  }
}


/* FIX D: Topbar at 769-860px tablet — hide heavy elements */
@media (min-width: 769px) and (max-width: 860px) {
  .pills              { display: none !important; }
  #paperWalletDisplay { display: none !important; }
  #btnReset           { display: none !important; }
  #btnNotif           { font-size: 0 !important; min-width: 32px !important; padding: 6px 7px !important; }
  #btnShortcuts       { font-size: 0 !important; min-width: 32px !important; padding: 6px 7px !important; }
  #btnLogout          { font-size: 10px !important; padding: 5px 8px !important; }
  .brand .sub         { display: none !important; }
}


  /* Shortcuts modal layout */
  .sc-group { display:flex; flex-direction:column; gap:6px; }
  .sc-row { display:flex; align-items:center; gap:8px; font-size:12px; color:rgba(200,205,225,.75); }
  .sc-row kbd {
    display:inline-flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
    border-radius:5px; padding:2px 7px; font-family:monospace; font-size:11px;
    color:#F2F4FA; white-space:nowrap; min-width:26px;
  }
  .sc-row span { flex:1; }

/* ═══════════════════════════════════════════════════════════════════════
   FINAL COMPREHENSIVE MOBILE FIX v33.2
   Bu blok <style> içinde EN SON yerdir — kaynak sırası tüm eşit-spec
   kuralları yener. Panel-bazlı #id seçiciler (1,1,0)+ spec + !important.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ═══════════════════════════════════════════════════════════════════
     FIX SOL-KOLON: @media(≤1100px) hides col-1 with selector
     #panel-trading .trading-grid > .grid:nth-child(1) { display:none !important }
     spec=(1,3,0). The generic >.grid rule in the ≤768px block has spec=(1,2,0)
     which cannot override it. We match the exact selector here (same spec,
     later source order) so this ≤768px declaration wins.
     ═══════════════════════════════════════════════════════════════════ */
  #panel-trading .trading-grid > .grid:nth-child(1) {
    display: flex !important;       /* restore col-1: Kokpit + Zaman Aralıkları + Sinyal Akışı */
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Akıllı Araçlar: mobilde yatay satır (LABEL ← → DEĞER) — kesme yok ── */
  #panel-trading .smart-tools-card .smart-tools-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
  #panel-trading .smart-tools-card .smart-tools-row .kpi {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: 30px !important;
    padding: 5px 10px !important;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
  }
  #panel-trading .smart-tools-card .smart-tools-row .kpi:last-child {
    border-bottom: none !important;
  }
  #panel-trading .smart-tools-card .smart-tools-row .kpi .k {
    font-size: 9px !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: var(--muted2) !important;
    flex-shrink: 0 !important;
  }
  #panel-trading .smart-tools-card .smart-tools-row .kpi .v {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-align: right !important;
    white-space: nowrap !important;
    overflow: visible !important;
    max-width: none !important;
  }

  /* ── PERFORMANCE PANEL: 2-col grid → tek sütun flex ── */
  #panel-performance .panel-body {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    grid-template-columns: unset !important;
    height: auto !important;
    padding: 8px 8px 48px !important;
    gap: 8px !important;
  }
  #panel-performance .panel-body > * {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
  }
  #panel-performance .chart-wrap {
    height: calc(40vh - 50px) !important;
    min-height: 200px !important;
    max-height: 340px !important;
    flex: none !important;
    overflow: hidden !important;
  }
  #panel-performance .perf-body,
  #panel-performance .perf-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    grid-template-columns: unset !important;
    width: 100% !important;
  }

  /* ── İŞLEM ÖZETİ — KESİN DÜZELTME v2 ── */
  /* Ensure panel shows when active — spec(1,1,0) beats .panel.active spec(0,2,0) */
  #panel-ai-summary.active {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  /* Panel-shell: fills panel */
  #panel-ai-summary .panel-shell {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  /* Hedef: global overflow:hidden + height:0 kurallarını yener — aynı seçici, daha sonra → kazanır */
  #panel-ai-summary .panel-body {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    padding: 8px 8px 48px !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    box-sizing: border-box !important;
  }
  /* glass height:0 + overflow-y:auto'yu yener — aynı seçici, daha sonra → kazanır */
  #panel-ai-summary .panel-body > .glass {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 8px !important;
  }
  /* Inline style="min-width:320px" → !important geçersiz kılar */
  #panel-ai-summary .ai-rec > div {
    min-width: 0 !important;
    width: 100% !important;
    flex: none !important;
  }
  /* Alt dolgu kartı: content-sized */
  #panel-ai-summary .panel-body > .glass > div:last-child {
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }
  /* krow 2 sütun */
  #panel-ai-summary .krow {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  /* ── TEKNİK SİNYALLER — KESİN DÜZELTME v2 ── */
  /* Ensure panel shows when active — spec(1,1,0) beats .panel.active spec(0,2,0) */
  #panel-ai-signals.active {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  #panel-ai-signals .panel-shell {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  /* Global overflow:hidden'ı yener — aynı seçici, daha sonra → kazanır */
  #panel-ai-signals .panel-body {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    padding: 8px 8px 48px !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
  /* Sinyal ızgarası: 2 sütun → tek sütun flex */
  #panel-ai-signals .ai-signals-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    gap: 8px !important;
    min-height: 0 !important;
    align-items: stretch !important;
  }
  #panel-ai-signals .ai-signals-grid > .glass {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow: visible !important;
  }
  /* Sinyal tablosu: yatay scroll */
  #panel-ai-signals .ai-signals-grid > .glass:first-child {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #panel-ai-signals #signalsTableWrap {
    width: max-content !important;
    min-width: 100% !important;
    display: block !important;
  }
  /* Alarm form: mobilde sarmalama */
  #panel-ai-signals .form-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #panel-ai-signals #alarmMetric {
    flex: 1 1 120px !important;
    min-width: 0 !important;
  }
  #panel-ai-signals #alarmOp {
    flex: 0 0 72px !important;
    min-width: 0 !important;
  }
  #panel-ai-signals #alarmVal {
    flex: 0 0 64px !important;
    min-width: 0 !important;
  }
  #panel-ai-signals #btnAddAlarm {
    flex: 0 0 auto !important;
  }
  /* Alarm listesi: sınırlı yükseklik */
  #panel-ai-signals #alarmList {
    max-height: 180px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex: none !important;
  }
  /* Filler açıklama bölümü: content-sized */
  #panel-ai-signals .panel-body > div:last-child {
    flex: 0 0 auto !important;
    overflow: visible !important;
    min-height: 0 !important;
  }
  /* 3 sütun açıklama ızgarası → tek sütun */
  .tiq-explainer-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* ── GENEL: tüm panellerde filler divleri content-sized ── */
  .panel-body > div[style*="flex:1"][style*="border:1px dashed"] {
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }

  /* ── KOKPiT CHiP BUTTONS: smaller on mobile ── */
  .chip { font-size: 10px !important; padding: 4px 8px !important; font-weight: 700 !important; }
  .chip-row { gap: 5px !important; }

  /* ── İŞLEM ÖZETİ — NUCLEAR SPEC FIX (spec 1,1,1 > global 1,1,0) ── */
  /* html element prefix → tag(1) + id(1) + class(1) = (1,1,1).
     Global rule: #panel-ai-summary .panel-body = (0,1,1) id+class = (1,1,0).
     (1,1,1) > (1,1,0) → this ALWAYS wins, regardless of source order. */
  html #panel-ai-summary .panel-body {
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
  }
  html #panel-ai-summary .panel-body > .glass {
    height: auto !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* ── TEKNİK SİNYALLER — NUCLEAR SPEC FIX ── */
  html #panel-ai-signals .panel-body {
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
  }
  html #panel-ai-signals .ai-signals-grid > .glass {
    height: auto !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }

}

/* ════════════════════════════════════════════
   NARROW PHONE ≤430px — Tab bar compaction
   7 sekmenin tamamına 375-430px'de ulaşılabilmesi için
   font/padding küçültülür, böylece has-right gradient görünebilir alan kalır.
   ════════════════════════════════════════════ */
@media (max-width: 430px) {
  .nav .tab {
    font-size: 9px !important;
    padding: 3px 8px !important;
    letter-spacing: 0 !important;
  }
  .chip { font-size: 9px !important; padding: 3px 6px !important; }
}

/* ════════════════════════════════════════════
   EXTRA NARROW ≤375px — Tab bar max compaction
   İşlem Özeti & Teknik Sinyaller erişilebilir olsun
   ════════════════════════════════════════════ */
@media (max-width: 375px) {
  .nav .tab {
    font-size: 8px !important;
    padding: 2px 6px !important;
    letter-spacing: 0 !important;
  }
}

/* ── TABLET 641–860px: performance panel ── */
@media (min-width: 641px) and (max-width: 860px) {
  #panel-performance .panel-body {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    grid-template-columns: unset !important;
  }
}

/* ════════════════════════════════════════════
   iPAD / TABLET 769–1024px — Trading panel tek-kolon layout
   ≤1100px bloğu sol kolonu gizliyor; burada geri açıyoruz.
   Mobile ile aynı tek-kolon flex düzenini uyguluyoruz.
   ════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {

  /* Panel: flex column, panel-body'e tam yükseklik ver */
  #panel-trading {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
  }

  /* Panel-body: dikey scroll, iç içe kart yığını
     @media(min-width:769px) overflow:hidden'ı override et */
  #panel-trading .panel-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 10px 12px 140px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }

  /* Grid → tek sütun flex (≤1100px 2-col override'ını iptal et) */
  #panel-trading .trading-grid {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    /* ≤1100px grid-template-columns override */
    grid-template-columns: unset !important;
  }

  /* Her kolon: dikey flex, doğal yükseklik */
  #panel-trading .trading-grid > .grid {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* SOL KOLON: ≤1100px display:none'u geri aç */
  #panel-trading .trading-grid > .grid:nth-child(1) {
    display: flex !important;
  }

  /* Tüm trading glass kartlar: doğal yükseklik */
  #panel-trading .trading-grid .glass {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Fiyat grafiği: iPad'de biraz daha uzun */
  #panel-trading .chart-wrap {
    height: 260px !important;
    min-height: 260px !important;
    max-height: 260px !important;
    overflow: hidden !important;
  }

  /* RSI + MACD: yan yana */
  #panel-trading .two-charts {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    height: 130px !important;
    min-height: 130px !important;
    max-height: 130px !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
  }
  #panel-trading #wrapRSI,
  #panel-trading #wrapMACD {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 130px !important;
    overflow: hidden !important;
  }
  #panel-trading #wrapRSI .glass,
  #panel-trading #wrapMACD .glass {
    height: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  /* Sinyal akışı: iPad'de sınırlı yükseklik */
  #panel-trading #aiFeed {
    max-height: 160px !important;
    overflow-y: auto !important;
  }

  /* Takip listesi: sınırlı + scroll */
  #panel-trading #watchlist {
    max-height: 300px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* Smart tools: yatay scroll */
  #panel-trading .smart-tools-card { flex: 0 0 auto !important; height: auto !important; }
  #panel-trading .smart-tools-card .smart-tools-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    scrollbar-width: none !important;
  }
  #panel-trading .smart-tools-card .smart-tools-row::-webkit-scrollbar { display: none !important; }

  /* ── KRİTİK: ≤1100px nth-child(3) spec(1,3,0) override ──
     Generic .grid rule (1,2,0) yeterince güçlü değil; her kolon
     için aynı spec ile üzerine yazıyoruz. */
  #panel-trading .trading-grid > .grid:nth-child(1) {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    max-height: none !important;
    width: 100% !important;
  }
  #panel-trading .trading-grid > .grid:nth-child(2) {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    max-height: none !important;
    width: 100% !important;
  }
  #panel-trading .trading-grid > .grid:nth-child(3) {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    /* ≤1100px'in max-height + overflow-y:auto nested scroll'unu kaldır */
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    width: 100% !important;
  }
  /* ≤1100px glass:nth-child(1) max-height:55vh override */
  #panel-trading .trading-grid > .grid:nth-child(3) > .glass:nth-child(1) {
    max-height: none !important;
    overflow-y: visible !important;
    flex: 0 0 auto !important;
  }
  #panel-trading .trading-grid > .grid:nth-child(3) > .glass:nth-child(2) {
    flex: 0 0 auto !important;
    overflow: visible !important;
  }

  /* ── Panel izolasyonu: aktif olmayan paneller tamamen gizlensin ── */
  .panel:not(.active) {
    display: none !important;
    overflow: hidden !important;
    height: 0 !important;
    pointer-events: none !important;
  }

  /* ── Footer'ı iPad'de gizle (panel scroll içine karışmasın) ── */
  .foot {
    display: none !important;
  }

  /* ── Tüm panel-body'lere alt boşluk + scroll nefes alanı ── */
  .panel-body {
    padding-bottom: 80px !important;
  }
  .panel-body::after {
    content: '' !important;
    display: block !important;
    height: 40px !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
  }
  .panel-body::-webkit-scrollbar-track {
    margin-bottom: 10px !important;
    margin-top: 6px !important;
  }
  /* Sinyal akışı scroll track — daha fazla nefes (2mm boşluk) */
  #panel-trading #aiFeed::-webkit-scrollbar-track {
    margin-bottom: 20px !important;
    margin-top: 8px !important;
  }
  #panel-trading #watchlist::-webkit-scrollbar-track {
    margin-bottom: 16px !important;
    margin-top: 6px !important;
  }
}

/* ════════════════════════════════════════════
   TAKİP LİSTESİ — Görünür scroll çubuğu (tüm cihazlar)
   Küçük ama fark edilebilir: 3px genişlik, yarı-saydam iz
   ════════════════════════════════════════════ */
#panel-trading #watchlist {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,255,255,0.25) transparent !important;
}
#panel-trading #watchlist::-webkit-scrollbar {
  width: 3px !important;
}
#panel-trading #watchlist::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.25) !important;
  border-radius: 999px !important;
}
#panel-trading #watchlist::-webkit-scrollbar-track {
  background: transparent !important;
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

/* ════════════════════════════════════════════════════════════════════
   MOBİL RESPONSIVE FİX v33.3 — Topbar sıkışma + panel overlap düzeltme
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. UserPill: e-posta çok uzun, mobilde kesiyor ── */
@media (max-width: 768px) {
  /* Rightbar: flex-wrap kapatıldı — gizli elemanlar satır kaydırmasın */
  .rightbar {
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    overflow: hidden !important;
    gap: 6px !important;
  }

  /* UserPill: max-width + ellipsis ile e-posta kesilir, doğal görünür */
  #userPill {
    max-width: 130px !important;
    overflow: hidden !important;
    flex-shrink: 1 !important;
  }
  #userLabel {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 90px !important;
    display: inline-block !important;
  }

  /* Brand: çok dar ekranda topbar alanını fazla yemesin */
  .brand {
    flex-shrink: 0 !important;
    min-width: 0 !important;
    max-width: 100px !important;
    overflow: hidden !important;
  }
  .brand-title {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 68px !important;
  }
}

/* ── 2. ≤360px: topbar ultra-kompakt ── */
@media (max-width: 360px) {
  #userPill   { max-width: 100px !important; }
  #userLabel  { max-width: 65px !important; }
  #btnLogout  { padding: 4px 6px !important; font-size: 9px !important; }
  .brand      { max-width: 80px !important; }
  .brand-title { max-width: 50px !important; font-size: 9px !important; }
}

/* ── 3. Trading paneli 640–860px tablet: tek sütun, overlap yok ── */
@media (min-width: 641px) and (max-width: 860px) {
  /* Trading grid: CSS Grid → Flex column (tüm 3 kolon alt alta) */
  #panel-trading .trading-grid {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #panel-trading .trading-grid > .grid {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    max-height: none !important; /* 1100px bloğundaki max-height'ı sıfırla */
    overflow-y: visible !important;
  }
  /* Tüm kolonlar görünür — 1100px kuralının gizlediği col-1'i geri getir */
  #panel-trading .trading-grid > .grid:nth-child(1) {
    display: flex !important;
  }
  /* Panel-body: tablet'te de scroll etsin */
  #panel-trading .panel-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px 10px 60px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  /* Grafik yükseklikleri tablet için */
  #panel-trading .chart-wrap {
    height: 240px !important;
    min-height: 240px !important;
    max-height: 240px !important;
    overflow: hidden !important;
  }
  #panel-trading .two-charts {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
  }
  #panel-trading #wrapRSI,
  #panel-trading #wrapMACD {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 120px !important;
    overflow: hidden !important;
  }
  #panel-trading .chart-wrap.small {
    height: 80px !important;
    min-height: 80px !important;
    overflow: hidden !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   MOBİL PANEL SIRASI (≤768px)
   display:contents → .grid wrapper'lar transparan olur,
   içindeki glass kartlar trading-grid'in doğrudan flex item'ı olur.
   CSS order ile istenen sıra: Takip → Fiyat → RSI/MACD → Cüzdan
                               → Kokpit → Zaman → Sinyal → Araçlar
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* .grid wrapper'ları yok say — çocuklar trading-grid'e çıkar */
  #panel-trading .trading-grid > .grid,
  #panel-trading .trading-grid > .grid:nth-child(1),
  #panel-trading .trading-grid > .grid:nth-child(2),
  #panel-trading .trading-grid > .grid:nth-child(3) {
    display: contents !important;
  }

  /* Her kart: tam genişlik, doğal yükseklik */
  #panel-trading #glassTakip,
  #panel-trading .glass.chart-main,
  #panel-trading .two-charts,
  #panel-trading #glassCuzdan,
  #panel-trading #glassKokpit,
  #panel-trading #glassZaman,
  #panel-trading #glassSinyal,
  #panel-trading .smart-tools-card {
    flex: 0 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Sıralama */
  #panel-trading #glassTakip        { order: 1 !important; }
  #panel-trading .glass.chart-main  { order: 2 !important; }
  #panel-trading .two-charts        { order: 3 !important; }
  #panel-trading #glassCuzdan       { order: 4 !important; }
  #panel-trading #glassKokpit       { order: 5 !important; }
  #panel-trading #glassZaman        { order: 6 !important; }
  #panel-trading #glassSinyal       { order: 7 !important; }
  #panel-trading .smart-tools-card  { order: 8 !important; }
  #panel-trading #trapBanner        { order: 2 !important; display: block; }

}

/* ── 4. 860–1100px dar masaüstü: kolonlar overflow etmesin ── */
@media (min-width: 861px) and (max-width: 1100px) {
  /* Kolon scroll artık doğru çalışsın — overflow-y: auto yeterli */
  #panel-trading .trading-grid > .grid:nth-child(2),
  #panel-trading .trading-grid > .grid:nth-child(3) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
  }
  /* Glass kartlar: kolon içinde doğal yükseklik */
  #panel-trading .trading-grid > .grid > .glass {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
}

/* ── 5. Tüm panel-body'lerde glass kartlar asla overflow etmesin ── */
@media (max-width: 1100px) {
  .panel-body > .glass,
  .panel-body > div > .glass {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
}

/* ── HEATMAP PANEL ── */
.hm-group-title { font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--muted2);text-transform:uppercase;margin-bottom:10px; }
.hm-tiles { display:flex;flex-wrap:wrap;gap:8px; }
.hm-tile {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:88px;height:72px;border-radius:12px;cursor:pointer;
  border:1px solid rgba(255,255,255,.08);
  transition:transform .15s,box-shadow .15s;
  padding:6px 4px;text-align:center;
}
.hm-tile:hover { transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.4); }
.hm-tile .hm-sym { font-size:10px;font-weight:800;font-family:var(--mono,monospace);letter-spacing:.03em;margin-bottom:3px; }
.hm-tile .hm-name { font-size:9px;color:rgba(255,255,255,.5);line-height:1.2; }
.hm-tile .hm-score { font-size:11px;font-weight:700;margin-top:4px; }
.hm-tile.bull { background:rgba(34,168,99,.18);border-color:rgba(34,168,99,.35); }
.hm-tile.bear { background:rgba(220,60,60,.18);border-color:rgba(220,60,60,.35); }
.hm-tile.neut { background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1); }
@media(max-width:600px){ .hm-tile{width:76px;height:64px;} }

/* ── BIST 30 CHIP STİLLERİ ── */
.bist-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 20px;
  background: rgba(99,132,220,.10);
  border: 1px solid rgba(99,132,220,.22);
  color: #a0aec0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
  font-family: var(--mono, monospace);
}
.bist-chip:hover {
  background: rgba(34,168,99,.15);
  border-color: #22A863;
  color: #22A863;
}
.bist-chip.in-wl {
  background: rgba(34,168,99,.08);
  border-color: rgba(34,168,99,.3);
  color: rgba(34,168,99,.5);
  cursor: default;
}

/* ════════════════════════════════════════════════════════════════════════
   MOBİL NİHAİ DÜZELTME — EN SONDA YAZILDI, HER ŞEYİ GEÇER
   Flex zincirini restore eder: body→app→shell→main→panel→panel-shell→panel-body
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html {
    height: 100dvh !important;
    overflow: hidden !important;
  }
  body {
    position: fixed !important;
    inset: 0 !important;
    height: 100dvh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .app {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .shell {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .main {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
  }
  .panel:not(.active) { display: none !important; }
  .panel.active {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .panel-shell {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .panel-body {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px 8px 72px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  /* ── iOS ZOOM FIX: font-size < 16px olan inputlar Safari'de sayfayı zoom'lar ── */
  input, select, textarea {
    font-size: 16px !important;
  }
  /* Görsel olarak küçük kalabilir ama zoom tetiklenmez */
  #btSymbol, #btTf, #btStrategy, #btPeriod, #btRunBtn,
  #wlInput, #alarmVal, #globalSearch {
    font-size: 16px !important;
  }
  .auth-input { font-size: 16px !important; }
}


/* === Onboarding Overlay (appended from inline style) === */
#onboardOverlay.active { display:flex!important; }
.ob-dot { width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.15);transition:background .25s,transform .25s; }
.ob-dot.active { background:#22A863;transform:scale(1.3); }

/* === Fiyat Uyarıları — Bell Button & Drawer === */
.alert-bell-btn {
  position: relative;
  font-size: 15px;
  padding: 4px 8px;
}
.alert-bell-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 15px;
  height: 15px;
  border-radius: 999px;
  background: #DC3C3C;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  pointer-events: none;
  line-height: 1;
  font-family: var(--mono);
}
.alert-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 1100;
  backdrop-filter: blur(2px);
}
.alert-drawer {
  position: fixed;
  top: 56px;
  right: 16px;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: #1a2540;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,.55);
  z-index: 1101;
  overflow: hidden;
}
.alert-drawer-inner {
  padding: 16px;
}
.alert-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
}
@media (max-width: 480px) {
  .alert-drawer { top: auto; bottom: 70px; right: 8px; left: 8px; width: auto; }
}

/* === PWA Install === */
.pwa-install-btn {
  font-size: 11px !important;
  padding: 4px 10px !important;
  animation: pwa-pulse 2.5s ease-in-out infinite;
}
@keyframes pwa-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,168,99,.4); }
  50%      { box-shadow: 0 0 0 6px rgba(34,168,99,0); }
}

/* iOS install banner */
.ios-install-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(34,168,99,.10);
  border-bottom: 1px solid rgba(34,168,99,.25);
  padding: 10px 16px;
  font-size: 12px;
  color: var(--ink);
}

/* Offline banner */
.offline-banner {
  background: rgba(220,60,60,.12);
  border-bottom: 1px solid rgba(220,60,60,.30);
  text-align: center;
  padding: 7px 16px;
  font-size: 11px;
  font-weight: 600;
  color: #ff6b6b;
  letter-spacing: .04em;
}

/* ── Search Autocomplete Dropdown ── */
.search-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--glass-bg, #1a2535);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  z-index: 9999;
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
}
.search-suggestions:empty { display: none !important; }
.search-sug-group {
  padding: 5px 0 2px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--muted2, #5a6a7e);
  text-transform: uppercase;
  padding-left: 12px;
  margin-top: 4px;
}
.search-sug-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
  border-radius: 0;
  transition: background .1s;
  font-size: 12px;
  color: var(--ink, #e2e8f0);
}
.search-sug-item:hover,
.search-sug-item.active {
  background: rgba(99,132,220,.18);
}
.search-sug-ticker {
  font-weight: 700;
  font-family: var(--mono, monospace);
  font-size: 12px;
  color: var(--accent-blue, #6384DC);
  min-width: 80px;
}
.search-sug-name {
  font-size: 11px;
  color: var(--muted2, #8899aa);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-sug-tag {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: .04em;
}
.search-sug-tag.bist  { background: rgba(34,168,99,.15);  color: #22A863; }
.search-sug-tag.kripto{ background: rgba(99,132,220,.15); color: #6384DC; }
.search-sug-tag.doviz { background: rgba(220,180,60,.15); color: #d4b84a; }
.search-sug-tag.emtia { background: rgba(220,140,60,.15); color: #e08040; }

/* ══ FEEDBACK FAB + MODAL ══════════════════════════════════════════════════ */
#feedbackFab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 900;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #22A863;
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(34,168,99,.40);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
#feedbackFab:hover { background: #1a8050; box-shadow: 0 6px 20px rgba(34,168,99,.50); transform: scale(1.07); }
#feedbackFab:active { transform: scale(.96); }

#feedbackModal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 20px 88px 20px;
  pointer-events: none;
}
#feedbackModal.hidden      { display: none; }
#feedbackModal:not(.hidden) { pointer-events: all; }

#feedbackBox {
  background: var(--card, #1a2535);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 18px;
  padding: 24px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 16px 48px rgba(0,0,0,.45);
  animation: fbSlideUp .2s ease;
}
@keyframes fbSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.fb-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #e2e8f0);
}
.fb-close {
  background: none;
  border: none;
  color: var(--muted, #8899aa);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 0 2px;
}
.fb-close:hover { color: var(--text, #e2e8f0); }

.fb-sub {
  font-size: 12px;
  color: var(--muted, #8899aa);
  margin: 0 0 16px 0;
  line-height: 1.5;
}

.fb-votes {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.fb-vote {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  background: var(--surface, rgba(255,255,255,.05));
  border: 1.5px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  font-size: 22px;
  color: var(--muted, #8899aa);
  transition: border-color .15s, background .15s;
}
.fb-vote span {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted, #8899aa);
  letter-spacing: .02em;
}
.fb-vote:hover { background: rgba(34,168,99,.08); border-color: rgba(34,168,99,.3); }
.fb-vote.selected { border-color: #22A863; background: rgba(34,168,99,.12); }
.fb-vote.selected span { color: #22A863; }

.fb-textarea {
  width: 100%;
  background: var(--surface, rgba(255,255,255,.05));
  border: 1.5px solid var(--border, rgba(255,255,255,.08));
  border-radius: 10px;
  color: var(--text, #e2e8f0);
  font-size: 13px;
  font-family: inherit;
  padding: 10px 12px;
  resize: none;
  box-sizing: border-box;
  margin-bottom: 10px;
  transition: border-color .15s;
  line-height: 1.5;
}
.fb-textarea:focus { outline: none; border-color: #22A863; }
.fb-textarea::placeholder { color: var(--muted2, #8899aa); }

.fb-input {
  width: 100%;
  background: var(--surface, rgba(255,255,255,.05));
  border: 1.5px solid var(--border, rgba(255,255,255,.08));
  border-radius: 10px;
  color: var(--text, #e2e8f0);
  font-size: 13px;
  font-family: inherit;
  padding: 9px 12px;
  box-sizing: border-box;
  margin-bottom: 14px;
  transition: border-color .15s;
}
.fb-input:focus { outline: none; border-color: #22A863; }
.fb-input::placeholder { color: var(--muted2, #8899aa); }

.fb-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.fb-status {
  font-size: 12px;
  color: #22A863;
  flex: 1;
}
.fb-btn {
  background: #22A863;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, transform .1s;
  white-space: nowrap;
}
.fb-btn:hover { background: #1a8050; }
.fb-btn:active { transform: scale(.97); }
.fb-btn:disabled { opacity: .55; cursor: not-allowed; }

@media (max-width: 480px) {
  #feedbackFab { bottom: 72px; right: 16px; width: 44px; height: 44px; }
  #feedbackModal { padding: 0 12px 124px 12px; }
  #feedbackBox { padding: 20px 16px; }
  .fb-votes { gap: 6px; }
}

/* Watchlist notify row — her zaman tek satır, buton sağda */
#wlNotifyRow {
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
}
#btnWlNotify {
  flex-shrink: 0;
}

/* Watchlist row — sabit yükseklik, tutarlı hizalama */
.list .row {
  min-height: 44px;
  align-items: center;
}
.list .row .wl-main .sub {
  font-size: 10px;
  line-height: 1;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity .15s ease;
}
.list .row:hover .wl-main .sub,
.list .row.is-active .wl-main .sub {
  height: auto;
  opacity: 1;
}
@media (hover: none) {
  .list .row .wl-main .sub {
    display: none;
  }
}

/* Mobil: tüm glass kartlar eşit 8px gap — margin sıfır, sadece gap konuşur */
@media (max-width: 768px) {
  #panel-trading .trading-grid .glass,
  #panel-trading .trading-grid > .grid > * {
    margin: 0 !important;
  }
  #panel-trading .trading-grid > .grid:nth-child(1) > .glass:nth-child(1),
  #panel-trading .trading-grid > .grid:nth-child(1) > .glass:nth-child(2),
  #panel-trading .trading-grid > .grid:nth-child(2) > *,
  #panel-trading .trading-grid > .grid:nth-child(3) > * {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
}

/* ── MORNING BRIEFING ──────────────────────────────────────── */
.br-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.br-card-alert {
  border-color: rgba(255,180,0,.4);
  background: rgba(255,160,0,.07);
}
.br-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .5;
  margin-bottom: 8px;
}
.br-story {
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
}
.br-empty {
  font-size: 13px;
  opacity: .5;
  margin: 4px 0 0;
}
.br-sym-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.br-sym-item:last-of-type { border-bottom: none; }
.br-sym { font-weight: 600; }
.br-sym-detail { opacity: .65; }
.br-sym-regime { font-size: 11px; padding: 1px 7px; border-radius: 20px; background: rgba(255,255,255,.1); margin-left: auto; }
.br-unchanged {
  margin-top: 10px;
  font-size: 12px;
  opacity: .55;
  cursor: pointer;
}
.br-unchanged summary { list-style: none; display: flex; align-items: center; gap: 6px; }
.br-unchanged summary::before { content: "▶"; font-size: 9px; transition: transform .2s; }
.br-unchanged[open] summary::before { transform: rotate(90deg); }
.br-unchanged-list { margin-top: 6px; padding-left: 4px; line-height: 1.8; }
.br-cal-item {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.br-cal-item:last-child { border-bottom: none; }
.br-cal-time { opacity: .45; min-width: 48px; font-size: 12px; }
.br-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.br-badge { font-size: 11px; padding: 2px 8px; border-radius: 20px; background: rgba(255,255,255,.1); }
.br-confirm-item { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.br-confirm-item:last-child { border-bottom: none; }
.br-confirm-item .br-sym { display: block; font-size: 13px; font-weight: 700; color: #f0f4ff; margin-bottom: 2px; }
.br-confirm-item .br-story { display: block; font-size: 12px; color: #a0aec0; line-height: 1.4; margin-bottom: 4px; }
.br-confirm-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.br-ttl { font-size: 11px; color: #6384DC; font-weight: 600; }
.br-ttl-last { color: #f59e0b; }
.br-ttl-exp  { color: #4a5568; font-weight: 400; }

#panel-briefing .panel-body { max-width: 680px; margin: 0 auto; padding: 16px; }
}