@import "tailwind-Z2g2O8P.css";
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=Manrope:wght@500;600;700&display=swap');

:root {
    --bg: #07111f;
    --bg-soft: #0a1728;
    --panel: #0d1b2d;
    --panel-2: #101f32;
    --line: #203148;
    --text: #f2f4ed;
    --muted: #8fa0b6;
    --green: #3dda8d;
    --green-deep: #173e32;
    --amber: #f2b84b;
    --red: #ff6b70;
    --blue: #6da5ff;
    --radius: 18px;
    font-family: "IBM Plex Sans Thai", system-ui, sans-serif;
    color: var(--text);
    background: var(--bg);
}

* { box-sizing: border-box; }
[x-cloak] { display: none !important; }
html { overflow-x:hidden; background: var(--bg); scroll-behavior: smooth; }
body { overflow-x:hidden; margin: 0; min-height: 100vh; background: radial-gradient(circle at 80% -10%, #16314a 0, transparent 35%), var(--bg); }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
.site-header { min-height: 76px; display: flex; align-items: center; gap: 32px; padding: 14px clamp(18px, 4vw, 64px); border-bottom: 1px solid rgba(255,255,255,.08); position: sticky; top: 0; z-index: 20; background: rgba(7,17,31,.88); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 12px; font-family: Manrope, sans-serif; font-weight: 700; letter-spacing: -.03em; }
.brand small { display: block; color: var(--muted); font-family: "IBM Plex Sans Thai"; font-size: 11px; font-weight: 500; letter-spacing: 0; }
.brand-mark { width: 34px; height: 34px; display: flex; align-items: flex-end; gap: 3px; padding: 7px; border-radius: 10px; background: var(--green); }
.brand-mark i { width: 5px; background: var(--bg); border-radius: 3px 3px 1px 1px; transform: skew(-13deg); }
.brand-mark i:nth-child(1) { height: 8px; }.brand-mark i:nth-child(2) { height: 14px; }.brand-mark i:nth-child(3) { height: 20px; }
.main-nav { display: flex; gap: 28px; margin-right: auto; color: #b6c1d0; font-size: 14px; }
.main-nav a { position:relative; padding:26px 0; }
.main-nav a::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--green); transform:scaleX(0); transition:.2s; }
.main-nav a:hover, .main-nav a.active, .text-link:hover { color: var(--green); }
.main-nav a.active::after { transform:scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 15px; font-size: 14px; }
.mobile-menu-toggle,.mobile-menu-close { display:none; width:42px; height:42px; padding:0; place-items:center; border:1px solid var(--line); border-radius:11px; color:var(--text); background:#0b1929; cursor:pointer; transition:.18s; }
.mobile-menu-toggle:hover,.mobile-menu-close:hover { border-color:var(--green); color:var(--green); background:rgba(61,218,141,.07); }
.mobile-menu-toggle svg,.mobile-menu-close svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.mobile-menu-backdrop,.mobile-navigation { display:none; }
.language-switch { display:flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.language-switch a { min-width:38px; padding:8px 9px; text-align:center; color:var(--muted); font:700 11px Manrope; transition:.15s; }
.language-switch a:hover { color:var(--text); background:rgba(255,255,255,.05); }
.language-switch a.active { background:var(--green); color:#06120d; }
.user-name { color: #c8d2df; }
.button { border: 0; border-radius: 12px; padding: 13px 20px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-weight: 700; color: #06120d; background: var(--green); transition: .2s ease; }
.button:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(61,218,141,.2); }
.button:active { transform: translateY(1px); box-shadow: none; }
.button:focus-visible,.password-toggle:focus-visible,.archetype-trigger:focus-visible,.choice input:focus-visible + span { outline:2px solid #8cf2c1; outline-offset:3px; }
.button:disabled { cursor:not-allowed; opacity:.45; transform:none; box-shadow:none; filter:saturate(.55); }
.button-secondary:hover { border-color:var(--green); color:var(--green); background:rgba(61,218,141,.05); }
.button-small { padding: 9px 14px; font-size: 13px; }
.button-secondary { color: var(--text); background: transparent; border: 1px solid var(--line); }
.button-block { width: 100%; }
.flash { margin: 16px auto; max-width: 1320px; padding: 13px 18px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.flash-success { border-color: var(--green); }.flash-error,.flash-danger { border-color: var(--red); }.flash-warning { border-color: var(--amber); }
.site-footer { max-width: 1320px; margin: 60px auto 0; padding: 24px; color: var(--muted); border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 13px; }

.landing { max-width: 1320px; margin: auto; padding: clamp(56px, 8vw, 112px) clamp(20px, 4vw, 64px); }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(40px, 7vw, 100px); min-height: 68vh; }
.hero h1 { font-family: Manrope, "IBM Plex Sans Thai"; font-size: clamp(48px, 7vw, 90px); line-height: .98; letter-spacing: -.065em; margin: 0 0 28px; max-width: 780px; }
.hero h1 span { color: var(--green); }
.hero p { color: #b5c1cf; font-size: clamp(17px, 2vw, 21px); line-height: 1.75; max-width: 640px; }
.hero-actions { display: flex; gap: 12px; margin-top: 34px; }
.hero-visual { min-height: 430px; position: relative; border: 1px solid var(--line); border-radius: 28px; overflow: hidden; background: linear-gradient(155deg,#13273c,#0a1625 60%); box-shadow: 0 45px 90px rgba(0,0,0,.35); }
.mini-chart { position:absolute; inset:60px 28px 100px; display:flex; align-items:flex-end; gap:7px; border-bottom:1px solid #2a3b51; }
.mini-chart i { flex:1; height:var(--h); background:linear-gradient(to top, transparent 0 42%, var(--c) 43% 58%, transparent 59%); border-left:2px solid var(--c); opacity:.86; }
.hero-visual-copy { position:absolute; left:28px; right:28px; bottom:25px; display:flex; justify-content:space-between; color:var(--muted); font-size:13px; }
.hero-visual-copy strong { color:var(--text); font-size:18px; display:block; }
.principles { margin-top: 96px; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.principle { padding:32px 30px 0 0; }
.principle b { color:var(--green); font-family:Manrope; font-size:13px; }
.principle h2 { font-size:21px; margin:12px 0 8px; }
.principle p { color:var(--muted); line-height:1.65; margin:0; }

/* Reference-led landing page */
.landing-reference {
    max-width: 1500px;
    padding: 24px clamp(24px, 4vw, 72px) 42px;
}
.landing-reference svg:not(.apexcharts-svg) { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reference-hero { display:grid; grid-template-columns:.95fr 1.05fr; gap:42px; align-items:center; min-height:470px; }
.reference-copy { padding:20px 0 8px 22px; }
.community-pill { display:inline-flex; align-items:center; gap:9px; border:1px solid rgba(34,214,158,.24); color:#d4e3e4; background:rgba(14,76,66,.22); border-radius:999px; padding:7px 13px; font-size:12px; margin-bottom:22px; }
.community-pill svg { width:17px; height:17px; color:#33dcaa; }
.community-pill span::first-letter { color:#fff; }
.reference-copy h1 { margin:0; font:700 clamp(39px,3.7vw,56px)/1.17 "IBM Plex Sans Thai",sans-serif; letter-spacing:-.045em; }
.reference-copy h1 span { color:#31d3a3; text-shadow:0 0 30px rgba(49,211,163,.12); }
.reference-copy > p { color:#b4c0ca; font-size:17px; line-height:1.85; margin:20px 0 25px; }
.reference-actions { display:flex; gap:18px; }
.reference-actions { flex-wrap:wrap; }
.reference-actions .button { min-width:220px; min-height:59px; font-size:16px; border-radius:10px; }
.reference-actions svg { width:21px; margin-right:11px; }
.reference-primary { background:linear-gradient(135deg,#2ad29d,#25bea4); color:white; box-shadow:0 15px 35px rgba(24,184,143,.18); }
.reference-secondary { border-color:#2a3b4f; color:#e6edf1; background:#071322; }
.reference-secondary svg { color:#30d5a3; }
.hero-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:27px; max-width:610px; }
.hero-benefits > div { display:flex; align-items:center; gap:10px; min-width:0; padding-right:16px; }
.hero-benefits > div + div { border-left:1px solid #203147; padding-left:20px; }
.hero-benefits svg { color:#28d9a7; width:25px; flex:0 0 auto; }
.hero-benefits span { color:#95a6b8; font-size:11px; line-height:1.5; }
.hero-benefits strong { display:block; color:#27d7a4; font-size:13px; }
.landing-chart-card { min-width:0; padding:18px 20px 15px; border:1px solid #26384d; border-radius:21px; background:linear-gradient(145deg,rgba(9,25,41,.98),rgba(4,16,29,.98)); box-shadow:0 28px 70px rgba(0,0,0,.27); }
.landing-chart-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.landing-chart-head strong { display:block; font:700 18px Manrope; }
.landing-chart-head span { color:#8ea0b4; font-size:12px; }
.preview-state { display:flex; align-items:center; gap:9px; border:1px solid #26394d; border-radius:8px; color:#e0e8ee; padding:8px 12px; font-size:12px; }
.preview-state svg { width:17px; height:17px; color:#31d8a8; }
.chart-zone-labels { display:grid; grid-template-columns:60% 40%; text-align:center; color:#9dadbc; font-size:11px; margin:0 0 5px; }
.chart-zone-labels strong { color:#dce5eb; }
.landing-chart-wrap { position:relative; height:170px; border:1px solid #1c2e41; border-radius:8px; overflow:hidden; background:#071524; }
#landing-price-chart { height:168px; width:64%; }
.hidden-zone { position:absolute; inset:0 0 0 60%; display:grid; place-items:center; color:#8290a0; background:linear-gradient(90deg,rgba(7,16,28,.72),rgba(7,16,28,.94)); border-left:1px dashed #78899a; }
.hidden-zone span { width:74px; height:74px; border:3px solid #536170; border-radius:50%; display:grid; place-items:center; font:700 35px Manrope; background:rgba(15,27,40,.65); }
.landing-indicator { position:relative; height:61px; margin-top:8px; border:1px solid #1c2e41; border-radius:7px; overflow:hidden; background:#071524; }
.landing-indicator label { position:absolute; z-index:2; top:5px; left:7px; font:500 10px Manrope; color:#c6d0d9; }
#landing-rsi-chart,#landing-macd-chart { height:58px; width:100%; }
.feature-rail { display:grid; grid-template-columns:repeat(5,1fr); margin-top:22px; padding:24px 17px; border:1px solid #1e3042; border-radius:17px; background:rgba(8,23,38,.72); }
.rail-item { display:flex; align-items:flex-start; gap:14px; padding:0 19px; min-width:0; }
.rail-item + .rail-item { border-left:1px solid #1d2d3e; }
.rail-icon { flex:0 0 auto; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:#0d2135; }
.rail-icon svg { width:28px; height:28px; }
.rail-target .rail-icon { color:#ff555f; }.rail-chart .rail-icon { color:#8088ff; }.rail-brain .rail-icon { color:#ba65ff; }.rail-trophy .rail-icon { color:#ffbd18; }.rail-book .rail-icon { color:#9c6cff; }
.rail-item h2 { color:#2cd6a4; font-size:14px; margin:1px 0 4px; white-space:nowrap; }
.rail-item p { color:#a7b3bf; font-size:11px; line-height:1.6; margin:0; }
.how-section { padding:22px 16px 8px; text-align:center; }
.how-section > h2 { font-size:27px; margin:0; }
.how-accent { width:38px; height:2px; background:#2ed4a4; margin:10px auto 18px; }
.steps-line { position:relative; display:grid; grid-template-columns:repeat(5,1fr); }
.steps-line::before { content:""; position:absolute; top:17px; left:10%; right:10%; border-top:1px dashed #183249; }
.step-item { position:relative; z-index:1; padding:0 20px; }
.step-number { width:36px; height:36px; display:grid; place-items:center; margin:0 auto 9px; border:1px solid #25c48e; border-radius:50%; color:#dffbf2; background:#0b593f; font:700 16px Manrope; box-shadow:0 0 0 5px #07111f; }
.step-icon { width:53px; height:53px; display:grid; place-items:center; margin:auto; border-radius:50%; background:#0c1b2b; }
.step-icon svg { width:29px; height:29px; color:#9476ff; }
.step-item:nth-child(2) .step-icon svg { color:#69afff; }.step-item:nth-child(3) .step-icon svg { color:#47dca7; }.step-item:nth-child(4) .step-icon svg { color:#ff6473; }.step-item:nth-child(5) .step-icon svg { color:#a87cff; }
.step-item h3 { font-size:16px; margin:8px 0 4px; }
.step-item p { color:#a3b0bd; font-size:12px; line-height:1.6; margin:0; }
.stats-rail { display:grid; grid-template-columns:repeat(5,1fr); margin-top:18px; border:1px solid #1d3042; border-radius:16px; background:rgba(7,22,36,.78); padding:19px 20px; }
.stats-rail > div { display:flex; align-items:center; justify-content:center; gap:16px; padding:0 18px; min-width:0; }
.stats-rail > div + div { border-left:1px solid #1d2e40; }
.stats-rail svg { color:#35d8a8; width:33px; height:33px; flex:0 0 auto; }
.stats-rail div:nth-child(2) svg { color:#7d8fff; }.stats-rail div:nth-child(4) svg { color:#f8b718; }.stats-rail div:nth-child(5) svg { color:#ffb414; }
.stats-rail span { color:#9daab8; font-size:11px; }
.stats-rail strong { color:#2cd4a3; display:block; font:700 23px Manrope; }
.button-login { background:transparent; color:#eef3f5; border:1px solid #405064; }

.arena-shell { max-width: 1500px; margin: auto; padding: 30px clamp(16px, 3vw, 46px) 80px; }
.mode-label { display:inline-flex; color:var(--green); border:1px solid rgba(61,218,141,.24); background:rgba(61,218,141,.07); border-radius:8px; padding:5px 10px; font-size:11px; margin-bottom:9px; }
.arena-topline { display:flex; justify-content:space-between; align-items:end; margin-bottom:20px; }
.arena-topline h1 { font:700 clamp(26px,3vw,38px)/1.1 Manrope; margin:0 0 6px; letter-spacing:-.04em; }
.subtle { color:var(--muted); font-size:13px; }
.progress { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13px; }
.progress-track { width:110px; height:4px; border-radius:5px; background:#1b2a3f; overflow:hidden; }
.progress-track i { display:block; height:100%; background:var(--green); }
.arena-member-progress { width:min(100%,500px); padding:15px 17px; border:1px solid var(--line); border-radius:14px; background:#0b1929; }
.arena-progress-heading,.arena-progress-copy { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.arena-progress-heading span { color:var(--green); font-size:11px; text-transform:uppercase; letter-spacing:.07em; }
.arena-progress-heading strong { font:700 18px Manrope; }
.arena-progress-copy { margin:8px 0 7px; color:var(--muted); font-size:11px; }
.arena-progress-copy b { color:var(--green); font:700 14px Manrope; }
.arena-member-progress-track { height:6px; overflow:hidden; border-radius:999px; background:#1b2a3f; }
.arena-member-progress-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#2ed47a,#68e8a5); }
.arena-member-progress>p { margin:9px 0 0; color:var(--muted); font-size:10px; }
.arena-member-progress>p strong { color:#dce5ec; margin-left:4px; }
.arena-scenario-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:12px 0 0; padding-top:11px; border-top:1px solid var(--line); }
.arena-scenario-facts div { min-width:0; }.arena-scenario-facts dt { color:var(--muted); font-size:9px; }.arena-scenario-facts dd { overflow:hidden; margin:3px 0 0; color:#dce5ec; font-size:11px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.arena-grid { display:grid; grid-template-columns:minmax(0,1fr) 370px; gap:18px; align-items:start; }
.chart-panel,.decision-panel,.metric-panel,.auth-card { border:1px solid var(--line); border-radius:var(--radius); background:rgba(13,27,45,.94); }
.chart-panel { padding:20px; overflow:hidden; }
.chart-header { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:10px; }
.asset-title { font:700 19px Manrope; }
.sector-label { color:var(--green); font-size:12px; }
.masked-date { font:600 12px Manrope; color:var(--muted); letter-spacing:.12em; }
.chart-stack { min-height:630px; }
#price-chart { min-height:355px; }
#volume-chart { min-height:95px; margin-top:-8px; }
.indicators { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); padding-top:8px; }
#rsi-chart,#macd-chart { min-height:135px; }
.hidden-mask-note { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; padding:8px 4px 0; }
.hidden-mask-note i { width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 5px rgba(242,184,75,.1); }
.decision-panel { padding:22px; position:sticky; top:98px; }
.decision-panel h2 { font-size:18px; margin:0 0 22px; }
.field-group { margin-bottom:22px; }
.field-group > label { display:block; color:#aab7c8; font-size:12px; font-weight:600; margin-bottom:10px; }
.choice-grid { display:grid; gap:8px; }
.choice-grid.four { grid-template-columns:repeat(4,1fr); }
.choice-grid.three { grid-template-columns:repeat(3,1fr); }
.choice { position:relative; }
.choice input { position:absolute; opacity:0; pointer-events:none; }
.choice span { min-height:42px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:10px; color:#b8c4d3; font:600 12px Manrope; cursor:pointer; transition:.15s; }
.choice input:checked + span { color:var(--green); border-color:var(--green); background:rgba(61,218,141,.08); box-shadow:inset 0 0 0 1px var(--green); }
.choice span:hover { border-color:#43617f; color:var(--text); background:rgba(255,255,255,.025); }
.choice span:active { transform:scale(.98); }
.reason-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.reason-grid .choice span { font-family:"IBM Plex Sans Thai"; }
.form-hint { color:var(--muted); font-size:11px; margin:-10px 0 18px; line-height:1.5; }

.play-shell { max-width:1400px; }
.play-card { border:1px solid var(--line); border-radius:20px; background:rgba(8,23,38,.96); overflow:hidden; }
.play-card { position:relative; }
.play-context { display:flex; justify-content:space-between; gap:24px; align-items:end; padding:20px 22px 13px; }
.scenario-meta { display:flex; gap:32px; }
.scenario-meta span { min-width:85px; }
.scenario-meta small { display:block; color:var(--muted); font-size:10px; }
.scenario-meta strong { display:block; margin-top:4px; font:600 12px Manrope; }
.play-chart-stage { position:relative; display:grid; grid-template-columns:70% 30%; min-height:420px; margin:0 20px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#081625; }
.visible-chart-column { min-width:0; overflow:hidden; }
.visible-chart-column #price-chart { min-height:325px; }
.visible-chart-column #volume-chart { min-height:92px; }
.future-mask { position:relative; border-left:1px dashed #7b8b9c; background:repeating-linear-gradient(135deg,rgba(16,31,47,.94) 0 12px,rgba(11,24,39,.96) 12px 24px); display:grid; place-items:center; }
.future-lock { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; color:#b3bfca; }
.future-lock svg { width:29px; height:29px; fill:none; stroke:#a9b8c5; stroke-width:1.6; margin-bottom:9px; }
.future-lock strong { width:76px; height:76px; border:3px solid #667687; border-radius:50%; display:grid; place-items:center; font:700 35px Manrope; margin-bottom:13px; }
.future-lock span { color:#e7edf1; font-weight:600; }
.future-lock small { color:var(--muted); margin-top:4px; }
.decision-cut-label { position:absolute; z-index:4; top:8px; left:70%; transform:translateX(-50%); color:var(--amber); background:#0c1a2b; border:1px solid #5d5130; padding:4px 8px; border-radius:6px; font-size:10px; white-space:nowrap; }
.play-indicators { margin:10px 20px 0; border:0; gap:10px; }
.play-indicators > div { border:1px solid var(--line); border-radius:10px; background:#081625; overflow:hidden; }
.decision-form { margin-top:14px; padding:18px 20px 20px; border-top:1px solid var(--line); }
.decision-form-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }
.decision-form-title h2 { margin:0; font-size:17px; }
.decision-form-title span { color:var(--muted); font-size:11px; }
.decision-fields { display:grid; grid-template-columns:1.1fr 1.1fr 1fr 1.3fr; gap:18px; align-items:end; }
.decision-fields .field-group { margin:0; }
.decision-select { width:100%; height:42px; border:1px solid var(--line); border-radius:10px; background:#091522; color:#c7d1dc; padding:0 12px; }
.decision-select:hover,.decision-select:focus { border-color:var(--green); outline:none; }
.decision-submit { display:flex; align-items:center; gap:20px; margin-top:20px; }
.decision-submit .button { min-width:285px; }
.decision-submit p { color:var(--muted); font-size:11px; margin:0; }
.submit-decision-button { gap:9px; }
.button-spinner { width:17px; height:17px; border:2px solid rgba(6,18,13,.3); border-top-color:#06120d; border-radius:50%; animation:spin .75s linear infinite; }
.decision-loading-overlay { position:absolute; inset:0; z-index:12; display:grid; place-items:center; padding:20px; background:rgba(4,13,24,.62); backdrop-filter:blur(2px); }
.loading-score-card { display:flex; align-items:center; gap:14px; max-width:420px; padding:20px 24px; border:1px solid rgba(61,218,141,.4); border-radius:15px; background:#0b1b2b; box-shadow:0 22px 65px rgba(0,0,0,.45); }
.loading-score-card strong { font-size:15px; }
.loading-orbit { width:30px; height:30px; flex:0 0 auto; border:3px solid rgba(61,218,141,.2); border-top-color:var(--green); border-radius:50%; animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.result-hero { display:grid; grid-template-columns:1fr auto; gap:30px; align-items:end; margin-bottom:22px; }
.result-score { width:130px;height:130px;border-radius:50%;display:grid;place-items:center;border:8px solid var(--green-deep);outline:2px solid var(--green); }
.result-score strong { font:700 38px Manrope; }.result-score small { display:block;text-align:center;color:var(--muted);font-size:10px; }
.result-meta { display:flex;gap:24px;flex-wrap:wrap;color:var(--muted);font-size:13px; }
.result-meta strong { color:var(--text);display:block;font:600 15px Manrope; }
.outcome-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0; }
.outcome { padding:16px;border-top:1px solid var(--line); }
.outcome span { color:var(--muted);font-size:11px;display:block; }.outcome strong { font:700 21px Manrope; }
.positive { color:var(--green)!important; }.negative { color:var(--red)!important; }
.learning-note { padding:20px;border-left:3px solid var(--amber);background:#122033;color:#cbd4df;line-height:1.7;border-radius:0 12px 12px 0; }
.lesson-card { margin-top:20px; padding:24px; border:1px solid #31445b; border-radius:16px; background:linear-gradient(145deg,#102238,#0a1828); }
.lesson-card-header { display:flex; justify-content:space-between; gap:24px; align-items:start; padding-bottom:17px; border-bottom:1px solid var(--line); }
.lesson-card-header span { color:var(--green); font-size:11px; text-transform:uppercase; letter-spacing:.07em; }
.lesson-card-header h2 { margin:5px 0 0; font-size:22px; }
.lesson-card-header > strong { color:var(--green); font:700 22px Manrope; text-align:right; }
.lesson-card-header small { display:block; color:var(--muted); font:500 10px "IBM Plex Sans Thai"; }
.lesson-paragraphs { padding:7px 0; }
.lesson-paragraphs p { color:#c2cdd7; line-height:1.75; margin:14px 0; }
.key-takeaway { padding:17px 19px; border-left:3px solid var(--amber); border-radius:0 10px 10px 0; background:rgba(242,184,75,.07); }
.key-takeaway h3 { color:var(--amber); font-size:14px; margin:0 0 8px; }
.key-takeaway ul { margin:0; padding-left:20px; color:#d6dde3; line-height:1.65; }
.result-actions { display:flex;gap:10px;justify-content:flex-end;margin-top:24px; }
.result-summary-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:1px; margin-top:18px; border:1px solid var(--line); border-radius:13px; overflow:hidden; background:var(--line); }
.result-summary-grid > div { background:#0b1929; padding:16px; }
.result-summary-grid span { display:block; color:var(--muted); font-size:10px; margin-bottom:5px; }
.result-summary-grid strong { font:700 17px Manrope; }

.dashboard { max-width:1320px;margin:auto;padding:52px clamp(18px,4vw,64px); }
.dashboard-heading { display:flex;justify-content:space-between;align-items:end;margin-bottom:30px; }
.dashboard-heading h1 { font:700 clamp(34px,5vw,58px) Manrope;margin:0;letter-spacing:-.055em; }
.archetype { color:var(--green);font:600 16px Manrope; }
.metrics-grid { display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line); }
.metric { padding:24px 20px; }
.metric span { color:var(--muted);font-size:12px;display:block;margin-bottom:8px; }
.metric strong { font:700 clamp(25px,3vw,36px) Manrope;letter-spacing:-.04em; }
.dashboard-lower { display:grid;grid-template-columns:1fr .85fr;gap:36px;margin-top:42px; }
.dashboard h2 { font-size:20px;margin:0 0 18px; }
.answer-row { display:grid;grid-template-columns:1fr 80px 90px 80px;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--line);font-size:13px; }
.answer-row span { color:var(--muted); }.answer-row strong { color:var(--green); }
.answer-row { transition:.15s; }
.answer-row:hover { padding-left:10px; padding-right:10px; background:rgba(61,218,141,.045); }
#learning-chart { min-height:280px; }
.scenario-progress-card { margin-top:24px; padding:20px; border:1px solid var(--line); border-radius:14px; background:#0b1929; }
.scenario-progress-card>div:first-child { display:flex; justify-content:space-between; align-items:center; color:var(--muted); }
.scenario-progress-card>div:first-child strong { color:var(--green); font:700 27px Manrope; }
.scenario-progress-copy { display:flex; justify-content:space-between; gap:15px; margin:13px 0 9px; font-size:13px; }
.scenario-progress-copy span { color:var(--green); }
.scenario-progress-track { height:9px; border-radius:999px; overflow:hidden; background:#17283b; }
.scenario-progress-track i { display:block; height:100%; background:linear-gradient(90deg,#2ed47a,#63e6a1); }
.data-availability { display:flex; align-items:center; gap:10px; width:max-content; max-width:100%; margin:0 0 28px auto; padding:10px 14px; border:1px solid rgba(61,218,141,.25); border-radius:10px; color:#b9c9d4; background:rgba(61,218,141,.06); font-size:12px; }
.data-availability svg { width:20px; height:20px; flex:0 0 auto; fill:none; stroke:var(--green); stroke-width:1.7; }
.archetype-disclosure { position:relative; }
.archetype-trigger { display:flex; align-items:center; gap:10px; padding:10px 13px; border:1px solid var(--line); border-radius:12px; color:var(--text); background:#0b1929; cursor:pointer; transition:.2s; }
.archetype-trigger:hover { border-color:var(--green); background:rgba(61,218,141,.06); }
.archetype-trigger > span { color:var(--muted); font-size:11px; }
.archetype-trigger strong { color:var(--green); font:600 15px Manrope; }
.archetype-trigger svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; transition:.2s; }
.archetype-trigger svg.rotated { transform:rotate(180deg); }
.archetype-details { position:absolute; z-index:10; top:calc(100% + 10px); right:0; width:min(420px,calc(100vw - 36px)); padding:19px; border:1px solid rgba(61,218,141,.35); border-radius:14px; background:#0c1b2d; box-shadow:0 22px 60px rgba(0,0,0,.42); }
.archetype-details strong { color:var(--green); }
.archetype-details p { color:#b8c5d0; line-height:1.7; font-size:13px; margin:8px 0 0; }

.auth-wrap { min-height:70vh;display:grid;place-items:center;padding:40px 18px; }
.auth-card { width:min(100%,450px);padding:32px; }
.auth-card h1 { font:700 32px Manrope;margin:0 0 8px;letter-spacing:-.04em; }
.auth-card > p { color:var(--muted);margin:0 0 26px; }
.form-row { margin-bottom:17px; }
.form-row label { display:block;color:#b4c0cf;font-size:12px;margin-bottom:7px; }
.form-control,.auth-card input { width:100%;background:#091522;border:1px solid var(--line);border-radius:11px;padding:12px 14px;color:var(--text);outline:none; }
.form-control:focus,.auth-card input:focus { border-color:var(--green); }
.auth-switch { color:var(--muted);font-size:13px;text-align:center;margin-top:20px; }.auth-switch a { color:var(--green); }
.form-errors { color:var(--red);font-size:12px; }
.registration-honeypot { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; opacity:0!important; pointer-events:none!important; }
.password-field { position:relative; }
.password-field input { padding-right:50px; }
.password-toggle { position:absolute; top:50%; right:7px; width:38px; height:38px; transform:translateY(-50%); display:grid; place-items:center; border:0; border-radius:9px; color:var(--muted); background:transparent; cursor:pointer; transition:.15s; }
.password-toggle:hover,.password-toggle:active { color:var(--green); background:rgba(61,218,141,.08); }
.password-toggle svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.guest-dashboard { min-height:62vh; display:grid; place-items:center; align-content:center; text-align:center; }
.guest-dashboard-icon { width:86px; height:86px; border-radius:50%; display:grid; place-items:center; color:var(--green); background:var(--panel); border:1px solid var(--line); }
.guest-dashboard-icon svg { width:46px; height:46px; fill:none; stroke:currentColor; stroke-width:1.5; }
.guest-dashboard h1 { font:700 38px Manrope; margin:22px 0 10px; }
.guest-dashboard p { color:var(--muted); max-width:530px; margin:0 0 24px; }
.guest-dashboard > div:last-child { display:flex; gap:10px; }

.content-page { max-width:1320px; margin:auto; padding:54px clamp(18px,4vw,60px) 80px; }
.page-hero { min-height:250px; display:flex; align-items:center; }
.page-hero h1,.page-heading h1 { font:700 clamp(38px,5vw,62px)/1.05 Manrope,"IBM Plex Sans Thai"; letter-spacing:-.05em; margin:0 0 12px; }
.page-hero p,.page-heading p { color:#aab7c5; font-size:17px; line-height:1.7; max-width:670px; margin:0; }
.page-hero.centered { justify-content:center; text-align:center; }
.about-hero { display:grid; grid-template-columns:1fr .65fr; gap:50px; }
.about-visual { height:230px; position:relative; display:grid; place-items:center; color:var(--green); }
.about-visual svg { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:rgba(61,218,141,.55); stroke-width:4; }
.chess-piece { font-size:120px; color:#b9d5c9; text-shadow:0 0 30px rgba(61,218,141,.35); }
.about-story-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.about-story-grid article,.about-training,.mission-grid article,.leader-table-wrap,.podium-card,.instruction-list article { border:1px solid var(--line); background:rgba(11,26,43,.82); border-radius:16px; }
.about-trust-strip { display:grid; grid-template-columns:repeat(4,1fr); margin:0 0 24px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#0b1929; }
.about-trust-strip div { padding:22px; text-align:center; }.about-trust-strip div+div { border-left:1px solid var(--line); }
.about-trust-strip strong { display:block; color:var(--green); font:700 28px Manrope; }.about-trust-strip span { color:var(--muted); font-size:11px; }
.about-identity-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }
.about-identity-grid article,.about-principles,.about-contact-grid article { padding:28px; border:1px solid var(--line); border-radius:16px; background:#0b1929; }
.about-identity-grid article>span { color:var(--green); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.about-identity-grid h2,.about-principles h2,.about-contact-grid h2 { margin:8px 0 15px; font-size:25px; }
.about-identity-grid p,.about-principles p,.about-contact-grid p { color:#b8c5d0; line-height:1.75; }
.company-about-page p,.company-about-page blockquote { overflow-wrap:anywhere; }
.about-creator-card blockquote { margin:22px 0; padding:18px 20px; border-left:3px solid var(--green); border-radius:0 10px 10px 0; color:#e6edf2; background:rgba(61,218,141,.06); line-height:1.8; }
.about-principles { display:grid; grid-template-columns:.7fr 1.3fr; gap:45px; margin-top:18px; }
.about-principles ol { margin:0; padding:0; list-style:none; }
.about-principles li { display:flex; align-items:center; gap:15px; padding:13px 0; border-bottom:1px solid var(--line); }
.about-principles li span { color:var(--green); font:700 12px Manrope; }
.about-contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }
.about-contact-grid dl { margin:0; }.about-contact-grid dl div { display:grid; grid-template-columns:100px 1fr; gap:15px; padding:11px 0; border-top:1px solid var(--line); }
.about-contact-grid dt { color:var(--muted); font-size:11px; }.about-contact-grid dd { margin:0; }.about-contact-grid a { color:var(--green); }
.about-story-grid article { padding:24px; }
.about-story-grid article > span { color:var(--green); font:700 12px Manrope; }
.about-story-grid h2,.about-training h2,.mission-grid h2 { font-size:20px; margin:12px 0 8px; }
.about-story-grid p,.mission-grid p { color:var(--muted); line-height:1.7; margin:0; }
.about-training { margin-top:16px; padding:24px; }
.about-training > div { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.about-training span { color:#b8c4d0; font-size:13px; display:flex; gap:8px; }
.about-training i { color:var(--green); font-style:normal; }
.mission-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.mission-grid article { padding:25px; }
.disclaimer-card { border-color:#5e4d29!important; }
.page-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:28px; }
.leader-tabs { display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.leader-tabs a { padding:10px 22px; color:var(--muted); font-size:12px; }
.leader-tabs a:hover { color:var(--text); background:rgba(255,255,255,.04); }
.leader-tabs a.active { background:rgba(61,218,141,.13); color:var(--green); box-shadow:inset 0 -2px var(--green); }
.podium { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:16px; }
.podium-card { padding:22px; text-align:center; }
.podium-card.rank-1 { order:2; border-color:rgba(61,218,141,.55); transform:translateY(-8px); }
.podium-card.rank-2 { order:1; }.podium-card.rank-3 { order:3; }
.podium-card .medal { font-size:30px; }.podium-card span,.podium-card small { color:var(--muted); display:block; }
.podium-card h2 { margin:7px 0; }.podium-card strong { color:var(--green); font:700 32px Manrope; }
.podium-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; padding-top:13px; border-top:1px solid var(--line); }
.podium-stats span { font-size:10px; }
.podium-stats b { display:block; color:var(--text); font:700 14px Manrope; margin-bottom:2px; }
.leader-table-wrap { overflow:auto; }
.leader-table { width:100%; border-collapse:collapse; min-width:760px; }
.leader-table th,.leader-table td { padding:15px 18px; border-bottom:1px solid var(--line); text-align:left; font-size:13px; }
.leader-table th { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.leader-table td strong { color:var(--green); }
.rank-badge,.player-avatar { width:28px; height:28px; border-radius:50%; display:inline-grid; place-items:center; background:#17283b; margin-right:9px; font:700 11px Manrope; }
.leader-table td small { color:var(--muted); margin-left:8px; }
.you-row td { background:rgba(61,218,141,.06); }
.table-note { color:var(--muted); text-align:center; font-size:11px; }
.instruction-list { max-width:850px; margin:0 auto; display:grid; gap:11px; }
.instruction-list article { display:flex; gap:20px; align-items:center; padding:18px 22px; }
.instruction-number { width:42px; height:42px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:var(--green-deep); color:var(--green); font:700 15px Manrope; }
.instruction-list h2 { margin:0; font-size:17px; }
.instruction-list p { color:var(--muted); margin:4px 0 0; font-size:12px; }
.page-cta { text-align:center; margin-top:25px; }
.adsense-horizontal { min-height:90px; margin:22px 0; overflow:hidden; border:1px dashed rgba(143,160,182,.22); border-radius:12px; background:rgba(11,25,41,.45); }

/* Guest / member home experiences */
.home-experience { max-width:1320px; margin:auto; padding:clamp(42px,6vw,80px) clamp(18px,4vw,60px) 80px; }
.guest-home-hero { display:grid; grid-template-columns:1fr .9fr; gap:70px; align-items:center; min-height:470px; }
.guest-hero-copy h1 { font:700 clamp(52px,7vw,86px)/1 Manrope; letter-spacing:-.065em; margin:0 0 24px; }
.guest-hero-copy p { max-width:630px; color:#b8c4d0; font-size:clamp(18px,2vw,22px); line-height:1.7; }
.guest-hero-actions { display:flex; gap:12px; margin-top:30px; }
.home-primary-cta { min-width:220px; }
.guest-market-preview { overflow:hidden; border:1px solid var(--line); border-radius:20px; background:#0b1929; box-shadow:0 28px 80px rgba(0,0,0,.25); }
.guest-market-preview #landing-price-chart { width:100%; height:280px; }
.preview-top,.preview-bottom { display:flex; justify-content:space-between; gap:15px; padding:17px 20px; color:var(--muted); font-size:12px; }
.preview-top b { color:var(--amber); text-transform:uppercase; }.preview-bottom span { color:var(--green); }.preview-bottom strong { color:#c8d3dd; }
.guest-trust-strip { display:grid; grid-template-columns:repeat(4,1fr); margin:35px 0 75px; border-block:1px solid var(--line); }
.guest-trust-strip div { padding:25px; text-align:center; }.guest-trust-strip div+div { border-left:1px solid var(--line); }
.guest-trust-strip strong { display:block; color:var(--green); font:700 29px Manrope; }.guest-trust-strip span { color:var(--muted); font-size:12px; }
.home-section-heading { text-align:center; margin-bottom:28px; }.home-section-heading h2 { font-size:31px; margin:0 0 7px; }.home-section-heading p { color:var(--muted); margin:0; }
.guest-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.guest-steps article { padding:24px; border:1px solid var(--line); border-radius:14px; background:#0b1929; }
.guest-steps article>span { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:#07111f; background:var(--green); font-weight:700; }
.guest-steps h3 { margin:22px 0 0; font-size:17px; }
.guest-discovery-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:18px; margin-top:60px; }
.today-challenge-card,.home-leaderboard-preview,.member-progress-panel,.member-archetype-card,.member-performance-card,.member-daily-card { padding:25px; border:1px solid var(--line); border-radius:16px; background:#0b1929; }
.today-challenge-card>span,.member-archetype-card>span,.member-daily-card>span { color:var(--green); font-size:11px; text-transform:uppercase; letter-spacing:.07em; }
.today-challenge-card h2 { margin:9px 0 25px; }.today-challenge-card dl { display:grid; grid-template-columns:1fr 1fr; margin:0 0 25px; }
.today-challenge-card dt { color:var(--muted); font-size:11px; }.today-challenge-card dd { margin:5px 0 0; font-weight:700; }
.preview-heading { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:15px; }.preview-heading h2 { margin:0; font-size:20px; }.preview-heading a,.preview-heading span { color:var(--green); font-size:12px; }
.preview-rank { display:grid; grid-template-columns:45px 1fr auto; gap:12px; padding:16px 0; border-bottom:1px solid var(--line); }.preview-rank span { color:var(--muted); }.preview-rank b { color:var(--green); }
.member-welcome { display:grid; grid-template-columns:1fr auto; gap:50px; align-items:end; margin-bottom:36px; }.member-welcome>div>span { color:var(--green); }.member-welcome h1 { font:700 clamp(45px,6vw,72px)/1 Manrope; letter-spacing:-.055em; margin:8px 0 13px; }.member-welcome p { color:var(--muted); font-size:17px; }
.member-cta-stack { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }.member-primary { min-width:190px; }
.member-progress-panel { margin-bottom:18px; }.member-progress-value,.member-progress-copy { display:flex; justify-content:space-between; align-items:center; gap:15px; }.member-progress-value span,.member-progress-copy span { color:var(--muted); }.member-progress-value strong { color:var(--green); font:700 34px Manrope; }.member-progress-value small { color:var(--muted); font-size:17px; }.member-progress-copy { margin:15px 0 9px; font-size:13px; }.member-progress-copy b { color:var(--green); }
.member-progress-track { height:10px; border-radius:999px; background:#17283b; overflow:hidden; }.member-progress-track i { display:block; height:100%; background:linear-gradient(90deg,#2ed47a,#68e8a5); }
.member-insight-grid { display:grid; grid-template-columns:1fr 1.25fr .8fr; gap:18px; }.member-archetype-card h2,.member-daily-card h2 { margin:8px 0 20px; font-size:25px; }.member-archetype-card>div { margin:14px 0; }.member-archetype-card b { color:var(--muted); font-size:11px; }.member-archetype-card p { margin:4px 0; }.member-archetype-card .text-link { color:var(--green); display:inline-block; margin-top:10px; }
.performance-metrics { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; }.performance-metrics div { background:#0b1929; padding:19px; }.performance-metrics span { color:var(--muted); font-size:11px; display:block; }.performance-metrics strong { font:700 27px Manrope; color:var(--green); }
.member-daily-card>p { color:var(--muted); font-size:12px; }.member-daily-card>div { display:flex; justify-content:space-between; margin:24px 0; }.member-daily-card>div span { color:var(--muted); font-size:11px; }.member-daily-card>div strong { color:var(--green); }
.member-quick-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px; }.member-quick-actions a { display:flex; align-items:center; gap:12px; padding:18px; border:1px solid var(--line); border-radius:13px; background:#0b1929; transition:.2s; }.member-quick-actions a:hover { border-color:var(--green); color:var(--green); transform:translateY(-2px); }.member-quick-actions span { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#14283d; }
.conversion-modal-backdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:rgba(2,8,16,.78); backdrop-filter:blur(7px); }
.conversion-modal { position:relative; width:min(100%,500px); padding:34px; border:1px solid rgba(61,218,141,.4); border-radius:20px; background:#0c1b2d; box-shadow:0 35px 100px rgba(0,0,0,.55); }.conversion-close { position:absolute; top:13px; right:15px; border:0; background:transparent; color:var(--muted); font-size:26px; cursor:pointer; }.conversion-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:50%; color:#06120d; background:var(--green); font-size:24px; font-weight:700; }.conversion-modal h2 { font-size:27px; margin:19px 0 8px; }.conversion-modal p { color:var(--muted); }.conversion-modal ul { padding-left:21px; line-height:1.9; margin:18px 0 25px; }

/* Member analytics and history */
.analytics-dashboard,.history-page { max-width:1320px; margin:auto; padding:48px clamp(18px,4vw,60px) 80px; }
.analytics-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.analytics-heading h1 { margin:0; font:700 clamp(38px,5vw,60px)/1.05 Manrope,"IBM Plex Sans Thai"; letter-spacing:-.05em; }
.analytics-heading p { margin:10px 0 0; color:var(--muted); }
.analytics-period { padding:9px 14px; border:1px solid var(--line); border-radius:10px; color:var(--green); background:#0b1929; font-size:12px; }
.analytics-summary { display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid var(--line); margin-bottom:26px; }
.analytics-summary article { padding:22px 20px; }.analytics-summary article+article { border-left:1px solid var(--line); }
.analytics-summary span,.analytics-summary small { display:block; color:var(--muted); font-size:11px; }
.analytics-summary strong { display:block; margin:5px 0 2px; color:var(--green); font:700 32px Manrope; }
.analytics-panel { padding:23px; border:1px solid var(--line); border-radius:16px; background:rgba(11,25,41,.92); }
.analytics-grid-main { display:grid; grid-template-columns:1.7fr .7fr; gap:18px; }
.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.panel-heading h2 { margin:0; font-size:20px; }.panel-heading p { margin:5px 0 0; color:var(--muted); font-size:12px; }
.chart-legend { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:11px; }.chart-legend i { width:9px; height:9px; border-radius:50%; background:var(--green); }
.progress-analytics>span,.archetype-analytics>span { color:var(--green); font-size:11px; text-transform:uppercase; letter-spacing:.07em; }
.progress-analytics>strong { display:block; margin:16px 0 0; font:700 34px Manrope; }.progress-analytics>strong small { color:var(--muted); font-size:15px; }
.progress-percent { margin:22px 0 8px; color:var(--green); font:700 25px Manrope; }
.progress-analytics>p { margin:17px 0 0; color:#c5d0da; font-size:12px; line-height:1.6; }
.quality-breakdown { margin-top:18px; }
.quality-score-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-top:23px; }
.quality-score span { display:block; min-height:32px; color:var(--muted); font-size:11px; }.quality-score strong { font:700 27px Manrope; }
.quality-score>div,.result-breakdown-grid>div>div { height:5px; margin-top:9px; overflow:hidden; border-radius:999px; background:#182a3d; }
.quality-score i,.result-breakdown-grid i { display:block; height:100%; background:var(--green); }
.analytics-grid-lower { display:grid; grid-template-columns:1.65fr .65fr; gap:18px; }
.analytics-grid-main>*,.analytics-grid-lower>* { min-width:0; }
.scenario-table-wrap { overflow-x:auto; margin-top:12px; }
.scenario-history-table { width:100%; border-collapse:collapse; min-width:660px; }
.scenario-history-table th { padding:12px 10px; border-bottom:1px solid var(--line); color:var(--muted); font-size:10px; text-align:left; text-transform:uppercase; letter-spacing:.05em; }
.scenario-history-table td { padding:14px 10px; border-bottom:1px solid rgba(37,55,77,.75); font-size:12px; }
.row-expand { width:30px; height:30px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:#0a1726; cursor:pointer; }
.row-expand:hover { border-color:var(--green); color:var(--green); }
.score-detail-row td { padding:0 10px 13px; background:rgba(61,218,141,.035); }
.score-detail-row td>div,.history-breakdown td>div { display:flex; flex-wrap:wrap; gap:15px 24px; padding:12px; color:var(--muted); }.score-detail-row b,.history-breakdown b { color:var(--text); margin-left:4px; }
.score-detail-row a { margin-left:auto; color:var(--green); }
.history-mobile-link { display:none; margin-top:15px; }
.archetype-analytics h2 { margin:10px 0; font-size:27px; }.archetype-analytics>p { color:#b9c6d1; line-height:1.7; font-size:12px; }
.behavior-signals { margin-top:22px; }.behavior-signals div { display:flex; justify-content:space-between; padding:12px 0; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }.behavior-signals b { color:var(--green); }
.learning-tooltip { min-width:210px; display:grid; gap:7px; padding:13px 15px; color:#b8c5d0; background:#0b1929; border:1px solid #29445c; box-shadow:0 15px 40px rgba(0,0,0,.35); }
.learning-tooltip strong { color:var(--green); font-size:13px; }.learning-tooltip span { display:flex; justify-content:space-between; gap:15px; font-size:11px; }.learning-tooltip b { color:#f2f5f7; }
.history-page .analytics-heading { align-items:flex-start; }.history-page .analytics-heading h1 { margin-top:16px; }
.history-filters { display:flex; width:max-content; margin-bottom:18px; padding:4px; border:1px solid var(--line); border-radius:11px; background:#0b1929; }
.history-filters a { padding:9px 15px; border-radius:8px; color:var(--muted); font-size:12px; }.history-filters a.active { color:#07111f; background:var(--green); font-weight:700; }
.full-history-table { min-width:900px; }.history-breakdown td { padding-top:0; color:var(--muted); }
.pagination { display:flex; justify-content:center; align-items:center; gap:18px; margin-top:24px; }.pagination a { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; color:var(--green); }
.score-breakdown-card { margin:20px 0; padding:23px; border:1px solid rgba(61,218,141,.3); border-radius:16px; background:linear-gradient(145deg,#102238,#0a1828); }
.score-breakdown-card .panel-heading>strong { color:var(--green); font:700 25px Manrope; }
.result-breakdown-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:23px; }
.result-breakdown-grid span { display:block; color:var(--muted); font-size:11px; }.result-breakdown-grid strong { display:block; margin-top:5px; font:700 28px Manrope; }
.result-breakdown-grid p { color:#aebbc7; font-size:11px; line-height:1.55; }
.last-scenario { display:flex; align-items:center; gap:13px; width:max-content; max-width:100%; margin-top:20px; padding:12px 15px; border:1px solid var(--line); border-radius:12px; background:#0b1929; }
.last-scenario span,.last-scenario small { color:var(--muted); font-size:11px; }.last-scenario strong { color:var(--green); font-size:13px; }
.member-progress-facts { display:flex; gap:28px; margin-top:15px; color:var(--muted); font-size:12px; }.member-progress-facts b { color:var(--text); margin-left:5px; }

@media (max-width: 1000px) {
    .site-header { flex-wrap:wrap; }
    .main-nav { order:3; width:100%; display:flex; overflow-x:auto; gap:22px; }
    .main-nav a { padding:9px 0 12px; white-space:nowrap; }
    .arena-grid { grid-template-columns:1fr; }
    .decision-panel { position:static; }
    .chart-stack { min-height:560px; }
    .hero { grid-template-columns:1fr; }
    .hero-visual { min-height:380px; }
    .metrics-grid { grid-template-columns:repeat(2,1fr); }
    .reference-hero { grid-template-columns:1fr; }
    .reference-copy { padding-left:0; text-align:center; }
    .reference-copy > p { margin-left:auto; margin-right:auto; }
    .reference-actions,.hero-benefits { justify-content:center; margin-left:auto; margin-right:auto; }
    .feature-rail { grid-template-columns:repeat(2,1fr); gap:24px 0; }
    .rail-item + .rail-item { border-left:0; }
    .rail-item:nth-child(even) { border-left:1px solid #1d2d3e; }
    .steps-line,.stats-rail { grid-template-columns:repeat(2,1fr); gap:28px 0; }
    .steps-line::before { display:none; }
    .stats-rail > div + div { border-left:0; }
    .decision-fields { grid-template-columns:1fr 1fr; }
    .about-story-grid { grid-template-columns:1fr; }
    .about-identity-grid,.about-principles,.about-contact-grid { grid-template-columns:1fr; }
    .about-training > div { grid-template-columns:1fr 1fr; }
    .result-summary-grid { grid-template-columns:repeat(3,1fr); }
    .dashboard-heading { align-items:flex-start; gap:18px; }
    .guest-home-hero,.member-insight-grid { grid-template-columns:1fr; }
    .guest-trust-strip { grid-template-columns:1fr 1fr; }.guest-trust-strip div:nth-child(3) { border-left:0; }.guest-trust-strip div:nth-child(n+3) { border-top:1px solid var(--line); }
    .guest-discovery-grid { grid-template-columns:1fr; }
    .member-welcome { grid-template-columns:1fr; align-items:start; }.member-cta-stack { justify-content:flex-start; }
    .analytics-grid-main,.analytics-grid-lower { grid-template-columns:1fr; }
    .quality-score-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 650px) {
    .site-header { min-height:70px; flex-wrap:nowrap; padding:12px 16px; gap:10px; }
    .brand { min-width:0; }.brand>span:last-child { white-space:nowrap; }
    .brand small,.user-name,.header-actions>.button,.header-actions>.text-link { display:none; }
    .main-nav { display:none; }
    .header-actions { margin-left:auto; gap:8px; }
    .language-switch a { min-width:34px; padding:7px; }
    .mobile-menu-toggle,.mobile-menu-close { display:grid; flex:0 0 auto; }
    .mobile-menu-backdrop { display:block; position:fixed; z-index:90; inset:0; background:rgba(2,8,16,.72); backdrop-filter:blur(4px); }
    .mobile-navigation { display:flex; position:fixed; z-index:100; inset:0 0 0 auto; width:min(88vw,360px); height:100dvh; padding:18px; flex-direction:column; overflow-y:auto; border-left:1px solid #29405a; background:#081625; box-shadow:-24px 0 70px rgba(0,0,0,.48); }
    .mobile-navigation-head { display:flex; align-items:center; justify-content:space-between; gap:15px; padding-bottom:18px; border-bottom:1px solid var(--line); }
    .mobile-navigation-head .brand-mark { width:32px; height:32px; }
    .mobile-navigation-links { display:grid; padding:13px 0; }
    .mobile-navigation-links a { position:relative; min-height:48px; display:flex; align-items:center; padding:10px 13px; border-radius:10px; color:#c6d1dc; font-weight:600; }
    .mobile-navigation-links a:hover,.mobile-navigation-links a.active { color:var(--green); background:rgba(61,218,141,.07); }
    .mobile-navigation-links a.active::before { content:""; position:absolute; left:0; width:3px; height:22px; border-radius:3px; background:var(--green); }
    .mobile-navigation-language { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:16px 2px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
    .mobile-navigation-actions { display:grid; gap:10px; margin-top:auto; padding-top:18px; border-top:1px solid var(--line); }
    .mobile-navigation-actions .button { display:flex; width:100%; min-height:48px; }
    .mobile-member-name { overflow:hidden; padding:0 2px 6px; color:var(--muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
    .mobile-logout { color:#06120d; }
    .mobile-drawer-enter,.mobile-drawer-leave { transition:transform .22s ease,opacity .22s ease; }
    .mobile-drawer-enter-start,.mobile-drawer-leave-end { transform:translateX(100%); opacity:.75; }
    .mobile-drawer-enter-end,.mobile-drawer-leave-start { transform:translateX(0); opacity:1; }
    .landing { padding-top:60px; }
    .hero { min-height:auto; }
    .hero h1 { font-size:50px; }
    .hero-actions { flex-direction:column; }
    .principles { grid-template-columns:1fr; }
    .hero-visual { min-height:310px; }
    .arena-topline { align-items:start; }
    .chart-panel { padding:12px; }
    .chart-stack { min-height:510px; }
    #price-chart { min-height:290px; }
    .indicators { grid-template-columns:1fr; }
    .indicators > div:last-child { display:none; }
    .outcome-grid { grid-template-columns:1fr 1fr; }
    .result-hero { grid-template-columns:1fr; }
    .result-score { width:105px;height:105px; }
    .result-actions { flex-direction:column; }
    .dashboard-lower { grid-template-columns:1fr; }
    .answer-row { grid-template-columns:1fr 60px 60px; }
    .answer-row span { display:none; }
    .site-footer { flex-direction:column;gap:8px; }
    .landing-reference { padding:34px 16px; }
    .reference-copy { text-align:left; }
    .community-pill { font-size:10px; }
    .reference-copy h1 { font-size:38px; line-height:1.2; }
    .reference-copy > p { font-size:15px; }
    .reference-copy > p br { display:none; }
    .reference-actions { flex-direction:column; }
    .reference-actions .button { width:100%; }
    .hero-benefits { grid-template-columns:1fr; gap:14px; }
    .hero-benefits > div + div { border-left:0; padding-left:0; }
    .landing-chart-card { padding:14px 10px; }
    .landing-chart-head strong { font-size:15px; }
    .feature-rail { grid-template-columns:1fr; padding:22px 6px; }
    .rail-item,.rail-item:nth-child(even) { border-left:0; padding:0 16px; }
    .rail-item + .rail-item { border-top:1px solid #1d2d3e; padding-top:20px; }
    .steps-line,.stats-rail { grid-template-columns:1fr; }
    .step-item { padding-bottom:20px; }
    .stats-rail > div { justify-content:flex-start; }
    .stats-rail > div + div { border-top:1px solid #1d2e40; padding-top:18px; }
    .arena-topline { flex-direction:column; gap:15px; }
    .arena-member-progress,.guest-trial-progress { width:100%; }
    .guest-trial-progress { justify-content:space-between; }
    .guest-trial-progress .progress-track { flex:1; }
    .arena-scenario-facts { gap:8px; }
    .play-context { align-items:start; flex-direction:column; }
    .scenario-meta { display:grid; grid-template-columns:1fr 1fr; gap:12px 35px; }
    .play-chart-stage { grid-template-columns:72% 28%; min-height:350px; margin:0 10px; }
    .visible-chart-column #price-chart { min-height:260px; }
    .future-lock strong { width:55px; height:55px; font-size:25px; }
    .future-lock span { font-size:10px; padding:0 5px; }
    .future-lock small,.decision-cut-label { display:none; }
    .play-indicators { margin:9px 10px 0; }
    .play-indicators > div:last-child { display:block; }
    .decision-form { padding:16px 10px; }
    .decision-fields { grid-template-columns:1fr; }
    .decision-submit { flex-direction:column; align-items:stretch; }
    .decision-submit .button { min-width:0; width:100%; }
    .result-summary-grid { grid-template-columns:1fr 1fr; }
    .lesson-card { padding:18px; }
    .lesson-card-header { flex-direction:column; }
    .lesson-card-header > strong { text-align:left; }
    .about-hero { grid-template-columns:1fr; }
    .about-visual { height:160px; }
    .about-training > div,.mission-grid,.podium { grid-template-columns:1fr; }
    .about-trust-strip { grid-template-columns:1fr 1fr; }.about-trust-strip div:nth-child(3) { border-left:0; }.about-trust-strip div:nth-child(n+3) { border-top:1px solid var(--line); }
    .podium-card.rank-1 { order:1; transform:none; }.podium-card.rank-2 { order:2; }.podium-card.rank-3 { order:3; }
    .page-heading { align-items:start; flex-direction:column; }
    .leader-tabs { width:100%; }
    .leader-tabs a { flex:1; text-align:center; padding:10px 8px; }
    .guest-dashboard h1 { font-size:30px; }
    .guest-dashboard > div:last-child { flex-direction:column; width:100%; }
    .dashboard-heading { flex-direction:column; }
    .archetype-disclosure,.archetype-trigger { width:100%; }
    .archetype-trigger { justify-content:space-between; }
    .archetype-details { left:0; right:auto; }
    .data-availability { width:100%; margin-bottom:20px; }
    .adsense-horizontal { min-height:72px; margin:16px 0; }
    .home-experience { padding-top:38px; }
    .guest-home-hero { min-height:0; gap:34px; }.guest-hero-copy h1 { font-size:50px; }.guest-hero-actions,.member-cta-stack { flex-direction:column; }.guest-hero-actions .button,.member-cta-stack .button { width:100%; }
    .guest-trust-strip { margin:30px 0 50px; }.guest-trust-strip div { padding:20px 10px; }.guest-trust-strip strong { font-size:23px; }
    .guest-steps { grid-template-columns:1fr 1fr; }.guest-steps article { padding:18px; }
    .member-welcome h1 { font-size:44px; }.member-insight-grid,.member-quick-actions { grid-template-columns:1fr; }
    .member-progress-value { align-items:flex-start; flex-direction:column; }
    .conversion-modal { padding:27px 21px; }.conversion-modal h2 { font-size:23px; }
    .analytics-dashboard,.history-page { padding-top:34px; }
    .analytics-heading { align-items:flex-start; flex-direction:column; }
    .analytics-summary { grid-template-columns:1fr 1fr; }.analytics-summary article:nth-child(3) { border-left:0; }.analytics-summary article:nth-child(n+3) { border-top:1px solid var(--line); }
    .quality-score-grid,.result-breakdown-grid { grid-template-columns:1fr 1fr; }
    .analytics-panel { padding:17px; }
    .recent-scenarios-panel .panel-heading .text-link { display:none; }.history-mobile-link { display:block; }
    .last-scenario { align-items:flex-start; flex-direction:column; width:100%; }
    .member-progress-facts { align-items:flex-start; flex-direction:column; gap:8px; }
}

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