/* Main UI layer. Snapshot of the current production-facing design.
   - Section 1: horizontal-scroll guard (all widths)
   - Section 2: desktop / all-width polish (pretty on web)
   - Section 3: mobile layout (<= 760px)
   Update this file independently from dev-mobile.css when main and dev diverge. */

/* ───────────────────────────── 1. No horizontal scroll ─────────────────────────────
   Every top-level view is `position:fixed; overflow-y:auto`, which makes overflow-x
   compute to `auto` — so any child a few px too wide spawns a sideways scrollbar.
   Clip it horizontally while keeping vertical scroll. Intentional inner scrollers
   (.table-wrap) keep their own overflow-x:auto and still scroll. */
body.dev-mobile-body main,
body.dev-mobile-body .step-content {
  overflow-x: hidden;
  max-width: 100%;
}

/* ─────────────────────── 2. All-width polish (pretty on web + mobile) ───────────────────────
   Applies at every width. Stock surfaces lean emerald, real-estate surfaces lean indigo.
   Decorative graphics are inline SVG data-URIs (no external assets). The mobile block
   below (Section 3) overrides spacing/sizing where needed. */
body.dev-mobile-body {
  --dev-emerald: #047857;
  --dev-emerald-deep: #064e3b;
  --dev-indigo: #4f46e5;
  --dev-indigo-deep: #1e1b4b;
  --dev-stock-hero: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'480'%20height%3D'200'%20viewBox%3D'0%200%20480%20200'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'g'%20x1%3D'0'%20y1%3D'0'%20x2%3D'0'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%2310b981'%20stop-opacity%3D'.22'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%2310b981'%20stop-opacity%3D'0'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D'M0%20150%20L60%20120%20L120%20134%20L180%2080%20L240%20100%20L300%2052%20L360%2074%20L420%2030%20L480%2050%20L480%20200%20L0%20200%20Z'%20fill%3D'url(%23g)'%2F%3E%3Cpolyline%20points%3D'0%2C150%2060%2C120%20120%2C134%20180%2C80%20240%2C100%20300%2C52%20360%2C74%20420%2C30%20480%2C50'%20fill%3D'none'%20stroke%3D'%2310b981'%20stroke-width%3D'3'%20stroke-opacity%3D'.55'%20stroke-linejoin%3D'round'%20stroke-linecap%3D'round'%2F%3E%3Ccircle%20cx%3D'300'%20cy%3D'52'%20r%3D'5'%20fill%3D'%23059669'%2F%3E%3Ccircle%20cx%3D'420'%20cy%3D'30'%20r%3D'5'%20fill%3D'%23059669'%2F%3E%3C%2Fsvg%3E");
  --dev-re-hero: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'520'%20height%3D'200'%20viewBox%3D'0%200%20520%20200'%3E%3Cg%20fill%3D'%23ffffff'%20fill-opacity%3D'.10'%3E%3Crect%20x%3D'20'%20y%3D'110'%20width%3D'44'%20height%3D'90'%20rx%3D'3'%2F%3E%3Crect%20x%3D'74'%20y%3D'80'%20width%3D'40'%20height%3D'120'%20rx%3D'3'%2F%3E%3Crect%20x%3D'124'%20y%3D'128'%20width%3D'38'%20height%3D'72'%20rx%3D'3'%2F%3E%3Crect%20x%3D'172'%20y%3D'66'%20width%3D'46'%20height%3D'134'%20rx%3D'3'%2F%3E%3Crect%20x%3D'228'%20y%3D'100'%20width%3D'40'%20height%3D'100'%20rx%3D'3'%2F%3E%3Crect%20x%3D'278'%20y%3D'48'%20width%3D'48'%20height%3D'152'%20rx%3D'3'%2F%3E%3Crect%20x%3D'336'%20y%3D'92'%20width%3D'42'%20height%3D'108'%20rx%3D'3'%2F%3E%3Crect%20x%3D'388'%20y%3D'120'%20width%3D'38'%20height%3D'80'%20rx%3D'3'%2F%3E%3Crect%20x%3D'436'%20y%3D'74'%20width%3D'46'%20height%3D'126'%20rx%3D'3'%2F%3E%3C%2Fg%3E%3Cg%20fill%3D'%23a5b4fc'%20fill-opacity%3D'.5'%3E%3Crect%20x%3D'182'%20y%3D'80'%20width%3D'8'%20height%3D'8'%20rx%3D'1'%2F%3E%3Crect%20x%3D'198'%20y%3D'80'%20width%3D'8'%20height%3D'8'%20rx%3D'1'%2F%3E%3Crect%20x%3D'288'%20y%3D'64'%20width%3D'8'%20height%3D'8'%20rx%3D'1'%2F%3E%3Crect%20x%3D'304'%20y%3D'64'%20width%3D'8'%20height%3D'8'%20rx%3D'1'%2F%3E%3Crect%20x%3D'288'%20y%3D'88'%20width%3D'8'%20height%3D'8'%20rx%3D'1'%2F%3E%3Crect%20x%3D'304'%20y%3D'88'%20width%3D'8'%20height%3D'8'%20rx%3D'1'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --dev-ill-search: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'96'%20height%3D'96'%20viewBox%3D'0%200%2096%2096'%20fill%3D'none'%3E%3Ccircle%20cx%3D'42'%20cy%3D'42'%20r%3D'24'%20stroke%3D'%238aa0c9'%20stroke-width%3D'5'%2F%3E%3Cline%20x1%3D'60'%20y1%3D'60'%20x2%3D'80'%20y2%3D'80'%20stroke%3D'%238aa0c9'%20stroke-width%3D'6'%20stroke-linecap%3D'round'%2F%3E%3Ccircle%20cx%3D'42'%20cy%3D'42'%20r%3D'10'%20fill%3D'%23c7d6f0'%20fill-opacity%3D'.6'%2F%3E%3C%2Fsvg%3E");
  --dev-ill-chart: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'120'%20height%3D'96'%20viewBox%3D'0%200%20120%2096'%20fill%3D'none'%3E%3Cline%20x1%3D'14'%20y1%3D'80'%20x2%3D'110'%20y2%3D'80'%20stroke%3D'%23c7d6f0'%20stroke-width%3D'4'%20stroke-linecap%3D'round'%2F%3E%3Cline%20x1%3D'14'%20y1%3D'12'%20x2%3D'14'%20y2%3D'80'%20stroke%3D'%23c7d6f0'%20stroke-width%3D'4'%20stroke-linecap%3D'round'%2F%3E%3Crect%20x%3D'28'%20y%3D'52'%20width%3D'14'%20height%3D'24'%20rx%3D'3'%20fill%3D'%23c7d6f0'%2F%3E%3Crect%20x%3D'52'%20y%3D'36'%20width%3D'14'%20height%3D'40'%20rx%3D'3'%20fill%3D'%23a8bde8'%2F%3E%3Crect%20x%3D'76'%20y%3D'44'%20width%3D'14'%20height%3D'32'%20rx%3D'3'%20fill%3D'%23c7d6f0'%2F%3E%3Cpolyline%20points%3D'28%2C46%2052%2C30%2076%2C38%20100%2C18'%20fill%3D'none'%20stroke%3D'%238aa0c9'%20stroke-width%3D'4'%20stroke-linejoin%3D'round'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E");
}

