@font-face {
  font-family: "Vazirmatn";
  src: local("Vazirmatn"), url("/fonts/Vazirmatn.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Owned 404 route: a compact market-workspace error state. */
.not-found-page {
  min-height: 100vh;
  margin: 0;
  color: #f6f8ff;
  background:
    radial-gradient(circle at 18% 18%, rgba(18,201,255,.12), transparent 34%),
    radial-gradient(circle at 82% 78%, rgba(120,71,255,.13), transparent 30%),
    #070a12;
}
.not-found-shell { min-height: 100vh; display: grid; place-items: center; padding: 28px; }
.not-found-card { width: min(960px,100%); display: grid; grid-template-columns: minmax(280px,.85fr) minmax(320px,1.15fr); overflow: hidden; border: 1px solid #253047; border-radius: 18px; background: rgba(14,20,32,.93); box-shadow: 0 24px 80px rgba(0,0,0,.32); }
.not-found-market { position: relative; min-height: 380px; display: grid; align-items: end; padding: 28px; overflow: hidden; border-inline-end: 1px solid #253047; background: linear-gradient(145deg,rgba(18,201,255,.09),rgba(120,71,255,.06)); }
.not-found-market svg { width: 100%; height: auto; opacity: .9; }
.not-found-code { position: absolute; inset: 24px 28px auto auto; color: rgba(246,248,255,.08); font-size: clamp(5rem,12vw,9rem); font-weight: 950; letter-spacing: -.08em; }
.not-found-grid { fill: none; stroke: rgba(146,157,178,.12); stroke-width: 1; }
.not-found-line { fill: none; stroke: #12c9ff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 9px rgba(18,201,255,.35)); }
.not-found-point { fill: #70f000; stroke: #0e1420; stroke-width: 4; }
.not-found-copy { align-self: center; padding: clamp(32px,6vw,70px); }
.not-found-copy small { color: #12c9ff; font-size: .72rem; font-weight: 900; }
.not-found-copy h1 { max-width: 13ch; margin: 9px 0 14px; font-size: clamp(1.65rem,4vw,2.75rem); line-height: 1.35; }
.not-found-copy p { max-width: 48ch; margin: 0; color: #929db2; font-size: .84rem; line-height: 2; }
.not-found-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.not-found-actions a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding-inline: 18px; text-decoration: none; }
.not-found-actions a:focus-visible { outline: 3px solid rgba(18,201,255,.42); outline-offset: 3px; }
@media (max-width: 700px) {
  .not-found-shell { padding: 16px; }
  .not-found-card { grid-template-columns: 1fr; }
  .not-found-market { min-height: 210px; border-inline-end: 0; border-bottom: 1px solid #253047; }
  .not-found-copy { padding: 28px 22px 32px; }
  .not-found-copy h1 { max-width: none; }
  .not-found-actions { display: grid; }
}
@media (prefers-reduced-motion: reduce) {
  .not-found-page * { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* IRANYekanWeb is the product typeface. Vazirmatn remains a safe fallback until
   the licensed IRANYekanWeb font files are added to /fonts. */

:root {
  --z-sticky: 100;
  --z-popover: 300;
  --z-backdrop: 500;
  --z-dialog: 600;
  --z-drawer: 700;
  --z-toast: 900;
  --bg: #070a12;
  --surface: #0e1420;
  --surface-2: #141c2b;
  --surface-3: #1b2639;
  --ink: #f6f8ff;
  --muted: #929db2;
  --line: #253047;
  --line-strong: #3b4965;
  --navy: #090d16;
  --blue: #12c9ff;
  --blue-dark: #7fe4ff;
  --blue-soft: rgba(18, 201, 255, .11);
  --violet: #7847ff;
  --violet-soft: rgba(120, 71, 255, .13);
  --magenta: #ff00bc;
  --magenta-soft: rgba(255, 0, 188, .11);
  --green: #70f000;
  --green-soft: rgba(112, 240, 0, .10);
  --amber: #e9ff00;
  --amber-soft: rgba(233, 255, 0, .10);
  --red: #ff4d67;
  --red-soft: rgba(255, 77, 103, .11);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .24);
  --shadow-lg: 0 22px 60px rgba(0, 0, 0, .42);
  --chart-series-1: #38bdf8;
  --chart-series-2: #fb923c;
  --chart-series-3: #c084fc;
  --chart-series-4: #34d399;
  --chart-threshold-1: #facc15;
  --chart-threshold-2: #22d3ee;
  --chart-threshold-3: #fb7185;
  --chart-threshold-4: #a78bfa;
}

textarea { resize: none; }

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f5f9;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #edf2f7;
  --ink: #162033;
  --muted: #66758d;
  --line: #d8e0eb;
  --line-strong: #b9c5d5;
  --navy: #ffffff;
  --blue: #008dbb;
  --blue-dark: #006f95;
  --blue-soft: rgba(0,141,187,.10);
  --violet: #6842db;
  --violet-soft: rgba(104,66,219,.10);
  --magenta: #c31988;
  --magenta-soft: rgba(195,25,136,.09);
  --green: #3b9500;
  --green-soft: rgba(59,149,0,.09);
  --amber: #8b7600;
  --amber-soft: rgba(139,118,0,.09);
  --red: #d92d4f;
  --red-soft: rgba(217,45,79,.09);
  --shadow-sm: 0 1px 3px rgba(33,51,79,.09);
  --shadow-lg: 0 20px 50px rgba(33,51,79,.14);
  --chart-series-1: #006cc4;
  --chart-series-2: #e85d04;
  --chart-series-3: #7c3aed;
  --chart-series-4: #00875a;
  --chart-threshold-1: #9a6700;
  --chart-threshold-2: #007f8b;
  --chart-threshold-3: #c81e3a;
  --chart-threshold-4: #6d28d9;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: radial-gradient(circle at 50% -10%, rgba(18,201,255,.09), transparent 32%), radial-gradient(circle at 1px 1px, #172238 1px, transparent 0) 0 0 / 24px 24px, var(--bg);
  color: var(--ink);
  font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
  font-feature-settings: "tnum" 1, "ss01" 1;
  line-height: 1.55;
}
html[data-theme="light"] body { background: radial-gradient(circle at 50% -10%, rgba(0,141,187,.10), transparent 32%), radial-gradient(circle at 1px 1px, #dce4ee 1px, transparent 0) 0 0 / 24px 24px, var(--bg); }
body:not(.page-ready) [data-page-view] { visibility: hidden; }
.page-hidden { display: none !important; }
button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.page-shell { width: min(1520px, calc(100% - 40px)); margin: 0 auto; padding: 20px 0 44px; }

.main-navigation { position: sticky; top: 10px; z-index: 80; display: grid; grid-template-columns: repeat(9,minmax(0,1fr)); gap: 5px; width: min(1420px,100%); margin: 12px auto 16px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: rgba(9,13,22,.91); box-shadow: 0 12px 32px rgba(0,0,0,.28); backdrop-filter: blur(15px); }
.main-navigation a { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; border: 1px solid transparent; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: .68rem; font-weight: 800; transition: color .15s, background .15s, border-color .15s; }
.main-navigation a:hover { color: var(--ink); background: rgba(255,255,255,.035); }
.main-navigation a.active { color: #eafaff; border-color: rgba(18,201,255,.3); background: var(--blue-soft); box-shadow: inset 0 -2px 0 var(--blue); }
.main-navigation a span { color: var(--blue); font-size: .85rem; }
.main-navigation a .nav-page-label { color: inherit; font: inherit; }
.experimental-tag { display: inline-flex; align-items: center; justify-content: center; min-height: 17px; padding: 1px 5px; color: #7a2e00; background: #ffedd5; border: 1px solid #fdba74; border-radius: 999px; font-size: .48rem; font-weight: 900; line-height: 1; white-space: nowrap; }
html[data-theme="dark"] .experimental-tag { color: #fed7aa; background: rgba(234,88,12,.16); border-color: rgba(251,146,60,.55); }
.main-navigation a.experimental-page-link { gap: 5px; }
.main-navigation a.experimental-page-link .experimental-tag { color: #7a2e00; font-size: .43rem; }
html[data-theme="dark"] .main-navigation a.experimental-page-link .experimental-tag { color: #fed7aa; }
.forecast-page-title { display: flex; align-items: center; gap: 7px; }
html[data-theme="light"] .main-navigation { background: rgba(255,255,255,.92); box-shadow: 0 12px 32px rgba(31,52,77,.12); }
.page-heading { margin: 15px 0 10px; padding: 0 4px; }
.page-heading small { color: var(--blue); font-size: .62rem; font-weight: 900; }
.page-heading h2 { margin: 2px 0; font-size: 1.2rem; }
.page-heading p { margin: 0; color: var(--muted); font-size: .7rem; }

.hero {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 28px;
  min-height: 150px; padding: 28px 30px; color: #fff; background: linear-gradient(120deg, #0a0f19, #14213a); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 16px 44px rgba(0,0,0,.3);
}
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(18,201,255,.08)), radial-gradient(circle at 88% 20%, rgba(120,71,255,.23), transparent 27%); }
.hero::after { content: ""; position: absolute; width: 310px; height: 310px; left: -150px; bottom: -235px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 38px rgba(255,255,255,.025), 0 0 0 76px rgba(255,255,255,.02); }
.hero > * { position: relative; z-index: 1; }
html[data-theme="light"] .hero { color: var(--ink); background: linear-gradient(120deg,#fff,#e8f2fb); box-shadow: 0 16px 44px rgba(31,52,77,.12); }
html[data-theme="light"] .hero p, html[data-theme="light"] .freshness strong { color: #4f6077; }
html[data-theme="light"] .eyebrow, html[data-theme="light"] .freshness span { color: #66758d; }
.brand-block { display: flex; align-items: center; gap: 18px; }
.brand-mark { display: grid; place-items: center; width: 50px; height: 50px; flex: 0 0 50px; color: #fff; background: linear-gradient(135deg, var(--blue), var(--violet)); border: 1px solid rgba(255,255,255,.25); border-radius: 12px; box-shadow: inset 0 1px rgba(255,255,255,.25), 0 0 28px rgba(18,201,255,.18); font-size: .8rem; font-weight: 900; letter-spacing: -.04em; direction: ltr; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: #98a2b3; font-size: .67rem; font-weight: 800; letter-spacing: .16em; direction: ltr; justify-content: flex-end; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #32d583; box-shadow: 0 0 0 4px rgba(50,213,131,.12); }
h1 { margin: 6px 0 2px; font-size: clamp(1.55rem, 2.5vw, 2.35rem); line-height: 1.25; letter-spacing: -.035em; }
.hero p { margin: 0; color: #d0d5dd; font-size: .85rem; }
.hero-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.account-menu { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 8px; min-width: 110px; font-size: .68rem; }
.account-menu span { color: #98a2b3; }
.account-menu strong { max-width: 130px; overflow: hidden; color: #f2f4f7; text-overflow: ellipsis; white-space: nowrap; }
.account-menu button { grid-column: 1 / -1; justify-self: start; padding: 2px 0; border: 0; background: transparent; color: var(--blue); cursor: pointer; font: inherit; font-weight: 800; }
.account-menu button:hover { text-decoration: underline; }
.account-menu button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 3px; }
.account-menu button:disabled { opacity: .55; cursor: wait; }
html[data-theme="light"] .account-menu strong { color: var(--ink); }
.feature-access-card { align-content: start; }
[hidden] { display: none !important; }
.freshness { min-width: 150px; padding-left: 16px; border-left: 1px solid rgba(255,255,255,.15); }
.freshness span, .freshness strong { display: block; }
.freshness span { color: #98a2b3; font-size: .68rem; }
.freshness strong { margin-top: 3px; color: #f2f4f7; font-size: .8rem; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(127,228,255,.38); background: var(--blue); color: #041019; border-radius: 9px; padding: 10px 14px; cursor: pointer; font-size: .78rem; font-weight: 900; box-shadow: 0 8px 28px rgba(18,201,255,.22); transition: transform .15s, background .15s; }
.primary-button:hover { background: var(--blue-dark); transform: translateY(-1px); }
.primary-button:disabled { opacity: .65; cursor: wait; transform: none; }
.refresh-icon { display: inline-block; font-size: 1.05rem; }
.primary-button.loading .refresh-icon { animation: spin .8s linear infinite; }
.secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(18,201,255,.42); background: rgba(18,201,255,.08); color: #c9f5ff; border-radius: 9px; padding: 10px 14px; cursor: pointer; font-size: .76rem; font-weight: 800; transition: transform .15s, background .15s, border-color .15s; }
.secondary-button:hover { transform: translateY(-1px); border-color: var(--blue); background: rgba(18,201,255,.15); }
.secondary-button:disabled { opacity: .5; cursor: wait; transform: none; }
.share-icon { color: var(--blue); font-size: .95rem; }

.status-banner { width: fit-content; margin: 14px 0; border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; display: flex; align-items: center; gap: 8px; background: rgba(15,22,37,.9); box-shadow: var(--shadow-sm); font-size: .72rem; }
.status-banner.loading { color: var(--muted); }
.status-banner.success { color: var(--green); border-color: #abefc6; background: var(--green-soft); }
.status-banner.error { color: var(--red); border-color: #fecdca; background: var(--red-soft); }
.spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.metric-card { position: relative; min-height: 130px; padding: 17px 18px; background: rgba(15,22,37,.94); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); transition: border-color .18s, transform .18s; }
.metric-card:hover { border-color: #b9c0cc; transform: translateY(-1px); }
.metric-icon { position: absolute; top: 15px; left: 15px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--blue-soft); color: var(--blue); font-size: .65rem; font-weight: 900; direction: ltr; }
.metric-card.blue .metric-icon { background: var(--violet-soft); color: var(--violet); }
.metric-card.amber .metric-icon { background: var(--amber-soft); color: var(--amber); }
.metric-card.slate .metric-icon { background: rgba(148,163,184,.1); color: #cbd5e1; }
.metric-card span, .metric-card small { display: block; color: var(--muted); }
.metric-card span { padding-left: 38px; font-size: .74rem; font-weight: 700; }
.metric-card strong { display: block; margin: 12px 0 2px; font-size: 2rem; line-height: 1; letter-spacing: -.05em; }
.metric-card small { font-size: .68rem; }

.overview-market-filter { margin: 14px 0 18px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); }
.overview-market-filter > header { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.overview-market-filter > header small { color: var(--blue); font-size: .59rem; font-weight: 900; }
.overview-market-filter > header h3 { margin: 0; color: var(--ink); font-size: .82rem; }
.overview-market-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.overview-market-card { position: relative; min-height: 82px; padding: 12px 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); color: var(--ink); cursor: pointer; text-align: right; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.overview-market-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: transparent; }
.overview-market-card span, .overview-market-card small { position: relative; z-index: 1; display: block; }
.overview-market-card span { font-size: .78rem; font-weight: 900; }
.overview-market-card small { margin-top: 6px; color: var(--muted); font-size: .58rem; line-height: 1.65; }
.overview-market-card:hover { border-color: color-mix(in srgb,var(--blue) 55%,var(--line)); }
.overview-market-card.active { border-color: color-mix(in srgb,var(--blue) 65%,var(--line)); background: color-mix(in srgb,var(--blue-soft) 72%,var(--surface-2)); box-shadow: 0 0 0 2px color-mix(in srgb,var(--blue) 10%,transparent); }
.overview-market-card.active::before { background: var(--blue); }
.overview-market-card.active span { color: #fff; }
.overview-market-card.active small { color: rgba(255,255,255,.82); }
.overview-market-card .market-card-title { display: flex; align-items: center; gap: 8px; }
.overview-market-card .market-card-title b { font: inherit; color: inherit; }
.market-logo, .market-logo-pair { position: relative; z-index: 1; flex: 0 0 auto; }
.market-logo { width: 32px; height: 32px; padding: 2px; overflow: hidden; object-fit: cover; background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.08); filter: none !important; mix-blend-mode: normal !important; opacity: 1 !important; isolation: isolate; }
.market-logo.tse-logo { object-position: 50% 22%; transform: scale(1.02); }
.market-logo.ime-logo { object-position: 50% 42%; }
.market-logo-pair { display: inline-flex !important; direction: ltr; width: 50px; height: 32px; }
.market-logo-pair .market-logo { position: absolute; top: 0; width: 32px; height: 32px; }
.market-logo-pair .market-logo:first-child { left: 0; }
.market-logo-pair .market-logo:last-child { left: 18px; }
html[data-theme="dark"] .market-logo { background: #fff; border-color: rgba(255,255,255,.75); box-shadow: 0 0 0 2px rgba(255,255,255,.16),0 2px 6px rgba(0,0,0,.38); }

.market-workspace { display: grid; grid-template-columns: 310px minmax(0,1fr); align-items: start; gap: 14px; direction: rtl; }
.market-filter-rail { position: sticky; top: 74px; z-index: 24; min-width: 0; }
.market-results-area { min-width: 0; }
.control-panel { position: relative; max-height: calc(100vh - 92px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; background: rgba(15,22,37,.96); border: 1px solid var(--line); border-radius: 12px; padding: 10px; box-shadow: var(--shadow-sm); }
.market-filter-rail .market-card-filter { grid-template-columns: 1fr; align-items: stretch; }
.market-filter-rail .market-selector-cards { grid-template-columns: 1fr; }
.market-filter-rail .tabs { display: grid; grid-template-columns: 1fr; width: 100%; }
.market-filter-rail .filters { grid-template-columns: 1fr; }
.market-filter-rail .search-field { grid-column: auto; }
.market-filter-rail .click-option-group { flex-wrap: wrap; overflow: visible; }
.market-filter-rail .click-option-group button { min-height: 31px; }
.market-card-filter { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 12px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.market-card-filter > span { color: var(--muted); font-size: .62rem; font-weight: 850; white-space: nowrap; }
.market-selector-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.market-selector-cards .overview-market-card { min-height: 58px; padding: 8px 11px; background: var(--surface) !important; color: var(--ink) !important; }
.market-selector-cards .overview-market-card.active { background: var(--blue) !important; border-color: var(--blue) !important; }
.market-selector-cards .overview-market-card.active span { color: #fff !important; }
.market-selector-cards .overview-market-card.active small { color: rgba(255,255,255,.86) !important; }
.market-selector-cards .overview-market-card span { font-size: .69rem; }
.market-selector-cards .overview-market-card small { margin-top: 2px; font-size: .51rem; }
.tabs { display: inline-flex; gap: 3px; padding: 3px; background: #0a1020; border: 1px solid var(--line); border-radius: 9px; overflow-x: auto; }
.tab { border: 0; background: transparent; color: var(--muted); border-radius: 7px; padding: 7px 12px; cursor: pointer; white-space: nowrap; font-size: .73rem; font-weight: 700; }
.tab.active { background: var(--surface-3); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.filters label { display: flex; flex-direction: column; gap: 4px; }
.filters label > span { color: #a9b4c7; font-size: .68rem; font-weight: 700; }
.click-option-field { display: flex; flex-direction: column; gap: 4px; }
.click-option-field > span, .trade-valuation-controls article > div > span { color: var(--muted); font-size: .62rem; font-weight: 750; }
.click-option-group { display: flex; min-height: 39px; padding: 3px; gap: 3px; overflow-x: auto; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface-2); }
.click-option-group button { flex: 1 0 auto; min-width: 76px; padding: 5px 8px; border: 1px solid transparent; border-radius: 6px; color: var(--muted); background: transparent; cursor: pointer; font: inherit; font-size: .58rem; font-weight: 800; }
.click-option-group button:hover { color: var(--ink); border-color: var(--line); }
.click-option-group button.active { color: #fff; border-color: var(--blue); background: var(--blue); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.filters select, .filters input { width: 100%; height: 39px; border: 1px solid var(--line-strong); background: #0b111c; color: var(--ink); border-radius: 8px; padding: 8px 10px; outline: none; font-size: .76rem; transition: border-color .15s, box-shadow .15s; }
.filters select:focus, .filters input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(18,201,255,.11); }

.rules-panel { display: flex; flex-wrap: wrap; gap: 7px; margin: 11px 0; }
.market-results-area > .rules-panel { margin-top: 0; }
.rule-chip { background: rgba(15,22,37,.8); border: 1px solid var(--line); color: var(--muted); padding: 5px 9px; border-radius: 6px; font-size: .68rem; }
.rule-chip b { color: #dbe7f6; }

.calculator-panel { margin: 14px 0; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(145deg, rgba(15,22,37,.97), rgba(10,16,32,.96)); box-shadow: var(--shadow-sm); }
.calculator-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.calculator-header small { color: var(--blue); font-size: .62rem; font-weight: 800; }
.calculator-header h2 { margin: 2px 0; font-size: 1rem; }
.calculator-header p { margin: 0; color: var(--muted); font-size: .68rem; }
.calculator-badge { padding: 5px 9px; border: 1px solid rgba(18,201,255,.35); border-radius: 7px; background: var(--blue-soft); color: var(--blue); font-size: .68rem; font-weight: 900; white-space: nowrap; }
.calculator-form { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; margin-top: 12px; }
.calculator-form label { display: flex; flex-direction: column; gap: 4px; }
.calculator-form label > span { color: #a9b4c7; font-size: .66rem; font-weight: 700; }
.calculator-form label small { color: var(--muted); font-size: .53rem; }
.calculator-form input, .calculator-form select { width: 100%; height: 39px; border: 1px solid var(--line-strong); border-radius: 8px; background: #0b111c; color: var(--ink); padding: 8px 10px; outline: none; font-size: .74rem; }
.calculator-form input:focus, .calculator-form select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(18,201,255,.1); }
.calculator-actions { grid-column: 1 / -1; display: flex; justify-content: flex-start; gap: 8px; padding-top: 3px; }
.calculator-result { margin-top: 14px; padding: 14px; border: 1px solid rgba(18,201,255,.25); border-radius: 11px; background: rgba(18,201,255,.035); }
.calculator-score-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.calculator-score-head small { color: var(--muted); font-size: .65rem; }
.calculator-score-head h3 { display: inline-block; margin: 5px 0 0; color: var(--blue); font-size: 2rem; line-height: 1; }
.calculator-score-head h3 span { color: var(--muted); font-size: .75rem; }
.calculator-score-head > div > b { margin-right: 8px; color: var(--green); font-size: .75rem; }
.calculator-pass, .calculator-fail { padding: 5px 8px; border-radius: 6px; font-size: .62rem; font-weight: 800; }
.calculator-pass { color: var(--green); background: var(--green-soft); border: 1px solid rgba(112,240,0,.3); }
.calculator-fail { color: var(--red); background: var(--red-soft); border: 1px solid rgba(255,77,103,.3); }
.calculator-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin-top: 12px; }
.calculator-metrics > div { padding: 9px; border-radius: 7px; background: rgba(255,255,255,.025); }
.calculator-metrics span { display: block; color: var(--muted); font-size: .56rem; }
.calculator-metrics strong { display: block; margin-top: 2px; font-size: .74rem; }
.calculator-components { margin-top: 12px; }
.calculator-components h4 { margin: 0 0 7px; font-size: .72rem; }
.calculator-components > div { display: grid; grid-template-columns: 90px 38px minmax(80px,1fr); align-items: center; gap: 7px; margin: 5px 0; }
.calculator-components span { color: var(--muted); font-size: .58rem; }
.calculator-components b { color: #dce7f7; font-size: .62rem; }
.calculator-components i { height: 4px; overflow: hidden; border-radius: 999px; background: #202b3f; }
.calculator-components em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--violet),var(--blue)); }
.calculator-note { margin: 10px 0 0; color: var(--muted); font-size: .6rem; }
.calculator-error { color: var(--red); font-size: .72rem; }

.trades-panel { margin: 14px 0; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(145deg, rgba(15,22,37,.97), rgba(10,16,32,.96)); box-shadow: var(--shadow-sm); }
.trade-jump-rail { position: fixed; top: 50%; right: 12px; z-index: 45; display: grid; width: 126px; gap: 6px; padding: 9px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb,var(--surface) 91%,transparent); box-shadow: var(--shadow); backdrop-filter: blur(15px); transform: translateY(-50%); }
.trade-jump-title { padding: 1px 5px 5px; color: var(--muted); font-size: .56rem; font-weight: 800; }
.trade-jump-rail button { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 6px; min-height: 37px; border: 1px solid transparent; border-radius: 8px; padding: 6px 7px; background: transparent; color: var(--muted); text-align: right; cursor: pointer; font-family: inherit; font-size: .61rem; font-weight: 800; }
.trade-jump-rail button:hover { color: var(--ink); border-color: var(--line); background: var(--surface-2); }
.trade-jump-rail button.active { color: var(--ink); border-color: color-mix(in srgb,var(--blue) 38%,var(--line)); background: var(--blue-soft); }
.trade-jump-rail button.long.active { border-color: color-mix(in srgb,var(--violet,#a770ff) 42%,var(--line)); background: color-mix(in srgb,var(--violet,#a770ff) 11%,var(--surface)); }
.trade-jump-rail button i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb,var(--blue) 12%,transparent); }
.trade-jump-rail button.long i { background: var(--violet,#a770ff); box-shadow: 0 0 0 3px color-mix(in srgb,var(--violet,#a770ff) 12%,transparent); }
.trade-jump-rail button b { min-width: 21px; padding: 2px 5px; border-radius: 999px; background: color-mix(in srgb,var(--ink) 8%,transparent); color: inherit; text-align: center; font-size: .54rem; }
.trade-jump-rail button.trade-rail-add { grid-template-columns: 17px minmax(0,1fr); color: var(--green); border-color: color-mix(in srgb,var(--green) 30%,var(--line)); background: color-mix(in srgb,var(--green-soft) 45%,var(--surface)); }
.trade-jump-rail button.trade-rail-add i { display: grid; width: 17px; height: 17px; place-items: center; color: var(--surface); background: var(--green); box-shadow: none; font-size: .72rem; font-style: normal; }
.trade-strategy-group[id^="open-trades-"], .trade-strategy-group[id^="closed-trades-"] { scroll-margin-top: 82px; }
.closed-summary-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(155px,1fr)); gap: 10px; margin: 13px 0; }
.closed-summary-grid article { padding: 14px 15px; border: 1px solid var(--line); border-radius: 11px; background: rgba(15,22,37,.94); }
.closed-summary-grid article { text-align: center; }
.closed-summary-grid span, .closed-summary-grid small { display: block; color: var(--muted); font-size: .62rem; }
.closed-summary-grid strong { display: block; margin: 7px 0 2px; color: #e7edf8; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.closed-summary-grid .win strong { color: var(--green); }
.closed-summary-grid .loss strong { color: var(--red); }
.closed-summary-grid .net strong.profit-up { color: var(--green); }
.closed-summary-grid .net strong.profit-down { color: var(--red); }
.closed-trades-panel { border-color: rgba(112,240,0,.18); }
.closed-trades-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.closed-trades-actions .secondary-button:disabled { cursor: not-allowed; opacity: .45; }
.realized-result { display: grid; grid-template-columns: repeat(auto-fit,minmax(125px,1fr)); gap: 7px; margin: 10px 12px 0; padding: 10px; border: 1px solid rgba(112,240,0,.22); border-radius: 9px; background: rgba(112,240,0,.035); }
.realized-result > div { padding: 7px 8px; border-radius: 7px; background: rgba(255,255,255,.025); }
.realized-result span { display: block; color: var(--muted); font-size: .56rem; }
.realized-result strong { display: block; margin-top: 3px; font-size: .8rem; font-variant-numeric: tabular-nums; }
.trades-panel.editing { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(18,201,255,.09), var(--shadow-sm); }
.trades-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.trades-header small { color: var(--green); font-size: .62rem; font-weight: 800; }
.trades-header h2 { margin: 2px 0; font-size: 1rem; }
.trades-header p { margin: 0; color: var(--muted); font-size: .68rem; }
.trades-header-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.trade-valuation-controls { display: grid; grid-template-columns: 1.35fr 1fr; gap: 9px; margin-top: 12px; }
.trade-valuation-controls article { display: grid; grid-template-columns: auto minmax(170px,1fr) minmax(170px,1fr); align-items: end; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.trade-valuation-controls article > strong { align-self: center; color: var(--ink); font-size: .68rem; white-space: nowrap; }
.trade-valuation-controls article > div { display: flex; flex-direction: column; gap: 4px; }
.trade-valuation-controls article > small { align-self: center; color: var(--muted); font-size: .55rem; line-height: 1.6; }
.trade-valuation-controls .click-option-group { min-height: 35px; }
.portfolio-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.portfolio-summary-group { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: rgba(7,12,21,.58); }
.portfolio-summary-group.total { grid-column: 1 / -1; border-color: rgba(46,230,155,.24); background: linear-gradient(120deg,rgba(46,230,155,.055),rgba(18,201,255,.035)); }
.portfolio-summary-group.covered { border-color: rgba(18,201,255,.2); }
.portfolio-summary-group.long { border-color: rgba(167,112,255,.24); }
.portfolio-summary-group.underlying { border-color: color-mix(in srgb,var(--green) 28%,var(--line)); }
.portfolio-summary-group > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.018); }
.portfolio-summary-group > header small { color: var(--muted); font-size: .55rem; }
.portfolio-summary-group > header h3 { margin: 2px 0 0; font-size: .76rem; }
.portfolio-summary-group > header > span { padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .57rem; font-weight: 800; }
.portfolio-summary-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 10px; }
.portfolio-summary-metrics.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.portfolio-summary-metrics.four { grid-template-columns: repeat(2,minmax(0,1fr)); }
.portfolio-summary-metrics.primary { grid-template-columns: 1fr; }
.portfolio-summary-metrics > div { padding: 10px; border: 1px solid rgba(255,255,255,.045); border-radius: 8px; background: rgba(255,255,255,.022); }
.portfolio-summary-metrics > div { text-align: center; }
.portfolio-summary-metrics > div.best-profit { border-color: var(--green); box-shadow: 0 0 0 1px color-mix(in srgb,var(--green) 30%,transparent), 0 0 18px color-mix(in srgb,var(--green) 10%,transparent); background: color-mix(in srgb,var(--green) 7%,var(--surface-2)); }
.portfolio-summary-metrics span, .portfolio-summary-metrics small { display: block; color: var(--muted); font-size: .56rem; }
.portfolio-summary-metrics strong { display: block; margin: 5px 0 2px; color: #e7edf8; font-size: 1rem; font-variant-numeric: tabular-nums; }
.portfolio-summary-metrics.primary strong { font-size: clamp(1rem,1.35vw,1.18rem); line-height: 1.75; white-space: normal; }
.portfolio-summary-metrics .liquidity-share { border-color: color-mix(in srgb,var(--blue) 22%,var(--line)); background: color-mix(in srgb,var(--blue-soft) 54%,transparent); }
.portfolio-summary-metrics .liquidity-share strong { color: var(--blue); }
.portfolio-summary-group.long .portfolio-summary-metrics .liquidity-share { border-color: color-mix(in srgb,var(--blue) 22%,var(--line)); background: color-mix(in srgb,var(--blue-soft) 54%,transparent); }
.portfolio-summary-group.long .portfolio-summary-metrics .liquidity-share strong { color: var(--blue); }
.portfolio-summary-details { border-top: 1px solid var(--line); }
.portfolio-summary-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; cursor: pointer; list-style: none; user-select: none; }
.portfolio-summary-details > summary::-webkit-details-marker { display: none; }
.portfolio-summary-details > summary span { color: var(--muted); font-size: .56rem; font-weight: 800; }
.portfolio-summary-details > summary b { padding: 4px 9px; border: 1px solid color-mix(in srgb,var(--blue) 35%,var(--line)); border-radius: 6px; color: var(--blue); font-size: .54rem; }
.portfolio-summary-details > summary i { font-style: normal; }
.portfolio-summary-details > summary i:last-child { display: none; }
.portfolio-summary-details[open] > summary { border-bottom: 1px solid var(--line); }
.portfolio-summary-details[open] > summary i:first-child { display: none; }
.portfolio-summary-details[open] > summary i:last-child { display: inline; }
.portfolio-summary-details .portfolio-summary-metrics { padding-top: 8px; }
.strategy-liquidity-card { display: grid; grid-template-columns: minmax(0,1fr) 82px; align-items: center; gap: 8px; min-height: 104px; border-color: color-mix(in srgb,var(--blue) 22%,var(--line)) !important; background: color-mix(in srgb,var(--blue-soft) 45%,var(--surface-2)) !important; }
.strategy-liquidity-card > div:first-child { min-width: 0; text-align: center; }
.strategy-liquidity-card > div:first-child > span,.strategy-liquidity-card > div:first-child > small { display: block; color: var(--muted); font-size: .56rem; }
.strategy-liquidity-card > div:first-child > strong { display: block; overflow-wrap: anywhere; margin: 5px 0 2px; color: var(--ink); font-size: 1rem; font-variant-numeric: tabular-nums; }
.strategy-liquidity-card > div:first-child > b { display: block; margin-top: 5px; color: var(--blue); font-size: .58rem; }
.strategy-profit-card { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto; align-items: center; column-gap: 8px; min-height: 104px; text-align: center; }
.strategy-profit-card > span,.strategy-profit-card > strong,.strategy-profit-card > small { grid-column: 1; }
.strategy-profit-card > span,.strategy-profit-card > small { display: block; color: var(--muted); font-size: .56rem; }
.strategy-profit-card > strong { display: block; max-width: 100%; overflow-wrap: anywhere; margin: 5px 0 2px; font-size: 1rem; font-variant-numeric: tabular-nums; }
.liquidity-donut { position: relative; display: grid; width: 148px; max-width: 100%; aspect-ratio: 1; place-items: center; margin-inline: auto; }
.liquidity-donut svg { grid-area: 1 / 1; width: 100%; height: 100%; overflow: visible; }
.liquidity-donut > div { grid-area: 1 / 1; z-index: 1; text-align: center; pointer-events: none; }
.liquidity-donut > div strong,.liquidity-donut > div small { display: block; }
.liquidity-donut > div strong { color: var(--ink); font-size: .8rem; font-variant-numeric: tabular-nums; }
.liquidity-donut > div small { color: var(--muted); font-size: .48rem; }
.liquidity-donut.compact { width: 76px; }
.liquidity-donut.compact > div strong { font-size: .62rem; }
.liquidity-donut.compact > div small { font-size: .42rem; }
.liquidity-chart-empty { display: grid; min-height: 70px; place-items: center; color: var(--muted); text-align: center; font-size: .52rem; }
.asset-portfolio-breakdown { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 8px; padding: 10px; }
.asset-portfolio-row { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb,var(--surface-2) 82%,transparent); }
.asset-portfolio-row > header { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding-bottom: 8px; border-bottom: 1px solid var(--line); text-align: center; }
.asset-portfolio-row > header strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.asset-portfolio-row > header span { flex: 0 0 auto; color: var(--muted); font-size: .56rem; }
.asset-portfolio-row > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; padding-top: 8px; }
.asset-portfolio-row section { min-width: 0; padding: 7px; border-radius: 7px; background: color-mix(in srgb,var(--surface) 76%,transparent); text-align: center; }
.asset-portfolio-row section > span { display: block; color: var(--muted); font-size: .54rem; }
.asset-portfolio-row section > b { display: block; overflow-wrap: anywhere; margin-top: 4px; color: var(--ink); font-size: .75rem; font-variant-numeric: tabular-nums; }
.asset-portfolio-row section > b small { color: inherit; font-size: .58rem; }
.asset-portfolio-row section > small { display: block; margin-top: 3px; color: var(--blue); font-size: .52rem; font-weight: 800; }
.asset-portfolio-row > footer { padding-top: 7px; color: var(--muted); font-size: .52rem; text-align: center; }
.asset-liquidity-composition { grid-column: 1 / -1; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); }
.asset-profit-composition { border-color: color-mix(in srgb,var(--blue) 24%,var(--line)); }
.asset-liquidity-composition > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border-bottom: 1px solid var(--line); }
.asset-liquidity-composition > header strong,.asset-liquidity-composition > header small { display: block; }
.asset-liquidity-composition > header strong { color: var(--ink); font-size: .66rem; }
.asset-liquidity-composition > header small { margin-top: 2px; color: var(--muted); font-size: .51rem; }
.asset-liquidity-composition > header > span { color: var(--muted); font-size: .53rem; }
.asset-liquidity-chart { display: grid; grid-template-columns: minmax(130px,180px) minmax(0,1fr); align-items: center; gap: 12px; max-width: 620px; margin-inline: auto; padding: 10px 14px; }
.asset-liquidity-chart ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; }
.asset-liquidity-chart li { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 6px; min-width: 0; padding: 6px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.asset-liquidity-chart li i { width: 8px; height: 8px; border-radius: 50%; }
.asset-liquidity-chart li span { overflow: hidden; color: var(--muted); font-size: .53rem; text-overflow: ellipsis; white-space: nowrap; }
.asset-liquidity-chart li b { color: var(--ink); font-size: .57rem; font-variant-numeric: tabular-nums; }
.closed-portfolio-details { margin: 0 0 13px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.closed-portfolio-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 13px; cursor: pointer; list-style: none; user-select: none; }
.closed-portfolio-details > summary::-webkit-details-marker { display: none; }
.closed-portfolio-details > summary span small,.closed-portfolio-details > summary span strong { display: block; }
.closed-portfolio-details > summary span small { color: var(--muted); font-size: .54rem; }
.closed-portfolio-details > summary span strong { margin-top: 2px; color: var(--ink); font-size: .68rem; }
.closed-portfolio-details > summary b { padding: 4px 9px; border: 1px solid color-mix(in srgb,var(--blue) 35%,var(--line)); border-radius: 6px; color: var(--blue); font-size: .54rem; }
.closed-portfolio-details > summary i { font-style: normal; }
.closed-portfolio-details > summary i:last-child { display: none; }
.closed-portfolio-details[open] > summary { border-bottom: 1px solid var(--line); }
.closed-portfolio-details[open] > summary i:first-child { display: none; }
.closed-portfolio-details[open] > summary i:last-child { display: inline; }
.underlying-monitor { margin-top: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); box-shadow: var(--shadow-sm); }
.underlying-monitor > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: right; }
.underlying-monitor > header small,.underlying-monitor > header p { display: block; margin: 0; color: var(--muted); font-size: .55rem; }
.underlying-monitor > header h3 { margin: 2px 0; color: var(--ink); font-size: .82rem; }
.underlying-monitor > header > span { padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--blue); font-size: .57rem; font-weight: 850; }
.underlying-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.underlying-summary > div { padding: 9px; border-radius: 8px; background: var(--surface-2); text-align: center; }
.underlying-summary span { display: block; color: var(--muted); font-size: .55rem; }
.underlying-summary strong { display: block; margin-top: 4px; color: var(--ink); font-size: .88rem; overflow-wrap: anywhere; }
.underlying-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(270px,1fr)); gap: 10px; padding: 12px; }
.underlying-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.underlying-card > header,.underlying-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; }
.underlying-card > header { border-bottom: 1px solid var(--line); }
.underlying-card > header strong,.underlying-card > header small { display: block; text-align: center; }
.underlying-card > header strong { color: var(--ink); font-size: .72rem; }
.underlying-card > header small,.underlying-card > header span,.underlying-card > footer { color: var(--muted); font-size: .54rem; }
.underlying-card > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; padding: 9px; }
.underlying-card section { padding: 8px 6px; border-radius: 7px; background: var(--surface); text-align: center; }
.underlying-card section span,.underlying-card section small { display: block; color: var(--muted); font-size: .52rem; }
.underlying-card section b { display: block; margin: 4px 0 2px; color: var(--ink); font-size: .7rem; overflow-wrap: anywhere; }
.underlying-card > footer { border-top: 1px solid var(--line); }
.underlying-card > footer > div { display: flex; gap: 5px; }
.underlying-group-card > details { border-top: 1px solid var(--line); }
.underlying-lots > summary { padding: 9px 11px; color: var(--blue); text-align: center; cursor: pointer; list-style: none; font-size: .58rem; font-weight: 850; }
.underlying-lots > summary::-webkit-details-marker { display: none; }
.underlying-lots > summary::after { content: "⌄"; display: inline-block; margin-right: 6px; transition: transform .15s ease; }
.underlying-lots[open] > summary::after { transform: rotate(180deg); }
.underlying-lots > div { display: grid; gap: 8px; padding: 0 9px 9px; }
.underlying-lot { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.underlying-lot > header,.underlying-lot > footer { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 7px 8px; }
.underlying-lot > header { border-bottom: 1px solid var(--line); color: var(--muted); font-size: .53rem; }
.underlying-lot > header strong { color: var(--ink); font-size: .57rem; }
.underlying-lot > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; padding: 7px; }
.underlying-lot > div > span { padding: 6px; border-radius: 6px; color: var(--muted); background: var(--surface-2); text-align: center; font-size: .49rem; }
.underlying-lot > div b { display: block; margin-top: 3px; color: var(--ink); overflow-wrap: anywhere; font-size: .56rem; }
.underlying-lot > p { margin: 0 8px 7px; color: var(--muted); text-align: center; font-size: .5rem; }
.underlying-lot > footer { justify-content: center; border-top: 1px solid var(--line); }
.long-exercise-cash-card hr { height: 1px; margin: 8px 0; border: 0; background: var(--line); }
.long-exercise-cash-card b { display: block; margin: 4px 0 2px; color: var(--ink); font-size: .82rem; font-variant-numeric: tabular-nums; }
.long-profit-comparison { padding: 10px 12px 12px; }
.long-profit-comparison > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.long-profit-comparison > header small, .long-profit-comparison > header > span { color: var(--muted); font-size: .52rem; }
.long-profit-comparison > header h4 { margin: 2px 0 0; font-size: .68rem; }
.long-profit-rows { display: grid; gap: 10px; }
.long-profit-row > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.long-profit-row span { color: var(--muted); font-size: .56rem; }
.long-profit-row strong { font-size: .66rem; font-variant-numeric: tabular-nums; }
.long-profit-value { display: flex; align-items: baseline; gap: 7px; direction: rtl; }
.long-profit-value small { font-size: .56rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.long-profit-track { position: relative; direction: ltr; height: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-3); }
.long-profit-track > b { position: absolute; z-index: 2; top: -1px; bottom: -1px; left: 50%; width: 1px; background: var(--line-strong); }
.long-profit-track > i { position: absolute; top: 2px; bottom: 2px; z-index: 1; min-width: 2px; border-radius: 999px; }
.long-profit-track > i.premium { background: var(--blue); }
.long-profit-track > i.exercise { border: 1px solid var(--violet); background: color-mix(in srgb,var(--violet) 55%,transparent); }
.long-profit-track > i.negative { opacity: .72; }
.trade-profit-comparison { margin: 0 12px 10px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); }
.account-growth-details { margin-top: 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.account-growth-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; cursor: pointer; list-style: none; user-select: none; }
.account-growth-details > summary::-webkit-details-marker { display: none; }
.account-growth-details > summary span { color: var(--muted); font-size: .57rem; font-weight: 800; }
.account-growth-details > summary b { padding: 4px 9px; border: 1px solid color-mix(in srgb,var(--blue) 35%,var(--line)); border-radius: 6px; color: var(--blue); font-size: .54rem; }
.account-growth-details > summary i { font-style: normal; }
.account-growth-details > summary i:last-child { display: none; }
.account-growth-details[open] > summary i:first-child { display: none; }
.account-growth-details[open] > summary i:last-child { display: inline; }
.account-growth-details .account-growth-kpis { padding-top: 0; }
.account-growth-panel { margin-top: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.account-growth-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.account-growth-panel > header small { color: var(--blue); font-size: .56rem; font-weight: 800; }
.account-growth-panel > header h3 { margin: 2px 0; color: var(--ink); font-size: .82rem; }
.account-growth-panel > header p { margin: 0; color: var(--muted); font-size: .59rem; }
.account-growth-panel > header > span { flex: 0 0 auto; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: var(--surface); font-size: .56rem; }
.account-growth-expand > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 13px; cursor: pointer; list-style: none; user-select: none; background: color-mix(in srgb,var(--blue-soft) 24%,var(--surface)); }
.account-growth-expand > summary::-webkit-details-marker { display: none; }
.account-growth-expand > summary span { color: var(--ink); font-size: .62rem; font-weight: 850; }
.account-growth-expand > summary b { padding: 5px 11px; border: 1px solid color-mix(in srgb,var(--blue) 32%,var(--line)); border-radius: 7px; color: var(--blue); background: var(--surface); font-size: .57rem; }
.account-growth-expand > summary i { font-style: normal; }
.account-growth-expand > summary i:last-child { display: none; }
.account-growth-expand[open] > summary { border-bottom: 1px solid var(--line); }
.account-growth-expand[open] > summary i:first-child { display: none; }
.account-growth-expand[open] > summary i:last-child { display: inline; }
.account-growth-expand-body { overflow: hidden; }
.account-capital-form { display: grid; grid-template-columns: repeat(2,minmax(210px,1fr)) auto auto; align-items: end; gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); background: color-mix(in srgb,var(--blue-soft) 25%,var(--surface)); }
.account-capital-form label { display: flex; flex-direction: column; gap: 4px; }
.account-capital-form label span { color: var(--muted); font-size: .57rem; font-weight: 800; }
.account-capital-form input { width: 100%; height: 38px; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: .72rem; outline: none; }
.account-capital-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb,var(--blue) 12%,transparent); }
.account-capital-form > small { grid-column: 1 / -1; align-self: center; color: var(--muted); font-size: .54rem; line-height: 1.75; }
.account-growth-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; padding: 10px 10px 0; }
.account-growth-kpis > div { padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.account-growth-kpis > div.risk { border-color: color-mix(in srgb,var(--red) 38%,var(--line)); background: color-mix(in srgb,var(--red-soft) 62%,var(--surface-2)); }
.account-growth-kpis > div.risk strong { color: var(--red); }
.account-growth-kpis span, .account-growth-kpis small { display: block; color: var(--muted); font-size: .54rem; }
.account-growth-kpis strong { display: block; margin: 4px 0 2px; color: var(--ink); font-size: .88rem; font-variant-numeric: tabular-nums; }
.account-growth-chart { direction: ltr; min-height: 220px; margin: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.account-growth-chart svg { display: block; width: 100%; height: auto; min-height: 220px; font-family: "Vazirmatn",Tahoma,Arial,sans-serif; font-size: 11px; fill: var(--muted); }
.account-growth-chart .account-grid { stroke: var(--line); stroke-width: 1; }
.account-growth-chart .account-zero-line { stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 5 5; }
.account-growth-chart .account-growth-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.account-growth-chart .account-growth-line.positive { stroke: var(--green); }
.account-growth-chart .account-growth-line.negative { stroke: var(--red); }
.account-growth-chart .account-event-point { fill: var(--surface); stroke: var(--blue); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.account-growth-chart .account-current-point { fill: var(--blue); stroke: var(--surface); stroke-width: 3; vector-effect: non-scaling-stroke; }
.account-growth-chart .account-last-label { fill: var(--ink); font-size: 12px; font-weight: 800; }
.account-growth-note { margin: 0; padding: 0 13px 11px; color: var(--muted); font-size: .54rem; line-height: 1.8; }
.profit-recognition-panel { margin: 14px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow-sm); }
.profit-recognition-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 15px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.profit-recognition-header small { color: var(--blue); font-size: .6rem; font-weight: 850; }
.profit-recognition-header h2 { margin: 2px 0; font-size: 1rem; }
.profit-recognition-header p { margin: 0; color: var(--muted); font-size: .65rem; }
#profitRecognitionContent { padding: 12px; }
.profit-recognition-kpis { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.profit-recognition-card { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.profit-recognition-card.current { border-top: 3px solid var(--blue); }
.profit-recognition-card.final { border-top: 3px solid var(--green); }
.profit-recognition-card.liquidation { border-top: 3px solid var(--accent,#ffa028); }
.profit-recognition-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 11px 12px 7px; }
.profit-recognition-card > header small { color: var(--muted); font-size: .54rem; }
.profit-recognition-card > header h3 { margin: 2px 0 0; color: var(--ink); font-size: .82rem; }
.profit-recognition-card > header > span { flex: 0 0 auto; padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface-2); font-size: .54rem; font-weight: 800; }
.profit-recognition-card > header > span.last-days { color: var(--green); border-color: color-mix(in srgb,var(--green) 35%,var(--line)); background: var(--green-soft); }
.profit-recognition-amount { display: block; padding: 2px 12px 8px; color: var(--ink); font-size: clamp(1.35rem,2.5vw,2rem); font-variant-numeric: tabular-nums; }
.profit-recognition-rates { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; padding: 0 10px 10px; }
.profit-recognition-rates > div { padding: 8px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); }
.profit-recognition-rates span { display: block; color: var(--muted); font-size: .52rem; }
.profit-recognition-rates b { display: block; margin-top: 3px; color: var(--ink); font-size: .74rem; font-variant-numeric: tabular-nums; }
.profit-recognition-card > footer { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 8px 11px; border-top: 1px solid var(--line); color: var(--muted); background: var(--surface-2); font-size: .54rem; }
.profit-recognition-card > footer b { color: var(--ink); }
.profit-recognition-context { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 10px; }
.profit-recognition-context > div { padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.profit-recognition-context span,
.profit-recognition-context small { display: block; color: var(--muted); font-size: .53rem; }
.profit-recognition-context strong { display: block; margin: 4px 0 2px; color: var(--ink); font-size: .82rem; }
.profit-recognition-details { margin-top: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; }
.profit-recognition-details > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.profit-recognition-details > header small,
.profit-recognition-details > header > span { color: var(--muted); font-size: .53rem; }
.profit-recognition-details > header h3 { margin: 2px 0 0; font-size: .76rem; }
.profit-recognition-table-wrap { overflow-x: auto; }
.profit-recognition-details table { width: 100%; min-width: 820px; border-collapse: collapse; }
.profit-recognition-details table { min-width: 1280px; }
.recognition-quote-stack { display: grid; gap: 3px; min-width: 110px; }
.recognition-quote-stack span { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .49rem; }
.recognition-quote-stack b { color: var(--ink); font-size: .56rem; white-space: nowrap; }
.profit-recognition-details th,
.profit-recognition-details td { padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--ink); text-align: right; font-size: .59rem; }
.profit-recognition-details th { color: var(--muted); background: var(--surface-3); font-size: .54rem; white-space: nowrap; }
.profit-recognition-details tbody tr:last-child td { border-bottom: 0; }
.profit-recognition-details tbody tr:hover td { background: var(--blue-soft); }
.profit-recognition-details td strong,
.profit-recognition-details td small { display: block; }
.profit-recognition-details td small { margin-top: 2px; color: var(--muted); font-size: .49rem; }
.profit-recognition-status { display: inline-block; padding: 3px 7px; border-radius: 999px; font-size: .51rem; font-weight: 850; }
.profit-recognition-status.open { color: var(--blue); background: var(--blue-soft); }
.profit-recognition-status.closed { color: var(--green); background: var(--green-soft); }
.profit-recognition-note { margin: 10px 2px 0; color: var(--muted); font-size: .52rem; line-height: 1.8; }
.profit-recognition-header-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.profit-mode-toggle { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.profit-mode-toggle button { min-height: 30px; padding: 4px 9px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font: inherit; font-size: .55rem; font-weight: 800; cursor: pointer; }
.profit-mode-toggle button.active { color: #fff; background: var(--blue); }
.profit-recognition-strategies { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 10px; }
.profit-recognition-strategy { padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); }
.profit-recognition-strategy > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.profit-recognition-strategy h3 { margin: 0; font-size: .72rem; }
.profit-recognition-strategy header span { color: var(--muted); font-size: .51rem; }
.profit-recognition-strategy > strong { display: block; margin: 8px 0; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.profit-recognition-strategy > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.profit-recognition-strategy > div span { padding: 7px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: .5rem; background: var(--surface); }
.profit-recognition-strategy > div b { display: block; margin-top: 3px; color: var(--ink); font-size: .68rem; }
.underlying-tracker { margin-top: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; }
.underlying-tracker > header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.underlying-tracker header small { color: var(--blue); font-size: .51rem; font-weight: 800; }
.underlying-tracker h3 { margin: 2px 0 0; font-size: .75rem; }
.underlying-tracker header > span { color: var(--muted); font-size: .54rem; }
.underlying-position-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 9px; }
.underlying-position { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.underlying-position > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 8px 9px; }
.underlying-position header strong,.underlying-position header small { display: block; }
.underlying-position header strong { font-size: .7rem; }
.underlying-position header small,.underlying-position header span { color: var(--muted); font-size: .49rem; }
.underlying-position > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; padding: 0 9px 8px; }
.underlying-position > div span { color: var(--muted); font-size: .51rem; }
.underlying-position > div b { display: block; margin-top: 2px; color: var(--ink); font-size: .65rem; }
.underlying-position > footer { display: flex; justify-content: space-between; gap: 8px; padding: 7px 9px; border-top: 1px solid var(--line); color: var(--muted); font-size: .51rem; }
.trade-form-slot { display: none; }
.trade-form { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 9px; margin-top: 12px; }
.trade-form label { display: flex; flex-direction: column; gap: 4px; }
.trade-form label > span { color: #a9b4c7; font-size: .66rem; font-weight: 700; }
.trade-date-field { position: relative; display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.trade-date-field:has(.jalali-date-picker:not(.hidden)) { z-index: 40; }
.trade-date-field > span { color: #a9b4c7; font-size: .66rem; font-weight: 700; }
.jalali-input-wrap { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px; }
.trade-form .jalali-input-wrap input[readonly] { cursor: pointer; color: var(--ink); background: var(--surface-2); }
.trade-form .jalali-picker-button { min-width: 58px; height: 39px; padding: 5px 9px; border: 1px solid color-mix(in srgb,var(--blue) 34%,var(--line)); border-radius: 8px; color: var(--blue); background: var(--blue-soft); font-size: .6rem; font-weight: 850; cursor: pointer; }
.jalali-date-picker { position: absolute; z-index: 30; top: calc(100% + 7px); inset-inline-end: 0; width: min(286px,calc(100vw - 44px)); padding: 9px; border: 1px solid var(--line-strong); border-radius: 11px; direction: rtl; color: var(--ink); background: var(--surface); box-shadow: var(--shadow-lg); }
.jalali-date-picker.open-upward { top: auto; bottom: calc(100% + 7px); }
.jalali-date-picker.floating-calendar { position: fixed; z-index: 140; }
.jalali-date-picker > header { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 5px; margin-bottom: 7px; }
.jalali-date-picker > header strong { text-align: center; font-size: .7rem; }
.jalali-date-picker > header button { width: 34px; height: 31px; padding: 0; border: 0; border-radius: 7px; color: var(--blue); background: var(--blue-soft); font-size: 1.15rem; cursor: pointer; }
.jalali-weekdays, .jalali-days { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; }
.jalali-weekdays { margin-bottom: 4px; color: var(--muted); text-align: center; font-size: .54rem; font-weight: 800; }
.jalali-days > button, .jalali-empty { min-width: 0; height: 31px; padding: 0; border: 0; border-radius: 7px; color: var(--ink); background: transparent; font-size: .62rem; cursor: pointer; }
.jalali-days > button:hover { color: var(--blue); background: var(--blue-soft); }
.jalali-days > button.today { box-shadow: inset 0 0 0 1px var(--blue); }
.jalali-days > button.selected { color: #fff; background: var(--blue); box-shadow: none; }
.jalali-date-picker > footer { display: flex; justify-content: center; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); }
.jalali-date-picker > footer button { padding: 5px 12px; border: 0; border-radius: 7px; color: var(--blue); background: var(--blue-soft); font-size: .58rem; font-weight: 850; cursor: pointer; }
.trade-form label small { color: var(--muted); font-size: .53rem; }
.trade-form input, .trade-form select { width: 100%; height: 39px; border: 1px solid var(--line-strong); border-radius: 8px; background: #0b111c; color: var(--ink); padding: 8px 10px; outline: none; font-size: .74rem; }
.trade-form input[readonly] { cursor: not-allowed; color: var(--muted); background: color-mix(in srgb,var(--surface-2) 82%,var(--neutral)); }
.trade-form label.settlement-only > span { color: var(--green); }
.trade-form input:focus, .trade-form select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(18,201,255,.1); }
.ltr-input { direction: ltr; text-align: right; }
.trade-contract-meta { grid-column: 1 / -1; min-height: 34px; padding: 7px 9px; border: 1px solid rgba(18,201,255,.16); border-radius: 7px; background: rgba(18,201,255,.035); color: var(--muted); font-size: .6rem; }
.trade-contract-meta b { color: #dce7f7; }
#underlyingExerciseCalculation { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px; text-align: center; }
#underlyingExerciseCalculation strong { flex-basis: 100%; color: var(--text); }
#underlyingExerciseCalculation .positive { color: var(--success); }
#underlyingExerciseCalculation .negative { color: var(--danger); }
.trade-form-actions { grid-column: 1 / -1; display: flex; gap: 8px; padding-top: 3px; }
.trade-entry-confirmation { grid-column: 1 / -1; display: flex !important; min-height: 48px; flex-direction: row !important; align-items: center; gap: 10px !important; padding: 10px 12px; border: 1px solid color-mix(in srgb,var(--amber) 55%,var(--line)); border-radius: 8px; background: var(--amber-soft); cursor: pointer; }
.trade-entry-confirmation input { width: 19px !important; height: 19px !important; flex: 0 0 auto; margin: 0; accent-color: var(--green); }
.trade-entry-confirmation span { color: var(--ink) !important; font-size: .63rem !important; line-height: 1.8; }
.trade-entry-confirmation:has(input:checked) { border-color: color-mix(in srgb,var(--green) 55%,var(--line)); background: var(--green-soft); }
.trade-message { margin-top: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: .68rem; }
.trade-message.success { color: var(--green); background: var(--green-soft); border-color: rgba(112,240,0,.3); }
.trade-message.error { color: var(--red); background: var(--red-soft); border-color: rgba(255,77,103,.3); }
.trades-list { display: grid; grid-template-columns: 1fr; align-items: start; gap: 14px; margin-top: 14px; }
#tradesList { grid-template-columns: repeat(2,minmax(0,1fr)); }
#closedTradesList { grid-template-columns: repeat(2,minmax(0,1fr)); }
#tradesList.single-strategy { grid-template-columns: 1fr; }
#tradesList .trade-strategy-grid { grid-template-columns: 1fr; }
#closedTradesList .trade-strategy-grid { grid-template-columns: 1fr; }
.strategy-filter-hidden { display: none !important; }
.trades-list > .trades-empty { grid-column: 1 / -1; }
.trade-strategy-group { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: rgba(7,12,21,.48); }
.trade-strategy-group > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.025); }
.trade-strategy-group.covered > header { box-shadow: inset -3px 0 0 var(--blue); }
.trade-strategy-group.long > header { box-shadow: inset -3px 0 0 #a770ff; }
.trade-strategy-group h3 { margin: 0 0 2px; font-size: .78rem; }
.trade-strategy-group header small { color: var(--muted); font-size: .56rem; }
.trade-strategy-group header > span { min-width: 58px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); text-align: center; font-size: .58rem; font-weight: 800; }
.trade-strategy-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 10px; padding: 10px; }
.trade-strategy-grid > .trades-empty { grid-column: 1 / -1; }
.trades-empty { padding: 28px 16px; border: 1px dashed var(--line-strong); border-radius: 10px; color: var(--muted); text-align: center; font-size: .72rem; }
.trade-card { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #0b111c; }
.compact-trade-card { min-width: 0; }
.compact-trade-card > .compact-trade-header { align-items: center; justify-content: space-between; padding-block: 10px; }
.compact-trade-header .symbol { color: var(--ink); font-size: .88rem; }
.compact-trade-card .compact-primary-returns { grid-template-columns: repeat(2,minmax(0,1fr)); padding-bottom: 8px; }
.compact-trade-card .compact-primary-returns.single { grid-template-columns: 1fr; }
.compact-return-box { display: grid; min-width: 0; min-height: 58px; align-content: center; justify-items: center; gap: 5px; padding: 9px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); text-align: center; }
.compact-return-box span { min-width: 0; color: var(--muted); font-size: .58rem; font-weight: 750; line-height: 1.65; }
.compact-return-box strong { display: block; max-width: 100%; min-width: 0; direction: rtl; text-align: center; white-space: normal; overflow-wrap: anywhere; font-size: clamp(.62rem,.9vw,.78rem); font-variant-numeric: tabular-nums; line-height: 1.55; }
.compact-return-box.review-profit { border-color: var(--green); box-shadow: 0 0 0 1px color-mix(in srgb,var(--green) 25%,transparent); background: color-mix(in srgb,var(--green) 7%,var(--surface-2)); }
.trade-review-tag { display: inline-flex; align-items: center; min-height: 20px; margin-inline-start: 6px; padding: 2px 6px; border-radius: 999px; color: var(--green); background: var(--green-soft); font-size: .49rem; font-weight: 900; white-space: nowrap; }
.compact-trade-itm { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 7px; border: 1px solid currentColor; border-radius: 999px; font-size: .54rem; font-weight: 850; white-space: nowrap; }
.compact-trade-card .covered-fulfillment-chart,
.compact-trade-card .trade-profit-comparison { margin-inline: 10px; }
.compact-trade-card .covered-fulfillment-chart.center-zero .fulfillment-zero { border-left-width: 2px; border-left-color: var(--ink); }
.compact-trade-card .covered-fulfillment-chart > header p,
.compact-trade-card .covered-fulfillment-chart .fulfillment-explanation,
.compact-trade-card .trade-profit-comparison > header small,
.compact-trade-card .trade-profit-comparison > header > span { display: none; }
.compact-trade-card > footer { justify-content: flex-end; }
.trade-card > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 11px 13px; border-bottom: 1px solid var(--line); background: #151d2c; }
.trade-card-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.trade-card-title strong { font-size: .82rem; }
.trade-card-title .symbol { font-size: .7rem; }
.trade-status { padding: 3px 7px; border-radius: 5px; font-size: .56rem; font-weight: 900; }
.trade-status.open { color: var(--green); background: var(--green-soft); }
.trade-status.closed { color: var(--muted); background: rgba(148,163,184,.1); }
.trade-status.partial { color: var(--accent,#ffa028); background: color-mix(in srgb,var(--accent,#ffa028) 12%,transparent); }
.trade-status.base-closed { color: var(--red); background: var(--red-soft); border: 1px solid color-mix(in srgb,var(--red) 35%,transparent); }
.compact-trade-tags { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.risk-free-comparison { margin-top: 14px; padding: 14px; border-radius: 14px; background: color-mix(in srgb,var(--surface-2) 88%,var(--primary) 12%); }
.risk-free-comparison > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; text-align: center; }
.risk-free-comparison > header div { display: grid; gap: 3px; }
.risk-free-comparison > header strong { color: var(--primary); }
.risk-free-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.risk-free-metrics > div { display: grid; align-content: center; justify-items: center; gap: 6px; min-width: 0; padding: 12px 8px; text-align: center; border-radius: 11px; background: var(--surface); }
.risk-free-metrics b { max-width: 100%; overflow-wrap: anywhere; font-size: .92rem; }
.risk-free-metrics small { color: var(--muted); line-height: 1.7; }
@media (max-width: 700px) { .risk-free-metrics { grid-template-columns: 1fr; } .risk-free-comparison > header { align-items: flex-start; flex-direction: column; } }
.trade-strategy { padding: 3px 7px; border: 1px solid; border-radius: 5px; font-size: .54rem; font-weight: 900; }
.trade-strategy.covered { color: var(--blue); border-color: rgba(18,201,255,.28); background: rgba(18,201,255,.07); }
.trade-strategy.long { color: #c7a8ff; border-color: rgba(167,112,255,.32); background: rgba(167,112,255,.08); }
.trade-card header small { color: var(--muted); font-size: .58rem; }
.trade-timeline { padding: 10px 12px 0; }
.trade-timeline > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.trade-timeline span, .trade-timeline small { color: var(--muted); font-size: .56rem; }
.trade-timeline b { color: #dce7f7; font-size: .6rem; }
.trade-timeline-track { height: 7px; overflow: hidden; border: 1px solid rgba(18,201,255,.15); border-radius: 999px; background: #070c15; }
.trade-timeline-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), #2ee69b); box-shadow: 0 0 12px rgba(46,230,155,.28); }
.trade-timeline > small { display: block; margin-top: 5px; text-align: left; direction: rtl; }
.trade-prices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; padding: 11px 12px 0; }
.trade-prices > div { padding: 8px; border-radius: 7px; background: rgba(255,255,255,.025); }
.trade-prices > .trade-allocation-group { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; padding: 0; background: transparent; }
.trade-allocation-group > div { display: flex; min-height: 54px; flex-direction: column; align-items: center; justify-content: center; padding: 8px; border-radius: 7px; background: rgba(255,255,255,.025); text-align: center; }
.trade-prices span, .trade-return-box span { display: block; color: var(--muted); font-size: .56rem; }
.trade-prices b { display: block; margin-top: 2px; font-size: .72rem; }
.trade-prices .trade-price-change { display: block; margin-top: 4px; font-size: .54rem; font-weight: 850; }
.previous-price-tag { display: inline-block !important; margin-inline-start: 5px; padding: 2px 5px; border: 1px solid color-mix(in srgb,var(--accent,#ffa028) 45%,var(--line)); border-radius: 999px; color: var(--accent,#ffa028) !important; font-size: .43rem !important; font-style: normal; white-space: nowrap; }
.trade-analytics-details { margin: 10px 12px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.trade-analytics-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; cursor: pointer; list-style: none; user-select: none; }
.trade-analytics-details > summary::-webkit-details-marker { display: none; }
.trade-analytics-details > summary > span { color: var(--ink); font-size: .6rem; font-weight: 800; }
.trade-analytics-details > summary > b { padding: 4px 9px; border: 1px solid color-mix(in srgb,var(--blue) 40%,var(--line)); border-radius: 6px; color: var(--blue); font-size: .55rem; }
.trade-analytics-details > summary i { font-style: normal; }
.trade-analytics-details > summary i:last-child { display: none; }
.trade-analytics-details[open] > summary { border-bottom: 1px solid var(--line); }
.trade-analytics-details[open] > summary i:first-child { display: none; }
.trade-analytics-details[open] > summary i:last-child { display: inline; }
.trade-analytics-history { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 10px 12px 0; }
.trade-analytics-details .trade-analytics-history { padding: 8px; }
.trade-analytics-snapshot { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.trade-analytics-snapshot.entry { border-color: color-mix(in srgb,var(--blue) 26%,var(--line)); }
.trade-analytics-snapshot.current { border-color: color-mix(in srgb,var(--violet) 32%,var(--line)); }
.trade-analytics-snapshot.exit { border-color: color-mix(in srgb,var(--green) 26%,var(--line)); }
.trade-analytics-snapshot > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; border-bottom: 1px solid var(--line); }
.trade-analytics-snapshot > header strong { font-size: .61rem; }
.trade-analytics-snapshot > header span { font-size: .58rem; font-weight: 850; }
.trade-analytics-snapshot dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin: 0; background: var(--line); }
.trade-analytics-snapshot dl > div { min-width: 0; padding: 7px 8px; background: var(--surface-2); }
.trade-analytics-snapshot dt { color: var(--muted); font-size: .51rem; }
.trade-analytics-snapshot dd { overflow: hidden; margin: 2px 0 0; color: var(--ink); font-size: .64rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.trade-analytics-snapshot > small { display: block; padding: 5px 8px; color: var(--muted); font-size: .5rem; }
.trade-returns { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 10px 12px; }
.trade-returns.long-call { grid-template-columns: repeat(2,minmax(0,1fr)); }
.trade-returns.long-call > .trade-return-box:last-child:nth-child(odd) { grid-column: 1 / -1; text-align: center; }
.trade-return-box { padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.trade-return-box.highlight { border-color: rgba(18,201,255,.26); background: rgba(18,201,255,.035); }
.trade-return-box.premium-base-comparison { border-color: rgba(167,112,255,.28); background: rgba(167,112,255,.045); }
.trade-return-box.best-profit,
.trade-return-box.highlight.best-profit { border-color: #2ee69b; box-shadow: 0 0 0 1px rgba(46,230,155,.24), 0 0 18px rgba(46,230,155,.08); background: rgba(46,230,155,.045); }
.trade-return-box > em { display: block; margin-top: 4px; color: #7ff0bd; font-size: .58rem; font-style: normal; font-weight: 700; }
.trade-return-box strong { display: block; margin: 4px 0 2px; font-size: .9rem; }
.trade-return-box small { display: block; color: var(--muted); font-size: .55rem; }
.trade-return-box .trade-fulfillment { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--line); }
.trade-return-box .trade-fulfillment b { display: inline; font-size: inherit; margin: 0 3px 0 0; }
.trade-card .trade-prices > div,
.trade-card .trade-return-box,
.trade-card .trade-analytics-snapshot dl > div,
.trade-card .realized-result > div { text-align: center; }
.covered-fulfillment-chart { margin: 0 12px 10px; padding: 11px 12px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.covered-fulfillment-chart > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.covered-fulfillment-chart > header > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 10px; }
.covered-fulfillment-chart > header span { color: var(--muted); font-size: .59rem; font-weight: 800; }
.covered-fulfillment-chart > header strong { color: var(--ink); font-size: .9rem; font-variant-numeric: tabular-nums; }
.covered-fulfillment-chart > header p { margin: 0; color: var(--muted); text-align: left; font-size: .54rem; }
.fulfillment-plot { direction: ltr; margin-top: 7px; padding: 0 4px; }
.fulfillment-axis { position: relative; height: 42px; margin: 0 48px; border-bottom: 2px solid var(--line-strong); }
.fulfillment-segment { position: absolute; bottom: -3px; z-index: 2; height: 6px; border-radius: 999px; background: var(--blue); }
.covered-fulfillment-chart.complete .fulfillment-segment { background: var(--green); }
.covered-fulfillment-chart.negative .fulfillment-segment { background: var(--red); }
.fulfillment-zero,
.fulfillment-target,
.fulfillment-current { position: absolute; bottom: -7px; z-index: 3; display: block; width: 0; height: 14px; }
.fulfillment-zero { border-left: 1px solid var(--line-strong); }
.fulfillment-target { bottom: -8px; height: 38px; border-left: 2px dashed var(--muted); }
.fulfillment-current { bottom: -8px; width: 12px; height: 12px; margin-left: -6px; border: 3px solid var(--surface); border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.covered-fulfillment-chart.complete .fulfillment-current { background: var(--green); box-shadow: 0 0 0 1px var(--green); }
.covered-fulfillment-chart.negative .fulfillment-current { background: var(--red); box-shadow: 0 0 0 1px var(--red); }
.fulfillment-zero em,
.fulfillment-target em { position: absolute; top: -18px; color: var(--muted); font-size: .49rem; font-style: normal; font-weight: 750; white-space: nowrap; transform: translateX(-50%); }
.fulfillment-target em { top: -2px; color: var(--ink); }
.fulfillment-scale { display: flex; justify-content: space-between; margin: 6px 44px 0; color: var(--muted); font-size: .48rem; font-variant-numeric: tabular-nums; }
.fulfillment-explanation { margin: 5px 0 0; color: var(--ink); font-size: .56rem; line-height: 1.7; }
.covered-fulfillment-chart.unavailable { padding-block: 9px; }
.covered-fulfillment-chart.unavailable > header p { max-width: 55%; }
.profit-up { color: var(--green) !important; }
.profit-down { color: var(--red) !important; }
.trade-card footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--line); }
.trade-card footer > span { color: var(--muted); font-size: .57rem; }
.trade-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.trade-exit-note { margin: 9px 12px 0; padding: 8px 10px; border: 1px solid rgba(112,240,0,.2); border-radius: 7px; color: #bcc8da; background: rgba(112,240,0,.035); font-size: .62rem; }
.trade-exit-note b { color: var(--green); }
.trade-action { border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: .58rem; font-weight: 800; }
.trade-action:hover { border-color: var(--blue); color: var(--blue); }
.trade-action.danger:hover { border-color: var(--red); color: var(--red); }
.trades-note { margin: 11px 2px 0; color: var(--muted); font-size: .59rem; line-height: 1.8; }
.trade-detail-workspace { position: fixed; inset: 0; z-index: 69; pointer-events: none; }
.trade-detail-window { position: fixed; overflow: hidden; max-height: min(86vh,836px); border: 1px solid var(--line-strong); border-radius: 13px; color: var(--ink); background: var(--surface); box-shadow: 0 24px 70px rgba(0,0,0,.34); pointer-events: auto; }
.trade-detail-window.covered { border-top: 3px solid var(--blue); }
.trade-detail-window.long { border-top: 3px solid var(--violet,#a770ff); }
.trade-detail-window.dragging { user-select: none; box-shadow: 0 30px 90px rgba(0,0,0,.45); }
.trade-detail-window > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); cursor: move; touch-action: none; }
.trade-detail-window > header small,.trade-detail-window > header strong { display: block; }
.trade-detail-window > header small { margin-bottom: 2px; color: var(--muted); font-size: .52rem; }
.trade-detail-window > header strong { font-size: .7rem; }
.trade-detail-window > header button { width: 29px; height: 29px; padding: 0; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: var(--surface); cursor: pointer; font-size: 1rem; }
.trade-detail-window-body { max-height: calc(min(86vh,836px) - 54px); overflow: auto; padding-bottom: 10px; }
.trade-detail-window .trade-prices { grid-template-columns: repeat(3,minmax(0,1fr)); }
.trade-detail-window .trade-prices > div,.trade-detail-window .trade-return-box,.trade-detail-window .realized-result > div,.trade-detail-window .trade-analytics-snapshot dl > div { text-align: center; }
.trade-capital-metric > small { display: block; margin-top: 4px; color: var(--blue); font-size: .52rem; font-weight: 800; }
.trade-detail-window .trade-analytics-history { grid-template-columns: 1fr 1fr; padding-bottom: 10px; }
.trade-detail-window .trade-returns { grid-template-columns: 1fr; }
.trade-detail-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0 12px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); text-align: center; }
.trade-detail-meta span { padding: 3px 6px; border-radius: 999px; color: var(--muted); background: var(--surface); font-size: .52rem; }
.trade-detail-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; margin: 9px 12px 0; padding-top: 9px; border-top: 1px solid var(--line); }

.dashboard-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: start; gap: 16px; direction: rtl; }
.market-dashboard-layout { grid-template-columns: minmax(0,1fr); }
.dashboard-content { min-width: 0; }
.asset-rail { position: sticky; top: 14px; z-index: 20; align-self: start; }
.asset-rail-inner { position: relative; padding: 13px 13px 13px 0; border-right: 1px solid var(--line-strong); }
.asset-rail-title { display: flex; align-items: center; gap: 8px; margin: 0 0 9px; color: #dce7f7; font-size: .72rem; }
.asset-rail-title > span { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(18,201,255,.10), 0 0 14px rgba(18,201,255,.35); }
.asset-nav { display: flex; flex-direction: column; gap: 4px; max-height: calc(100vh - 84px); overflow-y: auto; padding-left: 4px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.asset-nav button { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 7px; width: 100%; border: 1px solid transparent; border-radius: 8px; padding: 7px 8px; background: transparent; color: var(--muted); text-align: right; cursor: pointer; font-size: .66rem; transition: color .15s, background .15s, border-color .15s, transform .15s; }
.asset-nav button:hover { color: var(--ink); background: var(--surface); border-color: var(--line); transform: translateX(-2px); }
.asset-nav button.active { color: #eaf8ff; background: var(--blue-soft); border-color: rgba(18,201,255,.32); }
.asset-nav-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-nav-count { display: grid; place-items: center; min-width: 23px; height: 20px; padding: 0 5px; border-radius: 6px; background: rgba(195,205,206,.1); color: var(--blue); direction: ltr; font-size: .58rem; font-weight: 900; }

.top-opportunities { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 14px; }
.top-market { background: rgba(15,22,37,.72); border: 1px solid var(--line); border-radius: 12px; padding: 15px; box-shadow: var(--shadow-sm); }
.top-market > header { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; min-height: 44px; margin-bottom: 7px; }
.top-market header span { color: var(--blue); font-size: .63rem; font-weight: 800; }
.top-market header small { color: var(--muted); font-size: .65rem; }
.top-market h3 { margin: 1px 0 0; font-size: .9rem; }
.top-card-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 9px; }
.opportunity-card { position: relative; min-width: 0; min-height: 178px; display: flex; flex-direction: column; padding: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(145deg, var(--surface-2), #0b111c); box-shadow: 0 8px 24px rgba(0,0,0,.13); transition: transform .18s, border-color .18s, box-shadow .18s; }
.opportunity-card::after { content: ""; position: absolute; inset: auto -25px -40px auto; width: 90px; height: 90px; border-radius: 50%; background: rgba(18,201,255,.055); }
.opportunity-card:hover { transform: translateY(-3px); border-color: rgba(18,201,255,.42); box-shadow: 0 14px 32px rgba(18,201,255,.08); }
.opportunity-card-head { display: flex; align-items: center; justify-content: space-between; }
.risk-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.risk-tag { display: inline-flex; align-items: center; min-height: 23px; padding: 3px 7px; border: 1px solid transparent; border-radius: 6px; font-size: .54rem; font-weight: 900; line-height: 1.3; }
.risk-tag.moderate { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 38%, transparent); background: var(--amber-soft); }
.risk-tag.leveraged { color: var(--red); border-color: color-mix(in srgb, var(--red) 42%, transparent); background: var(--red-soft); }
.top-rank { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid var(--line-strong); border-radius: 7px; color: #b8c5d8; background: #0b1220; font-weight: 900; font-size: .65rem; }
.covered-overview-card { gap: 0; border-top: 3px solid color-mix(in srgb, var(--blue) 70%, var(--line)); background: linear-gradient(155deg,color-mix(in srgb,var(--blue-soft) 38%,var(--surface)) 0%,var(--surface) 44%); }
.covered-symbol-pair { display: grid; gap: 4px; margin-top: 13px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.covered-symbol-pair strong { overflow: hidden; color: var(--ink); font-family: inherit; font-size: .78rem; font-weight: 850; line-height: 1.6; text-overflow: ellipsis; white-space: nowrap; }
.covered-itm-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 9px 0 3px; padding: 6px 8px; border: 1px solid color-mix(in srgb,var(--line) 72%,transparent); border-radius: 7px; background: color-mix(in srgb,var(--surface-2) 82%,transparent); }
.covered-itm-row span { color: var(--muted); font-size: .57rem; font-weight: 700; }
.covered-itm-row strong { font-size: .69rem; font-weight: 900; }
.covered-itm-row strong.itm-positive { color: var(--green); }
.covered-itm-row strong.itm-negative { color: var(--amber); }
.covered-overview-metrics { display: grid; gap: 5px; margin: 6px 0 0; }
.covered-overview-metrics > div { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 38px; padding: 7px 9px; border: 1px solid transparent; border-radius: 7px; }
.covered-overview-metrics > div:last-child { border-bottom: 0; }
.covered-overview-metrics dt { color: var(--muted); font-size: .56rem; line-height: 1.55; }
.covered-overview-metrics dd { margin: 0; font-size: .7rem; font-weight: 900; white-space: nowrap; }
.covered-overview-metrics .metric-profit { border-color: color-mix(in srgb,var(--green) 18%,var(--line)); background: color-mix(in srgb,var(--green-soft) 55%,transparent); }
.covered-overview-metrics .metric-profit dd.profit-positive { color: var(--green); }
.covered-overview-metrics .metric-profit dd.profit-negative { color: var(--red); }
.covered-overview-metrics .metric-buyback { border-color: color-mix(in srgb,var(--blue) 20%,var(--line)); background: color-mix(in srgb,var(--blue-soft) 62%,transparent); }
.covered-overview-metrics .metric-buyback dd { color: var(--blue); }
.covered-overview-metrics .metric-time { border-color: color-mix(in srgb,var(--line-strong) 48%,var(--line)); background: color-mix(in srgb,var(--surface-3) 58%,transparent); }
.covered-overview-metrics .metric-time dd { color: var(--ink); }
.covered-overview-metrics dd.expiry-near { color: var(--red); }
.covered-overview-card footer { display: flex; justify-content: flex-end; margin-top: auto; padding-top: 7px; }
.quote-scenario-grid { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 7px; }
.quote-scenario { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb,var(--surface-2) 82%,transparent); }
.quote-scenario.bid { border-color: color-mix(in srgb,var(--green) 30%,var(--line)); }
.quote-scenario.ask { border-color: color-mix(in srgb,var(--violet) 34%,var(--line)); }
.quote-scenario.last { border-color: color-mix(in srgb,var(--blue) 27%,var(--line)); }
.quote-scenario h4 { margin: 0; padding: 6px 8px; border-bottom: 1px solid var(--line); color: var(--ink); background: color-mix(in srgb,var(--surface-3) 72%,transparent); font-size: .54rem; font-weight: 900; }
.quote-scenario dl { margin: 0; padding: 3px 7px 5px; }
.quote-scenario dl > div { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 5px; min-height: 24px; border-bottom: 1px dashed color-mix(in srgb,var(--line) 72%,transparent); }
.quote-scenario dl > div:last-child { border-bottom: 0; }
.quote-scenario dt { overflow: hidden; color: var(--muted); font-size: .49rem; text-overflow: ellipsis; white-space: nowrap; }
.quote-scenario dd { margin: 0; color: var(--ink); font-size: .59rem; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.quote-scenario dd.profit-positive { color: var(--green); }
.quote-scenario dd.profit-negative { color: var(--red); }
.quote-scenario.unavailable { padding-bottom: 7px; opacity: .72; }
.quote-scenario.unavailable p { margin: 7px 8px 0; color: var(--muted); font-size: .5rem; }
.market-covered-card .contract-context { margin-bottom: 8px; }
.card-technical-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; margin: 9px 0 0; }
.card-technical-strip.single { grid-template-columns: minmax(0,1fr); }
.card-technical-strip > div { min-width: 0; padding: 7px 6px; border: 1px solid color-mix(in srgb,var(--blue) 15%,var(--line)); border-radius: 7px; background: color-mix(in srgb,var(--blue-soft) 42%,transparent); text-align: center; }
.card-technical-strip dt { overflow: hidden; color: var(--muted); font-size: .51rem; text-overflow: ellipsis; white-space: nowrap; }
.card-technical-strip dd { margin: 3px 0 0; color: var(--blue); font-size: .68rem; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card-technical-strip dd small { margin-right: 2px; color: var(--muted); font-size: .48rem; }
.covered-series.near { border-color: color-mix(in srgb, var(--amber) 32%, var(--line)); }
.long-overview-card { gap: 0; border-top: 3px solid color-mix(in srgb,var(--violet) 72%,var(--line)); background: linear-gradient(155deg,color-mix(in srgb,var(--violet-soft) 44%,var(--surface)) 0%,var(--surface) 44%); }
.long-overview-metrics { display: grid; gap: 5px; margin: 9px 0 0; }
.long-overview-metrics > div { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 39px; padding: 7px 9px; border: 1px solid transparent; border-radius: 7px; }
.long-overview-metrics dt { color: var(--muted); font-size: .57rem; font-weight: 700; }
.long-overview-metrics dd { margin: 0; font-size: .7rem; font-weight: 900; white-space: nowrap; }
.long-overview-metrics .metric-itm { border-color: color-mix(in srgb,var(--line-strong) 45%,var(--line)); background: color-mix(in srgb,var(--surface-3) 58%,transparent); }
.long-overview-metrics .metric-itm dd.itm-positive { color: var(--green); }
.long-overview-metrics .metric-itm dd.itm-negative { color: var(--amber); }
.long-overview-metrics .metric-advantage { border-color: color-mix(in srgb,var(--green) 20%,var(--line)); background: color-mix(in srgb,var(--green-soft) 58%,transparent); }
.long-overview-metrics .metric-advantage dd.advantage-positive { color: var(--green); }
.long-overview-metrics .metric-advantage dd.advantage-negative { color: var(--red); }
.long-overview-metrics .metric-rate { border-color: color-mix(in srgb,var(--violet) 24%,var(--line)); background: color-mix(in srgb,var(--violet-soft) 62%,transparent); }
.long-overview-metrics .metric-rate dd { color: var(--violet); }
.long-overview-metrics .metric-time { border-color: color-mix(in srgb,var(--line-strong) 48%,var(--line)); background: color-mix(in srgb,var(--surface-3) 58%,transparent); }
.long-overview-metrics .metric-time dd { color: var(--ink); }
.long-overview-metrics dd.expiry-near { color: var(--red); }
.long-overview-card footer { display: flex; justify-content: flex-end; margin-top: auto; padding-top: 8px; }
.market-long-card .contract-context { margin-bottom: 8px; }
.opportunity-identity { display: flex; flex-direction: column; min-width: 0; margin-top: 12px; }
.opportunity-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; }
.opportunity-identity small { margin-top: 2px; color: var(--muted); font-size: .61rem; }
.opportunity-identity .itm-value { margin-top: 5px; color: var(--green); font-weight: 800; }
.opportunity-identity .delta-value { margin-top: 3px; color: var(--blue-dark); font-weight: 700; }
.opportunity-identity .score-inline { width: fit-content; margin-top: 5px; padding: 2px 6px; border-radius: 5px; background: var(--blue-soft); color: var(--blue); font-weight: 800; }
.opportunity-identity .expiry-alert { width: fit-content; margin-top: 6px; padding: 2px 6px; border: 1px solid rgba(251,113,133,.38); border-radius: 5px; background: var(--red-soft); color: #fda4af; font-weight: 900; }
.opportunity-return { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 3px 6px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.opportunity-return span { color: var(--muted); font-size: .6rem; }
.opportunity-return b { color: var(--blue); font-size: .88rem; letter-spacing: -.03em; white-space: nowrap; }
.opportunity-return b.adjusted-value { font-size: .75rem; }
.opportunity-return small { grid-column: 1 / -1; color: var(--muted); font-size: .54rem; line-height: 1.65; }
.opportunity-meta { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; margin-top: auto; }
.opportunity-meta small { color: var(--muted); font-size: .58rem; }
.top-reason { margin: 9px 0 8px; padding: 7px 8px; border-right: 2px solid var(--blue); border-radius: 5px; color: #b8c5d8; background: rgba(18,201,255,.045); font-size: .57rem; line-height: 1.75; }
.analysis-button { margin-top: 3px; border: 0; background: transparent; color: var(--blue); padding: 2px 0; cursor: pointer; font-size: .62rem; font-weight: 800; white-space: nowrap; }
.analysis-button:hover { color: var(--blue-dark); text-decoration: underline; }

.strategy-section { margin-top: 22px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 9px; }
.section-heading h2 { margin: 0; font-size: 1rem; }
.section-heading span { color: var(--muted); font-size: .7rem; }
.group-card { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; margin: 13px 0; overflow: hidden; box-shadow: var(--shadow-sm); scroll-margin-top: 18px; }
.asset-box-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: #121a28; }
.asset-box-header small { color: var(--muted); font-size: .57rem; }
.asset-box-header h3 { margin: 1px 0 0; font-size: .96rem; }
.asset-box-summary { display: flex; align-items: center; gap: 8px; }
.asset-box-summary span { color: var(--muted); font-size: .61rem; }
.asset-box-summary b { padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--blue); background: var(--blue-soft); font-size: .62rem; }
.asset-strategy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); align-items: start; gap: 12px; padding: 12px; }
.strategy-box { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #0b111c; }
.strategy-box:only-child { grid-column: 1 / -1; }
.strategy-box > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #151d2c; }
.strategy-box > header small { color: var(--muted); font-size: .54rem; }
.strategy-box > header h4 { margin: 1px 0 0; font-size: .76rem; }
.strategy-box > header span { padding: 3px 7px; border-radius: 5px; color: var(--muted); background: rgba(255,255,255,.04); font-size: .57rem; }
.covered-strategy > header { box-shadow: inset -3px 0 0 var(--magenta); }
.secondary-covered-strategy { border-color: color-mix(in srgb,var(--amber) 28%,var(--line)); }
.secondary-covered-strategy > header { box-shadow: inset -3px 0 0 var(--amber); }
.secondary-covered-strategy > header small { color: var(--amber); }
.long-strategy > header { box-shadow: inset -3px 0 0 var(--blue); }
.contract-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: 9px; padding: 10px; }
.contract-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(145deg, #151d2c, #0c121e); box-shadow: 0 8px 24px rgba(0,0,0,.15); transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease; }
.contract-card:hover { transform: translateY(-2px); border-color: rgba(18,201,255,.38); box-shadow: 0 13px 30px rgba(18,201,255,.07); }

.tehran-chain-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: rgba(14,20,32,.92); box-shadow: var(--shadow-sm); }
.tehran-chain-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(100deg, #121a28, #0b111c); }
.tehran-chain-header small { color: var(--blue); font-size: .6rem; font-weight: 900; }
.tehran-chain-header h2 { margin: 2px 0; font-size: 1rem; }
.tehran-chain-header p { margin: 0; color: var(--muted); font-size: .65rem; }
.chain-summary { flex: 0 0 auto; min-width: 120px; padding: 9px 12px; border: 1px solid rgba(18,201,255,.25); border-radius: 9px; background: var(--blue-soft); text-align: center; }
.chain-summary strong, .chain-summary span { display: block; }
.chain-summary strong { color: var(--blue); font-size: 1.2rem; }
.chain-summary span { color: var(--muted); font-size: .55rem; }
.chain-filters { display: grid; grid-template-columns: repeat(auto-fit,minmax(155px,1fr)); gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); }
.chain-filters label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: .58rem; }
.chain-filters input, .chain-filters select { min-width: 0; height: 37px; border: 1px solid var(--line); border-radius: 7px; padding: 0 9px; color: var(--ink); background: #0a101a; font-size: .65rem; outline: none; }
.chain-filters input:focus, .chain-filters select:focus { border-color: var(--blue); }
.condition-control { display: grid; grid-template-columns: minmax(94px,1.45fr) minmax(52px,.7fr); gap: 4px; }
.chain-filters .condition-control select, .chain-filters .condition-control input { width: 100%; padding-inline: 6px; }
.chain-reset-columns { align-self: end; min-height: 37px; border: 1px solid var(--line); border-radius: 7px; padding: 0 10px; color: var(--blue); background: var(--blue-soft); cursor: pointer; font-size: .61rem; font-weight: 800; }
.chain-reset-columns:hover { border-color: rgba(18,201,255,.45); background: rgba(18,201,255,.16); }
.chain-reset-columns span { margin-left: 4px; font-size: .75rem; }
.chain-table-wrap { max-height: calc(100vh - 220px); overflow: auto; scrollbar-color: var(--line-strong) var(--surface); }
.chain-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; direction: rtl; font-size: .62rem; }
.chain-table th { position: sticky; top: 0; z-index: 3; min-width: 82px; padding: 0; border-bottom: 1px solid var(--line-strong); background: #151f30; color: #c6d1e2; text-align: right; white-space: nowrap; }
.chain-header-control { display: flex; align-items: stretch; min-height: 44px; }
.column-drag-handle { display: grid; place-items: center; width: 20px; flex: 0 0 20px; color: var(--muted); cursor: grab; border-left: 1px solid var(--line); }
.chain-header-control > .column-hide-button { width: 20px; flex: 0 0 20px; padding: 0; border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: .78rem; }
.chain-header-control > .column-hide-button:hover { color: var(--red); background: var(--red-soft); }
.chain-sort-button { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; flex: 1; padding: 9px 4px; border: 0; color: #c6d1e2; background: transparent; cursor: pointer; text-align: right; font-size: .6rem; font-weight: 800; white-space: nowrap; }
.chain-sort-button:hover { color: #fff; background: rgba(18,201,255,.07); }
.chain-sort-button.active { color: var(--blue); background: rgba(18,201,255,.09); box-shadow: inset 0 -2px 0 var(--blue); }
.chain-sort-button span { color: var(--muted); font-size: .66rem; }
.chain-column-manager { padding: 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.chain-column-manager > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.chain-column-manager > header div { display: flex; flex-direction: column; gap: 2px; }
.chain-column-manager > header strong { color: var(--ink); font-size: .75rem; }
.chain-column-manager > header small { color: var(--muted); font-size: .58rem; }
.chain-column-manager > header > span { flex: 0 0 auto; padding: 5px 9px; color: var(--blue); background: var(--blue-soft); border: 1px solid var(--line); border-radius: 8px; font-size: .6rem; }
.chain-column-checklist { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 6px; }
.chain-column-option { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 5px 8px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: .61rem; }
.chain-column-option:hover { border-color: var(--blue); }
.chain-column-option input { width: 16px; height: 16px; margin: 0; accent-color: var(--blue); }
.chain-view-controls { display: grid; grid-template-columns: minmax(180px,1.2fr) auto minmax(180px,1fr) repeat(3,auto); align-items: end; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.chain-view-controls label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: .58rem; }
.chain-view-controls input, .chain-view-controls select { min-width: 0; height: 36px; padding: 0 9px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.chain-view-controls button { min-height: 36px; padding: 0 10px; color: var(--blue); background: var(--blue-soft); border: 1px solid var(--blue); border-radius: 8px; cursor: pointer; font-size: .6rem; font-weight: 700; }
.chain-view-controls button:hover:not(:disabled) { background: var(--surface); }
.chain-view-controls button:disabled { opacity: .4; cursor: not-allowed; }
.chain-view-controls .danger-subtle { color: var(--red); background: var(--red-soft); border-color: var(--red); }
.chain-view-message { min-height: 16px; margin: 7px 0 0; color: var(--green); font-size: .58rem; }
.chain-view-message[data-kind="error"] { color: var(--red); }
.chain-table th[draggable="true"] { cursor: grab; transition: opacity .15s, box-shadow .15s, background .15s; }
.chain-table th.dragging { opacity: .42; }
.chain-table th.column-drop-target { background: rgba(18,201,255,.15); box-shadow: inset 3px 0 0 var(--blue); }
.chain-table td { padding: 9px 4px; border-bottom: 1px solid rgba(37,48,71,.65); color: #c7d0df; white-space: nowrap; }
.chain-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.012); }
.chain-table tbody tr:hover td { background: rgba(18,201,255,.055); }
.chain-table td small { display: block; margin-top: 2px; color: var(--muted); font-size: .52rem; }
.chain-table .return-cell { direction: ltr; color: var(--green); font-weight: 800; }
.chain-table .delta-cell { direction: ltr; color: var(--blue-dark); font-weight: 700; }
.chain-symbol { display: inline-flex; align-items: center; gap: 5px; color: #f1f5fb; font-weight: 800; }
.top-star { color: #ffe14d; text-shadow: 0 0 12px rgba(255,225,77,.55); }
.top-five-row td:first-child { box-shadow: inset -2px 0 0 #ffe14d; }
.queue-badge, .score-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 50px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; background: rgba(255,255,255,.025); }
.queue-badge.buy { border-color: rgba(112,240,0,.3); color: var(--green); background: var(--green-soft); }
.queue-badge.sell { border-color: rgba(255,77,103,.35); color: #ff8a9b; background: var(--red-soft); }
.decision-badge { display: inline-flex; min-width: 88px; justify-content: center; padding: 4px 7px; border: 1px solid var(--line); border-radius: 6px; font-weight: 800; }
.decision-badge.option { color: var(--green); border-color: rgba(112,240,0,.28); background: var(--green-soft); }
.decision-badge.base { color: var(--blue); border-color: rgba(18,201,255,.28); background: var(--blue-soft); }
.score-pill { min-width: 38px; border-color: rgba(18,201,255,.3); color: var(--blue); background: var(--blue-soft); font-weight: 900; }
.chain-method-note { margin: 0; padding: 10px 14px; color: var(--muted); background: #0a101a; font-size: .57rem; line-height: 1.8; }
.chain-empty { height: 140px; color: var(--muted) !important; text-align: center; }
.contract-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; border-radius: 10px 10px 0 0; background: var(--blue); }
.covered-contract::before { background: var(--magenta); }
.contract-context { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -1px 0 8px; padding-bottom: 7px; border-bottom: 1px solid rgba(174,183,183,.1); color: var(--muted); font-size: .53rem; }
.contract-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.contract-card-head small { display: block; margin-bottom: 2px; color: var(--muted); font-size: .57rem; }
.contract-card-head strong { display: block; font-size: .82rem; }
.contract-return { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 8px; margin-top: 11px; padding: 10px; border: 1px solid rgba(148,163,184,.1); border-radius: 8px; background: rgba(255,255,255,.025); }
.contract-return span { color: var(--muted); font-size: .59rem; }
.contract-return strong { color: var(--blue); font-size: 1.05rem; line-height: 1.1; }
.contract-return strong.adjusted-value { font-size: .86rem; }
.contract-return small { grid-column: 1 / -1; color: #b6c2d4; font-size: .57rem; }
.selection-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.selection-tags span { padding: 3px 6px; border: 1px solid rgba(255,0,188,.24); border-radius: 5px; background: var(--magenta-soft); color: #ff82dd; font-size: .54rem; }
.covered-score { margin-top: 9px; padding: 9px; border: 1px solid rgba(18,201,255,.18); border-radius: 8px; background: rgba(18,201,255,.035); }
.covered-score > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.covered-score span { color: var(--muted); font-size: .55rem; }
.covered-score strong { color: var(--blue); font-size: .9rem; }
.covered-score strong small { color: #b8c5d8; font-size: .55rem; }
.score-track { height: 4px; margin: 7px 0; overflow: hidden; border-radius: 999px; background: #202b3f; }
.score-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--blue), var(--green)); }
.score-components { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.contract-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 9px 0 0; }
.contract-metrics > div { min-width: 0; padding: 7px 8px; border-radius: 7px; background: rgba(255,255,255,.022); }
.contract-metrics > div.wide { grid-column: 1 / -1; }
.contract-metrics dt { color: var(--muted); font-size: .55rem; }
.contract-metrics dd { margin: 2px 0 0; overflow: hidden; color: #e4edf9; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.contract-metrics .quote-gap-value { color: var(--amber); }
.contract-card footer { display: flex; justify-content: flex-end; margin-top: auto; padding-top: 8px; border-top: 1px solid rgba(148,163,184,.09); }
.symbol { direction: ltr; font-weight: 800; color: #dbeafe; }
.badge { display: inline-flex; padding: 2px 7px; border: 1px solid; border-radius: 5px; font-size: .6rem; font-weight: 900; }
.badge.itm { background: var(--green-soft); color: var(--green); border-color: rgba(112,240,0,.45); }
.badge.otm { background: var(--amber-soft); color: var(--amber); border-color: rgba(233,255,0,.42); }
.warning { color: var(--red) !important; font-weight: 800; }
.positive { color: var(--green); font-weight: 800; }

.modal-open { overflow: hidden; }
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(16,24,40,.68); backdrop-filter: blur(5px); }
.analysis-modal { width: min(1078px, 100%); max-height: calc(100vh - 16px); overflow: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 32px 100px rgba(0,0,0,.55); }
.analysis-modal > header { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: rgba(15,22,37,.97); }
.analysis-modal h2 { margin: 0; font-size: .95rem; }
.analysis-modal header small { color: var(--blue); font-size: .63rem; font-weight: 800; }
.modal-close { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--ink); cursor: pointer; font-size: 1.3rem; line-height: 1; }
.trade-close-modal { width: min(792px, 100%); max-height: calc(100vh - 16px); overflow: auto; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); box-shadow: 0 32px 100px rgba(0,0,0,.55); }
.trade-close-modal > header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: rgba(15,22,37,.97); }
.trade-close-modal h2 { margin: 2px 0 0; font-size: .95rem; }
.trade-close-modal header small { color: var(--green); font-size: .63rem; font-weight: 800; }
.trade-edit-modal { width: min(1078px,100%); max-height: calc(100vh - 16px); overflow: auto; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); box-shadow: 0 32px 100px rgba(0,0,0,.55); }
.trade-edit-modal > header { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.trade-edit-modal h2 { margin: 2px 0 0; font-size: .95rem; }
.trade-edit-modal header small { color: var(--blue); font-size: .63rem; font-weight: 800; }
#tradeEditModalBody { padding: 15px 18px 18px; }
#tradeEditModalMessage { margin: 10px 18px 0; }
#tradeEditModalBody .trade-form { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 0; }
.trade-close-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 16px 18px 18px; }
.trade-close-form label { display: flex; flex-direction: column; gap: 4px; }
.trade-close-form label > span { color: #a9b4c7; font-size: .66rem; font-weight: 700; }
.trade-close-form label small { color: var(--muted); font-size: .53rem; }
.trade-close-form input, .trade-close-form textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 8px; background: #0b111c; color: var(--ink); padding: 8px 10px; outline: none; font: inherit; font-size: .74rem; }
.trade-close-form input { height: 39px; }
.trade-close-form textarea { min-height: 82px; resize: none; }
.trade-close-form input:focus, .trade-close-form textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(112,240,0,.08); }
.trade-close-meta, .trade-close-note, .trade-price-confirmation, .trade-close-actions { grid-column: 1 / -1; }
.trade-close-meta { margin: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: var(--surface-2); font-size: .64rem; line-height: 1.8; }
.trade-price-confirmation { flex-direction: row !important; align-items: center; gap: 9px !important; padding: 10px 12px; border: 1px solid var(--amber); border-radius: 8px; background: var(--amber-soft); cursor: pointer; }
.trade-price-confirmation input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--green); }
.trade-price-confirmation span { color: var(--ink) !important; line-height: 1.7; }
.trade-close-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 3px; }
.confirmation-modal { width: min(440px,calc(100vw - 28px)); padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-lg); text-align: center; }
.confirmation-mark { display: grid; width: 46px; height: 46px; margin: 0 auto 13px; place-items: center; border: 1px solid color-mix(in srgb,var(--red) 45%,var(--line)); border-radius: 50%; color: var(--red); background: var(--red-soft); font-size: 1.2rem; font-weight: 900; }
.confirmation-modal small { color: var(--red); font-size: .66rem; font-weight: 900; }
.confirmation-modal h2 { margin: 4px 0 8px; font-size: 1rem; }
.confirmation-modal p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.9; }
.confirmation-actions { display: flex; gap: 9px; margin-top: 20px; }
.confirmation-actions button { flex: 1; min-height: 42px; }
.danger-button { border: 1px solid var(--red); border-radius: 8px; color: #fff; background: var(--red); cursor: pointer; font: inherit; font-weight: 900; }
.danger-button:hover { filter: brightness(1.08); }
.danger-button:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.danger-button:disabled { cursor: not-allowed; opacity: .55; }
.trade-bulk-bar { display: flex; align-items: center; gap: 10px; margin: 12px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); }
.trade-bulk-bar label { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: .72rem; font-weight: 800; cursor: pointer; }
.trade-bulk-bar input, .trade-select-control input { width: 18px; height: 18px; accent-color: var(--blue); cursor: pointer; }
.trade-bulk-bar > span { margin-inline-start: auto; color: var(--muted); font-size: .68rem; }
.trade-bulk-bar .danger-button { min-height: 38px; padding: 7px 12px; }
.trade-card { position: relative; }
.trade-select-control { position: absolute; z-index: 2; inset-block-start: 10px; inset-inline-end: 10px; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; }
.trade-select-control:hover { border-color: var(--blue); }
.trade-select-control:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
.trade-card.is-selected { border-color: var(--blue); box-shadow: 0 0 0 2px color-mix(in srgb,var(--blue) 18%,transparent); }
@media (max-width: 720px) { .trade-bulk-bar { align-items: stretch; flex-wrap: wrap; } .trade-bulk-bar > span { margin-inline-start: 0; } .trade-bulk-bar .danger-button { width: 100%; } }
#analysisContent { padding: 18px; }
.modal-loading { display: flex; justify-content: center; align-items: center; gap: 9px; padding: 70px 20px; color: var(--muted); }
.analysis-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-bottom: 14px; }
.analysis-metrics div { padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); }
.analysis-metrics span { display: block; color: var(--muted); font-size: .62rem; }
.analysis-metrics strong { display: block; margin-top: 3px; font-size: .78rem; }
.analysis-metrics .quote-gap-value { color: var(--amber); }
.analysis-metrics .analysis-score-components { grid-column: 1 / -1; }
.analysis-metrics .analysis-score-components strong { line-height: 1.8; }
.history-chart { direction: ltr; width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #0a1020; }
.history-chart svg { display: block; width: 100%; height: auto; min-height: 260px; font-family: "Vazirmatn", Tahoma, sans-serif; font-size: 11px; fill: var(--muted); }
.history-chart .axis { stroke: #31405f; stroke-width: 1; }
.history-chart .price-line { stroke: var(--blue); }
.history-chart .strike-reference { stroke: var(--amber); fill: var(--amber); }
.history-chart .breakeven-reference { stroke: var(--red); fill: var(--red); }
.chart-note { margin: 8px 3px 0; color: var(--muted); font-size: .65rem; }
.scenario-panel { margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--line); }
.scenario-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 11px; }
.scenario-heading small { color: var(--blue); font-size: .61rem; font-weight: 900; }
.scenario-heading h3 { margin: 2px 0 0; font-size: .9rem; }
.scenario-facts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.scenario-facts span, .scenario-facts b { padding: 4px 7px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: var(--surface-2); font-size: .59rem; }
.scenario-facts b { color: #dbeafe; }
.scenario-summary { display: grid; gap: 7px; margin-bottom: 10px; }
.scenario-summary-row { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(125px, .45fr) minmax(240px, 1.5fr); align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); font-size: .64rem; }
.scenario-summary-row strong { color: #dbeafe; }
.scenario-win-count { color: var(--green); font-weight: 900; }
.scenario-loss-list { color: #fda4af; }
.scenario-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.scenario-card { position: relative; overflow: hidden; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #0b1220; }
.scenario-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--blue); }
.scenario-card.up::before, .scenario-card.high::before { background: var(--green); }
.scenario-card.down::before { background: var(--red); }
.scenario-card.low::before { background: var(--amber); }
.scenario-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.scenario-card header strong { font-size: .71rem; }
.scenario-card header small { color: var(--muted); text-align: left; font-size: .57rem; }
.scenario-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 12px 0 0; }
.scenario-card.long-scenario dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scenario-card dl div { padding: 8px; border-radius: 7px; background: rgba(255,255,255,.025); }
.scenario-card dt { color: var(--muted); font-size: .57rem; }
.scenario-card dd { margin: 3px 0 0; font-size: .76rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.scenario-card dd span { font-size: .62rem; }
.scenario-profit { color: var(--green); }
.scenario-loss { color: var(--red); }
.scenario-note { margin: 9px 2px 0; color: var(--muted); font-size: .59rem; line-height: 1.8; }
.history-empty { padding: 42px 20px; border: 1px dashed var(--line-strong); border-radius: 10px; text-align: center; color: var(--muted); background: var(--surface-2); }

.settings-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); }
.settings-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 21px; border-bottom: 1px solid var(--line); background: linear-gradient(105deg,#121a28,#0b111c); }
.settings-header small { color: var(--blue); font-size: .6rem; font-weight: 900; }
.settings-header h2 { margin: 2px 0; font-size: 1rem; }
.settings-header p { margin: 0; color: var(--muted); font-size: .66rem; }
.settings-saved-badge { flex: 0 0 auto; padding: 5px 9px; border: 1px solid rgba(112,240,0,.28); border-radius: 7px; color: var(--green); background: var(--green-soft); font-size: .6rem; font-weight: 900; }
.settings-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 14px; }
.setting-card { position: relative; min-width: 0; min-height: 285px; display: flex; flex-direction: column; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(145deg,var(--surface-2),#0b111c); }
.setting-card-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(18,201,255,.3); border-radius: 9px; color: var(--blue); background: var(--blue-soft); font-size: .76rem; font-weight: 900; }
.setting-card-copy { margin: 13px 0 16px; }
.setting-card-copy h3 { margin: 0 0 3px; font-size: .82rem; }
.setting-card-copy p { margin: 0; color: var(--muted); font-size: .62rem; line-height: 1.8; }
.trade-import-card { min-height: 340px; }
.trade-import-form { display: grid; gap: 10px; margin-top: auto; }
.csv-file-picker { display: grid; gap: 4px; padding: 14px; border: 1px dashed var(--line-strong); border-radius: 9px; background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; }
.csv-file-picker:hover { border-color: var(--blue); background: var(--blue-soft); }
.csv-file-picker:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
.csv-file-picker span { color: var(--ink); font-size: .68rem; font-weight: 800; }
.csv-file-picker small,.trade-import-file { color: var(--muted); font-size: .55rem; line-height: 1.7; }
.csv-file-picker input { width: 100%; margin-top: 6px; color: var(--muted); font: inherit; font-size: .56rem; }
.trade-import-actions { display: flex; gap: 8px; }
.trade-import-actions button { flex: 1; min-height: 38px; }
.trade-import-result { display: grid; gap: 4px; min-height: 44px; padding: 9px 10px; border-radius: 8px; color: var(--muted); background: var(--surface); font-size: .56rem; line-height: 1.8; }
.trade-import-result:empty { visibility: hidden; }
.trade-import-result strong { color: var(--ink); }
.trade-import-result ul { max-height: 110px; margin: 0; padding-inline-start: 18px; overflow: auto; }
.trade-import-result.error { color: var(--red); background: var(--red-soft); }
.trade-import-result.success { color: var(--green); background: var(--green-soft); }
.trade-import-result a { width: fit-content; color: var(--blue); font-weight: 800; }
.setting-control { margin-top: auto; }
.range-labels { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; color: var(--muted); font-size: .56rem; }
.range-labels strong { min-width: 72px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 6px; color: var(--blue); background: var(--blue-soft); text-align: center; font-size: .65rem; }
.setting-control input[type="range"] { width: 100%; accent-color: var(--blue); cursor: pointer; }
.text-size-preview { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.025); }
.text-size-preview small { color: var(--muted); font-size: .55rem; }
.text-size-preview strong { color: var(--green); font-size: .67rem; }
.theme-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: auto; }
.theme-choice { position: relative; padding: 9px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.theme-choice input { position: absolute; opacity: 0; pointer-events: none; }
.theme-choice:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-soft); }
.theme-choice strong { display: block; margin-top: 7px; text-align: center; font-size: .65rem; }
.theme-swatch { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; height: 58px; padding: 7px; border-radius: 7px; }
.theme-swatch i { border-radius: 4px; }
.dark-choice .theme-swatch { background: #090d16; }
.dark-choice .theme-swatch i { background: #1b2639; }
.dark-choice .theme-swatch i:nth-child(2) { background: #12c9ff; }
.light-choice .theme-swatch { background: #eef3f8; }
.light-choice .theme-swatch i { background: #fff; border: 1px solid #d4deea; }
.light-choice .theme-swatch i:nth-child(2) { background: #008dbb; border: 0; }
.refresh-setting-summary { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--muted); font-size: .59rem; }
.password-change-card { min-height: 430px; }
.password-change-form { display: grid; gap: 10px; margin-top: auto; }
.password-change-message { display: none; padding: 9px 10px; border-radius: 8px; font-size: .59rem; line-height: 1.8; }
.password-change-message.success { display: block; color: var(--green); background: var(--green-soft); }
.password-change-message.error { display: block; color: var(--red); background: var(--red-soft); }
.password-setting-field { display: grid; gap: 5px; color: var(--ink); font-size: .61rem; font-weight: 800; }
.password-input-wrap { display: flex; min-width: 0; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.password-input-wrap:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.password-input-wrap:has(input[aria-invalid="true"]) { border-color: var(--red); }
.password-input-wrap input { min-width: 0; flex: 1; min-height: 40px; padding: 8px 10px; border: 0; outline: 0; color: var(--ink); background: transparent; font: inherit; direction: ltr; text-align: left; }
.password-input-wrap button { min-width: 66px; border: 0; border-inline-start: 1px solid var(--line); color: var(--blue); background: var(--surface-2); font: inherit; font-size: .58rem; font-weight: 900; cursor: pointer; }
.password-input-wrap button:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; }
.password-field-hint,.password-field-error { min-height: 0; color: var(--muted); font-size: .53rem; font-weight: 500; line-height: 1.7; }
.password-field-error:not(:empty) { color: var(--red); }
.password-change-submit { min-height: 40px; margin-top: 2px; }
.password-change-submit[aria-busy="true"] { cursor: wait; opacity: .72; }
.settings-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0; padding: 12px 15px; border-top: 1px solid var(--line); color: var(--muted); background: #0a101a; font-size: .61rem; }

html[data-theme="light"] .settings-header,
html[data-theme="light"] .asset-box-header,
html[data-theme="light"] .strategy-box > header,
html[data-theme="light"] .tehran-chain-header { background: linear-gradient(105deg,#fff,#edf4fa); }
html[data-theme="light"] .setting-card,
html[data-theme="light"] .opportunity-card,
html[data-theme="light"] .contract-card { background: linear-gradient(145deg,#fff,#f2f6fa); }
html[data-theme="light"] .settings-footer,
html[data-theme="light"] .chain-method-note,
html[data-theme="light"] .chain-filters input,
html[data-theme="light"] .chain-filters select,
html[data-theme="light"] .strategy-box { background: #f7f9fc; }
html[data-theme="light"] .chain-table th { background: #eaf0f7; color: #33425a; }
html[data-theme="light"] .chain-sort-button { color: #42526a; }
html[data-theme="light"] .chain-table td { color: #34445c; }
html[data-theme="light"] .chain-table tbody tr:nth-child(even) td { background: rgba(37,70,110,.025); }
html[data-theme="light"] .top-market,
html[data-theme="light"] .tehran-chain-panel { background: rgba(255,255,255,.9); }
html[data-theme="light"] .top-rank { color: #46566f; background: #f2f6fa; }
html[data-theme="light"] .main-navigation a.active { color: #005f82; }
html[data-theme="light"] .asset-nav button.active { color: #005f82; }
html[data-theme="light"] .primary-button { color: #fff; }
html[data-theme="light"] .secondary-button { color: #006f95; background: rgba(0,141,187,.08); }
html[data-theme="light"] .text-size-preview { background: #fff; }

/* Light theme contrast: replace dark-only surfaces and pale text across every page. */
html[data-theme="light"] .status-banner,
html[data-theme="light"] .metric-card,
html[data-theme="light"] .control-panel,
html[data-theme="light"] .closed-summary-grid article,
html[data-theme="light"] .top-market {
  background: rgba(255,255,255,.94);
}
html[data-theme="light"] .tabs,
html[data-theme="light"] .rule-chip,
html[data-theme="light"] .portfolio-summary-group,
html[data-theme="light"] .trade-strategy-group,
html[data-theme="light"] .trade-card,
html[data-theme="light"] .history-chart,
html[data-theme="light"] .scenario-card {
  background: var(--surface);
}
html[data-theme="light"] .calculator-panel,
html[data-theme="light"] .trades-panel {
  background: linear-gradient(145deg,#fff,#f3f7fb);
}
html[data-theme="light"] .portfolio-summary-group > header,
html[data-theme="light"] .trade-strategy-group > header,
html[data-theme="light"] .trade-card > header,
html[data-theme="light"] .analysis-modal > header,
html[data-theme="light"] .trade-close-modal > header {
  background: var(--surface-2);
}
html[data-theme="light"] .filters select,
html[data-theme="light"] .filters input,
html[data-theme="light"] .calculator-form input,
html[data-theme="light"] .calculator-form select,
html[data-theme="light"] .trade-form input,
html[data-theme="light"] .trade-form select,
html[data-theme="light"] .trade-close-form input,
html[data-theme="light"] .trade-close-form textarea {
  background: #fff;
  color: var(--ink);
}
html[data-theme="light"] .filters select::placeholder,
html[data-theme="light"] .filters input::placeholder,
html[data-theme="light"] .calculator-form input::placeholder,
html[data-theme="light"] .trade-form input::placeholder,
html[data-theme="light"] .trade-close-form input::placeholder,
html[data-theme="light"] .trade-close-form textarea::placeholder {
  color: #7a8799;
  opacity: 1;
}
html[data-theme="light"] .filters label > span,
html[data-theme="light"] .calculator-form label > span,
html[data-theme="light"] .trade-form label > span,
html[data-theme="light"] .trade-close-form label > span {
  color: #516078;
}
html[data-theme="light"] .rule-chip b,
html[data-theme="light"] .calculator-components b,
html[data-theme="light"] .closed-summary-grid strong,
html[data-theme="light"] .portfolio-summary-metrics strong,
html[data-theme="light"] .trade-contract-meta b,
html[data-theme="light"] .trade-timeline b,
html[data-theme="light"] .scenario-facts b,
html[data-theme="light"] .scenario-summary-row strong,
html[data-theme="light"] .contract-metrics dd,
html[data-theme="light"] .symbol,
html[data-theme="light"] .chain-symbol,
html[data-theme="light"] .asset-rail-title {
  color: var(--ink);
}
html[data-theme="light"] .metric-card.slate .metric-icon { color: #516078; }
html[data-theme="light"] .calculator-metrics > div,
html[data-theme="light"] .realized-result > div,
html[data-theme="light"] .portfolio-summary-metrics > div,
html[data-theme="light"] .trade-prices > div,
html[data-theme="light"] .contract-return,
html[data-theme="light"] .contract-metrics > div,
html[data-theme="light"] .scenario-card dl div,
html[data-theme="light"] .queue-badge,
html[data-theme="light"] .score-pill {
  background: var(--surface-2);
}
html[data-theme="light"] .trade-prices > .trade-allocation-group { background: transparent; }
html[data-theme="light"] .trade-allocation-group > div { background: var(--surface-2); }
html[data-theme="light"] .calculator-components i,
html[data-theme="light"] .score-track,
html[data-theme="light"] .trade-timeline-track {
  background: var(--surface-3);
}
html[data-theme="light"] .trade-strategy.long { color: var(--violet); }
html[data-theme="light"] .trade-return-box > em { color: #18794e; }
html[data-theme="light"] .trade-exit-note,
html[data-theme="light"] .top-reason,
html[data-theme="light"] .contract-return small,
html[data-theme="light"] .covered-score strong small {
  color: #52627a;
}
html[data-theme="light"] .opportunity-identity .expiry-alert,
html[data-theme="light"] .queue-badge.sell,
html[data-theme="light"] .scenario-loss-list { color: var(--red); }
html[data-theme="light"] .selection-tags span { color: var(--magenta); }
html[data-theme="light"] .history-chart .axis { stroke: #aebbd0; }
html[data-theme="light"] .chain-sort-button:hover { color: #162033; }
html[data-theme="light"] .chain-symbol { font-weight: 900; }

@media (max-width: 900px) {
  .market-workspace { grid-template-columns: 1fr; }
  .market-filter-rail { position: static; }
  .market-filter-rail .control-panel { max-height: none; overflow: visible; }
  .market-filter-rail .market-selector-cards { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .market-filter-rail .tabs { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .market-filter-rail .filters { grid-template-columns: 1fr 1fr; }
  html[data-theme="light"] .asset-rail { background: rgba(242,245,249,.94); }
}

.empty-state { text-align: center; padding: 55px 20px; color: var(--muted); }
.empty-state div { font-size: 2.5rem; }
.empty-state h2 { margin: 5px 0; color: var(--ink); font-size: 1rem; }
.empty-state p { font-size: .75rem; }
.hidden { display: none !important; }
footer { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); border-top: 1px solid var(--line); margin-top: 28px; padding: 16px 3px 0; font-size: .68rem; }
footer a { color: var(--blue); }

@keyframes assetPulse {
  0%, 100% { border-color: var(--line); box-shadow: var(--shadow-sm); }
  35% { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(18,201,255,.12), 0 14px 34px rgba(0,0,0,.28); }
}
.asset-highlight { animation: assetPulse 1.35s ease; }

@media (max-width: 900px) {
  .hero { align-items: stretch; flex-direction: column; }
  .hero-actions { justify-content: space-between; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .filters { grid-template-columns: 1fr 1fr; }
  .dashboard-layout { grid-template-columns: 1fr; }
  .asset-strategy-grid { grid-template-columns: 1fr; }
  .dashboard-content, .asset-rail, .asset-rail-inner, .asset-nav { min-width: 0; max-width: 100%; }
  .asset-rail { top: 0; width: 100%; margin: 0 -4px 12px; padding: 7px 4px; overflow: hidden; background: rgba(7,11,20,.92); backdrop-filter: blur(12px); }
  .asset-rail-inner { width: 100%; padding: 0 0 8px; overflow: hidden; border-right: 0; border-bottom: 1px solid var(--line); }
  .asset-rail-title { margin-right: 4px; }
  .asset-nav { width: 100%; flex-direction: row; gap: 6px; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 0 0 2px; scrollbar-width: thin; }
  .asset-nav button { width: auto; min-width: max-content; }
  .top-card-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .contract-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .calculator-form { grid-template-columns: 1fr 1fr; }
  .trade-form { grid-template-columns: 1fr 1fr; }
  .trade-valuation-controls { grid-template-columns: 1fr; }
  .account-capital-form { grid-template-columns: repeat(2,minmax(0,1fr)) auto auto; }
  .account-capital-form > small { grid-column: 1 / -1; }
  .portfolio-summary { grid-template-columns: 1fr; }
  .account-growth-kpis { grid-template-columns: 1fr 1fr; }
  .portfolio-summary-group.total { grid-column: auto; }
  .portfolio-summary-metrics.primary { grid-template-columns: 1fr; }
  .trade-strategy-grid { grid-template-columns: 1fr; }
  .trade-returns, .trade-returns.long-call { grid-template-columns: 1fr; }
  .trade-analytics-history { grid-template-columns: 1fr; }
  .closed-summary-grid { grid-template-columns: 1fr 1fr; }
  #tradesList { grid-template-columns: 1fr; }
  #closedTradesList { grid-template-columns: 1fr; }
  .trade-jump-rail { top: auto; right: 50%; bottom: 12px; width: auto; grid-template-columns: repeat(3,auto); padding: 7px; transform: translateX(50%); }
  .trade-jump-rail[data-page-view="trades"] { grid-template-columns: repeat(2,auto); }
  .trade-jump-title { display: none; }
  .trade-jump-rail button { min-width: 104px; }
  .calculator-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .search-field { grid-column: 1 / -1; }
  .chain-filters { grid-template-columns: 1fr 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .setting-card { min-height: 240px; }
}
@media (max-width: 560px) {
  .market-filter-rail .market-selector-cards, .market-filter-rail .tabs, .market-filter-rail .filters { grid-template-columns: 1fr; }
  .page-shell { width: min(100% - 16px, 1520px); padding-top: 8px; }
  .portfolio-summary-metrics.primary { grid-template-columns: 1fr; }
  .main-navigation { top: 5px; grid-template-columns: repeat(8,minmax(72px,1fr)); overflow-x: auto; margin-bottom: 10px; }
  .main-navigation a { flex-direction: column; gap: 1px; min-height: 50px; padding: 5px 3px; font-size: .55rem; }
  .hero { min-height: auto; padding: 20px 17px; border-radius: 12px; }
  .brand-block { align-items: flex-start; gap: 12px; }
  .brand-mark { width: 42px; height: 42px; flex-basis: 42px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .freshness { padding: 0; border: 0; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .metric-card { min-height: 120px; padding: 13px; }
  .metric-card strong { font-size: 1.55rem; }
  .metric-card span { padding-left: 30px; }
  .filters { grid-template-columns: 1fr; }
  .market-card-filter { grid-template-columns: 1fr; }
  .market-selector-cards { grid-template-columns: 1fr; }
  .calculator-form { grid-template-columns: 1fr; }
  .trade-form { grid-template-columns: 1fr; }
  #tradeEditModalBody .trade-form { grid-template-columns: 1fr; }
  .compact-trade-card .compact-primary-returns { grid-template-columns: 1fr; }
  .trade-detail-window .trade-prices,.trade-detail-window .trade-analytics-history { grid-template-columns: 1fr; }
  .trade-valuation-controls article { grid-template-columns: 1fr; align-items: stretch; }
  .portfolio-summary-metrics.three { grid-template-columns: 1fr; }
  .portfolio-summary-metrics.four { grid-template-columns: 1fr; }
  .trade-close-form { grid-template-columns: 1fr; }
  .trade-close-form label, .trade-close-meta, .trade-close-note, .trade-close-actions { grid-column: 1; }
  .trades-header { flex-direction: column; }
  .trades-header-actions { width: 100%; justify-content: space-between; }
  .account-growth-panel > header { flex-direction: column; }
  .account-growth-kpis { grid-template-columns: 1fr; }
  .profit-recognition-kpis, .profit-recognition-context { grid-template-columns: 1fr; }
  .profit-recognition-strategies, .underlying-position-grid { grid-template-columns: 1fr; }
  .profit-recognition-header, .profit-recognition-details > header { flex-direction: column; }
  .profit-recognition-rates { grid-template-columns: 1fr; }
  .account-growth-chart, .account-growth-chart svg { min-height: 190px; }
  .trade-prices { grid-template-columns: 1fr 1fr; }
  .trade-allocation-group { grid-template-columns: 1fr; }
  .closed-summary-grid { grid-template-columns: 1fr 1fr; }
  .realized-result { grid-template-columns: 1fr; }
  .calculator-header, .calculator-score-head { align-items: flex-start; flex-direction: column; }
  .calculator-actions { flex-direction: column; }
  .search-field { grid-column: auto; }
  .tehran-chain-header { align-items: flex-start; flex-direction: column; }
  .chain-summary { width: 100%; }
  .chain-filters { grid-template-columns: 1fr; }
  .settings-header, .settings-footer { align-items: flex-start; flex-direction: column; }
  .group-header { align-items: flex-start; flex-direction: column; gap: 2px; }
  .asset-box-header { align-items: flex-start; flex-direction: column; }
  .asset-box-summary { width: 100%; justify-content: space-between; }
  .bar-row { grid-template-columns: 105px 1fr 28px; }
  .top-card-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .contract-grid { grid-template-columns: 1fr; padding: 9px; }
  .opportunity-card { min-height: 166px; }
  footer { flex-direction: column; }
  .modal-backdrop { padding: 7px; }
  .analysis-modal { max-height: calc(100vh - 14px); border-radius: 11px; }
  #analysisContent { padding: 12px; }
  .analysis-metrics { grid-template-columns: 1fr 1fr; }
  .scenario-heading { align-items: flex-start; flex-direction: column; }
  .scenario-facts { justify-content: flex-start; }
  .scenario-grid { grid-template-columns: 1fr; }
  .scenario-summary-row { grid-template-columns: 1fr; gap: 4px; }
  .scenario-card.long-scenario dl { grid-template-columns: 1fr; }
  .history-chart svg { min-height: 220px; }
}
@media (max-width: 390px) {
  .top-card-grid { grid-template-columns: 1fr; }
}

/* NICOPTION editorial system: exact reference palette and an 8px spacing grid. */
:root,
html[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #efefef;
  --surface-3: #efefef;
  --ink: #000000;
  --muted: #4a4a4a;
  --line: #000000;
  --line-strong: #000000;
  --navy: #ffffff;
  --blue: #0000ee;
  --blue-dark: #0000aa;
  --blue-soft: rgba(0,0,238,.07);
  --violet: #0000ee;
  --violet-soft: rgba(0,0,238,.07);
  --magenta: #ffa028;
  --magenta-soft: rgba(255,160,40,.16);
  --green: #0000ee;
  --green-soft: rgba(0,0,238,.07);
  --amber: #ffa028;
  --amber-soft: rgba(255,160,40,.18);
  --red: #c40000;
  --red-soft: rgba(196,0,0,.08);
  --shadow-sm: none;
  --shadow-lg: none;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #000000;
  --surface-2: #171717;
  --surface-3: #242424;
  --ink: #ffffff;
  --muted: #c8c8c8;
  --line: #ffffff;
  --line-strong: #ffffff;
  --navy: #000000;
  --blue: #ffa028;
  --blue-dark: #ffc06c;
  --blue-soft: rgba(255,160,40,.12);
  --violet: #ffa028;
  --violet-soft: rgba(255,160,40,.12);
  --magenta: #ffa028;
  --magenta-soft: rgba(255,160,40,.12);
  --green: #ffa028;
  --green-soft: rgba(255,160,40,.12);
  --amber: #ffa028;
  --amber-soft: rgba(255,160,40,.12);
  --red: #ff5c5c;
  --red-soft: rgba(255,92,92,.13);
  --shadow-sm: none;
  --shadow-lg: none;
}

body,
html[data-theme="light"] body,
html[data-theme="dark"] body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans JP", Arial, sans-serif;
  font-size: 13px;
}
h1, h2, h3, h4, h5 { font-family: "Times New Roman", "Noto Sans JP", serif; font-weight: 700; }
h1 { font-size: 32px; }
h2, .page-heading h2 { font-size: 24px; }
h3 { font-size: 19px; border-bottom: 1px solid currentColor; }
h4 { font-size: 16px; }
h5 { font-size: 13px; }
label, input, select, button, .tab, .main-navigation { font-family: Arial, "Noto Sans JP", sans-serif; font-weight: 700; }
.metric-card span, .metric-card small, .contract-metrics, .chain-table, .opportunity-meta, .rule-chip {
  font-family: AvenirNextPForBBG, "Noto Sans JP", Arial, sans-serif;
  font-weight: 600;
}

*, *::before, *::after { transition-duration: .001s !important; animation-duration: .001s !important; animation-iteration-count: 1 !important; }
.page-shell { width: min(1280px, calc(100% - 30px)); padding: 16px 0 30px; }
.hero,
html[data-theme="light"] .hero,
html[data-theme="dark"] .hero {
  min-height: 0;
  padding: 16px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
.hero::before, .hero::after { display: none; }
.brand-mark { color: #ffffff; background: #0000ee; border: 1px solid #000000; border-radius: 0; box-shadow: none; }
.eyebrow, .hero p, .freshness span, .freshness strong,
html[data-theme="light"] .eyebrow, html[data-theme="light"] .hero p,
html[data-theme="light"] .freshness span, html[data-theme="light"] .freshness strong { color: var(--ink); }
.live-dot { background: #ffa028; box-shadow: none; }
.freshness { border-color: var(--line); }

.main-navigation,
html[data-theme="light"] .main-navigation {
  top: 0;
  margin: 8px auto 16px;
  padding: 2px;
  gap: 2px;
  background: #efefef;
  border: 1px solid #000000;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.main-navigation a { min-height: 38px; color: #0000ee; border-radius: 0; font-size: 16px; text-decoration: underline; }
.main-navigation a:hover { color: #000000; background: #ffffff; }
.main-navigation a.active,
html[data-theme="light"] .main-navigation a.active,
html[data-theme="dark"] .main-navigation a.active { color: #000000; background: #ffa028; border-color: #000000; box-shadow: none; text-decoration: none; }
.ui-icon { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; }
.main-navigation a .ui-icon { color: currentColor; }

button,
.primary-button,
.secondary-button,
.chain-reset-columns,
.trade-action,
.modal-close {
  min-height: 24px;
  padding: 1px 6px;
  color: #000000;
  background: #efefef;
  border: 2px outset #000000;
  border-radius: 0;
  box-shadow: none;
  text-decoration: none;
}
button:hover,
.primary-button:hover,
.secondary-button:hover,
.chain-reset-columns:hover,
.trade-action:hover { color: #000000; background: #ffa028; border-color: #000000; transform: none; }
button:active { border-style: inset; }

input, select, textarea,
.filters input, .filters select,
.calculator-form input, .calculator-form select,
.trade-form input, .trade-form select,
.trade-close-form input, .trade-close-form textarea,
.chain-filters input, .chain-filters select,
html[data-theme="light"] .filters input, html[data-theme="light"] .filters select,
html[data-theme="light"] .calculator-form input, html[data-theme="light"] .calculator-form select,
html[data-theme="light"] .trade-form input, html[data-theme="light"] .trade-form select,
html[data-theme="light"] .chain-filters input, html[data-theme="light"] .chain-filters select {
  min-height: 24px;
  height: auto;
  padding: 1px 2px;
  color: #000000;
  background: #ffffff;
  border: 2px inset rgb(118,118,118);
  border-radius: 0;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #0000ee; outline-offset: 1px; box-shadow: none !important; }

a, footer a, .analysis-button { color: #0000ee; text-decoration: underline; }
a:hover, footer a:hover, .analysis-button:hover { color: #ffa028; }
.status-banner,
.metric-card,
.control-panel,
.calculator-panel,
.trades-panel,
.top-market,
.group-card,
.tehran-chain-panel,
.settings-panel,
.setting-card,
.opportunity-card,
.contract-card,
.trade-card,
.trade-strategy-group,
.portfolio-summary-group,
.analysis-modal,
.trade-close-modal,
.scenario-card,
html[data-theme="light"] .status-banner,
html[data-theme="light"] .metric-card,
html[data-theme="light"] .control-panel,
html[data-theme="light"] .calculator-panel,
html[data-theme="light"] .trades-panel,
html[data-theme="light"] .top-market,
html[data-theme="light"] .setting-card,
html[data-theme="light"] .opportunity-card,
html[data-theme="light"] .contract-card {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
.metric-card:hover, .opportunity-card:hover, .contract-card:hover { transform: none; border-color: #ffa028; box-shadow: inset 4px 0 0 #ffa028; }
.metric-icon, .top-rank, .calculator-badge, .chain-summary, .asset-box-summary b, .score-pill {
  color: #000000;
  background: #ffa028;
  border: 1px solid #000000;
  border-radius: 0;
}
.tabs, html[data-theme="light"] .tabs { padding: 2px; background: #efefef; border: 1px solid #000000; border-radius: 0; }
.tab { color: #000000; border: 1px solid transparent; border-radius: 0; }
.tab.active { color: #ffffff; background: #0000ee; border-color: #000000; box-shadow: none; }
.filters { gap: 8px; margin-top: 8px; padding-top: 8px; }
.rules-panel { gap: 8px; margin: 8px 0 16px; }
.rule-chip, html[data-theme="light"] .rule-chip { color: #000000; background: #efefef; border: 1px solid #000000; border-radius: 0; }
.rule-chip b, html[data-theme="light"] .rule-chip b { color: #000000; }

.settings-header, .asset-box-header, .strategy-box > header, .tehran-chain-header,
.trade-card > header, .trade-strategy-group > header, .portfolio-summary-group > header,
.analysis-modal > header, .trade-close-modal > header,
html[data-theme="light"] .settings-header, html[data-theme="light"] .asset-box-header,
html[data-theme="light"] .strategy-box > header, html[data-theme="light"] .tehran-chain-header,
html[data-theme="light"] .trade-card > header, html[data-theme="light"] .trade-strategy-group > header,
html[data-theme="light"] .portfolio-summary-group > header, html[data-theme="light"] .analysis-modal > header,
html[data-theme="light"] .trade-close-modal > header {
  color: var(--ink);
  background: #efefef;
  border-color: var(--line);
  box-shadow: none;
}
.strategy-box, html[data-theme="light"] .strategy-box { background: #ffffff; border: 1px solid #000000; border-radius: 0; }
.chain-table th, html[data-theme="light"] .chain-table th { color: #000000; background: #efefef; border-color: #000000; }
.chain-sort-button, html[data-theme="light"] .chain-sort-button { color: #0000ee; background: transparent; border: 0; text-decoration: underline; }
.chain-sort-button.active { color: #000000; background: #ffa028; box-shadow: inset 0 -2px 0 #000000; text-decoration: none; }
.chain-table td, html[data-theme="light"] .chain-table td { color: var(--ink); background: var(--surface); border-color: #000000; }
.chain-table tbody tr:nth-child(even) td, html[data-theme="light"] .chain-table tbody tr:nth-child(even) td { background: #efefef; }
.chain-table tbody tr:hover td { background: rgba(255,160,40,.22); }
.top-star { color: #ffa028; text-shadow: none; }
.top-five-row td:first-child { box-shadow: inset -4px 0 0 #ffa028; }
.badge, .queue-badge, .decision-badge, .selection-tags span { border-radius: 0; }
.badge.itm, .queue-badge.buy, .decision-badge.option { color: #0000ee; background: #ffffff; border-color: #0000ee; }
.badge.otm, .queue-badge.sell, .decision-badge.base { color: #000000; background: #ffa028; border-color: #000000; }
.positive, .positive-value, .return-cell.positive-value { color: #0000ee !important; }
.negative-value, .return-cell.negative-value, .profit-down, .warning { color: #c40000 !important; font-weight: 700; }
.opportunity-return b.negative-value, .contract-return strong.negative-value { color: #c40000 !important; }
.opportunity-return b.positive-value, .contract-return strong.positive-value { color: #0000ee !important; }
.top-reason, html[data-theme="light"] .top-reason { color: #000000; background: #efefef; border-right: 4px solid #ffa028; border-radius: 0; }
.settings-footer, .chain-method-note, html[data-theme="light"] .settings-footer, html[data-theme="light"] .chain-method-note { color: var(--ink); background: #efefef; }
.history-chart, html[data-theme="light"] .history-chart { background: #ffffff; border: 1px solid #000000; border-radius: 0; }
.history-chart .price-line { stroke: #0000ee; }
.history-chart .strike-reference { stroke: #ffa028; fill: #a65300; }
.history-chart .breakeven-reference { stroke: #c40000; fill: #c40000; }

@media (max-width: 1335px) { .page-shell { width: min(1280px, calc(100% - 30px)); } }
@media (max-width: 1279px) { .top-card-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width: 1123px) { .top-card-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 1020px) { .main-navigation a { font-size: 13px; } }
@media (max-width: 1019px) { .dashboard-layout { grid-template-columns: 160px minmax(0,1fr); } }
@media (max-width: 900px) { .dashboard-layout { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .metric-grid, .closed-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px) {
  .strategy-liquidity-card { grid-template-columns: minmax(0,1fr) 68px; }
  .strategy-profit-card { grid-template-columns: minmax(0,1fr); }
  .liquidity-donut.compact { width: 64px; }
  .asset-liquidity-chart { grid-template-columns: 1fr; }
  .asset-liquidity-chart ul { grid-template-columns: 1fr; }
  .asset-liquidity-chart .liquidity-donut { width: 132px; }
}
@media (max-width: 760px) { .overview-market-cards { grid-template-columns: 1fr; } .overview-market-filter > header { display: block; } .overview-market-filter > header h3 { margin-top: 3px; } }
@media (max-width: 760px) { .account-capital-form { grid-template-columns: 1fr; } .account-capital-form > small { grid-column: auto; } }
@media (max-width: 759px) { .hero { padding: 16px; } .top-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 675px) { .page-shell { width: calc(100% - 16px); } .top-card-grid { grid-template-columns: 1fr; } }

/* Appearance selector */
.appearance-setting-card { grid-column: span 2; }
.appearance-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: auto; }
.appearance-choice { position: relative; display: block; padding: 8px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.appearance-choice input { position: absolute; opacity: 0; pointer-events: none; }
.appearance-choice:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-soft); }
.appearance-choice strong, .appearance-choice small { display: block; text-align: center; }
.appearance-choice strong { margin-top: 6px; font-size: 12px; }
.appearance-choice small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.appearance-swatch { display: grid; grid-template-columns: repeat(4,1fr); gap: 3px; height: 48px; padding: 5px; border-radius: 6px; }
.appearance-swatch i { border-radius: 3px; }
.rahavard-choice .appearance-swatch { background: #f2f2f2; }
.rahavard-choice .appearance-swatch i:nth-child(1) { background: #0270c5; }
.rahavard-choice .appearance-swatch i:nth-child(2) { background: #ffffff; border: 1px solid #e3e3e3; }
.rahavard-choice .appearance-swatch i:nth-child(3) { background: #cf000f; }
.rahavard-choice .appearance-swatch i:nth-child(4) { background: #fee24f; }
.editorial-choice .appearance-swatch { background: #ffffff; border: 1px solid #000000; }
.editorial-choice .appearance-swatch i:nth-child(1) { background: #000000; }
.editorial-choice .appearance-swatch i:nth-child(2) { background: #0000ee; }
.editorial-choice .appearance-swatch i:nth-child(3) { background: #ffa028; }
.editorial-choice .appearance-swatch i:nth-child(4) { background: #efefef; }
.neon-choice .appearance-swatch { background: #070a12; }
.neon-choice .appearance-swatch i:nth-child(1) { background: #12c9ff; }
.neon-choice .appearance-swatch i:nth-child(2) { background: #7847ff; }
.neon-choice .appearance-swatch i:nth-child(3) { background: #70f000; }
.neon-choice .appearance-swatch i:nth-child(4) { background: #141c2b; }
.fundbase-choice .appearance-swatch { background: #ffffff; border: 1px solid #e2e8f0; }
.fundbase-choice .appearance-swatch i:nth-child(1) { background: #0059b3; }
.fundbase-choice .appearance-swatch i:nth-child(2) { background: #020817; }
.fundbase-choice .appearance-swatch i:nth-child(3) { background: #64748b; }
.fundbase-choice .appearance-swatch i:nth-child(4) { background: #f1f5f9; border: 1px solid #e2e8f0; }
.wallex-choice .appearance-swatch { background: #ffffff; border: 1px solid rgba(0,0,0,.08); }
.wallex-choice .appearance-swatch i:nth-child(1) { background: #007aff; }
.wallex-choice .appearance-swatch i:nth-child(2) { background: #052b61; }
.wallex-choice .appearance-swatch i:nth-child(3) { background: #039874; }
.wallex-choice .appearance-swatch i:nth-child(4) { background: #f65555; }
.enigma-choice .appearance-swatch { background: #ffffff; border: 1px solid #d9d9d9; }
.enigma-choice .appearance-swatch i:nth-child(1) { background: #3e52b1; }
.enigma-choice .appearance-swatch i:nth-child(2) { background: #26272c; }
.enigma-choice .appearance-swatch i:nth-child(3) { background: #1a6aff; }
.enigma-choice .appearance-swatch i:nth-child(4) { background: #c5cae8; }
.apple-choice .appearance-swatch { background: #f2f2f7; border: 1px solid rgba(60,60,67,.14); }
.apple-choice .appearance-swatch i:nth-child(1) { background: #007aff; }
.apple-choice .appearance-swatch i:nth-child(2) { background: #ffffff; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.apple-choice .appearance-swatch i:nth-child(3) { background: #34c759; }
.apple-choice .appearance-swatch i:nth-child(4) { background: #1c1c1e; }
.apple-yam-choice .appearance-swatch { background: #eeeeee; border: 1px solid #c9ced1; }
.apple-yam-choice .appearance-swatch i:nth-child(1) { background: #ea9216; }
.apple-yam-choice .appearance-swatch i:nth-child(2) { background: #3a4750; }
.apple-yam-choice .appearance-swatch i:nth-child(3) { background: #313841; }
.apple-yam-choice .appearance-swatch i:nth-child(4) { background: #eeeeee; border: 1px solid #c9ced1; }
.apple-sage-choice .appearance-swatch { background: #e2f0cc; border: 1px solid #bfd39f; }
.apple-sage-choice .appearance-swatch i:nth-child(1) { background: #8bc53d; }
.apple-sage-choice .appearance-swatch i:nth-child(2) { background: #012f13; }
.apple-sage-choice .appearance-swatch i:nth-child(3) { background: #011207; }
.apple-sage-choice .appearance-swatch i:nth-child(4) { background: #e2f0cc; }
.apple-ocean-choice .appearance-swatch { background: #f9f9f9; border: 1px solid #cbd6da; }
.apple-ocean-choice .appearance-swatch i:nth-child(1) { background: #004e72; }
.apple-ocean-choice .appearance-swatch i:nth-child(2) { background: #092634; }
.apple-ocean-choice .appearance-swatch i:nth-child(3) { background: #ff6e42; }
.apple-ocean-choice .appearance-swatch i:nth-child(4) { background: #f9f9f9; border: 1px solid #d8d8d8; }
.apple-forest-choice .appearance-swatch { background: #d6bd98; border: 1px solid #bca37c; }
.apple-forest-choice .appearance-swatch i:nth-child(1) { background: #677d6a; }
.apple-forest-choice .appearance-swatch i:nth-child(2) { background: #40534c; }
.apple-forest-choice .appearance-swatch i:nth-child(3) { background: #1a3636; }
.apple-forest-choice .appearance-swatch i:nth-child(4) { background: #d6bd98; }
.apple-crimson-choice .appearance-swatch { background: #f2f1ed; border: 1px solid #d8d2ca; }
.apple-crimson-choice .appearance-swatch i:nth-child(1) { background: #710014; }
.apple-crimson-choice .appearance-swatch i:nth-child(2) { background: #b38f6f; }
.apple-crimson-choice .appearance-swatch i:nth-child(3) { background: #161616; }
.apple-crimson-choice .appearance-swatch i:nth-child(4) { background: #f2f1ed; border: 1px solid #d8d2ca; }

/* Rahavard-inspired financial UI — default profile, retaining nicoption identity. */
html[data-appearance="rahavard"][data-theme="light"] {
  --bg: #f2f2f2;
  --surface: #ffffff;
  --surface-2: #f2f7fc;
  --surface-3: #e8f2fc;
  --ink: #000000;
  --muted: #6f6f6f;
  --line: #e3e3e3;
  --line-strong: #bababa;
  --navy: #ffffff;
  --blue: #0270c5;
  --blue-dark: #005a9e;
  --blue-soft: rgba(188,232,241,.3);
  --violet: #4b536c;
  --violet-soft: rgba(75,83,108,.09);
  --magenta: #a4873a;
  --magenta-soft: #f6e1af;
  --green: #0c643f;
  --green-soft: #dbfbe8;
  --amber: #64521f;
  --amber-soft: rgba(254,226,79,.32);
  --red: #cf000f;
  --red-soft: rgba(207,0,15,.08);
  --shadow-sm: 0 2px 4px rgba(189,189,189,.3);
  --shadow-lg: 0 10px 28px rgba(75,83,108,.18);
}
html[data-appearance="rahavard"][data-theme="dark"] {
  --bg: #001429;
  --surface: #0b2238;
  --surface-2: #102b45;
  --surface-3: #183a58;
  --ink: #ffffff;
  --muted: #b2d5fc;
  --line: #4b536c;
  --line-strong: #848a9d;
  --navy: #001429;
  --blue: #0092ff;
  --blue-dark: #b2d5fc;
  --blue-soft: rgba(0,146,255,.15);
  --violet: #b2d5fc;
  --violet-soft: rgba(178,213,252,.12);
  --magenta: #f3d075;
  --magenta-soft: rgba(243,208,117,.14);
  --green: #8fdf82;
  --green-soft: rgba(143,223,130,.13);
  --amber: #fee24f;
  --amber-soft: rgba(254,226,79,.13);
  --red: #ff6670;
  --red-soft: rgba(207,0,15,.18);
  --shadow-sm: 0 2px 4px rgba(0,0,0,.28);
  --shadow-lg: 0 12px 30px rgba(0,0,0,.4);
}
html[data-appearance="rahavard"] body { background: var(--bg); color: var(--ink); font-family: IRANSansXFaNum, "IRANSansX", Tahoma, Arial, sans-serif; font-size: 13px; font-weight: 500; }
html[data-appearance="rahavard"] h1,
html[data-appearance="rahavard"] h2,
html[data-appearance="rahavard"] h3,
html[data-appearance="rahavard"] h4,
html[data-appearance="rahavard"] h5 { font-family: inherit; font-weight: 700; border-bottom: 0; }
html[data-appearance="rahavard"] h1 { font-size: 28px; }
html[data-appearance="rahavard"] h2,
html[data-appearance="rahavard"] .page-heading h2 { font-size: 20px; }
html[data-appearance="rahavard"] h3 { font-size: 16px; }
html[data-appearance="rahavard"] h4 { font-size: 14px; }
html[data-appearance="rahavard"] .page-shell { width: min(1568px,calc(100% - 32px)); padding: 16px 0 32px; }
html[data-appearance="rahavard"] .hero { padding: 16px 20px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
html[data-appearance="rahavard"] .brand-mark { color: #ffffff; background: linear-gradient(145deg,#0270c5,#0092ff); border: 0; border-radius: 8px; }
html[data-appearance="rahavard"] .live-dot { background: #178b5a; }
html[data-appearance="rahavard"] .main-navigation { margin: 8px auto 16px; padding: 4px; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-sm); }
html[data-appearance="rahavard"] .main-navigation a { min-height: 40px; color: var(--muted); border-radius: 8px; font-size: 13px; text-decoration: none; }
html[data-appearance="rahavard"] .main-navigation a:hover { color: var(--blue); background: var(--surface-2); }
html[data-appearance="rahavard"] .main-navigation a.active { color: #ffffff; background: var(--blue); border-color: var(--blue); box-shadow: none; }
html[data-appearance="rahavard"] button,
html[data-appearance="rahavard"] .primary-button,
html[data-appearance="rahavard"] .secondary-button,
html[data-appearance="rahavard"] .chain-reset-columns,
html[data-appearance="rahavard"] .trade-action,
html[data-appearance="rahavard"] .modal-close { min-height: 30px; padding: 3px 8px; color: var(--blue); background: var(--surface); border: 1px solid var(--blue); border-radius: 4px; box-shadow: none; }
html[data-appearance="rahavard"] .primary-button { color: #ffffff; background: var(--blue); }
html[data-appearance="rahavard"] button:hover,
html[data-appearance="rahavard"] .secondary-button:hover,
html[data-appearance="rahavard"] .trade-action:hover { color: #ffffff; background: var(--blue-dark); border-color: var(--blue-dark); }
html[data-appearance="rahavard"] input,
html[data-appearance="rahavard"] select,
html[data-appearance="rahavard"] textarea,
html[data-appearance="rahavard"] .filters input,
html[data-appearance="rahavard"] .filters select,
html[data-appearance="rahavard"] .calculator-form input,
html[data-appearance="rahavard"] .calculator-form select,
html[data-appearance="rahavard"] .trade-form input,
html[data-appearance="rahavard"] .trade-form select,
html[data-appearance="rahavard"] .chain-filters input,
html[data-appearance="rahavard"] .chain-filters select { min-height: 36px; padding: 0 12px 0 4px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
html[data-appearance="rahavard"] input:focus,
html[data-appearance="rahavard"] select:focus,
html[data-appearance="rahavard"] textarea:focus { border-color: #2196f3; outline: 0; box-shadow: 0 0 2px rgba(33,150,243,.4) !important; }
html[data-appearance="rahavard"] a,
html[data-appearance="rahavard"] footer a,
html[data-appearance="rahavard"] .analysis-button { color: var(--blue); text-decoration: none; }
html[data-appearance="rahavard"] a:hover,
html[data-appearance="rahavard"] .analysis-button:hover { color: var(--blue-dark); text-decoration: underline; }
html[data-appearance="rahavard"] .status-banner,
html[data-appearance="rahavard"] .metric-card,
html[data-appearance="rahavard"] .control-panel,
html[data-appearance="rahavard"] .calculator-panel,
html[data-appearance="rahavard"] .trades-panel,
html[data-appearance="rahavard"] .top-market,
html[data-appearance="rahavard"] .group-card,
html[data-appearance="rahavard"] .tehran-chain-panel,
html[data-appearance="rahavard"] .settings-panel,
html[data-appearance="rahavard"] .setting-card,
html[data-appearance="rahavard"] .opportunity-card,
html[data-appearance="rahavard"] .contract-card,
html[data-appearance="rahavard"] .trade-card,
html[data-appearance="rahavard"] .trade-strategy-group,
html[data-appearance="rahavard"] .portfolio-summary-group,
html[data-appearance="rahavard"] .analysis-modal,
html[data-appearance="rahavard"] .trade-close-modal,
html[data-appearance="rahavard"] .scenario-card { color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-sm); }
html[data-appearance="rahavard"] .metric-card:hover,
html[data-appearance="rahavard"] .opportunity-card:hover,
html[data-appearance="rahavard"] .contract-card:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); }
html[data-appearance="rahavard"] .metric-icon,
html[data-appearance="rahavard"] .top-rank,
html[data-appearance="rahavard"] .calculator-badge,
html[data-appearance="rahavard"] .chain-summary,
html[data-appearance="rahavard"] .asset-box-summary b,
html[data-appearance="rahavard"] .score-pill { color: var(--blue); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; }
html[data-appearance="rahavard"] .tabs { padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; }
html[data-appearance="rahavard"] .tab { color: var(--muted); border-radius: 8px; }
html[data-appearance="rahavard"] .tab.active { color: #ffffff; background: var(--blue); border-color: var(--blue); }
html[data-appearance="rahavard"] .rule-chip { color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 7px; }
html[data-appearance="rahavard"] .rule-chip b { color: var(--ink); }
html[data-appearance="rahavard"] .settings-header,
html[data-appearance="rahavard"] .asset-box-header,
html[data-appearance="rahavard"] .strategy-box > header,
html[data-appearance="rahavard"] .tehran-chain-header,
html[data-appearance="rahavard"] .trade-card > header,
html[data-appearance="rahavard"] .trade-strategy-group > header,
html[data-appearance="rahavard"] .portfolio-summary-group > header,
html[data-appearance="rahavard"] .analysis-modal > header,
html[data-appearance="rahavard"] .trade-close-modal > header { color: var(--ink); background: var(--surface-2); border-color: var(--line); box-shadow: none; }
html[data-appearance="rahavard"] .strategy-box { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
html[data-appearance="rahavard"] .chain-table th { color: var(--ink); background: var(--surface-2); border-color: var(--line); }
html[data-appearance="rahavard"] .chain-sort-button { color: var(--muted); background: transparent; border: 0; text-decoration: none; }
html[data-appearance="rahavard"] .chain-sort-button.active { color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 -2px 0 var(--blue); }
html[data-appearance="rahavard"] .chain-table td { color: var(--ink); background: var(--surface); border-color: var(--line); }
html[data-appearance="rahavard"] .chain-table tbody tr:nth-child(even) td { background: var(--surface-2); }
html[data-appearance="rahavard"] .chain-table tbody tr:hover td { background: rgba(188,232,241,.3); }
html[data-appearance="rahavard"] .badge,
html[data-appearance="rahavard"] .queue-badge,
html[data-appearance="rahavard"] .decision-badge,
html[data-appearance="rahavard"] .selection-tags span { border-radius: 7px; }
html[data-appearance="rahavard"] .badge.itm,
html[data-appearance="rahavard"] .queue-badge.buy,
html[data-appearance="rahavard"] .decision-badge.option { color: var(--green); background: var(--green-soft); border-color: var(--green); }
html[data-appearance="rahavard"] .badge.otm { color: #64521f; background: rgba(254,226,79,.3); border-color: #fee24f; }
html[data-appearance="rahavard"] .queue-badge.sell,
html[data-appearance="rahavard"] .decision-badge.base { color: var(--red); background: var(--red-soft); border-color: var(--red); }
html[data-appearance="rahavard"] .positive,
html[data-appearance="rahavard"] .positive-value,
html[data-appearance="rahavard"] .return-cell.positive-value { color: var(--green) !important; }
html[data-appearance="rahavard"] .negative-value,
html[data-appearance="rahavard"] .return-cell.negative-value,
html[data-appearance="rahavard"] .profit-down,
html[data-appearance="rahavard"] .warning { color: var(--red) !important; }
html[data-appearance="rahavard"] .top-reason { color: var(--ink); background: var(--surface-2); border-right: 3px solid var(--blue); border-radius: 4px; }
html[data-appearance="rahavard"] .settings-footer,
html[data-appearance="rahavard"] .chain-method-note { color: var(--muted); background: var(--surface-2); }

/* Original neon profile retained as an option. */
html[data-appearance="neon"][data-theme="dark"] {
  --bg: #070a12; --surface: #0e1420; --surface-2: #141c2b; --surface-3: #1b2639;
  --ink: #f6f8ff; --muted: #929db2; --line: #253047; --line-strong: #3b4965;
  --blue: #12c9ff; --blue-dark: #7fe4ff; --blue-soft: rgba(18,201,255,.11);
  --violet: #7847ff; --violet-soft: rgba(120,71,255,.13); --magenta: #ff00bc;
  --green: #70f000; --green-soft: rgba(112,240,0,.1); --amber: #e9ff00;
  --red: #ff4d67; --red-soft: rgba(255,77,103,.11); --shadow-sm: 0 1px 2px rgba(0,0,0,.24);
}
html[data-appearance="neon"][data-theme="light"] {
  --bg: #f2f5f9; --surface: #ffffff; --surface-2: #f7f9fc; --surface-3: #edf2f7;
  --ink: #162033; --muted: #66758d; --line: #d8e0eb; --line-strong: #b9c5d5;
  --blue: #008dbb; --blue-dark: #006f95; --blue-soft: rgba(0,141,187,.1);
  --violet: #6842db; --green: #3b9500; --green-soft: rgba(59,149,0,.09);
  --amber: #8b7600; --red: #d92d4f; --red-soft: rgba(217,45,79,.09);
}
html[data-appearance="neon"] body { background: radial-gradient(circle at 50% -10%,var(--blue-soft),transparent 32%),var(--bg); color: var(--ink); font-family: "Noto Sans JP",Arial,sans-serif; }
html[data-appearance="neon"] h1,
html[data-appearance="neon"] h2,
html[data-appearance="neon"] h3,
html[data-appearance="neon"] h4 { font-family: inherit; border: 0; }
html[data-appearance="neon"] .hero { color: var(--ink); background: linear-gradient(120deg,var(--surface),var(--surface-3)); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 44px rgba(0,0,0,.3); }
html[data-appearance="neon"] .main-navigation { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
html[data-appearance="neon"] .main-navigation a { color: var(--muted); border-radius: 8px; font-size: 12px; text-decoration: none; }
html[data-appearance="neon"] .main-navigation a.active { color: var(--ink); background: var(--blue-soft); border-color: var(--blue); }
html[data-appearance="neon"] button,
html[data-appearance="neon"] .primary-button,
html[data-appearance="neon"] .secondary-button,
html[data-appearance="neon"] .trade-action { min-height: 32px; padding: 7px 12px; color: var(--blue); background: var(--blue-soft); border: 1px solid var(--blue); border-radius: 8px; }
html[data-appearance="neon"] .primary-button { color: #041019; background: var(--blue); }
html[data-appearance="neon"] input,
html[data-appearance="neon"] select,
html[data-appearance="neon"] textarea,
html[data-appearance="neon"] .filters input,
html[data-appearance="neon"] .filters select,
html[data-appearance="neon"] .chain-filters input,
html[data-appearance="neon"] .chain-filters select { min-height: 36px; padding: 7px 10px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; }
html[data-appearance="neon"] .metric-card,
html[data-appearance="neon"] .control-panel,
html[data-appearance="neon"] .top-market,
html[data-appearance="neon"] .group-card,
html[data-appearance="neon"] .contract-card,
html[data-appearance="neon"] .trades-panel,
html[data-appearance="neon"] .calculator-panel,
html[data-appearance="neon"] .tehran-chain-panel,
html[data-appearance="neon"] .settings-panel,
html[data-appearance="neon"] .setting-card { color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
html[data-appearance="neon"] .chain-table th { color: var(--ink); background: var(--surface-3); border-color: var(--line); }
html[data-appearance="neon"] .chain-table td { color: var(--ink); background: var(--surface); border-color: var(--line); }
html[data-appearance="neon"] .chain-sort-button { color: var(--ink); border: 0; text-decoration: none; }
html[data-appearance="neon"] .positive-value { color: var(--green) !important; }
html[data-appearance="neon"] .negative-value { color: var(--red) !important; }

/* Fundbase-inspired profile — clean white surfaces and restrained financial blue. */
html[data-appearance="fundbase"][data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff; --surface: #ffffff; --surface-2: rgba(241,245,249,.6); --surface-3: #f1f5f9;
  --ink: #020817; --muted: #64748b; --line: rgba(226,232,240,.6); --line-strong: #e2e8f0;
  --navy: #ffffff; --blue: #0059b3; --blue-dark: #00478f; --blue-soft: rgba(0,89,179,.08);
  --violet: #64748b; --violet-soft: rgba(100,116,139,.1); --magenta: #64748b; --magenta-soft: rgba(100,116,139,.09);
  --green: #047857; --green-soft: #ecfdf5; --amber: #9a6700; --amber-soft: #fffbeb;
  --red: #dc2626; --red-soft: #fef2f2; --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow-lg: 0 8px 24px rgba(2,8,23,.08);
  --fundbase-button-bg: #000000; --fundbase-button-ink: #ffffff;
}
html[data-appearance="fundbase"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #020817; --surface: #0f172a; --surface-2: #111c31; --surface-3: #17233a;
  --ink: #f8fafc; --muted: #94a3b8; --line: rgba(71,85,105,.58); --line-strong: #475569;
  --navy: #020817; --blue: #3b82f6; --blue-dark: #60a5fa; --blue-soft: rgba(59,130,246,.14);
  --violet: #94a3b8; --violet-soft: rgba(148,163,184,.1); --magenta: #94a3b8; --magenta-soft: rgba(148,163,184,.1);
  --green: #34d399; --green-soft: rgba(52,211,153,.11); --amber: #fbbf24; --amber-soft: rgba(251,191,36,.1);
  --red: #f87171; --red-soft: rgba(248,113,113,.12); --shadow-sm: 0 1px 2px rgba(0,0,0,.2); --shadow-lg: 0 10px 28px rgba(0,0,0,.3);
  --fundbase-button-bg: #f8fafc; --fundbase-button-ink: #020817;
}
html[data-appearance="fundbase"] body { color: var(--ink); background: var(--bg); font-family: "Vazirmatn",Tahoma,Arial,sans-serif; font-size: 14px; font-weight: 500; }
html[data-appearance="fundbase"] h1,
html[data-appearance="fundbase"] h2,
html[data-appearance="fundbase"] h3,
html[data-appearance="fundbase"] h4,
html[data-appearance="fundbase"] h5 { font-family: inherit; font-weight: 700; border: 0; }
html[data-appearance="fundbase"] h1 { font-size: 30px; }
html[data-appearance="fundbase"] h2,
html[data-appearance="fundbase"] .page-heading h2 { font-size: 20px; }
html[data-appearance="fundbase"] h3 { font-size: 16px; }
html[data-appearance="fundbase"] .page-shell { width: min(1400px,calc(100% - 32px)); padding: 16px 0 32px; }
html[data-appearance="fundbase"] .hero { min-height: 132px; padding: 24px; color: var(--ink); background: linear-gradient(135deg,var(--surface),var(--surface-3)); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
html[data-appearance="fundbase"] .hero::before { display: block; background: linear-gradient(105deg,transparent 45%,var(--blue-soft)); }
html[data-appearance="fundbase"] .hero::after { display: none; }
html[data-appearance="fundbase"] .hero p,
html[data-appearance="fundbase"] .eyebrow,
html[data-appearance="fundbase"] .freshness span,
html[data-appearance="fundbase"] .freshness strong { color: var(--muted); }
html[data-appearance="fundbase"] .brand-mark { width: 44px; height: 44px; flex-basis: 44px; color: #ffffff; background: #0059b3; border: 0; border-radius: 8px; box-shadow: none; }
html[data-appearance="fundbase"] .live-dot { background: #64748b; box-shadow: 0 0 0 4px rgba(100,116,139,.12); }
html[data-appearance="fundbase"] .main-navigation { top: 8px; margin: 8px auto 16px; padding: 4px; gap: 4px; background: color-mix(in srgb,var(--surface) 94%,transparent); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-sm); backdrop-filter: blur(12px); }
html[data-appearance="fundbase"] .main-navigation a { min-height: 40px; color: var(--muted); border-radius: 6px; font-size: 13px; text-decoration: none; }
html[data-appearance="fundbase"] .main-navigation a:hover { color: var(--blue); background: var(--surface-3); }
html[data-appearance="fundbase"] .main-navigation a.active { color: #ffffff; background: var(--blue); border-color: var(--blue); box-shadow: none; }
html[data-appearance="fundbase"] button,
html[data-appearance="fundbase"] .primary-button,
html[data-appearance="fundbase"] .secondary-button,
html[data-appearance="fundbase"] .chain-reset-columns,
html[data-appearance="fundbase"] .trade-action,
html[data-appearance="fundbase"] .modal-close { min-height: 32px; padding: 0 12px; color: var(--fundbase-button-ink); background: var(--fundbase-button-bg); border: 1px solid var(--fundbase-button-bg); border-radius: 4px; box-shadow: var(--shadow-sm); text-decoration: none; }
html[data-appearance="fundbase"] button:hover,
html[data-appearance="fundbase"] .secondary-button:hover,
html[data-appearance="fundbase"] .trade-action:hover { opacity: .84; transform: none; }
html[data-appearance="fundbase"] input,
html[data-appearance="fundbase"] select,
html[data-appearance="fundbase"] textarea,
html[data-appearance="fundbase"] .filters input,
html[data-appearance="fundbase"] .filters select,
html[data-appearance="fundbase"] .calculator-form input,
html[data-appearance="fundbase"] .calculator-form select,
html[data-appearance="fundbase"] .trade-form input,
html[data-appearance="fundbase"] .trade-form select,
html[data-appearance="fundbase"] .chain-filters input,
html[data-appearance="fundbase"] .chain-filters select { min-height: 38px; padding: 6px 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; }
html[data-appearance="fundbase"] input:focus,
html[data-appearance="fundbase"] select:focus,
html[data-appearance="fundbase"] textarea:focus { border-color: #3b82f6; outline: 0; box-shadow: 0 0 0 3px rgba(59,130,246,.18) !important; }
html[data-appearance="fundbase"] a,
html[data-appearance="fundbase"] footer a,
html[data-appearance="fundbase"] .analysis-button { color: var(--blue); text-decoration: none; }
html[data-appearance="fundbase"] a:hover,
html[data-appearance="fundbase"] .analysis-button:hover { color: var(--blue-dark); }
html[data-appearance="fundbase"] .status-banner,
html[data-appearance="fundbase"] .metric-card,
html[data-appearance="fundbase"] .control-panel,
html[data-appearance="fundbase"] .calculator-panel,
html[data-appearance="fundbase"] .trades-panel,
html[data-appearance="fundbase"] .top-market,
html[data-appearance="fundbase"] .group-card,
html[data-appearance="fundbase"] .tehran-chain-panel,
html[data-appearance="fundbase"] .settings-panel,
html[data-appearance="fundbase"] .setting-card,
html[data-appearance="fundbase"] .opportunity-card,
html[data-appearance="fundbase"] .contract-card,
html[data-appearance="fundbase"] .trade-card,
html[data-appearance="fundbase"] .trade-strategy-group,
html[data-appearance="fundbase"] .portfolio-summary-group,
html[data-appearance="fundbase"] .analysis-modal,
html[data-appearance="fundbase"] .trade-close-modal,
html[data-appearance="fundbase"] .scenario-card { color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-sm); }
html[data-appearance="fundbase"] .metric-card:hover,
html[data-appearance="fundbase"] .opportunity-card:hover,
html[data-appearance="fundbase"] .contract-card:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); transform: none; }
html[data-appearance="fundbase"] .metric-icon,
html[data-appearance="fundbase"] .top-rank,
html[data-appearance="fundbase"] .calculator-badge,
html[data-appearance="fundbase"] .chain-summary,
html[data-appearance="fundbase"] .asset-box-summary b,
html[data-appearance="fundbase"] .score-pill { color: var(--blue); background: var(--surface-3); border: 1px solid var(--line); border-radius: 6px; }
html[data-appearance="fundbase"] .tabs { padding: 4px; background: var(--surface-3); border: 1px solid var(--line); border-radius: 6px; }
html[data-appearance="fundbase"] .tab { color: var(--muted); border-radius: 4px; }
html[data-appearance="fundbase"] .tab.active { color: #ffffff; background: var(--blue); border-color: var(--blue); }
html[data-appearance="fundbase"] .rule-chip { color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 9999px; }
html[data-appearance="fundbase"] .rule-chip b { color: var(--ink); }
html[data-appearance="fundbase"] .settings-header,
html[data-appearance="fundbase"] .asset-box-header,
html[data-appearance="fundbase"] .strategy-box > header,
html[data-appearance="fundbase"] .tehran-chain-header,
html[data-appearance="fundbase"] .trade-card > header,
html[data-appearance="fundbase"] .trade-strategy-group > header,
html[data-appearance="fundbase"] .portfolio-summary-group > header,
html[data-appearance="fundbase"] .analysis-modal > header,
html[data-appearance="fundbase"] .trade-close-modal > header { color: var(--ink); background: var(--surface-2); border-color: var(--line); box-shadow: none; }
html[data-appearance="fundbase"] .strategy-box { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
html[data-appearance="fundbase"] .chain-table th { color: var(--ink); background: var(--surface-3); border-color: var(--line); }
html[data-appearance="fundbase"] .chain-sort-button { min-height: auto; padding: 5px 7px; color: var(--muted); background: transparent; border: 0; box-shadow: none; }
html[data-appearance="fundbase"] .chain-sort-button.active { color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 -2px 0 var(--blue); }
html[data-appearance="fundbase"] .chain-table td { color: var(--ink); background: var(--surface); border-color: var(--line); }
html[data-appearance="fundbase"] .chain-table tbody tr:nth-child(even) td { background: var(--surface-2); }
html[data-appearance="fundbase"] .chain-table tbody tr:hover td { background: var(--blue-soft); }
html[data-appearance="fundbase"] .badge,
html[data-appearance="fundbase"] .queue-badge,
html[data-appearance="fundbase"] .decision-badge,
html[data-appearance="fundbase"] .selection-tags span { border-radius: 9999px; }
html[data-appearance="fundbase"] .badge.itm,
html[data-appearance="fundbase"] .queue-badge.buy,
html[data-appearance="fundbase"] .decision-badge.option { color: var(--green); background: var(--green-soft); border-color: color-mix(in srgb,var(--green) 42%,var(--line)); }
html[data-appearance="fundbase"] .badge.otm { color: var(--amber); background: var(--amber-soft); border-color: color-mix(in srgb,var(--amber) 36%,var(--line)); }
html[data-appearance="fundbase"] .queue-badge.sell,
html[data-appearance="fundbase"] .decision-badge.base { color: var(--red); background: var(--red-soft); border-color: color-mix(in srgb,var(--red) 38%,var(--line)); }
html[data-appearance="fundbase"] .positive,
html[data-appearance="fundbase"] .positive-value,
html[data-appearance="fundbase"] .return-cell.positive-value,
html[data-appearance="fundbase"] .profit-up { color: var(--green) !important; }
html[data-appearance="fundbase"] .negative-value,
html[data-appearance="fundbase"] .return-cell.negative-value,
html[data-appearance="fundbase"] .profit-down,
html[data-appearance="fundbase"] .warning { color: var(--red) !important; }
html[data-appearance="fundbase"] .top-reason { color: var(--ink); background: var(--surface-3); border-right: 3px solid var(--blue); border-radius: 6px; }
html[data-appearance="fundbase"] .settings-footer,
html[data-appearance="fundbase"] .chain-method-note { color: var(--muted); background: var(--surface-2); }
html[data-appearance="fundbase"] .history-chart,
html[data-appearance="fundbase"] .account-growth-chart { background: var(--surface); border-color: var(--line); border-radius: 8px; }
html[data-appearance="fundbase"] .history-chart .price-line,
html[data-appearance="fundbase"] .account-growth-chart .account-growth-line.positive { stroke: var(--blue); }

/* Wallex-inspired profile — crisp trading blue, white surfaces and clear market states. */
html[data-appearance="wallex"][data-theme="light"] {
  color-scheme: light;
  --bg: #f7f9fc; --surface: #ffffff; --surface-2: #f8fafc; --surface-3: #e8f3ff;
  --ink: #252525; --muted: #737373; --line: rgba(0,0,0,.06); --line-strong: rgba(0,0,0,.12);
  --navy: #052b61; --blue: #007aff; --blue-dark: #0068d9; --blue-soft: rgba(0,122,255,.10);
  --violet: #052b61; --violet-soft: rgba(5,43,97,.08); --magenta: #007aff; --magenta-soft: rgba(0,122,255,.08);
  --green: #039874; --green-soft: rgba(3,152,116,.10); --amber: #a86300; --amber-soft: #fff7e8;
  --red: #f65555; --red-soft: rgba(246,85,85,.10); --shadow-sm: 0 2px 1px rgba(0,0,0,.10),0 0 1px rgba(0,0,0,.25); --shadow-lg: 0 12px 32px rgba(5,43,97,.10);
}
html[data-appearance="wallex"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #07182f; --surface: #0c2443; --surface-2: #102b4e; --surface-3: #15365d;
  --ink: #f8fbff; --muted: #aebdd0; --line: rgba(255,255,255,.07); --line-strong: rgba(255,255,255,.14);
  --navy: #052b61; --blue: #4ca2ff; --blue-dark: #78b9ff; --blue-soft: rgba(76,162,255,.13);
  --violet: #91bde9; --violet-soft: rgba(145,189,233,.10); --magenta: #4ca2ff; --magenta-soft: rgba(76,162,255,.10);
  --green: #28c99f; --green-soft: rgba(40,201,159,.12); --amber: #f3b24d; --amber-soft: rgba(243,178,77,.11);
  --red: #ff7373; --red-soft: rgba(255,115,115,.12); --shadow-sm: 0 2px 1px rgba(0,0,0,.22),0 0 1px rgba(255,255,255,.12); --shadow-lg: 0 14px 36px rgba(0,0,0,.28);
}
html[data-appearance="wallex"] body { color: var(--ink); background: var(--bg); font-family: "Vazirmatn",Tahoma,Arial,sans-serif; font-size: 14px; font-weight: 500; }
html[data-appearance="wallex"] h1,
html[data-appearance="wallex"] h2,
html[data-appearance="wallex"] h3,
html[data-appearance="wallex"] h4,
html[data-appearance="wallex"] h5 { font-family: inherit; font-weight: 700; border: 0; }
html[data-appearance="wallex"] h1 { font-size: 30px; }
html[data-appearance="wallex"] h2,
html[data-appearance="wallex"] .page-heading h2 { font-size: 20px; }
html[data-appearance="wallex"] h3 { font-size: 16px; }
html[data-appearance="wallex"] .page-shell { width: min(1536px,calc(100% - 32px)); padding: 16px 0 32px; }
html[data-appearance="wallex"] .hero { min-height: 128px; padding: 24px; color: var(--ink); background: linear-gradient(135deg,var(--surface),var(--surface-3)); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); }
html[data-appearance="wallex"] .hero::before { display: block; background: radial-gradient(circle at 18% 12%,var(--blue-soft),transparent 44%); }
html[data-appearance="wallex"] .hero::after { display: none; }
html[data-appearance="wallex"] .hero p,
html[data-appearance="wallex"] .eyebrow,
html[data-appearance="wallex"] .freshness span,
html[data-appearance="wallex"] .freshness strong { color: var(--muted); }
html[data-appearance="wallex"] .brand-mark { width: 46px; height: 46px; flex-basis: 46px; color: #fff; background: linear-gradient(145deg,#007aff,#052b61); border: 0; border-radius: 12px; box-shadow: var(--shadow-sm); }
html[data-appearance="wallex"] .live-dot { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
html[data-appearance="wallex"] .main-navigation { top: 8px; margin: 8px auto 16px; padding: 4px; gap: 4px; background: color-mix(in srgb,var(--surface) 94%,transparent); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); backdrop-filter: blur(12px); }
html[data-appearance="wallex"] .main-navigation a { min-height: 40px; color: var(--muted); border-radius: 8px; font-size: 13px; text-decoration: none; }
html[data-appearance="wallex"] .main-navigation a:hover { color: var(--blue); background: var(--blue-soft); }
html[data-appearance="wallex"] .main-navigation a.active { color: #fff; background: var(--blue); border-color: var(--blue); box-shadow: none; }
html[data-appearance="wallex"] button,
html[data-appearance="wallex"] .primary-button,
html[data-appearance="wallex"] .secondary-button,
html[data-appearance="wallex"] .chain-reset-columns,
html[data-appearance="wallex"] .trade-action,
html[data-appearance="wallex"] .modal-close { min-height: 34px; padding: 6px 12px; color: var(--blue); background: var(--surface); border: 1px solid var(--blue); border-radius: 8px; box-shadow: none; text-decoration: none; }
html[data-appearance="wallex"] .primary-button { color: #fff; background: var(--blue); border-color: var(--blue); border-radius: 40px; }
html[data-appearance="wallex"] button:hover,
html[data-appearance="wallex"] .secondary-button:hover,
html[data-appearance="wallex"] .trade-action:hover { color: #fff; background: var(--blue-dark); border-color: var(--blue-dark); transform: none; }
html[data-appearance="wallex"] input,
html[data-appearance="wallex"] select,
html[data-appearance="wallex"] textarea,
html[data-appearance="wallex"] .filters input,
html[data-appearance="wallex"] .filters select,
html[data-appearance="wallex"] .calculator-form input,
html[data-appearance="wallex"] .calculator-form select,
html[data-appearance="wallex"] .trade-form input,
html[data-appearance="wallex"] .trade-form select,
html[data-appearance="wallex"] .chain-filters input,
html[data-appearance="wallex"] .chain-filters select { min-height: 38px; padding: 6px 8px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; }
html[data-appearance="wallex"] input:focus,
html[data-appearance="wallex"] select:focus,
html[data-appearance="wallex"] textarea:focus { border-color: var(--blue); outline: 0; box-shadow: 0 0 0 3px var(--blue-soft) !important; }
html[data-appearance="wallex"] a,
html[data-appearance="wallex"] footer a,
html[data-appearance="wallex"] .analysis-button { color: var(--blue); text-decoration: none; }
html[data-appearance="wallex"] .status-banner,
html[data-appearance="wallex"] .metric-card,
html[data-appearance="wallex"] .control-panel,
html[data-appearance="wallex"] .calculator-panel,
html[data-appearance="wallex"] .trades-panel,
html[data-appearance="wallex"] .top-market,
html[data-appearance="wallex"] .group-card,
html[data-appearance="wallex"] .tehran-chain-panel,
html[data-appearance="wallex"] .settings-panel,
html[data-appearance="wallex"] .setting-card,
html[data-appearance="wallex"] .opportunity-card,
html[data-appearance="wallex"] .contract-card,
html[data-appearance="wallex"] .trade-card,
html[data-appearance="wallex"] .trade-strategy-group,
html[data-appearance="wallex"] .portfolio-summary-group,
html[data-appearance="wallex"] .analysis-modal,
html[data-appearance="wallex"] .trade-close-modal,
html[data-appearance="wallex"] .scenario-card { color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
html[data-appearance="wallex"] .metric-card:hover,
html[data-appearance="wallex"] .opportunity-card:hover,
html[data-appearance="wallex"] .contract-card:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); transform: none; }
html[data-appearance="wallex"] .overview-market-card { color: var(--ink); background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-sm); }
html[data-appearance="wallex"] .overview-market-card.active { color: #fff; background: var(--blue); border-color: var(--blue); }
html[data-appearance="wallex"] .metric-icon,
html[data-appearance="wallex"] .top-rank,
html[data-appearance="wallex"] .calculator-badge,
html[data-appearance="wallex"] .chain-summary,
html[data-appearance="wallex"] .asset-box-summary b,
html[data-appearance="wallex"] .score-pill { color: var(--blue); background: var(--blue-soft); border: 1px solid var(--line); border-radius: 8px; }
html[data-appearance="wallex"] .tabs { padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; }
html[data-appearance="wallex"] .tab { color: var(--muted); border-radius: 6px; }
html[data-appearance="wallex"] .tab.active { color: #fff; background: var(--blue); border-color: var(--blue); }
html[data-appearance="wallex"] .rule-chip { color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 40px; }
html[data-appearance="wallex"] .rule-chip b { color: var(--ink); }
html[data-appearance="wallex"] .settings-header,
html[data-appearance="wallex"] .asset-box-header,
html[data-appearance="wallex"] .strategy-box > header,
html[data-appearance="wallex"] .tehran-chain-header,
html[data-appearance="wallex"] .trade-card > header,
html[data-appearance="wallex"] .trade-strategy-group > header,
html[data-appearance="wallex"] .portfolio-summary-group > header,
html[data-appearance="wallex"] .analysis-modal > header,
html[data-appearance="wallex"] .trade-close-modal > header { color: var(--ink); background: var(--surface-2); border-color: var(--line); box-shadow: none; }
html[data-appearance="wallex"] .strategy-box { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
html[data-appearance="wallex"] .chain-table th { color: var(--ink); background: var(--surface-3); border-color: var(--line); }
html[data-appearance="wallex"] .chain-sort-button { min-height: auto; padding: 5px 7px; color: var(--muted); background: transparent; border: 0; box-shadow: none; }
html[data-appearance="wallex"] .chain-sort-button.active { color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 -2px 0 var(--blue); }
html[data-appearance="wallex"] .chain-table td { color: var(--ink); background: var(--surface); border-color: var(--line); }
html[data-appearance="wallex"] .chain-table tbody tr:nth-child(even) td { background: var(--surface-2); }
html[data-appearance="wallex"] .chain-table tbody tr:hover td { background: var(--blue-soft); }
html[data-appearance="wallex"] .badge,
html[data-appearance="wallex"] .queue-badge,
html[data-appearance="wallex"] .decision-badge,
html[data-appearance="wallex"] .selection-tags span { border-radius: 40px; }
html[data-appearance="wallex"] .badge.itm,
html[data-appearance="wallex"] .queue-badge.buy,
html[data-appearance="wallex"] .decision-badge.option { color: var(--green); background: var(--green-soft); border-color: color-mix(in srgb,var(--green) 38%,var(--line)); }
html[data-appearance="wallex"] .queue-badge.sell,
html[data-appearance="wallex"] .decision-badge.base { color: var(--red); background: var(--red-soft); border-color: color-mix(in srgb,var(--red) 38%,var(--line)); }
html[data-appearance="wallex"] .positive,
html[data-appearance="wallex"] .positive-value,
html[data-appearance="wallex"] .return-cell.positive-value,
html[data-appearance="wallex"] .profit-up { color: var(--green) !important; }
html[data-appearance="wallex"] .negative-value,
html[data-appearance="wallex"] .return-cell.negative-value,
html[data-appearance="wallex"] .profit-down,
html[data-appearance="wallex"] .warning { color: var(--red) !important; }
html[data-appearance="wallex"] .top-reason { color: var(--ink); background: var(--surface-3); border-right: 3px solid var(--blue); border-radius: 8px; }
html[data-appearance="wallex"] .settings-footer,
html[data-appearance="wallex"] .chain-method-note { color: var(--muted); background: var(--surface-2); }
html[data-appearance="wallex"] .history-chart,
html[data-appearance="wallex"] .account-growth-chart { background: var(--surface); border-color: var(--line); border-radius: 12px; }
html[data-appearance="wallex"] .history-chart .price-line,
html[data-appearance="wallex"] .account-growth-chart .account-growth-line.positive { stroke: var(--blue); }

/* Enigma-inspired profile — compact Ant-style controls and restrained indigo. */
html[data-appearance="enigma"][data-theme="light"] {
  color-scheme: light;
  --bg: #f7f7f9; --surface: #ffffff; --surface-2: #f5f5f7; --surface-3: #ebecf4;
  --ink: #000000; --muted: #67686d; --line: #ececef; --line-strong: #d9d9d9;
  --navy: #26272c; --blue: #3e52b1; --blue-dark: #1a6aff; --blue-soft: rgba(62,82,177,.10);
  --violet: #3e52b1; --violet-soft: rgba(62,82,177,.10); --magenta: #1a6aff; --magenta-soft: rgba(26,106,255,.09);
  --green: #07865f; --green-soft: rgba(7,134,95,.10); --amber: #b26b00; --amber-soft: #fff7e6;
  --red: #d9363e; --red-soft: rgba(217,54,62,.09); --shadow-sm: none; --shadow-lg: 0 10px 26px rgba(38,39,44,.10);
  --enigma-button-bg: #ebecf0; --enigma-button-ink: #67686d; --enigma-button-line: #d2d3d9;
}
html[data-appearance="enigma"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #18191d; --surface: #26272c; --surface-2: #2e2f35; --surface-3: #34363e;
  --ink: #ffffff; --muted: #a5a6ac; --line: rgba(255,255,255,.07); --line-strong: #494b54;
  --navy: #18191d; --blue: #8190e4; --blue-dark: #6b8fff; --blue-soft: rgba(129,144,228,.13);
  --violet: #8190e4; --violet-soft: rgba(129,144,228,.12); --magenta: #6b8fff; --magenta-soft: rgba(107,143,255,.11);
  --green: #43c99a; --green-soft: rgba(67,201,154,.12); --amber: #ffc35c; --amber-soft: rgba(255,195,92,.11);
  --red: #ff737a; --red-soft: rgba(255,115,122,.12); --shadow-sm: none; --shadow-lg: 0 12px 30px rgba(0,0,0,.28);
  --enigma-button-bg: #34363e; --enigma-button-ink: #d9d9d9; --enigma-button-line: #4c4e57;
}
html[data-appearance="enigma"] body { color: var(--ink); background: var(--bg); font-family: "Vazirmatn",-apple-system,BlinkMacSystemFont,Tahoma,Arial,sans-serif; font-size: 14px; font-weight: 500; }
html[data-appearance="enigma"] h1,
html[data-appearance="enigma"] h2,
html[data-appearance="enigma"] h3,
html[data-appearance="enigma"] h4,
html[data-appearance="enigma"] h5 { font-family: inherit; font-weight: 700; border: 0; }
html[data-appearance="enigma"] h1 { font-size: 24px; }
html[data-appearance="enigma"] h2,
html[data-appearance="enigma"] .page-heading h2 { font-size: 20px; }
html[data-appearance="enigma"] h3 { font-size: 16px; }
html[data-appearance="enigma"] .page-shell { width: min(1600px,calc(100% - 40px)); padding: 20px 0 30px; }
html[data-appearance="enigma"] .hero { min-height: 116px; padding: 20px 24px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: none; }
html[data-appearance="enigma"] .hero::before { display: block; background: linear-gradient(110deg,transparent 55%,var(--blue-soft)); }
html[data-appearance="enigma"] .hero::after { display: none; }
html[data-appearance="enigma"] .hero p,
html[data-appearance="enigma"] .eyebrow,
html[data-appearance="enigma"] .freshness span,
html[data-appearance="enigma"] .freshness strong { color: var(--muted); }
html[data-appearance="enigma"] .brand-mark { width: 44px; height: 44px; flex-basis: 44px; color: #fff; background: #3e52b1; border: 0; border-radius: 6px; box-shadow: none; }
html[data-appearance="enigma"] .live-dot { background: var(--blue-dark); box-shadow: 0 0 0 4px var(--blue-soft); }
html[data-appearance="enigma"] .main-navigation { top: 8px; margin: 8px auto 20px; padding: 4px; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: none; backdrop-filter: none; }
html[data-appearance="enigma"] .main-navigation a { min-height: 40px; color: var(--muted); border-radius: 6px; font-size: 12px; text-decoration: none; }
html[data-appearance="enigma"] .main-navigation a:hover { color: var(--blue-dark); background: var(--surface-2); }
html[data-appearance="enigma"] .main-navigation a.active { color: #fff; background: var(--blue); border-color: var(--blue); box-shadow: none; }
html[data-appearance="enigma"] button,
html[data-appearance="enigma"] .primary-button,
html[data-appearance="enigma"] .secondary-button,
html[data-appearance="enigma"] .chain-reset-columns,
html[data-appearance="enigma"] .trade-action,
html[data-appearance="enigma"] .modal-close { min-height: 34px; padding: 0 24px; color: var(--enigma-button-ink); background: var(--enigma-button-bg); border: 1px solid var(--enigma-button-line); border-radius: 6px; box-shadow: none; text-decoration: none; }
html[data-appearance="enigma"] .primary-button { color: #fff; background: var(--blue); border-color: var(--blue); }
html[data-appearance="enigma"] button:hover,
html[data-appearance="enigma"] .secondary-button:hover,
html[data-appearance="enigma"] .trade-action:hover { color: #fff; background: var(--blue-dark); border-color: var(--blue-dark); transform: none; }
html[data-appearance="enigma"] input,
html[data-appearance="enigma"] select,
html[data-appearance="enigma"] textarea,
html[data-appearance="enigma"] .filters input,
html[data-appearance="enigma"] .filters select,
html[data-appearance="enigma"] .calculator-form input,
html[data-appearance="enigma"] .calculator-form select,
html[data-appearance="enigma"] .trade-form input,
html[data-appearance="enigma"] .trade-form select,
html[data-appearance="enigma"] .chain-filters input,
html[data-appearance="enigma"] .chain-filters select { min-height: 38px; padding: 4px 11px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; }
html[data-appearance="enigma"] input:focus,
html[data-appearance="enigma"] select:focus,
html[data-appearance="enigma"] textarea:focus { border-color: transparent transparent #faad14; outline: 0; box-shadow: inset 0 -1px 0 #faad14 !important; }
html[data-appearance="enigma"] a,
html[data-appearance="enigma"] footer a,
html[data-appearance="enigma"] .analysis-button { color: var(--blue-dark); text-decoration: none; }
html[data-appearance="enigma"] a:hover,
html[data-appearance="enigma"] .analysis-button:hover { color: #4385ff; text-decoration: none; }
html[data-appearance="enigma"] .status-banner,
html[data-appearance="enigma"] .metric-card,
html[data-appearance="enigma"] .control-panel,
html[data-appearance="enigma"] .calculator-panel,
html[data-appearance="enigma"] .trades-panel,
html[data-appearance="enigma"] .top-market,
html[data-appearance="enigma"] .group-card,
html[data-appearance="enigma"] .tehran-chain-panel,
html[data-appearance="enigma"] .settings-panel,
html[data-appearance="enigma"] .setting-card,
html[data-appearance="enigma"] .opportunity-card,
html[data-appearance="enigma"] .contract-card,
html[data-appearance="enigma"] .trade-card,
html[data-appearance="enigma"] .trade-strategy-group,
html[data-appearance="enigma"] .portfolio-summary-group,
html[data-appearance="enigma"] .analysis-modal,
html[data-appearance="enigma"] .trade-close-modal,
html[data-appearance="enigma"] .scenario-card { color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: none; }
html[data-appearance="enigma"] .metric-card:hover,
html[data-appearance="enigma"] .opportunity-card:hover,
html[data-appearance="enigma"] .contract-card:hover { border-color: var(--blue); box-shadow: none; transform: none; }
html[data-appearance="enigma"] .overview-market-card { color: var(--ink); background: var(--surface); border-radius: 6px; box-shadow: none; }
html[data-appearance="enigma"] .overview-market-card.active { color: #fff; background: var(--blue); border-color: var(--blue); }
html[data-appearance="enigma"] .metric-icon,
html[data-appearance="enigma"] .top-rank,
html[data-appearance="enigma"] .calculator-badge,
html[data-appearance="enigma"] .chain-summary,
html[data-appearance="enigma"] .asset-box-summary b,
html[data-appearance="enigma"] .score-pill { color: var(--blue); background: var(--blue-soft); border: 1px solid var(--line); border-radius: 6px; }
html[data-appearance="enigma"] .tabs { padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; }
html[data-appearance="enigma"] .tab { color: var(--muted); border-radius: 6px; }
html[data-appearance="enigma"] .tab.active { color: #fff; background: var(--blue); border-color: var(--blue); }
html[data-appearance="enigma"] .rule-chip { color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
html[data-appearance="enigma"] .rule-chip b { color: var(--ink); }
html[data-appearance="enigma"] .settings-header,
html[data-appearance="enigma"] .asset-box-header,
html[data-appearance="enigma"] .strategy-box > header,
html[data-appearance="enigma"] .tehran-chain-header,
html[data-appearance="enigma"] .trade-card > header,
html[data-appearance="enigma"] .trade-strategy-group > header,
html[data-appearance="enigma"] .portfolio-summary-group > header,
html[data-appearance="enigma"] .analysis-modal > header,
html[data-appearance="enigma"] .trade-close-modal > header { color: var(--ink); background: var(--surface-2); border-color: var(--line); box-shadow: none; }
html[data-appearance="enigma"] .strategy-box { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
html[data-appearance="enigma"] .chain-table th { color: var(--ink); background: var(--surface-3); border-color: var(--line); }
html[data-appearance="enigma"] .chain-sort-button { min-height: auto; padding: 5px 7px; color: var(--muted); background: transparent; border: 0; box-shadow: none; }
html[data-appearance="enigma"] .chain-sort-button.active { color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 -2px 0 var(--blue); }
html[data-appearance="enigma"] .chain-table td { color: var(--ink); background: var(--surface); border-color: var(--line); }
html[data-appearance="enigma"] .chain-table tbody tr:nth-child(even) td { background: var(--surface-2); }
html[data-appearance="enigma"] .chain-table tbody tr:hover td { background: var(--blue-soft); }
html[data-appearance="enigma"] .badge,
html[data-appearance="enigma"] .queue-badge,
html[data-appearance="enigma"] .decision-badge,
html[data-appearance="enigma"] .selection-tags span { border-radius: 6px; }
html[data-appearance="enigma"] .positive,
html[data-appearance="enigma"] .positive-value,
html[data-appearance="enigma"] .return-cell.positive-value,
html[data-appearance="enigma"] .profit-up { color: var(--green) !important; }
html[data-appearance="enigma"] .negative-value,
html[data-appearance="enigma"] .return-cell.negative-value,
html[data-appearance="enigma"] .profit-down,
html[data-appearance="enigma"] .warning { color: var(--red) !important; }
html[data-appearance="enigma"] .top-reason { color: var(--ink); background: var(--surface-3); border-right: 3px solid var(--blue); border-radius: 6px; }
html[data-appearance="enigma"] .settings-footer,
html[data-appearance="enigma"] .chain-method-note { color: var(--muted); background: var(--surface-2); }
html[data-appearance="enigma"] .history-chart,
html[data-appearance="enigma"] .account-growth-chart { background: var(--surface); border-color: var(--line); border-radius: 6px; }
html[data-appearance="enigma"] .history-chart .price-line,
html[data-appearance="enigma"] .account-growth-chart .account-growth-line.positive { stroke: var(--blue); }

@media (max-width: 900px) { .appearance-setting-card { grid-column: auto; } .appearance-options { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 670px) { .appearance-options { grid-template-columns: 1fr; } }
@media (max-width: 1020px) { .chain-view-controls { grid-template-columns: 1fr 1fr; } }
@media (max-width: 670px) {
  .chain-column-manager > header { align-items: flex-start; flex-direction: column; }
  .chain-column-checklist, .chain-view-controls { grid-template-columns: 1fr; }
}

/* Persian typography is shared by all three appearance profiles. */
body,
html[data-appearance="rahavard"] body,
html[data-appearance="editorial"] body,
html[data-appearance="neon"] body,
html[data-appearance="fundbase"] body,
h1, h2, h3, h4, h5,
label, input, select, textarea, button,
.main-navigation, .tab, .metric-card, .contract-metrics,
.chain-table, .opportunity-meta, .rule-chip,
.history-chart svg {
  font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
}

/* Keep the option symbol visible while the wide strategy table scrolls. */
.chain-table th.sticky-option-symbol,
.chain-table td.sticky-option-symbol {
  position: sticky;
  right: auto;
  left: 0;
  min-width: 124px;
  border-left: 2px solid var(--blue);
  box-shadow: -8px 0 14px rgba(0,0,0,.12);
}
.chain-table th.sticky-option-symbol { z-index: 7; background: var(--surface-3); }
.chain-table td.sticky-option-symbol { z-index: 2; background: var(--surface); }
.chain-table tbody tr:nth-child(even) td.sticky-option-symbol { background: var(--surface-2); }
.chain-table tbody tr:hover td.sticky-option-symbol { background: var(--blue-soft); }

/* Forecast models */
.forecast-panel { display: grid; gap: 14px; }
.forecast-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.forecast-header small { color: var(--blue); font-size: .62rem; font-weight: 900; }
.forecast-header h2 { margin: 3px 0; font-size: 1.05rem; }
.forecast-header p { margin: 0; color: var(--muted); font-size: .7rem; }
.forecast-status { display: flex; align-items: center; gap: 8px; padding: 9px 12px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 9px; font-size: .68rem; }
.forecast-status.success { color: var(--green); background: var(--green-soft); border-color: color-mix(in srgb,var(--green) 35%,var(--line)); }
.forecast-status.error { color: var(--red); background: var(--red-soft); border-color: color-mix(in srgb,var(--red) 35%,var(--line)); }
.forecast-results { display: grid; gap: 16px; }
.forecast-meta { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.forecast-meta > div { padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; }
.forecast-meta span,.forecast-meta strong { display: block; }
.forecast-meta span { color: var(--muted); font-size: .58rem; }
.forecast-meta strong { margin-top: 2px; color: var(--ink); font-size: .72rem; }
.forecast-asset-card { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); }
.forecast-asset-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 18px; background: linear-gradient(135deg,var(--surface-2),var(--surface)); border-bottom: 1px solid var(--line); }
.forecast-asset-header small { color: var(--blue); font-size: .57rem; font-weight: 900; }
.forecast-asset-header h3 { margin: 2px 0; color: var(--ink); font-size: 1.05rem; }
.forecast-asset-header p { margin: 0; color: var(--muted); font-size: .65rem; }
.forecast-signal { min-width: 180px; padding: 9px 12px; text-align: center; background: var(--surface-3); border: 1px solid var(--line); border-radius: 9px; }
.forecast-signal span,.forecast-signal strong,.forecast-signal small { display: block; }
.forecast-signal span,.forecast-signal small { color: var(--muted); font-size: .56rem; }
.forecast-signal strong { margin: 2px 0; font-size: .92rem; }
.forecast-signal.buy { color: var(--green); border-color: color-mix(in srgb,var(--green) 45%,var(--line)); background: var(--green-soft); }
.forecast-signal.sell { color: var(--red); border-color: color-mix(in srgb,var(--red) 45%,var(--line)); background: var(--red-soft); }
.forecast-current-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; padding: 9px 15px; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: .62rem; }
.forecast-current-strip strong { color: var(--ink); }
.forecast-metrics { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 7px; padding: 12px 14px; }
.forecast-metric { min-width: 0; padding: 8px 9px; text-align: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; }
.forecast-metric span,.forecast-metric strong { display: block; }
.forecast-metric span { overflow: hidden; color: var(--muted); font-size: .55rem; white-space: nowrap; text-overflow: ellipsis; }
.forecast-metric strong { margin-top: 3px; color: var(--ink); font-size: .77rem; direction: ltr; }
.forecast-metric.positive-value strong { color: var(--green); }
.forecast-metric.negative-value strong { color: var(--red); }
.forecast-chart-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 0 14px 14px; }
.forecast-chart-card { min-width: 0; padding: 11px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.forecast-chart-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 36px; }
.forecast-chart-card h4 { margin: 0; color: var(--ink); font-size: .68rem; }
.forecast-chart-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 9px; color: var(--muted); font-size: .5rem; }
.forecast-chart-legend span { display: inline-flex; align-items: center; gap: 4px; }
.forecast-legend-line { width: 17px; height: 3px; border-radius: 2px; background: var(--chart-series-1); }
.forecast-legend-line.line-1 { background: var(--chart-series-2); }
.forecast-legend-line.line-2 { background: var(--chart-series-3); }
.forecast-legend-line.line-3 { background: var(--chart-series-4); }
.forecast-legend-line.threshold { height: 0; background: transparent; border-top: 2px dashed var(--chart-threshold-1); border-radius: 0; }
.forecast-legend-line.threshold-1 { border-top-color: var(--chart-threshold-2); border-top-style: dotted; }
.forecast-legend-line.threshold-2 { border-top-color: var(--chart-threshold-3); border-top-style: solid; }
.forecast-legend-line.threshold-3 { border-top-color: var(--chart-threshold-4); border-top-style: double; }
.forecast-legend-dot { width: 6px; height: 6px; border-radius: 50%; }
.forecast-legend-dot.buy { background: var(--green); }
.forecast-legend-dot.sell { background: var(--red); }
.forecast-chart-svg { display: block; width: 100%; height: auto; overflow: visible; direction: ltr; }
.forecast-grid-line { stroke: var(--line); stroke-width: 1; }
.forecast-axis-label { fill: var(--muted); font: 9px "Vazirmatn",sans-serif; }
.forecast-series { fill: none; stroke: var(--chart-series-1); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.forecast-series-1 { stroke: var(--chart-series-2); }
.forecast-series-2 { stroke: var(--chart-series-3); }
.forecast-series-3 { stroke: var(--chart-series-4); }
.forecast-threshold { stroke: var(--chart-threshold-1); stroke-width: 1.6; stroke-dasharray: 7 5; vector-effect: non-scaling-stroke; }
.forecast-threshold-1 { stroke: var(--chart-threshold-2); stroke-dasharray: 2 4; }
.forecast-threshold-2 { stroke: var(--chart-threshold-3); stroke-width: 2; stroke-dasharray: none; }
.forecast-threshold-3 { stroke: var(--chart-threshold-4); stroke-dasharray: 10 3 2 3; }
.forecast-signal-marker { stroke: var(--surface); stroke-width: 2; vector-effect: non-scaling-stroke; }
.forecast-signal-marker.buy { fill: var(--green); }
.forecast-signal-marker.sell { fill: var(--red); }
.forecast-chart-empty { display: grid; place-items: center; min-height: 180px; color: var(--muted); font-size: .65rem; }
.forecast-disclaimer { padding: 11px 13px; color: var(--muted); background: var(--amber-soft); border: 1px solid color-mix(in srgb,var(--amber) 30%,var(--line)); border-radius: 9px; font-size: .62rem; }
.forecast-disclaimer strong { color: var(--ink); }

@media (max-width: 1120px) {
  .main-navigation { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .forecast-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .main-navigation { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .forecast-header,.forecast-asset-header { align-items: stretch; flex-direction: column; }
  .forecast-meta,.forecast-chart-grid { grid-template-columns: 1fr; }
  .forecast-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .forecast-signal { min-width: 0; }
}

/* Apple system profile: calm hierarchy, grouped surfaces and iOS-like controls. */
html[data-appearance="apple"][data-theme="light"] {
  color-scheme: light;
  --bg: #f2f2f7;
  --surface: rgba(255,255,255,.94);
  --surface-2: #f9f9fb;
  --surface-3: #e9e9ee;
  --ink: #1c1c1e;
  --muted: #6e6e73;
  --line: rgba(60,60,67,.13);
  --line-strong: rgba(60,60,67,.24);
  --navy: #f2f2f7;
  --blue: #007aff;
  --blue-dark: #0062cc;
  --blue-soft: rgba(0,122,255,.10);
  --violet: #af52de;
  --violet-soft: rgba(175,82,222,.11);
  --magenta: #ff2d55;
  --magenta-soft: rgba(255,45,85,.10);
  --green: #248a3d;
  --green-soft: rgba(52,199,89,.11);
  --amber: #c93400;
  --amber-soft: rgba(255,159,10,.12);
  --red: #d70015;
  --red-soft: rgba(255,59,48,.10);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.045);
  --shadow-lg: 0 24px 70px rgba(0,0,0,.16);
}

html[data-appearance="apple"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --surface: rgba(28,28,30,.94);
  --surface-2: #2c2c2e;
  --surface-3: #3a3a3c;
  --ink: #f5f5f7;
  --muted: #aeaeb2;
  --line: rgba(84,84,88,.40);
  --line-strong: rgba(99,99,102,.62);
  --navy: #000000;
  --blue: #0a84ff;
  --blue-dark: #409cff;
  --blue-soft: rgba(10,132,255,.16);
  --violet: #bf5af2;
  --violet-soft: rgba(191,90,242,.15);
  --magenta: #ff375f;
  --magenta-soft: rgba(255,55,95,.14);
  --green: #30d158;
  --green-soft: rgba(48,209,88,.14);
  --amber: #ff9f0a;
  --amber-soft: rgba(255,159,10,.14);
  --red: #ff453a;
  --red-soft: rgba(255,69,58,.14);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.22), 0 10px 28px rgba(0,0,0,.20);
  --shadow-lg: 0 28px 80px rgba(0,0,0,.52);
}

/* Apple palette collection: the Apple component language stays intact while
   each profile swaps only its semantic surfaces, accent and chart colors. */
html[data-appearance="apple"][data-apple-palette="yam"][data-theme="light"] {
  --bg: #eeeeee; --surface: rgba(250,250,249,.95); --surface-2: #e4e7e8; --surface-3: #d4dadd;
  --ink: #202830; --muted: #5d6870; --line: rgba(49,56,65,.14); --line-strong: rgba(49,56,65,.28); --navy: #eeeeee;
  --blue: #3a4750; --blue-dark: #313841; --blue-soft: rgba(58,71,80,.12);
  --violet: #8f5c25; --violet-soft: rgba(143,92,37,.12); --magenta: #9d4c1b; --magenta-soft: rgba(157,76,27,.11);
  --green: #287a46; --green-soft: rgba(40,122,70,.11); --amber: #a65f00; --amber-soft: rgba(234,146,22,.14); --red: #c9342f; --red-soft: rgba(201,52,47,.11);
  --chart-series-1: #3a4750; --chart-series-2: #d67c00; --chart-series-3: #7d5a3a; --chart-series-4: #287a46;
  --chart-threshold-1: #a65f00; --chart-threshold-2: #526c7a; --chart-threshold-3: #c9342f; --chart-threshold-4: #76538f;
}
html[data-appearance="apple"][data-apple-palette="yam"][data-theme="dark"] {
  --bg: #171c21; --surface: rgba(49,56,65,.95); --surface-2: #3a4750; --surface-3: #485761;
  --ink: #eeeeee; --muted: #c4cbd0; --line: rgba(238,238,238,.14); --line-strong: rgba(238,238,238,.28); --navy: #171c21;
  --blue: #ea9216; --blue-dark: #ffb044; --blue-soft: rgba(234,146,22,.17);
  --violet: #d4a879; --violet-soft: rgba(212,168,121,.15); --magenta: #f08d65; --magenta-soft: rgba(240,141,101,.14);
  --green: #71d492; --green-soft: rgba(113,212,146,.14); --amber: #f2a631; --amber-soft: rgba(242,166,49,.15); --red: #ff7b72; --red-soft: rgba(255,123,114,.14);
  --chart-series-1: #78b7d1; --chart-series-2: #ea9216; --chart-series-3: #d4a879; --chart-series-4: #71d492;
  --chart-threshold-1: #ffd166; --chart-threshold-2: #7cd4dc; --chart-threshold-3: #ff7b72; --chart-threshold-4: #c7a0df;
}
html[data-appearance="apple"][data-apple-palette="yam"][data-theme="dark"] .primary-button { color: #202830; }

html[data-appearance="apple"][data-apple-palette="sage"][data-theme="light"] {
  --bg: #e2f0cc; --surface: rgba(249,252,244,.95); --surface-2: #edf6de; --surface-3: #d4e5b8;
  --ink: #011207; --muted: #486044; --line: rgba(1,47,19,.14); --line-strong: rgba(1,47,19,.28); --navy: #e2f0cc;
  --blue: #3d7114; --blue-dark: #285108; --blue-soft: rgba(139,197,61,.18);
  --violet: #627b35; --violet-soft: rgba(98,123,53,.13); --magenta: #8a5d36; --magenta-soft: rgba(138,93,54,.11);
  --green: #2f741a; --green-soft: rgba(139,197,61,.18); --amber: #8a6200; --amber-soft: rgba(180,133,0,.13); --red: #bd2c36; --red-soft: rgba(189,44,54,.11);
  --chart-series-1: #3d7114; --chart-series-2: #9a6800; --chart-series-3: #62508a; --chart-series-4: #008064;
  --chart-threshold-1: #7f6500; --chart-threshold-2: #087083; --chart-threshold-3: #bd2c36; --chart-threshold-4: #6c4c99;
}
html[data-appearance="apple"][data-apple-palette="sage"][data-theme="dark"] {
  --bg: #011207; --surface: rgba(1,47,19,.95); --surface-2: #123e21; --surface-3: #1e512d;
  --ink: #e2f0cc; --muted: #b5c9a5; --line: rgba(226,240,204,.14); --line-strong: rgba(226,240,204,.28); --navy: #011207;
  --blue: #a7d95f; --blue-dark: #c1ed7f; --blue-soft: rgba(139,197,61,.18);
  --violet: #c2a7df; --violet-soft: rgba(194,167,223,.14); --magenta: #ef91aa; --magenta-soft: rgba(239,145,170,.14);
  --green: #9bdd58; --green-soft: rgba(155,221,88,.15); --amber: #efc55c; --amber-soft: rgba(239,197,92,.15); --red: #ff8585; --red-soft: rgba(255,133,133,.14);
  --chart-series-1: #a7d95f; --chart-series-2: #efc55c; --chart-series-3: #c2a7df; --chart-series-4: #66d6b1;
  --chart-threshold-1: #f0d36f; --chart-threshold-2: #73d5e4; --chart-threshold-3: #ff8585; --chart-threshold-4: #d7aff0;
}
html[data-appearance="apple"][data-apple-palette="sage"][data-theme="dark"] .primary-button { color: #011207; }

html[data-appearance="apple"][data-apple-palette="ocean"][data-theme="light"] {
  --bg: #f9f9f9; --surface: rgba(255,255,255,.95); --surface-2: #edf3f5; --surface-3: #dce8ed;
  --ink: #092634; --muted: #536b76; --line: rgba(9,38,52,.13); --line-strong: rgba(9,38,52,.25); --navy: #f9f9f9;
  --blue: #004e72; --blue-dark: #003b57; --blue-soft: rgba(0,78,114,.11);
  --violet: #65539a; --violet-soft: rgba(101,83,154,.11); --magenta: #b63d65; --magenta-soft: rgba(182,61,101,.10);
  --green: #147a57; --green-soft: rgba(20,122,87,.11); --amber: #b64a21; --amber-soft: rgba(255,110,66,.13); --red: #d33142; --red-soft: rgba(211,49,66,.10);
  --chart-series-1: #004e72; --chart-series-2: #d94f28; --chart-series-3: #65539a; --chart-series-4: #147a57;
  --chart-threshold-1: #a26b00; --chart-threshold-2: #007f8b; --chart-threshold-3: #d33142; --chart-threshold-4: #6d4ea0;
}
html[data-appearance="apple"][data-apple-palette="ocean"][data-theme="dark"] {
  --bg: #04151d; --surface: rgba(9,38,52,.95); --surface-2: #0c3548; --surface-3: #11465d;
  --ink: #f9f9f9; --muted: #b6cbd4; --line: rgba(249,249,249,.14); --line-strong: rgba(249,249,249,.28); --navy: #04151d;
  --blue: #54b9e6; --blue-dark: #82cef0; --blue-soft: rgba(84,185,230,.16);
  --violet: #b49ae6; --violet-soft: rgba(180,154,230,.14); --magenta: #ff8aad; --magenta-soft: rgba(255,138,173,.14);
  --green: #69d5aa; --green-soft: rgba(105,213,170,.14); --amber: #ff8a65; --amber-soft: rgba(255,110,66,.16); --red: #ff7b72; --red-soft: rgba(255,123,114,.14);
  --chart-series-1: #54b9e6; --chart-series-2: #ff6e42; --chart-series-3: #b49ae6; --chart-series-4: #69d5aa;
  --chart-threshold-1: #ffd166; --chart-threshold-2: #5ee0e8; --chart-threshold-3: #ff7b72; --chart-threshold-4: #c8a8ee;
}

html[data-appearance="apple"][data-apple-palette="forest"][data-theme="light"] {
  --bg: #eee2d0; --surface: rgba(255,250,242,.95); --surface-2: #e3d0b3; --surface-3: #d6bd98;
  --ink: #1a3636; --muted: #5c6f67; --line: rgba(26,54,54,.14); --line-strong: rgba(26,54,54,.28); --navy: #eee2d0;
  --blue: #40534c; --blue-dark: #1a3636; --blue-soft: rgba(103,125,106,.15);
  --violet: #75635f; --violet-soft: rgba(117,99,95,.12); --magenta: #9a5f5f; --magenta-soft: rgba(154,95,95,.11);
  --green: #376b45; --green-soft: rgba(55,107,69,.12); --amber: #8a610f; --amber-soft: rgba(138,97,15,.12); --red: #b8323c; --red-soft: rgba(184,50,60,.11);
  --chart-series-1: #40534c; --chart-series-2: #9b6517; --chart-series-3: #76588f; --chart-series-4: #376b45;
  --chart-threshold-1: #8a610f; --chart-threshold-2: #34727a; --chart-threshold-3: #b8323c; --chart-threshold-4: #76588f;
}
html[data-appearance="apple"][data-apple-palette="forest"][data-theme="dark"] {
  --bg: #102424; --surface: rgba(26,54,54,.95); --surface-2: #40534c; --surface-3: #52685f;
  --ink: #f4e8d6; --muted: #c9c3b2; --line: rgba(214,189,152,.17); --line-strong: rgba(214,189,152,.32); --navy: #102424;
  --blue: #a8bca9; --blue-dark: #c4d3c4; --blue-soft: rgba(168,188,169,.17);
  --violet: #c2a6d3; --violet-soft: rgba(194,166,211,.14); --magenta: #e498a0; --magenta-soft: rgba(228,152,160,.14);
  --green: #8bd09a; --green-soft: rgba(139,208,154,.15); --amber: #d6bd98; --amber-soft: rgba(214,189,152,.16); --red: #ff8585; --red-soft: rgba(255,133,133,.14);
  --chart-series-1: #a8bca9; --chart-series-2: #d6bd98; --chart-series-3: #c2a6d3; --chart-series-4: #8bd09a;
  --chart-threshold-1: #ecd09f; --chart-threshold-2: #7bc9ce; --chart-threshold-3: #ff8585; --chart-threshold-4: #d4b2e6;
}
html[data-appearance="apple"][data-apple-palette="forest"][data-theme="dark"] .primary-button { color: #1a3636; }

html[data-appearance="apple"][data-apple-palette="crimson"][data-theme="light"] {
  --bg: #f2f1ed; --surface: rgba(255,255,253,.95); --surface-2: #eee5dc; --surface-3: #dfcbb9;
  --ink: #161616; --muted: #71635c; --line: rgba(22,22,22,.13); --line-strong: rgba(22,22,22,.25); --navy: #f2f1ed;
  --blue: #710014; --blue-dark: #51000e; --blue-soft: rgba(113,0,20,.10);
  --violet: #76536f; --violet-soft: rgba(118,83,111,.11); --magenta: #9b2140; --magenta-soft: rgba(155,33,64,.11);
  --green: #28734a; --green-soft: rgba(40,115,74,.11); --amber: #8a5b2f; --amber-soft: rgba(179,143,111,.16); --red: #b00020; --red-soft: rgba(176,0,32,.10);
  --chart-series-1: #710014; --chart-series-2: #9a653c; --chart-series-3: #76536f; --chart-series-4: #28734a;
  --chart-threshold-1: #8a5b2f; --chart-threshold-2: #246e7a; --chart-threshold-3: #b00020; --chart-threshold-4: #76536f;
}
html[data-appearance="apple"][data-apple-palette="crimson"][data-theme="dark"] {
  --bg: #161616; --surface: rgba(35,27,28,.96); --surface-2: #39282c; --surface-3: #52323a;
  --ink: #f2f1ed; --muted: #cbbeb6; --line: rgba(242,241,237,.14); --line-strong: rgba(242,241,237,.28); --navy: #161616;
  --blue: #c43c57; --blue-dark: #e25771; --blue-soft: rgba(196,60,87,.18);
  --violet: #c7a0bd; --violet-soft: rgba(199,160,189,.14); --magenta: #e46b88; --magenta-soft: rgba(228,107,136,.14);
  --green: #73ce96; --green-soft: rgba(115,206,150,.14); --amber: #d5ad89; --amber-soft: rgba(179,143,111,.17); --red: #ff7b72; --red-soft: rgba(255,123,114,.14);
  --chart-series-1: #e25771; --chart-series-2: #d5ad89; --chart-series-3: #c7a0bd; --chart-series-4: #73ce96;
  --chart-threshold-1: #e6c28e; --chart-threshold-2: #70cbd4; --chart-threshold-3: #ff7b72; --chart-threshold-4: #d7afd0;
}

html[data-appearance="apple"] { -webkit-tap-highlight-color: transparent; }
html[data-appearance="apple"] body,
html[data-appearance="apple"] button,
html[data-appearance="apple"] input,
html[data-appearance="apple"] select,
html[data-appearance="apple"] textarea,
html[data-appearance="apple"] label,
html[data-appearance="apple"] .tab,
html[data-appearance="apple"] .main-navigation {
  font-family: "Vazirmatn", -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", sans-serif;
}
html[data-appearance="apple"] body { color: var(--ink); background: var(--bg); font-size: 14px; font-weight: 500; }
html[data-appearance="apple"] h1,
html[data-appearance="apple"] h2,
html[data-appearance="apple"] h3,
html[data-appearance="apple"] h4,
html[data-appearance="apple"] h5 { border: 0; font-family: inherit; letter-spacing: -.018em; }
html[data-appearance="apple"] h1 { font-size: clamp(25px,3vw,34px); font-weight: 800; }
html[data-appearance="apple"] h2,
html[data-appearance="apple"] .page-heading h2 { font-size: clamp(22px,2.4vw,30px); font-weight: 800; }
html[data-appearance="apple"] h3 { font-size: 18px; font-weight: 750; }
html[data-appearance="apple"] .page-shell { width: min(1440px,calc(100% - 32px)); padding: max(16px,env(safe-area-inset-top)) 0 calc(36px + env(safe-area-inset-bottom)); }
html[data-appearance="apple"] .hero { min-height: 0; padding: 22px 24px; color: var(--ink); border: 0; border-radius: 24px; background: color-mix(in srgb,var(--surface) 84%,transparent); box-shadow: var(--shadow-sm); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); }
html[data-appearance="apple"] .hero::before,
html[data-appearance="apple"] .hero::after { display: none; }
html[data-appearance="apple"] .hero p,
html[data-appearance="apple"] .freshness strong { color: var(--muted); }
html[data-appearance="apple"] .eyebrow { color: var(--blue); letter-spacing: 0; }
html[data-appearance="apple"] .brand-mark { color: #fff; border: 0; border-radius: 14px; background: var(--blue); box-shadow: none; }
html[data-appearance="apple"] .main-navigation { top: max(8px,env(safe-area-inset-top)); gap: 3px; margin: 10px auto 18px; padding: 5px; border: 0; border-radius: 16px; background: color-mix(in srgb,var(--surface) 82%,transparent); box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(0,0,0,.06); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); }
html[data-appearance="apple"] .main-navigation a { min-height: 44px; padding: 7px 8px; color: var(--muted); border: 0; border-radius: 12px; font-size: 12px; font-weight: 650; text-decoration: none; }
html[data-appearance="apple"] .main-navigation a:hover { color: var(--ink); background: var(--surface-2); }
html[data-appearance="apple"] .main-navigation a.active { color: var(--blue); border: 0; background: var(--blue-soft); box-shadow: none; }
html[data-appearance="apple"] .main-navigation a .ui-icon { color: currentColor; }
html[data-appearance="apple"] button,
html[data-appearance="apple"] .primary-button,
html[data-appearance="apple"] .secondary-button,
html[data-appearance="apple"] .trade-action,
html[data-appearance="apple"] .chain-reset-columns,
html[data-appearance="apple"] .modal-close { min-height: 44px; padding: 9px 14px; border: 0; border-radius: 12px; box-shadow: none; font-size: 13px; font-weight: 700; transition: transform .18s ease, opacity .18s ease, background-color .18s ease; }
html[data-appearance="apple"] .primary-button { color: #fff; background: var(--blue); }
html[data-appearance="apple"] .secondary-button,
html[data-appearance="apple"] .trade-action,
html[data-appearance="apple"] .chain-reset-columns,
html[data-appearance="apple"] .modal-close { color: var(--blue); background: var(--blue-soft); }
html[data-appearance="apple"] button:hover,
html[data-appearance="apple"] .primary-button:hover,
html[data-appearance="apple"] .secondary-button:hover,
html[data-appearance="apple"] .trade-action:hover { transform: none; opacity: .82; }
html[data-appearance="apple"] button:active,
html[data-appearance="apple"] .primary-button:active,
html[data-appearance="apple"] .secondary-button:active { transform: scale(.98); }
html[data-appearance="apple"] input,
html[data-appearance="apple"] select,
html[data-appearance="apple"] textarea,
html[data-appearance="apple"] .filters input,
html[data-appearance="apple"] .filters select,
html[data-appearance="apple"] .chain-filters input,
html[data-appearance="apple"] .chain-filters select,
html[data-appearance="apple"] .calculator-form input,
html[data-appearance="apple"] .calculator-form select,
html[data-appearance="apple"] .trade-form input,
html[data-appearance="apple"] .trade-form select { min-height: 44px; padding: 9px 12px; color: var(--ink); border: 0; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px transparent; }
html[data-appearance="apple"] input:focus,
html[data-appearance="apple"] select:focus,
html[data-appearance="apple"] textarea:focus { outline: 0; border-color: transparent; box-shadow: inset 0 0 0 2px var(--blue) !important; }
html[data-appearance="apple"] .status-banner,
html[data-appearance="apple"] .metric-card,
html[data-appearance="apple"] .control-panel,
html[data-appearance="apple"] .calculator-panel,
html[data-appearance="apple"] .trades-panel,
html[data-appearance="apple"] .top-market,
html[data-appearance="apple"] .group-card,
html[data-appearance="apple"] .tehran-chain-panel,
html[data-appearance="apple"] .settings-panel,
html[data-appearance="apple"] .setting-card,
html[data-appearance="apple"] .opportunity-card,
html[data-appearance="apple"] .contract-card,
html[data-appearance="apple"] .trade-card,
html[data-appearance="apple"] .trade-strategy-group,
html[data-appearance="apple"] .portfolio-summary-group,
html[data-appearance="apple"] .account-growth-panel,
html[data-appearance="apple"] .profit-recognition-panel,
html[data-appearance="apple"] .forecast-header,
html[data-appearance="apple"] .forecast-asset-card,
html[data-appearance="apple"] .scenario-card { color: var(--ink); border: 1px solid transparent; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-sm); }
html[data-appearance="apple"] .metric-card:hover,
html[data-appearance="apple"] .opportunity-card:hover,
html[data-appearance="apple"] .contract-card:hover { border-color: transparent; box-shadow: var(--shadow-sm); transform: none; }
html[data-appearance="apple"] .settings-header,
html[data-appearance="apple"] .asset-box-header,
html[data-appearance="apple"] .strategy-box > header,
html[data-appearance="apple"] .tehran-chain-header,
html[data-appearance="apple"] .trade-card > header,
html[data-appearance="apple"] .trade-strategy-group > header,
html[data-appearance="apple"] .portfolio-summary-group > header,
html[data-appearance="apple"] .forecast-asset-header { color: var(--ink); border-color: var(--line); background: transparent; box-shadow: none; }
html[data-appearance="apple"] .strategy-box { border: 0; border-radius: 16px; background: var(--surface-2); }
html[data-appearance="apple"] .tabs,
html[data-appearance="apple"] .click-option-group { padding: 3px; border: 0; border-radius: 11px; background: var(--surface-3); }
html[data-appearance="apple"] .tab,
html[data-appearance="apple"] .click-option-group button { min-height: 36px; color: var(--muted); border: 0; border-radius: 9px; background: transparent; }
html[data-appearance="apple"] .tab.active,
html[data-appearance="apple"] .click-option-group button.active { color: var(--ink); border: 0; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.10); }
html[data-appearance="apple"] .badge,
html[data-appearance="apple"] .queue-badge,
html[data-appearance="apple"] .decision-badge,
html[data-appearance="apple"] .calculator-badge,
html[data-appearance="apple"] .score-pill,
html[data-appearance="apple"] .rule-chip { border-color: transparent; border-radius: 999px; }
html[data-appearance="apple"] .chain-table { border-collapse: separate; border-spacing: 0; }
html[data-appearance="apple"] .chain-table th { color: var(--muted); border-color: var(--line); background: color-mix(in srgb,var(--surface) 90%,transparent); backdrop-filter: blur(18px); }
html[data-appearance="apple"] .chain-table td { color: var(--ink); border-color: var(--line); background: var(--surface); }
html[data-appearance="apple"] .chain-table tbody tr:nth-child(even) td { background: var(--surface-2); }
html[data-appearance="apple"] .chain-table tbody tr:hover td { background: var(--blue-soft); }
html[data-appearance="apple"] .modal-backdrop { align-items: center; background: rgba(0,0,0,.26); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
html[data-appearance="apple"] .analysis-modal,
html[data-appearance="apple"] .trade-close-modal { color: var(--ink); border: 0; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-lg); }
html[data-appearance="apple"] .analysis-modal > header,
html[data-appearance="apple"] .trade-close-modal > header { color: var(--ink); border-color: var(--line); background: color-mix(in srgb,var(--surface) 88%,transparent); backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px); }
html[data-appearance="apple"] .profit-up,
html[data-appearance="apple"] .positive-value { color: var(--green) !important; }
html[data-appearance="apple"] .profit-down,
html[data-appearance="apple"] .negative-value,
html[data-appearance="apple"] .warning { color: var(--red) !important; }
html[data-appearance="apple"] .appearance-choice { min-height: 96px; border: 0; border-radius: 14px; background: var(--surface-2); }
html[data-appearance="apple"] .appearance-choice:has(input:checked) { border-color: transparent; box-shadow: inset 0 0 0 2px var(--blue); }

@media (max-width: 760px) {
  html[data-appearance="apple"] .page-shell { width: calc(100% - 16px); padding-top: max(8px,env(safe-area-inset-top)); }
  html[data-appearance="apple"] .hero { padding: 18px; border-radius: 20px; }
  html[data-appearance="apple"] .hero h1 { font-size: 28px; }
  html[data-appearance="apple"] .main-navigation { grid-template-columns: repeat(9,minmax(76px,1fr)); margin-bottom: 12px; border-radius: 15px; }
  html[data-appearance="apple"] .main-navigation a { min-height: 50px; padding: 5px; font-size: 10px; }
  html[data-appearance="apple"] .metric-card,
  html[data-appearance="apple"] .opportunity-card,
  html[data-appearance="apple"] .contract-card,
  html[data-appearance="apple"] .trade-card,
  html[data-appearance="apple"] .portfolio-summary-group { border-radius: 18px; }
  html[data-appearance="apple"] .modal-backdrop { place-items: end center; padding: 0; }
  html[data-appearance="apple"] .analysis-modal,
  html[data-appearance="apple"] .trade-close-modal { width: 100%; max-height: calc(92dvh - env(safe-area-inset-top)); padding-bottom: env(safe-area-inset-bottom); border-radius: 24px 24px 0 0; }
  html[data-appearance="apple"] .analysis-modal::before,
  html[data-appearance="apple"] .trade-close-modal::before { content: ""; position: sticky; z-index: 4; top: 7px; display: block; width: 36px; height: 5px; margin: 7px auto -12px; border-radius: 999px; background: var(--line-strong); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-appearance="apple"] *,
  html[data-appearance="apple"] *::before,
  html[data-appearance="apple"] *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Comprehensive option tables use an isolated Rahavard-style visual profile.
   This deliberately does not change filters, cards, modals or the selected app theme. */
html .tehran-chain-panel .chain-table-wrap {
  background: #ffffff;
  border-top: 1px solid #e3e3e3;
  box-shadow: rgba(189,189,189,.30) 0 2px 4px 0;
  scrollbar-color: #ffb20a #f2f2f2;
}
html .tehran-chain-panel .chain-table {
  color: #383838;
  background: #ffffff;
  font-family: IRANSansXFaNum, "Vazirmatn", IRANSans, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
}
html .tehran-chain-panel .chain-table th {
  min-width: 94px;
  color: #4b536c;
  background: #f2f2f2;
  border-bottom: 1px solid #e3e3e3;
  border-left: 1px solid #e3e3e3;
  box-shadow: none;
  backdrop-filter: none;
  text-align: center;
}
html .tehran-chain-panel .chain-header-control { min-height: 42px; }
html .tehran-chain-panel .column-drag-handle {
  width: 18px;
  flex-basis: 18px;
  color: #a5a6ac;
  border-left-color: #d2d3d9;
}
html .tehran-chain-panel .chain-header-control > .column-hide-button {
  min-height: 0;
  width: 20px;
  flex-basis: 20px;
  padding: 0;
  color: #a5a6ac;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
html .tehran-chain-panel .chain-header-control > .column-hide-button:hover {
  color: #cf000f;
  background: rgba(207,0,15,.08);
}
html .tehran-chain-panel .chain-sort-button {
  position: relative;
  min-height: 0;
  width: 100%;
  padding: 8px 24px;
  color: #4b536c;
  background: transparent;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  font-size: 12px;
  font-weight: 700;
  justify-content: center;
  text-align: center;
}
html .tehran-chain-panel .chain-sort-button:hover {
  color: #0270c5;
  background: rgba(188,232,241,.30);
}
html .tehran-chain-panel .chain-sort-button.active {
  color: #0270c5;
  background: #f2f7fc;
  box-shadow: inset 0 -2px 0 #0270c5;
}
html .tehran-chain-panel .chain-sort-button span {
  position: absolute;
  left: 7px;
  color: #848a9d;
}
html .tehran-chain-panel .chain-table th.dragging { opacity: .46; }
html .tehran-chain-panel .chain-table th.column-drop-target {
  background: #b2d5fc;
  box-shadow: inset 3px 0 0 #0270c5;
}
html .tehran-chain-panel .chain-table td {
  height: 43px;
  padding: 7px 10px;
  color: #383838;
  background: #ffffff;
  border-bottom: 1px solid #e3e3e3;
  border-left: 1px solid #f2f2f2;
  text-align: center;
}
html .tehran-chain-panel .chain-table tbody tr:nth-child(even) td { background: #f8fafc; }
html .tehran-chain-panel .chain-table tbody tr:hover td { background: rgba(188,232,241,.30); }
html .tehran-chain-panel .chain-table td small { color: #6f6f6f; font-size: 10px; }
html .tehran-chain-panel .chain-table th.sticky-option-symbol {
  z-index: 7;
  min-width: 142px;
  background: #f2f2f2;
  border-left: 2px solid #0270c5;
  box-shadow: -6px 0 12px rgba(189,189,189,.24);
}
html .tehran-chain-panel .chain-table td.sticky-option-symbol {
  z-index: 2;
  min-width: 142px;
  background: #ffffff;
  border-left: 2px solid #0270c5;
  box-shadow: -6px 0 12px rgba(189,189,189,.20);
}
html .tehran-chain-panel .chain-table tbody tr:nth-child(even) td.sticky-option-symbol { background: #f8fafc; }
html .tehran-chain-panel .chain-table tbody tr:hover td.sticky-option-symbol { background: rgba(188,232,241,.30); }
html .tehran-chain-panel .chain-symbol-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 28px;
  padding: 2px 6px;
  color: #0270c5;
  background: transparent;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
html .tehran-chain-panel .chain-symbol-button:hover {
  color: #0092ff;
  background: rgba(188,232,241,.30);
  transform: none;
}
html .tehran-chain-panel .chain-symbol { color: inherit; }
html .tehran-chain-panel .top-star { color: #ffb20a; text-shadow: none; }
html .tehran-chain-panel .top-five-row td:first-child { box-shadow: inset -3px 0 0 #ffb20a; }
html .tehran-chain-panel .chain-table .return-cell.positive-value,
html .tehran-chain-panel .chain-table .positive-value { color: #0c643f !important; }
html .tehran-chain-panel .chain-table .return-cell.negative-value,
html .tehran-chain-panel .chain-table .negative-value,
html .tehran-chain-panel .chain-table .warning { color: #cf000f !important; }
html .tehran-chain-panel .chain-table .badge,
html .tehran-chain-panel .chain-table .queue-badge,
html .tehran-chain-panel .chain-table .decision-badge,
html .tehran-chain-panel .chain-table .score-pill {
  border-radius: 8px;
  box-shadow: none;
}
html .tehran-chain-panel .chain-table .badge.itm,
html .tehran-chain-panel .chain-table .queue-badge.buy {
  color: #0c643f;
  background: #dbfbe8;
  border-color: rgba(12,100,63,.25);
}
html .tehran-chain-panel .chain-table .badge.otm,
html .tehran-chain-panel .chain-table .queue-badge.sell {
  color: #a10009;
  background: rgba(207,0,15,.08);
  border-color: rgba(207,0,15,.22);
}
html .tehran-chain-panel .chain-empty { color: #6f6f6f !important; background: #ffffff !important; }

@media (max-width: 768px) {
  html .tehran-chain-panel .chain-table { font-size: 11px; }
  html .tehran-chain-panel .chain-table td { padding: 6px 8px; }
}

/* Floating filter rail for the comprehensive strategy tables. */
.tehran-chain-panel[data-page-view="tehran-options"] { overflow: visible; }
.chain-workspace {
  display: grid;
  grid-template-areas: "main rail";
  grid-template-columns: minmax(0,1fr) 286px;
  align-items: start;
  direction: ltr;
}
.chain-main-content {
  grid-area: main;
  min-width: 0;
  direction: rtl;
  border-left: 1px solid var(--line);
}
.chain-filter-rail {
  grid-area: rail;
  position: sticky;
  z-index: 8;
  top: 78px;
  max-height: calc(100vh - 250px);
  margin: 12px;
  overflow: auto;
  direction: rtl;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  scrollbar-width: thin;
}
.chain-filter-rail > header {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  color: var(--ink);
  background: color-mix(in srgb,var(--surface) 94%,transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.chain-filter-rail > header span { font-size: .76rem; font-weight: 900; }
.chain-filter-rail > header small { color: var(--muted); font-size: .55rem; line-height: 1.7; }
.chain-filter-rail .chain-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 0;
}
.chain-filter-rail .chain-filters label,
.chain-filter-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: .59rem;
}
.chain-filter-rail .chain-filters label > span:first-child,
.chain-filter-block > span:first-child { color: var(--ink); font-weight: 800; }
.chain-filter-cards {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 5px;
}
.chain-filter-cards.four { grid-template-columns: repeat(4,minmax(0,1fr)); }
.chain-filter-cards button {
  min-width: 0;
  min-height: 34px;
  padding: 5px 6px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: none;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  white-space: nowrap;
}
.chain-filter-cards button:hover {
  color: var(--blue);
  border-color: color-mix(in srgb,var(--blue) 45%,var(--line));
  background: var(--blue-soft);
  transform: none;
}
.chain-filter-cards button.active {
  color: var(--blue);
  border-color: var(--blue);
  background: var(--blue-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--blue) 35%,transparent);
}
.chain-filter-rail .chain-filters input,
.chain-filter-rail .chain-filters select {
  width: 100%;
  min-width: 0;
  height: 38px;
  min-height: 38px;
  padding: 0 9px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: none;
  font-size: .63rem;
}
.chain-filter-rail .chain-filters input:focus,
.chain-filter-rail .chain-filters select:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 2px color-mix(in srgb,var(--blue) 18%,transparent) !important;
}
.chain-filter-rail .condition-control {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(74px,.65fr);
  gap: 5px;
}
.chain-filter-rail .chain-reset-columns {
  width: 100%;
  min-height: 38px;
  align-self: stretch;
  color: var(--blue);
  background: var(--blue-soft);
  border-color: color-mix(in srgb,var(--blue) 35%,var(--line));
}

@media (max-width: 1020px) {
  .chain-workspace {
    grid-template-areas: "rail" "main";
    grid-template-columns: minmax(0,1fr);
  }
  .chain-filter-rail {
    position: relative;
    top: auto;
    max-height: none;
  }
  .chain-filter-rail .chain-filters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .chain-main-content { border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 560px) {
  .chain-filter-rail { margin: 8px; }
  .chain-filter-rail .chain-filters { grid-template-columns: minmax(0,1fr); }
}

/* The comprehensive-table filter reuses the Market Opportunities visual language. */
.chain-filter-rail.market-filter-rail {
  position: sticky;
  top: 74px;
  max-height: none;
  margin: 12px;
  overflow: visible;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.chain-filter-rail.market-filter-rail .control-panel {
  max-height: calc(100vh - 98px);
  padding: 10px;
}
.chain-filter-rail.market-filter-rail .chain-market-selector { grid-template-columns: 1fr; }
.chain-filter-rail.market-filter-rail .chain-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 0 0;
  border-top: 1px solid var(--line);
}
.chain-filter-rail.market-filter-rail .chain-filters label,
.chain-filter-rail.market-filter-rail .click-option-field { gap: 4px; }
.chain-filter-rail.market-filter-rail .chain-strategy-options,
.chain-filter-rail.market-filter-rail .chain-queue-options {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
}
.chain-filter-rail.market-filter-rail .chain-state-options {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
}
.chain-filter-rail.market-filter-rail .chain-strategy-options button,
.chain-filter-rail.market-filter-rail .chain-state-options button,
.chain-filter-rail.market-filter-rail .chain-queue-options button {
  width: 100%;
  min-width: 0;
}
.chain-filter-rail.market-filter-rail .chain-filters label > span:first-child,
.chain-filter-rail.market-filter-rail .click-option-field > span {
  color: var(--muted);
  font-size: .62rem;
  font-weight: 750;
}
.chain-filter-rail.market-filter-rail .chain-filters input,
.chain-filter-rail.market-filter-rail .chain-filters select {
  height: 39px;
  min-height: 39px;
  padding: 8px 10px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-size: .7rem;
}
.chain-filter-rail.market-filter-rail .condition-control {
  grid-template-columns: minmax(0,1.25fr) minmax(74px,.75fr);
  gap: 4px;
}
.chain-filter-rail.market-filter-rail .chain-reset-columns {
  min-height: 39px;
  border-radius: 8px;
}

@media (max-width: 1020px) {
  .chain-filter-rail.market-filter-rail { position: static; margin: 10px; }
  .chain-filter-rail.market-filter-rail .control-panel { max-height: none; overflow: visible; }
  .chain-filter-rail.market-filter-rail .chain-market-selector { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .chain-filter-rail.market-filter-rail .chain-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 560px) {
  .chain-filter-rail.market-filter-rail .chain-market-selector,
  .chain-filter-rail.market-filter-rail .chain-filters { grid-template-columns: 1fr; }
}

/* Commodity-exchange implied FX dashboard */
.commodity-fx-panel { display: grid; gap: 14px; }
.commodity-fx-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.commodity-fx-header small, .commodity-fx-header p { color: var(--muted); }
.commodity-fx-header h2 { margin: 3px 0 5px; color: var(--ink); font-size: 1.05rem; }
.commodity-fx-header p { margin: 0; font-size: .66rem; }
.commodity-fx-results { display: grid; gap: 14px; }
.commodity-fx-summary { display: grid; grid-template-columns: minmax(230px,.7fr) minmax(0,1.3fr); gap: 14px; padding: 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.commodity-fx-summary > div:first-child { display: grid; place-items: center; align-content: center; gap: 3px; min-height: 105px; background: var(--blue-soft); border-radius: 10px; text-align: center; }
.commodity-fx-summary small, .commodity-fx-summary span { color: var(--muted); font-size: .62rem; }
.commodity-fx-summary strong { font-size: 1.55rem; color: var(--blue-dark); font-variant-numeric: tabular-nums; }
.commodity-fx-summary strong em { color: var(--muted); font-size: .62rem; font-style: normal; }
.commodity-benchmarks { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; align-items: stretch; }
.commodity-benchmarks span { display: grid; place-items: center; align-content: center; gap: 7px; padding: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; text-align: center; }
.commodity-benchmarks b { color: var(--ink); font-size: .82rem; }
.commodity-fx-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.commodity-fx-card { overflow: hidden; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.commodity-fx-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px 12px; border-bottom: 1px solid var(--line); }
.commodity-fx-card > header small { color: var(--muted); font-size: .54rem; direction: ltr; }
.commodity-fx-card > header h3 { margin: 3px 0 0; font-size: .9rem; }
.commodity-fx-live { padding: 4px 8px; color: var(--blue-dark); background: var(--blue-soft); border-radius: 999px; font-size: .54rem; font-weight: 800; }
.commodity-fx-spec { display: flex; justify-content: space-between; gap: 10px; padding: 9px 16px; color: var(--muted); background: var(--surface-2); font-size: .57rem; }
.commodity-fx-spec b { color: var(--ink); }
.commodity-fx-conversion { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; align-items: center; padding: 9px 16px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: .54rem; }
.commodity-fx-conversion strong { color: var(--ink); font-size: .56rem; }
.commodity-fx-conversion > span { color: var(--blue-dark); font-weight: 800; font-variant-numeric: tabular-nums; }
.commodity-fx-conversion small { grid-column: 1 / -1; color: var(--muted); line-height: 1.7; }
.commodity-fx-quotes { display: grid; gap: 7px; padding: 10px; }
.commodity-fx-quote { position: relative; display: grid; grid-template-columns: .7fr 1fr 1fr 1.45fr; gap: 8px; align-items: center; min-height: 62px; padding: 9px 10px 13px; background: var(--surface-2); border: 1px solid transparent; border-radius: 9px; text-align: center; }
.commodity-fx-quote.is-last { border-color: color-mix(in srgb,var(--blue) 45%,var(--line)); background: color-mix(in srgb,var(--blue-soft) 55%,var(--surface-2)); }
.commodity-fx-quote > strong { font-size: .62rem; }
.commodity-fx-quote span { display: grid; gap: 3px; min-width: 0; }
.commodity-fx-quote small { color: var(--muted); font-size: .48rem; }
.commodity-fx-quote b { overflow-wrap: anywhere; font-size: .61rem; font-variant-numeric: tabular-nums; }
.commodity-fx-quote .fx-expensive b { color: var(--red); }
.commodity-fx-quote .fx-cheap b { color: var(--green); }
.commodity-fx-gap { position: absolute; right: 10px; bottom: 6px; width: calc(100% - 20px); height: 3px; overflow: hidden; background: var(--line); border-radius: 999px; }
.commodity-fx-gap::after { content: ""; display: block; width: var(--fx-gap); height: 100%; border-radius: inherit; }
.commodity-fx-gap.fx-expensive::after { background: var(--red); }
.commodity-fx-gap.fx-cheap::after { background: var(--green); }
.commodity-fx-card > footer { padding: 9px 16px 12px; color: var(--muted); border-top: 1px solid var(--line); font-size: .53rem; text-align: center; }
.commodity-fx-note { padding: 12px 14px; color: var(--muted); background: var(--amber-soft); border: 1px solid color-mix(in srgb,var(--amber) 28%,var(--line)); border-radius: 10px; font-size: .6rem; line-height: 1.9; }
.commodity-fx-note strong { color: var(--ink); }
.commodity-fx-sources { display: flex; justify-content: center; gap: 8px; color: var(--muted); font-size: .56rem; }
.commodity-fx-sources a { color: var(--blue-dark); }

@media (max-width: 900px) {
  .commodity-fx-grid { grid-template-columns: 1fr; }
  .commodity-fx-quote { grid-template-columns: .65fr 1fr 1fr 1.35fr; }
}
@media (max-width: 650px) {
  .commodity-fx-header { align-items: stretch; flex-direction: column; }
  .commodity-fx-summary { grid-template-columns: 1fr; }
  .commodity-benchmarks { grid-template-columns: 1fr; }
  .commodity-fx-spec { flex-direction: column; text-align: center; }
  .commodity-fx-conversion { grid-template-columns: 1fr; text-align: center; }
  .commodity-fx-conversion small { grid-column: auto; }
  .commodity-fx-quote { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .commodity-fx-quote > strong { grid-column: 1 / -1; }
}

/* Live order-flow page */
.order-flow-panel { display: grid; gap: 14px; }
.order-flow-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.order-flow-header small,.order-flow-header p { color: var(--muted); }
.order-flow-header h2 { margin: 3px 0 4px; font-size: 1.08rem; }
.order-flow-header p { margin: 0; font-size: .62rem; }
.order-flow-controls { display: grid; grid-template-columns: repeat(2,minmax(190px,.7fr)) minmax(220px,1.4fr) minmax(150px,.7fr); gap: 10px; align-items: end; padding: 13px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.order-flow-toggle { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 9px; }
.order-flow-toggle button { min-height: 38px; color: var(--muted); background: transparent; border: 0; border-radius: 7px; font: inherit; font-size: .62rem; font-weight: 800; cursor: pointer; }
.order-flow-toggle button.active { color: var(--blue-dark); background: var(--surface); box-shadow: var(--shadow-sm); }
.order-flow-symbol,.order-flow-refresh-rate { display: grid; gap: 5px; color: var(--muted); font-size: .56rem; }
.order-flow-symbol select,.order-flow-refresh-rate select { min-height: 42px; padding: 0 11px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; font: inherit; font-weight: 700; }
.order-flow-results { display: grid; gap: 14px; }
.order-flow-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.order-flow-kpis article { display: grid; gap: 5px; place-items: center; min-height: 78px; padding: 10px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-sm); text-align: center; }
.order-flow-kpis span { color: var(--muted); font-size: .55rem; }
.order-flow-kpis strong { font-size: .9rem; font-variant-numeric: tabular-nums; }
.order-flow-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: 14px; }
.order-flow-card,.order-flow-table-card { overflow: hidden; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.order-flow-card > header,.order-flow-table-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.order-flow-card header small,.order-flow-card header p,.order-flow-card header span,.order-flow-table-card header span { color: var(--muted); font-size: .53rem; }
.order-flow-card header h3,.order-flow-table-card h3 { margin: 3px 0; font-size: .86rem; }
.order-flow-card header p { margin: 0; }
.order-flow-axis { display: grid; grid-template-columns: 1fr 80px 1fr; padding: 9px 14px; color: var(--muted); background: var(--surface-2); font-size: .56rem; text-align: center; }
.order-flow-axis b:first-child,.bid-price { color: var(--green) !important; }
.order-flow-axis b:last-child,.ask-price { color: var(--red) !important; }
.order-flow-ladder { display: grid; gap: 5px; padding: 10px; direction: ltr; }
.order-flow-level { display: grid; grid-template-columns: minmax(0,1fr) 34px minmax(0,1fr); gap: 5px; align-items: stretch; min-height: 48px; }
.order-flow-level > em { display: grid; place-items: center; color: var(--muted); background: var(--surface-2); border-radius: 7px; font-size: .55rem; font-style: normal; }
.order-flow-side { position: relative; z-index: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(70px,.55fr); gap: 8px; align-items: center; overflow: hidden; padding: 6px 9px; background: var(--surface-2); border-radius: 8px; font-variant-numeric: tabular-nums; }
.order-flow-side.ask { grid-template-columns: minmax(70px,.55fr) minmax(0,1fr); }
.order-flow-side i { position: absolute; z-index: -1; top: 0; bottom: 0; opacity: .16; }
.order-flow-side.bid i { right: 0; background: var(--green); }
.order-flow-side.ask i { left: 0; background: var(--red); }
.order-flow-side span { display: grid; gap: 1px; text-align: center; }
.order-flow-side b,.order-flow-side strong { font-size: .65rem; text-align: center; }
.order-flow-side small { color: var(--muted); font-size: .45rem; min-height: 1em; }
.order-flow-card > footer { padding: 9px 12px; color: var(--muted); background: var(--surface-2); font-size: .53rem; text-align: center; }
.history-card { grid-column: 1 / -1; }
.history-card > p,.curve-card > p { margin: 0; padding: 0 14px 14px; color: var(--muted); font-size: .52rem; line-height: 1.8; text-align: center; }
.order-flow-history-svg { display: block; width: 100%; min-height: 235px; padding: 8px; direction: ltr; }
.order-flow-history-svg text { fill: var(--muted); font-size: 10px; }
.order-flow-history-guide { stroke: var(--line); stroke-dasharray: 4 5; }
.order-flow-history-zero { stroke: var(--ink); stroke-width: 1.3; opacity: .65; }
.order-flow-history-line { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.order-flow-history-svg circle { fill: var(--blue); stroke: var(--surface); stroke-width: 2; }
.order-flow-depth-svg { display: block; width: 100%; min-height: 285px; padding: 8px; direction: ltr; }
.order-flow-depth-svg text { fill: var(--muted); font-size: 10px; }
.order-flow-depth-svg .depth-axis { stroke: var(--line); stroke-width: 1.2; }
.order-flow-depth-svg .depth-midline { stroke: var(--ink); stroke-dasharray: 4 5; opacity: .35; }
.order-flow-depth-svg .depth-area { opacity: .14; }
.order-flow-depth-svg .bid-area { fill: var(--green); }
.order-flow-depth-svg .ask-area { fill: var(--red); }
.order-flow-depth-svg .depth-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.order-flow-depth-svg .bid-line { stroke: var(--green); }
.order-flow-depth-svg .ask-line { stroke: var(--red); }
.order-flow-depth-svg .bid-dot { fill: var(--green); stroke: var(--surface); stroke-width: 2; }
.order-flow-depth-svg .ask-dot { fill: var(--red); stroke: var(--surface); stroke-width: 2; }
.order-flow-depth-svg .depth-bid-label { fill: var(--green); font-weight: 800; }
.order-flow-depth-svg .depth-ask-label { fill: var(--red); font-weight: 800; }
.candle-depth-card { grid-column: 1 / -1; }
.order-flow-candle-svg { display: block; width: 100%; height: 230px; padding: 8px 12px; direction: ltr; }
.order-flow-candle-svg text { fill: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.order-flow-candle-svg .candle-grid { stroke: var(--line); stroke-dasharray: 3 5; }
.order-flow-candle-svg .candle-latest-guide { stroke: var(--ink); stroke-dasharray: 3 4; opacity: .35; }
.order-flow-candle-svg .candle line { stroke-width: 2; }
.order-flow-candle-svg .candle.up line,.order-flow-candle-svg .candle.up rect { stroke: var(--green); fill: color-mix(in srgb,var(--green) 65%,var(--surface)); }
.order-flow-candle-svg .candle.down line,.order-flow-candle-svg .candle.down rect { stroke: var(--red); fill: color-mix(in srgb,var(--red) 65%,var(--surface)); }
.order-flow-candle-svg .candle-depth-level line { stroke-width: 5; stroke-linecap: round; opacity: .82; }
.order-flow-candle-svg .candle-depth-level.bid line { stroke: var(--green); }
.order-flow-candle-svg .candle-depth-level.ask line { stroke: var(--red); }
.order-flow-candle-svg .candle-depth-level.bid circle { fill: var(--green); }
.order-flow-candle-svg .candle-depth-level.ask circle { fill: var(--red); }
.order-flow-candle-svg .candle-depth-level.bid text,.order-flow-candle-svg .candle-bid-caption { fill: var(--green); font-weight: 800; }
.order-flow-candle-svg .candle-depth-level.ask text,.order-flow-candle-svg .candle-ask-caption { fill: var(--red); font-weight: 800; }
.order-flow-candle-empty { display: grid; min-height: 250px; place-items: center; padding: 24px; color: var(--muted); background: var(--surface-2); font-size: .62rem; text-align: center; }
.order-flow-table-card table { width: 100%; border-collapse: collapse; text-align: center; font-size: .58rem; font-variant-numeric: tabular-nums; }
.order-flow-table-card th { padding: 10px 7px; color: var(--muted); background: var(--surface-2); font-weight: 800; }
.order-flow-table-card td { padding: 9px 7px; border-top: 1px solid var(--line); }
.order-flow-table-wrap { overflow-x: auto; }
.order-flow-note { padding: 11px 14px; color: var(--muted); background: var(--amber-soft); border: 1px solid color-mix(in srgb,var(--amber) 28%,var(--line)); border-radius: 10px; font-size: .54rem; line-height: 1.9; text-align: center; }
.order-flow-note strong { color: var(--ink); }
@media (max-width: 1020px) {
  .order-flow-controls { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .order-flow-grid { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .order-flow-header { align-items: stretch; flex-direction: column; }
  .order-flow-controls,.order-flow-kpis { grid-template-columns: 1fr 1fr; }
  .order-flow-side { grid-template-columns: 1fr; gap: 2px; padding: 5px; }
  .order-flow-side.ask { grid-template-columns: 1fr; }
  .order-flow-level { grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr); }
  .order-flow-candle-svg { min-width: 720px; height: 210px; }
  .candle-depth-card { overflow-x: auto; }
}

/* Accessibility foundation: shared readability, focus and input targets. */
html { scrollbar-color: var(--line-strong) var(--surface); scrollbar-width: thin; }
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar { width: 10px; height: 10px; }
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track { background: var(--surface); }
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb { background: var(--line-strong); border: 2px solid var(--surface); border-radius: 999px; }
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover { background: var(--muted); }

html[data-appearance="rahavard"] body { font-size: 14px; }
.page-heading small,
.page-heading p,
.filters label > span,
.click-option-field > span,
.market-card-filter > span,
.status-banner,
.rule-chip { font-size: max(.75rem, 12px); }
.overview-market-card small,
.market-selector-cards .overview-market-card small { font-size: max(.7rem, 11px); }

button,
a,
input,
select,
textarea { touch-action: manipulation; }
.primary-button,
.secondary-button,
.danger-button { min-height: 40px; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 72%, white);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--surface);
}

@media (max-width: 760px) {
  .primary-button,
  .secondary-button,
  .danger-button,
  .trade-action,
  .click-option-group button,
  .main-navigation a,
  input,
  select { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Unified trade workspaces and restored top navigation. */
html[data-appearance="glass"] .navigation-toggle,
html[data-appearance="glass"] .navigation-backdrop {
  display: none !important;
}
html[data-appearance="glass"] .hero {
  padding-inline-start: 26px;
}
html[data-appearance="glass"] .main-navigation {
  position: sticky;
  top: 8px;
  right: auto;
  left: auto;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: repeat(11,minmax(92px,1fr));
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 12px 0 18px;
  padding: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  border-radius: 18px;
  transform: none;
}
html[data-appearance="glass"] .main-navigation a {
  min-height: 48px;
  padding: 7px 8px;
  border-radius: 12px;
  text-align: center;
  white-space: nowrap;
}
html[data-appearance="glass"] .main-navigation a.active::after {
  top: auto;
  right: 18%;
  bottom: -1px;
  left: 18%;
  width: auto;
  height: 3px;
  border-radius: 999px 999px 0 0;
}

html[data-appearance="glass"] .trade-page-layout {
  display: grid;
  grid-template-columns: minmax(220px,250px) minmax(0,1fr);
  align-items: start;
  gap: 16px;
  margin-block: 12px 20px;
}
html[data-appearance="glass"] .trade-page-layout > :not(.trade-control-sidebar) {
  grid-column: 2;
  width: 100%;
  margin-block: 0 12px;
}
html[data-appearance="glass"] .trade-control-sidebar {
  position: sticky;
  top: 82px;
  grid-column: 1;
  grid-row: 1 / span 20;
  display: grid;
  gap: 14px;
  max-height: calc(100dvh - 100px);
  padding: 16px;
  overflow-y: auto;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: color-mix(in srgb,var(--surface) 90%,transparent);
  box-shadow: var(--shadow-sm), inset 0 1px rgba(255,255,255,.09);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}
html[data-appearance="glass"] .trade-control-sidebar > header {
  display: grid;
  gap: 2px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
}
html[data-appearance="glass"] .trade-control-sidebar > header small,
html[data-appearance="glass"] .trade-sidebar-group > span { color: var(--muted); font-size: .62rem; font-weight: 800; }
html[data-appearance="glass"] .trade-control-sidebar > header strong { font-size: .9rem; }
html[data-appearance="glass"] .trade-sidebar-group { display: grid; gap: 7px; }
html[data-appearance="glass"] .trade-filter-options { display: grid; gap: 6px; }
html[data-appearance="glass"] .trade-filter-options.two { grid-template-columns: 1fr 1fr; }
html[data-appearance="glass"] .trade-filter-options button {
  min-height: 40px;
  padding: 7px 10px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb,var(--surface-2) 90%,transparent);
  cursor: pointer;
}
html[data-appearance="glass"] .trade-filter-options button:hover,
html[data-appearance="glass"] .trade-filter-options button.active {
  color: var(--ink);
  border-color: var(--blue);
  background: var(--blue-soft);
}
html[data-appearance="glass"] .trade-sidebar-action { width: 100%; min-height: 44px; border-radius: 13px; }
html[data-appearance="glass"] .trade-control-sidebar .calculator-badge { justify-self: stretch; text-align: center; }

@media (max-width: 900px) {
  html[data-appearance="glass"] .hero { padding-inline-start: 16px; }
  html[data-appearance="glass"] .main-navigation { position: sticky; grid-template-columns: repeat(11,minmax(110px,1fr)); }
  html[data-appearance="glass"] .trade-page-layout { grid-template-columns: 1fr; }
  html[data-appearance="glass"] .trade-control-sidebar {
    top: 68px;
    z-index: 90;
    grid-column: 1;
    grid-row: auto;
    grid-template-columns: repeat(2,minmax(0,1fr));
    max-height: none;
  }
  html[data-appearance="glass"] .trade-control-sidebar > header,
  html[data-appearance="glass"] .trade-sidebar-group { grid-column: 1 / -1; }
  html[data-appearance="glass"] .trade-page-layout > :not(.trade-control-sidebar) { grid-column: 1; }
}

/* Final alignment requested for market, pricing and inline trade details. */
html[data-appearance="glass"] .overview-market-card.active,
html[data-appearance="glass"] .market-selector-cards .overview-market-card.active {
  color: var(--ink) !important;
  border-color: var(--blue) !important;
  background: linear-gradient(145deg,color-mix(in srgb,var(--surface-2) 86%,var(--blue) 14%),var(--surface-2)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.14),0 8px 24px rgba(0,0,0,.12) !important;
}
html[data-appearance="glass"] .overview-market-card.active :is(span,strong,b),
html[data-appearance="glass"] .market-selector-cards .overview-market-card.active :is(span,strong,b) { color: var(--ink) !important; }
html[data-appearance="glass"] .overview-market-card.active small,
html[data-appearance="glass"] .market-selector-cards .overview-market-card.active small { color: var(--muted) !important; }

html[data-appearance="glass"] :is(.account-menu,.freshness),
html[data-appearance="glass"][data-theme="light"] :is(.account-menu,.freshness) {
  padding: 0 6px;
  color: var(--ink);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-appearance="glass"] .overview-pricing-controls {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
}
html[data-appearance="glass"] .trade-valuation-controls {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb,var(--surface) 90%,transparent);
}
html[data-appearance="glass"] .trade-valuation-controls article {
  grid-template-columns: auto repeat(2,minmax(0,1fr));
  border-radius: 16px;
}

html[data-appearance="glass"] .trade-inline-detail {
  grid-column: 1 / -1;
  width: calc(100% - 20px);
  margin: 4px 10px 12px;
  overflow: hidden;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}
html[data-appearance="glass"] .trade-inline-detail > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
html[data-appearance="glass"] .trade-inline-detail > header :is(small,strong) { display: block; }
html[data-appearance="glass"] .trade-inline-detail > header small { color: var(--muted); }
html[data-appearance="glass"] .trade-inline-detail > header button {
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
html[data-appearance="glass"] .trade-inline-detail .trade-detail-window-body {
  max-height: none;
  overflow: visible;
}

@media (max-width: 1050px) {
  html[data-appearance="glass"] .overview-pricing-controls { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html[data-appearance="glass"] .trade-valuation-controls { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  html[data-appearance="glass"] .overview-pricing-controls { grid-template-columns: 1fr; }
  html[data-appearance="glass"] .trade-valuation-controls article { grid-template-columns: 1fr; }
}

@media (forced-colors: active) {
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid Highlight;
  }
  html { scrollbar-color: auto; }
}

/* Trading-workstation refinement: calm surfaces and predictable navigation. */
html[data-appearance="rahavard"] body {
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue-soft) 26%, var(--bg)) 0, var(--bg) 260px);
}
html[data-appearance="rahavard"] .page-shell { width: min(1480px, calc(100% - 32px)); }

.main-navigation {
  display: flex;
  grid-template-columns: none;
  justify-content: flex-start;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}
.main-navigation a {
  flex: 1 0 108px;
  padding-inline: 9px;
}
.main-navigation a.active {
  position: relative;
}
.main-navigation a.active::after {
  position: absolute;
  right: 18%;
  bottom: -1px;
  left: 18%;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: currentColor;
  content: "";
}

.page-heading {
  position: relative;
  margin-block: 18px 14px;
  padding: 5px 14px 12px 4px;
  border-bottom: 1px solid var(--line);
}
.page-heading::before {
  position: absolute;
  top: 7px;
  right: 0;
  width: 4px;
  height: 34px;
  border-radius: 999px;
  background: var(--blue);
  content: "";
}
.page-heading h2 { margin-block: 3px 4px; line-height: 1.35; }
.page-heading p { max-width: 78ch; line-height: 1.8; }

.control-panel,
.overview-market-filter,
.metric-card,
.trade-card,
.setting-card {
  border-color: color-mix(in srgb, var(--line) 86%, var(--blue));
}
.metric-card:hover { transform: none; }

.filters input,
.filters select,
.calculator-form input,
.calculator-form select,
.trade-form input,
.trade-form select,
.trade-close-form input,
.trade-close-form select,
.trade-close-form textarea { min-height: 42px; }

.search-input-wrap { position: relative; display: block; min-width: 0; }
.search-input-wrap > input { padding-inline-end: 40px; }
.search-clear-button {
  position: absolute;
  inset-block: 5px;
  inset-inline-end: 5px;
  display: grid;
  width: 30px;
  min-height: 30px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
}
.search-clear-button:hover { background: var(--surface-3); color: var(--ink); }

.chain-table,
.order-flow-table-card table,
.profit-recognition-table-wrap table { font-size: max(.72rem, 12px); }
.chain-table th,
.chain-table td,
.order-flow-table-card th,
.order-flow-table-card td { line-height: 1.65; }

@media (max-width: 760px) {
  html[data-appearance="rahavard"] .page-shell { width: calc(100% - 16px); }
  .main-navigation {
    grid-template-columns: none;
    gap: 4px;
    padding-bottom: 7px;
  }
  .main-navigation a {
    flex: 0 0 96px;
    min-width: 96px;
    flex-direction: column;
    gap: 2px;
  }
  .page-heading { margin-top: 12px; }
}

/* Glass Future — dense financial glassmorphism with solid data surfaces. */
.glass-choice .appearance-swatch { background: linear-gradient(145deg,#07111f,#102a46); }
.glass-choice .appearance-swatch i:nth-child(1) { background: #091827; }
.glass-choice .appearance-swatch i:nth-child(2) { background: rgba(125,226,255,.34); }
.glass-choice .appearance-swatch i:nth-child(3) { background: #21d4fd; }
.glass-choice .appearance-swatch i:nth-child(4) { background: #8b5cf6; }

html[data-appearance="glass"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #050a12;
  --surface: rgba(12,24,40,.78);
  --surface-2: rgba(18,34,54,.9);
  --surface-3: rgba(29,50,75,.94);
  --ink: #f4f9ff;
  --muted: #a7b8cd;
  --line: rgba(151,211,255,.2);
  --line-strong: rgba(151,211,255,.38);
  --navy: rgba(5,12,23,.88);
  --blue: #21d4fd;
  --blue-dark: #8be9ff;
  --blue-soft: rgba(33,212,253,.13);
  --violet: #a78bfa;
  --violet-soft: rgba(167,139,250,.14);
  --magenta: #f472b6;
  --magenta-soft: rgba(244,114,182,.13);
  --green: #5ee6a8;
  --green-soft: rgba(94,230,168,.12);
  --amber: #fbd56a;
  --amber-soft: rgba(251,213,106,.12);
  --red: #ff7188;
  --red-soft: rgba(255,113,136,.12);
  --shadow-sm: 0 10px 28px rgba(0,0,0,.2);
  --shadow-lg: 0 28px 80px rgba(0,0,0,.48);
  --glass-blur: 18px;
}
html[data-appearance="glass"][data-theme="light"] {
  color-scheme: light;
  --bg: #eaf3fb;
  --surface: rgba(255,255,255,.72);
  --surface-2: rgba(247,251,255,.9);
  --surface-3: rgba(231,243,252,.96);
  --ink: #10233a;
  --muted: #536b84;
  --line: rgba(33,104,148,.2);
  --line-strong: rgba(33,104,148,.36);
  --navy: rgba(255,255,255,.82);
  --blue: #007da7;
  --blue-dark: #005f82;
  --blue-soft: rgba(0,125,167,.1);
  --violet: #6d4bd2;
  --violet-soft: rgba(109,75,210,.1);
  --green: #087b50;
  --green-soft: rgba(8,123,80,.1);
  --amber: #846100;
  --amber-soft: rgba(132,97,0,.1);
  --red: #c72f4b;
  --red-soft: rgba(199,47,75,.1);
  --shadow-sm: 0 12px 30px rgba(30,67,96,.12);
  --shadow-lg: 0 30px 80px rgba(30,67,96,.2);
  --glass-blur: 18px;
}
html[data-appearance="glass"] body {
  position: relative;
  background:
    radial-gradient(circle at 12% 8%, rgba(33,212,253,.18), transparent 29rem),
    radial-gradient(circle at 88% 22%, rgba(139,92,246,.16), transparent 32rem),
    linear-gradient(155deg, var(--bg), color-mix(in srgb,var(--bg) 84%,#12375a));
  background-attachment: fixed;
  font-size: 14px;
}
html[data-appearance="glass"] body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom,black,transparent 82%);
  content: "";
}
html[data-appearance="glass"] .hero,
html[data-appearance="glass"] .main-navigation,
html[data-appearance="glass"] .overview-market-filter,
html[data-appearance="glass"] .control-panel,
html[data-appearance="glass"] .metric-card,
html[data-appearance="glass"] .top-market,
html[data-appearance="glass"] .group-card,
html[data-appearance="glass"] .contract-card,
html[data-appearance="glass"] .trades-panel,
html[data-appearance="glass"] .trade-card,
html[data-appearance="glass"] .calculator-panel,
html[data-appearance="glass"] .tehran-chain-panel,
html[data-appearance="glass"] .settings-panel,
html[data-appearance="glass"] .setting-card,
html[data-appearance="glass"] .analysis-modal,
html[data-appearance="glass"] .trade-edit-modal,
html[data-appearance="glass"] .trade-close-modal,
html[data-appearance="glass"] .confirmation-modal {
  border-color: var(--line);
  background: linear-gradient(145deg,color-mix(in srgb,var(--surface) 94%,white 6%),color-mix(in srgb,var(--surface) 98%,transparent));
  box-shadow: var(--shadow-sm), inset 0 1px rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(135%);
  backdrop-filter: blur(var(--glass-blur)) saturate(135%);
}
html[data-appearance="glass"] .hero { min-height: 132px; overflow: hidden; border-radius: 20px; }
html[data-appearance="glass"] .hero::before { background: linear-gradient(110deg,transparent 34%,rgba(33,212,253,.1)),radial-gradient(circle at 88% 16%,rgba(167,139,250,.28),transparent 30%); }
html[data-appearance="glass"] .brand-mark { background: linear-gradient(145deg,#22d3ee,#7c3aed); border-color: rgba(255,255,255,.34); box-shadow: 0 0 32px rgba(33,212,253,.24),inset 0 1px rgba(255,255,255,.45); }
html[data-appearance="glass"] .main-navigation { border-radius: 15px; background: color-mix(in srgb,var(--navy) 88%,transparent); }
html[data-appearance="glass"] .main-navigation a { color: var(--muted); }
html[data-appearance="glass"] .main-navigation a:hover { color: var(--ink); background: rgba(255,255,255,.055); }
html[data-appearance="glass"] .main-navigation a.active { color: var(--ink); background: linear-gradient(135deg,rgba(33,212,253,.18),rgba(167,139,250,.14)); border-color: rgba(33,212,253,.35); }
html[data-appearance="glass"] .page-heading::before { box-shadow: 0 0 18px rgba(33,212,253,.68); }
html[data-appearance="glass"] .primary-button { color: #03141b; background: linear-gradient(135deg,#21d4fd,#65e8ff); border-color: rgba(255,255,255,.38); box-shadow: 0 8px 28px rgba(33,212,253,.2); }
html[data-appearance="glass"] .primary-button:hover { background: linear-gradient(135deg,#65e8ff,#a78bfa); }
html[data-appearance="glass"] .secondary-button { color: var(--blue-dark); background: var(--blue-soft); border-color: rgba(33,212,253,.34); }
html[data-appearance="glass"] input,
html[data-appearance="glass"] select,
html[data-appearance="glass"] textarea { color: var(--ink); background: color-mix(in srgb,var(--surface-2) 94%,transparent); border-color: var(--line-strong); }
html[data-appearance="glass"] .chain-table th,
html[data-appearance="glass"] .order-flow-table-card th { color: var(--ink); background: #14263a; }
html[data-appearance="glass"] .chain-table td,
html[data-appearance="glass"] .order-flow-table-card td { color: var(--ink); background: #0c1a2a; border-color: var(--line); }
html[data-appearance="glass"][data-theme="light"] .chain-table th,
html[data-appearance="glass"][data-theme="light"] .order-flow-table-card th { background: #e1eff8; }
html[data-appearance="glass"][data-theme="light"] .chain-table td,
html[data-appearance="glass"][data-theme="light"] .order-flow-table-card td { background: #f8fbfe; }
html[data-appearance="glass"] .modal-backdrop { background: rgba(2,7,14,.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html[data-appearance="glass"] .status-banner { background: color-mix(in srgb,var(--surface) 88%,transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-appearance="glass"] .hero,
  html[data-appearance="glass"] .main-navigation,
  html[data-appearance="glass"] .metric-card,
  html[data-appearance="glass"] .trade-card,
  html[data-appearance="glass"] .setting-card { background: var(--surface-2); }
}

@media (prefers-reduced-transparency: reduce) {
  html[data-appearance="glass"] { --surface: #0c1828; --surface-2: #122236; }
  html[data-appearance="glass"] .hero,
  html[data-appearance="glass"] .main-navigation,
  html[data-appearance="glass"] .metric-card,
  html[data-appearance="glass"] .trade-card { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Reference composition: one glass canvas with a vertical RTL navigation rail. */
html[data-appearance="glass"] .page-shell {
  position: relative;
  width: min(1500px,calc(100% - 32px));
  min-height: calc(100dvh - 32px);
  margin-block: 16px;
  padding: 18px 112px 34px 18px;
  overflow: clip;
  border: 1px solid rgba(198,229,255,.16);
  border-radius: 28px;
  background: linear-gradient(145deg,rgba(124,145,166,.16),rgba(8,16,28,.4));
  box-shadow: 0 38px 100px rgba(0,0,0,.44),inset 0 1px rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
  backdrop-filter: blur(24px) saturate(125%);
}
html[data-appearance="glass"] .main-navigation {
  position: fixed;
  top: 32px;
  right: max(24px,calc((100vw - 1500px)/2 + 26px));
  bottom: 32px;
  z-index: 100;
  display: flex;
  width: 82px;
  margin: 0;
  padding: 10px 7px;
  flex-direction: column;
  gap: 5px;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 22px;
  background: rgba(3,9,17,.72);
}
html[data-appearance="glass"] .main-navigation a {
  width: 100%;
  min-height: 58px;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 4px;
  padding: 7px 4px;
  border-radius: 14px;
  font-size: 10px;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
}
html[data-appearance="glass"] .main-navigation .ui-icon { width: 20px; height: 20px; }
html[data-appearance="glass"] .main-navigation a.active::after { top: 18%; right: -7px; bottom: 18%; left: auto; width: 3px; height: auto; border-radius: 0 999px 999px 0; }
html[data-appearance="glass"] .main-navigation .experimental-tag { display: none; }

html[data-appearance="glass"] .hero {
  padding: 22px 26px;
  background: linear-gradient(115deg,rgba(15,28,46,.84),rgba(82,87,98,.32));
}
html[data-appearance="glass"] .metric-card,
html[data-appearance="glass"] .setting-card,
html[data-appearance="glass"] .trade-card { border-radius: 18px; }
html[data-appearance="glass"] .overview-market-filter,
html[data-appearance="glass"] .control-panel,
html[data-appearance="glass"] .trades-panel,
html[data-appearance="glass"] .calculator-panel,
html[data-appearance="glass"] .tehran-chain-panel,
html[data-appearance="glass"] .settings-panel { border-radius: 22px; }
html[data-appearance="glass"] .settings-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
html[data-appearance="glass"] .setting-card { min-height: 220px; }

@media (max-width: 900px) {
  html[data-appearance="glass"] .page-shell {
    width: calc(100% - 16px);
    margin-block: 8px;
    padding: 12px 12px 104px;
    border-radius: 22px;
  }
  html[data-appearance="glass"] .main-navigation {
    top: auto;
    right: 16px;
    bottom: 12px;
    left: 16px;
    width: auto;
    height: 76px;
    padding: 7px;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 20px;
  }
  html[data-appearance="glass"] .main-navigation a {
    width: 78px;
    min-width: 78px;
    min-height: 60px;
  }
  html[data-appearance="glass"] .main-navigation a.active::after { top: auto; right: 22%; bottom: -7px; left: 22%; width: auto; height: 3px; border-radius: 999px 999px 0 0; }
}

@media (max-width: 560px) {
  html[data-appearance="glass"] .hero { padding: 16px; border-radius: 18px; }
  html[data-appearance="glass"] .settings-grid { grid-template-columns: 1fr; }
}

/* Accessible theme controls, rounded surfaces and off-canvas navigation. */
html[data-appearance="glass"],
html[data-appearance="glass"] body,
html[data-appearance="glass"] button,
html[data-appearance="glass"] input,
html[data-appearance="glass"] select,
html[data-appearance="glass"] textarea,
html[data-appearance="glass"] table,
html[data-appearance="glass"] svg text {
  font-family: "IRANYekanWeb", "Vazirmatn", Tahoma, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

html[data-appearance="glass"] .page-shell {
  padding: 18px 18px 34px;
  color: var(--ink);
}

html[data-appearance="glass"] .icon-button {
  display: inline-grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  place-items: center;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  box-shadow: inset 0 1px rgba(255,255,255,.1);
}
html[data-appearance="glass"] .icon-button:hover {
  color: var(--blue-dark);
  border-color: var(--blue);
  background: var(--blue-soft);
}
html[data-appearance="glass"] .icon-button:focus-visible,
html[data-appearance="glass"] .main-navigation a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 66%, transparent);
  outline-offset: 3px;
}
html[data-appearance="glass"] .theme-toggle .theme-icon-sun { display: none; }
html[data-appearance="glass"][data-theme="light"] .theme-toggle .theme-icon-sun { display: block; }
html[data-appearance="glass"][data-theme="light"] .theme-toggle .theme-icon-moon { display: none; }

html[data-appearance="glass"] .navigation-backdrop {
  position: fixed;
  inset: 0;
  z-index: 109;
  visibility: hidden;
  padding: 0;
  opacity: 0;
  border: 0;
  border-radius: 0;
  background: rgba(2,7,14,.55);
  transition: opacity 180ms ease, visibility 180ms ease;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
html[data-appearance="glass"] .main-navigation {
  top: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 110;
  width: min(300px, calc(100vw - 32px));
  padding: 76px 12px 18px;
  gap: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 24px;
  background: color-mix(in srgb, var(--navy) 94%, transparent);
  transform: translateX(calc(100% + 32px));
  transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}
html[data-appearance="glass"] .main-navigation::before {
  position: absolute;
  top: 26px;
  right: 24px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
  content: "منوی اصلی";
}
html[data-appearance="glass"] .main-navigation a {
  width: 100%;
  min-height: 48px;
  flex: 0 0 auto;
  flex-direction: row;
  justify-content: flex-start;
  gap: 12px;
  padding: 10px 14px;
  color: var(--muted);
  border-radius: 14px;
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
}
html[data-appearance="glass"] .main-navigation a.active::after {
  top: 18%;
  right: -12px;
  bottom: 18%;
  left: auto;
  width: 3px;
  height: auto;
  border-radius: 0 999px 999px 0;
}
html[data-appearance="glass"] body.nav-open { overflow: hidden; }
html[data-appearance="glass"] body.nav-open .navigation-backdrop { visibility: visible; opacity: 1; }
html[data-appearance="glass"] body.nav-open .main-navigation { transform: translateX(0); }

html[data-appearance="glass"] .metric-card,
html[data-appearance="glass"] .opportunity-card,
html[data-appearance="glass"] .contract-card,
html[data-appearance="glass"] .group-card,
html[data-appearance="glass"] .top-market,
html[data-appearance="glass"] .trade-card,
html[data-appearance="glass"] .portfolio-summary-group,
html[data-appearance="glass"] .account-growth-panel,
html[data-appearance="glass"] .profit-recognition-card,
html[data-appearance="glass"] .strategy-liquidity-card,
html[data-appearance="glass"] .asset-portfolio-row,
html[data-appearance="glass"] .underlying-position-card,
html[data-appearance="glass"] .forecast-card,
html[data-appearance="glass"] .commodity-fx-card,
html[data-appearance="glass"] .order-flow-card,
html[data-appearance="glass"] .order-flow-table-card,
html[data-appearance="glass"] .setting-card,
html[data-appearance="glass"] .control-panel,
html[data-appearance="glass"] .overview-market-filter,
html[data-appearance="glass"] .calculator-panel,
html[data-appearance="glass"] .trades-panel,
html[data-appearance="glass"] .tehran-chain-panel,
html[data-appearance="glass"] .settings-panel,
html[data-appearance="glass"] .rules-panel,
html[data-appearance="glass"] .status-banner,
html[data-appearance="glass"] .empty-state {
  color: var(--ink);
  border-radius: 18px;
}
html[data-appearance="glass"] .metric-card,
html[data-appearance="glass"] .opportunity-card,
html[data-appearance="glass"] .contract-card,
html[data-appearance="glass"] .group-card,
html[data-appearance="glass"] .trade-card,
html[data-appearance="glass"] .portfolio-summary-group,
html[data-appearance="glass"] .account-growth-panel,
html[data-appearance="glass"] .profit-recognition-card,
html[data-appearance="glass"] .strategy-liquidity-card,
html[data-appearance="glass"] .asset-portfolio-row,
html[data-appearance="glass"] .underlying-position-card,
html[data-appearance="glass"] .forecast-card,
html[data-appearance="glass"] .commodity-fx-card,
html[data-appearance="glass"] .order-flow-card,
html[data-appearance="glass"] .order-flow-table-card,
html[data-appearance="glass"] .setting-card {
  border-color: var(--line);
  background: linear-gradient(145deg, color-mix(in srgb,var(--surface) 96%,white 4%), var(--surface));
}
html[data-appearance="glass"] :is(.metric-card,.opportunity-card,.contract-card,.group-card,.trade-card,.setting-card,.portfolio-summary-group,.account-growth-panel,.profit-recognition-card,.order-flow-card) :is(h2,h3,h4,strong,b,label) { color: var(--ink); }
html[data-appearance="glass"] :is(.metric-card,.opportunity-card,.contract-card,.group-card,.trade-card,.setting-card,.portfolio-summary-group,.account-growth-panel,.profit-recognition-card,.order-flow-card) :is(p,small,span) { color: var(--muted); }
html[data-appearance="glass"] .primary-button,
html[data-appearance="glass"] .danger-button,
html[data-appearance="glass"] .tab.active,
html[data-appearance="glass"] .click-option-group button.active { color: #03141b; }
html[data-appearance="glass"][data-theme="light"] .account-menu,
html[data-appearance="glass"][data-theme="light"] .freshness { color: var(--ink); background: rgba(255,255,255,.64); border-color: var(--line); }

@media (max-width: 900px) {
  html[data-appearance="glass"] .page-shell { padding: 12px 12px 28px; }
  html[data-appearance="glass"] .main-navigation {
    top: 12px;
    right: 12px;
    bottom: 12px;
    left: auto;
    width: min(300px, calc(100vw - 24px));
    height: auto;
    padding: 72px 12px 16px;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
  }
  html[data-appearance="glass"] .main-navigation a { width: 100%; min-width: 0; min-height: 48px; }
  html[data-appearance="glass"] .main-navigation a.active::after { top: 18%; right: -12px; bottom: 18%; left: auto; width: 3px; height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-appearance="glass"] .main-navigation,
  html[data-appearance="glass"] .navigation-backdrop { transition: none; }
}

/* Final glass component layer: overrides legacy square and light-surface rules. */
html[data-appearance="glass"] .navigation-toggle {
  position: fixed;
  top: 32px;
  right: max(32px, calc((100vw - 1500px) / 2 + 32px));
  z-index: calc(var(--z-drawer) + 10);
  box-shadow: 0 12px 32px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.14);
}
html[data-appearance="glass"] body.nav-open .navigation-toggle {
  color: var(--blue-dark);
  border-color: var(--blue);
  background: var(--surface-3);
}
html[data-appearance="glass"] .navigation-backdrop { z-index: var(--z-backdrop); }
html[data-appearance="glass"] .main-navigation { z-index: var(--z-drawer); }
html[data-appearance="glass"] .modal-backdrop { z-index: var(--z-dialog); }
html[data-appearance="glass"] .trade-detail-workspace { z-index: var(--z-popover); }

html[data-appearance="glass"] :is(
  .status-banner,
  .metric-card,
  .control-panel,
  .calculator-panel,
  .trades-panel,
  .top-market,
  .group-card,
  .tehran-chain-panel,
  .settings-panel,
  .setting-card,
  .opportunity-card,
  .contract-card,
  .trade-card,
  .trade-strategy-group,
  .portfolio-summary-group,
  .account-growth-panel,
  .profit-recognition-card,
  .strategy-liquidity-card,
  .asset-portfolio-row,
  .underlying-position-card,
  .forecast-card,
  .commodity-fx-card,
  .order-flow-card,
  .order-flow-table-card,
  .scenario-card,
  .history-chart,
  .strategy-box,
  .analysis-modal,
  .trade-edit-modal,
  .trade-close-modal,
  .confirmation-modal,
  .trade-detail-window,
  .closed-summary-grid article,
  .portfolio-summary-metrics > div,
  .trade-valuation-controls article,
  .trade-bulk-bar,
  .trades-empty
) {
  color: var(--ink);
  border-color: var(--line);
  border-radius: 18px;
  background: linear-gradient(145deg, color-mix(in srgb,var(--surface) 96%,white 4%), var(--surface));
  box-shadow: var(--shadow-sm), inset 0 1px rgba(255,255,255,.07);
}

html[data-appearance="glass"] :is(
  .portfolio-summary-group,
  .trade-strategy-group,
  .trade-card,
  .account-growth-panel,
  .trade-detail-window,
  .analysis-modal,
  .trade-edit-modal,
  .trade-close-modal
) > header {
  color: var(--ink);
  border-color: var(--line);
  border-radius: 17px 17px 0 0;
  background: color-mix(in srgb,var(--surface-2) 94%,transparent);
}
html[data-appearance="glass"] :is(
  .portfolio-summary-group,
  .trade-strategy-group,
  .trade-card,
  .account-growth-panel,
  .trade-detail-window,
  .analysis-modal,
  .trade-edit-modal,
  .trade-close-modal
) > header :is(h2,h3,strong,b) { color: var(--ink); }
html[data-appearance="glass"] :is(
  .portfolio-summary-group,
  .trade-strategy-group,
  .trade-card,
  .account-growth-panel,
  .trade-detail-window,
  .analysis-modal,
  .trade-edit-modal,
  .trade-close-modal
) > header :is(p,small,span) { color: var(--muted); }

html[data-appearance="glass"] :is(
  .portfolio-summary-metrics > div,
  .trade-prices > div,
  .trade-allocation-group > div,
  .trade-return-box,
  .compact-return-box,
  .calculator-metrics > div,
  .realized-result > div,
  .account-growth-kpis > div,
  .risk-free-metrics > div
) {
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}
html[data-appearance="glass"] :is(
  .portfolio-summary-metrics > div,
  .trade-prices > div,
  .trade-return-box,
  .compact-return-box,
  .calculator-metrics > div,
  .realized-result > div,
  .account-growth-kpis > div
) :is(strong,b) { color: var(--ink); }
html[data-appearance="glass"] :is(
  .portfolio-summary-metrics > div,
  .trade-prices > div,
  .trade-return-box,
  .compact-return-box,
  .calculator-metrics > div,
  .realized-result > div,
  .account-growth-kpis > div
) :is(span,small,p) { color: var(--muted); }

html[data-appearance="glass"] :is(
  button,
  input,
  select,
  textarea,
  .tabs,
  .tab,
  .rule-chip,
  .badge,
  .queue-badge,
  .decision-badge,
  .calculator-badge,
  .trade-status,
  .trade-strategy,
  .trade-contract-meta,
  details,
  summary
) { border-radius: 12px; }
html[data-appearance="glass"] :is(.primary-button,.secondary-button,.danger-button,.trade-action,.full-view) {
  min-height: 42px;
  border-radius: 12px;
}
html[data-appearance="glass"] .trades-header-actions .full-view[aria-pressed="true"] {
  color: #03141b;
  border-color: var(--blue);
  background: var(--blue);
}

html[data-appearance="glass"][data-theme="light"] :is(
  .portfolio-summary-group,
  .trade-strategy-group,
  .trade-card,
  .account-growth-panel,
  .trade-detail-window,
  .analysis-modal,
  .trade-edit-modal,
  .trade-close-modal
) > header {
  color: #10233a;
  background: rgba(231,243,252,.96);
}
html[data-appearance="glass"][data-theme="light"] :is(
  .portfolio-summary-group,
  .trade-strategy-group,
  .trade-card,
  .account-growth-panel,
  .trade-detail-window,
  .analysis-modal,
  .trade-edit-modal,
  .trade-close-modal
) > header :is(h2,h3,strong,b) { color: #10233a; }
html[data-appearance="glass"][data-theme="light"] :is(
  .portfolio-summary-group,
  .trade-strategy-group,
  .trade-card,
  .account-growth-panel,
  .trade-detail-window,
  .analysis-modal,
  .trade-edit-modal,
  .trade-close-modal
) > header :is(p,small,span) { color: #405a73; }

@media (max-width: 900px) {
  html[data-appearance="glass"] .navigation-toggle {
    top: 20px;
    right: 20px;
  }
  html[data-appearance="glass"] .hero { padding-top: 72px; }
}

/* Header alignment and remaining cross-page legacy overrides. */
html[data-appearance="glass"] .hero {
  padding-inline-start: 86px;
}
html[data-appearance="glass"] .hero-quick-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
html[data-appearance="glass"] .hero-quick-actions .primary-button { min-height: 44px; }

html[data-appearance="glass"] :is(
  .settings-header,
  .tehran-chain-header,
  .calculator-header,
  .asset-box-header,
  .strategy-box > header,
  .profit-recognition-header,
  .profit-recognition-details > header,
  .underlying-monitor > header,
  .order-flow-header,
  .commodity-fx-header,
  .forecast-header
) {
  color: var(--ink);
  border-color: var(--line);
  border-radius: 18px 18px 0 0;
  background: color-mix(in srgb,var(--surface-2) 94%,transparent);
}
html[data-appearance="glass"] :is(
  .settings-header,
  .tehran-chain-header,
  .calculator-header,
  .asset-box-header,
  .strategy-box > header,
  .profit-recognition-header,
  .profit-recognition-details > header,
  .underlying-monitor > header,
  .order-flow-header,
  .commodity-fx-header,
  .forecast-header
) :is(h1,h2,h3,strong,b) { color: var(--ink); }
html[data-appearance="glass"] :is(
  .settings-header,
  .tehran-chain-header,
  .calculator-header,
  .asset-box-header,
  .strategy-box > header,
  .profit-recognition-header,
  .profit-recognition-details > header,
  .underlying-monitor > header,
  .order-flow-header,
  .commodity-fx-header,
  .forecast-header
) :is(p,small,span) { color: var(--muted); }

html[data-appearance="glass"] .tehran-chain-panel .chain-table-wrap,
html[data-appearance="glass"] .tehran-chain-panel .chain-table {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
}
html[data-appearance="glass"] .tehran-chain-panel .chain-table th,
html[data-appearance="glass"] .tehran-chain-panel .chain-table th.sticky-option-symbol {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface-3);
}
html[data-appearance="glass"] .tehran-chain-panel .chain-table td,
html[data-appearance="glass"] .tehran-chain-panel .chain-table td.sticky-option-symbol,
html[data-appearance="glass"] .tehran-chain-panel .chain-table tbody tr:nth-child(even) td,
html[data-appearance="glass"] .tehran-chain-panel .chain-table tbody tr:nth-child(even) td.sticky-option-symbol {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
}
html[data-appearance="glass"] .tehran-chain-panel .chain-table tbody tr:nth-child(even) td,
html[data-appearance="glass"] .tehran-chain-panel .chain-table tbody tr:nth-child(even) td.sticky-option-symbol { background: var(--surface-2); }
html[data-appearance="glass"] .tehran-chain-panel .chain-empty { color: var(--muted) !important; background: var(--surface) !important; }
html[data-appearance="glass"] .tehran-chain-panel .chain-sort-button { color: var(--ink); text-decoration: none; }

html[data-appearance="glass"] .trade-pricing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
html[data-appearance="glass"] .trade-pricing-toggle .ui-icon { width: 18px; height: 18px; }
html[data-appearance="glass"] .trade-pricing-toggle[aria-expanded="true"] {
  color: #03141b;
  border-color: var(--blue);
  background: var(--blue);
}
html[data-appearance="glass"] .trade-valuation-controls {
  overflow: hidden;
  max-height: 460px;
  opacity: 1;
  transition: max-height 180ms ease, opacity 140ms ease, margin 180ms ease;
}
html[data-appearance="glass"] .trade-valuation-controls.pricing-menu-collapsed {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  pointer-events: none;
}

html[data-appearance="glass"] .trade-actions .trade-select-control {
  position: static;
  display: inline-flex;
  width: auto;
  height: 36px;
  min-height: 36px;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}
html[data-appearance="glass"] .trade-actions .trade-select-control:hover,
html[data-appearance="glass"] .trade-actions .trade-select-control:has(input:checked) {
  color: var(--ink);
  border-color: var(--blue);
  background: var(--blue-soft);
}
html[data-appearance="glass"] .trade-actions .trade-select-control input {
  width: 18px;
  height: 18px;
  margin: 0;
}
html[data-appearance="glass"] .trade-actions .trade-select-control span {
  color: inherit;
  font-size: .6rem;
  font-weight: 800;
}

html[data-appearance="glass"] :is(.calculator-form,.trade-form,.trade-close-form) :is(input,select,textarea) {
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface-2);
  box-shadow: none;
}

@media (max-width: 900px) {
  html[data-appearance="glass"] .hero {
    padding-top: 72px;
    padding-inline-start: 16px;
  }
  html[data-appearance="glass"] .hero-quick-actions { width: 100%; }
  html[data-appearance="glass"] .hero-quick-actions #refreshButton { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-appearance="glass"] .trade-valuation-controls { transition: none; }
}

/* Glass action rows and native dropdown pricing controls. */
html[data-appearance="glass"] .trade-actions {
  width: 100%;
  align-items: center;
}
html[data-appearance="glass"] .trade-action {
  color: var(--ink);
  border: 1px solid rgba(190,225,255,.28);
  border-radius: 12px;
  background: linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.045));
  box-shadow: inset 0 1px rgba(255,255,255,.16),0 8px 22px rgba(0,0,0,.13);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  backdrop-filter: blur(12px) saturate(135%);
}
html[data-appearance="glass"] .trade-action:hover {
  color: var(--blue-dark);
  border-color: var(--blue);
  background: var(--blue-soft);
}
html[data-appearance="glass"] .trade-action.danger {
  color: var(--red);
  border-color: color-mix(in srgb,var(--red) 38%,var(--line));
  background: color-mix(in srgb,var(--red-soft) 58%,transparent);
}
html[data-appearance="glass"] .trade-actions .trade-select-control {
  margin-inline-start: auto;
  background: linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  box-shadow: inset 0 1px rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

html[data-appearance="glass"] .pricing-button-options { display: none !important; }
html[data-appearance="glass"] .pricing-basis-select {
  width: 100%;
  min-height: 42px;
  padding: 7px 12px;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: color-mix(in srgb,var(--surface-2) 94%,transparent);
  box-shadow: inset 0 1px rgba(255,255,255,.09);
  cursor: pointer;
}
html[data-appearance="glass"] .pricing-basis-select:focus-visible {
  outline: 3px solid color-mix(in srgb,var(--blue) 42%,transparent);
  outline-offset: 2px;
  border-color: var(--blue);
}
html[data-appearance="glass"] .trade-valuation-controls {
  max-height: none;
  overflow: visible;
  opacity: 1;
}

html[data-appearance="glass"] :is(.account-menu,.freshness) {
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb,var(--surface-2) 88%,transparent);
  box-shadow: inset 0 1px rgba(255,255,255,.1);
}
html[data-appearance="glass"] :is(.account-menu,.freshness) :is(span,strong) { color: inherit; }
html[data-appearance="glass"] .calculator-badge {
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-2);
}
html[data-appearance="glass"] :is(.chain-summary,.asset-box-summary b,.score-pill,.metric-icon,.top-rank) {
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: color-mix(in srgb,var(--surface-2) 92%,transparent);
  box-shadow: inset 0 1px rgba(255,255,255,.1);
}
html[data-appearance="glass"] .chain-sort-button {
  min-height: 38px;
  border-radius: 12px;
}
html[data-appearance="glass"] .chain-sort-button.active {
  color: #03141b;
  border-radius: 12px;
  background: var(--blue);
  box-shadow: none;
}

@media (max-width: 560px) {
  html[data-appearance="glass"] .trade-actions .trade-select-control {
    flex-basis: 100%;
    justify-content: center;
    margin-inline-start: 0;
  }
}

/* Final navigation/layout authority; keep after legacy drawer rules. */
html[data-appearance="glass"] :is(.navigation-toggle,.navigation-backdrop) { display: none !important; }
html[data-appearance="glass"] .main-navigation {
  position: sticky !important;
  inset: auto !important;
  top: 8px !important;
  display: grid !important;
  grid-template-columns: repeat(var(--visible-nav-count,11),minmax(92px,128px)) !important;
  justify-content: center !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  margin: 12px 0 18px !important;
  padding: 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}
html[data-appearance="glass"] .trade-page-layout { display: grid !important; }
html[data-appearance="glass"] .trade-control-sidebar {
  position: sticky !important;
  top: 82px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 80 !important;
  transform: none !important;
}

@media (max-width: 900px) {
  html[data-appearance="glass"] .main-navigation { grid-template-columns: repeat(var(--visible-nav-count,11),minmax(110px,128px)) !important; }
  html[data-appearance="glass"] .trade-control-sidebar { top: 68px !important; }
}

/* Stable trade overlays: viewport popover, scrollable editor, fixed quick rail. */
html[data-appearance="glass"] .trade-detail-workspace {
  position: fixed !important;
  inset: 0 !important;
  z-index: var(--z-popover) !important;
  pointer-events: none;
}
html[data-appearance="glass"] .trade-detail-window {
  position: fixed !important;
  pointer-events: auto;
}
html[data-appearance="glass"] #tradeEditModal {
  overflow: auto;
  align-items: flex-start;
  padding-block: 20px;
}
html[data-appearance="glass"] .trade-edit-modal {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 40px);
  overflow: hidden;
}
html[data-appearance="glass"] .trade-edit-modal > header,
html[data-appearance="glass"] #tradeEditModalMessage {
  flex: 0 0 auto;
}
html[data-appearance="glass"] #tradeEditModalBody {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
html[data-appearance="glass"] .trade-jump-rail,
html[data-appearance="glass"] .trade-action-rail {
  position: fixed !important;
  right: 18px !important;
  z-index: 400 !important;
}

@media (max-width: 1100px) {
  html[data-appearance="glass"] .trade-jump-rail,
  html[data-appearance="glass"] .trade-action-rail {
    top: auto !important;
    right: 50% !important;
    bottom: 12px !important;
  }
}

@media (max-width: 560px) {
  html[data-appearance="glass"] #tradeEditModal { padding: 8px; }
  html[data-appearance="glass"] .trade-edit-modal { max-height: calc(100dvh - 16px); }
}

/* Trade page floating controls and card-anchored detail panels. */
html[data-appearance="glass"] .trade-jump-rail {
  position: fixed;
  top: 50%;
  right: max(14px, calc((100vw - 1500px) / 2 + 14px));
  z-index: var(--z-sticky, 45);
  border-radius: 18px;
  background: color-mix(in srgb,var(--surface) 88%,transparent);
  box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  transform: translateY(-50%);
}
html[data-appearance="glass"] .trade-action-rail button {
  grid-template-columns: 18px minmax(0,1fr);
}
html[data-appearance="glass"] .trade-action-rail button.active {
  color: var(--ink);
  border-color: var(--blue);
  background: var(--blue-soft);
}
html[data-appearance="glass"] .trade-card {
  overflow: visible;
}
html[data-appearance="glass"] .trade-inline-detail {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: calc(100% - 20px);
}

@media (max-width: 1100px) {
  html[data-appearance="glass"] .trade-jump-rail {
    top: auto;
    right: 50%;
    bottom: 12px;
    width: auto;
    grid-template-columns: repeat(2,auto);
    transform: translateX(50%);
  }
}

/* Header finish: keep identity/status unboxed and align menu with the logo. */
html[data-appearance="glass"] .hero {
  position: relative;
}
html[data-appearance="glass"] .hero .navigation-toggle {
  position: absolute;
  top: 22px;
  right: 22px;
}
html[data-appearance="glass"] :is(.account-menu,.freshness),
html[data-appearance="glass"][data-theme="light"] :is(.account-menu,.freshness) {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-appearance="glass"] :is(.account-menu,.freshness)::before,
html[data-appearance="glass"] :is(.account-menu,.freshness)::after {
  display: none !important;
}
html[data-appearance="glass"] body.nav-open .navigation-toggle {
  position: fixed;
  top: 40px;
  right: max(40px, calc((100vw - 1500px) / 2 + 40px));
}

@media (max-width: 900px) {
  html[data-appearance="glass"] .hero {
    padding-top: 16px;
    padding-inline-start: 76px;
  }
  html[data-appearance="glass"] .hero .navigation-toggle {
    top: 16px;
    right: 16px;
  }
  html[data-appearance="glass"] body.nav-open .navigation-toggle {
    position: fixed;
    top: 28px;
    right: 28px;
  }
}

/* Absolute final overrides for the top nav and sticky trade sidebars. */
html[data-appearance="glass"] :is(.navigation-toggle,.navigation-backdrop) { display: none !important; }
html[data-appearance="glass"] .hero { padding-inline-start: 26px !important; }
html[data-appearance="glass"] .main-navigation {
  position: sticky !important;
  inset: auto !important;
  top: 8px !important;
  display: grid !important;
  grid-template-columns: repeat(var(--visible-nav-count,11),minmax(92px,128px)) !important;
  justify-content: center !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  margin: 12px 0 18px !important;
  padding: 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}
html[data-appearance="glass"] .trade-page-layout { display: grid !important; }
html[data-appearance="glass"] .trade-control-sidebar {
  position: sticky !important;
  top: 82px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 80 !important;
  transform: none !important;
}
@media (max-width: 900px) {
  html[data-appearance="glass"] .hero { padding-inline-start: 16px !important; }
  html[data-appearance="glass"] .main-navigation { grid-template-columns: repeat(var(--visible-nav-count,11),minmax(110px,128px)) !important; }
  html[data-appearance="glass"] .trade-control-sidebar { top: 68px !important; }
}

/* Route visibility must win over the trade layout's display mode. */
html[data-appearance="glass"] .trade-page-layout.page-hidden {
  display: none !important;
}

/* Keep dialogs and draggable windows outside the clipped glass application shell. */
body > .modal-backdrop {
  position: fixed;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body > .modal-backdrop > .analysis-modal {
  max-height: calc(100dvh - 32px);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
body > .trade-detail-workspace {
  position: fixed !important;
  inset: 0 !important;
  z-index: 500 !important;
  pointer-events: none;
}
body > .trade-detail-workspace .trade-detail-window {
  position: fixed !important;
  pointer-events: auto;
}

/* Page access navigation: centered labels on desktop, touch-safe rail on phones. */
html[data-appearance="glass"] .main-navigation::before {
  display: none !important;
  content: none !important;
}
html[data-appearance="glass"] .main-navigation a {
  box-sizing: border-box;
  justify-content: center !important;
  min-height: 48px;
  padding-inline: 10px !important;
  text-align: center !important;
}
html[data-appearance="glass"] .main-navigation a[hidden] {
  display: none !important;
}

.underlying-bulk-bar {
  margin: 10px 12px 0;
}
.underlying-card.is-selected,
.underlying-lot.is-selected {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px color-mix(in srgb,var(--blue) 20%,transparent);
}
.underlying-card > footer .trade-select-control,
.underlying-lot > footer .trade-select-control {
  margin-inline-end: 4px;
}

@media (max-width: 700px) {
  html[data-appearance="glass"] .page-shell {
    width: calc(100% - 12px) !important;
    padding: 8px 8px calc(88px + env(safe-area-inset-bottom)) !important;
    border-radius: 18px !important;
  }
  html[data-appearance="glass"] .hero {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 16px !important;
  }
  html[data-appearance="glass"] .brand-block,
  html[data-appearance="glass"] .hero-actions,
  html[data-appearance="glass"] .hero-quick-actions {
    width: 100%;
    min-width: 0;
  }
  html[data-appearance="glass"] .hero-actions {
    align-items: stretch;
  }
  html[data-appearance="glass"] .hero-quick-actions {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
  }
  html[data-appearance="glass"] :is(.account-menu,.freshness) {
    width: 100%;
    justify-content: space-between;
  }
  html[data-appearance="glass"] .main-navigation {
    top: 4px !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(132px, 44vw) !important;
    margin-block: 8px 14px !important;
    padding: 5px !important;
    scroll-padding-inline: 5px;
    scroll-snap-type: inline proximity;
    -webkit-overflow-scrolling: touch;
  }
  html[data-appearance="glass"] .main-navigation a {
    width: auto !important;
    min-width: 0 !important;
    scroll-snap-align: start;
  }
  html[data-appearance="glass"] main {
    min-width: 0;
  }
  html[data-appearance="glass"] .page-heading {
    padding: 16px !important;
  }
  html[data-appearance="glass"] :is(
    .summary-grid,.metric-grid,.top-opportunities,.settings-grid,
    .closed-summary-grid,.calculator-grid,.trade-form-grid,
    .forecast-grid,.commodity-fx-grid
  ) {
    grid-template-columns: minmax(0,1fr) !important;
  }
  html[data-appearance="glass"] :is(
    .primary-button,.secondary-button,.danger-button,
    button,input,select,textarea
  ) {
    max-width: 100%;
  }
  html[data-appearance="glass"] .trade-control-sidebar {
    position: static !important;
    top: auto !important;
  }
  html[data-appearance="glass"] .trade-page-layout {
    grid-template-columns: minmax(0,1fr) !important;
  }
}