:root {
  --bg: #0d0910;
  --bg-soft: #151019;
  --panel: rgba(27, 17, 28, .88);
  --panel-solid: #1a111c;
  --line: rgba(240, 193, 117, .18);
  --gold: #e8bd78;
  --gold-soft: #b68a55;
  --cream: #f3e6d4;
  --muted: #b8a8b5;
  --rose: #e24d8d;
  --raspberry: #9d235a;
  --wine: #591832;
  --plum: #3a1744;
  --emerald: #25856e;
  --teal: #2c7384;
  --danger: #e46a76;
  --shadow: 0 24px 80px rgba(0,0,0,.45);
  --radius: 22px;
  --sidebar: 230px;
  --detail: 410px;
}
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body { margin: 0; min-height: 100vh; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--cream); background:
  radial-gradient(circle at 82% 3%, rgba(226,77,141,.16), transparent 24rem),
  radial-gradient(circle at 18% 90%, rgba(37,133,110,.12), transparent 26rem),
  linear-gradient(135deg, #09070b 0%, #150c16 52%, #0b0a10 100%);
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) minmax(0,1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 22px 14px; border-right: 1px solid var(--line); background: linear-gradient(180deg, rgba(29,16,31,.97), rgba(10,8,12,.96)); display: flex; flex-direction: column; z-index: 20; }
.brand-mark { width: 62px; height: 62px; margin: 0 auto 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(232,189,120,.55); box-shadow: inset 0 0 0 5px rgba(157,35,90,.15), 0 0 28px rgba(226,77,141,.12); font-family: Georgia, serif; color: var(--gold); font-size: 28px; }
.brand-mark span { width: 43px; height: 43px; display:grid; place-items:center; border-radius:50%; border:1px dashed rgba(232,189,120,.35); }
.side-nav { display: grid; gap: 7px; }
.nav-item { width: 100%; border: 0; background: transparent; padding: 13px 12px; border-radius: 13px; display: flex; gap: 12px; align-items: center; text-align: left; cursor: pointer; color: #d5c7d2; }
.nav-item:hover { background: rgba(255,255,255,.04); }
.nav-item span { width: 26px; text-align:center; color: var(--gold); font-size: 19px; }
.nav-item b { font-weight: 600; }
.nav-item.is-active { background: linear-gradient(90deg, rgba(157,35,90,.75), rgba(226,77,141,.18)); color: white; box-shadow: inset 3px 0 var(--rose); }
.sidebar-poem { margin-top: auto; min-height: 245px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(232,189,120,.12); position: relative; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; padding: 24px 12px; text-align:center; background:
  radial-gradient(circle at 50% 35%, rgba(37,133,110,.35), transparent 23%),
  radial-gradient(circle at 50% 50%, rgba(226,77,141,.16), transparent 36%),
  linear-gradient(180deg, #131017, #0a080c);
}
.lamp-glow { position:absolute; top:34px; width:80px; height:110px; border-radius: 50% 50% 12px 12px; background: radial-gradient(circle at 50% 20%, #ffa3cd 0 7%, #8c2a64 31%, transparent 33%), linear-gradient(90deg, transparent 47%, #a27953 47% 52%, transparent 52%); filter: drop-shadow(0 0 22px #d23d8e88); }
.sidebar-poem p { position:relative; font-family: Georgia, serif; color:#d6b996; line-height:1.55; font-size:13px; }
.sidebar-poem em { color:#ef9bbf; }
.main { min-width: 0; }
.topbar { min-height: 116px; padding: 18px 30px 15px; display:flex; align-items:center; gap:20px; border-bottom:1px solid var(--line); background: rgba(10,8,12,.68); backdrop-filter: blur(16px); position:sticky; top:0; z-index:15; }
.title-block { min-width:0; }
.eyebrow { margin:0 0 4px; font-size:11px; letter-spacing:.19em; color:#d877a7; font-weight:700; }
.title-block h1 { margin:0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(25px, 3vw, 40px); font-weight:500; color:var(--gold); line-height:1.05; }
.title-block > p:last-child { margin:5px 0 0; color:#c8b4bd; font-family:Georgia,serif; }
.top-actions { margin-left:auto; display:flex; gap:10px; align-items:center; }
.search { display:flex; align-items:center; gap:8px; padding:0 14px; min-width:300px; height:45px; border:1px solid var(--line); border-radius:999px; background:#0d0b0e; color:#876f7e; }
.search input { width:100%; border:0; outline:0; background:transparent; color:var(--cream); }
.icon-button { width:43px; height:43px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.025); cursor:pointer; display:grid; place-items:center; font-size:18px; }
.icon-button:hover { border-color:rgba(232,189,120,.5); color:var(--gold); background:rgba(232,189,120,.08); }
.mobile-menu { display:none; }
.content { padding: 24px 30px 100px; max-width: 1500px; margin:0 auto; }
.hero { min-height: 190px; border-radius: 24px; border: 1px solid rgba(232,189,120,.3); box-shadow: var(--shadow); margin-bottom: 20px; overflow:hidden; position:relative; isolation:isolate; display:flex; align-items:flex-end; padding:28px 32px; }
.hero::before { content:""; position:absolute; inset:0; z-index:-2; background: var(--hero-bg, linear-gradient(130deg,#35112e,#201329 55%,#12322d)); }
.hero::after { content:""; position:absolute; inset:0; z-index:-1; background:
  radial-gradient(circle at 76% 30%, rgba(255,172,209,.33), transparent 16%),
  radial-gradient(circle at 63% 75%, rgba(44,115,132,.28), transparent 20%),
  linear-gradient(90deg, rgba(8,7,9,.25), rgba(8,7,9,.1)); }
.hero-copy { max-width:760px; }
.hero-badge { display:inline-flex; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); color:#f3c0d8; font-size:12px; font-weight:700; letter-spacing:.07em; }
.hero h2 { margin:12px 0 6px; font-family:Georgia,serif; font-size:clamp(30px,5vw,55px); font-weight:500; color:#ffd08f; }
.hero p { margin:0; max-width:670px; color:#ead9df; font-size:16px; line-height:1.55; }
.hero .hero-note { margin-top:10px; color:#ff8fc2; font-family:Georgia,serif; font-style:italic; }
.hero-orb { position:absolute; right:5%; top:50%; width:160px; aspect-ratio:1; transform:translateY(-50%); border-radius:50%; background: radial-gradient(circle at 35% 30%, #f8b0d2 0 6%, #b72b72 22%, #51205d 44%, #173a39 66%, #0b0a0d 70%); box-shadow: 0 0 0 1px rgba(255,209,142,.33), 0 0 70px rgba(226,77,141,.23); opacity:.85; }
.hero-orb::before,.hero-orb::after { content:""; position:absolute; inset:18%; border:1px solid rgba(255,211,151,.25); border-radius:42% 58% 36% 64%; transform:rotate(24deg); }
.hero-orb::after { inset:7%; transform:rotate(-33deg); }
.toolbar { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:18px; }
.chips { display:flex; flex-wrap:wrap; gap:9px; }
.chip { border:1px solid rgba(232,189,120,.18); background:rgba(255,255,255,.025); padding:8px 13px; border-radius:999px; color:#cabec5; cursor:pointer; font-size:13px; }
.chip:hover { border-color:rgba(232,189,120,.42); }
.chip.is-active { background: linear-gradient(135deg, #a92761, #5a1f50); color:white; border-color:#d24f8d; box-shadow:0 0 0 2px rgba(226,77,141,.08); }
.toolbar-right { display:flex; align-items:center; gap:10px; }
.result-count { color:#9e8d98; font-size:13px; white-space:nowrap; }
.soft-select { border:1px solid var(--line); background:#130f15; color:#d8c6cf; border-radius:999px; padding:8px 30px 8px 13px; }
.library-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap:18px; }
.book-card { min-width:0; border:1px solid rgba(232,189,120,.22); border-radius:17px; background:linear-gradient(180deg,rgba(31,19,31,.92),rgba(15,11,16,.94)); overflow:hidden; cursor:pointer; box-shadow:0 14px 32px rgba(0,0,0,.22); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; position:relative; }
.book-card:hover { transform:translateY(-5px); border-color:rgba(232,189,120,.68); box-shadow:0 20px 44px rgba(0,0,0,.4),0 0 28px rgba(226,77,141,.08); }
.cover { aspect-ratio: 2/3; background:#25192b; overflow:hidden; position:relative; display:block; }
.cover img { width:100%; height:100%; object-fit:cover; display:block; }
.cover-placeholder { width:100%; height:100%; padding:17px; display:flex; flex-direction:column; justify-content:flex-end; background:var(--cover-bg); position:relative; overflow:hidden; }
.cover-placeholder::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 75% 22%,rgba(255,255,255,.28),transparent 18%),linear-gradient(180deg,transparent 30%,rgba(0,0,0,.72)); }
.cover-placeholder::after { content:"♡"; position:absolute; top:18%; right:15%; font-size:58px; color:rgba(255,222,231,.25); transform:rotate(-12deg); }
.cover-placeholder b,.cover-placeholder small { position:relative; z-index:1; }
.cover-placeholder b { font-family:Georgia,serif; font-size:22px; line-height:1.02; text-transform:uppercase; text-shadow:0 2px 8px #000; }
.cover-placeholder small { margin-top:8px; color:#e7d2d7; }
.card-badges { position:absolute; top:9px; left:9px; right:9px; display:flex; justify-content:space-between; gap:7px; z-index:2; }
.mini-badge { display:inline-flex; align-items:center; max-width:80%; padding:5px 8px; border-radius:999px; background:rgba(12,9,13,.72); border:1px solid rgba(255,255,255,.11); backdrop-filter:blur(8px); font-size:10px; font-weight:700; color:#f6d8e4; }
.mini-badge.warm { background:rgba(120,33,75,.72); }
.book-meta { padding:13px 13px 14px; }
.book-meta h3 { margin:0 0 4px; font-family:Georgia,serif; font-size:18px; font-weight:500; color:#f1d6bc; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.book-meta p { margin:0; font-size:12px; color:#9f8d98; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-footer { padding:0 13px 13px; display:flex; gap:6px; flex-wrap:wrap; }
.tag { display:inline-flex; padding:5px 8px; border-radius:999px; background:#271421; color:#f0a1c2; border:1px solid rgba(226,77,141,.15); font-size:10px; }
.tag.green { background:#10231f; color:#7ed1b6; border-color:rgba(37,133,110,.2); }
.tag.gold { background:#2b2016; color:#e8bd78; border-color:rgba(232,189,120,.18); }
.empty-state { text-align:center; padding:70px 20px; border:1px dashed var(--line); border-radius:20px; color:#ae9da8; }
.empty-state span { font-size:42px; }
.empty-state h2 { font-family:Georgia,serif; color:#e1c3cf; font-weight:500; }
.detail-panel { position:fixed; z-index:40; top:12px; right:12px; bottom:12px; width:min(var(--detail),calc(100vw - 24px)); transform:translateX(calc(100% + 24px)); transition:transform .28s ease; border:1px solid rgba(232,189,120,.28); border-radius:24px; background:linear-gradient(180deg,rgba(39,20,35,.98),rgba(14,10,15,.99)); box-shadow:-30px 0 90px rgba(0,0,0,.48); overflow:auto; backdrop-filter:blur(20px); }
.detail-panel.is-open { transform:translateX(0); }
.detail-inner { padding:20px; }
.detail-close { position:sticky; top:10px; margin-left:auto; z-index:2; }
.detail-top { display:grid; grid-template-columns:130px 1fr; gap:16px; align-items:start; }
.detail-cover { border-radius:13px; overflow:hidden; aspect-ratio:2/3; border:1px solid rgba(232,189,120,.3); }
.detail-cover img { width:100%; height:100%; object-fit:cover; }
.detail-title h2 { margin:7px 0 4px; font-family:Georgia,serif; color:#f0c78a; font-weight:500; font-size:27px; }
.detail-title p { margin:4px 0; color:#bda9b4; font-size:13px; }
.verdict-box { margin:20px 0; padding:16px; border-radius:18px; background:linear-gradient(135deg,rgba(142,35,82,.55),rgba(58,23,68,.55)); border:1px solid rgba(226,77,141,.25); }
.verdict-box small { color:#e79abe; letter-spacing:.1em; }
.verdict-box strong { display:block; margin-top:5px; font-family:Georgia,serif; font-size:26px; color:#ffd0e1; font-weight:500; }
.detail-section { padding:16px 0; border-top:1px solid var(--line); }
.detail-section h3 { margin:0 0 10px; font-size:12px; color:#d185a7; letter-spacing:.11em; text-transform:uppercase; }
.spice { letter-spacing:2px; font-size:18px; }
.tags { display:flex; gap:7px; flex-wrap:wrap; }
.detail-note { color:#dac7d0; line-height:1.6; white-space:pre-wrap; }
.detail-actions { position:sticky; bottom:0; padding:12px 0 4px; background:linear-gradient(180deg,transparent,#100b11 22%); display:flex; gap:9px; }
.button { min-height:43px; padding:0 16px; border-radius:13px; cursor:pointer; border:1px solid var(--line); font-weight:700; }
.button.primary { background:linear-gradient(135deg,#a72864,#5e2359); border-color:#d04788; color:#fff4f8; box-shadow:0 8px 24px rgba(157,35,90,.2); }
.button.ghost { background:rgba(255,255,255,.025); color:#cdbdc7; }
.button.danger { background:rgba(185,62,77,.12); color:#ef8992; border-color:rgba(228,106,118,.25); }
.mobile-nav { display:none; }
.modal { width:min(760px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:hidden; border:1px solid rgba(232,189,120,.28); border-radius:24px; padding:0; color:var(--cream); background:linear-gradient(180deg,#271521,#110d13); box-shadow:0 35px 110px rgba(0,0,0,.7); }
.modal::backdrop { background:rgba(4,3,5,.75); backdrop-filter:blur(8px); }
.modal form { padding:22px; max-height:calc(100dvh - 26px); overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.small-modal { width:min(520px,calc(100vw - 24px)); }
.modal-head { display:flex; align-items:start; justify-content:space-between; gap:20px; margin-bottom:18px; }
.modal-head h2 { margin:0; font-family:Georgia,serif; color:#edc182; font-weight:500; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.field { display:grid; gap:6px; }
.field-wide { grid-column:1 / -1; }
.field > span { font-size:12px; color:#c9b5c0; font-weight:700; }
.field small { font-weight:400; color:#8e7b87; }
.field input,.field select,.field textarea { width:100%; border:1px solid var(--line); background:#0d0a0f; color:#f0dfe7; border-radius:12px; padding:10px 11px; resize:vertical; }
.check-row { display:flex; flex-wrap:wrap; gap:12px; padding:6px 0; color:#d5c3cc; }
.check-row label { padding:8px 10px; background:rgba(255,255,255,.025); border-radius:10px; }
.modal-actions { position:sticky; bottom:-22px; z-index:3; display:flex; justify-content:flex-end; gap:10px; margin:20px -22px -22px; padding:14px 22px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:linear-gradient(180deg,rgba(17,13,19,.82),#110d13 28%); backdrop-filter:blur(12px); }
.edit-status { margin-top:16px; }
.button[disabled] { cursor:wait; opacity:.68; }
.muted { color:#a9939f; line-height:1.55; }
.connection-status { min-height:32px; margin-top:12px; padding:9px 11px; border-radius:11px; background:rgba(255,255,255,.025); color:#a99aa3; font-size:13px; }
.connection-status.ok { color:#7fd5b7; background:rgba(37,133,110,.11); }
.connection-status.bad { color:#ef8b95; background:rgba(228,106,118,.09); }
.toast { position:fixed; left:50%; bottom:28px; z-index:100; transform:translate(-50%,130%); transition:transform .25s ease; padding:11px 15px; border-radius:999px; background:#2b1723; border:1px solid rgba(232,189,120,.28); box-shadow:var(--shadow); color:#f5dce6; }
.toast.show { transform:translate(-50%,0); }
@media (max-width: 980px) {
  :root { --sidebar:0px; }
  .app-shell { display:block; }
  .sidebar { display:none; }
  .topbar { min-height:92px; padding:14px 16px; }
  .mobile-menu { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:transparent; }
  .title-block .eyebrow,.title-block > p:last-child { display:none; }
  .title-block h1 { font-size:24px; }
  .search { min-width:0; width:42px; padding:0; justify-content:center; }
  .search input { position:absolute; inset:auto 16px -54px 16px; width:auto; height:42px; padding:0 13px; border:1px solid var(--line); border-radius:999px; background:#110c12; display:none; }
  .search:focus-within input { display:block; }
  .content { padding:18px 14px 94px; }
  .hero { min-height:165px; padding:20px; }
  .hero-orb { width:100px; opacity:.55; }
  .toolbar { align-items:flex-start; flex-direction:column; }
  .toolbar-right { width:100%; justify-content:space-between; }
  .library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .book-meta { padding:10px 10px 9px; }
  .book-meta h3 { font-size:15px; }
  .card-footer { padding:0 10px 10px; }
  .mobile-nav { position:fixed; display:grid; grid-template-columns:repeat(5,1fr); left:0; right:0; bottom:0; z-index:30; padding:8px max(8px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); border-top:1px solid var(--line); background:rgba(12,9,13,.94); backdrop-filter:blur(18px); }
  .mobile-nav-item { border:0; background:transparent; color:#9c8a95; display:grid; justify-items:center; gap:3px; padding:5px; }
  .mobile-nav-item span { font-size:18px; }
  .mobile-nav-item.is-active { color:#f07aac; }
  .detail-panel { top:auto; left:0; right:0; bottom:0; width:100%; height:min(84vh,760px); border-radius:25px 25px 0 0; transform:translateY(105%); }
  .detail-panel.is-open { transform:translateY(0); }
  .detail-top { grid-template-columns:100px 1fr; }
  .form-grid { grid-template-columns:1fr; }
  .modal { width:min(760px,calc(100vw - 12px)); max-height:calc(100dvh - 12px); border-radius:20px; }
  .modal form { max-height:calc(100dvh - 14px); padding:18px; }
  .modal-actions { bottom:-18px; margin:18px -18px -18px; padding:12px 18px calc(12px + env(safe-area-inset-bottom)); }
  .field-wide { grid-column:auto; }
}
@media (max-width:480px) {
  .title-block h1 { font-size:20px; }
  .top-actions { gap:6px; }
  .icon-button { width:38px; height:38px; }
  .hero h2 { font-size:32px; }
  .hero p { font-size:14px; max-width:82%; }
  .chips { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; max-width:100%; scrollbar-width:none; }
  .chips::-webkit-scrollbar { display:none; }
  .chip { white-space:nowrap; }
  .cover-placeholder { padding:12px; }
  .cover-placeholder b { font-size:17px; }
  .detail-inner { padding:16px; }
}