:root {
  color-scheme: dark;
  --bg: #111318;
  --panel: #181b21;
  --panel-2: #20242b;
  --line: #30353d;
  --text: #f4f0e8;
  --muted: #9ca3ad;
  --accent: #d8a85f;
  --accent-2: #f0c982;
  --red: #ef7777;
  --radius: 18px;
  --shadow: 0 22px 70px rgba(0,0,0,.38);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); min-height: 100vh; }
button, input, select { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.eyebrow { color: var(--accent-2); text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; font-weight: 800; }
.muted { color: var(--muted); font-size: .88rem; line-height: 1.5; }
.error { color: var(--red); min-height: 1.4em; font-size: .9rem; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(370px,.9fr); }
.auth-art { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 9vw; background: radial-gradient(circle at 20% 20%, #3b3023 0, transparent 38%), linear-gradient(145deg,#191b20,#101216); }
.auth-art::after { content: ""; position: absolute; inset: 9% 8%; border: 1px solid rgba(216,168,95,.17); border-radius: 40% 10% 35% 12%; transform: rotate(-4deg); }
.auth-art h1 { position: relative; z-index: 1; margin: .35em 0 .25em; max-width: 680px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.6rem,7.3vw,8.2rem); line-height: .88; font-weight: 500; letter-spacing: -.055em; }
.auth-art p { position: relative; z-index: 1; max-width: 520px; color: #c1b9ad; line-height: 1.7; font-size: 1.05rem; }
.book-spines { position: absolute; display: flex; align-items: end; gap: 12px; right: 8%; bottom: -30px; opacity: .55; transform: rotate(-4deg); }
.book-spines i { display: block; width: 38px; height: 230px; border-radius: 4px 4px 0 0; background: #8b4f43; border-left: 3px solid rgba(255,255,255,.12); }
.book-spines i:nth-child(2) { height: 175px; width: 56px; background:#395e61; }.book-spines i:nth-child(3){height:270px;background:#b48a4d}.book-spines i:nth-child(4){height:205px;width:46px;background:#544b6d}.book-spines i:nth-child(5){height:245px;background:#3e5650}
.auth-card { align-self: center; width: min(430px, calc(100% - 48px)); margin: auto; padding: 48px; border: 1px solid var(--line); border-radius: 28px; background: rgba(28,31,37,.94); box-shadow: var(--shadow); }
.mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: var(--accent); color:#16130f; font-family:Georgia,serif; font-weight:900; }
.auth-card h2 { margin: .35rem 0 2rem; font-family: Georgia,serif; font-size: 2rem; font-weight: 500; }
label { display: grid; gap: 8px; margin: 0 0 18px; color:#cfd3d8; font-size:.85rem; font-weight:650; }
input, select { width:100%; min-height:46px; padding: 0 14px; border:1px solid var(--line); border-radius:12px; background:#12151a; color:var(--text); outline:none; }
input:focus, select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(216,168,95,.13); }
button { border:0; cursor:pointer; }
.primary { padding:12px 18px; border-radius:12px; background:var(--accent); color:#17130f; font-weight:800; transition:.18s ease; }
.primary:hover { background:var(--accent-2); transform:translateY(-1px); }
.auth-card .primary { width:100%; margin-top:4px; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:240px 1fr; }
.sidebar { position:sticky; top:0; height:100vh; padding:26px 18px; display:flex; flex-direction:column; border-right:1px solid #272b31; background:#14171b; }
.brand { display:flex; gap:12px; align-items:center; margin:0 8px 38px; color:var(--text); text-decoration:none; }
.brand strong { font-family:Georgia,serif; font-size:1.15rem; }
.sidebar nav { display:grid; gap:5px; }
.sidebar nav button, .profile-button { display:flex; align-items:center; gap:13px; width:100%; padding:11px 13px; border-radius:11px; background:transparent; color:#aeb4bd; text-align:left; }
.sidebar nav button span { width:22px; color:#7f8791; font-size:1.3rem; text-align:center; }
.sidebar nav button:hover, .sidebar nav button.active, .profile-button:hover { background:#22262d; color:var(--text); }
.sidebar nav button.active span { color:var(--accent); }
.profile-button { margin-top:auto; border-top:1px solid var(--line); border-radius:0; padding-top:18px; }
.profile-button>span:first-child { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:#4b3d2a; color:var(--accent-2); }
.profile-button>span:last-child { display:grid; gap:2px; }.profile-button small{color:var(--muted)}
.workspace { min-width:0; }
.topbar { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:18px; padding:18px clamp(20px,4vw,58px); background:rgba(17,19,24,.86); backdrop-filter:blur(18px); border-bottom:1px solid rgba(48,53,61,.72); }
.search { display:flex; align-items:center; gap:10px; width:min(720px,100%); }
.search span { color:var(--accent); font-size:1.3rem; }.search input{background:#1a1d23}.search kbd{margin-left:-58px;color:#737b85;font-size:.72rem}
.round { margin-left:auto; width:40px; height:40px; border-radius:50%; background:#242930; display:none; }
main { padding:36px clamp(20px,4vw,58px) 100px; max-width:1680px; margin:auto; }
.page-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:28px; }
.page-head h1 { margin:4px 0 0; font-family:Georgia,serif; font-size:clamp(2rem,4vw,3.5rem); font-weight:500; letter-spacing:-.035em; }
.page-head p { color:var(--muted); margin:8px 0 0; }
.shelf { margin:0 0 44px; }
.shelf-head { display:flex; align-items:center; justify-content:space-between; margin:0 0 16px; }
.shelf-head h2 { margin:0; font-family:Georgia,serif; font-size:1.55rem; font-weight:500; }
.text-button { background:transparent; color:var(--accent-2); padding:5px; }
.book-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:24px 18px; }
.book-grid.compact { grid-template-columns:repeat(auto-fill,minmax(135px,1fr)); }
.book-card { min-width:0; position:relative; }
.cover { position:relative; aspect-ratio:2/3; width:100%; border-radius:12px; overflow:hidden; background:linear-gradient(145deg,#3b3430,#20252c); box-shadow:0 14px 30px rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.05); cursor:pointer; transition:transform .2s ease,box-shadow .2s ease; }
.cover:hover { transform:translateY(-4px); box-shadow:0 20px 35px rgba(0,0,0,.38); }
.cover img { position:relative; z-index:1; width:100%; height:100%; object-fit:cover; display:block; }
.cover-placeholder { position:absolute; inset:0; display:grid; place-items:center; padding:16px; text-align:center; font-family:Georgia,serif; color:#d7c8b4; background:linear-gradient(145deg,#514035,#262c32); }
.card-actions { position:absolute; inset:8px 8px auto; display:flex; justify-content:space-between; z-index:2; }
.icon-button { width:34px;height:34px;border-radius:50%;background:rgba(14,16,20,.82);backdrop-filter:blur(8px);display:grid;place-items:center;font-size:1rem; }
.icon-button.active { color:#17130f;background:var(--accent-2); }
.book-card h3 { margin:12px 0 5px; font-size:.95rem; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.book-card p { margin:0; color:var(--muted); font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.book-card .reason { margin-top:7px; color:var(--accent-2); font-size:.72rem; }
.genre-row { display:flex; flex-wrap:wrap; gap:9px; margin:0 0 40px; }
.chip { padding:9px 13px; border:1px solid var(--line); border-radius:999px; background:var(--panel); color:#c7ccd3; }
.chip:hover { border-color:var(--accent); color:var(--text); }
.filters { display:grid; grid-template-columns:2fr repeat(5,minmax(110px,1fr)); gap:10px; padding:15px; margin-bottom:24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); }
.filters input,.filters select{min-height:42px}.filters button{min-height:42px}
.filter-toggle { display:none; margin:0 0 12px; }
.load-more { display:block; margin:36px auto 0; min-width:180px; }
.empty { padding:56px 24px; border:1px dashed var(--line); border-radius:var(--radius); text-align:center; color:var(--muted); }
.month-list { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px; }
.rec-archive { display:grid; gap:12px; }.rec-summary{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--panel);cursor:pointer}.rec-summary:hover{border-color:#5a5145}.rec-summary strong{font-family:Georgia,serif;font-size:1.2rem}.rec-summary span{color:var(--muted)}
.history-row,.user-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
.panel { padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); }
.profile-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }.profile-grid h2{font-family:Georgia,serif;font-weight:500}.profile-grid .wide{grid-column:1/-1}
.inline-form { display:flex; gap:10px; align-items:end; }.inline-form label{flex:1;margin:0}.inline-form .primary{width:auto}
.small-button { padding:7px 10px; border-radius:8px; background:#292e35; }
.danger { color:#ff9999; }
.selection-bar { position:fixed; z-index:30; left:50%; bottom:24px; transform:translateX(-50%); display:flex; align-items:center; gap:14px; min-width:340px; padding:10px 12px 10px 18px; border:1px solid #554a39; border-radius:16px; background:#24201b; box-shadow:var(--shadow); }
.selection-bar .ghost { background:transparent;color:#bbb3a7 }.selection-bar .primary{padding:9px 16px}
dialog { width:min(980px,calc(100% - 28px)); max-height:90vh; padding:0; border:1px solid var(--line); border-radius:24px; background:#171a20; color:var(--text); box-shadow:var(--shadow); }
dialog::backdrop { background:rgba(5,7,9,.78); backdrop-filter:blur(6px); }
.dialog-close { position:sticky; float:right; top:14px; right:14px; z-index:4; width:40px;height:40px;border-radius:50%;background:#2b3037;font-size:1.4rem; }
.detail { display:grid; grid-template-columns:250px 1fr; gap:36px; padding:34px; }.detail-cover{aspect-ratio:2/3;border-radius:14px;overflow:hidden;background:#292d34}.detail-cover img{width:100%;height:100%;object-fit:cover}.detail h2{font-family:Georgia,serif;font-size:2.3rem;line-height:1.05;margin:0 0 8px;font-weight:500}.detail .author{color:var(--accent-2);font-size:1.05rem}.meta{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0}.meta span{padding:6px 9px;border-radius:7px;background:#252a31;color:#b8bec6;font-size:.78rem}.annotation{color:#c7cbd0;line-height:1.72;white-space:pre-line}.detail-actions{display:flex;gap:10px;margin:24px 0}.cycle{margin-top:28px;border-top:1px solid var(--line);padding-top:20px}.cycle li{padding:7px 0;color:#bdc2c9}
.toast { position:fixed; z-index:50; right:24px; top:24px; max-width:360px; padding:12px 16px; border-radius:11px; background:#e9c27e; color:#17130f; font-weight:700; opacity:0; pointer-events:none; transform:translateY(-10px); transition:.2s; }.toast.show{opacity:1;transform:none}
.skeleton { border-radius:12px; background:linear-gradient(90deg,#1c2026,#292e35,#1c2026); background-size:200% 100%; animation:shimmer 1.3s infinite; aspect-ratio:2/3; }@keyframes shimmer{to{background-position:-200% 0}}
.mobile-nav { display:none; }
@media (max-width:900px){.auth-shell{grid-template-columns:1fr}.auth-art{display:none}.auth-card{padding:34px}.app-shell{display:block}.sidebar{display:none}.topbar{padding:14px 16px}.round{display:block}.search kbd{display:none}.search input{padding-right:14px}main{padding:26px 16px 100px}.mobile-nav{position:fixed;z-index:20;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,1fr);padding:7px 5px calc(7px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgba(20,23,27,.96);backdrop-filter:blur(16px)}.mobile-nav button{display:grid;place-items:center;gap:2px;padding:4px;background:transparent;color:#858d97;font-size:.64rem}.mobile-nav button span{font-size:1.25rem}.mobile-nav button.active{color:var(--accent-2)}.filters{grid-template-columns:1fr 1fr}.filters input:first-child{grid-column:1/-1}.book-grid{grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:20px 12px}.detail{grid-template-columns:1fr;padding:24px}.detail-cover{width:180px}.detail h2{font-size:1.9rem}.selection-bar{bottom:76px;min-width:0;width:calc(100% - 24px)}.profile-grid{grid-template-columns:1fr}.profile-grid .wide{grid-column:auto}}
@media (max-width:520px){.book-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.page-head{align-items:start;flex-direction:column}.filter-toggle{display:block}.filters{display:none;grid-template-columns:1fr}.filters.open{display:grid}.filters input:first-child{grid-column:auto}.inline-form{align-items:stretch;flex-direction:column}.detail-cover{width:150px}.auth-card{width:calc(100% - 24px);padding:28px 22px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}