/* Learning Studio: one restrained system for both themes. No changes to answer logic. */
:root[data-ui="studio"], :root[data-ui="studio"]:not([data-theme="light"]) {
  --bg-primary: #151b24 !important; --bg-secondary: #242e3b !important; --bg-card: #1d2632 !important;
  --bg-card-hover: #293644 !important; --bg-lighter: #303e4e !important; --border: #354251 !important;
  --text-primary: #f4f7fb !important; --text-secondary: #d1dce7 !important; --text-muted: #b5c5d5 !important;
  --accent: #ffb36b !important; --accent-2: #ffc58e !important; --accent-3: #ffb36b !important; --border-hover: #bd865a !important;
  --studio-primary: #ffad60; --studio-primary-text: #2b1a0d; --studio-soft: #392d25;
  --studio-line: #354251; --cosmic-violet: #e8bd97; --ui-focus-ring: #efab6b;
}
:root[data-ui="studio"][data-theme="light"] {
  --bg-primary: #f6f7f8 !important; --bg-secondary: #eef2f4 !important; --bg-card: #fff !important;
  --bg-card-hover: #f2f6f6 !important; --bg-lighter: #e6edef !important; --border: #dce3e7 !important;
  --text-primary: #233742 !important; --text-secondary: #526875 !important; --text-muted: #627581 !important;
  --accent: #256b61 !important; --accent-2: #1f5c53 !important; --accent-3: #256b61 !important; --border-hover: #82aba5 !important; --ui-focus-ring: #569c91;
  --studio-primary: #246b61; --studio-primary-text: #fff; --studio-soft: #eef5f2;
  --studio-line: #dce3e7; --cosmic-violet: #607981;
}
html[data-ui="studio"] body::before { display: none !important; }
html[data-ui="studio"] .sidebar { background: var(--bg-card) !important; padding: 23px 15px; border-color: var(--border) !important; }
html[data-ui="studio"] .sidebar .sidebar-logo-icon { background: var(--studio-primary) !important; color: var(--studio-primary-text) !important; border: 0 !important; box-shadow: none !important; border-radius: 11px !important; width: 38px; height: 38px; }
html[data-ui="studio"] .sidebar .sidebar-logo-name { font: 700 16px/1.4 'Be Vietnam Pro',sans-serif !important; }
html[data-ui="studio"] .sidebar .sidebar-logo-sub { font: 400 11px/1.6 'Be Vietnam Pro',sans-serif; letter-spacing: 0; color: var(--text-muted) !important; }
html[data-ui="studio"] .sidebar .sidebar-section-label { font: 600 10px/1.6 'Be Vietnam Pro',sans-serif; letter-spacing: .06em; margin-top: 19px; padding-left: 12px; }
html[data-ui="studio"] .sidebar .sidebar-link { font-size: 12px; font-weight: 500; min-height: 43px; border-radius: 8px !important; padding: 8px 11px; }
html[data-ui="studio"] .sidebar .sidebar-link.active { color: var(--accent) !important; background: var(--studio-soft) !important; border-color: transparent !important; font-weight: 650; }
html[data-ui="studio"] .sidebar-link.active::before { display: none !important; }
html[data-ui="studio"] .sidebar-link-icon .material-icons { font-size: 20px; }
html[data-ui="studio"] .theme-toggle { border-radius: 8px; border-color: var(--border); padding: 7px 9px; }
html[data-ui="studio"] .theme-toggle-copy b { font-size: 11px; }.theme-toggle-copy small { font-size: 9px; }
html[data-ui="studio"] .app-topbar { background: var(--bg-card); border-color: var(--border); min-height: 68px; padding-inline: 34px; }
html[data-ui="studio"] .app-breadcrumb { font-size: 12px; }
html[data-ui="studio"] .app-search-button { background: var(--bg-primary); font-size: 12px; width: 242px; }
html[data-ui="studio"] .app-profile-button { background: var(--bg-secondary); color: var(--text-secondary); }
html[data-ui="studio"] .learning-dashboard { padding: 32px 34px 48px; background: transparent; }
html[data-ui="studio"] .learning-dashboard-shell { max-width: 1140px; }
html[data-ui="studio"] .learning-header { margin-bottom: 25px; align-items: center; }
html[data-ui="studio"] .learning-header h1 { font: 650 clamp(25px,2.4vw,32px)/1.3 'Be Vietnam Pro',sans-serif; letter-spacing: -.04em; color: var(--text-primary); }
html[data-ui="studio"] .learning-header p { font-size: 13px; line-height: 1.7; margin-top: 8px; }
html[data-ui="studio"] .dashboard-date { font-family: inherit; font-size: 12px; padding: 8px 11px; border-radius: 7px; background: transparent; border: 0; }
html[data-ui="studio"] .learning-focus { display: grid; grid-template-columns: minmax(0,1fr) 230px !important; min-height: 200px; background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: 12px; box-shadow: none !important; }
html[data-ui="studio"] .learning-focus::before, html[data-ui="studio"] .learning-focus-copy::after { display: none; }
html[data-ui="studio"] .learning-focus-copy { padding: 25px 28px; }
html[data-ui="studio"] .learning-focus-label { font: 600 11px/1.5 'Be Vietnam Pro',sans-serif; text-transform: none; letter-spacing: 0; color: var(--accent) !important; margin-bottom: 11px; }
html[data-ui="studio"] .learning-focus h2 { font: 650 22px/1.4 'Be Vietnam Pro',sans-serif !important; letter-spacing: -.035em; color: var(--text-primary) !important; }
html[data-ui="studio"] .learning-focus-copy > p { max-width: 540px; color: var(--text-secondary) !important; font-size: 13px; line-height: 1.75; margin-top: 9px; }
html[data-ui="studio"] .learning-focus-actions { margin-top: 20px; gap: 10px; flex-wrap: wrap; }
html[data-ui="studio"] .learning-focus .learning-primary-action { background: var(--studio-primary) !important; color: var(--studio-primary-text) !important; border-color: var(--studio-primary) !important; min-height: 42px; padding: 10px 16px; border-radius: 8px !important; box-shadow: none; font-size: 12px; }
html[data-ui="studio"] .learning-focus .learning-secondary-action { background: transparent !important; color: var(--text-secondary) !important; border: 1px solid var(--border) !important; font-size: 12px; min-height: 42px; padding: 10px 14px; border-radius: 8px; }
html[data-ui="studio"] .learning-focus-progress { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: flex-start; padding: 24px; margin: 0; gap: 10px; background: var(--studio-soft) !important; border: 0 !important; border-left: 1px solid var(--border) !important; border-radius: 0; }
html[data-ui="studio"] .learning-focus .learning-level-icon { width: 32px; height: 32px; border: 0 !important; background: var(--bg-card) !important; color: var(--accent) !important; }
html[data-ui="studio"] .learning-focus-progress #passport-current-gate { font-size: 16px !important; color: var(--text-primary) !important; margin-top: 3px; }
html[data-ui="studio"] .learning-focus-progress small { font-size: 10px; letter-spacing: .05em; color: var(--text-secondary) !important; }
html[data-ui="studio"] .learning-focus-progress p, html[data-ui="studio"] .learning-focus-progress p b { font-size: 11px; color: var(--text-secondary) !important; }
html[data-ui="studio"] .learning-mastered { display: none; }
html[data-ui="studio"] .learning-stats { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin: 16px 0 30px; background: var(--bg-card); }
html[data-ui="studio"] .learning-stat { min-height: 84px; border: 0 !important; border-radius: 0; padding: 17px 16px; background: transparent !important; }
html[data-ui="studio"] .learning-stat + .learning-stat { border-left: 1px solid var(--border) !important; }
html[data-ui="studio"] .learning-stat > .material-icons { display: none; }
html[data-ui="studio"] .learning-stat small { font-size: 11px; color: var(--text-muted); }
html[data-ui="studio"] .learning-stat strong { font: 600 20px/1.3 'Be Vietnam Pro',sans-serif; letter-spacing: -.03em; color: var(--text-primary); }
html[data-ui="studio"] .learning-section-head { align-items: center; margin-bottom: 15px; gap: 18px; }
html[data-ui="studio"] .learning-section-head h2, html[data-ui="studio"] .exam-section-heading h2 { font: 650 18px/1.5 'Be Vietnam Pro',sans-serif; letter-spacing: -.025em; }
html[data-ui="studio"] .learning-section-head > p { font-size: 12px; line-height: 1.7; }
html[data-ui="studio"] .learning-section-head > div > span, html[data-ui="studio"] .exam-section-heading > div > span { display: none; }
html[data-ui="studio"] .course-discovery { margin: 0 0 30px; }
html[data-ui="studio"] .course-grid { gap: 14px; }
html[data-ui="studio"] .course-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 186px; padding: 22px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 11px; transition: border-color 140ms,background-color 140ms; }
html[data-ui="studio"] .course-card::before, html[data-ui="studio"] .course-card::after { display: none; }
html[data-ui="studio"] .course-card:hover { transform: none; background: var(--bg-card-hover); border-color: var(--border-hover); box-shadow: none; }
html[data-ui="studio"] .course-icon { position: static; width: 32px; height: 32px; margin: 0 0 12px; border: 0; background: transparent !important; color: var(--text-secondary) !important; box-shadow: none; font-size: 25px; }
html[data-ui="studio"][data-theme="light"] .course-card .course-icon { color: var(--text-secondary) !important; }
html[data-ui="studio"] .course-tag { display: none; }
html[data-ui="studio"] .course-card > strong { font: 650 16px/1.4 'Be Vietnam Pro',sans-serif; margin: 0 0 8px; color: var(--text-primary); }
html[data-ui="studio"] .course-card > span:not([class]) { font-size: 12px; line-height: 1.75; margin: 0 0 15px; color: var(--text-secondary); }
html[data-ui="studio"] .course-link { margin-top: auto; padding: 0; border: 0; font-size: 12px; font-weight: 600; color: var(--accent); }
html[data-ui="studio"] .course-link .material-icons { background: transparent; color: var(--accent); }
html[data-ui="studio"] .learning-section { padding: 24px; border: 1px solid var(--border) !important; border-radius: 11px; background: var(--bg-card) !important; margin-top: 24px; }
html[data-ui="studio"] .learning-today { padding: 0; background: transparent !important; border: 0 !important; margin-bottom: 28px; }
html[data-ui="studio"] .learning-task-grid { grid-template-columns: 1fr; gap: 8px; }
html[data-ui="studio"] .learning-task-grid .departure-row { grid-template-columns: minmax(0,1fr) auto !important; grid-template-rows: auto auto; min-height: 83px; padding: 17px 20px !important; border-radius: 9px !important; }
html[data-ui="studio"] .learning-task-grid .departure-row > span:first-child { display: none !important; }
html[data-ui="studio"] .learning-task-grid .departure-row > span:nth-child(2) { grid-column: 1; grid-row: 1; }
html[data-ui="studio"] .learning-task-grid .departure-row > span:nth-child(2) b { font-size: 14px !important; }
html[data-ui="studio"] .learning-task-grid .departure-row > span:nth-child(2) small { font-size: 12px !important; }
html[data-ui="studio"] .learning-task-grid .departure-row > span:nth-child(3) { grid-column: 1; grid-row: 2; font-size: 11px !important; }
html[data-ui="studio"] .learning-task-grid .departure-row > span:last-child { grid-column: 2; grid-row: 1/3; font-size: 11px !important; border-radius: 6px !important; }
html[data-ui="studio"] .learning-level-grid { gap: 10px; }
html[data-ui="studio"] .learning-level-grid .passport-gate { min-height: 206px; padding: 14px; border-radius: 9px; background: var(--bg-card) !important; }
html[data-ui="studio"] .learning-level-grid .passport-gate::after { display: none; }
html[data-ui="studio"] .learning-level-grid .passport-gate h3 { font-size: 14px; }
html[data-ui="studio"] .learning-level-grid .passport-gate p { font-size: 11px; line-height: 1.75; }
html[data-ui="studio"] .learning-level-grid .passport-gate small { font-size: 9px; }
html[data-ui="studio"] .learning-bottom-grid { grid-template-columns: minmax(0,1fr) minmax(270px,.8fr); }
html[data-ui="studio"] .pwa-settings-card { grid-column: 1/-1; }
html[data-ui="studio"] .public-footer { font-family: inherit; font-size: 11px; line-height: 1.8; }
/* Secondary discovery stays available without displacing the learning workflow. */
html[data-ui="studio"] .studio-discovery { margin-top: 25px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg-card); }
.studio-discovery > summary { display: flex; align-items: center; gap: 12px; padding: 19px 22px; cursor: pointer; list-style: none; color: var(--text-primary); font-size: 13px; font-weight: 600; }
.studio-discovery > summary::-webkit-details-marker { display: none; }
.studio-discovery summary > .material-icons { color: var(--text-muted); font-size: 20px; }
.studio-discovery small { display: block; font-size: 11px; font-weight: 400; color: var(--text-muted); margin-top: 5px; }
.studio-discovery-chevron { margin-left: auto; }.studio-discovery[open] .studio-discovery-chevron { transform: rotate(180deg); }
.discovery-content { max-width: 670px; padding: 0 20px 20px; margin: auto; }
.discovery-content .hero-book-scene { position: relative; width: 100%; height: 350px; max-width: 560px; margin: auto; }
.discovery-content .orbit-learning-panel { margin: 0; }
html[data-ui="studio"] .orbital-universe::before, html[data-ui="studio"] .orbital-universe::after { display: none; }
/* The orbital scene is a visible part of the dashboard, never a collapsed extra. */
html[data-ui="studio"] .learning-focus { grid-template-columns: minmax(0,1fr) minmax(300px,.85fr) !important; min-height: 335px; }
html[data-ui="studio"] .learning-focus-copy { align-self: center; }
html[data-ui="studio"] .learning-focus-progress { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; gap: 8px 11px; padding: 10px 16px 20px; background: var(--bg-card) !important; }
html[data-ui="studio"] .learning-focus-progress .hero-book-scene { flex: 0 0 100%; width: 100%; height: 275px; margin: 0; }
html[data-ui="studio"] .learning-focus-progress > div:has(#passport-current-gate) { max-width: calc(100% - 52px); }
html[data-ui="studio"] .orbit-explore { min-height: 36px; font-size: 11px; color: var(--text-secondary); }
html[data-ui="studio"] .orbit-view-status { font-size: 10px; color: var(--text-secondary); }
html[data-ui="studio"]:not([data-theme="light"]) :is(.page-sub,.learning-header p,.learning-section-head > p,.exam-section-heading > p,.course-card > span:not([class]),.ielts-skill-grid small,.feature-search-count,.feature-search-hint) { color: var(--text-secondary) !important; opacity: 1; }
html[data-ui="studio"]:not([data-theme="light"]) :is(.sidebar-section-label,.sidebar-logo-sub,.learning-stat small,.theme-toggle-copy small,.learning-level-grid .passport-gate p,.learning-level-grid .passport-gate small,.toeic-category-progress) { color: var(--text-muted) !important; opacity: 1; }
html[data-ui="studio"]:not([data-theme="light"]) .learning-focus-progress :is(small,p,p b) { color: #c4d5e2 !important; }
html[data-ui="studio"]:not([data-theme="light"]) :is(.toeic-full-test-specs span,.toeic-full-test-specs b) { color: #edf4fa !important; }
html[data-ui="studio"]:not([data-theme="light"]) #account-modal { --auth-text: #f4f7fb; --auth-muted: #cfdae6; --auth-subtle: #b4c4d5; }
@media (max-width:640px) {
  html[data-ui="studio"] .learning-focus-progress .hero-book-scene { height: 275px; }
  html[data-ui="studio"] .learning-focus .orbit-learning-panel { width: calc(100% - 24px); }
}
/* Exam entry pages: clear labels, compact introductions and consistent controls. */
html[data-ui="studio"]:not([data-theme="light"]) :is(.btn-primary,.tenses-tab.active,.ielts-practice-mode.active,.ielts-stage-filter.active,.ielts-skill-filter.active),
html[data-ui="studio"]:not([data-theme="light"]) #page-ielts :is(#ielts-practice-start,.ielts-practice-mode.active,.ielts-practice-stage .btn-primary),
html[data-ui="studio"]:not([data-theme="light"]) .toeic-full-test-launch #toeic-full-test-start { background: var(--studio-primary) !important; color: var(--studio-primary-text) !important; border-color: var(--studio-primary) !important; }
html[data-ui="studio"]:not([data-theme="light"]) .btn-primary:hover { background: #ffc58e !important; border-color: #ffc58e !important; }
html[data-ui="studio"]:not([data-theme="light"]) #account-modal { --auth-primary: #ffad60; --auth-primary-hover: #ffc58e; --auth-primary-text: #2b1a0d; --auth-focus: #ffad6033; --auth-border-strong: #bb875c; }
html[data-ui="studio"]:not([data-theme="light"]) .sidebar .sidebar-link-badge { background: #ffad6020 !important; color: #ffc58e !important; }
html[data-ui="studio"]:not([data-theme="light"]) .theme-toggle > .material-icons { background: #ffad6015; color: #ffb36b; }
html[data-ui="studio"]:not([data-theme="light"]) .flow-motion-toggle { color: #ffb36b; }
html[data-ui="studio"]:not([data-theme="light"]) .flow-motion-toggle[aria-pressed="false"] { color: var(--text-muted); }
html[data-ui="studio"]:not([data-theme="light"]) :is(.toeic-category-filters,.exam-workspace-nav) button[aria-pressed="true"] { color: #ffc58e; background: #392d25; border-color: #9f744f; }
html[data-ui="studio"]:not([data-theme="light"]) .orbit-destination-chip[aria-pressed="true"] { color: #ffc58e; background: #392d25; border-color: #bd865a; }
html[data-ui="studio"]:not([data-theme="light"]) .orbit-destination-go { color: #2b1a0d; background: #ffad60; border-color: #ffad60; }
html[data-ui="studio"] .exam-hero { display: block; padding: 0 0 23px; border: 0 !important; border-bottom: 1px solid var(--border) !important; border-radius: 0; background: transparent !important; margin-bottom: 25px; }
html[data-ui="studio"] .exam-hero-art, html[data-ui="studio"] .exam-eyebrow, html[data-ui="studio"] .exam-hero-tags { display: none; }
html[data-ui="studio"] .exam-hero .page-title { margin: 0 0 12px; font-size: 29px; font-weight: 650; color: var(--text-primary) !important; }
html[data-ui="studio"] .exam-hero .page-sub { max-width: 760px; font-size: 14px; line-height: 1.8; }
html[data-ui="studio"] .ielts-skill-grid > button { padding: 21px; border-radius: 10px; background: var(--bg-card); }
html[data-ui="studio"] .ielts-skill-grid strong { font-size: 16px; }.ielts-skill-grid small { line-height: 1.7; }
html[data-ui="studio"] .ielts-skill-grid small { font-size: 12px; }
html[data-ui="studio"] .skill-card-footer { font-size: 11px; }
html[data-ui="studio"] .ielts-skill-grid .skill-icon { width: 32px; height: 32px; border: 0; background: transparent !important; color: var(--text-secondary) !important; margin-bottom: 14px; }
html[data-ui="studio"][data-theme="light"] .ielts-skill-grid > button:nth-child(2n) .skill-icon { background: transparent !important; color: var(--text-secondary) !important; }
html[data-ui="studio"] .learning-level-grid .passport-gate { display: flex; flex-direction: column; }
html[data-ui="studio"] .learning-level-grid .passport-gate-stamp { position: static; align-self: flex-start; margin-top: 9px; font-size: 9px; }
html[data-ui="studio"] .learning-level-grid .passport-gate h3 { margin: 12px 0 7px; }
html[data-ui="studio"] .learning-level-grid .passport-gate small { position: static; margin-top: auto; padding-top: 12px; }
html[data-ui="studio"] :is(.toeic-category-filters,.exam-workspace-nav) button { font-size: 12px; border-radius: 7px; }
html[data-ui="studio"] #toeic-categories h3 { font-size: 15px; }
html[data-ui="studio"] #toeic-categories .card-content > p { font-size: 12px !important; }
html[data-ui="studio"] #toeic-categories .card-action button { font-size: 12px; }
html[data-ui="studio"] .exam-category-label { font-size: 10px; }
html[data-ui="studio"] .toeic-full-test-launch h2 { font-size: 21px !important; }
html[data-ui="studio"] .toeic-full-test-launch-copy > p { font-size: 13px !important; }
html[data-ui="studio"] .toeic-full-test-launch .toeic-full-test-kicker { display: none; }
html[data-ui="studio"] #toeic-dashboard .toeic-full-test-launch { background: var(--studio-soft) !important; border-color: var(--border) !important; border-radius: 11px !important; }
html[data-ui="studio"] .toeic-full-test-launch h2, html[data-ui="studio"] .toeic-full-test-launch-copy > p { color: var(--text-primary) !important; }
html[data-ui="studio"] .toeic-full-test-launch #toeic-full-test-dashboard-status { color: var(--text-secondary); font-size: 11px; }
@media(max-width:1100px) { html[data-ui="studio"] .learning-level-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(max-width:900px) {
  html[data-ui="studio"] .app-topbar { padding: 12px 18px 12px 73px; min-height: 70px; }
  html[data-ui="studio"] .app-search-button { width: auto; }
  html[data-ui="studio"] .learning-dashboard { padding: 25px 21px 40px; }
}
@media(max-width:640px) {
  html[data-ui="studio"] .learning-dashboard { padding: 24px 16px 32px; }
  html[data-ui="studio"] .learning-header h1 { font-size: 26px; }
  html[data-ui="studio"] .learning-header p { font-size: 12px; }
  html[data-ui="studio"] .learning-focus { display: block; }
  html[data-ui="studio"] .learning-focus-copy { padding: 23px; }
  html[data-ui="studio"] .learning-focus h2 { font-size: 20px !important; }
  html[data-ui="studio"] .learning-focus-progress { width: 100%; flex-direction: row; justify-content: flex-start; align-items: center; gap: 14px; padding: 16px 23px; border-left: 0 !important; border-top: 1px solid var(--border) !important; }
  html[data-ui="studio"] .learning-stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; }
  html[data-ui="studio"] .learning-stat { min-height: 78px; }
  html[data-ui="studio"] .learning-stat:nth-child(3),html[data-ui="studio"] .learning-stat:nth-child(5) { border-left: 0 !important; }
  html[data-ui="studio"] .learning-stat:nth-child(n+3) { border-top: 1px solid var(--border) !important; }
  html[data-ui="studio"] .learning-stat:last-child { grid-column: 1/-1; }
  html[data-ui="studio"] .learning-section-head { align-items: flex-start; gap: 5px; }
  html[data-ui="studio"] .learning-section-head > p { text-align: left; }
  html[data-ui="studio"] .course-grid { grid-template-columns: 1fr; gap: 10px; }
  html[data-ui="studio"] .course-card { position: relative; padding: 20px 20px 18px 66px; min-height: 142px; }
  html[data-ui="studio"] .course-icon { position: absolute; left: 20px; top: 21px; }
  html[data-ui="studio"] .learning-section { padding: 19px; }
  html[data-ui="studio"] .learning-today { padding: 0; }
  html[data-ui="studio"] .learning-task-grid .departure-row { padding: 16px !important; }
  html[data-ui="studio"] .learning-task-grid .departure-row > span:last-child { grid-column: 1; grid-row: 3; justify-self: start !important; margin-top: 7px; }
  html[data-ui="studio"] .learning-level-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html[data-ui="studio"] .learning-bottom-grid { grid-template-columns: 1fr; }
  html[data-ui="studio"] .discovery-content { padding: 0 10px 13px; }.discovery-content .hero-book-scene { height: 280px; }
  html[data-ui="studio"] .ielts-skill-grid > button { padding: 17px; }
  html[data-ui="studio"] .exam-hero .page-title { font-size: 26px; }
}