/* Exact fonts and dimensions from Phoread Web Design; keep responsive fallbacks below. */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(assets/v/SourceSerif4-italic-400.5000784a4f41.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/v/SourceSerif4-normal-400.8ca4d603b022.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/v/SourceSerif4-normal-600.3f471d65b233.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/v/SourceSerif4-normal-700.00441a2f2ffd.ttf) format('truetype');
}
:root { --serif:'Source Serif 4',Georgia,serif; }
.view--home { text-rendering:auto; }
.workspace-header { box-sizing:content-box;height:56px;gap:26px;padding:0 28px; }
.workspace-brand { font-family:var(--serif);font-size:18px; }
.workspace-nav { gap:22px; }
.workspace-nav a { font-size:13.5px;color:#5c5343; }
.workspace-header-actions { gap:14px;font-size:13px; }
.workspace-header-actions .intro-link { font-size:13px; }
.install-link,.download-link { display:inline-flex;align-items:center;gap:7px;border-radius:9px;padding:7px 13px;font-size:13px;line-height:normal; }
.install-link { color:#b45f2e;background:#fbf1e6;border-color:#e4cbb0;font-weight:700; }
.install-link span { font-weight:600;color:#a8835c;margin-left:3px;padding-left:7px;border-color:#e4cbb0; }
.download-link { color:#5c5343;padding:7px 12px;font-weight:600; }
.header-divider { width:1px;height:20px;background:#e6dcc8; }
.account-button { border-radius:9px;padding:8px 16px;font-size:13px;line-height:normal;color:#b45f2e;background:#f6e8da;border-color:#e4cbb0;font-weight:700; }
.workspace-header .settings-link { display:none; }
.workspace-home { box-sizing:content-box;width:min(760px,calc(100% - 56px));margin:56px auto 0;padding-bottom:44px;min-height:calc(100dvh - 157px); }
.workspace-home h1 { font-family:var(--serif);font-size:30px;line-height:normal;font-weight:600;letter-spacing:normal;margin:0 0 10px; }
.home-subtitle { font-size:13.5px;line-height:normal;margin:0 0 28px;white-space:nowrap; }
.import.import-card { box-sizing:content-box;width:100%;margin-left:-1px;border:1.5px solid #dcab85;border-radius:14px;box-shadow:0 10px 30px rgba(120,90,50,.10);cursor:text; }
.import-main { box-sizing:content-box;min-height:0;padding:20px 18px 22px 22px;gap:14px;align-items:flex-start; }
.import-symbol { width:17px;height:17px;margin-top:3px; }
.import-editor { display:flex;flex-direction:column; }
.import__input { height:24px;line-height:24px;min-height:0;font-size:15px;margin:0; }
.import__input::placeholder { color:#a89a82; }
.import-main>.btn { box-sizing:content-box;font-size:13.5px;line-height:normal;border-radius:9px;padding:10px 20px;min-height:0;min-width:0; }
.daily-quote { padding-top:22px;color:#b3a78f; }
.daily-quote .eyebrow { display:block;font-size:11px;font-weight:700;line-height:normal;letter-spacing:1.5px;color:#c4b9a3;margin-bottom:4px; }
.daily-quote p { font:400 20px/2.2 var(--serif);margin:0;color:#b3a78f; }
.daily-quote ruby { ruby-position:over;ruby-align:center; }
.daily-quote .quote-gloss { ruby-position:under;white-space:nowrap; }
.daily-quote ruby>span { color:#c4b9a3; }
.daily-quote rt { font:400 .58em/1 -apple-system,sans-serif;padding-bottom:2px;letter-spacing:.2px;color:#c9bfaa; }
.daily-quote .quote-gloss>rt { font:600 .5em/1 -apple-system,'PingFang SC',sans-serif;color:#c4b9a3;padding-top:3px;padding-bottom:0;letter-spacing:normal; }
.daily-quote small { display:block;font-size:13px;color:#c4b9a3;line-height:1.7;margin-top:4px; }
.import-bottom { box-sizing:content-box;padding:12px 20px;gap:8px;flex-wrap:nowrap;background:#fbf7ef; }
.import-bottom>span { margin-right:4px; }
.import-bottom .pill { box-sizing:content-box;padding:6px 13px;font-size:12.5px;line-height:normal;color:#5c5343;white-space:nowrap; }
.import-bottom small { font-size:11.5px;color:#a89a82;white-space:nowrap; }
.import-card.is-editing .import-main { padding:16px 16px 16px 20px;gap:12px;align-items:center;box-shadow:inset 0 0 0 2px rgba(180,95,46,.28);border-radius:14px 14px 0 0; }
.import-card.is-editing .import__input { height:40px;line-height:20px;padding:10px 0; }
.import-card.is-editing .import-symbol { margin:0; }
.import-card.is-editing .btn:disabled { opacity:1;background:#d9b49a;cursor:default; }
.home-recent { margin-top:36px; }
.section-heading { font-size:13px;line-height:normal;font-weight:700;color:#5c5343;margin-bottom:12px;align-items:baseline; }
.section-heading small { margin:0;color:#a89a82;font-size:13px; }
.section-heading a { font-size:12.5px;font-weight:600; }
.recent-card { box-sizing:content-box;padding:14px 16px;gap:8px;min-height:0; }
.recent-card strong { font:700 14.5px/1.4 var(--serif); }
.recent-card small { font-size:11.5px;line-height:normal;color:#a89a82; }
.recent-card .progress-line { margin-top:2px;flex:none;background:#efe6d4; }
.recent-card.recent-empty { border:1px dashed #cbbc9f;justify-content:center;gap:6px;color:#a89a82;font-size:12.5px;line-height:1.7; }
.home-footnote { display:none; }
.home-recent:has([data-action="sample"]) + .home-footnote { display:flex; }
@media(max-width:1200px) { .workspace-header { padding:0 22px;gap:20px; }.workspace-nav {gap:18px;}.intro-link,.download-link,.header-divider {display:none;}.install-link span{display:none;} }
@media(max-width:960px) { .workspace-header {height:auto;min-height:62px;padding-top:15px;}.workspace-header-actions{margin-left:auto;}.workspace-nav {width:100%;order:3;overflow:auto;min-height:44px;} }
@media(max-width:600px) {
 .workspace-header{padding:14px 18px 0;min-height:0;}.workspace-brand{font-size:18px;}.workspace-header-actions{gap:8px;}.install-link,.account-button{font-size:10px;padding:8px 10px;}.workspace-nav{gap:26px;}.workspace-nav a{font-size:12px;}
 .workspace-home{width:calc(100% - 32px);margin-top:33px;}.workspace-home h1{font-size:27px;}.home-subtitle{font-size:11px;line-height:1.8;white-space:normal;}
 .import-main{padding:18px 15px;gap:9px;}.import-main>.btn{padding:8px 10px;font-size:12px;}.import__input{height:44px;font-size:12px;line-height:1.7;}.daily-quote{padding-top:4px;}.daily-quote p{font-size:17px;margin-right:-57px;}.daily-quote small{font-size:10px;}.daily-quote .eyebrow{font-size:9px;}
 .import-bottom{padding:11px 13px;gap:7px;flex-wrap:wrap;}.import-bottom .pill{font-size:10px;padding:7px 10px;}.import-bottom>span,.import-bottom small{display:none;}.section-heading small{font-size:10px;}.recent-card{padding:14px;}.recent-card strong{font-size:14px;}
}
/* The reference uses overlay scrolling and content-box ruby annotations. */
html { scrollbar-width:none; }
html::-webkit-scrollbar { display:none; }
.import__input { flex:none; }
.daily-quote ruby,.daily-quote rt { box-sizing:content-box; }
.daily-quote,.daily-quote * { box-sizing:content-box; }
.daily-quote { display:flex;flex-direction:column; }
:root { --ui:-apple-system,'PingFang SC','Helvetica Neue',sans-serif; }
@media(min-width:1201px) {
 .workspace-header-actions .intro-link,.workspace-header-actions .install-link { margin-right:-4px; }
}
.workspace-header>.workspace-brand { min-width:109.4453125px; }
.workspace-nav a[aria-current=page]:after { bottom:.5px; }
.anonymous-replace { margin-top:24px;font-size:13px; }
.anonymous-replace summary { cursor:pointer;color:#8a7e6b; }
.anonymous-replace .pill { display:block;margin:10px 0;max-width:100%;white-space:normal;text-align:left; }
/* 01-1 input focus and 01-2 signed-in state. */
.import-shortcut { display:none; }
.import-card.is-editing .import-shortcut { display:block;flex:none;font:11.5px ui-monospace,Menlo,monospace;color:#c0b39b; }
.import-card.is-editing .import-main>.btn { align-self:center; }
.import-card.is-editing .import__input:placeholder-shown { text-indent:11.5px;font-size:13px;line-height:18.5px;padding:10.75px 0;caret-color:#b45f2e; }
.import-card.is-editing .import__input::placeholder { font-size:13px;color:#c0b39b; }
.workspace-header.is-signed-in .intro-link,.workspace-header.is-signed-in .install-link span { display:none; }
.workspace-header.is-signed-in .install-link { font-size:12.5px;font-weight:600;background:transparent;padding:6px 11px;gap:6px;margin-right:-6px; }
.workspace-header.is-signed-in .install-link svg { width:12px;height:12px; }
.workspace-header.is-signed-in .download-link { display:inline-flex;gap:6px;padding:0;border:0;font-size:12.5px;font-weight:400; }
.workspace-header.is-signed-in .download-link svg { width:11px;height:11px; }
.membership-link { border-radius:99px;padding:4px 9px;font-size:11.5px;font-weight:700;color:#8f441b;background:#f6e8da; }
.workspace-header.is-signed-in .account-button { border:0;border-radius:50%;padding:0;width:26px;height:26px;background:#d9c9ae;color:#6b5b44;font:700 11px/26px -apple-system,sans-serif;text-align:center; }
.recent-card.is-complete .progress-line i { background:oklch(.55 .13 145); }
.workspace-footer { box-sizing:content-box;width:auto;max-width:none;margin:0;padding:22px 28px;border-top:1px solid #e6dcc8;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:18px;font-size:12px;line-height:normal;color:#a89a82; }
.workspace-footer a { color:inherit; }
.footer-brand { flex:none;width:57.90625px;font:700 14px var(--serif);color:#332d24; }
.workspace-footer .footer-distribution { color:#b45f2e;font-weight:600; }
.footer-copyright { margin-left:auto;white-space:nowrap; }
@media(max-width:800px) {
  .workspace-footer { padding:22px 24px; }
  .workspace-footer a[href="/support/"] { display:none; }
  .workspace-footer .footer-copyright { font-size:0; }
  .workspace-footer .footer-copyright::after { content:'© 2026';font-size:12px; }
}
@media(max-width:600px) { .workspace-footer { flex-wrap:wrap;gap:16px; }.workspace-header.is-signed-in .download-link {display:none;} }
/* 01-3: the drop target covers the entire page and advertises the real limit. */
.drop-overlay { display:block;position:fixed;inset:0;z-index:200;padding:0;border:0;border-radius:0;background:#faf6ee;backdrop-filter:none;font:16px/normal var(--ui); }
.drop-overlay>div { box-sizing:content-box; }
.view--home:has(#marketing[hidden]) .workspace-footer { border-top:0; }

/* 02-2 / 02-7: recover from failed imports without losing the original input. */
.import-recovery { box-sizing:content-box;width:600px;max-width:calc(100% - 66px);margin:24px auto 0;padding:26px 32px 24px;background:#faf6ee;border:1px solid #e6dcc8;border-radius:14px;font-size:16px;line-height:normal;text-align:left; }
/* 02-1 · 解析中 — the card reports the pipeline's own four steps. */
.import-progress { width:600px;max-width:100%;margin:24px auto 0;background:#faf6ee;border:1px solid #e6dcc8;border-radius:14px;padding:30px 32px 26px;box-sizing:border-box; }
.import-progress__source { font:11.5px ui-monospace,Menlo,monospace;color:#a89a82;margin-bottom:8px;overflow-wrap:anywhere; }
.import-progress__title { font:700 20px var(--serif);color:#332d24;margin-bottom:22px; }
.import-progress__bar { height:6px;background:#efe6d4;border-radius:99px;margin-bottom:18px;overflow:hidden; }
.import-progress__bar i { display:block;height:6px;background:#b45f2e;border-radius:99px;transition:width .2s; }
.import-progress__steps { display:flex;flex-direction:column;gap:10px;font-size:13px; }
.import-progress__step { display:flex;align-items:center;gap:9px;color:#a89a82; }
.import-progress__step[data-state=done] { color:#5c5343; }
.import-progress__step[data-state=active] { color:#332d24;font-weight:600; }
.import-progress__mark { width:16px;height:16px;border-radius:50%;box-sizing:border-box;flex:none;display:flex;align-items:center;justify-content:center; }
.import-progress__mark--done { background:oklch(0.55 0.13 145); }
.import-progress__mark--active { border:2px solid #b45f2e;border-right-color:transparent;animation:import-spin 1s linear infinite; }
.import-progress__mark--waiting { border:1.5px dashed #cbbc9f; }
@keyframes import-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .import-progress__mark--active { animation:none; } }
.import-progress__footer { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px;padding-top:18px;border-top:1px solid #f0e8d8; }
.import-progress__footer span { font-size:12px;color:#a89a82; }
.import-progress__cancel { font:600 12.5px var(--ui);color:#8a7e6b;background:#fffdf8;border:1px solid #e6dcc8;border-radius:9px;padding:8px 16px; }
.import-recovery h2 { display:flex;align-items:center;gap:10px;margin:0 0 12px;font:700 19px/normal var(--serif);letter-spacing:normal; }
.import-recovery h2:focus { outline:none; }
.import-recovery p { font:400 13px/1.75 var(--ui);color:#5c5343;margin:0 0 20px; }
.recovery-alert { width:22px;height:22px;border-radius:50%;background:#f6e1d3;display:flex;align-items:center;justify-content:center;flex:none;font:700 13px/normal var(--ui);color:#b45f2e; }
.recovery-options { display:flex;flex-direction:column;gap:10px; }
.recovery-option { padding:13px 15px;display:flex;align-items:center;gap:12px;background:#fffdf8;border:1px solid #e6dcc8;border-radius:9px; }
.recovery-option>div { flex:1; }
.recovery-option b { font-size:13px; }
.recovery-option small { display:block;font-size:11.5px;color:#8a7e6b;margin-top:3px; }
.recovery-button { box-sizing:content-box;display:inline-block;flex:none;border:1px solid #e6dcc8;border-radius:9px;padding:8px 14px;background:#fffdf8;color:#5c5343;font:600 12.5px/normal var(--ui);text-decoration:none;cursor:pointer; }
.recovery-button--primary { border:0;background:#b45f2e;color:#fff9ef;font-weight:700; }
.recovery-button--plugin { color:#b45f2e;background:#f6e8da;border-color:#e4cbb0;font-weight:700; }
.recovery-button--retry { background:#faf6ee; }
.import-recovery--drm { width:380px;padding:24px 26px;max-width:calc(100% - 54px);display:flex;flex-direction:column;gap:12px; }
.import-recovery--drm h2 { font-size:18px;margin:0; }
.import-recovery--drm p { margin:0; }
.recovery-actions { display:flex;gap:8px; }
.recovery-actions .recovery-button { display:flex;align-items:flex-start;padding:9px 16px; }
@media(max-width:600px) { .import-recovery:not(.import-recovery--drm) { padding:22px 20px;max-width:calc(100% - 42px); } .recovery-option { flex-wrap:wrap; } }

/* 02-5: one account identity flow, matching the source login card. */
.web-dialog.auth-dialog { padding:0;border:0;border-radius:0;width:522px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 40px);background:transparent;box-shadow:none;overflow:visible; }
.auth-card { box-sizing:content-box;width:460px;max-width:calc(100% - 62px);padding:28px 30px 24px;border:1px solid #e6dcc8;border-radius:14px;background:#faf6ee;box-shadow:0 30px 80px rgba(90,65,30,.22);font:16px/normal var(--ui); }
.auth-card h2 { font:700 21px/normal var(--serif);margin:0 0 8px;outline:none; }
.auth-card .auth-intro { font:400 13px/1.75 var(--ui);color:#5c5343;margin:0 0 20px; }
#loginForm { display:flex;flex-direction:column;gap:9px;margin:0 0 16px; }
.auth-channels { display:inline-flex;align-self:flex-start;background:#f1eadc;border-radius:9px;padding:3px; }
.auth-channels button { border:0;border-radius:9px;padding:5px 13px;font:600 12px/normal var(--ui);color:#7e7161;background:transparent; }
.auth-channels button[aria-selected=true] { font-weight:700;background:#b45f2e;color:#fff9ef; }
.auth-field { box-sizing:content-box;display:flex;align-items:center;gap:9px;height:42px;border:1px solid #e6dcc8;border-radius:9px;background:#fff;padding:0 12px;font:400 13px/normal var(--ui);color:#a89a82; }
#loginPrefix { font-weight:600;color:#5c5343; }
.auth-field-divider { width:1px;height:16px;background:#ede3d0;flex:none; }
#loginPrefix[hidden]+.auth-field-divider { display:none; }
.auth-field input { width:0;min-width:0;flex:1;border:0;border-radius:0;background:transparent;margin:0;padding:0;font:400 13px/normal var(--ui);color:#332d24;outline:none; }
.auth-field input::placeholder { color:#a89a82;opacity:1; }
.auth-field:focus-within { outline:2px solid #b45f2e;outline-offset:2px; }
.auth-code { justify-content:space-between;padding-right:5px; }
#sendCode { flex:none;border:0;border-radius:9px;padding:7px 12px;font:700 12px/normal var(--ui);color:#b45f2e;background:#f6e8da; }
.auth-submit { margin-top:3px;padding:12px 0;border:0;border-radius:9px;font:700 13.5px/normal var(--ui);color:#fff9ef;background:#b45f2e;text-align:center; }
.auth-or { display:flex;align-items:center;gap:10px;color:#d8cdb8;font:400 11.5px/normal var(--ui);margin-bottom:10px; }
.auth-or span { flex:1;height:1px;background:#ede3d0; }
.auth-wechat { box-sizing:content-box;display:flex;align-items:center;justify-content:center;gap:9px;height:42px;width:calc(100% - 2px);padding:0;border:1px solid #e6dcc8;border-radius:9px;font:700 13px/normal var(--ui);color:#5c5343;background:transparent;margin-bottom:16px; }
.auth-wechat-mark { width:16px;height:16px;border-radius:4px;background:#7e7161; }
.auth-card .auth-policy { font:400 11.5px/1.7 var(--ui);color:#a89a82;text-align:center;line-height:1.7;border-top:1px solid #ede3d0;padding-top:12px;margin:0; }
.auth-card .auth-policy a { color:#b45f2e; }
.auth-card .auth-status { font:400 12px/1.7 var(--ui);color:#8f441b;margin:0 0 16px; }
.auth-dialog .anonymous-replace { padding:12px 16px;background:#faf6ee;border:1px solid #e6dcc8;border-radius:9px;margin-top:12px;font:12px/1.7 var(--ui); }
.auth-dialog .anonymous-replace .pill { display:block;margin-top:8px;max-width:100%;white-space:normal;text-align:left; }
.auth-dismiss { display:block;margin:10px auto 0;padding:5px 16px;border-radius:9px;background:#faf6ee;color:#5c5343;font:12px/normal var(--ui); }
.auth-card button:disabled { cursor:default;opacity:.55; }
#wechatPanel { text-align:center;margin-bottom:16px; }
#wechatPanel iframe { display:block;width:100%;height:360px;border:0;background:#fff;border-radius:9px; }
#cancelWechat { font:12px var(--ui);color:#b45f2e;padding:8px 14px; }
@media(max-height:650px) { .web-dialog.auth-dialog { overflow:auto; } }
.auth-dialog:has(#wechatPanel:not([hidden])),.auth-dialog:has(.anonymous-replace[open]) { overflow:auto; }

/* 01-4 lower home: the ported design sections own their own spacing and borders.
   The design source has no border-box reset, so its fixed widths are content widths. */
.marketing.marketing--design { margin:0;border-top:0; }
.marketing--design,.marketing--design * { box-sizing:content-box; }
/* The lower home carries the design's own footer; the folded footer belongs to 01-5. */
.view--home:has(#marketing:not([hidden])) .workspace-footer { display:none; }
.marketing--design button { font:inherit;padding:0;line-height:inherit;letter-spacing:inherit; }
/* The design fixes the lower home at 1240px. Narrow screens keep the same copy and
   the same illustrations: rows stack, text reflows, and an illustration that cannot
   shrink scrolls inside its own row instead of widening the page. */
@media(max-width:1060px) {
  .marketing--design .mk-section { padding-left:20px!important;padding-right:20px!important; }
  .marketing--design .mk-col { width:100%!important;max-width:100%!important; }
  .marketing--design .mk-grid3,.marketing--design .mk-grid2 { grid-template-columns:minmax(0,1fr)!important;gap:20px!important; }
  .marketing--design .mk-grid3>*,.marketing--design .mk-grid2>* { min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden; }
}
@media(max-width:600px) {
  .marketing--design .marketing-footer { flex-wrap:wrap!important;row-gap:10px!important;padding-left:20px!important;padding-right:20px!important; }
  .marketing--design .marketing-footer>span:last-child { margin-left:0!important; }
}

/* 03-3 empty shelf: the design's card, reused by every empty page state. */
.empty-state { box-sizing:content-box;width:560px;max-width:calc(100% - 42px);height:300px;padding:0;margin-inline:auto;border:1px solid #e6dcc8;border-style:solid;border-radius:14px;background:#faf6ee;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;margin-top:25px; }
.empty-state h2 { font:700 20px/normal var(--serif);margin:0; }
.empty-state p { font:400 13px/normal var(--ui);color:#8a7e6b;margin:0; }
.empty-state>div { display:flex;gap:8px;margin:0;flex-wrap:wrap;justify-content:center; }
.empty-state .btn { box-sizing:content-box;display:block;min-height:0;border-radius:9px;padding:10px 18px;font-size:13px;line-height:normal;text-align:center; }
.empty-state .btn--primary { font-weight:700;color:#fff9ef;background:#b45f2e; }
.empty-state .btn--ghost { font-weight:600;color:#5c5343;background:#fffdf8;border:1px solid #e6dcc8; }

/* 02-4 · imported book confirmation, shown under the import box like the recovery cards. */
.import-result { box-sizing:content-box;width:600px;max-width:calc(100% - 54px);margin:24px auto 0;padding:24px 26px;background:#faf6ee;border:1px solid #e6dcc8;border-radius:14px;text-align:left; }
.import-book { display:flex;gap:20px; }
.import-book-cover { box-sizing:content-box;width:118px;height:168px;flex:none;border-radius:4px;background:linear-gradient(150deg,#e2d6be,#c6b48f);box-shadow:0 8px 20px rgba(90,65,30,.18);display:flex;align-items:flex-end;padding:12px; }
.import-book-cover span { font:700 13px/1.3 var(--serif);color:#4a3d28;overflow:hidden;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical; }
.import-book-body { flex:1;min-width:0;display:flex;flex-direction:column;gap:12px; }
.import-book-body h2 { font:700 20px/1.3 var(--serif);margin:0;outline:none; }
.import-book-body h2:focus { outline:none; }
.import-book-body p { font:400 12.5px/normal var(--ui);color:#8a7e6b;margin:4px 0 0; }
.import-book-match { box-sizing:content-box;background:#fffdf8;border:1px solid #e6dcc8;border-radius:9px;padding:13px 15px; }
.import-book-match>div:first-child { display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px; }
.import-book-match>div:first-child span:first-child { font:700 12.5px/normal var(--ui); }
.import-book-match>div:first-child span:last-child { font:700 12px/normal var(--ui);color:#b45f2e; }
.import-book-bar { height:6px;background:#efe6d4;border-radius:99px; }
.import-book-bar i { display:block;height:6px;background:#b45f2e;border-radius:99px; }
.import-book-match small { display:block;font:400 11.5px/1.6 var(--ui);color:#8a7e6b;margin-top:8px; }
.import-book-actions { display:flex;gap:8px;flex-wrap:wrap; }
/* A native button centres its anonymous label; the design lays the label out from the top of the content box. */
.import-book-actions .btn { box-sizing:content-box;display:flex;align-items:flex-start;justify-content:center;appearance:none;min-height:0;border-radius:9px;line-height:normal;text-align:center; }
.import-book-actions .btn--primary { font:700 13.5px var(--ui);color:#fff9ef;background:#b45f2e;padding:10px 20px; }
.import-book-actions .btn--ghost { font:600 13px var(--ui);color:#5c5343;background:#fffdf8;border:1px solid #e6dcc8;padding:10px 16px; }
@media(max-width:600px) { .import-result { padding:20px;max-width:calc(100% - 42px); } .import-book { flex-direction:column;align-items:flex-start; } }

/* 13-2 · shortcut card; the dialog widens to the card instead of squeezing it. */
.web-dialog:has(.shortcut-grid) { width:auto;max-width:calc(100vw - 32px); }
.shortcut-grid { box-sizing:content-box;width:520px;max-width:calc(100% - 50px);padding:22px 24px;background:#fffdf8;border:1px solid #e6dcc8;border-radius:14px;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px; }
.shortcut-grid>div { display:flex;align-items:center;gap:10px; }
.shortcut-grid kbd { box-sizing:content-box;flex:none;font:700 11.5px ui-monospace,Menlo,monospace;color:#5c5343;background:#faf6ee;border:1px solid #e6dcc8;border-radius:4px;padding:3px 8px;text-align:center; }
.shortcut-grid span { font:400 12.5px/normal var(--ui);color:#5c5343; }
@media(max-width:600px) { .shortcut-grid { grid-template-columns:minmax(0,1fr);max-width:calc(100% - 42px); } }

/* 07-2 · read-aloud is unavailable: name the reason and the way out. */
.speech-notice { box-sizing:content-box;position:absolute;left:50%;bottom:104px;transform:translateX(-50%);z-index:20;width:420px;max-width:calc(100vw - 50px);margin:0;box-shadow:0 12px 34px rgba(90,65,30,.16);padding:22px 24px;background:#faf6ee;border:1px solid #e6dcc8;border-radius:14px;display:flex;flex-direction:column;gap:14px;text-align:left; }
.speech-notice-row { box-sizing:content-box;display:flex;align-items:center;gap:10px;background:#fffdf8;border:1px solid #e6dcc8;border-radius:99px;padding:10px 14px; }
.speech-notice-row--action { border-color:#e4cbb0; }
.speech-notice-row span { flex:1;font:400 12.5px/normal var(--ui);color:#8a7e6b; }
.speech-notice-row--action span { color:#5c5343; }
.speech-notice-row button { font:700 12.5px/normal var(--ui);color:#b45f2e;padding:0;background:none;border:0; }
.speech-notice p { font:400 12px/1.75 var(--ui);color:#a89a82;margin:0; }

/* 06-4 · AI companion is not switched on. */
.reader-aux .ai-offer { box-sizing:content-box;width:340px;height:500px;max-width:100%;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center; }
.ai-offer__mark { box-sizing:content-box;width:44px;height:44px;border-radius:14px;background:#faf6ee;border:1px solid #e6dcc8;display:flex;align-items:center;justify-content:center;font:700 16px var(--serif);color:#b45f2e; }
.reader-aux .ai-offer h4 { font:700 17px/normal var(--serif);margin:0;color:#332d24; }
.reader-aux .ai-offer p { font:400 12.5px/1.8 var(--ui);color:#8a7e6b;margin:0; }
.ai-offer__actions { display:flex;flex-direction:column;gap:8px;width:100%; }
.ai-offer__actions .btn { box-sizing:content-box;display:block;min-height:0;border-radius:9px;text-align:center;padding:10px 0;line-height:normal; }
.ai-offer__actions .btn--primary { font:700 13px var(--ui);color:#fff9ef;background:#b45f2e; }
.ai-offer__actions .btn--ghost { font:400 12.5px var(--ui);color:#5c5343;background:#faf6ee;border:1px solid #e6dcc8; }


/* 04-6 / 04-7 · auxiliary rail: tabs, body, footer. */
.reader-rail.aux-open .reader-rail__inner { padding:0; }
.reader-aux { box-sizing:content-box;width:340px;max-width:100%;height:520px;margin:20px auto;padding:0;background:#fffdf8;border:1px solid #e6dcc8;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;font:13px/normal var(--ui);color:#332d24; }
.aux-tabs { display:flex;gap:4px;padding:12px 14px 0;border-bottom:1px solid #f0e8d8;flex:none; }
.aux-tabs button { font:400 12.5px/normal var(--ui);color:#8a7e6b;padding:6px 8px 10px;border:0;border-bottom:2px solid transparent;background:none; }
.aux-tabs button.active { font-weight:700;color:#b45f2e;border-bottom-color:#b45f2e; }
.aux-tabs .aux-close { margin-left:auto;font-size:15px;color:#a89a82;padding:4px 6px 10px; }
.aux-body { padding:16px;display:flex;flex-direction:column;gap:2px;overflow:auto;flex:1;min-height:0; }
.aux-body>* { flex:none; }
.aux-meta { font:400 11.5px/normal var(--ui);color:#a89a82;margin:0 0 8px; }
.reader-aux .aux-row { display:block;width:100%;box-sizing:border-box;text-align:left;font:400 13px/normal var(--ui);color:#5c5343;padding:8px 10px;border:0;border-radius:9px;background:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.reader-aux .aux-row.current { font-weight:700;color:#8f441b;background:#f6e8da; }
.aux-footer { margin-top:auto;padding:16px;border-top:1px solid #f0e8d8;display:flex;flex-direction:column;gap:10px;flex:none; }
.aux-progress-line { display:flex;align-items:baseline;justify-content:space-between;font:400 12px/normal var(--ui);color:#8a7e6b; }
.aux-progress-line span:last-child { font-weight:700;color:#b45f2e; }
.aux-progress { height:5px;background:#efe6d4;border-radius:99px; }
.aux-progress i { display:block;height:5px;background:#b45f2e;border-radius:99px; }
.aux-footer small { font:400 11.5px/1.6 var(--ui);color:#a89a82; }
.aux-footer [data-reset-chapter-progress],.aux-footer [data-undo-chapter-progress] { align-self:flex-start;border:0;background:none;color:#9a502b;padding:2px 0;font:500 12px/1.4 var(--ui);cursor:pointer;text-decoration:underline;text-underline-offset:3px; }
.aux-footer--actions { flex-direction:row;gap:8px; }
.aux-footer--actions .btn { box-sizing:content-box;flex:1;min-height:0;display:block;text-align:center;padding:10px 0;border-radius:9px;font-size:12.5px;line-height:normal; }
.aux-footer--actions .btn--primary { font-weight:700;color:#fff9ef;background:#b45f2e; }
.aux-footer--actions .btn--ghost { flex:none;padding:10px 16px;color:#5c5343;background:#faf6ee;border:1px solid #e6dcc8; }
.aux-chips { display:flex;gap:8px;margin-bottom:10px; }
.aux-chips button { font:400 12px/normal var(--ui);color:#5c5343;background:#faf6ee;border:1px solid #e6dcc8;border-radius:99px;padding:5px 12px; }
.aux-chips button.active { font-weight:700;color:#8f441b;background:#f6e8da;border-color:#e4cbb0; }
.reader-aux .aux-note { display:block;width:100%;text-align:left;background:#faf6ee;border:1px solid #f0e8d8;border-radius:11px;padding:12px 14px;margin-bottom:8px; }
.reader-aux .aux-note b { font:700 14px/normal var(--serif); }
.reader-aux .aux-note span { font:400 11px/normal var(--ui);color:#a89a82;margin-left:8px; }
.reader-aux .aux-note small { display:block;font:400 12px/normal var(--ui);color:#5c5343;margin-top:5px; }
/* 04-7 · a saved word and a drawn line both say which paragraph they came from. */
.aux-note i { font:400 11px/normal var(--ui);color:#a89a82;font-style:normal;float:right; }
.aux-note--mark { display:flex;align-items:flex-start;gap:10px; }
.aux-note--mark .aux-mark { flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;text-align:left;padding:0;background:transparent; }
.aux-mark__dot { width:11px;height:11px;border-radius:50%;background:var(--reader-mark);flex:none;align-self:center; }
.aux-mark__text { flex:1;min-width:0;font:400 13px/1.7 var(--serif);color:#332d24;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.aux-note--mark>button[data-delete-mark] { font:400 11px/normal var(--ui);color:#a89a82;padding:0;background:transparent;flex:none; }
.aux-empty { font:400 12.5px/1.8 var(--ui);color:#a89a82;text-align:center;padding:40px 10px;margin:0; }
.reader-aux .ai-offer { height:auto;flex:1; }

/* 09-2 · one review card: progress, the clue, the letters typed so far. */
.review-shell { max-width:842px;margin:0 auto; }
.review-card { box-sizing:content-box;width:760px;max-width:calc(100% - 82px);height:420px;margin:0 auto;padding:30px 40px;background:#faf6ee;border:1px solid #e6dcc8;border-radius:14px;display:flex;flex-direction:column;text-align:left; }
.review-progress { display:flex;align-items:center;gap:14px;flex:none; }
.review-progress__track { flex:1;height:5px;background:#efe6d4;border-radius:99px; }
.review-progress__track i { display:block;height:5px;background:#b45f2e;border-radius:99px; }
.review-progress span:not(.review-progress__track) { font:400 12px/normal var(--ui);color:#8a7e6b; }
.review-progress a { font:400 12px/normal var(--ui);color:#a89a82; }
.review-prompt { flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px; }
.review-card .review-question { font:400 12.5px/normal var(--ui);color:#8a7e6b;margin:0; }
.review-clue { display:flex;align-items:center;gap:14px; }
.review-ipa { font:400 26px/normal var(--ui);color:#332d24; }
.review-speak { box-sizing:content-box;width:34px;height:34px;border-radius:50%;background:#fffdf8;border:1px solid #e6dcc8;display:flex;align-items:center;justify-content:center;padding:0; }
.review-card .review-meaning { font:400 13px/normal var(--ui);color:#5c5343;margin:0; }
.review-card .review-form { display:flex;flex-direction:column;align-items:center;margin:0;line-height:0; }
.review-card .review-boxes { margin-top:6px; }
.review-boxes { display:flex;gap:8px;margin-top:6px; }
.review-box { box-sizing:content-box;width:34px;height:44px;border-radius:9px;background:#fffdf8;border:1px solid #e6dcc8;font:700 20px/normal var(--serif);display:flex;align-items:center;justify-content:center;color:#332d24; }
.review-box--caret { border:1.5px solid #b45f2e; }
.review-box--caret i { display:block;width:1.5px;height:22px;background:#b45f2e; }
.review-box--empty { background:#f3ecdd;border:1px dashed #dcd1bb; }
#reviewAnswer { position:absolute;opacity:0;width:1px;height:1px;padding:0;border:0; }
#reviewFeedback { font:400 12.5px/normal var(--ui);color:#54744f;margin:0;text-align:center; }
#reviewFeedback:empty { display:none; }
.review-card .review-actions { display:flex;align-items:center;justify-content:center;gap:10px;margin:0;flex:none; }
.review-actions .pill { box-sizing:content-box;font:400 12.5px/normal var(--ui);color:#5c5343;background:#fffdf8;border:1px solid #e6dcc8;border-radius:99px;padding:8px 16px; }
.review-actions small { font:400 11.5px/normal var(--ui);color:#a89a82;margin-left:8px; }

/* 08-3 · the quiet finish note. */
#readerV2 .reader-complete { box-sizing:content-box;position:absolute;right:22px;bottom:22px;z-index:24;display:flex;align-items:center;gap:9px;background:#fffdf8;border:1px solid #e6dcc8;border-radius:99px;box-shadow:0 8px 22px rgba(90,65,30,.14);padding:8px 15px;font:400 12.5px/normal var(--ui);color:#5c5343; }
#readerV2 .reader-complete__check { width:18px;height:18px;border-radius:50%;background:oklch(0.55 0.13 145);display:flex;align-items:center;justify-content:center; }

/* 05-4 · the word card for a word the dictionary does not carry. */
#readerV2 .reader-wordcard--unknown { box-sizing:content-box;width:392px;max-width:calc(100% - 42px);padding:16px 20px;background:#fffdf8;border:1px solid #e6dcc8;border-radius:14px;box-shadow:0 14px 34px rgba(72,52,27,.16);display:block; }
#readerV2 .reader-wordcard--unknown .reader-wordcard__word { font:700 24px/normal var(--serif);margin:0;color:#332d24; }
#readerV2 .reader-wordcard__unknown { font:400 12.5px/1.7 var(--ui);color:#8a7e6b;margin:6px 0 0; }
#readerV2 .reader-wordcard__unknown-actions { display:flex;gap:8px;margin-top:12px; }
#readerV2 .reader-wordcard__unknown-actions button { box-sizing:content-box;font:400 12px/normal var(--ui);color:#5c5343;background:#faf6ee;border:1px solid #e6dcc8;border-radius:9px;padding:7px 13px; }
#readerV2 .reader-wordcard__unknown-actions button:first-child { font-weight:700;color:#fff9ef;background:#b45f2e;border-color:#b45f2e; }

/* 07-1 · read-aloud bar: transport, rate, voice, position. */
#readerV2[data-speech-state="idle"]>.reader-playbar { display:none; }
#readerV2>.reader-playbar { box-sizing:content-box;width:auto;display:flex;align-items:center;gap:14px;padding:9px 18px;background:#fffdf8;border:1px solid #e6dcc8;border-radius:99px;box-shadow:0 12px 30px rgba(90,65,30,.16);min-height:0; }
#readerV2 .reader-playbar__step { width:16px;height:16px;min-width:0;padding:0;background:none;border:0;display:flex;align-items:center;justify-content:center; }
#readerV2 .reader-playbar__button { width:34px;height:34px;min-width:0;border-radius:50%;background:#b45f2e;color:#fff9ef;display:flex;align-items:center;justify-content:center;font-size:13px;padding:0; }
#readerV2 .reader-playbar__divider { width:1px;height:18px;background:#efe6d4;flex:none; }
#readerV2 .reader-playbar__speed,#readerV2 .reader-playbar__voice { font:400 12.5px/normal var(--ui);color:#5c5343;padding:0;background:none;border:0;white-space:nowrap;min-width:0;min-height:0;width:auto;height:auto; }
#readerV2 .reader-playbar__stop { position:absolute;left:-9999px; }
#readerV2 .reader-playbar__time { font:400 12.5px/normal var(--ui);color:#8a7e6b;white-space:nowrap; }

/* 04-3 · two more papers beside the three that already shipped. */
.reader-v2[data-theme="cream"] { --reader-bg:#f2e6d2;--reader-paper:#f2e6d2;--reader-raised:#fbf4e7;--reader-ink:#3a3123;--reader-secondary:#6b5f4a;--reader-muted:#948468;--reader-line:#e0d2b6;--reader-highlight:#f0dcbb; }
.reader-v2[data-theme="mint"] { --reader-bg:#e4ede3;--reader-paper:#e4ede3;--reader-raised:#f4f9f3;--reader-ink:#26302a;--reader-secondary:#4f5c53;--reader-muted:#7d8a80;--reader-line:#cfdccd;--reader-highlight:#d6e7d4; }

/* 03-2 · 内容库：和书架一样放在页面栏里，筛选栏随页面滚动时吸顶。 */
@media(min-width:901px) {
  .library-screen { display:flex;align-items:flex-start;font:400 13px/normal var(--ui); }
  .library-filters { box-sizing:content-box;width:210px;flex:none;position:sticky;top:24px;border-right:1px solid #e6dcc8;padding:0 20px 0 0;display:flex;flex-direction:column;gap:22px; }
  .library-filters::-webkit-scrollbar { display:none; }
  .library-filters section { display:flex;flex-direction:column;gap:4px; }
  .library-filters h3 { margin:0 0 6px;font:700 11.5px/normal var(--ui);letter-spacing:1px;color:#a89a82; }
  .library-filters button { box-sizing:content-box;width:auto;min-width:0;min-height:0;padding:7px 10px;border:0;border-radius:0;background:transparent;text-align:left;font:400 13px/normal var(--ui);color:#5c5343; }
  .library-filters button.active { border-radius:9px;background:#f6e8da;color:#8f441b;font-weight:700; }
  .library-topic-pills { display:flex;flex-wrap:wrap;gap:6px; }
  .library-topic-pills button { border:1px solid #e6dcc8;border-radius:99px;background:#fffdf8;padding:5px 11px;font-size:12px; }
  .library-topic-pills button.active { border-color:#e4cbb0;background:#f6e8da; }
  .library-filters>small { margin-top:auto;font:400 11.5px/1.7 var(--ui);color:#a89a82; }
  .library-content { flex:1;min-width:0;padding:0 0 0 28px; }
  .library-content__inner { max-width:780px; }
  .library-featured { box-sizing:content-box;margin:0 0 20px;padding:20px 22px;border:1px solid #e8d6bc;border-radius:14px;background:linear-gradient(150deg,#fcf6ec,#f6e8d6); }
  .library-featured .eyebrow { display:block;margin-bottom:8px;font-size:11.5px;font-weight:700;letter-spacing:1px;color:#a8835c; }
  .library-featured h2 { margin:0 0 8px;font:700 21px/1.35 var(--serif); }
  .library-featured p { margin:0 0 14px;font:400 13px/1.7 var(--ui);color:#5c5343; }
  .library-featured .btn { box-sizing:content-box;min-height:0;padding:9px 18px;border-radius:9px;font:700 13px/normal var(--ui); }
  .library-list { display:flex;flex-direction:column;gap:10px; }
  .library-row { box-sizing:content-box;width:auto;padding:15px 17px;border:1px solid #e6dcc8;border-radius:14px;background:#fffdf8;display:flex;align-items:center;justify-content:space-between;text-align:left;gap:16px; }
  .library-row strong { margin:0 0 5px;font:700 16px/normal var(--serif);color:#332d24; }
  .library-row small { font:400 12px/normal var(--ui);color:#8a7e6b; }
  .library-row>span:last-child { flex:none;text-align:right;color:#b45f2e; }
  .library-row>span:last-child b { display:block;font:700 15px/normal var(--serif); }
  .library-row>span:last-child small { display:block;margin-top:2px;font-size:10.5px;color:#a89a82; }
}

/* 10-1 · 设置：页面栏里的双栏面板，左栏保留账号入口，右侧控件即时回写阅读器。 */
/* The panels below hold at every width; ≤900px only reflows their frame. */
  .settings-layout { box-sizing:border-box;min-height:620px;display:flex;gap:0;overflow:hidden;background:#faf6ee;border:1px solid #e6dcc8;border-radius:14px;font:400 13.5px/normal var(--ui);color:#332d24; }
  .settings-sidebar { box-sizing:content-box;width:230px;flex:none;border-right:1px solid #e6dcc8;padding:24px 18px;display:flex;flex-direction:column;gap:4px; }
  .settings-sidebar nav { display:flex;flex-direction:column;gap:4px; }
  .settings-sidebar nav button { box-sizing:content-box;width:auto;min-width:0;min-height:0;padding:9px 12px;border:0;border-radius:9px;background:transparent;text-align:left;font:600 13px/normal var(--ui);color:#5c5343; }
  .settings-sidebar nav button.active { font-weight:700;color:#fff9ef;background:#b45f2e; }
  .settings-sidebar__account { margin-top:auto;display:flex;flex-direction:column;gap:10px; }
  .settings-sidebar__account>small { padding:0 4px;font:400 11.5px/1.6 var(--ui);color:#a89a82; }
  .settings-account { box-sizing:content-box;display:flex;align-items:center;gap:9px;width:auto;min-width:0;min-height:0;padding:11px 12px;border:1px solid #e6dcc8;border-radius:9px;background:#fffdf8;text-align:left; }
  .settings-account__avatar { width:30px;height:30px;border-radius:50%;background:#f1eadc;display:flex;align-items:center;justify-content:center;flex:none;font:700 13px/normal var(--serif);color:#b45f2e; }
  .settings-account>span:last-child { min-width:0; }
  .settings-account b { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 12.5px/normal var(--ui);color:#5c5343; }
  .settings-account small { display:block;margin-top:2px;font:400 10.5px/normal var(--ui);color:#a89a82; }
  .settings-layout>section { flex:1;min-width:0;padding:26px 30px;overflow:auto; }
  .settings-content { display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:26px; }
  .settings-display h2 { margin:0 0 20px;font:700 22px/normal var(--serif); }
  .settings-display .setting-row { min-height:0;padding:0 0 14px;margin:0 0 14px;border-bottom:1px solid #ede3d0; }
  .settings-display .setting-row:last-child { padding-bottom:0;margin-bottom:0;border-bottom:0; }
  .setting-row strong { font:600 13.5px/normal var(--ui);color:#5c5343; }
  .setting-row small { margin-top:2px;font:400 12px/1.5 var(--ui);color:#a89a82; }
  .settings-display .filter-row { flex:none;display:inline-flex;flex-wrap:nowrap;gap:0;padding:3px;border-radius:99px;background:#f1eadc; }
  .settings-display .filter-row button { box-sizing:content-box;min-width:0;min-height:0;padding:5px 14px;border:0;border-radius:99px;background:transparent;font:600 12px/normal var(--ui);color:#8a7e6b;white-space:nowrap; }
  .settings-display .filter-row button.active { font-weight:700;color:#fff9ef;background:#b45f2e; }
  .browser-voice { box-sizing:content-box;display:inline-flex;align-items:center;padding:6px 14px;border:1px solid #e8d3bf;border-radius:99px;font:600 12px/normal var(--ui);color:#b45f2e;white-space:nowrap; }
  .speech-stepper { display:flex;align-items:center;gap:10px; }
  .speech-stepper button { box-sizing:content-box;width:32px;height:32px;min-width:0;min-height:0;padding:0;border:1px solid #e4d8c0;border-radius:9px;background:#fffdf8;font:400 18px/32px var(--ui);color:#5c5343; }
  .speech-stepper b { min-width:34px;text-align:center;font:700 13px/normal var(--ui);color:#5c5343; }
  .setting-switch { box-sizing:content-box;position:relative;width:38px;height:22px;min-width:0;min-height:0;padding:0;border:0;border-radius:99px;background:#e6dcc8; }
  .setting-switch.is-on { background:#b45f2e; }
  .setting-switch i { position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fffdf8; }
  .setting-switch.is-on i { left:18px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2); }
  .settings-preview { padding:0;border:0;border-radius:0;background:transparent; }
  .settings-preview>.eyebrow { display:block;margin:0 0 12px;font:700 11.5px/normal var(--ui);letter-spacing:1px;color:#a89a82; }
  .settings-preview__paper { box-sizing:content-box;padding:22px 20px;border:1px solid #e6dcc8;border-radius:14px;background:#fffdf8; }
  .settings-preview__paper p { margin:0;font:400 18px/2.3 var(--serif);color:#332d24; }
  .settings-preview__paper ruby { ruby-position:under;ruby-align:center;white-space:nowrap; }
  .settings-preview__paper ruby>ruby { ruby-position:over; }
  .settings-preview__paper rt { padding:2px 0;font:400 .58em/1 var(--ui);color:#8a7e6b; }
  .settings-preview__paper .colored { color:#b45f2e; }
  .settings-preview__translation { display:block;margin:8px 0 0;padding-left:12px;border-left:2px solid rgba(180,95,46,.38);font:400 14px/1.7 var(--ui);color:#5c5343; }
  .settings-preview__note { box-sizing:content-box;display:block;margin-top:16px;padding:14px 16px;border:1px dashed #e0d3bc;border-radius:9px;background:#fbf7ef;font:400 12px/1.75 var(--ui);color:#8a7e6b; }
  .settings-preview__note b { color:#b45f2e; }
  .vocabulary-settings { box-sizing:content-box;width:700px;padding:28px 32px;border:1px solid #e6dcc8;border-radius:14px;background:#faf6ee; }
  .vocabulary-settings>header { display:flex;align-items:baseline;justify-content:space-between;margin-bottom:26px; }
  .vocabulary-settings>header h2 { margin:0;font:700 19px/normal var(--serif); }
  .vocabulary-settings>header span { font:400 12.5px/normal var(--ui);color:#8a7e6b; }
  .vocabulary-control { position:relative;padding:34px 4px 0;margin-bottom:26px; }
  .vocabulary-control output { box-sizing:content-box;position:absolute;left:var(--vocabulary-position);top:0;transform:translateX(-50%);display:flex;align-items:baseline;gap:4px;padding:3px 10px;border:1px solid #dcab85;border-radius:9px;background:#fffdf8;box-shadow:0 6px 14px rgba(180,95,46,.18);white-space:nowrap;font:700 15px/normal var(--serif);color:#b45f2e; }
  .vocabulary-control output small { font:400 10.5px/normal var(--ui);color:#a8835c; }
  .vocabulary-track { position:relative;height:8px;border-radius:99px;background:#efe6d4; }
  .vocabulary-track i { display:block;width:var(--vocabulary-position);height:8px;border-radius:99px;background:#b45f2e; }
  .vocabulary-track b { position:absolute;left:var(--vocabulary-position);top:50%;transform:translate(-50%,-50%);width:22px;height:22px;border:2px solid #b45f2e;border-radius:50%;background:#fffdf8;box-shadow:0 3px 10px rgba(180,95,46,.3); }
  .vocabulary-control input { position:absolute;left:4px;right:4px;top:26px;width:calc(100% - 8px);height:28px;opacity:0;cursor:pointer; }
  .vocabulary-bounds { display:flex;justify-content:space-between;margin-top:10px;font:400 11.5px/normal var(--ui);color:#a89a82; }
  .vocabulary-stats { display:flex;gap:12px; }
  .vocabulary-stats>div { flex:1;padding:14px 16px;border:1px solid #e6dcc8;border-radius:9px;background:#fffdf8; }
  .vocabulary-stats small { display:block;margin:0 0 4px;font:400 11.5px/normal var(--ui);color:#a89a82; }
  .vocabulary-stats b { display:block;font:700 20px/normal var(--serif);color:#332d24; }
  .vocabulary-settings>footer { display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid #f0e8d8; }
  .vocabulary-settings>footer button,.vocabulary-settings>footer a { box-sizing:content-box;min-width:0;min-height:0;padding:7px 14px;border:1px solid #e6dcc8;border-radius:99px;background:#fffdf8;font:400 12.5px/normal var(--ui);color:#5c5343; }
  .vocabulary-settings>footer span { margin-left:auto;font:400 11.5px/normal var(--ui);color:#a89a82; }
  .settings-ai-panel { box-sizing:content-box;width:500px;padding:24px 26px;border:1px solid #e6dcc8;border-radius:14px;background:#faf6ee;display:flex;flex-direction:column;gap:14px; }
  .settings-ai-row { display:flex;align-items:flex-start;justify-content:space-between;gap:14px; }
  .settings-ai-row+ .settings-ai-row,.settings-ai-model { padding-top:14px;border-top:1px solid #f0e8d8; }
  .settings-ai-row b,.settings-ai-model>b { display:block;font:600 13.5px/normal var(--ui); }
  .settings-ai-row small { display:block;margin-top:3px;font:400 11.5px/1.6 var(--ui);color:#8a7e6b; }
  .settings-ai-row.is-muted b { color:#8a7e6b; }
  .settings-ai-row.is-muted>span { font-size:11.5px;color:#a89a82; }
  .settings-ai-row .settings-switch { box-sizing:content-box;position:relative;width:34px;height:20px;min-width:0;min-height:0;margin-top:3px;padding:0;border:0;border-radius:99px;background:#e6dcc8;flex:none; }
  .settings-ai-row .settings-switch.is-on { background:#b45f2e; }
  .settings-ai-row .settings-switch i { position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fffdf8; }
  .settings-ai-row .settings-switch.is-on i { left:16px;background:#fff9ef; }
  .settings-ai-model>div { display:flex;gap:6px;margin-top:10px; }
  .settings-ai-model>div span,.settings-ai-model>div strong { flex:1;padding:8px 0;border:1px solid #e6dcc8;border-radius:9px;background:#fffdf8;text-align:center;font:400 12.5px/normal var(--ui);color:#8a7e6b; }
  .settings-ai-model>div strong { border-color:#e4cbb0;background:#f6e8da;font-weight:700;color:#8f441b; }
  .settings-ai-model p { margin:12px 0 0;font:400 11.5px/1.65 var(--ui);color:#a89a82; }
  .view--settings-screen .ai-config { box-sizing:content-box;width:500px;margin:14px 0 0;padding:20px 26px;border:1px solid #e6dcc8;border-radius:14px;background:#fffdf8; }
  .view--settings-screen .ai-config h3 { margin:0 0 8px;font:700 16px/normal var(--serif); }
  .view--settings-screen .ai-config>p { margin:0 0 12px; }
  .view--settings-screen .ai-config label { display:grid;grid-template-columns:50px 1fr;align-items:center;gap:10px;margin:9px 0;font-size:12.5px; }
  .view--settings-screen .ai-config input,.view--settings-screen .ai-config select { max-width:none;width:100%; }
  .view--settings-screen .ai-config .btn { margin-top:8px;font-size:12px; }
/* 10-1 at phone width: the sidebar becomes a heading and a row of tabs; panels take the column. */
@media(max-width:900px) {
  .settings-layout { box-sizing:border-box;width:auto;height:auto;min-height:0;flex-direction:column;overflow:visible;border:0;border-radius:0; }
  .settings-sidebar { box-sizing:border-box;width:auto;padding:0 0 12px;border-right:0;border-bottom:1px solid #e6dcc8;gap:12px; }
  .settings-sidebar nav { flex-direction:row;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px; }
  .settings-sidebar nav::-webkit-scrollbar { display:none; }
  .settings-sidebar nav button { flex:none;white-space:nowrap; }
  .settings-sidebar__account { margin-top:0; }
  .settings-layout>section { padding:20px 0 32px;overflow:visible; }
  .settings-content { display:flex;flex-direction:column;gap:22px; }
  .settings-display .setting-row { gap:12px; }
  .vocabulary-settings,.settings-ai-panel,.view--settings-screen .ai-config { box-sizing:border-box;width:auto;padding:20px 16px; }
  .vocabulary-stats,.vocabulary-settings>footer { flex-wrap:wrap; }
  .vocabulary-settings>footer span { margin-left:0;width:100%; }
}

@media(max-width:900px) {
  .library-screen { display:flex;flex-direction:column;gap:0;background:#faf6ee;color:#332d24; }
  .library-filters { box-sizing:border-box;width:100%;padding:0 0 16px;border-bottom:1px solid #e6dcc8;display:flex;flex-direction:column;gap:13px; }
  .library-filters section { display:flex;flex-wrap:wrap;gap:6px; }
  .library-filters h3 { width:100%;margin:0 0 2px;font:700 11.5px/normal var(--ui);letter-spacing:1px;color:#a89a82; }
  .library-filters button { box-sizing:border-box;min-width:0;min-height:32px;width:auto;padding:6px 10px;border:1px solid #e6dcc8;border-radius:9999px;background:#fffdf8;text-align:left;font:400 12px/normal var(--ui);color:#5c5343; }
  .library-filters button.active { border-color:#e4cbb0;background:#f6e8da;color:#8f441b;font-weight:700; }
  .library-topic-pills { width:100%;display:flex;flex-wrap:wrap;gap:6px; }
  .library-filters>small { display:none; }
  .library-content { box-sizing:border-box;width:100%;min-width:0;padding:16px 0 0; }
  .library-content__inner { width:100%; }
  .library-featured { box-sizing:border-box;margin:0 0 14px;padding:18px;border:1px solid #e8d6bc;border-radius:14px;background:linear-gradient(150deg,#fcf6ec,#f6e8d6); }
  .library-featured .eyebrow { display:block;margin-bottom:8px;font-size:11px;font-weight:700;letter-spacing:1px;color:#a8835c; }
  .library-featured h2 { margin:0 0 8px;font:700 20px/1.35 var(--serif); }
  .library-featured p { margin:0 0 14px;font:400 12.5px/1.7 var(--ui);color:#5c5343; }
  .library-featured .btn { min-height:38px;padding:0 16px;border-radius:9px;font-size:13px; }
  .library-list { display:flex;flex-direction:column;gap:10px; }
  .library-row { box-sizing:border-box;width:100%;padding:14px;border:1px solid #e6dcc8;border-radius:14px;background:#fffdf8;display:flex;align-items:center;justify-content:space-between;text-align:left;gap:12px; }
  .library-row strong { display:block;margin:0 0 5px;font:700 15px/1.35 var(--serif);color:#332d24; }
  .library-row small { font:400 11.5px/1.5 var(--ui);color:#8a7e6b; }
  .library-row>span:first-child { min-width:0; }
  .library-row>span:last-child { flex:none;text-align:right;color:#b45f2e; }
  .library-row>span:last-child b { display:block;font:700 14px/normal var(--serif); }
  .library-row>span:last-child small { display:block;margin-top:2px;font-size:10px; }
  .settings-sidebar { display:flex;gap:8px;flex-wrap:wrap; }
  .settings-sidebar h3 { width:100%; }
  .settings-sidebar nav { display:flex;gap:5px;overflow-x:auto; }
  .settings-sidebar__account { width:100%; }
  .settings-content { grid-template-columns:1fr; }
  .vocabulary-settings,.settings-ai-panel { box-sizing:border-box;width:100%; }
}

@media(min-width:900px) {
  /* 04-3 · typography panel. */
  .reader-settings { box-sizing:content-box;width:340px;max-width:calc(100% - 46px);height:auto;max-height:calc(100% - 90px);overflow:visible;padding:20px 22px;background:#fffdf8;border:1px solid #e6dcc8;border-radius:14px;box-shadow:0 22px 58px rgba(72,52,27,.18);display:flex;flex-direction:column;gap:18px; }
  .reader-settings .reader-sheet-handle { display:none; }
  #readerSettingsContent { display:contents; }
  .reader-settings .reader-settings__sr-only { position:absolute; }
  .reader-settings__group { display:flex;flex-direction:column; }
  .reader-settings__group--switches { gap:10px; }
  .reader-settings__group--sizes { border-top:1px solid #f0e8d8;padding-top:16px;gap:14px; }
  .reader-settings .reader-settings__section-title { font:700 11.5px/normal var(--ui);letter-spacing:1px;color:#a89a82;margin:0 0 10px;text-transform:none; }
  .reader-settings .reader-settings__segments--wide { display:flex;gap:6px;padding:0;background:none;border-radius:0;justify-content:stretch;overflow:visible; }
  .reader-settings .reader-settings__segments--wide button { box-sizing:content-box;flex:1;text-align:center;font:400 12.5px/17px var(--ui);color:#5c5343;background:#faf6ee;border:1px solid #e6dcc8;border-radius:9px;padding:8px 0;min-height:0;height:17px; }
  .reader-settings__segments--wide button.is-active { font-weight:700;color:#fff9ef;background:#b45f2e;border-color:#b45f2e; }
  .reader-settings .reader-settings__switch { display:flex;align-items:center;justify-content:space-between;font:400 13px/normal var(--ui);color:#332d24;margin:0;padding:0;min-height:0;height:20px;border:0;background:none; }
  .reader-settings .reader-settings__switch:has(small) { height:auto; }
  .reader-settings .reader-settings__switch input { appearance:none;width:34px;height:20px;border-radius:99px;background:#e6dcc8;position:relative;margin:0;flex:none; }
  .reader-settings .reader-settings__switch input:checked { background:#b45f2e; }
  .reader-settings .reader-settings__switch input::after { content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fffdf8; }
  .reader-settings .reader-settings__switch input:checked::after { left:auto;right:2px;background:#fff9ef; }
  .reader-settings__label-row { display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px;font:400 13px/normal var(--ui);color:#332d24; }
  .reader-settings__label-row b { font:700 12px/normal var(--ui);color:#b45f2e; }
  .reader-settings .reader-settings__font-slider { position:relative;height:5px;background:none;padding:0;margin:0;overflow:visible; }
  .reader-settings .reader-settings__font-track { position:absolute;left:0;right:0;top:0;height:5px;background:#efe6d4;border-radius:99px; }
  .reader-settings .reader-settings__font-track span { display:block;height:5px;width:var(--font-progress);background:#b45f2e;border-radius:99px; }
  .reader-settings .reader-settings__font-slider input { position:absolute;left:0;right:0;top:-8px;height:21px;width:100%;opacity:0;margin:0; }
  .reader-settings .reader-settings__font-slider::after { content:'';position:absolute;left:var(--font-progress);top:50%;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;background:#fffdf8;border:2px solid #b45f2e;pointer-events:none; }
  .reader-settings__widths { display:flex;gap:6px; }
  .reader-settings__widths button { box-sizing:content-box;flex:1;text-align:center;font:400 12px/17px var(--ui);color:#5c5343;background:#faf6ee;border:1px solid #e6dcc8;border-radius:9px;padding:7px 0;min-height:0;height:17px; }
  .reader-settings__widths button.is-active { font-weight:700;color:#8f441b;background:#f6e8da;border-color:#e4cbb0; }
  .reader-settings__papers { display:flex;gap:8px;align-items:center; }
  .reader-settings__papers button { box-sizing:content-box;width:30px;height:30px;min-height:0;border-radius:9px;border:0;padding:0; }
  .reader-settings__papers button.is-outlined { border:1px solid #e6dcc8; }
  .reader-settings__papers button.is-active { box-shadow:0 0 0 2px #b45f2e; }
}
/* 04-3 · rows, pills and switches from the extension's floating-ball panel (#panel .row /
   .seg / .sw), so the reader and the extension set the page up with the same controls. */
.reader-settings .reader-settings__rows { display:flex;flex-direction:column;gap:12px;margin:0 0 4px; }
.reader-settings .reader-settings__row { display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:0;margin:0; }
.reader-settings .reader-settings__row .reader-settings__section-title { margin:0;padding:0;font:600 13px/normal var(--ui);letter-spacing:0;text-transform:none;color:#4a4234; }
.reader-settings .reader-settings__pill { display:flex;flex:none;gap:0;padding:3px;margin:0;border:0;border-radius:99px;background:#f1eadc;justify-content:flex-start;overflow:visible; }
.reader-settings .reader-settings__pill button { box-sizing:content-box;width:auto;min-width:0;min-height:0;height:auto;padding:4px 10px;border:0;border-radius:99px;background:transparent;font:600 11.5px/normal var(--ui);color:#8a7e6b;white-space:nowrap; }
.reader-settings .reader-settings__pill button.is-active { font-weight:700;color:#fff9ef;background:#b45f2e; }
.reader-settings .reader-settings__switch>span { font:600 13px/normal var(--ui);color:#4a4234; }
.reader-settings .reader-settings__switch>span small { font-weight:400; }
.reader-settings .reader-settings__switch input { appearance:none;-webkit-appearance:none;position:relative;flex:none;width:34px;height:20px;margin:0;padding:0;border:0;border-radius:99px;background:#d8cdb8;box-shadow:none;cursor:pointer;transition:background .15s; }
.reader-settings .reader-settings__switch input::after { content:'';position:absolute;top:2px;left:2px;right:auto;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transform:none;transition:left .15s; }
.reader-settings .reader-settings__switch input:checked { background:#b45f2e; }
.reader-settings .reader-settings__switch input:checked::after { left:16px;right:auto;background:#fff;transform:none; }
@media(max-width:899px) {
  .reader-settings .reader-settings__rows { gap:8px;margin-bottom:14px; }
  .reader-settings .reader-settings__row { min-height:44px; }
  .reader-settings .reader-settings__pill button { padding:8px 13px;font-size:12.5px; }
}

/* 04-3 as a bottom sheet (<900px): the same controls at 44px touch size. The column
   already fills a phone, so 栏宽 has nothing to change there. */
@media(max-width:899px) {
  .reader-settings__group--sizes { display:flex;flex-direction:column;gap:18px;padding-top:16px;border-top:1px solid #f0e8d8; }
  .reader-settings__group--sizes>div:has(.reader-settings__widths) { display:none; }
  .reader-settings__label-row { display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px;font:400 13.5px/normal var(--ui);color:var(--reader-ink); }
  .reader-settings__label-row b { font:700 12px/normal var(--ui);color:#b45f2e; }
  .reader-settings__papers { display:flex;gap:12px;align-items:center; }
  .reader-settings__papers button { width:44px;height:44px;min-height:0;padding:0;border:0;border-radius:11px; }
  .reader-settings__papers button.is-outlined { border:1px solid #e6dcc8; }
  .reader-settings__papers button.is-active { box-shadow:0 0 0 2px #b45f2e; }
}

/* 04-2 · reader toolbar: back to the shelf, the title, and the five actions. */
.reader-v2__toolbar { box-sizing:content-box;height:52px;min-height:52px;background:#fffdf8;border-bottom:1px solid #e6dcc8;box-shadow:0 6px 18px rgba(90,65,30,.08);display:flex;align-items:center;padding:0 18px;gap:16px; }
#readerV2 #backBtn { display:flex;align-items:center;gap:7px;width:auto;min-width:0;height:auto;min-height:0;padding:0;background:none;border:0;font:400 13px/normal var(--ui);color:#5c5343; }
.reader-v2__toolbar-left { display:flex;align-items:center;gap:16px;min-width:0; }
.reader-v2__toolbar-divider { width:1px;height:20px;background:#efe6d4;flex:none; }
.reader-v2__toolbar-title { font:600 13px/normal var(--ui);color:#332d24;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.reader-v2__toolbar-actions { margin-left:auto;display:flex;align-items:center;gap:6px; }
#readerV2 .reader-toolbar-pill { box-sizing:content-box;display:flex;align-items:center;gap:6px;font:400 12.5px/17px var(--ui);color:#5c5343;background:#faf6ee;border:1px solid #e6dcc8;border-radius:9px;padding:7px 12px;min-height:0;height:17px;width:auto;min-width:0; }
#readerV2 .reader-toolbar-pill--active,#readerV2 .reader-toolbar-pill.is-active { font-weight:700;color:#b45f2e;background:#f6e8da;border-color:#e4cbb0; }
/* Narrow viewports keep the 04-2 actions but restore 44px touch targets, and drop
   the title the article heading already carries. */
@media(max-width:700px) {
  .reader-v2__toolbar { padding:0 10px;gap:8px;min-width:0; }
  .reader-v2__toolbar-left { gap:8px;flex:none; }
  .reader-v2__toolbar-title,.reader-v2__toolbar-divider { display:none; }
  .reader-v2__toolbar-actions { gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none; }
  .reader-v2__toolbar-actions::-webkit-scrollbar { display:none; }
  #readerV2 .reader-toolbar-pill { box-sizing:border-box;height:44px;min-height:44px;padding:0 10px;flex:none; }
  #readerV2 #backBtn { min-width:44px;min-height:44px;justify-content:center; }
}
@media(max-width:430px) {
  #readerV2 .reader-toolbar-pill { min-width:44px;padding-inline:6px;font-size:11.5px; }
  .reader-v2__toolbar-actions { gap:2px; }
}
@media(max-width:600px) {
  .workspace-header .workspace-nav { gap:12px; }
}

/* 10-4 · 生词本设置面板：一列开关加一列真实计数。 */
@media(min-width:900px) {
  .settings-panel--words { box-sizing:content-box;width:700px;background:#faf6ee;border:1px solid #e6dcc8;border-radius:14px;padding:26px 30px;display:flex;gap:26px;font:400 13.5px/normal var(--ui);color:#332d24; }
  .settings-panel--words .settings-panel__rows { flex:1;min-width:0;display:flex;flex-direction:column;gap:14px; }
  .settings-panel--words .settings-row { display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:14px;border-bottom:1px solid #ede3d0; }
  .settings-panel--words .settings-row--last { padding-bottom:0;border-bottom:0; }
  .settings-panel--words .settings-row__text { min-width:0; }
  .settings-panel--words .settings-row__label { font:600 13.5px/normal var(--ui);color:#5c5343; }
  .settings-panel--words .settings-row__hint { font:400 12px/1.5 var(--ui);color:#a89a82;margin-top:2px; }
  .settings-panel--words .settings-row__control { flex:none;display:flex;align-items:center; }
  .settings-panel--words .settings-row__buttons { display:flex;gap:8px;flex:none; }
  .settings-panel--words .settings-btn { box-sizing:content-box;display:inline-flex;align-items:center;justify-content:center;font:600 12px/normal var(--ui);color:#5c5343;background:#f1eadc;border:0;border-radius:9px;padding:8px 14px;min-height:0;height:auto;width:auto;min-width:0;white-space:nowrap; }
  .settings-panel--words .settings-btn--primary { color:#fff9ef;background:#b45f2e; }
  .settings-panel--words .settings-btn--danger { box-sizing:content-box;font-weight:700;color:#a63244;background:transparent;border:1px solid #e3c3c8; }
  .settings-panel--words .settings-switch { box-sizing:content-box;position:relative;display:inline-block;width:38px;height:22px;min-height:0;min-width:0;padding:0;border:0;border-radius:99px;background:#e6dcc8;flex:none; }
  .settings-panel--words .settings-switch.is-on { background:#b45f2e; }
  .settings-panel--words .settings-switch i { position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fffdf8; }
  .settings-panel--words .settings-switch.is-on i { left:18px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2); }
  .settings-panel--words .settings-seg { display:inline-flex;background:#f1eadc;border-radius:99px;padding:3px;flex:none; }
  .settings-panel--words .settings-seg button { box-sizing:content-box;font:600 12px/normal var(--ui);color:#8a7e6b;background:transparent;border:0;border-radius:99px;padding:5px 13px;min-height:0;height:auto;width:auto;min-width:0; }
  .settings-panel--words .settings-seg button.is-active { font-weight:700;color:#fff9ef;background:#b45f2e; }
  .settings-panel--words .settings-panel__side { box-sizing:content-box;width:200px;flex:none;border-left:1px solid #e6dcc8;padding-left:22px; }
  .settings-panel--words .settings-panel__eyebrow { font:700 11px/normal var(--ui);letter-spacing:1px;color:#a89a82;margin-bottom:14px; }
  .settings-panel--words .settings-stats { display:flex;flex-direction:column;gap:8px; }
  .settings-panel--words .settings-stat { background:#fcf8f0;border:1px solid #ece2cf;border-radius:9px;padding:12px; }
  .settings-panel--words .settings-stat b { display:block;font:700 22px/normal var(--serif);color:#b45f2e; }
  .settings-panel--words .settings-stat span { display:block;font:400 10.5px/normal var(--ui);color:#a89a82;margin-top:2px; }
  .settings-panel--words .settings-stat--due { background:oklch(0.55 0.13 145 / 0.10);border-color:oklch(0.55 0.13 145 / 0.22); }
  .settings-panel--words .settings-stat--due b { color:oklch(0.42 0.13 145); }
  .settings-panel--words .settings-stat--due span { color:oklch(0.42 0.10 145); }
  .settings-panel--words .settings-panel__note { font:400 11.5px/1.7 var(--ui);color:#a89a82;margin:16px 0 0;padding-top:12px;border-top:1px solid #f0e8d8; }
}
.settings-extra { margin-top:26px; }
@media(max-width:899px) {
  .settings-panel--words { display:flex;flex-direction:column;gap:18px;background:#faf6ee;border:1px solid #e6dcc8;border-radius:14px;padding:18px; }
  .settings-panel--words .settings-panel__rows { display:flex;flex-direction:column;gap:14px; }
  .settings-panel--words .settings-row { display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:14px;border-bottom:1px solid #ede3d0; }
  .settings-panel--words .settings-row--last { padding-bottom:0;border-bottom:0; }
  .settings-panel--words .settings-row__label { font-weight:600;color:#5c5343; }
  .settings-panel--words .settings-row__hint { font-size:12px;line-height:1.5;color:#a89a82;margin-top:2px; }
  .settings-panel--words .settings-row__buttons { display:flex;gap:8px; }
  .settings-panel--words .settings-btn { display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 14px;font:600 12px var(--ui);color:#5c5343;background:#f1eadc;border:0;border-radius:9px; }
  .settings-panel--words .settings-btn--primary { color:#fff9ef;background:#b45f2e; }
  .settings-panel--words .settings-btn--danger { color:#a63244;background:transparent;border:1px solid #e3c3c8; }
  .settings-panel--words .settings-switch { position:relative;width:38px;height:22px;min-height:22px;min-width:38px;padding:0;border:0;border-radius:99px;background:#e6dcc8;flex:none; }
  .settings-panel--words .settings-switch.is-on { background:#b45f2e; }
  .settings-panel--words .settings-switch i { position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fffdf8; }
  .settings-panel--words .settings-switch.is-on i { left:18px;background:#fff; }
  .settings-panel--words .settings-seg { display:inline-flex;background:#f1eadc;border-radius:99px;padding:3px;flex:none; }
  .settings-panel--words .settings-seg button { font:600 12px var(--ui);color:#8a7e6b;background:transparent;border:0;border-radius:99px;padding:6px 13px;min-height:0; }
  .settings-panel--words .settings-seg button.is-active { font-weight:700;color:#fff9ef;background:#b45f2e; }
  .settings-panel--words .settings-panel__side { border-top:1px solid #e6dcc8;padding-top:16px; }
  .settings-panel--words .settings-panel__eyebrow { font:700 11px var(--ui);letter-spacing:1px;color:#a89a82;margin-bottom:12px; }
  .settings-panel--words .settings-stats { display:flex;gap:8px; }
  .settings-panel--words .settings-stat { flex:1;background:#fcf8f0;border:1px solid #ece2cf;border-radius:9px;padding:12px; }
  .settings-panel--words .settings-stat b { display:block;font:700 22px var(--serif);color:#b45f2e; }
  .settings-panel--words .settings-stat span { display:block;font-size:10.5px;color:#a89a82;margin-top:2px; }
  .settings-panel--words .settings-panel__note { font:400 11.5px/1.7 var(--ui);color:#a89a82;margin:16px 0 0; }
}

/* 08-1 · 读完总结卡：08-3 的胶囊点开后就是这张卡。 */
.reader-summary-layer { position:fixed;inset:0;z-index:2600;display:flex;align-items:center;justify-content:center;background:rgba(51,45,36,.28);padding:20px; }
.reader-summary { box-sizing:content-box;width:560px;max-width:100%;background:#faf6ee;border:1px solid #e6dcc8;border-radius:22px;box-shadow:0 30px 80px rgba(90,65,30,.25);padding:28px 32px 24px;font:400 13px/normal var(--ui);color:#332d24; }
.reader-summary .summary-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:18px; }
.reader-summary .summary-head h2 { font:700 22px/normal var(--serif);margin:0; }
.reader-summary .summary-head p { font:400 12.5px/normal var(--ui);color:#8a7e6b;margin:3px 0 0; }
.reader-summary .summary-close { box-sizing:content-box;width:28px;height:28px;min-width:0;min-height:0;padding:0;border:0;border-radius:50%;background:#f1eadc;color:#a89a82;font:400 13px/normal var(--ui);display:flex;align-items:center;justify-content:center;flex:none; }
.reader-summary .summary-stats { display:flex;background:#fffdf8;border:1px solid #ece2cf;border-radius:14px;overflow:hidden;margin-bottom:16px; }
.reader-summary .summary-stats > div { flex:1;padding:15px 0;text-align:center;border-right:1px solid #f0e8d8; }
.reader-summary .summary-stats > div:last-child { border-right:0; }
.reader-summary .summary-stats b { display:block;font:700 24px/normal var(--serif);color:#b45f2e; }
.reader-summary .summary-stats b small { font-size:13px; }
.reader-summary .summary-stats span { display:block;font:400 10.5px/normal var(--ui);color:#a89a82;margin-top:2px; }
.reader-summary .summary-stat--known { background:oklch(0.55 0.13 145 / 0.10); }
.reader-summary .summary-stat--known b { color:oklch(0.42 0.13 145); }
.reader-summary .summary-stat--known span { color:oklch(0.42 0.10 145); }
.reader-summary .summary-chips { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px; }
.reader-summary .summary-chip { box-sizing:content-box;font:400 14px/normal var(--serif);color:#3a332a;background:#fffdf8;border:1px solid #ece2cf;border-radius:9px;padding:5px 11px; }
.reader-summary .summary-chip i { font:400 11px/normal var(--ui);font-style:normal;color:#8a7e6b; }
.reader-summary .summary-actions { display:flex;gap:10px; }
.reader-summary .summary-btn { box-sizing:content-box;display:flex;align-items:center;justify-content:center;text-align:center;font:700 14px/normal var(--ui);color:#fff9ef;background:#b45f2e;border:0;border-radius:9px;padding:13px 18px;min-height:0;height:auto;min-width:0;width:auto; }
.reader-summary .summary-btn--primary { flex:1; }
.reader-summary .summary-btn--soft { font-weight:600;color:#5c5343;background:#f1eadc; }
.reader-summary .summary-btn--next { font-weight:600;color:#b45f2e;background:#fffdf8;border:1px solid #e8d3bf;padding:12px 16px; }
.reader-summary .summary-week { text-align:center;font:400 11.5px/normal var(--ui);color:#a89a82;margin:14px 0 0; }

/* 02-3 / 02-6 · PDF layout confirmation and phone camera handoff. */
.pdf-layout-confirm { box-sizing:border-box;width:754px;max-width:100%;margin:0 auto;padding:24px 26px;display:flex;gap:20px;background:#faf6ee;border:1px solid #e6dcc8;border-radius:14px;color:#332d24; }
.pdf-layout-preview { box-sizing:border-box;width:190px;flex:none;padding:14px 12px;display:flex;flex-direction:column;gap:8px;background:#fffdf8;border:1px solid #e6dcc8;border-radius:9px;text-align:center; }
.pdf-layout-preview small { font-size:10.5px;color:#a89a82; }
.pdf-layout-preview b { margin-top:3px;font-size:10.5px;color:#b45f2e; }
.pdf-layout-columns { display:flex;gap:8px;height:50px; }
.pdf-layout-columns span { flex:1;background:repeating-linear-gradient(to bottom,#e6dcc8 0 4px,transparent 4px 8px); }
.pdf-layout-columns span:first-child { clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 0); }
.pdf-layout-body { flex:1;min-width:0; }
.pdf-layout-body h2 { margin:0 0 14px;font:700 18px/normal var(--serif); }
.pdf-layout-body h2:focus,.camera-handoff-panel h2:focus { outline:none; }
.pdf-layout-options { display:flex;flex-direction:column;gap:9px; }
.pdf-layout-option { width:100%;min-height:42px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;background:#fffdf8;border:1px solid #e6dcc8;border-radius:9px;color:#332d24;font:400 13px/normal var(--ui);text-align:left; }
.pdf-layout-option.is-muted { background:#fbf7ef;color:#8a7e6b; }
.pdf-layout-option i { position:relative;width:34px;height:20px;flex:none;border-radius:99px;background:#e6dcc8; }
.pdf-layout-option i b { position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fffdf8;transition:left .15s; }
.pdf-layout-option[aria-pressed="true"] i { background:#b45f2e; }
.pdf-layout-option[aria-pressed="true"] i b { left:16px;background:#fff9ef; }
.pdf-layout-actions { display:flex;align-items:center;gap:10px;margin-top:16px; }
.pdf-layout-actions span { font-size:12.5px;color:#a89a82; }
.import-recovery.camera-handoff-panel { box-sizing:border-box;width:434px;max-width:100%;margin:20px auto 0;padding:24px 26px;display:flex;flex-direction:column;align-items:center;gap:14px;background:#faf6ee;border:1px solid #e6dcc8;border-radius:14px;text-align:center; }
.camera-handoff-panel h2 { margin:0;font:700 18px/normal var(--serif); }
.camera-handoff-panel img { border:1px solid #e6dcc8;border-radius:9px;background:#fffdf8;image-rendering:pixelated; }
.camera-handoff-panel p { max-width:380px;margin:0!important;color:#5c5343!important;font-size:12.5px!important;line-height:1.75!important; }
.camera-handoff-panel>div { display:flex;gap:8px; }

/* 08-2 · share preview, image actions and public card landing. */
.share-sheet { box-sizing:border-box;width:462px;max-width:100%;padding:20px;display:flex;flex-direction:column;gap:14px;background:#faf6ee;border:1px solid #e6dcc8;border-radius:14px; }
.share-export-card { box-sizing:border-box;width:420px;max-width:100%;padding:26px 24px;display:flex;flex-direction:column;gap:16px;background:#efe6d6;border:1px solid #e6dcc8;border-radius:9px;color:#332d24; }
.share-card-eyebrow { font:700 11px/normal var(--ui);letter-spacing:1.5px;color:#a8977c; }
.share-export-card h2 { margin:0;font:700 22px/1.35 var(--serif); }
.share-card-stats { display:flex;gap:18px;font-family:var(--serif); }
.share-card-stats b { font-size:20px; }
.share-card-stats span:last-child b { color:#b45f2e; }
.share-card-stats small { margin-left:3px;font:400 11px/normal var(--ui);color:#8a7e6b; }
.share-card-word { padding-top:14px;display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:4px 12px;border-top:1px solid #dfd3bc; }
.share-card-word b { font:700 28px/normal var(--serif); }
.share-card-word span { font:400 13px/normal var(--ui);color:#8a7e6b; }
.share-card-word small { grid-column:1/-1;font-size:12px;color:#8a7e6b; }
.share-export-card footer { padding-top:12px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #dfd3bc;font-size:11px;color:#a8977c; }
.share-export-card footer i { width:24px;height:24px;display:grid;place-items:center;background:#fcf8f0;border:1px solid #d9c6a8;border-radius:5px;color:#b45f2e;font:700 10px/normal var(--serif);font-style:normal; }
.share-card-actions { width:420px;max-width:100%;display:flex;gap:8px; }
.share-card-actions .btn { flex:1;padding-inline:8px;white-space:nowrap; }
.share-card-note { margin:0!important;font-size:11.5px!important;line-height:1.7!important; }
.share-landing { min-height:calc(100vh - 120px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:28px; }

/* 11-1 / 11-2 · membership and profile pages use the compact design cards. */
.profile-card { box-sizing:border-box;max-width:760px;margin:0;padding:26px 28px;display:flex;flex-direction:column;gap:18px;background:#faf6ee;border:1px solid #e6dcc8;border-radius:14px;color:#332d24; }
.profile-card>header { display:flex;align-items:center;gap:14px; }
.profile-avatar { width:48px;height:48px;flex:none;border-radius:50%;background:#d9c9ae;color:#6b5b44;font:700 18px/48px var(--ui);text-align:center; }
.profile-card>header>div { min-width:0;flex:1; }
.profile-card h2 { margin:0;font:700 15px/normal var(--ui); }
.profile-card header p { margin:3px 0 0;font-size:11.5px;color:#8a7e6b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.profile-member { flex:none;padding:5px 11px;border-radius:99px;background:#f6e8da;color:#8f441b;font-size:11.5px;font-weight:700; }
.profile-vocabulary { padding:16px 18px;background:#fffdf8;border:1px solid #e6dcc8;border-radius:14px; }
.profile-vocabulary>div:first-child,.profile-vocabulary footer { display:flex;justify-content:space-between;align-items:center;font-size:12px; }
.profile-vocabulary>div:first-child a { color:#b45f2e;font-weight:600; }
.profile-chart { height:56px;margin:12px 0 8px;display:flex;align-items:flex-end;gap:5px; }
.profile-chart i { flex:1;min-height:8%;background:#e4d8c0;border-radius:4px; }
.profile-chart i:nth-last-child(-n+4) { background:#dcc5a2; }
.profile-chart i.is-today { background:#b45f2e; }
.profile-vocabulary footer { color:#8a7e6b;font-size:11.5px; }
.profile-entry-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.profile-entry-grid a { padding:13px 15px;background:#fffdf8;border:1px solid #e6dcc8;border-radius:9px; }
.profile-entry-grid b,.profile-entry-grid span { display:block; }
.profile-entry-grid b { margin-bottom:4px;font-size:12.5px;font-weight:600; }
.profile-entry-grid span { color:#8a7e6b;font-size:11.5px; }
.profile-sync { margin:0;font-size:11px;color:#8a7e6b; }
.profile-actions { padding-top:14px;display:flex;gap:16px;flex-wrap:wrap;border-top:1px solid #f0e8d8;font-size:12.5px;color:#5c5343; }
.profile-actions button { padding:0;color:inherit;font:inherit; }
.membership-page { box-sizing:border-box;max-width:770px;margin:0;padding:30px 34px;background:#faf6ee;border:1px solid #e6dcc8;border-radius:14px;color:#332d24; }
.membership-featured { position:relative;margin-bottom:12px;padding:20px;display:flex;align-items:center;justify-content:space-between;background:#fbf3e6;border:2px solid #b45f2e;border-radius:14px; }
.membership-featured em { position:absolute;left:14px;top:-11px;padding:3px 9px;border-radius:99px;background:#b45f2e;color:#fff9ef;font-size:10px;font-style:normal;font-weight:700; }
.membership-featured h2 { margin:0 0 6px;font:700 17px/normal var(--serif); }
.membership-featured span,.membership-featured p { display:block;margin:0;color:#8a7e6b;font-size:11px;line-height:1.7; }
.membership-price { display:grid;grid-template-columns:auto auto;align-items:baseline;gap:2px 8px;text-align:right; }
.membership-price b { font:700 30px/normal var(--serif);color:#b45f2e; }
.membership-price del { order:-1;color:#a89a82;font-size:11px; }
.membership-price small { grid-column:2;padding:3px 7px;justify-self:end;border-radius:4px;background:#6e8f55;color:#fff;font-size:9px;font-weight:700; }
.membership-plans { display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }
.membership-plans article { padding:14px;text-align:center;background:#fffdf8;border:1px solid #e6dcc8;border-radius:12px; }
.membership-plans h2 { margin:0 0 8px;font:600 13px/normal var(--ui); }
.membership-plans b { display:block;margin-bottom:6px;font:700 20px/normal var(--serif); }
.membership-plans p { margin:0;color:#8a7e6b;font-size:10px;line-height:1.5; }
.membership-page ul { margin:20px 0;padding:0 4px 0 18px;display:grid;grid-template-columns:1fr 1fr;gap:8px 28px;color:#5c5343;font-size:11.5px;line-height:1.5; }
.membership-page li::marker { color:#b45f2e; }
.membership-footer { display:flex;align-items:center;justify-content:space-between;gap:14px; }
.membership-actions { display:flex;gap:8px; }
.membership-actions .btn { white-space:nowrap; }
.membership-footer>small { max-width:150px;text-align:right;color:#a89a82;font-size:10px;line-height:1.6; }

/* Full-window routes (video session, share landing). */
.view--app-screen { height:100dvh;display:flex;flex-direction:column;overflow:hidden; }
.view--app-screen .workspace-footer { display:none; }
.view--app-screen .workspace-page { width:100%;max-width:none;margin:0;flex:1;min-height:0;overflow:hidden; }
/* 09-1 · 生词本：页面栏里的三栏面板。左栏分组，中间词表，右栏语境与掌握情况。 */
.words-screen { box-sizing:border-box;height:min(720px,calc(100dvh - 240px));min-height:520px;display:flex;overflow:hidden;border:1px solid #e6dcc8;border-radius:14px;font:400 13px/normal var(--ui);color:#332d24;background:#faf6ee; }
.words-eyebrow { font:700 11.5px/normal var(--ui);letter-spacing:1px;color:#a89a82;margin-bottom:10px; }
.words-facets { box-sizing:content-box;width:240px;flex:none;border-right:1px solid #e6dcc8;padding:20px 18px;display:flex;flex-direction:column;gap:20px; }
.words-facet-list,.words-source-list { display:flex;flex-direction:column;gap:3px; }
.words-facets button { box-sizing:content-box;display:flex;justify-content:space-between;align-items:baseline;width:auto;min-width:0;min-height:0;height:auto;padding:8px 10px;border:0;border-radius:0;background:none;text-align:left;font:400 13px/normal var(--ui);color:#5c5343; }
.words-facet-list button.is-active { border-radius:9px;background:#f6e8da;color:#8f441b;font-weight:700; }
.words-facet-list button .is-due { color:#b45f2e;font-weight:700; }
.words-source-list button { font-size:12.5px; }
.words-source-list button span { color:#a89a82; }
.words-source-list button.is-active { border-radius:9px;background:#f6e8da;color:#8f441b;font-weight:700; }
.words-note { margin:auto 0 0;font:400 11.5px/1.7 var(--ui);color:#a89a82; }
.words-list-pane { box-sizing:content-box;width:400px;flex:none;border-right:1px solid #e6dcc8;overflow:hidden;display:flex;flex-direction:column; }
.words-list-top { display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid #f0e8d8;flex:none; }
.words-list-top input { box-sizing:content-box;flex:1;min-width:0;height:28px;padding:0 12px;border:1px solid #e6dcc8;border-radius:99px;background:#fffdf8;font:400 12px/normal var(--ui);color:#332d24; }
.words-list-top input::placeholder { color:#a89a82; }
.words-list-top button { box-sizing:content-box;flex:none;padding:0;border:0;min-height:0;height:auto;width:auto;min-width:0;background:none;font:400 12px/normal var(--ui);color:#5c5343; }
.words-screen .word-list { padding:8px 0;flex:1;min-height:0;overflow-y:auto;max-height:none;scrollbar-width:none; }
.words-screen .word-list::-webkit-scrollbar { display:none; }
.words-screen .word-row { box-sizing:border-box;display:block;width:100%;text-align:left;padding:12px 18px;border:0;border-radius:0;background:none; }
.words-screen .word-row.is-selected { background:#f6e8da;border-left:3px solid #b45f2e; }
.words-screen .word-row__top { display:flex;align-items:baseline;gap:8px; }
.words-screen .word-row__top b { font:700 16px/normal var(--serif);color:#332d24; }
.words-screen .word-row__top i { font:400 11.5px/normal var(--ui);font-style:normal;color:#8a7e6b; }
.words-screen .word-badge { margin-left:auto;font:700 10.5px/normal var(--ui);font-style:normal;border-radius:99px;padding:2px 7px; }
.words-screen .word-badge--difficult { color:#8f441b;background:#f6e8da; }
.words-screen .word-badge--mastered { color:oklch(0.45 0.1 145);background:#e6efe3; }
.words-screen .word-row__meta { display:block;font:400 12px/normal var(--ui);color:#5c5343;margin-top:4px; }
.words-empty { margin:0;padding:12px 18px;font:400 12px/1.7 var(--ui);color:#a89a82; }
.words-screen .word-detail { flex:1;min-width:0;padding:24px 26px;display:flex;flex-direction:column;gap:16px;overflow:hidden;background:none;border:0;border-radius:0;align-self:auto; }
.words-screen .word-detail h2 { font:700 30px/normal var(--serif);margin:0;color:#332d24; }
.words-screen .word-detail__ipa { display:flex;align-items:center;gap:14px;margin-top:7px;font:400 12.5px/normal var(--ui);color:#5c5343; }
.words-screen .word-detail__ipa button { box-sizing:content-box;padding:0;border:0;background:none;min-height:0;height:15px;width:15px;min-width:0;display:flex; }
.words-screen .word-detail__gloss { box-sizing:content-box;background:#fffdf8;border:1px solid #e6dcc8;border-radius:9px;padding:13px 15px;font:400 13px/normal var(--ui);color:#332d24; }
.words-screen .word-detail__context .words-eyebrow { margin-bottom:8px; }
.words-screen .word-detail blockquote { margin:0;padding:0 0 0 12px;border-left:2px solid #e4cbb0;background:none;font:400 15px/1.8 var(--serif);color:#5c5343; }
.words-screen .word-detail blockquote b { color:#b45f2e;font-weight:700; }
.words-screen .word-detail__jump { box-sizing:content-box;display:block;padding:0;margin-top:8px;border:0;background:none;min-height:0;height:auto;width:auto;min-width:0;font:600 12px/normal var(--ui);color:#b45f2e; }
.words-screen .word-detail__stats { display:flex;gap:10px; }
.words-screen .word-detail__stats > div { box-sizing:content-box;flex:1;background:#fffdf8;border:1px solid #e6dcc8;border-radius:9px;padding:12px 14px; }
.words-screen .word-detail__stats span { display:block;font:400 11.5px/normal var(--ui);color:#a89a82; }
.words-screen .word-detail__stats b { display:block;font:700 18px/normal var(--serif);color:#332d24;margin-top:3px; }
.words-screen .word-actions { display:flex;gap:8px;margin-top:auto;flex-wrap:nowrap; }
.words-screen .word-action { box-sizing:content-box;font:400 12.5px/normal var(--ui);color:#5c5343;background:#fffdf8;border:1px solid #e6dcc8;border-radius:9px;padding:9px 16px;min-height:0;height:auto;width:auto;min-width:0;white-space:nowrap; }
.words-screen .word-action--primary { font-weight:700;color:#fff9ef;background:#b45f2e;border-color:#b45f2e;padding:10px 17px; }
.words-screen .word-action--quiet { color:#8a7e6b; }
@media(max-width:900px) {
  .view--app-screen { height:auto;display:block;overflow:visible; }
  .view--app-screen .workspace-page { flex:none;overflow:visible; }
  .words-screen { height:auto;min-height:0;flex-direction:column; }
  .words-facets,.words-list-pane { width:auto;border-right:0;border-bottom:1px solid #e6dcc8; }
  .words-screen .word-list { overflow:visible; }
}
/* 12-0 · 学练入口: the paste card carries its own preview, and the recent list is the
   sessions this browser actually has. */
.video-entry h1 { font:600 30px var(--serif);margin:0 0 10px; }
.video-entry__subtitle { font-size:13.5px;color:#8a7e6b;margin:0 0 28px; }
.video-entry-form { display:block;width:100%;margin:0 auto;background:#fffdf8;border:1.5px solid #dcab85;border-radius:14px;box-shadow:0 10px 30px rgba(120,90,50,.10);overflow:hidden;text-align:left; }
.video-entry-form>span.video-entry-form__glyph,.video-entry-form>.video-entry-form__input,.video-entry-form>kbd,.video-entry-form>.btn { display:inline-block;vertical-align:middle; }
.video-entry-form { display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:18px 16px 18px 20px; }
.video-entry-form__glyph { width:22px;height:16px;border-radius:4px;background:#b45f2e;display:flex;align-items:center;justify-content:center;flex:none; }
.video-entry-form__input { flex:1;min-width:0;border:0;outline:0;background:transparent;font:15px ui-monospace,Menlo,monospace;color:#332d24;padding:0; }
.video-entry-form kbd { font:11.5px ui-monospace,Menlo,monospace;color:#c0b39b; }
.video-entry-form .btn { flex:none;font:700 13.5px var(--ui);color:#fff9ef;background:#b45f2e;border-radius:9px;padding:10px 20px; }
.video-preview { flex-basis:100%;margin:0 -16px -18px -20px;padding:12px 20px;background:#fbf7ef;border-top:1px solid #f0e8d8; }
.video-preview__row { display:flex;align-items:center;gap:12px; }
.video-preview__cover { width:40px;height:26px;border-radius:4px;flex:none;background-size:cover;background-position:center; }
.video-preview__cover--blank { background:linear-gradient(140deg,#c45b7a,#7a5bc4); }
.video-preview__body { flex:1;min-width:0;text-align:left; }
.video-preview__body b { display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.video-preview__body small { display:flex;align-items:center;gap:6px;font-size:11.5px;color:#8a7e6b;margin-top:2px; }
.video-preview__tick { width:14px;height:14px;border-radius:50%;background:oklch(0.55 0.13 145);flex:none; }
.video-preview__modes { display:inline-flex;background:#f1eadc;border-radius:99px;padding:3px;flex:none; }
.video-preview__modes button { font:600 12px var(--ui);color:#8a7e6b;border-radius:99px;padding:5px 12px;background:transparent; }
.video-preview__modes button.active { font-weight:700;color:#fff9ef;background:#b45f2e; }
.video-preview__line { font-size:12px;color:#8a7e6b;text-align:left; }
.video-preview__line--warn { color:#8f441b; }
.video-preview__hint { margin:8px 0 0;font-size:11.5px;line-height:1.8;color:#a89a82;text-align:left; }
.video-entry__note { margin-top:14px;font-size:11.5px;color:#a89a82; }
.study-recent { margin-top:36px;text-align:left; }
.study-recent__heading { display:flex;align-items:baseline;justify-content:space-between;font:700 13px var(--ui);color:#5c5343;margin-bottom:12px; }
.study-recent__heading small { font-weight:400;color:#a89a82; }
.study-recent__heading button { font:600 12.5px var(--ui);color:#b45f2e; }
.study-recent__grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }
.study-recent__empty { font-size:12.5px;line-height:1.9;color:#a89a82; }
.study-card { display:flex;flex-direction:column;gap:8px;background:#fffdf8;border:1px solid #e6dcc8;border-radius:14px;padding:14px 16px;min-width:0; }
.study-card__cover { height:66px;border-radius:9px;background:radial-gradient(120% 90% at 30% 20%,#2e2618,#17140f);background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:6px 8px; }
.study-card__time { font-size:10px;color:#fff;background:rgba(0,0,0,.6);border-radius:4px;padding:1px 5px; }
.study-card strong { font:600 13px/1.5 var(--serif);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.study-card small { font-size:11.5px;color:#8a7e6b; }
@media (max-width:700px) { .study-recent__grid { grid-template-columns:1fr; } .video-preview { margin:0 -16px -18px -20px; } }
/* 06-1 · AI 陪读 thread. */
.ai-scope { margin:0 0 14px;font-size:11.5px;color:#a89a82; }
.ai-sentence { margin:0 0 16px;padding:12px 14px;background:#faf6ee;border-left:2px solid rgba(180,95,46,.38);font:15px/1.8 var(--serif);color:#5c5343; }
.ai-turn { font-size:13px;line-height:1.9;border-radius:11px;padding:11px 13px;margin-bottom:10px; }
.ai-turn--mine { background:#f3e5d5;color:#5c4a36;margin-left:24px; }
.ai-turn--reply { background:#fffdf8;border:1px solid #e6dcc8;color:#332d24; }
.ai-turn--reply b { color:#8f441b; }
.ai-turn--error { background:#fcf1e6;border:1px solid #ecd9bf;color:#8f441b; }
.ai-turn--pending { color:#a89a82; }
.ai-follow { display:block;width:100%;text-align:left;font-size:12.5px;line-height:1.8;color:#5c5343;background:#faf6ee;border:1px dashed #dcc9a9;border-radius:11px;padding:10px 13px;margin-bottom:10px; }
.ai-follow span { color:#b45f2e;font-weight:600; }
.aux-footer--ai { display:flex;gap:8px;align-items:flex-end; }
.aux-footer--ai textarea { flex:1;min-height:44px;background:var(--reader-raised,#fffdf8);color:inherit;border:1px solid var(--reader-line,#e6dcc8);border-radius:9px;padding:10px 12px;font:13px var(--ui);resize:vertical; }
/* 06-1 · the sentence the rail is discussing is shaded in the body. */
.reader-sentence.is-discussed { background:color-mix(in srgb,var(--reader-highlight) 45%,transparent);border-radius:6px; }

/* 12-1–12-4 · 视频学练工作区。进入视频后使用设计稿的整窗布局：
   左侧播放器与控制带，右侧固定宽度三句面板；主题由用户的主题按钮决定，练法不改变主题。 */
.view--video-session { height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:#0f0f0f;color:#f2ede2; }
.view--video-session .workspace-footer { display:none; }
.view--video-session .workspace-header { background:#0f0f0f;border-color:#303030;color:#f2ede2; }
.view--video-session .workspace-brand { color:#f2ede2; }
.view--video-session .workspace-brand>span:first-child { background:linear-gradient(160deg,#2a2520,#1c1915)!important;box-shadow:inset 0 0 0 1px rgba(232,201,160,.35)!important; }
.view--video-session .workspace-brand>span:first-child>span:first-child>span:first-child,
.view--video-session .workspace-brand>span:first-child>span:first-child>span:last-child { color:#6e6450!important; }
.view--video-session .workspace-brand>span:first-child>span:first-child>span:nth-child(2) { color:#f4e8d2!important; }
.view--video-session .workspace-nav a { color:#afa189; }
.view--video-session .workspace-nav a[aria-current=page] { color:#f2ede2; }
.view--video-session .workspace-nav a[aria-current=page]:after { background:#e8c9a0; }
.view--video-session .workspace-page.video-workspace { box-sizing:border-box;width:100%;max-width:none;height:auto;min-height:0;flex:1;margin:0;padding:12px 24px 16px;overflow:hidden;display:flex;flex-direction:column;background:#0f0f0f; }
.video-session-link { flex:none;align-self:flex-end;margin:0 0 12px;box-sizing:border-box;width:300px;height:32px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid #453c2e;border-radius:99px;background:#1c1915;color:#f2ede2;font:12px ui-monospace,Menlo,monospace; }
.video-session-link>span:nth-child(2) { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.video-session-link small { flex:none;color:#afa189;font:11px var(--ui); }
.video-session-link__glyph { width:16px;height:12px;display:grid;place-items:center;flex:none;border-radius:4px;background:#b45f2e;color:#fff9ef;font-size:6px; }
.video-workspace .study-layout { flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 620px;gap:24px;--study-bg:#0f0f0f;--study-ink:#f2ede2;--study-muted:#afa189;--study-line:#453c2e;--study-focus:#352c1e; }
.video-workspace .study-player-column { position:relative;min-width:0;display:flex;flex-direction:column; }
.video-workspace .study-player { position:relative;width:100%;aspect-ratio:16/7.9;flex:none;border-radius:9px;background:radial-gradient(120% 90% at 30% 20%,#2e2618,#17140f); }
.video-workspace .study-player::before { content:'VIDEO';position:absolute;inset:0;display:grid;place-items:center;color:#4a3f2c;font:11px var(--ui);letter-spacing:.4em;pointer-events:none; }
.video-workspace .study-player>div,.video-workspace .study-player iframe,.video-workspace .study-player video { position:relative;z-index:1;width:100%;height:100%; }
.view--video-session .study-player--failed { background:#211d17;border-color:#5a4e3e;color:#f2ede2; }
.view--video-session .player-failure p,.view--video-session .player-failure small { color:#afa189; }
.video-workspace .study-controls { flex:none;display:flex;flex-wrap:nowrap;align-items:flex-start;justify-content:center;gap:10px;margin:10px 0 0;padding:10px 8px;border:1px solid #453c2e;border-radius:14px;background:#26221b;color:#baac94;overflow-x:auto;scrollbar-width:none; }
.video-workspace .study-controls::-webkit-scrollbar { display:none; }
.study-control-group { flex:none;display:inline-flex;align-items:flex-start;gap:2px;padding:5px 6px;border:1px solid #453c2e;border-radius:9px;background:#383125; }
.study-control-group button,.study-speed { box-sizing:border-box;width:48px;min-width:48px;min-height:54px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;padding:0;border:0;border-radius:9px;background:transparent;color:#baac94; }
.study-control-group button b,.study-speed b { box-sizing:border-box;width:38px;height:34px;display:grid;place-items:center;margin:0;border:0;border-radius:9px;background:transparent;color:inherit; }
.study-control-group svg { width:19px;height:19px; }
.study-control-group button small,.study-speed small { color:inherit;font:600 11px/1 var(--ui);white-space:nowrap; }
.study-control-group button[aria-pressed=true] b { background:#e8c9a0;color:#26221b; }
.study-control-group button[aria-pressed=true] { background:transparent;color:#e8c9a0; }
.study-icon-pause,.study-label-pause { display:none; }
.study-play-control[aria-pressed=true] .study-icon-play,.study-play-control[aria-pressed=true] .study-label-play { display:none; }
.study-play-control[aria-pressed=true] .study-icon-pause,.study-play-control[aria-pressed=true] .study-label-pause { display:block; }
.study-speed { position:relative;cursor:pointer; }
.study-speed select { position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer; }
.video-workspace .study-status { position:absolute;z-index:5;left:12px;top:12px;max-width:calc(100% - 24px);margin:0;padding:9px 12px;border:1px solid #5a4736;border-radius:9px;background:#33281fee;color:#e8c9a0;font-size:11.5px;box-shadow:0 8px 24px #0006; }
.study-video-meta { flex:none;display:flex;align-items:center;gap:14px;padding-top:12px; }
.study-video-meta>div:first-child { flex:1;min-width:0; }
.study-video-meta strong { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f2ede2;font:700 18px/1.3 var(--serif); }
.study-video-meta small { display:block;margin-top:4px;color:#afa189;font:12.5px var(--ui); }
.study-video-actions { display:flex;align-items:center;gap:8px;flex:none; }
.study-video-actions .pill,.study-video-actions details>summary { padding:7px 13px;border-color:#303030;background:transparent;color:#afa189;font-size:12px;white-space:nowrap;cursor:pointer; }
.study-video-actions details { position:relative; }
.study-video-actions details>summary { list-style:none;border:1px solid #303030;border-radius:99px; }
.study-video-actions details>summary::-webkit-details-marker { display:none; }
.study-video-actions details>div { position:absolute;right:0;top:38px;z-index:20;width:228px;padding:7px;border:1px solid #453c2e;border-radius:10px;background:#26221b;box-shadow:0 12px 34px #0008; }
.study-video-actions details button { display:block;width:100%;padding:9px 10px;border-radius:7px;text-align:left;color:#baac94;font-size:12px; }
.study-video-actions details button:hover { background:#383125;color:#f2ede2; }
.study-more-menu>hr { margin:5px 7px 8px;border:0;border-top:1px solid #453c2e; }
.study-more-menu>span { display:block;padding:2px 9px 7px;color:#7f725f;font-size:10px;letter-spacing:.6px; }
.subtitle-offset-controls { display:grid;grid-template-columns:1fr 52px 1fr;align-items:center;gap:5px;margin:0 4px 4px; }
.study-video-actions details .subtitle-offset-controls button { padding:7px 4px;text-align:center;border:1px solid #453c2e;background:#302a22; }
.subtitle-offset-controls output { color:#e8c9a0;text-align:center;font:600 11px var(--ui); }
.video-workspace .study-panel { height:100%;min-height:0;display:flex;flex-direction:column;border:1px solid #453c2e;border-radius:14px;background:var(--study-bg);color:var(--study-ink); }
.video-workspace .study-panel>header { box-sizing:border-box;min-height:55px;flex:none;display:flex;align-items:center;gap:8px;padding:12px 14px;border-color:var(--study-line); }
.study-panel__brand { display:flex;align-items:center;gap:6px;flex:none;white-space:nowrap; }
.study-brand-mark { width:22px;height:22px;display:grid;place-items:center;border:1px solid #5a4e3e;border-radius:22.5%;background:#2a2520;color:#f4e8d2;font:700 12px var(--serif); }
.study-panel__brand strong { color:var(--study-ink);font:700 14px var(--serif)!important; }
.study-panel__brand small { margin:0 0 0 2px!important;color:var(--study-muted);font:11px var(--ui)!important; }
.study-panel__brand small b { color:#e8c9a0; }
.video-workspace .study-panel nav { margin-left:auto;display:inline-flex;gap:0;padding:3px;border-radius:99px;background:#383125; }
.video-workspace .study-panel nav button { min-height:0;padding:5px 8px;border-radius:99px;color:#baac94;font:600 11.5px var(--ui); }
.video-workspace .study-panel nav button.active { background:#e8c9a0;color:#26221b; }
.study-panel__body { flex:1;min-height:0;overflow:auto;scrollbar-width:thin; }
.video-workspace #studySentences { display:flex;flex-direction:column;gap:10px;padding:12px 16px 0 18px; }
.video-workspace .cue-row { box-sizing:border-box;position:relative;flex:none;width:100%;padding:12px 20px;border:1px solid var(--study-line);border-radius:14px;background:#26221b;color:var(--study-ink);opacity:1;line-height:1.5; }
.video-workspace .cue-row.current { padding-left:20px;border-color:#6f5a41;background:#352c1e;box-shadow:0 0 0 2px rgba(232,201,160,.13); }
.video-workspace .cue-row.current::before { content:'';position:absolute;left:-1px;top:14px;bottom:14px;width:4px;border-radius:99px;background:#e8c9a0; }
.video-workspace .cue-row>span { display:block;color:inherit;font:400 22px/1.5 var(--serif); }
.video-workspace .cue-row em { margin:5px 0 0;color:#baac94;font:400 15px/1.5 var(--ui);font-style:normal; }
.video-workspace .cue-row .cue-translation-pending { min-height:22.5px;color:#8f816b; }
.video-workspace .cue-row .cue-translation-failed { color:#d8ab7a; }
.video-workspace .cue-row__footer { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px; }
.video-workspace .cue-time { flex:none;margin:0; }
.video-workspace .cue-time small { display:flex;align-items:center;gap:8px;margin:0;color:#afa189;font:13px var(--serif); }
.video-workspace .cue-time small b { color:inherit; }
.video-workspace .cue-current { position:absolute;z-index:1;right:18px;top:-10px;padding:3px 11px;border-radius:99px;background:#e8c9a0;color:#26221b;font:700 11px var(--ui);font-style:normal; }
.cue-actions { display:flex;align-items:center;justify-content:flex-end;gap:3px;min-width:0; }
.cue-action { display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid transparent;border-radius:9px;background:transparent;color:#baac94;cursor:pointer; }
.cue-action svg { width:19px;height:19px; }
.cue-action:hover,.cue-action:focus-visible { border-color:#6f5a41;background:#383125;color:#f2ede2; }
.cue-action[aria-pressed=true] { color:#e8c9a0; }
.cue-action[data-cue-action=play] { width:34px;height:34px; }
.cue-action[data-cue-action=play][aria-pressed=true] { border-color:rgba(232,201,160,.55);background:#352c1e;color:#e8c9a0; }
.cue-action[data-cue-action=record][aria-pressed=true] { border-color:#e8c9a0;background:#e8c9a0;color:#26221b; }
.cue-recording { display:block;width:100%;height:32px;margin-top:9px; }
.video-workspace .cue-spacer { min-height:84px; }
.video-workspace .study-hint { display:none; }
.video-workspace .study-panel>footer { flex:none;padding:10px 18px;border-top:1px solid var(--study-line);color:var(--study-muted); }
.video-workspace .study-panel>footer button { color:#e8c9a0; }
.video-workspace .study-word:hover,.video-workspace .study-word:focus-visible { background:rgba(232,201,160,.12);text-decoration-color:#e8c9a0; }
.study-layout[data-mode=shadow] #studySentences .cue-row:not(.current) { display:none; }
.study-layout[data-mode=shadow] #studySentences { padding:38px 30px 0; }
.study-layout[data-mode=shadow] .cue-row.current { padding:26px 28px; }
.study-layout[data-mode=shadow] .cue-row.current>span { font-size:27px;line-height:1.7;text-align:center; }
.shadow-practice { padding:18px 30px 24px;color:var(--study-muted); }
.shadow-practice__duration { display:block;margin:0 0 12px!important;text-align:center;font-size:12px!important; }
.shadow-practice__actions { display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap; }
.shadow-practice__actions button { min-height:36px;padding:8px 11px;border:1px solid var(--study-line);border-radius:9px;color:var(--study-muted);font-size:12px; }
.shadow-practice__actions .btn--primary { border-color:#e8c9a0;background:#e8c9a0;color:#26221b; }
.shadow-wave { display:grid;grid-template-columns:42px 1fr;gap:7px 12px;align-items:center;margin-top:20px;text-align:left;font-size:11px; }
.shadow-wave i { height:20px;background:repeating-linear-gradient(90deg,transparent 0 3px,#8f8069 3px 5px,transparent 5px 8px);opacity:.65; }
.video-workspace #studyAnswerForm { margin:10px 16px 16px;padding:13px 17px;border-radius:9px;background:#383125;color:#baac94; }
.video-workspace #studyAnswerForm textarea { min-height:58px;margin:9px 0;border-color:#574b3b;background:#26221b;color:#f2ede2; }
.video-workspace #studyAnswerForm .btn--primary { background:#e8c9a0;color:#26221b; }

/* 用户可从控制带显式选择浅色主题；挖空只是设计稿中的浅色示例，不触发这个分支。 */
.view--video-session.view--video-light { background:#faf6ee;color:#332d24; }
.view--video-session.view--video-light .workspace-header { background:#faf6ee;border-color:#e6dcc8;color:#332d24; }
.view--video-session.view--video-light .workspace-brand { color:#332d24; }
.view--video-session.view--video-light .workspace-brand>span:first-child { background:linear-gradient(160deg,#fcf8f0,#f4edde)!important;box-shadow:inset 0 0 0 1px rgba(180,140,80,.22)!important; }
.view--video-session.view--video-light .workspace-nav a { color:#5c5343; }
.view--video-session.view--video-light .workspace-nav a[aria-current=page] { color:#332d24; }
.view--video-session.view--video-light .workspace-nav a[aria-current=page]:after { background:#b45f2e; }
.view--video-session.view--video-light .workspace-page.video-workspace { background:#faf6ee; }
.view--video-light .video-session-link { border-color:#e6dcc8;background:#fffdf8;color:#332d24; }
.view--video-light .video-session-link small { color:#8a7e6b; }
.view--video-light .video-workspace .study-layout { --study-bg:#fffdf8;--study-ink:#332d24;--study-muted:#8a7e6b;--study-line:#e6dcc8;--study-focus:#f6e8da; }
.view--video-light .video-workspace .study-controls { border-color:#e6dcc8;background:#f3ecdd;color:#8a7e6b; }
.view--video-light .study-control-group { border-color:#e0d4c0;background:#fffdf8; }
.view--video-light .study-control-group button,.view--video-light .study-speed { color:#8a7e6b; }
.view--video-light .study-control-group button[aria-pressed=true] b { background:#b45f2e;color:#fff9ef; }
.view--video-light .study-video-meta strong { color:#332d24; }
.view--video-light .study-video-meta small,.view--video-light .study-video-actions .pill,.view--video-light .study-video-actions details>summary { border-color:#e6dcc8;color:#8a7e6b; }
.view--video-light .study-video-actions details>div { border-color:#e6dcc8;background:#fffdf8;box-shadow:0 12px 34px #6e56351f; }
.view--video-light .study-video-actions details button { color:#6f6351; }
.view--video-light .study-video-actions details button:hover { background:#f3ecdd;color:#332d24; }
.view--video-light .study-more-menu>hr { border-color:#e6dcc8; }
.view--video-light .study-more-menu>span { color:#9a8d79; }
.view--video-light .study-video-actions details .subtitle-offset-controls button { border-color:#e6dcc8;background:#faf6ee; }
.view--video-light .subtitle-offset-controls output { color:#b45f2e; }
.view--video-light .study-brand-mark { border-color:#e6dcc8;background:#f6e8da;color:#b45f2e; }
.view--video-light .study-panel__brand small b,.view--video-light .video-workspace .study-panel>footer button { color:#b45f2e; }
.view--video-light .video-workspace .study-panel nav { background:#f1eadc; }
.view--video-light .video-workspace .study-panel nav button { color:#8a7e6b; }
.view--video-light .video-workspace .study-panel nav button.active { background:#b45f2e;color:#fff9ef; }
.view--video-light .video-workspace .cue-row { background:#faf6ee; }
.view--video-light .video-workspace .cue-row.current { border-color:#b45f2e;background:#f6e8da;box-shadow:0 0 0 3px rgba(180,95,46,.12); }
.view--video-light .video-workspace .cue-row.current::before { background:#b45f2e; }
.view--video-light .video-workspace .cue-current { background:#b45f2e;color:#fff9ef; }
.view--video-light .cue-action { color:#8a7e6b; }
.view--video-light .cue-action:hover,.view--video-light .cue-action:focus-visible { border-color:#d7b89c;background:#fffdf8;color:#332d24; }
.view--video-light .cue-action[aria-pressed=true] { color:#b45f2e; }
.view--video-light .cue-action[data-cue-action=play][aria-pressed=true] { border-color:rgba(180,95,46,.55);background:#f6e8da;color:#b45f2e; }
.view--video-light .cue-action[data-cue-action=record][aria-pressed=true] { background:#b45f2e;color:#fff9ef; }
.view--video-light .video-workspace #studyAnswerForm { background:#f3ecdd;color:#5c5343; }
.view--video-light .video-workspace #studyAnswerForm textarea { border-color:#e6dcc8;background:#fffdf8;color:#332d24; }
.view--video-light .video-workspace #studyAnswerForm .btn--primary { background:#b45f2e;color:#fff9ef; }

@media(max-width:1200px) {
  .view--video-session .workspace-page.video-workspace { height:auto;overflow:auto; }
  .video-session-link { align-self:center;width:min(100%,760px);margin:0 auto 12px; }
  .video-workspace .study-layout { height:auto;grid-template-columns:1fr; }
  .video-workspace .study-player-column,.video-workspace .study-panel { width:min(100%,760px);max-width:760px;margin:auto; }
  .video-workspace .study-panel { min-height:620px; }
}
@media(max-width:700px) {
  .view--video-session { height:auto;min-height:100dvh;overflow:visible; }
  .view--video-session .workspace-page.video-workspace { padding:18px 16px 28px;overflow:visible; }
  .video-session-link { margin-bottom:14px; }
  .video-workspace .study-layout { gap:16px; }
  .video-workspace .study-controls { padding:8px;gap:7px; }
  .study-control-group { padding:4px; }
  .study-control-group button,.study-speed { width:43px;min-width:43px; }
  .study-video-meta { align-items:flex-start;flex-direction:column; }
  .study-video-meta>div:first-child { width:100%;max-width:100%; }
  .study-video-actions { width:100%;overflow-x:auto; }
  .video-workspace .study-panel { min-height:560px; }
  .video-workspace .study-panel>header { align-items:flex-start;flex-wrap:wrap; }
  .video-workspace .study-panel nav { width:100%;justify-content:space-between; }
  .video-workspace .cue-row>span { font-size:19px; }
  .video-workspace .cue-row__footer { align-items:flex-end;flex-wrap:wrap; }
  .cue-actions { gap:1px; }
  .cue-action { width:32px;height:32px; }
  .study-layout[data-mode=shadow] #studySentences { padding:20px 14px 0; }
}
@media(max-width:600px) {
  .pdf-layout-confirm { padding:18px;flex-direction:column; }
  .pdf-layout-preview { width:100%; }
  .pdf-layout-columns { width:160px;align-self:center; }
  .pdf-layout-actions { align-items:flex-start;flex-direction:column; }
  .share-card-actions { flex-wrap:wrap; }
  .share-card-actions .btn { flex:1 1 30%;font-size:11px; }
  .profile-card { padding:20px 18px; }
  .profile-card>header { align-items:flex-start; }
  .profile-card header p { white-space:normal; }
  .profile-entry-grid { grid-template-columns:1fr; }
  .membership-page { padding:22px 18px; }
  .membership-plans { grid-template-columns:1fr 1fr;gap:12px 8px; }
  .membership-page ul { grid-template-columns:1fr; }
  .membership-footer { align-items:stretch;flex-direction:column; }
  .membership-actions { flex-direction:column; }
  .membership-footer>small { max-width:none;text-align:center; }
}

/* One page-title scale, one workspace button, and the account button marks 我的 / 设置 / 会员. */
@media(max-width:600px) { .video-entry h1 { font-size:27px; } }
.page-heading p { line-height:1.7; }
#workspacePage:not(.video-workspace) .btn { box-sizing:content-box;min-height:0;border-radius:9px;padding:10px 18px;font:700 13px/normal var(--ui); }
.account-button[aria-current=page] { box-shadow:0 0 0 2px #faf6ee,0 0 0 3.5px #b45f2e; }