/* Material 3 inspired tokens; all typography and icons work offline. */
:root {
  color-scheme: light;
  --primary:#0b57d0; --on-primary:#fff; --primary-hover:#0848b1;
  --primary-container:#d3e3fd; --on-primary-container:#0842a0;
  --surface:#f6f8fc; --card:#fff; --container:#edf2fa; --high:#e3eaf4;
  --text:#202530; --muted:#626b78; --outline:#d9dfe8; --focus:#0b57d0;
  --green:#22684b; --green-container:#e5f1e9; --peach:#fbeada; --on-peach:#8a4c24;
  --hero:#e9f0ff; --inverse:#28313e; --on-inverse:#f5f7fc;
  --shadow:0 6px 22px #273f6510; --dialog-shadow:0 24px 80px #172b4d38;
  --ease:cubic-bezier(.2,0,0,1); --short:180ms; --medium:300ms; --nav-width:236px;
  font-family:"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --primary:#a8c7fa; --on-primary:#062e6f; --primary-hover:#c3d8fc;
  --primary-container:#254574; --on-primary-container:#d3e3fd;
  --surface:#15191f; --card:#1f252e; --container:#252e3a; --high:#323d4b;
  --text:#e4e9f1; --muted:#abb5c4; --outline:#3c4654; --focus:#a8c7fa;
  --green:#a5d9b9; --green-container:#253d33; --peach:#443328; --on-peach:#f2c49f;
  --hero:#202f47; --inverse:#dfe6ef; --on-inverse:#25303d;
  --shadow:0 6px 22px #0002; --dialog-shadow:0 24px 80px #0007;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; background:var(--surface); color:var(--text); font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font:inherit; color:inherit; }
button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { border:0; cursor:pointer; background:transparent; }
a { color:inherit; text-decoration:none; }
button,a,input,select,textarea { outline-offset:4px; }
:focus-visible { outline:3px solid var(--focus); }
h1:focus,main:focus { outline:none; }
button:disabled { opacity:.5; cursor:not-allowed; }
h1,h2,h3,p { margin:0; }
h1 { line-height:1.25; font-size:34px; letter-spacing:-.04em; font-weight:600; }
h2 { font-size:23px; line-height:1.45; font-weight:600; letter-spacing:-.025em; }
h3 { font-size:16px; font-weight:600; }
svg.icon { width:22px; height:22px; display:block; flex:0 0 auto; }
[data-icon] { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.hidden,[hidden] { display:none !important; }
.skip-link { position:fixed; top:-80px; left:16px; z-index:100; background:var(--primary); color:var(--on-primary); border-radius:12px; padding:12px 20px; }
.skip-link:focus { top:16px; }
.sidebar { position:fixed; z-index:10; width:var(--nav-width); inset:0 auto 0 0; padding:31px 18px 20px; display:flex; flex-direction:column; background:var(--surface); }
.brand { display:flex; gap:12px; align-items:center; padding:0 12px; font-size:21px; font-weight:650; letter-spacing:-.04em; }
.brand-mark { width:39px; height:39px; border-radius:13px; background:var(--primary); color:var(--on-primary); }
.brand-mark svg { width:25px; height:25px; }
.brand small { display:block; font-size:10px; font-weight:400; color:var(--muted); letter-spacing:.1em; margin-top:2px; }
.publish-button { display:flex; align-items:center; gap:14px; margin:32px 4px 28px; padding:17px 20px; border-radius:18px; background:var(--primary-container); color:var(--on-primary-container); font-weight:600; min-height:58px; transition:box-shadow var(--short),filter var(--short); }
.publish-button:hover { box-shadow:var(--shadow); filter:brightness(.97); }
.nav-list { display:grid; gap:6px; }
.nav-item { display:flex; align-items:center; gap:15px; min-height:50px; border-radius:28px; padding:11px 20px; color:var(--muted); transition:background var(--short),color var(--short); }
.nav-item.active { background:var(--high); color:var(--text); font-weight:650; }
.nav-item.active svg { color:var(--primary); }
.nav-item:hover { background:var(--container); }
.nav-count { margin-left:auto; font-size:11px; color:var(--primary); background:var(--primary-container); border-radius:10px; min-width:20px; text-align:center; }
.sidebar-bottom { margin-top:auto; padding-top:32px; }
.sidebar-note { padding:20px 16px; background:var(--green-container); border-radius:20px; margin:0 3px 24px; color:var(--green); }
.sidebar-note > [data-icon] { margin-bottom:14px; }
.sidebar-note strong { display:block; font-size:12px; }
.sidebar-note p { font-size:11px; line-height:1.8; margin-top:5px; }
.sidebar-note a { display:inline-flex; gap:7px; align-items:center; font-size:11px; margin-top:13px; font-weight:600; }
.sidebar-note a svg { width:15px; height:15px; }
.sidebar-footnote { display:block; margin:14px 0 0 17px; font-size:10px; color:var(--muted); }
.app-content { margin-left:var(--nav-width); }
.topbar { min-height:94px; max-width:1536px; margin:auto; padding:18px 36px; display:flex; gap:20px; align-items:center; justify-content:space-between; }
.search-box { background:var(--container); border:1px solid transparent; border-radius:28px; display:flex; align-items:center; gap:12px; min-width:0; min-height:52px; padding:4px 16px; color:var(--muted); transition:border-color var(--short),background var(--short),box-shadow var(--short); }
#globalSearch { flex:1; max-width:620px; }
.search-box:focus-within { background:var(--card); border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 10%,transparent); }
.search-box input { width:100%; min-width:0; background:transparent; outline:none; border:0; padding:8px 0; color:var(--text); }
.search-box input::-webkit-search-cancel-button { display:none; }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:.85; }
.shortcut { color:var(--muted); flex-shrink:0; border-radius:7px; min-height:40px; padding:0 6px; }
kbd { font:11px/1.5 "Segoe UI",sans-serif; border:1px solid var(--outline); border-radius:5px; padding:3px 5px; white-space:nowrap; }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.campus-label { font-size:12px; display:flex; align-items:center; gap:7px; margin-right:10px; white-space:nowrap; color:var(--muted); }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--green); flex:0 0 auto; }
.icon-button { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:0 0 auto; border-radius:50%; color:var(--muted); transition:background var(--short); }
.icon-button:hover { background:var(--high); }
.avatar-button { display:inline-grid; place-items:center; flex-shrink:0; width:42px; height:42px; border:3px solid var(--card); box-shadow:0 0 0 1px var(--outline); border-radius:50%; background:var(--peach); color:var(--on-peach); font-size:15px; font-weight:600; }
.mobile-brand,.bottom-nav { display:none; }
main { padding:6px 36px 0; max-width:1536px; margin:auto; min-height:calc(100vh - 94px); }
.view { animation:view-enter var(--medium) var(--ease); }
@keyframes view-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.hero-card { background:var(--hero); border-radius:28px; min-height:338px; display:grid; grid-template-columns:1.12fr 1fr; position:relative; overflow:hidden; }
.hero-copy { padding:36px 0 34px 38px; position:relative; z-index:1; }
.eyebrow { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:500; color:var(--primary); letter-spacing:.04em; }
.eyebrow.muted { color:var(--muted); font-size:11px; margin-bottom:5px; }
.hero-copy h1 { font-size:clamp(34px,3.2vw,48px); margin:17px 0 14px; line-height:1.25; letter-spacing:-.045em; }
.accent-text { color:var(--primary); }
.hero-copy p { font-size:13px; color:var(--muted); line-height:1.85; }
.hero-actions { display:flex; gap:10px; align-items:center; margin-top:23px; flex-wrap:wrap; }
.primary-button,.secondary-button,.text-button,.tiny-button { display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:44px; border-radius:24px; padding:10px 20px; font-weight:600; font-size:13px; white-space:nowrap; position:relative; overflow:hidden; transition:background var(--short),box-shadow var(--short),transform var(--short) var(--ease); }
.primary-button { background:var(--primary); color:var(--on-primary); }
.primary-button:hover { background:var(--primary-hover); box-shadow:var(--shadow); }
.secondary-button { border:1px solid var(--outline); color:var(--primary); background:var(--card); }
.secondary-button:hover,.text-button:hover,.tiny-button:hover { background:var(--primary-container); }
.text-button { color:var(--primary); padding:10px 12px; }
.tiny-button { color:var(--primary); font-size:12px; min-height:40px; padding:8px 14px; border:1px solid var(--outline); }
.primary-button:active,.secondary-button:active,.publish-button:active { transform:scale(.97); }
.hero-art { position:relative; min-height:338px; isolation:isolate; }
.orbit { position:absolute; border:1px solid color-mix(in srgb,var(--primary) 12%,transparent); width:360px; height:360px; border-radius:50%; left:14%; top:3%; }
.orbit-two { width:280px; height:280px; top:15%; left:24%; }
.art-spark { position:absolute; left:3%; top:43px; font-size:48px; color:#f4b84c; transform:rotate(-12deg); }
.art-book { position:absolute; width:156px; height:220px; border-radius:3px 9px 9px 3px; box-shadow:-6px 7px 0 #ffffffc9,-7px 8px 0 #c0c9ce,0 20px 30px #24416c1f; overflow:hidden; }
.art-book::after { content:""; position:absolute; width:7px; inset:0 auto 0 0; background:#0001; border-right:1px solid #fff3; }
.art-book-back { background:#c2dace; color:#245140; left:13%; top:61px; transform:rotate(-15deg); padding:24px 20px; }
.art-book-back > span { display:block; font:800 27px/1.12 Arial,sans-serif; letter-spacing:-.06em; }
.art-book i { font-size:7px; letter-spacing:.08em; font-style:normal; position:absolute; bottom:16px; }
.art-book-front { background:#fbecc9; color:#5e4a29; left:43%; top:48px; transform:rotate(12deg); padding:20px; }
.art-book-front small { font-size:7px; letter-spacing:.15em; }
.art-book-front strong { display:block; font-size:28px; line-height:1.3; font-weight:650; margin-top:10px; letter-spacing:-.06em; }
.book-window { position:absolute; width:90px; height:65px; right:15px; bottom:32px; border-radius:60px 60px 0 0; overflow:hidden; background:#9eb9e3; }
.book-window span { position:absolute; border-radius:50%; width:90px; height:80px; background:#35765c; bottom:-42px; right:22px; }
.book-window span:nth-child(2) { background:#779877; bottom:-50px; right:-30px; }
.book-window span:nth-child(3) { width:18px; height:18px; background:#ffefd0; top:13px; right:17px; }
.art-label { position:absolute; background:var(--card); border:1px solid var(--outline); color:var(--green); box-shadow:var(--shadow); border-radius:24px; bottom:30px; left:30%; padding:9px 17px; font-size:11px; display:flex; gap:6px; align-items:center; transform:rotate(-5deg); white-space:nowrap; }
.art-label svg { width:17px; height:17px; }
.community-strip { display:flex; align-items:center; flex-wrap:wrap; gap:16px 28px; padding:22px 4px; border-bottom:1px solid var(--outline); font-size:12px; color:var(--muted); }
.community-strip > span { display:flex; align-items:center; gap:7px; }
.community-strip strong { color:var(--text); font-size:16px; font-weight:650; margin-left:3px; }
.stat-icon { width:32px; height:32px; border-radius:10px; }
.stat-icon svg { width:17px; height:17px; }
.blue-tint { color:var(--primary); background:var(--primary-container); }
.green-tint { color:var(--green); background:var(--green-container); }
.peach-tint { color:var(--on-peach); background:var(--peach); }
.strip-note { margin-left:auto; font-size:11px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:30px 0 18px; }
.sort-control { display:flex; align-items:center; gap:5px; color:var(--muted); }
.sort-control svg { width:18px; height:18px; }
.sort-control select { padding:9px 4px; border:0; background:transparent; font-size:12px; max-width:146px; cursor:pointer; }
.browse-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:22px; flex-wrap:wrap; }
.filter-chips { display:flex; flex-wrap:wrap; gap:8px; }
.filter-chip { border:1px solid var(--outline); border-radius:10px; background:var(--card); padding:8px 15px; min-height:40px; color:var(--muted); font-size:12px; transition:background var(--short),color var(--short); }
.filter-chip:hover { background:var(--container); }
.filter-chip.active { background:var(--primary-container); border-color:transparent; color:var(--on-primary-container); font-weight:650; }
.result-count { font-size:12px; color:var(--muted); white-space:nowrap; }
.book-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.book-card { min-width:0; background:var(--card); border-radius:18px; overflow:hidden; border:1px solid var(--outline); transition:box-shadow var(--short),border-color var(--short); }
.book-card:hover { box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--primary) 40%,var(--outline)); }
.book-card-link { width:100%; text-align:left; display:block; padding:0; height:100%; border-radius:18px; }
.book-card-link:focus-visible { outline-offset:-3px; }
.book-stage { height:178px; display:grid; place-items:center; background:var(--stage); position:relative; overflow:hidden; }
.tone-blue { --stage:#e9eff9; --cover:#25518d; --cover-ink:#f2f6fe; --cover-accent:#a9c7ee; }
.tone-orange { --stage:#faf0e5; --cover:#f0d4a3; --cover-ink:#59472b; --cover-accent:#9c673e; }
.tone-green { --stage:#eaf1ec; --cover:#366457; --cover-ink:#eff9ef; --cover-accent:#b2d0b8; }
.tone-purple { --stage:#efedf8; --cover:#696081; --cover-ink:#faf6ff; --cover-accent:#cfc3e8; }
[data-theme="dark"] .tone-blue { --stage:#283348; }
[data-theme="dark"] .tone-orange { --stage:#3a332a; }
[data-theme="dark"] .tone-green { --stage:#293c34; }
[data-theme="dark"] .tone-purple { --stage:#363146; }
.mini-book { width:98px; height:139px; padding:14px 11px 10px 15px; background:var(--cover); color:var(--cover-ink); position:relative; border-radius:2px 5px 5px 2px; box-shadow:3px 3px 0 #e6e2d8,5px 4px 0 #c8c7be,6px 10px 15px #1b2e4324; display:flex; flex-direction:column; transform:rotate(-7deg); transition:transform var(--medium) var(--ease); }
.book-card:nth-child(even) .mini-book { transform:rotate(7deg); }
.book-card:hover .mini-book { transform:rotate(0) translateY(-3px); }
.mini-book::before { content:""; width:5px; border-right:1px solid #ffffff20; background:#00000013; position:absolute; inset:0 auto 0 0; }
.mini-book small { font-size:5px; letter-spacing:.12em; opacity:.8; }
.mini-book strong { font-weight:600; font-size:12px; line-height:1.45; margin-top:9px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.mini-book .cover-line { height:3px; background:var(--cover-accent); width:22px; margin-top:11px; border-radius:2px; }
.mini-book em { margin-top:auto; font-size:6px; font-style:normal; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.condition-label { position:absolute; right:10px; top:10px; background:var(--card); color:var(--muted); border-radius:6px; font-size:10px; padding:3px 7px; }
.book-body { padding:15px 15px 13px; }
.book-title { font-size:14px; line-height:1.6; height:44px; font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.book-meta { color:var(--muted); font-size:11px; margin-top:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.book-footer { display:flex; gap:6px; align-items:center; justify-content:space-between; margin-top:16px; }
.price { display:flex; align-items:baseline; gap:5px; flex-wrap:wrap; }
.price strong { color:var(--primary); font-size:20px; font-weight:650; line-height:1.3; }
.price small { font-size:12px; }
.price del { color:var(--muted); font-size:10px; }
.category-label { font-size:10px; background:var(--container); color:var(--muted); padding:3px 6px; border-radius:5px; white-space:nowrap; }
.book-location { display:flex; gap:4px; align-items:center; margin-top:13px; padding-top:10px; border-top:1px solid var(--outline); color:var(--muted); font-size:10px; }
.book-location svg { width:13px; height:13px; }
.book-location span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.book-location .seller { margin-left:auto; }
.request-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.request-card { background:var(--card); border:1px solid var(--outline); border-radius:18px; padding:20px; }
.request-card h3 { font-size:14px; margin-top:13px; }
.request-card p { font-size:12px; color:var(--muted); margin:8px 0 17px; }
.request-top,.request-bottom { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.request-bottom { color:var(--muted); font-size:11px; }
.request-bottom strong { color:var(--primary); font-size:12px; }
.tag { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; font-size:11px; border-radius:6px; color:var(--green); background:var(--green-container); }
.tag.neutral { background:var(--container); color:var(--muted); }
.page-intro { margin:26px 0 30px; }
.page-intro h1 { margin:12px 0; }
.page-intro p { color:var(--muted); }
.library-banner { border-radius:24px; background:var(--green-container); color:var(--green); padding:30px; display:flex; gap:22px; align-items:center; overflow:hidden; position:relative; }
.library-symbol { width:64px; height:64px; border-radius:20px; background:var(--card); flex-shrink:0; }
.library-symbol svg { width:32px; height:32px; }
.library-banner h2 { font-size:24px; }
.library-banner p { font-size:12px; margin-top:8px; max-width:500px; }
.library-banner-decoration { font:100px/.8 Georgia,serif; opacity:.12; margin-left:auto; letter-spacing:-.09em; }
.library-search-form { display:flex; gap:12px; margin:28px 0 20px; }
.library-search-form .search-box { flex:1; background:var(--card); border-color:var(--outline); }
.library-search-form .primary-button { min-width:140px; }
.library-status { color:var(--muted); font-size:12px; margin:4px 0 20px; min-height:24px; }
.library-status.is-error { border-radius:12px; padding:12px 16px; background:var(--peach); color:var(--on-peach); }
.library-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.library-card .book-stage { height:208px; }
.library-card .book-card-link { height:auto; }
.library-card .mini-book { width:112px; height:160px; }
.library-card .mini-book strong { font-size:15px; line-height:1.25; -webkit-line-clamp:4; }
.library-card .book-title { font-size:15px; height:48px; }
.library-card .book-body { padding:18px; }
.library-card .book-meta { margin-bottom:15px; }
.library-card .book-footer { margin-top:14px; }
.source-link { font-size:12px; color:var(--primary); min-height:44px; display:inline-flex; align-items:center; gap:5px; }
.source-link svg { width:15px; height:15px; }
.source-note { display:flex; gap:8px; font-size:11px; color:var(--muted); align-items:flex-start; margin-top:24px; line-height:1.8; }
.source-note svg { width:17px; height:17px; margin-top:2px; }
.skeleton { background:var(--card); border:1px solid var(--outline); border-radius:18px; padding:16px; }
.skeleton span { display:block; height:180px; border-radius:10px; background:var(--container); animation:pulse 1.2s infinite alternate; }
.skeleton i { display:block; margin-top:15px; background:var(--container); height:12px; width:75%; border-radius:6px; }
.skeleton i:last-child { width:45%; }
@keyframes pulse { to { opacity:.45; } }
.form-layout { display:grid; grid-template-columns:minmax(0,2.2fr) minmax(220px,1fr); gap:28px; align-items:start; }
.form-card { background:var(--card); border:1px solid var(--outline); border-radius:24px; padding:30px; }
.form-card h2 { font-size:18px; }
.form-heading { display:flex; align-items:center; gap:14px; margin-bottom:25px; }
.form-heading p,.form-hint { font-size:12px; color:var(--muted); margin-top:5px; }
.form-heading.second { margin-top:30px; padding-top:25px; border-top:1px solid var(--outline); }
.step-number { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:var(--primary); background:var(--primary-container); font-weight:600; flex-shrink:0; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 18px; }
.form-grid label { font-size:12px; display:flex; flex-direction:column; gap:8px; }
.span-two { grid-column:1/-1; }
.form-grid input,.form-grid select,.form-grid textarea { width:100%; min-width:0; border-radius:10px; border:1px solid var(--outline); background:var(--card); padding:12px 14px; min-height:48px; font-size:14px; transition:border-color var(--short); }
.form-grid input:hover,.form-grid select:hover,.form-grid textarea:hover { border-color:var(--muted); }
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus { outline:2px solid var(--primary); outline-offset:-1px; }
.form-grid textarea { resize:vertical; }
.form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:28px; flex-wrap:wrap; }
.form-aside { padding:30px; border-radius:24px; background:var(--green-container); color:var(--green); }
.large-icon svg { width:35px; height:35px; margin-bottom:25px; }
.form-aside h2 { font-size:29px; line-height:1.5; }
.form-aside p { margin-top:16px; font-size:13px; line-height:1.9; }
.tip-divider { margin:26px 0; border-top:1px solid color-mix(in srgb,var(--green) 20%,transparent); }
.form-aside strong { font-size:13px; }
.request-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:28px; align-items:start; }
.request-layout .form-grid { margin-top:25px; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.panel-heading h2 { font-size:18px; }
.request-list.stacked { grid-template-columns:1fr; }
.order-filters { margin-bottom:24px; }
.order-list { display:grid; gap:18px; }
.order-card { background:var(--card); border-radius:24px; border:1px solid var(--outline); padding:24px; }
.order-top { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:11px; color:var(--muted); padding-bottom:18px; border-bottom:1px solid var(--outline); }
.order-content { display:flex; gap:20px; align-items:center; padding:22px 0; }
.order-content .book-stage { width:96px; height:120px; flex-shrink:0; border-radius:10px; }
.order-content .mini-book { width:58px; height:83px; padding:10px 8px; }
.order-content .mini-book strong { font-size:8px; margin-top:2px; }
.order-content .mini-book small,.order-content .mini-book em,.order-content .cover-line { display:none; }
.order-main { min-width:0; flex:1; }
.order-main p { font-size:12px; color:var(--muted); margin-top:8px; }
.order-price { font-size:23px; font-weight:600; color:var(--primary); white-space:nowrap; }
.order-bottom { display:flex; gap:16px; align-items:center; justify-content:space-between; border-top:1px solid var(--outline); padding-top:18px; }
.order-steps { display:flex; gap:15px; flex-wrap:wrap; font-size:12px; color:var(--muted); }
.order-steps span { display:flex; gap:6px; align-items:center; }
.order-steps svg { width:15px; height:15px; }
.order-steps .complete { color:var(--green); }
.empty-state { grid-column:1/-1; text-align:center; background:var(--card); border:1px dashed var(--outline); border-radius:24px; padding:54px 20px; }
.empty-symbol { color:var(--primary); display:inline-grid; place-items:center; background:var(--primary-container); width:64px; height:64px; border-radius:22px; margin-bottom:20px; }
.empty-symbol svg { width:30px; height:30px; }
.empty-state h3 { margin-bottom:8px; font-size:18px; }
.empty-state p { color:var(--muted); font-size:13px; }
.empty-state .text-button { margin-top:18px; }
.admin-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:28px; }
.admin-stats > div { background:var(--container); border-radius:18px; padding:22px; }
.admin-stats span { font-size:12px; color:var(--muted); }
.admin-stats strong { display:block; font-size:32px; color:var(--primary); font-weight:500; margin-top:5px; }
.admin-panel { background:var(--card); border:1px solid var(--outline); border-radius:24px; padding:26px; }
.admin-row { display:grid; grid-template-columns:minmax(0,2.4fr) 90px 80px 80px 80px; gap:16px; align-items:center; padding:17px 0; border-top:1px solid var(--outline); font-size:12px; }
.admin-row strong { font-size:13px; overflow-wrap:anywhere; }
.admin-row > span { color:var(--muted); }
.page-footer { display:flex; justify-content:space-between; gap:16px; padding:36px 0 25px; margin-top:24px; font-size:11px; color:var(--muted); }
.page-footer span:first-child { font-weight:600; }
dialog { color:var(--text); background:var(--card); border:1px solid var(--outline); border-radius:28px; padding:0; box-shadow:var(--dialog-shadow); max-height:min(88dvh,850px); max-width:calc(100% - 32px); overflow-y:auto; overscroll-behavior:contain; }
dialog::backdrop { background:#101d3566; backdrop-filter:blur(4px); }
dialog[open] { animation:dialog-enter 240ms var(--ease); }
@keyframes dialog-enter { from { opacity:0; transform:translateY(16px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
body:has(dialog[open]) { overflow:hidden; }
.book-dialog { width:680px; }
.dialog-close { position:absolute; z-index:2; right:15px; top:15px; background:var(--card); border:1px solid var(--outline); }
.detail-hero { display:flex; align-items:center; gap:30px; padding:36px 64px 30px 32px; background:var(--stage); }
.detail-hero .mini-book { flex-shrink:0; transform:rotate(-5deg); }
.detail-hero h2 { font-size:23px; color:var(--text); overflow-wrap:anywhere; }
.detail-hero p { font-size:12px; color:var(--muted); margin-top:12px; }
.detail-content { padding:28px 32px 32px; }
.detail-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:0 0 24px; }
.detail-facts dt { color:var(--muted); font-size:11px; margin-bottom:5px; }
.detail-facts dd { margin:0; font-size:14px; font-weight:600; }
.detail-description { color:var(--muted); font-size:13px; line-height:1.9; overflow-wrap:anywhere; }
.detail-actions { display:flex; gap:20px; justify-content:space-between; align-items:center; border-top:1px solid var(--outline); padding-top:24px; margin-top:24px; }
.detail-actions .price strong { font-size:30px; }
.detail-note { color:var(--muted); font-size:11px; margin-top:12px; text-align:right; }
.small-dialog { width:420px; padding:26px; }
.dialog-heading { display:flex; justify-content:space-between; gap:15px; align-items:center; margin-bottom:20px; }
.dialog-heading h2 { font-size:21px; }
.small-dialog > p { color:var(--muted); font-size:13px; line-height:1.8; }
.account-summary { display:flex; gap:15px; align-items:center; margin-bottom:24px; padding:17px; border-radius:16px; background:var(--container); }
.account-summary small { display:block; font-size:11px; color:var(--muted); margin-top:3px; }
.menu-row { width:100%; display:flex; align-items:center; gap:12px; border-radius:12px; padding:13px 10px; text-align:left; min-height:50px; }
.menu-row:hover { background:var(--container); }
.menu-row [data-icon]:last-child:not(:first-child),.menu-row kbd { margin-left:auto; }
.small-dialog .form-hint { margin-top:20px; }
.command-palette { width:540px; padding:22px; }
.command-input { display:flex; align-items:center; gap:12px; background:var(--container); border-radius:12px; padding:13px 16px; }
.command-input input { width:100%; min-width:0; background:transparent; border:0; outline:0; }
.command-input:focus-within { outline:2px solid var(--primary); }
#commandList { margin-top:14px; max-height:320px; overflow:auto; }
.command-option { display:flex; align-items:center; gap:14px; min-height:52px; border-radius:12px; padding:10px 14px; cursor:pointer; }
.command-option[aria-selected="true"] { background:var(--primary-container); color:var(--on-primary-container); }
.command-option small { margin-left:auto; font-size:10px; opacity:.7; }
.command-hint { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:11px; margin-top:18px; }
.toast { position:fixed; z-index:50; bottom:24px; left:calc(50% + var(--nav-width)/2); transform:translate(-50%,20px); display:flex; align-items:center; gap:18px; max-width:calc(100% - 40px); border-radius:14px; padding:8px 10px 8px 20px; background:var(--inverse); color:var(--on-inverse); box-shadow:var(--shadow); opacity:0; visibility:hidden; transition:transform var(--medium) var(--ease),opacity var(--short),visibility var(--short); font-size:13px; }
.toast.show { opacity:1; visibility:visible; transform:translate(-50%,0); }
.toast .icon-button { color:inherit; width:36px; height:36px; }
.toast > button:not(.icon-button) { color:inherit; font-size:12px; text-decoration:underline; text-underline-offset:4px; white-space:nowrap; min-height:44px; padding:5px; }
.ripple { position:absolute; border-radius:50%; pointer-events:none; background:currentColor; opacity:.13; transform:scale(0); animation:ripple 550ms var(--ease); }
@keyframes ripple { to { transform:scale(3); opacity:0; } }
@media (min-width:1600px) { .hero-card { min-height:360px; } .hero-copy { padding:40px 46px; } .hero-art { max-width:520px; } .book-stage { height:204px; } }
@media (max-width:1240px) {
  :root { --nav-width:216px; }
  .sidebar { padding-inline:12px; } .topbar { padding-inline:26px; } main { padding-inline:26px; }
  .book-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .strip-note { display:none !important; }
  .hero-copy { padding-left:28px; } .hero-art { transform:scale(.9); transform-origin:center; }
  .hero-actions { gap:0; } .campus-label { display:none; } .community-strip { gap:16px 20px; }
  .library-banner-decoration { display:none; }
  .admin-row { grid-template-columns:minmax(0,2fr) 65px 70px 65px 70px; gap:10px; }
}
@media (max-width:1023px) and (min-width:700px) {
  :root { --nav-width:88px; }
  .sidebar { padding:24px 10px; align-items:center; } .brand { padding:0; } .brand > span:last-child { display:none; }
  .publish-button { padding:16px; margin:27px 0 20px; border-radius:18px; min-height:56px; } .publish-button > span:last-child { display:none; }
  .nav-list { gap:12px; width:100%; } .nav-item { flex-direction:column; gap:5px; padding:9px 3px; font-size:10px; border-radius:16px; min-height:65px; }
  .nav-count { display:none !important; } .sidebar-bottom { width:100%; } .sidebar-note,.sidebar-footnote { display:none; }
  .hero-card { grid-template-columns:1.15fr 1fr; min-height:320px; } .hero-copy h1 { font-size:38px; }
  .hero-art { min-height:320px; transform:scale(.82); transform-origin:center; } .art-book-front { left:40%; } .art-label { left:18%; }
  .book-grid { gap:16px; } .book-body { padding:13px; } .book-stage { height:165px; }
  .form-layout { grid-template-columns:1fr; } .form-aside { display:none; } .request-layout { gap:20px; } .form-card { padding:24px; }
  .library-grid { gap:16px; }
}
@media (max-width:820px) {
  .hero-art { transform:scale(.7); } .hero-card { grid-template-columns:1.3fr .85fr; } .hero-copy { padding-right:0; } .hero-copy h1 { font-size:36px; }
  .hero-actions .text-button { font-size:12px; padding-inline:9px; }
  .book-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .book-stage { height:185px; }
  .request-list,.request-layout { grid-template-columns:1fr; } .library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:699px) {
  :root { --nav-width:0px; }
  html { scroll-padding-top:20px; } .sidebar { display:none; } .app-content { margin-left:0; }
  .topbar { flex-wrap:wrap; gap:18px 10px; padding:18px 20px 20px; min-height:126px; }
  .mobile-brand { display:flex; gap:9px; align-items:center; font-size:18px; letter-spacing:-.035em; }
  .mobile-brand .brand-mark { width:32px; height:32px; border-radius:10px; } .mobile-brand svg { width:22px; height:22px; }
  #globalSearch { order:3; flex-basis:100%; max-width:none; min-height:48px; }
  .search-box { font-size:13px; padding-inline:14px; gap:10px; } .search-box input { font-size:16px; } .shortcut { display:none; } .topbar-actions { gap:9px; }
  .avatar-button { width:36px; height:36px; font-size:13px; } main { padding:0 20px 80px; }
  .hero-card { min-height:260px; border-radius:22px; grid-template-columns:1fr; }
  .hero-copy { padding:27px 24px; } .hero-copy .eyebrow { font-size:10px; } .hero-copy h1 { font-size:34px; margin:16px 0 13px; }
  .hero-copy p { font-size:11px; max-width:175px; line-height:1.9; } .desktop-break { display:none; }
  .hero-actions { margin-top:20px; gap:4px; } .hero-actions .primary-button { font-size:12px; padding:10px 15px; min-height:42px; }
  .hero-actions .text-button { font-size:11px; padding:9px 8px; } .hero-actions svg { width:18px; height:18px; }
  .hero-art { position:absolute; right:6px; top:-8px; width:300px; height:260px; min-height:0; transform:scale(.38); transform-origin:center right; pointer-events:none; }
  .art-spark { left:-11%; top:30px; } .art-label,.orbit { display:none; } .art-book-back { left:1%; } .art-book-front { left:36%; }
  .community-strip { padding:16px 0; gap:10px 0; justify-content:space-between; font-size:10px; }
  .community-strip > span { gap:4px; } .community-strip strong { font-size:13px; margin-left:0; } .community-strip .stat-icon { display:none; }
  .section-heading { margin:25px 0 16px; gap:8px; } .section-heading h2 { font-size:21px; } .section-heading .eyebrow { font-size:10px; }
  .sort-control { gap:1px; } .sort-control select { max-width:120px; font-size:11px; } .sort-control svg { width:16px; height:16px; }
  .browse-toolbar { gap:12px; margin-bottom:18px; } .filter-chips { gap:7px; }
  .filter-chip { font-size:11px; padding:9px 11px; min-height:40px; border-radius:9px; } .result-count { font-size:11px; }
  .book-grid,.library-grid { gap:14px 12px; } .book-card { border-radius:15px; } .book-stage { height:153px; }
  .mini-book { width:82px; height:116px; padding:11px 9px 9px 12px; } .mini-book strong { font-size:10px; margin-top:7px; } .mini-book em { font-size:5px; }
  .book-body { padding:12px 11px 10px; } .book-title { font-size:13px; height:42px; } .book-meta { font-size:10px; margin-top:5px; }
  .book-footer { margin-top:13px; gap:3px; flex-wrap:wrap; } .price strong { font-size:20px; } .price del { font-size:9px; }
  .category-label { font-size:9px; padding-inline:5px; } .book-location { font-size:9px; margin-top:10px; padding-top:8px; }
  .book-location .seller { display:none; } .condition-label { font-size:9px; right:7px; top:7px; padding:2px 5px; } .request-card { padding:18px; }
  .page-intro { margin:16px 0 25px; } .page-intro h1 { font-size:28px; margin:10px 0; } .page-intro p { font-size:12px; } .page-intro .eyebrow { font-size:11px; }
  .library-banner { padding:22px; gap:15px; border-radius:20px; align-items:flex-start; } .library-symbol { width:43px; height:43px; border-radius:13px; }
  .library-symbol svg { width:25px; height:25px; } .library-banner h2 { font-size:18px; } .library-banner p { font-size:11px; }
  .library-search-form { margin-top:20px; gap:8px; } .library-search-form .primary-button { min-width:0; padding:10px 15px; font-size:12px; } .library-search-form .primary-button svg { display:none; }
  .library-card .book-stage { height:180px; } .library-card .mini-book { width:94px; height:137px; padding:14px 12px; } .library-card .mini-book strong { font-size:13px; }
  .library-card .book-body { padding:13px; } .library-card .book-title { font-size:13px; height:42px; }
  .library-card .book-footer { display:grid; gap:0; } .library-card .tiny-button { font-size:11px; min-height:40px; }
  .library-card .source-link { font-size:11px; justify-content:center; } .library-status { font-size:11px; } .source-note { font-size:10px; }
  .form-layout,.request-layout { grid-template-columns:1fr; gap:24px; } .form-aside { display:none; } .form-card { padding:22px 18px; border-radius:20px; }
  .form-card h2 { font-size:16px; } .form-grid { gap:18px 12px; } .form-grid input,.form-grid select,.form-grid textarea { font-size:16px; padding:11px 12px; }
  .form-hint,.form-heading p { font-size:11px; } .form-actions { gap:7px; } .order-card { padding:18px; border-radius:20px; }
  .order-content { flex-wrap:wrap; gap:14px; } .order-content .book-stage { width:72px; height:96px; } .order-main h3 { font-size:14px; } .order-main p { font-size:11px; }
  .order-price { font-size:21px; margin-left:auto; } .order-bottom { flex-wrap:wrap; } .order-bottom .primary-button { margin-left:auto; } .order-steps { gap:10px; font-size:11px; }
  .admin-stats { gap:10px; } .admin-stats > div { padding:16px 12px; border-radius:14px; } .admin-stats strong { font-size:27px; } .admin-stats span { font-size:11px; }
  .admin-panel { padding:18px; border-radius:20px; } .admin-row { grid-template-columns:minmax(0,1fr) auto; gap:7px 12px; }
  .admin-row strong,.admin-row > span { grid-column:1; } .admin-row .admin-category { display:none; } .admin-row button { grid-column:2; grid-row:span 3; }
  .bottom-nav { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); position:fixed; inset:auto 0 0; z-index:20; padding:7px 10px calc(7px + env(safe-area-inset-bottom)); border-top:1px solid var(--outline); background:var(--card); box-shadow:0 -4px 20px #172b4d05; }
  .bottom-nav a { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; color:var(--muted); min-height:51px; }
  .bottom-nav a > [data-icon] { width:54px; height:30px; border-radius:20px; transition:background var(--short); }
  .bottom-nav a svg { width:21px; height:21px; } .bottom-nav a.active { color:var(--on-primary-container); font-weight:650; } .bottom-nav a.active > [data-icon] { background:var(--primary-container); }
  .page-footer { font-size:10px; padding-top:20px; flex-wrap:wrap; } .toast { bottom:calc(83px + env(safe-area-inset-bottom)); width:calc(100% - 32px); font-size:12px; gap:10px; padding-left:16px; } .toast #toastMessage { flex:1; }
  .book-dialog { margin:auto 0 0; max-width:100%; width:100%; max-height:90dvh; border-radius:26px 26px 0 0; padding-bottom:env(safe-area-inset-bottom); }
  .detail-hero { gap:20px; padding:32px 52px 26px 24px; } .detail-hero h2 { font-size:19px; } .detail-content { padding:24px; } .detail-facts { gap:18px; }
  .detail-actions .price strong { font-size:26px; } .small-dialog,.command-palette { padding:22px; border-radius:24px; }
}
@media (max-width:375px) {
  .topbar { padding-inline:16px; } main { padding-inline:16px; }
  .hero-copy { padding:24px 20px; } .hero-copy h1 { font-size:31px; } .hero-art { display:none; } .hero-copy p { max-width:100%; }
  .hero-actions .text-button { padding-inline:5px; font-size:10px; } .hero-actions .primary-button { font-size:11px; padding-inline:12px; }
  .community-strip { font-size:9px; } .community-strip strong { font-size:12px; } .section-heading h2 { font-size:19px; } .book-body { padding-inline:10px; }
  .filter-chip { padding-inline:10px; } .form-grid { grid-template-columns:1fr; } .detail-hero .mini-book { width:65px; height:99px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }