/* Waleed Trade V4.20.2 — Fluid Responsive Layout
   UI-only override. No scale/zoom/transform canvas and no JS changes. */

html,body{max-width:100%;overflow-x:hidden}
.app,.main,.view,.grid,.card,.platform-top,.market-status-header{min-width:0;max-width:100%}
.card,*{box-sizing:border-box}

/* Fluid desktop/tablet: preserve the same composition while allowing every
   column, gap and text block to contract naturally with the viewport. */
@media (min-width:761px){
  .app{grid-template-columns:clamp(82px,7vw,108px) minmax(0,1fr)}
  .side{width:auto;min-width:0;padding-inline:clamp(6px,.8vw,10px)}
  .main{padding:clamp(10px,1.3vw,19px) clamp(10px,1.4vw,20px) 28px}

  .platform-top{
    grid-template-columns:clamp(172px,18vw,280px) minmax(0,1fr)!important;
    gap:clamp(6px,.8vw,12px)!important;
    padding:clamp(4px,.55vw,8px)!important;
  }
  .platform-top .platform-brand{min-width:0!important;padding-inline:clamp(7px,1vw,14px)!important}
  .platform-brand .brand-monogram{flex:0 0 clamp(36px,3.5vw,48px)!important;width:clamp(36px,3.5vw,48px)!important}
  .platform-brand .brand-wordmark{min-width:0}
  .platform-brand .brand-wordmark h1{font-size:clamp(12px,1.25vw,17px)!important;letter-spacing:clamp(.4px,.12vw,1.55px)!important;white-space:nowrap}
  .platform-brand .brand-wordmark small{font-size:clamp(5.8px,.57vw,7.8px)!important;letter-spacing:clamp(.4px,.12vw,1.6px)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .market-status-header{
    grid-template-columns:minmax(0,1fr) minmax(0,1.38fr) minmax(0,.72fr) minmax(0,2.05fr)!important;
    gap:clamp(4px,.5vw,7px)!important;
  }
  .market-status-header .market-glass-block,
  .market-status-header .market-state-block{min-width:0!important;padding-inline:clamp(5px,.7vw,10px)!important}
  .market-digital-clock{font-size:clamp(15px,1.65vw,23px)!important;letter-spacing:clamp(.3px,.1vw,1.8px)!important}
  .market-state-badge{font-size:clamp(10px,1vw,15px)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .market-countdown{font-size:clamp(10px,1.1vw,15px)!important;letter-spacing:clamp(.2px,.08vw,1px)!important}
  .market-panel-kicker,.market-state-label{font-size:clamp(6.5px,.67vw,9px)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .market-holiday-primary{grid-template-columns:minmax(0,1fr) clamp(42px,4vw,58px)!important;gap:clamp(4px,.55vw,8px)!important}
  .market-holiday-copy,.market-holiday-upcoming{min-width:0}
  .market-holiday-copy b,.market-holiday-copy small,.market-holiday-upcoming-list{overflow:hidden;text-overflow:ellipsis}

  #dashboardView .grid{gap:clamp(6px,.7vw,10px)}
  #dashboardView .top-kpi{min-width:0;padding-inline:clamp(8px,1vw,14px)!important}
  #dashboardView .top-kpi h3{font-size:clamp(8px,.8vw,12px)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #dashboardView .top-kpi .num{font-size:clamp(18px,2vw,30px)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #dashboardView .top-kpi .sar-line{font-size:clamp(8px,.8vw,11px)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #dashboardView .top-kpi .sub{font-size:clamp(8px,.75vw,11px)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  #dashboardView .portfolio-path-card,
  #dashboardView .chart-card-focused,
  #dashboardView .dashboard-intelligence-strip,
  #dashboardView .premium-summary{min-width:0}
  #dashboardView .portfolio-path-overview{grid-template-columns:minmax(0,1fr) clamp(70px,7vw,88px) minmax(0,1fr)!important}
  #dashboardView .path-value-card b{font-size:clamp(12px,1.25vw,18px)!important}
  #dashboardView .intelligence-grid{min-width:0}
  #dashboardView .intelligence-item{min-width:0;padding-inline:clamp(4px,.6vw,8px)}

  #tradesView .trades-layout{grid-template-columns:minmax(0,1fr) clamp(260px,25vw,330px);gap:clamp(8px,1vw,14px)}
  #tradesView .trade-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:clamp(8px,.9vw,14px)!important}
  #tradesView .trade-card{min-width:0!important;max-width:100%!important;overflow:hidden}
  #tradesView .trade-card *{min-width:0}
  #tradesView .trade-card b,#tradesView .trade-card strong,#tradesView .trade-card span,#tradesView .trade-card small{overflow-wrap:anywhere}

  .summary-primary-grid,.summary-secondary-grid,.performance-summary,#performanceView .performance-metrics{min-width:0}
  .summary-primary-card,.summary-secondary-card{min-width:0;padding-inline:clamp(7px,.8vw,12px)}
  .summary-primary-card b{font-size:clamp(14px,1.45vw,21px)}
}

/* Compact laptop widths: keep the desktop identity, but remove hard minimums
   that used to push cards outside the visible page. */
@media (min-width:761px) and (max-width:1180px){
  .platform-top{grid-template-columns:clamp(160px,18vw,220px) minmax(0,1fr)!important}
  .market-status-header{grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr) minmax(0,.7fr) minmax(0,1.55fr)!important}
  #dashboardView .kpi{grid-column:span 4!important}
  #dashboardView .top-kpi{min-height:clamp(92px,10vw,118px)!important}
  #dashboardView .summary-primary-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  #dashboardView .summary-primary-card{gap:clamp(5px,.65vw,10px)}
  #dashboardView .summary-primary-icon{flex-basis:clamp(28px,3vw,40px);width:clamp(28px,3vw,40px);height:clamp(28px,3vw,40px)}
}

/* Very narrow landscape tablets: same page style, two complete trade cards
   only when they genuinely fit; otherwise one complete card, never clipping. */
@media (min-width:761px) and (max-width:920px){
  .platform-top{grid-template-columns:150px minmax(0,1fr)!important}
  .market-status-header{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .market-status-header .market-weekend-block,
  .market-status-header .market-holiday-block{grid-row:auto!important;grid-column:auto!important}
  #tradesView .trades-layout{grid-template-columns:1fr}
  #tradesView .trade-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #dashboardView .summary-primary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (min-width:761px) and (max-width:820px){
  #tradesView .trade-grid{grid-template-columns:1fr!important}
}

/* =========================================================
   V4.20.4 — Three compact full-detail trade cards
   Scope: open positions view only. Keeps the approved side stack in place.
   No scale/transform/zoom and no JavaScript changes.
   ========================================================= */
@media (min-width: 1050px){
  #tradesView .trades-layout{
    grid-template-columns:minmax(0,1fr) clamp(205px,18vw,245px)!important;
    gap:8px!important;
    align-items:start!important;
  }
  #tradesView .trade-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
    align-items:start!important;
  }
  #tradesView .trades-side-stack{
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
    min-width:0!important;
    position:sticky;
    top:8px;
  }
  #tradesView .compact-distribution-card,
  #tradesView .session-movers-card{
    margin:0!important;
    min-width:0!important;
    padding:8px!important;
  }

  #tradesView .premium-trade-card{
    min-width:0!important;
    width:100%!important;
    max-width:none!important;
    padding:6px!important;
    border-radius:10px!important;
    overflow:hidden!important;
  }
  #tradesView .premium-trade-card *{min-width:0!important;box-sizing:border-box}

  /* Header remains in the same order, but all zones become fluid. */
  #tradesView .premium-trade-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
    gap:4px!important;
    min-height:36px!important;
    padding:0 1px 3px!important;
    align-items:center!important;
  }
  #tradesView .identity-reinforcement-group{
    gap:4px!important;
    min-width:0!important;
  }
  #tradesView .identity-reinforcement-group .trade-identity{min-width:0!important}
  #tradesView .trade-identity{gap:4px!important;overflow:hidden!important}
  #tradesView .trade-identity .ticker-icon{
    width:29px!important;height:29px!important;flex:0 0 29px!important;
    font-size:10px!important;border-radius:8px!important;
  }
  #tradesView .trade-identity b{font-size:12px!important;line-height:1.05!important;white-space:nowrap!important}
  #tradesView .trade-identity span{font-size:7px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  #tradesView .reinforcement-slot{
    display:flex!important;visibility:visible!important;
    width:auto!important;min-width:0!important;flex:0 1 auto!important;
  }
  #tradesView .reinforcement-slot:empty{display:none!important}
  #tradesView .reinforcement-toggle{
    width:auto!important;min-width:0!important;max-width:78px!important;
    min-height:20px!important;padding:2px 4px!important;
    font-size:7px!important;border-radius:6px!important;
  }
  #tradesView .risk-area{width:auto!important;min-width:0!important;gap:2px!important}
  #tradesView .risk-rating-row{
    width:auto!important;grid-template-columns:auto 22px!important;gap:2px!important;
  }
  #tradesView .risk-area .risk-badge{
    width:auto!important;min-width:32px!important;padding:3px 3px!important;font-size:7px!important;
  }
  #tradesView .risk-towers{width:22px!important;min-width:22px!important;height:15px!important;gap:1.5px!important}
  #tradesView .risk-towers i{width:3px!important}
  #tradesView .risk-towers i:nth-child(1){height:4px!important}
  #tradesView .risk-towers i:nth-child(2){height:7px!important}
  #tradesView .risk-towers i:nth-child(3){height:10px!important}
  #tradesView .risk-towers i:nth-child(4){height:13px!important}
  #tradesView .allocation-hero{
    width:58px!important;min-width:58px!important;padding-left:18px!important;text-align:right!important;
  }
  #tradesView .allocation-hero span{font-size:6px!important}
  #tradesView .allocation-hero strong{font-size:14px!important;margin-top:1px!important}
  #tradesView .allocation-ring{width:17px!important;height:17px!important;left:0!important;top:1px!important}
  #tradesView .allocation-ring:after{inset:4px!important}

  /* Cost + market/chart row: same content, compressed into the card. */
  #tradesView .premium-money-row{
    grid-template-columns:minmax(76px,.72fr) minmax(0,1.65fr)!important;
    gap:3px!important;padding:3px!important;margin-top:1px!important;
  }
  #tradesView .cost{
    grid-template-columns:20px minmax(0,1fr)!important;gap:3px!important;padding:2px!important;
  }
  #tradesView .cost .money-icon{width:19px!important;height:19px!important;font-size:11px!important}
  #tradesView .premium-money-box small{font-size:6.4px!important;line-height:1.05!important}
  #tradesView .premium-money-box b{font-size:11px!important;line-height:1.05!important;white-space:nowrap!important}
  #tradesView .premium-money-box em{font-size:7px!important;line-height:1.05!important;white-space:nowrap!important}
  #tradesView .market-with-trend{
    grid-template-columns:minmax(66px,.75fr) minmax(0,1.35fr)!important;
    gap:3px!important;overflow:hidden!important;
  }
  #tradesView .market-value-mini{
    grid-template-columns:20px minmax(0,1fr)!important;gap:3px!important;padding:1px!important;
  }
  #tradesView .market-value-mini .money-icon{width:19px!important;height:19px!important;font-size:10px!important}
  #tradesView .market-value-mini b{font-size:10.5px!important}
  #tradesView .market-value-mini em{font-size:6.7px!important}
  #tradesView .trade-trend-mini{padding-inline:2px!important}
  #tradesView .trade-trend-head{min-height:16px!important}
  #tradesView .trade-trend-head b{min-width:0!important;font-size:7.5px!important;padding:2px 3px!important}
  #tradesView .trade-price-chart{height:48px!important}
  #tradesView .trade-chart-levels{gap:3px!important;min-height:10px!important;margin-top:0!important}
  #tradesView .trade-chart-levels span{font-size:5.8px!important;white-space:nowrap!important}

  /* Keep every details row in its original place, only tighten spacing. */
  #tradesView .premium-stats-row,
  #tradesView .premium-result-row{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:0!important;margin-top:3px!important;padding:3px 0!important;
  }
  #tradesView .premium-stats-row>div,
  #tradesView .premium-result-row>div{padding-inline:2px!important}
  #tradesView .premium-stats-row span,
  #tradesView .premium-result-row span{font-size:6.2px!important;line-height:1.05!important;white-space:normal!important}
  #tradesView .premium-stats-row b{font-size:9px!important;line-height:1.08!important;white-space:nowrap!important}
  #tradesView .premium-result-row b,
  #tradesView .premium-result-row strong{font-size:9.3px!important;line-height:1.08!important;white-space:nowrap!important}
  #tradesView .unrealized-block strong,
  #tradesView .breakeven-block strong{font-size:10px!important}
  #tradesView .unrealized-block small,
  #tradesView .target-profit-sar{font-size:6.5px!important;margin-top:1px!important}
  #tradesView .breakeven-track{height:3px!important;margin-top:4px!important}
  #tradesView .reinforcement-panel{margin-top:3px!important;padding:4px!important}

  /* Side cards stay on the left and become compact enough to avoid page scrolling. */
  #tradesView .trade-bubbles{gap:5px!important;padding:3px 0!important}
  #tradesView .trade-bubble{transform:none!important}
  #tradesView .session-movers-list{gap:5px!important}
  #tradesView .session-mover-card{padding:6px!important;min-height:0!important}
}

