/* Default navy theme. Scoped to the IELTS Cat shell; practice logic stays separate.
   Palette reference: open-lingua/ielts-mastery-hub (MIT), website custom.css.
   Typography deliberately retains this project's Source Sans 3 and system CJK. */
body.ieltscat-navy {
  --background: #f4f6fc;
  --ink: #202b46;
  --navy: #1b2a5e;
  --muted: #626d87;
  --primary: #1b2a5e;
  --primary-ink: #263e7d;
  --primary-soft: #edf1fb;
  --surface: #fff;
  --surface-muted: #f7f8fc;
  --line: #dce2f1;
  --ieltscat-gold: #c9952a;
  --ieltscat-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  background: var(--background);
}
.ieltscat-navy ::selection { background: #dce5fa; color: var(--navy); }
.ieltscat-navy :focus-visible { outline-color: #607ab8; }
.ieltscat-navy .app-shell { max-width: 1540px; }
.ieltscat-navy .masthead {
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px #1b2a5e04;
  backdrop-filter: none;
}
.ieltscat-navy .brand-wordmark {
  font-family: var(--ieltscat-sans);
  font-style: normal;
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -.65px;
  padding-top: 0;
}
.ieltscat-navy .brand-dot { color: var(--ieltscat-gold); }
.ieltscat-navy .brand-caption { color: var(--muted); letter-spacing: .6px; }
.ieltscat-navy .brand-caption span { color: #b9c2d9; }
.ieltscat-navy :is(.font-setting,.quiet-button,.field-label,.source-label,.answered-count,.progress-label,.save-status,.result,.text-button,.site-footer) { color: var(--muted); }
.ieltscat-navy .font-setting>span:first-child { font-family: var(--ieltscat-sans); font-size: 17px; letter-spacing: -.5px; }
.ieltscat-navy .help-icon { border-color: #a6b1cd; }
.ieltscat-navy .toolbar { border-radius: 10px; background: #fff; }
.ieltscat-navy .toolbar select { color: var(--navy); }
.ieltscat-navy .field-label { letter-spacing: .7px; }
.ieltscat-navy .intro { min-height: 88px; }
.ieltscat-navy h1 {
  font-family: var(--ieltscat-sans);
  font-size: 27px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.45px;
  color: var(--navy);
}
.ieltscat-navy .arrow-button { background: #fff; color: var(--navy); border-radius: 9px; }
.ieltscat-navy .panel { border-color: var(--line); border-radius: 12px; box-shadow: 0 3px 12px #1b2a5e03; }
.ieltscat-navy .panel-header { background: #fafbfe; border-color: #e6eaf4; }
.ieltscat-navy .panel-label { color: var(--navy); letter-spacing: .3px; }
.ieltscat-navy .panel-label::before { width: 3px; height: 12px; border-radius: 1px; background: var(--navy); vertical-align: -1px; }
.ieltscat-navy .source-tab,.ieltscat-navy .source-tabs>button { color: var(--muted); border-radius: 5px; }
.ieltscat-navy .source-tabs>button[aria-selected='true'] { background: #e9eefb; color: var(--navy); }
.ieltscat-navy .panel-content { scrollbar-color: #cbd3e5 transparent; }
.ieltscat-navy .panel-content::-webkit-scrollbar-thumb { background: #cbd3e5; }
.ieltscat-navy .source-content { color: #303b54; }
.ieltscat-navy .source-document :is(h1,h2,h3,h4) {
  font-family: var(--ieltscat-sans)!important;
  color: var(--navy)!important;
  font-weight: 600!important;
  letter-spacing: -.35px;
}
.ieltscat-navy .source-document h1 { font-size: 1.65em!important; }
.ieltscat-navy .source-document h2 { font-size: 1.45em!important; }
.ieltscat-navy .question-content :is(h1,h2,h3) { font-family: var(--ieltscat-sans); font-weight: 600; color: var(--navy); }
.ieltscat-navy .panel-content blockquote { border-color: var(--line); }
.ieltscat-navy .q-block { border-color: #e8ecf5; }
.ieltscat-navy :is(.q-heading,.q-number,.option-letter,.options>li>b,.answer-row>b) { color: var(--primary-ink); }
.ieltscat-navy .instruction { color: #4c5873; }
.ieltscat-navy .choice-option { border-radius: 6px; }
.ieltscat-navy .choice-option:has(input:checked) { background: var(--primary-soft); color: var(--navy); }
.ieltscat-navy .choice-option input { accent-color: var(--navy); }
.ieltscat-navy .word-options { border-color: var(--line); border-radius: 8px; background: #f7f9fe; }
.ieltscat-navy .answer-control { color: var(--navy); }
.ieltscat-navy :is(.answer-field.answer-control>strong,.inline-answer>.blank-number) { color: var(--primary-ink); }
.ieltscat-navy :is(.answer-field,.inline-answer).answer-control>:is(input,select) { border-color: #becae3; background: #fafbfe; color: var(--navy); box-shadow: none; }
.ieltscat-navy :is(.answer-field,.inline-answer).answer-control>input::placeholder { color: #75809a; }
/* Keep score feedback semantic rather than recoloring success and error as branding. */
.ieltscat-navy :is(.answer-field,.inline-answer).answer-control>:is(input,select).correct { background: #eff7f1; border-color: #a9c8ad; }
.ieltscat-navy :is(.answer-field,.inline-answer).answer-control>:is(input,select).incorrect { background: #fff6f2; border-color: #cba89d; }
.ieltscat-navy .choice-option:has(input:checked.correct) { background: #edf6ee; color: #285b38; }
.ieltscat-navy .choice-option:has(input:checked.incorrect) { background: #fff4ef; color: #794a35; }
.ieltscat-navy .answer-feedback { color: var(--muted); }
.ieltscat-navy :is(.explanation,.translation) { background: #fff; border-color: var(--line); border-radius: 8px; }
.ieltscat-navy :is(.explanation,.translation)>summary { color: var(--primary-ink); background: #f7f9fe; }
.ieltscat-navy :is(.explanation,.translation)>summary::after { color: #7a87a6; font-family: var(--ieltscat-sans); }
.ieltscat-navy :is(.explanation,.translation)[open]>summary { border-color: var(--line); }
.ieltscat-navy :is(.explanation,.translation)>div { color: #45516b; }
.ieltscat-navy.is-teaching #reveal { background: #e9eefb; color: var(--navy); border-color: #b9c7e7; }
.ieltscat-navy.is-teaching .questions-panel .panel-label { color: var(--navy); }
.ieltscat-navy :is(.quiz-status,.chip) { background: var(--primary-soft); color: var(--primary-ink); }
.ieltscat-navy .player { background: #f6f8fe; border-color: var(--line); border-radius: 10px; }
.ieltscat-navy .player>strong { color: var(--navy); }
.ieltscat-navy .player-intro { font-family: var(--ieltscat-sans); font-size: 22px; font-weight: 600; color: var(--navy); }
.ieltscat-navy .player-controls { color: var(--muted); }
.ieltscat-navy .player-controls :is(select,button) { border-color: #d1daed; color: var(--primary-ink); }
.ieltscat-navy :is(.sentence-list>li,.transcript-controls) { border-color: #e2e7f2; }
.ieltscat-navy .sentence { color: #303b54; border-radius: 6px; }
.ieltscat-navy :is(.sentence.active,.sentence-list li.active) { background: #edf1fb; }
.ieltscat-navy .sentence.active::before { background: #526eae; }
.ieltscat-navy :is(.sentence-cn,.sentence-time,.media-note,.empty-state,.loading) { color: var(--muted); }
.ieltscat-navy .translation-note { color: var(--muted); border-color: #d1daed; }
.ieltscat-navy .question-nav button { border-color: #d3dbee; color: #5b6887; background: #fff; border-radius: 5px; }
.ieltscat-navy .question-nav button.answered { background: #e7edfb; color: var(--navy); border-color: #b9c7e7; }
.ieltscat-navy .question-nav button.correct { background: #dcefe0; border-color: #a5caae; color: #306742; }
.ieltscat-navy .question-nav button.incorrect { background: #f7e7e0; border-color: #ddc1b6; color: #a15e46; }
.ieltscat-navy .question-nav button[aria-current='true'] { box-shadow: 0 0 0 2px #607ab8; }
.ieltscat-navy .result strong { font-family: var(--ieltscat-sans); font-weight: 600; color: var(--navy); }
.ieltscat-navy :is(.primary-button,.secondary-button,.text-button) { border-radius: 7px; }
.ieltscat-navy .primary-button { box-shadow: none; }
.ieltscat-navy .secondary-button { color: var(--primary-ink); background: #fff; border-color: #cbd5ea; }
.ieltscat-navy .app-dialog { background: #fff; border-color: var(--line); border-radius: 14px; box-shadow: 0 24px 80px #1b2a5e24; }
.ieltscat-navy .app-dialog::backdrop { background: #141f3d40; }
.ieltscat-navy :is(.dialog-kicker,.close-button,.help-topics dd,.app-dialog p,.app-dialog .help-footnote) { color: var(--muted); }
.ieltscat-navy :is(.app-dialog h2,.help-topics dt) { color: var(--navy); }
.ieltscat-navy .app-dialog .help-footnote { border-color: var(--line); }
.ieltscat-navy :is(.audio-error,.error-message) button { color: var(--navy); border-color: var(--line); }
@media (hover:hover) and (pointer:fine) {
  .ieltscat-navy :is(.arrow-button,.secondary-button,.source-tabs>button):hover:not(:disabled) { background: #edf1fb; border-color: #b9c7e7; }
  .ieltscat-navy .primary-button:hover:not(:disabled) { background: #2a407b; }
  .ieltscat-navy :is(.quiet-button,.text-button):hover { color: var(--navy); }
  .ieltscat-navy .choice-option:hover { background: #f4f6fc; }
  .ieltscat-navy .question-nav button:hover { background: #e9eefb; border-color: #aabbdc; }
  .ieltscat-navy .sentence:hover { background: #edf1fb; }
  .ieltscat-navy :is(.explanation,.translation)>summary:hover { background: #eef2fc; }
}
@media (max-height:800px) and (min-width:901px) {
  .ieltscat-navy .intro { min-height: 77px; }
  .ieltscat-navy h1 { font-size: 25px; }
}
@media (max-width:700px) {
  .ieltscat-navy .brand-wordmark { font-size: 23px; }
  .ieltscat-navy .intro { min-height: 75px; }
  .ieltscat-navy h1 { font-size: 23px; }
  .ieltscat-navy .mobile-tabs { border-color: var(--line); background: #e9edf7; }
  .ieltscat-navy .mobile-tabs button { color: var(--muted); }
  .ieltscat-navy .mobile-tabs button[aria-pressed='true'] { color: var(--navy); box-shadow: 0 1px 4px #1b2a5e0a; }
  .ieltscat-navy .practice-bar { background: #f4f6fc; border-color: var(--line); backdrop-filter: none; }
  .ieltscat-navy .action-buttons .text-button { color: var(--muted); }
  .ieltscat-navy .source-document h1 { font-size: 1.5em!important; }
}
@media print {
  body.ieltscat-navy { background: #fff; }
  .ieltscat-navy .panel { border: 0; box-shadow: none; }
}