/* Finished-page theme. Palette and spacing can be adjusted here without
   changing the IDE or WIP pages. Classification colors remain in the scales. */
:root.app-page {
  --background: #101722;
  --surface: #172130;
  --surface-deep: #121b28;
  --surface-hover: #1d2a3c;
  --surface-active: #25364b;
  --ink: #e0e7ef;
  --muted: #9caec3;
  --subtle: #405169;
  --accent: #85b3e8;
  --accent-soft: #a4c7ef;
  --accent-bright: #d3e5f8;
  --line: #293649;
  --nav-inline-padding: max(1.25rem, calc((100vw - 1160px) / 2));
  --nav-height: 68px;
  --practice-background: var(--background);
  --practice-search-surface: var(--surface-deep);
  --practice-result-surface: var(--surface);
  font-family: "Nunito", Arial, sans-serif;
}
.app-page [hidden] { display: none !important; }
.app-page :is(a, button, input, select, summary):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 4px;
}
.app-page .site-header { border: 0; }
.app-page .nav-shell { min-height: 68px; }
.app-page .logo { font-weight: 700; letter-spacing: -.04em; font-size: 1.3rem; padding-left: 0; }
.app-page .nav-menu-button, .app-page .primary-nav-link { font-size: 1rem; }
.app-page .premium-link { color: var(--muted); font-size: .76rem; }
.app-page .nav-dropdown { border: 1px solid var(--line); box-shadow: 0 12px 24px #0003; }
.app-page .auth-button { border-radius: 6px; }
.app-page .practice-main, .dashboard-main, .problem-detail {
  width: min(1120px, calc(100% - 2.5rem)); margin-inline: auto; padding-bottom: 4rem;
}
.page-intro { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding: 3rem 0 2rem; }
.eyebrow { color: var(--accent); font-size: .67rem; font-weight: 700; letter-spacing: .15em; margin: 0 0 .85rem; }
.page-intro h1, .detail-heading h1 { font-size: clamp(1.7rem, 3vw, 2.35rem); letter-spacing: -.04em; font-weight: 600; margin: 0 0 .6rem; line-height: 1.2; }
.page-intro p:not(.eyebrow), .intro-note { color: var(--muted); font-size: .9rem; margin: 0; }
.intro-note { font-size: .75rem; padding-bottom: .15rem; }
.quiet-button, .primary-button { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 40px; padding: .6rem 1rem; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; font: inherit; font-size: .82rem; }
.quiet-button:hover { background: var(--surface-hover); border-color: var(--subtle); }
.primary-button { background: #88b6e8; border-color: #88b6e8; color: #102239; font-weight: 700; }
.primary-button:hover { background: #a4c7ef; }
.app-page .practice-search-panel { position: relative; top: auto; margin: 0; padding: 1.2rem; border: 1px solid var(--line); border-radius: 10px; box-shadow: none; gap: 1.15rem; }
.app-page .practice-search-control { width: 100%; display: flex; gap: .6rem; min-width: 0; }
.app-page .practice-search-box { flex: 1; min-width: 0; border: 1px solid var(--line); font-size: .85rem; }
.topic-toggle { flex: 0 0 auto; }
.app-page .practice-search-popup, .app-page .practice-settings { border: 1px solid var(--line); box-shadow: 0 16px 40px #0005; }
.app-page .practice-filter-row { align-items: start; gap: 1.6rem; }
.app-page .subject-filter-area { flex: 1; align-items: start; gap: .6rem; flex-direction: column; }
.app-page .subject-filter-list { gap: .4rem; }
.app-page .subject-filter-button { border: 1px solid transparent; color: var(--muted); background: transparent; padding: .35rem .55rem; border-radius: 5px; font-size: .72rem; }
.app-page .subject-filter-button.is-selected:not([data-subject="all"]) { color: var(--ink); background: var(--surface); border-color: var(--line); }
.app-page .subject-filter-button:not([data-subject="all"])::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: .4rem; border-radius: 50%; background: var(--subject-color); box-shadow: 0 0 0 1px #ffffff25; opacity: .3; }
.app-page .subject-filter-button.is-selected::before { opacity: 1; }
.app-page .subject-filter-button[data-subject="all"].is-selected { background: var(--surface-active); color: var(--accent-soft); }
.app-page .difficulty-filter-area { flex: 0 0 265px; padding-top: 0; }
.app-page .difficulty-filter-heading { flex-wrap: wrap; gap: .5rem; }
.app-page .filter-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.app-page .practice-results-section { margin: 1.7rem 0 0; padding: 0; }
.app-page .practice-results-header { gap: 1rem; }
.app-page .practice-results-header h1 { font-size: 1rem; font-weight: 700; }
.app-page .practice-results-header > div { display: flex; align-items: baseline; gap: .7rem; flex: 1; }
.app-page #practice-result-count { font-size: .75rem; }
.app-page #clear-filters { font-size: .72rem; min-height: 30px; padding: .35rem .6rem; background: transparent; }
.app-page .practice-results { gap: .8rem; margin-top: 1rem; }
.app-page .problem-result-row { border: 1px solid var(--line); padding: 1.35rem 1.5rem; border-radius: 9px; transition: border-color 120ms, background 120ms; }
.app-page .problem-result-row:hover { transform: none; filter: none; border-color: #49627f; background: #192536; }
.app-page .problem-result-heading h2 { font-size: 1.16rem; font-weight: 600; letter-spacing: -.015em; }
.app-page .problem-result-heading h2 a { color: inherit; text-decoration: none; }
.app-page .problem-result-source { opacity: 1; margin-top: .4rem; font-size: .71rem; }
.app-page .problem-result-statement { font-family: "Nunito", Arial, sans-serif; font-size: .92rem; line-height: 1.5; margin-top: .9rem; color: #bdcad9; }
.app-page .problem-result-divider { background: var(--line); opacity: 1; margin-top: 1rem; }
.app-page .problem-result-meta { align-items: center; flex-wrap: wrap; gap: .7rem; }
.app-page .variant-difficulty, .app-page .variant-difficulty:hover, .app-page .variant-difficulty:focus-visible { width: auto; min-width: auto; height: 28px; border-radius: 5px; filter: none; transition: none; box-shadow: 0 0 0 1px #ffffff15; text-decoration: none; }
.app-page .variant-difficulty-label { min-width: 0; opacity: 1; font-size: .67rem; padding: 0 .55rem; }
.app-page .result-topic, .app-page .result-topic.is-multicolor { border: 1px solid var(--line); color: var(--muted); background: transparent; border-radius: 4px; font-size: .65rem; }
.app-page .result-badge { background: transparent; color: var(--muted); border: 1px solid var(--subtle); width: 24px; height: 24px; font-size: .7rem; border-radius: 6px; }
.app-page .topic-picker-group-header strong { color: var(--ink); }
.app-page .topic-picker-option { font-size: .74rem; }
.app-page .practice-dialog { border: 1px solid var(--line); border-radius: 12px; width: min(560px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; }
.app-page .practice-dialog-card { background: var(--surface); }
.app-page .ruleset-option { border: 1px solid var(--line); border-radius: 8px; }
.app-page .ruleset-option:has(input:checked) { border-color: var(--accent); background: var(--surface-active); }
.app-page .ruleset-option-copy span { line-height: 1.5; }
.app-page .ruleset-start-button { background: var(--accent); color: #102239; border-radius: 7px; }
.timer-fields { border: 1px solid var(--line); border-radius: 8px; margin: 1.2rem 0 0; padding: 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.timer-fields legend { color: var(--ink); font-size: .8rem; padding: 0 .4rem; }
.timer-fields label { display: grid; gap: .45rem; font-size: .8rem; color: var(--muted); }
.timer-fields input { width: 100%; padding: .65rem; border: 1px solid var(--subtle); border-radius: 5px; color: var(--ink); background: var(--surface-deep); font-variant-numeric: tabular-nums; }
.timer-fields p { grid-column: 1 / -1; margin: 0; font-size: .7rem; color: var(--muted); }
.timer-fields button { grid-column: 1 / -1; justify-self: start; font-size: .72rem; }
.timer-penalty { font-size: .76rem; color: var(--muted); line-height: 1.6; }
.timer-error { font-size: .8rem; color: var(--error); }
.back-link { display: inline-block; margin-top: 2rem; color: var(--muted); font-size: .8rem; text-decoration: none; }
.back-link:hover { color: var(--ink); }
.detail-heading { margin: 2rem 0; }
.detail-heading > p:last-child { color: var(--muted); font-size: .8rem; }
.detail-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 1.5rem; }
.detail-sidebar h2, .detail-content h2 { font-size: .9rem; font-weight: 700; margin: 0 0 1rem; }
.detail-sidebar > p { font-size: .75rem; color: var(--muted); line-height: 1.7; padding: 0 .5rem; }
#detail-variants { display: grid; gap: .5rem; }
.detail-variant-link { display: grid; gap: .4rem; padding: 1rem; border: 1px solid var(--line); border-left: 4px solid var(--difficulty-color); border-radius: 7px; text-decoration: none; color: var(--ink); background: var(--surface-deep); font-size: .8rem; }
.detail-variant-link span { color: var(--muted); font-size: .73rem; }
.detail-variant-link[aria-current="page"] { background: var(--surface-active); outline: 1px solid var(--subtle); }
.detail-content { min-width: 0; }
.detail-statement-panel { border: 1px solid var(--line); border-radius: 10px; padding: 1.6rem; background: var(--surface); }
.detail-statement-heading { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); }
.detail-statement-heading h2 { font-size: .8rem; font-weight: 600; }
.detail-statement-heading > span { font-size: .72rem; }
.detail-classification { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.detail-difficulty { font-size: .73rem; padding: .3rem .6rem; border-radius: 5px; box-shadow: 0 0 0 1px #ffffff25; }
.detail-statement { font-family: "Nunito", Arial, sans-serif; font-size: .92rem; line-height: 1.6; margin: 2rem 0; overflow-x: auto; }
.detail-attempt { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.7rem 0; border-bottom: 1px solid var(--line); }
.detail-attempt h2 { margin-bottom: .4rem; }
.detail-attempt p, .detail-notes p { font-size: .8rem; color: var(--muted); margin: 0; line-height: 1.6; }
.detail-attempt .primary-button { white-space: nowrap; }
.detail-notes { padding: 1.7rem 0; }
.detail-notes h2 { margin-bottom: .4rem; }
.rating-guide { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 1rem; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.rating-guide span { display: grid; gap: .4rem; padding: .85rem; font-size: .7rem; color: var(--muted); border-right: 1px solid var(--line); }
.rating-guide span:last-child { border: 0; }
.rating-guide strong { font-size: .85rem; font-weight: 600; color: var(--ink); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.5rem; }
.dashboard-panel { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 1.5rem; margin-bottom: 1.4rem; }
.dashboard-panel h2 { font-size: 1rem; margin: 0; font-weight: 600; }
.dashboard-panel p { color: var(--muted); font-size: .85rem; line-height: 1.7; }
.dashboard-panel-header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.1rem; }
.dashboard-panel-header a { color: var(--accent); text-decoration: none; font-size: .75rem; }
.dashboard-welcome { background: var(--surface); padding: 1.5rem; }
.dashboard-welcome h2 { font-size: 1.6rem; letter-spacing: -.03em; }
.dashboard-welcome p { max-width: 34rem; margin: .7rem 0 1.4rem; }
.dashboard-list { display: grid; }
.dashboard-problem { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.dashboard-problem:last-child { border: 0; padding-bottom: 0; }
.dashboard-problem:hover strong { color: var(--accent); }
.dashboard-problem-copy { display: grid; gap: .45rem; flex: 1; min-width: 0; }
.dashboard-problem strong { font-size: .9rem; font-weight: 600; }
.dashboard-problem small { color: var(--muted); font-size: .7rem; }
.dashboard-difficulty { flex-shrink: 0; height: 28px; width: 7px; background: var(--difficulty-color); border-radius: 3px; box-shadow: 0 0 0 1px #ffffff25; }
.dashboard-stats { display: flex; gap: 2rem; margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.dashboard-stats span { display: grid; gap: .35rem; color: var(--muted); font-size: .73rem; }
.dashboard-stats strong { color: var(--ink); font-size: 1.3rem; font-weight: 600; }
.dashboard-panel .rating-guide { grid-template-columns: repeat(2, 1fr); }
.dashboard-panel .rating-guide span { border-bottom: 1px solid var(--line); }
.dashboard-tool { color: var(--accent); text-decoration: none; font-size: .85rem; }
.dashboard-footnote { font-size: .7rem; color: var(--muted); }
.app-page .auth-main { font-family: "Nunito", Arial, sans-serif; }
.app-page .auth-shell { border: 1px solid var(--line); box-shadow: none; background: var(--surface); }
.app-page .auth-shell-sign-in .auth-form-panel { padding: 2rem; }
.app-page .auth-input { border-color: var(--line); border-radius: 6px; }
.app-page .settings-layout { gap: 2rem; }
.app-page .settings-heading, .app-page .settings-navigation { border-color: var(--line); }
@media (max-width: 1100px) {
  .app-page .nav-shell { padding: .7rem 1rem; grid-template-columns: auto 1fr; row-gap: .6rem; }
  .app-page .nav-future { grid-row: 2; grid-column: 1 / -1; }
  .app-page .nav-account-cluster { grid-column: 2; grid-row: 1; }
  .app-page .practice-filter-row { flex-direction: column; }
  .app-page .difficulty-filter-area { flex: auto; width: min(420px, 100%); }
}
@media (max-width: 760px) {
  .intro-note { display: none; }
  .app-page .practice-main, .dashboard-main, .problem-detail { width: calc(100% - 2rem); }
  .page-intro { padding: 2rem 0 1.5rem; }
  .app-page .practice-toolbar { align-items: start; }
  .app-page .practice-toolbar-left { flex-direction: column; align-items: stretch; }
  .app-page .practice-sort-control { align-self: start; }
  .app-page .practice-search-control { min-width: 0; flex-wrap: wrap; }
  .app-page .practice-search-box { flex-basis: 100%; min-height: 42px; }
  .app-page .practice-search-popup { width: min(540px, calc(100vw - 4.5rem)); }
  .app-page .practice-settings { width: min(340px, calc(100vw - 4rem)); }
  .app-page .problem-result-row { padding: 1rem; }
  .app-page .practice-page-status { display: none; }
  .detail-layout, .dashboard-grid { grid-template-columns: 1fr; }
  #detail-variants { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .detail-sidebar > p { display: none; }
  .detail-statement-panel { padding: 1.2rem; }
  .detail-attempt { flex-direction: column; align-items: stretch; }
  .dashboard-welcome { padding: 1.5rem; }
  .app-page .primary-nav { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .app-page * { transition: none !important; scroll-behavior: auto !important; } }

/* Compact browsing and navigation. */
.app-page .page-intro { align-items: center; padding: 1.8rem 0 1.2rem; }
.app-page .page-intro h1 { font-size: 1.7rem; margin: 0; }
.app-page .nav-shell { column-gap: 1.5rem; }
.app-page .primary-nav { gap: .1rem; }
.app-page .nav-menu-button, .app-page .primary-nav-link {
  position: relative; min-height: 38px; border-radius: 0;
  padding-inline: .65rem; letter-spacing: 0;
}
.app-page .nav-menu-button::before, .app-page .primary-nav-link::before {
  content: ""; position: absolute; left: .65rem; bottom: 3px;
  width: 10px; height: 2px; background: var(--accent); opacity: 0;
}
.app-page .nav-menu-button:is(:hover, [aria-expanded="true"], .is-current)::before,
.app-page .primary-nav-link:is(:hover, [aria-current="page"])::before { opacity: 1; }
.app-page .nav-menu-button[aria-expanded="true"] { background: var(--surface); }
.app-page .nav-dropdown {
  top: 100%; left: 0; transform: translateY(-3px);
  padding: .35rem; border: 0; border-radius: 0 8px 8px 8px;
  background: var(--surface); box-shadow: 5px 7px 0 #080e1740;
}
.app-page .nav-dropdown.is-open { transform: translateY(0); }
.app-page .nav-dropdown a { padding: .65rem .8rem; border-radius: 3px; }
.app-page .nav-dropdown a:hover { background: var(--surface-active); }
.app-page .practice-search-panel { background: transparent; padding: 0 0 1.2rem; border: 0; border-radius: 0; }
.app-page .practice-filter-row { flex-direction: column; gap: .8rem; }
.app-page .subject-filter-area { flex-direction: row; align-items: baseline; width: 100%; }
.app-page .subject-filter-area > .filter-label { min-width: 65px; }
.app-page .difficulty-filter-area { width: min(400px, 100%); flex: auto; }
.app-page .practice-results-section { margin-top: .5rem; }
.app-page .practice-results { gap: .6rem; }
.app-page .problem-result-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "heading meta" "statement statement" "footer footer";
  gap: .7rem 1.5rem; padding: 1rem 1.2rem; border-radius: 5px;
  background: var(--surface-deep);
}
.app-page .problem-result-row:hover { background: var(--surface); }
.app-page .problem-result-heading { grid-area: heading; }
.app-page .problem-result-heading h2 { font-size: 1rem; }
.app-page .problem-result-title-line { justify-content: flex-start; gap: .6rem; }
.app-page .problem-result-meta { grid-area: meta; justify-content: flex-end; align-self: start; max-width: 440px; }
.app-page .variant-difficulty-list { flex: initial; justify-content: flex-end; }
.app-page .problem-result-statement { grid-area: statement; margin: 0; color: var(--ink); }
.app-page .problem-result-footer { grid-area: footer; margin: 0; }
.app-page .result-badge { width: 19px; height: 19px; font-size: .6rem; border-radius: 4px; }
.app-page .detail-heading { position: relative; padding-right: 50px; margin: 1.4rem 0; }
#detail-settings-slot { position: absolute; right: 0; top: 0; }
.detail-statement[data-preview-lines="4"] {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.detail-variant-link.without-difficulty { border-left: 1px solid var(--line); }
.dashboard-welcome .dashboard-stats { border: 0; padding: 0; margin: 1rem 0 1.4rem; }
.dashboard-welcome h2 { font-size: 1rem; }
.dashboard-panel .dashboard-tool { display: inline-block; margin-top: 1rem; }
.premium-main { width: min(1160px, calc(100% - 2.5rem)); margin: 0 auto; padding-bottom: 3rem; }
.billing-options { display: flex; border: 1px solid var(--line); border-radius: 6px; padding: .2rem; gap: .2rem; margin: 0; }
.billing-options label { padding: .5rem .75rem; font-size: .8rem; cursor: pointer; border-radius: 4px; }
.billing-options label:has(input:checked) { background: var(--surface-active); color: var(--ink); }
.billing-options input { accent-color: var(--accent); margin: 0 .3rem 0 0; }
.plan-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 7px; }
.plan-table { width: 100%; min-width: 720px; border-collapse: collapse; text-align: left; font-size: .85rem; }
.plan-table th, .plan-table td { padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
.plan-table thead { background: var(--surface); }
.plan-table thead th { width: 19%; font-size: 1rem; padding-block: 1.5rem; font-weight: 600; }
.plan-table tbody th { font-weight: 400; color: var(--muted); }
.plan-table td { color: var(--ink); }
.plan-table .plan-section th { background: var(--surface); color: var(--ink); font-size: .78rem; font-weight: 700; }
.plan-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
.plan-price { font-size: 2rem; font-weight: 600; margin: 1rem 0 .15rem; font-variant-numeric: tabular-nums; }
.plan-period { font-size: .73rem; font-weight: 400; color: var(--muted); }
.plan-note { font-size: .8rem; color: var(--muted); line-height: 1.6; }
.membership-summary { padding: 1rem 0 1.5rem; }
.membership-summary h2, .membership-admin h2 { margin: 0 0 .8rem; font-size: 1rem; }
.membership-summary p { margin: .4rem 0; font-size: .85rem; color: var(--muted); }
.membership-admin { margin-top: 2rem; max-width: 600px; border: 1px solid var(--line); padding: 1.4rem; border-radius: 6px; }
.membership-admin label { font-size: .8rem; }
.member-form-row { display: flex; gap: .7rem; margin: .5rem 0 1rem; }
.member-form-row input, .member-form-row select { min-width: 0; flex: 1; padding: .6rem; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; }
#member-target { font-size: .95rem; }
#member-role-form { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
#member-admin-status { font-size: .8rem; color: var(--muted); }
@media (max-width: 860px) {
  .app-page .problem-result-row { grid-template-columns: 1fr; grid-template-areas: "heading" "meta" "statement" "footer"; }
  .app-page .problem-result-meta, .app-page .variant-difficulty-list { justify-content: flex-start; max-width: none; }
  .app-page .subject-filter-area { flex-direction: column; gap: .4rem; }
}