/* ═══════════════════════════════════════════════════════
   금융상식 랩 — Global Styles
   Font: Pretendard (Korean), -apple-system fallback
═══════════════════════════════════════════════════════ */

:root {
  --bg:             #ffffff;
  --surface:        #ffffff;
  --surface-soft:   #f8f9fa;
  --surface-hover:  #eff6ff;
  --text:           #1a1a1a;
  --text-muted:     #555555;
  --text-subtle:    #767676; /* AA 대비 확보 (기존 #8a8a8a → 4.5:1 이상) */
  --border:         #e0e0e0;
  --border-strong:  #bdbdbd;
  --primary:        #1d4ed8;
  --primary-dark:   #1e3a8a;
  --primary-light:  #eff6ff;
  --accent:         #2563eb;
  --green:          #059669;
  --green-bg:       #ecfdf5;
  --red:            #dc2626;
  --red-bg:         #fef2f2;
  --yellow:         #eab308;
  --yellow-bg:      #fefce8;
  --sidebar-w:      268px;
  --topbar-h:       56px;
  --gnb-h:          40px; /* 8차 통합 GNB */
  --radius:         10px;
  --radius-sm:      6px;
  --shadow-sm:      0 1px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:         0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:      0 12px 40px rgba(0,0,0,.14);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

/* 한글 기본 폰트 크기 17px 이상 */
html { font-size: 17px; }

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-weight: 500;
  word-break: keep-all;
  word-wrap: break-word;
  font-feature-settings: "kern" 1, "liga" 1;
  letter-spacing: -0.01em; /* 한글 자간 절제 */
}
button, input, select, textarea { font: inherit; font-weight: 500; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* ApexCharts 전역 폰트 오버라이드 */
.apexcharts-text, .apexcharts-legend-text,
.apexcharts-tooltip, .apexcharts-xaxis-label,
.apexcharts-yaxis-label {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif !important;
}
.apexcharts-canvas { background: #fff !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

/* ═══════════════════════════════════════════════════════
   OVERLAY (mobile)
═══════════════════════════════════════════════════════ */
.overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15,23,42,.35);
  z-index: 40;
  backdrop-filter: blur(2px);
}
.overlay.show { display: block; }

