/* Shared alignment, readable type and matched light/dark surfaces. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html[data-theme="light"] { color-scheme: light; --muted:#52657c; --td-copy:#52657c; --accent2:#00735b; }
html[data-theme="dark"] { color-scheme: dark; --bg:#0d1828; --panel:#15253a; --panel2:#1c2f46; --text:#f0f5fc; --muted:#b3c2d4; --td-copy:#b3c2d4; --td-navy:#f0f5fc; --line:#3a506a; --td-border:#3a506a; --td-soft:#1c2f46; --accent2:#6ae3bf; }
.app { color:var(--text); }
.app main { min-width:0; width:100%; margin-inline:auto; }
.app :is(.page,.panel,.settings-content,.settings-layout,.profile-card,.profile-card>div,.account-grid,.account-side,.calc-form,.results,.home-lower>article) { min-width:0; }
.app .page-title { align-items:center; min-height:72px; margin-bottom:24px; }
.app .page-title h1 { margin:0 0 8px; }
.app .page-title p { margin:0; font-size:1rem; line-height:1.6; }
.app :is(.panel-head,.title-actions) { align-items:center; flex-wrap:wrap; }
.app :is(p,label) { line-height:1.6; }
.app :is(.calc-form label,.profile-card label,.settings label,.trade-form label) { font-size:.875rem; color:var(--text); display:flex; flex-direction:column; gap:8px; align-items:stretch; }
.app :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) { font-size:1rem; line-height:1.5; color:var(--text); background:var(--panel2); border:1px solid var(--line); border-radius:10px; min-width:0; max-width:100%; }
.app :is(input:not([type="checkbox"]):not([type="radio"]),select) { min-height:48px; padding:11px 12px; }
.app :is(input,textarea)::placeholder { color:var(--muted); opacity:1; }
.app :is(input[type="checkbox"],input[type="radio"]) { accent-color:var(--accent2); flex-shrink:0; min-width:20px; min-height:20px; }
.app :is(.primary,.outline,.asset-tabs button,.journal-tabs button,.settings-menu button,.calculator-chips button,.market-periods button,.calc-asset-tabs button,.ai-prompts button) { font-size:.875rem; min-height:44px; line-height:1.4; }
.app :is(.asset-tabs button,.journal-tabs button,.settings-menu button) { color:var(--muted); background:transparent; }
.app :is(.asset-tabs button.active,.journal-tabs button.active,.settings-menu button.active) { color:var(--accent2); background:color-mix(in srgb,var(--accent) 14%,var(--panel)); }
.app .primary { color:#063e32; background:var(--accent); }
.app .outline { color:var(--text); background:var(--panel); }
.app :is(.panel-head a,.panel-head>span,.calc-form small,.results>small,.live-strip small,.chart-market-watch small,.ai-chat-head p,.plan-card p,.plan-card li,.settings p) { font-size:.875rem; line-height:1.6; }
.app :is(.course-list small,.course-list i,.week span,.pro-overview .eyebrow,.pro-status,.header-plan-badge,.mini-stats span,.stat-card small,.event-row em,.connection-badge,.side-pro small) { font-size:.8125rem; line-height:1.5; }
.app .course-list>button { display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:16px; padding:22px; align-items:center; }
.app .course-list>button>span { width:48px; height:48px; }
.app .course-list>button b { display:block; line-height:1.45; }
.app .course-list>button small { display:block; }
.app .course-list>button i { max-width:90px; white-space:normal; text-align:center; }
.app #quick a { grid-template-columns:32px minmax(0,1fr); gap:4px 10px; padding:16px; }
.app #quick a small { font-size:.8125rem; line-height:1.4; }
.app #quick a i { width:32px; }
.app .home-lower { align-items:stretch; }
.app .home-lower>article { display:flex; flex-direction:column; align-items:flex-start; }
.app .home-lower>article>a { margin-top:auto; }
.app .home-lower>article>p { margin-bottom:24px; font-size:1rem; }
.app .mini-stats { align-items:stretch; }
.app .mini-stats article { align-content:start; }
.app .settings-content>section { max-width:none; }
.app .settings-content>section:not(.active) { display:none; }
.app .settings-content>section.active { display:block; }
.app .settings-content { padding:28px; }
.app .settings-menu { align-self:start; }
.app .settings-menu button { text-align:left; width:100%; height:auto; padding:12px; white-space:normal; }
.app .settings-intro { margin:0 0 24px; color:var(--muted); }
.app #settingsProfile .account-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; margin:0; }
.app #settingsProfile .profile-card { display:grid; grid-template-columns:88px minmax(0,1fr); align-items:start; gap:24px; padding:24px; text-align:left; }
.app #settingsProfile .profile-card h2 { font-size:1.375rem; overflow-wrap:anywhere; margin:12px 0 20px; }
.app #settingsProfile .profile-card>div { display:grid; gap:18px; }
.app #settingsProfile .profile-card h2,.app #settingsProfile .plan-card h2 { margin:0; padding:0; border:0; }
.app #settingsProfile .profile-card label { margin:0; }
.app #settingsProfile .profile-card .plan,.app #settingsProfile .plan-card .plan { justify-self:start; width:max-content; font-size:.75rem; padding:4px 9px; }
.app #settingsProfile .profile-actions { display:grid; align-items:stretch; margin-top:4px; gap:12px; }
.app #settingsProfile .profile-actions button { width:100%; height:auto; min-height:48px; margin:0; padding:12px; }
.app #settingsProfile .plan-card { display:grid; gap:16px; }
.app #settingsProfile .plan-card :is(p,ul,a) { margin:0; }
.app #searchInput { border:0; background:transparent; padding:0; min-height:0; box-shadow:none; }
.app #settingsProfile .profile-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px; }
.app #settingsProfile .profile-facts label:last-child { grid-column:1/-1; }
.app #settingsProfile .avatar-editor { margin:0; width:88px; text-align:center; font-size:.8125rem; }
.app #settingsProfile .avatar { width:80px; height:80px; }
.app #settingsProfile .profile-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
.app #settingsProfile .plan-card { min-height:0; padding:24px; }
.app #settingsProfile .plan-card h2 { margin-top:12px; }
.app .settings .toggle-row { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:20px; }
.app .settings .toggle-row input { width:22px; height:22px; }
.app #quick [data-icon="account"] i { color:var(--accent2); }
.app .quiz-course-progress { border:1px solid var(--line); border-radius:12px; padding:18px; background:var(--panel2); margin-bottom:24px; }
.app .quiz-course-progress>b,.app .quiz-course-progress>span { display:block; margin-bottom:8px; }
.app .quiz-course-progress p { margin:12px 0 0; font-size:.875rem; color:var(--muted); }
.app .quiz-card { color:var(--text); }
.app .quiz-options button { font-size:1rem; line-height:1.5; min-height:48px; color:var(--text); background:var(--panel); }
.app .quiz-options button:disabled { opacity:1; -webkit-text-fill-color:currentColor; }
.app .quiz-options button.correct { background:color-mix(in srgb,var(--accent) 14%,var(--panel)); border-color:var(--accent2); }
.app .quiz-options button.wrong { background:color-mix(in srgb,#ef6677 15%,var(--panel)); border-color:#de5366; }
.app .quiz-result p,.app .lesson-copy p { font-size:1rem; }
.app .lesson-tabs { display:flex; gap:8px; overflow-x:auto; }
.app .lesson-tabs button { flex:1 0 auto; min-height:44px; font-size:.875rem; padding:10px 14px; }
.app :is(.lesson-tabs button,.lesson-navigation button,.provider-connect) { color:var(--text); background:var(--panel2); border:1px solid var(--line); }
.app .lesson-tabs button.active { color:#063e32; background:var(--accent); }
.app .table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.app .trade-table :is(th,td) { font-size:.875rem; line-height:1.5; }
.app .watch #watchRows>button { font-size:.875rem; }
.app #marketWatchRows>button { display:grid; grid-template-columns:26px minmax(0,1fr) auto 20px; align-items:center; gap:8px; padding:12px 0; text-align:left; width:100%; min-width:0; }
.app #marketWatchRows>button>span { display:grid; text-align:left; min-width:0; gap:3px; }
.app #marketWatchRows>button b { font-size:.875rem; }
.app #marketWatchRows>button small { font-size:.8125rem; white-space:normal; }
.app #marketWatchRows>button strong { font-size:.8125rem; max-width:80px; overflow-wrap:anywhere; text-align:right; }
.app #marketWatchRows [data-remove-watch] { margin:0; text-align:center; }
.app :is(.events .event-row,.event-row b) { font-size:.875rem; line-height:1.5; }
.app :is(.compact-disclosure>summary b,.calculator-chart-drawer>summary small) { font-size:.875rem!important; }
.app .calculator-defaults { background:var(--panel2); border-color:var(--line); }
.app .calculator-defaults input { background:var(--panel)!important; color:var(--accent2)!important; }
.app .results { display:block; width:100%; max-width:100%; min-width:0; }
.app .results>div { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; width:100%; min-width:0; max-width:100%; box-sizing:border-box; }
.app .results>div>* { min-width:0; overflow-wrap:anywhere; }
.app .results>small { display:block; max-width:100%; white-space:normal; }
.app .results .result-top { width:100%; min-width:0; max-width:100%; flex-wrap:wrap; }
.app #sideNav a { font-size:.875rem; }
.app .side-pro a { text-decoration:none; }
html[data-theme="dark"] .app :is(.results,.plan-card,.price-card,.settings,.quiz-card,.takeaway-card,.resource-card,.glossary,.lesson-visual,.tool-result,.journal-stats article,.analytics-grid .panel,.live-strip) { background:var(--panel); color:var(--text); border-color:var(--line); }
html[data-theme="dark"] .app :is(.profile-card,.settings-menu,.settings-menu button,.settings-content,.trade-table,.calendar-card,.snapshot-grid>div,.mini-stats article,.account-side,.bot-message) { color:var(--text); border-color:var(--line); }
html[data-theme="dark"] .app :is(.settings h2,.settings h3,.profile-card h2,.plan-card h2,.price-card h2,.results h2,.quiz-card h3,.resource-card h3,.takeaway-card h3,.metric b,.instrument-search label) { color:var(--text); }
html[data-theme="dark"] .app :is(.gain,.correct-text) { color:#6ae3bf; }
html[data-theme="dark"] .app :is(.loss,.wrong-text) { color:#ff9aa8; }
html[data-theme="dark"] .app .week span { background:var(--panel2); color:var(--muted); }
html[data-theme="dark"] .app .week span.complete { background:var(--accent); color:#063e32; }
html[data-theme="dark"] .app :is(.calculator-defaults,.lesson-callout,.glossary article,.resource-card li,.takeaway-card li,.quote-loading,.event-row) { background:var(--panel2); }
html[data-theme="dark"] .app :is(.lesson-visual span,.lesson-visual strong,.lesson-visual b) { color:var(--text); background:var(--panel2); }
html[data-theme="dark"] .app :is(.price-card p,.price-card li,.plan-card p,.settings label,.settings-intro,.resource-card li,.takeaway-card li) { color:var(--muted); }
@media (min-width:769px) and (max-width:1500px) {
  .app #quick { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:1000px) {
  .app .settings-layout { grid-template-columns:minmax(0,1fr); }
  .app .settings-menu { display:flex; gap:8px; overflow:auto; max-width:100%; margin-bottom:0; }
  .app .settings-menu button { flex:0 0 auto; width:auto; white-space:nowrap; }
}
@media (max-width:768px) {
  .app main { padding:24px 18px calc(110px + env(safe-area-inset-bottom)); }
  .app .bar { padding:10px 16px; min-height:68px; gap:10px; }
  .app .bar-actions { margin-left:auto; gap:8px; }
  .app .mobile-logo { font-size:1.125rem; gap:8px; min-width:0; margin:0; align-self:center; line-height:1; }
  .app .mobile-logo span { width:32px; height:32px; }
  .app .menu { min-width:32px; width:32px; }
  .app .connection-badge { display:none; }
  .app .bar-actions #userName { display:none; }
  .app .page-title { min-height:0; align-items:flex-start; flex-wrap:wrap; }
  .app .page-title h1 { font-size:1.75rem; line-height:1.25; }
  .app .page-title p { font-size:1rem; }
  .app #quick { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .app #quick a { display:flex; padding:16px 8px; gap:8px; }
  .app #quick a[data-icon="account"] { display:none; }
  .app #quick a b { font-size:.875rem; }
  .app .mini-stats span { white-space:normal; font-size:.875rem; }
  .app .mini-stats b { font-size:1.375rem; line-height:1.3; letter-spacing:0; }
  .app .mini-stats article { padding:14px 10px; }
  .app .streak { display:grid; grid-template-columns:40px minmax(0,1fr); padding:18px; gap:12px; }
  .app .week { grid-column:1/-1; width:100%; display:flex; justify-content:space-between; gap:4px; }
  .app .week span { width:32px; height:32px; }
  .app #dock { left:8px; right:8px; bottom:0; border-radius:16px 16px 0 0; padding:8px 2px calc(8px + env(safe-area-inset-bottom)); }
  .app #dock a { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; font-size:.75rem; padding:6px 0; line-height:1.35; }
  .app #dock a.calc { transform:none; margin:0; }
  .app #dock a i { width:28px; height:28px; margin:0; }
  .app .course-list>button { grid-template-columns:40px minmax(0,1fr); gap:10px 14px; padding:18px; }
  .app .course-list>button>span { width:40px; height:40px; }
  .app .course-list>button i { grid-column:2; justify-self:start; max-width:none; padding:4px 8px; }
  .app .course-list>button small { font-size:.8125rem; }
  .app #settingsProfile .profile-card { grid-template-columns:minmax(0,1fr); padding:18px; gap:16px; }
  .app #settingsProfile .avatar-editor { justify-self:start; }
  .app #settingsProfile .profile-facts,.app #settingsProfile .profile-actions { grid-template-columns:minmax(0,1fr); }
  .app .settings-content { padding:18px; }
  .app #settingsProfile .plan-card { padding:18px; }
  .app .settings-layout { gap:16px; }
  .app .settings-menu { margin-bottom:16px; }
  .app .watch #watchRows>button { grid-template-columns:28px minmax(68px,1fr) minmax(70px,auto) minmax(54px,auto); gap:6px; padding:14px 0; align-items:center; }
  .app .watch #watchRows .mini-spark { display:none!important; }
  .app .watch #watchRows>button>em { display:block; font-size:.8125rem; }
  .app .watch #watchRows>button :is(b,strong) { font-size:.875rem; }
  .app .event-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
  .app .event-row>b { flex:1 1 160px; }
  .app .market-examples button { font-size:.875rem!important; }
  .app :is(.calc-form,.results,.calculator-library) { padding:18px; }
  .app .calculator-chart-drawer>summary b { font-size:1rem!important; }
  .app #calculator .calculator-chart-drawer { order:0; }
  .app :is(.asset-tabs,.journal-tabs,.market-periods) { overflow-x:auto; max-width:100%; }
  .app .compact-disclosure>summary { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:16px; }
  .app .compact-disclosure>summary>span { flex:1 1 170px; }
  .app .compact-disclosure>summary b { font-size:.875rem!important; }
  .app .lesson-main { overflow:visible; min-width:0; }
  .app .lesson-heading p,.app .crumb { font-size:.875rem; line-height:1.6; }
  .app .lesson-navigation { display:flex; flex-wrap:wrap; gap:12px; }
  .app .lesson-navigation button { max-width:100%; min-height:44px; padding:12px; font-size:.875rem; white-space:normal; }
  .app .pro-overview { padding:20px; }
}
@media (max-width:359px) {
  .app main { padding-inline:12px; }
  .app .bar { padding-inline:10px; gap:6px; }
  .app .mobile-logo { font-size:1rem; }
  .app #dock a { font-size:.75rem; }
  .app #dock .td-icon { width:22px; height:22px; }
}
/* Keep icon colour, without decorative tile backgrounds. */
.app :is(#dock a i,#quick a i,.stat-icon,.course-list>button>span) { background:transparent!important; border-color:transparent!important; box-shadow:none!important; }
.notification-dialog { width:min(420px,calc(100vw - 32px)); padding:24px; color:var(--text); background:var(--panel); }
.notification-dialog::backdrop { background:#05152480; }
.notification-dialog header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.notification-dialog h2 { margin:0; font-size:1.25rem; }
.notification-dialog p { font-size:1rem; line-height:1.6; }
.notification-dialog header button { background:transparent; color:inherit; border:0; width:44px; height:44px; font-size:1.75rem; }
.ai-thread .bot-message { flex-wrap:wrap; }
.ai-thread .bot-message p { white-space:pre-wrap; overflow-wrap:anywhere; }
.chat-sources { width:100%; padding-left:20px; font-size:.875rem; line-height:1.6; }
.chat-sources a { color:var(--accent2); }
.copilot-drawer { width:100%; min-width:0; }
.copilot-drawer>summary { cursor:pointer; font-size:1.125rem; font-weight:700; padding:12px 0; min-height:44px; color:var(--text); }
.copilot-drawer[open]>summary { margin-bottom:16px; border-bottom:1px solid var(--line); }
/* Keep the colored glyphs, without colored tiles behind them. */
.app :is(.stat-icon,.course-icon,.quick-icon,.feature-icon,.platform-icon,.market-icon),.app #dock a i,.app #quick a i,.app .course-list button>span:first-child{background:transparent!important;box-shadow:none!important}
.app .pro-tool::after{content:'Pro';font-size:11px;font-weight:700;margin-left:6px;color:var(--accent2)}