/* Home should preview both product colors: darker emerald for stock, purple/indigo for real estate. */
body.dev-mobile-body.home-theme .header {
  background: linear-gradient(135deg, #052e26 0%, #182044 54%, #1e1b4b 100%);
}
body.dev-mobile-body .home-view {
  background:
    radial-gradient(circle at 12% 8%, rgba(4, 120, 87, 0.16), transparent 28%),
    radial-gradient(circle at 86% 14%, rgba(79, 70, 229, 0.18), transparent 25%),
    linear-gradient(145deg, #f3fbf7 0%, #f4f3ff 48%, #f8fafc 100%);
}
body.dev-mobile-body .home-hero {
  border-color: rgba(49, 46, 129, 0.10);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.76)),
    linear-gradient(135deg, rgba(4,120,87,0.08), rgba(79,70,229,0.08));
  box-shadow: 0 24px 70px rgba(30, 27, 75, 0.14);
}
body.dev-mobile-body .home-hero::before {
  background: rgba(79, 70, 229, 0.13);
}
body.dev-mobile-body .home-eyebrow {
  border-color: rgba(49, 46, 129, 0.14);
  color: #312e81;
  background: rgba(238, 242, 255, 0.86);
}
body.dev-mobile-body .home-hero h1 {
  color: #10231f;
}
body.dev-mobile-body .home-stock-action {
  color: #064e3b;
  background: rgba(209, 250, 229, 0.88);
  border-color: rgba(4, 120, 87, 0.24);
}
body.dev-mobile-body .home-real-estate-action {
  color: #312e81;
  background: rgba(238, 242, 255, 0.92);
  border-color: rgba(79, 70, 229, 0.24);
}
body.dev-mobile-body .home-visual {
  background:
    linear-gradient(145deg, rgba(5, 46, 38, 0.96), rgba(30, 27, 75, 0.95)),
    radial-gradient(circle at top right, rgba(99,102,241,0.30), transparent 38%);
}
body.dev-mobile-body .home-visual-card-sub {
  background: rgba(79, 70, 229, 0.20);
}
body.dev-mobile-body .home-sparkline {
  background:
    linear-gradient(130deg, transparent 0 10%, rgba(52,211,153,0.36) 10% 12%, transparent 12% 24%, rgba(52,211,153,0.58) 24% 26%, transparent 26% 40%, rgba(52,211,153,0.44) 40% 42%, transparent 42% 56%, rgba(52,211,153,0.68) 56% 58%, transparent 58% 72%, rgba(52,211,153,0.80) 72% 74%, transparent 74%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
}
body.dev-mobile-body .home-feature-icon {
  color: #047857;
}
body.dev-mobile-body .home-feature-card h2 {
  color: #10231f;
}
body.dev-mobile-body .home-feature-card:nth-child(3) .home-feature-icon {
  color: #4f46e5;
}
body.dev-mobile-body .home-feature-card-accent {
  background: linear-gradient(145deg, #064e3b, #312e81);
}
body.dev-mobile-body .home-feature-card-accent h2 {
  color: #fff;
}

/* ── Intro hero (stock + real-estate share #intro-view; themed via [data-dev-view]) ── */
body.dev-mobile-body .intro-header {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 30px 30px 32px;
  margin-bottom: 26px;
  background: linear-gradient(135deg, #d1fae5, #ccfbf1 55%, #e0f8ee);
  border: 1px solid #86efac;
  box-shadow: 0 18px 44px rgba(6, 78, 59, 0.12);
}
body.dev-mobile-body .intro-header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 320px;
  max-width: 55%;
  height: 140px;
  background: var(--dev-stock-hero) right bottom / contain no-repeat;
  pointer-events: none;
}
body.dev-mobile-body .intro-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  background: #a7f3d0;
  color: #064e3b;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(4, 120, 87, 0.22);
}
body.dev-mobile-body .intro-header h1 {
  color: var(--dev-emerald-deep);
  position: relative;
}
body.dev-mobile-body .intro-header p {
  color: #3f6b5e;
  position: relative;
  max-width: 640px;
}

/* Real-estate intro → indigo dark hero */
body.dev-mobile-body[data-dev-view="real-estate-intro"] .intro-header {
  background: linear-gradient(135deg, var(--dev-indigo-deep), #312e81 55%, #3730a3);
  border-color: rgba(165, 180, 252, 0.25);
  box-shadow: 0 20px 48px rgba(30, 27, 75, 0.32);
}
body.dev-mobile-body[data-dev-view="real-estate-intro"] .intro-header::after {
  background-image: var(--dev-re-hero);
  width: 380px;
  height: 150px;
  opacity: 0.9;
}
body.dev-mobile-body[data-dev-view="real-estate-intro"] .intro-eyebrow {
  background: rgba(165, 180, 252, 0.16);
  color: #c7d2fe;
  box-shadow: inset 0 0 0 1px rgba(165, 180, 252, 0.3);
}
body.dev-mobile-body[data-dev-view="real-estate-intro"] .intro-header h1 {
  color: #ffffff;
}
body.dev-mobile-body[data-dev-view="real-estate-intro"] .intro-header p {
  color: #c7d2fe;
}

/* Intro category nav → soft card with pill links */
body.dev-mobile-body .intro-nav {
  border-radius: 18px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  background: linear-gradient(180deg, #ffffff, #f7fbfa);
  box-shadow: 0 12px 30px rgba(16, 35, 31, 0.06);
}
body.dev-mobile-body .intro-nav-link {
  border-radius: 12px;
  transition: background 0.14s ease, color 0.14s ease, transform 0.14s ease;
}
body.dev-mobile-body .intro-nav-link:hover {
  background: #d1fae5;
}
body.dev-mobile-body .intro-nav-link.active {
  background: linear-gradient(135deg, #047857, #065f46);
  color: #fff;
  box-shadow: 0 8px 20px rgba(4, 120, 87, 0.34);
}
body.dev-mobile-body[data-dev-view="real-estate-intro"] .intro-nav-link:hover {
  background: #eef2ff;
}
body.dev-mobile-body[data-dev-view="real-estate-intro"] .intro-nav-link.active {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3);
}

/* Intro content cards → lift + accent */
body.dev-mobile-body .intro-card {
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
body.dev-mobile-body .intro-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(16, 35, 31, 0.12);
  border-color: rgba(5, 150, 105, 0.4);
}
body.dev-mobile-body[data-dev-view="real-estate-intro"] .intro-card:hover {
  border-color: rgba(79, 70, 229, 0.4);
}
/* Real-estate intro: recolour the green term accents to indigo for a consistent look */
body.dev-mobile-body[data-dev-view="real-estate-intro"] .intro-card-oneliner {
  color: #4338ca;
  background: #eef2ff;
  border-left-color: #6366f1;
}
body.dev-mobile-body[data-dev-view="real-estate-intro"] .intro-card-body b {
  color: #312e81;
}
body.dev-mobile-body[data-dev-view="real-estate-intro"] .intro-used-arrow {
  color: #4f46e5;
}
body.dev-mobile-body[data-dev-view="real-estate-intro"] .intro-card-used b {
  color: #4338ca;
}

/* ── Stock tool-view headers → soft emerald band with chart motif ── */
body.dev-mobile-body .stock-header,
body.dev-mobile-body .gurus-header,
body.dev-mobile-body .etf-header,
body.dev-mobile-body .strategy-header,
body.dev-mobile-body .factor-screen-header {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 22px 24px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #d1fae5, #ccfbf1 60%, #e0f8ee);
  border: 1px solid #86efac;
  box-shadow: 0 12px 32px rgba(6, 78, 59, 0.11);
}
body.dev-mobile-body .stock-header::after,
body.dev-mobile-body .gurus-header::after,
body.dev-mobile-body .etf-header::after,
body.dev-mobile-body .strategy-header::after,
body.dev-mobile-body .factor-screen-header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 260px;
  max-width: 46%;
  height: 96px;
  background: var(--dev-stock-hero) right bottom / contain no-repeat;
  opacity: 0.7;
  pointer-events: none;
}
/* keep real content above the decorative graphic */
body.dev-mobile-body .stock-header > *,
body.dev-mobile-body .gurus-header > *,
body.dev-mobile-body .etf-header > *,
body.dev-mobile-body .strategy-header > *,
body.dev-mobile-body .factor-screen-header > * {
  position: relative;
  z-index: 1;
}
body.dev-mobile-body .stock-header h1,
body.dev-mobile-body .gurus-header h1,
body.dev-mobile-body .etf-header h1,
body.dev-mobile-body .strategy-header h1,
body.dev-mobile-body .factor-screen-header h1 {
  color: var(--dev-emerald-deep);
}
body.dev-mobile-body .stock-header p,
body.dev-mobile-body .gurus-header > p,
body.dev-mobile-body .etf-header p,
body.dev-mobile-body .strategy-header p,
body.dev-mobile-body .factor-screen-header p {
  color: #3f6b5e;
}

/* ── Real-estate page header → indigo hero band ── */
body.dev-mobile-body .re-header {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 24px 26px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, var(--dev-indigo-deep), #312e81 60%, #3730a3);
  box-shadow: 0 18px 44px rgba(30, 27, 75, 0.3);
}
body.dev-mobile-body .re-header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 360px;
  max-width: 50%;
  height: 110px;
  background: var(--dev-re-hero) right bottom / contain no-repeat;
  pointer-events: none;
}
body.dev-mobile-body .re-header h1 {
  color: #ffffff;
  position: relative;
}
body.dev-mobile-body .re-header p {
  color: #c7d2fe;
  position: relative;
}

/* Search band → softer card with accent */
body.dev-mobile-body .re-search-band {
  border-radius: 16px;
  border: 1px solid #e2e8f5;
  box-shadow: 0 10px 28px rgba(30, 27, 75, 0.07);
  border-top: 3px solid var(--dev-indigo);
}
body.dev-mobile-body .re-results-panel,
body.dev-mobile-body .re-detail-panel {
  border-radius: 16px;
  border-color: #e6e9f3;
  box-shadow: 0 10px 28px rgba(30, 27, 75, 0.06);
}
/* Keep the primary real-estate action indigo (the mobile :root makes --primary teal). */
body.dev-mobile-body #re-search-btn {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  border-color: #4f46e5;
  color: #fff;
}
body.dev-mobile-body #re-search-btn:hover {
  background: linear-gradient(135deg, #4f46e5, #4338ca);
}

