:root { --ink:#18364b; --muted:#4f6879; --blue:#315f83; --green:#3d6d79; --gold:#a98a59; --red:#a34b4a; --paper:#f3f7fa; --paper-deep:#e0eaf1; --line:rgba(70,105,130,.22); }
.eyebrow,.nav-item.active span { color:#315f83; }
.status-kicker { background:#e2edf5; color:#315f83; }
.goal-track span { background:linear-gradient(90deg,#315f83,#82a7c2); }
.brand-mark,.primary-button { box-shadow:0 7px 18px rgba(44,88,120,.18); }
.daily-card::after { color:rgba(55,105,142,.05); }
.ink-card small,.ink-card p { color:#d2e3ee; }
body { background:#d9e6ee; color:var(--ink); }
body::before { content:""; position:fixed; inset:-10px; z-index:-2; pointer-events:none; background:url('fuji-background.png') center center/cover no-repeat; filter:saturate(.32) contrast(.8) brightness(1.15) blur(2px); }
body::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(120deg,rgba(229,239,246,.72),rgba(242,247,250,.52) 60%,rgba(222,235,244,.66)); }
.paper-card,.sidebar,.mobile-header,.mobile-nav,.course-node,.word-row,.filter-bar,.conj-control,.settings-card { background:rgba(247,251,255,.84); border:1px solid rgba(255,255,255,.78); box-shadow:0 9px 32px rgba(26,62,87,.07),inset 0 1px 0 rgba(255,255,255,.94); backdrop-filter:blur(22px) saturate(.8); -webkit-backdrop-filter:blur(22px) saturate(.8); }
.sidebar { background:rgba(233,242,248,.86); }
.brand-mark,.primary-button,.mode-icon.vermilion { background:#315f83; }
.ink-card { background:linear-gradient(135deg,#254d69,#426d89); }
.daily-card { background:rgba(247,251,255,.9); }
.nav-item.active,.course-node.active { background:#d9e9f3; color:#163e5b; }
.special-module-icon { background:#e1edf4; color:#315f83; }
.home-pos-label { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:14px; font-size:12px; font-weight:700; }
select,input,textarea { color:var(--ink); }
.home-pos-label select,.guide-toolbar select,.guide-toolbar input,.guide-toolbar button { min-height:42px; border:1px solid var(--line); border-radius:10px; padding:8px 12px; background:rgba(255,255,255,.94); }
.guide-banner { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:25px; margin:24px 0; }
.guide-banner h2 { font-size:24px; margin:8px 0; }
.guide-banner p,.guide-note { color:var(--muted); line-height:1.7; }
.guide-modules { grid-template-columns:repeat(2,minmax(0,1fr)); }
.guide-toolbar { display:flex; flex-wrap:wrap; align-items:end; gap:12px; margin-bottom:20px; }
.guide-toolbar label { display:grid; gap:7px; font-size:12px; }
.guide-toolbar input { min-width:210px; }
.guide-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:18px; }
.guide-tile { padding:24px; }
.guide-tile h2,.guide-tile h3 { margin:10px 0; line-height:1.45; }
.guide-tile p { line-height:1.75; }
.guide-chip { display:inline-block; padding:5px 9px; margin:3px; font-size:11px; border-radius:7px; background:#dfeaf2; color:#2b536d; }
.guide-path { display:grid; gap:10px; max-height:72vh; overflow:auto; }
.guide-layout { display:grid; grid-template-columns:minmax(230px,.65fr) minmax(0,1.8fr); gap:20px; align-items:start; }
.guide-stage { padding:clamp(22px,4vw,42px); min-height:420px; background:rgba(250,252,255,.94); }
.guide-stage h2 { font-size:26px; line-height:1.5; margin:10px 0 18px; }
.guide-stage details { margin:14px 0; padding:14px; border:1px solid var(--line); border-radius:12px; }
.guide-stage summary { cursor:pointer; font-weight:750; line-height:1.6; }
.guide-source { font-size:12px; color:#315f83; }
.guide-example { padding:17px; margin:12px 0; border-left:3px solid #6792ae; border-radius:0 10px 10px 0; background:#e9f1f7; line-height:1.9; }
.guide-original { white-space:pre-wrap; line-height:1.9; font-size:14px; max-height:400px; overflow:auto; }
.guide-question { font-size:clamp(21px,2.4vw,29px); line-height:1.8; margin:24px 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.guide-options { display:grid; gap:10px; margin:20px 0; }
.guide-options button { width:100%; text-align:left; padding:15px 18px; border:1px solid #c5d5e0; background:#fff; border-radius:12px; color:var(--ink); line-height:1.7; cursor:pointer; }
.guide-options button.correct { background:#deefe9; border-color:#5b8c7b; }
.guide-options button.wrong { background:#fae7e5; border-color:#b36d6a; }
.guide-answer-form { display:flex; gap:10px; flex-wrap:wrap; }
.guide-answer-form input,.guide-correction { min-width:180px; flex:1; padding:14px; border:1px solid #b9ccd9; border-radius:10px; font-size:18px; }
.guide-feedback { padding:20px; margin-top:20px; background:#e8f2ee; border-radius:12px; line-height:1.8; }
.guide-feedback.wrong { background:#f8e9e6; }
.guide-feedback .primary-button { margin-top:14px; }
.exam-shell { background:rgba(249,252,255,.98); padding:20px; }
.exam-top { position:sticky; top:0; z-index:8; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; background:rgba(241,247,251,.98); padding:14px; border:1px solid var(--line); border-radius:13px; }
.exam-clock { font-variant-numeric:tabular-nums; font-size:23px; font-weight:800; }
.exam-workspace { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; margin-top:18px; align-items:start; }
.exam-paper { width:100%; height:78vh; border:1px solid var(--line); border-radius:10px; background:white; }
.exam-pages-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 0; }
.exam-pages-toolbar select { padding:8px; border:1px solid var(--line); border-radius:8px; background:white; }
.exam-page-scroll { height:74vh; overflow:auto; background:#fff; border:1px solid var(--line); border-radius:10px; }
.exam-page-scroll img { display:block; width:100%; height:auto; }
.exam-page-scroll.zoomed img { width:1300px; max-width:none; }
.exam-sheet { max-height:78vh; overflow:auto; padding:15px; background:#f3f7fb; border:1px solid var(--line); border-radius:12px; }
.exam-row { display:grid; grid-template-columns:42px repeat(4,1fr) 27px; gap:5px; align-items:center; padding:7px 0; border-bottom:1px solid #d6e1e9; }
.exam-row button { padding:7px 0; border:1px solid #aabfce; border-radius:6px; background:#fff; cursor:pointer; }
.exam-row button.selected { background:#315f83; color:white; border-color:#315f83; }
.exam-row button.flagged { background:#f2e3bd; }
.exam-row span { font-size:12px; font-weight:750; }
.exam-review-row { padding:15px 0; border-bottom:1px solid var(--line); line-height:1.8; }
.exam-audio { width:100%; margin:15px 0; }
.exam-section-controls { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.guide-notice { padding:16px 18px; background:#e4eef6; border:1px solid #bfcedb; border-radius:12px; margin-bottom:18px; line-height:1.8; }
.source-viewer { width:100%; min-height:70vh; border:1px solid var(--line); border-radius:14px; background:white; }
.source-text { white-space:pre-wrap; line-height:1.8; background:rgba(255,255,255,.94); padding:22px; max-height:70vh; overflow:auto; }
.empty-state { padding:30px; text-align:center; }
.mobile-nav { grid-template-columns:repeat(5,1fr); }
[hidden] { display:none !important; }
@media(max-width:1050px) { .exam-workspace { grid-template-columns:1fr; } .exam-sheet { max-height:390px; } .exam-paper { height:65vh; } }
@media(max-width:760px) { .guide-layout { grid-template-columns:1fr; } .guide-path { max-height:240px; grid-template-columns:repeat(2,minmax(0,1fr)); } .guide-modules { grid-template-columns:1fr; } .guide-banner { display:block; } .guide-banner button { margin-top:12px; } .guide-stage { padding:20px; } .exam-shell { padding:10px; } body::before { background-position:58% center; } }
@media(prefers-reduced-transparency:reduce) { .paper-card,.sidebar,.mobile-nav,.mobile-header { background:#f3f7fb; backdrop-filter:none; -webkit-backdrop-filter:none; } }