:root {
  --paper: #eee6d5;
  --paper-light: #f8f4ea;
  --paper-deep: #dfd2bb;
  --wood: #95704d;
  --wood-light: #c5a67a;
  --ink: #302b24;
  --muted: #81796c;
  --line: #d8ccb7;
  --green: #365748;
  --gold: #b28a51;
  --sidebar: 245px;
  --display: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
  --sans: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--paper); font: 14px/1.7 var(--sans); background-image: radial-gradient(ellipse at 72% 10%, rgba(255,255,255,.65), transparent 36%), linear-gradient(115deg, rgba(129,96,53,.035), transparent 44%); }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 12px; background: var(--paper-light); }
.skip-link:focus { left: 10px; }
.topbar { height: 76px; position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 28px; padding: 0 clamp(20px, 4vw, 58px); border-bottom: 1px solid rgba(76,61,43,.16); background: rgba(248,244,234,.92); backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: 13px; min-width: 220px; text-decoration: none; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #806041; background: #76553a; box-shadow: 4px 4px 0 #c6a977; color: #fff7e6; }
.brand-mark span { font: italic 700 20px var(--display); }
.brand-copy strong, .brand-copy small { display: block; }
.brand-copy strong { color: #382f25; font: 700 17px/1.25 var(--display); letter-spacing: .1em; }
.brand-copy small { margin-top: 3px; color: #95856e; font: 9px/1.2 ui-monospace, Consolas, monospace; letter-spacing: .18em; }
.top-note { display: flex; align-items: center; gap: 11px; color: #8d806d; font: 11px var(--display); letter-spacing: .08em; white-space: nowrap; }
.note-rule { width: 26px; height: 1px; background: var(--gold); }
.top-actions { position: relative; display: flex; align-items: center; gap: 11px; margin-left: auto; }
.search-wrap { width: clamp(185px, 19vw, 275px); height: 38px; display: flex; align-items: center; gap: 9px; padding: 0 10px; border: 1px solid #d5c9b4; background: #fcf9f1; color: #8a806f; }
.search-wrap input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 11px; }
.search-wrap kbd { padding: 1px 4px; border: 1px solid #e0d7c7; color: #9a907f; font: 9px ui-monospace, Consolas, monospace; white-space: nowrap; }
.recent-menu { position: relative; }
.recent-menu > summary { list-style: none; cursor: pointer; color: #706554; font-size: 11px; white-space: nowrap; }
.recent-menu > summary::-webkit-details-marker { display: none; }
.recent-menu > summary span { margin-left: 4px; color: var(--gold); }
.recent-popover { position: absolute; top: 35px; right: -20px; z-index: 30; width: 240px; padding: 15px; border: 1px solid var(--line); background: var(--paper-light); box-shadow: 0 12px 30px rgba(63,48,29,.14); }
.recent-popover > strong { display: block; padding-bottom: 8px; color: #73644e; font: 12px var(--display); }
.recent-item { display: block; padding: 7px 0; border-top: 1px solid #e6ddcc; color: var(--ink); text-decoration: none; font-size: 11px; }
.recent-item:hover { color: var(--green); }
.recent-empty { padding-top: 8px; border-top: 1px solid #e6ddcc; color: var(--muted); font-size: 10px; }
.edit-toggle { min-height: 36px; padding: 0 13px; border: 1px solid #a58a65; background: transparent; color: #735b39; font-size: 10px; white-space: nowrap; }
.edit-toggle:hover, .edit-toggle[aria-pressed="true"] { background: #76553a; color: #fff8e8; }
.app-shell { display: grid; grid-template-columns: var(--sidebar) minmax(0,1fr); min-height: calc(100vh - 76px); }
.sidebar { position: sticky; top: 76px; display: flex; flex-direction: column; height: calc(100vh - 76px); min-height: 470px; padding: 28px 20px 22px 28px; overflow-y: auto; border-right: 1px solid rgba(83,65,43,.14); background: linear-gradient(90deg, rgba(237,228,211,.78), rgba(246,240,228,.38)); }
.sidebar-heading { display: flex; justify-content: space-between; align-items: center; color: #9a8768; font: 9px ui-monospace, Consolas, monospace; letter-spacing: .15em; }
.sidebar-heading span:last-child { color: #ab8c59; }
.wood-rule { height: 3px; margin: 14px 0 19px; background: linear-gradient(90deg, #91704e, #d2b78d 50%, #a5855f); box-shadow: 0 3px 0 rgba(101,73,43,.1); }
.grade-nav { display: grid; gap: 4px; }
.grade-nav button { min-height: 38px; display: flex; justify-content: space-between; align-items: center; gap: 7px; padding: 7px 9px; border: 0; border-left: 2px solid transparent; background: transparent; color: #786f60; text-align: left; font-size: 11px; transition: .18s ease; }
.grade-nav button:hover, .grade-nav button.active { border-left-color: var(--gold); background: rgba(255,255,255,.52); color: #4c604f; }
.grade-nav button span { color: #aa9a82; font: 9px ui-monospace, Consolas, monospace; }
.sidebar-bottom { margin-top: auto; padding-top: 28px; color: #877b69; }
.sidebar-seal { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #b89968; color: #a57f48; font: 17px var(--display); }
.sidebar-bottom p { margin: 9px 0 5px; font: 12px/1.8 var(--display); }
.sidebar-bottom small { color: #a39886; font-size: 9px; }
.main-content { min-width: 0; width: 100%; max-width: 1540px; margin: 0 auto; padding: 39px clamp(22px, 4.5vw, 68px) 25px; outline: 0; }
.welcome-row { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding-bottom: 32px; }
.eyebrow { margin-bottom: 11px; color: #a08b6a; font: 9px ui-monospace, Consolas, monospace; letter-spacing: .18em; }
.welcome-row h1 { margin: 0; color: #453727; font: 500 clamp(33px, 4.6vw, 54px)/1.17 var(--display); letter-spacing: .02em; }
.welcome-row h1 em { color: #785c3f; font-style: normal; }
.welcome-copy { margin: 11px 0 0; color: #857c6f; font-size: 11px; }
.welcome-stamp { width: 118px; height: 118px; flex: 0 0 118px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 13px 8px 10px; border: 1px solid #cdb993; border-radius: 50%; color: #9c7a4b; transform: rotate(8deg); }
.welcome-stamp span { font: 8px ui-monospace, Consolas, monospace; letter-spacing: .14em; }
.welcome-stamp strong { color: #6d563a; font: 15px/1.3 var(--display); text-align: center; }
.shelf-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 15px; min-height: 47px; padding: 8px 0; border-top: 1px solid #d8ccb7; border-bottom: 1px solid #c9b38f; }
.current-shelf { display: flex; align-items: center; gap: 10px; min-width: 0; }
.shelf-dot { width: 7px; height: 7px; background: #9e7441; transform: rotate(45deg); }
.current-shelf h2 { margin: 0; color: #504332; font: 600 15px var(--display); }
.result-count { color: #a29888; font: 9px ui-monospace, Consolas, monospace; white-space: nowrap; }
.toolbar-actions { display: flex; align-items: center; gap: 8px; color: #948874; font-size: 10px; }
.sort-label { white-space: nowrap; }
.toolbar-actions select { border: 0; outline: 0; background: transparent; color: #70634f; font-size: 10px; }
.text-button { border: 0; background: transparent; color: #987847; text-decoration: underline; text-underline-offset: 3px; font-size: 10px; }
.shelves { padding-top: 14px; }
.shelf-section { position: relative; margin: 4px 0 27px; padding-bottom: 10px; }
.shelf-heading { display: flex; align-items: center; gap: 11px; margin: 0 0 13px; }
.shelf-heading h3 { margin: 0; color: #746047; font: 600 13px var(--display); }
.shelf-heading small { color: #aaa08f; font: 8px ui-monospace, Consolas, monospace; letter-spacing: .11em; }
.shelf-heading .heading-line { height: 1px; flex: 1; background: #d7c8af; }
.shelf-heading .group-count { color: #a29279; font: 9px ui-monospace, Consolas, monospace; }
.book-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-items: end; gap: 17px; padding: 0 5px 14px; }
.book-card { --book: #4a6958; --book-light: #76917b; position: relative; min-width: 0; overflow: visible; border: 1px solid #d7c8ab; background: #f8f3e8; box-shadow: 4px 5px 0 #c0a77e, 6px 10px 17px rgba(74,55,31,.12); transition: transform .2s ease, box-shadow .2s ease; }
.book-card:hover { transform: translateY(-5px) rotate(-.5deg); box-shadow: 5px 9px 0 #b99b6e, 9px 16px 23px rgba(74,55,31,.17); }
.book-cover-link { display: block; min-height: 248px; padding: 0; color: #fff6df; text-decoration: none; background: linear-gradient(155deg,var(--book-light),var(--book) 57%,var(--book)); }
.book-cover-link:focus-visible { outline: 3px solid #bd934d; outline-offset: 3px; }
.book-cover { position: relative; min-height: 248px; display: flex; flex-direction: column; justify-content: space-between; padding: 15px 15px 14px 20px; overflow: hidden; }
.book-cover:before { content: ""; position: absolute; inset: 9px 8px 9px 14px; border: 1px solid rgba(255,246,220,.32); pointer-events: none; }
.book-cover:after { content: ""; position: absolute; width: 190px; height: 190px; right: -115px; top: 62px; border: 1px solid rgba(255,246,220,.19); border-radius: 50%; box-shadow: 0 0 0 13px rgba(255,246,220,.04),0 0 0 27px rgba(255,246,220,.035); pointer-events: none; }
.book-spine { position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; width: 9px; background: linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.12),rgba(0,0,0,.1)); }
.book-code { position: relative; z-index: 2; color: rgba(255,246,220,.73); font: 8px ui-monospace, Consolas, monospace; letter-spacing: .12em; }
.book-monogram { position: relative; z-index: 2; width: 57px; height: 57px; display: grid; place-items: center; align-self: center; border: 1px solid rgba(255,246,220,.72); border-radius: 50%; color: #fff6df; font: 24px var(--display); }
.book-title { position: relative; z-index: 2; display: block; margin: 0; font: 600 17px/1.4 var(--display); letter-spacing: .04em; }
.book-subtitle { position: relative; z-index: 2; display: block; margin-top: 3px; color: rgba(255,246,220,.72); font: 8px ui-monospace, Consolas, monospace; letter-spacing: .14em; }
.book-actions { position: absolute; z-index: 4; top: 13px; right: 11px; display: flex; align-items: center; gap: 5px; }
.favorite-button { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid rgba(255,246,220,.35); border-radius: 50%; background: rgba(33,32,25,.13); color: #fff4d6; font-size: 15px; }
.favorite-button:hover,.favorite-button.active { background: rgba(33,32,25,.4); color: #f2d58b; }
.book-meta { display: flex; justify-content: space-between; gap: 6px; padding: 10px 11px 8px; color: #837764; font-size: 9px; }
.book-category { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grade-chip { flex: 0 0 auto; color: #aa8b59; }
.grade-editor { display: none; width: calc(100% - 20px); margin: 0 10px 11px; padding: 6px 7px; border: 1px solid #d4c6ac; background: #fcf9f1; color: #68583f; font-size: 9px; }
.edit-mode .grade-editor { display: block; }
.shelf-plank { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: linear-gradient(180deg,#c5a77b,#96704d 60%,#7d5c40); box-shadow: 0 4px 0 rgba(97,67,38,.13),0 6px 8px rgba(78,56,30,.12); }
.empty-state { padding: 50px 20px 58px; text-align: center; color: #857a68; }
.empty-book { width: 43px; height: 54px; display: grid; place-items: center; margin: 0 auto 12px; border: 1px solid #baa37c; color: #ae8e5a; font: 17px var(--display); transform: rotate(-5deg); }
.empty-state h2 { margin: 0; color: #6c563b; font: 18px var(--display); }
.empty-state p { margin: 7px 0; font-size: 10px; }
.edit-hint { display: flex; align-items: center; gap: 10px; margin: 17px 0; padding: 11px 13px; border: 1px solid #dcc9a5; background: rgba(255,250,236,.7); color: #796747; }
.hint-icon { color: #aa8348; font-size: 18px; }
.edit-hint p { flex: 1; margin: 0; font-size: 10px; }
.edit-hint p strong { color: #624b2e; font-size: 11px; }
.content-footer { display: flex; justify-content: space-between; gap: 12px; padding: 17px 2px 3px; border-top: 1px solid #d8ccb7; color: #9a907e; font: 9px ui-monospace, Consolas, monospace; }
.content-footer b { color: #866a41; font-weight: 500; }
.toast { position: fixed; bottom: 20px; left: 50%; z-index: 80; padding: 8px 14px; background: #3e5042; color: #fff6e7; font-size: 11px; opacity: 0; pointer-events: none; transform: translate(-50%,10px); transition: .2s; }
.toast.show { opacity: 1; transform: translate(-50%,0); }
.manage-empty { padding: 26px; color: var(--muted); text-align: center; }
@media(max-width:1280px){.book-grid{grid-template-columns:repeat(3,minmax(0,1fr));}.top-note{display:none;}}
@media(max-width:980px){:root{--sidebar:210px}.topbar{gap:16px;padding-inline:18px}.brand{min-width:175px}.book-grid{grid-template-columns:repeat(3,minmax(0,1fr));}.welcome-stamp{width:96px;height:96px;flex-basis:96px}.main-content{padding-inline:28px}}
@media(max-width:720px){.topbar{height:62px;padding-inline:12px;gap:8px}.brand{min-width:auto;gap:9px}.brand-mark{width:34px;height:34px}.brand-copy strong{font-size:14px}.brand-copy small{font-size:7px}.search-wrap{width:39px;justify-content:center;padding:0;border-color:transparent;background:transparent}.search-wrap input{display:none}.search-wrap:focus-within{position:absolute;left:10px;right:10px;width:auto;justify-content:flex-start;padding:0 10px;border-color:#d5c9b4;background:#fcf9f1}.search-wrap:focus-within input{display:block}.search-wrap kbd,.recent-menu{display:none}.edit-toggle{min-height:32px;padding-inline:8px;font-size:9px}.app-shell{display:block}.sidebar{position:relative;top:0;height:auto;min-height:0;display:block;padding:11px 12px 9px;overflow:visible;border-right:0;border-bottom:1px solid rgba(83,65,43,.14);background:rgba(237,228,211,.83)}.sidebar-heading,.wood-rule,.sidebar-bottom{display:none}.grade-nav{display:flex;gap:5px;overflow-x:auto;padding:1px 0 4px;scrollbar-width:thin}.grade-nav button{flex:0 0 auto;min-height:31px;padding:5px 9px;border:1px solid #d2c3a8;border-left:1px solid #d2c3a8;font-size:9px;white-space:nowrap}.grade-nav button span{display:none}.grade-nav button:hover,.grade-nav button.active{border-color:#ad8a58;background:#faf6eb}.main-content{padding:22px 14px 17px}.welcome-row{padding-bottom:21px}.welcome-row h1{font-size:35px}.welcome-copy{max-width:330px;font-size:10px}.welcome-stamp{width:73px;height:73px;flex-basis:73px;padding:8px 4px 6px}.welcome-stamp span{font-size:6px}.welcome-stamp strong{font-size:11px}.shelf-toolbar{align-items:flex-start;flex-direction:column;gap:4px;padding:9px 0}.toolbar-actions{align-self:flex-end}.book-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;padding-inline:2px;padding-bottom:14px}.book-cover-link,.book-cover{min-height:206px}.book-cover{padding:13px 10px 11px 16px}.book-cover:before{inset:7px 6px 7px 12px}.book-title{font-size:14px}.book-monogram{width:47px;height:47px;font-size:20px}.book-code{font-size:7px}.book-meta{padding:8px 8px 6px;font-size:8px}.grade-editor{width:calc(100% - 16px);margin-inline:8px}.content-footer{flex-direction:column;gap:4px}.edit-hint{align-items:flex-start}.edit-hint .text-button{white-space:nowrap}}
@media(max-width:390px){.brand-mark{width:31px;height:31px}.brand-copy strong{font-size:12px}.welcome-row h1{font-size:31px}.welcome-stamp{display:none}.book-grid{gap:10px 8px}.book-cover-link,.book-cover{min-height:185px}.book-title{font-size:13px}.book-code{letter-spacing:.08em}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media print{.topbar,.sidebar,.toolbar-actions,.favorite-button,.grade-editor,.content-footer,.toast{display:none!important}.app-shell{display:block}.main-content{max-width:none;padding:0}.book-grid{grid-template-columns:repeat(4,1fr)}.book-card{break-inside:avoid;box-shadow:none}.shelf-plank{display:none}}

/* Larger reading sizes across the shelf interface. */
body { font-size: 16px; }
.top-note { font-size: 13px; }
.search-wrap input { font-size: 14px; }
.search-wrap kbd { font-size: 10px; }
.recent-menu > summary { font-size: 13px; }
.recent-popover > strong { font-size: 14px; }
.recent-item { font-size: 13px; }
.recent-empty { font-size: 12px; }
.edit-toggle { font-size: 12px; }
.sidebar-heading { font-size: 11px; }
.grade-nav button { min-height: 42px; font-size: 14px; }
.grade-nav button span { font-size: 11px; }
.sidebar-bottom p { font-size: 14px; }
.sidebar-bottom small { font-size: 11px; }
.eyebrow { font-size: 11px; }
.welcome-copy { font-size: 14px; }
.welcome-stamp span { font-size: 9px; }
.welcome-stamp strong { font-size: 17px; }
.result-count { font-size: 12px; }
.toolbar-actions { font-size: 12px; }
.toolbar-actions select { font-size: 12px; }
.shelf-heading h3 { font-size: 15px; }
.shelf-heading small { font-size: 10px; }
.shelf-heading .group-count { font-size: 11px; }
.book-code { font-size: 10px; }
.book-title { font-size: 19px; }
.book-subtitle { font-size: 10px; }
.book-meta { font-size: 11px; }
.grade-editor { font-size: 12px; }
.empty-state p { font-size: 12px; }
.edit-hint p { font-size: 12px; }
.edit-hint p strong { font-size: 13px; }
.text-button { font-size: 12px; }
.content-footer { font-size: 11px; }
.toast { font-size: 13px; }
@media(max-width:720px) {
  .grade-nav button { min-height: 36px; font-size: 12px; }
  .welcome-copy { font-size: 12px; }
  .shelf-heading h3 { font-size: 14px; }
  .book-code { font-size: 9px; }
  .book-title { font-size: 16px; }
  .book-subtitle { font-size: 9px; }
  .book-meta { font-size: 10px; }
  .grade-editor { font-size: 11px; }
  .content-footer { font-size: 10px; }
}
@media(max-width:390px) {
  .grade-nav button { font-size: 11px; }
  .book-title { font-size: 15px; }
  .book-code { font-size: 8px; }
}

/* Extra-large, sans-serif reading mode by default. */
body { font-size: 18px; line-height: 1.75; font-family: var(--sans); }
.brand-copy strong { font-size: 19px; }
.top-note { font-size: 15px; }
.search-wrap input { font-size: 16px; }
.recent-menu > summary { font-size: 15px; }
.recent-popover > strong { font-size: 16px; }
.recent-item { font-size: 15px; }
.recent-empty { font-size: 14px; }
.edit-toggle { font-size: 14px; }
.sidebar-heading { font-size: 12px; }
.grade-nav button { min-height: 48px; font-size: 17px; }
.grade-nav button span { font-size: 13px; }
.sidebar-bottom p { font-size: 16px; }
.sidebar-bottom small { font-size: 13px; }
.eyebrow { font-size: 13px; }
.welcome-row h1 { font-size: clamp(40px,5.2vw,66px); }
.welcome-copy { font-size: 17px; }
.welcome-stamp strong { font-size: 20px; }
.current-shelf h2 { font-size: 20px; }
.result-count,.toolbar-actions,.toolbar-actions select { font-size: 14px; }
.shelf-heading h3 { font-size: 19px; }
.shelf-heading small { font-size: 12px; }
.shelf-heading .group-count { font-size: 13px; }
.book-code { font-size: 12px; }
.book-title { font-size: 25px; }
.book-subtitle { font-size: 12px; }
.book-meta { font-size: 14px; }
.grade-editor { font-size: 15px; }
.empty-state h2 { font-size: 22px; }
.empty-state p { font-size: 15px; }
.edit-hint p { font-size: 14px; }
.edit-hint p strong { font-size: 15px; }
.text-button,.content-footer { font-size: 13px; }
.toast { font-size: 15px; }
@media(max-width:720px) {
  .brand-copy strong { font-size: 16px; }
  .grade-nav button { min-height: 42px; font-size: 14px; }
  .welcome-row h1 { font-size: 40px; }
  .welcome-copy { font-size: 14px; }
  .current-shelf h2,.shelf-heading h3 { font-size: 17px; }
  .result-count,.toolbar-actions,.toolbar-actions select { font-size: 12px; }
  .book-code { font-size: 10px; }
  .book-title { font-size: 19px; }
  .book-subtitle { font-size: 10px; }
  .book-meta { font-size: 12px; }
  .grade-editor { font-size: 13px; }
  .content-footer { font-size: 11px; }
}
@media(max-width:390px) {
  .welcome-row h1 { font-size: 36px; }
  .grade-nav button { font-size: 13px; }
  .book-title { font-size: 17px; }
}

/* Shared visual language adapted from the supplied Xi course page. */
:root {
  --paper: #faf8f4;
  --paper-light: #fffefb;
  --paper-deep: #f8f6f2;
  --wood: #d4c8b8;
  --wood-light: #c0392b;
  --ink: #1a1410;
  --muted: #77716b;
  --line: #d4c8b8;
  --green: #1a5c3a;
  --gold: #a07800;
  --sidebar: 280px;
  --display: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
  --sans: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
}
body { color: var(--ink); background: var(--paper); }
.topbar { height: 80px; padding-inline: 36px; border: 0; background: linear-gradient(120deg,#8b1a1a 0%,#a52a2a 62%,#c0392b 100%); color: #fff; }
.topbar:after { content:""; position:absolute; right:-58px; top:-96px; width:230px; height:230px; border:1px solid rgba(255,255,255,.09); border-radius:50%; box-shadow:0 0 0 18px rgba(255,255,255,.025),0 0 0 38px rgba(255,255,255,.02); pointer-events:none; }
.brand { position:relative; z-index:1; }
.brand-mark { border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.12); box-shadow:none; color:#fff; }
.brand-copy strong { color:#fff; }
.brand-copy small { color:rgba(255,255,255,.69); }
.top-note { position:relative; z-index:1; color:rgba(255,255,255,.82); }
.note-rule { background:#e7c36e; }
.top-actions { z-index:2; }
.search-wrap { border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.12); color:rgba(255,255,255,.85); }
.search-wrap input { color:#fff; }
.search-wrap input::placeholder { color:rgba(255,255,255,.75); }
.search-wrap kbd { border-color:rgba(255,255,255,.28); color:rgba(255,255,255,.75); }
.recent-menu > summary { color:#fff; }
.recent-menu > summary span { color:#f1d388; }
.recent-popover { border-color:var(--line); background:var(--paper-light); color:var(--ink); }
.edit-toggle { border-color:rgba(255,255,255,.65); color:#fff; }
.edit-toggle:hover,.edit-toggle[aria-pressed="true"] { border-color:#fff; background:#fff; color:#8b1a1a; }
.app-shell { min-height:calc(100vh - 80px); }
.sidebar { top:80px; height:calc(100vh - 80px); border-right:2px solid var(--line); background:var(--paper-light); }
.sidebar-heading { color:#8b1a1a; }
.sidebar-heading span:last-child { color:var(--gold); }
.wood-rule { height:2px; background:linear-gradient(90deg,#8b1a1a,#c0392b 65%,#d8a46e); box-shadow:none; }
.grade-nav { gap:2px; }
.grade-nav button { min-height:48px; padding:11px 16px; border-left:4px solid transparent; background:transparent; color:#555; }
.grade-nav button:hover { border-left-color:#c0392b; background:#f9edec; color:#c0392b; }
.grade-nav button.active { border-left-color:#c0392b; background:linear-gradient(90deg,rgba(192,57,43,.09),transparent); color:#c0392b; font-weight:700; }
.grade-nav .nav-icon { width:25px; height:25px; flex:none; display:grid; place-items:center; border-radius:6px; background:#c0392b; color:#fff; font-size:11px; font-weight:700; }
.grade-nav button.active .nav-icon { background:#c0392b; color:#fff; }
.grade-nav button .nav-text { flex:1; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.grade-nav button .nav-count { color:#999; font-size:12px; }
.sidebar-bottom { border-top:1px solid var(--line); }
.sidebar-seal { border-color:#c0392b; color:#c0392b; }
.sidebar-bottom p { color:#555; }
.sidebar-bottom small { color:#888; }
.main-content { background:var(--paper); }
.eyebrow { color:#c0392b; }
.welcome-row h1 { color:#1a1410; }
.welcome-row h1 em { color:#8b1a1a; }
.welcome-copy { color:#68615a; }
.welcome-stamp { border-color:#caa6a0; color:#a52a2a; }
.welcome-stamp strong { color:#8b1a1a; }
.shelf-toolbar { border-color:var(--line); }
.shelf-dot { background:#c0392b; }
.current-shelf h2 { color:#1a1410; }
.shelf-heading h3 { color:#8b1a1a; }
.shelf-heading .heading-line { background:var(--line); }
.book-card { border-color:#d4c8b8; background:var(--paper-light); box-shadow:3px 4px 0 #d8cbbc,5px 9px 16px rgba(44,28,19,.1); }
.book-card:hover { border-color:#c0392b; box-shadow:4px 7px 0 #d0b8a8,8px 14px 22px rgba(44,28,19,.14); }
.book-cover:before { border-color:rgba(255,255,255,.35); }
.book-meta { color:#625d57; }
.grade-chip { color:#8b1a1a; }
.grade-editor { border-color:#d4c8b8; background:var(--paper-light); color:#3c342c; }
.shelf-plank { height:6px; background:linear-gradient(180deg,#c8b8a2,#a79076 65%,#92785e); box-shadow:0 3px 0 rgba(101,73,43,.08); }
.edit-hint { border-color:#e3c7c4; background:#f9edec; color:#68433e; }
.edit-hint p strong { color:#8b1a1a; }
.text-button { color:#a52a2a; }
.content-footer { border-color:var(--line); color:#77716b; }
.content-footer b { color:#8b1a1a; }
.toast { background:#8b1a1a; }
@media(max-width:980px) { .topbar { padding-inline:20px; } }
@media(max-width:720px) {
  .topbar { height:68px; padding-inline:12px; background:linear-gradient(120deg,#8b1a1a,#b12c2c); }
  .sidebar { top:0; height:auto; background:var(--paper-light); border-bottom:2px solid var(--line); }
  .grade-nav button { min-height:40px; border:1px solid transparent; border-left:4px solid transparent; }
  .grade-nav button.active { border:1px solid #e8c3bf; border-left:4px solid #c0392b; background:#f9edec; }
  .grade-nav .nav-icon { width:22px; height:22px; border-radius:5px; font-size:9px; }
}
@media(max-width:390px) {
  .brand-copy strong { font-size:15px; }
  .topbar { padding-inline:9px; }
  .edit-toggle { padding-inline:7px; }
}

/* Keep the larger type comfortable on phones too. */
@media(max-width:720px) {
  .grade-nav button { min-height:46px; font-size:15px; }
  .welcome-copy { font-size:16px; }
  .current-shelf h2,.shelf-heading h3 { font-size:18px; }
  .result-count,.toolbar-actions,.toolbar-actions select { font-size:14px; }
  .book-title { font-size:20px; }
  .book-meta { font-size:13px; }
}
@media(max-width:390px) {
  .brand-copy strong { font-size:16px; }
  .grade-nav button { font-size:14px; }
  .book-title { font-size:18px; }
}

/* The navigation uses one readable typeface and can be tucked away. */
.sidebar-heading, .grade-nav button, .grade-nav button span { font-family: var(--sans); }
.sidebar-heading { font-size: 15px; letter-spacing: 0; }
.grade-nav button .nav-text { font-size: 17px; color: inherit; }
.grade-nav button .nav-count { font-size: 14px; }
.sidebar-toggle { flex: none; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.5); border-radius: 4px; background: transparent; color: white; font-size: 21px; line-height: 1; }
.sidebar-toggle:hover, .sidebar-toggle:focus-visible { background: rgba(255,255,255,.18); }
.app-shell { transition: grid-template-columns 320ms cubic-bezier(.22,1,.36,1); }
.sidebar { min-width: 0; overflow: hidden; transition: padding 320ms cubic-bezier(.22,1,.36,1), opacity 220ms ease, border-width 320ms ease; }
.sidebar-collapsed .app-shell { grid-template-columns: 0px minmax(0,1fr); }
.sidebar-collapsed .sidebar { padding-left: 0; padding-right: 0; border-width: 0; opacity: 0; }
@media(max-width:720px) {
  .sidebar-toggle { width: 36px; height: 36px; font-size: 19px; }
  .sidebar { max-height: 100px; overflow: hidden; transition: max-height 320ms cubic-bezier(.22,1,.36,1), padding 320ms cubic-bezier(.22,1,.36,1), opacity 220ms ease; }
  .sidebar-collapsed .sidebar { max-height: 0; padding-top: 0; padding-bottom: 0; }
  .grade-nav button .nav-text { display: inline; font-size: 15px; }
  .grade-nav button .nav-icon, .grade-nav button .nav-count { display: none; }
}
@media(prefers-reduced-motion:reduce) { .app-shell, .sidebar { transition: none; } }