/* Empty states → friendly illustration instead of a barren void */
body.dev-mobile-body .re-detail-panel {
  min-height: 360px;
}
body.dev-mobile-body .re-empty,
body.dev-mobile-body .re-detail-empty {
  min-height: 220px;
  color: #6b7da6;
  font-weight: 600;
}
/* ::before is block-level so its size applies even when JS sets the parent's inline display. */
body.dev-mobile-body .re-empty::before,
body.dev-mobile-body .re-detail-empty::before {
  content: "";
  display: block;
  width: 96px;
  height: 96px;
  margin: 8px auto 16px;
  background: var(--dev-ill-search) center / contain no-repeat;
  opacity: 0.9;
}
body.dev-mobile-body .re-detail-empty::before {
  width: 120px;
  background-image: var(--dev-ill-chart);
}

@media (max-width: 760px) {
  :root {
    --primary: #0f766e;
    --primary-light: #e6fffb;
    --primary-lighter: #f0fdfa;
    --primary-dark: #115e59;
    --bg: #f7faf9;
    --card: #ffffff;
    --border: #dbe7e4;
    --border-strong: #b9cbc7;
    --text: #10231f;
    --text-secondary: #4b635e;
    --text-muted: #7b918c;
    --header-h: 88px;
    --stepper-h: 58px;
    --nav-h: 76px;
  }

  html,
  body {
    background: var(--bg);
  }

  body.dev-mobile-body {
    font-size: 15px;
    color: var(--text);
    -webkit-tap-highlight-color: rgba(20, 184, 166, 0.18);
  }

  .header {
    min-height: 0;
    height: auto;
    padding: 10px 14px 8px;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    background: rgba(255, 255, 255, 0.92) !important;
    color: var(--text);
    border-bottom: 1px solid rgba(15, 118, 110, 0.12);
    box-shadow: 0 10px 28px rgba(16, 35, 31, 0.08);
    backdrop-filter: blur(18px);
  }

  .header-logo {
    color: var(--text);
    font-size: 16px;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    order: 1;
  }

  .header-logo-text {
    color: var(--text);
  }

  .header-logo-mark {
    width: 34px;
    height: 34px;
    border-radius: 8px;
  }

  .header-mobile-toggle {
    order: 3;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid rgba(15, 118, 110, 0.14);
    border-radius: 999px;
    background: #10231f;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
  }

  .header-action-link,
  .admin-header-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 9px;
    border-radius: 999px;
    background: #f4fbf8;
    color: #31524b;
    border: 1px solid rgba(15, 118, 110, 0.12);
    font-size: 11px;
    font-weight: 800;
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
  }

  .header-user {
    display: flex;
    justify-content: flex-start;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 46%;
    margin-left: auto;
    margin-right: 8px;
    order: 2;
  }

  .header-mobile-links {
    order: 4;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .header-mobile-links.has-admin {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .auth-btn {
    min-height: 32px;
    border-radius: 999px;
    background: #10231f;
    color: #fff;
    border: 0;
    padding: 6px 10px;
    font-size: 11px;
  }

  .header-nav {
    order: 5;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
  }

  .header-action-link + .header-action-link,
  .header-action-link + .admin-header-link {
    margin-left: 0;
  }

  body.dev-mobile-body:not(.mobile-header-expanded) .header {
    padding-bottom: 10px;
  }

  body.dev-mobile-body:not(.mobile-header-expanded) .header-mobile-links,
  body.dev-mobile-body:not(.mobile-header-expanded) .header-action-link,
  body.dev-mobile-body:not(.mobile-header-expanded) .admin-header-link,
  body.dev-mobile-body:not(.mobile-header-expanded) .header-nav,
  body.dev-mobile-body:not(.mobile-header-expanded) .header-lab-menu {
    display: none !important;
  }

  body.dev-mobile-body.mobile-header-expanded .header-mobile-links {
    display: grid !important;
  }

  body.dev-mobile-body.mobile-header-expanded .header-action-link,
  body.dev-mobile-body.mobile-header-expanded .admin-header-link {
    display: inline-flex !important;
  }

  body.dev-mobile-body.mobile-header-expanded .header-user {
    display: flex !important;
  }

  body.dev-mobile-body.mobile-header-expanded .header-nav {
    display: grid !important;
  }

  .user-chip {
    max-width: 100%;
    padding: 6px 10px;
    background: #e2e8f0;
    border-color: #cbd5e1;
    color: #334155;
  }

  .user-chip:hover {
    background: #dbe4ef;
    color: #1e293b;
  }

  .user-name,
  .user-public-id {
    color: #334155;
  }

  .user-public-id {
    font-size: 12px;
    font-weight: 800;
  }

  .nav-dropdown-trigger {
    min-height: 38px;
    border-radius: 999px;
    background: #eef8f5;
    color: #31524b;
    border: 1px solid rgba(15, 118, 110, 0.12);
    font-size: 13px;
    font-weight: 800;
  }

  body.dev-mobile-body .header-nav .nav-dropdown-trigger {
    padding-left: 4px;
    padding-right: 4px;
    font-size: 11.5px;
  }

  body.dev-mobile-body #stock-nav-trigger {
    background: #ecfdf5 !important;
    color: #064e3b !important;
    -webkit-text-fill-color: #064e3b !important;
    border-color: rgba(4, 120, 87, 0.20) !important;
  }

  body.dev-mobile-body #real-estate-nav-trigger {
    background: #eef2ff !important;
    color: #312e81 !important;
    -webkit-text-fill-color: #312e81 !important;
    border-color: rgba(79, 70, 229, 0.22) !important;
  }

  body.dev-mobile-body #crypto-nav-trigger {
    background: #ecfeff !important;
    color: #155e75 !important;
    -webkit-text-fill-color: #155e75 !important;
    border-color: rgba(8, 145, 178, 0.22) !important;
  }

  body.dev-mobile-body #macro-nav-trigger {
    background: #f0fdfa !important;
    color: #0f766e !important;
    -webkit-text-fill-color: #0f766e !important;
    border-color: rgba(13, 148, 136, 0.20) !important;
  }

  body.dev-mobile-body #stock-nav-trigger.is-open {
    background: #064e3b !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border-color: #064e3b !important;
  }

  body.dev-mobile-body #real-estate-nav-trigger.is-open {
    background: #312e81 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border-color: #312e81 !important;
  }

  body.dev-mobile-body #crypto-nav-trigger.is-open {
    background: #155e75 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border-color: #155e75 !important;
  }

  body.dev-mobile-body #macro-nav-trigger.is-open {
    background: #0f766e !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border-color: #0f766e !important;
  }

  body.dev-mobile-body #stock-nav-trigger .nav-dropdown-label,
  body.dev-mobile-body #stock-nav-trigger .lab-caret {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
  }

  body.dev-mobile-body #real-estate-nav-trigger .nav-dropdown-label,
  body.dev-mobile-body #real-estate-nav-trigger .lab-caret {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
  }

  body.dev-mobile-body #crypto-nav-trigger .nav-dropdown-label,
  body.dev-mobile-body #crypto-nav-trigger .lab-caret {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
  }

  body.dev-mobile-body #macro-nav-trigger .nav-dropdown-label,
  body.dev-mobile-body #macro-nav-trigger .lab-caret {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
  }

  .lab-caret {
    color: currentColor !important;
  }

  .header-lab-menu {
    top: calc(100% - 4px);
    left: 12px !important;
    right: 12px;
    min-width: 0;
    max-height: min(72vh, 560px);
    overflow-y: auto;
    grid-template-columns: 1fr;
    padding: 10px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(15, 118, 110, 0.16);
    box-shadow: 0 22px 60px rgba(16, 35, 31, 0.2);
  }

  .header-lab-menu-link-grid {
    display: grid;
    gap: 4px;
  }

  .header-lab-menu-link-grid-paid {
    grid-template-columns: 1fr;
  }

  .header-lab-menu-title {
    color: #647d77;
  }

  .header-lab-menu a {
    color: #24413b;
    min-height: 42px;
    border-radius: 12px;
    padding: 11px 12px;
    background: #f7faf9;
  }

  .header-lab-menu a.active,
  .header-lab-menu a:hover {
    color: #0f766e;
    background: #e6fffb;
  }

  .header-lab-menu a.nav-paid-planned {
    color: #7c4a03;
    background: #fff7ed;
    border-color: #fed7aa;
  }

  .stepper-bar {
    align-items: stretch;
    justify-content: flex-start;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    pointer-events: none;
  }

  .stepper {
    max-width: none;
    padding: 0;
    gap: 8px;
    overflow-x: auto;
    pointer-events: auto;
    scrollbar-width: none;
  }

  .stepper::-webkit-scrollbar {
    display: none;
  }

  .step {
    min-width: 42px;
    height: 42px;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(15, 118, 110, 0.12);
    box-shadow: 0 8px 22px rgba(16, 35, 31, 0.08);
  }

  .step-num {
    width: 28px;
    height: 28px;
    font-size: 13px;
    background: #e4efec;
    color: #55706a;
  }

  .step.active {
    min-width: 104px;
    padding: 0 10px;
    flex-direction: row;
    background: #10231f;
    border-color: #10231f;
  }

  .step.active .step-num {
    background: #2dd4bf;
    color: #062c27;
    box-shadow: none;
  }

  .step.active .step-label {
    display: block;
    color: #fff;
    font-size: 11px;
    white-space: nowrap;
  }

  .step.completed .step-num {
    background: #99f6e4;
    color: #115e59;
  }

  .step-line {
    display: none;
  }

  .step-content {
    background:
      linear-gradient(180deg, rgba(240, 253, 250, 0.95), rgba(247, 250, 249, 1) 220px),
      var(--bg);
    scroll-padding-top: 16px;
  }

  .panel-inner {
    padding: 18px 14px 34px;
  }

  .step-header {
    margin: 8px 2px 18px;
  }

  .step-header h2 {
    font-size: 24px;
    line-height: 1.22;
    letter-spacing: 0;
  }

  .step-header p {
    margin-top: 7px;
    color: #5d756f;
    font-size: 14px;
    line-height: 1.55;
  }

  .section {
    margin-bottom: 14px;
    padding: 18px 15px;
    border-radius: 18px;
    border-color: rgba(15, 118, 110, 0.13);
    box-shadow: 0 10px 30px rgba(16, 35, 31, 0.06);
    overflow: hidden;
  }

  .section h3 {
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 15px;
    line-height: 1.35;
    margin-bottom: 13px;
  }

  .hint-text {
    line-height: 1.45;
    display: block;
    margin-top: 3px;
  }

  .dev-accordion-section {
    padding: 0;
  }

  .dev-accordion-section > h3 {
    min-height: 56px;
    margin: 0;
    padding: 16px 44px 16px 16px;
    position: relative;
    cursor: pointer;
    user-select: none;
  }

  .dev-accordion-section > h3::after {
    content: "";
    position: absolute;
    top: 19px;
    right: 16px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #e6fffb;
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.16);
  }

  .dev-accordion-section > h3::before {
    content: "";
    position: absolute;
    top: 25px;
    right: 23px;
    width: 7px;
    height: 7px;
    border-right: 2px solid #0f766e;
    border-bottom: 2px solid #0f766e;
    transform: rotate(45deg);
    transition: transform 0.16s ease;
    z-index: 1;
  }

  .dev-accordion-section.dev-open > h3::before {
    top: 27px;
    transform: rotate(225deg);
  }

  .dev-accordion-section.dev-collapsed > :not(h3) {
    display: none !important;
  }

  .dev-accordion-section.dev-open > :not(h3) {
    margin-left: 15px;
    margin-right: 15px;
  }

  .dev-accordion-section.dev-open > h3 {
    border-bottom: 1px solid rgba(15, 118, 110, 0.1);
    margin-bottom: 16px;
  }

  .dev-accordion-section.dev-open > h3 + * {
    margin-top: 0;
  }

  .card-grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5,
  .filter-grid,
  .factor-items,
  .summary-grid,
  .metrics-grid {
    grid-template-columns: 1fr !important;
  }

  .opt-card,
  .filter-chk,
  .summary-item,
  .metric-card,
  .factor-item {
    border-radius: 16px;
  }

  .opt-card {
    min-height: 70px;
    padding: 16px;
    text-align: left;
    border-width: 1px;
    box-shadow: 0 4px 16px rgba(16, 35, 31, 0.04);
    position: relative;
  }

  .opt-card.sm {
    min-height: 48px;
    justify-content: center;
    padding: 12px 14px;
  }

  .opt-card.active {
    border-color: #14b8a6;
    background: #ecfdf5;
    box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.16), 0 10px 26px rgba(15, 118, 110, 0.11);
  }

  .opt-card.active::after {
    content: "✓";
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #0f766e;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
  }

  .opt-card.active .opt-title,
  .opt-card.active .opt-sub {
    color: #0f766e;
  }

  .opt-title {
    font-size: 16px;
  }

  .opt-sub {
    font-size: 12px;
    line-height: 1.45;
  }

  .filter-chk {
    min-height: 46px;
    padding: 12px 14px;
  }

  .big-range {
    display: grid;
    gap: 14px;
  }

  .big-range input[type="range"] {
    width: 100%;
    height: 8px;
  }

  .big-range input[type="range"]::-webkit-slider-thumb {
    width: 30px;
    height: 30px;
    background: #0f766e;
  }

  .big-display {
    min-width: 0;
    padding: 14px;
    border-radius: 16px;
    background: #f0fdfa;
    font-size: 36px;
  }

  .range-hint {
    margin: 0;
  }

  .date-section,
  .capital-input,
  .cost-row,
  .sl-tp-row,
  .factor-weight-area,
  .section-title {
    align-items: stretch;
    flex-direction: column;
  }

  .date-arrow {
    display: none;
  }

  .date-input input,
  .capital-input input {
    min-height: 48px;
    border-radius: 14px;
    font-size: 16px;
    border-color: rgba(15, 118, 110, 0.18);
    background: #fbfefd;
  }

  .date-input input:focus,
  .capital-input input:focus {
    border-color: #0f766e;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.14);
  }

  .capital-input .unit {
    align-self: flex-end;
  }

  .period-presets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .period-chip {
    min-height: 40px;
    border-radius: 999px;
    background: #f7faf9;
    font-size: 13px;
  }

  .cost-table {
    gap: 8px;
  }

  .cost-row,
  .cost-hint {
    border-radius: 14px;
  }

  .factor-cat-header {
    border-left-width: 0;
    border-radius: 14px;
    padding: 12px;
  }

  .factor-toggle-area {
    align-items: flex-start;
  }

  .toggle-switch {
    width: 46px;
    height: 26px;
  }

  .toggle-slider:before {
    width: 20px;
    height: 20px;
  }

  input:checked + .toggle-slider:before {
    transform: translateX(20px);
  }

  .summary-item.col-span-2 {
    grid-column: auto;
  }

  .summary-item,
  .metric-card {
    padding: 15px;
    background: #fbfefd;
  }

  .metric-card.highlight {
    background: linear-gradient(135deg, #ecfdf5, #f0fdfa);
  }

  .metric-value {
    font-size: 22px;
  }

  .run-btn-big {
    position: sticky;
    bottom: calc(var(--nav-h) + 10px);
    z-index: 5;
    min-height: 56px;
    border-radius: 18px;
    background: linear-gradient(135deg, #0f766e, #10231f);
    box-shadow: 0 16px 34px rgba(15, 118, 110, 0.24);
  }

  .chart-wrap {
    height: 260px;
  }

  .chart-small {
    height: 220px;
  }

  .table-wrap {
    margin: 0 -14px;
    padding: 0 14px 4px;
    border-radius: 14px;
  }

  table {
    min-width: 680px;
  }

  .step-nav-bar {
    height: calc(var(--nav-h) + env(safe-area-inset-bottom));
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(18px);
    box-shadow: 0 -16px 32px rgba(16, 35, 31, 0.1);
  }

  .btn-step {
    min-width: 96px;
    min-height: 48px;
    border-radius: 16px;
    font-size: 14px;
  }

  .btn-next {
    background: #10231f;
    border-color: #10231f;
  }

  .step-progress {
    display: flex;
    min-width: 56px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
  }

  .export-btn {
    min-height: 38px;
    border-radius: 999px;
  }

  #results-panel .section-title {
    gap: 10px;
  }

  #results-panel .section-title > div {
    width: 100%;
    margin-left: 0 !important;
    flex-wrap: wrap;
  }

  .auth-modal-panel {
    border-radius: 22px;
  }

  /* Defensive: keep flex header/title rows and long strings from poking past the
     viewport (these would otherwise be clipped by the overflow guard). */
  .etf-section-title,
  .factor-screen-panel .section-title,
  .re-section-head,
  .section h3 {
    flex-wrap: wrap;
  }

  .factor-screen-panel,
  .etf-section-title,
  .re-card {
    min-width: 0;
  }

  .opt-title,
  .opt-sub,
  .intro-card p,
  .re-card-title {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* ── Real-estate detail / 저평가 판단 results: keep within the viewport ──
     Grid & flex items default to min-width:auto and refuse to shrink below their
     content, so the single-column `.re-layout` track ballooned to ~720px and the
     overflow guard clipped the right edge. Force the items to shrink, collapse the
     inner grids, and rein in chart.js canvases that hold a stale inline pixel width. */
  .re-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .re-results-panel,
  .re-detail-panel,
  .re-metric-grid,
  .re-metric-card,
  .re-peak-compare,
  .re-chart-wrap,
  .re-stat-grid,
  .re-region-stat-grid,
  .re-peak-categories,
  .re-peak-metrics,
  .re-peak-region-stats,
  .re-ai-report-card {
    min-width: 0 !important;
    max-width: 100%;
  }
  .re-metric-grid,
  .re-stat-grid,
  .re-peak-categories {
    grid-template-columns: 1fr !important;
  }
  /* chart.js canvas: scale down to its container instead of forcing the panel wide */
  .re-chart-wrap {
    overflow: hidden;
  }
  .re-chart-wrap canvas {
    max-width: 100% !important;
    height: auto !important;
  }
  /* wide metrics table scrolls inside its own box */
  .re-peak-metrics {
    overflow-x: auto;
  }
}

