/* SOYLE reference: white canvas, black typography and electric blue accents.
   Character strokes use the same electric blue in app.js. */
:root{
  --ink:#111111;
  --muted:#65676e;
  --accent:#0b5aff;
  --accent-dark:#0848d6;
  --accent-soft:#eef4ff;
  --teal:var(--accent);
  --teal-dark:var(--accent-dark);
  --sage:#f7f8fa;
  --light:#ffffff;
  --white:#ffffff;
  --line:#e6e7eb;
  --orange:#f7f8fa;
  --shadow:0 8px 24px rgba(17,17,17,.04);
}
html,body,.app-shell,.layout-main,.main-content,.sidebar,.topbar,.mobile-nav{background:var(--white)}
body{color:var(--ink);font-family:"Segoe UI",QilinHanzi,"Microsoft YaHei",Arial,sans-serif}
::selection{background:#dce8ff;color:var(--ink)}
.brand-symbol{background:var(--accent);color:#fff;border-radius:13px}
.brand-symbol>span{display:none}
.brand-name{color:var(--ink);font-weight:850;letter-spacing:1.5px;text-transform:uppercase}
.brand-name small{text-transform:none;font-weight:500;letter-spacing:.6px;color:var(--muted)}
.page-title,.hero-title,.lesson-card h2,.lesson-card h3,.word-intro h2,.detail-heading h2,.progress-panel h2,dialog h2{color:var(--ink);font-weight:800}
.page-title{letter-spacing:-1.1px}
.nav-caption,.sidebar-foot,.footer,.page-desc,.eyebrow,.study-counter,.tiny-label{color:var(--muted)}
.sidebar,.topbar,.footer,.mobile-nav{border-color:var(--line)}
.nav-link{color:#494b52}
.nav-link:hover{background:#f7f8fa}
.nav-link.active{background:var(--accent-soft);color:var(--accent)}
.nav-link.active .nav-icon,.mobile-nav button.active{color:var(--accent)}
.small-quote{background:#fff;border-color:var(--line)}
.small-quote p{color:var(--muted)}
.small-quote span,.topbar-dot,.sparkle{color:var(--accent)}
.topbar-dot{background:var(--accent)}
.topbar-intro{color:#494b52}
.profile-avatar{background:var(--accent-soft);color:var(--accent)}
.button-primary,.chip.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:none}
.button-primary:hover,.chip.active:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.button-secondary{background:var(--accent-soft);color:var(--accent-dark);box-shadow:none}
.button-secondary:hover{background:#e1ebff}
.outline-button{background:#fff;color:var(--ink);border-color:#dcdfe5;box-shadow:none}
.outline-button:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-dark)}
.text-button,.see-link,.back-btn{color:var(--accent)}
.text-button:hover,.see-link:hover,.back-btn:hover{color:var(--accent-dark)}
.writer-mode[aria-pressed="true"],.writer-mode[aria-pressed="true"]:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.group-character{background:#fff;border-color:var(--line)}
.group-character:hover{border-color:#b4cbff;background:#f8faff}
.group-character.active{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent)}
.group-character.active strong{color:var(--accent)}
.group-character span,.word-intro>div>span,.detail-pinyin,.word-pinyin{color:var(--muted)}
.word-intro>strong,.lesson-characters,.word-symbol,.detail-big,.study-character,.component-picture,.quiz-symbol,.sentence-token,.tone-grid strong,.gloss-grid strong,.example-row strong{color:var(--ink)}
.word-card .word-symbol{color:var(--ink)}
.component-picture>strong{color:var(--ink)}
.component-hanzi b,.component-picture>small,.flow-arrow{color:#90939b}
.lesson-card,.word-card,.detail-left,.detail-right,.writing-panel,.quiz-card,.progress-panel,.lesson-study,.continue-row,.backup-panel{background:#fff;border-color:var(--line);box-shadow:none}
.lesson-card{border-radius:16px;transition:border-color .18s,box-shadow .18s}
.lesson-card:hover{border-color:#a8c2ff;box-shadow:0 6px 24px rgba(11,90,255,.055)}
.lesson-card p,.lesson-bottom,.group-footer p,.writing-summary p,.simple-intro,.group-record small,.stat p{color:var(--muted)}
.continue-row{border-radius:14px}
.continue-row p,.progress-panel p,.visual-mnemonic p,.visual-picture,.note-box{color:#494b52}
.visual-mnemonic,.note-box,.write-note,.gloss-grid>div,.home-banner,.tone-grid>div{background:#fff;border-color:var(--line)}
.memory-details>summary{color:var(--ink)}
.search-wrap,#share-link,select{background:#fff;color:var(--ink);border-color:#dcdfe5}
.search-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(11,90,255,.1)}
.search-wrap input:focus-visible{outline:none}
.search-wrap input::placeholder{color:#777a82;opacity:1}
.chip{background:#fff;border-color:var(--line);color:#494b52}
.progress-track{background:#edf0f5}
.progress-bar,.progress-meter>div{background:var(--accent)}
.group-record,.writing-summary,th,td{border-color:var(--line)}
.group-record strong,.goal-heading strong{color:var(--accent)}
.state-tag,.state-new,.state-seen{background:#f5f6f8;color:#65676e}
.state-practice,.state-steady,.done{background:var(--accent-soft);color:var(--accent-dark)}
.stat-green,.stat-orange,.stat-lilac{background:var(--accent-soft);color:var(--accent)}
.quiz-option{background:#fff;color:var(--ink);border-color:var(--line)}
.quiz-option:not(:disabled):hover{background:var(--accent-soft);border-color:var(--accent)}
.quiz-option.correct,.quiz-feedback{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-dark)}
.quiz-option.wrong,.quiz-feedback.wrong{background:#fff3f2;border-color:#b23a2f;color:#8f2b24}
.revealed-answer{background:#f7f8fa;color:var(--ink)}
.note-box.error,.writer-info.error{color:#8f2b24}
.mini-char.active{background:var(--accent);border-color:var(--accent);color:#fff}
.writer-area{background-color:#fff;border-color:#dcdfe5}
.home-hero{background:#fff;border-color:var(--line);box-shadow:var(--shadow)}
.hero-hanzi,.hero-title span{color:var(--ink)}
.hero-orbit,.hero-badge,.visual-tag,.sentence-target{background:#fff;border-color:var(--line);color:var(--ink)}
.lesson-steps span{background:#f7f8fa;color:var(--muted)}
.lesson-steps .active{background:var(--accent-soft);color:var(--accent)}
.toast{background:var(--ink);color:#fff}
dialog{background:#fff;color:var(--ink)}
dialog::backdrop{background:rgba(17,17,17,.45)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.mobile-nav button{color:var(--muted)}
.mobile-nav{box-shadow:0 -4px 24px rgba(17,17,17,.035)}
@media(max-width:650px){.page-title{letter-spacing:-.6px}.lesson-card{border-radius:14px}}
.blue-symbol{display:inline-block;width:20px;height:20px;color:var(--accent);vertical-align:middle;flex-shrink:0}
.blue-symbol.small{width:12px;height:12px;margin:0 3px}
.sparkle .blue-symbol{width:15px;height:15px}
.memo-icon .scene-svg{width:72px;height:60px}