:root {
  --ink: #19251f;
  --muted: #788078;
  --moss: #234338;
  --moss-deep: #172f28;
  --moss-wash: #dce5d9;
  --paper: #f7f4eb;
  --paper-deep: #ebe4d4;
  --sun: #e7ac49;
  --clay: #ba5e47;
  --rule: #d7d0c0;
  --serif: "Fraunces", "Noto Serif SC", Georgia, serif;
  --chinese-serif: "Noto Serif SC", "Songti SC", serif;
  --mono: "DM Mono", monospace;
  --shadow: 0 18px 50px rgba(25, 37, 31, .09);
}

html[lang="ko"] { --serif: "Fraunces", "Noto Serif KR", Georgia, serif; --chinese-serif: "Noto Serif KR", serif; }

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--moss-deep); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--chinese-serif); min-height: 100vh; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.paper-select { position: relative; width: 100%; min-width: 0; text-align: left; }
.paper-select-native { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; }
.paper-select-trigger { position: relative; width: 100%; min-height: 44px; display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: center; padding: 9px 5px 9px 13px; border: 1px solid #bdc9bb; color: var(--moss); background: linear-gradient(135deg, #fffef9, #f3f2e8); box-shadow: inset 3px 0 0 transparent; text-align: left; transition: border-color .2s, box-shadow .2s, background .2s; }
.paper-select-trigger:hover { border-color: #78907d; background: #fffdf5; }
.paper-select.is-open .paper-select-trigger { border-color: var(--moss); box-shadow: inset 3px 0 0 var(--clay); }
.paper-select-trigger:disabled { cursor: wait; opacity: .65; }
.paper-select-value { display: block; overflow: hidden; font: 500 12px/1.35 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.paper-select-chevron { width: 30px; height: 27px; display: grid; place-items: center; border-left: 1px solid #d8ddd2; color: var(--clay); font: 18px/1 var(--serif); transition: transform .2s; }
.paper-select.is-open .paper-select-chevron { transform: rotate(180deg); }
.paper-select-menu { position: absolute; z-index: 80; left: 0; top: calc(100% + 7px); width: max(100%, 230px); max-height: 280px; overflow-y: auto; padding: 7px; border: 1px solid #829184; color: var(--ink); background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,0)), #f5f1e5; box-shadow: 0 18px 38px rgba(20,39,31,.19); animation: select-unfold .16s ease both; }
.paper-select-menu::before { content: "SELECT ONE"; display: block; padding: 3px 8px 8px; color: #8b938a; font: 8px var(--mono); letter-spacing: .16em; }
.paper-select-menu[hidden] { display: none; }
.paper-select.opens-up .paper-select-menu { top: auto; bottom: calc(100% + 7px); transform-origin: bottom; }
.paper-select-option { width: 100%; min-height: 42px; display: grid; grid-template-columns: 28px minmax(0, 1fr) 20px; align-items: center; gap: 8px; padding: 7px 8px; border: 0; border-top: 1px solid #ddd7c9; color: #435249; background: transparent; text-align: left; transition: color .16s, background .16s, transform .16s; }
.paper-select-option:first-of-type { border-top: 0; }
.paper-select-option:hover, .paper-select-option:focus-visible { color: var(--moss-deep); background: #e4eadf; outline: 0; transform: translateX(2px); }
.paper-select-option.selected { color: #fffaf0; background: var(--moss); }
.paper-select-option:disabled { color: #a29e95; background: transparent; cursor: not-allowed; transform: none; }
.paper-select-index { color: var(--clay); font: 8px var(--mono); }
.paper-select-option.selected .paper-select-index { color: var(--sun); }
.paper-select-option-label { font: 500 11px/1.45 var(--mono); overflow-wrap: anywhere; }
.paper-select-check { color: var(--sun); text-align: center; font-size: 12px; }
@keyframes select-unfold { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.page-grain { pointer-events: none; position: fixed; inset: 0; opacity: .12; z-index: 10; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }

.sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 252px; padding: 38px 25px 27px; color: #f3f0e7; background: var(--moss-deep); display: flex; flex-direction: column; z-index: 4; }
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font: 500 16px/1 var(--mono); letter-spacing: .04em; white-space: nowrap; }
.brand-logo { width: 31px; height: 31px; display: block; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.42); border-radius: 7px; object-fit: cover; box-shadow: 0 5px 14px rgba(0,0,0,.2); }
.brand-name { display: flex; align-items: baseline; gap: 4px; }.brand-name b { font: 600 18px/1 var(--chinese-serif); letter-spacing: .06em; }.brand-name i { color: var(--sun); font-style: normal; }.brand-name { letter-spacing: .025em; }
.brand-caption { font: 500 11px/1.7 var(--mono); color: #abb8aa; letter-spacing: .04em; margin: 22px 0 54px 40px; }
.main-nav { display: grid; gap: 7px; }
.nav-item { border: 0; padding: 11px 9px; border-radius: 4px; background: transparent; color: #c9d0c7; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; text-align: left; gap: 8px; font-size: 14px; transition: background .2s, color .2s, transform .2s; }
.nav-item:hover { color: white; transform: translateX(3px); }
.nav-item.active { color: white; background: rgba(255,255,255,.1); }
.nav-icon { color: var(--sun); font: 18px/1 var(--serif); text-align: center; }
.nav-item kbd { font: 10px/1 var(--mono); opacity: .35; }
.nav-meta { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.nav-count { min-width: 20px; height: 20px; padding: 2px 5px; display: grid; place-items: center; color: var(--moss-deep); background: #d5ded2; border-radius: 100px; font: 10px var(--mono); }
.nav-count.warm { background: var(--sun); }
.nav-count[hidden] { display: none; }
.sidebar-bottom { margin-top: auto; }
.sidebar-app-switcher { display: grid; gap: 7px; padding: 17px 0 15px; border-top: 1px solid rgba(255,255,255,.16); }
.sidebar-app-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 3px; }
.sidebar-app-heading span { color: #dce5dc; font: 600 10px var(--chinese-serif); letter-spacing: .08em; }
.sidebar-app-heading small { color: #758b7e; font: 7px var(--mono); letter-spacing: .13em; }
.sidebar-app-option { width: 100%; min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 9px 8px; border: 1px solid transparent; color: #aebdb2; background: transparent; text-align: left; transition: border-color .2s, background .2s, color .2s, transform .2s; }
.sidebar-app-option:hover { color: #fff8e9; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.045); transform: translateX(2px); }
.sidebar-app-option.active { color: #fff8e9; border-color: rgba(231,172,73,.36); background: rgba(231,172,73,.09); }
.sidebar-app-option.is-disabled { cursor: not-allowed; opacity: .42; transform: none; }
.sidebar-app-mark { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); color: var(--sun); font: 600 13px var(--chinese-serif); }
.sidebar-app-option > span:nth-child(2) { min-width: 0; }
.sidebar-app-option b, .sidebar-app-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-app-option b { font: 500 11px var(--chinese-serif); }
.sidebar-app-option small { margin-top: 2px; color: #74897d; font: 6px var(--mono); letter-spacing: .08em; }
.sidebar-app-option i { color: #c9a65e; font: normal 7px var(--mono); letter-spacing: .06em; }
.mobile-app-switcher { display: none; }
.settings-nav { width: 100%; }

.content { margin-left: 252px; min-height: 100vh; padding: 50px clamp(30px, 5vw, 84px) 70px; max-width: 1700px; }
.view { display: none; animation: rise .48s ease both; }
.view.active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.view-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; margin-bottom: 42px; }
.view-header.compact { align-items: center; margin-bottom: 31px; }
.eyebrow { margin: 0 0 10px; color: #718174; font: 500 10px/1.2 var(--mono); letter-spacing: .13em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 11px; font: 600 clamp(26px, 3.36vw, 46px)/1.08 var(--serif); letter-spacing: -.045em; }
h1 em, h2 em, blockquote em { color: var(--clay); font-style: italic; font-weight: 500; }
h2 { font: 600 25px/1.15 var(--serif); letter-spacing: -.035em; margin-bottom: 0; }
.header-sub { margin: 0; color: #6b746d; font-size: 14px; line-height: 1.8; }
.round-action, .solid-button { border: 0; color: #fff; background: var(--moss); padding: 13px 19px; border-radius: 2px; transition: transform .2s, background .2s; font-size: 13px; white-space: nowrap; }
.round-action:hover, .solid-button:hover { background: #315a49; transform: translateY(-2px); }
.round-action span { margin-right: 7px; color: var(--sun); font: 22px/0 var(--serif); vertical-align: -2px; }
.round-action.soft { color: var(--moss); background: var(--moss-wash); }
.round-action.soft:hover { background: #c9d9c7; }
.review-mode-action { min-width: 190px; justify-content: center; border: 1px solid transparent; transition: color .2s, background .2s, border-color .2s, transform .2s; }
.review-mode-action span { color: var(--clay); font: 15px var(--serif); }
.review-mode-action b { font-weight: 500; }
.review-mode-action.is-active { color: #f7f3e8; border-color: var(--moss); background: var(--moss); box-shadow: inset 3px 0 0 var(--sun); }
.review-mode-action.is-active span { color: var(--sun); }
.review-mode-action:disabled { cursor: wait; opacity: .65; transform: none; }
.library-total { margin: 13px 0 0; color: #7a847b; font: 10px var(--mono); letter-spacing: .06em; }
.library-total strong { margin-right: 4px; color: var(--clay); font: 600 21px/1 var(--serif); letter-spacing: -.02em; }

.dashboard-grid { display: grid; grid-template-columns: minmax(280px, 1.3fr) minmax(230px, 1fr) minmax(160px, .56fr); grid-template-rows: repeat(3, 96px); gap: 16px; }
.paper-card, .section-card, .stat-card { background: #fcfaf4; border: 1px solid rgba(95, 107, 92, .12); box-shadow: 0 4px 17px rgba(28, 39, 31, .025); }
.daily-card { grid-row: span 3; padding: 24px 27px 21px; position: relative; overflow: hidden; }
.daily-card::after { content: ""; width: 120px; height: 120px; position: absolute; right: -48px; bottom: -42px; border: 1px solid var(--moss-wash); border-radius: 50%; }
.card-topline { display: flex; justify-content: space-between; }
.day-stamp { color: #848b83; font: 10px var(--mono); }
.progress-orbit { margin: -2px auto -4px; width: 141px; height: 141px; position: relative; }
.progress-orbit svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.orbit-bg, .orbit-progress { fill: none; stroke-width: 5; }
.orbit-bg { stroke: #e7eadf; }
.orbit-progress { stroke: var(--clay); stroke-linecap: round; stroke-dasharray: 307.9; stroke-dashoffset: 307.9; transition: stroke-dashoffset .8s ease; }
.orbit-text { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.orbit-text strong { font: 600 35px/1 var(--serif); letter-spacing: -.05em; }
.orbit-text span { margin-top: 5px; color: #798178; font: 9px var(--mono); }
.daily-card-foot { display: flex; justify-content: space-between; align-items: flex-end; border-top: 1px solid var(--rule); padding-top: 15px; }
.metric-label { display: block; color: #7d887e; font: 9px/1.2 var(--mono); letter-spacing: .1em; }
.daily-card-foot strong { display: block; margin-top: 5px; font: 600 17px var(--serif); }
.daily-card-foot i { color: var(--sun); font-style: normal; }
.tiny-link, .text-action, .text-button { border: 0; background: transparent; color: var(--moss); font: 500 12px var(--mono); padding: 0; }
.tiny-link span, .text-action span { color: var(--clay); margin-left: 3px; font-size: 16px; }
.quote-card { grid-column: 2; grid-row: span 3; color: #fff8e9; background: var(--clay); padding: 25px 28px; position: relative; overflow: hidden; }
.quote-card::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.28); width: 188px; height: 188px; right: -76px; bottom: -92px; border-radius: 50%; }
.quote-mark { color: #ffe2a7; margin: -14px 0 -5px; font: 71px/1 var(--serif); }
blockquote { margin: 0; font: 500 18px/1.65 var(--chinese-serif); letter-spacing: .02em; position: relative; z-index: 1; }
.quote-source { margin: 17px 0 0; font: 10px var(--mono); color: #ffe9c3; }
.quote-orbit { position: absolute; right: 18px; top: 20px; color: rgba(255,255,255,.6); font: 10px var(--mono); letter-spacing: .18em; transform: rotate(90deg); }
.stat-card { padding: 19px 21px; display: flex; flex-direction: column; justify-content: space-between; }
.stat-card strong { font: 600 39px/1 var(--serif); letter-spacing: -.05em; }
.stat-card small { color: #879087; font: 9px var(--mono); }
.token-card { position: relative; padding-top: 16px; background: linear-gradient(145deg, #f4f1e6 0%, #fcfaf4 70%); overflow: hidden; }
.token-card::after { content: "TOK"; position: absolute; right: -3px; top: 23px; color: rgba(83, 105, 86, .06); font: 600 43px/1 var(--serif); letter-spacing: -.08em; transform: rotate(-90deg); pointer-events: none; }
.token-card > strong { color: var(--moss-deep); font-size: 30px; }
.token-card-detail { position: relative; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: #69766b; font: 9px var(--mono); }
.token-card-detail b { color: var(--clay); font-weight: 500; }
.token-card > i { display: none; color: #959c93; font: 8px var(--mono); font-style: normal; }
.dashboard-lower { display: grid; grid-template-columns: 1.55fr 1fr; gap: 17px; margin-top: 17px; }
.section-card { padding: 25px 27px; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.legend { color: #7f887f; font: 10px var(--mono); }
.legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--moss); margin: 0 5px 0 8px; }.legend .review-dot { background: var(--sun); }
.activity-chart { height: 145px; margin-top: 22px; display: flex; align-items: end; gap: clamp(7px, 1.4vw, 18px); border-bottom: 1px solid #e4dfd3; padding: 0 4px 18px; }
.chart-day { height: 100%; flex: 1; min-width: 26px; display: grid; grid-template-rows: 1fr 16px; gap: 8px; text-align: center; }
.chart-poles { display: flex; align-items: end; justify-content: center; gap: 3px; }.chart-poles i { width: 8px; min-height: 3px; background: var(--moss); border-radius: 2px 2px 0 0; transition: height .4s; }.chart-poles i:last-child { background: var(--sun); }.chart-day span { color: #8a9189; font: 8px var(--mono); }
.status-bars { display: grid; gap: 15px; margin: 25px 0 20px; }.status-line { display: grid; grid-template-columns: 60px 1fr 28px; align-items: center; gap: 10px; color: #657066; font-size: 12px; }.status-line b { font: 10px var(--mono); text-align: right; }.bar-track { height: 6px; background: #e9e6dd; overflow: hidden; }.bar-fill { height: 100%; background: var(--moss); }.bar-fill.new { background: var(--sun); }.bar-fill.fuzzy { background: var(--clay); }.bar-fill.mastered { background: #769769; }
.recent-section { margin-top: 38px; }.recent-list { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--rule); margin-top: 17px; }.recent-word { min-width: 0; padding: 17px 15px 0 0; border-right: 1px solid var(--rule); margin-right: 15px; }.recent-word:last-child { border-right: 0; }.recent-word strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 18px var(--serif); }.recent-word span { color: #838d83; font: 10px var(--mono); }.recent-word p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #697269; margin: 8px 0; font-size: 11px; }.mini-status { font: 9px var(--mono); color: var(--clay); }

.lookup-shell { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 22px; }.lookup-form { padding: 31px 32px; background: #e5ebdf; border: 1px solid #d1dacd; }.lookup-form-head { display: flex; justify-content: space-between; align-items: start; gap: 18px; }.lookup-form > .lookup-form-head > label { display: block; color: #5c6a5e; margin-bottom: 15px; font: 10px var(--mono); letter-spacing: .13em; }.lookup-model-control { width: min(42vw, 460px); min-width: 260px; margin: -4px 0 9px; text-align: right; }.lookup-model-control > label span { display: block; color: #718072; margin-bottom: 6px; font: 9px var(--mono); letter-spacing: .12em; }.lookup-model-control .paper-select-menu { right: 0; left: auto; width: max(100%, 360px); }.lookup-model-note { min-height: 15px; color: #718072; margin: 9px 0 0; font: 10px/1.5 var(--mono); }.lookup-input-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; background: #fbfaf4; border-bottom: 2px solid var(--moss); }.lookup-input-wrap input { min-width: 0; border: 0; outline: 0; padding: 20px 18px 17px; color: var(--ink); background: transparent; font: 500 clamp(18px, 2.5vw, 27px)/1 var(--serif); }.lookup-input-wrap input::placeholder { color: #a5aaa0; font-size: .7em; }.search-button { min-width: 104px; border: 0; display: flex; align-items: center; justify-content: center; gap: 7px; color: #fff; background: var(--moss); padding: 0 17px; font-size: 13px; transition: background .2s, opacity .2s; }.search-button b { display: none; color: var(--sun); font-size: 20px; }.search-button:disabled { cursor: wait; opacity: 1; background: #315a49; }.search-button.is-loading b { display: inline-block; animation: lookup-spin 1s linear infinite; }.lookup-progress { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 11px; align-items: center; overflow: hidden; margin-top: 12px; padding: 11px 12px; color: #e9efe5; background: var(--moss-deep); }.lookup-progress::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34%; height: 2px; background: var(--sun); animation: lookup-travel 1.5s ease-in-out infinite; }.lookup-progress-mark { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(231,172,73,.45); border-radius: 50%; }.lookup-progress-mark i { width: 6px; height: 6px; border-radius: 50%; background: var(--sun); animation: lookup-pulse 1.1s ease-in-out infinite; }.lookup-progress strong, .lookup-progress small { display: block; }.lookup-progress strong { color: #fff8e9; font-size: 11px; font-weight: 500; }.lookup-progress small { margin-top: 3px; color: #afbeb2; font-size: 10px; line-height: 1.45; }.lookup-progress time { color: var(--sun); font: 10px var(--mono); }.context-toggle { margin-top: 15px; }.context-toggle button { border: 0; padding: 0; color: #52705d; background: transparent; font: 11px var(--mono); }.context-toggle textarea { width: 100%; display: none; resize: vertical; min-height: 78px; border: 1px solid #b8c5b7; background: #f7f8f3; margin-top: 10px; padding: 10px; outline: 0; color: var(--ink); font-size: 13px; }.context-toggle.open textarea { display: block; }.lookup-aside { padding: 27px 25px; color: #dce5d8; background: var(--moss-deep); }.lookup-aside p:not(.eyebrow) { font: 500 16px/1.8 var(--chinese-serif); }.lookup-aside em { color: var(--sun); font-style: normal; }.aside-lines { margin-top: 36px; height: 45px; opacity: .3; background: repeating-linear-gradient(0deg, transparent 0 9px, #cde1d1 10px 11px); }.lookup-empty { margin-top: 60px; text-align: center; color: #718075; }.empty-asterisk { color: var(--sun); font-size: 28px; }.lookup-empty p { margin: 12px 0 16px; font-size: 14px; }.chip { margin: 0 4px; padding: 7px 10px; border: 1px solid #cad3c6; color: #5a6a5d; background: transparent; font: 11px var(--mono); transition: .2s; }.chip:hover { background: var(--moss); color: white; }.hidden { display: none !important; }
.lookup-mode-control { min-width: 0; }.lookup-mode-control > label { display: block; color: #5c6a5e; margin-bottom: 11px; font: 10px var(--mono); letter-spacing: .13em; }.lookup-mode-switch { display: flex; align-items: stretch; border-bottom: 1px solid #b5c2b3; }.lookup-mode-button { min-width: 142px; display: grid; grid-template-columns: 23px 1fr; gap: 8px; align-items: center; border: 0; border-bottom: 3px solid transparent; padding: 8px 11px 9px; color: #738075; background: transparent; text-align: left; transition: color .18s, border-color .18s, background .18s; }.lookup-mode-button b { color: #9aa39a; font: 8px var(--mono); }.lookup-mode-button span { font: 500 12px var(--chinese-serif); }.lookup-mode-button small { display: block; margin-top: 3px; color: #929c93; font: 7px var(--mono); letter-spacing: .08em; }.lookup-mode-button:hover { color: var(--moss); background: rgba(255,255,255,.28); }.lookup-mode-button.active { color: var(--moss-deep); border-bottom-color: var(--clay); background: rgba(255,255,255,.48); }.lookup-mode-button.active b { color: var(--clay); }.lookup-mode-button:disabled { cursor: wait; opacity: .55; }.lookup-input-wrap { align-items: stretch; margin-top: 18px; transition: border-color .2s, box-shadow .2s; }.lookup-input-wrap:focus-within { border-color: var(--clay); box-shadow: 0 8px 24px rgba(43,70,57,.08); }.lookup-input-wrap textarea { min-width: 0; min-height: 67px; max-height: 67px; resize: none; overflow: hidden; border: 0; outline: 0; padding: 19px 18px 16px; color: var(--ink); background: transparent; font: 500 clamp(18px, 2.5vw, 27px)/1.15 var(--serif); white-space: nowrap; }.lookup-input-wrap textarea::placeholder { color: #a5aaa0; font-size: .7em; }.lookup-input-wrap.sentence-mode textarea { min-height: 150px; max-height: 310px; overflow-y: auto; resize: vertical; padding: 22px 23px; font-size: clamp(20px, 2.35vw, 31px); line-height: 1.25; white-space: pre-wrap; }.lookup-input-wrap.sentence-mode .search-button { min-width: 148px; }.search-button:hover { background: #315a49; }
.lookup-form-head { display: block; }.lookup-mode-control { width: min(100%, 520px); }.lookup-tools { display: grid; grid-template-columns: minmax(260px, .82fr) minmax(430px, 1.18fr); gap: 14px; align-items: stretch; margin-top: 14px; padding: 13px; border: 1px solid #c8d3c5; background: rgba(250,250,244,.68); }.lookup-tools .lookup-model-control { width: auto; min-width: 0; margin: 0; text-align: left; }.lookup-tools .lookup-model-control .paper-select-menu { right: auto; left: 0; width: max(100%, 320px); }.lookup-tools .lookup-model-note { min-height: 0; margin: 7px 0 0; }.lookup-tools .speech-quick { margin: 0; padding: 0 0 0 14px; border: 0; border-left: 1px solid #d1d9ce; background: transparent; }.lookup-input-wrap.sentence-mode textarea { min-height: 126px; max-height: 260px; padding: 18px 20px; font-size: clamp(16px, 1.4vw, 21px); line-height: 1.55; }
@keyframes lookup-spin { to { transform: rotate(360deg); } }
@keyframes lookup-pulse { 50% { transform: scale(1.8); opacity: .45; } }
@keyframes lookup-travel { 0% { transform: translateX(-110%); } 100% { transform: translateX(390%); } }
.lookup-result { margin-top: 32px; animation: rise .45s ease; }.result-top { display: flex; justify-content: space-between; align-items: start; gap: 24px; padding-bottom: 19px; border-bottom: 1px solid var(--rule); }.result-word h2 { margin: 0; font-size: clamp(35px, 5vw, 64px); }.result-meta { color: #788277; margin-top: 9px; font: 11px var(--mono); }.source-note { display: inline-block; margin: 14px 0 0; color: #657066; background: #e7ece3; padding: 5px 8px; font: 9px var(--mono); }.lookup-llm-note { margin: 8px 0 -2px; padding: 9px 11px; color: #5e6e60; border-left: 3px solid #aebcaf; background: #eef2eb; font-size: 11px; line-height: 1.6; }.lookup-llm-note b { color: var(--moss); font: 10px var(--mono); }.lookup-llm-note.success { color: #4e6b51; border-left-color: #78a276; background: #e5efe1; }.lookup-llm-note.warning { color: #7a5644; border-left-color: var(--clay); background: #f7e7d4; }.lookup-llm-note.warning b { color: #9b5039; }.save-button { border: 1px solid var(--moss); padding: 10px 15px; color: var(--moss); background: transparent; font-size: 12px; }.save-button.saved { color: #6a7a6c; border-color: #b3c2b0; background: #e6eee3; }.sentence-result-word { flex: 1; min-width: 0; }.sentence-title { margin-top: 12px !important; font-size: clamp(23px, 2.45vw, 36px) !important; line-height: 1.25; }.sentence-word { display: inline; border: 0; border-bottom: 1px solid rgba(180, 83, 57, .34); border-radius: 0; padding: 0 .025em; color: inherit; background: transparent; font: inherit; line-height: inherit; cursor: pointer; transition: color .16s, border-color .16s, background .16s; }.sentence-word:hover, .sentence-word:focus-visible { color: var(--clay); border-bottom-color: var(--clay); background: rgba(184, 91, 64, .08); outline: 0; }.sentence-pick-note { flex: 0 0 166px; padding: 13px 14px; border-top: 2px solid var(--sun); color: var(--moss); background: #edf1e8; }.sentence-pick-note strong, .sentence-pick-note span { display: block; }.sentence-pick-note strong { font: 12px var(--mono); }.sentence-pick-note span { margin-top: 7px; color: #718075; font-size: 11px; line-height: 1.55; }.sentence-back { margin-bottom: 16px; border: 0; padding: 0; color: var(--clay); background: transparent; font: 11px var(--mono); }.sentence-back:hover { color: var(--moss); }.sentence-breakdown { margin-top: 26px; padding: 18px 20px; border-left: 3px solid var(--sun); background: #f4efe2; }.sentence-examples { padding-top: 4px; }.sentence-examples .example-card + .example-card { margin-top: 8px; }.result-empty { color: #8a938a; font-size: 12px; }.notice { margin: 15px 0 0; padding: 11px 13px; border-left: 3px solid var(--sun); color: #6b725f; background: #faf4df; font-size: 12px; }.meaning-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 45px; padding: 28px 0; }.meaning-list { margin: 0; padding: 0; list-style: none; }.meaning-list li { padding: 12px 0; border-bottom: 1px solid #e5dfd4; }.meaning-list strong { display: block; font: 500 17px var(--serif); }.meaning-list span { color: #687168; display: block; margin-top: 5px; font-size: 13px; }.result-section { margin-bottom: 20px; }.result-section h3 { color: #778078; margin: 0 0 9px; font: 10px var(--mono); letter-spacing: .13em; }.result-section p { margin: 0; color: #455248; font-size: 13px; line-height: 1.75; }.word-pill { display: inline-block; margin: 0 6px 6px 0; padding: 5px 7px; color: var(--moss); background: #e6ece4; font: 10px var(--mono); }.example-card { padding: 21px 24px; background: #f0ede3; border-left: 4px solid var(--clay); }.example-card p { margin: 0; font: 500 16px/1.6 var(--serif); }.example-card span { display: block; color: #767d74; margin-top: 6px; font-size: 12px; }.memory-card { padding: 17px; color: #fff; background: var(--moss); }.memory-card h3 { color: #e6ca91; }.memory-card p { color: #fff; }

.meaning-list .meaning-translation { display: block; margin-top: 7px; color: #59685e; font: 500 12px/1.65 var(--chinese-serif); }

.library-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 21px; }.library-search { width: 290px; display: flex; gap: 8px; border-bottom: 1px solid #7c887b; padding: 7px 0; color: var(--moss); }.library-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font-size: 13px; }.filter-tabs { display: flex; flex-wrap: wrap; gap: 5px; }.filter { border: 1px solid transparent; padding: 6px 9px; color: #687269; background: transparent; font: 10px var(--mono); }.filter.active { color: var(--moss); border-color: #b7c5b5; background: #edf1e9; }.word-table-wrap { overflow: auto; border-top: 2px solid var(--moss); }.word-table { width: 100%; min-width: 680px; border-collapse: collapse; text-align: left; }.word-table th { padding: 13px 10px; color: #778078; font: 10px var(--mono); letter-spacing: .1em; }.word-table td { padding: 16px 10px; border-top: 1px solid var(--rule); color: #667066; font-size: 12px; }.word-table .term-cell { color: var(--ink); font: 600 18px var(--serif); }.word-table .meaning-cell { max-width: 310px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.status-badge { display: inline-block; padding: 4px 7px; color: var(--moss); background: #e4ebe1; font: 9px var(--mono); }.status-badge.new { background: #f7e2b7; }.status-badge.fuzzy { color: #8e3928; background: #f1d7d0; }.status-badge.mastered { color: #436341; background: #dcebd8; }.table-edit { border: 0; color: var(--clay); background: transparent; font: 13px var(--mono); }.table-empty { padding: 55px 20px; color: #788177; text-align: center; }.table-empty button { display: block; border: 0; color: var(--moss); background: transparent; margin: 10px auto 0; font: 12px var(--mono); }
.library-toolbar-actions { display: flex; align-items: center; gap: 13px; }.library-bulk-toggle { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #b8c5b7; padding: 7px 10px; color: var(--moss); background: transparent; font: 10px var(--mono); white-space: nowrap; }.library-bulk-toggle span { color: var(--clay); font-size: 13px; }.library-bulk-toggle b { font-weight: 500; }.library-bulk-toggle:hover, .library-bulk-toggle.active { color: #fff; border-color: var(--moss); background: var(--moss); }.library-bulk-toggle.active span { color: var(--sun); }.library-bulk-toggle:disabled { cursor: not-allowed; opacity: .45; }.library-bulk-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: -5px 0 13px; padding: 11px 13px; border-left: 3px solid var(--clay); background: #f2e9dc; }.library-bulk-bar p { display: flex; align-items: baseline; gap: 8px; margin: 0; color: #657066; }.library-bulk-bar p > span { color: var(--clay); font: 9px var(--mono); letter-spacing: .12em; }.library-bulk-bar strong { color: var(--ink); font: 600 22px/1 var(--serif); }.library-bulk-bar small { font-size: 11px; }.library-bulk-bar > div { display: flex; gap: 7px; }.library-bulk-bar button { border: 1px solid #bec8ba; padding: 7px 10px; color: var(--moss); background: rgba(255,255,255,.45); font: 10px var(--mono); }.library-bulk-bar .library-delete-selected { color: #fff; border-color: #a94f3c; background: #a94f3c; }.library-bulk-bar .library-delete-selected:disabled { cursor: not-allowed; color: #9a8f86; border-color: #d9cfc4; background: #e4ddd3; }.word-select-heading, .word-select-cell { display: none; width: 36px; padding-right: 0 !important; }.word-table-wrap.selection-mode .word-select-heading, .word-table-wrap.selection-mode .word-select-cell { display: table-cell; }.word-table tr.is-selected td { background: rgba(192,100,74,.055); }.word-check { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; cursor: pointer; }.word-check input { position: absolute; opacity: 0; pointer-events: none; }.word-check span { width: 16px; height: 16px; display: grid; place-items: center; border: 1px solid #aab7aa; background: #fbfaf4; transition: .16s; }.word-check input:checked + span { border-color: var(--clay); background: var(--clay); }.word-check input:checked + span::after { content: "✓"; color: #fff9ed; font: 10px var(--mono); }.word-check input:focus-visible + span { outline: 2px solid var(--sun); outline-offset: 2px; }

.review-layout { display: grid; grid-template-columns: 223px minmax(0, 1fr); gap: 22px; }.review-sidebar { color: #edf0e6; padding: 25px; background: var(--moss-deep); }.review-count strong { display: block; margin: 12px 0 2px; color: var(--sun); font: 600 59px/.9 var(--serif); }.review-count > span:last-child { color: #bac6b7; font-size: 12px; }.review-rule { margin: 35px 0; padding: 15px 0; border-top: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); }.review-rule span { color: var(--sun); font: 9px var(--mono); }.review-rule p { margin: 7px 0 0; color: #bdc8bc; font-size: 12px; line-height: 1.75; }.quality-guide { display: grid; gap: 8px; color: #d4dcd2; font-size: 11px; }.quality-guide .eyebrow { color: #8aa08d; margin-bottom: 3px; }.quality-guide b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; margin-right: 7px; color: var(--moss-deep); background: #c0cfc0; font: 10px var(--mono); }.quality-guide .q0 { background: #d7846a; }.quality-guide .q2 { background: #e8ba68; }.quality-guide .q4 { background: #b8d0a8; }.quality-guide .q5 { background: #75a37c; }.review-stage { min-height: 465px; display: grid; place-items: center; background: #eeebdf; border: 1px solid #ded9cb; }.review-card { width: min(570px, 88%); padding: 45px 39px 35px; text-align: center; background: #fdfbf5; box-shadow: var(--shadow); position: relative; }.review-index { position: absolute; left: 22px; top: 19px; color: #8b9489; font: 10px var(--mono); }.review-card h2 { margin: 21px 0 8px; font-size: clamp(42px, 6vw, 70px); }.review-card .phonetic { color: #7d877c; font: 12px var(--mono); }.reveal-button { border: 1px solid var(--moss); margin: 30px 0 8px; padding: 11px 19px; color: var(--moss); background: transparent; font-size: 12px; }.review-answer { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--rule); }.review-answer p { color: #34463a; font: 500 18px/1.65 var(--serif); }.review-answer small { color: #748073; font-size: 12px; }.quality-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 26px; }.quality-button { padding: 10px 5px; border: 0; color: var(--moss-deep); background: #e5ebdf; font-size: 10px; }.quality-button:hover { transform: translateY(-2px); }.quality-button.q-0 { background: #e9c9bd; }.quality-button.q-2 { background: #f3dca9; }.quality-button.q-4 { background: #d9e8cd; }.quality-button.q-5 { background: #b9d5b7; }.review-empty { text-align: center; color: #627066; }.review-empty span { color: var(--sun); font-size: 38px; }.review-empty h2 { margin: 15px 0 8px; }.review-empty p { font-size: 13px; }.review-result { text-align: center; }.review-result h2 { font-size: 43px; }.review-result p { color: #6f796f; }.review-result button { margin-top: 13px; }
.review-return-action { margin-top: 17px; }

.settings-layout { max-width: 980px; }
.settings-column { display: grid; gap: 17px; }
.system-settings-card { position: relative; display: grid; grid-template-columns: minmax(190px, .72fr) minmax(260px, 1.28fr); gap: 24px; align-items: center; overflow: visible; background: linear-gradient(135deg, #f0f3e8 0%, #fcfaf4 68%); }
.system-settings-card::after { content: "文 · A · 한"; position: absolute; right: -12px; bottom: -8px; color: rgba(35, 67, 56, .055); font: 600 49px/1 var(--serif); letter-spacing: -.08em; pointer-events: none; }
.system-settings-card .form-card-heading { position: relative; z-index: 1; }
.language-setting { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, .72fr); gap: 22px; align-items: center; }
.language-setting label { display: block; color: var(--ink); margin-bottom: 6px; font: 500 15px var(--serif); }
.language-setting small { display: block; color: #798278; font-size: 11px; line-height: 1.6; }
.system-settings-feedback { grid-column: 1 / -1; min-height: 15px; margin: -10px 0 0; color: var(--clay); font: 10px var(--mono); }
.module-settings-card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr); gap: 32px; align-items: center; color: #f7efe1; border-color: #263e35; background: radial-gradient(circle at 12% 12%, rgba(226,168,74,.17), transparent 35%), linear-gradient(135deg, #21372f, #182c25); }
.module-settings-copy h2 { margin: 4px 0 12px; font: 600 30px/1.08 var(--serif); }
.module-settings-copy h2 em { color: #e7ac49; font-style: italic; }
.module-settings-copy > p:last-child { max-width: 520px; margin: 0; color: #becdc3; font-size: 12px; line-height: 1.75; }
.module-settings-actions { display: grid; gap: 12px; }
.application-select-field { display: grid; gap: 7px; color: #ccd7ce; }
.application-select-field > span { color: #8fa397; font: 8px var(--mono); letter-spacing: .14em; }
.application-select-field .paper-select-trigger { min-height: 50px; border-color: rgba(255,255,255,.2); color: #fff8e9; background: rgba(255,255,255,.055); box-shadow: inset 3px 0 0 transparent; }
.application-select-field .paper-select-trigger:hover { border-color: rgba(231,172,73,.58); background: rgba(255,255,255,.08); }
.application-select-field .paper-select.is-open .paper-select-trigger { border-color: #e7ac49; box-shadow: inset 3px 0 0 #e7ac49; }
.application-select-field .paper-select-chevron { border-left-color: rgba(255,255,255,.14); color: #e7ac49; }
.application-select-field .paper-select-menu { width: 100%; }
.application-enter-button { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border: 0; color: #20362e; background: #e7ac49; font: 600 11px var(--mono); letter-spacing: .05em; transition: background .2s, transform .2s, opacity .2s; }
.application-enter-button:hover { background: #f0bd63; transform: translateY(-1px); }
.application-enter-button:disabled { cursor: wait; opacity: .5; transform: none; }
.module-settings-actions > small { min-height: 15px; color: #e4b866; font: 9px/1.5 var(--mono); }
.settings-form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.settings-form .form-card-heading { grid-column: 1 / -1; }
.form-card-heading { margin-bottom: 2px; }
.form-card-heading h2 { font-size: 24px; }
.setting-block label { display: block; color: var(--ink); margin-bottom: 8px; font: 500 15px var(--serif); }
.setting-block small { display: block; color: #798278; margin-top: 8px; font-size: 11px; line-height: 1.6; }
.setting-block select, .setting-block input { width: 100%; border: 1px solid #cbd3c5; padding: 11px; color: var(--moss); background: #f8f8f1; outline: 0; font-size: 13px; transition: border-color .2s, background .2s; }
.setting-block input:focus, .setting-block select:focus { border-color: var(--moss); background: #fffef9; }
.setting-block input.readonly { color: #6f7c70; background: #eef1ea; }
.number-input { display: flex; align-items: center; border: 1px solid #cbd3c5; background: #f8f8f1; }
.number-input input { width: 90px; border: 0; }.number-input span { color: #758075; font: 10px var(--mono); }
.form-feedback { margin: 2px 0 0; color: #52705d; font-size: 12px; }
.speech-settings-card { position: relative; overflow: visible; }
.speech-settings-card::after { content: "VOICE"; position: absolute; right: -5px; top: -25px; color: rgba(35,67,56,.035); font: 700 78px/1 var(--serif); letter-spacing: -.06em; pointer-events: none; }
.speech-heading { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.speech-heading h2 { max-width: 460px; }
.speech-live-mark { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 6px 8px; color: #526d56; background: #e4eee0; font: 9px var(--mono); }
.speech-live-mark i { width: 6px; height: 6px; border-radius: 50%; background: #6f9970; }
.speech-intro { position: relative; z-index: 1; max-width: 700px; margin: 15px 0 22px; color: #657065; font-size: 13px; line-height: 1.8; }
.speech-provider-field { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(180px, .72fr) minmax(280px, 1.28fr); gap: 28px; align-items: center; padding: 18px 19px; border: 1px solid #ccd5c8; background: linear-gradient(135deg, rgba(231,238,226,.78), rgba(253,251,245,.9)); }
.speech-provider-label .eyebrow { margin-bottom: 5px; color: var(--clay); }
.speech-provider-label strong { display: block; color: var(--ink); font: 500 17px var(--serif); }
.speech-provider-label small { display: block; margin-top: 6px; color: #798278; font-size: 10px; line-height: 1.55; }
.speech-provider-control { min-width: 0; }
.speech-provider-selects { display: grid; grid-template-columns: minmax(130px, .72fr) minmax(180px, 1.28fr); gap: 10px; }
.speech-provider-selects label { display: block; margin-bottom: 6px; color: #748075; font: 9px var(--mono); letter-spacing: .1em; }
.speech-provider-control .paper-select-trigger { min-height: 48px; box-shadow: inset 3px 0 0 var(--moss); }
.speech-provider-control .paper-select-menu { width: max(100%, 320px); }
.speech-provider-detail { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 9px; align-items: start; margin-top: 10px; color: #617265; }
.speech-provider-detail > i { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: #6f9970; box-shadow: 0 0 0 4px rgba(111,153,112,.12); }
.speech-provider-detail.unavailable > i { background: var(--clay); box-shadow: 0 0 0 4px rgba(192,100,74,.11); }
.speech-provider-detail b, .speech-provider-detail small { display: block; }
.speech-provider-detail b { color: #526256; font: 500 11px/1.5 var(--chinese-serif); }
.speech-provider-detail small { margin-top: 2px; color: #7d877d; font: 9px/1.5 var(--mono); }
.speech-speed-row { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule); }
.speech-speed-row .eyebrow { margin-bottom: 4px; }
.speech-speed-row strong { display: block; font: 500 15px var(--serif); }
.speech-speed-row small { display: block; margin-top: 4px; color: #798278; font-size: 10px; }
.speech-speed-options { display: grid; grid-template-columns: repeat(2, 78px); border: 1px solid #bdcabb; background: #f8f8f1; }
.speech-speed-options label { cursor: pointer; }
.speech-speed-options input { position: absolute; opacity: 0; pointer-events: none; }
.speech-speed-options span { display: block; padding: 9px 12px; color: #677369; text-align: center; font: 10px var(--mono); }
.speech-speed-options input:checked + span { color: #fff; background: var(--moss); }
.speech-settings-note { min-height: 17px; margin: 13px 0 0; color: #66776a; font: 10px var(--mono); }
.speech-quick { display: grid; grid-template-columns: auto minmax(130px, auto) minmax(86px, auto) minmax(0, 1fr); align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid #ccd6c8; background: rgba(250,250,244,.72); }
.speech-quick--lookup { margin-top: 13px; }
.speech-quick-title { color: var(--clay); font: 500 9px var(--mono); letter-spacing: .12em; }
.speech-quick-field { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px; color: #69756b; font-size: 10px; white-space: nowrap; }
.speech-quick-field .paper-select { min-width: 105px; }
.speech-quick-field .paper-select-trigger { min-height: 34px; padding: 5px 3px 5px 9px; }
.speech-quick-field .paper-select-value { font-size: 9px; }
.speech-quick-field .paper-select-chevron { width: 25px; height: 23px; }
.speech-quick-field .paper-select-menu { min-width: 210px; }
.speech-quick-field:last-of-type .paper-select-menu { right: 0; left: auto; }
.setting-block .paper-select-value, .dialog-select-field .paper-select-value { font: 500 14px/1.35 var(--chinese-serif); }
.speech-quick small { overflow: hidden; color: #788378; font: 9px var(--mono); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.llm-settings-form { position: relative; overflow: hidden; }
.llm-settings-form::before { content: ""; width: 170px; height: 170px; position: absolute; right: -62px; top: -75px; border: 1px solid #d6e0d0; border-radius: 50%; pointer-events: none; }
.llm-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; position: relative; }
.llm-heading h2 { max-width: 420px; }
.llm-intro { position: relative; margin: 15px 0 22px; color: #657065; font-size: 13px; line-height: 1.8; }
.profile-desk { position: relative; margin: 0 0 23px; padding: 15px; border: 1px solid #d5ddd1; background: rgba(247,249,243,.75); }.profile-desk-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }.profile-desk-heading .eyebrow { margin: 0 0 3px; }.profile-desk-heading p:not(.eyebrow) { color: var(--ink); margin: 0; font: 500 16px var(--serif); }.profile-new-button { border: 1px solid #b8c8b6; padding: 7px 9px; color: var(--moss); background: transparent; font: 10px var(--mono); }.profile-library { display: grid; gap: 7px; margin-top: 13px; }.profile-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 11px; border-left: 3px solid #b9c7b8; background: #fbfbf6; }.profile-card.default { border-left-color: var(--clay); background: #f8f1e4; }.profile-card.environment { border-left-color: #7191c4; }.profile-card strong, .profile-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.profile-card strong { color: var(--ink); font: 500 14px var(--serif); }.profile-card small { color: #758075; margin-top: 3px; font: 9px var(--mono); }.profile-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }.profile-tags span { padding: 3px 5px; color: #5d7661; background: #e4ede0; font: 8px var(--mono); }.profile-card.default .profile-tags span { color: #806047; background: #f0dfbf; }.profile-actions { display: flex; gap: 5px; }.profile-actions button { border: 1px solid #c8d2c5; padding: 5px 7px; color: var(--moss); background: transparent; font: 9px var(--mono); }.profile-actions button[disabled] { color: #9da79c; border-color: #dae0d8; }.profile-empty { color: #758075; margin: 5px 0; font-size: 12px; }.default-profile-toggle { display: block; color: var(--moss); margin-bottom: 8px; font: 11px var(--mono); }.default-profile-toggle input { width: auto !important; margin: 0 5px 0 0; vertical-align: -2px; }
.profile-group { display: grid; gap: 7px; }
.profile-group + .profile-group { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); }
.profile-group-title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.profile-group-title span { color: #8a948a; font: 8px var(--mono); letter-spacing: .13em; }
.profile-group-title b { color: #607064; font: 500 11px var(--chinese-serif); }
.profile-card.system { border-left-color: #668675; }
.profile-card.disabled { opacity: .58; filter: grayscale(.35); }
.provider-status { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; color: #7a6452; padding: 6px 8px; background: #f5e9d6; font: 9px var(--mono); }
.provider-status i { width: 6px; height: 6px; background: #bf7b5c; border-radius: 50%; }.provider-status.configured { color: #496b4d; background: #e3efdf; }.provider-status.configured i { background: #6f9970; }
.provider-picker { padding: 0; border: 0; margin: 0 0 22px; }.provider-picker legend { color: #778078; padding: 0; margin-bottom: 9px; font: 10px var(--mono); letter-spacing: .13em; }
.provider-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.provider-option { min-width: 0; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 11px 9px; color: #657165; border: 1px solid #d3dbd0; background: #f9f9f3; cursor: pointer; transition: .2s; }
.provider-option:hover, .provider-option.selected { color: var(--moss); border-color: #6f8a75; background: #e7eee3; transform: translateY(-1px); }
.provider-option input { position: absolute; opacity: 0; pointer-events: none; }.provider-option b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font: 500 12px var(--serif); }.provider-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #849084; margin-top: 2px; font: 8px var(--mono); }.provider-option > i { color: var(--clay); font: 13px var(--mono); font-style: normal; }
.provider-logo { display: grid; place-items: center; width: 25px; height: 25px; color: white; background: var(--moss); font: 600 13px/1 var(--serif); }.deepseek-logo { background: #456fc4; }.doubao-logo { background: #e37245; }.custom-logo { color: var(--moss); background: #d3e1ce; }
.llm-fields { display: grid; gap: 18px; }.model-protocol-row, .model-key-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.key-lock { color: var(--clay); font: 14px var(--mono); }.key-input-wrap { display: flex; border: 1px solid #cbd3c5; background: #f8f8f1; }.key-input-wrap:focus-within { border-color: var(--moss); background: #fffef9; }.key-input-wrap.is-locked { background: #eef1ea; }.key-input-wrap input { border: 0; background: transparent; }.key-input-wrap input[readonly] { cursor: default; color: #788078; }.key-input-wrap button { width: 39px; border: 0; color: #6b7b6c; background: transparent; font: 15px/1 var(--mono); }.key-field-note { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.key-field-note small { flex: 1; }.key-replace-button { flex: 0 0 auto; margin-top: 7px; padding: 2px 0; border: 0; border-bottom: 1px solid currentColor; color: var(--clay); background: transparent; font: 9px/1.5 var(--mono); }
.llm-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--rule); }.llm-actions .solid-button span { color: var(--sun); margin-right: 5px; }.security-note { max-width: 370px; margin: 0; color: #6c776d; font-size: 10px; line-height: 1.65; }.security-note span { color: var(--clay); font: 17px var(--mono); vertical-align: -2px; }
.llm-actions > div { display: flex; align-items: center; gap: 14px; }
.profile-test-button { border: 1px solid var(--moss); background: transparent; color: var(--moss); padding: 12px 17px; border-radius: 2px; font: 600 12px var(--mono); }
.profile-test-button:hover { background: rgba(32, 75, 60, .08); }
.profile-test-button:disabled { cursor: wait; opacity: .55; }
.admin-layout { max-width: 1080px; }
.admin-header { position: relative; }
.admin-seal { min-width: 92px; padding: 14px 12px; border: 1px solid var(--clay); color: var(--clay); font: 500 9px/1.6 var(--mono); letter-spacing: .16em; text-align: center; transform: rotate(2deg); }
.admin-model-card { position: relative; overflow: hidden; padding: 31px; background: linear-gradient(145deg, #f8f5eb, #f1f4eb); }
.admin-model-card::after { content: "ADMIN"; position: absolute; right: -18px; bottom: -26px; color: rgba(35,67,56,.035); font: 700 92px/1 var(--serif); pointer-events: none; }
.admin-model-card > * { position: relative; z-index: 1; }
.admin-model-intro { max-width: 720px; margin: 15px 0 24px; color: #68766b; font-size: 12px; line-height: 1.75; }
.admin-profile-library { gap: 9px; }
.word-table .meaning-cell { overflow: visible; text-overflow: clip; white-space: normal; }.meaning-cell > strong { display: block; color: var(--ink); font: 500 14px var(--serif); }.library-example { display: block; max-width: 380px; color: #58675b; margin-top: 6px; font: italic 11px/1.55 var(--serif); }.library-example i { display: block; color: #879087; margin-top: 2px; font: 10px/1.5 var(--chinese-serif); font-style: normal; }.library-example.muted { color: #9aa29a; font-family: var(--mono); font-style: normal; }.everyday-example { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; text-align: left; }.everyday-example > span { color: var(--clay); padding-top: 2px; font: 9px var(--mono); }.everyday-example p { margin: 0; color: #34463a; font: 500 14px/1.55 var(--serif); }.everyday-example small { display: block; color: #7a847a; margin-top: 4px; font: 11px/1.55 var(--chinese-serif); }.examples-empty { color: #879087; font-size: 12px; }.review-card { width: min(680px, 88%); }.review-prompt { max-width: 390px; color: #6d796e; margin: 22px auto -9px; font-size: 12px; line-height: 1.8; }.review-prompt b { color: var(--clay); font-family: var(--serif); }.review-meaning { margin-bottom: 8px !important; }.review-examples { margin-top: 23px; padding: 19px; text-align: left; border: 1px solid #dce3d7; background: #f4f6ef; }.review-examples .eyebrow { color: #798879; margin: 0 0 14px; font-size: 9px; }.review-example-list { display: grid; gap: 13px; }.review-collocations { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 17px 0 -5px !important; text-align: left; }.review-collocations b { color: #737f73; margin-right: 3px; font: 9px var(--mono); }.review-collocations span { color: #526c56; padding: 4px 6px; background: #e5ede0; font: 9px var(--mono); }.dialog-example-bank { margin: 0 0 18px; padding: 15px; border-left: 3px solid var(--clay); background: #f1eee3; }.dialog-example-bank .eyebrow { margin: 0 0 12px; }.dialog-example-list { display: grid; gap: 12px; }.word-dialog { width: min(620px, calc(100% - 30px)); }.profile-actions { flex-wrap: wrap; justify-content: flex-end; }.profile-actions .profile-delete { color: #a24e3b; border-color: #dfc4bb; }.profile-actions .profile-delete:hover { color: white; background: #ae5a45; border-color: #ae5a45; }
.library-meaning-translation { display: block; max-width: 380px; margin-top: 4px; color: #657268; font: 11px/1.55 var(--chinese-serif); }
.dialog-refresh-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; margin-bottom: 17px; padding: 14px 15px; border: 1px solid #cbd5c8; background: #edf2e9; }
.dialog-refresh-panel strong, .dialog-refresh-panel small { display: block; }
.dialog-refresh-panel strong { color: var(--moss); font: 500 13px var(--chinese-serif); }
.dialog-refresh-panel small { margin-top: 5px; color: #738076; font-size: 10px; line-height: 1.55; }
.dialog-refresh-panel button { border: 1px solid var(--moss); padding: 8px 11px; color: var(--moss); background: #fbfaf4; font: 10px var(--mono); white-space: nowrap; }
.dialog-refresh-panel button:disabled { cursor: wait; opacity: .55; }
.dialog-refresh-panel p { grid-column: 1 / -1; min-height: 0; margin: 0; color: #66756a; font-size: 10px; line-height: 1.55; }
.dialog-refresh-panel p:empty { display: none; }
.dialog-meaning-bank { margin: 0 0 18px; padding: 15px; border-left: 3px solid var(--moss); background: #f4f4ec; }
.dialog-meaning-bank .eyebrow { margin: 0 0 6px; }
.dialog-meaning-bank .meaning-list li:last-child { border-bottom: 0; }

/* 多学习语言仍保留独立排版，但切换入口只放在偏好设置中。 */
.lookup-form-head { display: block; }
.view-header-actions { display: flex; align-items: center; gap: 12px; }
.review-header-actions { display: grid; justify-items: end; gap: 11px; }

.learning-settings-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.learning-settings-card .form-card-heading { grid-column: 1 / -1; }
.result-word[lang="ko"] h2, .sentence-segment[lang="ko"] b, .library-term-name[lang="ko"], .review-card h2[lang="ko"], .recent-word strong[lang="ko"] { font-family: "Noto Serif KR", serif; }
.result-lemma { margin: 8px 0 0; color: #68766b; font-size: 11px; }
.result-lemma b { color: var(--moss); font-family: var(--serif); }
.sentence-translation { max-width: 780px; margin: 15px 0 0; color: #536257; font: 500 16px/1.7 var(--chinese-serif); }
.sentence-segments { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.sentence-segment { min-height: 93px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 13px; border: 1px solid #d3dacd; border-top: 3px solid #b7c6b5; color: #667168; background: #f5f5ed; text-align: left; transition: border-color .18s, background .18s, transform .18s; }
.sentence-segment:hover { border-top-color: var(--clay); background: #fbf6ec; transform: translateY(-2px); }
.sentence-segment b { color: var(--ink); font: 600 17px var(--serif); }
.sentence-segment span { color: var(--clay); font: 8px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.sentence-segment small { color: #727d73; font-size: 11px; line-height: 1.55; }
.grammar-notes { display: grid; gap: 7px; }
.grammar-note { display: grid; grid-template-columns: minmax(80px, .35fr) 1fr; gap: 10px; padding: 9px 10px; border-left: 2px solid var(--sun); color: #647065; background: #f5f1e6; font-size: 11px; line-height: 1.55; }
.grammar-note b { color: var(--moss); font: 500 9px var(--mono); }

@media (min-width: 761px) and (max-width: 1200px) { .lookup-tools { grid-template-columns: 1fr; }.lookup-tools .speech-quick { padding: 13px 0 0; border-top: 1px solid #d1d9ce; border-left: 0; }.lookup-model-control { width: 100%; margin-top: 0; text-align: left; }.lookup-model-control .paper-select-menu { right: auto; left: 0; } }
@media (max-width: 760px) { .system-settings-card, .language-setting, .settings-form, .model-key-row, .provider-options { grid-template-columns: 1fr; }.llm-heading, .llm-actions, .lookup-form-head { display: block; }.lookup-model-control { min-width: 0; margin: 0 0 13px !important; text-align: left; }.lookup-model-control select { width: 100%; }.provider-status { margin-top: 12px; }.llm-actions .solid-button { width: 100%; margin-top: 14px; }.profile-desk-heading { align-items: start; }.profile-card { grid-template-columns: 1fr; }.profile-actions { justify-content: flex-end; }.review-card { width: min(94%, 680px); padding: 34px 20px 28px; }.review-examples { padding: 15px 12px; }.everyday-example { grid-template-columns: 23px minmax(0, 1fr); gap: 7px; }.dialog-example-bank { padding: 13px; } }

@media (max-width: 760px) {
  .review-header-actions { justify-items: stretch; margin-top: 18px; }
  .review-header-actions .round-action { width: 100%; justify-content: center; margin-top: 0; }
  .sentence-segments { grid-template-columns: 1fr; }
  .grammar-note { grid-template-columns: 1fr; gap: 3px; }
}


.word-dialog { width: min(460px, calc(100% - 30px)); color: var(--ink); padding: 0; border: 0; background: #f8f6ee; box-shadow: 0 25px 70px rgba(0,0,0,.22); }.word-dialog::backdrop { background: rgba(15, 29, 23, .55); }.word-dialog form { padding: 32px; }.dialog-close { position: absolute; right: 15px; top: 12px; border: 0; color: #637166; background: transparent; font-size: 27px; }.word-dialog h2 { margin-bottom: 12px; }.dialog-word { color: var(--clay); margin-bottom: 21px; font: 600 27px var(--serif); }.word-dialog label { display: block; margin: 15px 0; color: #59665d; font-size: 12px; }.dialog-select-field { margin: 15px 0; }.dialog-select-field > label { margin: 0 0 7px; }.word-dialog input, .word-dialog textarea, .word-dialog select { display: block; width: 100%; border: 1px solid #cad3c6; background: #fffdf7; padding: 9px; margin-top: 7px; outline: 0; color: var(--ink); font-size: 13px; }.word-dialog textarea { min-height: 85px; resize: vertical; }.dialog-actions { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 23px; }.danger-button { margin-right: auto; border: 0; color: #a24736; background: transparent; font-size: 12px; }.toast { position: fixed; right: 24px; bottom: 23px; z-index: 30; color: white; background: var(--moss-deep); box-shadow: var(--shadow); padding: 12px 16px; transform: translateY(100px); opacity: 0; transition: .3s; font-size: 13px; }.toast.show { opacity: 1; transform: none; }.dialog-toast { position: absolute; z-index: 1000; right: 18px; bottom: 18px; max-width: min(420px, calc(100% - 36px)); border: 1px solid rgba(255,255,255,.16); transform: translateY(10px); }.dialog-toast.show { transform: none; }
.library-term-link { border: 0; border-bottom: 1px solid transparent; padding: 0; color: inherit; background: transparent; font: inherit; text-align: left; transition: color .18s, border-color .18s; }
.library-term-link:hover, .library-term-link:focus-visible { color: var(--clay); border-bottom-color: var(--clay); outline: 0; }
.table-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; white-space: nowrap; }
.table-detail, .table-edit { border: 0; padding: 4px 0; background: transparent; font: 11px var(--mono); }
.table-detail { color: var(--clay); }
.table-edit { color: #718075; }
.table-detail:hover, .table-edit:hover { color: var(--moss); }
.save-button.saved:hover { color: #fff; border-color: var(--moss); background: var(--moss); }
.save-button:disabled { cursor: wait; opacity: .58; }

.word-detail-dialog { width: min(1120px, calc(100% - 46px)); max-height: 92vh; overflow: hidden; padding: 0; border: 0; color: var(--ink); background: transparent; box-shadow: 0 28px 90px rgba(8,24,18,.36); }
.word-detail-dialog::backdrop { background: rgba(12,28,22,.7); backdrop-filter: blur(4px); }
.word-detail-sheet { position: relative; box-sizing: border-box; max-height: 92vh; overflow-y: auto; padding: 35px 46px 30px; background: linear-gradient(145deg, #fbfaf4 0%, #f4f1e7 100%); }
.word-detail-sheet::before { content: ""; position: absolute; inset: 0; opacity: .22; pointer-events: none; background-image: linear-gradient(rgba(49,79,62,.045) 1px, transparent 1px); background-size: 100% 31px; }
.word-detail-sheet > * { position: relative; z-index: 1; }
.word-detail-sheet > .dialog-close { position: absolute; z-index: 2; }
.word-detail-kicker { margin: 0 0 25px; color: #829083; font: 9px var(--mono); letter-spacing: .18em; }
.word-detail-content .result-word h2 { font-size: clamp(38px, 5vw, 62px); }
.word-detail-status { display: flex; align-items: center; gap: 9px; margin: 14px 0 -2px; color: #748076; font: 9px var(--mono); letter-spacing: .05em; }
.word-detail-status > span { padding: 5px 8px; color: #5b6d5e; background: #e3eae0; }
.word-detail-status .status-badge { font-size: 8px; }
.word-detail-status small { color: #8b948b; font: inherit; }
.word-learning-lower { padding-top: 0; }
.word-detail-personal { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr); gap: 34px; margin-top: 5px; padding: 23px 25px; border-left: 4px solid var(--clay); background: rgba(238,234,221,.85); }
.word-detail-personal .eyebrow { margin: 0 0 10px; }
.word-detail-personal p:not(.eyebrow) { margin: 0; color: #59675d; font-size: 12px; line-height: 1.75; white-space: pre-wrap; }
.word-detail-actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 12px; margin: 25px -46px -30px; padding: 15px 46px; border-top: 1px solid #d8d5c9; background: rgba(251,250,244,.96); backdrop-filter: blur(8px); }
.word-detail-refresh { margin-right: auto; border: 1px solid #9eafa0; padding: 10px 14px; color: var(--moss); background: #f3f5ed; font: 11px var(--mono); }
.word-detail-refresh:hover { color: #fff; border-color: var(--moss); background: var(--moss); }
.word-detail-refresh:disabled { cursor: wait; opacity: .55; }
.model-dialog { width: min(780px, calc(100% - 34px)); max-height: min(88vh, 860px); padding: 0; border: 0; color: var(--ink); background: var(--paper); box-shadow: 0 28px 90px rgba(8,24,18,.34); }
.model-dialog::backdrop { background: rgba(12,28,22,.66); backdrop-filter: blur(3px); }
.model-dialog form { max-height: min(88vh, 860px); overflow-y: auto; padding: 34px 38px 31px; }
.model-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-right: 34px; }
.model-dialog-heading h2 { font-size: 30px; }
.model-dialog-intro { margin: 11px 0 24px; color: #6c776e; font-size: 12px; line-height: 1.7; }
.model-dialog-options { display: flex; flex-wrap: wrap; gap: 9px 22px; margin-top: 19px; padding: 15px 0 5px; border-top: 1px solid var(--rule); }
.model-dialog .default-profile-toggle { margin: 0; }
.thinking-profile-toggle small { display: block; margin: 5px 0 0 20px; color: #7a857b; font: 9px/1.5 var(--mono); }
.model-dialog .form-feedback { min-height: 18px; margin-top: 12px; color: var(--clay); }

@media (max-width: 1050px) { .sidebar { width: 210px; }.content { margin-left: 210px; padding-left: 35px; padding-right: 35px; }.dashboard-grid { grid-template-columns: 1.2fr 1fr; grid-template-rows: 280px 108px 118px; }.daily-card, .quote-card { grid-row: 1; }.stat-card { grid-column: auto; }.quote-card { grid-column: 2; }.token-card { grid-column: 1 / -1; }.token-card > i { display: block; }.recent-list { grid-template-columns: repeat(3, 1fr); gap: 14px; }.recent-word:nth-child(n+4) { display: none; } }
@media (max-width: 760px) { .sidebar { width: 100%; height: auto; bottom: auto; padding: 13px 18px; flex-direction: row; align-items: center; justify-content: space-between; }.brand-caption, .sidebar-bottom, .nav-item kbd, .nav-item span:nth-child(2), .nav-count { display: none; }.main-nav { display: flex; gap: 2px; }.nav-item { padding: 9px; display: block; }.nav-icon { font-size: 18px; }.content { margin-left: 0; padding: 100px 19px 45px; }.view-header { display: block; margin-bottom: 28px; }.view-header .round-action { margin-top: 19px; }.dashboard-grid, .dashboard-lower, .lookup-shell, .review-layout, .settings-grid { grid-template-columns: 1fr; }.daily-card { grid-row: auto; min-height: 300px; }.quote-card { grid-column: auto; grid-row: auto; min-height: 195px; }.stat-card { min-height: 100px; }.recent-list { grid-template-columns: repeat(2, 1fr); }.recent-word:nth-child(n+4) { display: block; }.meaning-grid { grid-template-columns: 1fr; gap: 25px; }.lookup-aside { display: none; }.lookup-form { padding: 23px 18px; }.search-button span { display: none; }.search-button b { display: inline; }.library-toolbar { display: block; }.library-search { width: 100%; margin-bottom: 13px; }.filter-tabs { overflow: auto; flex-wrap: nowrap; padding-bottom: 4px; }.review-sidebar { display: none; }.review-stage { min-height: 450px; }.activity-chart { gap: 5px; }.section-card { padding: 22px 18px; } }
@media (max-width: 760px) { .sentence-result-top { display: block; }.sentence-pick-note { width: fit-content; margin-top: 18px; }.sentence-title { font-size: clamp(20px, 5.2vw, 26px) !important; line-height: 1.32; }.sentence-meaning-grid { gap: 12px; } }

@media (max-width: 760px) {
  .sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand account" "nav nav";
    gap: 11px 14px;
    padding: calc(12px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) 10px calc(16px + env(safe-area-inset-left, 0px));
    box-shadow: 0 8px 24px rgba(12, 29, 23, .16);
  }
  .brand { grid-area: brand; min-width: 0; }
  .brand-name { overflow: hidden; text-overflow: ellipsis; }
  .main-nav {
    grid-area: nav;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.12);
  }
  .nav-item { min-width: 0; min-height: 38px; padding: 8px 4px; border-radius: 2px; }
  .nav-item:hover { transform: none; }
  .nav-icon { display: block; font-size: 19px; }
  .sidebar-app-switcher { display: none; }
  .sidebar-bottom { grid-area: account; }
  .content {
    padding-top: calc(132px + env(safe-area-inset-top, 0px));
    padding-right: calc(19px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(45px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(19px + env(safe-area-inset-left, 0px));
  }
  .dashboard-grid { display: flex; flex-direction: column; gap: 14px; }
  .daily-card, .quote-card, .stat-card { width: 100%; grid-column: auto !important; grid-row: auto !important; }
  .daily-card { min-height: 0; padding: 22px 22px 20px; }
  .quote-card { min-height: 0; padding: 24px 22px 25px; }
  .quote-card blockquote br { display: none; }
  .stat-card { min-height: 112px; }
  .lookup-input-wrap { min-height: 66px; }
  .search-button { min-width: 98px; padding: 0 12px; font-size: 12px; }
  .search-button span { display: inline; }
  .search-button b { display: inline-block; font-size: 17px; }
  .search-button.is-loading b { font-size: 19px; }
  .lookup-progress { grid-template-columns: 29px minmax(0, 1fr) auto; gap: 9px; padding: 10px; }
  .lookup-progress-mark { width: 29px; height: 29px; }
  .speech-provider-field { grid-template-columns: 1fr; gap: 13px; padding: 16px; }
  .speech-provider-selects { grid-template-columns: 1fr; }
  .speech-provider-control .paper-select-menu { width: 100%; min-width: 0; }
  .speech-speed-row { align-items: flex-start; flex-direction: column; }
  .speech-speed-options { width: 100%; grid-template-columns: 1fr 1fr; }
  .speech-heading { display: block; }
  .speech-live-mark { margin-top: 12px; }
  .speech-quick { grid-template-columns: 1fr 1fr; gap: 8px; }
  .speech-quick-title, .speech-quick small { grid-column: 1 / -1; text-align: left; }
  .speech-quick-field { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .speech-quick-field .paper-select { width: 100%; max-width: none; }
  .lookup-mode-switch { display: grid; grid-template-columns: 1fr 1fr; }
  .lookup-mode-button { min-width: 0; padding-left: 8px; padding-right: 8px; }
  .lookup-tools { grid-template-columns: 1fr; gap: 12px; padding: 12px; }
  .lookup-tools .speech-quick { padding: 12px 0 0; border-top: 1px solid #d1d9ce; border-left: 0; }
  .lookup-model-control { width: 100%; }
  .lookup-input-wrap.sentence-mode { grid-template-columns: 1fr; }
  .lookup-input-wrap.sentence-mode textarea { min-height: 116px; font-size: 16px; }
  .lookup-input-wrap.sentence-mode .search-button { min-height: 50px; }
  .library-toolbar-actions { align-items: flex-start; flex-direction: column; gap: 9px; }
  .library-bulk-toggle { align-self: flex-end; }
  .library-bulk-bar { align-items: flex-start; flex-direction: column; }
  .library-bulk-bar > div { width: 100%; }
  .library-bulk-bar button { flex: 1; }
  .view-header-actions { align-items: stretch; flex-direction: column; margin-top: 18px; }
  .view-header-actions .round-action { margin-top: 0; }
  .admin-seal { display: none; }
  .admin-model-card { padding: 23px 18px; }
  .module-settings-card { grid-template-columns: 1fr; gap: 22px; }
  .model-dialog { width: 100%; max-width: none; max-height: 94vh; margin: auto 0 0; }
  .model-dialog form { max-height: 94vh; padding: 29px 18px 24px; }
  .model-dialog-heading { display: block; padding-right: 28px; }
  .model-dialog-heading .provider-status { margin-top: 10px; }
  .model-dialog .provider-options, .model-dialog .model-protocol-row, .model-dialog .model-key-row { grid-template-columns: 1fr; }
  .model-dialog .llm-actions { display: block; }
  .model-dialog .llm-actions > div { justify-content: flex-end; margin-top: 17px; }
  .model-dialog .llm-actions .solid-button { width: auto; margin-top: 0; }

  html.notelex-android .sidebar { padding-top: 12px; }
  html.notelex-android .content { padding-top: 132px; }
}

@media (max-width: 390px) {
  .brand-name b, .brand-name i { display: none; }
  .brand-name { font-size: 14px; }
  .content { padding-left: calc(14px + env(safe-area-inset-left, 0px)); padding-right: calc(14px + env(safe-area-inset-right, 0px)); }
  .lookup-form { padding: 21px 14px; }
  .lookup-input-wrap textarea { padding-left: 13px; padding-right: 10px; }
  .search-button { min-width: 88px; }
  .speech-quick { grid-template-columns: 1fr; }
  .speech-quick-title, .speech-quick small { grid-column: auto; }
}

@media (max-width: 760px) {
  .table-actions { align-items: flex-start; flex-direction: column; gap: 3px; }
  .word-detail-dialog { width: 100%; max-width: none; max-height: 96vh; margin: auto 0 0; }
  .word-detail-sheet { max-height: 96vh; padding: 28px 18px 24px; }
  .word-detail-kicker { padding-right: 38px; }
  .word-detail-content .result-top { display: block; }
  .word-detail-content .result-word h2 { font-size: clamp(34px, 11vw, 50px); }
  .word-detail-status { flex-wrap: wrap; }
  .word-detail-personal { grid-template-columns: 1fr; gap: 21px; padding: 19px 17px; }
  .word-detail-actions { margin: 23px -18px -24px; padding: 13px 18px; }
  .dialog-refresh-panel { grid-template-columns: 1fr; }
  .dialog-refresh-panel button { width: 100%; }
}

.word-dialog { width: min(620px, calc(100% - 30px)); }
.word-dialog form { max-height: min(88vh, 820px); overflow-y: auto; }

/* 浏览器本地朗读控件，优先选择美式英语语音。 */
.example-english { display: flex; align-items: flex-start; gap: 7px; }
.example-english > p { flex: 1; }
.library-example-en { display: flex; align-items: center; gap: 4px; }
.library-example-en .speak-button { min-width: 22px; min-height: 22px; font-size: 15px; }
.library-term-name { display: inline-flex; align-items: center; gap: 4px; }
.library-term-name .speak-button { min-width: 24px; min-height: 24px; font-size: 16px; }
.speak-button { border: 1px solid transparent; color: var(--clay); min-width: 27px; min-height: 27px; padding: 0; border-radius: 50%; background: transparent; font: 19px/1 var(--mono); vertical-align: middle; transition: color .2s, background .2s, border-color .2s, transform .2s; }
.speak-button:hover { color: #fff8e9; border-color: var(--clay); background: var(--clay); transform: translateY(-1px); }
.speak-button:active { transform: translateY(0); }
.speak-button.is-preparing { color: #fff8e9; border-color: var(--clay); background: var(--clay); animation: speech-preparing .8s steps(2, end) infinite; }
.speak-button.is-speaking { color: #fff8e9; border-color: var(--moss); background: var(--moss); animation: speaking-pulse 1.15s ease-in-out infinite; }
.speak-button--sentence { flex: 0 0 auto; margin: 0 0 0 7px; }
.speak-button span { display: block; transform: rotate(180deg); }
@keyframes speaking-pulse { 50% { box-shadow: 0 0 0 5px rgba(35, 67, 56, .12); } }
@keyframes speech-preparing { 50% { opacity: .55; transform: rotate(12deg); } }

/* 私有账号入口延续纸张与深夜书桌的视觉语言。 */
.app-loading .sidebar, .app-loading .content { visibility: hidden; }
.account-strip { display: grid; grid-template-columns: 34px minmax(0, 1fr) 28px; grid-template-areas: "monogram identity logout" "utilities utilities utilities"; gap: 9px; align-items: center; margin-top: 11px; padding: 14px 5px 0; border-top: 1px solid rgba(255,255,255,.16); }
.account-monogram { grid-area: monogram; width: 34px; height: 34px; padding: 0; border: 0; display: grid; place-items: center; color: var(--moss-deep); background: var(--sun); font: 700 16px var(--serif); }
.account-identity { grid-area: identity; min-width: 0; padding: 0; border: 0; color: #f4f0e6; background: transparent; text-align: left; }
.account-identity strong, .account-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-identity strong { font: 600 12px var(--chinese-serif); }
.account-identity small { margin-top: 3px; color: #91a197; font: 8px var(--mono); letter-spacing: .08em; }
.account-utilities { grid-area: utilities; display: flex; justify-content: flex-end; gap: 6px; padding-top: 2px; }
.account-tool { min-width: 52px; height: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 8px; border: 1px solid rgba(255,255,255,.16); color: #c9d5cb; background: rgba(255,255,255,.025); transition: color .2s, border-color .2s, background .2s, transform .2s; }
.account-tool span { color: #82988c; font: 7px var(--mono); letter-spacing: .12em; }
.account-tool strong { color: var(--sun); font: 600 10px var(--mono); }
.account-tool:hover, .account-tool.active { color: #fff8e9; border-color: rgba(231,172,73,.72); background: rgba(231,172,73,.12); transform: translateY(-1px); }
.account-admin strong { font: 700 11px/1 var(--mono); }
.account-logout { grid-area: logout; width: 28px; height: 28px; padding: 0; border: 1px solid rgba(255,255,255,.16); color: #d6dfd5; background: transparent; font: 14px var(--mono); transform: rotate(45deg); transition: .2s ease; }
.account-logout:hover { color: var(--moss-deep); border-color: var(--sun); background: var(--sun); transform: rotate(45deg) translate(-1px, -1px); }

.login-page { min-height: 100vh; overflow-x: hidden; background: var(--moss-deep); }
.login-shell { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(410px, .82fr); min-height: 100vh; }
.login-library { position: relative; min-height: 100vh; overflow: hidden; padding: clamp(30px, 4.8vw, 72px); color: #f8f3e7; background:
  radial-gradient(circle at 76% 18%, rgba(231,172,73,.16), transparent 25%),
  linear-gradient(145deg, #1d3a30 0%, #172f28 58%, #10221d 100%); }
.login-library::before { content: ""; position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, black, transparent 86%); }
.login-library::after { content: ""; position: absolute; right: -5vw; top: 3vh; width: min(44vw, 590px); aspect-ratio: 1; border-radius: 12%; background: url("app-logo-256.png") center / cover no-repeat; opacity: .035; transform: rotate(-8deg); }
.login-brand { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; animation: login-rise .7s ease both; }
.login-brand-logo { width: 43px; height: 43px; border-radius: 10px; }
.login-brand p { margin: 0; font: 500 18px var(--mono); letter-spacing: .03em; }
.login-brand p b { font: 700 21px var(--chinese-serif); }
.login-brand p i { color: var(--sun); font-style: normal; }
.login-brand small { display: block; margin-top: 7px; color: #91a398; font: 8px var(--mono); letter-spacing: .17em; }
.login-editorial { position: relative; z-index: 2; width: min(680px, 86%); margin-top: clamp(72px, 13vh, 150px); animation: login-rise .8s .08s ease both; }
.login-issue { color: var(--sun); font: 500 9px var(--mono); letter-spacing: .2em; }
.login-editorial h1 { max-width: 720px; margin: 17px 0 22px; font-size: clamp(42px, 5.4vw, 82px); line-height: 1.02; letter-spacing: -.055em; }
.login-editorial h1 em { color: #e3b15c; }
.login-editorial > p:last-child { max-width: 460px; color: #b8c3ba; font-size: 14px; line-height: 1.95; }
.login-word-stage { position: absolute; z-index: 2; right: clamp(36px, 7vw, 110px); bottom: clamp(80px, 12vh, 145px); width: 330px; height: 190px; animation: login-rise .9s .18s ease both; }
.floating-word-card { position: absolute; width: 270px; min-height: 154px; padding: 22px 24px; color: var(--ink); background: #f6f0df; border: 1px solid rgba(255,255,255,.35); box-shadow: 0 26px 65px rgba(0,0,0,.22); }
.floating-word-card > span { position: absolute; right: 18px; top: 16px; color: #9b9d91; font: 9px var(--mono); }
.floating-word-card strong, .floating-word-card small, .floating-word-card i { display: block; }
.floating-word-card strong { font: 600 34px var(--serif); letter-spacing: -.04em; }
.floating-word-card small { margin-top: 4px; color: var(--clay); font: 10px var(--mono); }
.floating-word-card i { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--rule); color: #626c64; font: italic 12px var(--serif); }
.floating-word-card p { margin: 0 0 10px; color: #7b817a; font: 8px var(--mono); letter-spacing: .16em; }
.card-back { right: -22px; bottom: 18px; opacity: .45; transform: rotate(8deg); }
.card-front { left: 0; top: 0; transform: rotate(-3deg); animation: card-breathe 7s 1s ease-in-out infinite; }
.orbit-note { position: absolute; right: -77px; top: 53px; color: rgba(255,255,255,.36); font: 8px var(--mono); letter-spacing: .2em; transform: rotate(90deg); }
.login-quote { position: absolute; z-index: 2; left: clamp(30px, 4.8vw, 72px); bottom: clamp(28px, 5vh, 58px); display: flex; gap: 12px; color: #b7c3b9; }
.login-quote span { color: var(--clay); font: 50px/.7 var(--serif); }
.login-quote p { margin: 0; font-size: 12px; line-height: 1.75; }

.login-desk { position: relative; display: grid; place-items: center; min-height: 100vh; padding: 42px clamp(28px, 5vw, 78px); background:
  linear-gradient(90deg, rgba(25,37,31,.045) 1px, transparent 1px) 0 0 / 34px 34px,
  linear-gradient(#f8f5ec, #eee7d8); }
.login-desk::before { content: ""; position: absolute; width: 180px; height: 180px; right: -94px; top: 9%; border: 1px solid rgba(186,94,71,.3); border-radius: 50%; box-shadow: 0 0 0 34px rgba(186,94,71,.04), 0 0 0 72px rgba(186,94,71,.025); }
.login-desk-inner { position: relative; width: min(100%, 430px); animation: login-rise .75s .18s ease both; }
.login-desk-inner::before { content: "PRIVATE\A EDITION"; white-space: pre; position: absolute; right: -32px; top: 4px; color: #a6a699; font: 7px/1.6 var(--mono); letter-spacing: .16em; text-align: right; }
.login-desk h2 { max-width: 390px; margin: 14px 0 16px; font-size: clamp(34px, 4vw, 52px); line-height: 1.06; }
.login-desk h2 em { color: var(--clay); font-style: italic; }
.login-intro { max-width: 390px; margin-bottom: 40px; color: #707870; font-size: 13px; line-height: 1.85; }
.login-form > label { display: block; margin: 20px 0 8px; color: #58645c; font: 500 10px var(--mono); letter-spacing: .08em; }
.login-field { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; min-height: 54px; border-bottom: 1px solid #adb4a8; transition: border-color .2s, background .2s; }
.login-field:focus-within { border-color: var(--clay); background: rgba(255,255,255,.42); }
.login-field > span { color: #9a9d94; font: 9px var(--mono); }
.login-field input { width: 100%; min-width: 0; padding: 14px 0; border: 0; outline: 0; color: var(--ink); background: transparent; font: 600 17px var(--chinese-serif); }
.login-field input::placeholder { color: #a5a99f; font-weight: 500; }
.login-field button { width: 34px; height: 34px; border: 0; color: var(--clay); background: transparent; font-size: 11px; }
.login-feedback { min-height: 21px; margin: 15px 0 5px; color: #a54734; font-size: 12px; }
.login-submit { width: 100%; min-height: 56px; padding: 0 8px 0 21px; border: 0; display: flex; justify-content: space-between; align-items: center; color: #fff9ed; background: var(--moss); font-size: 13px; transition: transform .2s, background .2s; }
.login-submit i { width: 40px; height: 40px; display: grid; place-items: center; color: var(--moss-deep); background: var(--sun); font: 20px var(--serif); transition: transform .25s; }
.login-submit:hover { background: #2e5547; transform: translateY(-2px); }
.login-submit:hover i { transform: translateX(3px); }
.login-submit:disabled { cursor: wait; opacity: .7; transform: none; }
.login-submit.is-loading i { animation: login-arrow 1s ease-in-out infinite; }
.login-footnote { display: flex; gap: 9px; margin: 28px 0 0; color: #858b83; font-size: 10px; line-height: 1.7; }
.login-footnote span { color: var(--sun); font-size: 15px; }
.login-leaving .login-shell { opacity: 0; transform: translateY(-5px); transition: .25s ease; }

@keyframes login-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes card-breathe { 50% { transform: rotate(-1deg) translateY(-7px); } }
@keyframes login-arrow { 50% { transform: translateX(5px); } }

@media (max-width: 980px) {
  .login-shell { grid-template-columns: 1fr 1fr; }
  .login-word-stage { right: 20px; transform: scale(.82); transform-origin: right bottom; }
  .login-editorial { width: 100%; }
}

@media (max-width: 760px) {
  .sidebar-bottom { display: flex; align-items: center; gap: 5px; margin-top: 0; }
  .sidebar-bottom .settings-nav { display: none; }
  .mobile-app-switcher { display: block; width: clamp(110px, 29vw, 128px); height: 34px; flex: 0 0 auto; }
  .mobile-app-switcher > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mobile-app-switcher .paper-select-trigger { min-height: 34px; height: 34px; grid-template-columns: minmax(0, 1fr) 26px; padding: 3px 2px 3px 10px; border-color: rgba(255,255,255,.2); color: #f5f0e6; background: rgba(255,255,255,.04); box-shadow: none; }
  .mobile-app-switcher .paper-select-trigger:hover { border-color: rgba(231,172,73,.72); background: rgba(231,172,73,.09); }
  .mobile-app-switcher .paper-select.is-open .paper-select-trigger { border-color: var(--sun); box-shadow: inset 2px 0 0 var(--sun); }
  .mobile-app-switcher .paper-select-value { font: 500 11px/1.2 var(--chinese-serif); }
  .mobile-app-switcher .paper-select-chevron { width: 26px; height: 26px; border-left-color: rgba(255,255,255,.14); color: var(--sun); font-size: 14px; }
  .mobile-app-switcher .paper-select-menu { right: 0; left: auto; width: min(164px, calc(100vw - 24px)); min-width: min(164px, calc(100vw - 24px)); max-height: 224px; padding: 5px; }
  .mobile-app-switcher .paper-select-menu::before { display: none; }
  .mobile-app-switcher .paper-select-option { min-height: 38px; grid-template-columns: minmax(0,1fr); gap: 0; padding: 8px 11px; }
  .mobile-app-switcher .paper-select-index,
  .mobile-app-switcher .paper-select-check { display: none; }
  .mobile-app-switcher .paper-select-option-label { overflow: hidden; font: 500 11px/1.3 var(--chinese-serif); text-overflow: ellipsis; white-space: nowrap; }
  .mobile-app-switcher .paper-select-option.selected { color: var(--moss-deep); background: #eef0e8; box-shadow: inset 3px 0 0 var(--sun); }
  .account-strip { display: flex; gap: 4px; margin: 0; padding: 0; border: 0; }
  .account-utilities { order: 1; display: flex; gap: 4px; padding: 0; }
  .account-tool { width: 28px; min-width: 28px; height: 30px; padding: 0; }
  .account-tool span { display: none; }
  .account-language { display: none; }
  .account-monogram { order: 2; width: 30px; height: 30px; font-size: 14px; }
  .account-identity { display: none; }
  .account-logout { order: 3; width: 28px; height: 28px; }
  .login-shell { display: block; background: var(--paper); }
  .login-library { min-height: 330px; padding: 28px 24px; }
  .login-library::after { right: -30px; top: 95px; font-size: 260px; }
  .login-editorial { margin-top: 52px; }
  .login-editorial h1 { font-size: clamp(36px, 11vw, 52px); }
  .login-editorial > p:last-child { display: none; }
  .login-word-stage, .login-quote { display: none; }
  .login-desk { min-height: calc(100vh - 330px); padding: 48px 24px 54px; place-items: start center; }
  .login-desk-inner::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .login-brand, .login-editorial, .login-word-stage, .login-desk-inner, .card-front, .speak-button.is-preparing, .speak-button.is-speaking, .paper-select-menu { animation: none; }
}

/* 首次登录像打开一本新册子，而不是填写一张后台表单。 */
.onboarding-page { min-height: 100vh; overflow-x: hidden; color: #f7f2e6; background: var(--moss-deep); }
.onboarding-shell { position: relative; z-index: 1; width: min(1180px, calc(100% - 48px)); min-height: 100vh; margin: 0 auto; padding: 34px 0 64px; }
.onboarding-shell::before { content: "A · 한"; position: fixed; z-index: -1; right: -4vw; bottom: -8vh; color: rgba(255,255,255,.025); font: 700 min(36vw, 480px)/.8 var(--serif); letter-spacing: -.12em; transform: rotate(-8deg); }
.onboarding-header { display: flex; align-items: center; justify-content: space-between; animation: login-rise .6s ease both; }
.onboarding-logout { padding: 8px 0; border: 0; color: #aebbb1; background: transparent; font: 10px var(--mono); letter-spacing: .08em; }
.onboarding-logout:hover { color: var(--sun); }
.onboarding-intro { width: min(820px, 100%); margin: clamp(62px, 10vh, 108px) 0 42px; animation: login-rise .7s .06s ease both; }
.onboarding-intro .eyebrow { color: var(--sun); }
.onboarding-intro h1 { margin: 15px 0 20px; font-size: clamp(42px, 6vw, 78px); line-height: 1.02; }
.onboarding-intro h1 em { color: #e3b15c; }
.onboarding-intro > p:last-child { max-width: 620px; color: #b5c2b8; font-size: 14px; line-height: 1.9; }
.onboarding-form { animation: login-rise .78s .14s ease both; }
.onboarding-language-fieldset { margin: 0; padding: 0; border: 0; }
.onboarding-language-fieldset legend { margin-bottom: 13px; color: #94a49a; font: 10px var(--mono); letter-spacing: .14em; }
.onboarding-language-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.onboarding-language-card { position: relative; min-height: 230px; overflow: hidden; padding: 28px 30px; border: 1px solid rgba(255,255,255,.16); color: #e7ede7; background: rgba(255,255,255,.045); cursor: pointer; transition: border-color .22s, background .22s, transform .22s; }
.onboarding-language-card::after { content: "Aa"; position: absolute; right: 20px; bottom: -13px; color: rgba(255,255,255,.045); font: 700 92px/1 var(--serif); }
.onboarding-language-card.korean::after { content: "한"; font-family: "Noto Serif KR", serif; }
.onboarding-language-card:hover { border-color: rgba(231,172,73,.58); background: rgba(255,255,255,.07); transform: translateY(-3px); }
.onboarding-language-card.selected { border-color: var(--sun); color: #fffaf0; background: linear-gradient(135deg, rgba(231,172,73,.15), rgba(255,255,255,.055)); box-shadow: inset 5px 0 0 var(--sun); transform: translateY(-3px); }
.onboarding-language-card input { position: absolute; opacity: 0; pointer-events: none; }
.language-card-number { color: #82958a; font: 9px var(--mono); }
.language-card-check { position: absolute; right: 24px; top: 22px; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: var(--moss-deep); background: var(--sun); font: 700 13px var(--mono); opacity: 0; transform: scale(.72); transition: .2s; }
.onboarding-language-card.selected .language-card-check { opacity: 1; transform: scale(1); }
.language-card-script { display: block; margin: 38px 0 8px; color: var(--sun); font: 9px var(--mono); letter-spacing: .13em; }
.onboarding-language-card strong { display: block; font: 600 clamp(30px, 4vw, 48px)/1 var(--serif); }
.onboarding-language-card.korean strong { font-family: "Noto Serif KR", serif; }
.onboarding-language-card small { display: block; margin-top: 8px; color: #9fb0a4; font-size: 12px; }
.onboarding-language-card p { position: relative; z-index: 1; max-width: 390px; margin: 23px 0 0; color: #aebbb2; font-size: 12px; line-height: 1.7; }
.onboarding-level { display: grid; grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr); gap: 42px; align-items: center; margin-top: 18px; padding: 27px 30px; color: var(--ink); background: var(--paper); border-left: 5px solid var(--clay); }
.onboarding-level h2 { margin-bottom: 10px; font-size: 27px; }
.onboarding-level > div > p:last-child { margin: 0; color: #707a71; font-size: 12px; line-height: 1.7; }
.onboarding-level-options { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #c9c5b9; }
.onboarding-level-options label { min-width: 0; cursor: pointer; border-left: 1px solid #d8d3c7; }
.onboarding-level-options label:first-child { border-left: 0; }
.onboarding-level-options input { position: absolute; opacity: 0; pointer-events: none; }
.onboarding-level-options span { min-height: 72px; display: grid; place-content: center; gap: 5px; padding: 11px; text-align: center; transition: .2s; }
.onboarding-level-options b { font: 500 12px var(--chinese-serif); }
.onboarding-level-options small { color: #8a9188; font: 8px var(--mono); }
.onboarding-level-options input:checked + span { color: #fff; background: var(--moss); box-shadow: inset 0 -4px 0 var(--sun); }
.onboarding-level-options input:checked + span small { color: #cfddd2; }
.onboarding-submit-row { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-top: 26px; }
.onboarding-submit-row > p { margin: 0; color: #8fa096; font: 9px var(--mono); letter-spacing: .08em; }
.onboarding-submit-row > div { width: min(100%, 360px); }
.onboarding-feedback { min-height: 18px; margin: 0 0 8px; color: #f0c780; font-size: 11px; text-align: right; }
.onboarding-submit { width: 100%; min-height: 58px; display: flex; justify-content: space-between; align-items: center; padding: 0 8px 0 20px; border: 0; color: var(--moss-deep); background: var(--sun); transition: transform .2s, opacity .2s; }
.onboarding-submit i { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; background: var(--clay); font: 20px var(--serif); }
.onboarding-submit:not(:disabled):hover { transform: translateY(-2px); }
.onboarding-submit:disabled { cursor: not-allowed; opacity: .42; }
.onboarding-submit.is-loading i { animation: login-arrow 1s ease-in-out infinite; }
.onboarding-leaving .onboarding-shell { opacity: 0; transform: translateY(-5px); transition: .25s ease; }

@media (max-width: 760px) {
  .onboarding-shell { width: min(100% - 34px, 620px); padding-top: 22px; }
  .onboarding-intro { margin-top: 54px; }
  .onboarding-intro h1 { font-size: clamp(37px, 11vw, 54px); }
  .onboarding-language-grid, .onboarding-level { grid-template-columns: 1fr; }
  .onboarding-language-card { min-height: 190px; padding: 23px; }
  .language-card-script { margin-top: 27px; }
  .onboarding-level { gap: 22px; padding: 23px 19px; }
  .onboarding-level-options { grid-template-columns: repeat(2, 1fr); }
  .onboarding-level-options label:nth-child(odd) { border-left: 0; }
  .onboarding-level-options label:nth-child(n+3) { border-top: 1px solid #d8d3c7; }
  .onboarding-submit-row { align-items: stretch; flex-direction: column-reverse; }
  .onboarding-submit-row > div { width: 100%; }
  .onboarding-feedback { text-align: left; }
}

/* 图片不是附件，而是这一页新的学习语境。 */
.scene-input-panel { display: grid; grid-template-columns: minmax(220px, .82fr) minmax(0, 1.18fr); gap: 18px; margin-top: 18px; }
.scene-upload-column { position: relative; }
.scene-upload { position: relative; min-height: 232px; display: grid; place-items: center; overflow: hidden; border: 1px dashed #9cad9f; color: #617064; background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(233,238,227,.8)); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.scene-upload:hover, .scene-upload.is-dragging { border-color: var(--clay); background: #fbf7ec; transform: translateY(-2px); }
.scene-upload.has-image { border-style: solid; background: var(--moss-deep); }
.scene-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.scene-upload-empty { display: grid; place-items: center; gap: 7px; padding: 24px; text-align: center; }
.scene-upload-empty b { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #b7c3b6; border-radius: 50%; color: var(--clay); font: 300 24px var(--serif); }
.scene-upload-empty strong { font: 600 17px var(--chinese-serif); }
.scene-upload-empty small { color: #879187; font-size: 11px; }
.scene-upload-empty kbd { margin-top: 5px; border: 1px solid #c6d0c3; padding: 5px 8px; color: #6a796d; background: rgba(255,255,255,.55); font: 9px var(--mono); letter-spacing: .08em; }
.scene-upload img { width: 100%; height: 232px; display: block; object-fit: cover; }
.scene-remove { position: absolute; right: 8px; bottom: 8px; z-index: 2; border: 0; padding: 7px 10px; color: #fff; background: rgba(24,55,47,.82); font: 9px var(--mono); backdrop-filter: blur(8px); }
.scene-description-column { min-width: 0; display: flex; flex-direction: column; padding: 19px 20px; border-left: 3px solid var(--sun); background: rgba(251,250,244,.78); }
.scene-description-column label span, .scene-description-column label small { display: block; }
.scene-description-column label span { color: var(--moss-deep); font: 600 15px var(--chinese-serif); }
.scene-description-column label small { margin-top: 5px; color: #7c877d; font-size: 10px; }
.scene-description-column textarea { flex: 1; min-height: 94px; margin-top: 14px; resize: vertical; border: 0; border-bottom: 1px solid #aebcaf; outline: 0; padding: 12px 2px; color: var(--ink); background: transparent; font: 500 15px/1.65 var(--chinese-serif); }
.scene-description-column textarea:focus { border-bottom-color: var(--clay); }
.scene-privacy { margin: 11px 0 14px; color: #849087; font: 9px/1.55 var(--mono); }
.scene-search-button { min-height: 48px; display: flex; align-items: center; justify-content: space-between; border: 0; padding: 0 9px 0 16px; color: #fff; background: var(--moss); font-size: 12px; }
.scene-search-button b { width: 32px; height: 32px; display: grid; place-items: center; color: var(--moss-deep); background: var(--sun); font: 17px var(--serif); }
.scene-search-button:disabled { cursor: wait; opacity: .7; }
.scene-search-button.is-loading b { animation: lookup-spin 1s linear infinite; }
.scene-result-hero { background: #e7ecdf; border-bottom: 1px solid var(--rule); }
.scene-observation { position: relative; padding: clamp(22px, 3vw, 38px); }
.scene-observation::after { content: "03"; position: absolute; right: 24px; top: 8px; color: rgba(49,84,71,.07); font: 700 58px var(--serif); }
.scene-observation h2 { max-width: 920px; margin: 13px 0 24px; color: var(--moss-deep); font: 600 clamp(13px, 1.5vw, 21.6px)/1.65 var(--chinese-serif); }
.scene-observation > div { padding-top: 15px; border-top: 1px solid #c5cfc0; }
.scene-observation > div span { color: var(--clay); font: 9px var(--mono); letter-spacing: .13em; }
.scene-observation > div p { margin: 8px 0 0; color: #526056; font-size: 13px; line-height: 1.75; }
.scene-uncertainty { margin: 15px 0 0; padding: 9px 11px; color: #775f48; background: #f5ead2; font-size: 11px; line-height: 1.65; }
.scene-sentence-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; margin-top: 26px; padding: clamp(24px, 4vw, 42px); color: #f8f3e6; background: var(--moss-deep); }
.scene-sentence-card h3 { margin: 14px 0 8px; font: 600 clamp(12.6px, 1.5vw, 21.6px)/1.28 var(--serif); }
.scene-sentence-card h3 .speak-button { vertical-align: .15em; }
.scene-sentence-card p:not(.eyebrow) { margin: 0; color: #b8c7bc; font-size: 13px; }
.scene-sentence-card > button { min-width: 150px; border: 1px solid rgba(243,197,107,.55); padding: 13px 15px; color: var(--sun); background: transparent; font-size: 11px; }
.scene-sentence-card > button span { margin-left: 10px; }
.scene-section { margin-top: 28px; }
.scene-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 11px; }
.scene-section-heading p { margin: 0; }
.scene-section-heading > span { color: #7c867d; font-size: 10px; }
.scene-alternatives, .scene-candidates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #cbd1c6; border-left: 1px solid #cbd1c6; }
.scene-alternative, .scene-candidate { min-width: 0; display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; gap: 11px; align-items: start; border: 0; border-right: 1px solid #cbd1c6; border-bottom: 1px solid #cbd1c6; padding: 17px; color: var(--ink); background: rgba(249,247,239,.72); text-align: left; transition: background .18s, transform .18s; }
.scene-alternative:hover, .scene-candidate:hover { position: relative; z-index: 1; background: #fffaf0; transform: translateY(-2px); }
.scene-alternative > span, .scene-candidate > span { color: var(--clay); font: 9px var(--mono); }
.scene-alternative strong, .scene-candidate strong { display: block; color: var(--moss-deep); font: 600 17px var(--serif); }
.scene-alternative small, .scene-candidate small { display: block; margin-top: 4px; color: #6e786f; font-size: 11px; }
.scene-candidate p { margin: 8px 0 0; color: #838b82; font-size: 10px; line-height: 1.55; }
.scene-alternative > i, .scene-candidate > i { color: var(--clay); font: 17px var(--serif); }
.scene-candidate em { display: inline-block; margin-top: 9px; padding: 4px 6px; color: #52705d; background: #e3ebdf; font: normal 8px var(--mono); white-space: nowrap; }

@media (max-width: 760px) {
  .lookup-mode-switch { grid-template-columns: repeat(3, 1fr); }
  .lookup-mode-button { grid-template-columns: 17px 1fr; gap: 4px; padding: 8px 5px 9px; }
  .lookup-mode-button span { font-size: 10px; }
  .lookup-mode-button small { font-size: 6px; letter-spacing: .03em; }
  .scene-input-panel { grid-template-columns: 1fr; }
  .scene-upload, .scene-upload img { min-height: 210px; height: 210px; }
  .scene-description-column { padding: 17px 15px; }
  .scene-sentence-card { grid-template-columns: 1fr; gap: 20px; }
  .scene-sentence-card > button { width: 100%; }
  .scene-alternatives, .scene-candidates { grid-template-columns: 1fr; }
  .scene-section-heading { display: block; }
  .scene-section-heading > span { display: block; margin-top: 6px; }
}

/* 中文意图到地道表达：沿用纸张与编辑排版，但用声音轨迹强调口语输入。 */
.lookup-mode-control { width: min(100%, 720px); }
.expression-input-panel { margin-top: 18px; border: 1px solid #bfcabe; background: linear-gradient(145deg, rgba(252,250,241,.96), rgba(232,239,229,.9)); }
.expression-input-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding: 20px 22px 14px; border-bottom: 1px solid rgba(120,139,121,.25); }
.expression-input-heading p, .expression-input-heading h2 { margin: 0; }
.expression-input-heading h2 { margin-top: 6px; color: var(--moss-deep); font: 600 17px/1.5 var(--chinese-serif); }
.expression-source-field { display: block; padding: 19px 22px 0; }
.expression-source-field > span, .expression-context-field > span { display: block; color: #5d6e61; font: 10px var(--mono); letter-spacing: .08em; }
.expression-source-field textarea { width: 100%; min-height: 126px; resize: vertical; border: 0; border-bottom: 1px solid #9cac9d; outline: 0; padding: 11px 0 15px; color: var(--ink); background: transparent; font: 500 clamp(17px, 2vw, 24px)/1.6 var(--chinese-serif); }
.expression-source-field textarea:focus { border-bottom-color: var(--clay); }
.expression-voice-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 13px; align-items: center; padding: 13px 22px; }
.expression-record-button { min-width: 142px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #b8c4b7; padding: 0 14px; color: var(--moss-deep); background: rgba(255,255,255,.62); touch-action: none; user-select: none; -webkit-user-select: none; font-size: 11px; }
.expression-record-button:hover { border-color: var(--clay); color: var(--clay); }
.expression-record-button.recording { color: #fff9ed; border-color: var(--clay); background: var(--clay); }
.expression-record-button.transcribing { color: #fff; border-color: var(--moss); background: var(--moss); }
.expression-record-button:disabled { cursor: not-allowed; opacity: .52; }
.expression-record-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 4px rgba(188,99,79,.12); }
.expression-record-button.recording .expression-record-dot { background: #fff; animation: lookup-pulse 1s ease-in-out infinite; }
.expression-record-state { min-width: 0; display: flex; align-items: center; gap: 10px; color: #78857a; }
.expression-record-state strong { overflow: hidden; text-overflow: ellipsis; font-size: 10px; font-weight: 500; white-space: nowrap; }
.expression-record-state time, .expression-character-count { color: var(--clay); font: 9px var(--mono); }
.expression-context-field { display: block; padding: 2px 22px 17px; }
.expression-context-field small { color: #98a097; font-size: 8px; }
.expression-context-field input { width: 100%; margin-top: 8px; border: 1px solid #c2ccc0; outline: 0; padding: 11px 12px; color: var(--ink); background: rgba(255,255,255,.55); font-size: 12px; }
.expression-context-field input:focus { border-color: var(--clay); }
.expression-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 22px 19px; background: rgba(43,76,61,.055); }
.expression-submit-row p { max-width: 500px; margin: 0; color: #7e897f; font-size: 9px; line-height: 1.55; }
.expression-generate-button { min-width: 170px; min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 0; padding: 0 10px 0 16px; color: #fff; background: var(--moss); font-size: 11px; }
.expression-generate-button b { width: 28px; height: 28px; display: grid; place-items: center; color: var(--moss-deep); background: var(--sun); font: 16px var(--serif); }
.expression-generate-button:disabled { cursor: not-allowed; opacity: .55; }
.expression-recent { padding: 0 22px 19px; }
.expression-recent-heading { display: flex; justify-content: space-between; margin-bottom: 7px; color: #7d887d; font: 8px var(--mono); letter-spacing: .1em; }
.expression-recent-heading button { border: 0; padding: 0; color: var(--clay); background: transparent; font: inherit; }
#expression-recent-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
#expression-recent-list button { min-width: 0; border: 1px solid #cbd4c7; padding: 9px 10px; color: var(--ink); background: rgba(255,255,255,.45); text-align: left; }
#expression-recent-list span, #expression-recent-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#expression-recent-list span { font-size: 11px; } #expression-recent-list small { margin-top: 4px; color: #7e897e; font: 10px var(--serif); }
.expression-result-intro { position: relative; padding: clamp(24px,4vw,42px); color: #f8f3e6; background: linear-gradient(125deg, #173c33, #315c4b); overflow: hidden; }
.expression-result-intro::after { content: "04"; position: absolute; right: 25px; top: 4px; color: rgba(255,255,255,.07); font: 700 72px var(--serif); }
.expression-result-intro h2 { position: relative; z-index: 1; max-width: 850px; margin: 13px 0 8px; font: 600 clamp(19px,2.5vw,31px)/1.55 var(--chinese-serif); }
.expression-result-intro > p:not(.eyebrow) { position: relative; z-index: 1; margin: 0; color: #c7d6ca; font-size: 12px; }
.expression-warnings { position: relative; z-index: 1; display: grid; gap: 5px; margin-top: 18px; }
.expression-warnings p { margin: 0; padding: 8px 10px; color: #e4dac5; background: rgba(255,255,255,.07); font-size: 10px; line-height: 1.6; }
.expression-warnings b { margin-right: 8px; color: var(--sun); font: 8px var(--mono); letter-spacing: .08em; }
.expression-result-section { margin-top: 27px; }
.expression-suggestions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.expression-suggestion { position: relative; min-width: 0; border: 1px solid #c7d0c4; padding: 18px; background: rgba(250,248,240,.78); }
.expression-suggestion.featured { grid-column: 1/-1; border-color: #bba568; background: linear-gradient(110deg, #f7efd9, #eff3e9); }
.expression-suggestion > header { display: grid; grid-template-columns: 23px minmax(0,1fr) auto; gap: 9px; align-items: start; }
.expression-suggestion > header > span { color: var(--clay); font: 9px var(--mono); }
.expression-suggestion header p { margin: 0; color: var(--moss-deep); font: 600 12px var(--chinese-serif); }
.expression-suggestion header small { display: block; margin-top: 2px; color: #859086; font-size: 9px; }
.expression-favorite { border: 1px solid #b6c3b5; padding: 6px 8px; color: var(--moss); background: transparent; font: 9px var(--mono); }
.expression-favorite.saved { color: #fff; border-color: var(--clay); background: var(--clay); }
.expression-copy { display: flex; align-items: start; gap: 7px; margin-top: 18px; }
.expression-copy h3 { margin: 0; color: var(--moss-deep); font: 600 clamp(17px,2vw,25px)/1.4 var(--serif); }
.expression-copy h3[lang="ko"], .saved-expression-copy h3[lang="ko"] { font-family: "Noto Serif KR", serif; }
.expression-back-translation { margin: 9px 0 0; color: #657167; font: 12px/1.65 var(--chinese-serif); }
.expression-pronunciation { margin: 7px 0 0; color: #8a6a55; font: 10px var(--mono); }
.expression-scenario { margin: 13px 0 0; color: #68766b; font-size: 10px; }.expression-scenario span { margin-right: 7px; color: var(--clay); font: 8px var(--mono); }
.expression-points { display: grid; gap: 7px; margin: 15px 0 0; padding: 12px; background: rgba(226,233,222,.7); list-style: none; }
.expression-points li { display: grid; grid-template-columns: minmax(85px,.4fr) 1fr; gap: 9px; font-size: 10px; line-height: 1.5; }.expression-points b { color: var(--moss-deep); font-family: var(--serif); }.expression-points span { color: #6f7a70; }
.expression-usage { margin: 10px 0 0; color: #7c877d; font-size: 10px; line-height: 1.6; }
.expression-unfold { margin-top: 15px; border: 0; border-bottom: 1px solid #9aab9b; padding: 4px 0; color: var(--moss); background: transparent; font: 9px var(--mono); }
.library-kind-switch { display: inline-flex; margin: -10px 0 23px; border-bottom: 1px solid #b9c5b8; }
.library-kind-switch button { border: 0; border-bottom: 3px solid transparent; padding: 10px 18px; color: #778278; background: transparent; font: 11px var(--chinese-serif); }
.library-kind-switch button.active { color: var(--moss-deep); border-bottom-color: var(--clay); }
.expression-library-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.saved-expression-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.saved-expression-card { border-top: 3px solid var(--moss); padding: 18px; background: rgba(250,248,240,.8); box-shadow: 0 8px 25px rgba(38,61,48,.055); }
.saved-expression-card header { display: flex; justify-content: space-between; gap: 12px; color: var(--clay); font: 9px var(--mono); }.saved-expression-card header small { color: #899289; }
.saved-expression-copy { display: flex; align-items: start; gap: 6px; margin-top: 14px; }.saved-expression-copy h3 { margin: 0; color: var(--moss-deep); font: 600 20px/1.42 var(--serif); }
.saved-expression-card > p { margin: 8px 0 0; color: #667268; font-size: 11px; }.saved-expression-card blockquote { margin: 15px 0 0; border-left: 2px solid var(--sun); padding: 2px 0 2px 10px; color: #7e7668; font: 11px/1.6 var(--chinese-serif); }
.saved-expression-scene { display: block; margin-top: 9px; color: #7c887e; font-size: 9px; }.saved-expression-note { padding: 8px 10px; background: #f1e7d9; }
.saved-expression-card footer { display: flex; justify-content: flex-end; gap: 7px; margin-top: 15px; }.saved-expression-card footer button { border: 1px solid #bdc8ba; padding: 6px 8px; color: var(--moss); background: transparent; font: 9px var(--mono); }.saved-expression-card footer .danger { color: #9b4939; border-color: #d8b8ae; }
.expression-library-pagination { display: flex; align-items: center; justify-content: center; gap: 13px; margin-top: 22px; color: #7d887e; font: 9px var(--mono); }.expression-library-pagination button { border: 1px solid #bdc8ba; padding: 7px 10px; color: var(--moss); background: transparent; }.expression-library-pagination button:disabled { opacity: .4; }
.expression-library-empty { grid-column: 1/-1; padding: 60px 20px; text-align: center; color: #778278; }.expression-library-empty span { color: var(--sun); font-size: 28px; }.expression-library-empty button { border: 0; color: var(--moss); background: transparent; font: 11px var(--mono); }

@media (max-width: 760px) {
  .lookup-mode-switch { grid-template-columns: repeat(2,1fr); }
  .expression-input-heading, .expression-submit-row, .expression-library-toolbar { align-items: stretch; flex-direction: column; }
  .expression-input-heading { display: flex; }
  .expression-voice-row { grid-template-columns: 1fr auto; }.expression-record-button { grid-column: 1/-1; width: 100%; }.expression-record-state { min-width: 0; }
  .expression-generate-button { width: 100%; }
  #expression-recent-list, .expression-suggestions, .saved-expression-grid { grid-template-columns: 1fr; }
  .expression-suggestion.featured { grid-column: auto; }
  .expression-points li { grid-template-columns: 1fr; gap: 2px; }
  .expression-library-toolbar .library-search { margin-bottom: 0; }
}