@media (max-width: 380px) {
  .header-logo-text {
    display: none;
  }

  .btn-step {
    min-width: 82px;
    padding: 10px 12px;
  }
}


/* ───────────────────── Real-estate undervalued mobile popup ───────────────────── */


/* ───────────────────── Dev-only: real-estate undervalued mobile ───────────────────── */

@media (max-width: 760px) {
  .re-stat-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch;
  }

  .re-stat {
    display: grid;
    align-content: start;
    gap: 3px;
    padding: 9px 6px;
    min-width: 0;
    border-radius: 12px;
  }

  .re-stat span,
  .re-stat .re-stat-head {
    display: block;
    min-width: 0;
    font-size: 10px;
    line-height: 1.25;
    word-break: keep-all;
  }

  .re-stat b,
  .re-stat .re-valuation-signal {
    display: block;
    min-width: 0;
    font-size: 11px;
    line-height: 1.18;
    word-break: break-word;
  }

  .re-upside-stat b {
    font-size: 10px !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere;
  }

  #re-stat-latest {
    font-size: 11px !important;
    line-height: 1.18 !important;
    overflow-wrap: anywhere;
  }

  #re-stat-latest .re-stat-inline {
    display: block;
    font-size: 9px !important;
    line-height: 1.12 !important;
    letter-spacing: -0.04em;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #re-stat-latest .re-stat-inline-date {
    display: block;
    margin-top: 1px;
    font-size: 8px !important;
    line-height: 1.1 !important;
    color: #64748b;
  }

  .re-market-flow-stat-head {
    gap: 2px;
  }

  .re-stat-head-btn {
    font-size: 10px;
    line-height: 1.1;
  }

  .re-valuation-signal small {
    display: block;
    margin-top: 3px;
    font-size: 9px;
    line-height: 1.2;
  }

  #re-undervalued-section {
    display: grid;
    gap: 14px;
  }

  .dev-re-inline-shell {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
  }

  .dev-re-inline-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    padding: 0;
  }

  .dev-re-insight-shell .dev-re-inline-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .dev-re-inline-track {
    display: none;
  }

  .dev-re-inline-tab {
    min-height: 46px;
    padding: 0 8px;
    border: 1px solid rgba(15, 118, 110, 0.28);
    border-radius: 14px;
    background: #dff7ef;
    color: #115e59;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    white-space: normal;
    box-shadow: 0 8px 18px rgba(15, 118, 110, 0.12);
  }

  .dev-re-insight-shell .dev-re-inline-tab {
    min-height: 40px;
    padding: 0 4px;
    font-size: 10px;
    letter-spacing: -0.03em;
  }

  .dev-re-inline-tab-graph {
    grid-column: 1 / span 3;
    background: #dbeafe;
    border-color: rgba(37, 99, 235, 0.34);
    color: #1e40af;
  }

  .dev-re-inline-tab-table {
    grid-column: 4 / span 2;
    background: #ffedd5;
    border-color: rgba(234, 88, 12, 0.34);
    color: #9a3412;
  }

  .re-peak-boundaries {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    align-items: center;
    width: 100%;
  }

  .re-peak-boundary {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    grid-template-columns: auto 42px auto;
    gap: 4px;
    align-items: center;
  }

  .re-peak-boundary label,
  .re-peak-boundary span {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
  }

  .re-peak-boundary input {
    width: 42px !important;
    min-width: 0;
    height: 30px;
    padding: 4px 5px;
    font-size: 12px;
    text-align: center;
  }

  .dev-re-inline-modal[hidden] {
    display: none !important;
  }

  .dev-re-inline-modal {
    position: fixed;
    inset: 58px 0 0;
    z-index: 10000;
    display: grid;
    align-items: start;
    padding: 8px 10px 10px;
  }

  .dev-re-inline-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.46);
    backdrop-filter: blur(3px);
  }

  .dev-re-inline-modal-panel {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    height: calc(100dvh - 76px);
    max-height: calc(100dvh - 76px);
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
  }

  .dev-re-inline-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  }

  .dev-re-inline-modal-title {
    min-width: 0;
    color: #10231f;
    font-size: 15px;
    font-weight: 850;
  }

  .dev-re-inline-modal-close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: #10231f;
    color: #fff;
    font-size: 20px;
    line-height: 1;
  }

  .dev-re-inline-modal-body {
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
  }

  .dev-re-inline-modal-body #re-main-chart-wrap,
  .dev-re-inline-modal-body .re-metric-card,
  .dev-re-inline-modal-body .re-peak-category,
  .dev-re-inline-modal-body .re-peak-region-stats,
  .dev-re-inline-modal-body .re-peak-metrics {
    margin: 0;
    border: 0;
    box-shadow: none;
  }

  .dev-re-inline-modal-body #re-main-chart-wrap,
  .dev-re-inline-modal-body .re-metric-card .re-chart-wrap,
  .dev-re-inline-modal-body .re-peak-chart-wrap {
    height: min(58dvh, 460px);
    min-height: 280px;
  }

  .dev-re-inline-modal-body .re-peak-metrics {
    width: 100%;
    max-width: 100%;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
  }

  .re-peak-metrics-mobile-cards {
    display: none;
  }

  .dev-re-inline-modal-body .re-peak-metrics-table {
    display: none;
  }

  .dev-re-inline-modal-body .re-peak-metrics-mobile-cards {
    display: grid;
    width: 100%;
    max-width: 100%;
    gap: 8px;
    box-sizing: border-box;
  }

  .dev-re-inline-modal-body .re-peak-metrics-mobile-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    gap: 8px;
    align-items: stretch;
    padding: 11px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: #f8fafc;
    box-sizing: border-box;
  }

  .dev-re-inline-modal-body .re-peak-metrics-mobile-card b {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #10231f;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
  }

  .dev-re-inline-modal-body .re-peak-metrics-mobile-card span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: #fff;
  }

  .dev-re-inline-modal-body .re-peak-metrics-mobile-card em {
    flex: 0 0 auto;
    color: #64748b;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
  }

  .dev-re-inline-modal-body .re-peak-metrics-mobile-card strong {
    min-width: 0;
    color: #0f766e;
    font-size: 12px;
    font-weight: 850;
    overflow-wrap: anywhere;
    text-align: right;
  }

  body.dev-re-inline-modal-open {
    overflow: hidden;
  }

  .dev-re-inline-source-hidden {
    display: none !important;
  }

  .re-chart-wrap,
  #re-main-chart-wrap {
    position: relative;
  }

  .dev-re-chart-close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 20;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.2);
    pointer-events: auto;
  }

  .dev-re-chart-close-btn-attached {
    background: rgba(15, 23, 42, 0.9);
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.28);
  }
}

