/* ════════════════════════════════════════════════════════════════════
   PuenTrade web app — editorial layout for EVERY theme.
   Structure, type, radius, nav, topbar, calendar/KPI layout apply to all themes
   (html[data-theme]); colours come from each theme's own tokens. Only the
   neutral black/white colour tokens below are Luminous-specific.
   Signal colours stay: green = profit, red = loss, amber = warning.
   To roll back: remove the <link> to css/editorial-app.css in app.html.
   ════════════════════════════════════════════════════════════════════ */

/* every theme: fonts, ink colour (= the theme's own accent) and corner radius */
html[data-theme] {
  --ed-display: "Bricolage Grotesque", "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, sans-serif;
  --ed-mono: "IBM Plex Mono", ui-monospace, monospace;
  --ed-ink: var(--accent);
  /* same families as the Claude Design board: Plex Sans body, Bricolage headings, Plex Mono labels */
  --ff-sans: "IBM Plex Sans", "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-display: "Bricolage Grotesque", "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, sans-serif;
  --ff-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --radius-lg: 22px;
  --radius-xl: 28px;
}

/* Luminous only: neutral black / white colour tokens */
html[data-theme="luminous"] {

  /* neutral ramp (no blue tint) */
  --accent: #0b0b0c;
  --accent-2: #2a2a2c;
  --accent-3: #4a4a4c;
  --accent-glow: 11, 11, 12;
  --border: #dcdcda;
  --border-strong: #c6c6c3;
  --border-bright: rgba(11, 11, 12, 0.45);
  --text-1: #0b0b0c;
  --text-2: #3d3d3b;
  --text-3: #5c5c5a;
  --text-4: #8a8a87;
  --lp-surface: #f4f4f2;
  --lp-container-low: #f4f4f2;
  --lp-container: #ecece9;
  --surface-2: #f7f7f5;
  --surface-3: #f1f1ee;
  --bg-2: #f7f7f5;

  /* signal colors: AA-readable on white */
  --win: #0e9f6e;
  --win-text: #047857;
  --win-soft: #d9f5e8;
  --loss: #e03a3a;
  --loss-text: #b91c1c;
  --loss-soft: #fde4e4;

}

/* ── Type ────────────────────────────────────────────── */
html[data-theme] .view__title {
  font-family: var(--ed-display);
  font-weight: 800;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--text-1);
}
html[data-theme] .card__title,
html[data-theme] .pf-header__title {
  font-family: var(--ed-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-1);
}
html[data-theme] .view__eyebrow,
html[data-theme] .nav__section {
  font-family: var(--ed-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-3);
}
html[data-theme] .brand__name {
  font-family: var(--ed-display);
  font-weight: 800;
  letter-spacing: -0.02em;
}
/* Thai: tight latin tracking crushes Thai marks, so loosen and lighten */
html[data-theme]:lang(th) .view__title,
html[data-theme]:lang(th) .card__title,
html[data-theme]:lang(th) .brand__name,
html[data-theme]:lang(th) .kpi__value {
  font-family: "IBM Plex Sans Thai", "Noto Sans Thai", var(--ed-display), sans-serif;
  letter-spacing: 0;
  font-weight: 700;
  line-height: 1.3;
}

