.portal-main { position: relative; }
.book-card { cursor: pointer; }
.book-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }
.book-card.is-selected .book-cover { outline: 1px solid var(--gold); box-shadow: 0 0 0 4px rgba(230,189,114,.11), 11px 19px 31px #000d; }
body.detail-open { overflow: hidden; }

.library-detail {
  position: fixed; z-index: 20; top: 14px; right: 14px; bottom: 14px;
  width: min(620px, calc(100vw - 28px)); overflow-x: hidden; overflow-y: auto;
  color: #f5f1e9; background: linear-gradient(155deg, rgba(14,29,56,.985), rgba(4,9,18,.995) 58%);
  border: 1px solid rgba(142,209,236,.28); box-shadow: -34px 0 110px #000c;
  transform: translateX(calc(100% + 38px)); opacity: 0;
  transition: transform .52s cubic-bezier(.16,1,.3,1), opacity .28s;
}
.library-detail.is-open { transform: translateX(0); opacity: 1; }
.detail-ambient { position: absolute; inset: 0 0 auto; height: 370px; pointer-events: none; background: radial-gradient(circle at 20% 12%, rgba(65,210,223,.18), transparent 42%), radial-gradient(circle at 75% 4%, rgba(230,189,114,.16), transparent 36%); mask-image: linear-gradient(#000,transparent); }
.detail-close { position: sticky; z-index: 5; float: right; top: 16px; right: 18px; display: grid; place-items: center; justify-content: center; align-content: center; width: 38px; height: 38px; padding: 0; gap: 0; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: rgba(4,9,18,.65); color: #e5edf9; backdrop-filter: blur(12px); }
.detail-close svg { display: block; width: 16px; height: 16px; overflow: visible; }
.detail-close path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.detail-close:hover, .detail-close:focus-visible { border-color: var(--cyan); color: #fff; outline: none; transform: rotate(4deg); }
.detail-content { position: relative; padding: 52px 42px 34px; transition: opacity .25s; }
.library-detail[data-state="loading"] .detail-content { opacity: .23; pointer-events: none; }
.detail-loading { position: absolute; z-index: 3; left: 50%; top: 45%; display: none; width: 210px; margin-left: -105px; padding: 18px; color: #cdd9e9; text-align: center; font-size: 11px; letter-spacing: .04em; }
.library-detail[data-state="loading"] .detail-loading, .library-detail[data-state="error"] .detail-loading { display: grid; justify-items: center; gap: 13px; }
.detail-loading i { width: 34px; height: 34px; border: 1px solid rgba(65,210,223,.25); border-top-color: var(--cyan); border-radius: 50%; animation: detail-spin .8s linear infinite; }
.library-detail[data-state="error"] .detail-loading i { animation: none; border-color: #efb19f; }

.detail-hero { display: grid; grid-template-columns: 166px minmax(0,1fr); gap: 31px; align-items: end; min-height: 255px; }
.detail-cover-wrap { position: relative; width: 166px; aspect-ratio: 2/3; perspective: 700px; }
.detail-cover-image, .detail-cover { width: 100%; height: 100%; object-fit: contain; background: linear-gradient(145deg,#1d355a,#80663e); box-shadow: 15px 22px 45px #000c; transform: rotateY(4deg); transform-origin: left center; }
.detail-cover-image[hidden], .detail-cover[hidden] { display: none; }
.detail-cover.detail-title { display: grid; place-items: center; padding: 17px; color: #f0d9a3; font: 600 27px/.92 var(--serif); text-align: center; }
.detail-cover.detail-title[hidden] { display: none; }
.detail-cover-shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg,transparent 42%,rgba(255,255,255,.14) 50%,transparent 58%); transform: translateX(-120%); animation: cover-glint 8s 1.5s ease-in-out infinite; }
.detail-kicker, .detail-section>p, .detail-series>p { margin: 0 0 13px; color: var(--cyan); font-size: 9px; font-weight: 700; letter-spacing: .18em; }
.library-detail h2 { margin: 0; color: var(--ink); font: 600 clamp(36px,4.1vw,52px)/.9 var(--serif); letter-spacing: -.045em; }
.detail-subtitle { margin: 9px 0 0; color: #c4b691; font: italic 500 17px/1.25 var(--serif); }
.detail-author { margin: 12px 0 21px; color: #b9c8df; font-size: 12px; }
.detail-status { display: flex; gap: 8px; align-items: center; color: #d4fbff; font-size: 10px; }
.detail-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: status-breathe 2.8s ease-in-out infinite; }

.detail-ratings { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 38px 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rating-block { display: grid; grid-template-columns: 1fr; align-content: center; gap: 5px; min-width: 0; padding: 18px 13px; }
.rating-block:first-child { padding-left: 3px; }
.rating-block+ .rating-block { padding-left: 22px; border-left: 1px solid var(--line); }
.rating-stars { align-self: end; color: var(--gold); font-size: 12px; letter-spacing: .08em; }
.rating-block b { overflow-wrap: anywhere; color: #fff; font: 600 19px var(--serif); }
.rating-block small { min-height: 22px; color: #8495ad; font-size: 8px; line-height: 1.35; }
.community-stars { color: var(--cyan); }
.rating-picker { display: flex; align-items: center; gap: 2px; }
.rating-picker button { display: grid; place-items: center; width: 18px; height: 22px; margin: 0; padding: 0; border: 0; background: transparent; color: #526078; font: 15px/1 var(--sans); transition: color .18s,transform .18s,text-shadow .18s; }
.rating-picker button:hover,.rating-picker button:focus-visible,.rating-picker button.is-selected { color: var(--gold); outline: none; transform: translateY(-1px); text-shadow: 0 0 10px rgba(230,189,114,.35); }
.rating-picker button:disabled { cursor: wait; opacity: .55; }
.clear-rating { display: inline; width: auto; margin: 0 0 0 5px; padding: 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: #8191aa; font: 700 8px/1 var(--sans); }
.clear-rating[hidden] { display: none; }
.rating-save-status { min-height: 10px; color: #a9d9df; font-size: 8px; }
.detail-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin: 25px 0; background: rgba(209,225,255,.09); }
.detail-facts>div { min-width: 0; padding: 14px; background: #091326; }
.detail-facts dt { color: #7f90aa; font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.detail-facts dd { margin: 6px 0 0; overflow-wrap: anywhere; color: #dae3f0; font-size: 11px; line-height: 1.4; }
.detail-value { display: grid; grid-template-columns: 1fr auto; gap: 17px 24px; align-items: center; margin: 28px 0 0; padding: 20px 22px; border: 1px solid rgba(65,210,223,.25); background: radial-gradient(circle at 0 0,rgba(65,210,223,.1),transparent 45%),rgba(6,14,28,.72); }
.detail-value>div>p { margin: 0 0 9px; color: var(--cyan); font-size: 9px; font-weight: 700; letter-spacing: .18em; }
.detail-value>div>b { display: block; color: #e4ebf4; font: 600 18px/1.15 var(--serif); }
.detail-value>div>small { display: block; max-width: 320px; margin-top: 7px; color: #8191a8; font-size: 8px; line-height: 1.5; }
.value-form { display: flex; gap: 8px; align-items: stretch; }
.value-form label { display: flex; align-items: center; min-width: 112px; border: 1px solid rgba(216,230,251,.22); background: #071124; color: var(--gold); }
.value-form label span { padding-left: 12px; font-size: 12px; }
.value-form input { width: 84px; border: 0; outline: 0; background: transparent; color: #fff; padding: 12px 10px 12px 4px; font: 600 12px var(--sans); }
.value-form button { border: 1px solid rgba(230,189,114,.45); background: rgba(230,189,114,.1); color: var(--gold); padding: 0 13px; font: 700 9px var(--sans); white-space: nowrap; }
.value-form button:hover,.value-form button:focus-visible { background: rgba(230,189,114,.18); outline: none; }
.value-form button:disabled { cursor: wait; opacity: .5; }
.value-status { grid-column: 1/-1; min-height: 12px; margin: -6px 0 0; color: #a9d9df; font-size: 8px; }

.detail-series { margin: 31px 0; padding: 21px 23px; overflow: hidden; border: 1px solid rgba(230,189,114,.3); background: linear-gradient(110deg,rgba(230,189,114,.1),rgba(65,210,223,.04)); }
.detail-series>p { color: var(--gold); }
.detail-series>div { display: flex; align-items: center; gap: 17px; }
.series-orbit { position: relative; display: grid; flex: 0 0 48px; place-items: center; width: 48px; height: 48px; color: var(--gold); border: 1px solid rgba(230,189,114,.45); border-radius: 50%; }
.series-orbit:after { content:""; position: absolute; inset: -5px; border: 1px dashed rgba(65,210,223,.28); border-radius: 50%; animation: detail-spin 16s linear infinite; }
.series-orbit i { font: normal 600 20px var(--serif); }
.detail-series b { display: block; font: 600 24px/1 var(--serif); }
.detail-series small { display: block; margin-top: 6px; color: #9eacc0; font-size: 10px; }
.detail-section { margin-top: 31px; }
.detail-description div { color: #b8c4d5; font: 400 14px/1.75 var(--sans); }
.detail-topics { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.detail-topics span { padding: 7px 10px; border: 1px solid rgba(148,174,211,.2); color: #9eafc7; font-size: 9px; }
.detail-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.detail-links a { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 12px 14px; border: 1px solid rgba(140,171,211,.23); background: rgba(255,255,255,.025); color: #cad6e6; font-size: 10px; transition: border-color .2s, background .2s, transform .2s; }
.detail-links a:hover, .detail-links a:focus-visible { border-color: var(--cyan); background: rgba(65,210,223,.08); outline: none; transform: translateY(-2px); }
.detail-links a.primary { color: #dcfbff; border-color: rgba(65,210,223,.32); }
.detail-links a.price-link { color: #f5d696; border-color: rgba(230,189,114,.38); }
.detail-links i { color: var(--cyan); font: normal 14px var(--sans); }
.price-note { display: block; margin-top: 9px; color: #6f809a; font-size: 8px; }
.edition-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(145px,42%); gap: 8px; overflow-x: auto; padding-bottom: 7px; scrollbar-color: rgba(65,210,223,.3) transparent; }
.edition-rail>a, .edition-rail>div { display: grid; align-content: start; min-height: 106px; padding: 14px; border-left: 2px solid rgba(230,189,114,.55); background: rgba(255,255,255,.04); }
.edition-rail b { color: #e8edf5; font: 600 17px var(--serif); }
.edition-rail span { margin-top: 8px; color: #9aa9be; font-size: 9px; }
.edition-rail small { margin-top: 5px; color: #687a94; font-size: 8px; }
.detail-notes blockquote { margin: 0; padding: 18px 20px; border-left: 2px solid var(--gold); background: rgba(230,189,114,.06); color: #c7d0dd; font: italic 500 17px/1.5 var(--serif); }
.detail-footer { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-top: 38px; padding-top: 20px; border-top: 1px solid var(--line); color: #64758e; font-size: 8px; }
.detail-footer a { color: var(--gold); font-size: 10px; font-weight: 700; }
.detail-footer a span { margin-left: 8px; }
.detail-scrim { position: fixed; inset: 0; z-index: 19; background: rgba(0,0,0,.62); opacity: 0; pointer-events: none; backdrop-filter: none; transition: opacity .3s; }
.detail-scrim[hidden] { display: none !important; }
.detail-scrim.is-open { opacity: 1; pointer-events: auto; backdrop-filter: blur(2px); }

@keyframes detail-spin { to { transform: rotate(360deg); } }
@keyframes cover-glint { 0%,72%,100% { transform: translateX(-130%); } 84% { transform: translateX(130%); } }
@keyframes status-breathe { 50% { opacity: .5; box-shadow: 0 0 5px var(--cyan); } }

@media (max-width: 760px) {
  .library-detail { top: auto; right: 0; bottom: 0; width: 100%; max-height: 92vh; border-right: 0; border-bottom: 0; border-left: 0; transform: translateY(105%); }
  .library-detail.is-open { transform: translateY(0); }
  .detail-content { padding: 43px 22px 30px; }
  .detail-hero { grid-template-columns: 112px minmax(0,1fr); gap: 19px; min-height: 170px; align-items: center; }
  .detail-cover-wrap { width: 112px; }
  .library-detail h2 { font-size: clamp(31px,9vw,43px); }
  .detail-ratings { grid-template-columns: 1fr; }
  .rating-block+.rating-block { padding-left: 3px; border-top: 1px solid var(--line); border-left: 0; }
  .rating-block { grid-template-columns: 90px 1fr; gap: 3px 12px; padding: 13px 3px; }
  .rating-block b { grid-row: span 2; align-self: center; }
  .rating-block small { min-height: 0; }
  .rating-save-status { grid-column: 1/-1; }
  .detail-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .detail-value { grid-template-columns: 1fr; }
  .value-form { width: 100%; }
  .value-form label { flex: 1; }
  .value-form input { width: 100%; }
  .detail-links { grid-template-columns: 1fr; }
  .detail-footer { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 390px) {
  .detail-hero { grid-template-columns: 90px minmax(0,1fr); gap: 15px; }
  .detail-cover-wrap { width: 90px; }
  .detail-kicker { margin-bottom: 8px; }
  .detail-author { margin: 8px 0 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .library-detail, .detail-scrim, .detail-cover-shine, .detail-status i, .series-orbit:after, .detail-loading i { transition: none; animation: none; }
}

.detail-reading,.detail-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 22px;align-items:center;margin-top:25px;padding:20px 22px;border:1px solid rgba(230,189,114,.24);background:linear-gradient(110deg,rgba(230,189,114,.08),rgba(65,210,223,.035))}.detail-reading>div:first-child>p,.detail-copy>div:first-child>p{margin:0 0 8px;color:var(--gold);font-size:9px;font-weight:700;letter-spacing:.18em}.detail-reading>div:first-child>b,.detail-copy>div:first-child>b{display:block;color:#e9edf3;font:600 20px/1 var(--serif)}.detail-reading>div:first-child>small,.detail-copy>div:first-child>small{display:block;margin-top:6px;color:#8091a9;font-size:8px;line-height:1.45}.reading-status-picker{display:flex;border:1px solid rgba(209,225,255,.16);background:#071123}.reading-status-picker button{min-height:38px;margin:0;padding:0 12px;border:0;border-left:1px solid rgba(209,225,255,.12);background:transparent;color:#8697ae;font:700 8px var(--sans);white-space:nowrap}.reading-status-picker button:first-child{border-left:0}.reading-status-picker button:hover,.reading-status-picker button:focus-visible{color:#fff;outline:none}.reading-status-picker button.is-selected{background:linear-gradient(100deg,rgba(230,189,114,.95),rgba(240,210,142,.95));color:#171208}.reading-status-picker button:disabled{cursor:wait;opacity:.58}.reading-save-status,.copy-save-status{grid-column:1/-1;min-height:10px;color:#a9d9df;font-size:8px}.detail-copy{margin-top:31px;border-color:rgba(65,210,223,.23);background:linear-gradient(110deg,rgba(65,210,223,.07),rgba(230,189,114,.035))}.detail-copy>div:first-child>p{color:var(--cyan)}.manage-copy-toggle{padding:10px 13px;border:1px solid rgba(65,210,223,.38);background:rgba(65,210,223,.07);color:#b5f4f8;font:700 8px var(--sans)}.copy-movement-form{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin-top:7px;padding-top:18px;border-top:1px solid rgba(209,225,255,.12)}.copy-movement-form[hidden]{display:none}.copy-movement-form>label{display:grid;gap:6px;color:#9eacc0;font-size:8px;font-weight:700;letter-spacing:.05em}.copy-movement-form input,.copy-movement-form select,.copy-movement-form textarea{width:100%;border:1px solid rgba(209,225,255,.18);outline:0;background:#071123;color:#edf1f6;padding:10px;font:10px var(--sans);color-scheme:dark}.copy-movement-form input:focus,.copy-movement-form select:focus,.copy-movement-form textarea:focus{border-color:var(--cyan)}.copy-movement-form textarea{resize:vertical}.copy-date-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.copy-date-row label{display:grid;gap:6px;color:#9eacc0;font-size:8px;font-weight:700}.copy-movement-form>label:last-of-type{grid-column:1/-1}.copy-movement-form>div:last-child{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px}.copy-movement-form>div:last-child button{margin:0;padding:10px 13px;font-size:8px}.cancel-copy-movement{border:1px solid rgba(209,225,255,.16);background:transparent;color:#9ba9bb}
@media(max-width:760px){.detail-reading,.detail-copy{grid-template-columns:1fr}.reading-status-picker{display:grid;grid-template-columns:repeat(3,1fr)}.reading-status-picker button{padding:0 7px}.copy-movement-form{grid-template-columns:1fr}.copy-movement-form>label:last-of-type{grid-column:auto}.copy-movement-form>div:last-child{grid-column:auto}}
.collection-tools{margin:16px 0 24px;padding:18px;border:1px solid #35465a;border-radius:16px;background:#0d1a2a;color:#eef0f4}
.organization-filter-form,.report-controls form{display:flex;flex-wrap:wrap;gap:12px;align-items:end}
.organization-filter-form label,.report-controls label,.organization-form label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;font-weight:600;min-width:140px;flex:1}
.collection-tools select,.organization-form input,.organization-form textarea{width:100%;min-width:0;box-sizing:border-box;min-height:44px;border:1px solid #526579;border-radius:8px;padding:10px;background:#16263a;color:#eef0f4;font:inherit}
.collection-tools button,.organization-form button{min-height:44px;border:0;border-radius:8px;padding:10px 16px;background:#19364e;color:#fff;font:inherit;cursor:pointer}
.active-filter-chips{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.active-filter-chips a{display:inline-flex;gap:12px;align-items:center;min-height:44px;padding:6px 12px;box-sizing:border-box;background:#edf1f4;color:#19364e;border-radius:24px;font-size:.85rem;text-decoration:none;overflow-wrap:anywhere;max-width:100%}
.report-controls summary{cursor:pointer;min-height:44px;display:list-item;padding:8px 0;font-weight:600}
.report-controls p,.organization-form p{font-size:.85rem;line-height:1.5;color:#b8c5d4}
.collection-tools button:hover,.organization-form button:hover{background:#294c68}
.collection-tools :focus-visible,.organization-form :focus-visible{outline:3px solid #e3bd6b;outline-offset:3px}
.library-detail{overscroll-behavior:contain}
.library-pagination{flex-wrap:wrap}
.library-pagination form{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.library-pagination input[type=number]{width:5em;min-height:44px;background:#16263a;color:#eef0f4;border:1px solid #526579;border-radius:8px;padding:8px;font:inherit}
.library-pagination button{min-height:44px;background:#19364e;color:#eef0f4;border:1px solid #526579;border-radius:8px;padding:8px 12px;font:inherit;cursor:pointer}
.detail-organization h3{font:600 22px Georgia,serif;margin-bottom:16px}
.organization-form{display:grid;gap:14px}
.organization-form button:disabled{opacity:.6;cursor:wait}
.organization-status{font-size:.9rem;line-height:1.5;overflow-wrap:anywhere}
@media(max-width:600px){.collection-tools{padding:12px}.organization-filter-form label,.report-controls label{min-width:100%;flex-basis:100%}.organization-filter-form button,.report-controls button{width:100%}}
