/* TAIF V5 — Price Screen Mobile Final Consolidated Layer
   Operational cleanup round 02.
   Preserves the exact cascade order of prior mobile price-screen patches 35–45 in one file.
   Scope: price screen only in mobile mode. */

/* --- consolidated from styles/35-price-screen-mobile-one-row.css --- */
/* TAIF V5 — Mobile Price Screen One Row V1
   Base: TAIF-V5-CLOUDFLARE-MOBILE-TOPBAR-FOUR-SECTIONS-V1.zip
   Scope: شاشة الأسعار فقط في وضع الموبايل. */

@media (max-width: 860px){
  body.taif-mobile-mode .panel[data-view="price-screen"]{
    overflow:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:4px 2px 6px !important;
    gap:4px !important;
    overflow:hidden !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__board-head{
    display:none !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__board-body,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__list{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    justify-items:stretch !important;
    align-items:stretch !important;
    gap:4px !important;
    padding:0 !important;
    margin:0 !important;
    overflow-x:hidden !important;
    overflow-y:visible !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row{
    display:grid !important;
    /* desktop order without pair column */
    grid-template-columns:
      minmax(34px,.56fr)
      minmax(68px,1.42fr)
      minmax(41px,.66fr)
      minmax(24px,.30fr)
      minmax(41px,.66fr)
      minmax(41px,.66fr)
      minmax(24px,.30fr)
      minmax(41px,.66fr) !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:40px !important;
    gap:2px !important;
    margin:0 !important;
    padding:2px !important;
    border-radius:10px !important;
    border:1px solid rgba(148,163,184,.18) !important;
    background:#fff !important;
    box-shadow:0 2px 8px rgba(15,23,42,.04) !important;
    overflow:hidden !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row--usd{
    background:linear-gradient(180deg,#f7fbff 0%,#fff 100%) !important;
    border-color:rgba(37,99,235,.16) !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row > *{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    padding:0 2px !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    line-height:1 !important;
    border-radius:7px !important;
    box-sizing:border-box !important;
  }

  /* kill the 2-row mobile layout from earlier files */
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__code{grid-column:1 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name{grid-column:2 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--buy{grid-column:3 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__flag{grid-column:4 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--sell{grid-column:5 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--dollar-buy{grid-column:6 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__usd-flag{grid-column:7 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--dollar-sell{grid-column:8 !important;}

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__pair-col,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__pair-badge{
    display:none !important;
    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    overflow:hidden !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row > *::before{
    display:none !important;
    content:none !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__code{
    font-size:10px !important;
    font-weight:900 !important;
    letter-spacing:0 !important;
    background:linear-gradient(180deg,#f8fafc,#eef2f7) !important;
    border:1px solid rgba(15,23,42,.10) !important;
    color:#1f2937 !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name{
    align-items:center !important;
    justify-content:flex-end !important;
    padding-inline:4px !important;
    background:#fff !important;
    border:1px solid rgba(148,163,184,.16) !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name-main{
    width:100% !important;
    max-width:100% !important;
    font-size:10.4px !important;
    font-weight:800 !important;
    line-height:1 !important;
    color:#0f172a !important;
    text-align:right !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num{
    font-size:10px !important;
    font-weight:900 !important;
    font-variant-numeric:tabular-nums !important;
    padding:0 2px !important;
    border-width:1px !important;
    border-style:solid !important;
    text-overflow:ellipsis !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--buy,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--dollar-buy{
    border-color:#17994a !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14) !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--sell,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--dollar-sell{
    border-color:#b91820 !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12) !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__flag,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__usd-flag{
    padding:0 !important;
    border:1px solid rgba(148,163,184,.16) !important;
    background:#fff !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__flag-image,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__usd-flag .price-screen__flag-image{
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    min-height:18px !important;
  }
}

@media (max-width: 430px){
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen{
    padding:3px 1px 6px !important;
    gap:3px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__board-body,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__list{
    gap:3px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row{
    grid-template-columns:
      minmax(31px,.54fr)
      minmax(58px,1.34fr)
      minmax(37px,.62fr)
      minmax(22px,.28fr)
      minmax(37px,.62fr)
      minmax(37px,.62fr)
      minmax(22px,.28fr)
      minmax(37px,.62fr) !important;
    min-height:37px !important;
    padding:2px !important;
    gap:2px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row > *{
    height:31px !important;
    min-height:31px !important;
    max-height:31px !important;
    border-radius:6px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__code,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num{
    font-size:9.2px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name-main{
    font-size:9.6px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__flag-image,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__usd-flag .price-screen__flag-image{
    width:17px !important;
    height:17px !important;
    min-width:17px !important;
    min-height:17px !important;
  }
}

/* --- consolidated from styles/36-price-screen-mobile-one-row-fullwidth.css --- */
/* TAIF V5 — Mobile Price Screen One Row Full Width V2
   Patch over ONE-ROW-V1: use full available width on mobile price rows. */

@media (max-width: 860px){
  body.taif-mobile-mode .panel[data-view="price-screen"]{
    overflow:hidden !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:2px 0 6px !important;
    gap:3px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  /* Bleed the table softly into the panel edges so no large unused left space remains. */
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__board-body,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__list{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    justify-items:stretch !important;
    align-items:stretch !important;
    width:calc(100% + 8px) !important;
    max-width:calc(100% + 8px) !important;
    min-width:0 !important;
    margin-inline:-4px !important;
    padding:0 2px !important;
    gap:3px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row{
    display:grid !important;
    grid-template-columns:
      minmax(36px,.56fr)
      minmax(74px,1.50fr)
      minmax(44px,.72fr)
      minmax(25px,.34fr)
      minmax(44px,.72fr)
      minmax(44px,.72fr)
      minmax(25px,.34fr)
      minmax(44px,.72fr) !important;
    width:100% !important;
    inline-size:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    justify-self:stretch !important;
    align-self:stretch !important;
    min-height:40px !important;
    padding:2px !important;
    gap:2px !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row > *{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name{
    padding-inline:4px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name-main{
    width:100% !important;
    max-width:100% !important;
    font-size:10.5px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__code,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num{
    font-size:10.2px !important;
  }
}

@media (max-width: 430px){
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen{
    padding:1px 0 6px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__board-body,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__list{
    width:calc(100% + 10px) !important;
    max-width:calc(100% + 10px) !important;
    margin-inline:-5px !important;
    padding:0 1px !important;
    gap:2px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row{
    grid-template-columns:
      minmax(34px,.56fr)
      minmax(68px,1.45fr)
      minmax(41px,.70fr)
      minmax(23px,.32fr)
      minmax(41px,.70fr)
      minmax(41px,.70fr)
      minmax(23px,.32fr)
      minmax(41px,.70fr) !important;
    min-height:37px !important;
    padding:2px 1px !important;
    gap:2px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row > *{
    height:31px !important;
    min-height:31px !important;
    max-height:31px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name-main{
    font-size:9.7px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__code,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num{
    font-size:9.4px !important;
  }
}

/* --- consolidated from styles/37-price-screen-mobile-full-bleed.css --- */
/* TAIF V5 — Price Screen Mobile Full Bleed V3
   Fixes the unused left-side gap by removing the hidden sidebar column
   from the mobile shell while the price screen is active.
   Scope: mobile price screen layout. */

@media (max-width: 860px){
  /* The old mobile shell still kept the hidden sidebar column.
     This is what created the large unused left side in the screenshot. */
  body.taif-mobile-mode .shell{
    --side:0px !important;
    grid-template-columns:minmax(0, 1fr) 0px !important;
  }

  body.taif-mobile-mode .content{
    grid-column:1 / -1 !important;
    width:100vw !important;
    max-width:100vw !important;
    min-width:0 !important;
    padding-inline:0 !important;
    overflow:hidden !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"]{
    width:100vw !important;
    max-width:100vw !important;
    min-width:0 !important;
    margin:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    overflow:hidden !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen{
    width:100vw !important;
    max-width:100vw !important;
    min-width:0 !important;
    margin:0 !important;
    padding:2px 0 6px !important;
    gap:2px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__board-head{
    display:none !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__board-body,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__list{
    width:100vw !important;
    max-width:100vw !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 1px !important;
    gap:2px !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    justify-items:stretch !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__pair-col,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__pair-badge{
    display:none !important;
    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    overflow:hidden !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row{
    display:grid !important;
    grid-template-columns:
      minmax(36px, .52fr)
      minmax(90px, 1.65fr)
      minmax(50px, .76fr)
      minmax(27px, .32fr)
      minmax(50px, .76fr)
      minmax(50px, .76fr)
      minmax(27px, .32fr)
      minmax(50px, .76fr) !important;
    width:100% !important;
    inline-size:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    justify-self:stretch !important;
    min-height:40px !important;
    height:auto !important;
    margin:0 !important;
    padding:2px 1px !important;
    gap:2px !important;
    border-radius:10px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row > *{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    margin:0 !important;
    padding:0 2px !important;
    border-radius:7px !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    white-space:nowrap !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row > *::before{
    display:none !important;
    content:none !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__code{grid-column:1 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name{grid-column:2 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--buy{grid-column:3 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__flag{grid-column:4 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--sell{grid-column:5 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--dollar-buy{grid-column:6 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__usd-flag{grid-column:7 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--dollar-sell{grid-column:8 !important;}

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name{
    justify-content:flex-end !important;
    padding-inline:4px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name-main{
    width:100% !important;
    max-width:100% !important;
    font-size:10.4px !important;
    line-height:1 !important;
    text-align:right !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__code,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num{
    font-size:10.1px !important;
    font-weight:900 !important;
    line-height:1 !important;
    text-overflow:ellipsis !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__flag-image,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__usd-flag .price-screen__flag-image{
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    min-height:18px !important;
  }
}

@media (max-width: 430px){
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen{
    padding:1px 0 6px !important;
    gap:2px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__board-body,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__list{
    padding:0 !important;
    gap:2px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row{
    grid-template-columns:
      minmax(35px, .54fr)
      minmax(84px, 1.60fr)
      minmax(47px, .76fr)
      minmax(25px, .32fr)
      minmax(47px, .76fr)
      minmax(47px, .76fr)
      minmax(25px, .32fr)
      minmax(47px, .76fr) !important;
    min-height:38px !important;
    gap:2px !important;
    padding:2px 1px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row > *{
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
    border-radius:6px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name-main{
    font-size:9.7px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__code,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num{
    font-size:9.4px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__flag-image,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__usd-flag .price-screen__flag-image{
    width:17px !important;
    height:17px !important;
    min-width:17px !important;
    min-height:17px !important;
  }
}

/* --- consolidated from styles/38-price-screen-mobile-flat-name-flag.css --- */
/* TAIF V5 — Price Screen Mobile Flat Name + Flags V4
   Removes the capsule/card look behind the currency name and flag cells
   while keeping the one-row mobile layout. */

@media (max-width: 860px){
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__flag,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__usd-flag{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    outline:none !important;
    border-radius:0 !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name{
    padding-inline:2px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__flag,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__usd-flag{
    padding:0 !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__flag-image,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__usd-flag .price-screen__flag-image{
    filter:none !important;
    box-shadow:none !important;
    border:none !important;
    background:transparent !important;
    border-radius:0 !important;
  }
}

@media (max-width: 430px){
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name{
    padding-inline:1px !important;
  }
}

/* --- consolidated from styles/39-price-screen-mobile-force-single-row.css --- */
/* TAIF V5 — Price Screen Mobile Force Single Row V5
   Forces every currency row to stay in one single horizontal line,
   while keeping name and flags flat (without card backgrounds). */

@media (max-width: 860px){
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row{
    display:grid !important;
    grid-auto-flow:column !important;
    grid-auto-rows:unset !important;
    align-items:center !important;
    grid-template-areas:none !important;
    grid-template-columns:
      minmax(36px,.54fr)
      minmax(88px,1.62fr)
      minmax(48px,.74fr)
      minmax(24px,.30fr)
      minmax(48px,.74fr)
      minmax(48px,.74fr)
      minmax(24px,.30fr)
      minmax(48px,.74fr) !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:40px !important;
    height:auto !important;
    padding:2px 1px !important;
    gap:2px !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row > *{
    grid-row:1 !important;
    align-self:center !important;
    justify-self:stretch !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
    margin:0 !important;
    padding:0 2px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__code{grid-column:1 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name{grid-column:2 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--buy{grid-column:3 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__flag{grid-column:4 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--sell{grid-column:5 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--dollar-buy{grid-column:6 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__usd-flag{grid-column:7 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--dollar-sell{grid-column:8 !important;}

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__flag,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__usd-flag{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    border-radius:0 !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-end !important;
    padding-inline:2px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name-main{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    font-size:10px !important;
    line-height:1 !important;
    text-align:right !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__flag,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__usd-flag{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__flag-image,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__usd-flag .price-screen__flag-image{
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    min-height:18px !important;
    max-width:18px !important;
    max-height:18px !important;
    display:block !important;
    border:none !important;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
  }
}

@media (max-width: 430px){
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row{
    grid-template-columns:
      minmax(35px,.54fr)
      minmax(82px,1.58fr)
      minmax(46px,.74fr)
      minmax(23px,.30fr)
      minmax(46px,.74fr)
      minmax(46px,.74fr)
      minmax(23px,.30fr)
      minmax(46px,.74fr) !important;
    min-height:38px !important;
    gap:2px !important;
    padding:2px 1px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row > *{
    height:31px !important;
    min-height:31px !important;
    max-height:31px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name-main{
    font-size:9.6px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__code,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num{
    font-size:9.4px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__flag-image,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__usd-flag .price-screen__flag-image{
    width:17px !important;
    height:17px !important;
    min-width:17px !important;
    min-height:17px !important;
    max-width:17px !important;
    max-height:17px !important;
  }
}

/* --- consolidated from styles/40-price-screen-mobile-wider-capsules.css --- */
/* TAIF V5 — Price Screen Mobile Wider Capsules V6
   Goal: use the free space near the currency name by widening the red/green
   number capsules horizontally, without allowing overflow outside the phone width. */

@media (max-width: 860px){
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row{
    /* Rebalance width: slightly smaller name/code/flags, wider number capsules */
    grid-template-columns:
      minmax(34px,.48fr)
      minmax(76px,1.18fr)
      minmax(54px,.84fr)
      minmax(21px,.24fr)
      minmax(54px,.84fr)
      minmax(54px,.84fr)
      minmax(21px,.24fr)
      minmax(54px,.84fr) !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name{
    padding-inline:1px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name-main{
    font-size:9.8px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num{
    padding:0 3px !important;
    font-size:10px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__flag-image,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__usd-flag .price-screen__flag-image{
    width:17px !important;
    height:17px !important;
    min-width:17px !important;
    min-height:17px !important;
    max-width:17px !important;
    max-height:17px !important;
  }
}

@media (max-width: 430px){
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row{
    /* This exact balance is tuned for narrow phones like the user's screenshot */
    grid-template-columns:
      minmax(33px,.46fr)
      minmax(68px,1.02fr)
      minmax(51px,.82fr)
      minmax(20px,.22fr)
      minmax(51px,.82fr)
      minmax(51px,.82fr)
      minmax(20px,.22fr)
      minmax(51px,.82fr) !important;
    gap:2px !important;
    padding:2px 1px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row > *{
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__code,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num{
    font-size:9.5px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name-main{
    font-size:9.4px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__flag-image,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__usd-flag .price-screen__flag-image{
    width:16px !important;
    height:16px !important;
    min-width:16px !important;
    min-height:16px !important;
    max-width:16px !important;
    max-height:16px !important;
  }
}

/* --- consolidated from styles/41-price-screen-mobile-group-separator.css --- */
/* TAIF V5 — Price Screen Mobile Group Separator V7
   Adds a light visual separation between the two 3-column numeric groups,
   by inserting a slim spacer track between them. This makes the middle group
   feel slightly closer to the currency name, without causing overflow. */

@media (max-width: 860px){
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row{
    grid-template-columns:
      minmax(33px,.44fr)   /* code */
      minmax(66px,.92fr)   /* name */
      minmax(52px,.82fr)   /* group A col 1 */
      minmax(20px,.22fr)   /* group A flag */
      minmax(52px,.82fr)   /* group A col 3 */
      minmax(8px,.10fr)    /* separator gap */
      minmax(52px,.82fr)   /* group B col 1 */
      minmax(20px,.22fr)   /* group B flag */
      minmax(52px,.82fr)   /* group B col 3 */ !important;
    gap:2px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__code{grid-column:1 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name{grid-column:2 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--buy{grid-column:3 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__flag{grid-column:4 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--sell{grid-column:5 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--dollar-buy{grid-column:7 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__usd-flag{grid-column:8 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--dollar-sell{grid-column:9 !important;}

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name{
    padding-inline:1px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name-main{
    font-size:9.7px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num{
    padding:0 3px !important;
    font-size:9.8px !important;
  }
}

@media (max-width: 430px){
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row{
    grid-template-columns:
      minmax(32px,.42fr)   /* code */
      minmax(61px,.84fr)   /* name */
      minmax(50px,.80fr)   /* group A col 1 */
      minmax(19px,.20fr)   /* group A flag */
      minmax(50px,.80fr)   /* group A col 3 */
      minmax(7px,.09fr)    /* separator gap */
      minmax(50px,.80fr)   /* group B col 1 */
      minmax(19px,.20fr)   /* group B flag */
      minmax(50px,.80fr)   /* group B col 3 */ !important;
    gap:2px !important;
    padding:2px 1px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row > *{
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name-main{
    font-size:9.2px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__code,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num{
    font-size:9.3px !important;
  }
}

/* --- consolidated from styles/42-price-screen-mobile-shorter-capsules-only.css --- */
/* TAIF V5 — Price Screen Mobile Shorter Capsules Only V11
   Base: V10
   Goal: make code + buy/sell capsules a little thinner again,
   while keeping the number font size unchanged and keeping row/card size unchanged. */

@media (max-width: 860px){
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__code,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num{
    height:26px !important;
    min-height:26px !important;
    max-height:26px !important;
    align-self:center !important;
    line-height:1 !important;
    /* font-size intentionally unchanged */
  }
}

@media (max-width: 430px){
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__code,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num{
    height:26px !important;
    min-height:26px !important;
    max-height:26px !important;
    align-self:center !important;
    line-height:1 !important;
  }
}

/* --- consolidated from styles/43-price-screen-mobile-card-gap.css --- */
/* TAIF V5 — Price Screen Mobile Card Gap V12
   Base: V11
   Goal: slightly increase the vertical spacing between currency cards
   in the mobile price screen, without changing row internals. */

@media (max-width: 860px){
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__board-body,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__list{
    gap:6px !important;
  }
}

@media (max-width: 430px){
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__board-body,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__list{
    gap:5px !important;
  }
}

/* --- consolidated from styles/44-price-screen-mobile-bigger-numbers.css --- */
/* TAIF V5 — Price Screen Mobile Bigger Numbers V14
   Base: V13
   Goal: make the numbers inside the green/red capsules a bit bigger again,
   without changing capsule size or any other element. */

@media (max-width: 860px){
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--buy,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--sell,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--dollar-buy,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--dollar-sell{
    font-size:11.1px !important;
    line-height:1 !important;
  }
}

@media (max-width: 430px){
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--buy,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--sell,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--dollar-buy,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--dollar-sell{
    font-size:10.6px !important;
    line-height:1 !important;
  }
}

/* --- consolidated from styles/45-price-screen-mobile-top-strip.css --- */
/* TAIF V5 — Price Screen Mobile Top Strip V18
   Very subtle refinement from V17:
   keep code/name section as-is,
   make counterpart section slightly smaller,
   and give that tiny extra width to the USD section. */

.price-screen__mobile-head{
  display:none;
}

@media (max-width: 860px){
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__mobile-head{
    display:grid !important;
    grid-template-columns:minmax(0,.99fr) minmax(0,1.49fr) minmax(0,1.45fr) !important;
    align-items:stretch !important;
    gap:1px !important;
    margin:0 0 4px !important;
    padding:0 !important;
    background:#cfd4dc !important;
    border:1px solid rgba(148,163,184,.38) !important;
    border-radius:8px !important;
    overflow:hidden !important;
    box-shadow:0 1px 0 rgba(255,255,255,.55) inset !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__mobile-head-cell{
    min-width:0 !important;
    min-height:34px !important;
    padding:6px 5px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    background:#e5e7eb !important;
    color:#475569 !important;
    font:800 9.6px/1.18 var(--taif-font-family) !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__mobile-head-cell--identity{
    font-size:9.4px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__mobile-head-cell--counterpart{
    font-size:9.25px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__mobile-head-cell--usd{
    font-size:9.4px !important;
  }
}

@media (max-width: 430px){
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__mobile-head{
    grid-template-columns:minmax(0,.95fr) minmax(0,1.42fr) minmax(0,1.41fr) !important;
    margin:0 0 4px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__mobile-head-cell{
    min-height:32px !important;
    padding:5px 4px !important;
    font-size:8.8px !important;
    line-height:1.15 !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__mobile-head-cell--identity{
    font-size:8.6px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__mobile-head-cell--counterpart{
    font-size:8.45px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__mobile-head-cell--usd{
    font-size:8.55px !important;
  }
}