/* ═══════════════════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════════════════ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  z-index: 50;
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* ── GNB: 상단 대메뉴 (8차 통합) ── */
.gnb {
  position: fixed; top: var(--topbar-h); left: 0; right: 0;
  height: 40px; z-index: 49;
  display: flex; align-items: center; gap: 4px;
  padding: 0 24px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.gnb button {
  border: 0; background: transparent;
  padding: 8px 12px; font-size: 13px; font-weight: 600;
  color: #475569; cursor: pointer; white-space: nowrap;
}
.gnb button:hover { color: #0f172a; background: #e2e8f0; border-radius: 6px; }
.topbar-toggle {
  display: inline-flex;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 1rem;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: background .15s, color .15s, border-color .15s;
}
.topbar-toggle:hover {
  background: var(--surface-soft);
  color: var(--primary);
  border-color: var(--primary);
}

.brand {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 0; background: none; border: none;
  flex-shrink: 0;
}
.brand-mark {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 55%, #2563eb 100%);
  box-shadow: 0 2px 8px rgba(0,120,212,.30);
  flex-shrink: 0;
}
.brand-text { display: flex; flex-direction: column; gap: 1px; }
.brand-name {
  font-size: .9rem; font-weight: 800; letter-spacing: .07em;
  color: #1a1a1a; line-height: 1;
}
.brand-sub { font-size: .68rem; color: var(--text-muted); font-weight: 500; }

.global-search { position:relative; display:flex; align-items:center; gap:7px; width:min(300px,25vw); min-width:180px; padding:0 9px; border:1px solid #cbd5e1; border-radius:8px; background:#f8fafc; }
.global-search:focus-within { border-color:#2563eb; background:#fff; box-shadow:0 0 0 2px rgba(37,99,235,.12); }
.global-search>i { color:#64748b; font-size:.76rem; }.global-search input { width:100%; min-width:0; height:31px; border:0; outline:0; background:transparent; color:var(--text); font:inherit; font-size:.75rem; }.global-search>button { display:grid; place-items:center; width:23px; height:23px; color:#fff; border-radius:5px; background:#2563eb; font-size:.65rem; }.global-search-results { position:absolute; z-index:80; top:calc(100% + 7px); left:0; width:min(500px,calc(100vw - 32px)); max-height:360px; overflow-y:auto; padding:6px; border:1px solid #bfdbfe; border-radius:10px; background:#fff; box-shadow:0 16px 36px rgba(15,23,42,.18); }.global-search-results[hidden] { display:none; }.global-search-result { display:block; width:100%; padding:10px; color:#334155; border-radius:7px; text-align:left; }.global-search-result:hover,.global-search-result:focus-visible { background:#eff6ff; }.global-search-result strong { display:block; color:#1e3a5f; font-size:.78rem; }.global-search-result p { margin:4px 0 0; color:#64748b; font-size:.7rem; line-height:1.45; }.global-search-state { margin:6px; color:#64748b; font-size:.74rem; }

.topbar-ticker {
  display: flex; align-items: center; gap: 6px;
  flex: 1; min-width: 0; overflow: hidden;
  font-size: .75rem; color: var(--text-muted);
  white-space: nowrap;
}
.ticker-item { display: flex; align-items: center; gap: 4px; margin-right: 10px; }
.ticker-label { color: var(--text-subtle); }
.ticker-item b { color: var(--text); font-weight: 650; }
.ticker-item em { font-style: normal; font-weight: 650; }
.ticker-stamp {
  color: var(--text-subtle);
  font-size: .68rem;
  padding-left: 8px;
  border-left: 1px solid var(--border);
}
.up { color: var(--green); }
.dn { color: var(--red); }

.visitor-badge {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 99px;
  font-size: .72rem; font-weight: 650; color: #1d4ed8;
  white-space: nowrap;
  flex-shrink: 0;
}
.visitor-badge i { color: var(--primary); }

.health-badge {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 99px;
  font-size: .72rem; color: var(--text-muted);
  flex-shrink: 0;
}
.health-docs-link { text-decoration: none; }
.health-docs-link:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-light);
}
.health-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--border-strong);
  transition: background .3s;
}

.auth-badge {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 99px;
  font-size: .74rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.auth-badge:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.auth-modal-backdrop { position: fixed; z-index: 2200; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(15,23,42,.58); backdrop-filter: blur(3px); }
.auth-modal-backdrop[hidden] { display: none; }
.auth-modal { position: relative; width: min(100%, 420px); padding: 28px; border-radius: 16px; background: #fff; box-shadow: 0 24px 70px rgba(15,23,42,.32); }
.auth-modal h2 { margin: 0; color: #0f172a; font-size: 1.3rem; }.auth-modal h2 + p { margin: 8px 0 18px; color: #64748b; font-size: .85rem; line-height: 1.5; }
.auth-modal-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; color: #64748b; border-radius: 8px; }.auth-modal-close:hover { color: #0f172a; background: #f1f5f9; }
.auth-tabs { display: flex; margin-bottom: 16px; border-bottom: 1px solid #e2e8f0; }.auth-tabs button { flex: 1; padding: 9px; color: #64748b; font-weight: 700; }.auth-tabs button.active { color: #1d4ed8; border-bottom: 2px solid #1d4ed8; }
.auth-modal form { display: grid; gap: 12px; }.auth-modal label { display: grid; gap: 6px; color: #475569; font-size: .78rem; font-weight: 700; }.auth-modal input { padding: 10px 11px; border: 1px solid #cbd5e1; border-radius: 7px; font: inherit; }.auth-modal input:focus { outline: 2px solid #bfdbfe; border-color: #2563eb; }
.auth-submit, .auth-logout { padding: 11px; color: #fff; border-radius: 7px; background: #1d4ed8; font-weight: 750; }.auth-submit:disabled { opacity: .6; }.auth-logout { width: 100%; margin-top: 16px; background: #475569; }.auth-error { min-height: 18px; margin: 0; color: #dc2626; font-size: .76rem; }.auth-modal h3 { margin: 22px 0 9px; color: #334155; font-size: .88rem; }.auth-modal small { color: #64748b; }.auth-activity { max-height: 220px; margin: 0; padding-left: 18px; overflow: auto; color: #475569; font-size: .78rem; line-height: 1.7; }

/* ── Enterprise 안내 모달 ── */
.enterprise-modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .45);
  padding: 16px;
}
.enterprise-modal-overlay[hidden] { display: none; }
.enterprise-modal {
  position: relative; width: min(92vw, 1600px); height: 90vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: auto;
  background: #fff; border-radius: 18px; padding: clamp(32px, 5vw, 72px);
  text-align: center; box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
}
.enterprise-modal-close {
  position: absolute; top: 20px; right: 20px;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); background: var(--surface-soft); border: none;
}
.enterprise-modal-close:hover { background: var(--border); color: var(--text); }
.enterprise-modal-icon {
  width: 78px; height: 78px; margin: 0 auto 24px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 55%, #2563eb 100%);
  color: #fff; font-size: 2rem;
  box-shadow: 0 4px 14px rgba(0, 120, 212, .35);
}
.enterprise-modal h3 { margin: 0 0 14px; font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 800; color: #1a1a1a; }
.enterprise-modal p { margin: 0 0 28px; font-size: clamp(1rem, 1.7vw, 1.25rem); color: var(--text-muted); line-height: 1.65; }
.enterprise-modal-cta {
  padding: 14px 36px; border-radius: 10px; border: none;
  background: var(--primary); color: #fff; font-size: 1rem; font-weight: 700;
}
.enterprise-modal-cta:hover { background: var(--primary-dark); }

/* ═══════════════════════════════════════════════════════
   LAYOUT SHELL
═══════════════════════════════════════════════════════ */
.layout {
  display: flex;
  padding-top: calc(var(--topbar-h) + var(--gnb-h)); /* 8차: GNB 오프셋 */
  height: 100vh;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════ */
.sidebar {
  position: fixed;
  top: calc(var(--topbar-h) + var(--gnb-h)); left: 0;
  width: var(--sidebar-w);
  height: calc(100vh - var(--topbar-h) - var(--gnb-h));
  /* 메뉴 항목만 스크롤한다. */
  overflow: hidden;
  background: #ffffff;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  z-index: 45;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}

.sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px 0 8px;
  display: flex; flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 우측 하단 AI 투자 도우미 */
.floating-chatbot { position: fixed; right: 24px; bottom: 24px; z-index: 100; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.floating-chatbot-trigger { display: inline-flex; align-items: center; gap: 9px; min-width: 54px; height: 54px; padding: 0 18px; color: #fff; border-radius: 999px; background: linear-gradient(135deg, #1d4ed8, #1e40af); box-shadow: 0 8px 22px rgba(30, 64, 175, .30); font-size: .82rem; font-weight: 800; transition: transform .15s, box-shadow .15s; }
.floating-chatbot-trigger i { font-size: 1.15rem; }.floating-chatbot-trigger:hover { transform: translateY(-2px); box-shadow: 0 11px 26px rgba(30, 64, 175, .38); }
.floating-chatbot-panel { width: min(360px, calc(100vw - 32px)); padding: 13px; border: 1px solid #bfdbfe; border-radius: 14px; background: #fff; box-shadow: 0 14px 36px rgba(15, 23, 42, .2); }.floating-chatbot-panel[hidden] { display: none; }
.floating-chatbot-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #123b68; font-size: .85rem; font-weight: 800; }.floating-chatbot-head span { display: inline-flex; align-items: center; gap: 7px; }.floating-chatbot-head span i { color: var(--primary); }.floating-chatbot-head button { display: grid; place-items: center; width: 28px; height: 28px; color: #64748b; border-radius: 50%; background: var(--surface-soft); }.floating-chatbot-head button:hover { color: var(--text); background: var(--border); }
.floating-chatbot-messages { display:flex; flex-direction:column; gap:12px; min-height:75px; max-height:260px; margin:14px 0 16px; overflow-y:auto; }.floating-chatbot-welcome { margin:0; padding:10px; color:#64748b; border-radius:9px; background:var(--surface-soft); font-size:.75rem; line-height:1.5; }.floating-chatbot-message { margin:0; padding:9px 10px; border-radius:9px; font-size:.75rem; line-height:1.5; word-break:break-word; }.floating-chatbot-message.is-user { align-self:flex-end; margin-left:28px; color:#475569; border:1px solid #dbe4ee; background:#fff; }.floating-chatbot-message.is-enterprise { align-self:flex-start; margin-right:14px; color:#1e40af; background:#dbeafe; font-weight:750; }
.floating-chatbot-form { display: flex; gap: 6px; }.floating-chatbot-form input { min-width: 0; flex: 1; height: 36px; padding: 0 10px; color: var(--text); border: 1px solid #bfdbfe; border-radius: 8px; background: #fff; font-size: .75rem; outline: none; }.floating-chatbot-form input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(0, 120, 212, .12); }.floating-chatbot-form button { width: 36px; height: 36px; color: #fff; border-radius: 8px; background: var(--primary); font-size: .75rem; }.floating-chatbot-form button:hover { background: var(--primary-dark); }
@media (max-width: 760px) { .floating-chatbot { right: 16px; bottom: 16px; }.floating-chatbot-trigger { width: 54px; padding: 0; justify-content: center; }.floating-chatbot-trigger span { display: none; } }

/* single nav item */
.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 20px;
  font-size: 1rem; font-weight: 500;
  color: var(--text-muted);
  border-radius: 0;
  cursor: pointer;
  transition: background .12s, color .12s;
  border-left: 3px solid transparent;
}
.nav-item i { width: 14px; text-align: center; font-size: .85rem; flex-shrink: 0; }
.nav-item:hover { background: var(--primary-light); color: var(--primary-dark); }
.nav-item.active {
  background: var(--primary-light);
  color: var(--primary-dark);
  border-left-color: var(--primary);
  font-weight: 700;
}
.nav-item.locked {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}
.nav-badge-hot { display: inline-flex; align-items: center; margin-left: auto; padding: 1px 7px; color: #fff; background: linear-gradient(135deg, #ef4444, #f97316); border-radius: 999px; font-size: .62rem; font-weight: 800; letter-spacing: .02em; }
.nav-item.locked::after {
  content: '\f023';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: .65rem;
  margin-left: auto;
  color: var(--text-muted);
}
.nav-home {
  font-size: 1rem; font-weight: 700; color: var(--text);
  padding: 8px 14px 8px 20px; margin-bottom: 4px;
}

/* section header (collapsible) */
.nav-section-hdr {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 9px 14px 9px 16px;
  font-size: 1rem; font-weight: 700;
  color: var(--text); letter-spacing: .04em;
  text-transform: uppercase;
  background: none; border: none;
  cursor: pointer;
  transition: background .12s;
}
.nav-section-hdr:hover { background: var(--primary-light); }
.nav-section-hdr > span {
  display: flex; align-items: center; gap: 8px;
}
.nav-section-hdr > span i { color: var(--primary); font-size: .9rem; }
.nav-chev { font-size: .65rem; color: var(--text-subtle); transition: transform .2s; }

/* children list (collapsible) */
.nav-children {
  display: none; overflow: hidden;
  background: #fafbfd;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.nav-children.open { display: block; }
.nav-children .nav-item { padding-left: 28px; font-size: .85rem; }

.nav-group-label {
  padding: 7px 14px 3px 28px;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-subtle);
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════
   CONTENT AREA
═══════════════════════════════════════════════════════ */
.content-wrap {
  flex: 1;
  margin-left: var(--sidebar-w);
  width: calc(100% - var(--sidebar-w));
  min-width: 0;
  display: flex; flex-direction: column;
  height: 100%;
  overflow: hidden;
  transition: margin-left .25s cubic-bezier(.4,0,.2,1), width .25s cubic-bezier(.4,0,.2,1);
  background: var(--bg);
}
.content-main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 28px 36px 48px;
  width: 100%;
}

/* breadcrumb */
.breadcrumb {
  font-size: 1rem; color: var(--text-muted);
  margin-bottom: 6px;
}
.breadcrumb .bc-sep { margin: 0 6px; color: var(--border-strong); }
.breadcrumb .bc-cur { color: var(--text); font-weight: 600; }

.page-head { margin-bottom: 20px; }

.app-surface { min-height: 200px; }

/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
.site-footer {
  flex-shrink: 0;
  border-top: 1px solid #1f2937;
  background: #0b0f19;
  padding: 14px 28px;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
}
.footer-logo { font-size: .95rem; font-weight: 800; letter-spacing: .07em; color: #ffffff; }
.footer-line { font-size: .8rem; color: #94a3b8; }

/* ═══════════════════════════════════════════════════════
   CARDS / GRID UTILITIES
═══════════════════════════════════════════════════════ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.card-title {
  font-size: 1.05rem; font-weight: 700; margin: 0 0 12px;
  display: flex; align-items: center; gap: 8px;
}
.card-title i { color: var(--primary); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.stat-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.stat-label { font-size: .82rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.stat-value { font-size: 1.5rem; font-weight: 800; color: var(--text); line-height: 1; }
.stat-sub   { font-size: .88rem; color: var(--text-muted); margin-top: 3px; }

/* ═══════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  font-size: .85rem; font-weight: 600;
  cursor: pointer; transition: all .15s;
  border: none;
}
.btn-primary   { background: var(--primary); color: #ffffff; border: 1.5px solid var(--primary-dark); }
.btn-primary:hover   { background: #006cbe; border-color: var(--primary-dark); }
.btn-secondary { background: var(--surface-soft); color: var(--text); border: 1.5px solid var(--border); }
.btn-secondary:hover { background: var(--primary-light); color: var(--primary-dark); border-color: var(--primary); }
.btn-danger    { background: var(--red-bg); color: var(--red); border: 1px solid #fca5a5; }
.btn-danger:hover { background: #fee2e2; }
.btn-success   { background: var(--green-bg); color: var(--green); border: 1px solid #6ee7b7; }
.btn-sm { padding: 5px 12px; font-size: .78rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════
   BADGE / TAG
═══════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 99px;
  font-size: .7rem; font-weight: 700; letter-spacing: .02em;
}
.badge-blue   { background: var(--primary-light); color: var(--primary-dark); border: 1px solid var(--primary); }
.badge-green  { background: var(--green-bg); color: #065f46; }
.badge-red    { background: var(--red-bg); color: #991b1b; }
.badge-yellow { background: var(--yellow-bg); color: #854d0e; border: 1px solid #eab308; }
.badge-gray   { background: var(--surface-soft); color: var(--text-muted); border: 1px solid #ccc; }

/* ═══════════════════════════════════════════════════════
   PROGRESS BAR
═══════════════════════════════════════════════════════ */
.progress-bar {
  height: 8px; border-radius: 99px;
  background: var(--border);
  overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #1e3a8a, #1d4ed8);
  transition: width .5s ease;
}

/* ═══════════════════════════════════════════════════════
   LEARNING VIEW — MD Renderer
═══════════════════════════════════════════════════════ */
.learn-container {
  position: relative;
}
.learn-body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 36px;
  box-shadow: var(--shadow-sm);
  min-height: 400px;
  min-width: 0;
}

/* 목차 — offcanvas (우측에서 슬라이드 인) */
.toc-toggle-btn {
  position: fixed;
  top: calc(var(--topbar-h) + 16px);
  right: 20px;
  z-index: 55;
  display: flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: .82rem; font-weight: 600;
  cursor: pointer;
}
.toc-toggle-btn:hover { background: var(--surface-hover); }
.toc-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15,23,42,.35);
  z-index: 58;
  backdrop-filter: blur(2px);
}
.toc-overlay.show { display: block; }
.learn-toc {
  position: fixed;
  top: calc(var(--topbar-h) + var(--gnb-h));
  right: 0;
  width: 300px;
  max-width: 85vw;
  height: calc(100vh - var(--topbar-h) - var(--gnb-h));
  overflow-y: auto;
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-radius: 0;
  padding: 18px 16px;
  box-shadow: var(--shadow-lg);
  z-index: 59;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.learn-toc.open {
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}
.learn-toc-close {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: none; border-radius: 6px;
  background: var(--surface-soft);
  color: var(--text-muted);
  cursor: pointer;
  margin-left: auto;
}
.learn-toc-close:hover { background: var(--surface-hover); color: var(--text); }
.learn-toc-hdr { display: flex; align-items: center; margin-bottom: 10px; }
.learn-toc-title {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted); margin-bottom: 10px;
}
.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-item {
  padding: 4px 0;
  font-size: .88rem; color: var(--text-muted);
  cursor: pointer; transition: color .12s;
  border-left: 2px solid transparent;
  padding-left: 8px;
}
.toc-item:hover { color: var(--primary-dark); }
.toc-item.active { color: var(--primary); border-left-color: var(--primary); font-weight: 600; }
.toc-item.h3 { padding-left: 18px; font-size: .82rem; }

/* MD body styling */
.md-body {
  line-height: 1.75;
  color: var(--text);
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.md-body h1 { font-size: 1.65rem; font-weight: 800; margin: 0 0 20px; border-bottom: 2px solid var(--border); padding-bottom: 12px; }
.md-body h2 { font-size: 1.2rem; font-weight: 700; margin: 32px 0 12px; color: #1a1a1a; border-left: 4px solid var(--primary); background: var(--primary-light); padding: 8px 10px 8px 14px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.md-body h3 { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; font-weight: 800; margin: 26px 0 10px; padding: 3px 0 3px 12px; border-left: 3px solid var(--primary); color: #1e3a5f; }
.md-body h3::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.md-body h4 { font-size: 1rem; font-weight: 700; margin: 16px 0 6px; color: var(--text-muted); }
.md-body p  { margin: 0 0 12px; }
.md-body ul, .md-body ol { margin: 0 0 12px; padding-left: 24px; }
.md-body li { margin-bottom: 4px; }
.md-body table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 1rem; }
.md-body th { background: var(--primary); color: #ffffff; font-weight: 700; padding: 8px 12px; border: 1px solid var(--primary-dark); text-align: left; }
.md-body td { padding: 7px 12px; border: 1px solid var(--border); }
.md-body tr:nth-child(even) td { background: var(--surface-soft); }
.md-body code { background: #f4f4f4; border: 1px solid #ddd; border-radius: 4px; padding: 1px 5px; font-size: .85em; font-family: "Fira Code", "Cascadia Code", monospace; }
.md-body pre  { background: #1e1e1e; border-radius: var(--radius-sm); padding: 16px; overflow-x: auto; margin: 16px 0; border: 1px solid #333; }
.md-body pre code { background: none; border: none; color: #e2e8f0; font-size: .85rem; }
.vocabulary-tip {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 0 18px; padding: 10px 12px;
  color: #075985; background: #f0f9ff; border: 1px solid #bae6fd;
  border-radius: 9px; font-size: .84rem; line-height: 1.55;
}
.vocabulary-tip i { margin-top: 3px; color: #0284c7; }
.vocabulary-term {
  display: inline; padding: 0; color: inherit; background: transparent;
  border: 0; border-radius: 3px;
  font: inherit; font-weight: 700; line-height: inherit; cursor: pointer;
  text-decoration: none;
}
.vocabulary-term:hover { color: #0369a1; background: #e0f2fe; }
.vocabulary-term:focus-visible { outline: 3px solid rgba(14,165,233,.35); outline-offset: 2px; border-radius: 3px; }
.term-trigger { text-decoration: underline dotted; text-underline-offset: 3px; }
.vocabulary-modal-backdrop {
  position: fixed; z-index: 1300; inset: 0; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(15,23,42,.58); backdrop-filter: blur(3px);
}
.vocabulary-modal-backdrop.show { display: flex; }
.vocabulary-modal {
  width: min(680px, 100%); max-height: min(720px, calc(100vh - 40px));
  overflow: auto; background: #fff; border: 1px solid #cbd5e1;
  border-radius: 18px; box-shadow: 0 24px 70px rgba(15,23,42,.32);
}
.vocabulary-modal-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: 24px 26px 20px; border-bottom: 1px solid #e2e8f0;
}
.vocabulary-modal-header > div { display: flex; align-items: center; gap: 14px; }
.vocabulary-modal-icon {
  display: inline-grid; place-items: center; width: 46px; height: 46px; flex: 0 0 auto;
  color: #fff; background: linear-gradient(135deg, #0284c7, #2563eb);
  border-radius: 12px; font-size: 1.12rem;
}
.vocabulary-modal-header p { margin: 0 0 2px; color: #64748b; font-size: .76rem; font-weight: 750; letter-spacing: .03em; }
.vocabulary-modal-header h2 { margin: 0; color: #0f172a; font-size: clamp(1.25rem, 3vw, 1.6rem); line-height: 1.25; }
.vocabulary-modal-close {
  display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto;
  color: #64748b; border-radius: 10px; font-size: 1.05rem;
}
.vocabulary-modal-close:hover { color: #0f172a; background: #f1f5f9; }
.vocabulary-modal-content { display: grid; gap: 14px; padding: 22px 26px 28px; }
.vocabulary-modal-content section { padding: 15px 17px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 11px; }
.vocabulary-modal-content h3 { margin: 0 0 8px; color: #334155; font-size: .82rem; }
.vocabulary-modal-content h3 i { width: 18px; color: #0284c7; }
.vocabulary-modal-content p { margin: 0; color: #475569; line-height: 1.75; word-break: keep-all; }
.vocabulary-modal-content .vocabulary-modal-description { background: #f0f9ff; border-color: #bae6fd; }
.vocabulary-modal-description h3 { color: #075985; }
body.modal-open { overflow: hidden; }
.screen-capture-fab { position: fixed; z-index: 1500; left: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed); border: 0; border-radius: 999px; box-shadow: 0 10px 26px rgba(37,99,235,.32); font-size: .84rem; font-weight: 800; }
.screen-capture-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(37,99,235,.4); }
.screen-capture-fab.is-capturing { cursor: wait; opacity: .75; }
.screen-capture-panel { position: fixed; z-index: 1500; left: 24px; bottom: 78px; width: min(330px, calc(100vw - 32px)); padding: 13px; background: #fff; border: 1px solid #cbd5e1; border-radius: 14px; box-shadow: 0 16px 38px rgba(15,23,42,.25); }
.screen-capture-panel[hidden] { display: none; }
.screen-capture-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; color: #1e293b; font-size: .9rem; }
.screen-capture-panel-head strong i { margin-right: 5px; color: #2563eb; }
.screen-capture-panel-head button { width: 28px; height: 28px; color: #64748b; border-radius: 6px; }
.screen-capture-panel-head button:hover { color: #0f172a; background: #f1f5f9; }
.screen-capture-panel img { display: block; width: 100%; max-height: 160px; object-fit: cover; object-position: top; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 8px; }
.screen-capture-panel p { margin: 9px 0; color: #475569; font-size: .74rem; line-height: 1.45; }
.screen-capture-panel label { display: grid; grid-template-columns: 1fr 1.35fr; gap: 8px; align-items: center; margin-bottom: 8px; color: #475569; font-size: .74rem; font-weight: 750; }
.screen-capture-panel select { min-width: 0; padding: 7px 8px; color: #0f172a; background: #fff; border: 1px solid #cbd5e1; border-radius: 7px; font-size: .75rem; }
.screen-capture-open { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 9px 10px; color: #fff; background: #2563eb; border: 1px solid #2563eb; border-radius: 8px; font-size: .78rem; font-weight: 800; }
.screen-capture-open:hover { background: #1d4ed8; }
.screen-capture-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 7px; }
.screen-capture-actions button { padding: 7px 5px; color: #475569; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 7px; font-size: .7rem; font-weight: 700; }
.screen-capture-actions button:hover { color: #1d4ed8; border-color: #bfdbfe; background: #eff6ff; }
.integrated-content-trigger {
  display: inline; padding: 0; color: var(--primary); background: transparent; border: 0;
  font: inherit; text-align: inherit; text-decoration: underline; cursor: pointer;
}
.integrated-content-trigger:hover { color: var(--primary-dark); }
.integrated-content-trigger:focus-visible { outline: 3px solid rgba(14,165,233,.35); outline-offset: 2px; border-radius: 3px; }
.integrated-content-trigger i { margin-left: 4px; font-size: .74em; }
.integrated-content-modal-backdrop {
  position: fixed; z-index: 1300; inset: 0; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(15,23,42,.58); backdrop-filter: blur(3px);
}
.integrated-content-modal-backdrop.show { display: flex; }
.integrated-content-modal {
  width: min(880px, 100%); max-height: min(800px, calc(100vh - 40px)); overflow: auto;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 18px; box-shadow: 0 24px 70px rgba(15,23,42,.32);
}
.integrated-content-modal-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: 24px 26px 20px; border-bottom: 1px solid #e2e8f0;
}
.integrated-content-modal-header > div { display: flex; align-items: center; gap: 14px; }
.integrated-content-modal-icon {
  display: inline-grid; place-items: center; width: 46px; height: 46px; flex: 0 0 auto;
  color: #fff; background: linear-gradient(135deg, #0f766e, #0284c7); border-radius: 12px; font-size: 1.12rem;
}
.integrated-content-modal-header p { margin: 0 0 2px; color: #64748b; font-size: .76rem; font-weight: 750; letter-spacing: .03em; }
.integrated-content-modal-header h2 { margin: 0; color: #0f172a; font-size: clamp(1.15rem, 3vw, 1.55rem); line-height: 1.3; }
.integrated-content-modal-close {
  display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto;
  color: #64748b; border-radius: 10px; font-size: 1.05rem;
}
.integrated-content-modal-close:hover { color: #0f172a; background: #f1f5f9; }
.integrated-content-modal-body { padding: 24px 26px 30px; }
.integrated-content-modal-body > :first-child { margin-top: 0; }
.integrated-content-modal-body > :last-child { margin-bottom: 0; }
.integrated-content-modal-body h2 { display: none; }
.integrated-content-modal-loading, .integrated-content-modal-error { margin: 0; padding: 22px; text-align: center; border-radius: 10px; }
.integrated-content-modal-loading { color: #475569; background: #f8fafc; }
.integrated-content-modal-error { color: #b91c1c; background: #fef2f2; }
.mermaid-view-badge {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 16px 0; padding: 7px 10px;
  color: #075985; background: #e0f2fe;
  border: 1px solid #7dd3fc; border-radius: 999px;
  font-size: .76rem; font-weight: 800; letter-spacing: .04em;
  transition: transform .15s, background .15s, box-shadow .15s;
}
.mermaid-view-badge small { font-weight: 600; letter-spacing: 0; color: #0369a1; }
.mermaid-view-badge:hover { background: #bae6fd; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(2,132,199,.18); }
.mermaid-view-badge:focus-visible { outline: 3px solid rgba(14,165,233,.35); outline-offset: 2px; }
.mermaid-modal-backdrop {
  display: none; position: fixed; inset: 0; z-index: 200;
  align-items: center; justify-content: center; padding: 0;
  background: rgba(15,23,42,.62); backdrop-filter: blur(3px);
}
.mermaid-modal-backdrop.show { display: flex; }
.mermaid-modal {
  width: 100vw; height: 100vh; max-width: none; max-height: none;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 0; border-radius: 0;
  box-shadow: none;
}
.mermaid-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border);
  font-size: .95rem; font-weight: 750;
}
.mermaid-modal-header i { color: var(--primary); margin-right: 7px; }
.mermaid-modal-close {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; color: var(--text-muted);
}
.mermaid-modal-close:hover { background: var(--surface-soft); color: var(--text); }
.mermaid-modal-chart {
  flex: 1; min-height: 0; overflow: auto; padding: 40px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.mermaid-modal-chart svg {
  width: max(100%, 1200px); height: auto; max-width: none; min-width: 0;
}
.mermaid-modal-loading { padding: 60px 20px; color: var(--text-muted); }
.mermaid-modal-error { margin: 0; padding: 36px 12px; color: var(--red); text-align: center; }
.macro-news-simulator-button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; color: #075985; background: #ecfeff; border: 1px solid #a5f3fc; border-radius: 9px; font-size: .82rem; font-weight: 800; box-shadow: 0 2px 5px rgba(8,145,178,.08); }
.macro-news-simulator-button:hover { color: #fff; background: #0891b2; border-color: #0891b2; }
.macro-news-modal-backdrop { position: fixed; z-index: 1200; inset: 0; display: none; align-items: center; justify-content: center; padding: 2vh 2vw; background: rgba(15,23,42,.55); backdrop-filter: blur(2px); }
.macro-news-modal-backdrop.show { display: flex; }
.macro-news-modal { width: 95vw; height: 95vh; max-width: 95vw; max-height: 95vh; overflow: auto; background: #fff; border: 1px solid #cbd5e1; border-radius: 18px; box-shadow: 0 24px 70px rgba(15,23,42,.3); }
.macro-news-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: clamp(22px, 3vw, 42px); border-bottom: 1px solid #e2e8f0; }
.macro-news-modal-header > div { display: flex; align-items: center; gap: 16px; }
.macro-news-modal-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; color: #fff; background: linear-gradient(135deg, #0284c7, #2563eb); border-radius: 13px; font-size: 1.35rem; }
.macro-news-modal h2 { margin: 0; color: #0f172a; font-size: clamp(1.25rem, 2.2vw, 1.75rem); }
.macro-news-modal-header p { margin: 5px 0 0; color: #64748b; font-size: clamp(.92rem, 1.4vw, 1.1rem); }
.macro-news-modal-close { width: 44px; height: 44px; flex: 0 0 auto; color: #64748b; border-radius: 10px; font-size: 1.2rem; }
.macro-news-modal-close:hover { color: #0f172a; background: #f1f5f9; }
.macro-news-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 36px; padding: clamp(24px, 3vw, 42px); background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.macro-news-controls label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; color: #334155; font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 750; }
.macro-news-controls input { grid-column: 1 / -1; width: 100%; accent-color: #0284c7; }
.macro-news-controls output { min-width: 32px; color: #0369a1; text-align: right; font-size: 1.1em; font-variant-numeric: tabular-nums; }
.macro-news-canvas-wrap { padding: clamp(24px, 3vw, 42px) clamp(24px, 3vw, 42px) 0; }
.macro-news-canvas { display: block; width: 100%; border: 1px solid #e2e8f0; border-radius: 10px; }
.macro-news-insight { margin: 20px clamp(24px, 3vw, 42px) 0; padding: 18px 20px; color: #475569; background: #f0f9ff; border-left: 4px solid #0ea5e9; border-radius: 0 9px 9px 0; font-size: clamp(.95rem, 1.4vw, 1.12rem); line-height: 1.65; }
.macro-news-insight strong { color: #0f172a; }
.macro-news-disclaimer { margin: 16px clamp(24px, 3vw, 42px) 28px; color: #94a3b8; font-size: clamp(.8rem, 1.15vw, .95rem); line-height: 1.55; }
.chart-drawing-offcanvas-backdrop { position: fixed; z-index: 1200; inset: 0; display: none; background: rgba(15,23,42,.42); backdrop-filter: blur(1px); }
.chart-drawing-offcanvas-backdrop.show { display: block; }
.chart-drawing-offcanvas { position: fixed; top: 0; right: 0; width: 100vw; max-width: 100%; height: 100vh; overflow: auto; background: #fff; border-left: 1px solid #cbd5e1; box-shadow: -24px 0 70px rgba(15,23,42,.28); transform: translateX(100%); transition: transform .25s cubic-bezier(.4,0,.2,1); }
.chart-drawing-offcanvas-backdrop.show .chart-drawing-offcanvas { transform: translateX(0); }
.chart-drawing-offcanvas-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px clamp(16px, 2vw, 28px); border-bottom: 1px solid #e2e8f0; }
.chart-drawing-offcanvas-header > div { display: flex; min-width: 0; align-items: center; gap: 10px; }
.chart-drawing-offcanvas-header > div > div { display: flex; min-width: 0; align-items: baseline; gap: 10px; }
.chart-drawing-offcanvas-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed); border-radius: 9px; font-size: 1rem; }
.chart-drawing-offcanvas h2 { flex: 0 0 auto; margin: 0; color: #0f172a; font-size: 1.12rem; }
.chart-drawing-offcanvas-header p { overflow: hidden; margin: 0; color: #64748b; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.chart-drawing-offcanvas-close { width: 34px; height: 34px; flex: 0 0 auto; color: #64748b; border-radius: 8px; font-size: 1rem; }
.chart-drawing-offcanvas-close:hover { color: #0f172a; background: #f1f5f9; }
.chart-drawing-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 12px 16px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }.chart-drawing-stats > div { display: grid; gap: 2px; padding: 8px 9px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; text-align: center; }.chart-drawing-stats span { color: #94a3b8; font-size: .64rem; font-weight: 700; }.chart-drawing-stats span i { margin-right: 3px; color: #2563eb; }.chart-drawing-stats strong { color: #1e293b; font-size: .92rem; font-variant-numeric: tabular-nums; }.chart-drawing-stats small { min-height: 1.2em; color: #64748b; font: 600 .58rem/1.25 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }.chart-drawing-stats > div.has-outliers { background: #fefce8; border-color: #eab308; }.chart-drawing-stats > div.has-outliers strong { color: #b45309; }.chart-drawing-stats > div.has-outliers span i { color: #ca8a04; }
.chart-drawing-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(230px, .78fr); gap: 18px; padding: clamp(18px, 2.4vw, 36px) clamp(20px, 3vw, 42px); }
.chart-drawing-panel { min-width: 0; overflow: hidden; border: 1px solid #dbe3ee; border-radius: 13px; background: #fff; }
.chart-drawing-panel > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 13px 16px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.chart-drawing-panel header b { color: #1e293b; font-size: .9rem; }
.chart-drawing-panel header small { color: #94a3b8; font-size: .68rem; }
.chart-drawing-canvas-wrap { min-height: 300px; }
.chart-drawing-canvas-wrap canvas { display: block; width: 100%; touch-action: none; cursor: crosshair; }
.chart-drawing-insight { min-height: 92px; margin: 12px; padding: 13px 15px; color: #475569; background: #f8fafc; border-left: 4px solid #94a3b8; border-radius: 0 8px 8px 0; font-size: .82rem; line-height: 1.55; }
.chart-drawing-insight strong { color: #0f172a; font-size: .92rem; }
.chart-drawing-insight p { margin: 5px 0 0; }
.chart-drawing-insight.is-up { background: #fff1f2; border-color: #ef476f; }
.chart-drawing-insight.is-down { background: #eff6ff; border-color: #3b82f6; }
.chart-drawing-insight.is-flat { background: #fffbeb; border-color: #f59e0b; }
.chart-drawing-similar { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #dbeafe; border-radius: 13px; background: #fff; }.chart-drawing-similar > header { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 13px 16px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }.chart-drawing-similar > header b { color: #1e3a8a; font-size: .86rem; }.chart-drawing-similar > header b i { margin-right: 5px; color: #2563eb; }.chart-drawing-similar > header small { color: #64748b; font-size: .68rem; }.chart-drawing-similar-body { flex: 1; padding: 13px 15px; overflow-y: auto; }.chart-drawing-similar-body > p { margin: 0 0 10px; color: #475569; font-size: .74rem; line-height: 1.45; }.chart-drawing-similar-cards { display: grid; gap: 8px; }.chart-drawing-similar-cards article { display: grid; gap: 4px; padding: 10px 11px; background: #fff; border: 1px solid #bfdbfe; border-left: 3px solid #3b82f6; border-radius: 8px; }.chart-drawing-similar-cards span { color: #2563eb; font-size: .67rem; font-weight: 800; }.chart-drawing-similar-cards strong { color: #1e293b; font-size: .82rem; }.chart-drawing-similar-cards small { color: #64748b; font-size: .67rem; }.chart-drawing-similar-cards em { color: #1d4ed8; font-size: .68rem; font-style: normal; font-weight: 800; }
.chart-drawing-candle-popup { position: fixed; z-index: 1210; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(15,23,42,.52); }
.chart-drawing-candle-popup[hidden] { display: none; }
.chart-drawing-candle-popup section { width: min(460px, 100%); overflow: hidden; color: #334155; background: #fff; border: 1px solid #cbd5e1; border-radius: 14px; box-shadow: 0 20px 60px rgba(15,23,42,.32); }
.chart-drawing-candle-popup header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 17px 18px; border-bottom: 1px solid #e2e8f0; }
.chart-drawing-candle-popup header > div { display: flex; align-items: center; gap: 10px; }
.chart-drawing-candle-popup header span { display: inline-grid; width: 34px; height: 34px; place-items: center; color: #fff; background: #ef476f; border-radius: 9px; }
.chart-drawing-candle-popup h3 { margin: 0; color: #0f172a; font-size: .98rem; }
.chart-drawing-candle-popup header p { margin: 3px 0 0; color: #64748b; font-size: .72rem; }
.chart-drawing-candle-popup button { width: 34px; height: 34px; color: #64748b; border-radius: 8px; font-size: 1rem; }
.chart-drawing-candle-popup button:hover { color: #0f172a; background: #f1f5f9; }
.chart-drawing-candle-popup section > div { padding: 16px 18px 18px; }
.chart-drawing-candle-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.chart-drawing-candle-values > div { display: grid; gap: 3px; padding: 8px 5px; text-align: center; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; }
.chart-drawing-candle-values span { color: #64748b; font-size: .63rem; font-weight: 700; }
.chart-drawing-candle-values strong { color: #1e293b; font-size: .78rem; font-variant-numeric: tabular-nums; }
.chart-drawing-candle-formula { display: grid; gap: 7px; margin-top: 13px; }
.chart-drawing-candle-formula p { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 8px 10px; color: #475569; background: #f8fafc; border-radius: 7px; font-size: .71rem; line-height: 1.35; }
.chart-drawing-candle-formula b { flex: 0 0 auto; color: #334155; }
.chart-drawing-candle-formula code { color: #1d4ed8; font: 700 .68rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; }
.chart-drawing-candle-formula p.is-warning { color: #92400e; background: #fef3c7; }.chart-drawing-candle-formula p.is-warning b, .chart-drawing-candle-formula p.is-warning code { color: #92400e; }
.chart-drawing-candle-formula p.is-normal { color: #475569; background: #f1f5f9; }
.chart-drawing-note { margin: 0 clamp(20px, 3vw, 42px) 24px; padding: 10px 12px; color: #64748b; background: #f8fafc; border-radius: 8px; font-size: .74rem; line-height: 1.5; }
.chart-drawing-note i { margin-right: 5px; color: #2563eb; }
.ma-cross-simulator-button { display: inline-flex; align-items: center; gap: 7px; margin: 4px 0; padding: 10px 14px; color: #0f766e; background: #f0fdfa; border: 1px solid #99f6e4; border-radius: 9px; font-size: .82rem; font-weight: 800; box-shadow: 0 2px 5px rgba(15,118,110,.08); }
.ma-cross-simulator-button:hover { color: #fff; background: #0f766e; }
.ma-cross-modal-backdrop { position: fixed; z-index: 1200; inset: 0; display: none; align-items: center; justify-content: center; padding: 1vh 1vw; background: rgba(15,23,42,.58); backdrop-filter: blur(2px); }.ma-cross-modal-backdrop.show { display: flex; }
.ma-cross-modal { width: 95vw; max-width: 95vw; height: 95vh; max-height: 95vh; overflow: auto; background: #fff; border: 1px solid #cbd5e1; border-radius: 18px; box-shadow: 0 24px 70px rgba(15,23,42,.32); display: flex; flex-direction: column; }
.ma-cross-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 26px 17px; border-bottom: 1px solid #e2e8f0; flex: 0 0 auto; }.ma-cross-modal-header > div { display: flex; align-items: center; gap: 14px; }
.ma-cross-modal-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; color: #fff; background: linear-gradient(135deg, #0f766e, #0891b2); border-radius: 13px; font-size: 1.2rem; }.ma-cross-modal h2 { margin: 0; color: #0f172a; font-size: 1.35rem; }.ma-cross-modal-header p { margin: 4px 0 0; color: #64748b; font-size: .85rem; }
.ma-cross-modal-close { width: 40px; height: 40px; flex: 0 0 auto; color: #64748b; border-radius: 10px; font-size: 1.2rem; }.ma-cross-modal-close:hover { color: #0f172a; background: #f1f5f9; }
.ma-cross-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 11px clamp(18px, 2.6vw, 26px); color: #475569; background: #f8fafc; border-bottom: 1px solid #e2e8f0; font-size: .8rem; flex: 0 0 auto; }.ma-cross-toolbar span i { margin-right: 5px; color: #0f766e; }.ma-cross-toolbar button { padding: 7px 10px; color: #0f766e; background: #fff; border: 1px solid #99f6e4; border-radius: 7px; font-size: .74rem; font-weight: 800; }.ma-cross-toolbar button:hover { color: #fff; background: #0f766e; }
.ma-cross-split { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(230px, .78fr); gap: 16px; padding: 16px clamp(18px, 2.6vw, 26px); overflow: auto; }
.ma-cross-panel { min-width: 0; overflow: hidden; border: 1px solid #dbe3ee; border-radius: 13px; background: #fff; }.ma-cross-panel > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 15px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }.ma-cross-panel header b { color: #1e293b; font-size: .88rem; }.ma-cross-panel header small { color: #94a3b8; font-size: .66rem; }
.ma-cross-canvas-wrap { min-height: 300px; }.ma-cross-canvas-wrap canvas { display: block; width: 100%; touch-action: none; cursor: crosshair; }
.ma-cross-stats { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #99f6e4; border-radius: 13px; background: #fff; }.ma-cross-stats > header { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 15px; background: #f0fdfa; border-bottom: 1px solid #99f6e4; }.ma-cross-stats > header b { color: #115e59; font-size: .86rem; }.ma-cross-stats > header b i { margin-right: 5px; color: #0f766e; }.ma-cross-stats > header small { color: #64748b; font-size: .66rem; }
.ma-cross-stats-body { flex: 1; padding: 12px 14px; overflow-y: auto; }.ma-cross-empty { margin: 0; color: #64748b; font-size: .78rem; line-height: 1.5; }
.ma-cross-stat-row { display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center; gap: 8px; padding: 7px 8px; margin-bottom: 5px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; font-size: .74rem; }.ma-cross-stat-dot { width: 10px; height: 10px; border-radius: 50%; }.ma-cross-stat-row b { color: #1e293b; }.ma-cross-stat-row span { color: #475569; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ma-cross-legend { display: flex; flex-wrap: wrap; gap: 9px; padding: 8px 15px; color: #64748b; font-size: .68rem; border-bottom: 1px solid #e2e8f0; }.ma-cross-legend span { display: inline-flex; align-items: center; gap: 4px; }.ma-cross-legend i { display: inline-block; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; }
.ma-cross-note { margin: 0 clamp(18px, 2.6vw, 26px) 18px; padding: 10px 12px; color: #64748b; background: #f8fafc; border-radius: 8px; font-size: .74rem; line-height: 1.5; flex: 0 0 auto; }.ma-cross-note i { margin-right: 5px; color: #0f766e; }
.rsi-macd-simulator-button { display: inline-flex; align-items: center; gap: 7px; margin: 4px 0; padding: 10px 14px; color: #7c3aed; background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 9px; font-size: .82rem; font-weight: 800; box-shadow: 0 2px 5px rgba(124,58,237,.08); }
.rsi-macd-simulator-button:hover { color: #fff; background: #7c3aed; }
.rsi-macd-modal-backdrop { position: fixed; z-index: 1200; inset: 0; display: none; align-items: center; justify-content: center; padding: 1vh 1vw; background: rgba(15,23,42,.58); backdrop-filter: blur(2px); }.rsi-macd-modal-backdrop.show { display: flex; }
.rsi-macd-modal { width: 95vw; max-width: 95vw; height: 95vh; max-height: 95vh; overflow: auto; background: #fff; border: 1px solid #cbd5e1; border-radius: 18px; box-shadow: 0 24px 70px rgba(15,23,42,.32); }
.rsi-macd-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 28px 19px; border-bottom: 1px solid #e2e8f0; }.rsi-macd-modal-header > div { display: flex; align-items: center; gap: 14px; }
.rsi-macd-modal-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; color: #fff; background: linear-gradient(135deg, #7c3aed, #2563eb); border-radius: 13px; font-size: 1.2rem; }.rsi-macd-modal h2 { margin: 0; color: #0f172a; font-size: 1.45rem; }.rsi-macd-modal-header p { margin: 4px 0 0; color: #64748b; font-size: .88rem; }
.rsi-macd-modal-close { width: 40px; height: 40px; flex: 0 0 auto; color: #64748b; border-radius: 10px; font-size: 1.2rem; }.rsi-macd-modal-close:hover { color: #0f172a; background: #f1f5f9; }.rsi-macd-simulator { padding: 20px 28px 24px; }
.rsi-macd-terms { display: grid; gap: 6px; margin-bottom: 16px; padding: 13px 15px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 11px; }.rsi-macd-terms p { margin: 0; color: #475569; font-size: .8rem; line-height: 1.55; }.rsi-macd-terms b { color: #4c1d95; }
.rsi-macd-inputs { padding: 15px 17px 17px; background: #faf5ff; border: 1px solid #e9d5ff; border-radius: 12px; }.rsi-macd-section-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }.rsi-macd-section-heading > span { padding: 3px 7px; color: #6d28d9; background: #ede9fe; border-radius: 99px; font-size: .67rem; font-weight: 900; letter-spacing: .04em; }.rsi-macd-section-heading h3 { margin: 0; color: #4c1d95; font-size: .94rem; }.rsi-macd-section-heading p { margin: 0 0 0 auto; color: #64748b; font-size: .72rem; }
.rsi-macd-input-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }.rsi-macd-input-grid label { display: grid; gap: 6px; color: #475569; font-size: .76rem; font-weight: 750; }.rsi-macd-input-grid input[type="number"] { padding: 8px 9px; border: 1px solid #cbd5e1; border-radius: 7px; font: inherit; font-weight: 800; }.rsi-macd-input-grid input[type="range"] { width: 100%; accent-color: #7c3aed; }.rsi-macd-input-grid output { color: #6d28d9; font-size: .78rem; font-weight: 800; }
.rsi-macd-chart-wrap { margin: 16px 0; overflow: hidden; border: 1px solid #ddd6fe; border-radius: 12px; }.rsi-macd-chart-wrap canvas { display: block; width: 100%; }.rsi-macd-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }.rsi-macd-results article { display: grid; gap: 5px; padding: 13px; background: #f8fafc; border: 1px solid #dbe3ee; border-radius: 10px; }.rsi-macd-results span { color: #64748b; font-size: .73rem; font-weight: 750; }.rsi-macd-results strong { color: #6d28d9; font-size: 1.1rem; font-variant-numeric: tabular-nums; }.rsi-macd-results small { color: #7c3aed; font-size: .72rem; font-weight: 800; }
.rsi-macd-plain { margin: 0 0 12px; padding: 13px 15px; color: #334155; background: #faf5ff; border: 1px solid #e9d5ff; border-radius: 10px; font-size: .84rem; line-height: 1.6; }
.rsi-macd-guide { display: grid; gap: 7px; margin: 0 0 14px; padding: 12px 14px; color: #475569; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; font-size: .8rem; line-height: 1.55; }.rsi-macd-guide p { margin: 0; }.rsi-macd-guide b { color: #1e293b; }.rsi-macd-guide i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; vertical-align: middle; }
.rsi-macd-detail { margin-bottom: 14px; }.rsi-macd-detail summary { color: #6d28d9; font-size: .78rem; font-weight: 800; cursor: pointer; }.rsi-macd-detail ol { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }.rsi-macd-detail li { display: grid; grid-template-columns: 20% 1fr; gap: 10px; padding: 9px 10px; background: #f8fafc; border-radius: 7px; color: #334155; font-size: .78rem; }.rsi-macd-detail li span { font-variant-numeric: tabular-nums; }
.rsi-macd-note { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; color: #64748b; background: #f8fafc; border-radius: 9px; font-size: .74rem; line-height: 1.45; }.rsi-macd-note > i { color: #7c3aed; }.rsi-macd-note button { flex: 0 0 auto; margin-left: auto; padding: 6px 8px; color: #6d28d9; background: #fff; border: 1px solid #ddd6fe; border-radius: 6px; font-size: .69rem; font-weight: 800; }.rsi-macd-note button:hover { color: #fff; background: #7c3aed; }
.atr-simulator-button { display: inline-flex; align-items: center; gap: 7px; margin: 4px 0; padding: 10px 14px; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 9px; font-size: .82rem; font-weight: 800; box-shadow: 0 2px 5px rgba(180,83,9,.08); }
.atr-simulator-button:hover { color: #fff; background: #b45309; }
.atr-modal-backdrop { position: fixed; z-index: 1200; inset: 0; display: none; align-items: center; justify-content: center; padding: 1vh 1vw; background: rgba(15,23,42,.58); backdrop-filter: blur(2px); }.atr-modal-backdrop.show { display: flex; }
.atr-modal { width: 95vw; max-width: 95vw; height: 95vh; max-height: 95vh; overflow: auto; background: #fff; border: 1px solid #cbd5e1; border-radius: 18px; box-shadow: 0 24px 70px rgba(15,23,42,.32); }
.atr-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 28px 19px; border-bottom: 1px solid #e2e8f0; }.atr-modal-header > div { display: flex; align-items: center; gap: 14px; }
.atr-modal-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; color: #fff; background: linear-gradient(135deg, #b45309, #d97706); border-radius: 13px; font-size: 1.2rem; }.atr-modal h2 { margin: 0; color: #0f172a; font-size: 1.45rem; }.atr-modal-header p { margin: 4px 0 0; color: #64748b; font-size: .88rem; }
.atr-modal-close { width: 40px; height: 40px; flex: 0 0 auto; color: #64748b; border-radius: 10px; font-size: 1.2rem; }.atr-modal-close:hover { color: #0f172a; background: #f1f5f9; }.atr-simulator { padding: 20px 28px 24px; }
.atr-terms { display: grid; gap: 6px; margin-bottom: 16px; padding: 13px 15px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 11px; }.atr-terms p { margin: 0; color: #475569; font-size: .8rem; line-height: 1.55; }.atr-terms b { color: #92400e; }
.atr-inputs { padding: 15px 17px 17px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; }.atr-section-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }.atr-section-heading > span { padding: 3px 7px; color: #92400e; background: #fef3c7; border-radius: 99px; font-size: .67rem; font-weight: 900; letter-spacing: .04em; }.atr-section-heading h3 { margin: 0; color: #92400e; font-size: .94rem; }.atr-section-heading p { margin: 0 0 0 auto; color: #64748b; font-size: .72rem; }
.atr-input-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }.atr-input-grid label { display: grid; gap: 6px; color: #475569; font-size: .76rem; font-weight: 750; }.atr-input-grid input[type="number"] { padding: 8px 9px; border: 1px solid #cbd5e1; border-radius: 7px; font: inherit; font-weight: 800; }.atr-input-grid input[type="range"] { width: 100%; accent-color: #b45309; }.atr-input-grid output { color: #92400e; font-size: .78rem; font-weight: 800; }
.atr-chart-wrap { margin: 16px 0; overflow: hidden; border: 1px solid #fde68a; border-radius: 12px; }.atr-chart-wrap canvas { display: block; width: 100%; }.atr-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }.atr-results article { display: grid; gap: 5px; padding: 13px; background: #f8fafc; border: 1px solid #dbe3ee; border-radius: 10px; }.atr-results span { color: #64748b; font-size: .73rem; font-weight: 750; }.atr-results strong { color: #92400e; font-size: 1.1rem; font-variant-numeric: tabular-nums; }.atr-results small { color: #b45309; font-size: .72rem; font-weight: 800; }
.atr-plain { margin: 0 0 12px; padding: 13px 15px; color: #334155; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; font-size: .84rem; line-height: 1.6; }
.atr-howto { margin: 0 0 14px; padding: 12px 14px; color: #475569; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; font-size: .8rem; line-height: 1.55; }.atr-howto > b { display: block; margin-bottom: 6px; color: #92400e; font-size: .84rem; }.atr-howto ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }.atr-howto b { color: #1e293b; }
.atr-guide { display: grid; gap: 7px; margin: 0 0 14px; padding: 12px 14px; color: #475569; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; font-size: .8rem; line-height: 1.55; }.atr-guide p { margin: 0; }.atr-guide b { color: #1e293b; }.atr-guide i { display: inline-block; width: 10px; height: 10px; margin: 0 6px 0 2px; border-radius: 50%; vertical-align: middle; }
.atr-detail { margin-bottom: 14px; }.atr-detail summary { color: #92400e; font-size: .78rem; font-weight: 800; cursor: pointer; }.atr-detail ol { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }.atr-detail li { display: grid; grid-template-columns: 20% 1fr; gap: 10px; padding: 9px 10px; background: #f8fafc; border-radius: 7px; color: #334155; font-size: .78rem; }.atr-detail li span { font-variant-numeric: tabular-nums; }
.atr-note { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; color: #64748b; background: #f8fafc; border-radius: 9px; font-size: .74rem; line-height: 1.45; }.atr-note > i { color: #b45309; }.atr-note button { flex: 0 0 auto; margin-left: auto; padding: 6px 8px; color: #92400e; background: #fff; border: 1px solid #fde68a; border-radius: 6px; font-size: .69rem; font-weight: 800; }.atr-note button:hover { color: #fff; background: #b45309; }
.opening-session-simulator-button { display: inline-flex; align-items: center; gap: 7px; margin: 4px 0; padding: 10px 14px; color: #0369a1; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 9px; font-size: .82rem; font-weight: 800; box-shadow: 0 2px 5px rgba(2,132,199,.08); }.opening-session-simulator-button:hover { color: #fff; background: #0284c7; }
.opening-session-modal-backdrop { position: fixed; z-index: 1200; inset: 0; display: none; align-items: center; justify-content: center; padding: 1vh 1vw; background: rgba(15,23,42,.58); backdrop-filter: blur(2px); }.opening-session-modal-backdrop.show { display: flex; }.opening-session-modal { width: 95vw; max-width: 95vw; height: 95vh; max-height: 95vh; overflow: auto; background: #fff; border: 1px solid #cbd5e1; border-radius: 18px; box-shadow: 0 24px 70px rgba(15,23,42,.32); }
.opening-session-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 28px 19px; border-bottom: 1px solid #e2e8f0; }.opening-session-modal-header > div { display: flex; align-items: center; gap: 14px; }.opening-session-modal-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; color: #fff; background: linear-gradient(135deg, #0284c7, #2563eb); border-radius: 13px; font-size: 1.2rem; }.opening-session-modal h2 { margin: 0; color: #0f172a; font-size: 1.45rem; }.opening-session-modal-header p { margin: 4px 0 0; color: #64748b; font-size: .88rem; }.opening-session-modal-close { width: 40px; height: 40px; flex: 0 0 auto; color: #64748b; border-radius: 10px; font-size: 1.2rem; }.opening-session-modal-close:hover { color: #0f172a; background: #f1f5f9; }
.opening-session-tabs { display: flex; gap: 8px; padding: 14px 28px 0; }.opening-session-tabs button { padding: 8px 11px; color: #475569; background: #f8fafc; border: 1px solid #dbe3ee; border-radius: 8px; font-size: .76rem; font-weight: 800; }.opening-session-tabs button.is-active { color: #fff; background: #0284c7; border-color: #0284c7; }.opening-session-body { padding: 14px 28px 24px; }.opening-session-status { margin: 0 0 10px; color: #475569; font-size: .78rem; }.opening-session-chart-wrap { overflow: hidden; border: 1px solid #bae6fd; border-radius: 11px; }.opening-session-chart-wrap canvas { display: block; width: 100%; }.opening-session-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }.opening-session-summary article { display: grid; gap: 5px; padding: 12px; background: #f8fafc; border: 1px solid #dbe3ee; border-radius: 9px; }.opening-session-summary span { color: #64748b; font-size: .72rem; font-weight: 750; }.opening-session-summary strong { color: #0369a1; font-size: 1.06rem; font-variant-numeric: tabular-nums; }.opening-session-note { margin: 14px 0 0; padding: 10px 12px; color: #64748b; background: #f8fafc; border-radius: 8px; font-size: .72rem; line-height: 1.5; }
.percent-change-simulator-button { display:inline-flex; gap:7px; align-items:center; padding:10px 14px; color:#b45309; background:#fffbeb; border:1px solid #fde68a; border-radius:9px; font-size:.82rem; font-weight:800; }.percent-change-simulator-button:hover { color:#fff; background:#d97706; }.percent-change-modal-backdrop { position:fixed; z-index:1200; inset:0; display:none; place-items:center; padding:16px; background:rgba(15,23,42,.58); backdrop-filter:blur(2px); }.percent-change-modal-backdrop.show { display:grid; }.percent-change-modal { width:95vw; max-width:95vw; height:95vh; max-height:95vh; overflow:auto; background:#fff; border:1px solid #cbd5e1; border-radius:18px; box-shadow:0 24px 70px rgba(15,23,42,.32); }.percent-change-modal header { display:flex; justify-content:space-between; gap:16px; padding:22px 28px; border-bottom:1px solid #e2e8f0; }.percent-change-modal header>div { display:flex; align-items:center; gap:14px; }.percent-change-modal header span { display:grid; place-items:center; width:46px; height:46px; color:#fff; background:linear-gradient(135deg,#d97706,#ea580c); border-radius:13px; }.percent-change-modal h2 { margin:0; color:#0f172a; font-size:1.4rem; }.percent-change-modal header p { margin:4px 0 0; color:#64748b; font-size:.84rem; }.percent-change-modal header>button { width:40px; height:40px; color:#64748b; border-radius:10px; font-size:1.2rem; }.percent-change-modal main { padding:20px 28px 24px; }.percent-change-inputs,.percent-change-results { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.percent-change-inputs { padding:15px; background:#fffbeb; border:1px solid #fde68a; border-radius:11px; }.percent-change-inputs label { display:grid; gap:6px; color:#475569; font-size:.76rem; font-weight:750; }.percent-change-inputs input { padding:9px; border:1px solid #cbd5e1; border-radius:7px; font:inherit; font-weight:800; }.percent-change-results { margin:15px 0; }.percent-change-results article { display:grid; gap:5px; padding:13px; background:#f8fafc; border:1px solid #dbe3ee; border-radius:9px; }.percent-change-results span { color:#64748b; font-size:.72rem; font-weight:750; }.percent-change-results strong { color:#b45309; font-size:1.1rem; }.percent-change-reading { padding:15px; border:1px solid #dbe3ee; border-radius:11px; }.percent-change-reading h3 { margin:0 0 8px; color:#78350f; font-size:.92rem; }.percent-change-reading p { margin:0; color:#475569; line-height:1.5; }.percent-change-reading div { display:grid; gap:7px; margin-top:11px; }.percent-change-reading b { padding:9px; color:#78350f; background:#fffbeb; border-radius:7px; font-size:.76rem; }.percent-change-modal footer { display:flex; gap:8px; align-items:center; margin-top:14px; padding:10px 12px; color:#64748b; background:#f8fafc; border-radius:8px; font-size:.73rem; }.percent-change-modal footer i { color:#d97706; }.percent-change-modal footer button { margin-left:auto; padding:6px 8px; color:#b45309; background:#fff; border:1px solid #fde68a; border-radius:6px; font-size:.69rem; font-weight:800; }
.order-simulator-button { display:inline-flex; align-items:center; gap:7px; padding:10px 14px; color:#075985; background:#f0f9ff; border:1px solid #bae6fd; border-radius:9px; font-size:.82rem; font-weight:800; }.order-simulator-button:hover { color:#fff; background:#0284c7; }.order-modal-backdrop { position:fixed; z-index:1200; inset:0; display:none; place-items:center; padding:16px; background:rgba(15,23,42,.58); }.order-modal-backdrop.show { display:grid; }.order-modal { width:min(820px,100%); background:#fff; border-radius:16px; overflow:auto; max-height:96vh; }.order-modal header { display:flex; justify-content:space-between; padding:20px 24px; border-bottom:1px solid #e2e8f0; }.order-modal header>div { display:flex; gap:12px; align-items:center; }.order-modal header>div>i { padding:13px; color:#fff; background:#0284c7; border-radius:11px; }.order-modal h2 { margin:0; }.order-modal header p { margin:3px 0 0; color:#64748b; font-size:.8rem; }.order-modal main { padding:18px 24px 22px; }.order-book { display:grid; grid-template-columns:1.2fr 1fr 1.2fr 1fr; gap:8px; padding:12px; background:#f8fafc; border-radius:9px; font-size:.8rem; }.order-book span { color:#ef4444; }.order-book strong { color:#1d4ed8; }.order-book small { color:#64748b; }.order-inputs { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:14px 0; }.order-inputs label { display:grid; gap:5px; font-size:.75rem; font-weight:750; color:#475569; }.order-inputs input,.order-inputs select { padding:8px; border:1px solid #cbd5e1; border-radius:6px; font:inherit; }.order-quick { display:flex; gap:7px; }.order-quick button { padding:6px 9px; color:#0369a1; background:#eff6ff; border:1px solid #bae6fd; border-radius:6px; font-size:.73rem; font-weight:800; }.order-result { margin-top:14px; padding:14px; border:1px solid #bae6fd; border-radius:10px; }.order-result>strong { color:#0369a1; font-size:1.05rem; }.order-result p { margin:5px 0 10px; color:#475569; font-size:.78rem; }.order-result dl { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:0; }.order-result dl div { padding:8px; background:#f8fafc; border-radius:6px; }.order-result dt { color:#64748b; font-size:.67rem; }.order-result dd { margin:4px 0 0; font-weight:800; font-size:.78rem; }.order-modal footer { margin-top:13px; padding:10px; color:#64748b; background:#f8fafc; border-radius:7px; font-size:.72rem; line-height:1.45; }
.order-inputs input:disabled { color:#94a3b8; background:#f1f5f9; cursor:not-allowed; }
@media (max-width:640px) { .order-modal header,.order-modal main { padding-left:15px; padding-right:15px; }.order-book,.order-inputs,.order-result dl { grid-template-columns:1fr 1fr; }.order-book b { grid-column:span 2; } }
.backtest-simulator-button { display:inline-flex; align-items:center; gap:7px; padding:10px 14px; color:#5b21b6; background:#f5f3ff; border:1px solid #ddd6fe; border-radius:9px; font-size:.82rem; font-weight:800; }.backtest-simulator-button:hover { color:#fff; background:#7c3aed; }.backtest-modal-backdrop { position:fixed; z-index:1200; inset:0; display:none; place-items:center; padding:16px; background:rgba(15,23,42,.58); }.backtest-modal-backdrop.show { display:grid; }.backtest-modal { width:min(900px,100%); max-height:96vh; overflow:auto; background:#fff; border-radius:16px; }.backtest-modal header { display:flex; justify-content:space-between; align-items:flex-start; padding:20px 24px; border-bottom:1px solid #e2e8f0; }.backtest-modal header>div { display:flex; align-items:center; gap:12px; }.backtest-modal header span { display:grid; width:42px; height:42px; place-items:center; color:#fff; background:#7c3aed; border-radius:11px; }.backtest-modal h2 { margin:0; }.backtest-modal header p { margin:3px 0 0; color:#64748b; font-size:.8rem; }.backtest-modal main { padding:18px 24px 22px; }.backtest-step { display:flex; gap:8px; align-items:center; margin-bottom:10px; color:#4c1d95; font-size:.84rem; font-weight:800; }.backtest-step b { padding:3px 7px; color:#6d28d9; background:#ede9fe; border-radius:20px; font-size:.67rem; }.backtest-inputs { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.backtest-inputs label { display:grid; gap:5px; color:#475569; font-size:.74rem; font-weight:750; }.backtest-inputs input { width:100%; box-sizing:border-box; padding:9px; border:1px solid #cbd5e1; border-radius:7px; font:inherit; }.backtest-results { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:16px 0; }.backtest-results article { padding:12px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:9px; }.backtest-results small { display:block; color:#64748b; font-size:.7rem; }.backtest-results strong { display:block; margin-top:5px; color:#312e81; font-size:1.05rem; }.backtest-chart-wrap { padding:10px; border:1px solid #ddd6fe; border-radius:10px; background:#fcfbff; }.backtest-reading { margin-top:14px; padding:13px; border-radius:9px; background:#fffbeb; }.backtest-reading h3 { margin:0 0 6px; color:#92400e; font-size:.86rem; }.backtest-reading p { margin:5px 0; color:#57534e; font-size:.79rem; line-height:1.55; }.backtest-reading p:last-child { color:#92400e; font-weight:700; }.backtest-modal footer { margin-top:14px; padding:10px; color:#64748b; background:#f8fafc; border-radius:8px; font-size:.72rem; line-height:1.5; }.backtest-modal footer button { float:right; padding:5px 8px; color:#6d28d9; background:#fff; border:1px solid #ddd6fe; border-radius:5px; font-size:.7rem; font-weight:800; }
@media (max-width:640px) { .backtest-modal header,.backtest-modal main { padding-left:15px; padding-right:15px; }.backtest-inputs,.backtest-results { grid-template-columns:repeat(2,1fr); }.backtest-modal footer button { float:none; display:block; margin-top:8px; } }
.nps-holdings-button { display:inline-flex; align-items:center; gap:7px; padding:10px 14px; color:#075985; background:#eff6ff; border:1px solid #bfdbfe; border-radius:9px; font-size:.82rem; font-weight:800; }.nps-holdings-button:hover { color:#fff; background:#2563eb; }.nps-holdings-backdrop { position:fixed; z-index:1200; inset:0; display:none; place-items:center; padding:16px; background:rgba(15,23,42,.58); }.nps-holdings-backdrop.show { display:grid; }.nps-holdings-modal { width:min(970px,100%); max-height:94vh; overflow:auto; background:#fff; border-radius:16px; }.nps-holdings-modal header { display:flex; justify-content:space-between; align-items:flex-start; padding:20px 24px; border-bottom:1px solid #e2e8f0; }.nps-holdings-modal header>div { display:flex; gap:12px; align-items:center; }.nps-holdings-modal header span { display:grid; place-items:center; width:42px; height:42px; color:#fff; background:#2563eb; border-radius:11px; }.nps-holdings-modal h2 { margin:0; }.nps-holdings-modal header p { margin:3px 0 0; color:#64748b; font-size:.8rem; }.nps-holdings-modal main { padding:18px 24px 22px; }.nps-holdings-tabs { display:flex; gap:7px; padding-bottom:13px; border-bottom:1px solid #e2e8f0; }.nps-holdings-tabs button { padding:7px 10px; color:#64748b; background:#f8fafc; border:1px solid #e2e8f0; border-radius:7px; font-size:.75rem; font-weight:800; }.nps-holdings-tabs button.is-active { color:#fff; background:#2563eb; border-color:#2563eb; }.nps-holdings-tabs button:disabled { color:#94a3b8; cursor:not-allowed; }.nps-holdings-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:14px 0 8px; }.nps-holdings-toolbar label { display:flex; align-items:center; gap:7px; width:min(300px,100%); padding:8px 10px; border:1px solid #cbd5e1; border-radius:7px; color:#64748b; }.nps-holdings-toolbar input { width:100%; border:0; outline:0; font:inherit; }.nps-holdings-toolbar span { color:#64748b; font-size:.75rem; }.nps-holdings-status,.nps-holdings-note { margin:8px 0; color:#64748b; font-size:.75rem; }.nps-holdings-table-wrap { overflow-x:auto; border:1px solid #e2e8f0; border-radius:9px; }.nps-holdings-table-wrap table { width:100%; min-width:650px; border-collapse:collapse; font-size:.8rem; }.nps-holdings-table-wrap th { padding:10px 12px; color:#fff; background:#1e3a5f; text-align:left; }.nps-holdings-table-wrap td { padding:10px 12px; border-top:1px solid #e2e8f0; }.nps-holdings-table-wrap td:not(:first-child) { text-align:right; font-variant-numeric:tabular-nums; }.nps-holdings-table-wrap tbody tr:nth-child(even) { background:#f8fafc; }.nps-holdings-note { padding:10px; background:#f8fafc; border-radius:7px; line-height:1.5; }
@media (max-width:640px) { .nps-holdings-modal header,.nps-holdings-modal main { padding-left:15px; padding-right:15px; }.nps-holdings-toolbar { align-items:stretch; flex-direction:column; }.nps-holdings-toolbar label { width:auto; } }
.split-buy-simulator-button { display:inline-flex; align-items:center; gap:7px; padding:10px 14px; color:#0f766e; background:#f0fdfa; border:1px solid #99f6e4; border-radius:9px; font-size:.82rem; font-weight:800; }.split-buy-simulator-button:hover { color:#fff; background:#0d9488; }.split-buy-modal-backdrop { position:fixed; z-index:1200; inset:0; display:none; place-items:center; padding:16px; background:rgba(15,23,42,.58); }.split-buy-modal-backdrop.show { display:grid; }.split-buy-modal { width:min(1080px,96vw); max-height:96vh; overflow-y:auto; overflow-x:hidden; background:#fff; border-radius:16px; }.split-buy-modal header { display:flex; justify-content:space-between; padding:20px 24px; border-bottom:1px solid #e2e8f0; }.split-buy-modal header>div { display:flex; gap:12px; align-items:center; }.split-buy-modal header span { display:grid; width:42px; height:42px; place-items:center; color:#fff; background:#0d9488; border-radius:11px; }.split-buy-modal h2 { margin:0; }.split-buy-modal header p { margin:3px 0 0; color:#64748b; font-size:.8rem; }.split-buy-modal main { padding:18px 24px 22px; }.split-buy-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }.split-buy-step { display:grid; gap:6px; padding:10px; background:#f0fdfa; border:1px solid #99f6e4; border-radius:9px; }.split-buy-step label { display:grid; gap:4px; color:#134e4a; font-size:.71rem; font-weight:750; }.split-buy-step input[type="number"] { padding:6px; border:1px solid #cbd5e1; border-radius:6px; font:inherit; }.split-buy-toggle { display:flex !important; flex-direction:row !important; align-items:center; gap:6px; font-size:.78rem !important; font-weight:800 !important; }.split-buy-now { display:grid; grid-template-columns:auto 160px; align-items:center; gap:10px; margin:14px 0; color:#475569; font-size:.78rem; font-weight:750; }.split-buy-now input { padding:8px; border:1px solid #cbd5e1; border-radius:6px; font:inherit; }.split-buy-chart-wrap { padding:10px; border:1px solid #99f6e4; border-radius:10px; background:#fbfffe; }.split-buy-table-wrap { overflow-x:auto; margin:14px 0; }.split-buy-table { width:100%; min-width:560px; margin:0; border-collapse:collapse; font-size:.78rem; }.split-buy-table th,.split-buy-table td { padding:7px 8px; text-align:right; border-bottom:1px solid #e2e8f0; }.split-buy-table th:first-child,.split-buy-table td:first-child { text-align:left; color:#64748b; }.split-buy-table thead th { color:#64748b; font-weight:750; }.split-buy-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:14px 0; }.split-buy-summary article { display:grid; gap:5px; padding:12px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:9px; }.split-buy-summary span { color:#64748b; font-size:.7rem; font-weight:750; }.split-buy-summary strong { color:#0f766e; font-size:1.02rem; }.split-buy-reading { margin:0; padding:12px 13px; color:#134e4a; background:#f0fdfa; border:1px solid #99f6e4; border-radius:9px; font-size:.8rem; line-height:1.55; }.split-buy-modal footer { display:flex; gap:8px; align-items:center; margin-top:14px; padding:10px 12px; color:#64748b; background:#f8fafc; border-radius:8px; font-size:.72rem; }.split-buy-modal footer button { margin-left:auto; padding:6px 8px; color:#0f766e; background:#fff; border:1px solid #99f6e4; border-radius:6px; font-size:.69rem; font-weight:800; }
@media (max-width:640px) { .split-buy-modal header,.split-buy-modal main { padding-left:15px; padding-right:15px; }.split-buy-steps { grid-template-columns:repeat(2,1fr); }.split-buy-summary { grid-template-columns:repeat(2,1fr); }.split-buy-now { grid-template-columns:1fr; } }
.dividend-calendar-button { display:inline-flex; align-items:center; gap:7px; padding:10px 14px; color:#9d174d; background:#fdf2f8; border:1px solid #fbcfe8; border-radius:9px; font-size:.82rem; font-weight:800; }.dividend-calendar-button:hover { color:#fff; background:#db2777; }
.dividend-calendar-modal-backdrop { position:fixed; z-index:1200; inset:0; display:none; place-items:center; padding:16px; background:rgba(15,23,42,.58); }.dividend-calendar-modal-backdrop.show { display:grid; }
.dividend-calendar-modal { width:min(980px,97vw); max-height:96vh; overflow:auto; background:#fff; border-radius:16px; }
.dividend-calendar-modal header { display:flex; justify-content:space-between; padding:20px 24px; border-bottom:1px solid #e2e8f0; }.dividend-calendar-modal header>div { display:flex; gap:12px; align-items:center; }
.dividend-calendar-modal header span { display:grid; width:42px; height:42px; place-items:center; color:#fff; background:#db2777; border-radius:11px; font-size:1.1rem; }
.dividend-calendar-modal h2 { margin:0; }.dividend-calendar-modal header p { margin:3px 0 0; color:#64748b; font-size:.8rem; }
.dividend-calendar-modal header>button { width:40px; height:40px; flex:0 0 auto; color:#64748b; border-radius:10px; font-size:1.2rem; }
.dividend-calendar-tabs { display:flex; flex-wrap:wrap; gap:8px; padding:14px 24px 0; }
.dividend-calendar-tabs button { padding:8px 12px; color:#9d174d; background:#fdf2f8; border:1px solid #fbcfe8; border-radius:8px; font-size:.78rem; font-weight:800; }
.dividend-calendar-tabs button.is-active { color:#fff; background:#db2777; border-color:#db2777; }
.dividend-calendar-modal main { padding:16px 24px 22px; }
.dividend-calendar-status { margin:0 0 12px; color:#475569; font-size:.78rem; }
.dividend-calendar-highlights { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
.dividend-calendar-highlights article { display:flex; flex-direction:column; gap:5px; padding:12px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:9px; }
.dividend-calendar-highlights article.is-estimate { background:#fdf2f8; border-color:#fbcfe8; }
.dividend-calendar-highlights span { color:#64748b; font-size:.7rem; font-weight:750; }
.dividend-calendar-highlights strong { color:#0f172a; font-size:1.02rem; font-variant-numeric:tabular-nums; }
.dividend-calendar-highlights article.is-estimate strong { color:#9d174d; }
.dividend-calendar-subtitle { margin:0 0 8px; color:#0f172a; font-size:.86rem; font-weight:800; }
.dividend-calendar-table-wrap { overflow-x:auto; }
.dividend-calendar-table { width:100%; min-width:420px; margin:0 0 10px; border-collapse:collapse; font-size:.78rem; }
.dividend-calendar-table th,.dividend-calendar-table td { padding:7px 8px; text-align:left; border-bottom:1px solid #e2e8f0; }
.dividend-calendar-table thead th { color:#64748b; font-weight:750; }
.dividend-calendar-table small { margin-left:5px; padding:1px 5px; color:#db2777; background:#fdf2f8; border-radius:4px; font-size:.64rem; font-weight:800; }
.dividend-calendar-table tr.is-estimate td { color:#9d174d; background:#fdf2f8; }
.dividend-calendar-note { display:block; margin:8px 0 0; padding:11px 12px; color:#831843; background:#fdf2f8; border:1px solid #fbcfe8; border-radius:8px; font-size:.74rem; line-height:1.5; }
@media (max-width:760px) { .dividend-calendar-highlights { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) { .dividend-calendar-modal header,.dividend-calendar-modal main,.dividend-calendar-tabs { padding-left:15px; padding-right:15px; } }
.financial-statement-samples-button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; color: #1e3a8a; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 9px; font-size: .82rem; font-weight: 800; box-shadow: 0 2px 5px rgba(37,99,235,.08); }
.financial-statement-samples-button:hover { color: #fff; background: #2563eb; border-color: #2563eb; }
.financial-statement-modal-backdrop { position: fixed; z-index: 1200; inset: 0; display: none; align-items: center; justify-content: center; padding: .5vh .5vw; background: rgba(15,23,42,.58); backdrop-filter: blur(2px); }
.financial-statement-modal-backdrop.show { display: flex; }
.financial-statement-modal { width: min(1480px, 100%); max-height: 99vh; overflow: auto; background: #fff; border: 1px solid #cbd5e1; border-radius: 18px; box-shadow: 0 24px 70px rgba(15,23,42,.32); }
.financial-statement-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: clamp(18px, 2.1vw, 28px) clamp(20px, 3vw, 34px); border-bottom: 1px solid #e2e8f0; }
.financial-statement-modal-header > div { display: flex; align-items: center; gap: 16px; }
.financial-statement-modal-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; color: #fff; background: linear-gradient(135deg, #1d4ed8, #0f766e); border-radius: 13px; font-size: 1.2rem; }
.financial-statement-modal h2 { margin: 0; color: #0f172a; font-size: clamp(1.25rem, 2.2vw, 1.75rem); }
.financial-statement-modal-header p { margin: 4px 0 0; color: #64748b; font-size: clamp(.82rem, 1.2vw, .96rem); }
.financial-statement-modal-close { width: 40px; height: 40px; flex: 0 0 auto; color: #64748b; border-radius: 10px; font-size: 1.2rem; }
.financial-statement-modal-close:hover { color: #0f172a; background: #f1f5f9; }
.financial-statement-simulator { position: relative; padding: clamp(16px, 2vw, 24px) clamp(20px, 3vw, 34px) 20px; }
.financial-statement-input-connections { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.financial-input-connection { fill: none; stroke-width: 2; stroke-dasharray: 4 3; opacity: .9; }
.financial-input-connection.input-link-0 { stroke: #2563eb; }
.financial-input-connection.input-link-1, .financial-input-connection.input-link-2 { stroke: #e11d48; }
.financial-input-connection.input-link-3 { stroke: #0891b2; }
.financial-input-connection.input-link-4 { stroke: #d97706; }
.financial-input-connection.input-link-5 { stroke: #7c3aed; }
.financial-input-connection.input-link-6 { stroke: #d97706; }
.financial-input-connection.input-link-7 { stroke: #7c3aed; }
.financial-statement-inputs { padding: 15px 17px 17px; background: #f8fafc; border: 1px solid #dbeafe; border-radius: 12px; }
.financial-statement-inputs, .financial-statement-flow, .financial-statement-modal-note { position: relative; z-index: 3; }
.financial-statement-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 12px; }
.financial-statement-section-heading > div { display: flex; align-items: center; gap: 9px; }
.financial-statement-section-heading span { padding: 3px 7px; color: #1d4ed8; background: #dbeafe; border-radius: 99px; font-size: .67rem; font-weight: 900; letter-spacing: .04em; }
.financial-statement-section-heading h3 { margin: 0; color: #1e293b; font-size: .95rem; }
.financial-statement-section-heading p { margin: 0; color: #64748b; font-size: .76rem; }
.financial-statement-input-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.financial-statement-input-grid label { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; column-gap: 6px; color: #475569; font-size: .76rem; font-weight: 750; }
.financial-statement-input-grid label > span { min-width: 0; }
.financial-statement-input-grid input { grid-column: 1 / -1; width: 100%; box-sizing: border-box; margin-top: 5px; padding: 8px 9px; color: #0f172a; background: #fff; border: 1px solid #cbd5e1; border-radius: 7px; font-size: .92rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.financial-statement-input-grid input:focus { outline: 2px solid #93c5fd; border-color: #2563eb; }
.financial-statement-input-grid small { min-width: 0; color: #94a3b8; font-size: .64rem; font-weight: 500; white-space: nowrap; }
.financial-statement-flow { display: flex; align-items: center; justify-content: center; gap: 11px; padding: 14px 0 11px; color: #64748b; font-size: .78rem; font-weight: 800; }
.financial-statement-flow span { padding: 4px 10px; color: #1e40af; background: #eff6ff; border-radius: 99px; }
.financial-statement-flow i { color: #94a3b8; font-size: .72rem; }
.financial-statement-results { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.financial-statement-connections { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.financial-connection-line { fill: none; stroke-width: 2; stroke-dasharray: 4 3; }
.financial-connection-line.link-0 { stroke: #2563eb; }
.financial-connection-line.link-1 { stroke: #d97706; }
.financial-connection-line.link-2 { stroke: #7c3aed; }
.financial-connection-line.link-3 { stroke: #059669; }
.financial-connection-label.link-0 { fill: #2563eb; }
.financial-connection-label.link-1 { fill: #b45309; }
.financial-connection-label.link-2 { fill: #6d28d9; }
.financial-connection-label.link-3 { fill: #047857; }
.financial-connection-label { font-size: 10px; font-weight: 800; text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.financial-statement-card { position: relative; z-index: 3; overflow: hidden; border: 1px solid #dbe3ee; border-radius: 11px; }
.financial-statement-card h3 { margin: 0; padding: 13px 15px; color: #fff; background: #1e3a5f; font-size: .98rem; }
.financial-statement-card h3 i { margin-right: 5px; }
.financial-statement-card dl { margin: 0; padding: 7px 15px 9px; }
.financial-statement-card dl > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; border-bottom: 1px solid #eef2f7; }
.financial-statement-card dl > div:last-child { border-bottom: 0; }
.financial-statement-card dt { color: #64748b; font-size: .84rem; }
.financial-statement-card .input-row { background: #fffaf0; }
.financial-statement-card .input-row dt { color: #9a6700; }
.financial-statement-card dt small { color: #94a3b8; font-size: .69rem; font-weight: 500; }
.financial-statement-card dd { margin: 0; color: #0f172a; font-size: .96rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.financial-statement-card dd.negative { color: #dc2626; }
.financial-statement-card .total { margin-inline: -15px; padding: 0 15px; background: #eff6ff; border-bottom: 0; }
.financial-statement-card .total dt, .financial-statement-card .total dd { color: #1e3a8a; font-weight: 900; }
.financial-statement-card .balance-check dd { color: #059669; font-size: .76rem; }
.financial-statement-modal-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 0; padding: 10px 12px; color: #475569; background: #f8fafc; border-radius: 9px; font-size: .74rem; line-height: 1.45; }
.financial-statement-modal-note i { margin-right: 4px; color: #2563eb; }
.financial-statement-modal-note button { flex: 0 0 auto; padding: 6px 8px; color: #1d4ed8; background: #fff; border: 1px solid #bfdbfe; border-radius: 6px; font-size: .7rem; font-weight: 800; }
.financial-statement-modal-note button:hover { color: #fff; background: #2563eb; }
.valuation-simulator-button { display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 4px; padding: 10px 14px; color: #5b21b6; background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 9px; font-size: .82rem; font-weight: 800; box-shadow: 0 2px 5px rgba(124,58,237,.08); }
.valuation-simulator-button:hover { color: #fff; background: #7c3aed; border-color: #7c3aed; }
.psr-simulator-button { display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 4px 7px; padding: 10px 14px; color: #9a3412; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 9px; font-size: .82rem; font-weight: 800; box-shadow: 0 2px 5px rgba(194,65,12,.08); }
.psr-simulator-button:hover { color: #fff; background: #ea580c; border-color: #ea580c; }
.valuation-modal-backdrop { position: fixed; z-index: 1200; inset: 0; display: none; align-items: center; justify-content: center; padding: .5vh .5vw; background: rgba(15,23,42,.58); backdrop-filter: blur(2px); }
.valuation-modal-backdrop.show { display: flex; }
.valuation-modal { width: min(1640px, 100%); max-height: 99vh; overflow: auto; background: #fff; border: 1px solid #cbd5e1; border-radius: 18px; box-shadow: 0 24px 70px rgba(15,23,42,.32); }
.valuation-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 23px 28px 20px; border-bottom: 1px solid #e2e8f0; }
.valuation-modal-header > div { display: flex; align-items: center; gap: 14px; }
.valuation-modal-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; color: #fff; background: linear-gradient(135deg, #7c3aed, #2563eb); border-radius: 13px; font-size: 1.2rem; }
.valuation-modal h2 { margin: 0; color: #0f172a; font-size: 1.45rem; }
.valuation-modal-header p { margin: 4px 0 0; color: #64748b; font-size: .88rem; }
.valuation-modal-close { width: 40px; height: 40px; flex: 0 0 auto; color: #64748b; border-radius: 10px; font-size: 1.2rem; }
.valuation-modal-close:hover { color: #0f172a; background: #f1f5f9; }
.valuation-simulator { padding: 20px 28px 24px; }
.valuation-inputs { padding: 15px 17px 17px; background: #faf9ff; border: 1px solid #e9d5ff; border-radius: 12px; }
.valuation-section-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.valuation-section-heading > span { padding: 3px 7px; color: #6d28d9; background: #ede9fe; border-radius: 99px; font-size: .67rem; font-weight: 900; letter-spacing: .04em; }
.valuation-section-heading h3 { margin: 0; color: #312e81; font-size: .94rem; }
.valuation-section-heading p { margin: 0 0 0 auto; color: #64748b; font-size: .72rem; }
.valuation-input-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.valuation-input-grid label { display: grid; gap: 5px; color: #475569; font-size: .76rem; font-weight: 750; }
.valuation-input-grid input { width: 100%; box-sizing: border-box; padding: 8px 9px; color: #0f172a; background: #fff; border: 1px solid #cbd5e1; border-radius: 7px; font-size: .94rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.valuation-input-grid input:focus { outline: 2px solid #c4b5fd; border-color: #7c3aed; }
.valuation-results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.valuation-metric { display: grid; gap: 5px; padding: 13px; background: #f8fafc; border: 1px solid #dbe3ee; border-radius: 10px; }
.valuation-metric > span { color: #64748b; font-size: .73rem; font-weight: 750; }
.valuation-metric strong { color: #0f172a; font-size: 1.08rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.valuation-metric strong b { font-weight: 800; }
.valuation-metric small { color: #94a3b8; font-size: .65rem; }
.valuation-metric.highlight { background: #f5f3ff; border-color: #c4b5fd; }
.valuation-metric.highlight strong { color: #6d28d9; font-size: 1.22rem; }
.valuation-metric.highlight.green { background: #ecfdf5; border-color: #a7f3d0; }
.valuation-metric.highlight.green strong { color: #047857; }
.psr-results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.valuation-metric.psr-highlight { background: #fff7ed; border-color: #fdba74; }
.valuation-metric.psr-highlight strong { color: #c2410c; }
.valuation-formulas { padding: 15px 17px; border: 1px solid #dbe3ee; border-radius: 12px; }
.valuation-formulas ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: formula; }
.valuation-formulas li { display: grid; grid-template-columns: 26% 1fr; gap: 10px; align-items: center; padding: 9px 10px; color: #475569; background: #f8fafc; border-radius: 7px; font-size: .81rem; }
.valuation-formulas li b { color: #334155; }
.valuation-formulas li span { color: #0f172a; font-weight: 700; font-variant-numeric: tabular-nums; }
.valuation-formulas li.per-formula { color: #4c1d95; background: #f5f3ff; border: 1px solid #ddd6fe; }
.valuation-formulas li.per-formula b, .valuation-formulas li.per-formula span { color: #5b21b6; }
.valuation-per-meaning { margin-top: 14px; padding: 14px 17px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; }
.valuation-per-meaning .valuation-section-heading { margin-bottom: 9px; }
.valuation-per-meaning .valuation-section-heading > span { color: #a16207; background: #fef3c7; }
.valuation-per-meaning .valuation-section-heading h3 { color: #78350f; }
.valuation-per-meaning-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.valuation-per-meaning-grid article { display: grid; gap: 5px; padding: 11px 12px; background: #fff; border: 1px solid #fde68a; border-radius: 8px; }
.valuation-per-meaning-grid article > span { color: #a16207; font-size: .7rem; font-weight: 800; }
.valuation-per-meaning-grid article > span i { margin-right: 4px; }
.valuation-per-meaning-grid strong { color: #78350f; font-size: .9rem; }
.valuation-per-meaning-grid p { margin: 0; color: #6b7280; font-size: .73rem; line-height: 1.5; }
.psr-meaning { margin-top: 14px; padding: 14px 17px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 12px; }
.psr-meaning .valuation-section-heading { margin-bottom: 9px; }
.psr-meaning .valuation-section-heading > span { color: #c2410c; background: #ffedd5; }
.psr-meaning .valuation-section-heading h3 { color: #9a3412; }
.psr-meaning-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.psr-meaning-grid article { padding: 11px 12px; background: #fff; border: 1px solid #fed7aa; border-radius: 8px; }
.psr-meaning-grid strong { display: block; color: #9a3412; font-size: .86rem; }
.psr-meaning-grid p { margin: 6px 0 0; color: #6b7280; font-size: .73rem; line-height: 1.5; }
.valuation-examples { margin-top: 14px; padding: 14px 17px; background: #f8fafc; border: 1px solid #dbe3ee; border-radius: 12px; }
.valuation-examples .valuation-section-heading { margin-bottom: 7px; }
.valuation-example-intro { margin: 0 0 10px; color: #475569; font-size: .79rem; line-height: 1.45; }
.valuation-example-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.valuation-example-cards article { display: grid; gap: 4px; padding: 10px 12px; background: #fff; border: 1px solid #e2e8f0; border-left: 3px solid #8b5cf6; border-radius: 8px; }
.valuation-example-cards article span { color: #6d28d9; font-size: .69rem; font-weight: 800; }
.valuation-example-cards article strong { color: #1e293b; font-size: .88rem; }
.valuation-example-cards article p { margin: 0; color: #64748b; font-size: .72rem; line-height: 1.4; }
.valuation-note { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; color: #64748b; background: #f8fafc; border-radius: 9px; font-size: .74rem; line-height: 1.45; }
.valuation-note > i { color: #7c3aed; }
.valuation-note button { flex: 0 0 auto; margin-left: auto; padding: 6px 8px; color: #6d28d9; background: #fff; border: 1px solid #ddd6fe; border-radius: 6px; font-size: .69rem; font-weight: 800; }
.valuation-note button:hover { color: #fff; background: #7c3aed; }
.roe-eps-simulator-button { display: inline-flex; align-items: center; gap: 7px; margin: 4px 0; padding: 10px 14px; color: #0369a1; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 9px; font-size: .82rem; font-weight: 800; box-shadow: 0 2px 5px rgba(2,132,199,.08); }
.roe-eps-simulator-button:hover { color: #fff; background: #0284c7; border-color: #0284c7; }
.roe-eps-modal-backdrop { position: fixed; z-index: 1200; inset: 0; display: none; align-items: center; justify-content: center; padding: 1vh 1vw; background: rgba(15,23,42,.58); backdrop-filter: blur(2px); }
.roe-eps-modal-backdrop.show { display: flex; }
.roe-eps-modal { width: min(1160px, 100%); max-height: 98vh; overflow: auto; background: #fff; border: 1px solid #cbd5e1; border-radius: 18px; box-shadow: 0 24px 70px rgba(15,23,42,.32); }
.roe-eps-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 28px 19px; border-bottom: 1px solid #e2e8f0; }
.roe-eps-modal-header > div { display: flex; align-items: center; gap: 14px; }
.roe-eps-modal-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; color: #fff; background: linear-gradient(135deg, #0284c7, #0f766e); border-radius: 13px; font-size: 1.2rem; }
.roe-eps-modal h2 { margin: 0; color: #0f172a; font-size: 1.45rem; }
.roe-eps-modal-header p { margin: 4px 0 0; color: #64748b; font-size: .88rem; }
.roe-eps-modal-close { width: 40px; height: 40px; flex: 0 0 auto; color: #64748b; border-radius: 10px; font-size: 1.2rem; }
.roe-eps-modal-close:hover { color: #0f172a; background: #f1f5f9; }
.roe-eps-simulator { padding: 20px 28px 24px; }
.roe-eps-inputs { padding: 15px 17px 17px; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 12px; }
.roe-eps-section-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.roe-eps-section-heading > span { padding: 3px 7px; color: #0369a1; background: #dbeafe; border-radius: 99px; font-size: .67rem; font-weight: 900; letter-spacing: .04em; }
.roe-eps-section-heading h3 { margin: 0; color: #0c4a6e; font-size: .94rem; }
.roe-eps-section-heading p { margin: 0 0 0 auto; color: #64748b; font-size: .72rem; }
.roe-eps-input-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; }
.roe-eps-input-grid label { display: grid; gap: 5px; color: #475569; font-size: .76rem; font-weight: 750; }
.roe-eps-input-grid input { width: 100%; box-sizing: border-box; padding: 8px 9px; color: #0f172a; background: #fff; border: 1px solid #cbd5e1; border-radius: 7px; font-size: .94rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.roe-eps-input-grid input:focus { outline: 2px solid #7dd3fc; border-color: #0284c7; }
.roe-eps-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.roe-eps-results > div { display: grid; gap: 5px; padding: 14px; background: #f8fafc; border: 1px solid #dbe3ee; border-radius: 10px; }
.roe-eps-results span { color: #64748b; font-size: .76rem; font-weight: 750; }
.roe-eps-results strong { color: #0f172a; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.roe-eps-results small { color: #94a3b8; font-size: .67rem; }
.roe-eps-results .highlight { background: #ecfdf5; border-color: #a7f3d0; }
.roe-eps-results .highlight strong { color: #047857; }
.roe-eps-results .highlight.blue { background: #eff6ff; border-color: #bfdbfe; }
.roe-eps-results .highlight.blue strong { color: #1d4ed8; }
.roe-eps-formulas { padding: 15px 17px; border: 1px solid #dbe3ee; border-radius: 12px; }
.roe-eps-formulas ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.roe-eps-formulas li { display: grid; grid-template-columns: 24% 1fr; gap: 10px; align-items: center; padding: 10px; color: #0f172a; background: #f8fafc; border-radius: 7px; font-size: .84rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.roe-eps-formulas li b { color: #334155; }
.roe-eps-formulas .roe-formula { color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; }
.roe-eps-formulas .roe-formula b { color: #047857; }
.roe-eps-formulas .eps-formula { color: #1d4ed8; background: #eff6ff; border: 1px solid #bfdbfe; }
.roe-eps-formulas .eps-formula b { color: #1d4ed8; }
.roe-eps-note { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; color: #64748b; background: #f8fafc; border-radius: 9px; font-size: .74rem; line-height: 1.45; }
.roe-eps-note > i { color: #0284c7; }
.roe-eps-note button { flex: 0 0 auto; margin-left: auto; padding: 6px 8px; color: #0369a1; background: #fff; border: 1px solid #bae6fd; border-radius: 6px; font-size: .69rem; font-weight: 800; }
.roe-eps-note button:hover { color: #fff; background: #0284c7; }
.financial-health-simulator-button { display: inline-flex; align-items: center; gap: 7px; margin: 4px 0; padding: 10px 14px; color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 9px; font-size: .82rem; font-weight: 800; box-shadow: 0 2px 5px rgba(5,150,105,.08); }
.financial-health-simulator-button:hover { color: #fff; background: #059669; border-color: #059669; }
.financial-health-modal-backdrop { position: fixed; z-index: 1200; inset: 0; display: none; align-items: center; justify-content: center; padding: 1vh 1vw; background: rgba(15,23,42,.58); backdrop-filter: blur(2px); }
.financial-health-modal-backdrop.show { display: flex; }
.financial-health-modal { width: min(1320px, 100%); max-height: 98vh; overflow: auto; background: #fff; border: 1px solid #cbd5e1; border-radius: 18px; box-shadow: 0 24px 70px rgba(15,23,42,.32); }
.financial-health-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 28px 19px; border-bottom: 1px solid #e2e8f0; }
.financial-health-modal-header > div { display: flex; align-items: center; gap: 14px; }
.financial-health-modal-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; color: #fff; background: linear-gradient(135deg, #059669, #0f766e); border-radius: 13px; font-size: 1.2rem; }
.financial-health-modal h2 { margin: 0; color: #0f172a; font-size: 1.45rem; }
.financial-health-modal-header p { margin: 4px 0 0; color: #64748b; font-size: .88rem; }
.financial-health-modal-close { width: 40px; height: 40px; flex: 0 0 auto; color: #64748b; border-radius: 10px; font-size: 1.2rem; }
.financial-health-modal-close:hover { color: #0f172a; background: #f1f5f9; }
.financial-health-simulator { padding: 20px 28px 24px; }
.financial-health-inputs { padding: 15px 17px 17px; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 12px; }
.financial-health-section-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.financial-health-section-heading > span { padding: 3px 7px; color: #047857; background: #d1fae5; border-radius: 99px; font-size: .67rem; font-weight: 900; letter-spacing: .04em; }
.financial-health-section-heading h3 { margin: 0; color: #065f46; font-size: .94rem; }
.financial-health-section-heading p { margin: 0 0 0 auto; color: #64748b; font-size: .72rem; }
.financial-health-input-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.financial-health-input-grid label { display: grid; gap: 5px; color: #475569; font-size: .76rem; font-weight: 750; }
.financial-health-input-grid input { width: 100%; box-sizing: border-box; padding: 8px 9px; color: #0f172a; background: #fff; border: 1px solid #cbd5e1; border-radius: 7px; font-size: .94rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.financial-health-input-grid input:focus { outline: 2px solid #6ee7b7; border-color: #059669; }
.financial-health-results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.financial-health-results article { display: grid; gap: 5px; padding: 13px; background: #f8fafc; border: 1px solid #dbe3ee; border-radius: 10px; }
.financial-health-results span { color: #64748b; font-size: .73rem; font-weight: 750; }
.financial-health-results strong { color: #047857; font-size: 1.12rem; font-variant-numeric: tabular-nums; }
.financial-health-results small { color: #94a3b8; font-size: .65rem; }
.financial-health-reading, .financial-health-examples { padding: 15px 17px; border: 1px solid #dbe3ee; border-radius: 12px; }
.financial-health-checks { display: grid; gap: 8px; }
.financial-health-checks p { margin: 0; padding: 10px 11px; color: #334155; background: #f8fafc; border-radius: 7px; font-size: .79rem; line-height: 1.5; }
.financial-health-examples { margin-top: 14px; background: #f0fdf4; border-color: #bbf7d0; }
.financial-health-examples > p { margin: 0 0 10px; color: #475569; font-size: .79rem; line-height: 1.45; }
.financial-health-example-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.financial-health-example-cards article { display: grid; gap: 4px; padding: 10px 12px; background: #fff; border: 1px solid #d1fae5; border-left: 3px solid #10b981; border-radius: 8px; }
.financial-health-example-cards span { color: #047857; font-size: .69rem; font-weight: 800; }
.financial-health-example-cards strong { color: #1e293b; font-size: .88rem; }
.financial-health-example-cards p { margin: 0; color: #64748b; font-size: .72rem; line-height: 1.4; }
.financial-health-note { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; color: #64748b; background: #f8fafc; border-radius: 9px; font-size: .74rem; line-height: 1.45; }
.financial-health-note > i { color: #059669; }
.financial-health-note button { flex: 0 0 auto; margin-left: auto; padding: 6px 8px; color: #047857; background: #fff; border: 1px solid #a7f3d0; border-radius: 6px; font-size: .69rem; font-weight: 800; }
.financial-health-note button:hover { color: #fff; background: #059669; }
.dcf-simulator-button { display: inline-flex; align-items: center; gap: 7px; margin: 4px 0; padding: 10px 14px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 9px; font-size: .82rem; font-weight: 800; box-shadow: 0 2px 5px rgba(217,119,6,.08); }
.dcf-simulator-button:hover { color: #fff; background: #d97706; border-color: #d97706; }
.dcf-modal-backdrop { position: fixed; z-index: 1200; inset: 0; display: none; align-items: center; justify-content: center; padding: 1vh 1vw; background: rgba(15,23,42,.58); backdrop-filter: blur(2px); }
.dcf-modal-backdrop.show { display: flex; }
.dcf-modal { width: 95vw; max-width: 95vw; height: 95vh; max-height: 95vh; overflow: auto; background: #fff; border: 1px solid #cbd5e1; border-radius: 18px; box-shadow: 0 24px 70px rgba(15,23,42,.32); }
.dcf-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 28px 19px; border-bottom: 1px solid #e2e8f0; }
.dcf-modal-header > div { display: flex; align-items: center; gap: 14px; }
.dcf-modal-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; color: #fff; background: linear-gradient(135deg, #d97706, #ea580c); border-radius: 13px; font-size: 1.2rem; }
.dcf-modal h2 { margin: 0; color: #0f172a; font-size: 1.45rem; }
.dcf-modal-header p { margin: 4px 0 0; color: #64748b; font-size: .88rem; }
.dcf-modal-close { width: 40px; height: 40px; flex: 0 0 auto; color: #64748b; border-radius: 10px; font-size: 1.2rem; }
.dcf-modal-close:hover { color: #0f172a; background: #f1f5f9; }
.dcf-simulator { padding: 20px 28px 24px; }
.dcf-inputs { padding: 15px 17px 17px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; }
.dcf-section-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.dcf-section-heading > span { padding: 3px 7px; color: #92400e; background: #fef3c7; border-radius: 99px; font-size: .67rem; font-weight: 900; letter-spacing: .04em; }
.dcf-section-heading h3 { margin: 0; color: #78350f; font-size: .94rem; }
.dcf-section-heading p { margin: 0 0 0 auto; color: #64748b; font-size: .72rem; }
.dcf-input-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.dcf-input-grid label { display: grid; gap: 5px; color: #475569; font-size: .76rem; font-weight: 750; }
.dcf-input-grid input { width: 100%; box-sizing: border-box; padding: 8px 9px; color: #0f172a; background: #fff; border: 1px solid #cbd5e1; border-radius: 7px; font-size: .94rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.dcf-input-grid input:focus { outline: 2px solid #fcd34d; border-color: #d97706; }
.dcf-input-grid small { color: #94a3b8; font-size: .64rem; font-weight: 500; }
.dcf-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.dcf-results > div { display: grid; gap: 5px; padding: 14px; background: #f8fafc; border: 1px solid #dbe3ee; border-radius: 10px; }
.dcf-results span { color: #64748b; font-size: .76rem; font-weight: 750; }
.dcf-results strong { color: #0f172a; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.dcf-results small { color: #94a3b8; font-size: .67rem; }
.dcf-results .highlight { background: #fff7ed; border-color: #fdba74; }
.dcf-results .highlight strong { color: #c2410c; }
.dcf-forecast, .dcf-formula { padding: 15px 17px; border: 1px solid #dbe3ee; border-radius: 12px; }
.dcf-forecast-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.dcf-forecast-grid > div { display: grid; gap: 4px; padding: 10px; background: #f8fafc; border-radius: 7px; }
.dcf-forecast-grid span { color: #64748b; font-size: .7rem; font-weight: 750; }
.dcf-forecast-grid b { color: #334155; font-size: .76rem; }
.dcf-forecast-grid strong { color: #b45309; font-size: .76rem; }
.dcf-formula { margin-top: 14px; background: #fffbeb; border-color: #fde68a; }
.dcf-formula p { margin: 0; color: #78350f; font-size: .84rem; font-weight: 750; line-height: 1.55; font-variant-numeric: tabular-nums; }
.dcf-formula small { display: block; margin-top: 6px; color: #a16207; font-size: .68rem; }
.dcf-note { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; color: #64748b; background: #f8fafc; border-radius: 9px; font-size: .74rem; line-height: 1.45; }
.dcf-note > i { color: #d97706; }
.dcf-note button { flex: 0 0 auto; margin-left: auto; padding: 6px 8px; color: #92400e; background: #fff; border: 1px solid #fde68a; border-radius: 6px; font-size: .69rem; font-weight: 800; }
.dcf-note button:hover { color: #fff; background: #d97706; }
@media (max-width: 850px) { .financial-statement-input-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .financial-statement-results { grid-template-columns: 1fr; } .financial-statement-connections, .financial-statement-input-connections { display: none; } }
@media (max-width: 900px) { .roe-eps-input-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .valuation-input-grid, .valuation-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .mermaid-modal-chart { padding: 18px; align-items: flex-start; }
  .mermaid-modal-chart svg { width: 1200px; }
  .macro-news-modal-backdrop { padding: 10px; }
  .macro-news-controls { grid-template-columns: 1fr; }
  .macro-news-modal-header { padding: 15px; }
  .macro-news-canvas-wrap { padding-inline: 12px; }
  .macro-news-insight, .macro-news-disclaimer { margin-inline: 12px; }
  .chart-drawing-offcanvas-header { padding: 8px 12px; }
  .chart-drawing-offcanvas-header > div { gap: 7px; }
  .chart-drawing-offcanvas-header > div > div { gap: 7px; }
  .chart-drawing-offcanvas-icon { width: 30px; height: 30px; font-size: .85rem; }
  .chart-drawing-offcanvas h2 { font-size: 1rem; }
  .chart-drawing-offcanvas-header p { font-size: .66rem; }
  .chart-drawing-split { grid-template-columns: 1fr; padding: 12px; }
  .chart-drawing-panel > header { align-items: flex-start; flex-direction: column; gap: 4px; }
  .chart-drawing-note { margin: 0 12px 16px; }
  .ma-cross-modal-header { padding: 15px; }
  .ma-cross-toolbar { align-items: flex-start; flex-direction: column; padding: 11px 15px; }
  .ma-cross-split { grid-template-columns: 1fr; padding: 12px; }
  .ma-cross-panel > header { align-items: flex-start; flex-direction: column; gap: 4px; }
  .ma-cross-note { margin: 0 12px 16px; }
  .rsi-macd-modal-backdrop { padding: 10px; }
  .rsi-macd-modal-header { padding: 17px 16px; }
  .rsi-macd-modal-header > div { gap: 10px; }
  .rsi-macd-modal-icon { width: 40px; height: 40px; }
  .rsi-macd-modal h2 { font-size: 1.15rem; }
  .rsi-macd-simulator { padding: 14px; }
  .rsi-macd-input-grid, .rsi-macd-results { grid-template-columns: 1fr; }
  .rsi-macd-detail li { grid-template-columns: 1fr; gap: 3px; }
  .rsi-macd-note { align-items: flex-start; flex-wrap: wrap; }
  .rsi-macd-note button { margin-left: 0; }
  .atr-modal-backdrop { padding: 10px; }
  .atr-modal-header { padding: 17px 16px; }
  .atr-modal-header > div { gap: 10px; }
  .atr-modal-icon { width: 40px; height: 40px; }
  .atr-modal h2 { font-size: 1.15rem; }
  .atr-simulator { padding: 14px; }
  .atr-input-grid, .atr-results { grid-template-columns: 1fr; }
  .atr-detail li { grid-template-columns: 1fr; gap: 3px; }
  .atr-note { align-items: flex-start; flex-wrap: wrap; }
  .atr-note button { margin-left: 0; }
  .opening-session-modal-backdrop { padding: 10px; }
  .opening-session-modal-header { padding: 17px 16px; }
  .opening-session-modal-header > div { gap: 10px; }
  .opening-session-modal-icon { width: 40px; height: 40px; }
  .opening-session-modal h2 { font-size: 1.15rem; }
  .opening-session-tabs { padding: 12px 14px 0; }
  .opening-session-body { padding: 12px 14px 18px; }
  .opening-session-summary { grid-template-columns: 1fr; }
  .financial-statement-modal-backdrop { padding: 10px; }
  .financial-statement-modal-header { padding: 15px; }
  .financial-statement-modal-header > div { gap: 10px; }
  .financial-statement-modal-icon { width: 40px; height: 40px; }
  .financial-statement-simulator { padding: 12px; }
  .financial-statement-input-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .financial-statement-modal-note { align-items: flex-start; flex-direction: column; }
  .valuation-modal-backdrop { padding: 10px; }
  .valuation-modal-header { padding: 17px 16px; }
  .valuation-modal-header > div { gap: 10px; }
  .valuation-modal-icon { width: 40px; height: 40px; }
  .valuation-modal h2 { font-size: 1.15rem; }
  .valuation-simulator { padding: 14px; }
  .valuation-input-grid, .valuation-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .psr-results, .psr-meaning-grid { grid-template-columns: 1fr; }
  .valuation-per-meaning-grid { grid-template-columns: 1fr; }
  .valuation-example-cards { grid-template-columns: 1fr; }
  .valuation-formulas li { grid-template-columns: 1fr; gap: 3px; }
  .valuation-note { align-items: flex-start; flex-wrap: wrap; }
  .valuation-note button { margin-left: 0; }
  .roe-eps-modal-backdrop { padding: 10px; }
  .roe-eps-modal-header { padding: 17px 16px; }
  .roe-eps-modal-header > div { gap: 10px; }
  .roe-eps-modal-icon { width: 40px; height: 40px; }
  .roe-eps-modal h2 { font-size: 1.15rem; }
  .roe-eps-simulator { padding: 14px; }
  .roe-eps-input-grid, .roe-eps-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roe-eps-formulas li { grid-template-columns: 1fr; gap: 3px; }
  .roe-eps-note { align-items: flex-start; flex-wrap: wrap; }
  .roe-eps-note button { margin-left: 0; }
  .financial-health-modal-backdrop { padding: 10px; }
  .financial-health-modal-header { padding: 17px 16px; }
  .financial-health-modal-header > div { gap: 10px; }
  .financial-health-modal-icon { width: 40px; height: 40px; }
  .financial-health-modal h2 { font-size: 1.15rem; }
  .financial-health-simulator { padding: 14px; }
  .financial-health-input-grid, .financial-health-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .financial-health-example-cards { grid-template-columns: 1fr; }
  .financial-health-note { align-items: flex-start; flex-wrap: wrap; }
  .financial-health-note button { margin-left: 0; }
  .dcf-modal-backdrop { padding: 10px; }
  .dcf-modal-header { padding: 17px 16px; }
  .dcf-modal-header > div { gap: 10px; }
  .dcf-modal-icon { width: 40px; height: 40px; }
  .dcf-modal h2 { font-size: 1.15rem; }
  .dcf-simulator { padding: 14px; }
  .dcf-input-grid, .dcf-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dcf-forecast-grid { grid-template-columns: 1fr; }
  .dcf-note { align-items: flex-start; flex-wrap: wrap; }
  .dcf-note button { margin-left: 0; }
  .vocabulary-modal-backdrop { padding: 12px; }
  .vocabulary-modal-header { padding: 18px 16px 16px; }
  .vocabulary-modal-content { padding: 16px; }
  .integrated-content-modal-backdrop { padding: 12px; }
  .integrated-content-modal-header { padding: 18px 16px 16px; }
  .integrated-content-modal-body { padding: 18px 16px 22px; }
}
.md-body blockquote { border-left: 4px solid var(--primary); margin: 14px 0; padding: 10px 16px; background: var(--primary-light); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: #444444; }
.md-body strong { font-weight: 700; color: var(--text); }
.md-body a { color: var(--primary); text-decoration: underline; }
.md-body hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
.md-body img { display: block; max-width: 100%; height: auto; margin: 16px auto; border-radius: var(--radius-sm); }

/* ── Home market dashboard ── */
.home-dashboard { min-width: 0; }
.home-market-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.home-market-card { min-width: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px 18px 12px; box-shadow: 0 2px 10px rgba(15,23,42,.05); }
.home-market-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.home-market-name { font-size: .8rem; font-weight: 800; color: #334155; letter-spacing: .03em; }
.home-market-name span { color: #94a3b8; font-weight: 600; }
.home-market-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.home-market-price-row strong { font-size: 1.35rem; line-height: 1; color: #0f172a; letter-spacing: -.03em; }
.home-market-price-row em { font-style: normal; font-size: .72rem; font-weight: 750; padding: 3px 7px; border-radius: 999px; background: #f1f5f9; color: #64748b; }
.home-market-price-row em.is-up { background: #fff1f2; color: #e11d48; }
.home-market-price-row em.is-down { background: #eff6ff; color: #2563eb; }
.home-market-controls { display: flex; align-items: center; gap: 6px; }
.home-market-periods { display: inline-flex; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 6px; }
.home-market-periods button { padding: 3px 7px; color: #64748b; font-size: .68rem; font-weight: 750; border-right: 1px solid #e2e8f0; }
.home-market-periods button:last-child { border-right: 0; }
.home-market-periods button.active { color: #fff; background: #1d4ed8; }
.home-market-expand { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid #e2e8f0; border-radius: 6px; color: #64748b; font-size: .7rem; flex: 0 0 auto; }
.home-market-expand:hover, .home-market-expand:focus-visible { color: #1d4ed8; border-color: #1d4ed8; background: #eff6ff; }
.home-market-chart-wrap { position: relative; min-height: 250px; }
.home-market-chart { width: 100%; }
.home-market-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 7px; color: #94a3b8; font-size: .78rem; background: rgba(255,255,255,.85); }
.home-chart-ma20-badge { position: absolute; top: 6px; left: 6px; display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.92); border: 1px solid #e2e8f0; border-radius: 6px; padding: 3px 9px; font-size: .68rem; font-weight: 750; color: #334155; pointer-events: none; box-shadow: 0 1px 3px rgba(15,23,42,.06); }
.home-chart-ma20-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #1d4ed8; flex: 0 0 auto; }
.home-chart-modal-body .home-chart-ma20-badge { top: 10px; left: 10px; font-size: .74rem; padding: 4px 10px; }
.home-market-macd-wrap { margin-top: 6px; padding-top: 8px; border-top: 1px dashed #eef2f7; }
.home-market-macd-label { font-size: .67rem; font-weight: 750; color: #94a3b8; letter-spacing: .02em; margin-bottom: 2px; }
.home-market-macd { width: 100%; min-height: 110px; }
.home-market-error { color: var(--red); }
.home-market-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; color: #94a3b8; font-size: .67rem; }
.home-market-foot .is-simulated { color: #a16207; }

.home-chart-modal-backdrop { position: fixed; z-index: 1300; inset: 0; display: grid; place-items: stretch; padding: 0; background: rgba(15,23,42,.58); backdrop-filter: blur(3px); }
.home-chart-modal-backdrop[hidden] { display: none; }
.home-chart-modal { width: 100%; height: 100%; max-height: 100vh; overflow: hidden; border: none; border-radius: 0; background: #fff; box-shadow: none; outline: none; display: flex; flex-direction: column; }
.home-chart-modal-header { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 32px; border-bottom: 1px solid #e2e8f0; }
.home-chart-modal-header .home-market-name { font-size: 1.05rem; }
.home-chart-modal-header .home-market-price-row strong { font-size: 1.7rem; }
.home-chart-search { position: relative; display: flex; align-items: center; gap: 5px; }
.home-chart-instrument-label { color: #64748b; font-size: .72rem; font-weight: 750; }
.home-chart-instrument-select { max-width: 210px; height: 30px; padding: 0 28px 0 9px; color: #334155; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; font-size: .73rem; font-weight: 700; }
.home-chart-instrument-select:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; border-color: #2563eb; }
.home-chart-search-results { position: absolute; z-index: 2; top: calc(100% + 6px); right: 0; width: min(360px, 82vw); max-height: 270px; overflow-y: auto; padding: 5px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; box-shadow: 0 12px 28px rgba(15,23,42,.16); }
.home-chart-search-result { display: block; width: 100%; padding: 9px 10px; color: #334155; border-radius: 5px; font-size: .75rem; font-weight: 700; text-align: left; }
.home-chart-search-result:hover, .home-chart-search-result:focus-visible { color: #075985; background: #f0f9ff; }
.home-chart-intervals button { min-width: 34px; padding-inline: 8px; }
.home-chart-modal-close { display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; border-radius: 9px; color: #64748b; font-size: 1.1rem; }
.home-chart-modal-close:hover, .home-chart-modal-close:focus-visible { color: #0f172a; background: #f1f5f9; }
.home-chart-modal-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 14px 32px 16px; max-width: 1600px; width: 100%; margin: 0 auto; overflow-y: auto; }
.home-chart-modal-body .home-market-chart-wrap { flex: 3 1 0; min-height: 260px; }
.home-chart-modal-body .home-market-chart { height: 100%; }
.home-chart-modal-body .home-market-macd-wrap { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; margin-top: 4px; padding-top: 6px; }
.home-chart-modal-body .home-market-macd-label { flex: 0 0 auto; }
.home-chart-modal-macd, .home-chart-modal-rsi { flex: 1 1 auto; min-height: 0; width: 100%; }
.home-chart-trend { flex: 0 0 auto; margin-top: 8px; padding: 10px 12px; border: 1px solid #dbeafe; border-radius: 9px; background: #f8fbff; }
.home-chart-trend h3 { margin: 0 0 7px; color: #1e3a8a; font-size: .76rem; }.home-chart-trend h3 i { margin-right: 4px; }.home-chart-trend h3 small { margin-left: 5px; color: #64748b; font-size: .65rem; font-weight: 600; }
.home-chart-trend p { margin: 8px 0 0; color: #475569; font-size: .72rem; line-height: 1.55; }.home-chart-trend p strong { color: #1e3a8a; }
.home-chart-trend-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }.home-chart-trend-kpis span { padding: 6px 8px; border-radius: 6px; background: #fff; }.home-chart-trend-kpis b, .home-chart-trend-kpis small { display: block; }.home-chart-trend-kpis b { color: #0f172a; font-size: .73rem; }.home-chart-trend-kpis small { margin-top: 2px; color: #64748b; font-size: .62rem; line-height: 1.25; }
.home-chart-learning { flex: 0 0 auto; margin-top: 9px; padding: 12px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }.home-chart-learning > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.home-chart-learning h3 { margin: 0; color: #334155; font-size: .8rem; }.home-chart-learning h3 i { color: #2563eb; margin-right: 5px; }.home-chart-learning > header span { color: #94a3b8; font-size: .65rem; font-weight: 700; }
.home-chart-learning-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }.trend-lesson { padding: 9px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; }.trend-lesson h4 { margin: 7px 0 4px; color: #334155; font-size: .73rem; }.trend-lesson h4 i { margin-right: 4px; }.trend-lesson.is-up h4 i { color: #16a34a; }.trend-lesson.is-down h4 i { color: #dc2626; }.trend-lesson.is-ma h4 i { color: #2563eb; }.trend-lesson p, .trend-lesson small { display: block; margin: 0; color: #64748b; font-size: .65rem; line-height: 1.45; }.trend-lesson small { margin-top: 6px; color: #475569; }.trend-lesson small b { color: #1e3a8a; }
.trend-illustration { position: relative; height: 48px; overflow: hidden; border-bottom: 1px solid #cbd5e1; background: repeating-linear-gradient(0deg, transparent 0 15px, #e2e8f0 16px); }.trend-illustration i { position: absolute; bottom: 3px; width: 4px; border-radius: 2px; background: #94a3b8; }.trend-illustration i:nth-child(1) { left: 17%; height: 14px; }.trend-illustration i:nth-child(2) { left: 48%; height: 25px; }.trend-illustration i:nth-child(3) { left: 79%; height: 34px; }.trend-illustration b { position: absolute; left: 7%; width: 88%; height: 2px; border-radius: 99px; transform-origin: left center; }.trend-illustration .price-line { bottom: 13px; background: #2563eb; transform: rotate(-19deg); }.trend-illustration .ma-line { bottom: 9px; background: #f59e0b; transform: rotate(-13deg); }.trend-lesson.is-down .trend-illustration i:nth-child(1) { height: 34px; }.trend-lesson.is-down .trend-illustration i:nth-child(3) { height: 14px; }.trend-lesson.is-down .price-line { bottom: 37px; background: #dc2626; transform: rotate(19deg); }.trend-lesson.is-down .ma-line { bottom: 33px; background: #f59e0b; transform: rotate(13deg); }.trend-lesson.is-ma .price-line { bottom: 25px; background: #2563eb; transform: rotate(0deg); clip-path: polygon(0 40%,12% 70%,24% 10%,37% 65%,50% 30%,63% 75%,76% 15%,88% 60%,100% 22%,100% 52%,88% 90%,76% 45%,63% 100%,50% 55%,37% 92%,24% 42%,12% 100%,0 70%); }.trend-lesson.is-ma .ma-line { bottom: 20px; background: #f59e0b; transform: rotate(-4deg); }.home-chart-learning-note { margin: 10px 1px 0; color: #475569; font-size: .68rem; line-height: 1.5; }.home-chart-learning-note i { color: #f59e0b; margin-right: 4px; }
.home-chart-modal-body .home-market-foot { flex: 0 0 auto; margin-top: 4px; }
@media (max-width: 760px) {
  .home-chart-modal-header { padding: 12px 16px; flex-wrap: wrap; }
  .home-chart-modal-header .home-market-controls { width: 100%; flex-wrap: wrap; }
  .home-chart-search { flex: 1 1 100%; }
  .home-chart-instrument-select { flex: 1 1 170px; max-width: none; }
  .home-chart-modal-body { padding: 10px 16px 12px; overflow-y: auto; }
  .home-chart-modal-body .home-market-chart-wrap { flex: none; min-height: 320px; }
  .home-chart-modal-macd, .home-chart-modal-rsi { flex: none; min-height: 140px; }
  .home-chart-trend-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-chart-learning-grid { grid-template-columns: 1fr; }
}
.home-quote-dashboard { margin-top: 18px; padding: 18px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 2px 10px rgba(15,23,42,.05); }
.home-quote-dashboard-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.home-quote-dashboard-head h1 { margin: 0; color: #0f172a; font-size: 1rem; font-weight: 800; }
.home-quote-dashboard-head p { margin: 4px 0 0; color: #64748b; font-size: .76rem; }
.home-quote-actions { display: flex; align-items: center; gap: 9px; color: #94a3b8; font-size: .7rem; white-space: nowrap; }
.home-quote-actions button { padding: 6px 9px; color: #0369a1; border: 1px solid #bae6fd; border-radius: 7px; background: #f0f9ff; font-size: .72rem; font-weight: 750; }
.home-quote-actions button:hover { background: #e0f2fe; }
.home-quote-actions button:disabled { opacity: .65; cursor: wait; }
.home-quote-actions button.is-loading i { animation: spin 1s linear infinite; }
.home-quote-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.home-quote-panel { overflow: hidden; border: 1px solid #e2e8f0; border-radius: 10px; }
.home-quote-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 11px 13px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.home-quote-panel-head h2 { margin: 0; color: #1e293b; font-size: .85rem; font-weight: 800; }
.home-quote-panel-head p { margin: 3px 0 0; color: #94a3b8; font-size: .68rem; }
.home-quote-count { padding: 3px 6px; color: #475569; border-radius: 999px; background: #e2e8f0; font-size: .64rem; font-weight: 750; }
.home-quote-list { display: grid; }
.home-quote-row { display: flex; width:100%; justify-content: space-between; align-items: center; gap: 10px; min-height: 47px; padding: 8px 13px; color:inherit; background:#fff; border:0; border-bottom: 1px solid #f1f5f9; text-align:left; font:inherit; cursor:pointer; }
.home-quote-row:last-child { border-bottom: 0; }.home-quote-row:hover { background:#f8fbff; }.home-quote-row:focus-visible { position:relative; z-index:1; outline:2px solid #93c5fd; outline-offset:-2px; }
.home-quote-row.is-loading { opacity: .6; }
.home-quote-row.is-error { background: #fffbeb; }
.home-quote-name { display: flex; flex-direction: column; min-width: 0; }
.home-quote-name strong { color: #334155; font-size: .76rem; font-weight: 750; }.home-quote-name strong i { margin-left:3px; color:#2563eb; font-size:.65rem; }
.home-quote-name span { margin-top: 2px; color: #94a3b8; font-size: .65rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.home-quote-value { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.home-quote-value b { color: #0f172a; font-size: .79rem; font-variant-numeric: tabular-nums; }
.home-quote-value em { margin-top: 2px; color: #64748b; font-size: .66rem; font-style: normal; font-weight: 750; font-variant-numeric: tabular-nums; }
.home-quote-value em.is-up { color: #e11d48; }
.home-quote-value em.is-down { color: #2563eb; }
.home-quote-note { margin: 11px 0 0; color: #94a3b8; font-size: .67rem; }
.server-resource-page { width: 100%; max-width: none; }
.server-resource-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.server-resource-head h1 { margin: 0; color: #0f172a; font-size: 1.25rem; font-weight: 800; }
.server-resource-head h1 i { margin-right: 7px; color: #2563eb; }
.server-resource-head p { margin: 6px 0 0; color: #64748b; font-size: .84rem; }
.server-resource-actions { display: flex; align-items: center; gap: 10px; color: #94a3b8; font-size: .72rem; white-space: nowrap; }
.server-resource-actions button { padding: 7px 10px; color: #0369a1; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 7px; font-size: .75rem; font-weight: 750; }
.server-resource-actions button:hover { background: #e0f2fe; }
.server-resource-actions button:disabled { opacity: .65; cursor: wait; }
.server-resource-actions button.is-loading i { animation: spin 1s linear infinite; }
.server-resource-history { margin-bottom: 16px; padding: 16px 18px 10px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 2px 10px rgba(15,23,42,.05); }
.server-resource-history-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.server-resource-history h2 { margin: 0; color: #1e293b; font-size: .92rem; font-weight: 800; }
.server-resource-history h2 i { margin-right: 6px; color: #2563eb; }
.server-resource-history p { margin: 4px 0 0; color: #94a3b8; font-size: .7rem; }
.server-resource-live { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; color: #15803d; background: #f0fdf4; border-radius: 999px; font-size: .65rem; font-weight: 800; letter-spacing: .05em; }
.server-resource-live i { width: 6px; height: 6px; background: #22c55e; border-radius: 50%; box-shadow: 0 0 0 3px rgba(34,197,94,.14); }
.server-resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.server-resource-card { min-width: 0; padding: 17px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 2px 10px rgba(15,23,42,.05); }
.server-resource-card > header { display: flex; align-items: center; gap: 10px; }
.server-resource-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: var(--resource-color); background: color-mix(in srgb, var(--resource-color) 12%, white); border-radius: 9px; }
.server-resource-card h2 { margin: 0; color: #1e293b; font-size: .88rem; font-weight: 800; }
.server-resource-card header p { margin: 3px 0 0; color: #94a3b8; font-size: .68rem; }
.server-resource-chart { min-height: 255px; }
.server-resource-detail { margin: 0; padding-top: 10px; color: #64748b; border-top: 1px solid #f1f5f9; text-align: center; font-size: .72rem; font-variant-numeric: tabular-nums; }
.server-resource-note { margin: 14px 0 0; padding: 10px 12px; color: #64748b; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; font-size: .72rem; line-height: 1.55; }
.volume-cloud-page { width: 100%; max-width: none; }
.volume-cloud-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.volume-cloud-head h1 { margin: 0; color: #0f172a; font-size: 1.25rem; font-weight: 800; }
.volume-cloud-head h1 i { margin-right: 7px; color: #0ea5e9; }
.volume-cloud-head p { margin: 6px 0 0; color: #64748b; font-size: .84rem; }
.volume-cloud-actions { display: flex; align-items: center; gap: 10px; color: #94a3b8; font-size: .72rem; white-space: nowrap; }
.volume-cloud-actions button { padding: 7px 10px; color: #cbd5e1; background: #172033; border: 1px solid #334155; border-radius: 7px; font-size: .75rem; font-weight: 750; }
.volume-cloud-actions button:hover { color: #fff; background: #26344c; }
.volume-cloud-actions button:disabled { opacity: .65; cursor: wait; }
.volume-cloud-actions button.is-loading i { animation: spin 1s linear infinite; }
.volume-cloud-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 10px; background: #e2e8f0; border-radius: 8px; }
.volume-cloud-tabs button { padding: 7px 11px; color: #64748b; border-radius: 6px; font-size: .75rem; font-weight: 750; }
.volume-cloud-tabs button.active { color: #fff; background: #0f172a; box-shadow: 0 1px 2px rgba(15,23,42,.2); }
.volume-cloud-stage { padding: 0; overflow: hidden; background: #3f3f3f; border: 1px solid #262626; border-radius: 10px; box-shadow: 0 8px 24px rgba(15,23,42,.14); }
.volume-cloud-stage-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 36px; padding: 0 14px; color: #f8fafc; background: #464646; border-bottom: 1px solid #252525; font-size: .78rem; }
.volume-cloud-stage-head > span { color: #d1d5db; font-size: .68rem; }
.volume-cloud-stage-head i { margin-left: 7px; font-size: .5rem; vertical-align: middle; }
.volume-cloud-stage-head i.is-up { color: #fb5165; }
.volume-cloud-stage-head i.is-down { color: #4487ee; }
.volume-cloud-stage .apexcharts-canvas { margin: 0 auto; }
.volume-cloud-stage .apexcharts-treemap-rect { cursor: pointer; }
.volume-cloud-stage .apexcharts-data-labels text { paint-order: stroke; stroke: rgba(0,0,0,.14); stroke-width: 1px; }
.volume-cloud-summary { margin-top: 10px; padding: 11px 13px; color: #64748b; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; font-size: .75rem; }
.volume-cloud-summary strong { color: #1e293b; }
.volume-cloud-summary b { color: #0f172a; }
.volume-cloud-summary span { color: #0369a1; font-weight: 750; }
.volume-cloud-note { margin: 10px 0 0; color: #94a3b8; font-size: .7rem; line-height: 1.55; }
.volume-cloud-tooltip { min-width: 175px; padding: 10px 11px; color: #cbd5e1; font-size: .72rem; }
.volume-cloud-tooltip strong { display: block; color: #fff; font-size: .8rem; }
.volume-cloud-tooltip strong span { color: #94a3b8; font-size: .65rem; font-weight: 500; }
.volume-cloud-tooltip b { display: block; margin-top: 7px; color: #fff; font-size: .9rem; }
.volume-cloud-tooltip em { display: block; margin-top: 3px; font-style: normal; font-weight: 750; }
.volume-cloud-tooltip em.is-up { color: #fb7185; }
.volume-cloud-tooltip em.is-down { color: #60a5fa; }
.volume-cloud-tooltip p { margin: 5px 0 0; color: #94a3b8; }
.sector-cloud-page { width: 100%; max-width: none; }
.sector-cloud-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.sector-cloud-head h1 { margin: 0; color: #0f172a; font-size: 1.25rem; font-weight: 800; }
.sector-cloud-head h1 i { margin-right: 7px; color: #8b5cf6; }
.sector-cloud-head p { margin: 6px 0 0; color: #64748b; font-size: .84rem; }
.sector-cloud-actions { display: flex; align-items: center; gap: 10px; color: #94a3b8; font-size: .72rem; white-space: nowrap; }
.sector-cloud-actions button { padding: 7px 10px; color: #ddd6fe; background: #312e81; border: 1px solid #4c1d95; border-radius: 7px; font-size: .75rem; font-weight: 750; }
.sector-cloud-actions button:hover { color: #fff; background: #4338ca; }
.sector-cloud-actions button:disabled { opacity: .65; cursor: wait; }
.sector-cloud-actions button.is-loading i { animation: spin 1s linear infinite; }
.sector-cloud-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 10px; background: #ede9fe; border-radius: 8px; }
.sector-cloud-tabs button { padding: 7px 16px; color: #6d28d9; border-radius: 6px; font-size: .75rem; font-weight: 750; }
.sector-cloud-tabs button.active { color: #fff; background: #5b21b6; box-shadow: 0 1px 2px rgba(76,29,149,.25); }
.sector-cloud-stage { padding: 0; overflow: hidden; background: #3f3f3f; border: 1px solid #262626; border-radius: 10px; box-shadow: 0 8px 24px rgba(15,23,42,.14); }
.sector-cloud-stage-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 36px; padding: 0 14px; color: #f8fafc; background: #464646; border-bottom: 1px solid #252525; font-size: .78rem; }
.sector-cloud-stage-head > span { color: #d1d5db; font-size: .68rem; }
.sector-cloud-stage-head i { margin-left: 7px; font-size: .5rem; vertical-align: middle; }
.sector-cloud-stage-head i.is-up { color: #fb5165; }
.sector-cloud-stage-head i.is-down { color: #4487ee; }
.sector-cloud-stage .apexcharts-canvas { margin: 0 auto; }
.sector-cloud-stage .apexcharts-treemap-rect { cursor: pointer; }
.sector-cloud-stage .apexcharts-data-labels text { paint-order: stroke; stroke: rgba(0,0,0,.14); stroke-width: 1px; }
.sector-cloud-summary { margin-top: 10px; padding: 11px 13px; color: #64748b; background: #fafaff; border: 1px solid #ddd6fe; border-radius: 8px; font-size: .75rem; }
.sector-cloud-summary strong, .sector-cloud-summary b { color: #312e81; }
.sector-cloud-summary span { color: #7c3aed; font-weight: 750; }
.sector-cloud-note { margin: 10px 0 0; color: #94a3b8; font-size: .7rem; line-height: 1.55; }
.sector-cloud-tooltip { min-width: 205px; padding: 10px 11px; color: #cbd5e1; font-size: .72rem; }
.sector-cloud-tooltip strong { display: block; color: #fff; font-size: .83rem; }
.sector-cloud-tooltip b { display: block; margin-top: 7px; color: #fff; font-size: .9rem; }
.sector-cloud-tooltip em { display: block; margin-top: 3px; font-style: normal; font-weight: 750; }
.sector-cloud-tooltip em.is-up { color: #fb7185; }
.sector-cloud-tooltip em.is-down { color: #60a5fa; }
.sector-cloud-tooltip p { margin: 5px 0 0; color: #94a3b8; }
.world-markets-page { width: 100%; max-width: none; }
.world-markets-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.world-markets-head h1 { margin: 0; color: #0f172a; font-size: 1.25rem; font-weight: 800; }
.world-markets-head h1 i { margin-right: 7px; color: #2563eb; }
.world-markets-head p { margin: 6px 0 0; color: #64748b; font-size: .84rem; }
.world-markets-actions { display: flex; align-items: center; gap: 10px; color: #94a3b8; font-size: .72rem; white-space: nowrap; }
.world-markets-actions button { padding: 7px 10px; color: #1d4ed8; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 7px; font-size: .75rem; font-weight: 750; }
.world-markets-actions button:hover { background: #dbeafe; }
.world-markets-actions button:disabled { opacity: .65; cursor: wait; }
.world-markets-actions button.is-loading i { animation: spin 1s linear infinite; }
.world-markets-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.world-markets-kpis article { padding: 13px 15px; background: linear-gradient(135deg, #fff, #f8fbff); border: 1px solid #dbeafe; border-radius: 10px; }
.world-markets-kpis span, .world-markets-kpis small { display: block; color: #64748b; font-size: .68rem; }
.world-markets-kpis strong { display: block; margin: 5px 0 3px; color: #0f172a; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.world-markets-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(370px, .85fr); gap: 14px; }
.world-market-panel { overflow: hidden; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 2px 10px rgba(15,23,42,.05); }
.world-market-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; }
.world-market-panel-head h2 { margin: 0; color: #1e293b; font-size: .9rem; font-weight: 800; }
.world-market-panel-head p { margin: 4px 0 0; color: #94a3b8; font-size: .68rem; }
.world-market-panel-head > span { padding-top: 2px; color: #64748b; font-size: .66rem; white-space: nowrap; }
.world-market-map { position: relative; min-height: 390px; margin: 0 12px; overflow: hidden; background: radial-gradient(circle at 45% 20%, #f8fcff 0, #eaf5ff 45%, #dbeafe 100%); border: 1px solid #dbeafe; border-radius: 10px; }
.world-market-land { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .48; }
.world-market-land path { fill: #bfdbfe; stroke: #93c5fd; stroke-width: 3; stroke-linejoin: round; }
.world-market-marker { position: absolute; left: var(--x); top: var(--y); z-index: 1; width: var(--size); height: var(--size); min-width: var(--size); padding: 0; color: #fff; background: var(--market-color); border: 3px solid rgba(255,255,255,.92); border-radius: 50%; box-shadow: 0 3px 10px color-mix(in srgb, var(--market-color) 35%, transparent); transform: translate(-50%, -50%); transition: transform .18s ease, box-shadow .18s ease; }
.world-market-marker:hover, .world-market-marker.is-selected { z-index: 2; transform: translate(-50%, -50%) scale(1.14); box-shadow: 0 6px 16px color-mix(in srgb, var(--market-color) 45%, transparent); }
.world-market-marker span, .world-market-marker b { position: absolute; left: 50%; white-space: nowrap; pointer-events: none; transform: translateX(-50%); text-shadow: 0 1px 2px rgba(15,23,42,.38); }
.world-market-marker span { top: calc(100% + 4px); color: #334155; font-size: .61rem; font-weight: 800; text-shadow: none; }
.world-market-marker b { top: calc(100% + 15px); color: #64748b; font-size: .56rem; text-shadow: none; }
.world-market-map-note { margin: 10px 16px 13px; color: #94a3b8; font-size: .66rem; }.world-market-map-note i { margin-right: 4px; color: #2563eb; font-size: .5rem; }
.world-market-chart-panel #world-market-cap-chart { min-height: 400px; }
.world-market-list-panel { margin-top: 14px; }.world-market-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #f1f5f9; }
.world-market-row { display: grid; grid-template-columns: 9px minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 11px 13px; border-right: 1px solid #f1f5f9; border-bottom: 1px solid #f1f5f9; transition: background .15s ease; }
.world-market-row:nth-child(3n) { border-right: 0; }.world-market-row:hover, .world-market-row.is-selected { background: #f8fbff; }
.world-market-dot { grid-row: span 2; width: 8px; height: 8px; background: var(--market-color); border-radius: 50%; }.world-market-row strong { color: #334155; font-size: .76rem; }.world-market-row small { display: block; overflow: hidden; margin-top: 2px; color: #94a3b8; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }.world-market-row > b { grid-column: 2; margin-top: 6px; color: #0f172a; font-size: .74rem; }.world-market-row > div:last-child { grid-column: 2; min-width: 0; }
.world-market-quote { grid-column: 2; display: block; margin-top: 4px; color: #64748b; font-size: .68rem; font-variant-numeric: tabular-nums; }.world-market-quote b { margin-left: 3px; font-weight: 750; }.world-market-quote.is-up, .world-market-quote.is-up b { color: #e11d48; }.world-market-quote.is-down, .world-market-quote.is-down b { color: #2563eb; }.world-market-quote.is-empty { color: #94a3b8; }
.world-markets-note { margin: 11px 0 0; color: #94a3b8; font-size: .67rem; line-height: 1.55; }
.world-market-index-panel { margin-top: 14px; padding: 16px 18px; }
.world-market-index-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 12px; }
@media (max-width: 1100px) { .world-market-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .world-market-index-grid { grid-template-columns: 1fr; } }
.asset-class-grid { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.world-market-index-panel + .world-market-index-panel { margin-top: 14px; }

.gainers-page { width: 100%; max-width: 900px; margin: 0 auto; }
.gainers-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.gainers-head h1 { display: flex; align-items: center; gap: 9px; margin: 0; color: #0f172a; font-size: 1.35rem; }
.gainers-head h1 i { color: #e11d48; }
.gainers-head p { margin: 6px 0 0; color: #64748b; font-size: .82rem; line-height: 1.5; max-width: 560px; }
.gainers-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.gainers-actions span { color: #94a3b8; font-size: .76rem; }
.gainers-actions span.is-simulated { color: #a16207; }
.gainers-actions button { display: flex; align-items: center; gap: 6px; padding: 7px 12px; color: #334155; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; font-size: .78rem; font-weight: 700; }
.gainers-actions button:hover { border-color: #1d4ed8; color: #1d4ed8; }
.gainers-actions button.is-loading i { animation: spin 1s linear infinite; }
.gainers-list { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(15,23,42,.05); }
.gainers-loading, .gainers-error { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 40px 16px; color: #94a3b8; font-size: .85rem; }
.gainers-error { color: var(--red); }
.gainers-row { display: grid; width: 100%; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 16px; color: inherit; background: #fff; border: 0; border-bottom: 1px solid #f1f5f9; text-align: left; font: inherit; cursor: pointer; }
.gainers-row:last-child { border-bottom: 0; }
.gainers-row:hover { background: #f8fbff; }
.gainers-row:focus-visible { position: relative; z-index: 1; outline: 3px solid rgba(0,120,212,.3); outline-offset: -3px; }
.gainers-rank { display: grid; place-items: center; width: 30px; height: 30px; color: #64748b; background: #f1f5f9; border-radius: 8px; font-size: .82rem; font-weight: 800; }
.gainers-row.is-top1 .gainers-rank { color: #fff; background: linear-gradient(135deg, #f59e0b, #d97706); }
.gainers-row.is-top2 .gainers-rank { color: #fff; background: linear-gradient(135deg, #94a3b8, #64748b); }
.gainers-row.is-top3 .gainers-rank { color: #fff; background: linear-gradient(135deg, #c2703d, #9a5527); }
.gainers-name { min-width: 0; display: flex; flex-direction: column; }
.gainers-name strong { color: #0f172a; font-size: .88rem; }
.gainers-name .gainers-meta { margin-top: 2px; color: #94a3b8; font-size: .72rem; }
.gainers-quote-action { display: inline-flex; align-items: center; gap: 4px; width: fit-content; margin-top: 5px; color: #1d4ed8; font-size: .72rem; font-weight: 750; text-decoration: underline; text-underline-offset: 2px; }
.gainers-row:hover .gainers-quote-action { color: #075985; }
.gainers-price { color: #334155; font-size: .84rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gainers-change { padding: 4px 10px; border-radius: 999px; font-size: .8rem; font-weight: 800; white-space: nowrap; }
.gainers-change.is-up { color: #e11d48; background: #fff1f2; }
.gainers-change.is-down { color: #2563eb; background: #eff6ff; }
.gainers-note { margin: 12px 0 0; color: #94a3b8; font-size: .72rem; line-height: 1.6; }
.gainers-quote-modal-backdrop { position: fixed; z-index: 1300; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(15,23,42,.58); backdrop-filter: blur(3px); }
.gainers-quote-modal-backdrop[hidden] { display: none; }
.gainers-quote-modal { width: min(900px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: #fff; border: 1px solid #cbd5e1; border-radius: 16px; box-shadow: 0 24px 70px rgba(15,23,42,.32); outline: none; }
.gainers-quote-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 16px; border-bottom: 1px solid #e2e8f0; }
.gainers-quote-modal-header p { margin: 0 0 4px; color: #64748b; font-size: .75rem; font-weight: 700; }
.gainers-quote-modal-header h2 { margin: 0; color: #0f172a; font-size: 1.2rem; }
.gainers-quote-price-row { display: flex; align-items: center; gap: 9px; margin-top: 8px; }
.gainers-quote-price-row strong { color: #0f172a; font-size: 1.55rem; }
.gainers-quote-price-row em { padding: 4px 8px; border-radius: 999px; font-size: .78rem; font-style: normal; font-weight: 800; }
.gainers-quote-price-row em.is-up { color: #e11d48; background: #fff1f2; }
.gainers-quote-price-row em.is-down { color: #2563eb; background: #eff6ff; }
.gainers-quote-modal-close { display: grid; place-items: center; width: 38px; height: 38px; color: #64748b; border-radius: 9px; font-size: 1.05rem; }
.gainers-quote-modal-close:hover { color: #0f172a; background: #f1f5f9; }
.gainers-quote-periods { display: flex; gap: 6px; padding: 12px 24px 0; }
.gainers-quote-periods button { padding: 6px 10px; color: #64748b; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 7px; font-size: .74rem; font-weight: 750; }
.gainers-quote-periods button.active, .gainers-quote-periods button:hover { color: #fff; background: #1d4ed8; border-color: #1d4ed8; }
.gainers-quote-chart-wrap { position: relative; min-height: 390px; padding: 8px 16px 0; }
.gainers-quote-chart { width: 100%; }
.gainers-quote-loading { position: absolute; inset: 8px 16px 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: #64748b; background: rgba(255,255,255,.88); font-size: .84rem; }
.gainers-quote-source { padding: 8px 24px 16px; color: #94a3b8; font-size: .7rem; }
.gainers-quote-source.is-simulated { color: #a16207; }
@media (max-width: 640px) {
  .gainers-head { flex-direction: column; }
  .gainers-row { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 9px; padding-inline: 12px; }
  .gainers-price { display: none; }
  .gainers-quote-modal-backdrop { padding: 10px; }
  .gainers-quote-modal-header { padding: 16px; }
  .gainers-quote-periods { padding-inline: 16px; }
  .gainers-quote-chart-wrap { min-height: 320px; padding-inline: 6px; }
  .gainers-quote-chart { min-height: 320px; }
  .gainers-quote-loading { inset-inline: 6px; }
  .gainers-quote-source { padding-inline: 16px; }
}
.global-capital-page { width: 100%; max-width: 1280px; margin: 0 auto; color: #172554; }
.global-capital-hero { display: flex; justify-content: space-between; gap: 20px; padding: 26px 28px; color: #eff6ff; background: radial-gradient(circle at 82% 20%, #2459c5 0, transparent 29%), linear-gradient(120deg, #071638, #102e72); border-radius: 16px; overflow: hidden; }
.global-capital-eyebrow { display: inline-flex; align-items: center; gap: 7px; color: #a5d8ff; font-size: .68rem; font-weight: 800; letter-spacing: .12em; }
.global-capital-hero h1 { margin: 8px 0 7px; color: #fff; font-size: 1.7rem; letter-spacing: -.04em; }
.global-capital-hero p { max-width: 630px; margin: 0; color: #cbd5e1; font-size: .85rem; line-height: 1.6; }
.global-capital-hero-stat { flex: 0 0 230px; align-self: center; padding: 15px 17px; background: rgba(255,255,255,.1); border: 1px solid rgba(191,219,254,.28); border-radius: 12px; backdrop-filter: blur(6px); }
.global-capital-hero-stat span,.global-capital-hero-stat small { display: block; color: #bfdbfe; font-size: .7rem; }.global-capital-hero-stat strong { display: block; margin: 5px 0; color: #fff; font-size: 1rem; }
.capital-warning { display: flex; align-items: flex-start; gap: 9px; padding: 11px 14px; margin: 13px 0; color: #475569; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; font-size: .76rem; line-height: 1.55; }.capital-warning i { margin-top: 2px; color: #2563eb; }.capital-warning p { margin: 0; }.capital-warning b { color: #1e3a8a; }
.capital-type-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 13px; }.capital-type-tabs button { padding: 7px 10px; color: #64748b; background: #fff; border: 1px solid #e2e8f0; border-radius: 999px; font-size: .72rem; font-weight: 750; }.capital-type-tabs button[aria-selected="true"] { color: #fff; background: #173b8c; border-color: #173b8c; box-shadow: 0 3px 8px rgba(30,58,138,.2); }
.global-capital-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr); gap: 14px; }.capital-map-panel,.capital-detail,.capital-flow-panel { background: #fff; border: 1px solid #e6edf8; border-radius: 14px; box-shadow: 0 6px 20px rgba(30,58,138,.06); }.capital-map-panel { padding: 16px; }.capital-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }.capital-panel-head h2 { margin: 0; color: #102a62; font-size: 1rem; letter-spacing: -.02em; }.capital-panel-head p { margin: 4px 0 0; color: #64748b; font-size: .72rem; line-height: 1.45; }.capital-panel-head > span { padding: 5px 7px; color: #1d4ed8; background: #eff6ff; border-radius: 6px; font-size: .67rem; font-weight: 750; white-space: nowrap; }
.capital-orbit { position: relative; min-height: 445px; margin-top: 12px; overflow: hidden; background: linear-gradient(145deg, #f8fbff, #edf4ff); border: 1px solid #e0eaf9; border-radius: 12px; }.capital-orbit::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(#b8cae7 1px, transparent 1px); background-size: 18px 18px; opacity: .35; }.capital-orbit-core { position: absolute; top: 50%; left: 50%; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 126px; height: 126px; color: #fff; background: radial-gradient(circle at 35% 30%, #3b82f6, #132f6c 70%); border: 7px solid rgba(255,255,255,.8); border-radius: 50%; box-shadow: 0 12px 24px rgba(29,78,216,.24); transform: translate(-50%,-50%); text-align: center; }.capital-orbit-core i { color: #bfdbfe; font-size: 1.05rem; }.capital-orbit-core strong { margin: 6px 0 2px; font-size: .85rem; }.capital-orbit-core small { color: #dbeafe; font-size: .61rem; }.capital-orbit-ring { position: absolute; top: 50%; left: 50%; border: 1px dashed #b9cbe7; border-radius: 50%; transform: translate(-50%,-50%); }.ring-one { width: 270px; height: 270px; }.ring-two { width: 420px; height: 420px; }
.capital-profiles { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(125px, 1fr)); gap: 11px; padding: 15px; }.capital-profile { min-height: 130px; padding: 12px; color: #102a62; background: rgba(255,255,255,.94); border: 1px solid #dbe7f8; border-top: 3px solid var(--capital-color); border-radius: 10px; box-shadow: 0 4px 10px rgba(30,58,138,.08); text-align: left; transition: transform .16s, box-shadow .16s, opacity .16s; }.capital-profile:hover,.capital-profile.is-selected { transform: translateY(-3px); box-shadow: 0 9px 18px rgba(30,58,138,.16); }.capital-profile.is-selected { outline: 2px solid var(--capital-color); }.capital-profile.blue { --capital-color:#2563eb; }.capital-profile.navy { --capital-color:#15357a; }.capital-profile.coral { --capital-color:#ef6b61; }.capital-profile.green { --capital-color:#149a76; }.capital-profile.purple { --capital-color:#7c4dca; }.capital-profile.teal { --capital-color:#0f9b9c; }.capital-profile-icon { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; color: var(--capital-color); background: color-mix(in srgb, var(--capital-color) 10%, white); border-radius: 7px; font-size: .72rem; }.capital-profile-top { float: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }.capital-profile-top em { color: var(--capital-color); font-size: .57rem; font-style: normal; font-weight: 800; }.capital-profile-top small,.capital-profile-basis { color: #94a3b8; font-size: .56rem; }.capital-profile strong,.capital-profile b,.capital-profile-basis { display: block; }.capital-profile strong { clear: both; padding-top: 9px; font-size: .77rem; }.capital-profile b { margin: 4px 0 3px; color: #0f2c66; font-size: .9rem; font-variant-numeric: tabular-nums; }.capital-profile[hidden] { display: none; }
.capital-detail { display: flex; flex-direction: column; padding: 20px; }.capital-detail-type { display: inline-flex; align-self: flex-start; gap: 6px; padding: 5px 8px; color: var(--capital-color); background: color-mix(in srgb, var(--capital-color) 10%, white); border-radius: 6px; font-size: .67rem; font-weight: 800; }.capital-detail-type.blue { --capital-color:#2563eb; }.capital-detail-type.navy { --capital-color:#15357a; }.capital-detail-type.coral { --capital-color:#d64d46; }.capital-detail-type.green { --capital-color:#07815f; }.capital-detail-type.purple { --capital-color:#7042ba; }.capital-detail-type.teal { --capital-color:#087f80; }.capital-detail h2 { margin: 13px 0 8px; color: #102a62; font-size: 1.25rem; }.capital-detail-amount { padding: 12px; background: #f1f6ff; border-radius: 9px; }.capital-detail-amount strong,.capital-detail-amount span { display: block; }.capital-detail-amount strong { color: #173b8c; font-size: 1.2rem; }.capital-detail-amount span { margin-top: 3px; color: #64748b; font-size: .67rem; }.capital-detail > p { color: #475569; font-size: .77rem; line-height: 1.7; }.capital-korea-note { display: flex; gap: 9px; padding: 11px; margin-top: auto; color: #0f766e; background: #effcf9; border: 1px solid #ccfbf1; border-radius: 9px; }.capital-korea-note i { margin-top: 2px; }.capital-korea-note b,.capital-korea-note span { display: block; }.capital-korea-note b { font-size: .68rem; }.capital-korea-note span { margin-top: 3px; color: #47636c; font-size: .68rem; line-height: 1.5; }.capital-detail a { margin-top: 12px; color: #1d4ed8; font-size: .72rem; font-weight: 750; text-decoration: none; }.capital-detail a:hover { text-decoration: underline; }
.capital-flow-panel { padding: 16px; margin-top: 14px; }.capital-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 14px; }.capital-flow > i { color: #94a3b8; }.capital-flow article { padding: 12px; background: #f8fbff; border: 1px solid #e3edf9; border-radius: 9px; text-align: center; }.capital-flow article i { display: block; margin-bottom: 6px; color: #2563eb; }.capital-flow article b,.capital-flow article span { display: block; }.capital-flow article b { color: #173b8c; font-size: .73rem; }.capital-flow article span { margin-top: 4px; color: #64748b; font-size: .65rem; }.capital-flow article.impact { background: #eefaf7; border-color: #ccefe5; }.capital-flow article.impact i,.capital-flow article.impact b { color: #07815f; }
.capital-impact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }.capital-impact-grid article { position: relative; padding: 17px 16px 16px; background: #fff; border: 1px solid #e6edf8; border-radius: 12px; box-shadow: 0 4px 14px rgba(30,58,138,.04); }.impact-no { color: #bfdbfe; font-size: 1.3rem; font-weight: 850; }.capital-impact-grid h3 { margin: 5px 0 6px; color: #102a62; font-size: .85rem; }.capital-impact-grid p { margin: 0; color: #64748b; font-size: .7rem; line-height: 1.6; }.capital-sources { margin: 12px 2px 0; color: #94a3b8; font-size: .66rem; line-height: 1.5; }.capital-sources i { color: #2563eb; }
@media (max-width: 1000px) { .home-market-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .home-quote-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .server-resource-grid { grid-template-columns: 1fr; } }
@media (max-width: 960px) { .world-markets-grid,.global-capital-layout { grid-template-columns: 1fr; } .world-market-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }.world-market-row:nth-child(3n) { border-right: 1px solid #f1f5f9; }.world-market-row:nth-child(2n) { border-right: 0; } .global-capital-hero { flex-direction: column; }.global-capital-hero-stat { flex-basis: auto; align-self: stretch; }.capital-detail { min-height: 250px; }.capital-flow { grid-template-columns: repeat(4, 1fr); }.capital-flow > i { display: none; } }
@media (max-width: 560px) { .home-market-card-head, .home-quote-dashboard-head, .server-resource-head, .server-resource-history-head, .volume-cloud-head, .sector-cloud-head, .world-markets-head { flex-direction: column; } .home-quote-actions, .server-resource-actions, .volume-cloud-actions, .sector-cloud-actions, .world-markets-actions { width: 100%; justify-content: space-between; } .volume-cloud-stage, .sector-cloud-stage { padding-inline: 8px; } .world-markets-kpis, .world-market-list { grid-template-columns: 1fr; } .world-market-row, .world-market-row:nth-child(3n) { border-right: 0; } .world-market-map { min-height: 320px; } .world-market-marker span { font-size: .55rem; } .world-market-marker b { display: none; } .global-capital-hero { padding: 22px 19px; }.global-capital-hero h1 { font-size: 1.45rem; }.capital-profiles { grid-template-columns: repeat(2, minmax(0,1fr)); padding: 10px; gap: 8px; }.capital-profile { min-height: 122px; padding: 9px; }.capital-profile b { font-size: .79rem; }.capital-orbit { min-height: 430px; }.ring-two { width: 330px; height: 330px; }.ring-one { width: 220px; height: 220px; }.capital-orbit-core { width: 90px; height: 90px; border-width: 4px; }.capital-orbit-core strong { font-size: .69rem; }.capital-orbit-core small { display: none; }.capital-flow,.capital-impact-grid { grid-template-columns: 1fr; }.capital-flow article { text-align: left; }.capital-flow article i { display: inline-block; width: 18px; margin: 0 7px 0 0; }.capital-flow article b,.capital-flow article span { display: inline; }.capital-flow article span { margin-left: 7px; } }

/* ═══════════════════════════════════════════════════════
   QUIZ VIEW
═══════════════════════════════════════════════════════ */
.quiz-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
}
.quiz-meta { display: flex; align-items: center; gap: 10px; }
.quiz-progress-wrap { display: flex; flex-direction: column; gap: 4px; flex: 1; max-width: 360px; }
.quiz-progress-label { font-size: .75rem; color: var(--text-muted); display: flex; justify-content: space-between; }

.question-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}
.q-num {
  font-size: .85rem; font-weight: 700; color: var(--primary);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.q-text { font-size: 1.05rem; font-weight: 600; line-height: 1.6; margin-bottom: 18px; }

.choices { display: flex; flex-direction: column; gap: 8px; }
.choice-btn {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%; padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-align: left; font-size: 1rem; font-weight: 500;
  color: var(--text); cursor: pointer;
  transition: all .15s;
}
.choice-btn:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-light); }
.choice-btn.selected  { border-color: var(--primary); background: var(--primary-light); color: var(--primary-dark); }
.choice-btn.correct   { border-color: var(--green); background: var(--green-bg); color: #065f46; }
.choice-btn.wrong     { border-color: var(--red);   background: var(--red-bg);   color: #991b1b; }
.choice-btn:disabled  { cursor: default; }
.choice-idx {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%; border: 1.5px solid var(--border-strong);
  font-size: .72rem; font-weight: 700;
}
.choice-btn.correct .choice-idx { border-color: var(--green); background: var(--green); color: #fff; }
.choice-btn.wrong   .choice-idx { border-color: var(--red);   background: var(--red);   color: #fff; }

.explanation {
  display: none;
  margin-top: 16px; padding: 14px 16px;
  background: #f0fdf4; border: 1px solid #bbf7d0;
  border-radius: var(--radius-sm);
  font-size: .85rem; line-height: 1.65; color: #14532d;
}
.explanation.show { display: block; }
.explanation.wrong-exp { background: #fff7ed; border-color: #fed7aa; color: #7c2d12; }
.exp-label { font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }

.quiz-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 20px; flex-wrap: wrap; gap: 10px;
}
.quiz-score-bar {
  display: flex; align-items: center; gap: 12px; font-size: .82rem; color: var(--text-muted);
}
.score-correct { color: var(--green); font-weight: 700; }
.score-wrong   { color: var(--red);   font-weight: 700; }

/* result screen */
.quiz-result {
  text-align: center; padding: 40px 24px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.result-score {
  font-size: 3.5rem; font-weight: 900;
  background: linear-gradient(135deg, #1e3a8a, #1d4ed8);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1; margin-bottom: 8px;
}
.result-label { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 24px; }
.result-stats {
  display: flex; align-items: center; justify-content: center; gap: 32px;
  margin-bottom: 28px;
}
.result-stat { text-align: center; }
.result-stat .val { font-size: 1.6rem; font-weight: 800; }
.result-stat .lbl { font-size: .75rem; color: var(--text-muted); margin-top: 2px; }

/* edit modal */
.modal-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15,23,42,.45);
  z-index: 100;
  align-items: center; justify-content: center; padding: 2vh 2vw;
}
.modal-backdrop.show { display: flex; }
.modal {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 100%; height: 100%;
  overflow-y: auto;
  padding: clamp(24px, 3vw, 48px);
  border: 1px solid var(--border);
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.modal-title { font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 700; }
.modal-close { width: 44px; height: 44px; border-radius: 50%; color: var(--text-muted); font-size: 1.2rem; display: flex; align-items: center; justify-content: center; }
.modal-close:hover { background: var(--surface-soft); }
.modal-field { margin-bottom: 14px; }
.modal-label { font-size: 1rem; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; display: block; }
.modal-input, .modal-textarea, .modal-select {
  width: 100%; padding: 13px 16px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-size: 1rem; color: var(--text);
  background: var(--surface);
  transition: border-color .15s;
}
.modal-input:focus, .modal-textarea:focus, .modal-select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,120,212,.12);
}
.modal-textarea { resize: vertical; min-height: 140px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 12px; margin-top: 28px; }

/* ═══════════════════════════════════════════════════════
   QUIZ PLAN HOME
═══════════════════════════════════════════════════════ */
.plan-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px;
  margin-top: 20px;
}
.plan-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
  cursor: pointer; transition: all .15s;
  box-shadow: var(--shadow-sm);
}
.plan-card:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-1px); }
.plan-card.done { border-color: var(--green); background: var(--green-bg); }
.plan-day { font-size: .75rem; font-weight: 700; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.plan-topic { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 8px; line-height: 1.3; }
.plan-count { font-size: .88rem; color: var(--text-muted); }
.plan-prog { margin-top: 8px; }

/* ═══════════════════════════════════════════════════════
   HOME VIEW
═══════════════════════════════════════════════════════ */
.home-hero {
  background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 55%, #2563eb 100%);
  border-radius: var(--radius); padding: 36px 32px; color: #ffffff;
  margin-bottom: 28px; position: relative; overflow: hidden;
  border: none;
  box-shadow: 0 4px 20px rgba(0,120,212,.25);
}
.home-hero::after {
  content: ''; position: absolute; right: -20px; top: -20px;
  width: 200px; height: 200px;
  background: rgba(255,255,255,.08); border-radius: 50%;
}
.home-hero h1 { font-size: 1.6rem; font-weight: 800; margin: 0 0 8px; color: #ffffff; }
.home-hero p  { font-size: 1rem; opacity: .85; margin: 0 0 20px; }
.home-hero .btn { background: #ffffff; color: var(--primary); font-weight: 700; border: none; }
.home-hero .btn:hover { background: #eff6ff; }

.home-sections { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 28px; }
.home-section-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  cursor: pointer; transition: all .15s; box-shadow: var(--shadow-sm);
}
.home-section-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow); }
.hsc-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; margin-bottom: 12px;
}
.hsc-icon.learn   { background: var(--primary-light); color: var(--primary); border: 1.5px solid var(--primary); }
.hsc-icon.practice{ background: #f0fdf4; color: #065f46; border: 1.5px solid #6ee7b7; }
.hsc-icon.quiz    { background: var(--primary-light); color: var(--primary); border: 1.5px solid var(--primary); }
.hsc-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 5px; }
.hsc-desc  { font-size: .9rem; color: var(--text-muted); line-height: 1.5; }

/* ═══════════════════════════════════════════════════════
   LOADING SPINNER
═══════════════════════════════════════════════════════ */
.spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  animation: spin .7s linear infinite;
  margin: 40px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 60px 0; }
.loading-text { font-size: .85rem; color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════
   FORMS / INPUTS (general)
═══════════════════════════════════════════════════════ */
.form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-label { font-size: .88rem; font-weight: 600; color: var(--text-muted); }
.form-input, .form-select {
  padding: 8px 12px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); font-size: 1rem;
  background: var(--surface); color: var(--text);
  transition: border-color .15s;
}
.form-input:focus, .form-select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,120,212,.12);
}

/* ═══════════════════════════════════════════════════════
   METRIC BOX (used in ML views)
═══════════════════════════════════════════════════════ */
.metric-box {
  background: var(--surface-soft); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 14px; min-width: 110px;
}

/* ═══════════════════════════════════════════════════════
   HOME VIEW — ANALYSIS GROUP GRID
═══════════════════════════════════════════════════════ */
.analysis-group-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.analysis-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  box-shadow: var(--shadow-sm);
}

.analysis-group-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.analysis-group-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  background: var(--primary);
  color: #ffffff;
  border: none;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,120,212,.25);
}

.analysis-group-head h2 {
  font-size: 1.1rem; font-weight: 700;
  color: var(--text); margin: 0 0 4px;
}

.analysis-group-head p {
  font-size: 1rem; color: var(--text-muted);
  line-height: 1.5; margin: 0;
}

/* 실습 화면 — 분석/ML 기법 쉬운 설명 */
.practice-guide {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 18px;
  padding: 14px 16px;
  color: var(--text);
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm);
}
.practice-guide-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #92400e;
  background: #fef3c7;
  border-radius: 50%;
}
.practice-guide-title { font-size: .9rem; font-weight: 800; }
.practice-guide-title span { margin-left: 6px; color: var(--primary); }
.practice-guide p { margin: 4px 0 0; color: var(--text-muted); font-size: .88rem; line-height: 1.6; }

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.home-card {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  cursor: pointer;
  transition: all .15s;
  display: flex; flex-direction: column; gap: 8px;
}

.home-card:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.home-card.is-disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

.home-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--primary-light);
  border: 1.5px solid var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem;
  color: var(--primary);
}

.home-card-title {
  font-size: 1rem; font-weight: 700;
  color: var(--text); line-height: 1.35;
}

.home-card-tag {
  font-size: .85rem; color: var(--text-muted);
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════
   HOME MINI CARDS — Copilot-style
═══════════════════════════════════════════════════════ */
.home-mini-group {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  transition: box-shadow .15s;
}

.home-mini-group:hover {
  box-shadow: 0 3px 12px rgba(0,0,0,.09);
}

.home-mini-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #424242;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border);
  letter-spacing: .01em;
}

.home-mini-group-head i {
  color: var(--primary);
  font-size: 0.82rem;
}

.home-mini-items {
  display: flex;
  flex-direction: column;
}

.home-mini-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f5f5f5;
  transition: background .1s;
}

.home-mini-card:last-child { border-bottom: none; }

.home-mini-card:hover {
  background: var(--primary-light);
}

.home-mini-card:hover .home-mini-arrow {
  color: var(--primary);
  transform: translateX(2px);
}

.home-mini-card.is-disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

.home-mini-icon {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem;
  background: var(--primary-light);
  color: var(--primary);
  border: 1px solid #c8e0f7;
  flex-shrink: 0;
}

.home-mini-text { flex: 1; min-width: 0; }

.home-mini-name {
  font-size: 0.81rem;
  font-weight: 600;
  color: #212121;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-mini-tag {
  font-size: 0.7rem;
  color: #9e9e9e;
  margin-top: 1px;
}

.home-mini-arrow {
  font-size: 0.6rem;
  color: #bdbdbd;
  flex-shrink: 0;
  transition: color .1s, transform .1s;
}

/* ═══════════════════════════════════════════════════════
   DART VIEWS — 공통 UI (검색 패널, 결과 카드, 테이블)
═══════════════════════════════════════════════════════ */
.dart-search-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.dart-search-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}
.param-label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.param-input {
  padding: 8px 11px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  transition: border-color .15s;
}
.param-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,120,212,.12); }
.run-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 22px;
  background: var(--primary); color: #ffffff;
  border: 1.5px solid var(--primary-dark); border-radius: var(--radius-sm);
  font-size: 1rem; font-weight: 700;
  cursor: pointer; transition: background .15s;
  white-space: nowrap;
}
.run-btn:hover  { background: #006cbe; }
.run-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── 포트폴리오 조합 ── */
.page-heading { margin-bottom: 24px; }
.page-heading h1 { margin: 0 0 6px; font-size: 1.3rem; font-weight: 800; color: var(--text); }
.page-heading h1 i { color: var(--primary); }
.page-heading p { margin: 0; color: var(--text-muted); font-size: .9rem; }
.composition-guide { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; align-items: start; margin: 0 0 18px; padding: 16px 18px; border: 1px solid #bfdbfe; border-radius: 12px; background: #f8fbff; }
.composition-guide-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #dbeafe; color: var(--primary); }
.composition-guide strong { font-size: .9rem; color: var(--text); }.composition-guide p { margin: 5px 0 0; color: var(--text-muted); font-size: .82rem; line-height: 1.6; }
.signal-legend { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px 13px; margin-top: 1px; font-size: .73rem; color: var(--text-muted); }.signal-legend i { font-size: .6rem; }.legend-green i { color: #10b981; }.legend-yellow i { color: #eab308; }.legend-red i { color: #ef4444; }
.term-help-button { display: inline; padding: 0; color: #1d4ed8; border: 0; border-bottom: 1px dashed currentColor; background: transparent; font: inherit; font-weight: 700; cursor: pointer; }.term-help-button:hover, .term-help-button:focus-visible { color: #1e40af; outline: none; }.term-help-button:focus-visible { border-radius: 2px; box-shadow: 0 0 0 3px #bfdbfe; }.term-help-button i { font-size: .78em; }
.covariance-modal-backdrop { position: fixed; z-index: 1300; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(15,23,42,.58); backdrop-filter: blur(3px); }.covariance-modal-backdrop[hidden] { display: none; }.covariance-modal { width: min(1100px,100%); max-height: min(920px,calc(100vh - 32px)); overflow: auto; border: 1px solid #cbd5e1; border-radius: 16px; background: #fff; box-shadow: 0 24px 70px rgba(15,23,42,.32); outline: none; }.covariance-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 25px 30px 20px; border-bottom: 1px solid #e2e8f0; }.covariance-modal-header > div { display: flex; align-items: center; gap: 13px; }.covariance-modal-icon { display: grid; flex: 0 0 auto; place-items: center; width: 48px; height: 48px; border-radius: 11px; color: #fff; background: linear-gradient(135deg,#2563eb,#0f766e); }.covariance-kicker { margin: 0 0 3px !important; color: #2563eb !important; font-size: .76rem !important; font-weight: 750; letter-spacing: .03em; }.covariance-modal h2 { margin: 0; color: #0f172a; font-size: clamp(1.25rem,2vw,1.55rem); }.covariance-modal-header p { margin: 4px 0 0; color: #64748b; font-size: .86rem; line-height: 1.45; }.covariance-modal-close { display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; border-radius: 9px; color: #64748b; font-size: 1.1rem; }.covariance-modal-close:hover, .covariance-modal-close:focus-visible { color: #0f172a; background: #f1f5f9; }.covariance-modal-body { padding: 25px 30px 30px; }.covariance-plain-language { margin-bottom: 18px; padding: 14px 16px; border: 1px solid #bfdbfe; border-radius: 10px; background: #f8fbff; }.covariance-plain-language span { color: #1d4ed8; font-size: .78rem; font-weight: 750; }.covariance-plain-language span i { margin-right: 4px; }.covariance-plain-language p { margin: 6px 0 0; color: #475569; font-size: .86rem; line-height: 1.65; }.covariance-intro { margin: 0; color: #475569; font-size: .92rem; line-height: 1.7; }.covariance-sign-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 16px 0; }.covariance-sign-grid div { display: grid; grid-template-columns: auto 1fr; gap: 3px 7px; padding: 12px; border: 1px solid #e2e8f0; border-radius: 9px; background: #fff; }.covariance-sign-grid i { grid-row: span 2; padding-top: 2px; color: #2563eb; }.covariance-sign-grid b { color: #0f172a; font-size: .82rem; }.covariance-sign-grid span { color: #64748b; font-size: .75rem; line-height: 1.45; }.covariance-formula { margin: 17px 0 13px; padding: 15px; overflow-x: auto; border-radius: 10px; color: #1e3a8a; background: #eff6ff; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: clamp(.83rem,2vw,1rem); text-align: center; white-space: nowrap; }.covariance-formula span { font-weight: 750; }.covariance-meaning { margin: 0; padding-left: 20px; color: #64748b; font-size: .84rem; line-height: 1.7; }.covariance-mini-example { margin-top: 15px; padding: 14px 16px; border-radius: 10px; background: #fffbeb; }.covariance-mini-example h3 { margin: 0; color: #92400e; font-size: .88rem; }.covariance-mini-example h3 i { margin-right: 5px; }.covariance-mini-example p { margin: 7px 0 0; color: #78350f; font-size: .82rem; line-height: 1.65; }.covariance-example { margin-top: 18px; padding: 14px 16px; border-left: 4px solid #14b8a6; border-radius: 0 9px 9px 0; background: #f0fdfa; }.covariance-example h3, .covariance-code-head h3 { margin: 0; color: #0f172a; font-size: .91rem; }.covariance-example h3 i { margin-right: 5px; color: #0d9488; }.covariance-example p { margin: 7px 0 0; color: #475569; font-size: .84rem; line-height: 1.65; }.covariance-code-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; }.covariance-code-head h3 i { margin-right: 5px; color: #3776ab; }.covariance-code-head span { color: #64748b; font-size: .72rem; }.covariance-code { margin: 9px 0 0; padding: 15px; overflow: auto; border-radius: 10px; color: #e2e8f0; background: #0f172a; font: .76rem/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; }.covariance-note { margin: 15px 0 0; color: #64748b; font-size: .77rem; line-height: 1.55; }.covariance-note i { margin-right: 4px; color: #2563eb; }
.combination-card { padding: 22px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); }
.covariance-code-explanation { margin: 11px 0 0; color: #475569; font-size: .8rem; line-height: 1.6; }.covariance-code-explanation code { padding: 1px 4px; border-radius: 4px; color: #1e3a8a; background: #eff6ff; font: .75rem ui-monospace,SFMono-Regular,Menlo,monospace; }
.correlation-modal-backdrop { position: fixed; z-index: 1300; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(15,23,42,.58); backdrop-filter: blur(3px); }.correlation-modal-backdrop[hidden] { display: none; }.correlation-modal { width: min(1100px,100%); max-height: min(920px,calc(100vh - 32px)); overflow: auto; border: 1px solid #cbd5e1; border-radius: 16px; background: #fff; box-shadow: 0 24px 70px rgba(15,23,42,.32); outline: none; }.correlation-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 25px 30px 20px; border-bottom: 1px solid #e2e8f0; }.correlation-modal-header > div { display: flex; align-items: center; gap: 13px; }.correlation-modal-icon { display: grid; flex: 0 0 auto; place-items: center; width: 48px; height: 48px; border-radius: 11px; color: #fff; background: linear-gradient(135deg,#7c3aed,#2563eb); }.correlation-kicker { margin: 0 0 3px !important; color: #6d28d9 !important; font-size: .76rem !important; font-weight: 750; letter-spacing: .03em; }.correlation-modal h2 { margin: 0; color: #0f172a; font-size: clamp(1.25rem,2vw,1.55rem); }.correlation-modal-header p { margin: 4px 0 0; color: #64748b; font-size: .86rem; line-height: 1.45; }.correlation-modal-close { display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; border-radius: 9px; color: #64748b; font-size: 1.1rem; }.correlation-modal-close:hover, .correlation-modal-close:focus-visible { color: #0f172a; background: #f1f5f9; }.correlation-modal-body { padding: 25px 30px 30px; }.correlation-plain-language { padding: 14px 16px; border: 1px solid #ddd6fe; border-radius: 10px; background: #faf5ff; }.correlation-plain-language span { color: #6d28d9; font-size: .78rem; font-weight: 750; }.correlation-plain-language span i { margin-right: 4px; }.correlation-plain-language p { margin: 6px 0 0; color: #475569; font-size: .86rem; line-height: 1.65; }.correlation-scale { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; margin: 16px 0; overflow: hidden; border-radius: 10px; color: #fff; text-align: center; }.correlation-scale div { display: grid; gap: 2px; padding: 13px; }.correlation-scale b { font-size: 1.05rem; }.correlation-scale span { font-size: .74rem; }.correlation-scale .negative { background: #2563eb; }.correlation-scale .neutral { background: #64748b; }.correlation-scale .positive { background: #e11d48; }.correlation-intro { margin: 0; color: #475569; font-size: .92rem; line-height: 1.7; }.correlation-formula { margin: 17px 0 13px; padding: 15px; overflow-x: auto; border-radius: 10px; color: #5b21b6; background: #f5f3ff; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: clamp(.83rem,2vw,1rem); text-align: center; white-space: nowrap; }.correlation-formula span { font-weight: 750; }.correlation-meaning { margin: 0; padding-left: 20px; color: #64748b; font-size: .84rem; line-height: 1.7; }.correlation-example { margin-top: 18px; padding: 14px 16px; border-left: 4px solid #f59e0b; border-radius: 0 9px 9px 0; background: #fffbeb; }.correlation-example h3, .correlation-code-head h3 { margin: 0; color: #0f172a; font-size: .91rem; }.correlation-example h3 i { margin-right: 5px; color: #d97706; }.correlation-example p { margin: 7px 0 0; color: #475569; font-size: .84rem; line-height: 1.65; }.correlation-code-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; }.correlation-code-head h3 i { margin-right: 5px; color: #3776ab; }.correlation-code-head span { color: #64748b; font-size: .72rem; }.correlation-code { margin: 9px 0 0; padding: 15px; overflow: auto; border-radius: 10px; color: #e2e8f0; background: #0f172a; font: .76rem/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; }.correlation-code-explanation { margin: 11px 0 0; color: #475569; font-size: .8rem; line-height: 1.6; }.correlation-code-explanation code { padding: 1px 4px; border-radius: 4px; color: #5b21b6; background: #f5f3ff; font: .75rem ui-monospace,SFMono-Regular,Menlo,monospace; }.correlation-note { margin: 15px 0 0; color: #64748b; font-size: .77rem; line-height: 1.55; }.correlation-note i { margin-right: 4px; color: #7c3aed; }
.combination-form { display: grid; grid-template-columns: minmax(160px,1fr) 28px minmax(160px,1fr) minmax(150px,.72fr); align-items: end; gap: 14px; }
.combination-form label { display: grid; gap: 7px; font-size: .82rem; color: var(--text-muted); font-weight: 700; }
.combination-form .param-input { width: 100%; background: #fff; }
.combination-plus { display: flex; align-items: center; justify-content: center; height: 42px; color: var(--primary); font-size: .85rem; }
.combination-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; margin-top: 18px; }
.combination-examples { display: flex; gap: 7px; flex-wrap: wrap; color: var(--text-subtle); font-size: .75rem; }
.combination-examples button { color: var(--primary); border: 1px solid #bfdbfe; background: var(--primary-light); border-radius: 99px; padding: 5px 9px; font-size: .73rem; }
.combination-examples button:hover { background: #dbeafe; }
.combination-help { margin: 15px 0 0; color: var(--text-subtle); font-size: .76rem; }
.combination-result { margin-top: 20px; }
.combination-empty, .combination-loading { min-height: 180px; display: grid; place-content: center; gap: 10px; text-align: center; color: var(--text-subtle); border: 1px dashed var(--border-strong); border-radius: 12px; background: var(--surface-soft); font-size: .9rem; }
.combination-empty i { font-size: 1.8rem; color: #f59e0b; }
.combination-empty p { margin: 0; }
.signal-card { display: flex; align-items: center; gap: 20px; padding: 24px; border: 1px solid; border-radius: 12px; }
.signal-card.is-green { color: #047857; border-color: #86efac; background: var(--green-bg); }
.signal-card.is-yellow { color: #a16207; border-color: #fde68a; background: var(--yellow-bg); }
.signal-card.is-red { color: #b91c1c; border-color: #fecaca; background: var(--red-bg); }
.signal-light { display: grid; place-items: center; flex: 0 0 58px; width: 58px; height: 58px; border-radius: 50%; color: #fff; font-size: 1.75rem; }
.is-green .signal-light { background: #10b981; }.is-yellow .signal-light { background: #eab308; }.is-red .signal-light { background: #ef4444; }
.signal-copy p { margin: 0; }.signal-eyebrow { font-weight: 700; font-size: .78rem; opacity: .78; }.signal-copy h2 { margin: 3px 0 7px; font-size: 1.15rem; }.signal-copy > p:last-child { color: var(--text); font-size: .9rem; line-height: 1.55; }
.combination-chart-card { margin-top: 14px; padding: 19px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }.combination-chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }.combination-chart-head h3 { margin: 0 0 5px; font-size: .94rem; }.combination-chart-head h3 i { color: var(--primary); }.combination-chart-head p { margin: 0; color: var(--text-muted); font-size: .8rem; line-height: 1.5; }.chart-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; flex-shrink: 0; color: var(--text-muted); font-size: .75rem; }.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }.chart-legend i { display: inline-block; width: 17px; height: 3px; border-radius: 2px; }.line-a i { background: #1d4ed8; }.line-b i { background: #f97316; }.flow-chart-wrap { margin-top: 17px; height: 218px; padding: 7px 0 0; }.flow-chart-wrap svg { display: block; width: 100%; height: 190px; overflow: visible; }.flow-grid { stroke: #dbe3ed; stroke-width: 1; stroke-dasharray: 4 4; }.flow-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }.flow-line-a { stroke: #1d4ed8; }.flow-line-b { stroke: #f97316; }.flow-chart-dates { display: flex; justify-content: space-between; padding: 7px 3px 0; color: var(--text-subtle); font-size: .69rem; }.chart-why { margin: 10px 0 0; padding: 11px 12px; border-radius: 7px; background: var(--surface-soft); color: var(--text-muted); font-size: .81rem; line-height: 1.6; }.chart-why i { color: #eab308; }.chart-why b { color: var(--text); }
.combination-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.combination-detail-card { padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }.combination-detail-card h3 { margin: 0 0 9px; font-size: .9rem; }.combination-detail-card h3 i { color: var(--primary); }.combination-detail-card p { margin: 0 0 12px; font-size: .86rem; color: var(--text-muted); line-height: 1.55; }.combination-detail-card small { color: var(--text-subtle); font-size: .72rem; line-height: 1.45; }.combination-error { margin: 0; padding: 16px; border: 1px solid #fecaca; border-radius: 10px; color: var(--red); background: var(--red-bg); font-size: .86rem; }
@media (max-width: 760px) { .composition-guide { grid-template-columns: auto minmax(0, 1fr); }.signal-legend { grid-column: 1 / -1; }.covariance-modal-backdrop { padding: 10px; }.covariance-modal { max-height: calc(100vh - 20px); border-radius: 12px; }.covariance-modal-header, .covariance-modal-body { padding: 17px; }.covariance-modal-icon { width: 38px; height: 38px; }.covariance-code-head { align-items: flex-start; flex-direction: column; }.combination-form { grid-template-columns: 1fr; }.combination-plus { height: auto; transform: rotate(90deg); }.combination-detail-grid { grid-template-columns: 1fr; }.signal-card { align-items: flex-start; padding: 18px; }.signal-light { flex-basis: 46px; width: 46px; height: 46px; font-size: 1.35rem; }.combination-chart-head { display: block; }.chart-legend { justify-content: flex-start; margin-top: 10px; }.flow-chart-wrap { height: 178px; }.flow-chart-wrap svg { height: 150px; } }
@media (max-width: 560px) { .covariance-sign-grid { grid-template-columns: 1fr; }.covariance-modal-header > div { align-items: flex-start; }.covariance-modal-header p { font-size: .8rem; } }
@media (max-width: 760px) { .correlation-modal-backdrop { padding: 10px; }.correlation-modal { max-height: calc(100vh - 20px); border-radius: 12px; }.correlation-modal-header, .correlation-modal-body { padding: 17px; }.correlation-modal-icon { width: 38px; height: 38px; }.correlation-code-head { align-items: flex-start; flex-direction: column; } }
@media (max-width: 560px) { .correlation-modal-header > div { align-items: flex-start; }.correlation-modal-header p { font-size: .8rem; } }

/* ── 포트폴리오 추천 ── */
.portfolio-guide-explainer { display: flex; gap: 13px; margin-bottom: 18px; padding: 16px 18px; color: #1e3a5f; border: 1px solid #bfdbfe; border-radius: 12px; background: #f8fbff; }.portfolio-guide-explainer > i { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; color: var(--primary); border-radius: 50%; background: #dbeafe; }.portfolio-guide-explainer strong { font-size: .9rem; }.portfolio-guide-explainer p { margin: 5px 0 0; color: var(--text-muted); font-size: .82rem; line-height: 1.6; }
.sharpe-help-button { margin-top: 10px; padding: 5px 9px; color: #7c3aed; border: 1px solid #ddd6fe; border-radius: 99px; background: #faf5ff; font-size: .76rem; font-weight: 700; cursor: pointer; }.sharpe-help-button:hover, .sharpe-help-button:focus-visible { color: #5b21b6; border-color: #c4b5fd; background: #f3e8ff; outline: none; }.sharpe-help-button:focus-visible { box-shadow: 0 0 0 3px #ddd6fe; }.sharpe-help-button i { margin-right: 3px; }
.sharpe-modal-backdrop { position: fixed; z-index: 1300; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(15,23,42,.58); backdrop-filter: blur(3px); }.sharpe-modal-backdrop[hidden] { display: none; }.sharpe-modal { width: min(1040px,100%); max-height: min(900px,calc(100vh - 32px)); overflow: auto; border: 1px solid #cbd5e1; border-radius: 16px; background: #fff; box-shadow: 0 24px 70px rgba(15,23,42,.32); outline: none; }.sharpe-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 25px 30px 20px; border-bottom: 1px solid #e2e8f0; }.sharpe-modal-header > div { display: flex; align-items: center; gap: 13px; }.sharpe-modal-icon { display: grid; flex: 0 0 auto; place-items: center; width: 48px; height: 48px; border-radius: 11px; color: #fff; background: linear-gradient(135deg,#7c3aed,#db2777); }.sharpe-kicker { margin: 0 0 3px !important; color: #7c3aed !important; font-size: .76rem !important; font-weight: 750; letter-spacing: .03em; }.sharpe-modal h2 { margin: 0; color: #0f172a; font-size: clamp(1.25rem,2vw,1.55rem); }.sharpe-modal-header p { margin: 4px 0 0; color: #64748b; font-size: .86rem; line-height: 1.45; }.sharpe-modal-close { display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; border-radius: 9px; color: #64748b; font-size: 1.1rem; }.sharpe-modal-close:hover, .sharpe-modal-close:focus-visible { color: #0f172a; background: #f1f5f9; }.sharpe-modal-body { padding: 25px 30px 30px; }.sharpe-plain-language { padding: 14px 16px; border: 1px solid #ddd6fe; border-radius: 10px; background: #faf5ff; }.sharpe-plain-language span { color: #6d28d9; font-size: .78rem; font-weight: 750; }.sharpe-plain-language span i { margin-right: 4px; }.sharpe-plain-language p { margin: 6px 0 0; color: #475569; font-size: .86rem; line-height: 1.65; }.sharpe-formula { margin: 17px 0 13px; padding: 15px; overflow-x: auto; border-radius: 10px; color: #5b21b6; background: #f5f3ff; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: clamp(.8rem,2vw,1rem); text-align: center; white-space: nowrap; }.sharpe-formula span { font-weight: 750; }.sharpe-parts { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.sharpe-parts div { padding: 12px; border: 1px solid #e2e8f0; border-radius: 9px; }.sharpe-parts b { display: block; color: #0f172a; font-size: .82rem; }.sharpe-parts span { display: block; margin-top: 4px; color: #64748b; font-size: .75rem; line-height: 1.45; }.sharpe-example { margin-top: 17px; padding: 14px 16px; border-left: 4px solid #f59e0b; border-radius: 0 9px 9px 0; background: #fffbeb; }.sharpe-example h3, .sharpe-code-head h3 { margin: 0; color: #0f172a; font-size: .91rem; }.sharpe-example h3 i { margin-right: 5px; color: #d97706; }.sharpe-example p { margin: 7px 0 0; color: #78350f; font-size: .84rem; line-height: 1.65; }.sharpe-caution { display: flex; gap: 9px; margin-top: 16px; padding: 13px 15px; border-radius: 9px; color: #1e3a8a; background: #eff6ff; }.sharpe-caution i { margin-top: 2px; color: #2563eb; }.sharpe-caution p { margin: 0; font-size: .82rem; line-height: 1.6; }.sharpe-code-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; }.sharpe-code-head h3 i { margin-right: 5px; color: #3776ab; }.sharpe-code-head span { color: #64748b; font-size: .72rem; }.sharpe-code { margin: 9px 0 0; padding: 15px; overflow: auto; border-radius: 10px; color: #e2e8f0; background: #0f172a; font: .76rem/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; }.sharpe-note { margin: 15px 0 0; color: #64748b; font-size: .77rem; line-height: 1.55; }.sharpe-note i { margin-right: 4px; color: #7c3aed; }
.portfolio-guide-layout { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); gap: 16px; align-items: start; }.portfolio-guide-form, .portfolio-guide-result, .portfolio-guide-check { padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); }.portfolio-guide-form h2 { margin: 0 0 17px; font-size: .98rem; }.portfolio-guide-form label { display: grid; gap: 7px; margin: 0 0 14px; color: var(--text-muted); font-size: .8rem; font-weight: 750; }.portfolio-guide-form .param-input { width: 100%; background: #fff; }.portfolio-guide-form .run-btn { width: 100%; margin-top: 3px; }
.portfolio-guide-result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.portfolio-guide-result-head p { margin: 0; color: var(--text-subtle); font-size: .72rem; font-weight: 700; }.portfolio-guide-result-head h2 { margin: 4px 0 0; color: var(--text); font-size: 1.12rem; }.portfolio-guide-result-head h2 span { margin-left: 5px; font-size: .75rem; }.portfolio-guide-result-head > i { font-size: 1.6rem; }.portfolio-guide-intro { margin: 14px 0; color: var(--text-muted); font-size: .84rem; line-height: 1.62; }.guide-allocation-bar { display: flex; height: 19px; overflow: hidden; border-radius: 99px; background: var(--surface-soft); }.guide-allocation-bar span { min-width: 3px; border-right: 2px solid #fff; }.guide-allocation-bar span:last-child { border: 0; }.guide-allocation-list { display: grid; gap: 9px; padding: 0; margin: 16px 0; list-style: none; }.guide-allocation-list li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 9px; }.guide-dot { width: 9px; height: 9px; border-radius: 50%; }.guide-allocation-list b { display: block; color: var(--text); font-size: .82rem; }.guide-allocation-list small { display: block; margin-top: 2px; color: var(--text-subtle); font-size: .69rem; }.guide-allocation-list strong { color: var(--text); font-size: .8rem; }.portfolio-guide-note { display: flex; gap: 8px; padding: 11px; color: var(--text-muted); border-radius: 8px; background: var(--surface-soft); font-size: .74rem; line-height: 1.5; }.portfolio-guide-note i { margin-top: 2px; color: #f59e0b; }.portfolio-guide-note b { color: var(--text); }
.portfolio-guide-check { margin-top: 16px; }.portfolio-guide-check h2 { margin: 0 0 14px; font-size: .92rem; }.portfolio-guide-check h2 i { color: var(--primary); }.portfolio-guide-check > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.portfolio-guide-check p { margin: 0; }.portfolio-guide-check b { display: block; color: var(--text); font-size: .8rem; }.portfolio-guide-check span { display: block; margin-top: 5px; color: var(--text-muted); font-size: .74rem; line-height: 1.5; }.portfolio-guide-disclaimer { margin: 12px 2px 0; color: var(--text-subtle); font-size: .7rem; line-height: 1.5; }
@media (max-width: 760px) { .portfolio-guide-layout { grid-template-columns: 1fr; }.portfolio-guide-check > div { grid-template-columns: 1fr; gap: 12px; }.portfolio-guide-explainer { padding: 14px; } }
@media (max-width: 760px) { .sharpe-modal-backdrop { padding: 10px; }.sharpe-modal { max-height: calc(100vh - 20px); border-radius: 12px; }.sharpe-modal-header, .sharpe-modal-body { padding: 17px; }.sharpe-modal-icon { width: 38px; height: 38px; }.sharpe-code-head { align-items: flex-start; flex-direction: column; }.sharpe-parts { grid-template-columns: 1fr; } }

/* ── 포트폴리오 시뮬레이션 ── */
.simulation-explainer { display: flex; gap: 13px; margin-bottom: 18px; padding: 16px 18px; color: #312e81; border: 1px solid #c7d2fe; border-radius: 12px; background: #f8faff; }.simulation-explainer > i { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; color: #4f46e5; border-radius: 50%; background: #e0e7ff; }.simulation-explainer strong { font-size: .9rem; }.simulation-explainer p { margin: 5px 0 0; color: var(--text-muted); font-size: .82rem; line-height: 1.6; }
.monte-carlo-help-button { margin-top: 10px; padding: 5px 9px; color: #4338ca; border: 1px solid #c7d2fe; border-radius: 99px; background: #eef2ff; font-size: .76rem; font-weight: 700; cursor: pointer; }.monte-carlo-help-button:hover, .monte-carlo-help-button:focus-visible { color: #312e81; border-color: #a5b4fc; background: #e0e7ff; outline: none; }.monte-carlo-help-button:focus-visible { box-shadow: 0 0 0 3px #c7d2fe; }.monte-carlo-help-button i { margin-right: 3px; }
.rag-chat-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,330px); gap: 20px; align-items: start; margin-bottom: 16px; }.rag-chat-heading-copy { min-width: 0; }.rag-chat-heading-copy h2 { margin: 0 0 5px; font-size: 1.25rem; }.rag-chat-heading-copy h2 i { margin-right: 8px; color: var(--primary); }.rag-chat-heading-copy p { margin: 0; color: var(--text-muted); font-size: .87rem; line-height: 1.55; }.rag-chat-controls { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 5px 8px; min-width: 0; align-items: center; }.rag-chat-controls label { color: var(--text-muted); font-size: .75rem; font-weight: 750; }.rag-chat-controls .param-input { width: 100%; min-width: 0; background: #fff; font-size: .8rem; }.rag-chat-controls small, .rag-chat-controls .badge { grid-column: 1 / -1; }.rag-chat-controls small { color: var(--text-subtle); font-size: .69rem; line-height: 1.4; }.rag-chat-controls .badge { justify-self: start; margin-top: 2px; }.rag-chat-layout { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(260px,.62fr); gap: 16px; width: 100%; min-width: 0; align-items: stretch; }.rag-chat-panel { display: flex; min-width: 0; min-height: 540px; flex-direction: column; padding: 0; overflow: hidden; }.rag-messages { display: flex; flex: 1; min-height: 400px; max-height: 62vh; overflow: auto; flex-direction: column; gap: 14px; padding: 20px; }.rag-welcome { color: var(--text-muted); line-height: 1.6; }.rag-welcome strong { color: var(--text); }.rag-message { max-width: 92%; overflow-wrap: anywhere; padding: 11px 13px; border: 1px solid var(--border); border-radius: 12px 12px 12px 2px; background: var(--surface-alt); color: var(--text); line-height: 1.6; white-space: normal; }.rag-message.is-user { align-self: flex-end; max-width: 82%; border-color: var(--primary); border-radius: 12px 12px 2px 12px; background: var(--primary); color: #fff; }.rag-message.is-assistant { align-self: flex-start; }.rag-message.loading { align-self: flex-start; border-color: transparent; background: transparent; color: var(--text-muted); padding: 3px; }.rag-message.is-error { align-self: flex-start; border-color: var(--red); color: var(--red); }.rag-chat-compose { padding: 14px 20px; border-top: 1px solid var(--border); background: var(--surface-alt); }.rag-examples { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }.rag-form { display: flex; gap: 8px; }.rag-form input { flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; font: inherit; }.rag-form input:focus { border-color: var(--primary); outline: 2px solid var(--primary-light); outline-offset: 1px; }.rag-source-panel { display: flex; min-width: 0; min-height: 540px; flex-direction: column; padding: 0; overflow: hidden; }.rag-source-title { display: flex; justify-content: space-between; gap: 10px; padding: 18px; border-bottom: 1px solid var(--border); background: #f8fbff; }.rag-source-title h3 { margin: 0; color: var(--text); font-size: .95rem; }.rag-source-title h3 i { margin-right: 6px; color: #2563eb; }.rag-source-title p { margin: 5px 0 0; color: var(--text-muted); font-size: .73rem; line-height: 1.45; }.rag-source-title > span { align-self: flex-start; padding: 4px 7px; border-radius: 99px; color: #1d4ed8; background: #dbeafe; font-size: .69rem; font-weight: 750; white-space: nowrap; }.rag-sources { display: grid; gap: 10px; overflow: auto; padding: 14px; }.rag-source-empty { display: grid; min-height: 220px; place-content: center; gap: 10px; color: var(--text-subtle); text-align: center; font-size: .82rem; line-height: 1.55; }.rag-source-empty i { color: #93c5fd; font-size: 1.8rem; }.rag-source-empty p { max-width: 220px; margin: 0; }.rag-source-card { padding: 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }.rag-source-head { display: flex; justify-content: space-between; gap: 7px; color: var(--text); font-size: .75rem; }.rag-source-head span { color: var(--text-subtle); font-size: .68rem; }.rag-source-name { margin: 6px 0 0; color: #2563eb; font-size: .71rem; font-weight: 700; overflow-wrap: anywhere; }.rag-source-text { margin: 8px 0 0; color: var(--text-muted); font-size: .78rem; line-height: 1.6; overflow-wrap: anywhere; white-space: normal; }
.monte-carlo-modal-backdrop { position: fixed; z-index: 1300; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(15,23,42,.58); backdrop-filter: blur(3px); }.monte-carlo-modal-backdrop[hidden] { display: none; }.monte-carlo-modal { width: min(1080px,100%); max-height: min(910px,calc(100vh - 32px)); overflow: auto; border: 1px solid #cbd5e1; border-radius: 16px; background: #fff; box-shadow: 0 24px 70px rgba(15,23,42,.32); outline: none; }.monte-carlo-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 25px 30px 20px; border-bottom: 1px solid #e2e8f0; }.monte-carlo-modal-header > div { display: flex; align-items: center; gap: 13px; }.monte-carlo-modal-icon { display: grid; flex: 0 0 auto; place-items: center; width: 48px; height: 48px; border-radius: 11px; color: #fff; background: linear-gradient(135deg,#4f46e5,#0ea5e9); }.monte-carlo-kicker { margin: 0 0 3px !important; color: #4338ca !important; font-size: .76rem !important; font-weight: 750; letter-spacing: .03em; }.monte-carlo-modal h2 { margin: 0; color: #0f172a; font-size: clamp(1.25rem,2vw,1.55rem); }.monte-carlo-modal-header p { margin: 4px 0 0; color: #64748b; font-size: .86rem; line-height: 1.45; }.monte-carlo-modal-close { display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; border-radius: 9px; color: #64748b; font-size: 1.1rem; }.monte-carlo-modal-close:hover, .monte-carlo-modal-close:focus-visible { color: #0f172a; background: #f1f5f9; }.monte-carlo-modal-body { padding: 25px 30px 30px; }.monte-carlo-plain-language { padding: 14px 16px; border: 1px solid #c7d2fe; border-radius: 10px; background: #f8faff; }.monte-carlo-plain-language span { color: #4338ca; font-size: .78rem; font-weight: 750; }.monte-carlo-plain-language span i { margin-right: 4px; }.monte-carlo-plain-language p { margin: 6px 0 0; color: #475569; font-size: .86rem; line-height: 1.65; }.monte-carlo-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 17px 0; }.monte-carlo-steps div { display: grid; grid-template-columns: 28px 1fr; gap: 3px 8px; padding: 12px; border: 1px solid #e2e8f0; border-radius: 9px; }.monte-carlo-steps b { display: grid; grid-row: span 2; place-items: center; width: 25px; height: 25px; color: #fff; border-radius: 50%; background: #6366f1; font-size: .75rem; }.monte-carlo-steps strong { color: #0f172a; font-size: .82rem; }.monte-carlo-steps span { color: #64748b; font-size: .74rem; line-height: 1.45; }.monte-carlo-example { padding: 14px 16px; border-left: 4px solid #14b8a6; border-radius: 0 9px 9px 0; background: #f0fdfa; }.monte-carlo-example h3, .monte-carlo-code-head h3 { margin: 0; color: #0f172a; font-size: .91rem; }.monte-carlo-example h3 i { margin-right: 5px; color: #0d9488; }.monte-carlo-example p { margin: 7px 0 0; color: #475569; font-size: .84rem; line-height: 1.65; }.monte-carlo-code-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; }.monte-carlo-code-head h3 i { margin-right: 5px; color: #3776ab; }.monte-carlo-code-head span { color: #64748b; font-size: .72rem; }.monte-carlo-code { margin: 9px 0 0; padding: 15px; overflow: auto; border-radius: 10px; color: #e2e8f0; background: #0f172a; font: .76rem/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; }.monte-carlo-note { margin: 15px 0 0; color: #64748b; font-size: .77rem; line-height: 1.55; }.monte-carlo-note i { margin-right: 4px; color: #4f46e5; }
.simulation-steps { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }.simulation-steps span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; color: #4338ca; border-radius: 99px; background: #eef2ff; font-size: .7rem; }.simulation-steps b { display: grid; place-items: center; width: 16px; height: 16px; color: #fff; border-radius: 50%; background: #6366f1; font-size: .62rem; }
.simulation-layout { display: grid; grid-template-columns: minmax(250px, .65fr) minmax(0, 1.35fr); gap: 16px; align-items: start; }.simulation-form, .scenario-result { padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); }.simulation-form h2 { margin: 0 0 17px; font-size: .98rem; }.simulation-form label { display: grid; gap: 7px; margin: 0 0 14px; color: var(--text-muted); font-size: .8rem; font-weight: 750; }.simulation-form .param-input { width: 100%; background: #fff; }.simulation-form .run-btn { width: 100%; margin-top: 3px; }.simulation-empty, .simulation-loading { min-height: 320px; display: grid; place-content: center; gap: 10px; text-align: center; color: var(--text-subtle); border: 1px dashed var(--border-strong); border-radius: 12px; background: var(--surface-soft); font-size: .86rem; }.simulation-empty i { color: #6366f1; font-size: 1.8rem; }.simulation-empty p { margin: 0; }
.scenario-result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.scenario-result-head p { margin: 0; color: var(--text-subtle); font-size: .72rem; font-weight: 700; }.scenario-result-head h2 { margin: 4px 0 0; color: var(--text); font-size: 1.05rem; }.scenario-result-head > i { color: #6366f1; font-size: 1.55rem; }.scenario-intro { margin: 13px 0; color: var(--text-muted); font-size: .8rem; line-height: 1.55; }.scenario-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 5px; color: var(--text-muted); font-size: .72rem; }.scenario-legend span::before { content: ''; display: inline-block; width: 15px; height: 3px; margin-right: 5px; border-radius: 2px; vertical-align: middle; }.scenario-legend .is-cautious::before { background: #ef4444; }.scenario-legend .is-middle::before { background: #4f46e5; }.scenario-legend .is-positive::before { background: #10b981; }.scenario-chart-wrap { height: 200px; }.scenario-chart-wrap svg { display: block; width: 100%; height: 175px; }.scenario-area { fill: rgba(99, 102, 241, .12); }.scenario-grid { stroke: #dbe3ed; stroke-dasharray: 4 4; }.scenario-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }.scenario-line.is-cautious { stroke: #ef4444; }.scenario-line.is-middle { stroke: #4f46e5; }.scenario-line.is-positive { stroke: #10b981; }.scenario-years { display: flex; justify-content: space-between; padding: 4px 2px 0; color: var(--text-subtle); font-size: .69rem; }.scenario-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 10px; }.scenario-summary article { padding: 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-soft); }.scenario-summary article.is-main { border-color: #c7d2fe; background: #f5f7ff; }.scenario-summary span, .scenario-summary small { display: block; color: var(--text-subtle); font-size: .67rem; }.scenario-summary strong { display: block; margin: 5px 0; color: var(--text); font-size: .86rem; }.scenario-summary small { line-height: 1.45; }.scenario-paid { margin: 13px 0 0; color: var(--text-muted); font-size: .76rem; text-align: right; }.scenario-paid b { color: var(--text); }.simulation-disclaimer { margin: 12px 2px 0; color: var(--text-subtle); font-size: .7rem; line-height: 1.5; }
@media (max-width: 760px) { .simulation-layout { grid-template-columns: 1fr; }.simulation-explainer { padding: 14px; }.scenario-summary { grid-template-columns: 1fr; }.scenario-chart-wrap { height: 170px; }.scenario-chart-wrap svg { height: 145px; } }
@media (max-width: 1080px) { .rag-chat-heading { grid-template-columns: 1fr; }.rag-chat-controls { width: 100%; max-width: 500px; }.rag-chat-layout { grid-template-columns: minmax(0,1fr) minmax(250px,.55fr); } }
@media (max-width: 860px) { .rag-chat-layout { grid-template-columns: 1fr; }.rag-chat-panel, .rag-source-panel { min-height: auto; }.rag-source-panel { max-height: 440px; }.rag-messages { min-height: 360px; max-height: 52vh; } }
@media (max-width: 760px) { .monte-carlo-modal-backdrop { padding: 10px; }.monte-carlo-modal { max-height: calc(100vh - 20px); border-radius: 12px; }.monte-carlo-modal-header, .monte-carlo-modal-body { padding: 17px; }.monte-carlo-modal-icon { width: 38px; height: 38px; }.monte-carlo-code-head { align-items: flex-start; flex-direction: column; }.monte-carlo-steps { grid-template-columns: 1fr; } }.monte-carlo-modal-header > div { align-items: flex-start; }
.dart-help {
  margin-top: 10px;
  font-size: .88rem;
  color: var(--text-muted);
  line-height: 1.65;
}
/* RAG는 답변을 우선 보여 주고, 검색 근거는 사용자가 필요할 때만 펼친다. */
.rag-answer-layout { grid-template-columns: minmax(0, 1fr); }
.rag-source-panel { min-height: 0; margin-top: 16px; }
.rag-source-panel > summary { list-style: none; cursor: pointer; }
.rag-source-panel > summary::-webkit-details-marker { display: none; }
.rag-source-panel > summary::after { align-self: center; color: var(--text-muted); content: '⌄'; font-size: 1.1rem; }
.rag-source-panel[open] > summary::after { transform: rotate(180deg); }
.rag-source-panel:not([open]) > .rag-sources { display: none; }

 .dart-result-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  font-size: .9rem;
}
.dart-result-summary span {
  font-size: .85rem;
  color: var(--text-muted);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 2px 10px;
}
.dart-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.dart-result-card {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  transition: border-color .15s;
}
.dart-result-card:hover { border-color: var(--primary); }
.dart-result-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.dart-ticker {
  font-size: .88rem;
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 10px;
}
.dart-result-card dl { margin: 0 0 12px; display: grid; gap: 4px; }
.dart-result-card dl > div {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .88rem;
}
.dart-result-card dt { color: var(--text-muted); }
.dart-result-card dd {
  margin: 0; font-weight: 600;
  font-family: "Fira Code", "Cascadia Code", monospace;
}
.dart-copy-row { display: flex; gap: 6px; flex-wrap: wrap; }
.copy-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .72rem; font-weight: 600; color: var(--text-muted);
  cursor: pointer; transition: all .15s;
}
.copy-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.dart-notes {
  font-size: .76rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.dart-notes p { margin: 2px 0; }
.dart-error {
  background: var(--red-bg);
  border: 1px solid #fca5a5;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  color: var(--red);
}
.dart-error p { margin: 4px 0; font-size: .85rem; color: var(--text-muted); }
.dart-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.dart-table th {
  background: var(--primary);
  color: #ffffff;
  font-weight: 700;
  padding: 8px 12px;
  text-align: left;
  border: 1px solid var(--primary-dark);
  white-space: nowrap;
  font-size: 1rem;
}
.dart-table td {
  padding: 7px 12px;
  border: 1px solid var(--border);
  vertical-align: top;
  font-size: 1rem;
}
.dart-table tr:nth-child(even) td { background: var(--surface-soft); }
.dart-table tr:hover td { background: var(--primary-light); }
.mono {
  font-family: "Fira Code", "Cascadia Code", monospace;
  font-size: .85em;
  letter-spacing: .02em;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  :root {
    --sidebar-w:  300px;
    --topbar-h:   62px;
  }
  .content-main { padding: 32px 48px 56px; }
  .home-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .learn-body { padding: 36px 42px; }
  .grid-2 { gap: 20px; }
  .grid-3 { gap: 20px; }
  .grid-4 { gap: 18px; }
}

@media (min-width: 1920px) {
  :root {
    --sidebar-w:  320px;
    --topbar-h:   66px;
  }
  .content-main { padding: 36px 56px 64px; }
  .home-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .analysis-group { padding: 28px 36px; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(calc(-1 * var(--sidebar-w)));
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }
  .content-wrap {
    margin-left: 0;
    width: 100%;
  }
  .learn-toc { width: 86vw; }
  .home-sections { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .result-stats { gap: 16px; }
}

@media (min-width: 1025px) {
  body.sidebar-collapsed .sidebar {
    transform: translateX(calc(-1 * var(--sidebar-w)));
  }

  body.sidebar-collapsed .content-wrap {
    margin-left: 0;
    width: 100%;
  }
}
@media (max-width: 640px) {
  .content-main { padding: 16px 14px 32px; }
  .topbar-ticker { display: none; }
  .global-search { flex:1; width:auto; min-width:0; }
  .brand-sub { display: none; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .question-card { padding: 18px 16px; }
  .quiz-header { flex-direction: column; align-items: flex-start; }
  .home-hero { padding: 24px 20px; }
  .home-hero h1 { font-size: 1.25rem; }
  .home-grid { grid-template-columns: 1fr 1fr; }
  .analysis-group { padding: 16px; }
  .analysis-group-head { gap: 10px; }
}

.sox-semicon-button,.vix-kospi-button,.circuit-breaker-button { display:inline-flex; align-items:center; gap:7px; padding:10px 14px; border-radius:9px; font-size:.82rem; font-weight:800; }
.sox-semicon-button { color:#6d28d9; background:#f5f3ff; border:1px solid #ddd6fe; }.sox-semicon-button:hover { color:#fff; background:#7c3aed; }
.vix-kospi-button { color:#b91c1c; background:#fef2f2; border:1px solid #fecaca; }.vix-kospi-button:hover { color:#fff; background:#dc2626; }
.circuit-breaker-button { color:#9a3412; background:#fff7ed; border:1px solid #fed7aa; }.circuit-breaker-button:hover { color:#fff; background:#ea580c; }

.theme-volatility-button { display:inline-flex; align-items:center; gap:7px; padding:10px 14px; color:#9a3412; background:#fff7ed; border:1px solid #fed7aa; border-radius:9px; font-size:.82rem; font-weight:800; }.theme-volatility-button:hover { color:#fff; background:#ea580c; }
.theme-volatility-modal-backdrop { position:fixed; z-index:1200; inset:0; display:none; place-items:center; padding:16px; background:rgba(15,23,42,.58); }.theme-volatility-modal-backdrop.show { display:grid; }
.theme-volatility-modal { width:95vw; max-width:95vw; height:95vh; max-height:95vh; overflow:auto; background:#fff; border-radius:16px; }.theme-volatility-modal>header { display:flex; justify-content:space-between; padding:20px 24px; border-bottom:1px solid #e2e8f0; }.theme-volatility-modal>header>div { display:flex; gap:12px; align-items:center; }.theme-volatility-modal>header span { display:grid; width:42px; height:42px; place-items:center; color:#fff; background:#ea580c; border-radius:11px; font-size:1.1rem; }.theme-volatility-modal h2 { margin:0; }.theme-volatility-modal>header p { margin:3px 0 0; color:#64748b; font-size:.8rem; }.theme-volatility-modal>header>button { width:40px; height:40px; flex:0 0 auto; color:#64748b; border-radius:10px; font-size:1.2rem; }
.theme-volatility-tabs { display:flex; flex-wrap:wrap; gap:8px; padding:14px 24px 0; }.theme-volatility-tabs button { display:flex; flex:1; flex-direction:column; gap:3px; padding:9px 11px; color:#9a3412; background:#fff7ed; border:1px solid #fed7aa; border-radius:8px; text-align:left; }.theme-volatility-tabs button small { color:#9a3412; font-size:.7rem; font-weight:600; }.theme-volatility-tabs button.is-active { color:#fff; background:#ea580c; border-color:#ea580c; }.theme-volatility-tabs button.is-active small { color:#ffedd5; }
.theme-volatility-modal main { padding:16px 24px 22px; }.theme-volatility-status { margin:0 0 10px; color:#475569; font-size:.78rem; }.theme-volatility-chart-wrap { overflow:hidden; border:1px solid #fed7aa; border-radius:11px; }.theme-volatility-chart-wrap canvas { display:block; width:100%; }.theme-volatility-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px; }.theme-volatility-summary article { display:flex; flex-direction:column; gap:5px; padding:12px; color:#475569; background:#f8fafc; border:1px solid #e2e8f0; border-radius:9px; font-size:.78rem; }.theme-volatility-summary strong { color:#0f172a; font-size:1rem; font-variant-numeric:tabular-nums; }.theme-volatility-summary strong.up { color:#dc2626; }.theme-volatility-summary strong.down { color:#2563eb; }.theme-volatility-summary small,.theme-volatility-note { color:#64748b; font-size:.72rem; line-height:1.5; }.theme-volatility-note { margin:14px 0 0; padding:10px 12px; background:#f8fafc; border-radius:8px; }

.sox-semicon-modal-backdrop,.vix-kospi-modal-backdrop,.circuit-breaker-modal-backdrop { position:fixed; z-index:1200; inset:0; display:none; place-items:center; padding:16px; background:rgba(15,23,42,.58); }
.sox-semicon-modal-backdrop.show,.vix-kospi-modal-backdrop.show,.circuit-breaker-modal-backdrop.show { display:grid; }
.vix-kospi-modal { width:95vw; max-width:95vw; height:95vh; max-height:95vh; overflow:auto; background:#fff; border-radius:16px; }
.vix-kospi-tabs { display:flex; flex-wrap:wrap; gap:8px; padding:12px 24px 0; }.vix-kospi-tabs button { padding:6px 12px; color:#b91c1c; background:#fff; border:1px solid #fecaca; border-radius:999px; font-size:.76rem; font-weight:800; }.vix-kospi-tabs button.is-active,.vix-kospi-tabs button:hover { color:#fff; background:#dc2626; }
.sox-semicon-modal { width:95vw; max-width:95vw; height:95vh; max-height:95vh; overflow:auto; background:#fff; border-radius:16px; }
.sox-semicon-tabs { display:flex; flex-wrap:wrap; gap:8px; padding:14px 24px 0; }
.sox-semicon-tabs button { padding:8px 12px; color:#5b21b6; background:#f5f3ff; border:1px solid #ddd6fe; border-radius:8px; font-size:.76rem; font-weight:800; }
.sox-semicon-tabs button.is-active { color:#fff; background:#7c3aed; border-color:#7c3aed; }
.circuit-breaker-modal { width:95vw; max-width:95vw; height:95vh; max-height:95vh; overflow:auto; background:#fff; border-radius:16px; }
.sox-semicon-modal header,.vix-kospi-modal header,.circuit-breaker-modal header { display:flex; justify-content:space-between; padding:20px 24px; border-bottom:1px solid #e2e8f0; }
.sox-semicon-modal header>div,.vix-kospi-modal header>div,.circuit-breaker-modal header>div { display:flex; gap:12px; align-items:center; }
.sox-semicon-modal header span,.vix-kospi-modal header span,.circuit-breaker-modal header span { display:grid; width:42px; height:42px; place-items:center; color:#fff; border-radius:11px; font-size:1.1rem; }
.sox-semicon-modal header span { background:#7c3aed; }.vix-kospi-modal header span { background:#dc2626; }.circuit-breaker-modal header span { background:#ea580c; }
.sox-semicon-modal h2,.vix-kospi-modal h2,.circuit-breaker-modal h2 { margin:0; }
.sox-semicon-modal header p,.vix-kospi-modal header p,.circuit-breaker-modal header p { margin:3px 0 0; color:#64748b; font-size:.8rem; }
.sox-semicon-modal header>button,.vix-kospi-modal header>button,.circuit-breaker-modal header>button { width:40px; height:40px; flex:0 0 auto; color:#64748b; border-radius:10px; font-size:1.2rem; }
.sox-semicon-modal main,.vix-kospi-modal main,.circuit-breaker-modal main { padding:18px 24px 22px; }
.sox-semicon-status,.vix-kospi-status,.circuit-breaker-status { margin:0 0 10px; color:#475569; font-size:.78rem; }
.sox-semicon-chart-wrap,.vix-kospi-chart-wrap,.circuit-breaker-chart-wrap { overflow:hidden; border-radius:11px; }
.sox-semicon-chart-wrap { border:1px solid #ddd6fe; }.vix-kospi-chart-wrap { border:1px solid #fecaca; }.circuit-breaker-chart-wrap { border:1px solid #fed7aa; }
.sox-semicon-chart-wrap canvas,.vix-kospi-chart-wrap canvas,.circuit-breaker-chart-wrap canvas { display:block; width:100%; }
.sox-semicon-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; }
.vix-kospi-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin-top:14px; }
.sox-semicon-summary article,.vix-kospi-summary article { display:flex; flex-direction:column; gap:5px; padding:12px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:9px; font-size:.78rem; color:#475569; }
.sox-semicon-summary strong,.vix-kospi-summary strong { font-size:1.02rem; color:#0f172a; font-variant-numeric:tabular-nums; }
.vix-kospi-summary .vix-risk-reading { background:#fffbeb; border-color:#fde68a; }.vix-kospi-summary .vix-risk-reading small { color:#64748b; }
.sox-semicon-note,.vix-kospi-note,.circuit-breaker-note { margin:14px 0 0; padding:10px 12px; color:#64748b; background:#f8fafc; border-radius:8px; font-size:.72rem; line-height:1.5; }

.cb-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:10px; }
.cb-panel { padding:10px; background:#fff7ed; border:1px solid #fed7aa; border-radius:11px; }
.cb-panel h3 { display:flex; align-items:center; gap:7px; margin:0 0 8px; color:#9a3412; font-size:.8rem; font-weight:800; }
.circuit-breaker-legend { display:flex; flex-wrap:wrap; gap:16px; margin-top:14px; color:#475569; font-size:.76rem; font-weight:700; }
.circuit-breaker-legend span { display:inline-flex; align-items:center; gap:6px; }
.cb-dot { display:inline-block; width:10px; height:10px; border-radius:50%; }
.cb-dot.cb-1 { background:#f59e0b; }.cb-dot.cb-2 { background:#f97316; }.cb-dot.cb-3 { background:#ef4444; }.cb-dot.cb-side { background:#0d9488; }
.cb-section-title { margin:18px 0 8px; color:#0f172a; font-size:.86rem; font-weight:800; }
.circuit-breaker-list { list-style:none; margin:0; padding:0; display:grid; gap:6px; max-height:220px; overflow-y:auto; }
.circuit-breaker-list li { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:8px 10px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:7px; font-size:.76rem; color:#334155; }
.circuit-breaker-list li a { margin-left:auto; color:#ea580c; font-weight:800; font-size:.72rem; white-space:nowrap; }
.cb-causes { margin:0; padding-left:18px; display:grid; gap:5px; color:#475569; font-size:.8rem; line-height:1.5; }

@media (max-width:900px) { .cb-grid { grid-template-columns:1fr; } }
@media (max-width:640px) {
  .sox-semicon-modal header,.sox-semicon-modal main,.vix-kospi-modal header,.vix-kospi-modal main,.circuit-breaker-modal header,.circuit-breaker-modal main { padding-left:15px; padding-right:15px; }
  .sox-semicon-summary,.vix-kospi-summary { grid-template-columns:1fr; }
  .theme-volatility-modal>header,.theme-volatility-modal main { padding-left:15px; padding-right:15px; }.theme-volatility-tabs { padding:12px 15px 0; overflow:auto; }.theme-volatility-tabs button { min-width:135px; }.theme-volatility-summary { grid-template-columns:1fr; }
}

.mdd-history-button { display:inline-flex; align-items:center; gap:7px; padding:10px 14px; color:#991b1b; background:#fef2f2; border:1px solid #fecaca; border-radius:9px; font-size:.82rem; font-weight:800; }.mdd-history-button:hover { color:#fff; background:#dc2626; }
.mdd-history-modal-backdrop { position:fixed; z-index:1200; inset:0; display:none; place-items:center; padding:16px; background:rgba(15,23,42,.58); }.mdd-history-modal-backdrop.show { display:grid; }
.mdd-history-modal { width:95vw; max-width:95vw; height:95vh; max-height:95vh; overflow:auto; background:#fff; border-radius:16px; }
.mdd-history-modal header { display:flex; justify-content:space-between; padding:20px 24px; border-bottom:1px solid #e2e8f0; }.mdd-history-modal header>div { display:flex; gap:12px; align-items:center; }
.mdd-history-modal header span { display:grid; width:42px; height:42px; place-items:center; color:#fff; background:#dc2626; border-radius:11px; font-size:1.1rem; }
.mdd-history-modal h2 { margin:0; }.mdd-history-modal header p { margin:3px 0 0; color:#64748b; font-size:.8rem; }
.mdd-history-modal header>button { width:40px; height:40px; flex:0 0 auto; color:#64748b; border-radius:10px; font-size:1.2rem; }
.mdd-history-modal main { padding:18px 24px 22px; }.mdd-history-status { margin:0 0 10px; color:#475569; font-size:.78rem; }
.mdd-history-chart-wrap { overflow:hidden; border:1px solid #fecaca; border-radius:11px; }.mdd-history-chart-wrap canvas { display:block; width:100%; }
.mdd-history-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; }
.mdd-history-summary article { display:flex; flex-direction:column; gap:5px; padding:12px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:9px; font-size:.78rem; color:#475569; }
.mdd-history-summary strong { font-size:1.05rem; color:#991b1b; font-variant-numeric:tabular-nums; }
.mdd-history-note { margin:14px 0 0; padding:10px 12px; color:#64748b; background:#f8fafc; border-radius:8px; font-size:.72rem; line-height:1.5; }
@media (max-width:640px) { .mdd-history-modal header,.mdd-history-modal main { padding-left:15px; padding-right:15px; }.mdd-history-summary { grid-template-columns:1fr; } }
.capm-simulator-button { display:inline-flex; gap:7px; align-items:center; padding:10px 14px; color:#4338ca; background:#eef2ff; border:1px solid #c7d2fe; border-radius:9px; font-size:.82rem; font-weight:800; }.capm-simulator-button:hover { color:#fff; background:#4f46e5; }
.capm-modal-backdrop { position:fixed; z-index:1200; inset:0; display:none; place-items:center; padding:16px; background:rgba(15,23,42,.58); }.capm-modal-backdrop.show { display:grid; }
.capm-modal { width:95vw; max-width:95vw; height:95vh; max-height:95vh; overflow:auto; background:#fff; border:1px solid #cbd5e1; border-radius:18px; box-shadow:0 24px 70px rgba(15,23,42,.32); }
.capm-modal header { display:flex; justify-content:space-between; gap:16px; padding:22px 28px; border-bottom:1px solid #e2e8f0; }.capm-modal header>div { display:flex; align-items:center; gap:14px; }
.capm-modal header span { display:grid; place-items:center; width:46px; height:46px; color:#fff; background:linear-gradient(135deg,#4f46e5,#4338ca); border-radius:13px; }
.capm-modal h2 { margin:0; color:#0f172a; font-size:1.35rem; }.capm-modal header p { margin:4px 0 0; color:#64748b; font-size:.84rem; }
.capm-modal header>button { width:40px; height:40px; color:#64748b; border-radius:10px; font-size:1.2rem; }
.capm-modal main { padding:20px 28px 24px; }
.capm-inputs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:15px; background:#eef2ff; border:1px solid #c7d2fe; border-radius:11px; }
.capm-inputs label { display:grid; gap:6px; color:#3730a3; font-size:.76rem; font-weight:750; }.capm-inputs input { padding:9px; border:1px solid #cbd5e1; border-radius:7px; font:inherit; font-weight:800; }
.capm-results { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:15px 0; }
.capm-results article { display:grid; gap:5px; padding:13px; background:#f8fafc; border:1px solid #dbe3ee; border-radius:9px; }
.capm-results span { color:#64748b; font-size:.72rem; font-weight:750; }.capm-results strong { color:#4338ca; font-size:1.1rem; }
.capm-reading { padding:15px; border:1px solid #dbe3ee; border-radius:11px; }.capm-reading h3 { margin:0 0 8px; color:#3730a3; font-size:.92rem; }
.capm-reading p { margin:0; color:#475569; line-height:1.5; }.capm-reading b { display:block; margin-top:11px; padding:9px; color:#3730a3; background:#eef2ff; border-radius:7px; font-size:.76rem; }
.capm-modal footer { display:flex; gap:8px; align-items:center; margin-top:14px; padding:10px 12px; color:#64748b; background:#f8fafc; border-radius:8px; font-size:.73rem; }
.capm-modal footer i { color:#4f46e5; }.capm-modal footer button { margin-left:auto; padding:6px 8px; color:#4338ca; background:#fff; border:1px solid #c7d2fe; border-radius:6px; font-size:.69rem; font-weight:800; }
@media (max-width:640px) { .capm-modal header,.capm-modal main { padding-left:15px; padding-right:15px; }.capm-inputs,.capm-results { grid-template-columns:1fr 1fr; } }

.regime-explainer { display: flex; gap: 13px; margin-bottom: 18px; padding: 16px 18px; color: #1e3a5f; border: 1px solid #bfdbfe; border-radius: 12px; background: #f8fbff; }
.regime-explainer > i { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; color: var(--primary); border-radius: 50%; background: #dbeafe; }
.regime-explainer strong { font-size: .9rem; }.regime-explainer p { margin: 5px 0 0; color: var(--text-muted); font-size: .82rem; line-height: 1.6; }
.regime-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.regime-card { position: relative; padding: 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); }
.regime-card.is-current { border-color: #1d4ed8; box-shadow: 0 0 0 2px rgba(29,78,216,.18); }
.regime-current-tag { position: absolute; top: -10px; right: 12px; padding: 2px 9px; color: #fff; background: #1d4ed8; border-radius: 99px; font-size: .64rem; font-weight: 800; }
.regime-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.regime-badge { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; color: #fff; border-radius: 9px; font-size: .82rem; font-weight: 900; }
.regime-card-head b { display: block; color: var(--text); font-size: .86rem; }.regime-card-head small { display: block; margin-top: 1px; color: var(--text-subtle); font-size: .66rem; }
.regime-mapping { margin: 0 0 8px; color: #1d4ed8; font-size: .72rem; font-weight: 750; }.regime-mapping i { margin-right: 4px; }
.regime-market { margin: 0 0 8px; color: var(--text-muted); font-size: .76rem; line-height: 1.55; }
.regime-strategy { margin: 0; padding-top: 8px; border-top: 1px dashed var(--border); color: var(--text); font-size: .76rem; line-height: 1.55; }.regime-strategy b { display: block; margin-bottom: 3px; color: var(--text-subtle); font-size: .66rem; text-transform: uppercase; letter-spacing: .03em; }

.risk-sim-section { padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); }
.risk-sim-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.risk-sim-head h2 { margin: 0; font-size: 1.02rem; color: var(--text); }.risk-sim-head p { margin: 5px 0 0; color: var(--text-muted); font-size: .8rem; line-height: 1.55; max-width: 640px; }
.risk-sim-table { display: grid; gap: 8px; margin: 16px 0; }
.risk-sim-row { display: grid; grid-template-columns: 12px 1.1fr 1fr 1fr 1fr; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.risk-sim-row-head { color: var(--text-subtle); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; border-bottom: 2px solid var(--border); }
.risk-sim-dot { width: 10px; height: 10px; border-radius: 50%; }
.risk-sim-name { font-size: .84rem; font-weight: 750; color: var(--text); }
.risk-sim-row input { width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-weight: 800; }
.risk-sim-correlation { display: flex; align-items: center; gap: 10px; margin: 6px 0 18px; color: var(--text-muted); font-size: .8rem; font-weight: 750; }
.risk-sim-correlation input[type="range"] { flex: 1; max-width: 280px; }
.risk-sim-correlation output { min-width: 40px; color: var(--text); font-weight: 800; }
.risk-sim-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.risk-sim-summary article { display: grid; gap: 4px; padding: 12px; background: var(--surface-soft); border-radius: 9px; }
.risk-sim-summary span { color: var(--text-subtle); font-size: .7rem; font-weight: 750; }
.risk-sim-summary strong { color: var(--text); font-size: 1.05rem; }
.risk-sim-summary small { color: var(--text-subtle); font-size: .64rem; }

@media (max-width: 1100px) { .regime-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .risk-sim-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .regime-cards { grid-template-columns: 1fr; }
  .risk-sim-row { grid-template-columns: 1fr; gap: 6px; }
  .risk-sim-row-head { display: none; }
  .risk-sim-summary { grid-template-columns: 1fr; }
  .risk-sim-head { flex-direction: column; }
}

.pattern-verify-button { display:inline-flex; gap:7px; align-items:center; padding:10px 14px; color:#4c1d95; background:#f5f3ff; border:1px solid #ddd6fe; border-radius:9px; font-size:.82rem; font-weight:800; }.pattern-verify-button:hover { color:#fff; background:#7c3aed; }
.pattern-verify-modal-backdrop { position:fixed; z-index:1200; inset:0; display:none; place-items:center; padding:16px; background:rgba(15,23,42,.58); }.pattern-verify-modal-backdrop.show { display:grid; }
.pattern-verify-modal { width:95vw; max-width:95vw; height:95vh; max-height:95vh; overflow:auto; background:#fff; border-radius:16px; }
.pattern-verify-modal header { display:flex; justify-content:space-between; padding:20px 24px; border-bottom:1px solid #e2e8f0; }
.pattern-verify-modal header>div { display:flex; gap:12px; align-items:center; }
.pattern-verify-modal header span { display:grid; width:42px; height:42px; place-items:center; color:#fff; background:#7c3aed; border-radius:11px; font-size:1.1rem; }
.pattern-verify-modal h2 { margin:0; }.pattern-verify-modal header p { margin:3px 0 0; color:#64748b; font-size:.8rem; }
.pattern-verify-modal header>button { width:40px; height:40px; flex:0 0 auto; color:#64748b; border-radius:10px; font-size:1.2rem; }
.pattern-verify-tabs { display:flex; flex-wrap:wrap; gap:8px; padding:14px 24px 0; }
.pattern-verify-tabs button { padding:8px 11px; color:#5b21b6; background:#f5f3ff; border:1px solid #ddd6fe; border-radius:8px; font-size:.76rem; font-weight:800; }
.pattern-verify-tabs button.is-active { color:#fff; background:#7c3aed; border-color:#7c3aed; }
.pattern-verify-modal main { padding:16px 24px 22px; }
.pattern-verify-status { margin:0 0 10px; color:#475569; font-size:.78rem; }
.pattern-verify-chart-wrap { overflow:hidden; border:1px solid #ddd6fe; border-radius:11px; }.pattern-verify-chart-wrap canvas { display:block; width:100%; }
.pattern-verify-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px; }
.pattern-verify-summary article { display:flex; flex-direction:column; gap:5px; padding:12px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:9px; font-size:.76rem; color:#475569; }
.pattern-verify-summary strong { font-size:.92rem; color:#4c1d95; }
.pattern-verify-note { margin:14px 0 0; padding:10px 12px; color:#64748b; background:#f8fafc; border-radius:8px; font-size:.72rem; line-height:1.5; }
@media (max-width:640px) { .pattern-verify-modal header,.pattern-verify-modal main { padding-left:15px; padding-right:15px; }.pattern-verify-summary { grid-template-columns:1fr; } }

.momentum-picks-button { display:inline-flex; gap:7px; align-items:center; padding:10px 14px; color:#166534; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:9px; font-size:.82rem; font-weight:800; }.momentum-picks-button:hover { color:#fff; background:#16a34a; }
.momentum-picks-modal-backdrop { position:fixed; z-index:1200; inset:0; display:none; place-items:center; padding:16px; background:rgba(15,23,42,.58); }.momentum-picks-modal-backdrop.show { display:grid; }
.momentum-picks-modal { width:95vw; max-width:95vw; height:95vh; max-height:95vh; overflow:auto; background:#fff; border-radius:16px; }
.momentum-picks-modal>header { display:flex; justify-content:space-between; padding:20px 24px; border-bottom:1px solid #e2e8f0; }.momentum-picks-modal>header>div { display:flex; gap:12px; align-items:center; }
.momentum-picks-modal>header span { display:grid; width:42px; height:42px; place-items:center; color:#fff; background:#16a34a; border-radius:11px; font-size:1.1rem; }
.momentum-picks-modal h2 { margin:0; }.momentum-picks-modal>header p { margin:3px 0 0; color:#64748b; font-size:.8rem; }
.momentum-picks-modal>header>button { width:40px; height:40px; flex:0 0 auto; color:#64748b; border-radius:10px; font-size:1.2rem; }
.momentum-picks-select-row { display:flex; flex-direction:column; gap:6px; padding:14px 24px 0; }
.momentum-picks-select-row label { color:#166534; font-size:.76rem; font-weight:800; }
.momentum-picks-select-row select { padding:9px 11px; color:#14532d; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:8px; font-size:.82rem; font-weight:700; }
.momentum-picks-modal main { padding:16px 24px 22px; }.momentum-picks-status { margin:0 0 10px; color:#475569; font-size:.78rem; }
.momentum-picks-chart-wrap { overflow:hidden; border:1px solid #bbf7d0; border-radius:11px; }.momentum-picks-chart-wrap canvas { display:block; width:100%; }
.momentum-picks-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px; }
.momentum-picks-summary article { display:flex; flex-direction:column; gap:5px; padding:12px; color:#475569; background:#f8fafc; border:1px solid #e2e8f0; border-radius:9px; font-size:.78rem; }
.momentum-picks-summary strong { color:#0f172a; font-size:1rem; font-variant-numeric:tabular-nums; }.momentum-picks-summary strong.up { color:#dc2626; }.momentum-picks-summary strong.down { color:#2563eb; }
.momentum-picks-summary small,.momentum-picks-note { color:#64748b; font-size:.72rem; line-height:1.5; }
.momentum-picks-note { margin:14px 0 0; padding:10px 12px; background:#f8fafc; border-radius:8px; }
@media (max-width:640px) { .momentum-picks-modal>header,.momentum-picks-modal main,.momentum-picks-select-row { padding-left:15px; padding-right:15px; }.momentum-picks-summary { grid-template-columns:1fr; } }

.ipo-chart-button,.penny-stock-rally-button { display:inline-flex; gap:7px; align-items:center; padding:10px 14px; border-radius:9px; font-size:.82rem; font-weight:800; }
.ipo-chart-button { color:#4338ca; background:#eef2ff; border:1px solid #c7d2fe; }.ipo-chart-button:hover { color:#fff; background:#4f46e5; }
.penny-stock-rally-button { color:#9a3412; background:#fff7ed; border:1px solid #fed7aa; }.penny-stock-rally-button:hover { color:#fff; background:#ea580c; }
.ipo-chart-modal-backdrop,.penny-rally-modal-backdrop { position:fixed; z-index:1200; inset:0; display:none; place-items:center; padding:16px; background:rgba(15,23,42,.58); }
.ipo-chart-modal-backdrop.show,.penny-rally-modal-backdrop.show { display:grid; }
.ipo-chart-modal,.penny-rally-modal { width:95vw; max-width:95vw; height:95vh; max-height:95vh; overflow:auto; background:#fff; border-radius:16px; }
.ipo-chart-modal header,.penny-rally-modal header { display:flex; justify-content:space-between; padding:20px 24px; border-bottom:1px solid #e2e8f0; }
.ipo-chart-modal header>div,.penny-rally-modal header>div { display:flex; gap:12px; align-items:center; }
.ipo-chart-modal header span,.penny-rally-modal header span { display:grid; width:42px; height:42px; place-items:center; color:#fff; border-radius:11px; font-size:1.1rem; }
.ipo-chart-modal header span { background:#4f46e5; }.penny-rally-modal header span { background:#ea580c; }
.ipo-chart-modal h2,.penny-rally-modal h2 { margin:0; }.ipo-chart-modal header p,.penny-rally-modal header p { margin:3px 0 0; color:#64748b; font-size:.8rem; }
.ipo-chart-modal header>button,.penny-rally-modal header>button { width:40px; height:40px; flex:0 0 auto; color:#64748b; border-radius:10px; font-size:1.2rem; }
.ipo-chart-tabs,.penny-rally-tabs { display:flex; flex-wrap:wrap; gap:8px; padding:14px 24px 0; }
.ipo-chart-tabs button { padding:8px 12px; color:#4338ca; background:#eef2ff; border:1px solid #c7d2fe; border-radius:8px; font-size:.78rem; font-weight:800; }
.ipo-chart-tabs button.is-active { color:#fff; background:#4f46e5; border-color:#4f46e5; }
.penny-rally-tabs button { padding:8px 12px; color:#9a3412; background:#fff7ed; border:1px solid #fed7aa; border-radius:8px; font-size:.78rem; font-weight:800; }
.penny-rally-tabs button.is-active { color:#fff; background:#ea580c; border-color:#ea580c; }
.ipo-chart-modal main,.penny-rally-modal main { padding:16px 24px 22px; }
.ipo-chart-status,.penny-rally-status { margin:0 0 10px; color:#475569; font-size:.78rem; }
.ipo-chart-chart-wrap,.penny-rally-chart-wrap { overflow:hidden; border-radius:11px; }
.ipo-chart-chart-wrap { border:1px solid #c7d2fe; }.penny-rally-chart-wrap { border:1px solid #fed7aa; }
.ipo-chart-chart-wrap canvas,.penny-rally-chart-wrap canvas { display:block; width:100%; }
.ipo-chart-summary,.penny-rally-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:14px; }
.ipo-chart-summary article,.penny-rally-summary article { display:flex; flex-direction:column; gap:5px; padding:12px; color:#475569; background:#f8fafc; border:1px solid #e2e8f0; border-radius:9px; font-size:.78rem; }
.ipo-chart-summary strong,.penny-rally-summary strong { color:#0f172a; font-size:1rem; font-variant-numeric:tabular-nums; }
.ipo-chart-summary strong.up,.penny-rally-summary strong.up { color:#dc2626; }.ipo-chart-summary strong.down { color:#2563eb; }
.ipo-chart-summary small,.penny-rally-summary small { color:#94a3b8; font-size:.68rem; }
.ipo-chart-note,.penny-rally-note { margin:14px 0 0; padding:10px 12px; color:#64748b; background:#f8fafc; border-radius:8px; font-size:.72rem; line-height:1.5; }
@media (max-width:760px) { .ipo-chart-summary,.penny-rally-summary { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) { .ipo-chart-modal header,.ipo-chart-modal main,.ipo-chart-tabs,.penny-rally-modal header,.penny-rally-modal main,.penny-rally-tabs { padding-left:15px; padding-right:15px; } }