/* ── Shell ───────────────────────────────────────────── */
html[data-theme] .sidebar { border-right: 1px solid var(--border); background: var(--bg-1); }
html[data-theme] .nav__item { border-radius: 12px; }
html[data-theme] .nav__item:hover { background: var(--surface-3); }
html[data-theme] .nav__item.is-active {
  background: var(--ed-ink) !important;
  color: #ffffff !important;
  font-weight: 600;
}
html[data-theme] .nav__item.is-active::before { display: none !important; }
html[data-theme] .nav__item.is-active .nav__label,
html[data-theme] .nav__item.is-active .nav__icon { color: #ffffff !important; }
html[data-theme] .nav__item.is-active svg { color: #ffffff; stroke: currentColor; }
html[data-theme] .topbar { border-bottom: 1px solid var(--border); background: var(--bg-1); box-shadow: none; }
html[data-theme] .topbar__search { border-radius: 999px; background: var(--bg-0); border: 1px solid var(--border); }
html[data-theme] .topbar__search:focus-within { border-color: var(--ed-ink); box-shadow: none; }
html[data-theme] .icon-btn { border-radius: 999px; }
html[data-theme] .account-card { border-radius: 18px; }

/* ── Cards ───────────────────────────────────────────── */
html[data-theme] .card,
html[data-theme] .kpi {
  border-radius: 24px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: none;
}
html[data-theme] .card:hover { box-shadow: none; border-color: var(--border-strong); }
html[data-theme] .kpi { padding: 18px 20px; }
html[data-theme] .kpi__label {
  font-family: var(--ed-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
html[data-theme] .kpi__value {
  font-family: var(--ed-display);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.03em;
}
/* signal colors back on the numbers (luminous.css forced them to black) */
html[data-theme] .kpi__value.is-pos { color: var(--win-text, var(--win)); }
html[data-theme] .kpi__value.is-neg { color: var(--loss-text, var(--loss)); }
html[data-theme] .kpi__value.is-warn { color: #b45309; }
html[data-theme] .is-pos:not(.cal-day):not(.chip):not(.badge):not(.nav__item):not(.btn) { color: var(--win-text, var(--win)); }
html[data-theme] .is-neg:not(.cal-day):not(.chip):not(.badge):not(.nav__item):not(.btn) { color: var(--loss-text, var(--loss)); }

/* ── Buttons, segments, chips ────────────────────────── */
html[data-theme] .btn { border-radius: 999px; min-height: 40px; padding-inline: 18px; }
html[data-theme] .btn--primary {
  background: var(--ed-ink);
  border-color: var(--ed-ink);
  color: #ffffff;
}
html[data-theme] .btn--primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
html[data-theme] .btn--ghost { border-color: var(--border); background: var(--bg-0); }
html[data-theme] .btn--ghost:hover { border-color: var(--ed-ink); background: var(--bg-0); }
html[data-theme] .btn--accent {
  background: var(--bg-0);
  color: var(--ed-ink);
  border: 1.5px solid var(--ed-ink);
  box-shadow: none;
}
html[data-theme] .btn--accent:hover { background: var(--ed-ink); color: #ffffff; }
html[data-theme] .seg,
html[data-theme] .segmented-control { border-radius: 999px; border: 1px solid var(--border); background: var(--bg-0); padding: 3px; }
html[data-theme] .seg__btn,
html[data-theme] .segment-btn { border-radius: 999px; }
html[data-theme] .seg__btn.is-active,
html[data-theme] .segment-btn.is-active {
  background: var(--ed-ink);
  color: #ffffff;
  box-shadow: none;
}
html[data-theme] .chip { border-radius: 999px; }
html[data-theme] .chip--toggle.is-active { background: var(--ed-ink); color: #ffffff; border-color: var(--ed-ink); }
html[data-theme] .badge { border-radius: 999px; }

/* ── Calendar: keep the green / red day tints, soften the shape ── */
html[data-theme] .cal-day { border-radius: 14px; }
html[data-theme] .cal-day.is-today { border-color: var(--ed-ink); box-shadow: 0 0 0 2px rgba(var(--accent-glow), 0.25); }
html[data-theme] .cal-month-title { font-family: var(--ed-display); font-weight: 800; letter-spacing: -0.02em; }

/* ── Tables ──────────────────────────────────────────── */
html[data-theme] .trade-table thead th {
  font-family: var(--ed-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
html[data-theme] .trade-table tbody tr:hover { background: var(--surface-3); }

/* ── Forms: black focus ring instead of blue ─────────── */
html[data-theme] input:focus,
html[data-theme] select:focus,
html[data-theme] textarea:focus {
  border-color: var(--ed-ink);
  box-shadow: 0 0 0 3px rgba(var(--accent-glow), 0.18);
}

/* ── Keyboard focus ──────────────────────────────────── */
html[data-theme] a:focus-visible,
html[data-theme] button:focus-visible { outline: 2px solid var(--ed-ink); outline-offset: 2px; }

/* ── Layout details taken from the design board ──────── */
/* wordmark only, like the landing nav */
html[data-theme] .sidebar__brand .brand__logo,
html[data-theme] .sidebar__brand .brand__sub { display: none !important; }
html[data-theme] .brand__name { font-size: 22px; }
/* section captions (OVERVIEW / MARKETS ...) shown as small mono labels */
html[data-theme] .sidebar__nav .nav__section {
  display: block !important;
  padding: 18px 16px 6px;
  text-transform: uppercase;
}
/* calendar: separate rounded day tiles instead of a bordered table */
html[data-theme] .calendar-grid {
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
html[data-theme] .calendar-grid .cal-day { border-radius: 14px !important; }
html[data-theme] .calendar-grid .cal-dow,
html[data-theme] .calendar-grid .cal-head {
  font-family: var(--ed-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-3);
  background: transparent;
  border: 0;
}

/* ── Match the Claude Design board (layout) ──────────── */
html[data-theme] .card,
html[data-theme] .kpi { border-radius: 28px; }

/* nav: itshover animated icons next to each label */
html[data-theme] .sidebar:not(.is-collapsed) .nav__item { min-height: 40px; padding: 0 12px; gap: 12px; }
html[data-theme] .nav__item .nav__icon { display: inline-flex !important; align-items: center; justify-content: center; }

/* topbar: "Log trade" lives top-right; the sidebar copy is hidden on desktop */
html[data-theme] .topbar__log { min-height: 44px; padding-inline: 22px; margin-left: 4px; white-space: nowrap; }
@media (min-width: 901px) {
  html[data-theme] .sidebar__footer #openTradeModal { display: none !important; }
}
@media (max-width: 900px) {
  html[data-theme] .topbar__log { display: none; }
}

/* calendar and KPIs stack: calendar full width, KPI cards in a grid beneath */
html[data-theme] .dash-cal-kpi-row { grid-template-columns: 1fr !important; }
html[data-theme] .dash-cal-kpi-row .kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)) !important;
  gap: 12px;
}
html[data-theme] .calendar-card { display: flex; flex-direction: column; }
html[data-theme] .calendar-card > .card__head { order: 1; }
html[data-theme] .calendar-card > .calendar-view-toggle { order: 2; justify-content: flex-start !important; margin: 0 0 14px !important; }
html[data-theme] .calendar-card > .calendar-grid { order: 3; }

/* topbar: search stretches, actions never wrap (decorative price ticker hidden to make room) */
html[data-theme] .topbar .ticker-strip { display: none !important; }
html[data-theme] .topbar__search { flex: 1 1 240px; min-width: 160px; max-width: none; }
html[data-theme] .topbar__actions { flex-wrap: nowrap !important; flex-shrink: 0; gap: 8px; align-items: center; }

/* tab strip removed (the sidebar already navigates) */
html[data-theme] #tabStrip { display: none !important; }

/* search = white pill, hairline border, bare input, boxed "/" key (as in the design) */
html[data-theme] .topbar__search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px 0 16px;
  background: var(--bg-0) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
html[data-theme] .topbar__search input,
html[data-theme] .topbar__search input:focus,
html[data-theme] .topbar__search input:-webkit-autofill {
  background: transparent !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg-0) inset !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none;
  color: var(--text-1);
  font-family: inherit;
  font-size: 14px;
}
html[data-theme] .topbar__search input::placeholder { color: var(--text-3); }
html[data-theme] .topbar__search svg { color: var(--text-3); stroke: currentColor; }
html[data-theme] .topbar__search kbd {
  font-family: var(--ed-mono);
  font-size: 12px;
  color: var(--text-3);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 7px;
  box-shadow: none;
}

/* portfolio switcher as a sidebar card on desktop ("PORTFOLIO / All portfolios ▾") */
html[data-theme] .sidebar__portfolio { padding: 4px 16px 6px; }
html[data-theme] .sidebar__portfolio:empty { display: none; }
html[data-theme] .sidebar.is-collapsed .sidebar__portfolio { display: none; }
html[data-theme] .acc-switch--side {
  display: grid !important;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 8px 14px !important;
  text-align: left;
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  color: var(--text-1);
}
html[data-theme] .acc-switch--side::before {
  content: "PORTFOLIO";
  grid-column: 1;
  font-family: var(--ed-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
html[data-theme] .acc-switch--side .acc-switch__logo { display: none !important; }
html[data-theme] .acc-switch--side .acc-switch__name { grid-column: 1; grid-row: 2; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme] .acc-switch--side .acc-switch__caret { grid-column: 2; grid-row: 1 / span 2; color: var(--text-3); }

/* ── Lighter weights, like the design board (Plex Sans Regular 400 for most text) ── */
html[data-theme] .nav__item { font-weight: 400 !important; }
html[data-theme] .nav__item.is-active { font-weight: 600 !important; }
html[data-theme] .nav__badge { font-weight: 500; }
html[data-theme] .btn,
html[data-theme] .btn--ghost,
html[data-theme] .seg__btn,
html[data-theme] .segment-btn,
html[data-theme] .chip,
html[data-theme] .dash-tool { font-weight: 400 !important; }
html[data-theme] .btn--primary,
html[data-theme] .btn--accent,
html[data-theme] .seg__btn.is-active,
html[data-theme] .segment-btn.is-active,
html[data-theme] .chip--toggle.is-active { font-weight: 600 !important; }
html[data-theme] .card__sub,
html[data-theme] .view__subtitle,
html[data-theme] .kpi__hint,
html[data-theme] .topbar__search input { font-weight: 400 !important; }
html[data-theme] .kpi__label,
html[data-theme] .nav__section { font-weight: 400 !important; }
html[data-theme] .acc-switch--side .acc-switch__name { font-weight: 500; }
html[data-theme] .cal-day { font-weight: 400; }
html[data-theme] .cal-month-title { font-weight: 800; }

/* Share-card dialog on phones: one column, card grows with its content */
@media (max-width: 720px) {
  #shareCardModal .modal__body { grid-template-columns: minmax(0, 1fr) !important; padding: 14px !important; }
  #shareCardModal .modal__body > div { max-height: none !important; min-width: 0; }
  #shareCardModal #scCardWrapper > div { aspect-ratio: auto !important; min-height: 200px; padding: 14px !important; gap: 10px; }
  #shareCardModal #scCardWrapper div[style*="grid-template-columns"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ── Log trade modal: minimal ── */
#tradeModal .modal { font-family: "IBM Plex Sans", "IBM Plex Sans Thai", system-ui, sans-serif; border-radius: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.28); }
#tradeModal .modal__title { font-family: var(--ed-display); font-weight: 800; letter-spacing: -.02em; font-size: 22px; }
#tradeModal .modal__sub { font-size: 13px; color: var(--text-3); }
#tradeModal .modal__head { border-bottom: 0; padding-bottom: 4px; }
#tradeModal .modal__foot { border-top: 1px solid var(--border); }
#tradeModal .tf-section__label, #tradeModal .tf-rail__title {
  font: 600 11px/1 "IBM Plex Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 22px 0 10px;
}
#tradeModal .form-label { font: 500 12.5px/1.2 "IBM Plex Sans", "IBM Plex Sans Thai", sans-serif; letter-spacing: 0; text-transform: none; color: var(--text-2); margin-bottom: 6px; }
#tradeModal .info-tooltip-btn { opacity: 0; transition: opacity .15s; }
#tradeModal .form-group:hover .info-tooltip-btn, #tradeModal .info-tooltip-btn:focus { opacity: .7; }
#tradeModal .input, #tradeModal .select, #tradeModal .textarea {
  font-family: inherit; font-size: 14px; border-radius: 12px; background: transparent; border: 1px solid var(--border); box-shadow: none;
}
#tradeModal .input:focus, #tradeModal .select:focus, #tradeModal .textarea:focus { border-color: var(--text-1); box-shadow: none; outline: 0; }
#tradeModal .toggle-group { border-radius: 12px; background: transparent; border: 1px solid var(--border); padding: 3px; }
#tradeModal .toggle-btn { border-radius: 9px; font-weight: 600; font-size: 13px; }
/* AI bar: one quiet line instead of a glowing card */
#tradeModal .ai-hero { background: transparent; border: 1px dashed var(--border); border-radius: 14px; box-shadow: none; padding: 10px 12px; }
#tradeModal .ai-hero__sparkles { display: none; }
#tradeModal .ai-hero__icon { width: 30px; height: 30px; background: transparent; border: 1px solid var(--border); box-shadow: none; display: grid; place-items: center; color: var(--text-1); }
#tradeModal .ai-hero__title { font-size: 13px; font-weight: 700; }
#tradeModal .ai-hero__sub { font-size: 11.5px; color: var(--text-3); line-height: 1.4; }
#tradeModal .ai-hero .btn--primary { background: var(--accent); color: var(--on-accent, #fff); box-shadow: none; border-radius: 999px; font-size: 12.5px; }
/* right rail */
#tradeModal .tf-rail { background: transparent; border-left: 1px solid var(--border); }
#tradeModal .tag-row .tag, #tradeModal .tag-row > * { background: transparent !important; border: 1px solid var(--border) !important; color: var(--text-2) !important; border-radius: 999px; font-size: 12px; font-weight: 500; box-shadow: none; }
#tradeModal .tag-row .is-active, #tradeModal .tag-row [aria-pressed="true"] { background: var(--accent) !important; color: var(--on-accent, #fff) !important; border-color: var(--accent) !important; }
#tradeModal .dropzone { border-radius: 16px; background: transparent; border: 1.5px dashed var(--border); }
#tradeModal .tf-more { border-radius: 14px; border: 1px solid var(--border); background: transparent; }
#tradeModal .btn--primary { border-radius: 999px; box-shadow: none; background: var(--accent); color: var(--on-accent, #fff); }
#tradeModal .btn--ghost { border-radius: 999px; }

/* ── Log trade: right-hand drawer, one column (design: "Log Trade Drawer") ── */
#tradeModal.modal-backdrop { display: flex !important; justify-content: flex-end; align-items: stretch; padding: 0 !important; background: rgba(11,11,12,.32); backdrop-filter: none; -webkit-backdrop-filter: none; }
#tradeModal[hidden] { display: none !important; }
#tradeModal .modal { width: 480px !important; max-width: 100vw !important; height: 100vh; max-height: 100vh !important; border-radius: 0 !important; margin: 0; display: flex; flex-direction: column; border: 0; border-left: 1px solid var(--border); box-shadow: -24px 0 60px rgba(0,0,0,.14); animation: tmDrawerIn .28s cubic-bezier(.2,.8,.2,1); }
@keyframes tmDrawerIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #tradeModal .modal { animation: none; } }
#tradeModal .modal__head { padding: 26px 28px 14px; }
#tradeModal .modal__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 !important; }
#tradeModal #tradeForm { display: flex !important; flex-direction: column; gap: 18px !important; padding: 6px 28px 24px; }
#tradeModal .tf-main, #tradeModal .tf-rail { display: contents; }
#tradeModal .tf-rail__block { display: block; padding: 0; background: none; border: 0; min-width: 0; }
#tradeModal .tf-main > .ai-hero { order: 1; }
#tradeModal .tf-main > .tf-section__label { display: none; }
#tradeModal .tf-main > .tf-grid--2 { order: 2; grid-template-columns: minmax(0,1fr) 190px; }
#tradeModal .tf-main > .tf-grid--3 { order: 3; }
#tradeModal .tf-rail > .tf-rail__block:nth-child(1) { order: 4; }
#tradeModal .tf-main > .form-group { order: 5; }
#tradeModal .tf-rail > .tf-rail__block:nth-child(2) { order: 6; }
#tradeModal .tf-rail > .tf-rail__block:nth-child(3) { order: 7; }
#tradeModal .tf-main > .tf-more { order: 8; }
#tradeModal .tf-rail__title { display: none; }
#tradeModal .pnl-preview { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; gap: 0 !important; padding: 0 !important; background: none !important; }
#tradeModal .pnl-preview > * { padding: 10px 12px; margin: 0 !important; border-left: 1px solid var(--border); font-size: 12px; min-width: 0; }
#tradeModal .pnl-preview > *:first-child { border-left: 0; }
#tradeModal .modal__foot { padding: 16px 28px; }
#tradeModal .dropzone { min-height: 0; padding: 14px; }
#tradeModal .dropzone__hint { display: flex; align-items: center; gap: 12px; text-align: left; }
#tradeModal .dropzone__hint > svg { width: 26px; height: 26px; flex: none; }
@media (max-width: 560px) { #tradeModal #tradeForm { padding: 6px 16px 20px; } #tradeModal .tf-main > .tf-grid--2 { grid-template-columns: minmax(0,1fr); } }
#tradeModal .modal__steps { display: none !important; }
#tradeModal .ai-hero__body { flex-wrap: nowrap; gap: 12px; }
#tradeModal .ai-hero__sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Log trade, essentials only (design v3): everything else is auto-filled or tucked in More ── */
#tradeModal .tf-main > .ai-hero { order: 5; }
#tradeModal .tf-main > .tf-grid--2 { order: 1; }
#tradeModal .tf-main > .tf-grid--3 { order: 2; }
#tradeModal .tf-main > .form-group { order: 3; }                 /* Result */
#tradeModal .tf-rail > .tf-rail__block:nth-child(1) { display: none; }   /* metrics: calculated, not typed */
#tradeModal .tf-rail > .tf-rail__block:nth-child(2) { order: 4; }        /* chart attach */
#tradeModal .tf-main > .tf-more { order: 6; }
#tradeModal .ai-hero__sub, #tradeModal .ai-hero__icon { display: none; }
#tradeModal .ai-hero { padding: 8px 12px; }
#tradeModal .ai-hero__body { justify-content: space-between; }
#tradeModal .ai-hero__title { font-weight: 600; font-size: 13px; }
#tradeModal .tf-more__hint { display: none; }
/* inside More: keep Exit, Size, Setup, Notes, Feeling (before), Tags */
#tradeModal .tf-more__body .tf-section__label,
#tradeModal .tf-more__body .tf-grid:has(#tradeDate),
#tradeModal .tf-more__body .form-group:has(#tradeFees),
#tradeModal .tf-more__body .form-group:has(#tradePnl),
#tradeModal .tf-more__body .form-group:has(#tradeR),
#tradeModal .tf-more__body .form-group:has(#tradeDuration),
#tradeModal .tf-more__body .form-group:has(#tradePlaybook),
#tradeModal .tf-more__body .form-group:has(#ratingRow),
#tradeModal .tf-more__body .form-group:has(#mistakesGrid),
#tradeModal .tf-more__body .emotion-split > .form-group:nth-child(2) { display: none !important; }
#tradeModal .tf-more__body .tf-grid--2 { grid-template-columns: minmax(0, 1fr); }
#tradeModal .tf-more__body { display: flex; flex-direction: column; gap: 14px; }
#tradeModal .tf-more__body .tf-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#tradeModal .tf-more__body .tf-rail__block { display: block; }
#tradeModal .modal__sub { display: none; }
#tradeModal .modal__foot #cancelTradeModal { display: none; }
#tradeModal .modal__foot { justify-content: flex-end; }
#tradeModal .tf-rail .form-group > .form-label { display: none; }
#tradeModal .dropzone__hint > div:nth-of-type(2) { display: none; }
#tradeModal .dropzone__hint > svg { width: 20px; height: 20px; }
#tradeModal .dropzone { padding: 12px 14px; min-height: 0 !important; }
#tradeModal .dropzone__hint { padding: 0 !important; margin: 0 !important; }
#tradeModal .emotion-split .form-group { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }

/* ── Log trade: match the Claude Design board exactly ── */
#tradeModal .form-label, #tradeModal .form-group > label, #tradeModal .emotion-split .form-label {
  font: 500 12.5px/1.2 "IBM Plex Sans", "IBM Plex Sans Thai", sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--text-2) !important;
}
#tradeModal .modal__title { font-size: 24px; }
#tradeModal .input, #tradeModal .select { height: 46px; }
#tradeModal .tf-more__body .input, #tradeModal .tf-more__body .select { height: 42px; }
#tradeModal .tf-more { border-radius: 14px; }
#tradeModal .tf-more__summary { padding: 14px 16px; }
#tradeModal .tf-more__body { padding: 14px 16px 18px; border-top: 1px solid var(--border); }
/* feeling: words in a row, not a gradient card */
#tradeModal .emotion-split { display: block; }
#tradeModal .emotion-split .form-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
#tradeModal .emotion-split .form-label { margin: 0 4px 0 0 !important; }
#tradeModal .emotion-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; background: none; border: 0; }
#tradeModal .emotion-row button {
  width: auto !important; height: auto !important; padding: 5px 11px !important; border-radius: 999px !important; font: 400 12px "IBM Plex Sans", sans-serif !important;
  background: transparent !important; border: 1px solid var(--border) !important; color: var(--text-2) !important; box-shadow: none !important; filter: none !important;
}
#tradeModal .emotion-row button.is-active { background: var(--accent) !important; color: var(--on-accent, #fff) !important; border-color: var(--accent) !important; }
/* tags: quiet outlined pills, remove cross only on hover */
#tradeModal .tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
#tradeModal .tag-pill { background: transparent !important; border: 1px solid var(--border) !important; color: var(--text-2) !important; opacity: 1 !important; border-radius: 999px !important; padding: 5px 11px !important; font: 400 12px "IBM Plex Sans", sans-serif !important; box-shadow: none !important; }
#tradeModal .tag-pill.is-active, #tradeModal .tag-pill[class*="active"], #tradeModal .tag-pill.on { background: var(--accent) !important; color: var(--on-accent, #fff) !important; border-color: var(--accent) !important; }
#tradeModal .tag-pill .x { display: none; margin-left: 6px; }
#tradeModal .tag-pill:hover .x { display: inline; }
#tradeModal .tag-input-row .input--sm { height: 36px; }

/* ── Boot splash (design "Loading B"): candles draw in on black ── */
#bootLoader.boot-loader { background: #0b0b0c !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; color: #fff; }
#bootLoader .boot-text { font: 800 30px/1 "Bricolage Grotesque", sans-serif !important; letter-spacing: -.03em !important; color: #fff !important; text-transform: none !important; }
#bootLoader .boot-sub { font: 500 12px "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: #8a8a86; animation: bootFade 1.6s ease-in-out infinite; }
#bootLoader .boot-candles { max-width: 70vw; height: auto; }
#bootLoader .boot-c { transform-box: fill-box; transform-origin: 50% 100%; animation: bootRise 2.4s cubic-bezier(.2,.8,.2,1) infinite both; }
#bootLoader .boot-trend { animation: bootLine 2.4s ease-in-out infinite; }
@keyframes bootRise { 0% { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } 60%, 100% { transform: scaleY(1); opacity: 1; } }
@keyframes bootLine { 0% { stroke-dashoffset: 420; } 70%, 100% { stroke-dashoffset: 0; } }
@keyframes bootFade { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #bootLoader .boot-c, #bootLoader .boot-trend, #bootLoader .boot-sub { animation: none; } }

/* ── Phone: breathe. KPI cards show label, number, one quiet line; badges and sparklines go. ── */
@media (max-width: 640px) {
  html[data-theme] .kpi-grid { gap: 12px !important; }
  html[data-theme] .kpi-grid .kpi { padding: 16px 16px 14px !important; min-height: 0 !important; display: flex; flex-direction: column; gap: 6px; border-radius: 16px; }
  html[data-theme] .kpi-grid .kpi__spark,
  html[data-theme] .kpi-grid .kpi__badge { display: none !important; }
  html[data-theme] .kpi-grid .kpi__label { font-size: 11px; letter-spacing: .06em; margin: 0; }
  html[data-theme] .kpi-grid .kpi__value { font-size: 26px; line-height: 1.1; margin: 0; }
  html[data-theme] .kpi-grid .kpi__hint { display: flex; flex-direction: column; gap: 3px; font-size: 12px; line-height: 1.35; color: var(--text-3); margin: 0; }
  html[data-theme] .kpi-grid .kpi__hint .delta { display: block; background: none !important; border: 0 !important; padding: 0 !important; margin: 0; font-size: 11.5px; border-radius: 0; white-space: normal; }
  html[data-theme] .calendar-card, html[data-theme] .cal-card { padding: 18px 14px; }
}
@media (max-width: 640px) { html[data-theme] .kpi-grid .kpi__hint { align-items: flex-start; text-align: left; } html[data-theme] .kpi-grid .kpi { align-items: flex-start; text-align: left; } }

/* ── Phone: the round "+" button must never sit on top of content ── */
@media (max-width: 820px) {
  html[data-theme] main.main { padding-bottom: calc(168px + env(safe-area-inset-bottom, 0px)) !important; }
  .mobile-fab-new-trade { width: 52px !important; height: 52px !important; right: 26px !important; bottom: calc(env(safe-area-inset-bottom, 0px) + 94px) !important; }   /* sits above the Support bubble, never on it */
  body:has(.modal-backdrop:not([hidden])) .mobile-fab-new-trade { display: none !important; }
}

/* ── Phone: smaller type and controls so the page feels calm (inputs stay 16px so iOS does not zoom) ── */
@media (max-width: 640px) {
  html[data-theme] .view__eyebrow { font-size: 10.5px; }
  html[data-theme] .view__title { font-size: 21px !important; line-height: 1.2; letter-spacing: -.02em; }
  html[data-theme] .view__subtitle { font-size: 12.5px !important; }
  html[data-theme] .topbar { min-height: 52px; }
  html[data-theme] .topbar .icon-btn, html[data-theme] .topbar .btn { transform: none; }
  html[data-theme] .btn { font-size: 13px; }
  html[data-theme] .btn:not(.btn--sm):not(.icon-btn) { padding-top: 8px; padding-bottom: 8px; }
  html[data-theme] .seg__btn { font-size: 12px; padding: 7px 12px; }
  html[data-theme] .card { padding: 14px; border-radius: 16px; }
  html[data-theme] .card__title { font-size: 15px; }
  html[data-theme] .card__sub { font-size: 12px; }
  html[data-theme] .kpi-grid .kpi__value { font-size: 22px; }
  html[data-theme] .kpi-grid .kpi__label { font-size: 10.5px; }
  html[data-theme] .kpi-grid .kpi__hint, html[data-theme] .kpi-grid .kpi__hint .delta { font-size: 11px; }
  html[data-theme] .cal-day { padding: 6px; border-radius: 12px; }
  html[data-theme] .cal-day__date { font-size: 11.5px !important; }
  html[data-theme] .cal-day__pnl { font-size: 10px !important; }
  html[data-theme] .cal-day__count { font-size: 9px !important; }
  html[data-theme] .chip, html[data-theme] .tag-pill { font-size: 11.5px; }
  .mobile-fab-new-trade { width: 46px !important; height: 46px !important; right: 22px !important; }
  .tjc-launcher { width: 50px !important; height: 50px !important; right: 20px !important; bottom: 20px !important; }
  .mobile-fab-new-trade { bottom: calc(env(safe-area-inset-bottom, 0px) + 80px) !important; }
}

/* ── Phone: slimmer side menu ── */
@media (max-width: 820px) {
  .sidebar .sidebar__brand { padding-top: 14px !important; padding-bottom: 10px !important; }
  .sidebar .nav__item { padding: 7px 12px !important; gap: 11px !important; font-size: 13px !important; border-radius: 9px !important; min-height: 0 !important; }
  .sidebar .nav__icon, .sidebar .nav__item > svg { width: 17px !important; height: 17px !important; flex: none; }
  .sidebar .nav__icon svg { width: 17px !important; height: 17px !important; }
  .sidebar .nav__section { font-size: 9.5px !important; padding: 10px 12px 4px !important; }
  .sidebar .nav__count, .sidebar .nav__badge { font-size: 10.5px !important; padding: 1px 7px !important; }
  .sidebar .sidebar__footer .btn, .sidebar .btn--primary { padding-top: 9px !important; padding-bottom: 9px !important; font-size: 13px !important; }
  body:has(.sidebar.is-open) .mobile-fab-new-trade, body:has(.sidebar.is-open) .tjc-launcher { display: none !important; }
}

/* ── Phone: the side menu covers about half the screen at most ── */
@media (max-width: 1024px) {
  .sidebar { width: min(236px, 58vw) !important; }
}

/* ── Side menu backdrop: dim and blur the whole screen behind the menu, topbar included ── */
@media (max-width: 1024px) {
  .sidebar-backdrop.is-open {
    inset: 0 !important; left: 0 !important;
    z-index: 10010 !important;
    background: rgba(8, 9, 12, .42) !important;
    backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important;
  }
}

/* ── Phone navigation: bottom tab bar + More sheet (replaces the hamburger menu and the floating +) ── */
.m-tabs, .m-more { display: none; }
@media (max-width: 820px) {
  .m-tabs {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
    height: calc(62px + env(safe-area-inset-bottom, 0px)); padding: 0 6px env(safe-area-inset-bottom, 0px);
    background: var(--surface, #fff); border-top: 1px solid var(--border);
  }
  .m-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 100%; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; color: var(--text-3); font: 500 10.5px/1 "IBM Plex Sans", "IBM Plex Sans Thai", sans-serif; -webkit-tap-highlight-color: transparent; }
  .m-tab.is-active { color: var(--text-1); }
  .m-tab__plus { width: 50px; height: 50px; border-radius: 999px; background: var(--accent); color: var(--on-accent, #fff); display: grid; place-items: center; margin-top: -20px; box-shadow: 0 8px 20px rgba(0, 0, 0, .22); }
  .m-more:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 9500; background: rgba(8, 9, 12, .42); }
  .m-more__sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; overflow-y: auto; background: var(--surface, #fff); color: var(--text-1); border-radius: 24px 24px 0 0; padding: 10px 16px calc(24px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -20px 50px rgba(0, 0, 0, .18); animation: mMoreUp .26s cubic-bezier(.2, .8, .2, 1); }
  @keyframes mMoreUp { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
  .m-more__grip { width: 40px; height: 4px; border-radius: 99px; background: var(--border); margin: 0 auto 10px; }
  .m-more__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
  .m-more__head b { font: 800 20px "Bricolage Grotesque", sans-serif; letter-spacing: -.02em; }
  .m-more__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 8px; }
  .m-more__item { display: flex; flex-direction: column; align-items: center; gap: 7px; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; color: var(--text-1); font-family: inherit; }
  .m-more__ico { width: 54px; height: 54px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface-2, transparent); display: grid; place-items: center; color: var(--text-1); }
  .m-more__ico svg { width: 22px; height: 22px; }
  .m-more__lab { font: 500 11.5px/1.2 "IBM Plex Sans", "IBM Plex Sans Thai", sans-serif; text-align: center; }
  @media (prefers-reduced-motion: reduce) { .m-more__sheet { animation: none; } }

  .mobile-fab-new-trade, .topbar__menu { display: none !important; }            /* the tab bar does both jobs */
  .tjc-launcher { bottom: calc(env(safe-area-inset-bottom, 0px) + 76px) !important; right: 14px !important; width: 46px !important; height: 46px !important; }
  html[data-theme] main.main { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important; }
  body:has(.modal-backdrop:not([hidden])) .m-tabs, body:has(.modal-backdrop:not([hidden])) .tjc-launcher { display: none !important; }
  html[data-theme] .view__header .view__actions { flex-wrap: wrap !important; gap: 8px !important; }
}

/* ── Phone dashboard, as designed ("Mobile 1 - Home") ── */
.cal-mobile-sum, .m-addwidgets { display: none; }
@media (max-width: 640px) {
  /* greeting: small line, then the name */
  html[data-theme] #view-dashboard .view__eyebrow, html[data-theme] #view-dashboard .view__subtitle { display: none; }
  html[data-theme] #dashGreeting .greet__hi { display: block; font: 400 12px/1.3 "IBM Plex Sans", "IBM Plex Sans Thai", sans-serif; color: var(--text-3); letter-spacing: 0; }
  html[data-theme] #dashGreeting .greet__name { display: block; font-size: 24px; line-height: 1.15; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-theme] #view-dashboard .view__header { gap: 12px; margin-bottom: 14px; }

  /* range and tools: one row that scrolls sideways */
  html[data-theme] #view-dashboard .view__header .view__actions { flex-wrap: wrap !important; gap: 8px !important; }
  html[data-theme] #view-dashboard .view__actions .btn, html[data-theme] #view-dashboard .view__actions .seg { min-height: 36px; }

  /* calendar card: label, big month P&L, meta; arrows on the right; view pills above the grid */
  html[data-theme] .calendar-card { display: flex; flex-direction: column; padding: 16px 14px 14px !important; border-radius: 20px !important; }
  html[data-theme] .calendar-card > .card__head { order: 1; display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 10px !important; }
  html[data-theme] .calendar-card .card__title { font: 400 12px/1.3 "IBM Plex Sans", "IBM Plex Sans Thai", sans-serif !important; color: var(--text-3); letter-spacing: 0; }
  html[data-theme] .calendar-card #calendarSubtitle { display: none; }
  .cal-mobile-sum { display: block; }
  .cal-mpnl { font: 500 30px/1.1 "IBM Plex Mono", ui-monospace, monospace; margin-top: 4px; color: var(--text-1); }
  .cal-mpnl.is-pos { color: var(--win); }
  .cal-mpnl.is-neg { color: var(--loss); }
  .cal-mmeta { font-size: 12px; color: var(--text-3); margin-top: 4px; }
  html[data-theme] .calendar-card .cal-toolbar { display: flex !important; flex-wrap: nowrap; align-items: center; gap: 6px !important; }
  html[data-theme] .calendar-card .cal-toolbar .icon-btn { width: 34px; height: 34px; border-radius: 999px; flex: none; }
  html[data-theme] .calendar-card .cal-month-title { font-size: 14px !important; white-space: nowrap; margin: 0 2px; }
  html[data-theme] .calendar-card #calToday { margin-left: auto; }
  html[data-theme] .calendar-card .cal-toolbar .btn { padding: 6px 12px !important; font-size: 12px !important; border-radius: 999px; min-height: 0; white-space: nowrap; }
  html[data-theme] .calendar-card .calendar-view-toggle { order: 2; justify-content: flex-start !important; margin: 0 0 10px !important; }
  html[data-theme] .calendar-card .segment-btn { padding: 6px 12px; font-size: 12px; }
  html[data-theme] .calendar-card .calendar-grid { order: 3; gap: 5px !important; }

  /* streaks: three quiet numbers */
  html[data-theme] .streak-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  html[data-theme] .streak { padding: 0; background: none; border: 0; text-align: left; }
  html[data-theme] .streak__label { font-size: 11px; letter-spacing: 0; text-transform: none; }
  html[data-theme] .streak__value { font: 500 22px "IBM Plex Mono", ui-monospace, monospace; margin-top: 4px; }

  .m-addwidgets { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; margin-top: 12px; border-radius: 14px; border: 1px dashed var(--border); background: none; color: var(--text-2); font: 500 13px "IBM Plex Sans", "IBM Plex Sans Thai", sans-serif; cursor: pointer; }
  html[data-theme] #view-dashboard .lo-editbtn { display: none !important; }   /* the dashed button below does this job on a phone */
}
@media (max-width: 640px) {
  html[data-theme] .calendar-card .cal-toolbar { flex-wrap: wrap !important; row-gap: 8px !important; }
  html[data-theme] .calendar-card .cal-month-title { flex: none; min-width: 0; }
}

/* ── Phone: Trades as cards ("Mobile 2 - Trades") ── */
.m-trade-chips { display: none; }
@media (max-width: 640px) {
  html[data-theme] #view-trades .view__eyebrow { display: none; }
  html[data-theme] #view-trades .view__header { flex-direction: row !important; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 12px; }
  html[data-theme] #view-trades .view__title { font-size: 24px !important; }
  html[data-theme] #view-trades .view__subtitle { margin: 0; }
  html[data-theme] #view-trades #tradesNewTrade { display: none; }             /* the + in the tab bar does this */
  html[data-theme] #view-trades .view__actions .btn { padding: 6px 12px !important; font-size: 12px; }
  html[data-theme] #view-trades > .card { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }

  .m-trade-chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 10px; padding: 0 16px; scrollbar-width: none; }
  .m-trade-chips::-webkit-scrollbar { display: none; }
  .m-trade-chips button { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface, #fff); color: var(--text-1); font: 400 12.5px "IBM Plex Sans", "IBM Plex Sans Thai", sans-serif; cursor: pointer; }
  .m-trade-chips button.is-active, .m-trade-chips button.is-on { background: var(--accent); color: var(--on-accent, #fff); border-color: var(--accent); font-weight: 600; }

  html[data-theme] #tradeFilters { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px !important; padding: 0 !important; margin-bottom: 12px; background: none !important; border: 0 !important; }
  html[data-theme] #tradeFilters .filter-group { display: none; min-width: 0; }
  html[data-theme] #tradeFilters .filter-group:first-child { display: block; grid-column: 1 / -1; }
  html[data-theme] #tradeFilters .filter-group:first-child .filter-label { display: none; }
  html[data-theme] #tradeFilters.is-open .filter-group { display: block; }
  html[data-theme] #tradeFilters .input, html[data-theme] #tradeFilters .select { width: 100%; height: 44px; border-radius: 14px; font-size: 16px; }

  html[data-theme] #view-trades .trade-table-wrap { overflow: visible !important; border: 0 !important; background: none !important; }
  html[data-theme] #tradeTable { min-width: 0 !important; width: 100%; display: block; border: 0; }
  html[data-theme] #tradeTable thead { display: none; }
  html[data-theme] #tradeTable tbody { display: flex; flex-direction: column; gap: 10px; }
  html[data-theme] #tradeTable tbody tr {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "dir sym pnl" "dir date r" "act act act";
    column-gap: 12px; row-gap: 2px; align-items: center; padding: 14px; cursor: pointer;
    background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 18px;
  }
  html[data-theme] #tradeTable tbody td { display: block; padding: 0 !important; border: 0 !important; background: none !important; white-space: normal; }
  html[data-theme] #tradeTable td.tc-x { display: none; }
  html[data-theme] #tradeTable td.tc-dir { grid-area: dir; }
  html[data-theme] #tradeTable td.tc-dir .badge { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 14px; font-weight: 700; padding: 0; }
  html[data-theme] #tradeTable td.tc-sym { grid-area: sym; font-size: 15px !important; }
  html[data-theme] #tradeTable td.tc-date { grid-area: date; font-size: 12px !important; color: var(--text-3); display: flex; gap: 6px; }
  html[data-theme] #tradeTable td.tc-date div { font-size: 12px !important; }
  html[data-theme] #tradeTable td.tc-pnl { grid-area: pnl; text-align: right; font: 500 15px "IBM Plex Mono", ui-monospace, monospace !important; }
  html[data-theme] #tradeTable td.tc-r { grid-area: r; text-align: right; font-size: 11.5px !important; }
  html[data-theme] #tradeTable td.tc-act { grid-area: act; display: none; margin-top: 10px; padding-top: 10px !important; border-top: 1px solid var(--border) !important; }
  html[data-theme] #tradeTable tr.is-open td.tc-act { display: block; }
  html[data-theme] #tradeTable td.tc-act .row-actions { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 8px !important; opacity: 1 !important; }
  html[data-theme] #tradeTable td.tc-act .row-actions button { width: auto !important; height: 40px !important; border-radius: 999px; border: 1px solid var(--border); background: none; display: grid; place-items: center; }
  html[data-theme] #tradeTable td.tc-act .row-actions button svg { width: 16px; height: 16px; }
}

/* ── Phone: Analytics ("Mobile 3 - Analytics") ── */
@media (max-width: 640px) {
  html[data-theme] #view-analytics .view__eyebrow, html[data-theme] #view-analytics .view__subtitle { display: none; }
  html[data-theme] #view-analytics .view__title { font-size: 24px !important; }
  html[data-theme] #view-analytics .view__actions { flex-wrap: nowrap !important; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; max-width: 100vw; }
  html[data-theme] #view-analytics .view__actions::-webkit-scrollbar { display: none; }
  html[data-theme] #analyticsTabSeg { display: flex; flex-wrap: nowrap; gap: 8px; background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
  html[data-theme] #analyticsTabSeg .seg__btn { flex: none; white-space: nowrap; padding: 8px 14px !important; border-radius: 999px !important; border: 1px solid var(--border); background: var(--surface, #fff); color: var(--text-1); font-size: 12.5px !important; }
  html[data-theme] #analyticsTabSeg .seg__btn.is-active { background: var(--accent); color: var(--on-accent, #fff); border-color: var(--accent); font-weight: 600; }
  html[data-theme] #view-analytics .card { border-radius: 18px; }
  html[data-theme] #view-analytics .card__head { flex-direction: column; align-items: flex-start; gap: 10px; }
  html[data-theme] #durationSummaryStats { gap: 16px !important; flex-wrap: wrap; }
  html[data-theme] #view-analytics .lo-editbtn { flex: none; }
}

/* ── Phone: Log trade as a bottom sheet ("Mobile 5 - Log trade sheet") ── */
@media (max-width: 640px) {
  #tradeModal.modal-backdrop { align-items: flex-end !important; justify-content: stretch !important; background: rgba(8, 9, 12, .42) !important; }
  #tradeModal .modal { width: 100vw !important; height: calc(100vh - 64px) !important; height: calc(100dvh - 64px) !important; max-height: none !important; border-radius: 26px 26px 0 0 !important; border-left: 0 !important; box-shadow: 0 -20px 50px rgba(0, 0, 0, .18) !important; animation: tmSheetUp .28s cubic-bezier(.2, .8, .2, 1) !important; }
  @keyframes tmSheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  #tradeModal .modal__head { position: relative; padding: 24px 16px 8px !important; align-items: center; }
  #tradeModal .modal__head::before { content: ""; position: absolute; top: 10px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 99px; background: var(--border); }
  #tradeModal .modal__title { font-size: 20px !important; }
  #tradeModal #tradeForm { padding: 6px 16px 20px !important; gap: 14px !important; }
  #tradeModal .tf-main > .tf-grid--2 { grid-template-columns: minmax(0, 1fr) !important; gap: 14px; }
  #tradeModal .tf-main > .tf-grid--3 { gap: 10px; }
  #tradeModal .input, #tradeModal .select, #tradeModal .textarea { font-size: 16px !important; border-radius: 14px !important; }
  #tradeModal .tf-main > .tf-grid .input, #tradeModal .tf-main > .tf-grid .select { height: 50px !important; }
  #tradeModal .toggle-group { height: 50px; border-radius: 14px !important; padding: 4px !important; }
  #tradeModal .toggle-btn { border-radius: 10px !important; font-size: 14px !important; }
  #tradeModal .modal__foot { padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important; }
  #tradeModal .modal__foot-right { width: 100%; }
  #tradeModal .modal__foot #saveTradeBtn { width: 100%; height: 52px; justify-content: center; font-size: 15px; }
  @media (prefers-reduced-motion: reduce) { #tradeModal .modal { animation: none !important; } }
}

/* ── Phone top bar ("Part - top bar"): logo, portfolio pill, bell, avatar ── */
.m-toplogo { display: none; }
.trade-drawer__mfoot { display: none; }
@media (max-width: 820px) {
  .m-toplogo { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; overflow: hidden; }
  .m-toplogo img { width: 30px; height: 30px; display: block; border-radius: 9px; }
  html[data-theme] .topbar { gap: 10px !important; padding: 0 16px !important; min-height: 56px; }
  html[data-theme] .topbar .topbar__search, html[data-theme] .topbar .ticker-strip,
  html[data-theme] .topbar #quickThemeBtn, html[data-theme] .topbar #exportBtn, html[data-theme] .topbar #commandPaletteBtn,
  html[data-theme] .topbar #langBtn, html[data-theme] .topbar #topLogTrade { display: none !important; }
  html[data-theme] .topbar .topbar__actions { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px !important; margin: 0 !important; }
  html[data-theme] .topbar .acc-switch--topbar { flex: 1; min-width: 0; height: 36px; border-radius: 999px !important; padding: 0 12px !important; justify-content: flex-start; }
  html[data-theme] .topbar .acc-switch--topbar .acc-switch__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font-size: 13px; }
  html[data-theme] .topbar .notif-btn, html[data-theme] .topbar .icon-btn { width: 36px; height: 36px; border-radius: 999px; flex: none; }
  html[data-theme] .topbar .avatar, html[data-theme] .topbar [class*="avatar"]:not([class*="menu"]) { flex: none; }
}

/* ── Phone: trade detail as a bottom sheet ("Mobile 7 - Trade detail") ── */
@media (max-width: 640px) {
  html[data-theme] .trade-drawer { align-items: flex-end !important; justify-content: stretch !important; }
  html[data-theme] .trade-drawer__content {
    position: fixed !important; left: 0; right: 0; bottom: 0; top: auto; width: 100vw !important; max-width: none !important;
    height: calc(100vh - 96px) !important; height: calc(100dvh - 96px) !important;
    border-left: 0 !important; border-radius: 26px 26px 0 0 !important; overflow: hidden;
    transform: translateY(100%) !important; box-shadow: 0 -20px 50px rgba(0, 0, 0, .18) !important;
  }
  html[data-theme] .trade-drawer.is-open .trade-drawer__content { transform: none !important; }
  html[data-theme] .trade-drawer__header { position: relative; padding: 24px 16px 10px !important; border-bottom: 0 !important; }
  html[data-theme] .trade-drawer__header::before { content: ""; position: absolute; top: 10px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 99px; background: var(--border); }
  html[data-theme] .trade-drawer__title { font: 800 22px "Bricolage Grotesque", sans-serif !important; letter-spacing: -.02em; }
  html[data-theme] .trade-drawer__tabs { padding: 0 16px !important; gap: 8px; overflow-x: auto; }
  html[data-theme] .trade-drawer__tab { white-space: nowrap; font-size: 12.5px; }
  html[data-theme] .trade-drawer__body { padding: 14px 16px !important; flex: 1; min-height: 0; overflow-y: auto; }
  html[data-theme] .drawer-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .trade-drawer__mfoot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); background: var(--surface, #fff); }
  .trade-drawer__mfoot .btn { height: 48px; border-radius: 999px !important; justify-content: center; font-size: 14px; font-weight: 600; }
  .trade-drawer__mfoot .btn.is-danger { color: var(--loss); border-color: color-mix(in srgb, var(--loss) 35%, transparent); }
  body:has(.trade-drawer.is-open) .m-tabs, body:has(.trade-drawer.is-open) .tjc-launcher { display: none !important; }
}
@media (max-width: 820px) { html[data-theme] .topbar .acc-switch--topbar .acc-switch__name { display: block !important; } html[data-theme] .topbar .acc-switch--topbar .acc-switch__caret { margin-left: auto; flex: none; } }
@media (max-width: 640px) {
  #tradeModal .tf-main > .tf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  #tradeModal .tf-main > .tf-grid--3 .input { padding: 0 10px; }
  #tradeModal .dropzone__hint { display: flex !important; flex-direction: row !important; align-items: center; gap: 12px; text-align: left; font-size: 13px; }
  #tradeModal .dropzone { padding: 12px 14px !important; }
}

/* Phone top bar: make the portfolio pill fill the space between logo and bell */
@media (max-width: 820px) {
  html[data-theme] body .topbar { display: flex !important; align-items: center !important; justify-content: flex-start !important; }
  html[data-theme] body .topbar .topbar__actions { flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; justify-content: flex-start !important; }
  html[data-theme] body .topbar .acc-switch--topbar { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; }
  /* dashboard: the "Add widgets" button belongs at the bottom of the page */
  html[data-theme] #view-dashboard.is-active { display: flex !important; flex-direction: column; }
  html[data-theme] #view-dashboard .m-addwidgets { order: 99; margin-top: 4px; }
}

/* ══ Pricing page (design: "Pricing - desktop" / "Pricing - phone") ══ */
html[data-theme] #view-pricing .view__header { align-items: flex-end; gap: 24px; margin-bottom: 36px; }
html[data-theme] #view-pricing .view__eyebrow { font: 500 12px "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
html[data-theme] #view-pricing .view__title { font: 800 56px/1 "Bricolage Grotesque", "IBM Plex Sans Thai", sans-serif !important; letter-spacing: -.04em; margin-top: 10px; }
html[data-theme] #view-pricing .view__subtitle { font-size: 16px !important; line-height: 1.55; color: var(--text-2); margin-top: 14px; max-width: 560px; }
html[data-theme] #pricingCycleSeg { background: var(--surface, #fff) !important; border: 1px solid var(--border) !important; border-radius: 999px !important; padding: 4px !important; gap: 4px; box-shadow: none !important; }
html[data-theme] #pricingCycleSeg .seg__btn { height: 40px; padding: 0 18px !important; border-radius: 999px !important; font-size: 13.5px !important; font-weight: 600; background: transparent; color: var(--text-2); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
html[data-theme] #pricingCycleSeg .seg__btn.is-active { background: var(--accent) !important; color: var(--on-accent, #fff) !important; }
html[data-theme] #pricingCycleSeg .seg__btn-badge { background: none !important; border: 0 !important; padding: 0 !important; color: inherit !important; font-size: 11px; font-weight: 500; opacity: .7; }

html[data-theme] #pricingGrid.pricing-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; gap: 20px !important; align-items: stretch; max-width: 1120px; margin: 0 auto; }
html[data-theme] #pricingGrid .pricing-tier {
  position: relative; display: flex !important; flex-direction: column; gap: 22px; padding: 32px 28px !important;
  background: var(--surface, #fff) !important; color: var(--text-1) !important; border: 1px solid var(--border) !important; border-radius: 28px !important;
  box-shadow: none !important; transform: none !important; overflow: visible;
}
html[data-theme] #pricingGrid .pricing-tier::before, html[data-theme] #pricingGrid .pricing-tier::after { display: none !important; }
html[data-theme] #pricingGrid .pricing-tier.is-recommended { background: var(--accent) !important; color: var(--on-accent, #fff) !important; border-color: var(--accent) !important; }
html[data-theme] #pricingGrid .pricing-tier.is-current:not(.is-recommended) { border-color: var(--text-1) !important; }
html[data-theme] #pricingGrid .pt-ribbon { position: absolute !important; top: 22px; right: 22px; left: auto; transform: none !important; padding: 5px 12px !important; border-radius: 999px !important; background: var(--on-accent, #fff) !important; color: var(--accent) !important; font: 600 11.5px "IBM Plex Sans", "IBM Plex Sans Thai", sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important; }
html[data-theme] #pricingGrid .pt-head { order: 1; margin: 0 !important; padding: 0 !important; border: 0 !important; }
html[data-theme] #pricingGrid .pt-name { font: 800 26px "Bricolage Grotesque", sans-serif !important; letter-spacing: -.02em; color: inherit !important; margin: 0; }
html[data-theme] #pricingGrid .pt-tagline { font-size: 14px !important; line-height: 1.5; margin: 6px 0 0; min-height: 42px; color: inherit !important; opacity: .65; }
html[data-theme] #pricingGrid .pt-price { order: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 !important; padding: 0 !important; border: 0 !important; min-height: 50px; }
html[data-theme] #pricingGrid .pt-amount { font: 500 46px/1 "IBM Plex Mono", ui-monospace, monospace !important; letter-spacing: -.03em; color: inherit !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
html[data-theme] #pricingGrid .pt-price--unavailable .pt-amount { font: 400 14px/1.4 "IBM Plex Sans", "IBM Plex Sans Thai", sans-serif !important; letter-spacing: 0; opacity: .65; }
html[data-theme] #pricingGrid .pt-period { font-size: 14px !important; color: inherit !important; opacity: .65; }
html[data-theme] #pricingGrid .pt-cta { order: 3; width: 100%; height: 50px; border-radius: 999px !important; font-size: 15px !important; font-weight: 600; justify-content: center; margin: 0 !important; box-shadow: none !important; }
html[data-theme] #pricingGrid .pt-cta.btn--ghost { background: transparent !important; color: var(--text-1) !important; border: 1px solid var(--border) !important; }
html[data-theme] #pricingGrid .pt-cta.btn--primary { background: var(--accent) !important; color: var(--on-accent, #fff) !important; border: 1px solid var(--accent) !important; }
html[data-theme] #pricingGrid .is-recommended .pt-cta { background: var(--on-accent, #fff) !important; color: var(--accent) !important; border-color: var(--on-accent, #fff) !important; }
html[data-theme] #pricingGrid .pt-cta[disabled] { opacity: .55; }
html[data-theme] #pricingGrid .pt-bullets { order: 4; list-style: none; margin: 0 !important; padding: 22px 0 0 !important; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
html[data-theme] #pricingGrid .pt-bullets li { display: flex; gap: 10px; font-size: 14px !important; line-height: 1.45; color: inherit !important; margin: 0; padding: 0; }
html[data-theme] #pricingGrid .pt-bullets svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: inherit !important; stroke: currentColor; }

.promo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; max-width: 1120px; margin: 28px auto; padding: 18px 22px; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 20px; }
.promo-row__title { font-size: 15px; font-weight: 600; color: var(--text-1); }
.promo-row__sub { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.promo-row__form { display: flex; gap: 8px; flex: 1; min-width: 260px; max-width: 420px; }
.promo-row__form .input { flex: 1; min-width: 0; height: 46px; border-radius: 999px !important; padding: 0 18px; font: 500 14px "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.promo-row__form .btn { height: 46px; padding: 0 22px; border-radius: 999px !important; white-space: nowrap; }
.promo-row__msg { flex-basis: 100%; font-size: 12px; font-weight: 600; min-height: 0; }
.promo-row__msg:empty { display: none; }
html[data-theme] #pricingCompare { max-width: 1120px; margin-left: auto; margin-right: auto; }
html[data-theme] #pricingCompare .price-compare__title { font: 800 30px "Bricolage Grotesque", "IBM Plex Sans Thai", sans-serif !important; letter-spacing: -.03em; }

.m-plan-tabs { display: none; }
@media (max-width: 640px) {
  html[data-theme] #view-pricing .view__eyebrow { display: none; }
  html[data-theme] #view-pricing .view__header { margin-bottom: 14px; gap: 14px; }
  html[data-theme] #view-pricing .view__title { font-size: 30px !important; margin-top: 0; }
  html[data-theme] #view-pricing .view__subtitle { font-size: 13.5px !important; margin-top: 6px; }
  html[data-theme] #view-pricing .view__actions { width: 100%; }
  html[data-theme] #pricingCycleSeg { display: grid !important; grid-template-columns: repeat(3, 1fr); width: 100%; }
  html[data-theme] #pricingCycleSeg .seg__btn { height: 38px; padding: 0 6px !important; font-size: 12.5px !important; justify-content: center; }
  html[data-theme] #pricingCycleSeg .seg__btn-badge { display: none; }
  .m-plan-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
  .m-plan-tabs button { border-radius: 16px; border: 1px solid var(--border); background: var(--surface, #fff); color: var(--text-1); padding: 10px 6px; text-align: center; cursor: pointer; font-family: inherit; }
  .m-plan-tabs button.is-active { background: var(--accent); color: var(--on-accent, #fff); border-color: var(--accent); }
  .m-plan-tabs__n { display: block; font-size: 14px; font-weight: 600; }
  .m-plan-tabs__p { display: block; font: 500 11.5px "IBM Plex Mono", ui-monospace, monospace; margin-top: 3px; opacity: .75; }
  html[data-theme] #pricingGrid.pricing-grid { grid-template-columns: minmax(0, 1fr) !important; }
  html[data-theme] #pricingGrid .pricing-tier { display: none !important; padding: 22px 20px 20px !important; border-radius: 24px !important; gap: 16px; }
  html[data-theme] #pricingGrid .pricing-tier.m-on { display: flex !important; }
  html[data-theme] #pricingGrid .pt-amount { font-size: 40px !important; }
  html[data-theme] #pricingGrid .pt-tagline { min-height: 0; font-size: 13.5px !important; }
  html[data-theme] #pricingGrid .pt-cta { height: 54px; font-size: 15.5px !important; }
  .promo-row { padding: 14px; margin: 16px 0; }
  .promo-row__form { min-width: 0; max-width: none; flex-basis: 100%; }
  .promo-row__form .input { font-size: 16px; }
  html[data-theme] #pricingCompare { overflow-x: auto; }
}

/* ══ Settings page (design: "Settings - desktop" / "Settings - phone list" / "phone detail") ══ */
.set-back { display: none; }
.set-nav { display: none; }

html[data-theme] #view-settings.is-active {
  display: grid !important; grid-template-columns: 220px minmax(0, 1fr); column-gap: 40px; row-gap: 20px; align-items: start; max-width: 1160px; margin: 0 auto;
}
html[data-theme] #view-settings > .view__header { grid-column: 1 / -1; margin-bottom: 12px; }
html[data-theme] #view-settings .view__eyebrow { font: 500 12px "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
html[data-theme] #view-settings .view__title { font: 800 48px/1 "Bricolage Grotesque", "IBM Plex Sans Thai", sans-serif !important; letter-spacing: -.04em; margin-top: 10px; }
html[data-theme] #view-settings .view__subtitle { display: none; }

.set-nav { display: flex; flex-direction: column; gap: 2px; grid-column: 1; grid-row: 2 / span 40; position: sticky; top: 84px; align-self: start; }
.set-link { display: block; padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 500; color: var(--text-2); text-decoration: none; }
.set-link:hover { color: var(--text-1); }
.set-link.is-active { background: var(--surface, #fff); color: var(--text-1); font-weight: 600; }

html[data-theme] #view-settings > .card, html[data-theme] #view-settings .grid-1-1 > .card {
  grid-column: 2; margin: 0 !important; padding: 26px 28px !important; border-radius: 22px !important; display: flex; flex-direction: column; gap: 20px;
  background: var(--surface, #fff); border: 1px solid var(--border); box-shadow: none; scroll-margin-top: 90px;
}
html[data-theme] #view-settings .grid-1-1 { display: contents !important; }
html[data-theme] #profileCard { order: 1; } html[data-theme] #mfaCard { order: 2; } html[data-theme] #billingCard { order: 3; }
html[data-theme] #setDefaults { order: 4; } html[data-theme] #setAlerts { order: 5; } html[data-theme] #setData { order: 6; }
html[data-theme] #setTags { order: 7; } html[data-theme] #setTheme { order: 8; } html[data-theme] #tutorialCard { order: 9; } html[data-theme] #setKeys { order: 10; }
html[data-theme] #view-settings .card__head { margin: 0 !important; }
html[data-theme] #view-settings .card__title { font: 800 20px "Bricolage Grotesque", "IBM Plex Sans Thai", sans-serif !important; letter-spacing: -.02em; }
html[data-theme] #view-settings .card__sub, html[data-theme] #view-settings .muted { font-size: 13px; color: var(--text-3); margin: 0 !important; }
html[data-theme] #view-settings .form-group { margin: 0; display: flex; flex-direction: column; gap: 6px; }
html[data-theme] #view-settings .form-label { font: 500 12.5px/1.2 "IBM Plex Sans", "IBM Plex Sans Thai", sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--text-2) !important; margin: 0; }
html[data-theme] #view-settings .input:not(.input--sm), html[data-theme] #view-settings .select { height: 46px; border-radius: 12px !important; padding: 0 14px; font-size: 14px; box-shadow: none; }
html[data-theme] #view-settings .btn { height: 44px; padding: 0 22px; border-radius: 999px !important; font-size: 14px; font-weight: 600; box-shadow: none; }
html[data-theme] #view-settings .btn--sm { height: 36px; padding: 0 16px; }
html[data-theme] #view-settings .btn--danger { background: transparent !important; color: var(--loss) !important; border: 1px solid color-mix(in srgb, var(--loss) 35%, transparent) !important; }
html[data-theme] #view-settings .form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }
html[data-theme] #profileDelete { margin-left: auto; }

html[data-theme] #view-settings .profile-row { display: flex; gap: 16px; align-items: flex-start; margin: 0; }
html[data-theme] #view-settings .profile-row > div { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
html[data-theme] #view-settings .profile-avatar { width: 56px; height: 56px; border-radius: 999px; background: var(--accent) !important; color: var(--on-accent, #fff) !important; font-weight: 600; flex: none; }
html[data-theme] #view-settings .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; }
html[data-theme] #setDefaults { }
html[data-theme] #setDefaults .form-group { }

/* alerts: switches instead of check boxes */
html[data-theme] #setAlerts .form-group:has(input[type="checkbox"]) { border-top: 1px solid var(--border); padding-top: 14px; }
html[data-theme] #setAlerts .form-group:has(input[type="checkbox"]):first-of-type { border-top: 0; padding-top: 0; }
html[data-theme] #setAlerts label:has(input[type="checkbox"]) { display: flex !important; flex-direction: row-reverse; align-items: center !important; justify-content: space-between; gap: 16px !important; font-size: 14.5px !important; line-height: 1.4; color: var(--text-1) !important; }
html[data-theme] #setAlerts input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 46px !important; height: 28px; margin: 0 !important; border-radius: 999px; background: var(--border-strong, #d6d4ce); position: relative; flex: none; cursor: pointer; transition: background .15s; border: 0; }
html[data-theme] #setAlerts input[type="checkbox"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px; background: #fff; transition: transform .15s; }
html[data-theme] #setAlerts input[type="checkbox"]:checked { background: var(--accent); }
html[data-theme] #setAlerts input[type="checkbox"]:checked::after { transform: translateX(18px); }
html[data-theme] #setAlerts .form-hint { font-weight: 400; color: var(--text-3); }

/* data: backup buttons, then the wipe box on its own */
.set-wipe { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--loss) 30%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--loss) 6%, transparent); }
.set-wipe b { display: block; font-size: 14.5px; font-weight: 600; color: var(--loss); }
.set-wipe span { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.set-wipe .btn { flex: none; }

html[data-theme] #setTags .tag-add-row { display: flex; gap: 10px; align-items: center; margin: 0; }
html[data-theme] #setTags .tag-add-row .input { height: 40px; border-radius: 999px !important; }
html[data-theme] #setTags .tag-add-row .btn { height: 40px; }
html[data-theme] #setKeys .shortcut-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
html[data-theme] #setKeys .shortcut-grid > div { justify-content: space-between; flex-direction: row-reverse; padding: 10px 0; border-top: 1px solid var(--border); font-size: 14px; }
html[data-theme] #setKeys kbd { font: 500 12px "IBM Plex Mono", ui-monospace, monospace; padding: 4px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2, transparent); }

/* phone */
@media (max-width: 640px) {
  html[data-theme] #view-settings.is-active { display: flex !important; flex-direction: column; gap: 14px; }
  html[data-theme] #view-settings .view__eyebrow, html[data-theme] #view-settings .view__subtitle { display: none; }
  html[data-theme] #view-settings .view__title { font-size: 26px !important; margin: 0; }
  html[data-theme] #view-settings > .view__header { margin: 0; }
  .set-back { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface, #fff); color: var(--text-1); font: 600 14px "IBM Plex Sans", sans-serif; cursor: pointer; }
  .set-back[hidden] { display: none; }
  .set-nav { position: static; display: flex; flex-direction: column; gap: 18px; order: 0; }
  .set-link { display: none; }
  html[data-theme] #view-settings > .card, html[data-theme] #view-settings .grid-1-1 > .card { display: none !important; background: none; border: 0; padding: 0 !important; gap: 16px; }
  html[data-theme] #view-settings > .card.set-on, html[data-theme] #view-settings .grid-1-1 > .card.set-on { display: flex !important; }
  html[data-theme] #view-settings[data-sset]:not([data-sset=""]) .set-nav { display: none; }
  html[data-theme] #view-settings .profile-row > div, html[data-theme] #view-settings .form-row { grid-template-columns: 1fr; }
  html[data-theme] #view-settings .profile-row { flex-direction: column; }
  html[data-theme] #view-settings .input:not(.input--sm), html[data-theme] #view-settings .select { height: 50px; border-radius: 14px !important; font-size: 16px; }
  html[data-theme] #view-settings .btn { height: 48px; justify-content: center; }
  html[data-theme] #view-settings .form-actions .btn, html[data-theme] #saveSettings, html[data-theme] #testDiscordWebhook { width: 100%; }
  html[data-theme] #saveSettings, html[data-theme] #profileSave { height: 52px; font-size: 15px; }
  html[data-theme] #setAlerts .form-group:has(input[type="checkbox"]) { background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; }
  html[data-theme] #setKeys .shortcut-grid { grid-template-columns: 1fr; }
  .set-wipe { flex-direction: column; align-items: stretch; }
  html[data-theme] #setTags .tag-add-row { flex-wrap: wrap; }

  .set-who { display: flex; align-items: center; gap: 14px; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 20px; padding: 14px; text-decoration: none; color: var(--text-1); }
  .set-who__av { width: 52px; height: 52px; border-radius: 999px; background: var(--accent); color: var(--on-accent, #fff); display: grid; place-items: center; font-weight: 600; flex: none; }
  .set-who__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .set-who__tx b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .set-who__tx small { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
  .set-g__t { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 0 4px 8px; }
  .set-g__list { background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; }
  .set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 54px; padding: 0 16px; background: none; border: 0; border-top: 1px solid var(--border); color: var(--text-1); font: 500 15px "IBM Plex Sans", "IBM Plex Sans Thai", sans-serif; text-align: left; cursor: pointer; }
  .set-row:first-child { border-top: 0; }
  .set-row svg { color: var(--text-4, #c3c1ba); flex: none; }
  .set-row.is-danger { color: var(--loss); }
  .set-logout { height: 50px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface, #fff); color: var(--text-1); font: 600 15px "IBM Plex Sans", sans-serif; cursor: pointer; }
}
@media (max-width: 640px) {
  html[data-theme] #view-settings.is-active { width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box; }
  html[data-theme] #view-settings .set-nav, html[data-theme] #view-settings > .card, html[data-theme] #view-settings .grid-1-1 > .card, html[data-theme] #view-settings > .view__header { width: 100%; max-width: none; box-sizing: border-box; grid-column: auto; }
  html[data-theme] #view-settings .view__header > div { width: 100%; }
}

/* ══ Settings, phone: every sub page as designed (S* boards) ══ */
.set-save-alt { display: none; }
@media (max-width: 640px) {
  /* header: round back button + the page name, like the "SHead" part */
  .set-back { gap: 12px !important; height: auto !important; padding: 0 !important; border: 0 !important; background: none !important; font: 800 18px "Bricolage Grotesque", "IBM Plex Sans Thai", sans-serif !important; letter-spacing: -.02em; color: var(--text-1); }
  .set-back svg { box-sizing: content-box; width: 16px; height: 16px; padding: 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface, #fff); flex: none; }
  html[data-theme] #view-settings[data-sset]:not([data-sset=""]) > .view__header { margin: 0; }

  /* the card's own title repeats the header: hide it, keep descriptions */
  html[data-theme] #view-settings .set-on .card__head .card__title { display: none; }
  html[data-theme] #view-settings .set-on .card__head:not(:has(.card__sub)) { display: none; }
  html[data-theme] #view-settings .set-on .card__sub { font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
  html[data-theme] #view-settings .set-on > p.muted { font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
  html[data-theme] #view-settings .set-on { gap: 16px; }

  /* sticky save bar above the tab bar */
  html[data-theme] #profileSave, html[data-theme] #saveSettings, html[data-theme] #alertsSaveBtn {
    position: sticky; bottom: calc(74px + env(safe-area-inset-bottom, 0px)); z-index: 5; width: 100%; height: 52px; font-size: 15px; background: var(--accent) !important; color: var(--on-accent, #fff) !important; border: 0 !important; margin-top: 8px;
    box-shadow: 0 0 0 12px var(--bg, #fbfaf8) !important;
  }
  .set-save-alt { display: inline-flex; justify-content: center; align-items: center; }

  /* 1. Profile & password */
  html[data-theme] #profileCard .form-actions { display: contents; }
  html[data-theme] #profileCard #profileLogout, html[data-theme] #profileCard #profileDelete { order: 5; width: 100%; margin: 0; }
  html[data-theme] #profileCard #profileDelete { order: 6; }
  html[data-theme] #profileCard #profileSave { order: 99; }
  html[data-theme] #profileCard .profile-row { flex-direction: column; align-items: stretch; gap: 16px; }
  html[data-theme] #profileCard .profile-row > div { display: flex !important; flex-direction: column; gap: 16px; width: 100%; }
  html[data-theme] #profileCard .profile-avatar { width: 64px; height: 64px; font-size: 20px; }
  html[data-theme] #profileCard #profilePasswordRow { display: flex; flex-direction: column; gap: 16px; }
  html[data-theme] #profileCard #profilePasswordRow::before { content: "Change password"; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-top: 8px; }
  html[data-theme] #profileEmail:disabled { background: var(--surface-2, #f4f2ee); color: var(--text-3); }

  /* 2 / 3. Two-factor and billing keep a card */
  html[data-theme] #mfaCard.set-on, html[data-theme] #billingCard.set-on { background: none !important; padding: 0 !important; }
  html[data-theme] #mfaStatusText { background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 20px; padding: 20px; font-size: 14px !important; line-height: 1.55; color: var(--text-2) !important; margin: 0 !important; }
  html[data-theme] #mfaCard .btn { width: 100%; height: 52px; }
  html[data-theme] #mfaCard #mfaEnableBtn { background: var(--accent) !important; color: var(--on-accent, #fff) !important; border: 0 !important; }
  html[data-theme] #mfaCard #mfaDisableBtn { background: var(--surface, #fff) !important; color: var(--text-2) !important; border: 1px solid var(--border) !important; height: 48px; }
  html[data-theme] #billingBody { display: flex; flex-direction: column; gap: 14px; }
  html[data-theme] #billingBody .billing__grid { display: flex; flex-direction: column; gap: 0; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; }
  html[data-theme] #billingBody .billing__cell { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border: 0; border-top: 1px solid var(--border); background: none; }
  html[data-theme] #billingBody .billing__cell:first-child { flex-direction: column; align-items: flex-start; gap: 6px; border-top: 0; background: var(--accent); color: var(--on-accent, #fff); padding: 22px 20px; }
  html[data-theme] #billingBody .billing__cell:first-child .billing__label { color: inherit; opacity: .65; }
  html[data-theme] #billingBody .billing__cell:first-child .billing__plan { font: 800 28px "Bricolage Grotesque", sans-serif; letter-spacing: -.02em; color: inherit !important; background: none !important; border: 0 !important; padding: 0 !important; }
  html[data-theme] #billingBody .billing__label { font-size: 13px; color: var(--text-3); margin: 0; }
  html[data-theme] #billingBody .billing__value { font-size: 14px; color: var(--text-1); }
  html[data-theme] #billingBody .btn { width: 100%; height: 50px; }

  /* 4 / 5. Defaults and alerts */
  html[data-theme] #setAlerts.set-on .form-group:has(input[type="checkbox"]) { padding: 16px; }
  html[data-theme] #setAlerts.set-on #testDiscordWebhook { height: 48px; }

  /* 6. Data and backup: rows, then the wipe box */
  html[data-theme] #setData.set-on .form-actions { display: flex; flex-direction: column; gap: 0; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; align-items: stretch; }
  html[data-theme] #setData.set-on .form-actions .btn { width: 100%; height: 56px; border: 0 !important; border-top: 1px solid var(--border) !important; border-radius: 0 !important; background: none !important; justify-content: space-between; text-align: left; font-size: 15px; font-weight: 500; color: var(--text-1) !important; padding: 0 16px; }
  html[data-theme] #setData.set-on .form-actions .btn:first-child { border-top: 0 !important; }
  html[data-theme] #setData.set-on .form-actions .btn::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--text-4, #c3c1ba); border-top: 2px solid var(--text-4, #c3c1ba); transform: rotate(45deg); margin-right: 4px; flex: none; }
  html[data-theme] #setData.set-on #storageUsage { background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; font-size: 13px !important; margin: 0 !important; }
  html[data-theme] #setData.set-on .set-wipe { margin-top: 6px; }

  /* 7. Tag library: add row, then one row per tag */
  html[data-theme] #setTags.set-on .tag-add-row { display: flex; flex-wrap: wrap; gap: 8px; }
  html[data-theme] #setTags.set-on .tag-add-row .input { flex: 1; min-width: 0; height: 50px; border-radius: 14px !important; font-size: 16px; }
  html[data-theme] #setTags.set-on .tag-add-row input[type="color"] { width: 50px; height: 50px; border-radius: 14px; padding: 6px; flex: none; }
  html[data-theme] #setTags.set-on .tag-add-row .btn { flex-basis: 100%; height: 48px; background: var(--accent) !important; color: var(--on-accent, #fff) !important; border: 0 !important; }
  html[data-theme] #setTags.set-on .tag-manager { display: flex; flex-direction: column; gap: 0; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; }
  html[data-theme] #setTags.set-on .tag-manager__pill { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; margin: 0; border: 0 !important; border-top: 1px solid var(--border) !important; border-radius: 0; background: none !important; font-size: 15px; color: var(--text-1); box-shadow: none; }
  html[data-theme] #setTags.set-on .tag-manager__pill:first-child { border-top: 0 !important; }
  html[data-theme] #setTags.set-on .tag-manager__pill > span:first-child { width: 12px !important; height: 12px !important; box-shadow: none !important; flex: none; }
  html[data-theme] #setTags.set-on .tag-manager__pill > span:nth-child(2) { flex: 1; }
  html[data-theme] #setTags.set-on .tag-manager__del { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--border); background: none; color: var(--text-3); display: grid; place-items: center; margin: 0; }
  html[data-theme] #setTags.set-on .tag-manager > .muted { padding: 16px; }

  /* 8. Theme */
  html[data-theme] #themeGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  html[data-theme] #themeGrid .theme-card { padding: 10px; border-radius: 20px; border: 2px solid var(--border); background: var(--surface, #fff); transform: none !important; box-shadow: none !important; }
  html[data-theme] #themeGrid .theme-card.is-active { border-color: var(--text-1); }
  html[data-theme] #themeGrid .theme-card__preview { height: 78px; border-radius: 12px; border: 1px solid var(--border); }
  html[data-theme] #themeGrid .theme-card__name { font-size: 13.5px; font-weight: 600; margin-top: 8px; }
  html[data-theme] #customThemePanel { background: var(--surface, #fff) !important; border-radius: 20px !important; }
  html[data-theme] #customThemePanel > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* 9. Shortcuts and tutorial */
  html[data-theme] #setKeys.set-on { order: 1; }
  html[data-theme] #tutorialCard.set-on { order: 2; flex-direction: row !important; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface, #fff) !important; border: 1px solid var(--border) !important; border-radius: 20px !important; padding: 16px !important; }
  html[data-theme] #tutorialCard.set-on .card__head { display: none; }
  html[data-theme] #tutorialCard.set-on p { margin: 0 !important; font-size: 13px; flex: 1; }
  html[data-theme] #tutorialCard.set-on .btn { width: auto; height: 42px; padding: 0 18px; flex: none; }
  html[data-theme] #setKeys.set-on .shortcut-grid { background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; gap: 0; }
  html[data-theme] #setKeys.set-on .shortcut-grid > div { padding: 0 16px; min-height: 52px; border-top: 1px solid var(--border); align-items: center; }
  html[data-theme] #setKeys.set-on .shortcut-grid > div:first-child { border-top: 0; }
}
@media (max-width: 640px) {
  html[data-theme] #view-settings > .card.set-on, html[data-theme] #view-settings .grid-1-1 > .card.set-on { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
  html[data-theme] #tutorialCard.set-on { background: var(--surface, #fff) !important; border: 1px solid var(--border) !important; padding: 16px !important; }
  html[data-theme] #profileCard .profile-avatar { width: 64px !important; height: 64px !important; flex: none; align-self: flex-start; display: grid; place-items: center; }
}
@media (max-width: 640px) {
  html[data-theme] #profileCard .profile-row > .profile-avatar { width: 64px !important; min-width: 64px; height: 64px !important; display: grid !important; grid-template-columns: none !important; place-items: center; align-self: flex-start; border-radius: 999px; }
}
html[data-theme] #storageUsage:empty { display: none !important; }
@media (max-width: 640px) {
  html[data-theme] #setAlerts.set-on .form-group:has(input[type="checkbox"]) { border: 1px solid var(--border) !important; padding: 16px !important; border-radius: 16px !important; background: var(--surface, #fff) !important; }
}

/* desktop profile row: the avatar must not be treated as a form column */
html[data-theme] #profileCard .profile-row > .profile-avatar { display: grid !important; grid-template-columns: none !important; place-items: center; width: 56px !important; min-width: 56px; height: 56px !important; flex: none; margin: 0 20px 0 0; border-radius: 999px; }
html[data-theme] #profileCard .profile-row { align-items: flex-start; }

/* ── Profile photo: avatar + "Change photo", and the small picker ── */
html[data-theme] #profileCard .profile-row > .profile-av-col { display: flex !important; flex-direction: column; align-items: center; gap: 8px; grid-template-columns: none !important; width: auto !important; flex: none; margin: 0 20px 0 0; }
html[data-theme] #profileCard .profile-av-col .profile-avatar { margin: 0 !important; width: 56px !important; min-width: 56px; height: 56px !important; display: grid !important; grid-template-columns: none !important; place-items: center; border-radius: 999px; background-size: cover; background-position: center; font-weight: 600; overflow: hidden; }
html[data-theme] #profileCard .profile-av-col .profile-avatar.has-img { color: transparent; }
html[data-theme] #profileCard #avatarEditBtn { height: 30px; padding: 0 12px; font-size: 12px; white-space: nowrap; }
.avatar-picker { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-2, transparent); }
.avatar-picker[hidden] { display: none; }
.avatar-picker__row { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar-picker__label { font-size: 12px; color: var(--text-3); }
.avatar-color-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.avatar-color-opt { width: 34px; height: 34px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.avatar-color-opt.is-active { border-color: var(--text-1); outline: 2px solid var(--surface, #fff); outline-offset: -4px; }
@media (max-width: 640px) {
  html[data-theme] #profileCard .profile-row > .profile-av-col { margin: 0; align-items: flex-start; flex-direction: row; align-self: stretch; width: 100% !important; gap: 14px; align-items: center; }
  html[data-theme] #profileCard .profile-av-col .profile-avatar { width: 64px !important; min-width: 64px; height: 64px !important; font-size: 20px; }
  html[data-theme] #profileCard #avatarEditBtn { height: 40px; padding: 0 18px; font-size: 13px; width: auto; }
  html[data-theme] #profileCard #avatarPicker { margin: 0; }
  /* no light "halo" behind the sticky save button on a dark theme */
  html[data-theme] #profileSave, html[data-theme] #saveSettings, html[data-theme] #alertsSaveBtn { box-shadow: 0 8px 24px rgba(0, 0, 0, .28) !important; }
}

/* ══ Risk Lab (design: "Risk Lab - every page", desktop + phone) ══ */
html[data-theme] #view-risk .view__header { margin-bottom: 8px; }
html[data-theme] #view-risk .view__eyebrow { font: 500 12px "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
html[data-theme] #view-risk .view__title { font: 800 48px/1 "Bricolage Grotesque", "IBM Plex Sans Thai", sans-serif !important; letter-spacing: -.04em; margin-top: 10px; }
html[data-theme] #view-risk .view__subtitle { display: none; }

/* tabs: pill row */
html[data-theme] #view-risk .rl-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; margin: 0 0 20px; background: none !important; border: 0 !important; box-shadow: none !important; scrollbar-width: none; }
html[data-theme] #view-risk .rl-tabs::-webkit-scrollbar { display: none; }
html[data-theme] #view-risk .rl-tab { flex: none; height: 42px; padding: 0 20px !important; border-radius: 999px !important; border: 1px solid var(--border) !important; background: var(--surface, #fff) !important; color: var(--text-1) !important; font: 600 14px "IBM Plex Sans", "IBM Plex Sans Thai", sans-serif !important; white-space: nowrap; box-shadow: none !important; display: inline-flex; align-items: center; }
html[data-theme] #view-risk .rl-tab.is-active { background: var(--accent) !important; color: var(--on-accent, #fff) !important; border-color: var(--accent) !important; }

/* cards */
html[data-theme] #view-risk .card { padding: 26px 28px !important; border-radius: 22px !important; background: var(--surface, #fff); border: 1px solid var(--border); box-shadow: none !important; display: flex; flex-direction: column; gap: 18px; }
html[data-theme] #view-risk .card__head { margin: 0 !important; }
html[data-theme] #view-risk .card__title { font: 800 20px "Bricolage Grotesque", "IBM Plex Sans Thai", sans-serif !important; letter-spacing: -.02em; text-transform: none; }
html[data-theme] #view-risk .card__sub { font-size: 13px; color: var(--text-3); margin: 4px 0 0; }
html[data-theme] #view-risk .grid-1-1, html[data-theme] #view-risk .grid-1-1-1 { gap: 20px !important; align-items: start; }

/* fields */
html[data-theme] #view-risk .form-group { margin: 0; display: flex; flex-direction: column; gap: 6px; }
html[data-theme] #view-risk .form-label { font: 500 12.5px/1.2 "IBM Plex Sans", "IBM Plex Sans Thai", sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--text-2) !important; margin: 0; }
html[data-theme] #view-risk .input, html[data-theme] #view-risk .select { height: 44px; border-radius: 12px !important; padding: 0 14px; font: 500 14px "IBM Plex Mono", ui-monospace, monospace; box-shadow: none; }
html[data-theme] #view-risk .select, html[data-theme] #view-risk input[type="text"].input { font-family: "IBM Plex Sans", "IBM Plex Sans Thai", sans-serif; }
html[data-theme] #view-risk .range-value { font: 500 13px "IBM Plex Mono", ui-monospace, monospace; color: var(--text-1); }
html[data-theme] #view-risk .btn { border-radius: 999px !important; height: 40px; padding: 0 18px; font-size: 13.5px; font-weight: 600; box-shadow: none; }
html[data-theme] #view-risk .btn--primary { background: var(--accent) !important; color: var(--on-accent, #fff) !important; border: 1px solid var(--accent) !important; }
html[data-theme] #view-risk .calc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* results: one bordered strip of big mono numbers */
html[data-theme] #view-risk .calc-output, html[data-theme] #view-risk .mc-stats-grid, html[data-theme] #view-risk .stress-stats-grid, html[data-theme] #view-risk .compound-stats-grid {
  display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 !important; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: none !important; padding: 0 !important;
}
html[data-theme] #view-risk .calc-out-item, html[data-theme] #view-risk .mc-stat-card, html[data-theme] #view-risk .stress-stat-card, html[data-theme] #view-risk .compound-stat-card {
  padding: 16px 18px !important; border: 0 !important; border-left: 1px solid var(--border) !important; border-top: 1px solid var(--border) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; min-width: 0; margin: -1px 0 0 -1px;
}
html[data-theme] #view-risk .calc-out-label, html[data-theme] #view-risk .mc-stat-label, html[data-theme] #view-risk .stress-stat-label, html[data-theme] #view-risk .compound-stat-label { font: 400 11.5px "IBM Plex Sans", "IBM Plex Sans Thai", sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--text-3) !important; }
html[data-theme] #view-risk .calc-out-value, html[data-theme] #view-risk .mc-val, html[data-theme] #view-risk .stress-val, html[data-theme] #view-risk .compound-val { font: 500 24px "IBM Plex Mono", ui-monospace, monospace !important; letter-spacing: -.02em; margin-top: 4px; background: none !important; -webkit-text-fill-color: currentColor; }
html[data-theme] #view-risk .calc-out-unit { font-size: 12px; margin-left: 4px; color: var(--text-3); }
html[data-theme] #view-risk .calc-out-warn { font-size: 12px; color: var(--warn, #f59e0b); margin-top: 6px; }
html[data-theme] #view-risk .mc-summary-text, html[data-theme] #view-risk .stress-summary-text, html[data-theme] #view-risk .compound-summary-text, html[data-theme] #view-risk .ror-summary { font-size: 13px; line-height: 1.55; color: var(--text-2); }
html[data-theme] #view-risk .chart-wrap, html[data-theme] #view-risk .mc-chart-wrap, html[data-theme] #view-risk .stress-chart-wrap, html[data-theme] #view-risk .compound-chart-wrap { border-radius: 16px; background: var(--surface-2, transparent); border: 1px solid var(--border); padding: 10px; }

/* validator + heatmap */
html[data-theme] #view-risk .validator-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
html[data-theme] #view-risk .validator-result { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
html[data-theme] #view-risk .ror-heatmap { border-radius: 12px; }

/* prop firm */
html[data-theme] #view-risk .pf-header-card { border-radius: 22px !important; background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
html[data-theme] #view-risk .pf-header__title { font: 800 20px "Bricolage Grotesque", sans-serif; letter-spacing: -.02em; }
html[data-theme] #view-risk .pf-setup, html[data-theme] #view-risk .pf-results { border-radius: 22px !important; background: var(--surface, #fff) !important; border: 1px solid var(--border) !important; box-shadow: none !important; padding: 26px 28px !important; }
html[data-theme] #view-risk .pf-rule { border-radius: 12px; }
html[data-theme] #view-risk .badge { border-radius: 999px; }

@media (max-width: 640px) {
  html[data-theme] #view-risk .view__eyebrow, html[data-theme] #view-risk .view__subtitle { display: none; }
  html[data-theme] #view-risk .view__title { font-size: 26px !important; margin: 0; }
  html[data-theme] #view-risk .rl-tabs { margin: 0 -16px 14px; padding: 2px 16px 6px; }
  html[data-theme] #view-risk .card, html[data-theme] #view-risk .pf-setup, html[data-theme] #view-risk .pf-results { padding: 18px !important; border-radius: 20px !important; gap: 14px; }
  html[data-theme] #view-risk .card__title { font-size: 18px !important; }
  html[data-theme] #view-risk .calc-grid, html[data-theme] #view-risk .validator-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  html[data-theme] #view-risk .input, html[data-theme] #view-risk .select { height: 50px; border-radius: 14px !important; font-size: 16px; }
  html[data-theme] #view-risk .calc-output, html[data-theme] #view-risk .mc-stats-grid, html[data-theme] #view-risk .stress-stats-grid, html[data-theme] #view-risk .compound-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-theme] #view-risk .calc-out-value, html[data-theme] #view-risk .mc-val, html[data-theme] #view-risk .stress-val, html[data-theme] #view-risk .compound-val { font-size: 20px !important; }
  html[data-theme] #view-risk .grid-1-1, html[data-theme] #view-risk .grid-1-1-1 { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Risk Lab: the Kelly / Optimal f / EV result blocks (built by script) */
html[data-theme] #view-risk .risk-output { display: flex; flex-direction: column; gap: 12px; background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
html[data-theme] #view-risk .risk-out__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
html[data-theme] #view-risk .risk-out__cell { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px !important; background: none !important; border: 0 !important; border-left: 1px solid var(--border) !important; border-top: 1px solid var(--border) !important; border-radius: 0 !important; margin: -1px 0 0 -1px; min-width: 0; box-shadow: none !important; }
html[data-theme] #view-risk .risk-out__cell > span { font: 400 11.5px "IBM Plex Sans", "IBM Plex Sans Thai", sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--text-3) !important; }
html[data-theme] #view-risk .risk-out__cell > b { font: 500 20px "IBM Plex Mono", ui-monospace, monospace !important; letter-spacing: -.02em; }
html[data-theme] #view-risk .risk-out__note { font-size: 12.5px; line-height: 1.5; background: none !important; border: 0 !important; padding: 0 !important; color: var(--text-2); }
html[data-theme] #view-risk .risk-out__note.is-pos { color: var(--win); }
html[data-theme] #view-risk .risk-out__note.is-neg { color: var(--loss); }
html[data-theme] #view-risk .risk-card .badge, html[data-theme] #view-risk .card .badge--ghost { font-size: 11.5px; padding: 4px 10px; background: none; border: 1px solid var(--border); color: var(--text-3); text-transform: none; letter-spacing: 0; }
html[data-theme] #view-risk .grid-1-1-1 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { html[data-theme] #view-risk .grid-1-1-1 { grid-template-columns: minmax(0, 1fr); } }

/* Prop firm sim: when the page is one column (tablet width, or a phone showing the desktop site) the setup
   panel must NOT stay sticky, or it hangs over the results while scrolling. */
@media (max-width: 1100px) {
  html[data-theme] #view-risk .pf-setup { position: static !important; top: auto !important; }
  html[data-theme] #view-risk .pf-shell { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Settings → Language */
html[data-theme] #setLang { order: 8; }
html[data-theme] #tutorialCard { order: 9; }
.lang-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lang-opt { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface, #fff); color: var(--text-1); font: 500 15px "IBM Plex Sans", "IBM Plex Sans Thai", sans-serif; text-align: left; cursor: pointer; }
.lang-opt__name { flex: 1; }
.lang-opt__code { font: 500 12px "IBM Plex Mono", ui-monospace, monospace; color: var(--text-3); }
.lang-opt__tick { width: 20px; height: 20px; border-radius: 999px; border: 2px solid var(--border); flex: none; position: relative; }
.lang-opt.is-active { border-color: var(--text-1); border-width: 2px; }
.lang-opt.is-active .lang-opt__tick { border-color: var(--accent); background: var(--accent); }
.lang-opt.is-active .lang-opt__tick::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid var(--on-accent, #fff); border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (max-width: 640px) { .lang-list { grid-template-columns: minmax(0, 1fr); gap: 10px; } .lang-opt { min-height: 58px; } }

/* ── Rule Guard: banner + live check in the pre-trade checklist ── */
.rg-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 0 0 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--loss) 40%, transparent); background: color-mix(in srgb, var(--loss) 8%, var(--surface, #fff)); color: var(--text-1); font-size: 14px; line-height: 1.4; }
.rg-banner[hidden] { display: none; }
.rg-banner__dot { width: 10px; height: 10px; border-radius: 999px; background: var(--loss); flex: none; }
.rg-banner__text { flex: 1; min-width: 0; font-weight: 500; }
.rg-banner__x { height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface, #fff); color: var(--text-2); font: 600 12.5px "IBM Plex Sans", sans-serif; cursor: pointer; flex: none; }
.pc-live { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; margin-bottom: 14px; background: var(--surface, #fff); }
.pc-live[hidden] { display: none; }
.pc-live__t { font: 600 11px "IBM Plex Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 12px 16px 6px; }
.pc-live__row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 13.5px; }
.pc-live__row:first-of-type { border-top: 0; }
.pc-live__dot { width: 10px; height: 10px; border-radius: 999px; background: var(--win); flex: none; }
.pc-live__row.is-warn .pc-live__dot { background: var(--warn, #f59e0b); }
.pc-live__row.is-bad .pc-live__dot { background: var(--loss); }
.pc-live__l { flex: 1; color: var(--text-2); }
.pc-live__v { font: 500 13px "IBM Plex Mono", ui-monospace, monospace; color: var(--text-1); }
.pc-live__row.is-bad .pc-live__v { color: var(--loss); }
@media (max-width: 640px) { .rg-banner { flex-wrap: wrap; } .rg-banner__x { width: 100%; } }

/* ── Weekly coach card ── */
.coach__sum { display: flex; flex-wrap: wrap; gap: 8px; }
.coach__chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); font-size: 13px; color: var(--text-2); background: var(--surface, transparent); }
.coach__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.coach__h { font: 600 11px "IBM Plex Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.coach__list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.coach__list li { padding: 12px 16px; font-size: 14px; line-height: 1.45; border-top: 1px solid var(--border); position: relative; padding-left: 30px; }
.coach__list li:first-child { border-top: 0; }
.coach__list li::before { content: ""; position: absolute; left: 14px; top: 18px; width: 8px; height: 8px; border-radius: 999px; background: var(--text-3); }
.coach__list.is-leak li::before { background: var(--loss); }
.coach__list.is-good li::before { background: var(--win); }
.coach__empty { font-size: 13.5px; color: var(--text-3); padding: 6px 0; }
.coach__foot { font-size: 12px; color: var(--text-3); margin-top: 14px; }
html[data-theme] #coachCard { padding: 26px 28px !important; border-radius: 22px !important; margin-bottom: 20px; }
@media (max-width: 640px) { .coach__cols { grid-template-columns: minmax(0, 1fr); } html[data-theme] #coachCard { padding: 18px !important; } }

/* ── Settings: Share my performance ── */
html[data-theme] #setShare { order: 8; }
.sp-check { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.sp-check input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.sp-links { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.sp-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-top: 1px solid var(--border); }
.sp-link:first-child { border-top: 0; }
.sp-link b { display: block; font-size: 15px; font-weight: 600; }
.sp-link small { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 3px; max-width: 460px; line-height: 1.4; }
.sp-link__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sp-url { min-width: 220px; height: 36px; border-radius: 999px !important; font: 500 12.5px "IBM Plex Mono", ui-monospace, monospace; }
.sp-note { font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
@media (max-width: 640px) { .sp-link__actions { width: 100%; } .sp-url { flex-basis: 100%; min-width: 0; } .sp-link__actions .btn { flex: 1; } }

/* ── Share my performance (design: "Share my performance - settings") ── */
html[data-theme] #setShare { gap: 22px; }
.sp-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: end; }
.sp-switch { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 46px; padding: 0 14px; border: 1px solid var(--border); border-radius: 12px; font-size: 13.5px; cursor: pointer; background: var(--surface, transparent); }
.sp-switch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sp-switch i { width: 46px; height: 28px; border-radius: 99px; background: var(--border-strong, #d6d4ce); position: relative; flex: none; transition: background .15s; }
.sp-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 99px; background: #fff; transition: transform .15s; }
.sp-switch input:checked ~ i { background: var(--accent); }
.sp-switch input:checked ~ i::after { transform: translateX(18px); }
.sp-switch input:focus-visible ~ i { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp-links { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 20px; overflow: hidden; }
.sp-link { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; border-top: 1px solid var(--border); }
.sp-link:first-child { border-top: 0; }
.sp-link__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sp-link__head b { display: block; font-size: 15px; font-weight: 600; }
.sp-link__head small { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 3px; line-height: 1.45; max-width: 420px; }
.sp-live { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px; background: color-mix(in srgb, var(--win) 12%, transparent); color: var(--win); font-size: 12px; font-weight: 600; flex: none; }
.sp-live[hidden] { display: none; }
.sp-live i { width: 7px; height: 7px; border-radius: 99px; background: var(--win); }
.sp-link__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sp-link__actions .btn { height: 44px; padding: 0 22px; }
.sp-url { flex: 1; min-width: 240px; height: 44px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2, transparent); padding: 0 18px; font: 500 13px "IBM Plex Mono", ui-monospace, monospace; color: var(--text-2); }
.sp-link__meta { font-size: 12px; color: var(--text-3); }
.sp-link__meta[hidden] { display: none; }
.sp-seen__t { font: 600 11px "IBM Plex Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.sp-seen ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sp-seen li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.sp-seen li i { width: 20px; height: 20px; border-radius: 99px; flex: none; position: relative; background: var(--win); }
.sp-seen li.is-yes i::after { content: ""; position: absolute; left: 7px; top: 3px; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sp-seen li.is-no { color: var(--text-3); }
.sp-seen li.is-no i { background: var(--border-strong, #c3c1ba); }
.sp-seen li.is-no i::before, .sp-seen li.is-no i::after { content: ""; position: absolute; left: 9px; top: 5px; width: 2px; height: 10px; background: #fff; border-radius: 2px; transform: rotate(45deg); }
.sp-seen li.is-no i::after { transform: rotate(-45deg); }
.sp-note { font-size: 12.5px; line-height: 1.55; color: var(--text-3); padding-top: 16px; border-top: 1px solid var(--border); }
@media (max-width: 640px) {
  .sp-top { grid-template-columns: minmax(0, 1fr); }
  .sp-switch { height: auto; padding: 14px 16px; border-radius: 16px; }
  .sp-links { border: 0; border-radius: 0; gap: 14px; overflow: visible; }
  .sp-link { border: 1px solid var(--border) !important; border-radius: 20px; padding: 18px; background: var(--surface, #fff); }
  .sp-url { flex-basis: 100%; min-width: 0; height: 46px; font-size: 12.5px; }
  .sp-link__actions .btn { flex: 1; height: 48px; }
  .sp-link__actions .btn--danger { flex-basis: 100%; height: 46px; }
  .sp-seen ul { grid-template-columns: minmax(0, 1fr); }
}

/* Share my performance: stretch the link rows (an older rule had centred them) */
.sp-link { align-items: stretch !important; justify-content: flex-start !important; flex-wrap: nowrap !important; }
.sp-link__head { width: 100%; }
.sp-link__actions { width: 100%; justify-content: flex-start; }
.sp-links { align-items: stretch; }

/* Challenge finish line (portfolio cards) */
html[data-theme] .pf-finish{margin-top:12px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
html[data-theme] .pf-finish__head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
html[data-theme] .pf-finish__state{font-style:normal;text-transform:none;letter-spacing:0;font-size:12px;font-weight:600;color:var(--text-2)}
html[data-theme] .pf-finish__state.is-good{color:var(--win)}
html[data-theme] .pf-finish__state.is-bad{color:var(--loss)}
html[data-theme] .pf-finish__state.is-warn{color:var(--text-1)}
html[data-theme] .pf-finish__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-top:10px}
html[data-theme] .pf-finish__cell span{display:block;font-size:11.5px;color:var(--text-3)}
html[data-theme] .pf-finish__cell b{display:block;margin-top:2px;font:500 15px 'IBM Plex Mono',monospace;color:var(--text-1)}
html[data-theme] .pf-finish__note{margin-top:10px;font-size:11.5px;line-height:1.5;color:var(--text-3)}

/* Process score + playbook scorecard */
html[data-theme] .process-card{padding:22px 24px;margin-bottom:24px}
html[data-theme] .pr__top{display:flex;align-items:center;gap:18px}
html[data-theme] .pr__score{display:flex;align-items:baseline;gap:4px;font-family:'IBM Plex Mono',monospace}
html[data-theme] .pr__score b{font-size:48px;font-weight:500;letter-spacing:-.04em;color:var(--text-1);line-height:1}
html[data-theme] .pr__score span{font-size:14px;color:var(--text-3)}
html[data-theme] .pr__txt h3,html[data-theme] .pr__h2{margin:0;font:800 18px 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em;color:var(--text-1)}
html[data-theme] .pr__txt p,html[data-theme] .pr__sub{margin:4px 0 0;font-size:13px;color:var(--text-3);line-height:1.5}
html[data-theme] .pr__parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-top:20px}
html[data-theme] .pr__ph{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--text-2)}
html[data-theme] .pr__ph b{font:500 13px 'IBM Plex Mono',monospace;color:var(--text-1)}
html[data-theme] .pr__bar{height:6px;border-radius:99px;background:var(--border);margin-top:6px;overflow:hidden}
html[data-theme] .pr__bar span{display:block;height:100%;border-radius:99px;background:var(--accent)}
html[data-theme] .pr__part em{display:block;margin-top:5px;font-style:normal;font-size:11.5px;color:var(--text-3)}
html[data-theme] .pr__note{margin-top:16px;font-size:12px;color:var(--text-3);line-height:1.55}
html[data-theme] .pr__h2{margin-top:26px;padding-top:20px;border-top:1px solid var(--border)}
html[data-theme] .pr__pb{margin-top:12px;padding:14px 16px;border:1px solid var(--border);border-radius:14px}
html[data-theme] .pr__pbh{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:var(--text-1)}
html[data-theme] .pr__pbh span{font-size:12px;color:var(--text-3)}
html[data-theme] .pr__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-top:10px}
html[data-theme] .pr__row span{font-size:11.5px;color:var(--text-3)}
html[data-theme] .pr__row b{display:block;margin-top:2px;font:500 15px 'IBM Plex Mono',monospace;color:var(--text-1)}
html[data-theme] .pr__cmp{margin-top:10px;font-size:12.5px;color:var(--text-2)}
html[data-theme] .pr__empty{margin-top:12px;font-size:13px;color:var(--text-3)}
@media (max-width:640px){html[data-theme] .process-card{padding:18px 16px}html[data-theme] .pr__score b{font-size:40px}}

/* Trading costs */
html[data-theme] .cost-card{padding:22px 24px;margin-bottom:24px}
html[data-theme] .cs__top h3{margin:0;font:800 18px 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em;color:var(--text-1)}
html[data-theme] .cs__top p{margin:4px 0 0;font-size:13px;color:var(--text-3);line-height:1.5}
html[data-theme] .cs__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:18px}
html[data-theme] .cs__k span{display:block;font-size:12px;color:var(--text-3)}
html[data-theme] .cs__k b{display:block;margin-top:3px;font:500 18px 'IBM Plex Mono',monospace;color:var(--text-1)}
html[data-theme] .cs__line{margin-top:16px;font-size:13px;color:var(--text-2)}
html[data-theme] .cs__h{margin-top:20px;font:600 11px 'IBM Plex Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
html[data-theme] .cs__row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--border);font-size:13.5px;color:var(--text-1)}
html[data-theme] .cs__row:first-of-type{margin-top:6px}
html[data-theme] .cs__row em{font-style:normal;font-size:12px;color:var(--text-3);margin-left:auto}
html[data-theme] .cs__row b{font:500 13.5px 'IBM Plex Mono',monospace;min-width:84px;text-align:right}
html[data-theme] .cs__note{margin-top:16px;font-size:12px;color:var(--text-3);line-height:1.55}
@media (max-width:640px){html[data-theme] .cost-card{padding:18px 16px}}

html[data-theme] .pr__lock{padding:6px 0}
html[data-theme] .pr__lock h3{margin:0;font:800 18px 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em;color:var(--text-1)}
html[data-theme] .pr__lock p{margin:8px 0 16px;max-width:520px;font-size:13.5px;line-height:1.6;color:var(--text-3)}
html[data-theme] .pf-finish--lock .pf-finish__head a{font-size:12px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--text-1);text-decoration:underline}

html[data-theme] .cost-card[hidden]{display:none !important}

/* Trading plan page */
html[data-theme] .tp__lock,html[data-theme] .tp__empty{padding:26px 28px}
html[data-theme] .tp__lock h3,html[data-theme] .tp__empty h3{margin:0;font:800 18px 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em;color:var(--text-1)}
html[data-theme] .tp__lock p,html[data-theme] .tp__empty p{margin:8px 0 16px;max-width:520px;font-size:13.5px;line-height:1.6;color:var(--text-3)}
html[data-theme] #planRoot{display:flex;flex-direction:column;gap:20px}
html[data-theme] .tp__tabs{display:flex;gap:8px;flex-wrap:wrap}
html[data-theme] .tp__tab{height:36px;padding:0 16px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);font:600 13px 'IBM Plex Sans',sans-serif;cursor:pointer}
html[data-theme] .tp__tab.is-on{background:var(--text-1);color:var(--bg,#fff);border-color:var(--text-1)}
html[data-theme] .tp__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
html[data-theme] .tp__eyebrow{font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
html[data-theme] .tp__name{margin:6px 0 0;font:800 34px/1.05 'Bricolage Grotesque',sans-serif;letter-spacing:-.04em;color:var(--text-1)}
html[data-theme] .tp__meta{margin-top:8px;font-size:13.5px;color:var(--text-2)}
html[data-theme] .tp__acts{display:flex;gap:8px;flex-wrap:wrap}
html[data-theme] .tp__danger{color:var(--loss)}
html[data-theme] .tp__top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:stretch}
html[data-theme] .tp__hero{background:#0b0b0c;color:#fff;border-radius:28px;padding:30px 32px;overflow:hidden}
html[data-theme] .tp__hrow{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
html[data-theme] .tp__hk{font-size:13px;color:#a8a8a3}
html[data-theme] .tp__hv{margin-top:4px;font:500 44px/1 'IBM Plex Mono',monospace;letter-spacing:-.04em}
html[data-theme] .tp__hr{text-align:right}
html[data-theme] .tp__hero .pos{color:#3ddc97}html[data-theme] .tp__hero .neg{color:#ff7a7f}
html[data-theme] .tp__curve{display:block;width:100%;height:130px;margin-top:20px;color:#3ddc97}
html[data-theme] .tp__hstats{display:flex;gap:24px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:#a8a8a3}
html[data-theme] .tp__hstats b{font-family:'IBM Plex Mono',monospace;color:#fff}
html[data-theme] .tp__hstats b.pos{color:#3ddc97}html[data-theme] .tp__hstats b.neg{color:#ff7a7f}
html[data-theme] .tp__ddcard{display:flex;flex-direction:column;gap:16px;padding:24px 26px}
html[data-theme] .tp__h{margin:0;font:800 18px 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em;color:var(--text-1)}
html[data-theme] .tp__split{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--text-2);margin-bottom:8px}
html[data-theme] .tp__split b{font:500 13.5px 'IBM Plex Mono',monospace;color:var(--text-1)}
html[data-theme] .tp__sep{border-top:1px solid var(--border);padding-top:14px}
html[data-theme] .tp__mono{margin-top:2px;font:500 18px 'IBM Plex Mono',monospace;color:var(--text-1)}
html[data-theme] .tp__k{font-size:12px;color:var(--text-3)}
html[data-theme] .tp__bar{display:block;height:8px;border-radius:99px;background:var(--border);overflow:hidden}
html[data-theme] .tp__bar i{display:block;height:100%;border-radius:99px;background:var(--text-1)}
html[data-theme] .tp__bar i.good{background:var(--win)}html[data-theme] .tp__bar i.bad{background:var(--loss)}html[data-theme] .tp__bar i.warn{background:#d98a00}
html[data-theme] .tp__ch{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
html[data-theme] .tp__rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:18px}
html[data-theme] .tp__rule{display:flex;flex-direction:column;gap:10px;border:1px solid var(--border);border-radius:18px;padding:16px 18px}
html[data-theme] .tp__rule.is-good{border-color:color-mix(in srgb,var(--win) 45%,transparent)}
html[data-theme] .tp__rule.is-bad{border-color:color-mix(in srgb,var(--loss) 45%,transparent)}
html[data-theme] .tp__rh{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--text-1)}
html[data-theme] .tp__big{font:500 24px 'IBM Plex Mono',monospace;letter-spacing:-.03em;color:var(--text-1)}
html[data-theme] .tp__big.pos,html[data-theme] .tp__day b.pos,html[data-theme] .tp__r.pos,html[data-theme] .tp__pv.pos{color:var(--win)}
html[data-theme] .tp__big.neg,html[data-theme] .tp__day b.neg,html[data-theme] .tp__r.neg,html[data-theme] .tp__pv.neg{color:var(--loss)}
html[data-theme] .tp__chip{display:inline-flex;align-items:center;padding:3px 10px;border-radius:99px;font:600 11.5px 'IBM Plex Sans',sans-serif;font-style:normal;background:var(--border);color:var(--text-2)}
html[data-theme] .tp__chip.is-good{background:color-mix(in srgb,var(--win) 16%,transparent);color:var(--win)}
html[data-theme] .tp__chip.is-bad{background:color-mix(in srgb,var(--loss) 16%,transparent);color:var(--loss)}
html[data-theme] .tp__chip.is-warn{background:color-mix(in srgb,#d98a00 16%,transparent);color:#a35f00}
html[data-theme] .tp__two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
html[data-theme] .tp__days{display:flex;flex-direction:column;gap:12px;margin-top:16px}
html[data-theme] .tp__day{display:grid;grid-template-columns:56px minmax(0,1fr) 92px 84px;gap:12px;align-items:center;font-size:13px;color:var(--text-2)}
html[data-theme] .tp__day b{font:500 13px 'IBM Plex Mono',monospace;text-align:right}
html[data-theme] .tp__tbl{width:100%;border-collapse:collapse;margin-top:12px}
html[data-theme] .tp__tbl th{font-size:12px;font-weight:500;color:var(--text-3);text-align:left;padding:0 0 8px}
html[data-theme] .tp__tbl td{padding:10px 0;border-top:1px solid var(--border);font-size:13px;color:var(--text-1)}
html[data-theme] .tp__r{text-align:right !important;font-family:'IBM Plex Mono',monospace}
html[data-theme] .tp__disc{margin:0;max-width:760px;font-size:12.5px;line-height:1.7;color:var(--text-3)}
html[data-theme] .tp__form{display:flex;flex-direction:column;gap:26px;padding:28px 30px;max-width:820px}
html[data-theme] .tp__fh{margin:0 0 4px;font:800 24px 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em;color:var(--text-1)}
html[data-theme] .tp__sec{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:12px}
html[data-theme] .tp__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
html[data-theme] .tp__f{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:500;color:var(--text-2)}
html[data-theme] .tp__opt{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--border);border-radius:16px;margin-bottom:10px;cursor:pointer;background:var(--surface)}
html[data-theme] .tp__opt.is-on{border-color:var(--text-1)}
html[data-theme] .tp__opt input{position:absolute;opacity:0;pointer-events:none}
html[data-theme] .tp__dot{flex:none;width:18px;height:18px;margin-top:2px;border-radius:99px;border:2px solid var(--text-3);box-sizing:border-box}
html[data-theme] .tp__opt.is-on .tp__dot{border-color:var(--text-1);background:var(--text-1);box-shadow:inset 0 0 0 3px var(--surface)}
html[data-theme] .tp__opt b{display:block;font-size:14.5px;color:var(--text-1)}
html[data-theme] .tp__opt small{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--text-3)}
html[data-theme] .tp__extra{margin-top:6px;border:1px solid var(--border);border-radius:18px;padding:18px 20px}
html[data-theme] .tp__erow{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
html[data-theme] .tp__erow .tp__f{flex:1;min-width:140px}
html[data-theme] .tp__pick{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--border);font-size:13.5px;color:var(--text-1);cursor:pointer}
html[data-theme] .tp__pick:first-of-type{margin-top:8px}
html[data-theme] .tp__pd{width:64px;color:var(--text-2)}
html[data-theme] .tp__pick b{flex:1}
html[data-theme] .tp__pv{font-family:'IBM Plex Mono',monospace}
html[data-theme] .tp__err{padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--loss) 12%,transparent);color:var(--loss);font-size:13px}
html[data-theme] .tp__err[hidden]{display:none}
html[data-theme] .tp__foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--border)}
html[data-theme] .tp__foot .tp__k{max-width:420px;line-height:1.5}
html[data-theme] .tp__fb{display:flex;gap:10px}
html[data-theme] .plan-banner.is-good{border-color:color-mix(in srgb,var(--win) 45%,transparent);background:color-mix(in srgb,var(--win) 12%,transparent)}
html[data-theme] .plan-banner.is-good .rg-banner__dot{background:var(--win)}
html[data-theme] .plan-banner.is-warn{border-color:color-mix(in srgb,#d98a00 45%,transparent);background:color-mix(in srgb,#d98a00 12%,transparent)}
html[data-theme] .plan-banner.is-warn .rg-banner__dot{background:#d98a00}
@media (max-width:1100px){html[data-theme] .tp__top,html[data-theme] .tp__two{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
 html[data-theme] .tp__name{font-size:28px}
 html[data-theme] .tp__hero{padding:22px 20px}
 html[data-theme] .tp__hv{font-size:34px}
 html[data-theme] .tp__hr{text-align:left}
 html[data-theme] .tp__grid{grid-template-columns:minmax(0,1fr)}
 html[data-theme] .tp__form{padding:20px 16px}
 html[data-theme] .tp__day{grid-template-columns:48px minmax(0,1fr) 78px}
 html[data-theme] .tp__day em{display:none}
 html[data-theme] .tp__acts .btn{flex:1 1 40%}
}

html[data-theme] .tp__wide{grid-column:1/-1}
html[data-theme] .tp__accs{display:flex;flex-wrap:wrap;gap:8px}
html[data-theme] .tp__acc{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);font:600 13px 'IBM Plex Sans',sans-serif;cursor:pointer}
html[data-theme] .tp__acc input{position:absolute;opacity:0;pointer-events:none}
html[data-theme] .tp__acc.is-on{background:var(--text-1);border-color:var(--text-1);color:var(--bg,#fff)}
html[data-theme] .select.is-invalid,html[data-theme] #tradeAccountId.is-invalid{border-color:var(--loss) !important;box-shadow:0 0 0 3px color-mix(in srgb,var(--loss) 18%,transparent)}

/* Plan page fixes: selected chips were white text on a white pill in dark theme; form layout */
html[data-theme] .tp__acc.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#fff)}
html[data-theme] .tp__tab.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#fff)}
html[data-theme] .tp__acc{height:40px;padding:0 18px}
html[data-theme] .tp__acc:not(.is-on):hover{border-color:var(--text-3)}
html[data-theme] .tp__form{max-width:960px;gap:30px;padding:32px 36px}
html[data-theme] .tp__sec{font-size:13px;letter-spacing:0;text-transform:none;font-weight:600;color:var(--text-1);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border)}
html[data-theme] .tp__grid{gap:18px 20px}
html[data-theme] .tp__f{gap:7px;font-size:13px}
html[data-theme] .tp__f small{font-weight:400;line-height:1.5}
html[data-theme] .tp__f .input,html[data-theme] .tp__f .select{height:46px;width:100%;box-sizing:border-box}
@media (min-width:900px){html[data-theme] .tp__form .tp__grid:has(#tpT){grid-template-columns:repeat(3,minmax(0,1fr))}}
html[data-theme] .tp__opt{padding:16px 18px}
html[data-theme] .tp__foot{padding-top:22px}

/* Trade form: Entry / SL / TP boxes sit on one line even when a label wraps (the Thai hint made "Entry Price" two lines) */
#tradeModal .tf-main > .tf-grid--3 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); }
#tradeModal .tf-grid--3 > .form-group { display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; }
#tradeModal .tf-grid--3 > .form-group > .form-label { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; }
/* phones and narrow drawers: the Entry column is wider and the labels stay on one line, so the three boxes line up */
@media (max-width: 640px) {
  #tradeModal .tf-main > .tf-grid--3 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) !important; }
  #tradeModal .tf-grid--3 > .form-group > .form-label { white-space: nowrap; font-size: 12px !important; }
}
@media (max-width: 400px) {
  #tradeModal .tf-main > .tf-grid--3 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) !important; gap: 8px; }
  #tradeModal .tf-grid--3 > .form-group > .form-label { font-size: 11px !important; }
  #tradeModal .tf-main > .tf-grid--3 .info-tooltip-btn { display: none; }   /* hover hint, no room for it on a very small phone */
}

/* Plan form sits in the middle of the page, like the other pages */
/* Plan form sits in the middle of the page, like the other pages */
html[data-theme] #planRoot > .tp__form { align-self: center; width: 100%; max-width: 960px; }

/* Locked (Free plan) pages: blurred sample + pitch */
html[data-theme] .lk{position:relative;overflow:hidden;border-radius:24px;border:1px solid var(--border);min-height:520px;background:var(--surface)}
html[data-theme] .lk__bg{padding:24px;filter:blur(6px) saturate(.85);opacity:.6;pointer-events:none;user-select:none;max-height:640px;overflow:hidden}
html[data-theme] .lk__over{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:color-mix(in srgb,var(--bg,var(--surface)) 35%,transparent)}
html[data-theme] .lk__box{width:100%;max-width:520px;padding:30px 32px;border:1px solid var(--border);border-radius:24px;background:var(--surface);box-shadow:0 18px 50px rgba(0,0,0,.18)}
html[data-theme] .lk__badge{display:inline-flex;padding:4px 12px;border-radius:99px;background:var(--text-1);color:var(--bg,#fff);font:600 11.5px 'IBM Plex Sans',sans-serif;letter-spacing:.04em}
html[data-theme] .lk__box h3{margin:14px 0 0;font:800 24px/1.15 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em;color:var(--text-1)}
html[data-theme] .lk__box p{margin:10px 0 0;font-size:14px;line-height:1.6;color:var(--text-2)}
html[data-theme] .lk__box ul{margin:16px 0 22px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
html[data-theme] .lk__box li{position:relative;padding-left:22px;font-size:13.5px;line-height:1.5;color:var(--text-1)}
html[data-theme] .lk__box li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:99px;background:var(--accent)}
html[data-theme] .lk__box .btn{width:100%;justify-content:center;height:46px}
html[data-theme] .lk__box small{display:block;margin-top:12px;text-align:center;font-size:12px;color:var(--text-3)}
@media (max-width:640px){html[data-theme] .lk{min-height:560px}html[data-theme] .lk__box{padding:24px 20px}html[data-theme] .lk__box h3{font-size:21px}}

html[data-theme] .tp__check{display:flex;align-items:center;gap:10px;margin-top:2px;font-size:13px;font-weight:500;color:var(--text-1);cursor:pointer}
html[data-theme] .tp__check input{width:18px;height:18px;flex:none;accent-color:var(--accent);cursor:pointer}
html[data-theme] .tp__form .input:disabled{opacity:.7;cursor:not-allowed}

html[data-theme] .tp__empty-note{padding:20px 24px}
html[data-theme] .tp__empty-note b{font:800 16px 'Bricolage Grotesque',sans-serif;color:var(--text-1)}
html[data-theme] .tp__empty-note p{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--text-3)}
html[data-theme] .tp__empty-note ul{margin:12px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.5;color:var(--text-1)}