.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--font-body); font-weight: 700; font-size: .95rem; padding: .72em 1.4em; border-radius: var(--r-pill); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .18s, box-shadow .18s, background .18s; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn .ic { width: 17px; height: 17px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--brand); color: var(--brand-ink); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--brand) 60%, transparent); }
.btn-primary:hover:not([disabled]) { background: color-mix(in srgb, var(--brand) 84%, black); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-soft { background: var(--gold-soft); color: var(--ink); }
.btn-gold { background: var(--gold); color: #fff; }
.btn-sm { padding: .5em 1em; font-size: .85rem; }
.btn-lg { padding: .9em 1.8em; font-size: 1.02rem; }
.btn-block { width: 100%; margin-top: .6rem; }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgb(255 255 255/.35); border-top-color: #fff; animation: spin .7s linear infinite; display: inline-block; }
.bdg { display: inline-block; padding: .28em .7em; border-radius: 999px; font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.bdg-best { background: var(--gold); color: #fff; }
.bdg-new { background: var(--brand); color: var(--brand-ink); }
.bdg-off { background: var(--ink); color: var(--bg); }
.bdg-verified { background: var(--brand-soft); color: var(--brand); text-transform: none; letter-spacing: 0; font-size: .7rem; }
.bdg-pending { background: var(--gold-soft); color: var(--gold); text-transform: none; letter-spacing: 0; font-size: .7rem; }
.cover { position: relative; width: 100%; height: 100%; border-radius: 4px 10px 10px 4px; background: linear-gradient(150deg, var(--c1), var(--c2)); color: var(--c3); display: flex; flex-direction: column; padding: 13% 12% 12% 16%; overflow: hidden; box-shadow: var(--shadow-sm); }
.cover::before { content: ""; position: absolute; inset: 0; opacity: .16; pointer-events: none; }
.cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 32%, rgb(255 255 255/.12) 46%, transparent 58%); pointer-events: none; }
.cover-grid::before { background: repeating-linear-gradient(0deg, currentColor 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 22px); }
.cover-dots::before { background-image: radial-gradient(currentColor 1.2px, transparent 1.6px); background-size: 15px 15px; }
.cover-stripes::before { background: repeating-linear-gradient(-45deg, currentColor 0 1.5px, transparent 1.5px 13px); }
.cover-rays::before { background: conic-gradient(from 120deg at 78% 12%, currentColor 0 4deg, transparent 4deg 14deg); }
.cover-waves::before { background: repeating-radial-gradient(circle at 50% 135%, currentColor 0 1.5px, transparent 1.5px 20px); }
.cv-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: linear-gradient(90deg, rgb(0 0 0/.38), transparent); }
.cv-pub { font-size: .5rem; font-weight: 800; letter-spacing: .34em; opacity: .8; border-block: 1px solid color-mix(in srgb, currentColor 35%, transparent); padding-block: .55em; }
.cv-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(.92rem, 1.2vw + .45rem, 1.3rem); line-height: 1.18; margin-top: auto; }
.cv-author { font-size: .55rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: .85; margin-top: .6em; }
.cover-mini { padding: 16% 14% 14% 20%; }
.cover-mini .cv-title { font-size: .68rem; } .cover-mini .cv-author { font-size: .42rem; } .cover-mini .cv-pub { font-size: .34rem; }
.cover-tiny { padding: 18% 16% 16% 24%; }
.cover-tiny .cv-title { font-size: .55rem; } .cover-tiny .cv-author, .cover-tiny .cv-pub { display: none; }
.grid-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 22px; }
.book-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .28s ease, box-shadow .28s ease; }
.book-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.cover-wrap { position: relative; display: block; aspect-ratio: 3/3.9; background: var(--surface-2); padding: clamp(14px, 9%, 28px); overflow: hidden; }
.cover-wrap .cover { transition: transform .4s ease; }
.cover-wrap:hover .cover { transform: scale(1.045) rotate(-1deg); }
.bdgs { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.quick-view { position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 130%); background: var(--ink); color: var(--bg); font-size: .75rem; font-weight: 700; padding: .5em 1.1em; border-radius: var(--r-pill); transition: transform .3s ease; z-index: 2; }
@media (hover: hover) { .cover-wrap:hover .quick-view { transform: translate(-50%, 0); } }
@media (hover: none) { .quick-view { transform: translate(-50%, 0); opacity: .92; } }
.bc-body { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.15rem 1.2rem; flex: 1; }
.bc-cat { font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.bc-title { font-size: 1.06rem; margin: 0; font-weight: 600; }
.bc-title a:hover { color: var(--brand); }
.bc-author { margin: 0; font-size: .84rem; color: var(--muted); }
.bc-rating { display: flex; align-items: center; gap: .4rem; font-size: .82rem; }
.bc-rating b { color: var(--ink); }
.bc-price { display: flex; align-items: baseline; gap: .5rem; margin-top: .2rem; }
.bc-price b { font-size: 1.15rem; color: var(--ink); }
.bc-price s { font-size: .85rem; }
.off-tag { font-size: .7rem; font-weight: 800; color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); padding: .2em .55em; border-radius: 99px; }
.bc-actions { display: flex; gap: .5rem; margin-top: .8rem; }
.bc-actions .btn-primary { flex: 1; }
.stars { position: relative; display: inline-block; color: var(--line); letter-spacing: 2px; font-size: .95rem; line-height: 1; }
.stars-fill { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--star); }
.chip { display: inline-flex; align-items: center; gap: .45em; padding: .5em 1.05em; border-radius: var(--r-pill); border: 1.5px solid var(--line); background: var(--surface); font-weight: 700; font-size: .86rem; cursor: pointer; transition: all .2s; }
.chip span { font-size: .72rem; color: var(--muted); font-weight: 600; }
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.chk { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; cursor: pointer; }
.chk input { width: 16px; height: 16px; accent-color: var(--brand); }
.field { margin-bottom: 1.05rem; }
.field label, .field legend { display: block; font-size: .85rem; font-weight: 700; color: var(--ink); margin-bottom: .35rem; }
input, select, textarea { width: 100%; padding: .68em .95em; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; transition: border-color .2s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
input.invalid { border-color: var(--danger); }
.field-err { color: var(--danger); font-size: .78rem; margin: .3rem 0 0; min-height: 1em; }
textarea { resize: vertical; }
fieldset { border: none; padding: 0; margin: 0; }
.star-input { display: inline-flex; flex-direction: row-reverse; gap: .15rem; }
.star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input label { font-size: 1.7rem; color: var(--line); cursor: pointer; transition: color .15s, transform .15s; margin: 0; }
.star-input label:hover { transform: scale(1.15); }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label { color: var(--star); }
.empty { display: grid; justify-items: center; gap: .6rem; text-align: center; padding: 3rem 1.5rem; }
.empty.wide { grid-column: 1/-1; border: 1.5px dashed var(--line); border-radius: var(--r-lg); margin-block: 1rem; }
.empty-ic { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--muted); }
.empty-ic .ic { width: 26px; height: 26px; }
.scrim { position: fixed; inset: 0; z-index: 110; background: rgb(15 14 10/.48); opacity: 0; transition: opacity .28s; }
.scrim.show { opacity: 1; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 120; width: min(430px, 100vw); background: var(--surface); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; transform: translateX(102%); transition: transform .38s cubic-bezier(.32,.72,.28,1); }
.drawer.open { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line-soft); }
.drawer-head h2 { margin: 0; font-size: 1.25rem; }
.drawer-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; display: grid; gap: 1rem; }
.drawer-foot { padding: 1.1rem 1.25rem 1.3rem; border-top: 1px solid var(--line-soft); }
body.no-scroll { overflow: hidden; }
.cart-row { display: grid; grid-template-columns: 64px 1fr auto; gap: .9rem; align-items: center; }
.cart-row-lg { grid-template-columns: 84px 1fr auto; padding-block: .75rem; border-bottom: 1px solid var(--line-soft); }
.cart-row-cover { width: 100%; aspect-ratio: 3/4.1; }
.cart-row-info { display: grid; gap: .1rem; min-width: 0; }
.cart-row-title { font-weight: 700; color: var(--ink); font-size: .92rem; }
.cart-row-title:hover { color: var(--brand); }
.cart-row-price b { color: var(--ink); }
.cart-page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.cart-page-head h1 { margin: 0; }
.promo-row { display: flex; gap: .5rem; margin-block: .8rem; }
.sum-line { display: flex; justify-content: space-between; padding: .3rem 0; font-size: .95rem; }
.sum-line.big { font-size: 1.12rem; border-top: 1.5px solid var(--line); margin-top: .5rem; padding-top: .7rem; }
.sum-line.big b { font-family: var(--font-display); font-size: 1.35rem; color: var(--ink); }
.modal-scrim { position: fixed; inset: 0; z-index: 130; background: rgb(15 14 10/.55); display: grid; place-items: center; padding: 1rem; opacity: 0; transition: opacity .22s; }
.modal-scrim.show { opacity: 1; }
.modal { width: min(660px, 100%); max-height: 88vh; overflow: auto; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); transform: scale(.96) translateY(10px); transition: transform .25s ease; }
.modal-scrim.show .modal { transform: none; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--line-soft); position: sticky; top: 0; background: var(--surface); z-index: 2; }
.modal-head h3 { margin: 0; }
.modal-body { padding: 1.4rem; }
.toasts { position: fixed; bottom: calc(18px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 150; display: grid; gap: .5rem; justify-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: .55rem; background: var(--ink); color: var(--bg); padding: .7em 1.3em; border-radius: var(--r-pill); font-size: .9rem; font-weight: 600; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(14px); transition: all .3s ease; max-width: 92vw; }
.toast.show { opacity: 1; transform: none; }
.toast .ic { width: 17px; height: 17px; color: var(--gold); flex: none; }
.page-head { margin-block: 2.25rem 1.5rem; }
.page-head h1 { margin-bottom: .15em; }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface); }
.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 640px; }
.tbl th { text-align: left; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: .8em 1em; border-bottom: 1.5px solid var(--line); }
.tbl td { padding: .75em 1em; border-top: 1px solid var(--line-soft); vertical-align: middle; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl-actions { display: flex; gap: .25rem; }
.tbl .cover-tiny { width: 40px; aspect-ratio: 3/4.1; }
.admin-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.admin-tabs button { padding: .55em 1.2em; border-radius: var(--r-pill); border: 1.5px solid var(--line); background: transparent; font-weight: 700; font-size: .88rem; cursor: pointer; color: var(--muted); }
.admin-tabs button[aria-selected="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.stat-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 1.1rem 1.2rem; display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: center; }
.stat-ic { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--brand-soft); color: var(--brand); }
.stat-val { display: block; font-family: var(--font-display); font-size: 1.45rem; color: var(--ink); line-height: 1.1; }