/* Mobile fixes for real-estate recommendation cards/modals and auto-trading */
@media (max-width: 760px) {
  body.dev-mobile-body .real-estate-view .re-container,
  body.dev-mobile-body .crypto-view .crypto-shell {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  body.dev-mobile-body .real-estate-view .re-market-result,
  body.dev-mobile-body .real-estate-view .re-market-kb-result,
  body.dev-mobile-body .real-estate-view .re-market-kb-tier-panel,
  body.dev-mobile-body .real-estate-view .re-market-kb-chart-wrap,
  body.dev-mobile-body .real-estate-view .re-market-kb-table-wrap,
  body.dev-mobile-body .real-estate-view .re-market-tier-cards,
  body.dev-mobile-body .real-estate-view .re-market-tier-card,
  body.dev-mobile-body .real-estate-view .re-market-basis-card,
  body.dev-mobile-body .real-estate-view .re-market-summary,
  body.dev-mobile-body .real-estate-view .re-market-tier-analysis {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }

  body.dev-mobile-body .real-estate-view .re-market-kb-result,
  body.dev-mobile-body .real-estate-view .re-market-kb-tier-panel {
    grid-template-columns: minmax(0, 1fr) !important;
    overflow-x: hidden;
  }

  body.dev-mobile-body .real-estate-view .re-market-basis-select {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px;
  }

  body.dev-mobile-body .real-estate-view .re-market-basis-card {
    min-height: 0;
    gap: 4px;
    padding: 10px;
  }

  body.dev-mobile-body .real-estate-view .re-market-basis-card small {
    display: none;
  }

  body.dev-mobile-body .real-estate-view .re-market-controls {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px;
    padding: 10px;
  }

  body.dev-mobile-body .real-estate-view .re-market-controls .re-reset-btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  body.dev-mobile-body .real-estate-view .re-market-kb-tier-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: auto;
  }

  body.dev-mobile-body .real-estate-view .re-market-tier-analysis {
    gap: 10px;
    padding: 10px;
  }

  body.dev-mobile-body .real-estate-view #re-market-tier-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px;
    width: auto;
  }

  body.dev-mobile-body .real-estate-view .re-market-tier-card {
    width: auto;
    padding: 8px;
  }

  body.dev-mobile-body .real-estate-view .re-market-tier-card .re-market-tier-multi p {
    grid-template-columns: 29px minmax(35px, 1fr) auto;
    gap: 3px;
  }

  body.dev-mobile-body .real-estate-view .re-market-tier-card .re-market-ultra-boxes {
    grid-template-columns: repeat(5, 6px);
    grid-auto-rows: 6px;
    gap: 2px;
  }

  body.dev-mobile-body .real-estate-view .re-market-tier-card .re-market-ultra-boxes .re-market-flow-box {
    width: 6px;
    height: 6px;
  }

  body.dev-mobile-body .real-estate-view .re-market-kb-tier-card {
    width: auto;
    max-width: 100%;
    padding: 8px;
  }

  body.dev-mobile-body .real-estate-view .re-market-kb-tier-card p {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px;
  }

  body.dev-mobile-body .real-estate-view .re-market-kb-tier-head small {
    min-width: 0;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.dev-mobile-body .real-estate-view .re-market-kb-chart-wrap,
  body.dev-mobile-body .real-estate-view .re-market-kb-tier-panel {
    padding: 10px;
  }

  body.dev-mobile-body .real-estate-view .re-market-kb-chart {
    height: 220px;
    min-height: 220px;
  }

  body.dev-mobile-body .re-recommendation-controls,
  body.dev-mobile-body #re-admin-quick-deals-controls {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  body.dev-mobile-body .re-recommendation-controls > *,
  body.dev-mobile-body .re-recommendation-summary > *,
  body.dev-mobile-body .re-field,
  body.dev-mobile-body .re-field select,
  body.dev-mobile-body .re-field input,
  body.dev-mobile-body .re-reset-btn,
  body.dev-mobile-body .re-comparison-run {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.dev-mobile-body .re-reset-btn,
  body.dev-mobile-body .re-comparison-run {
    width: 100%;
  }

  body.dev-mobile-body .re-recommendation-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  body.dev-mobile-body .re-rec-summary-main,
  body.dev-mobile-body .re-rec-count-wrap,
  body.dev-mobile-body .re-recommendation-summary span {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  body.dev-mobile-body .re-recommendation-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body.dev-mobile-body .re-rec-main-table {
    width: 100%;
    min-width: 0 !important;
    table-layout: fixed;
  }

  body.dev-mobile-body .re-upgrade-table {
    width: max-content !important;
    min-width: 1120px !important;
    table-layout: auto !important;
  }

  body.dev-mobile-body .re-upgrade-table th,
  body.dev-mobile-body .re-upgrade-table td {
    display: table-cell !important;
    width: auto !important;
    min-width: 72px !important;
    max-width: 170px !important;
    padding: 9px 10px !important;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: keep-all;
    font-size: 12px !important;
    line-height: 1.35;
  }

  body.dev-mobile-body .re-upgrade-table th:nth-child(1),
  body.dev-mobile-body .re-upgrade-table td:nth-child(1),
  body.dev-mobile-body .re-upgrade-table th:nth-child(3),
  body.dev-mobile-body .re-upgrade-table td:nth-child(3),
  body.dev-mobile-body .re-upgrade-table th:nth-child(4),
  body.dev-mobile-body .re-upgrade-table td:nth-child(4),
  body.dev-mobile-body .re-upgrade-table th:nth-child(12),
  body.dev-mobile-body .re-upgrade-table td:nth-child(12) {
    min-width: 52px !important;
    max-width: 78px !important;
    text-align: center !important;
  }

  body.dev-mobile-body .re-upgrade-table th.re-upgrade-name-head,
  body.dev-mobile-body .re-upgrade-table td.re-upgrade-name-col {
    min-width: 190px !important;
    max-width: 240px !important;
    text-align: left !important;
  }

  body.dev-mobile-body .re-upgrade-table .re-upgrade-name-cell {
    width: 100%;
    max-width: none;
    align-items: flex-start;
  }

  body.dev-mobile-body .re-upgrade-table .re-upgrade-name-cell .re-table-link {
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
  }

  body.dev-mobile-body .re-rec-main-table th,
  body.dev-mobile-body .re-rec-main-table td {
    display: table-cell !important;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  body.dev-mobile-body .re-rec-main-table th:nth-child(n+4),
  body.dev-mobile-body .re-rec-main-table td:nth-child(n+4) {
    display: none !important;
  }

  body.dev-mobile-body .re-rec-main-table th:nth-child(1),
  body.dev-mobile-body .re-rec-main-table td:nth-child(1) {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
  }

  body.dev-mobile-body .re-rec-main-table th:nth-child(2),
  body.dev-mobile-body .re-rec-main-table td:nth-child(2) {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body.dev-mobile-body .re-rec-main-table th:nth-child(3),
  body.dev-mobile-body .re-rec-main-table td:nth-child(3) {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    text-align: center !important;
  }

  body.dev-mobile-body #re-admin-quick-deals-table-wrap,
  body.dev-mobile-body #re-representative-view .re-table-wrap,
  body.dev-mobile-body .re-commute-table-wrap,
  body.dev-mobile-body .re-rebuild-table-wrap,
  body.dev-mobile-body .re-market-table-wrap,
  body.dev-mobile-body .re-market-shortage-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.dev-mobile-body #re-admin-quick-deals-table-wrap .re-recommendation-table {
    width: max-content !important;
    min-width: 1180px !important;
    table-layout: auto !important;
  }

  body.dev-mobile-body #re-admin-quick-deals-table-wrap .re-recommendation-table th,
  body.dev-mobile-body #re-admin-quick-deals-table-wrap .re-recommendation-table td {
    width: auto !important;
    min-width: 76px !important;
    max-width: 180px !important;
    padding: 9px 10px !important;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: keep-all;
    font-size: 12px !important;
    line-height: 1.35;
  }

  body.dev-mobile-body #re-admin-quick-deals-table-wrap .re-recommendation-table th:nth-child(1),
  body.dev-mobile-body #re-admin-quick-deals-table-wrap .re-recommendation-table td:nth-child(1),
  body.dev-mobile-body #re-admin-quick-deals-table-wrap .re-recommendation-table th:nth-child(3),
  body.dev-mobile-body #re-admin-quick-deals-table-wrap .re-recommendation-table td:nth-child(3) {
    min-width: 56px !important;
    max-width: 70px !important;
  }

  body.dev-mobile-body #re-admin-quick-deals-table-wrap .re-recommendation-table th:nth-child(2),
  body.dev-mobile-body #re-admin-quick-deals-table-wrap .re-recommendation-table td:nth-child(2) {
    min-width: 140px !important;
    max-width: 190px !important;
    text-align: left !important;
  }

  body.dev-mobile-body .re-rep-table {
    width: max-content !important;
    min-width: 1080px !important;
    table-layout: auto !important;
  }

  body.dev-mobile-body .re-rep-table th,
  body.dev-mobile-body .re-rep-table td {
    display: table-cell !important;
    width: auto !important;
    min-width: 74px !important;
    max-width: 170px !important;
    padding: 9px 10px !important;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: keep-all;
    font-size: 12px !important;
    line-height: 1.35;
  }

  body.dev-mobile-body .re-rep-table th:nth-child(1),
  body.dev-mobile-body .re-rep-table td:nth-child(1) {
    min-width: 140px !important;
    max-width: 190px !important;
    text-align: left !important;
  }

  body.dev-mobile-body .re-rep-table th:nth-child(2),
  body.dev-mobile-body .re-rep-table td:nth-child(2) {
    min-width: 62px !important;
    max-width: 74px !important;
    text-align: center !important;
  }

  body.dev-mobile-body .re-commute-table,
  body.dev-mobile-body .re-rebuild-table,
  body.dev-mobile-body .re-market-table,
  body.dev-mobile-body .re-market-shortage-table,
  body.dev-mobile-body .re-leader-table,
  body.dev-mobile-body .re-royal-table,
  body.dev-mobile-body .re-switch-rec-table {
    width: max-content;
    min-width: max(920px, 100%);
  }

  body.dev-mobile-body .re-market-table {
    min-width: 760px !important;
    font-size: 11px;
  }

  body.dev-mobile-body .re-market-table th:nth-child(7),
  body.dev-mobile-body .re-market-table td:nth-child(7),
  body.dev-mobile-body .re-market-table th:nth-child(8),
  body.dev-mobile-body .re-market-table td:nth-child(8),
  body.dev-mobile-body .re-market-table th:nth-child(9),
  body.dev-mobile-body .re-market-table td:nth-child(9) {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    text-align: center !important;
  }

  body.dev-mobile-body .re-market-kb-table {
    width: max-content;
    min-width: 620px !important;
    font-size: 11px;
  }

  body.dev-mobile-body .re-market-table-wrap,
  body.dev-mobile-body .re-market-kb-table-wrap {
    display: none;
  }

  body.dev-mobile-body .re-market-tier-region-panel {
    display: none !important;
  }

  body.dev-mobile-body .re-market-mobile-cards {
    display: grid;
    gap: 8px;
  }

  body.dev-mobile-body .re-market-mobile-card {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
  }

  body.dev-mobile-body .re-market-mobile-card header {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
  }

  body.dev-mobile-body .re-market-mobile-card header b {
    display: inline-grid;
    place-items: center;
    height: 24px;
    border-radius: 6px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
  }

  body.dev-mobile-body .re-market-mobile-card header strong {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.dev-mobile-body .re-market-mobile-main,
  body.dev-mobile-body .re-market-mobile-subgrid,
  body.dev-mobile-body .re-market-mobile-foot,
  body.dev-mobile-body .re-market-mobile-flow {
    display: grid;
    gap: 6px;
  }

  body.dev-mobile-body .re-market-mobile-main,
  body.dev-mobile-body .re-market-mobile-subgrid,
  body.dev-mobile-body .re-market-mobile-foot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.dev-mobile-body .re-market-mobile-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.dev-mobile-body #re-regional-undervaluation-view .re-market-controls {
    grid-template-columns: minmax(0, 1fr) 72px 58px !important;
    gap: 6px;
    padding: 10px;
  }

  body.dev-mobile-body #re-regional-undervaluation-view .re-market-controls .re-reset-btn {
    grid-column: auto;
    width: 58px;
    height: 34px;
    padding: 0;
    font-size: 11px;
  }

  body.dev-mobile-body #re-regional-undervaluation-view .re-market-table-wrap {
    display: none;
  }

  body.dev-mobile-body #re-regional-undervaluation-view .re-regional-mobile-cards {
    display: grid;
    gap: 8px;
  }

  body.dev-mobile-body #re-regional-undervaluation-view .re-regional-tier-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  body.dev-mobile-body #re-regional-undervaluation-view .re-regional-tier-card {
    padding: 9px;
  }

  body.dev-mobile-body .re-commute-table {
    min-width: max(1120px, 100%);
  }

  body.dev-mobile-body .re-commute-table th,
  body.dev-mobile-body .re-commute-table td {
    width: auto !important;
    min-width: 74px !important;
    max-width: 170px !important;
    padding: 9px 10px !important;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: keep-all;
    font-size: 12px !important;
    line-height: 1.35;
  }

  body.dev-mobile-body .re-commute-table th:nth-child(1),
  body.dev-mobile-body .re-commute-table td:nth-child(1),
  body.dev-mobile-body .re-commute-table th:nth-child(13),
  body.dev-mobile-body .re-commute-table td:nth-child(13) {
    min-width: 138px !important;
    max-width: 190px !important;
    text-align: left !important;
  }

  body.dev-mobile-body .re-commute-table th:nth-child(2),
  body.dev-mobile-body .re-commute-table td:nth-child(2) {
    min-width: 64px !important;
    max-width: 76px !important;
    text-align: center !important;
  }

  body.dev-mobile-body .auth-modal.re-apartment-card-modal {
    align-items: stretch;
    padding: 8px;
  }

  body.dev-mobile-body .auth-modal-panel.re-apartment-card-panel {
    width: calc(100vw - 16px);
    max-width: none;
    max-height: calc(100dvh - 16px);
    padding: 18px 10px 12px;
    box-sizing: border-box;
  }

  body.dev-mobile-body .re-apartment-card-body {
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px calc(env(safe-area-inset-bottom, 0px) + 12px);
  }

  body.dev-mobile-body .re-apartment-card-modal-wrap {
    width: 100%;
    max-width: 420px;
  }

  body.dev-mobile-body .re-apartment-card-modal-wrap .re-rec-square-card,
  body.dev-mobile-body .re-rec-square-card {
    aspect-ratio: auto;
    grid-template-rows: auto;
    min-height: 0;
  }

  body.dev-mobile-body .re-apartment-card-modal-wrap .re-rec-square-card {
    overflow: visible;
  }

  body.dev-mobile-body .auth-modal-panel.re-admin-related-panel {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    padding: 18px 8px 12px;
    box-sizing: border-box;
  }

  body.dev-mobile-body .re-admin-related-body {
    min-height: 0;
    max-height: none;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  }

  body.dev-mobile-body .re-admin-deal-card-grid-wrap {
    align-items: stretch;
    overflow-x: auto;
    overflow-y: visible;
  }

  body.dev-mobile-body .re-admin-deal-card {
    flex-basis: calc(100vw - 46px);
    width: calc(100vw - 46px);
    min-height: 0;
    overflow: visible;
  }

  body.dev-mobile-body .crypto-auto-layout,
  body.dev-mobile-body .crypto-auto-config,
  body.dev-mobile-body .crypto-auto-status,
  body.dev-mobile-body .crypto-auto-status-card,
  body.dev-mobile-body .crypto-auto-form-grid,
  body.dev-mobile-body .crypto-auto-progress,
  body.dev-mobile-body .crypto-auto-progress-grid,
  body.dev-mobile-body .crypto-auto-progress-card,
  body.dev-mobile-body .crypto-auto-aggregate-grid,
  body.dev-mobile-body .crypto-auto-aggregate-card,
  body.dev-mobile-body .crypto-auto-chart-card {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.dev-mobile-body .crypto-auto-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  body.dev-mobile-body .crypto-auto-actions .crypto-refresh-btn,
  body.dev-mobile-body #crypto-auto-refresh-btn {
    width: 100%;
  }

  body.dev-mobile-body .crypto-auto-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.dev-mobile-body .crypto-auto-table {
    min-width: 680px;
  }

  body.dev-mobile-body .crypto-auto-table td:first-child {
    min-width: 190px;
  }

  body.dev-mobile-body .crypto-auto-progress-head {
    align-items: flex-start;
    flex-direction: column;
  }

  body.dev-mobile-body .crypto-auto-card-actions {
    float: none;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
  }

  body.dev-mobile-body .crypto-auto-strategy-chip {
    border-radius: 8px;
    white-space: normal;
  }

  body.dev-mobile-body .crypto-auto-chart-card .chart-wrap,
  body.dev-mobile-body .crypto-auto-chart-card canvas {
    max-width: 100% !important;
  }

  body.dev-mobile-body .real-estate-view .re-help-tip,
  body.dev-mobile-body .real-estate-view .re-school-score-help::after {
    position: fixed;
    left: 50vw;
    right: auto;
    top: calc(var(--header-h) + 12px);
    bottom: auto;
    width: calc(100vw - 32px);
    max-width: 360px;
    transform: translateX(-50%);
    box-sizing: border-box;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  body.dev-mobile-body .real-estate-view .re-school-score-help:hover::after,
  body.dev-mobile-body .real-estate-view .re-school-score-help:focus::after {
    transform: translateX(-50%);
  }
}