/* ============================================================
   TREDEDO — Investor Dashboard · Premium Mobile Refinement
   Bento layout · Space Grotesk + DM Sans · cyan/green identity
   Applies only on mobile (≤768px) — desktop layout untouched.
   ============================================================ */

/* Type — load once via @import (kept at top per CSS spec) */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@600;700&display=swap');

@media (max-width:768px){
  :root{
    --font-display:'Space Grotesk', system-ui, sans-serif;
    --font-body:'DM Sans', system-ui, sans-serif;
    --font-num:'JetBrains Mono', ui-monospace, monospace;
    --gold:#f5c451;
    --gold-soft:rgba(245,196,81,.6);
    --premium-stroke:linear-gradient(135deg, rgba(92,240,255,.35), rgba(245,196,81,.18) 50%, rgba(52,224,161,.3));
  }
  body, .main{font-family:var(--font-body) !important;letter-spacing:-.005em}
  h1,h2,h3,h4,.kpi .k,.panel-head h3,.topbar h1{
    font-family:var(--font-display) !important;letter-spacing:-.018em !important;font-weight:700
  }
  .kpi .v,.eqf .v,.risk-meta .v,.pnl,.amt-chip,.bot .roi,.sym-cell,.al .pct,.kpi .delta{
    font-family:var(--font-num) !important;font-feature-settings:"tnum","ss01"
  }

  /* ---------- Topbar — refined header strip ---------- */
  .topbar{
    background:linear-gradient(135deg, rgba(92,240,255,.04), rgba(245,196,81,.02));
    border:1px solid rgba(255,255,255,.06);
    border-radius:20px;padding:14px 14px 12px;
    margin-bottom:14px !important;gap:8px !important;
    position:relative;overflow:hidden;
  }
  .topbar::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(120% 80% at 100% 0%, rgba(92,240,255,.10), transparent 55%);
  }
  .topbar h1{font-size:21px !important;line-height:1.15;background:linear-gradient(135deg,#fff,#9ed6e8 70%,var(--gold) 130%);-webkit-background-clip:text;background-clip:text;color:transparent}
  .topbar .sub{font-size:12px !important;color:rgba(220,228,245,.6)}
  .tb-actions{gap:6px !important;width:100%;margin-top:4px}
  .tb-actions .btn,.tb-actions .pill{font-size:11px !important;padding:7px 11px !important;border-radius:999px !important}
  .tb-actions .pill{background:rgba(52,224,161,.08) !important;border-color:rgba(52,224,161,.25)}
  .tb-actions .icon-toggle{width:32px;height:32px;border-radius:999px}
  .tb-actions .btn-primary{
    background:linear-gradient(135deg,#5cf0ff,#3aa0ff) !important;
    color:#04121f !important;font-weight:700 !important;
    box-shadow:0 8px 24px -8px rgba(92,240,255,.55) !important;
  }

  /* ---------- BENTO KPI GRID ---------- */
  .kpis{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    grid-template-areas:
      "hero hero"
      "pnl  monthly"
      "open open" !important;
    gap:10px !important;margin-bottom:14px !important;
  }
  .kpi{
    position:relative;padding:16px 16px !important;
    border-radius:20px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)) ,
      rgba(10,16,30,.55) !important;
    border:1px solid rgba(255,255,255,.06);
    backdrop-filter:blur(14px) saturate(140%);
    overflow:hidden;
  }
  .kpi::before{
    content:"";position:absolute;inset:0;border-radius:20px;padding:1px;
    background:var(--premium-stroke);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    opacity:.55;pointer-events:none;
  }
  .kpi .k{font-size:11.5px !important;font-weight:600 !important;color:rgba(220,228,245,.55) !important;
    margin-bottom:8px !important;text-transform:uppercase;letter-spacing:.08em;font-family:var(--font-display) !important}
  .kpi .v{font-size:24px !important;font-weight:700;letter-spacing:-.025em !important;line-height:1.05}
  .kpi .delta{font-size:11px !important;margin-top:6px !important;opacity:.85}
  .kpi .ks{height:22px !important;margin-top:8px !important;opacity:.7}

  /* hero tile — قيمة المحفظة */
  .kpi:nth-child(1){
    grid-area:hero;padding:20px 18px !important;
    background:
      radial-gradient(120% 100% at 100% 0%, rgba(245,196,81,.12), transparent 55%),
      radial-gradient(120% 100% at 0% 100%, rgba(92,240,255,.10), transparent 60%),
      rgba(10,16,30,.65) !important;
  }
  .kpi:nth-child(1)::before{opacity:.9;background:linear-gradient(135deg, var(--gold-soft), rgba(92,240,255,.5))}
  .kpi:nth-child(1) .k{color:var(--gold) !important;font-size:11px !important}
  .kpi:nth-child(1) .v{font-size:34px !important;background:linear-gradient(180deg,#fff,#c9d9f5);-webkit-background-clip:text;background-clip:text;color:transparent}
  .kpi:nth-child(1) .ks{height:30px !important;opacity:.85}

  .kpi:nth-child(2){grid-area:pnl}
  .kpi:nth-child(3){grid-area:monthly}
  .kpi:nth-child(4){
    grid-area:open;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:14px 16px !important
  }
  .kpi:nth-child(4) .k{margin:0 !important}
  .kpi:nth-child(4) .v{font-size:22px !important}
  .kpi:nth-child(4) .delta{margin:0 !important;text-align:left;font-size:10.5px !important}
  .kpi:nth-child(4) .ks{display:none}

  /* ---------- Panels — premium glass ---------- */
  .panel{
    border-radius:22px !important;padding:18px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)),
      rgba(10,16,30,.55) !important;
    border:1px solid rgba(255,255,255,.06) !important;
    backdrop-filter:blur(16px) saturate(140%);
    position:relative;overflow:hidden;
  }
  .panel::after{
    content:"";position:absolute;top:0;left:10%;right:10%;height:1px;
    background:linear-gradient(90deg,transparent,rgba(92,240,255,.5),transparent);
    opacity:.6;pointer-events:none;
  }
  .panel-head{margin-bottom:14px !important;gap:8px !important}
  .panel-head h3{font-size:15px !important;letter-spacing:-.01em}
  .panel-head a{font-size:12px !important}
  .grid-2,.grid-3{gap:12px !important;margin-bottom:0 !important;margin-top:12px !important}

  /* tabs cleaner on mobile */
  .tabs{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);padding:3px;border-radius:10px}
  .tab{padding:6px 11px !important;font-size:11.5px !important;border-radius:8px}
  .tab.active{background:linear-gradient(135deg,rgba(92,240,255,.18),rgba(245,196,81,.08)) !important;color:#fff !important;
    box-shadow:inset 0 0 0 1px rgba(92,240,255,.3)}

  /* equity chart */
  .equity-chart{height:200px !important}
  .eq-foot{gap:14px !important;margin-top:12px !important;display:grid !important;grid-template-columns:1fr 1fr;row-gap:10px}
  .eqf .k{font-size:10.5px !important;color:rgba(220,228,245,.55);text-transform:uppercase;letter-spacing:.06em}
  .eqf .v{font-size:15px !important;margin-top:3px !important}

  /* donut + legend */
  .donut-row{flex-direction:row !important;gap:14px !important;align-items:center}
  .donut-c{width:96px !important;height:96px !important;margin:0 !important;flex-shrink:0}
  .al{font-size:12.5px !important}
  .al .lbl i{width:8px;height:8px;border-radius:3px}
  .al .pct{font-size:13px !important}

  /* risk gauge */
  .gauge-c{height:72px !important}
  .risk-meta .v{font-size:16px !important}
  .risk-meta .k{font-size:10.5px !important;color:rgba(220,228,245,.55);text-transform:uppercase;letter-spacing:.06em}

  /* positions table — turn into stacked premium cards */
  .panel .tbl thead{display:none}
  .panel .tbl,.panel .tbl tbody,.panel .tbl tr,.panel .tbl td{display:block !important;width:100%;border:none !important;padding:0 !important}
  .panel .tbl tr{
    background:rgba(255,255,255,.025);
    border:1px solid rgba(255,255,255,.06) !important;
    border-radius:14px;padding:12px 14px !important;margin-bottom:10px;
    display:grid !important;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;
  }
  .panel .tbl td{font-size:12.5px !important;padding:0 !important}
  .panel .tbl td:nth-child(1){grid-column:1;grid-row:1}      /* symbol */
  .panel .tbl td:nth-child(2){grid-column:2;grid-row:1;text-align:left} /* side */
  .panel .tbl td:nth-child(3){grid-column:1;grid-row:2;color:rgba(220,228,245,.55);font-size:11px !important} /* bot */
  .panel .tbl td:nth-child(7){grid-column:2;grid-row:2;text-align:left;font-size:14px !important;font-weight:800} /* pnl */
  .panel .tbl td:nth-child(4),.panel .tbl td:nth-child(5),.panel .tbl td:nth-child(6){display:none !important}
  .sym-badge{width:30px;height:30px;font-size:11.5px}

  /* bots grid — bento 1 hero + 2 small */
  .bots{display:grid !important;grid-template-columns:1fr 1fr !important;gap:10px !important}
  .bot{padding:14px !important;border-radius:16px !important}
  .bot:first-child{grid-column:1/-1;background:
    radial-gradient(100% 100% at 0% 0%, rgba(92,240,255,.10), transparent 55%),
    rgba(255,255,255,.03) !important}
  .bot-name{font-size:13px !important}
  .bot .roi{font-size:18px !important}

  /* feed */
  .feed{max-height:none}
  .feed-item{padding:10px 4px !important;font-size:12.5px !important;gap:9px}
  .feed-item .t{font-size:10.5px !important}
  .feed-item .amt{font-size:12.5px !important}

  /* main padding tuned for floating bar */
  .main{padding:14px 12px 120px !important}

  /* live dot pulse — premium feel */
  .pill .dot.live,.dot.live{box-shadow:0 0 0 0 rgba(52,224,161,.55);animation:pulseDot 1.8s infinite}
  @keyframes pulseDot{
    0%{box-shadow:0 0 0 0 rgba(52,224,161,.55)}
    70%{box-shadow:0 0 0 10px rgba(52,224,161,0)}
    100%{box-shadow:0 0 0 0 rgba(52,224,161,0)}
  }
}

/* small phones — tighten hero tile */
@media (max-width:380px){
  .kpi:nth-child(1) .v{font-size:28px !important}
  .topbar h1{font-size:19px !important}
  .equity-chart{height:170px !important}
}