/* On compact laptops, still keep three cards; reduce side column and gaps a little more. */
@media (min-width:1050px) and (max-width:1280px){
  #tradesView .trades-layout{grid-template-columns:minmax(0,1fr) 190px!important;gap:6px!important}
  #tradesView .trade-grid{gap:5px!important}
  #tradesView .premium-trade-card{padding:5px!important}
  #tradesView .trade-identity .ticker-icon{width:26px!important;height:26px!important;flex-basis:26px!important}
  #tradesView .trade-identity b{font-size:10.5px!important}
  #tradesView .allocation-hero{width:52px!important;min-width:52px!important}
  #tradesView .allocation-hero strong{font-size:12px!important}
  #tradesView .trade-price-chart{height:42px!important}
}


/* =========================================================
   V4.20.6 — Trade card readability polish
   Scope: three compact trade cards only.
   Keeps card size/layout; improves inner readability and alignment.
   ========================================================= */
@media (min-width:1050px){
  #tradesView .premium-trade-card{padding:6px!important;border-radius:10px!important}
  #tradesView .premium-trade-head{
    grid-template-columns:minmax(0,1fr) 84px 112px!important;
    gap:6px!important;
    min-height:44px!important;
    padding:1px 2px 4px!important;
    align-items:center!important;
  }
  #tradesView .identity-reinforcement-group{gap:6px!important;min-width:0!important;align-items:center!important}
  #tradesView .trade-identity{gap:6px!important;overflow:hidden!important}
  #tradesView .trade-identity .ticker-icon{
    width:36px!important;height:36px!important;flex:0 0 36px!important;
    font-size:11px!important;border-radius:10px!important;line-height:1!important;
  }
  #tradesView .trade-name-copy{
    display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:flex-start!important;
    min-width:0!important;gap:2px!important;
  }
  #tradesView .trade-name-line{display:flex!important;align-items:center!important;gap:8px!important;min-height:0!important}
  #tradesView .trade-name-line h3{display:none!important}
  #tradesView .trade-open-label,
  #tradesView .trade-identity span{
    max-width:none!important;
    margin-top:0!important;
    font-size:9px!important;
    font-weight:900!important;
    color:color-mix(in srgb,var(--text) 80%,var(--muted))!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #tradesView .open-trade-age{
    flex:0 0 34px!important;width:34px!important;height:30px!important;
    font-size:14px!important;font-weight:1000!important;margin-inline-start:4px!important;
  }

  #tradesView .reinforcement-slot{
    width:84px!important;min-width:84px!important;flex:0 0 84px!important;justify-content:center!important;
  }
  #tradesView .reinforcement-slot:empty{display:flex!important;visibility:hidden!important}
  #tradesView .reinforcement-toggle{
    width:84px!important;max-width:84px!important;min-width:84px!important;
    min-height:23px!important;padding:4px 6px!important;font-size:8px!important;font-weight:950!important;
    border-radius:7px!important;background:linear-gradient(145deg,rgba(56,154,229,.18),rgba(79,94,220,.09))!important;
    color:#bce8ff!important;
  }
  #tradesView .reinforcement-icon{font-size:9px!important}
  #tradesView .reinforcement-chevron{font-size:8px!important}

  #tradesView .risk-area{width:84px!important;min-width:84px!important;justify-content:center!important}
  #tradesView .risk-rating-row{grid-template-columns:44px 30px!important;gap:4px!important;width:auto!important}
  #tradesView .risk-area .risk-badge{min-width:44px!important;width:44px!important;padding:4px 4px!important;font-size:8px!important}
  #tradesView .risk-towers{width:30px!important;min-width:30px!important;height:18px!important;gap:2px!important}
  #tradesView .risk-towers i{width:4px!important}
  #tradesView .risk-towers i:nth-child(1){height:5px!important}
  #tradesView .risk-towers i:nth-child(2){height:8px!important}
  #tradesView .risk-towers i:nth-child(3){height:12px!important}
  #tradesView .risk-towers i:nth-child(4){height:16px!important}

  #tradesView .allocation-hero{
    width:112px!important;min-width:112px!important;padding:1px 0!important;
    display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;
    align-items:center!important;column-gap:6px!important;row-gap:2px!important;text-align:left!important;
  }
  #tradesView .allocation-hero span{
    grid-column:1;grid-row:1 / span 2;
    font-size:7.5px!important;line-height:1.15!important;white-space:normal!important;text-align:left!important;
    padding-inline-start:6px!important;
  }
  #tradesView .allocation-hero strong{
    grid-column:2;grid-row:1;font-size:16px!important;line-height:1!important;margin-top:0!important;
    text-align:right!important;white-space:nowrap!important;
  }
  #tradesView .allocation-ring{position:static!important;grid-column:2;grid-row:2;justify-self:end!important;width:18px!important;height:18px!important}
  #tradesView .allocation-ring:after{inset:4px!important}

  #tradesView .premium-money-row{
    grid-template-columns:minmax(92px,.70fr) minmax(0,1.65fr)!important;
    gap:4px!important;padding:4px!important;margin-top:1px!important;
  }
  #tradesView .cost{grid-template-columns:22px minmax(0,1fr)!important;gap:4px!important;padding:2px!important}
  #tradesView .cost .money-icon,
  #tradesView .market-value-mini .money-icon{width:21px!important;height:21px!important;font-size:12px!important}
  #tradesView .premium-money-box small{
    font-size:7.4px!important;line-height:1.14!important;font-weight:850!important;
    color:color-mix(in srgb,var(--text) 72%,var(--muted))!important;
  }
  #tradesView .premium-money-box b{font-size:11.8px!important;line-height:1.06!important;font-weight:950!important}
  #tradesView .premium-money-box em,
  #tradesView .unrealized-block small,
  #tradesView .target-profit-sar{
    font-size:8px!important;line-height:1.12!important;font-weight:850!important;
    color:color-mix(in srgb,var(--text) 80%,var(--muted))!important;
  }
  #tradesView .market-with-trend{grid-template-columns:minmax(74px,.78fr) minmax(0,1.35fr)!important;gap:4px!important}
  #tradesView .market-value-mini{grid-template-columns:22px minmax(0,1fr)!important;gap:4px!important;padding:1px!important}
  #tradesView .market-value-mini b{font-size:11.4px!important}
  #tradesView .market-value-mini em{font-size:8px!important}
  #tradesView .trade-trend-mini{padding-inline:3px!important}
  #tradesView .trade-trend-head{min-height:17px!important}
  #tradesView .trade-trend-head b{font-size:8.2px!important;padding:2px 4px!important}
  #tradesView .trade-price-chart{height:48px!important}
  #tradesView .trade-chart-levels{gap:4px!important;min-height:11px!important}
  #tradesView .trade-chart-levels span{font-size:6.3px!important}

  #tradesView .premium-stats-row,
  #tradesView .premium-result-row{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:0!important;margin-top:3px!important;padding:4px 1px!important;
  }
  #tradesView .premium-stats-row>div,
  #tradesView .premium-result-row>div{padding-inline:3px!important}
  #tradesView .premium-stats-row span,
  #tradesView .premium-result-row span{
    font-size:7px!important;line-height:1.12!important;font-weight:850!important;
    color:color-mix(in srgb,var(--text) 72%,var(--muted))!important;
  }
  #tradesView .premium-stats-row b{font-size:10.4px!important;line-height:1.08!important;font-weight:950!important}
  #tradesView .premium-result-row b,
  #tradesView .premium-result-row strong{font-size:10.4px!important;line-height:1.08!important;font-weight:950!important}
  #tradesView .unrealized-block strong,
  #tradesView .breakeven-block strong{font-size:11.2px!important}
  #tradesView .breakeven-track{height:4px!important;margin-top:5px!important}
  #tradesView .reinforcement-panel{margin-top:3px!important;padding:4px!important}

  /* Position-size color is based on allocation percent, not risk rating. */
  #tradesView .premium-trade-card.allocation-low{--position-color:var(--green)!important;border-color:rgba(32,215,120,.90)!important;box-shadow:0 0 0 1px rgba(32,215,120,.18),0 12px 28px rgba(0,0,0,.22),0 0 20px rgba(32,215,120,.16)!important}
  #tradesView .premium-trade-card.allocation-medium{--position-color:var(--orange)!important;border-color:rgba(255,163,26,.94)!important;box-shadow:0 0 0 1px rgba(255,163,26,.20),0 12px 28px rgba(0,0,0,.22),0 0 21px rgba(255,163,26,.18)!important}
  #tradesView .premium-trade-card.allocation-high{--position-color:var(--red)!important;border-color:rgba(255,84,95,.95)!important;box-shadow:0 0 0 1px rgba(255,84,95,.22),0 12px 28px rgba(0,0,0,.22),0 0 22px rgba(255,84,95,.20)!important}
}

