/* Sahm Radar — tablet and phone layouts.
   ≥1100px  desktop (unchanged)
   768–1099 tablet: the side menu becomes an icon rail
   <768     phone/phablet: native-app shell — compact app bar, full-width tab bar, fixed action bar, single column,
            secondary data hidden, never any horizontal scroll */

html, body { overflow-x: clip; }
.m-head, .m-search-btn, .m-quick, .action-bar, .m-sheet { display: none; }

/* ---------- tablet: icon rail instead of the full side menu ---------- */
@media (min-width: 768px) {
  .bottom-nav { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .shell { grid-template-columns: 78px minmax(0, 1fr) !important; padding-bottom: 16px; }
  .side { display: flex; padding: 14px 10px; align-items: center; }
  .side .brand > span:not(.brand-mark), .side .nav .sec, .side .nav a > :not(.ico), .side .upsell, .side .ver, .side-toggle { display: none; }
  .side .nav { align-items: center; width: 100%; }
  .side .nav a { justify-content: center; padding: 8px; font-size: 0; gap: 0; width: 48px; height: 48px; }
  .side .brand { padding: 4px 0 10px; justify-content: center; }
  .quick { display: none; }
  .topbar .search { flex: 1; }
  .grid > .c3 { grid-column: span 6; }
  .grid > .c4, .grid > .c5, .grid > .c7, .grid > .c8 { grid-column: span 12; }
}

/* ---------- phone / phablet: app shell ---------- */
@media (max-width: 767px) {
  :root { --tab-h: 62px; --act-h: 68px; --safe-b: env(safe-area-inset-bottom, 0px); }
  body { -webkit-tap-highlight-color: transparent; }
  .shell { display: block; padding: 0 12px calc(var(--tab-h) + var(--safe-b) + 20px); }
  body.has-action .shell { padding-bottom: calc(var(--tab-h) + var(--act-h) + var(--safe-b) + 20px); }
  body.is-detail .shell { padding-bottom: calc(var(--act-h) + var(--safe-b) + 20px); }
  body.is-detail:not(.has-action) .shell { padding-bottom: calc(var(--safe-b) + 24px); }
  .side, .ticker, .quick, .topbar .pill, .sample-badge { display: none !important; }
  .content { gap: 14px; }

  /* app bar */
  .topbar {
    position: sticky; top: 0; z-index: 40; margin: 0 -12px; border-radius: 0 0 18px 18px; border-top: 0;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; gap: 6px; min-height: 60px;
  }
  .m-head { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
  .m-logo { display: flex; text-decoration: none; }
  .m-logo .brand-mark { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; }
  .m-title { font-size: 16px; font-weight: 800; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-back { width: 44px; height: 44px; flex: none; }
  .m-search-btn { display: grid; place-items: center; width: 44px; height: 44px; flex: none; }
  .m-search-btn svg { width: 20px; height: 20px; }
  #authSlot { display: flex; align-items: center; gap: 6px; }
  #authSlot .icon-btn, #authSlot .avatar { width: 44px; height: 44px; }
  #authSlot .btn { min-height: 40px; padding-inline: 12px; font-size: 13px; }
  .topbar .search { display: none; }
  body.m-search .topbar .search {
    display: flex; position: absolute; inset: calc(6px + env(safe-area-inset-top, 0px)) 8px auto 8px; z-index: 5;
    height: 48px; border-radius: 14px; background: var(--bg-2, #0e1830);
  }
  body.m-search .search-results { position: fixed; top: calc(64px + env(safe-area-inset-top, 0px)); left: 8px; right: 8px; max-height: 60vh; overflow: auto; }
  .bell-panel { position: fixed !important; top: calc(64px + env(safe-area-inset-top, 0px)) !important; left: 8px !important; right: 8px !important; width: auto !important; max-height: 70vh; }

  /* bottom tab bar: full width, fixed, clear of the home indicator */
  .bottom-nav {
    display: grid !important; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    height: calc(var(--tab-h) + var(--safe-b)); padding: 4px 4px var(--safe-b); border-radius: 20px 20px 0 0; border-bottom: 0; gap: 2px;
  }
  .bottom-nav a, .bottom-nav button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; min-width: 0;
    font: inherit; font-size: 11px; font-weight: 700; color: var(--fg-3); text-decoration: none; background: none; border: 0; cursor: pointer;
    border-radius: 14px; position: relative; transition: color .15s, background-color .15s;
  }
  .bottom-nav svg { width: 22px; height: 22px; }
  .bottom-nav a:active, .bottom-nav button:active { background: rgba(255, 255, 255, .06); }
  .bottom-nav [aria-current="page"] { color: var(--accent); }
  .bottom-nav [aria-current="page"]::before {
    content: ""; position: absolute; top: 5px; width: 42px; height: 28px; border-radius: 999px; background: rgba(45, 212, 191, .14); z-index: -1;
  }
  body.is-detail .bottom-nav { display: none !important; }

  /* fixed action bar with the page's main buttons */
  .action-bar:not([hidden]) {
    display: flex; gap: 10px; position: fixed; left: 0; right: 0; z-index: 36; bottom: calc(var(--tab-h) + var(--safe-b));
    padding: 10px 12px; background: rgba(9, 15, 30, .92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--glass-line);
  }
  body.is-detail .action-bar { bottom: 0; padding-bottom: calc(10px + var(--safe-b)); border-radius: 20px 20px 0 0; }
  .action-bar .btn { flex: 1; min-height: 48px; justify-content: center; font-size: 14px; border-radius: 14px; }
  .action-bar .btn svg { width: 18px; height: 18px; }
  .action-bar .ab-icon {
    flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; cursor: pointer;
    background: rgba(255, 255, 255, .05); border: 1px solid var(--glass-line); color: var(--fg-2);
  }
  .action-bar .ab-icon.on { color: #f5b942; border-color: rgba(245, 185, 66, .45); }
  .action-bar .ab-icon svg { width: 20px; height: 20px; }

  /* «منو»: every other section in a bottom sheet */
  .m-sheet:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 50; }
  .ms-back { position: absolute; inset: 0; background: rgba(3, 8, 20, .6); opacity: 0; transition: opacity .2s; }
  .ms-panel {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 86vh; overflow: auto; border-radius: 24px 24px 0 0;
    padding: 10px 14px calc(16px + var(--safe-b)); transform: translateY(100%); transition: transform .26s cubic-bezier(.2, .8, .2, 1);
    display: flex; flex-direction: column; gap: 14px; background: rgba(12, 19, 37, .97);
  }
  .m-sheet.open .ms-back { opacity: 1; }
  .m-sheet.open .ms-panel { transform: none; }
  .ms-grab { width: 42px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .18); margin: 0 auto 2px; }
  .ms-user { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid var(--glass-line); color: var(--fg); text-decoration: none; min-height: 56px; }
  .ms-user > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
  .ms-user small { color: var(--fg-3); font-size: 12px; }
  .ms-user .avatar { width: 40px; height: 40px; }
  .ms-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ms-grid a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 84px; padding: 10px 4px;
    border-radius: 16px; background: rgba(255, 255, 255, .035); border: 1px solid var(--glass-line); color: var(--fg-2);
    text-decoration: none; font-size: 12px; font-weight: 700; text-align: center; position: relative;
  }
  .ms-grid a svg { width: 22px; height: 22px; color: var(--accent); }
  .ms-grid a[aria-current="page"] { border-color: rgba(45, 212, 191, .5); color: var(--fg); }
  .ms-grid a:active { background: rgba(255, 255, 255, .08); }
  .ms-grid em { position: absolute; top: 6px; left: 6px; font-style: normal; font-size: 10px; color: #f5b942; }
  .modal-back { z-index: 60; }

  /* single column and comfortable touch sizes */
  .grid { display: flex; flex-direction: column; gap: 14px; }
  .grid > * { width: 100%; min-width: 0; }
  .page-head { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 4px; }
  .page-head h1 { font-size: 20px; }
  .page-head p { font-size: 12.5px; }
  .panel-h { flex-wrap: wrap; gap: 8px; }
  .panel-h h2 { font-size: 15px; }
  .btn, .seg button, .tabs button { min-height: 44px; }
  .btn-sm { min-height: 40px; }
  .input, select.input { min-height: 46px; font-size: 16px; }   /* 16px stops iOS from zooming into fields */
  .seg { flex-wrap: wrap; }
  .seg-x .seg-row { flex-wrap: wrap; overflow: visible; }
  .seg-x .seg-arr { display: none; }
  img, svg, canvas, video { max-width: 100%; }
  .row, .kv { flex-wrap: wrap; }
  * { overflow-wrap: anywhere; }
  .num, .chip, .btn, .sym, th { overflow-wrap: normal; }

  /* tables: no horizontal scroll — only the columns that matter, the rest is on the stock page */
  .tbl-wrap, .scr-scroll, .tbl-scroll { overflow-x: hidden !important; max-width: 100%; }
  .tbl-wrap table { width: 100%; table-layout: auto; min-width: 0 !important; }
  .tbl-wrap th, .tbl-wrap td { padding: 11px 6px; white-space: normal; font-size: 13px; }
  .tbl-wrap td.sym small { display: block; font-size: 11px; }
  .tbl-wrap table:not(.cmp) tr > :nth-child(n+4) { display: none; }
  .tbl-wrap .scr-tbl:not(.bk-tbl) tr > :nth-child(4) { display: table-cell; }
  .bk-cur tr > :nth-child(n) { display: none; }
  .bk-cur tr > :nth-child(1), .bk-cur tr > :nth-child(2), .bk-cur tr > :nth-child(6) { display: table-cell; }
  .bk-prev tr > :nth-child(n) { display: none; }
  .bk-prev tr > :nth-child(1), .bk-prev tr > :nth-child(2), .bk-prev tr > :nth-child(5) { display: table-cell; }
  .cmp th, .cmp td { padding: 9px 4px; font-size: 11.5px; }
  .tbl-wrap thead th { position: static !important; }

  /* dashboard: one large portfolio card, today's result, and four shortcuts */
  .m-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; order: -1; }
  .m-quick a { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--fg-2); text-decoration: none; min-height: 76px; justify-content: center; border-radius: 16px; }
  .m-quick a:active { background: rgba(255, 255, 255, .06); }
  .dstats { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .dstats > :first-child { grid-column: 1 / -1; min-height: 0; }
  .dstats > :nth-child(n+4) { display: none; }
  .dstat { min-height: 0 !important; padding: 14px; }

  /* stock page: the action bar carries star, event and watch list; the header keeps price and links */
  .sh-top { flex-direction: column; align-items: stretch; gap: 12px; }
  .sh-actions [data-fav], .sh-actions [data-addgroup], .sh-actions [data-alertfor] { display: none; }
  .sh-q { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

  /* less important on a phone: explanations, long legal text, decorative backgrounds */
  .how, .how-pf, .bk-how, .free-pick .muted, .foot p { display: none; }
  .foot { padding: 8px 0 0; font-size: 11px; }
  .bg-orbs, #fx { display: none; }

  /* dialogs become bottom sheets */
  .modal-back { place-items: end center; padding: 0; }
  .modal { width: 100%; max-height: 92vh; overflow: auto; border-radius: 24px 24px 0 0; padding-bottom: var(--safe-b); }
}

@media (max-width: 340px) {
  .m-title { font-size: 15px; }
  .ms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bottom-nav a, .bottom-nav button { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .ms-panel, .ms-back { transition: none; }
}

@media (max-width: 767px) {
  /* portfolio card: the lot history table fits the card */
  .pf-lots table { width: 100%; table-layout: fixed; }
  .pf-lots th, .pf-lots td { padding: 8px 4px; font-size: 12px; }
}

@media (max-width: 767px) {
  /* the app bar already names the page */
  .page-head h1 { display: none; }
  .page-head:not(:has(> :not(div:first-child))) > div:first-child > p { margin: 0; }
  /* screener: compact one-line filter buttons so the results start sooner */
  .scr-col .scr-chips { gap: 6px; }
  .scr-col .scr-chip { min-height: 44px; padding: 6px 10px; font-size: 12.5px; }
}

/* ===== round 2 ===== */
.m-only, .m-search-close { display: none; }
@media (max-width: 767px) {
  .m-hide { display: none !important; }
  /* an explanation box whose content is hidden leaves no empty frame */
  .panel:has(> .panel-b > .how:only-child), .panel:has(> .how:only-child) { display: none; }

  /* search: a real field with a close button; results below it; tapping outside closes it */
  body.m-search .topbar .search { padding-inline: 12px 6px; gap: 8px; align-items: center; }
  body.m-search .topbar .search input { flex: 1; min-width: 0; font-size: 16px; }
  body.m-search .m-search-close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 0; background: rgba(255, 255, 255, .06); color: var(--fg-2); flex: none; }
  .m-search-close svg { width: 18px; height: 18px; }
  .search-results a { min-height: 48px; }

  /* filters: tabs / toggles across the full row, equal widths */
  .seg { display: flex; flex-wrap: wrap; width: 100%; gap: 4px; align-self: stretch; }
  .seg > button { flex: 1 1 0; min-width: calc(25% - 4px); justify-content: center; text-align: center; white-space: nowrap; padding-inline: 8px; }
  .page-head > .seg, .page-head > div:not(:first-child), .panel-h > .seg, .panel-h > .seg-x, .panel-h > .row { width: 100%; flex-basis: 100%; }
  .page-head .row, .sym-search { width: 100%; }
  .sym-search > * { flex: 1 1 100%; min-width: 0; }
  .sym-search select, .sym-sec select, .scr-cat select { width: 100%; }

  /* account: the side card becomes a compact tab strip and never sticks over the form */
  .acct { display: flex; flex-direction: column; gap: 12px; }
  .acc-side { position: static !important; padding: 10px; flex-direction: column; }
  .acc-side .acc-av, .acc-side > b, .acc-side > small, .acc-side .acc-prog { display: none; }
  .acc-side nav { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .acc-side nav button { justify-content: center; min-height: 48px; font-size: 13px; background: rgba(255, 255, 255, .03); }
  #view [style*="sticky"], #view .acc-side, #view .scr-col { position: static !important; }

  /* lists: price above its change, so three narrow columns carry more */
  .tbl-wrap td.qc .num { display: block; margin-bottom: 4px; font-weight: 800; }
  .tbl-wrap td.qc .chip, .tbl-wrap td.qc .pc { font-size: 11px; }
  .scr-tbl:not(.bk-tbl) tr > * { display: none !important; }
  .scr-tbl:not(.bk-tbl) tr > .sym, .scr-tbl:not(.bk-tbl) tr > .th-sym, .scr-tbl:not(.bk-tbl) tr > .m-only, .scr-tbl:not(.bk-tbl) tr > [data-mk] { display: table-cell !important; }
  .scr-tbl [data-mk] { text-align: center; }
  .scr-tbl [data-mk] .th-sort { justify-content: center; width: 100%; }

  /* portfolio card: result first and large, then one quiet row of facts, then buy and sell side by side */
  .pf-card { padding: 14px; gap: 12px; display: flex !important; }
  .pf-nums { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0 !important; }
  .pf-nums .pf-k { background: none !important; border: 0 !important; padding: 4px 6px !important; display: flex; flex-direction: column; gap: 2px; }
  .pf-nums .pf-k small { font-size: 11px; color: var(--fg-3); }
  .pf-nums .pf-k b { font-size: 14px; }
  .pf-nums .pf-k .mini { font-size: 10.5px; }
  .pf-nums .pf-k:nth-child(4) {
    order: -1; grid-column: 1 / -1; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 8px;
    padding: 12px !important; border-radius: 14px; background: rgba(45, 212, 191, .07) !important;
  }
  .pf-nums .pf-k:nth-child(4) small { width: 100%; }
  .pf-nums .pf-k:nth-child(4) b { font-size: 24px; }
  .pf-nums .pf-k:nth-child(4) b.down ~ *, .pf-nums .pf-k:nth-child(4):has(b.down) { background: rgba(251, 113, 133, .07) !important; }
  .pf-nums .pf-k:nth-child(5) { display: none !important; }
  .pf-nums .pf-k:nth-child(-n+3) { border-inline-start: 1px solid var(--glass-line) !important; }
  .pf-nums .pf-k:nth-child(1) { border-inline-start: 0 !important; }
  .pf-why li { font-size: 12.5px; }
  .pf-card footer { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
  .pf-card footer .btn-add { justify-content: center; min-height: 48px; border-radius: 14px; font-size: 14px; border: 0; color: #04201d;
    background: linear-gradient(135deg, #2dd4bf, #3b82f6); }
  .pf-card footer .btn-add.sell { background: linear-gradient(135deg, #fcd34d, #f5b942); color: #3a2604; }
  .pf-card footer .btn-add svg { background: rgba(0, 0, 0, .14); color: inherit; }
}

/* ===== round 3: stat tiles and full-width calls to action (reference: the «تحلیل کامل رایگان» card) ===== */
@media (max-width: 767px) {
  .pf-card > * { align-self: stretch; }
  .pf-bar { width: auto; }
  .chip, .pc, .pill, .score-chip, .num { overflow-wrap: normal; white-space: nowrap; }

  /* stat tiles: equal boxes side by side, big centred number over a small label */
  .returns, .kv.boxed, .sh-q, .sig-card .sg-tiles, .sg-grid {
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important;
  }
  .sh-q, .kv.boxed.bk-stats2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .returns > *, .kv.boxed > div, .sh-q > div, .sg-t {
    display: flex !important; flex-direction: column-reverse; align-items: center; justify-content: center; gap: 6px; text-align: center;
    min-height: 82px; padding: 12px 6px !important; border-radius: 16px !important;
    background: rgba(255, 255, 255, .035) !important; border: 1px solid var(--glass-line) !important; min-width: 0;
  }
  .returns > * b, .kv.boxed > div b, .sh-q .sh-v, .sg-t b { font-size: 19px !important; font-weight: 900; line-height: 1.2; }
  .returns > * small, .kv.boxed > div > small, .sh-q .sh-lbl, .sg-t small { font-size: 11.5px !important; color: var(--fg-3); font-weight: 700; }
  .kv.boxed > div .mini { order: -1; font-size: 10.5px; }
  .sh-q .sh-v .num { font-size: 20px; }
  .sh-q .sh-v { display: flex; flex-direction: column; align-items: center; gap: 4px; }

  /* calls to action fill the row */
  #view .btn-primary:not(.btn-sm), #view .btn-gold:not(.btn-sm), .modal .btn-primary, .modal .btn-gold {
    width: 100%; min-height: 52px; justify-content: center; border-radius: 16px; font-size: 15px;
  }
  .free-pick { flex-direction: column; align-items: stretch; text-align: right; }
  .free-pick .btn { width: 100%; }
}
@media (max-width: 767px) {
  .sh-q { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .sh-q .sh-v .num { font-size: 17px; }
  /* tab rows split evenly: up to 4 per row, 5–6 options as 3 + 3 */
  .seg:has(> :nth-child(5)) > button { min-width: calc(33.333% - 4px); }
}
@media (max-width: 767px) {
  .sh-q > div { padding-inline: 4px !important; }
  .sh-q .pc, .sh-q .chip { font-size: 10.5px; padding: 2px 5px; }
}
@media (max-width: 767px) {
  .returns > * b, .kv.boxed > div b, .sg-t b { font-size: clamp(14px, 4.6vw, 19px) !important; }
  .kv.boxed > div b .pc, .kv.boxed > div b .chip { font-size: 12px; padding: 2px 4px; }
  .returns > *, .kv.boxed > div, .sh-q > div, .sg-t { overflow: hidden; }
}
@media (max-width: 767px) {
  /* a tile value with its change: number above, change below */
  .kv.boxed > div b, .returns > * b { display: flex; flex-direction: column; align-items: center; gap: 4px; }
}

/* ======================================================================
   Adaptive phone screens (.mx): their own components, not shrunken desktop panels
   ====================================================================== */
@media (max-width: 767px) {
  :root {
    --mx-card: rgba(17, 25, 45, .82); --mx-line: rgba(148, 163, 184, .14); --mx-soft: rgba(255, 255, 255, .035);
    --mx-gold: #f5b942; --mx-teal: #2dd4bf; --mx-blue: #3b82f6; --mx-r: 20px;
  }
  .mx { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
  body.mx-on .page-head, body.mx-on .foot p { display: none; }

  /* section heading with an optional link */
  .mx-sec { display: flex; align-items: center; justify-content: space-between; margin: 10px 2px -2px; min-height: 28px; }
  .mx-sec h3 { margin: 0; font-size: 16px; font-weight: 900; color: var(--fg); }
  .mx-sec a { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; color: var(--mx-teal); text-decoration: none; min-height: 44px; }
  .mx-sec a svg { width: 16px; height: 16px; }

  /* hero cards */
  .mx-hero {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 24px;
    background: radial-gradient(120% 90% at 100% 0%, rgba(45, 212, 191, .16), transparent 55%), radial-gradient(90% 80% at 0% 100%, rgba(59, 130, 246, .14), transparent 60%), var(--mx-card);
    border: 1px solid var(--mx-line); color: var(--fg); text-decoration: none;
  }
  .mx-hero h2 { margin: 0; font-size: 22px; font-weight: 900; line-height: 1.4; }
  .mx-hero p { margin: 0; font-size: 13.5px; color: var(--fg-2); line-height: 1.8; }
  .mx-kicker { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 800;
    color: var(--mx-gold); background: rgba(245, 185, 66, .1); border: 1px solid rgba(245, 185, 66, .3); }
  .mx-kicker svg { width: 14px; height: 14px; }
  .mx-big { display: flex; align-items: baseline; gap: 8px; }
  .mx-big b { font-size: 32px; font-weight: 900; letter-spacing: -.5px; }
  .mx-big small { font-size: 13px; color: var(--fg-3); }
  .mx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .mx-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--mx-soft); border: 1px solid var(--mx-line); white-space: nowrap; }
  .mx-chip.up { color: var(--up); background: rgba(52, 211, 153, .1); border-color: rgba(52, 211, 153, .25); }
  .mx-chip.down { color: var(--down); background: rgba(251, 113, 133, .1); border-color: rgba(251, 113, 133, .25); }
  .mx-hero .btn { min-height: 52px; border-radius: 16px; font-size: 15px; width: 100%; justify-content: center; }
  .btn-ghost { background: transparent; border: 1px solid var(--mx-line); color: var(--fg-2); }
  .mx-hello { display: flex; align-items: baseline; justify-content: space-between; padding: 2px 2px 0; }
  .mx-hello b { font-size: 20px; font-weight: 900; }
  .mx-hello small { font-size: 12px; color: var(--fg-3); }

  /* quick actions */
  .mx-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .mx-quick a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 84px; border-radius: 18px;
    background: var(--mx-card); border: 1px solid var(--mx-line); color: var(--fg-2); font-size: 12px; font-weight: 800; text-decoration: none; }
  .mx-quick a:active { transform: scale(.97); }

  /* stat tiles (number over label) */
  .mx-tiles { display: grid; gap: 8px; }
  .mx-tiles.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mx-tiles.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mx-tiles.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mx-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 86px; padding: 12px 6px; border-radius: 18px;
    background: var(--mx-card); border: 1px solid var(--mx-line); text-align: center; min-width: 0; overflow: hidden; }
  .mx-tile b { font-size: clamp(15px, 4.8vw, 20px); font-weight: 900; line-height: 1.2; white-space: nowrap; }
  .mx-tile small { font-size: 11.5px; font-weight: 700; color: var(--fg-3); }
  .mx-tile em { font-style: normal; font-size: 10.5px; color: var(--fg-3); white-space: nowrap; }
  .mx-tile em .up, .mx-tile em .down { font-weight: 800; font-size: 11.5px; }

  /* list rows */
  .mx-list { border-radius: var(--mx-r); background: var(--mx-card); border: 1px solid var(--mx-line); overflow: hidden; }
  .mx-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; color: var(--fg); text-decoration: none; }
  .mx-row + .mx-row { border-top: 1px solid var(--mx-line); }
  .mx-row:active { background: rgba(255, 255, 255, .05); }
  .mx-av { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-size: 13px; font-weight: 900;
    color: hsl(var(--h, 170) 80% 72%); background: hsl(var(--h, 170) 60% 50% / .14); border: 1px solid hsl(var(--h, 170) 60% 60% / .25); }
  .mx-av svg { width: 18px; height: 18px; }
  .mx-av-ic { background: none; border: 0; }
  .mx-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .mx-t b { font-size: 15px; font-weight: 900; }
  .mx-t small { font-size: 12px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mx-t small b { font-size: 12px; color: var(--fg-2); font-weight: 800; }
  .mx-q { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: left; }
  .mx-q .num { font-size: 15px; font-weight: 900; }
  .mx-q small { font-size: 11px; color: var(--fg-3); }
  .mx-q .chip, .mx-q .pc { font-size: 11.5px; }

  /* segmented tabs, full width */
  .mx-seg { display: flex; padding: 4px; gap: 4px; border-radius: 16px; background: var(--mx-card); border: 1px solid var(--mx-line); }
  .mx-seg button { flex: 1 1 0; min-height: 42px; border: 0; border-radius: 12px; background: none; color: var(--fg-3); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; white-space: nowrap; padding: 0 4px; }
  .mx-seg button[aria-selected="true"] { color: #04201d; background: linear-gradient(135deg, var(--mx-teal), var(--mx-blue)); }

  /* cards, search, filters */
  .mx-card { border-radius: var(--mx-r); background: var(--mx-card); border: 1px solid var(--mx-line); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
  .mx-search { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border-radius: 16px; background: var(--mx-card); border: 1px solid var(--mx-line); }
  .mx-search svg { width: 20px; height: 20px; color: var(--fg-3); flex: none; }
  .mx-search input { flex: 1; min-width: 0; height: 50px; border: 0; background: none; color: var(--fg); font: inherit; font-size: 16px; outline: none; }
  .mx-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mx-filters select { min-height: 48px; border-radius: 14px; }
  .mx-count, .mx-desc { margin: 0 4px; font-size: 12.5px; color: var(--fg-3); line-height: 1.8; }
  .mx-more { min-height: 50px; border-radius: 16px; }
  .mx-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 26px 16px; border-radius: var(--mx-r); background: var(--mx-card); border: 1px solid var(--mx-line); }
  .mx-empty b { font-size: 16px; }
  .mx-empty p { margin: 0; font-size: 13px; color: var(--fg-3); line-height: 1.8; }
  .mx-empty .btn { width: 100%; min-height: 52px; border-radius: 16px; margin-top: 6px; }

  /* promo and locked teasers (yellow = invitation) */
  .mx-promo { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 22px; text-decoration: none; color: var(--fg);
    background: radial-gradient(100% 120% at 100% 0%, rgba(245, 185, 66, .18), transparent 60%), var(--mx-card); border: 1px solid rgba(245, 185, 66, .3); }
  .mx-promo-k { font-size: 12px; font-weight: 800; color: var(--mx-gold); display: inline-flex; gap: 6px; align-items: center; }
  .mx-promo-k svg { width: 14px; height: 14px; }
  .mx-promo b { font-size: 17px; font-weight: 900; }
  .mx-promo small { font-size: 12.5px; color: var(--fg-2); }
  .mx-promo .btn { width: 100%; min-height: 50px; justify-content: center; border-radius: 16px; margin-top: 4px; }
  .mx-lock { display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 12px 14px; border-radius: var(--mx-r); text-decoration: none; color: var(--fg);
    background: rgba(245, 185, 66, .07); border: 1px dashed rgba(245, 185, 66, .4); }
  .mx-lock > svg:first-child { width: 22px; height: 22px; color: var(--mx-gold); flex: none; }
  .mx-lock span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
  .mx-lock b { font-size: 14px; }
  .mx-lock small { font-size: 12px; color: var(--fg-3); }

  /* market */
  .mx-idx-h { display: flex; align-items: flex-end; justify-content: space-between; }
  .mx-idx-h small { font-size: 12px; color: var(--fg-3); display: block; }
  .mx-idx-h b { font-size: 26px; font-weight: 900; }
  .mx-chart { height: 230px !important; min-height: 0 !important; }

  /* stock */
  .mx-sh-top { display: flex; align-items: center; gap: 12px; }
  .mx-sh-top h2 { margin: 0; font-size: 24px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .mx-sh-top small { font-size: 12.5px; color: var(--fg-3); }
  .mx-sh-top .mx-av { width: 52px; height: 52px; border-radius: 16px; font-size: 16px; }
  .mx-sh-q { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
  .mx-price { display: flex; flex-direction: column; gap: 6px; }
  .mx-price .num { font-size: 32px; font-weight: 900; }
  .mx-sh-side { display: flex; flex-direction: column; align-items: flex-end; text-align: left; }
  .mx-sh-side small { font-size: 11px; color: var(--fg-3); }
  .mx-sh-side b { font-size: 17px; }
  .mx-stock .mx-sub { margin: 0 !important; border-radius: var(--mx-r) !important; background: var(--mx-card) !important; border: 1px solid var(--mx-line) !important; box-shadow: none !important; }
  .mx-stock .mx-sub .panel-h { padding: 14px 14px 8px; }
  .mx-stock .mx-sub .panel-b { padding: 4px 14px 14px; }
  .mx-chart-card .chart-box, .mx-chart-card #stockChart { height: 260px !important; min-height: 0 !important; }
  .mx-chart-card .ch-tools { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
  .mx-chart-card .ch-tools .btn { flex: 1 1 45%; min-height: 40px; }
  .mx-pane { display: flex; flex-direction: column; gap: 12px; }
  .mx-pane[hidden] { display: none; }
  .mx-about h4 { margin: 0; font-size: 15px; }

  /* portfolio */
  .mx-alloc { display: flex; height: 8px; border-radius: 999px; overflow: hidden; gap: 2px; }
  .mx-alloc i { display: block; height: 100%; }
  .mx-holds { display: flex; flex-direction: column; gap: 8px; }
  .mx-hold { border-radius: var(--mx-r); background: var(--mx-card); border: 1px solid var(--mx-line); overflow: hidden; }
  .mx-hold .mx-t small::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-inline-end: 6px; vertical-align: 1px; }
  .mx-hold summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 70px; padding: 10px 14px; cursor: pointer; }
  .mx-hold summary::-webkit-details-marker { display: none; }
  .mx-hold[open] summary { border-bottom: 1px solid var(--mx-line); }
  .mx-hold-b { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; }
  .mx-hold-b > .chip { align-self: flex-start; }
  .mx-hold-b p { margin: 0; font-size: 13px; color: var(--fg-2); line-height: 1.8; }
  .mx-hold-b .mx-tile { min-height: 70px; background: var(--mx-soft); }
  .mx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mx-two .btn { min-height: 50px; border-radius: 16px; justify-content: center; width: 100%; }
  .mx-link { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; color: var(--mx-teal); font-size: 13px; font-weight: 800; text-decoration: none; }
  .mx-link svg { width: 16px; height: 16px; }
  body.mx-on #view > .mx > * { min-width: 0; }
}
@media (max-width: 767px) {
  /* chart range buttons inside the phone chart card look like the phone tabs */
  .mx-chart-card .seg { display: flex !important; flex-wrap: nowrap !important; padding: 4px; gap: 3px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--mx-line); width: 100%; }
  .mx-chart-card .seg > button { flex: 1 1 0 !important; min-width: 0 !important; min-height: 38px; padding: 0 2px; font-size: 12px; border-radius: 10px; border: 0; background: none; }
  .mx-chart-card .seg > button[aria-pressed="true"] { color: #04201d; background: linear-gradient(135deg, var(--mx-teal), var(--mx-blue)); }
  .mx-chart-card .panel-h { flex-direction: column; align-items: stretch; }
  .mx-chart-card .ch-tools { flex-direction: row; }
}

/* ===== phone round 4: lighter type, yellow calls to action, sheets, premium motion ===== */
@media (max-width: 767px) {
  /* Vazirmatn is already a heavy face: phones use 400–700, never 800–900 */
  body { font-weight: 400; }
  .mx b, .mx h2, .mx h3, .mx-tile b, .mx-big b, .mx-idx-h b, .mx-price .num, .mx-q .num, .mx-t b, .m-title, .ms-grid a, .mx-quick a, .mx-seg button,
  .bottom-nav a, .bottom-nav button, .mx-hello b, .mx-promo b, .mx-lock b, .btn, .chip, .mx-chip, .pc, .page-head h1, .panel-h h2, .modal h2 { font-weight: 600 !important; }
  .mx-tile b, .mx-big b, .mx-price .num, .mx-idx-h b { font-weight: 700 !important; }
  .mx-tile small, .mx-t small, .mx-q small, .mx-sec a, .mx-kicker, .mx-hello small, .ms-legal { font-weight: 400 !important; }
  .mx-sec h3 { font-weight: 600 !important; font-size: 15px; }
  .mx-big b { font-size: 30px; }
  .mx-tile b { font-size: clamp(15px, 4.4vw, 18px); }

  /* a number with its unit: unit on the left, smaller and lighter */
  .mx-n { display: inline-flex; align-items: baseline; gap: 4px; flex-wrap: wrap; justify-content: center; }
  .mx-n .u, small.u { font-size: 11px !important; font-weight: 400 !important; color: var(--fg-3); }

  /* main calls to action are yellow; tabs and selected states keep the brand teal */
  .btn-primary, #view .btn-primary, .modal .btn-primary, .action-bar .btn-primary, .mx-hero .btn-primary {
    background: linear-gradient(135deg, #fcd34d, #f5b942) !important; color: #3a2604 !important; border: 0 !important; box-shadow: 0 10px 24px -14px rgba(245, 185, 66, .8) !important;
  }
  .action-bar .btn-gold { background: rgba(245, 185, 66, .1) !important; color: var(--mx-gold) !important; border: 1px solid rgba(245, 185, 66, .45) !important; box-shadow: none !important; }

  /* no page footer on phones: the legal lines live at the bottom of «منو» and the disclaimer is shown once up front */
  .foot { display: none !important; }
  .ms-legal { margin: 2px 4px 0; font-size: 11.5px; line-height: 1.9; color: var(--fg-3); display: flex; gap: 6px; align-items: flex-start; }
  .ms-legal svg { width: 16px; height: 16px; flex: none; color: var(--mx-gold); margin-top: 3px; }
  .ms-own { font-size: 10.5px; padding-inline-start: 22px; }
  .disc-b { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .disc-b p { margin: 0; font-size: 14px; line-height: 2; color: var(--fg-2); }
  .disc-b p b { color: var(--fg); }

  /* list rows: star, symbol, price over change aligned on one edge; a header names the columns */
  .mx-lh { display: flex; justify-content: space-between; padding: 9px 14px 8px 16px; padding-inline-start: 58px; font-size: 11.5px; color: var(--fg-3); border-bottom: 1px solid var(--mx-line); background: rgba(255, 255, 255, .02); }
  .mx-srow { padding: 0 6px 0 14px; padding-inline-start: 6px; gap: 2px; }
  .mx-star { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--fg-3); border-radius: 12px; cursor: pointer; }
  .mx-star svg { width: 19px; height: 19px; }
  .mx-star.on { color: var(--mx-gold); }
  .mx-star.on svg { fill: currentColor; }
  .mx-rowa { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 64px; color: var(--fg); text-decoration: none; padding-inline-end: 8px; }
  .mx-q { min-width: 92px; align-items: flex-end; }
  .mx-q > * { margin: 0 !important; text-align: left; }
  .mx-q .num { font-size: 15px; line-height: 1.3; }
  .mx-q .pc, .mx-q .chip, .mx-q .mx-chip { min-width: 64px; justify-content: center; text-align: center; display: inline-flex; }
  .tbl-wrap td.qc { text-align: left; }
  .tbl-wrap td.qc .num { text-align: left; }
  .tbl-wrap td.qc .pc, .tbl-wrap td.qc .chip { display: inline-flex; min-width: 62px; justify-content: center; }

  /* search: field with its icon, and a close button on the left */
  body.m-search .topbar .search {
    display: flex !important; align-items: center; gap: 8px; position: absolute; inset: calc(8px + env(safe-area-inset-top, 0px)) 10px auto 10px; z-index: 6;
    height: 48px; padding: 0 12px 0 6px; border-radius: 16px; background: #101a30; border: 1px solid rgba(45, 212, 191, .45); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6);
  }
  body.m-search .topbar .search > svg { width: 18px; height: 18px; color: var(--fg-3); flex: none; display: block; }
  body.m-search .topbar .search input { display: block !important; flex: 1; min-width: 0; height: 46px; border: 0 !important; background: none !important; color: var(--fg); font: inherit; font-size: 16px; outline: none; padding: 0; box-shadow: none !important; }
  body.m-search .m-search-close { order: 9; display: grid !important; place-items: center; width: 38px; height: 38px; border-radius: 12px; border: 0; background: rgba(255, 255, 255, .07); color: var(--fg); }
  body.m-search .search-results { top: calc(64px + env(safe-area-inset-top, 0px)) !important; border-radius: 18px; }

  /* every dialog is a bottom sheet: grab handle, slide up, tap outside to close */
  .modal-back { place-items: end stretch !important; padding: 0 !important; }
  .modal { width: 100% !important; max-width: none !important; border-radius: 26px 26px 0 0 !important; max-height: 90vh; overflow: auto; padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: sheetUp .32s cubic-bezier(.2, .8, .2, 1) both !important; background: rgba(12, 19, 37, .98) !important; }
  .modal::before { content: ""; display: block; width: 42px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .2); margin: 10px auto 0; }
  .modal .modal-b .btn-block, .modal form .btn[type="submit"] { min-height: 52px; border-radius: 16px; }
  @keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
  .m-sheetform { display: none !important; }

  /* short messages sit above the bottom bars */
  .toast { bottom: calc(var(--tab-h) + var(--safe-b) + 14px) !important; max-width: calc(100vw - 32px); }
  body.has-action .toast { bottom: calc(var(--tab-h) + var(--act-h) + var(--safe-b) + 14px) !important; }
  body.is-detail .toast { bottom: calc(var(--act-h) + var(--safe-b) + 14px) !important; }

  /* premium (Pro) entries: a slowly turning gold–violet border */
  .mx-prems { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mx-prem { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 104px; padding: 14px; border-radius: 20px; border: 0; cursor: pointer;
    background: var(--mx-card); color: var(--fg); text-align: right; font: inherit; text-decoration: none; }
  .mx-prem b { font-size: 14px; }
  .mx-prem small { font-size: 11.5px; color: var(--mx-gold); }
  .mx-prem > svg:last-child { position: absolute; top: 14px; left: 14px; width: 18px; height: 18px; color: var(--mx-gold); }
  .mx-prem.on { background: linear-gradient(160deg, rgba(245, 185, 66, .14), rgba(167, 139, 250, .1)), var(--mx-card); }
  .mx-prem-anim { position: relative; isolation: isolate; }
  .mx-prem-anim::before {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; z-index: -1;
    background: conic-gradient(from var(--pa, 0deg), #f5b942, #a78bfa, #2dd4bf, #f5b942);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    animation: premSpin 4s linear infinite;
  }
  .mx-prem-anim::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(245, 185, 66, .12) 50%, transparent 70%); background-size: 250% 100%; animation: premShine 3.2s ease-in-out infinite; }
  .mx-quick a.mx-prem-anim { border-color: transparent; }
  .ms-grid a[href="#baskets"], .ms-grid a[href="#signals"] { border-color: transparent; }
}
@property --pa { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes premSpin { to { --pa: 360deg; } }
@keyframes premShine { 0% { background-position: 120% 0; } 60%, 100% { background-position: -120% 0; } }
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .mx-prem-anim::before, .mx-prem-anim::after { animation: none; }
  .modal { animation: none !important; }
}
@media (max-width: 767px) { .mx-tile .mx-n { flex-wrap: nowrap; } }
@media (max-width: 767px) {
  /* the desktop search places its icon absolutely; the phone bar lays both icons out in the row */
  body.m-search .topbar .search svg { position: static !important; inset: auto !important; transform: none !important; margin: 0 !important; }
  body.m-search .topbar .search > svg { order: 0; }
  body.m-search .topbar .search input { order: 1; padding: 0 4px !important; text-align: right; }
  body.m-search .m-search-close svg { width: 18px !important; height: 18px !important; color: var(--fg); display: block; }
}

/* ===== phone baskets ===== */
/* the analysis runs over the whole screen, text on an opaque backdrop */
.mx-think { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(120% 80% at 50% 30%, #13213f 0%, #070c18 70%); animation: fadeIn .25s ease both; }
.mx-think.out { opacity: 0; transition: opacity .3s ease; }
.mx-think .ai-think { min-height: 0; padding: 0; gap: 18px; width: 100%; max-width: 380px; }
.mx-think .ai-think > b { font-size: 18px; font-weight: 600; color: #fff; }
.mx-think .ai-steps { width: 100%; }
.mx-think .ai-steps li { font-size: 14px; line-height: 1.8; color: #dbe4f5; }
.mx-think .ai-bar { width: 100%; }
@media (max-width: 767px) {
  .mx-bktabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px; border-radius: 18px; background: var(--mx-card); }
  .mx-bktabs button { display: flex; flex-direction: column; align-items: center; gap: 1px; min-height: 58px; padding: 7px 4px; border: 0; border-radius: 14px; background: none; color: var(--fg-2); font: inherit; cursor: pointer; }
  .mx-bktabs button svg { width: 16px; height: 16px; margin-bottom: 2px; }
  .mx-bktabs button b { font-size: 13.5px; font-weight: 600; }
  .mx-bktabs button small { font-size: 10.5px; color: var(--fg-3); }
  .mx-bktabs button[aria-selected="true"] { background: rgba(45, 212, 191, .16); color: var(--fg); box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .45); }
  .mx-bktabs button[aria-selected="true"] small { color: #7fe9d9; }

  /* square stat tiles, two per row, small numbers */
  .mx-sqs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mx-sq { aspect-ratio: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 4px; padding: 12px; border-radius: 18px; background: var(--mx-card); overflow: hidden; }
  .mx-sq .tile { width: 30px; height: 30px; border-radius: 10px; }
  .mx-sq .tile svg { width: 16px; height: 16px; }
  .mx-sq > small { font-size: 11.5px; color: var(--fg-3); }
  .mx-sq > b { font-size: 19px !important; line-height: 1.3; }
  .mx-sq > b .u { font-size: 11px; font-weight: 400; color: var(--fg-3); }
  .mx-sq > em { font-style: normal; font-size: 10.5px; line-height: 1.7; color: var(--fg-3); }
  .mx-sq .cd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; width: 100%; margin: 0; }
  .mx-sq .cd > div { display: flex; flex-direction: column; align-items: center; padding: 5px 0; border-radius: 9px; background: rgba(167, 139, 250, .1); min-width: 0; }
  .mx-sq .cd b { font-size: 15px !important; line-height: 1.2; font-weight: 700; }
  .mx-sq .cd small { font-size: 9px; color: var(--fg-3); }
  .mx-sq .cd-done { font-size: 11px; line-height: 1.7; }
  .mx-prog { display: block; width: 100%; height: 5px; margin-bottom: 4px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
  .mx-prog > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3b82f6, #2dd4bf); }
  .mx-sec h3 small { font-size: 11px; font-weight: 400; color: var(--fg-3); margin-inline-start: 4px; }
  .mx-bkchart { padding: 10px 6px 8px; }
  .mx-bkchart .bk-lw { height: 210px; }

  /* composition: donut as wide as the screen, legend inline below */
  .mx-donut .bk-donut { display: block; }
  .mx-donut .bk-donut-l { display: none; }
  .mx-donut .bk-donut-c { width: min(100%, 300px); margin: 0 auto; }
  .mx-donut .bk-donut-c svg { width: 100%; height: auto; }
  .mx-donut-l { display: flex; flex-wrap: wrap; gap: 5px 12px; justify-content: center; margin-top: 10px; font-size: 11.5px; color: var(--fg-2); }
  .mx-donut-l span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
  .mx-donut-l i { width: 8px; height: 8px; border-radius: 50%; }
  .mx-donut-l b { font-weight: 400 !important; color: var(--fg-3); font-size: 10.5px; }

  /* holdings: one card each, three small columns */
  .mx-holds2 { display: flex; flex-direction: column; gap: 8px; }
  .mx-hold2 { padding: 11px 12px; border-radius: 16px; background: var(--mx-card); }
  .mx-h2h { display: flex; align-items: center; gap: 7px; min-width: 0; }
  .mx-h2h > i { flex: none; width: 9px; height: 9px; border-radius: 50%; }
  .mx-h2h b { font-size: 14px; }
  .mx-h2h b a { color: var(--fg); text-decoration: none; }
  .mx-h2h small { flex: 1; min-width: 0; font-size: 11px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mx-h2h .mx-chip { flex: none; font-size: 11px; }
  .mx-h2c { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }
  .mx-h2c > div { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 7px 8px; border-radius: 11px; background: rgba(255, 255, 255, .035); }
  .mx-h2c small { font-size: 10px; color: var(--fg-3); }
  .mx-h2c > div > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 5px; }
  .mx-h2c .num { font-size: 13px; font-weight: 600; }
  .mx-h2c .pc { font-size: 10px !important; padding: 0 !important; background: none !important; min-width: 0 !important; }
  .mx-h2f { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 10.5px; color: var(--fg-3); }
  .mx-h2f b { font-weight: 600 !important; color: var(--fg-2); }

  .mx-prevl { padding: 2px 12px; }
  .mx-prevl > div { display: flex; align-items: center; gap: 8px; min-height: 42px; border-bottom: 1px solid var(--mx-line); font-size: 13px; }
  .mx-prevl > div:last-child { border-bottom: 0; }
  .mx-prevl b { min-width: 64px; }
  .mx-prevl b a { color: var(--fg); text-decoration: none; }
  .mx-prevl small { flex: 1; font-size: 11px; color: var(--fg-3); }
  .mx-how { padding: 12px 14px; font-size: 12.5px; line-height: 2; color: var(--fg-2); }
  .mx-how p { margin: 0 0 6px; }
}
@media (prefers-reduced-motion: reduce) { .mx-think { animation: none; } }

/* ===== round 5: titled dropdowns, kind tabs, info toast, yellow tabs, clean phone charts, back to the site ===== */
.nav-site { margin-top: 6px; opacity: .85; }
.nav-site:hover { opacity: 1; }
@media (max-width: 767px) {
  /* every dropdown is its own row with its title inside */
  .mx-dds { display: flex; flex-direction: column; gap: 8px; }
  .mx-dd { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 56px; padding: 6px 14px 6px 40px; border-radius: 16px; background: var(--mx-card); border: 1px solid var(--mx-line); cursor: pointer; }
  .mx-dd small { font-size: 11px; color: var(--fg-3); line-height: 1.4; pointer-events: none; }
  .mx-dd select { appearance: none; -webkit-appearance: none; width: 100%; border: 0; background: none; color: var(--fg); font: inherit; font-size: 15px; font-weight: 600; padding: 0; outline: none; cursor: pointer; }
  .mx-dd select option { background: #101a30; color: var(--fg); }
  .mx-dd > svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--fg-3); pointer-events: none; }
  .mx-dd:focus-within { border-color: rgba(245, 185, 66, .6); }

  /* kinds of one pattern: a row of tabs that scrolls with a swipe */
  .mx-subtabs { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
  .mx-subtabs::-webkit-scrollbar { display: none; }
  .mx-subtabs button { flex: none; scroll-snap-align: start; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--mx-line); background: var(--mx-card); color: var(--fg-2); font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer; }

  /* count with the «درباره فیلتر» button that opens the description as a toast */
  .mx-cnt { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .mx-cnt .mx-count { margin: 0; }
  .mx-info { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--mx-line); background: none; color: var(--fg-2); font: inherit; font-size: 12px; cursor: pointer; }
  .mx-info svg { width: 16px; height: 16px; color: var(--mx-gold); }
  .toast.toast-info { left: 16px !important; right: 16px !important; max-width: none; transform: none !important; text-align: right; line-height: 1.9; font-size: 13px; padding: 12px 16px; border-radius: 16px; }

  /* premium cards: selected is unmistakable */
  .mx-prem.on { background: linear-gradient(150deg, #fcd34d, #f5b942 55%, #e59e2c) !important; color: #3a2604; box-shadow: 0 12px 28px -14px rgba(245, 185, 66, .9); }
  .mx-prem.on small, .mx-prem.on > svg:last-child { color: #3a2604 !important; }
  .mx-prem.on .tile { background: rgba(58, 38, 4, .16) !important; color: #3a2604 !important; box-shadow: none !important; }
  .mx-prem.on::before { display: none; }
  .mx-prem:not(.on) { opacity: .92; }
  /* dashboard premium cards: still, with a quiet gold edge */
  a.mx-prem:not(.mx-prem-anim) { border: 1px solid rgba(245, 185, 66, .35); background: linear-gradient(160deg, rgba(245, 185, 66, .1), rgba(167, 139, 250, .07)), var(--mx-card); }
  .mx-quick + .mx-prems { margin-top: -4px; }
  .ms-grid a.ms-prem { border-color: rgba(245, 185, 66, .4) !important; background: linear-gradient(160deg, rgba(245, 185, 66, .1), transparent), rgba(255, 255, 255, .03); }
  .ms-site { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 14px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid var(--mx-line); color: var(--fg); text-decoration: none; font-size: 14px; }
  .ms-site span { flex: 1; }
  .ms-site svg { width: 18px; height: 18px; color: var(--fg-3); }

  /* selected tabs are yellow, like the calls to action */
  .mx-seg button[aria-selected="true"], .mx-bktabs button[aria-selected="true"], .mx-subtabs button[aria-selected="true"],
  #view .seg button[aria-pressed="true"], .modal .seg button[aria-pressed="true"] {
    background: linear-gradient(135deg, #fcd34d, #f5b942) !important; color: #3a2604 !important; box-shadow: none !important; border-color: transparent !important;
  }
  .mx-bktabs button[aria-selected="true"] small { color: rgba(58, 38, 4, .75) !important; }
  .mx-bktabs button[aria-selected="true"] svg { color: #3a2604; }

  /* number with its unit: number right, unit left */
  .mx-n { direction: rtl; }

  /* charts: as wide as the screen, no price axis, dates spread under the plot */
  .m-xaxis { position: relative; height: 20px; margin-top: 2px; font-size: 10.5px; color: var(--fg-3); direction: ltr; }
  .m-xaxis span { position: absolute; top: 2px; white-space: nowrap; }
  .mx-pane .panel, .mx-pane .glass.panel { overflow: visible; }
  .mx-chart-full, #view .chart-box, #view .bk-lw, #view #idxChart, #view .lw-wrap { margin-inline: 0; }
}
@media (max-width: 767px) {
  /* chart cards run edge to edge; the plot spans the whole screen width */
  #view .mx-idx, #view .mx-stock .mx-chart-card, #view .mx-bkchart { margin-inline: calc(50% - 50vw) !important; border-radius: 0 !important; border-inline: 0 !important; overflow: visible !important; }
  .mx-chart-card .panel-b, .mx-chart-card { overflow: visible !important; }
  .mx-idx .chart-box, .mx-chart-card .chart-box, .mx-idx .m-xaxis, .mx-chart-card .m-xaxis { margin-inline: -14px !important; }
  .mx-bkchart { padding-inline: 0 !important; }
  .mx-bkchart .perf-l { padding-inline: 14px; }
  .m-xaxis span { direction: rtl; unicode-bidi: isolate; }
}
@media (max-width: 767px) {
  /* basket stat boxes: countdown across the row, today and since-start below it */
  .mx-sqs .mx-sq { position: relative; isolation: isolate; aspect-ratio: auto; min-height: 112px; justify-content: flex-start; gap: 6px; padding: 14px; }
  .mx-sqs .mx-sq-cd { grid-column: 1 / -1; min-height: 0; }
  .mx-sqs .mx-sq-cd .cd { gap: 6px; }
  .mx-sqs .mx-sq-cd .cd > div { padding: 8px 0; }
  .mx-sqs .mx-sq-cd .cd b { font-size: 22px !important; }
  .mx-sqs .mx-sq-cd .cd small { font-size: 10.5px; }
  .mx-sqs .mx-sq > b { font-size: 21px !important; }
  /* the box's icon: a large drawing behind it, starting at the left edge and fading out toward the text */
  .mx-sq-art { position: absolute; z-index: -1; left: -22px; top: 50%; transform: translateY(-50%); width: 62%; max-width: 170px; aspect-ratio: 1; pointer-events: none;
    -webkit-mask: linear-gradient(to right, #000 35%, transparent 100%); mask: linear-gradient(to right, #000 35%, transparent 100%); opacity: .16; }
  .mx-sq-art svg { width: 100%; height: 100%; stroke-width: 1.4; }
  .mx-sq-cd .mx-sq-art { width: 34%; }
  .mx-c-violet .mx-sq-art { color: #a78bfa; } .mx-c-gold .mx-sq-art { color: #f5b942; } .mx-c-teal .mx-sq-art { color: #2dd4bf; } .mx-c-blue .mx-sq-art { color: #60a5fa; }

  /* basket charts: in a card of their own, the plot as wide as the card */
  .mx-bkc { padding: 12px 0 8px !important; overflow: hidden; }
  .mx-bkc .bk-lw { height: 220px; }
  .mx-bkc .perf-l { padding-inline: 14px; }

  /* holdings and previous basket: four columns with headers */
  .mx-tbl4 { padding: 0 !important; overflow: hidden; }
  .mx-tbl4 .mx-th, .mx-tbl4 .mx-tr { display: grid; grid-template-columns: 1.1fr 1fr 1fr .95fr; gap: 6px; align-items: center; padding: 9px 12px; }
  .mx-tbl4 .mx-th { font-size: 10.5px; color: var(--fg-3); background: rgba(255, 255, 255, .03); border-bottom: 1px solid var(--mx-line); }
  .mx-tbl4 .mx-tr { border-bottom: 1px solid var(--mx-line); min-height: 52px; }
  .mx-tbl4 .mx-tr:last-child { border-bottom: 0; }
  .mx-tsym { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .mx-tsym i { flex: none; width: 8px; height: 8px; border-radius: 50%; }
  .mx-tsym b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mx-tsym b a { color: var(--fg); text-decoration: none; }
  .mx-tq, .mx-tq > span[data-q] { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
  .mx-tq .num { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
  .mx-tq .pc { font-size: 10.5px !important; padding: 0 !important; background: none !important; min-width: 0 !important; font-weight: 400; }
  .mx-tq > .num + .num { font-size: 11px; font-weight: 400; }
}
@media (max-width: 767px) {
  .mx-sqs .mx-sq { border: 1px solid var(--mx-line); }
  .mx-sq-art { opacity: .13; }
  .mx-sq-cd .mx-sq-art { opacity: .09; width: 30%; left: -14px; }
}