/* All-site refinement: recognizable destinations, comfortable reading, reachable actions. */
:root { --ux-accent:#254e78; --ux-ink:#20334b; --ux-muted:#4e627b; --ux-paper:#f3f6fa; --ux-line:#c5d2e0; --klein:#254e78; }
body { overflow-wrap:break-word; }
.education-ui :is(.warning-box,.alert-box,.notice,.warning,.alert) > div { min-width:0; }
.education-ui p { overflow-wrap:anywhere; }
body :is(button, .button, .btn, .btn-primary, .portal-primary, .portal-learning-link) { min-height:44px; transition:background-color 160ms ease-out, color 160ms ease-out; }
body :is(button, .button, .btn, .btn-primary):active:not(:disabled) { transform:translateY(1px); }
body :is(button, input, textarea, select, a, summary):focus-visible { outline:3px solid var(--g-accent, var(--ux-accent)); outline-offset:3px; }
body button:disabled { opacity:.55; cursor:not-allowed; }
body :is(h1,h2,h3) { text-wrap:balance; }
.ux-skip { position:fixed; left:16px; top:12px; z-index:30; transform:translateY(-160%); padding:12px 20px; background:#f8fafb; color:var(--ux-ink); border-radius:10px; }
.ux-skip:focus { transform:none; }
.ux-site-nav { max-width:1240px; margin:0 auto; padding:18px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; color:var(--ux-ink); text-align:left; }
.ux-site-nav > a { font-weight:700; text-decoration:none; white-space:nowrap; }
.ux-site-nav nav { display:flex; flex-wrap:wrap; gap:8px 16px; }
.ux-site-nav nav a { min-height:44px; display:inline-flex; align-items:center; padding:6px 8px; text-decoration:none; color:var(--ux-muted); border-radius:10px; }
.ux-site-nav [aria-current=page] { color:var(--ux-accent); background:#e0e8ee; font-weight:700; }
.ux-context { display:flex; align-items:center; gap:12px; padding:12px 0 18px; color:var(--g-muted,var(--ux-muted)); font-size:14px; }
.ux-context svg { width:24px; height:24px; flex:none; stroke:currentColor; fill:none; stroke-width:1.6; }
.ux-context strong { color:var(--g-text,var(--ux-ink)); font-weight:700; }
.ux-context span { border-left:1px solid currentColor; padding-left:12px; }
.ux-contents { margin:24px 0; padding:16px 20px; background:#e8edf0; border-radius:16px; color:var(--ux-ink); }
.ux-contents strong { display:block; margin-bottom:8px; }
.ux-contents a { display:inline-flex; align-items:center; min-height:44px; margin-right:18px; color:var(--ux-accent); }
.ux-reading :is(article, .content-section, .faq-answer, .section) p { max-width:75ch; line-height:1.9; }
.education-ui { color:var(--ux-ink); background:var(--ux-paper); font-family:'PingFang SC','Microsoft YaHei',sans-serif; }
.education-ui:not(.portal-page) { --j-forest:var(--ux-accent); --j-forest-deep:#193b60; --j-paper:var(--ux-paper); --j-surface:#fbfcfe; --j-ink:var(--ux-ink); --j-line:var(--ux-line); --j-muted:var(--ux-muted); }
.education-ui:not(.portal-page) :is(.container > header, .hero, .cta-section) { background:#e3eaf0; color:var(--ux-ink); }
.education-ui .site-hero { background:#e3eaf0; color:var(--ux-ink); }
.education-ui .site-hero :is(.site-brand,h1,.subtitle,.hero-nav a,.brand-sub,.hero-footnotes,.hero-footnotes strong) { color:var(--ux-ink); }
.education-ui:not(.portal-page) :is(h1,h2,h3,.subtitle) { color:var(--ux-ink); }
.education-ui:not(.portal-page) :is(.card,.content-section,.faq-item,.section,.info-card) { background:#fbfcfe; color:var(--ux-ink); }
.education-ui :is(.btn,.btn-primary) { background:var(--ux-accent); color:#f8fafb; border:1px solid transparent; }
.education-ui .btn-quiet { background:#e5ebef; color:var(--ux-ink); }
.education-ui .controls { background:#e9eef1; gap:16px; }
.education-ui .control-group { min-width:0; }
.education-ui :is(input,select) { min-height:44px; }
.education-ui thead th { background:var(--ux-accent); color:#f8fafb; }
.education-ui .faq-question { width:100%; color:var(--ux-ink); text-align:left; font:600 16px/1.7 'Microsoft YaHei',sans-serif; border:0; background:transparent; cursor:pointer; }
.education-ui .faq-question[aria-expanded=true] { background:#e5edf1; }
.education-ui :is(.back,.back-link) { display:inline-flex; align-items:center; min-height:44px; color:var(--ux-accent); }
.education-ui.ux-reading { background:#f3f6fa; }
.education-ui.ux-legal { max-width:880px; padding:24px; margin:auto; line-height:1.9; }
.education-ui.ux-404 { display:block; background:#eef2f4; }
.ux-404 .container { margin:clamp(32px,8vh,100px) auto; color:var(--ux-ink); }
.ux-404 .error-code { color:var(--ux-accent); }
.portal-page { --klein:#254e78; --portal-ink:#20334b; --portal-muted:#4e627b; --portal-paper:#f3f6fa; --portal-line:#c5d2e0; }
.portal-page .portal-hero { min-height:300px; background:#254e78; }
.portal-page .portal-hero h1 { font-family:'PingFang SC','Microsoft YaHei',sans-serif; font-weight:700; font-size:clamp(30px,3.6vw,48px); letter-spacing:0; }
.portal-page .portal-path h2 { font-family:'PingFang SC','Microsoft YaHei',sans-serif; font-weight:600; font-size:clamp(23px,2.4vw,30px); }
.portal-page .portal-hero-index { border-color:#a0b6c7; }
.portal-page .portal-eyebrow { display:none; }
.portal-page .portal-paths { gap:24px; padding-block:32px; }
.portal-page .portal-path { padding:26px; background:#fbfcfe; }
.portal-page .learning-path { background:#e7eef7; }
.portal-page .portal-path-label { border:0; padding:0; font-size:15px; font-weight:700; letter-spacing:0; }
.portal-page .portal-link-list a:hover { background:#d9e5ed; }
.portal-page .portal-link-list svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.5; flex:none; }
.portal-page .portal-learning-link { background:#254e78; color:#f8fafb; padding:12px 16px; border:0; gap:24px; }
.game-ui .ux-context { margin-bottom:12px; border-bottom:1px solid var(--g-rule,var(--line)); }
.game-ui :is(header,.topbar) nav a { min-height:44px; display:inline-flex; align-items:center; padding:6px 8px; }
.game-ui .mode .eyebrow { font-family:inherit; font-size:14px; font-weight:700; letter-spacing:0; }
.game-ui .mode { background:var(--g-panel,var(--panel)); }
.game-ui .mode .mode-symbol { width:36px; height:36px; display:block; margin-bottom:12px; stroke:var(--g-accent,var(--gold)); fill:none; stroke-width:1.5; }
.game-ui .mode .button { min-width:132px; }
html[data-game-theme] .game-ui :is(button.primary,.button.primary) { background:var(--g-accent); color:var(--g-bg); border-color:var(--g-accent); }
html[data-game-theme] .game-ui :is(button.primary,.button.primary):hover:not(:disabled) { background:var(--g-accent); color:var(--g-bg); filter:brightness(.92); }
html[data-game-theme] .game-ui button:disabled { background:var(--g-board); color:var(--g-muted); opacity:1; }
html[data-game-theme] .game-ui :is(.button,button):not(.primary):not(.clue):not(.pin):not(.lesson-link):hover:not(:disabled) { background:var(--g-board); color:var(--g-text); }
.game-ui :is(button,.button):hover:not(:disabled) { filter:brightness(.97); }
.game-ui .actions .primary { padding:10px 18px; box-shadow:none; transform:none; }
.game-ui .actions .primary::after { content:none; }
.game-ui .actions .primary:active:not(:disabled) { transform:translateY(1px); }
.game-ui .actions small { font-size:12px; }
.game-ui .query-help,.game-ui .mobile-reference { padding:10px 0; border-block:1px solid var(--g-rule,var(--line)); }
.game-ui.case-page .results:empty::before { content:'尚未查询。输入 SQL 后点击执行，记录会显示在这里。'; display:block; padding:12px 0; font-size:13px; color:var(--g-muted,var(--muted)); }
.portal-page .portal-footer { width:100%; padding-inline:clamp(20px,4vw,50px); flex-wrap:wrap; }
.portal-page .portal-footer div { flex-wrap:wrap; }
.portal-page .portal-footer a { display:inline-flex; align-items:center; min-height:44px; }
.game-ui .opponent-row { display:block; margin-block:4px; }
.game-ui #opponent-progress { max-height:160px; overflow:auto; min-width:0; flex:1 1 260px; padding:4px 8px; scrollbar-gutter:stable; }
.game-ui #match-ranking { margin-top:20px; padding-top:16px; border-top:1px solid var(--g-rule,var(--line)); }
.game-ui .match-results { padding:20px; margin-bottom:20px; background:var(--g-panel,var(--panel)); border-radius:16px; box-shadow:0 6px 20px rgb(0 0 0 / 5%); }
.game-ui .match-results h2 { margin:0 0 12px; }
.game-ui #case-ranking-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:12px; }
.game-ui #case-ranking-list p { margin:0; line-height:1.8; }
.game-ui .scene,.game-ui .practice,.game-ui .invite-box { box-shadow:0 6px 20px rgb(0 0 0 / 5%); }
.game-ui .training-layout { gap:20px; }
.ux-course-toggle { display:none; }
.game-ui .practice label { display:block; margin-top:16px; font-weight:600; }
.game-ui .invite-box > small { display:block; line-height:1.8; }
.game-ui .duel-steps { display:flex; flex-wrap:wrap; gap:12px; padding:0; list-style:none; margin:24px 0 12px; }
.game-ui .duel-steps li { padding:10px 14px; border-radius:10px; background:var(--g-panel,var(--panel)); font-size:14px; }
.game-ui .duel-steps [aria-current=step] { background:var(--g-accent,var(--gold)); color:var(--g-bg,var(--bg)); font-weight:700; }
.game-ui .rules-detail { font-size:13px; }
@media(max-width:900px) {
 .ux-course-toggle { display:inline-flex; margin-bottom:12px; }
 .game-ui .curriculum.ux-collapsed { display:none; }
}
@media(max-width:650px) {
 .ux-site-nav { flex-direction:column; align-items:flex-start; padding:16px; gap:8px; }
 .ux-site-nav nav { gap:4px; }
 .ux-context { flex-wrap:wrap; gap:8px; font-size:13px; }
 .ux-context span { flex-basis:100%; border:0; padding-left:36px; }
 .portal-page .portal-path { padding:22px; }
 .education-ui .controls { align-items:stretch; }
 .education-ui .control-group { width:100%; }
 .education-ui .control-group :is(input,select) { width:100%; }
 .game-ui .duel-steps { gap:8px; }
 .game-ui .duel-steps li { flex:1; min-width:80px; }
}
@media(prefers-reduced-motion:reduce) { body * { transition:none!important; scroll-behavior:auto!important; } }