.account-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; }
.account-header > a:last-child { color: #c1cdec; font-size: .875rem; }
.account-shell { width: min(960px, calc(100% - 32px)); margin: 40px auto 80px; }
.account-card { padding: 32px; border: 1px solid #354d7c; background: #182946; border-radius: 24px; }
#auth-view, #recovery-view { max-width: 470px; margin: auto; }
.account-shell h1 { margin: 14px 0; font-size: clamp(2rem, 5vw, 2.7rem); line-height: 1.12; letter-spacing: -.04em; }
.account-shell h2 { margin-top: 0; font-size: 1.2rem; }
.account-shell p { color: #c2cee7; line-height: 1.65; }
.account-tabs { display: flex; background: #101c32; padding: 5px; border-radius: 14px; margin: 26px 0; }
.account-tabs button { flex: 1; background: none; border: 0; color: #bfcce8; padding: 12px; border-radius: 10px; cursor: pointer; font: inherit; font-size: .9rem; }
.account-tabs button[aria-pressed="true"] { background: #344d87; color: white; }
.account-shell fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.account-shell label { display: block; font-size: .9rem; margin: 18px 0 8px; }
.account-shell input { display: block; width: 100%; padding: 13px; border: 1px solid #5e75a4; background: #0f1c33; color: white; border-radius: 10px; font: inherit; }
.account-shell form .btn { margin-top: 24px; }
.account-shell button { cursor: pointer; font: inherit; }
.account-shell button:disabled, .account-shell fieldset:disabled { opacity: .55; cursor: not-allowed; }
.account-shell .account-hint { font-size: .82rem; }
.account-text-button { border: 0; background: none; padding: 14px 0; color: #c1d1ff; text-align: left; }
.account-shell .account-status { text-align: center; max-width: 600px; margin: 0 auto 22px; }
.account-status:empty { display: none; }
.account-status[data-error="true"] { color: #ffc5cf; }
.dashboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.account-email { overflow-wrap: anywhere; color: white !important; }
.billing-plan { border-top:1px solid #49618e; margin-top:16px; padding-top:16px; }
.billing-plan h3 { font-size:1rem; margin:0 0 8px; }
.billing-plan p { font-size:.88rem; margin:0; }
.account-shell a:not(.btn) { color: #baceff; text-decoration: underline; text-underline-offset: 4px; }
.account-shell :focus-visible { outline: 3px solid #baceff; outline-offset: 3px; }
[hidden] { display: none !important; }
.paid-locked { opacity:.6; cursor:not-allowed; }
.practice-card.is-locked > h2, .practice-card.is-locked > p { opacity:.55; }
.lockable-feature { position:relative; }
.feature-lock { position:absolute; top:20px; right:20px; width:22px; height:22px; fill:none; stroke:#b7bbc4; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.48; pointer-events:none; }
.feature-lock.is-unlocked { display:none; }
.lockable-feature > h2 { padding-right:28px; }
.lockable-feature .learn-launch { padding-right:58px; }
.feature-block { margin-bottom:24px; border:1px solid #425d96; border-radius:22px; background:linear-gradient(120deg,#294b92,#292d56); overflow:hidden; }
.feature-block .learn-launch { margin:0; border:0; border-radius:0; background:transparent; }
.feature-block .explore-plans { margin:0 32px 28px; background:#4269cf; color:#fff; }
#chart-dialog { margin:auto; width:min(900px,calc(100% - 32px)); max-height:90vh; overflow-y:auto; color:#f2f5ff; }
#chart-dialog::backdrop { background:#060e20cc; backdrop-filter:blur(5px); }
.chart-block { margin:0 0 24px; padding:32px; border:1px solid #5366a4; border-radius:24px; background:radial-gradient(ellipse at top right,#37396380,transparent 65%),#142744; }
.account-shell .chart-block h2 { font-size:clamp(1.8rem,4vw,2.5rem); margin:12px 0; }
.chart-upload { padding:24px; border:1px dashed #7388be; border-radius:18px; background:#101c3280; text-align:center; cursor:pointer; }
.chart-upload span,.chart-upload strong { display:block; margin:8px; }
.chart-upload-icon { font-size:2rem; color:#b7bcff; }
.chart-upload input { margin-top:18px; font-size:.8rem; }
#chart-image { display:block; max-height:350px; max-width:100%; margin:20px auto; border-radius:12px; object-fit:contain; }
#chart-clear { margin-left:16px; }
#chart-result { margin-top:24px; padding:24px; background:#0e1c33; border:1px solid #52658a; border-radius:18px; }
#chart-result h3 { font-size:1.5rem; color:#d5dfff; }
#chart-result[data-signal="NO TRADE"] h3,.chart-caution { color:#f0c593; }
.chart-scores { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.chart-scores div { padding:16px; background:#203452; border-radius:12px; }
.chart-scores span { color:#bdcbea; font-size:.8rem; }.chart-scores strong { display:block; font-size:1.7rem; margin-top:8px; }
#chart-result li { color:#c2cee7; line-height:1.65; margin:8px 0; }
.chart-guide { border-top:1px solid #425479; margin-top:24px; padding-top:20px; }.chart-guide summary { cursor:pointer; color:#cdd8ff; }
@media(max-width:600px){.chart-block{padding:22px}.chart-scores{grid-template-columns:1fr}.chart-scores div{display:flex;align-items:center;justify-content:space-between}.chart-scores strong{margin:0}}
.learn-launch, .learn-tile { display:flex; flex-direction:column; gap:14px; color:#f2f5ff; text-align:left; border:1px solid #425d96; border-radius:22px; background:linear-gradient(135deg,#233e72,#192846 80%); padding:28px; width:100%; }
.learn-launch { margin:0 0 24px; padding:32px; background:linear-gradient(120deg,#294b92,#292d56); }
.learn-launch:hover, .learn-tile:hover { border-color:#a2b6f3; background-color:#2c4778; box-shadow:0 10px 30px #060d2333; }
.learn-launch .learn-title { font-size:2.2rem; }
.learn-title { font-size:1.35rem; font-weight:650; line-height:1.2; }
.learn-description { color:#ced9f1; font-size:.95rem; line-height:1.65; max-width:650px; }
.learn-detail { color:#d0d9ff; font-size:.85rem; margin-top:auto; padding-top:12px; }
.learn-number { color:#a8baf5; font-size:.82rem; letter-spacing:.1em; }
.learn-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:28px 0; }
.learn-nav { display:flex; flex-wrap:wrap; gap:24px; align-items:center; }
#learning progress { display:block; width:100%; height:12px; accent-color:#8c9cf2; border:0; border-radius:10px; overflow:hidden; background:#152642; }
#learning progress::-webkit-progress-bar { background:#152642; }
#learning progress::-webkit-progress-value { background:linear-gradient(90deg,#557ce0,#8a78c7); }
.learn-meta { color:#aebfeb; font-size:.85rem; }
.learn-steps { display:flex; gap:10px; margin:24px 0; flex-wrap:wrap; }
.learn-step { min-width:48px; min-height:44px; padding:10px; border:1px solid #49618e; border-radius:12px; background:#172944; color:#d8e2fc; }
.learn-step[aria-current] { background:#435bb0; border-color:#b3c1ff; }
.learn-reading, .learn-quiz { padding:32px; background:#182a4b; border:1px solid #3d588b; border-radius:22px; margin:18px 0; }
.learn-reading h2, .learn-quiz h2 { margin:16px 0; font-size:1.45rem; line-height:1.4; }
.learn-reading > p { font-size:1.08rem; line-height:1.85; }
.learn-reading > a { display:block; font-size:.8rem; margin:20px 0; }
.learn-reading > button { margin-top:12px; white-space:normal; }
.learn-choices { display:grid; gap:12px; }
.learn-answer { color:#e2eaff; background:#21395f; border:1px solid #5672a3; padding:16px 20px; border-radius:12px; text-align:left; line-height:1.5; }
.learn-answer:hover:not(:disabled) { background:#304c7b; }
.learn-answer.correct { background:#214f4d; border-color:#82c6b5; }
.learn-answer.incorrect { border-color:#d391a9; }
.learn-answer:disabled { opacity:1 !important; }
.learn-feedback { min-height:1.5em; }
.learn-quiz > .btn { margin:6px 12px 6px 0; }
@media(max-width:600px) { .learn-grid { grid-template-columns:1fr; } .learn-reading,.learn-quiz,.learn-launch,.learn-tile { padding:22px; } .learn-reading > button { width:100%; } }
.course-card { margin-top: 24px; padding: 32px; border: 1px solid #48649b; border-radius: 24px; background: linear-gradient(145deg,#1c3560,#182946); }
.course-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.course-heading h2 { margin: 12px 0 8px; font-size: clamp(1.5rem,3vw,2.1rem); }
.course-heading p { margin:0; max-width:620px; }
.course-progress { flex:0 0 auto; min-width:74px; text-align:right; }
.course-progress strong { display:block; color:#dce6ff; font-size:1.45rem; }
.course-progress span { color:#b7c6e4; font-size:.78rem; }
.course-progress-bar { height:8px; margin:24px 0; overflow:hidden; border-radius:99px; background:#0f1d35; }
.course-progress-bar span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#5e7fe2,#8b73c6); transition:width .3s ease; }
.course-lessons { display:grid; gap:14px; }
.lesson-card { padding:22px; border:1px solid #3f5a8d; border-radius:17px; background:rgba(10,22,44,.38); }
.lesson-top { display:flex; justify-content:space-between; gap:12px; color:#e5ecff; font-weight:650; }
.lesson-status { color:#b9c9e9; font-size:.78rem; font-weight:500; }
.lesson-card > p { color:#c2cee7; line-height:1.7; margin:14px 0 20px; }
.lesson-question { padding-top:16px; border-top:1px solid rgba(146,170,221,.2); }
.lesson-question strong { display:block; color:#e4ebff; font-size:.9rem; margin-bottom:12px; }
.lesson-answers { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.lesson-answers button { padding:11px 12px; border:1px solid #4e6594; border-radius:11px; background:#21375f; color:#d8e3fb; text-align:left; line-height:1.35; }
.lesson-answers button:hover:not(:disabled) { background:#304c82; border-color:#8ba7e5; }
.lesson-answers button.correct, .lesson-answers button.selected { background:#315b61; border-color:#74c1b5; color:#e1fff6; }
.lesson-answers button.incorrect { background:#633d57; border-color:#d68cae; }
.lesson-answers button:disabled { cursor:default; opacity:.9; }
@media(max-width:600px){.course-card{padding:24px}.course-heading{flex-direction:column}.course-progress{text-align:left}.lesson-answers{grid-template-columns:1fr}}
@media(max-width: 600px) { .account-card { padding: 24px; } .account-grid { grid-template-columns: 1fr; } .dashboard-heading { align-items: flex-start; flex-direction: column; } .account-shell { margin-top: 20px; } }