@media (min-width:1050px) and (max-width:1280px){
  #tradesView .premium-trade-head{grid-template-columns:minmax(0,1fr) 78px 106px!important;gap:5px!important}
  #tradesView .reinforcement-slot,
  #tradesView .reinforcement-toggle{width:78px!important;min-width:78px!important;max-width:78px!important;flex-basis:78px!important}
  #tradesView .risk-area{width:78px!important;min-width:78px!important}
  #tradesView .allocation-hero{width:106px!important;min-width:106px!important}
  #tradesView .premium-money-row{grid-template-columns:minmax(88px,.70fr) minmax(0,1.60fr)!important}
  #tradesView .premium-money-box small{font-size:7.1px!important}
  #tradesView .premium-money-box b{font-size:11.2px!important}
  #tradesView .premium-stats-row span,
  #tradesView .premium-result-row span{font-size:6.8px!important}
  #tradesView .premium-stats-row b,
  #tradesView .premium-result-row b,
  #tradesView .premium-result-row strong{font-size:10px!important}
}

/* =========================================================
   V4.20.7 — Exact inner-card readability refinement
   Card outer dimensions/grid remain untouched.
   ========================================================= */
@media (min-width:1050px){
  /* Preserve the exact card box; use the available inner area better. */
  #tradesView .premium-trade-card{
    width:100%!important;max-width:none!important;
    padding:6px!important;
    overflow:hidden!important;
  }

  /* Header: bring both edge groups inward and keep a calm centre. */
  #tradesView .premium-trade-head{
    grid-template-columns:minmax(0,1fr) 76px 104px!important;
    column-gap:7px!important;
    padding:2px 7px 5px!important;
    min-height:46px!important;
  }
  #tradesView .identity-reinforcement-group{
    gap:9px!important;
    padding-inline-start:2px!important;
  }
  #tradesView .trade-identity{
    gap:9px!important;
    overflow:visible!important;
  }
  #tradesView .trade-identity .ticker-icon{
    width:38px!important;height:38px!important;flex:0 0 38px!important;
    font-size:12px!important;font-weight:1000!important;
    letter-spacing:.15px!important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 5px 13px rgba(15,48,120,.25)!important;
  }
  #tradesView .trade-name-copy{
    min-width:48px!important;
    gap:4px!important;
    overflow:visible!important;
  }
  #tradesView .trade-name-line{
    gap:14px!important;
    overflow:visible!important;
  }
  #tradesView .trade-identity span{
    font-size:10px!important;
    line-height:1.15!important;
    font-weight:950!important;
    max-width:72px!important;
  }
  #tradesView .open-trade-age{
    flex:0 0 36px!important;width:36px!important;height:31px!important;
    margin-inline-start:10px!important;
    font-size:15px!important;
    border-radius:9px!important;
  }

  /* Timeline button stays clear and centred without taking extra card width. */
  #tradesView .reinforcement-slot{
    width:82px!important;min-width:82px!important;flex-basis:82px!important;
    justify-content:center!important;
  }
  #tradesView .reinforcement-toggle{
    width:82px!important;min-width:82px!important;max-width:82px!important;
    min-height:25px!important;
    padding:4px 5px!important;
    font-size:8.8px!important;
    line-height:1!important;
    background:linear-gradient(145deg,rgba(57,165,238,.20),rgba(79,94,220,.12))!important;
    box-shadow:inset 0 1px rgba(255,255,255,.06),0 0 10px rgba(50,165,238,.10)!important;
  }

  /* Risk and allocation groups are pulled inward from both edges. */
  #tradesView .risk-area{
    width:76px!important;min-width:76px!important;
    justify-self:center!important;
    transform:translateX(-2px);
  }
  #tradesView .risk-rating-row{
    grid-template-columns:42px 29px!important;
    gap:5px!important;
  }
  #tradesView .risk-area .risk-badge{
    width:42px!important;min-width:42px!important;
    font-size:8.7px!important;
    padding:4px 3px!important;
  }
  #tradesView .risk-towers{width:29px!important;min-width:29px!important;height:19px!important}
  #tradesView .risk-towers i{width:4px!important}

  #tradesView .allocation-hero{
    width:104px!important;min-width:104px!important;
    justify-self:center!important;
    transform:translateX(5px);
    padding:2px 3px!important;
    grid-template-columns:minmax(0,1fr) 28px!important;
    column-gap:5px!important;
  }
  #tradesView .allocation-hero span{
    font-size:8.1px!important;
    line-height:1.18!important;
    font-weight:900!important;
    padding-inline-start:2px!important;
    text-align:center!important;
  }
  #tradesView .allocation-hero strong{
    font-size:17px!important;
    font-weight:1000!important;
  }
  #tradesView .allocation-ring{
    width:20px!important;height:20px!important;
    filter:none!important;
    box-shadow:none!important;
  }
  /* Remove the dark blot in the centre of the allocation ring. */
  #tradesView .allocation-ring:after{
    inset:5px!important;
    background:color-mix(in srgb,var(--panel) 76%,transparent)!important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)!important;
  }

  /* Money row: clearer labels, numbers and SAR while keeping the same row footprint. */
  #tradesView .premium-money-row{
    grid-template-columns:minmax(94px,.72fr) minmax(0,1.68fr)!important;
    gap:4px!important;
    padding:4px!important;
  }
  #tradesView .cost,
  #tradesView .market-value-mini{
    gap:4px!important;
    padding:2px!important;
  }
  #tradesView .premium-money-box small{
    font-size:8px!important;
    line-height:1.15!important;
    font-weight:900!important;
  }
  #tradesView .premium-money-box b,
  #tradesView .market-value-mini b{
    font-size:12.8px!important;
    line-height:1.08!important;
    font-weight:1000!important;
  }
  #tradesView .premium-money-box em,
  #tradesView .market-value-mini em{
    font-size:8.8px!important;
    line-height:1.12!important;
    font-weight:900!important;
  }
  #tradesView .premium-money-box em::after,
  #tradesView .market-value-mini em::after,
  #tradesView .unrealized-block small::after,
  #tradesView .target-profit-sar::after{
    content:" ر.س";
    font-size:.88em;
    font-weight:950;
  }

  /* Chart title and every label under the chart become readable. */
  #tradesView .trade-trend-head{min-height:19px!important}
  #tradesView .trade-trend-head b{
    font-size:9.2px!important;
    line-height:1.1!important;
    padding:3px 5px!important;
    font-weight:950!important;
  }
  #tradesView .trade-chart-levels{
    min-height:13px!important;
    gap:5px!important;
    padding-inline:2px!important;
  }
  #tradesView .trade-chart-levels span{
    font-size:7.2px!important;
    line-height:1.1!important;
    font-weight:900!important;
  }

  /* All lower details: larger type, balanced padding, same four cells and same card width. */
  #tradesView .premium-stats-row,
  #tradesView .premium-result-row{
    padding:5px 2px!important;
    gap:1px!important;
  }
  #tradesView .premium-stats-row>div,
  #tradesView .premium-result-row>div{
    padding-inline:4px!important;
  }
  #tradesView .premium-stats-row span,
  #tradesView .premium-result-row span{
    font-size:7.8px!important;
    line-height:1.15!important;
    font-weight:900!important;
  }
  #tradesView .premium-stats-row b{
    font-size:11.4px!important;
    line-height:1.1!important;
    font-weight:1000!important;
  }
  #tradesView .premium-result-row b,
  #tradesView .premium-result-row strong{
    font-size:11.3px!important;
    line-height:1.1!important;
    font-weight:1000!important;
  }
  #tradesView .unrealized-block strong,
  #tradesView .breakeven-block strong{
    font-size:12.2px!important;
  }
  #tradesView .unrealized-block small,
  #tradesView .target-profit-sar{
    font-size:7.7px!important;
    line-height:1.12!important;
    font-weight:900!important;
  }
  #tradesView .target-title{font-size:7.8px!important}
  #tradesView .breakeven-track{height:4px!important;margin-top:5px!important}
}

@media (min-width:1050px) and (max-width:1280px){
  #tradesView .premium-trade-head{
    grid-template-columns:minmax(0,1fr) 72px 98px!important;
    padding-inline:5px!important;
  }
  #tradesView .reinforcement-slot,
  #tradesView .reinforcement-toggle{
    width:76px!important;min-width:76px!important;max-width:76px!important;flex-basis:76px!important;
  }
  #tradesView .risk-area{width:72px!important;min-width:72px!important}
  #tradesView .allocation-hero{width:98px!important;min-width:98px!important;transform:translateX(3px)}
  #tradesView .premium-money-box small{font-size:7.7px!important}
  #tradesView .premium-money-box b,#tradesView .market-value-mini b{font-size:12.1px!important}
  #tradesView .premium-stats-row span,#tradesView .premium-result-row span{font-size:7.5px!important}
  #tradesView .premium-stats-row b,#tradesView .premium-result-row b,#tradesView .premium-result-row strong{font-size:10.8px!important}
  #tradesView .trade-chart-levels span{font-size:6.9px!important}
}