@font-face {
  font-family: "Wix Madefor Display";
  src: url("/assets/dashboard/fonts/WixMadeforDisplay-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: "Evolventa";
  src: url("/assets/fonts/evolventa/Evolventa-Regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Oswald";
  src: url("/assets/fonts/oswald/Oswald-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Evolventa";
  src: url("/assets/fonts/evolventa/Evolventa-Bold.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Evolventa";
  src: url("/assets/fonts/evolventa/Evolventa-Oblique.woff") format("woff");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Evolventa";
  src: url("/assets/fonts/evolventa/Evolventa-BoldOblique.woff") format("woff");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: var(--theme-surface, #ffffff);
  --paper-deep: var(--theme-soft, #d3f4ff);
  --surface: var(--theme-surface, #ffffff);
  --surface-soft: var(--theme-soft, #d3f4ff);
  --ink: var(--theme-ink, #26251f);
  --ink-soft: #666158;
  --ink-faint: #8b8478;
  --line: color-mix(in srgb, var(--theme-strong) 14.000000000000002%, transparent);
  --line-strong: color-mix(in srgb, var(--theme-strong) 28.000000000000004%, transparent);
  --rose: var(--theme-accent, #ff7b95);
  --rose-deep: var(--theme-accent, #ff7b95);
  --rose-soft: var(--theme-accent, #ff7b95);
  --sage: #74836b;
  --sage-soft: #dbe1d5;
  --gold: var(--theme-secondary, #4f60a1);
  --danger: #9d3f3f;
  --shadow-float: 0 24px 80px rgba(52, 44, 35, .2);
  --radius-xs: 12px;
  --radius-sm: 18px;
  --radius-md: 24px;
  --radius-lg: 36px;
  --radius-xl: 48px;
  --radius-pill: 999px;
  --radius-button: var(--radius-pill);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --sidebar: 244px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.5; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.025em; }
h1 { margin-bottom: 18px; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(40px, 5vw, 66px); line-height: .98; }
h2 { margin-bottom: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(26px, 3vw, 34px); font-weight: 400; line-height: 1.08; }
h3 { margin-bottom: 8px; font-size: 17px; line-height: 1.3; font-weight: 600; }

:focus-visible { outline: 3px solid rgba(182, 96, 112, .46); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 1000; left: 16px; top: -60px; padding: 10px 14px; background: var(--ink); color: white; border-radius: var(--radius-sm); }
.skip-link:focus { top: 16px; }
.boot-loading { min-height: 100svh; overflow: hidden; background: var(--theme-background, #fffaf6); color: var(--color-text, var(--ink)); }
.boot-loading__header { min-height: 76px; padding: 0 max(40px, calc((100vw - 1360px) / 2)); display: grid; grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr); align-items: center; gap: 28px; border-bottom: 1px solid var(--color-border, var(--line)); background: rgb(255 255 255 / 96%); }
.boot-loading__wordmark { display: inline-flex; align-items: center; width: 205px; height: 60px; }
.boot-loading__wordmark .brand-logo { width: auto; max-width: 205px; height: 60px; object-fit: contain; }
.boot-loading__nav { display: flex; gap: 14px; }.boot-loading__nav i, .boot-loading__avatar, .boot-loading__title, .boot-loading__hero > div, .boot-loading__hero span i, .boot-loading__cards i { display: block; border-radius: 999px; background: linear-gradient(100deg, var(--theme-soft, #f3eaf0) 0%, var(--theme-surface, #fff) 48%, var(--theme-soft, #f3eaf0) 100%); background-size: 200% 100%; animation: boot-shimmer 1.45s linear infinite; }
.boot-loading__nav i { width: 122px; height: 14px; }.boot-loading__avatar { width: 38px; height: 38px; justify-self: end; }
.boot-loading__main { width: min(1360px, calc(100% - 80px)); margin: 0 auto; padding: 48px 0 88px; }.boot-loading__title { width: 220px; height: 36px; margin-bottom: 30px; border-radius: 15px; }.boot-loading__hero { min-height: 282px; display: grid; grid-template-columns: minmax(180px, 3fr) minmax(250px, 4fr) minmax(300px, 5fr); gap: 24px; align-items: center; }.boot-loading__hero > div { width: min(100%, 230px); height: 280px; justify-self: center; border-radius: 21px; }.boot-loading__hero span { display: grid; gap: 18px; }.boot-loading__hero span i { height: 22px; border-radius: 10.5px; }.boot-loading__hero span i:nth-child(2) { width: 74%; }.boot-loading__hero span i:nth-child(3) { width: 48%; }.boot-loading__cards { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }.boot-loading__cards i { height: 180px; border-radius: 24px; }
@keyframes boot-shimmer { to { background-position: -200% 0; } }

.image-reveal { opacity: 0; transition: opacity 180ms cubic-bezier(.2, 0, 0, 1); }
.image-reveal.is-ready { opacity: 1; }
.eyebrow, .kicker { margin-bottom: 10px; color: var(--rose-deep); font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.kicker { color: var(--ink-faint); }
.quiet-copy { color: var(--ink-soft); max-width: 520px; }
.positive { color: #55704c; }

.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--rose); border-radius: 999px; padding: 10px 20px; background: var(--rose); color: #fff; cursor: pointer; font-weight: 600; transition: transform 140ms var(--ease), background 140ms, color 140ms, border-color 140ms; }
.button:hover:not(:disabled) { transform: translateY(-1px); background: var(--rose-deep); }
.button:active:not(:disabled) { transform: translateY(0) scale(.98); }
.button:disabled { opacity: .4; cursor: not-allowed; }
.button svg { width: 17px; height: 17px; }
.button--secondary { border-color: var(--line-strong); background: transparent; color: var(--ink); }
.button--secondary:hover:not(:disabled), .button--ghost:hover:not(:disabled) { background: var(--surface); }
.button--ghost { border-color: transparent; background: transparent; color: var(--ink); }
.button--small { min-height: 38px; padding: 7px 15px; font-size: 13px; }
.text-link { color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.text-link:hover { color: var(--rose-deep); }
.back-link { display: inline-block; margin-bottom: 28px; color: var(--ink-soft); }
.icon-button { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; cursor: pointer; font-size: 24px; }
.icon-button:hover { background: var(--surface-soft); }

.wordmark { display: inline-flex; align-items: center; gap: 11px; font-size: 17px; letter-spacing: -.02em; }
.wordmark > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 13.5px; background: var(--ink); color: var(--paper); font-family: Georgia, serif; font-size: 20px; }

.public-header { height: 82px; max-width: 1280px; margin: 0 auto; padding: 0 34px; display: flex; align-items: center; justify-content: space-between; }
.public-header nav { display: flex; align-items: center; gap: 24px; }
.hero { max-width: 1280px; min-height: calc(100vh - 82px); margin: 0 auto; padding: 56px 34px 92px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(330px, .6fr); gap: clamp(56px, 8vw, 120px); align-items: center; }
.hero__copy { padding-bottom: 50px; }
.hero h1 { max-width: 800px; font-size: clamp(54px, 7vw, 96px); }
.hero h1 em { color: var(--rose-deep); font-weight: inherit; }
.hero__lead { max-width: 650px; margin-bottom: 34px; color: var(--ink-soft); font-size: clamp(17px, 2vw, 21px); line-height: 1.58; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__note { margin: 18px 0 0; color: var(--ink-faint); font-size: 13px; }
.hero-artifact { position: relative; padding: 12px; border: 1px solid var(--line); border-radius: 33px; background: var(--surface); box-shadow: var(--shadow-float); transform: rotate(1.5deg); }
.hero-artifact::before { content: ''; position: absolute; inset: -18px auto auto -26px; width: 84px; height: 36px; background: rgba(222, 207, 176, .75); transform: rotate(-12deg); }
.hero-artifact__head { padding: 8px 8px 14px; display: flex; justify-content: space-between; color: var(--ink-soft); font-size: 13px; }
.hero-artifact__head strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.hero-artifact img { width: 100%; aspect-ratio: 4 / 5; border-radius: 18px; object-fit: cover; }
.hero-artifact__caption { padding: 18px 8px 8px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
.hero-artifact__caption span { color: var(--ink-soft); font-size: 12px; }
.hero-artifact__caption .progress { grid-column: 1 / -1; margin-top: 8px; }
.public-proof { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 34px; display: flex; justify-content: center; align-items: center; gap: 22px; color: var(--ink-soft); font-size: 13px; }
.public-proof p { margin: 0; }
.public-proof span { color: var(--rose); }

.auth-layout { max-width: 1100px; min-height: calc(100vh - 82px); margin: 0 auto; padding: 72px 34px; display: grid; grid-template-columns: 1fr 420px; gap: 100px; align-items: center; }
.auth-intro h1 { max-width: 600px; }
.auth-intro > p:not(.eyebrow) { max-width: 500px; color: var(--ink-soft); font-size: 18px; }
.auth-quote { max-width: 500px; margin-top: 54px; padding-top: 24px; border-top: 1px solid var(--line); font-family: Georgia, serif; font-size: 22px; color: var(--rose-deep); }
.auth-panel { padding: 34px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.auth-panel > p { margin: 20px 0 0; color: var(--ink-soft); font-size: 13px; }
.auth-panel a:not(.button) { text-decoration: underline; text-underline-offset: 3px; }
.auth-form, .modal-form, .form-stack { display: grid; gap: 18px; }
label { display: grid; gap: 7px; color: var(--ink-soft); font-size: 13px; font-weight: 600; }
input, select, textarea { width: 100%; min-height: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--surface); color: var(--ink); font-weight: 400; }
textarea { resize: vertical; }
input[readonly] { border-color: var(--line); background: var(--surface-soft); color: var(--ink-soft); }
.auth-form .button { margin-top: 6px; }
.form-success strong { font-family: Georgia, serif; font-size: 28px; font-weight: 400; }
.form-success p { color: var(--ink-soft); }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--sidebar); padding: 30px 20px 22px; border-right: 1px solid var(--line); background: rgba(244, 239, 231, .96); display: flex; flex-direction: column; }
.sidebar .wordmark { margin: 0 10px 40px; }
.sidebar nav { display: grid; gap: 4px; }
.nav-item { min-height: 44px; padding: 10px 12px; border-radius: 15px; display: flex; align-items: center; gap: 12px; color: var(--ink-soft); font-size: 14px; font-weight: 500; }
.nav-item svg { width: 18px; height: 18px; }
.nav-item:hover { background: rgba(255, 255, 255, .5); color: var(--ink); }
.nav-item.is-active { background: var(--surface); color: var(--ink); box-shadow: inset 3px 0 var(--rose); }
.sidebar__footer { margin-top: auto; display: grid; gap: 14px; }
.sidebar__footer > .text-link { margin-left: 12px; font-size: 12px; }
.profile-link { padding: 10px; border-radius: 18px; display: flex; gap: 10px; align-items: center; }
.profile-link:hover, .profile-link.is-active { background: var(--surface); }
.profile-link > span:last-child { display: grid; line-height: 1.2; }
.profile-link small { margin-top: 4px; color: var(--ink-faint); }
.avatar { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--rose-soft); color: var(--rose-deep); font-family: Georgia, serif; font-size: 18px; }
.main-content { min-height: 100vh; margin-left: var(--sidebar); }
.bottom-nav { display: none; }
.page { width: min(1280px, 100%); margin: 0 auto; padding: 66px clamp(30px, 4vw, 64px) 100px; }
.page--narrow { max-width: 1000px; }
.page-header { margin-bottom: 48px; }
.page-header h1 { margin: 0; }
.page-header--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.header-note { max-width: 360px; margin: 0 0 4px; color: var(--ink-soft); }
.section { margin-top: 56px; }
.section-heading { margin-bottom: 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.section-heading .eyebrow { margin-bottom: 7px; }
.section-heading--wrap { align-items: center; }

.progress { height: 8px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--theme-strong) 10%, transparent); }
.progress span { display: block; height: 100%; border-radius: inherit; background: var(--rose); transition: width 350ms var(--ease); }
.progress--compact { height: 5px; }

.book-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 22px; }
.book-grid--home { grid-template-columns: 1.2fr 1fr 1fr; }
.book-card { min-width: 0; display: grid; grid-template-columns: 43% 1fr; border-top: 1px solid var(--line-strong); padding-top: 14px; gap: 16px; }
.book-card--featured { grid-row: span 1; }
.book-cover { overflow: hidden; border-radius: 15px; background: var(--surface-soft); }
.book-cover img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 300ms var(--ease); }
.book-card:hover .book-cover img { transform: scale(1.025); }
.book-card__body { min-width: 0; display: flex; flex-direction: column; }
.book-card__body h3 a:hover { color: var(--rose-deep); }
.book-card__body > p:not(.kicker) { color: var(--ink-soft); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.book-card__body > small { color: var(--ink-faint); }
.book-progress { margin-top: auto; display: flex; justify-content: space-between; gap: 10px; font-size: 12px; font-variant-numeric: tabular-nums; }
.book-progress > strong { font-size: 16px; }
.book-card .progress { margin-top: 8px; }
.book-meta { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--ink-faint); font-size: 11px; }
.status { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border-radius: 999px; background: var(--surface-soft); color: var(--ink-soft); font-size: 11px; white-space: nowrap; }
.status--in_progress { background: #f1dfc5; color: #724c25; }
.status--completed { background: var(--sage-soft); color: #43523d; }
.book-card__footer { margin-top: 14px; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-link { display: inline-flex; align-items: center; gap: 5px; color: var(--rose-deep); font-size: 12px; font-weight: 700; }
.card-link svg { width: 15px; height: 15px; transition: transform 160ms var(--ease); }
.card-link:hover svg { transform: translateX(3px); }
.book-card__footer .icon-button { width: 32px; height: 32px; color: var(--ink-faint); }
.catalog-state { color: var(--sage); font-size: 12px; font-weight: 700; }

.home-lower { display: grid; grid-template-columns: 1.45fr .8fr; gap: 38px; margin-top: 70px; }
.home-lower .section { margin-top: 0; }
.mini-favorites { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.mini-favorites a { min-width: 0; padding: 10px; background: var(--paper); display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; }
.mini-favorites img { width: 72px; aspect-ratio: 1; object-fit: cover; border-radius: 9px; }
.mini-favorites span { min-width: 0; display: grid; }
.mini-favorites strong, .mini-favorites small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-favorites small { margin-top: 4px; color: var(--ink-faint); }
.achievement-summary { padding: 28px; border-radius: var(--radius-lg); background: var(--ink); color: var(--paper); display: grid; grid-template-columns: 72px 1fr; gap: 20px; align-items: start; }
.achievement-summary__level { width: 72px; height: 72px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; font-family: Georgia, serif; font-size: 34px; }
.achievement-summary .eyebrow { color: var(--theme-accent, #ff7b95); }
.achievement-summary h2 { margin-bottom: 16px; }
.achievement-summary .progress { background: rgba(255,255,255,.15); }
.achievement-summary p:last-of-type { margin: 16px 0 8px; color: var(--theme-line, #c9c4ba); font-size: 13px; }
.achievement-summary .text-link { color: var(--paper); }

.segmented { padding: 4px; border: 1px solid var(--line); border-radius: 999px; display: flex; background: rgba(255,255,255,.35); }
.segmented button { min-height: 38px; border: 0; border-radius: 999px; padding: 7px 16px; background: transparent; cursor: pointer; }
.segmented button.is-active { background: var(--ink); color: white; }
.toolbar { margin-bottom: 32px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.search-field { width: min(360px, 100%); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips button { min-height: 38px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 12px; }
.chips button:hover { border-color: var(--line-strong); color: var(--ink); }
.chips button.is-active { border-color: var(--ink); background: var(--ink); color: white; }

.book-hero { display: grid; grid-template-columns: 280px minmax(0, 620px); gap: clamp(38px, 6vw, 88px); align-items: center; }
.book-hero > img { width: 100%; border-radius: 24px; box-shadow: 0 16px 42px rgba(54, 44, 34, .16); transform: rotate(-1deg); }
.book-hero h1 { font-size: clamp(48px, 6vw, 74px); }
.book-hero__lead { max-width: 570px; color: var(--ink-soft); font-size: 17px; }
.book-hero__metric { margin: 30px 0 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.book-hero__metric strong { font-family: Georgia, serif; font-size: 44px; font-weight: 400; font-variant-numeric: tabular-nums; }
.book-hero__metric span { color: var(--ink-soft); }
.book-hero__facts { margin-top: 12px; display: flex; gap: 18px; color: var(--ink-faint); font-size: 12px; }
.illustration-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 16px; }
.illustration-card { min-width: 0; position: relative; }
.illustration-preview { width: 100%; padding: 0; overflow: hidden; border: 0; border-radius: 15px; background: var(--surface-soft); cursor: zoom-in; }
.illustration-preview img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 260ms var(--ease); }
.illustration-preview:hover img { transform: scale(1.025); }
.illustration-card__body { min-height: 74px; padding: 12px 2px 8px; display: grid; grid-template-columns: 1fr 38px; gap: 8px; }
.illustration-card__body > div { min-width: 0; }
.illustration-card__body h3 { margin: 2px 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.illustration-card__body p { margin: 0; color: var(--ink-faint); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.illustration-number { color: var(--rose-deep); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.favorite-button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-faint); cursor: pointer; }
.favorite-button svg { width: 19px; height: 19px; }
.favorite-button:hover, .favorite-button.is-active { color: var(--rose-deep); background: var(--rose-soft); }
.favorite-button.is-active svg { fill: currentColor; }
.status-control { padding: 3px; border: 1px solid var(--line); border-radius: 13.5px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: rgba(255,255,255,.3); }
.status-control button { min-height: 32px; padding: 4px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-faint); cursor: pointer; font-size: 10px; white-space: nowrap; }
.status-control button:hover { color: var(--ink); }
.status-control button.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 4px color-mix(in srgb, var(--theme-strong) 10%, transparent); font-weight: 700; }
.rewarded-note { display: block; margin-top: 7px; color: var(--sage); font-size: 10px; }

.palette-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 56px; align-items: start; }
.color-list { border-top: 1px solid var(--line); }
.color-row { width: 100%; min-height: 68px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--line); background: transparent; display: grid; grid-template-columns: 44px 1fr auto; gap: 13px; align-items: center; text-align: left; cursor: pointer; }
.color-row:hover { background: rgba(255,255,255,.35); }
.color-row.is-selected { box-shadow: inset 3px 0 var(--rose); background: var(--surface); }
.swatch { width: 36px; height: 36px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 3px var(--paper); }
.color-row > span:nth-child(2) { display: grid; }
.color-row small { color: var(--ink-faint); }
.color-row code { color: var(--ink-faint); font-size: 11px; }
.palette-composer { position: sticky; top: 36px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.palette-composer > p:not(.eyebrow) { color: var(--ink-soft); font-size: 13px; }
.palette-composer form { display: grid; gap: 15px; }
.selected-swatches { min-height: 48px; margin: 18px 0; display: flex; }
.selected-swatches span { width: 46px; height: 46px; margin-left: -8px; border: 3px solid var(--surface); border-radius: 50%; background: var(--swatch); }
.selected-swatches span:first-child { margin-left: 0; }
.saved-palettes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.saved-palettes article { padding: 18px; border-top: 1px solid var(--line-strong); }
.saved-palettes article > p:not(.kicker) { color: var(--ink-soft); font-size: 13px; }
.saved-palettes small { color: var(--ink-faint); }
.palette-stripe { height: 64px; margin-bottom: 18px; display: flex; overflow: hidden; border-radius: 12px; }
.palette-stripe span { flex: 1; background: var(--swatch); }

.achievement-hero { min-height: 300px; padding: 46px; border-radius: 30px; background: var(--ink); color: var(--paper); display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.achievement-hero .eyebrow { color: var(--theme-accent, #ff7b95); }
.achievement-hero h1 { margin-bottom: 12px; font-size: clamp(62px, 8vw, 100px); font-variant-numeric: tabular-nums; }
.achievement-hero h1 span { font-family: inherit; color: var(--theme-line, #c9c4ba); font-size: .34em; }
.achievement-hero p { margin: 0; color: var(--theme-line, #c9c4ba); }
.achievement-hero > div:last-child { width: min(330px, 100%); }
.achievement-hero > div:last-child > span { display: block; margin-bottom: 12px; font-size: 12px; text-align: right; }
.achievement-hero .progress { background: rgba(255,255,255,.16); }
.achievement-list { border-top: 1px solid var(--line-strong); }
.achievement-row { min-height: 88px; padding: 16px 4px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 48px 1fr auto; gap: 16px; align-items: center; opacity: .56; }
.achievement-row.is-unlocked { opacity: 1; }
.achievement-row > span { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.achievement-row h3 { margin: 0 0 2px; }
.achievement-row p { margin: 0; color: var(--ink-soft); }
.achievement-row > strong { color: var(--ink-faint); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.achievement-row.is-unlocked > strong { color: var(--sage); }
.reward-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.reward-grid article { min-height: 220px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-md); display: flex; flex-direction: column; }
.reward-grid article > p:not(.kicker) { color: var(--ink-soft); font-size: 13px; }
.reward-grid article > div { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.reward-grid article > div > strong { font-size: 13px; }
.ledger-list { border-top: 1px solid var(--line-strong); }
.ledger-list > div { min-height: 52px; padding: 10px 2px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 110px 1fr 60px; gap: 16px; align-items: center; }
.ledger-list time { color: var(--ink-faint); font-size: 12px; }
.ledger-list strong { text-align: right; font-variant-numeric: tabular-nums; }

.settings-form > section { padding: 30px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 280px 1fr; gap: 60px; }
.settings-form > section h2 { margin-bottom: 10px; font-family: inherit; font-size: 19px; font-weight: 600; }
.settings-form > section p { color: var(--ink-soft); font-size: 13px; }
.settings-actions { position: sticky; bottom: 18px; margin-top: 30px; padding: 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,253,249,.92); box-shadow: 0 8px 32px color-mix(in srgb, var(--theme-strong) 10%, transparent); display: flex; justify-content: flex-end; gap: 8px; backdrop-filter: blur(10px); }

.admin-shell { min-height: 100vh; background: #eee9e1; }
.admin-shell > header { height: 72px; padding: 0 32px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.admin-main { max-width: 1200px; margin: 0 auto; padding: 60px 34px 100px; }
.admin-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 24px; }
.admin-grid section { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.admin-grid section:last-child { grid-column: 1 / -1; }
.admin-grid .section-heading { align-items: center; }
.admin-grid h2 { font-family: inherit; font-size: 19px; font-weight: 600; }
.admin-table > div { min-height: 54px; padding: 8px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.admin-table > div > span:first-child { display: grid; }
.admin-table small { color: var(--ink-faint); }
.admin-analytics, .admin-users { margin-bottom: 24px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.admin-analytics__heading, .admin-users__heading { display: flex; justify-content: space-between; align-items: start; gap: 24px; }
.admin-analytics h2, .admin-users h2 { font-family: inherit; font-size: 24px; font-weight: 600; }
.admin-analytics__heading p, .admin-users__heading p, .admin-analytics__note { margin-top: 6px; color: var(--ink-soft); font-size: 14px; }
.admin-periods { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-periods button { padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; font: inherit; font-size: 13px; }
.admin-periods button.is-selected { border-color: var(--theme-accent, #ff7b95); background: var(--theme-action, #ff7b95); color: #fff; }
.admin-periods button:focus-visible, .admin-users input:focus-visible, .admin-user-row summary:focus-visible { outline: 2px solid var(--theme-accent, #ff7b95); outline-offset: 3px; }
.admin-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 24px; border-block: 1px solid var(--line); }
.admin-metrics > div { display: grid; gap: 10px; min-width: 0; padding: 22px 18px; }
.admin-metrics > div + div { border-left: 1px solid var(--line); }
.admin-metrics span { color: var(--ink-soft); font-size: 13px; }
.admin-metrics strong { font-size: 29px; font-weight: 500; font-variant-numeric: tabular-nums; }
.admin-analytics__note { margin-top: 16px; }
.admin-trend { display: flex; align-items: end; gap: 4px; height: 88px; margin-top: 22px; }
.admin-trend > div { display: flex; align-items: end; flex: 0 1 20px; height: 100%; min-width: 8px; }
.admin-trend > div span { display: block; width: 100%; min-height: 5px; border-radius: 3px 3px 0 0; background: var(--theme-accent, #ff7b95); }
.admin-users__heading label { display: grid; gap: 6px; flex: 0 0 260px; color: var(--ink-soft); font-size: 12px; }
.admin-users__heading input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; }
.admin-users__table { margin-top: 22px; }
.admin-users__labels, .admin-user-row summary { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(4, minmax(88px, .8fr)) minmax(130px, 1fr); gap: 12px; align-items: center; }
.admin-users__labels { padding: 10px 12px; color: var(--ink-soft); font-size: 12px; }
.admin-user-row { border-top: 1px solid var(--line); }
.admin-user-row[hidden] { display: none; }
.admin-user-row summary { padding: 13px 12px; cursor: pointer; list-style: none; font-size: 14px; }
.admin-user-row summary::-webkit-details-marker { display: none; }
.admin-user-row summary:hover { background: color-mix(in srgb, var(--theme-accent) 7.000000000000001%, transparent); }
.admin-user-row summary span:first-child { display: grid; gap: 3px; min-width: 0; }
.admin-user-row summary strong { font-weight: 600; }
.admin-user-row small { color: var(--ink-soft); font-size: 12px; overflow-wrap: anywhere; }
.admin-user-row__detail { padding: 15px 18px 20px; background: color-mix(in srgb, var(--theme-accent) 5%, transparent); font-size: 13px; }
.admin-user-row__detail p { margin-bottom: 10px; color: var(--ink-soft); }
.admin-user-row__detail > div { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-book-chip { padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.admin-book-chip b { font-variant-numeric: tabular-nums; }
.admin-users__empty { padding: 20px; text-align: center; color: var(--ink-soft); }
.admin-tabs { display: flex; gap: 8px; overflow-x: auto; margin: 6px 0 26px; padding: 0 0 12px; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.admin-tabs button { flex: 0 0 auto; padding: 11px 17px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; transition: background-color 180ms ease, border-color 180ms ease; }
.admin-tabs button:hover { background: color-mix(in srgb, var(--theme-accent) 8%, transparent); }
.admin-tabs button[aria-pressed="true"] { border-color: var(--line); background: var(--surface); font-weight: 500; }
.admin-tabs button:focus-visible { outline: 2px solid var(--theme-accent, #ff7b95); outline-offset: 2px; }
.admin-panel[hidden] { display: none; }
.admin-panel .admin-grid { display: block; }
@media (prefers-reduced-motion: reduce) { .admin-tabs button { transition: none; } }
.admin-insights { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.admin-insights > div { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; }
.admin-insights span, .admin-insights small, .admin-chart__heading span, .admin-chart__ticks, .admin-popular small { color: var(--ink-soft); font-size: 13px; }
.admin-insights strong { font-size: 24px; font-weight: 500; line-height: 1.2; overflow-wrap: anywhere; }
.admin-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 30px; }
.admin-chart { min-width: 0; }
.admin-chart__heading, .admin-chart__ticks { display: flex; justify-content: space-between; gap: 12px; }
.admin-chart__heading strong { font-weight: 500; }
.admin-chart__plot { display: flex; align-items: flex-end; gap: 3px; height: 128px; margin-top: 16px; padding: 0 0 1px; border-bottom: 1px solid var(--line); }
.admin-chart__day { position: relative; flex: 1 1 0; align-self: stretch; min-width: 2px; margin: 0; padding: 0; border: 0; background: transparent; cursor: crosshair; }
.admin-chart__bar { position: absolute; right: 0; bottom: 0; left: 0; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--theme-accent, #ff7b95); }
.admin-chart__plot--blue .admin-chart__bar { background: var(--theme-decoration, #bac6f7); }
.admin-chart__day:is(:hover, :focus-visible) { z-index: 2; }
.admin-chart__day:is(:hover, :focus-visible) .admin-chart__bar { filter: brightness(.88); }
.admin-chart__day:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.admin-chart__tooltip { position: absolute; top: 4px; left: 50%; z-index: 3; width: max-content; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); box-shadow: 0 6px 20px rgba(36, 23, 36, .13); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateX(-50%); }
.admin-chart__day:is(:hover, :focus-visible) .admin-chart__tooltip { opacity: 1; }
.admin-chart__day:first-child .admin-chart__tooltip { left: 0; transform: none; }
.admin-chart__day:last-child .admin-chart__tooltip { right: 0; left: auto; transform: none; }
.admin-chart__ticks { margin-top: 8px; }
.admin-popular { margin-top: 28px; }
.admin-popular h3 { font-size: 17px; font-weight: 500; }
.admin-popular ol { list-style: none; margin: 12px 0 0; padding: 0; }
.admin-popular li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.admin-popular li strong { font-variant-numeric: tabular-nums; }
.admin-popular p { margin-top: 8px; color: var(--ink-soft); }
@media (max-width: 1100px) { .admin-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .admin-charts { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .admin-insights { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .admin-analytics__heading, .admin-users__heading { flex-direction: column; }.admin-users__heading label { flex: none; width: 100%; }.admin-users__table { overflow-x: auto; }.admin-users__labels, .admin-user-row summary { min-width: 760px; }.admin-metrics { grid-template-columns: repeat(2, 1fr); }.admin-metrics > div:nth-child(3) { border-left: 0; }.admin-metrics > div:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 560px) { .admin-main { padding: 32px 16px 70px; }.admin-analytics, .admin-users { padding: 18px; }.admin-metrics strong { font-size: 23px; }.admin-shell > header { padding-inline: 16px; }.admin-shell > header .wordmark strong { display: none; } }

.overlay { position: fixed; z-index: 100; inset: 0; padding: 24px; background: rgba(32,29,24,.52); display: grid; place-items: center; backdrop-filter: blur(5px); animation: fade-in 180ms ease-out; }
.sheet { width: min(900px, 100%); max-height: calc(100vh - 48px); overflow: auto; padding: 28px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-float); animation: sheet-in 240ms var(--ease); }
.sheet__header { margin-bottom: 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.sheet__header h2 { margin-top: 4px; }
.illustration-detail { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; }
.illustration-detail > img { width: 100%; border-radius: 18px; }
.illustration-detail__controls { display: flex; flex-direction: column; }
.illustration-detail__controls > p { color: var(--ink-soft); }
.favorite-line { margin-bottom: 24px; padding: 0; border: 0; background: transparent; display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); cursor: pointer; font-weight: 600; }
.favorite-line.is-active { color: var(--rose-deep); }
.favorite-line.is-active svg { fill: currentColor; }
.status-control--large { margin-top: auto; }
.status-control--large button { min-height: 42px; font-size: 12px; }
.detail-nav { margin-top: 28px; display: flex; justify-content: space-between; }
.detail-nav button { min-height: 38px; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; }
.detail-nav button:disabled { opacity: .3; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.has-overlay { overflow: hidden; }

.toast { position: fixed; z-index: 200; right: 24px; bottom: 24px; width: min(390px, calc(100vw - 32px)); min-height: 54px; padding: 12px 14px 12px 18px; border-radius: 15px; background: var(--ink); color: white; box-shadow: var(--shadow-float); display: flex; align-items: center; justify-content: space-between; gap: 12px; animation: toast-in 240ms var(--ease); }
.toast--error { background: var(--danger); }
.toast button { border: 0; background: transparent; color: white; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.empty-state { min-height: 280px; padding: 48px 24px; border-top: 1px solid var(--line); display: grid; place-items: center; align-content: center; text-align: center; }
.empty-state__mark { width: 52px; height: 52px; margin-bottom: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--rose-soft); color: var(--rose-deep); font-family: Georgia, serif; font-size: 25px; }
.empty-state h2 { margin-bottom: 10px; }
.empty-state p { max-width: 460px; margin-bottom: 22px; color: var(--ink-soft); }
.skeleton { border-radius: 12px; background: linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,.8), rgba(255,255,255,.25)); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
.skeleton--title { width: 45%; height: 58px; margin-bottom: 46px; }
.skeleton-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.skeleton--panel { height: 260px; }

@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }

@media (max-width: 1100px) {
  :root { --sidebar: 212px; }
  .book-grid, .book-grid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .illustration-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reward-grid { grid-template-columns: repeat(2, 1fr); }
  .hero { grid-template-columns: 1fr 340px; gap: 52px; }
}

@media (max-width: 820px) {
  :root { --sidebar: 0px; }
  body { padding-bottom: 76px; }
  h1 { font-size: 46px; }
  .sidebar { display: none; }
  .main-content { margin-left: 0; }
  .bottom-nav { position: fixed; z-index: 50; inset: auto 10px 10px; height: 64px; padding: 5px; border: 1px solid var(--line); border-radius: 27px; background: rgba(255,253,249,.94); box-shadow: 0 12px 40px color-mix(in srgb, var(--theme-strong) 18%, transparent); display: grid; grid-template-columns: repeat(5, 1fr); backdrop-filter: blur(12px); }
  .bottom-nav .nav-item { min-height: 52px; padding: 5px 2px; border-radius: 19.5px; display: flex; flex-direction: column; justify-content: center; gap: 3px; font-size: 9px; }
  .bottom-nav .nav-item.is-active { box-shadow: none; background: var(--rose-soft); color: var(--rose-deep); }
  .bottom-nav .nav-item svg { width: 19px; height: 19px; }
  .page { padding: 38px 22px 80px; }
  .page-header { margin-bottom: 36px; }
  .page-header--split { align-items: flex-start; flex-direction: column; gap: 20px; }
  .header-note { display: none; }
  .home-lower, .palette-layout { grid-template-columns: 1fr; }
  .palette-composer { position: static; }
  .illustration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .book-hero { grid-template-columns: 180px 1fr; gap: 34px; }
  .book-hero h1 { font-size: 48px; }
  .book-grid, .book-grid--home { grid-template-columns: repeat(2, 1fr); }
  .book-card { grid-template-columns: 1fr; }
  .book-card__body > p:not(.kicker) { -webkit-line-clamp: 2; }
  .public-header { height: 70px; padding: 0 22px; }
  .public-header nav > a:first-child { display: none; }
  .hero { min-height: auto; padding: 52px 22px 80px; grid-template-columns: 1fr; }
  .hero__copy { padding-bottom: 0; }
  .hero h1 { font-size: clamp(50px, 13vw, 78px); }
  .hero-artifact { width: min(440px, 90%); margin: 0 auto; }
  .public-proof { overflow-x: auto; justify-content: flex-start; }
  .public-proof p { white-space: nowrap; }
  .auth-layout { grid-template-columns: 1fr; gap: 38px; padding: 48px 22px; }
  .auth-quote { display: none; }
  .settings-form > section { grid-template-columns: 1fr; gap: 16px; }
  .achievement-hero { flex-direction: column; align-items: stretch; }
  .achievement-hero > div:last-child { width: 100%; }
  .saved-palettes { grid-template-columns: repeat(2, 1fr); }
  .admin-grid { grid-template-columns: 1fr; }
  .admin-grid section:last-child { grid-column: auto; }
}

@media (max-width: 560px) {
  body { font-size: 14px; }
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
  .public-header .wordmark strong { display: none; }
  .hero { gap: 52px; }
  .hero h1 { font-size: 52px; }
  .hero__actions { display: grid; }
  .hero__actions .button { width: 100%; }
  .hero-artifact { width: 94%; }
  .auth-intro h1 { font-size: 48px; }
  .auth-panel { padding: 24px; }
  .page { padding-inline: 18px; }
  .section { margin-top: 44px; }
  .section-heading { align-items: flex-start; }
  .section-heading--wrap { flex-direction: column; }
  .section-heading .text-link { flex: 0 0 auto; }
  .book-grid, .book-grid--home { grid-template-columns: 1fr; gap: 26px; }
  .book-card { grid-template-columns: 124px 1fr; }
  .book-card__body > p:not(.kicker) { display: none; }
  .home-lower { margin-top: 50px; }
  .mini-favorites { grid-template-columns: 1fr; }
  .achievement-summary { grid-template-columns: 56px 1fr; padding: 22px; }
  .achievement-summary__level { width: 56px; height: 56px; font-size: 26px; }
  .segmented { width: 100%; }
  .segmented button { flex: 1; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .chips { flex-wrap: nowrap; max-width: calc(100vw - 36px); overflow-x: auto; padding-bottom: 4px; }
  .chips button { flex: 0 0 auto; }
  .book-hero { grid-template-columns: 110px 1fr; gap: 20px; align-items: start; }
  .book-hero h1 { font-size: 35px; }
  .book-hero__lead { display: none; }
  .book-hero__metric { margin-top: 14px; display: block; }
  .book-hero__metric strong { font-size: 32px; }
  .book-hero__metric span { display: block; margin-top: 2px; font-size: 11px; }
  .book-hero__facts { display: grid; gap: 3px; }
  .illustration-grid { gap: 24px 10px; }
  .illustration-card__body { grid-template-columns: 1fr 36px; }
  .status-control { margin-inline: -2px; }
  .status-control button { font-size: 9px; }
  .rewarded-note { display: none; }
  .color-row { grid-template-columns: 42px 1fr; }
  .color-row code { display: none; }
  .saved-palettes, .reward-grid { grid-template-columns: 1fr; }
  .achievement-hero { min-height: 0; padding: 28px 22px; }
  .achievement-hero h1 { font-size: 62px; }
  .achievement-row { grid-template-columns: 32px 1fr; }
  .achievement-row > strong { grid-column: 2; }
  .ledger-list > div { grid-template-columns: 80px 1fr 38px; gap: 8px; font-size: 12px; }
  .settings-actions { border-radius: 24px; flex-direction: column; }
  .sheet { max-height: calc(100vh - 16px); padding: 20px; border-radius: 24px; }
  .overlay { padding: 8px; align-items: end; }
  .illustration-detail { grid-template-columns: 1fr; }
  .illustration-detail > img { max-height: 44vh; object-fit: cover; }
  .status-control--large { margin-top: 12px; }
  .form-row { grid-template-columns: 1fr; }
  .toast { right: 16px; bottom: 86px; }
  .skeleton-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Public landing — intentionally shares the app's warm tokens and typography. */
.landing-page {
  --landing-canvas: #f4efe7;
  --landing-surface: #fbf8f2;
  --landing-surface-soft: #f4e6d8;
  --landing-ink: var(--theme-ink, #292721);
  --landing-ink-soft: #44423c;
  --landing-muted: #6a6862;
  --landing-faint: #9d9690;
  --landing-line: #d7cfc9;
  --landing-wine: var(--theme-accent, #ff7b95);
  --landing-rose: var(--theme-accent, #ff7b95);
  --landing-blush: #ebdde0;
  --landing-pink-soft: #edcecd;
  --landing-sage: #aab39c;
  --landing-dark-action: var(--theme-ink, #292721);
  --landing-on-dark: #fffdf8;
  background: var(--landing-canvas);
  color: var(--landing-ink);
  overflow: clip;
}
.landing-page img { height: auto; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.landing-container { width: min(1280px, calc(100% - 80px)); margin-inline: auto; }
.brand-logo { width: 174px; height: auto; display: block; }
.public-logo { display: inline-flex; align-items: center; }
.public-header { position: relative; z-index: 40; width: min(1280px, calc(100% - 80px)); max-width: none; height: 82px; padding: 0; border-bottom: 1px solid rgba(215,207,201,.72); }
.public-header nav { display: flex; align-items: center; gap: 24px; }
.public-header .public-login { color: var(--landing-muted); font-size: 14px; font-weight: 600; }
.public-header .public-login:hover { color: var(--landing-wine); }
.public-menu-button { display: none; width: 44px; height: 44px; border: 1px solid var(--landing-line); border-radius: 50%; background: transparent; place-items: center; align-content: center; gap: 4px; cursor: pointer; }
.public-menu-button > span:not(.sr-only) { width: 18px; height: 1px; background: currentColor; transition: transform 180ms var(--ease), opacity 180ms; }
.public-menu-button[aria-expanded="true"] > span:first-child { transform: translateY(2.5px) rotate(45deg); }
.public-menu-button[aria-expanded="true"] > span:nth-child(2) { transform: translateY(-2.5px) rotate(-45deg); }
.public-menu-button[aria-expanded="true"] > span:nth-child(3) { display: none; }

.landing-eyebrow { margin: 0 0 18px; color: var(--landing-wine); font-size: 12px; line-height: 1.4; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; }
.landing-page h1, .landing-page h2 { color: var(--landing-ink); font-family: Georgia, Cambria, "Times New Roman", serif; font-weight: 400; letter-spacing: -.038em; }
.landing-page h2 { font-size: clamp(48px, 5.1vw, 76px); line-height: .99; }
.landing-page h2 em { color: var(--landing-wine); font-weight: inherit; }
.landing-page h3 { letter-spacing: -.02em; }
.landing-page .button { border-color: var(--landing-dark-action); background: var(--landing-dark-action); color: var(--landing-on-dark); }
.landing-page .button:hover { border-color: var(--theme-ink, #12110f); background: var(--theme-ink, #12110f); }
.landing-button { min-height: 50px; padding-inline: 25px; }
.landing-link { position: relative; min-height: 44px; display: inline-flex; align-items: center; color: var(--landing-ink-soft); font-size: 14px; font-weight: 600; }
.landing-link::after { content: ''; position: absolute; inset: auto 0 6px; height: 1px; background: currentColor; transform-origin: right; transition: transform 180ms var(--ease); }
.landing-link:hover::after { transform: scaleX(.55); }
.landing-link--arrow { padding-right: 20px; }
.landing-link--arrow::before { content: '↗'; position: absolute; right: 0; transition: transform 180ms var(--ease); }
.landing-link--arrow:hover::before { transform: translate(2px,-2px); }

.landing-hero { min-height: max(710px, calc(100svh - 82px)); padding-block: clamp(68px, 8vw, 118px) clamp(98px, 10vw, 150px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(350px, 5fr); gap: clamp(64px, 8vw, 118px); align-items: center; }
.landing-hero__copy { max-width: 800px; padding-top: 34px; transform: translateY(-22px); }
.landing-hero h1 { max-width: 820px; margin: 0; font-size: clamp(72px, 7.1vw, 108px); line-height: .91; }
.landing-hero h1 em { display: block; color: var(--landing-wine); font-weight: inherit; }
.landing-lead { max-width: 650px; margin: 32px 0 0; color: var(--landing-muted); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.62; }
.landing-actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.landing-note { margin: 18px 0 0; color: var(--landing-faint); font-size: 13px; }
.landing-book-preview { position: relative; width: min(100%, 430px); margin-top: -36px; justify-self: end; padding: 14px; border: 1px solid rgba(41,39,33,.12); border-radius: 33px; background: var(--landing-surface); box-shadow: 0 24px 70px rgba(41,39,33,.1); transform: rotate(1.25deg); transition: transform 300ms var(--ease); }
.landing-book-preview:hover { transform: rotate(.25deg); }
.landing-book-preview::before { content: ''; position: absolute; z-index: 1; top: -15px; left: 27%; width: 98px; height: 34px; background: rgba(220,205,177,.72); transform: rotate(-7deg); }
.landing-book-preview__meta { min-height: 42px; padding: 3px 5px 12px; display: flex; align-items: center; justify-content: space-between; color: var(--landing-muted); font-size: 13px; }
.landing-book-preview__meta strong { color: var(--landing-ink); font-variant-numeric: tabular-nums; }
.landing-book-preview > img { width: 100%; aspect-ratio: 4 / 5; border-radius: 19.5px; object-fit: cover; }
.landing-book-preview__footer { padding: 18px 5px 5px; }
.landing-book-preview__footer > div { display: flex; justify-content: space-between; gap: 16px; }
.landing-book-preview__footer span { color: var(--landing-muted); font-size: 12px; }
.landing-book-preview__footer .progress { margin-top: 13px; }

.landing-section { padding-block: clamp(112px, 12vw, 176px); }
.landing-section-heading { max-width: 950px; margin-bottom: clamp(64px, 7vw, 94px); }
.landing-section-heading h2 { margin: 0; }
.landing-step-list { border-top: 1px solid var(--landing-line); display: grid; grid-template-columns: repeat(3, 1fr); }
.landing-step { min-height: 270px; padding: 36px 34px 0 0; display: grid; grid-template-columns: 72px 1fr; gap: 18px; }
.landing-step + .landing-step { padding-left: 34px; border-left: 1px solid var(--landing-line); }
.landing-step > span { color: var(--landing-wine); font-family: Georgia, serif; font-size: 38px; font-style: italic; }
.landing-step h3 { margin: 7px 0 14px; color: var(--landing-ink); font-size: 20px; }
.landing-step p { max-width: 310px; color: var(--landing-muted); font-size: 15px; line-height: 1.66; }

.landing-feature--collection { background: rgba(251,248,242,.56); }
.landing-feature__grid { display: grid; grid-template-columns: 7fr 4fr; gap: clamp(70px, 9vw, 126px); align-items: center; }
.landing-feature--favorites .landing-feature__grid { grid-template-columns: 4fr 7fr; }
.landing-feature__copy h2 { margin: 0 0 30px; }
.landing-feature__copy > p:not(.landing-eyebrow) { max-width: 530px; margin: 0; color: var(--landing-muted); font-size: 17px; line-height: 1.7; }
.landing-preview-heading { margin-bottom: 24px; padding-bottom: 17px; border-bottom: 1px solid var(--landing-line); display: flex; justify-content: space-between; color: var(--landing-muted); font-size: 13px; }
.landing-preview-heading > span { color: var(--landing-wine); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.landing-preview-heading a { text-decoration: underline; text-underline-offset: 4px; }
.landing-preview-books { display: grid; grid-template-columns: 1.16fr .84fr; gap: 26px; align-items: start; }
.landing-preview-books--single { grid-template-columns: minmax(0, 1fr); }
.landing-preview-books--single article { grid-template-columns: minmax(150px, 34%) minmax(0, 1fr); }
.landing-preview-books article { padding-top: 14px; border-top: 1px solid var(--landing-line); display: grid; grid-template-columns: minmax(105px, 42%) 1fr; gap: 18px; }
.landing-preview-books article:nth-child(2) { margin-top: 54px; }
.landing-preview-books img { width: 100%; aspect-ratio: 4 / 5; border-radius: 16.5px; object-fit: cover; box-shadow: 0 12px 32px rgba(41,39,33,.07); }
.landing-preview-books article > div { min-width: 0; padding-top: 6px; }
.landing-preview-books p { margin: 0 0 12px; color: var(--landing-faint); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.landing-preview-books h3 { margin-bottom: 30px; font-size: 19px; }
.landing-preview-books article > div > span { display: block; margin-bottom: 9px; color: var(--landing-muted); font-size: 11px; }
.landing-preview-books article > div > span strong { color: var(--landing-ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.landing-preview-books small { display: inline-flex; margin-top: 12px; padding: 3px 8px; border-radius: 999px; background: var(--landing-surface-soft); color: var(--landing-muted); font-size: 10px; }

.landing-favorite-preview { position: relative; width: min(100%, 690px); justify-self: end; padding: 26px; border: 1px solid var(--landing-line); border-radius: 30px; background: var(--landing-surface); box-shadow: 0 24px 70px rgba(41,39,33,.09); transform: rotate(-.8deg); }
.landing-paper-label { position: absolute; z-index: 2; top: -18px; left: 32px; padding: 9px 15px; background: rgba(238,220,196,.93); color: var(--landing-wine); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transform: rotate(2deg); }
.landing-favorite-image { position: relative; overflow: hidden; border-radius: 19.5px; }
.landing-favorite-image img { width: 100%; aspect-ratio: 1.42 / 1; object-fit: cover; }
.landing-favorite-image > span { position: absolute; top: 15px; right: 15px; width: 45px; height: 45px; display: grid; place-items: center; border-radius: 50%; background: var(--landing-surface); color: var(--landing-wine); box-shadow: 0 4px 16px rgba(41,39,33,.13); }
.landing-favorite-image svg { fill: currentColor; }
.landing-favorite-meta { padding: 18px 0; display: flex; justify-content: space-between; align-items: center; }
.landing-favorite-meta small { color: var(--landing-faint); }
.landing-favorite-meta h3 { margin: 2px 0 0; font-family: Georgia, serif; font-size: 25px; font-weight: 400; }
.landing-favorite-meta > span { padding: 5px 10px; border-radius: 999px; background: var(--landing-surface-soft); color: var(--landing-wine); font-size: 11px; }
.landing-palette { padding-top: 17px; border-top: 1px solid var(--landing-line); display: flex; }
.landing-palette i { width: 45px; height: 45px; margin-left: -7px; border: 3px solid var(--landing-surface); border-radius: 50%; background: var(--palette-color); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.landing-palette i:first-child { margin-left: 0; }

.landing-achievements { padding-block: clamp(112px, 11vw, 158px); }
.landing-achievements__grid { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(70px, 9vw, 126px); align-items: center; }
.landing-feature__copy ul { margin: 34px 0 0; padding: 0; list-style: none; }
.landing-feature__copy li { padding: 12px 0 12px 22px; border-top: 1px solid var(--landing-line); color: var(--landing-ink-soft); position: relative; }
.landing-feature__copy li::before { content: ''; position: absolute; left: 2px; top: 21px; width: 7px; height: 7px; border-radius: 50%; background: var(--landing-wine); }
.landing-achievement-card { position: relative; min-height: 390px; padding: clamp(32px, 4vw, 56px); border-radius: 33px; background: var(--landing-dark-action); color: var(--landing-on-dark); display: grid; grid-template-columns: 150px 1fr; gap: clamp(34px, 5vw, 72px); align-items: center; }
.landing-star { position: absolute; top: 27px; right: 32px; color: var(--landing-pink-soft); font-size: 22px; }
.landing-level { display: grid; place-items: center; }
.landing-level > span { width: 128px; height: 128px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; font-family: Georgia, serif; font-size: 72px; }
.landing-level p { margin: 13px 0 0; color: #ccc5bb; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.landing-achievement-card .landing-eyebrow { color: var(--theme-accent, #ff7b95); }
.landing-achievement-card h3 { margin: 0 0 20px; color: var(--landing-on-dark); font-family: Georgia, serif; font-size: clamp(50px, 6vw, 82px); font-weight: 400; font-variant-numeric: tabular-nums; }
.landing-achievement-card h3 span { color: var(--theme-line, #c7c1b7); font-family: inherit; font-size: .35em; }
.landing-achievement-progress { height: 7px; border-radius: 999px; background: rgba(255,255,255,.13); }
.landing-achievement-progress span { display: block; height: 100%; border-radius: inherit; background: var(--theme-accent, #ff7b95); }
.landing-achievement-card > div:last-child > p:not(.landing-eyebrow) { margin: 12px 0 20px; color: var(--theme-line, #c7c1b7); font-size: 13px; }
.landing-achievement-card small { color: #e6ded3; }

.landing-final { position: relative; padding-block: clamp(120px, 14vw, 190px); border-top: 1px solid var(--landing-line); text-align: center; overflow: hidden; }
.landing-final::before { content: ''; position: absolute; inset: 0; opacity: .09; background-image: radial-gradient(circle, var(--landing-wine) 1px, transparent 1.5px); background-size: 24px 24px; mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent); }
.landing-final .landing-container { position: relative; }
.landing-final h2 { max-width: 920px; margin: 0 auto 26px; }
.landing-final > div > p:not(.landing-eyebrow) { max-width: 620px; margin: 0 auto; color: var(--landing-muted); font-size: 18px; }
.landing-final .landing-actions { justify-content: center; }
.landing-footer { border-top: 1px solid var(--landing-line); padding-block: 46px; background: rgba(235,226,215,.54); }
.landing-footer .landing-container { display: grid; grid-template-columns: 1fr auto auto; gap: 44px; align-items: center; }
.landing-footer .brand-logo { width: 142px; }
.landing-footer p { margin: 8px 0 0; color: var(--landing-muted); font-size: 12px; }
.landing-footer nav { display: flex; gap: 24px; color: var(--landing-ink-soft); font-size: 13px; }
.landing-footer .landing-container > p { margin: 0; white-space: nowrap; }

@media (max-width: 1199px) {
  .landing-container, .public-header { width: min(100% - 56px, 1120px); }
  .landing-hero { grid-template-columns: minmax(0, 5fr) minmax(300px, 3fr); gap: 48px; }
  .landing-hero h1 { font-size: clamp(64px, 7.5vw, 86px); }
  .landing-feature__grid, .landing-feature--favorites .landing-feature__grid, .landing-achievements__grid { gap: 56px; }
  .landing-step { grid-template-columns: 54px 1fr; padding-right: 22px; }
  .landing-step + .landing-step { padding-left: 22px; }
  .landing-preview-books { grid-template-columns: 1fr; }
  .landing-preview-books article:nth-child(2) { margin-top: 0; }
  .landing-achievement-card { grid-template-columns: 112px 1fr; }
  .landing-level > span { width: 100px; height: 100px; font-size: 56px; }
}

@media (max-width: 767px) {
  .landing-container, .public-header { width: calc(100% - 36px); }
  .public-header { height: 72px; }
  .brand-logo { width: 142px; }
  .public-menu-button { display: grid; }
  .public-header nav { position: absolute; z-index: 10; top: 64px; right: 0; width: min(290px, calc(100vw - 36px)); padding: 16px; border: 1px solid var(--landing-line); border-radius: 22.5px; background: var(--landing-surface); box-shadow: 0 12px 32px rgba(41,39,33,.12); display: none; flex-direction: column; align-items: stretch; gap: 4px; }
  .public-header nav.is-open { display: flex; }
  .public-header nav a { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .landing-eyebrow { margin-bottom: 14px; font-size: 10px; letter-spacing: .16em; }
  .landing-page h2 { font-size: clamp(43px, 12vw, 62px); line-height: 1; }
  .landing-hero { min-height: auto; padding-block: 62px 96px; grid-template-columns: 1fr; gap: 68px; }
  .landing-hero__copy { padding: 0; transform: none; }
  .landing-hero h1 { max-width: 100%; font-size: clamp(53px, 15vw, 68px); line-height: .93; letter-spacing: -.045em; }
  .landing-hero h1 em { margin-top: 3px; }
  .landing-lead { margin-top: 26px; font-size: 17px; line-height: 1.58; }
  .landing-actions { margin-top: 26px; align-items: stretch; flex-direction: column; gap: 8px; }
  .landing-actions .landing-button, .landing-actions .landing-link { width: 100%; justify-content: center; }
  .landing-link--arrow { padding-right: 0; }
  .landing-link--arrow::before { right: calc(50% - 98px); }
  .landing-note { margin-top: 14px; }
  .landing-book-preview { width: 84%; min-width: 270px; margin-top: 0; justify-self: center; }
  .landing-book-preview__footer > div { display: grid; gap: 2px; }
  .landing-section { padding-block: 88px; }
  .landing-section-heading { margin-bottom: 56px; }
  .landing-section-heading h2 br { display: none; }
  .landing-step-list { grid-template-columns: 1fr; }
  .landing-step { min-height: 0; padding: 28px 0; grid-template-columns: 58px 1fr; }
  .landing-step + .landing-step { padding-left: 0; border-left: 0; border-top: 1px solid var(--landing-line); }
  .landing-step p { max-width: none; margin-bottom: 0; }
  .landing-feature__grid, .landing-feature--favorites .landing-feature__grid, .landing-achievements__grid { grid-template-columns: 1fr; gap: 54px; }
  .landing-feature--collection .landing-feature__copy { grid-row: 1; }
  .landing-feature__copy h2 { margin-bottom: 24px; }
  .landing-feature__copy > p:not(.landing-eyebrow) { font-size: 16px; }
  .landing-preview-books { grid-template-columns: 1fr; gap: 24px; }
  .landing-preview-books article { grid-template-columns: 122px 1fr; }
  .landing-preview-books h3 { margin-bottom: 22px; }
  .landing-favorite-preview { width: 96%; padding: 15px; justify-self: center; transform: none; }
  .landing-favorite-image img { aspect-ratio: 1 / 1; }
  .landing-paper-label { left: 16px; }
  .landing-favorite-meta { align-items: flex-start; }
  .landing-palette i { width: 39px; height: 39px; }
  .landing-achievement-card { min-height: 0; padding: 32px 24px; grid-template-columns: 1fr; gap: 28px; }
  .landing-level { justify-items: start; }
  .landing-level > span { width: 82px; height: 82px; font-size: 47px; }
  .landing-level p { position: absolute; top: 42px; left: 126px; }
  .landing-achievement-card h3 { font-size: 55px; }
  .landing-final { padding-block: 100px; text-align: left; }
  .landing-final h2, .landing-final > div > p:not(.landing-eyebrow) { margin-inline: 0; }
  .landing-final .landing-actions { align-items: stretch; }
  .landing-footer .landing-container { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .landing-footer nav { flex-direction: column; gap: 10px; }
}

@media (max-width: 359px) {
  .landing-container, .public-header { width: calc(100% - 28px); }
  .brand-logo { width: 128px; }
  .landing-hero h1 { font-size: 49px; }
  .landing-book-preview { width: 88%; min-width: 0; }
  .landing-preview-books article { grid-template-columns: 105px 1fr; gap: 14px; }
  .landing-palette i { width: 34px; height: 34px; }
}

/* Dashboard asset pack */
.app-shell, #overlay-root { font-family: "Wix Madefor Display", ui-sans-serif, system-ui, sans-serif; }
.dash-home { --dash-pink: var(--theme-accent, #ff7b95); --dash-blue: var(--theme-secondary, #4654a3); --dash-ink: var(--theme-ink, #34231f); --dash-paper: #fff9f5; }
.dash-paper { position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; box-shadow: 0 8px 10px rgba(52, 35, 31, .12); }
.dash-paper::after { position: absolute; z-index: -1; inset: 0; background: url("/assets/dashboard/decoration/paper-speckle.svg") 0 0 / 120px 120px; opacity: .12; content: ""; pointer-events: none; }
.dash-header { display: grid; grid-template-columns: minmax(320px, .72fr) minmax(620px, 1.7fr); align-items: center; gap: 42px; }
.dash-title { align-self: center; padding-left: 8px; }
.dash-title h1 { margin: 0; color: var(--dash-ink); font-size: 64px; line-height: .98; letter-spacing: -.035em; text-wrap: balance; }
.dash-title img { width: min(350px, 92%); height: 31px; margin-top: 12px; object-fit: fill; }
.dash-total { min-height: 205px; padding: 34px 128px 30px 46px; display: grid; grid-template-columns: minmax(230px, auto) minmax(260px, 1fr); align-items: center; gap: 30px; overflow: visible; background: var(--theme-soft, #f7d8d4); }
.dash-total h2 { margin: 0 0 6px; font-size: 18px; letter-spacing: -.015em; }
.dash-total p { margin: 0; display: flex; align-items: baseline; gap: 14px; }
.dash-total p strong { color: var(--dash-pink); font-size: 70px; line-height: .85; font-variant-numeric: tabular-nums; }
.dash-total p span { font-size: 19px; font-weight: 750; }
.dash-total small { display: block; margin-top: 11px; color: #684d46; font-size: 13px; font-weight: 650; }
.dash-tape { position: absolute; z-index: 2; top: -20px; left: -22px; width: 104px; transform: rotate(-11deg); pointer-events: none; }
.dash-sparkles { position: absolute; z-index: 2; width: 42px; pointer-events: none; }
.dash-sparkles--pink { top: 19px; right: 20px; }
.dash-progress-cells { display: grid; grid-template-columns: repeat(15, minmax(10px, 1fr)); gap: 6px; }
.dash-progress-cells i { height: 20px; border: 2px solid rgba(255,255,255,.72); border-radius: 9px; background: rgba(255,255,255,.5); }
.dash-progress-cells i[data-state="done"] { background: var(--dash-pink); }
.dash-progress-cells i[data-state="in-progress"] { background: #f3bd47; }
.dash-progress-seal { position: absolute; right: -13px; bottom: -24px; width: 116px; aspect-ratio: 1; display: grid; place-items: center; background: url("/assets/dashboard/stickers/progress-seal.svg") center / contain no-repeat; color: var(--dash-pink); transform: rotate(5deg); }
.dash-progress-seal b { font-size: 31px; font-variant-numeric: tabular-nums; transform: rotate(-5deg); }
.dash-grid { margin-top: 26px; display: grid; grid-template-columns: minmax(470px, 1.35fr) minmax(230px, .65fr) minmax(350px, 1fr); gap: 22px; }
.dash-featured { min-height: 470px; padding: 28px 30px; display: grid; grid-template-columns: minmax(200px, .88fr) minmax(220px, 1.12fr); align-items: center; gap: 32px; background-color: var(--theme-accent, #ff7b95); background-image: url("/assets/dashboard/patterns/brand-grid-pink.webp"); background-size: 560px; background-blend-mode: soft-light; }
.dash-featured__cover { position: relative; z-index: 1; height: 100%; min-height: 390px; display: grid; place-items: center; }
.dash-featured__cover img { width: auto; max-width: 100%; max-height: 410px; border-radius: 15px; object-fit: contain; filter: drop-shadow(7px 9px 5px rgba(52,35,31,.22)); }
.dash-bookmark { position: absolute; z-index: 0; left: 48px; bottom: 7px; width: 38px; height: 112px; }
.dash-sparkles--blue { top: 30px; right: 26px; }
.dash-featured__copy { min-width: 0; display: grid; align-content: center; }
.dash-featured__copy h2 { margin-bottom: 22px; font-size: 39px; line-height: 1; text-wrap: balance; }
.dash-featured__copy dl { margin: 0 0 26px; display: grid; gap: 12px; }
.dash-featured__copy dl div { display: grid; grid-template-columns: 82px 1fr; align-items: baseline; gap: 10px; }
.dash-featured__copy dt { color: #704d55; font-size: 12px; font-weight: 650; }
.dash-featured__copy dd { margin: 0; font-size: 17px; font-weight: 750; }
.dash-featured__copy .button { justify-self: start; }
.dash-featured--empty { grid-template-columns: 1fr; place-items: center; text-align: center; }
.dash-featured--empty > div { max-width: 420px; }
.dash-add { min-height: 470px; padding: 28px 24px; display: grid; justify-items: center; align-content: center; gap: 16px; background-color: #d8d4f4; background-image: url("/assets/dashboard/patterns/brand-waves-blue.webp"); background-size: 440px; background-blend-mode: soft-light; text-align: center; }
.dash-add > img { width: min(210px, 86%); max-height: 285px; object-fit: contain; filter: drop-shadow(5px 7px 4px rgba(52,35,31,.16)); transition: transform 180ms var(--ease); }
.dash-add:hover > img { transform: translateY(-3px); }
.dash-add > span:not(.button) { display: grid; gap: 2px; }
.dash-add strong { font-size: 21px; line-height: 1.08; }
.dash-add small { color: #5d5980; font-size: 12px; }
.dash-add .button { pointer-events: none; }
.dash-side { min-width: 0; display: grid; grid-template-rows: minmax(250px, 1fr) minmax(190px, .74fr); gap: 22px; }
.dash-favorites { padding: 26px; background: var(--dash-blue); color: white; }
.dash-favorites header { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.dash-favorites h2, .dash-reward h2 { margin: 0; font-size: 25px; }
.dash-favorites header span { min-width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; font-weight: 750; }
.dash-favorites > p { max-width: 260px; margin: 44px 0 0; color: rgba(255,255,255,.78); }
.dash-favorite-list { margin-top: 25px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dash-favorite-list img { width: 100%; height: 104px; border-radius: 10.5px; background: var(--theme-surface, #fff); object-fit: cover; box-shadow: 0 4px 7px rgba(24,28,69,.26); }
.dash-heart { position: absolute; z-index: 2; right: -8px; bottom: -9px; width: 74px; transform: rotate(8deg); }
.dash-reward { min-height: 190px; padding: 28px; display: grid; grid-template-columns: 1fr 118px; align-items: center; gap: 18px; background: #f3bd47; color: var(--dash-ink); }
.dash-reward p { margin: 12px 0 6px; }
.dash-reward p strong { color: var(--theme-accent, #ff7b95); font-size: 44px; line-height: .8; font-variant-numeric: tabular-nums; }
.dash-reward small { color: #6e4d27; font-size: 12px; }
.dash-reward img { width: 112px; max-height: 134px; object-fit: contain; }

@media (max-width: 1199px) {
  .dash-header { grid-template-columns: 1fr; gap: 24px; }
  .dash-title { display: flex; align-items: end; justify-content: space-between; gap: 26px; }
  .dash-title h1 { font-size: 54px; }
  .dash-title img { width: 290px; }
  .dash-grid { grid-template-columns: minmax(430px, 1.15fr) minmax(230px, .7fr); }
  .dash-side { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; grid-template-rows: none; }
}

@media (max-width: 767px) {
  .dash-home { padding-top: 24px !important; }
  .dash-title { display: block; padding-left: 0; }
  .dash-title h1 { font-size: 44px; line-height: .96; }
  .dash-title img { width: 245px; height: 22px; margin-top: 7px; }
  .dash-total { min-height: 260px; padding: 27px 22px 78px; grid-template-columns: 1fr; gap: 22px; overflow: hidden; }
  .dash-total p strong { font-size: 58px; }
  .dash-total p span { font-size: 16px; }
  .dash-progress-cells { grid-template-columns: repeat(10, 1fr); gap: 4px; }
  .dash-progress-cells i { height: 15px; border-radius: 6px; }
  .dash-progress-seal { right: -5px; bottom: -19px; width: 98px; }
  .dash-tape { top: -14px; left: auto; right: 60px; width: 82px; }
  .dash-grid { grid-template-columns: 1fr; gap: 16px; }
  .dash-featured { min-height: 335px; padding: 22px 18px; grid-template-columns: minmax(120px, .78fr) minmax(145px, 1.22fr); gap: 17px; }
  .dash-featured__cover { min-height: 280px; }
  .dash-featured__cover img { max-height: 290px; }
  .dash-featured__copy h2 { margin-bottom: 17px; font-size: 29px; }
  .dash-featured__copy dl { margin-bottom: 19px; gap: 8px; }
  .dash-featured__copy dl div { grid-template-columns: 1fr; gap: 0; }
  .dash-featured__copy dt { font-size: 10px; }
  .dash-featured__copy dd { font-size: 14px; }
  .dash-featured__copy .button { min-height: 42px; padding-inline: 14px; font-size: 12px; }
  .dash-bookmark { left: 28px; bottom: 0; width: 30px; height: 88px; }
  .dash-add { min-height: 220px; padding: 20px; grid-template-columns: 118px 1fr; justify-items: start; text-align: left; }
  .dash-add > img { width: 118px; grid-row: 1 / span 2; }
  .dash-add .button { width: 100%; }
  .dash-side { grid-column: auto; grid-template-columns: 1fr; gap: 16px; }
  .dash-favorites { min-height: 220px; padding: 22px; }
  .dash-favorite-list { margin-top: 20px; }
  .dash-favorite-list img { height: 92px; }
  .dash-reward { min-height: 170px; padding: 22px; grid-template-columns: 1fr 92px; }
  .dash-reward img { width: 90px; }
}

@media (max-width: 359px) {
  .dash-featured { grid-template-columns: 112px minmax(0, 1fr); }
  .dash-featured__copy h2 { font-size: 24px; }
  .dash-featured__copy .button svg { display: none; }
}

/* Personal marker tracker */
.illustrations-toolbar h2 span { color: var(--app-pink-dark); font-size: .58em; font-variant-numeric: tabular-nums; }
.card-palette-progress { margin: 0 0 10px; display: grid; gap: 6px; }
.card-palette-progress > span { color: var(--app-muted); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.card-palette-progress [role="progressbar"] { height: 5px; overflow: hidden; border-radius: 999px; background: var(--theme-line, #eadfd9); }
.card-palette-progress i { display: block; height: 100%; border-radius: inherit; background: var(--app-pink); transition: width 180ms var(--ease); }
.illustration-card__open { width: 100%; min-height: 44px; margin-top: 9px; border: 1px solid var(--app-blue-dark); border-radius: 15px; background: transparent; color: var(--app-blue-dark); cursor: pointer; font-weight: 750; }
.illustration-card__open:hover { background: var(--app-blue-dark); color: white; }
.illustration-card__open:focus-visible { outline: 3px solid rgba(51, 67, 135, .3); outline-offset: 2px; }

.illustration-viewer { grid-template-columns: minmax(0, 1fr) minmax(400px, 440px); border-radius: 24px; }
.marker-tracker { padding-top: 21px; }
.marker-tracker__header { margin-bottom: 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.marker-tracker__header h3 { font-size: 18px; }
.marker-tracker__header p { margin: 4px 0 0; color: var(--app-muted); font-size: 12px; }
.marker-tracker__header > strong { flex: 0 0 auto; color: var(--app-pink-dark); font-size: 13px; font-variant-numeric: tabular-nums; }
.marker-tracker__progress { height: 7px; margin-bottom: 16px; overflow: hidden; border-radius: 999px; background: var(--theme-line, #eadfd9); }
.marker-tracker__progress span { display: block; height: 100%; border-radius: inherit; background: var(--app-pink); transition: width 180ms var(--ease); }
.marker-mapping-grid { display: grid; grid-template-columns: 1fr; gap: 9px; }
.marker-mapping-row { min-width: 0; min-height: 58px; padding: 6px; display: grid; grid-template-columns: 44px 16px minmax(0, 1fr); align-items: center; gap: 7px; border: 1px solid transparent; border-radius: 18px; background: var(--theme-soft, #f7efea); transition: border-color 160ms var(--ease), background-color 160ms var(--ease); }
.marker-mapping-row:focus-within { border-color: var(--app-blue-dark); background: white; }
.marker-mapping-row[data-state="error"] { border-color: #b74758; background: #fff1f3; }
.marker-swatch { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(58, 36, 32, .18); border-radius: 13.5px; background: var(--swatch); color: var(--swatch-ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.marker-swatch b { font-size: 13px; line-height: 1; }
.marker-arrow { color: var(--app-muted); font-size: 14px; text-align: center; }
.marker-input-wrap { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px; }
.marker-input-wrap input { width: 100%; min-width: 0; height: 44px; padding: 0 11px; border: 1px solid var(--app-line); border-radius: 13.5px; background: white; color: var(--app-ink); font: inherit; font-size: 14px; }
.marker-input-wrap input::placeholder { color: #806e69; opacity: 1; }
.marker-input-wrap input:focus { outline: 0; border-color: var(--app-blue-dark); }
.marker-save-state { min-width: 17px; color: #597047; font-size: 13px; text-align: center; }
.marker-mapping-row[data-state="saving"] .marker-save-state { color: var(--app-muted); font-size: 10px; }
.marker-save-state button { max-width: 126px; padding: 5px 7px; border: 0; border-radius: 10.5px; background: #b74758; color: white; cursor: pointer; font-size: 10px; line-height: 1.25; }

@media (max-width: 1199px) {
  .illustration-viewer { grid-template-columns: minmax(0, 1fr) minmax(380px, 420px); }
}

@media (max-width: 700px) {
  .illustration-viewer { display: flex; }
  .marker-tracker__header h3 { font-size: 17px; }
  .marker-mapping-row { grid-template-columns: 44px 16px minmax(0, 1fr); }
  .marker-input-wrap { grid-template-columns: minmax(0, 1fr); }
  .marker-save-state { min-height: 0; text-align: left; }
  .marker-save-state:empty { display: none; }
  .marker-save-state button { max-width: none; }
}

@media (max-width: 389px) {
  .marker-mapping-row { grid-template-columns: 44px minmax(0, 1fr); }
  .marker-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .card-palette-progress i, .marker-tracker__progress span, .marker-mapping-row { transition: none; }
}

/* Book workspace */
.book-page { display: grid; gap: 0; }
.book-page h1, .book-page h2, .book-page h3, .illustration-viewer h2, .illustration-viewer h3 { font-family: inherit; }
.book-breadcrumb { margin-bottom: 14px; }
.book-breadcrumb a { display: inline-flex; align-items: center; gap: 7px; color: var(--app-blue-dark); font-size: 13px; font-weight: 700; }
.book-breadcrumb a:hover span { text-decoration: underline; text-underline-offset: 4px; }
.book-hero-new { min-height: 420px; max-height: 470px; padding: 32px clamp(28px, 3vw, 48px); display: grid; grid-template-columns: minmax(220px, 270px) minmax(320px, 1fr) minmax(270px, 330px); align-items: center; gap: clamp(28px, 3vw, 52px); overflow: hidden; border-radius: 39px; background: #e3e1f5; }
.book-hero-new[data-theme="coral"] { background: #f4dcd6; }
.book-hero-new[data-theme="sage"] { background: #dfe7d4; }
.book-hero-cover-area { position: relative; min-width: 0; display: grid; place-items: center; }
.book-hero-layer { position: absolute; width: 78%; height: 92%; border-radius: 18px; background: var(--app-blue-dark); transform: translate(-13px, 8px) rotate(-3deg); opacity: .88; }
.book-hero-new[data-theme="coral"] .book-hero-layer { background: var(--app-pink-dark); }
.book-hero-new[data-theme="sage"] .book-hero-layer { background: #65794c; }
.book-hero-cover { position: relative; width: min(230px, 92%); max-height: 350px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 15px; box-shadow: 7px 14px 26px rgba(48, 40, 68, .22); }
.book-hero-cover-area small { position: absolute; inset: auto 12px 14px; padding: 6px 8px; border-radius: 10.5px; background: rgba(255, 250, 247, .9); color: var(--app-muted); font-size: 10px; text-align: center; }
.book-hero-content { min-width: 0; }
.book-hero-eyebrow, .section-eyebrow, .current-eyebrow, .viewer-eyebrow { margin: 0 0 9px; color: var(--app-pink-dark); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.book-hero-content h1 { max-width: 720px; margin-bottom: 16px; font-size: clamp(44px, 4.4vw, 70px); font-weight: 780; line-height: .94; }
.book-hero-content > p:not(.book-hero-eyebrow) { max-width: 610px; margin-bottom: 25px; color: var(--app-muted); font-size: 15px; line-height: 1.55; }
.book-progress-summary { max-width: 550px; }
.book-progress-numbers, .book-progress-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.book-progress-numbers { margin-bottom: 9px; }
.book-progress-numbers strong { color: var(--app-pink); font-size: 30px; font-variant-numeric: tabular-nums; }
.book-progress-numbers span { color: var(--app-ink); font-weight: 700; }
.book-progress-meta { margin-top: 8px; color: var(--app-muted); font-size: 11px; }
.book-current-card { min-height: 326px; padding: 20px; display: grid; align-content: start; gap: 13px; border: 1px solid rgba(255,255,255,.7); border-radius: 30px; background: rgba(255, 250, 247, .82); box-shadow: 0 10px 25px rgba(55, 41, 67, .11); }
.current-preview { min-height: 142px; overflow: hidden; border-radius: 19.5px; background: #e9e4df; }
.current-preview img { width: 100%; height: 142px; object-fit: contain; }
.illustration-placeholder { height: 100%; min-height: 142px; display: grid; place-items: center; align-content: center; gap: 8px; background: var(--theme-line, #eee8e3); color: #877b75; }
.illustration-placeholder svg { width: 28px; height: 28px; }
.illustration-placeholder span { font-size: 11px; }
.book-current-card > strong { min-height: 45px; font-size: 17px; line-height: 1.3; }
.book-current-card .button { width: 100%; min-height: 44px; padding-inline: 14px; }
.book-tabs { margin-top: 34px; display: flex; gap: 3px; border-bottom: 1px solid var(--app-line); }
.book-tabs button { min-height: 52px; padding: 0 21px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--app-muted); cursor: pointer; font-weight: 750; }
.book-tabs button[data-active="true"] { border-bottom-color: var(--app-pink); color: var(--app-pink-dark); }
.book-tabs span { margin-left: 6px; color: inherit; font-size: 12px; font-variant-numeric: tabular-nums; }
.illustrations-section, .book-palettes { padding-top: 34px; }
.illustrations-toolbar { margin-bottom: 24px; display: flex; align-items: end; justify-content: space-between; gap: 26px; }
.illustrations-toolbar h2 { font-size: 32px; font-weight: 760; }
.status-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.filter-chip { min-height: 36px; padding: 6px 12px; border: 1px solid var(--app-line); border-radius: 999px; background: var(--theme-background, #fffaf7); color: var(--app-muted); cursor: pointer; font-size: 12px; font-weight: 650; }
.filter-chip:hover, .filter-chip[data-active="true"] { border-color: var(--app-pink); color: var(--app-pink-dark); }
.filter-chip[data-active="true"] { background: #fce5ed; }
.app-shell .book-page .illustration-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 18px; }
.app-shell .book-page .illustration-card { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.book-page .illustration-preview { aspect-ratio: 4 / 3; border: 1px solid var(--app-line); border-radius: 21px; background: var(--theme-line, #eee8e3); box-shadow: 0 6px 16px rgba(68, 47, 52, .08); }
.book-page .illustration-preview img { width: 100%; height: 100%; object-fit: contain; border-radius: 19.5px; }
.book-page .illustration-preview .illustration-placeholder { min-height: 100%; }
.book-page .favorite-button { position: absolute; z-index: 2; top: 10px; right: 10px; border: 1px solid rgba(255,255,255,.7); background: rgba(255, 250, 247, .9); box-shadow: 0 4px 12px rgba(54, 39, 45, .12); }
.book-page .illustration-card__body { min-height: 70px; padding: 12px 2px 9px; grid-template-columns: 30px 1fr; gap: 8px; }
.book-page .illustration-card__body h3 { margin: 0; font-size: 15px; }
.book-page .illustration-number { padding-top: 3px; font-size: 10px; }
.book-page .status-control, .illustration-viewer .status-control { border-color: var(--app-line); background: var(--theme-soft, #f7efea); }
.book-page .status-control button, .illustration-viewer .status-control button { color: var(--app-muted); }
.book-page .status-control button[data-selected="true"], .illustration-viewer .status-control button[data-selected="true"] { background: white; color: var(--app-ink); box-shadow: 0 2px 7px rgba(56, 40, 45, .1); font-weight: 750; }
.book-page .status-control button[data-status="in_progress"][data-selected="true"] { color: var(--app-blue-dark); }
.book-page .status-control button[data-status="done"][data-selected="true"] { color: #5b7347; }
.book-palettes__header { margin-bottom: 25px; }
.book-palettes__header h2 { font-size: 32px; font-weight: 760; }
.author-palette-card { min-height: 176px; padding: 25px; border: 1px solid var(--app-line); border-radius: 24px; background: var(--theme-background, #fffaf7); }
.author-palette-card h2, .user-book-palettes h2 { font-size: 30px; font-weight: 760; }
.author-palette-card p { max-width: 670px; margin-bottom: 0; color: var(--app-muted); }
.author-palette-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.author-palette-heading h2 span { color: var(--app-pink-dark); font-variant-numeric: tabular-nums; }
.author-palette-cards { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.author-palette-item { min-width: 0; padding: 14px; display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: start; gap: 12px; border: 1px solid var(--app-line); border-radius: 21px; background: white; color: var(--app-ink); text-align: left; cursor: pointer; }
.author-palette-item:hover { border-color: var(--theme-accent, #ff7b95); box-shadow: 0 7px 18px rgba(68, 47, 52, .08); transform: translateY(-1px); }
.author-palette-item > img { grid-row: 1 / span 2; width: 92px; height: 112px; border-radius: 12px; background: #f0ebe7; object-fit: contain; }
.author-palette-item__heading { min-width: 0; display: flex; justify-content: space-between; gap: 8px; }
.author-palette-item__heading strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.author-palette-item__heading small { flex: 0 0 auto; color: var(--app-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.author-palette-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.author-palette-chip { min-width: 0; min-height: 32px; padding: 4px 2px; display: grid; place-items: center; border: 1px solid rgba(58,36,32,.12); border-radius: 9px; background: var(--swatch); color: var(--chip-ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.author-palette-chip b { font-size: 10px; line-height: 1; }
.author-palette-chip small { display: none; }
.palette-inline-error { padding: 18px; border: 1px solid #ff7b95; border-radius: 18px; background: #fff2f4; }
.palette-inline-error p { margin: 6px 0 14px; }
.user-book-palettes { margin-top: 32px; }
.book-palette-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.book-palette-card { min-height: 160px; padding: 22px; border: 1px solid var(--app-line); border-radius: 27px; background: var(--theme-background, #fffaf7); }
.book-palette-card h3 { margin: 0 0 6px; }
.book-palette-card p { color: var(--app-muted); }
.palette-swatches { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.palette-swatch { width: 36px; height: 36px; border: 1px solid rgba(60,40,40,.1); border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 2px rgba(255,255,255,.38); }

#overlay-root {
  --app-blue-dark: var(--theme-secondary, #334387);
  --app-pink-dark: var(--theme-accent, #ff7b95);
  --app-ink: var(--theme-ink, #3a2420);
  --app-muted: var(--theme-muted, #7c6863);
  --app-line: #ead7ce;
}
.illustration-overlay { padding: 22px; }
.illustration-viewer { width: min(1420px, 96vw); height: min(850px, calc(100svh - 44px)); overflow: hidden; display: grid; grid-template-columns: minmax(0, 3fr) minmax(390px, 2fr); grid-template-rows: minmax(0, 1fr); border-radius: 33px; background: var(--theme-background, #fffaf7); box-shadow: var(--shadow-float); animation: sheet-in 240ms var(--ease); }
.viewer-stage { position: relative; min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; background: #ded8d3; }
.viewer-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.viewer-stage .illustration-placeholder { width: min(520px, 72%); height: min(520px, 72%); min-height: 280px; border: 1px solid rgba(74,58,58,.1); border-radius: 27px; background: #eee9e5; }
.viewer-counter { position: absolute; z-index: 2; top: 18px; left: 18px; padding: 6px 10px; border-radius: 999px; background: rgba(255,250,247,.88); color: var(--app-muted); font-size: 11px; font-weight: 750; font-variant-numeric: tabular-nums; }
.stage-arrow { position: absolute; z-index: 2; top: 50%; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; background: rgba(255,250,247,.9); box-shadow: 0 5px 16px rgba(50,38,42,.14); cursor: pointer; transform: translateY(-50%); }
.stage-arrow--prev { left: 17px; }
.stage-arrow--next { right: 17px; }
.stage-arrow:disabled { opacity: .28; cursor: default; }
.viewer-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--theme-background, #fffaf7); }
.viewer-header { padding: 24px 25px 20px; border-bottom: 1px solid var(--app-line); display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.viewer-header h2 { margin: 0; font-size: clamp(25px, 2.1vw, 34px); font-weight: 780; line-height: 1.05; }
.viewer-header-actions { display: flex; gap: 7px; }
.viewer-favorite, .viewer-close { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--app-line); border-radius: 50%; background: white; cursor: pointer; }
.viewer-favorite[aria-pressed="true"] { color: var(--app-pink-dark); }
.viewer-favorite[aria-pressed="true"] svg { fill: currentColor; }
.viewer-panel-scroll { padding: 3px 25px 24px; overflow-y: auto; }
.viewer-section { padding: 21px 0; border-bottom: 1px solid var(--app-line); }
.viewer-section:last-child { border-bottom: 0; }
.viewer-section h3 { margin: 0; font-size: 15px; font-weight: 780; }
.viewer-section-header { margin-bottom: 13px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.viewer-section-header button, .viewer-section-header a { padding: 0; border: 0; background: transparent; color: var(--app-blue-dark); cursor: pointer; font-size: 12px; font-weight: 700; }
.viewer-palette-summary { margin-bottom: 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.viewer-palette-summary span { font-size: 13px; font-weight: 760; font-variant-numeric: tabular-nums; }
.viewer-palette-summary small { color: var(--app-muted); font-size: 10px; }
.author-palette-grid--viewer { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 7px; }
.author-palette-grid--viewer .author-palette-chip { min-height: 42px; }
.illustration-viewer .status-control--large { margin-top: 0; }
.illustration-viewer .status-control--large button { min-height: 42px; font-size: 11px; }
.completion-message, .viewer-empty-copy, .viewer-description p { margin: 11px 0 0; color: var(--app-muted); font-size: 12px; line-height: 1.55; }
.completion-message { color: #5b7347; }
.palette-swatches--viewer { margin-top: 0; }
.palette-swatches--viewer .palette-swatch { width: 30px; height: 30px; }
.viewer-author-palette { width: 100%; height: 46px; border: 1px solid rgba(58,36,32,.08); border-radius: 13.5px; object-fit: cover; }
.viewer-palette-card { display: grid; gap: 8px; }
.viewer-palette-card .palette-stripe { height: 42px; display: flex; overflow: hidden; }
.viewer-palette-card .palette-stripe span { flex: 1; background: var(--swatch); }
.viewer-palette-card strong { font-size: 13px; }
.viewer-navigation { min-height: 86px; border-top: 1px solid var(--app-line); display: grid; grid-template-columns: 1fr 1fr; }
.viewer-navigation button { padding: 14px 17px; border: 0; background: transparent; display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left; }
.viewer-navigation button + button { border-left: 1px solid var(--app-line); justify-content: flex-end; text-align: right; }
.viewer-navigation button:disabled { opacity: .32; cursor: default; }
.viewer-navigation span { min-width: 0; display: grid; }
.viewer-navigation small { color: var(--app-muted); }
.viewer-navigation strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1199px) {
  .book-hero-new { max-height: none; grid-template-columns: 210px minmax(300px, 1fr) 270px; gap: 25px; padding: 28px; }
  .book-hero-content h1 { font-size: clamp(42px, 5vw, 58px); }
  .app-shell .book-page .illustration-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .illustration-viewer { grid-template-columns: minmax(0, 1.3fr) minmax(360px, .7fr); }
  .author-palette-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .book-hero-new { max-height: none; grid-template-columns: 190px minmax(0, 1fr); }
  .book-current-card { min-height: 0; grid-column: 1 / -1; grid-template-columns: 130px 1fr auto; align-items: center; }
  .book-current-card .current-eyebrow { grid-column: 2 / -1; margin: 0 0 -9px; }
  .current-preview { grid-row: 1 / span 3; min-height: 105px; }
  .current-preview img { height: 105px; }
  .book-current-card .button { width: auto; }
  .illustrations-toolbar { align-items: flex-start; flex-direction: column; }
  .status-filters { justify-content: flex-start; }
  .illustration-viewer { width: calc(100vw - 24px); height: calc(100svh - 24px); grid-template-columns: 1fr 390px; }
}

@media (max-width: 700px) {
  .book-hero-new { padding: 24px 20px; grid-template-columns: 1fr; gap: 26px; }
  .book-hero-cover-area { max-width: 250px; margin: 0 auto; }
  .book-hero-content h1 { font-size: clamp(40px, 13vw, 56px); }
  .book-current-card { grid-column: auto; grid-template-columns: 104px 1fr; }
  .book-current-card .current-eyebrow { grid-column: 2; }
  .book-current-card .button { grid-column: 2; }
  .book-tabs { margin-top: 24px; }
  .book-tabs button { flex: 1; padding-inline: 8px; }
  .app-shell .book-page .illustration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 23px 10px; }
  .book-page .status-control button { min-height: 38px; padding-inline: 2px; font-size: 8px; }
  .book-palette-grid { grid-template-columns: 1fr; }
  .author-palette-heading { align-items: flex-start; flex-direction: column; }
  .author-palette-cards { grid-template-columns: 1fr; }
  .illustration-overlay { padding: 0; }
  .illustration-viewer { width: 100vw; height: 100svh; border-radius: 0; display: flex; flex-direction: column; overflow-y: auto; }
  .viewer-panel { display: contents; }
  .viewer-header { position: sticky; z-index: 5; top: 0; order: 1; flex: 0 0 auto; background: var(--theme-background, #fffaf7); }
  .viewer-stage { order: 2; flex: 0 0 54svh; min-height: 390px; }
  .viewer-panel-scroll { order: 3; flex: 0 0 auto; overflow: visible; }
  .viewer-navigation { order: 4; flex: 0 0 auto; }
  .viewer-stage .illustration-placeholder { min-height: 260px; }
}

@media (max-width: 389px) {
  .app-shell .book-page .illustration-grid { grid-template-columns: 1fr; }
  .book-current-card { grid-template-columns: 88px 1fr; padding: 15px; }
  .current-preview, .current-preview img { min-height: 92px; height: 92px; }
  .viewer-header { padding: 17px 16px 14px; }
  .viewer-header h2 { font-size: 23px; }
  .viewer-panel-scroll { padding-inline: 17px; }
  .viewer-navigation strong { max-width: 105px; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-book-preview, .landing-link::after, .landing-link--arrow::before, .public-menu-button > span { transition: none !important; }
}

/* Authenticated application — Lunicolors reference system */
.app-shell {
  --app-blue: var(--theme-secondary, #44509a);
  --app-blue-dark: var(--theme-secondary, #334387);
  --app-cream: var(--theme-surface, #ffffff);
  --app-paper: #fff9f5;
  --app-pink: var(--theme-accent, #ff7b95);
  --app-pink-dark: var(--theme-accent, #ff7b95);
  --app-ink: var(--theme-ink, #3a2420);
  --app-muted: var(--theme-muted, #7c6863);
  --app-line: #ead7ce;
  min-height: 100vh;
  padding: 16px;
  background: var(--app-blue);
  color: var(--app-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.app-shell *, .app-shell *::before, .app-shell *::after { box-sizing: border-box; }
.app-canvas { position: relative; min-height: calc(100vh - 32px); max-width: 1800px; margin: 0 auto; overflow: hidden; border-radius: 45px; background: var(--app-cream); box-shadow: 0 18px 50px rgba(23, 28, 78, .28); }
.app-shell h1, .app-shell h2, .app-shell h3 { font-family: inherit; font-weight: 750; letter-spacing: -.035em; }
.app-shell h1 { color: var(--app-ink); }
.app-shell .sidebar { display: none; }
.app-topbar { position: relative; z-index: 20; min-height: 104px; padding: 0 48px; display: grid; grid-template-columns: 260px 1fr auto; align-items: center; gap: 34px; border-bottom: 1px solid rgba(74, 48, 42, .11); background: var(--theme-background, #fffaf6); box-shadow: 0 5px 16px rgba(82, 50, 43, .08); }
.app-brand { display: inline-flex; align-items: center; width: 220px; }
.app-brand .brand-logo { width: 100%; height: auto; }
.app-topnav { height: 100%; display: flex; align-items: stretch; justify-content: center; gap: 38px; }
.app-shell .nav-item { position: relative; min-width: 116px; padding: 0 6px; display: flex; align-items: center; justify-content: center; gap: 11px; color: var(--app-blue-dark); font-size: 16px; font-weight: 650; white-space: nowrap; }
.app-shell .nav-item svg { width: 25px; height: 25px; stroke-width: 1.9; }
.app-shell .nav-item::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: 20px; height: 2px; border-radius: 2px; background: transparent; }
.app-shell .nav-item.is-active { color: var(--app-pink); }
.app-shell .nav-item.is-active::after { background: currentColor; }
.app-topbar__actions { position: relative; display: flex; align-items: center; gap: 22px; }
.balance-chip { min-height: 54px; padding: 0 27px; display: inline-flex; align-items: center; gap: 11px; border-radius: 42px; background: var(--app-pink); color: white; font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; box-shadow: 0 7px 17px rgba(209, 45, 101, .18); }
.balance-chip span { font-size: 24px; }
.app-profile-trigger { width: 62px; height: 62px; padding: 0; border: 3px solid #f2ded3; border-radius: 50%; background: #ebc5ac; cursor: pointer; }
.app-profile-trigger .avatar { width: 100%; height: 100%; display: grid; place-items: center; border-radius: inherit; background: #a86a4f; color: #fff; font-size: 23px; font-weight: 750; }
.app-profile-trigger.is-active, .app-profile-trigger[aria-expanded="true"] { border-color: var(--theme-accent, #ff7b95); }
.app-profile-menu { position: absolute; top: calc(100% + 14px); right: 0; width: 240px; padding: 18px; display: grid; gap: 4px; border: 1px solid var(--app-line); border-radius: 27px; background: var(--theme-background, #fffaf7); box-shadow: 0 18px 45px rgba(63, 41, 50, .2); }
.app-profile-menu[hidden] { display: none; }
.app-profile-menu strong { font-size: 15px; }
.app-profile-menu small { margin-bottom: 8px; overflow: hidden; color: var(--app-muted); text-overflow: ellipsis; }
.app-profile-menu a, .app-profile-menu button { width: 100%; padding: 10px; border: 0; border-radius: 15px; background: transparent; text-align: left; cursor: pointer; }
.app-profile-menu a:hover, .app-profile-menu button:hover { background: #f8e8e4; }
.app-shell .main-content { min-height: calc(100vh - 136px); margin: 0; background: transparent; }
.app-shell .page { max-width: 1640px; margin: 0 auto; padding: 46px 62px 86px; }
.app-shell .page--narrow { max-width: 1120px; }
.app-shell .page-header { margin-bottom: 38px; }
.app-shell .page-header h1 { font-size: clamp(44px, 5vw, 72px); line-height: .98; }
.app-shell .page-header--split { align-items: flex-end; }
.app-shell .eyebrow, .app-shell .kicker { color: var(--app-pink-dark); }
.app-shell .section { margin-top: 38px; }
.app-shell .section-heading h2 { font-size: 32px; }
.app-shell .text-link, .app-shell .back-link { color: var(--app-blue-dark); }
.app-shell .button { border-color: var(--app-pink); background: var(--app-pink); color: white; box-shadow: none; }
.app-shell .button:hover:not(:disabled) { border-color: var(--app-pink-dark); background: var(--app-pink-dark); }
.app-shell .button--secondary, .app-shell .button--ghost { border-color: #d9bdb3; background: var(--theme-soft, #fff8f4); color: var(--app-ink); }
.app-shell input, .app-shell select, .app-shell textarea { border-color: #ddc5bc; border-radius: 18px; background: var(--theme-background, #fffaf7); }
.app-shell .chips, .app-shell .segmented { padding: 4px; border: 1px solid var(--app-line); border-radius: 21px; background: var(--theme-soft, #fff8f4); }
.app-shell .chips button, .app-shell .segmented button { min-height: 40px; border-radius: 15px; }
.app-shell .chips button.is-active, .app-shell .segmented button.is-active { background: var(--app-pink); color: #fff; }
.app-shell .toolbar, .app-shell .settings-form section, .app-shell .reward-grid article, .app-shell .achievement-row, .app-shell .ledger-list, .app-shell .empty-state { border-color: var(--app-line); border-radius: 30px; background: rgba(255, 250, 247, .86); }

.home-hero { min-height: 170px; display: grid; grid-template-columns: minmax(400px, .9fr) minmax(520px, 1.1fr); align-items: center; gap: 80px; }
.home-hero h1 { max-width: 690px; margin: 0; font-size: clamp(52px, 5.4vw, 78px); line-height: .96; }
.home-total { display: grid; gap: 14px; align-content: center; }
.home-total > div:first-child { display: flex; align-items: baseline; gap: 20px; }
.home-total strong { color: var(--app-pink); font-size: clamp(62px, 6vw, 92px); line-height: .8; font-variant-numeric: tabular-nums; }
.home-total span { font-size: clamp(22px, 2.2vw, 34px); font-weight: 750; }
.home-total small { color: var(--app-muted); font-size: 13px; }
.progress-segments { display: grid; grid-template-columns: repeat(20, minmax(8px, 1fr)); gap: 5px; }
.progress-segments i { height: 18px; border-radius: 7.5px; background: #efdfd8; }
.progress-segments i.is-filled { background: var(--app-pink); }
.progress-segments i.is-filled:nth-child(n+9) { background: var(--theme-secondary, #4f60a1); }
.progress-segments i.is-filled:nth-child(n+13) { background: #8aa44e; }
.home-tabs { margin-top: 30px; display: flex; align-items: flex-end; border-bottom: 1px solid var(--app-line); }
.home-tabs button { min-height: 56px; padding: 0 28px; border: 1px solid transparent; border-bottom: 0; border-radius: 21px 21px 0 0; background: transparent; cursor: pointer; font-size: 16px; }
.home-tabs button.is-active { background: var(--app-pink); color: white; font-weight: 700; }
.home-tabs a { margin: 0 0 17px auto; color: var(--app-blue-dark); font-weight: 650; }
.home-books { min-height: 370px; padding: 26px 0 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.home-books__empty { grid-column: 1 / -1; min-height: 260px; display: grid; place-items: center; align-content: center; gap: 14px; border: 1px dashed #d8bcb1; border-radius: 33px; }
.home-book { position: relative; min-height: 365px; padding: 26px; display: grid; grid-template-columns: minmax(145px, .92fr) minmax(150px, 1.08fr); align-items: center; gap: 26px; overflow: hidden; border-radius: 36px; background: #f5d9df; box-shadow: 0 9px 18px rgba(85, 49, 64, .16); }
.home-book::before { content: ""; position: absolute; z-index: -1; inset: 14px 10px -10px -10px; border-radius: 36px; background: var(--app-pink); transform: rotate(-1.3deg); }
.home-book--lavender { background: #dcdcf6; }
.home-book--lavender::before { background: var(--app-blue-dark); transform: rotate(1.2deg); }
.home-book--coral { background: #f4c9c5; }
.home-book--coral::before { background: #ec727d; }
.home-book__spark { position: absolute; top: 24px; right: 25px; color: var(--app-blue-dark); font-size: 24px; }
.home-book__cover { position: relative; align-self: stretch; display: flex; align-items: center; }
.home-book__cover::after { content: ""; position: absolute; inset: 7% -5px 7% 8%; z-index: -1; border-radius: 12px; box-shadow: 5px 9px 15px rgba(44, 34, 64, .28); }
.home-book__cover img { width: 100%; max-height: 315px; object-fit: contain; filter: drop-shadow(3px 7px 5px rgba(50, 32, 48, .24)); }
.home-book__copy { display: grid; justify-items: start; align-content: center; }
.home-book__copy > p { margin: 0 0 8px; color: var(--app-muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.home-book__copy h2 { min-height: 62px; margin-bottom: 22px; font-size: clamp(25px, 2vw, 35px); line-height: .98; }
.home-book__percent { width: 94px; height: 94px; margin-bottom: 22px; display: grid; place-content: center; border-radius: 50%; background: var(--theme-soft, #fffaf5); color: var(--app-pink); font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: 0 5px 12px rgba(67, 44, 50, .13); }
.home-book--lavender .home-book__percent { color: var(--app-blue-dark); }
.home-book__percent small { font-size: 20px; }
.home-book--lavender .button { border-color: var(--app-blue-dark); background: var(--app-blue-dark); }
.home-widgets { margin-top: 30px; display: grid; grid-template-columns: 1.55fr 1fr .82fr; gap: 20px; }
.home-widget { min-height: 185px; padding: 22px 24px; overflow: hidden; border: 1px solid var(--app-line); border-radius: 30px; background: rgba(255, 250, 247, .8); }
.home-widget header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.home-widget h2 { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.home-widget h2 svg { width: 26px; height: 26px; color: var(--app-blue-dark); }
.home-widget header b { min-width: 32px; height: 32px; display: grid; place-items: center; border: 2px solid var(--app-pink); border-radius: 50%; color: var(--app-pink); }
.home-widget--favorites h2 span { color: var(--app-pink); font-size: 28px; }
.home-widget--favorites > div { margin-top: 18px; display: flex; gap: 7px; }
.home-widget--favorites img { width: calc((100% - 63px) / 10); min-width: 38px; aspect-ratio: 3 / 4; border-radius: 10.5px; object-fit: cover; box-shadow: 0 3px 7px rgba(47, 31, 43, .16); }
.home-widget--colors > div { margin-top: 18px; display: grid; grid-template-columns: repeat(6, 40px); gap: 12px; }
.home-widget--colors i { width: 40px; height: 40px; border: 1px solid rgba(68, 50, 46, .08); border-radius: 50%; background: var(--color); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.home-widget--reward > div { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px; }
.home-widget--reward strong { color: var(--app-pink); font-size: 58px; line-height: 1; font-variant-numeric: tabular-nums; }
.home-widget--reward span { align-self: end; margin-bottom: 8px; font-weight: 650; }
.home-widget--reward i { justify-self: end; color: #8d5d48; font-size: 58px; font-style: normal; }
.home-widget--reward p { margin: 6px 0 0; color: var(--app-muted); font-size: 12px; }

.app-shell .book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.app-shell .book-card { min-height: 330px; padding: 25px; grid-template-columns: minmax(150px, .72fr) minmax(230px, 1.28fr); gap: 28px; border: 0; border-radius: 33px; background: #f3d8df; box-shadow: 0 7px 16px rgba(71, 47, 60, .13); }
.app-shell .book-card--lavender { background: #deddf4; }
.app-shell .book-card--coral { background: #f5d2ca; }
.app-shell .book-card--sage { background: #dce4cf; }
.app-shell .book-card .book-cover { border-radius: 15px; background: transparent; }
.app-shell .book-card .book-cover img { height: 280px; object-fit: contain; filter: drop-shadow(4px 7px 6px rgba(46, 37, 50, .23)); }
.app-shell .book-card__body h3 { font-size: 28px; }
.app-shell .book-card__body h3 a { text-decoration: none; }
.app-shell .book-card__footer { margin-top: auto; }
.app-shell .card-link { color: var(--app-blue-dark); font-weight: 700; }
.app-shell .progress span { background: var(--app-pink); }
.app-shell .illustration-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.app-shell .illustration-card { border-color: var(--app-line); border-radius: 27px; background: var(--theme-background, #fffaf6); box-shadow: 0 6px 14px rgba(72, 47, 52, .08); }
.app-shell .illustration-preview img { border-radius: 21px 21px 0 0; }
.app-shell .book-hero { padding: 34px; border: 0; border-radius: 36px; background: #e1e0f5; }
.app-shell .book-hero > img { filter: drop-shadow(7px 12px 8px rgba(45, 35, 60, .24)); }
.app-shell .book-hero h1 { font-size: clamp(48px, 5vw, 76px); }
.app-shell .achievement-hero { border-radius: 36px; background: var(--app-blue-dark); }
.app-shell .achievement-hero h1, .app-shell .achievement-hero h1 span { color: #fff; }
.app-shell .palette-card, .app-shell .color-card { border-color: var(--app-line); border-radius: 27px; background: var(--theme-background, #fffaf6); }
.app-shell .bottom-nav { display: none; }

@media (max-width: 1199px) {
  .app-topbar { padding-inline: 30px; grid-template-columns: 190px 1fr auto; gap: 18px; }
  .app-brand { width: 180px; }
  .app-topnav { gap: 12px; }
  .app-shell .nav-item { min-width: 100px; font-size: 14px; }
  .balance-chip { padding-inline: 18px; font-size: 15px; }
  .app-shell .page { padding-inline: 38px; }
  .home-hero { grid-template-columns: .9fr 1.1fr; gap: 42px; }
  .home-books { gap: 18px; }
  .home-book { min-height: 330px; padding: 20px; grid-template-columns: .9fr 1.1fr; gap: 18px; }
  .home-book__cover img { max-height: 260px; }
  .home-book__percent { width: 78px; height: 78px; font-size: 33px; }
  .home-widgets { grid-template-columns: 1.3fr 1fr; }
  .home-widget--reward { grid-column: 1 / -1; min-height: 130px; }
  .app-shell .illustration-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .app-shell { padding: 0; background: var(--app-cream); }
  .app-canvas { min-height: 100vh; border-radius: 0; box-shadow: none; overflow: visible; }
  .app-topbar { position: sticky; top: 0; min-height: 68px; padding: 0 18px; grid-template-columns: 1fr auto; gap: 12px; }
  .app-brand { width: 148px; }
  .app-topnav, .balance-chip { display: none; }
  .app-profile-trigger { width: 42px; height: 42px; border-width: 2px; }
  .app-profile-trigger .avatar { font-size: 16px; }
  .app-profile-menu { position: fixed; top: 62px; right: 14px; }
  .app-shell .main-content { min-height: calc(100vh - 68px); padding-bottom: 78px; }
  .app-shell .page { padding: 28px 18px 50px; }
  .app-shell .page-header { margin-bottom: 26px; }
  .app-shell .page-header h1 { font-size: 43px; }
  .home-hero { min-height: 0; grid-template-columns: 1fr; gap: 32px; }
  .home-hero h1 { font-size: clamp(43px, 13vw, 60px); }
  .home-total strong { font-size: 64px; }
  .home-total span { font-size: 23px; }
  .progress-segments { gap: 3px; }
  .progress-segments i { height: 13px; border-radius: 3px; }
  .home-tabs { margin-top: 34px; overflow-x: auto; }
  .home-tabs button { min-height: 48px; padding-inline: 17px; white-space: nowrap; font-size: 14px; }
  .home-tabs a { display: none; }
  .home-books { min-height: 0; grid-template-columns: 1fr; gap: 22px; padding-top: 20px; }
  .home-book { min-height: 300px; grid-template-columns: minmax(120px, .82fr) minmax(145px, 1.18fr); }
  .home-book__cover img { max-height: 255px; }
  .home-book__copy h2 { min-height: 0; font-size: 27px; }
  .home-widgets { grid-template-columns: 1fr; gap: 14px; }
  .home-widget, .home-widget--reward { min-height: 142px; grid-column: auto; }
  .home-widget--favorites > div { overflow: hidden; }
  .home-widget--favorites img { width: 52px; min-width: 52px; }
  .home-widget--colors > div { grid-template-columns: repeat(6, 34px); gap: 9px; }
  .home-widget--colors i { width: 34px; height: 34px; }
  .app-shell .book-grid, .app-shell .illustration-grid { grid-template-columns: 1fr; }
  .app-shell .book-card { min-height: 290px; padding: 20px; grid-template-columns: 125px 1fr; gap: 20px; }
  .app-shell .book-card .book-cover img { height: 230px; }
  .app-shell .book-card__body h3 { font-size: 24px; }
  .app-shell .book-hero { padding: 22px; grid-template-columns: 120px 1fr; gap: 22px; }
  .app-shell .book-hero h1 { font-size: 36px; }
  .app-shell .book-hero__lead { display: none; }
  .app-shell .toolbar, .app-shell .page-header--split { align-items: stretch; flex-direction: column; }
  .app-shell .bottom-nav { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; min-height: 70px; padding: 6px 7px max(6px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--app-line); background: rgba(255, 250, 246, .97); box-shadow: 0 -5px 18px rgba(67, 42, 49, .08); }
  .app-shell .bottom-nav .nav-item { min-width: 0; min-height: 56px; padding: 4px 2px; flex-direction: column; gap: 2px; font-size: 10px; }
  .app-shell .bottom-nav .nav-item svg { width: 21px; height: 21px; }
  .app-shell .bottom-nav .nav-item::after { left: 25%; right: 25%; bottom: 0; }
}

@media (max-width: 359px) {
  .app-shell .page { padding-inline: 14px; }
  .home-book { min-height: 270px; padding: 16px; grid-template-columns: 105px 1fr; gap: 15px; }
  .home-book__cover img { max-height: 218px; }
  .home-book__copy h2 { margin-bottom: 13px; font-size: 23px; }
  .home-book__percent { width: 62px; height: 62px; margin-bottom: 13px; font-size: 28px; }
  .home-book__percent small { font-size: 14px; }
  .home-widget--colors > div { grid-template-columns: repeat(5, 34px); }
}

/* Remediation guide v1 — canonical authenticated UI tokens and layout */
.app-shell {
  --luni-outer: var(--theme-secondary, #44509a);
  --luni-canvas: #fcf2ec;
  --luni-surface: #fff9f5;
  --luni-blush: var(--theme-soft, #f7d8d4);
  --luni-lavender: var(--theme-accent, #ff7b95);
  --luni-coral: #ef7c84;
  --luni-pink: var(--theme-accent, #ff7b95);
  --luni-pink-strong: var(--theme-accent, #ff7b95);
  --luni-blue: var(--theme-secondary, #4654a3);
  --luni-blue-deep: #262c58;
  --luni-ink: var(--theme-ink, #34231f);
  --luni-ink-soft: #655a5b;
  --luni-muted: #9a8f8d;
  --luni-line: #e3d5d0;
  --luni-white: var(--theme-background, #fffaf7);
  --luni-shell-radius: 45px;
  --luni-card-radius: 36px;
  --luni-small-radius: 21px;
  --luni-pill-radius: 999px;
  --luni-content: 1440px;
  --luni-gutter: clamp(24px, 4vw, 64px);
  --luni-shadow-shell: 0 24px 72px rgba(38, 44, 88, .22);
  --luni-shadow-card: 0 14px 34px rgba(52, 35, 31, .10);
  --luni-shadow-cover: 0 12px 24px rgba(52, 35, 31, .22);
  min-height: 100svh;
  background: var(--luni-outer);
  color: var(--luni-ink);
  font-family: "Wix Madefor Display", Inter, system-ui, sans-serif;
}
.app-shell button, .app-shell input, .app-shell textarea, .app-shell select { font-family: inherit; }
.app-canvas { min-height: calc(100svh - 32px); max-width: 1880px; overflow: clip; border-radius: var(--luni-shell-radius); background: var(--luni-canvas); box-shadow: var(--luni-shadow-shell); }
.app-shell .page { width: min(100%, var(--luni-content)); max-width: none; padding: 56px var(--luni-gutter) 80px; }
.app-topbar { min-height: 104px; padding: 0 56px; grid-template-columns: minmax(200px, 1fr) auto minmax(200px, 1fr); gap: 32px; border-bottom: 1px solid var(--luni-line); background: rgba(255, 249, 245, .96); box-shadow: none; }
.app-brand { width: auto; justify-self: start; }
.app-brand .brand-logo { width: auto; height: 52px; object-fit: contain; }
.app-topnav { align-self: stretch; gap: 32px; }
.app-shell .app-topnav .nav-item { min-width: 0; padding: 0 10px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--luni-blue-deep); font-size: 17px; font-weight: 700; }
.app-shell .app-topnav .nav-item:hover { background: transparent; color: var(--luni-pink-strong); }
.app-shell .app-topnav .nav-item::after { right: 10px; bottom: 18px; left: 10px; height: 2px; }
.app-shell .app-topnav .nav-item.is-active { border: 0; background: transparent; box-shadow: none; color: var(--luni-pink-strong); }
.app-topbar__actions { justify-self: end; }
.balance-chip { min-height: 50px; padding: 0 24px; border-radius: var(--luni-pill-radius); background: var(--luni-pink-strong); font-size: 16px; font-weight: 700; box-shadow: 0 10px 22px rgba(227, 81, 142, .22); }
.app-shell .main-content { min-height: 0; }

.page--home { display: grid; gap: 34px; }
.home-hero { min-height: 190px; grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr); gap: 72px; }
.home-hero h1 { max-width: 690px; font-size: clamp(58px, 5vw, 86px); font-weight: 800; line-height: .97; letter-spacing: -.045em; }
.home-hero h1 span { display: block; white-space: nowrap; }
.home-total { gap: 14px; }
.home-total strong { color: var(--luni-pink-strong); font-size: clamp(76px, 7vw, 112px); }
.home-total span { font-size: clamp(34px, 3vw, 48px); font-weight: 800; }
.home-total small { color: var(--luni-muted); font-size: 14px; }
.progress-segments { width: min(100%, 690px); gap: 6px; }
.progress-segments i { height: 18px; background: #f0dfdb; }
.progress-segments i.is-filled, .progress-segments i.is-filled:nth-child(n+9), .progress-segments i.is-filled:nth-child(n+13) { background: var(--luni-pink-strong); }
.home-tabs { margin-top: 0; border-color: var(--luni-line); }
.home-tabs button { min-height: 54px; padding: 0 28px; color: var(--luni-ink-soft); font-weight: 600; }
.home-tabs button.is-active { background: var(--luni-pink-strong); }
.home-books { min-height: 0; padding: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: stretch; }
.home-books[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1040px; }
.home-books[data-count="1"] { grid-template-columns: minmax(0, 520px); }
.home-book { isolation: isolate; min-height: 340px; padding: 28px; grid-template-columns: minmax(180px, .9fr) minmax(180px, 1.1fr); gap: 24px; overflow: visible; border-radius: var(--luni-card-radius); background: var(--luni-blush); box-shadow: var(--luni-shadow-card); }
.home-book::before { inset: 10px 10px -10px -10px; border-radius: var(--luni-card-radius); transform: none; opacity: .18; }
.home-book--lavender { background: #d7d4f3; }
.home-book--coral { background: #f3d7ca; }
.home-book__cover { position: relative; align-self: stretch; display: grid; place-items: center; overflow: visible; }
.home-book__cover::after { display: none; }
.home-book__cover img { display: block; width: min(100%, 230px); height: auto; max-height: none; aspect-ratio: .72; object-fit: cover; border-radius: 9px; box-shadow: var(--luni-shadow-cover); filter: none; }
.home-book__cover small, .book-cover small { position: absolute; z-index: 3; right: 10px; bottom: 10px; left: 10px; padding: 5px 7px; border-radius: 7.5px; background: rgba(52, 35, 31, .84); color: white; font-size: 9px; line-height: 1.2; text-align: center; }
.home-book__copy { gap: 18px; }
.home-book__copy > p { margin: 0; color: var(--luni-ink-soft); font-size: 12px; font-weight: 800; letter-spacing: .15em; }
.home-book__copy h2 { min-height: 0; margin: 0; font-size: clamp(26px, 2vw, 38px); line-height: 1.02; }
.home-book__percent { width: 96px; height: 96px; margin: 0; color: var(--luni-pink-strong); background: var(--luni-white); font-size: 36px; box-shadow: 0 10px 20px rgba(52, 35, 31, .12); }
.home-book--lavender .home-book__percent { color: var(--luni-blue); }
.home-book .button { min-height: 46px; padding: 0 24px; border-radius: var(--luni-pill-radius); }
.home-widgets { margin-top: 0; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr) minmax(260px, 1fr); gap: 24px; align-items: start; }
.home-widget { box-sizing: border-box; height: 220px; min-height: 0; padding: 24px; overflow: hidden; border-color: var(--luni-line); border-radius: 30px; background: rgba(255, 249, 245, .78); }
.home-widget--favorites > div { margin-top: 20px; gap: 10px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.home-widget--favorites img { flex: 0 0 72px; width: 72px; min-width: 72px; height: 116px; aspect-ratio: auto; object-fit: cover; object-position: center; border-radius: 13.5px; }
.home-widget--colors > div { margin-top: 22px; grid-template-columns: repeat(6, 38px); gap: 14px 12px; }
.home-widget--colors i { width: 38px; height: 38px; }
.home-widget--reward > div { grid-template-columns: 1fr auto; margin-top: 18px; }
.home-widget--reward strong { font-size: 52px; }
.home-widget--reward span { align-self: center; max-width: 90px; margin: 0; line-height: 1.15; }
.home-widget--reward i { font-size: 48px; }

.app-shell .book-card { position: relative; }
.app-shell .book-cover { position: relative; overflow: visible; }
.app-shell .book-card .book-cover img { height: auto; object-fit: cover; object-position: center; }

.palette-page { display: grid; gap: 56px; }
.palette-page .page-header { margin-bottom: 0; }
.palette-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 420px; align-items: start; gap: 64px; }
.palette-workspace .section-heading { margin-bottom: 18px; }
.palette-builder { position: sticky; top: 128px; }
.palette-composer { position: static; min-height: 480px; padding: 30px; border-color: var(--luni-line); border-radius: 33px; background: var(--luni-surface); }
.color-list { border-color: var(--luni-line); }
.color-row { min-height: 76px; padding: 8px 4px; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 18px; border-color: var(--luni-line); }
.color-row.is-selected { background: rgba(255, 249, 245, .92); box-shadow: inset 3px 0 var(--luni-pink-strong); }
.builder-slots { margin: 22px 0 26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.builder-slot { display: block; width: 100%; aspect-ratio: 1; border: 1px dashed #cfbbb4; border-radius: 18px; background: rgba(227, 213, 208, .25); }
button.builder-slot { border-style: solid; background: var(--swatch); cursor: pointer; box-shadow: inset 0 0 0 3px rgba(255,255,255,.52); }
.palette-composer form > small { color: var(--luni-muted); font-size: 12px; }
.saved-palettes-section { margin-top: 8px; }
.saved-palettes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.saved-palettes article { min-height: 210px; padding: 20px; border: 1px solid var(--luni-line); border-radius: 27px; background: var(--luni-surface); }
.palette-stripe { height: 74px; border-radius: 15px; }

.achievements-page { display: grid; gap: 48px; }
.achievements-page > .section { margin-top: 0; }
.app-shell .achievement-hero { min-height: 260px; padding: 44px 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .8fr); align-items: end; gap: 56px; border-radius: 39px; background: var(--luni-blue); }
.achievement-balance { display: flex; align-items: baseline; gap: 16px; }
.achievement-balance strong { color: white; font-size: clamp(72px, 7vw, 112px); line-height: .8; font-variant-numeric: tabular-nums; }
.achievement-balance span { color: white; font-size: 28px; font-weight: 700; }
.achievement-progress { width: 100%; display: grid; gap: 12px; }
.achievement-progress > strong { color: white; font-size: 18px; }
.achievement-progress > span { color: rgba(255,255,255,.72); font-size: 13px; }
.achievement-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.achievement-card { min-height: 116px; padding: 20px 22px; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 18px; border: 1px solid var(--luni-line); border-radius: 27px; background: var(--luni-surface); }
.achievement-card[data-state="unlocked"] { border-color: rgba(227, 81, 142, .38); }
.achievement-card[data-state="locked"] { color: var(--luni-ink-soft); background: rgba(255, 249, 245, .52); }
.achievement-card__icon { width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid var(--luni-line); border-radius: 50%; color: var(--luni-blue); }
.achievement-card__icon svg { width: 25px; height: 25px; }
.achievement-card h3 { margin: 0 0 4px; }
.achievement-card p { margin: 0; color: var(--luni-ink-soft); }
.achievement-card small { display: block; margin-top: 5px; color: var(--luni-pink-strong); }
.achievement-card > strong { color: var(--luni-muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.achievement-card[data-state="unlocked"] > strong { color: #61714e; }
.reward-cost > span:first-child { display: grid; gap: 3px; }
.reward-cost small { color: var(--luni-muted); font-size: 11px; }

@media (max-width: 1199px) {
  .app-topbar { padding-inline: 28px; grid-template-columns: auto 1fr auto; }
  .app-brand .brand-logo { height: 46px; }
  .home-hero { grid-template-columns: 1fr 1fr; gap: 36px; }
  .home-hero h1 { font-size: clamp(50px, 5.6vw, 67px); }
  .home-books, .home-books[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
  .home-books[data-count="1"] { grid-template-columns: minmax(0, 520px); }
  .home-book { grid-template-columns: minmax(145px, .9fr) minmax(160px, 1.1fr); }
  .home-widgets { grid-template-columns: 1fr 1fr; }
  .home-widget--favorites { grid-column: 1 / -1; }
  .home-widget--reward { grid-column: auto; min-height: 0; }
  .palette-workspace { grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; }
}

@media (max-width: 767px) {
  .app-shell { padding: 7px; background: var(--luni-outer); }
  .app-canvas { min-height: calc(100svh - 14px); border-radius: 33px; }
  .app-shell .page { padding: 32px 18px 108px; }
  .home-hero { grid-template-columns: 1fr; gap: 28px; }
  .home-hero h1 { font-size: clamp(48px, 14vw, 62px); }
  .home-hero h1 span { white-space: normal; }
  .home-total strong { font-size: 76px; }
  .home-total span { font-size: 24px; }
  .home-books, .home-books[data-count="2"], .home-books[data-count="1"] { grid-template-columns: 1fr; max-width: none; }
  .home-book { min-height: 300px; padding: 20px; grid-template-columns: 42% minmax(0, 1fr); }
  .home-book__cover img { width: 100%; }
  .home-book__copy { gap: 13px; }
  .home-widgets { grid-template-columns: 1fr; }
  .home-widget, .home-widget--reward { height: auto; min-height: 190px; grid-column: auto; }
  .palette-workspace, .app-shell .achievement-hero, .achievement-grid, .saved-palettes { grid-template-columns: 1fr; }
  .palette-builder { position: static; }
  .palette-composer { min-height: 0; }
  .achievements-page { gap: 34px; }
  .app-shell .achievement-hero { min-height: 0; padding: 30px 24px; gap: 32px; }
  .achievement-card { grid-template-columns: 48px minmax(0, 1fr); }
  .achievement-card > strong { grid-column: 2; }
}

@media (max-width: 359px) {
  .home-hero h1 { font-size: 44px; }
  .home-book { grid-template-columns: 40% minmax(0, 1fr); }
  .home-book__copy h2 { font-size: 21px; }
  .builder-slots { grid-template-columns: repeat(4, 1fr); gap: 7px; }
}

/* Keep the tracker panel within its specified working width after legacy responsive rules. */
.illustration-viewer { grid-template-columns: minmax(0, 1fr) minmax(400px, 440px); border-radius: 24px; }
@media (max-width: 1199px) {
  .illustration-viewer { grid-template-columns: minmax(0, 1fr) minmax(380px, 420px); }
}
@media (max-width: 700px) {
  .illustration-viewer { display: flex; border-radius: 0; }
}

/* Lunicolors dashboard redesign — canonical home surface */
@font-face { font-family: "Onest"; src: url("/assets/fonts-onest-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Onest"; src: url("/assets/fonts-onest-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Onest"; src: url("/assets/fonts-onest-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Onest"; src: url("/assets/fonts-onest-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

.app-shell {
  --color-bg: var(--theme-surface, #ffffff);
  --color-surface: var(--theme-surface, #ffffff);
  --color-text: #101d4f;
  --color-text-secondary: #66708c;
  --color-primary: var(--theme-accent, #ff7b95);
  --color-primary-hover: var(--theme-accent, #ff7b95);
  --color-primary-soft: var(--theme-accent, #ff7b95);
  --color-cobalt: var(--theme-accent, #ff7b95);
  --color-cobalt-hover: var(--theme-accent, #ff7b95);
  --color-cobalt-soft: var(--theme-soft, #d3f4ff);
  --color-lilac-soft: var(--theme-accent, #ff7b95);
  --color-coral-soft: var(--theme-accent, #ff7b95);
  --color-warning: var(--theme-secondary, #4f60a1);
  --color-success: #2f855a;
  --color-border: #e2e6f1;
  --color-border-strong: #cbd2e5;
  --color-disabled: #a7aec2;
  --shadow-cover: 0 12px 28px rgba(16, 29, 79, .12);
  min-height: 100svh;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Onest", Inter, system-ui, sans-serif;
}
.app-canvas { min-height: 100svh; max-width: none; margin: 0; overflow: visible; border-radius: 0; background: var(--color-bg); box-shadow: none; }
.app-shell h1, .app-shell h2, .app-shell h3 { color: var(--color-text); font-family: inherit; font-weight: 700; letter-spacing: -.035em; }
.app-shell :focus-visible { outline: 3px solid rgba(33, 70, 216, .55); outline-offset: 3px; }
.app-shell .app-topbar { position: sticky; top: 0; z-index: 30; min-height: 76px; padding: 0 max(40px, calc((100vw - 1360px) / 2)); grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr); gap: 28px; border-bottom: 1px solid var(--color-border); background: rgba(255,255,255,.96); box-shadow: none; backdrop-filter: blur(8px); }
.app-brand .brand-logo { height: 42px; width: auto; }
.app-shell .app-topnav { gap: 28px; }
.app-shell .app-topnav .nav-item { min-height: 76px; padding: 0 8px; gap: 9px; color: var(--color-text); font-size: 15px; font-weight: 500; }
.app-shell .app-topnav .nav-item svg { width: 22px; height: 22px; }
.app-shell .app-topnav .nav-item:hover, .app-shell .app-topnav .nav-item.is-active { color: var(--color-primary); }
.app-shell .app-topnav .nav-item::after { right: 8px; bottom: 0; left: 8px; height: 2px; border-radius: 0; }
.app-topbar__actions { gap: 12px; }
.balance-chip { min-height: 42px; padding: 0 16px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text); font-size: 14px; font-weight: 500; box-shadow: none; }
.balance-chip:hover { border-color: var(--color-border-strong); color: var(--color-primary); }
.balance-chip span { color: var(--color-primary); font-size: 18px; }
.app-profile-trigger { width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--color-primary); }
.app-profile-trigger .avatar { background: transparent; color: white; font-size: 16px; font-weight: 600; }
.app-profile-trigger.is-active, .app-profile-trigger[aria-expanded="true"] { outline: 2px solid var(--color-primary-soft); outline-offset: 2px; }
.app-profile-menu { border-color: var(--color-border); border-radius: 24px; background: var(--color-surface); box-shadow: 0 16px 40px rgba(16,29,79,.14); }
.app-shell .main-content { min-height: calc(100svh - 76px); background: var(--color-bg); }
.app-shell .page { width: min(1360px, 100%); max-width: none; padding: 48px 40px 88px; }
.app-shell .button { min-height: 44px; border-color: var(--color-primary); border-radius: 15px; background: var(--color-primary); color: white; font-size: 15px; font-weight: 600; box-shadow: none; }
.app-shell .button:hover:not(:disabled) { border-color: var(--color-primary-hover); background: var(--color-primary-hover); transform: translateY(-1px); }
.app-shell .button:active:not(:disabled) { transform: scale(.98); }
.app-shell .bottom-nav { display: none; }

.home-dashboard { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.home-dashboard > * { min-width: 0; }
.continue-section__layout { display: grid; grid-template-columns: minmax(285px, .7fr) minmax(330px, 1fr); align-items: center; gap: clamp(40px, 6vw, 88px); max-width: 820px; }
.cover-stack { position: relative; width: min(100%, 292px); justify-self: center; display: block; isolation: isolate; }
.cover-stack__backdrop, .cover-stack__artwork { position: absolute; z-index: -1; inset: 18px -23px -14px 20px; overflow: hidden; display: block; border-radius: 15px; background: var(--color-primary); transform: rotate(2deg); }
.cover-stack--cobalt .cover-stack__backdrop { background: var(--color-cobalt); }.cover-stack--coral .cover-stack__backdrop { background: #f17e78; }.cover-stack--lilac .cover-stack__backdrop { background: var(--theme-accent, #ff7b95); }
.cover-stack__artwork { background: var(--theme-soft, #f4edf3); }
.cover-stack__artwork img { width: 100%; height: 100%; max-height: none; display: block; border-radius: inherit; box-shadow: none; object-fit: cover; }
.cover-stack img { width: 100%; max-height: 340px; object-fit: contain; border-radius: 12px; box-shadow: var(--shadow-cover); }
.continue-section__content { min-width: 0; }
.continue-section__content h2 { margin: 0 0 18px; font-size: 32px; line-height: 1.15; }
.book-segments { display: flex; flex-wrap: wrap; gap: 6px; max-width: 410px; margin-bottom: 16px; }
.book-segments i { width: 20px; height: 14px; border: 2px solid var(--color-border); border-radius: 6px; background: var(--color-surface); }
.book-segments i[data-state="done"] { border-color: var(--color-primary); background: var(--color-primary); }.book-segments i[data-state="in-progress"] { border-color: var(--color-warning); background: var(--color-warning); }
.continue-section__progress { display: flex; align-items: baseline; gap: 8px; }.continue-section__progress strong { color: var(--color-primary); font-size: 42px; line-height: 1; font-variant-numeric: tabular-nums; }.continue-section__progress span { font-size: 20px; font-weight: 600; }
.continue-section__content > p { margin: 5px 0 16px; color: var(--color-text-secondary); font-size: 15px; }.continue-section__metrics { display: flex; gap: 0; margin: 0 0 22px; }.continue-section__metrics span { padding: 0 20px; display: grid; gap: 2px; border-left: 1px solid var(--color-border); color: var(--color-text-secondary); font-size: 13px; }.continue-section__metrics span:first-child { padding-left: 0; border-left: 0; }.continue-section__metrics b { color: var(--color-text); font-size: 22px; line-height: 1; }
.collection-summary { padding: 20px 24px; display: grid; grid-template-columns: 1.1fr minmax(180px, .8fr) 1fr; gap: 28px; align-items: center; border: 1px solid var(--color-border); border-radius: 24px; background: var(--color-surface); }.collection-summary > div:first-child { display: grid; gap: 3px; }.collection-summary > div:first-child > span { color: var(--color-text-secondary); font-size: 13px; font-weight: 500; }.collection-summary strong { font-size: 28px; line-height: 1; }.collection-summary strong small { color: var(--color-text-secondary); font-size: 14px; font-weight: 500; }.collection-summary p { margin: 0; color: var(--color-text-secondary); font-size: 12px; }.collection-summary__bar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }.collection-summary__bar span { color: var(--color-text-secondary); font-size: 13px; font-variant-numeric: tabular-nums; }.app-shell .progress { height: 6px; border-radius: 999px; background: var(--color-cobalt-soft); }.app-shell .progress span { background: var(--color-primary); }.collection-summary dl { margin: 0; display: flex; justify-content: space-between; gap: 12px; }.collection-summary dt { color: var(--color-text-secondary); font-size: 12px; }.collection-summary dd { margin: 2px 0 0; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.single-book-summary { margin: -18px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--color-text-secondary); font-size: 14px; }.single-book-summary b { color: var(--color-text); }.single-book-summary span { position: relative; }.single-book-summary span::before { position: absolute; left: -12px; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--color-primary); content: ""; }
.dashboard-section__heading { margin-bottom: 18px; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }.dashboard-section__heading h2 { margin: 0; font-size: 24px; line-height: 1.2; }.dashboard-section__heading a, .next-reward a { display: inline-flex; align-items: center; gap: 6px; color: var(--color-cobalt); font-size: 14px; font-weight: 600; }.dashboard-section__heading a svg, .next-reward a svg { width: 16px; height: 16px; }
.shelf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }.shelf-book { min-width: 0; padding: 14px; display: grid; grid-template-columns: 42% 1fr; align-items: center; gap: 13px; border: 1px solid var(--color-border); border-radius: 24px; background: var(--color-surface); transition: border-color 170ms ease, transform 170ms ease; }.shelf-book:hover { border-color: var(--color-border-strong); transform: translateY(-2px); }.shelf-book__cover { position: relative; isolation: isolate; }.shelf-book__cover::before { position: absolute; z-index: -1; inset: 7px -5px -7px 6px; border-radius: 9px; background: var(--color-primary-soft); content: ""; }.shelf-book__cover--artwork::before { content: none; }.shelf-book--cobalt .shelf-book__cover::before { background: var(--color-cobalt-soft); }.shelf-book--coral .shelf-book__cover::before { background: var(--color-coral-soft); }.shelf-book--lilac .shelf-book__cover::before { background: var(--color-lilac-soft); }.shelf-book__artwork { position: absolute; z-index: -1; inset: 4px -4px -4px 4px; display: block; overflow: hidden; border-radius: 7.5px; background: var(--theme-soft, #f4edf3); }.shelf-book img { width: 100%; aspect-ratio: .72; object-fit: cover; border-radius: 7.5px; box-shadow: var(--shadow-cover); }.shelf-book__artwork img { width: 100%; height: 100%; max-height: none; display: block; border-radius: inherit; box-shadow: none; object-fit: cover; }.shelf-book__content { min-width: 0; display: grid; gap: 7px; }.shelf-book__content strong { overflow: hidden; font-size: 16px; line-height: 1.25; text-overflow: ellipsis; }.shelf-book__content > span, .shelf-book__content small { color: var(--color-text-secondary); font-size: 12px; }.shelf-book__content b { color: var(--color-primary); font-size: 17px; }.shelf-book .progress { margin-top: 2px; }.add-book-card { min-height: 174px; padding: 16px; display: grid; place-content: center; justify-items: center; gap: 6px; border: 1px dashed var(--color-border-strong); border-radius: 24px; color: var(--color-text); text-align: center; }.add-book-card:hover { border-color: var(--color-cobalt); color: var(--color-cobalt); }.add-book-card > span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 23px; font-weight: 400; }.add-book-card strong { font-size: 15px; }.add-book-card small { color: var(--color-text-secondary); font-size: 12px; }
.dashboard-lower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .32fr); gap: 24px; align-items: start; }.favorite-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }.favorite-card { min-width: 0; position: relative; display: grid; gap: 8px; }.favorite-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--color-border); border-radius: 15px; transition: border-color 170ms ease, transform 170ms ease; }.favorite-card:hover img { border-color: var(--color-border-strong); transform: translateY(-2px); }.favorite-card > span { overflow: hidden; display: grid; gap: 1px; color: var(--color-text); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }.favorite-card > span > b { color: var(--color-primary); font-size: 11px; letter-spacing: .08em; }.favorite-card small { overflow: hidden; color: var(--color-text-secondary); font-size: 11px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }.favorites-empty { margin: 0; padding: 24px 0; border-top: 1px solid var(--color-border); color: var(--color-text-secondary); }.next-reward { padding: 20px; border: 1px solid var(--color-border); border-radius: 24px; background: var(--color-primary-soft); }.next-reward h2 { margin: 0 0 17px; font-size: 18px; }.next-reward > strong { color: var(--color-primary); font-size: 18px; }.next-reward p { margin: 5px 0 16px; color: var(--color-text-secondary); font-size: 13px; }.next-reward .progress { margin-bottom: 16px; background: rgba(246,0,127,.15); }.empty-collection { max-width: 590px; padding: 48px 0; }.empty-collection h1 { margin: 0 0 12px; font-size: 32px; }.empty-collection p { max-width: 520px; margin: 0 0 22px; color: var(--color-text-secondary); }
.home-dashboard--loading { gap: 28px; }.home-skeleton__title { width: 210px; height: 38px; }.home-skeleton__continue { display: grid; grid-template-columns: 290px 360px; align-items: center; gap: 72px; }.home-skeleton__cover { height: 340px; }.home-skeleton__heading { width: 65%; height: 38px; margin-bottom: 20px; }.home-skeleton__segments { width: 100%; height: 14px; margin-bottom: 26px; }.home-skeleton__number { width: 130px; height: 44px; margin-bottom: 28px; }.home-skeleton__button { width: 190px; height: 44px; }.home-skeleton__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }.home-skeleton__cards > div { height: 180px; }

@media (max-width: 1199px) { .app-shell .app-topbar { padding-inline: 28px; }.app-shell .page { padding-inline: 28px; }.continue-section__layout { gap: 44px; }.shelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.add-book-card { min-height: 180px; } }
@media (max-width: 900px) { .app-shell .app-topbar { padding-inline: 24px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; }.app-brand .brand-logo { height: 35px; }.app-shell .app-topnav { justify-content: center; gap: 8px; }.app-shell .app-topnav .nav-item { padding-inline: 6px; font-size: 13px; }.app-shell .app-topnav .nav-item svg { width: 19px; height: 19px; }.app-shell .balance-chip { display: none; } }
@media (max-width: 767px) { .app-shell { padding: 0; }.app-canvas { border-radius: 0; }.app-shell .app-topbar { min-height: 68px; padding: 0 16px; grid-template-columns: 1fr auto; }.app-brand .brand-logo { height: 33px; }.app-topnav, .balance-chip { display: none; }.app-topbar__actions { gap: 10px; }.app-profile-trigger { width: 40px; height: 40px; }.app-shell .main-content { min-height: calc(100svh - 68px); padding-bottom: 74px; }.app-shell .page { padding: 32px 16px 94px; }.app-shell .bottom-nav { position: fixed; z-index: 40; right: 0; bottom: 0; left: 0; min-height: 70px; padding: 6px 8px max(6px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--color-border); background: rgba(255,255,255,.98); box-shadow: none; }.app-shell .bottom-nav .nav-item { min-height: 54px; min-width: 0; padding: 4px 2px; flex-direction: column; gap: 2px; color: var(--color-text-secondary); font-size: 10px; font-weight: 500; }.app-shell .bottom-nav .nav-item svg { width: 20px; height: 20px; }.app-shell .bottom-nav .nav-item.is-active { color: var(--color-primary); }.app-shell .bottom-nav .nav-item::after { right: 27%; bottom: 0; left: 27%; height: 2px; }.home-dashboard { gap: 38px; }.continue-section__layout { grid-template-columns: minmax(126px, .68fr) minmax(0, 1fr); gap: 22px; }.cover-stack { width: 100%; }.cover-stack__backdrop, .cover-stack__artwork { inset: 12px -12px -8px 10px; }.cover-stack img { max-height: 250px; }.continue-section__content h2 { margin-bottom: 13px; font-size: 24px; }.book-segments { gap: 4px; margin-bottom: 13px; }.book-segments i { width: 14px; height: 10px; border-width: 1px; border-radius: 3px; }.continue-section__progress strong { font-size: 34px; }.continue-section__progress span { font-size: 17px; }.continue-section__content > p { margin-bottom: 12px; font-size: 13px; }.continue-section__metrics { display: grid; grid-template-columns: 1fr; margin-bottom: 17px; }.continue-section__metrics span { padding: 0; font-size: 11px; }.continue-section__metrics b { font-size: 18px; }.continue-section__content .button { width: 100%; padding-inline: 10px; font-size: 13px; }.collection-summary { grid-template-columns: 1fr; gap: 14px; padding: 18px; }.collection-summary dl { max-width: 280px; }.single-book-summary { margin-top: -20px; gap: 8px 18px; font-size: 13px; }.dashboard-section__heading h2 { font-size: 22px; }.dashboard-section__heading a { font-size: 13px; }.shelf-grid { margin-right: -16px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }.shelf-book, .add-book-card { flex: 0 0 min(78vw, 280px); min-height: 162px; scroll-snap-align: start; }.shelf-book { padding: 12px; }.dashboard-lower { grid-template-columns: 1fr; gap: 32px; }.favorite-grid { margin-right: -16px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }.favorite-card { flex: 0 0 146px; scroll-snap-align: start; }.next-reward { padding: 18px; }.empty-collection { padding: 24px 0 12px; }.empty-collection h1 { font-size: 28px; }.home-skeleton__continue { grid-template-columns: 40% 1fr; gap: 22px; }.home-skeleton__cover { height: 245px; }.home-skeleton__cards { grid-template-columns: repeat(2, 1fr); }.home-skeleton__cards > div { height: 150px; } }
@media (max-width: 359px) { .continue-section__layout { grid-template-columns: 1fr; }.cover-stack { width: min(220px, 100%); justify-self: start; }.continue-section__content .button { font-size: 14px; }.book-segments i { width: 12px; } }
@media (prefers-reduced-motion: reduce) { .app-shell *, .app-shell *::before, .app-shell *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* Geometry refinement: product content, not stretched surfaces. */
.app-shell .page--home { gap: 48px; padding-top: 24px; }
.continue-section__layout { max-width: none; min-height: 280px; grid-template-columns: minmax(180px, 3fr) minmax(250px, 4fr) minmax(300px, 5fr); gap: 24px; align-items: center; }
.cover-stack { width: min(100%, 230px); }
.cover-stack img { height: 280px; max-height: 280px; object-fit: contain; }
.cover-stack__artwork img { height: 100%; max-height: none; object-fit: cover; }
.continue-section__content h2 { margin-bottom: 14px; font-size: 28px; }
.continue-section__content > p { margin-bottom: 13px; }
.continue-section__metrics { margin-bottom: 0; align-items: center; }
.continue-section__metrics span { min-height: 38px; }
.continue-section__content > .button { margin-top: 18px; }
.overall-progress { position: relative; width: 100%; min-height: 294px; padding: 22px 24px; display: grid; grid-template-rows: auto auto auto auto 1fr; align-content: start; gap: 10px; overflow: hidden; border: 1px solid var(--theme-accent, #ff7b95); border-radius: 30px; background: var(--theme-soft, #d3f4ff); color: var(--color-text); transition: border-color 160ms var(--ease), transform 160ms var(--ease); }
.overall-progress:hover { border-color: var(--theme-accent, #ff7b95); transform: translateY(-1px); }
.overall-progress__spark { position: absolute; top: 18px; right: 20px; color: var(--color-primary); font-size: 22px; line-height: 1; }
.overall-progress__title { color: var(--color-text); font-size: 16px; font-weight: 700; }
.overall-progress__number { display: grid; gap: 1px; }
.overall-progress__number b { color: var(--color-primary); font-size: 38px; line-height: .98; letter-spacing: -.05em; }
.overall-progress__number small { color: var(--color-text); font-size: 18px; letter-spacing: -.025em; }
.overall-progress__number > span, .overall-progress__percent { color: var(--color-text-secondary); font-size: 13px; }
.overall-segments { --segment-columns: 21; display: grid; grid-template-columns: repeat(var(--segment-columns), minmax(0, 1fr)); gap: 5px; margin-top: 2px; }
.overall-segments i { height: 8px; border: 1px solid var(--theme-soft, #d3f4ff); border-radius: 2px; background: var(--theme-surface, #fff); }
.overall-segments i[data-state="done"] { border-color: var(--color-primary); background: var(--color-primary); }
.overall-segments i[data-state="in-progress"] { border-color: var(--theme-accent, #ff7b95); background: var(--theme-accent, #ff7b95); }
.overall-progress__percent { font-weight: 600; }
.overall-progress__facts { align-self: end; padding-top: 13px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border-top: 1px solid var(--theme-accent, #ff7b95); color: var(--color-text); font-size: 13px; font-weight: 600; }
.collection-summary, .single-book-summary { display: none; }
.shelf-section__summary { margin: 5px 0 0; color: var(--color-text-secondary); font-size: 13px; font-weight: 400; }
.shelf-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 360px)); gap: 20px; align-items: start; justify-content: start; }
.shelf-book, .add-book-card { width: 100%; height: 220px; min-height: 220px; max-height: 220px; }
.shelf-book { padding: 16px; grid-template-columns: 124px minmax(0, 1fr); gap: 18px; align-items: center; }
.shelf-book__cover { width: 124px; display: block; overflow: visible; }
.shelf-book__cover > img { width: 100%; height: auto; display: block; aspect-ratio: auto; object-fit: initial; }
.shelf-book__content { align-content: center; }.shelf-book__content strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
.add-book-card { place-content: center; }
.dashboard-lower { grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; }
.favorite-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.favorite-card { height: 218px; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; }
.favorite-media { width: 100%; aspect-ratio: 16 / 11; display: block; overflow: hidden; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-cobalt-soft); }
.favorite-media img, .favorite-card img { width: 100%; height: 100%; display: block; aspect-ratio: auto; border: 0; border-radius: 0; object-fit: cover; object-position: center; }
.favorite-card:hover .favorite-media { border-color: var(--color-border-strong); transform: translateY(-2px); }.favorite-card:hover img { transform: none; }
.favorite-card > span { gap: 2px; white-space: normal; }.favorite-card > span > b { color: var(--color-text); font-size: 13px; letter-spacing: 0; }.favorite-card small { font-size: 12px; }
.next-reward { min-height: 210px; height: 210px; padding: 20px; display: grid; align-content: start; }.next-reward h2 { margin-bottom: 13px; }.next-reward p { margin-bottom: 14px; }.next-reward .progress { margin-bottom: 15px; }

@media (max-width: 1199px) {
  .continue-section__layout { grid-template-columns: minmax(165px, 2.7fr) minmax(220px, 4fr) minmax(260px, 5fr); gap: 20px; }
  .cover-stack { width: min(100%, 205px); }.cover-stack img { height: 250px; max-height: 250px; }
  .shelf-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 360px)); }.dashboard-lower { grid-template-columns: minmax(0, 1fr) 260px; }
}
@media (max-width: 900px) {
  .continue-section__layout { grid-template-columns: minmax(150px, 2.7fr) minmax(200px, 4fr) minmax(240px, 5fr); gap: 18px; }
  .overall-progress { min-height: 282px; padding: 20px; }.overall-progress__facts { gap: 7px; font-size: 12px; }.dashboard-lower { grid-template-columns: 1fr; }.next-reward { width: min(100%, 360px); }
}
@media (max-width: 767px) {
  .app-shell .page--home { gap: 38px; padding-top: 26px; }
  .continue-section__layout { min-height: 0; grid-template-columns: minmax(126px, .68fr) minmax(0, 1fr); gap: 20px; }.cover-stack { width: 100%; }.cover-stack img { height: auto; max-height: 250px; }.cover-stack__artwork img { height: 100%; max-height: none; object-fit: cover; }
  .continue-section__content > .button { width: 100%; margin-top: 14px; }.overall-progress { grid-column: 1 / -1; min-height: 284px; margin-top: 4px; padding: 20px; }.overall-progress__number b { font-size: 36px; }.overall-progress__facts { padding-top: 12px; font-size: 12px; }
  .shelf-section__summary { font-size: 12px; }.shelf-grid { grid-template-columns: none; }.shelf-book, .add-book-card { height: 164px; min-height: 164px; max-height: 164px; }.shelf-book { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 12px; }.shelf-book__cover { width: 92px; }.add-book-card { flex-basis: min(78vw, 280px); }
  .favorite-grid { grid-template-columns: none; }.favorite-card { height: 192px; flex-basis: 194px; }.favorite-media { aspect-ratio: 16 / 11; }.next-reward { width: 100%; min-height: 190px; height: auto; }
}
@media (max-width: 359px) { .continue-section__layout { grid-template-columns: 1fr; }.cover-stack { width: min(205px, 100%); }.overall-progress__facts { grid-template-columns: 1fr 1fr; }.overall-progress__facts span:last-child { grid-column: 1 / -1; } }

/* Illustration viewer — full-screen reference and personal marker mapping. */
.illustration-overlay { --viewer-navy: var(--theme-ink, #10255c); --viewer-pink: var(--theme-accent, #ff7b95); --viewer-blue: var(--theme-secondary, #2147c7); --viewer-bg: var(--theme-stage, #f7f8fc); --viewer-surface: var(--theme-surface, #fff); --viewer-border: var(--theme-line, #e2e6ef); --viewer-muted: var(--theme-muted, #7d879e); --viewer-soft: var(--theme-stage, #f2f4f8); --viewer-yellow: var(--theme-secondary, #4f60a1); --viewer-error: var(--theme-accent, #ff7b95); padding: 0; place-items: stretch; background: var(--viewer-bg); backdrop-filter: none; }
.illustration-viewer { width: 100vw; height: 100dvh; min-height: 720px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 88px minmax(0, 1fr); overflow: hidden; border-radius: 0; background: var(--viewer-bg); box-shadow: none; color: var(--viewer-navy); animation: none; font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif); }
.illustration-viewer h2, .illustration-viewer h3 { font-family: inherit; color: var(--viewer-navy); }
.viewer-topbar { min-height: 88px; padding: 0 40px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--viewer-border); background: var(--viewer-surface); }
.viewer-back { min-width: 44px; min-height: 44px; padding: 0; display: inline-flex; align-items: center; justify-self: start; gap: 8px; border: 0; background: transparent; color: var(--viewer-pink); cursor: pointer; font-size: 22px; font-weight: 750; letter-spacing: -.025em; }
.viewer-back svg { width: 26px; height: 26px; }.viewer-back:hover span { text-decoration: underline; text-underline-offset: 4px; }
.viewer-index { justify-self: center; color: var(--viewer-navy); font-size: 25px; font-weight: 650; font-variant-numeric: tabular-nums; }.viewer-index b { color: var(--viewer-pink); font-weight: 750; }.viewer-index span { white-space: pre; }
.viewer-topbar-actions { justify-self: end; display: flex; gap: 12px; }.viewer-toolbar-button { width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border: 1px solid var(--viewer-border); border-radius: 15px; background: var(--theme-surface, #fff); color: var(--viewer-navy); cursor: pointer; transition: border-color 150ms ease, color 150ms ease, transform 150ms ease; }.viewer-toolbar-button:hover { border-color: var(--viewer-pink); color: var(--viewer-pink); }.viewer-toolbar-button:active { transform: scale(.96); }.viewer-toolbar-button svg { width: 25px; height: 25px; }.viewer-favorite[aria-pressed="true"] { color: var(--viewer-pink); }.viewer-favorite[aria-pressed="true"] svg { fill: currentColor; }
.viewer-workspace { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(460px, 35vw, 650px); }.viewer-stage { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; border-right: 1px solid var(--viewer-border); background: var(--viewer-bg); }
.viewer-image-zone { min-width: 0; min-height: 0; padding: 52px 68px 28px; display: grid; place-items: center; overflow: hidden; touch-action: none; }.viewer-image-zone[data-panning="true"] { cursor: grab; }.viewer-image-zone[data-dragging="true"] { cursor: grabbing; user-select: none; }
.viewer-image-frame { position: relative; max-width: 100%; max-height: 100%; display: grid; place-items: center; }.viewer-image-transform { max-width: 100%; max-height: 100%; display: grid; place-items: center; transform-origin: center; transition: transform 150ms ease; will-change: transform; }.viewer-image-zone[data-dragging="true"] .viewer-image-transform { transition: none; }
.viewer-stage-image { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; border: 1px solid rgba(0, 0, 0, .1); border-radius: 12px; object-fit: contain; user-select: none; -webkit-user-drag: none; }.viewer-stage .illustration-placeholder { width: min(520px, 72vw); height: min(520px, 72vh); min-height: 280px; display: grid; place-content: center; justify-items: center; gap: 12px; border: 1px solid var(--viewer-border); border-radius: 12px; background: var(--theme-surface, #fff); color: var(--viewer-muted); }
.stage-arrow { position: absolute; z-index: 2; top: 50%; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(226, 230, 239, .9); border-radius: 50%; background: rgba(255, 255, 255, .96); box-shadow: 0 8px 22px color-mix(in srgb, var(--theme-strong) 8%, transparent); color: var(--viewer-navy); cursor: pointer; transform: translateY(-50%); }.stage-arrow svg { width: 26px; height: 26px; }.stage-arrow--prev { left: 16px; }.stage-arrow--next { right: 16px; }.stage-arrow:disabled { opacity: .35; cursor: default; box-shadow: none; }
.viewer-zoom-controls { height: 52px; margin: 0 auto 28px; padding: 0 14px; display: inline-flex; align-items: center; justify-self: center; gap: 4px; border: 1px solid var(--viewer-border); border-radius: 999px; background: var(--theme-surface, #fff); box-shadow: 0 8px 24px color-mix(in srgb, var(--theme-strong) 7.000000000000001%, transparent); }.viewer-zoom-controls button { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--viewer-navy); cursor: pointer; }.viewer-zoom-controls button:hover:not(:disabled) { background: var(--viewer-soft); color: var(--viewer-blue); }.viewer-zoom-controls button:active:not(:disabled) { transform: scale(.96); }.viewer-zoom-controls button:disabled { opacity: .35; cursor: default; }.viewer-zoom-controls output { min-width: 64px; color: var(--viewer-blue); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }.viewer-zoom-controls > i { width: 1px; height: 24px; margin-inline: 6px; background: var(--viewer-border); }
.viewer-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; background: var(--theme-surface, #fff); }.marker-panel-header { padding: 36px 42px 20px; background: var(--theme-surface, #fff); }.marker-panel-header__row { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }.marker-panel-header h2 { margin: 0; font-size: clamp(26px, 1.8vw, 34px); font-weight: 750; line-height: 1.15; letter-spacing: -.025em; }.marker-panel-header__row > strong { flex: 0 0 auto; color: var(--viewer-navy); font-size: 15px; font-variant-numeric: tabular-nums; }.marker-panel-header__row > strong b { color: var(--viewer-pink); }.marker-panel-header__meta { margin-top: 12px; align-items: center; }.marker-panel-header__meta p { margin: 0; color: var(--viewer-muted); font-size: 15px; }.marker-panel-header__meta [data-marker-panel-save] { min-height: 20px; display: inline-flex; align-items: center; gap: 6px; color: var(--viewer-blue); font-size: 14px; font-weight: 650; }.marker-panel-header__meta [data-marker-panel-save] svg { width: 18px; height: 18px; }.marker-panel-header__meta button { padding: 0; border: 0; background: transparent; color: var(--viewer-error); cursor: pointer; font-size: 13px; font-weight: 650; }
.marker-tracker__progress { height: 8px; margin-top: 22px; overflow: hidden; border-radius: 999px; background: var(--theme-stage, #eef0f5); }.marker-tracker__progress span { display: block; height: 100%; border-radius: inherit; background: var(--viewer-pink); transition: width 240ms ease; }.viewer-panel-scroll { min-height: 0; padding: 12px 42px 28px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }.marker-tracker { padding: 0; border: 0; }.marker-tracker--error { padding-top: 12px; }.palette-inline-error { border-color: var(--viewer-border); border-radius: 15px; background: var(--viewer-soft); color: var(--viewer-navy); }
.marker-mapping-grid { display: grid; gap: 10px; }.marker-mapping-row { position: relative; min-height: 56px; display: grid; grid-template-columns: 34px 54px minmax(150px, 1fr) 36px 36px; align-items: center; gap: 14px; }.marker-row-number { color: var(--viewer-navy); font-size: 16px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }.marker-swatch { width: 54px; height: 54px; border: 1px solid rgba(16, 37, 92, .08); border-radius: 12px; background: var(--swatch); }.marker-input-wrap { min-width: 0; position: relative; }.marker-input-wrap input { width: 100%; height: 54px; min-height: 54px; padding: 0 16px; border: 1px solid var(--viewer-border); border-radius: 12px; background: var(--theme-surface, #fff); color: var(--viewer-navy); font-size: 16px; font-weight: 550; outline: none; }.marker-input-wrap input:focus { border-color: var(--viewer-blue); box-shadow: 0 0 0 3px rgba(33, 71, 199, .1); }.marker-input-wrap input::placeholder { color: #aab2c2; }.marker-save-state { position: absolute; right: 10px; top: 100%; margin-top: 2px; color: var(--viewer-blue); font-size: 10px; font-weight: 650; }.marker-mapping-row[data-state="error"] input { border-color: var(--viewer-error); }.marker-save-state button { padding: 0; border: 0; background: transparent; color: var(--viewer-error); cursor: pointer; font-size: 10px; }.marker-row-action { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--viewer-muted); cursor: pointer; }.marker-row-action:hover:not(:disabled) { background: var(--viewer-soft); color: var(--viewer-navy); }.marker-row-action:disabled { opacity: .25; cursor: default; }.marker-row-action svg { width: 19px; height: 19px; }.marker-recent-wrap { position: relative; }.marker-recent-menu { position: absolute; z-index: 12; right: 0; top: calc(100% + 6px); min-width: 150px; max-height: 180px; padding: 6px; overflow-y: auto; border: 1px solid var(--viewer-border); border-radius: 15px; background: var(--theme-surface, #fff); box-shadow: 0 10px 24px color-mix(in srgb, var(--theme-strong) 12%, transparent); }.marker-recent-menu button { width: 100%; min-height: 34px; padding: 6px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--viewer-navy); cursor: pointer; text-align: left; font-weight: 650; }.marker-recent-menu button:hover { background: var(--viewer-soft); }.marker-recent-menu span { display: block; padding: 8px; color: var(--viewer-muted); font-size: 12px; white-space: nowrap; }
.marker-recents { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--viewer-border); }.marker-recents h3 { margin: 0 0 12px; font-size: 15px; font-weight: 750; }.marker-recents__list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }.marker-recents__list button { height: 34px; flex: 0 0 auto; padding: 0 14px; border: 0; border-radius: 999px; background: #f0f2f6; color: var(--viewer-navy); cursor: pointer; font-size: 13px; font-weight: 650; }.marker-recents__list button:hover { background: var(--viewer-soft); }.marker-recents__list > span { color: var(--viewer-muted); font-size: 13px; }
.viewer-panel-footer { position: relative; z-index: 5; padding: 20px 42px 28px; display: grid; grid-template-columns: minmax(150px, .7fr) minmax(240px, 1.3fr); gap: 18px; border-top: 1px solid var(--viewer-border); background: var(--theme-surface, #fff); box-shadow: 0 -10px 24px color-mix(in srgb, var(--theme-strong) 3.5000000000000004%, transparent); }.viewer-status-wrap { position: relative; }.viewer-status-trigger, .viewer-complete { height: 58px; width: 100%; padding: 0 16px; border-radius: 15px; font-weight: 700; cursor: pointer; }.viewer-status-trigger { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--viewer-border); background: var(--theme-surface, #fff); color: var(--viewer-blue); }.viewer-status-trigger svg { width: 18px; height: 18px; margin-left: auto; }.viewer-status-trigger > i { width: 9px; height: 9px; border-radius: 50%; background: var(--viewer-yellow); }.viewer-status-trigger > i[data-status="done"] { background: #45a27d; }.viewer-status-trigger > i[data-status="not_started"] { background: #cbd2df; }.viewer-status-menu { position: absolute; z-index: 15; bottom: calc(100% + 8px); left: 0; width: 100%; padding: 6px; border: 1px solid var(--viewer-border); border-radius: 15px; background: var(--theme-surface, #fff); box-shadow: 0 10px 24px color-mix(in srgb, var(--theme-strong) 12%, transparent); }.viewer-status-menu button { width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 10.5px; background: transparent; color: var(--viewer-navy); cursor: pointer; text-align: left; }.viewer-status-menu button:hover, .viewer-status-menu button[data-selected="true"] { background: var(--viewer-soft); }.viewer-complete { border: 0; background: var(--viewer-pink); color: #fff; font-size: 16px; transition: transform 150ms ease, filter 150ms ease; }.viewer-complete:hover:not(:disabled) { filter: brightness(.97); transform: translateY(-1px); }.viewer-complete:active:not(:disabled) { transform: translateY(0) scale(.96); }.viewer-complete:disabled { background: var(--viewer-soft); color: var(--viewer-blue); cursor: default; }
.illustration-viewer :focus-visible { outline: 3px solid rgba(33, 71, 199, .28); outline-offset: 2px; }.illustration-viewer:fullscreen { width: 100vw; height: 100dvh; }
@media (min-width: 1800px) { .viewer-workspace { grid-template-columns: minmax(0, 1fr) 650px; } }
@media (min-width: 768px) and (max-width: 1199px) { .viewer-workspace { grid-template-columns: minmax(0, 1fr) 400px; }.viewer-topbar { padding-inline: 24px; }.marker-panel-header, .viewer-panel-scroll, .viewer-panel-footer { padding-inline: 26px; }.marker-mapping-row { grid-template-columns: 28px 46px minmax(0, 1fr) 32px 32px; gap: 9px; }.marker-swatch { width: 46px; height: 46px; }.marker-input-wrap input { min-height: 46px; height: 46px; }.viewer-panel-footer { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .illustration-viewer { min-height: 100dvh; height: auto; display: block; overflow: visible; }.illustration-overlay { overflow-y: auto; }.viewer-topbar { position: sticky; z-index: 30; top: 0; min-height: 60px; height: 60px; padding: 0 12px; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }.viewer-back { min-width: 40px; min-height: 40px; gap: 2px; overflow: hidden; font-size: 16px; white-space: nowrap; }.viewer-back span { overflow: hidden; text-overflow: ellipsis; }.viewer-index { font-size: 17px; }.viewer-topbar-actions { gap: 4px; }.viewer-topbar-actions [data-action="viewer-fullscreen"] { display: none; }.viewer-toolbar-button { width: 40px; height: 40px; border: 0; }.viewer-toolbar-button svg { width: 23px; height: 23px; }.viewer-workspace { display: block; }.viewer-stage { min-height: 0; height: min(52dvh, 480px); display: grid; border-right: 0; border-bottom: 1px solid var(--viewer-border); }.viewer-image-zone { padding: 18px 14px 10px; }.viewer-image-frame { width: 100%; height: 100%; }.viewer-image-transform { width: 100%; height: 100%; }.viewer-stage-image { max-height: 100%; }.stage-arrow { width: 44px; height: 44px; }.stage-arrow--prev { left: 8px; }.stage-arrow--next { right: 8px; }.viewer-zoom-controls { height: 44px; margin-bottom: 10px; padding-inline: 8px; }.viewer-zoom-controls button { width: 34px; height: 34px; }.viewer-zoom-controls output { min-width: 56px; font-size: 13px; }.viewer-panel { min-height: 0; display: grid; border-top: 0; }.marker-panel-header, .viewer-panel-scroll, .viewer-panel-footer { order: initial; }.marker-panel-header { padding: 24px 16px 16px; }.marker-panel-header h2 { font-size: 26px; }.marker-panel-header__row > strong { font-size: 13px; }.marker-panel-header__meta p { font-size: 14px; }.viewer-panel-scroll { padding: 12px 16px 20px; overflow: visible; }.viewer-panel-footer { position: sticky; bottom: 0; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); grid-template-columns: 1fr 1.3fr; box-shadow: 0 -10px 24px color-mix(in srgb, var(--theme-strong) 7.000000000000001%, transparent); }.marker-mapping-row { grid-template-columns: 28px 44px minmax(0, 1fr) 40px; gap: 9px; }.marker-swatch { width: 44px; height: 44px; }.marker-input-wrap input { min-height: 44px; height: 44px; padding-inline: 12px; font-size: 15px; }.marker-row-action { width: 40px; height: 40px; }.marker-recent-wrap { display: none; }.marker-recents { margin-top: 25px; } }
@media (max-width: 389px) { .viewer-panel-footer { grid-template-columns: 1fr; }.marker-panel-header__meta [data-marker-panel-save] { font-size: 12px; }.viewer-back span { max-width: 96px; } }

/* Marker ledger: compact personal palette, retaining the existing marker API. */
.viewer-workspace { grid-template-columns: minmax(0, 1fr) clamp(680px, 44vw, 760px); }
.viewer-panel { container-type: inline-size; grid-template-rows: auto minmax(0, 1fr) auto; }
.marker-panel-header { padding: 32px 36px 0; }
.marker-panel-header__main { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.marker-panel-header h2 { font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.marker-panel-header__main > div > p { margin: 6px 0 0; color: var(--theme-muted, #7d89a6); font-size: 15px; line-height: 1.4; }
.marker-panel-header__status { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding-top: 1px; }
.marker-panel-header__status > strong { height: 40px; padding: 0 14px; display: inline-flex; align-items: center; border: 1px solid var(--theme-line, #dbe1ef); border-radius: 15px; color: var(--theme-ink, #10245f); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.marker-panel-header [data-marker-panel-save] { min-height: 24px; display: inline-flex; align-items: center; gap: 7px; color: var(--theme-ink, #10245f); font-size: 14px; font-weight: 600; white-space: nowrap; }
.marker-panel-header [data-marker-panel-save] svg { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--theme-ink, #10245f); color: #fff; fill: none; stroke: currentColor; }
.marker-panel-header [data-marker-panel-save] button { border: 0; background: transparent; color: var(--theme-accent, #ff7b95); font: inherit; font-weight: 700; cursor: pointer; }
.marker-tracker__progress { height: 1px; margin: 20px 0 0; overflow: visible; border-radius: 0; background: var(--theme-line, #e4e8f1); }
.marker-tracker__progress span { height: 2px; border-radius: 0; background: var(--theme-accent, #ff7b95); }
.viewer-panel-scroll { padding: 0 18px 8px 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.marker-tracker { padding: 0; }
.marker-ledger-title { margin: 22px 36px 10px; color: var(--theme-ink, #10245f); font-size: 17px; line-height: 1.3; font-weight: 700; }
.marker-mapping-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--theme-line, #e4e8f1); gap: 0; }
.marker-ledger__column + .marker-ledger__column { border-left: 1px solid var(--theme-line, #e4e8f1); }
.marker-mapping-row { position: relative; min-height: 58px; display: grid; grid-template-columns: 38px 38px minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 8px 18px; border-bottom: 1px solid var(--theme-line, #e4e8f1); background: transparent; }
.marker-mapping-row:hover { background: #fafbff; }
.marker-row-number { color: var(--theme-ink, #10245f); font-size: 15px; line-height: 1; font-weight: 700; text-align: left; font-variant-numeric: tabular-nums; }
.marker-swatch { width: 36px; height: 36px; border: 1px solid rgba(16, 36, 95, .12); border-radius: 13.5px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.marker-input-wrap { position: relative; min-width: 0; }
.marker-input-wrap input { width: 100%; height: 38px; min-height: 38px; padding: 0 36px 0 12px; border: 1px solid var(--theme-line, #dbe1ef); border-radius: 13.5px; background: var(--theme-surface, #fff); color: var(--theme-ink, #10245f); font-size: 15px; line-height: 1; font-weight: 500; outline: none; }
.marker-input-wrap input::placeholder { color: #a2aabb; font-weight: 400; }
.marker-input-wrap input:focus { border-color: var(--theme-accent, #ff7b95); box-shadow: 0 0 0 3px rgba(255, 0, 122, .08); }
.marker-mapping-row[data-state="error"] .marker-input-wrap input { border-color: #ff7b95; }
.marker-row-action--clear { position: absolute; z-index: 2; top: 50%; right: 8px; width: 22px; height: 22px; padding: 0; transform: translateY(-50%); border: 0; border-radius: 0; background: transparent; color: #9ca6bb; cursor: pointer; }
.marker-row-action--clear:hover { background: transparent; color: var(--theme-accent, #ff7b95); }
.marker-row-action--clear svg { width: 16px; height: 16px; }
.marker-row-action--clear[hidden] { display: none; }
.marker-recent-menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; max-height: 164px; padding: 6px; overflow-y: auto; border: 1px solid var(--theme-line, #dbe1ef); border-radius: 13.5px; background: var(--theme-surface, #fff); box-shadow: 0 6px 12px rgba(16, 36, 95, .08); }
.marker-recent-menu button { width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--theme-ink, #10245f); font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.marker-recent-menu button:hover, .marker-recent-menu button:focus-visible { background: var(--theme-soft, #f3f0ff); color: var(--theme-accent, #ff7b95); outline: 0; }
.marker-recent-menu span { display: block; padding: 8px; color: var(--theme-muted, #7d89a6); font-size: 13px; }
.marker-recents { margin: 0 36px; padding: 20px 0 8px; border: 0; }
.marker-recents h3 { margin: 0 0 10px; color: var(--theme-ink, #10245f); font-size: 14px; font-weight: 700; }
.marker-recents__list { display: flex; flex-wrap: wrap; gap: 8px; overflow: visible; padding: 0; }
.marker-recents__list button { height: 32px; padding: 0 12px; border: 0; border-radius: 13.5px; background: var(--theme-soft, #f3f0ff); color: var(--theme-ink, #10245f); font-size: 13px; font-weight: 600; cursor: pointer; }
.marker-recents__list button:hover { background: #ebe5ff; color: var(--theme-accent, #ff7b95); }
.viewer-panel-footer { padding: 16px 24px; grid-template-columns: minmax(150px, .42fr) minmax(220px, 1fr); gap: 14px; border-top: 1px solid var(--theme-line, #e4e8f1); background: rgba(255, 255, 255, .98); box-shadow: none; }
.viewer-status-trigger, .viewer-complete { height: 48px; border-radius: 16.5px; }
.viewer-status-trigger { border-color: var(--theme-line, #dbe1ef); color: var(--theme-ink, #10245f); }
.viewer-complete { background: var(--theme-action, #ff7b95); font-size: 16px; }
.viewer-complete:hover:not(:disabled) { background: var(--theme-action, #ff7b95); filter: none; transform: none; }
.viewer-complete:active:not(:disabled) { transform: translateY(1px); }

@container (max-width: 679px) {
  .marker-mapping-grid { grid-template-columns: 1fr; }
  .marker-ledger__column + .marker-ledger__column { border-left: 0; }
}
@media (max-width: 1199px) and (min-width: 768px) { .viewer-workspace { grid-template-columns: minmax(0, 1fr) 500px; } }
@media (max-width: 767px) {
  .viewer-panel { container-type: normal; }
  .marker-panel-header { padding: 20px 16px 0; }
  .marker-panel-header__main { gap: 12px; flex-wrap: wrap; }
  .marker-panel-header h2 { font-size: 25px; }
  .marker-panel-header__status { width: 100%; justify-content: space-between; }
  .viewer-panel-scroll { padding: 0; overflow: visible; }
  .marker-ledger-title { margin-inline: 16px; }
  .marker-mapping-grid { grid-template-columns: 1fr; }
  .marker-ledger__column + .marker-ledger__column { border-left: 0; }
  .marker-mapping-row { grid-template-columns: 30px 32px minmax(0, 1fr); column-gap: 10px; padding-inline: 12px; }
  .marker-swatch { width: 32px; height: 32px; }
  .marker-recents { margin-inline: 16px; }
  .viewer-panel-footer { grid-template-columns: 1fr; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .illustration-viewer *, .illustration-viewer *::before, .illustration-viewer *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Circular collection overview used on the dashboard. */
.collection-progress { position: relative; z-index: 1; width: 100%; max-width: 660px; min-width: 0; min-height: 330px; padding: 28px 30px 22px; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; border: 0; border-radius: 33px; background: var(--theme-accent, #ff7b95); color: var(--theme-ink, #10255c); box-shadow: 0 12px 30px rgba(44, 28, 82, .06); isolation: isolate; transition: transform 160ms var(--ease), box-shadow 160ms var(--ease); --cp-value: var(--theme-accent, #ff7b95); --cp-value-deep: var(--theme-accent, #ff7b95); --cp-link: var(--theme-accent, #ff7b95); --cp-track: var(--theme-soft, #d3f4ff); }
.collection-progress::before { display: none; }.collection-progress:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(44, 28, 82, .08); }.collection-progress:focus-visible { outline: 3px solid var(--theme-accent, #ff7b95); outline-offset: 3px; }
.collection-progress__head { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }.collection-progress__heading { min-width: 0; display: inline-flex; align-items: center; gap: 14px; }.collection-progress__heading > strong { color: var(--theme-ink, #10255c); font-size: 21px; font-weight: 750; line-height: 1.2; letter-spacing: -.03em; white-space: nowrap; }.collection-progress__heading > b { height: 28px; padding: 0 12px; display: inline-flex; align-items: center; flex: 0 0 auto; border: 1px solid rgba(20, 40, 95, .55); border-radius: 13.5px; color: var(--theme-ink, #10255c); font-size: 13px; font-weight: 650; line-height: 1; white-space: nowrap; }.collection-progress__open { min-height: 40px; display: inline-flex; align-items: center; flex: 0 0 auto; color: var(--cp-link); font-size: 14px; font-weight: 700; }.collection-progress__open::after { display: inline-block; margin-left: 10px; content: "→"; transition: transform 160ms var(--ease); }.collection-progress:hover .collection-progress__open::after { transform: translateX(3px); }
.collection-progress__body { min-width: 0; margin-top: 6px; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 30px; align-items: center; }.collection-progress__ring { position: relative; width: 190px; height: 190px; display: grid; place-items: center; }.collection-progress__ring > svg { position: static; grid-area: 1 / 1; width: 100%; height: 100%; overflow: visible; }.collection-progress__track, .collection-progress__value { fill: none; transform: rotate(-90deg); transform-origin: 86px 86px; }.collection-progress__track { stroke: var(--cp-track); stroke-width: 11; }.collection-progress__value { stroke: var(--cp-value); stroke-width: 11; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--progress, 0)); }
.collection-progress__labels { z-index: 1; grid-area: 1 / 1; place-self: center; min-width: max-content; display: grid; justify-items: center; gap: 3px; pointer-events: none; }.collection-progress__score { color: var(--cp-value-deep); font-size: 44px; font-weight: 700; line-height: .92; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }.collection-progress__caption { color: var(--theme-muted, #657198); font-size: 13px; font-weight: 650; line-height: 1.3; text-align: center; }.collection-progress__summary { min-width: 0; display: grid; align-content: center; gap: 12px; }.collection-progress__summary > strong { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; color: var(--theme-ink, #10255c); font-size: 19px; font-weight: 720; line-height: 1.25; }.collection-progress__summary > strong b { font-size: 31px; font-weight: 800; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }.collection-progress__states { display: grid; gap: 12px; }.collection-progress__states > span { display: inline-flex; align-items: center; gap: 10px; color: var(--theme-ink, #10255c); font-size: 14px; font-weight: 550; line-height: 1.4; }.collection-progress__states i { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--theme-soft, #d3f4ff); }.collection-progress__states [data-state="active"] i { background: var(--theme-accent, #ff7b95); }.collection-progress__summary > p { max-width: 230px; margin: 12px 0 0; color: var(--theme-accent, #ff7b95); font-size: 14px; font-weight: 600; line-height: 1.45; }
.collection-progress__footer { margin-top: 4px; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 0; color: var(--theme-ink, #10255c); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }.collection-progress__footer > span { display: inline-flex; align-items: center; gap: 7px; }.collection-progress__footer > span > b, .collection-progress__footer > span:last-child { color: var(--theme-accent, #ff7b95); font-weight: 700; }.collection-progress__footer > span > b { font-size: 18px; line-height: 1; }
@media (max-width: 1199px) { .collection-progress { padding: 26px; }.collection-progress__body { grid-template-columns: 180px minmax(0, 1fr); gap: 20px; }.collection-progress__ring { width: 180px; height: 180px; } }
@media (max-width: 767px) { .collection-progress { grid-column: 1 / -1; min-height: 0; margin-top: 4px; padding: 22px 20px 18px; gap: 18px; }.collection-progress::before { inset: 7px -7px -8px 7px; }.collection-progress__head { align-items: flex-start; }.collection-progress__heading { gap: 10px; }.collection-progress__heading > strong { font-size: 19px; }.collection-progress__open { min-height: 40px; font-size: 13px; }.collection-progress__body { grid-template-columns: 1fr; justify-items: center; gap: 18px; margin-top: 0; }.collection-progress__ring { width: 160px; height: 160px; }.collection-progress__summary { width: min(100%, 300px); justify-self: center; }.collection-progress__summary > p { margin-top: 8px; }.collection-progress__footer { margin-top: 0; padding-top: 14px; font-size: 12px; } }

/* Global Evolventa typeface, including viewer controls and form fields. */
body, body * { font-family: "Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif !important; letter-spacing: -.02em !important; }

/* Fullscreen mode presents only the illustration, without viewer controls or palette. */
.viewer-stage-image:fullscreen { width: 100vw; height: 100dvh; max-width: none; max-height: none; border: 0; border-radius: 0; background: var(--theme-stage, #f7f8fc); object-fit: contain; }

/* Book poster page: data-driven hero and illustration catalog. */
.book-page {
  --luna-pink: var(--theme-accent, #ff7b95);
  --luna-pink-strong: var(--theme-accent, #ff7b95);
  --luna-pink-soft: var(--theme-accent, #ff7b95);
  --luna-plum: #431039;
  --luna-plum-2: var(--theme-accent, #ff7b95);
  --luna-cream: var(--theme-surface, #ffffff);
  --luna-yellow: var(--theme-secondary, #4f60a1);
  --luna-muted: #806b72;
  --luna-line: #eadbd7;
  --luna-focus: #2456e8;
  --luna-font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: block;
  min-width: 0;
  color: var(--luna-plum);
  background: var(--luna-cream);
}
.book-page *, .book-page *::before, .book-page *::after { box-sizing: border-box; }
.book-poster-hero {
  min-width: 0;
  min-height: 420px;
  display: grid;
  grid-template-columns: minmax(430px, 1.05fr) minmax(400px, .95fr) minmax(310px, .38fr);
  overflow: hidden;
  background: var(--luna-pink);
}
.book-identity {
  position: relative;
  min-width: 0;
  min-height: 420px;
  container-type: inline-size;
  overflow: hidden;
  background: var(--luna-pink);
}
.book-identity h1 {
  position: relative;
  z-index: 1;
  max-width: 100%;
  margin: clamp(28px, 4vw, 64px) clamp(22px, 3vw, 48px) 0;
  color: var(--luna-plum);
  font-size: clamp(56px, 15cqw, 96px);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -.035em !important;
  line-height: .86;
  text-align: left;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.book-identity__cover {
  position: absolute;
  z-index: 2;
  left: clamp(28px, 7cqw, 82px);
  bottom: clamp(22px, 4cqw, 42px);
  width: clamp(150px, 30cqw, 200px);
  max-height: 282px;
  aspect-ratio: .68;
  object-fit: cover;
  border: 8px solid var(--theme-surface, #fff);
  border-radius: 18px;
  box-shadow: -8px 8px 0 var(--luna-yellow);
  transform: rotate(-4deg);
}
.book-identity__sparkles {
  position: absolute;
  z-index: 3;
  right: clamp(22px, 6cqw, 72px);
  bottom: clamp(28px, 7cqw, 78px);
  width: clamp(56px, 15cqw, 88px);
  height: auto;
  pointer-events: none;
}
.book-current-preview {
  min-width: 0;
  min-height: 420px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  border-left: 1px solid rgba(67, 16, 57, .14);
  background: var(--luna-pink);
}
.book-current-preview__action { min-width: 0; min-height: 0; width: 100%; height: 100%; padding: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; text-align: left; }
.book-current-preview__media { min-height: 0; overflow: hidden; display: grid; place-items: center; background: var(--theme-soft, #fff4f8); transition: box-shadow 160ms ease; }
.book-current-preview__media img {
  display: block;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
.book-current-preview__label { min-height: 54px; padding: 16px clamp(20px, 3vw, 36px); display: flex; align-items: center; color: #fff; background: var(--luna-plum); font-size: 14px; font-weight: 700; }
.book-current-preview[data-image-orientation="portrait"] .book-current-preview__media { background: #f8edf3; }
.book-current-preview__action:hover .book-current-preview__media { box-shadow: inset 0 0 0 2px rgba(255, 45, 141, .48); }
.book-current-preview__action:focus-visible { outline: 3px solid rgba(255, 45, 141, .72); outline-offset: -3px; }
.book-progress-panel {
  min-width: 0;
  min-height: 420px;
  padding: clamp(26px, 4vw, 54px) clamp(24px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-left: 1px solid var(--luna-line);
  background: var(--luna-cream);
}
.book-progress-panel__headline { display: grid; justify-items: start; gap: 2px; }
.book-progress-panel__headline strong { color: var(--luna-plum); font-size: clamp(56px, 5vw, 84px); font-weight: 700; letter-spacing: -.045em !important; line-height: .82; font-variant-numeric: tabular-nums; }
.book-progress-panel__headline span { color: var(--luna-muted); font-size: 14px; font-weight: 700; }
.book-progress-panel__stats { margin: clamp(20px, 3vw, 34px) 0 20px; padding: 0; display: grid; gap: 11px; list-style: none; }
.book-progress-panel__stats li { display: flex; align-items: center; gap: 9px; color: var(--luna-plum); font-size: 14px; font-weight: 700; line-height: 1.35; }
.book-progress-panel__stats i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--luna-pink-soft); }
.book-progress-panel__stats i[data-state="done"] { background: var(--luna-plum); }
.book-progress-panel__stats i[data-state="in-progress"] { background: var(--luna-pink); }
.book-progress-ticks { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; list-style: none; }
.book-progress-ticks li { min-width: 0; height: 9px; border-radius: 2px; background: var(--luna-pink-soft); }
.book-progress-ticks li[data-state="done"] { background: var(--luna-plum); }
.book-progress-ticks li[data-state="in-progress"] { background: var(--luna-pink); }
.book-progress-panel__cta {
  width: 100%;
  min-height: 52px;
  margin-top: auto;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-radius: 0;
  background: var(--luna-pink);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  transition: background 160ms ease, transform 160ms ease;
}
.book-progress-panel__cta:hover { background: var(--luna-pink-strong); }
.book-progress-panel__cta:active { transform: translateY(1px); }
.book-progress-panel__cta span { font-size: 22px; line-height: 1; }
.book-progress-panel__empty { margin-top: auto; color: var(--luna-muted); font-size: 13px; line-height: 1.45; }
.book-poster-hero--no-current { grid-template-columns: minmax(0, 2fr) minmax(310px, .42fr); }
.book-poster-hero--no-current .book-identity { min-height: 420px; }
.book-catalog { width: min(100%, 1600px); margin-inline: auto; padding: clamp(32px, 4vw, 64px) clamp(20px, 4.5vw, 72px) 88px; }
.book-catalog__head { margin-bottom: clamp(24px, 3vw, 40px); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.book-catalog__head h2 { margin: 0; color: var(--luna-plum); font-size: clamp(32px, 3vw, 48px); font-style: italic; font-weight: 700; letter-spacing: -.035em !important; line-height: .95; text-wrap: balance; }
.book-catalog__head h2 span { color: var(--luna-pink); font-variant-numeric: tabular-nums; }
.book-catalog__filters { max-width: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 0; overflow-x: auto; scrollbar-width: none; }
.book-catalog__filters::-webkit-scrollbar { display: none; }
.book-catalog__filters button { min-height: 36px; flex: 0 0 auto; padding: 0 16px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--luna-muted); cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; }
.book-catalog__filters button + button { border-left: 1px solid var(--luna-line); }
.book-catalog__filters button:hover { color: var(--luna-plum); }
.book-catalog__filters button[data-active="true"] { border-bottom-color: var(--luna-pink); color: var(--luna-plum); }
.book-catalog__grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 30px) !important; }
.book-catalog-card { position: relative; min-width: 0; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.book-catalog-card__preview { position: relative; width: 100%; min-height: 0; aspect-ratio: 4 / 3; display: block; overflow: hidden; border: 1px solid var(--luna-line) !important; border-radius: 0 !important; background: var(--luna-pink-soft); box-shadow: none !important; cursor: pointer; }
.book-catalog-card__preview img { width: 100%; height: 100%; display: block; border-radius: 0 !important; object-fit: cover !important; object-position: center; transition: transform 180ms ease; }
.book-catalog-card__preview:hover img { transform: scale(1.02); }
.book-catalog-card .favorite-button { position: absolute; z-index: 2; top: 12px; right: 12px; width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--theme-surface, #fff); box-shadow: none; color: var(--luna-plum); cursor: pointer; }
.book-catalog-card .favorite-button svg { width: 19px; height: 19px; }
.book-catalog-card .favorite-button:hover, .book-catalog-card .favorite-button.is-active { color: var(--luna-pink-strong); }
.book-catalog-card .favorite-button.is-active svg { fill: currentColor; }
.book-catalog-card__continue { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; min-height: 38px; padding: 0 14px; display: flex; align-items: center; justify-content: flex-end; color: #fff; background: var(--luna-pink); font-size: 12px; font-weight: 700; pointer-events: none; }
.book-catalog-card__copy { min-width: 0; padding-top: 13px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 9px; }
.book-catalog-card .illustration-number { padding: 0; color: var(--luna-pink); font-size: 24px; font-weight: 700; letter-spacing: -.04em !important; line-height: 1; font-variant-numeric: tabular-nums; }
.book-catalog-card h3 { min-width: 0; margin: 0; overflow: hidden; color: var(--luna-plum); font-size: 15px; font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.book-catalog-card__status { justify-self: end; color: var(--luna-muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.book-catalog-card__status[data-status="in_progress"] { color: var(--luna-pink-strong); }
.book-catalog-card__status[data-status="done"] { padding: 3px 6px; border: 1px solid var(--luna-plum); color: var(--luna-plum); font-size: 9px; letter-spacing: .03em !important; text-transform: uppercase; transform: rotate(-2deg); }
.book-catalog-card__palette { margin: 7px 0 0; color: var(--luna-muted); font-size: 12px; font-weight: 600; }
.book-catalog__empty .empty-state { max-width: 540px; margin-inline: 0; border-color: var(--luna-line); background: var(--theme-surface, #fff); }
.book-page :is(button, a):focus-visible { outline: 3px solid rgb(36 86 232 / 35%); outline-offset: 3px; }

@media (max-width: 1279px) {
  .book-poster-hero { grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr); }
  .book-progress-panel { min-height: 278px; grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(280px, 1fr) minmax(180px, .65fr); align-items: center; column-gap: 34px; }
  .book-progress-panel__stats { margin: 0; }
  .book-progress-ticks { align-self: end; grid-column: 2; }
  .book-progress-panel__cta, .book-progress-panel__empty { grid-column: 3; grid-row: 1; margin: 0; }
  .book-poster-hero--no-current { grid-template-columns: minmax(0, 1fr) minmax(310px, .42fr); }
  .book-poster-hero--no-current .book-progress-panel { grid-column: auto; display: flex; min-height: 420px; }
}
@media (max-width: 767px) {
  .book-poster-hero, .book-poster-hero--no-current { display: block; min-height: 0; }
  .book-identity { min-height: 330px; }
  .book-identity h1 { margin: 28px 18px 0; font-size: clamp(52px, 19cqw, 82px); }
  .book-identity__cover { left: 36px; bottom: 28px; width: min(43cqw, 190px); max-height: 264px; }
  .book-identity__sparkles { right: 26px; bottom: 52px; width: 68px; }
  .book-current-preview { min-height: 0; grid-template-rows: minmax(240px, 66vw) auto; border: 0; }
  .book-current-preview__label { min-height: 48px; padding: 14px 16px; font-size: 13px; }
  .book-progress-panel, .book-poster-hero--no-current .book-progress-panel { min-height: 0; padding: 26px 16px 22px; display: grid; grid-template-columns: 105px minmax(0, 1fr); column-gap: 22px; border: 0; }
  .book-progress-panel__headline { align-self: start; }
  .book-progress-panel__headline strong { font-size: 58px; }
  .book-progress-panel__headline span { font-size: 12px; }
  .book-progress-panel__stats { margin: 3px 0 14px; gap: 7px; }
  .book-progress-panel__stats li { font-size: 12px; }
  .book-progress-ticks { grid-column: 1 / -1; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; margin-top: 4px; }
  .book-progress-ticks li { height: 8px; }
  .book-progress-panel__cta, .book-progress-panel__empty { grid-column: 1 / -1; grid-row: auto; margin-top: 22px; }
  .book-catalog { padding: 32px 16px 96px; }
  .book-catalog__head { margin-bottom: 24px; display: block; }
  .book-catalog__head h2 { margin-bottom: 19px; font-size: 34px; }
  .book-catalog__filters { width: calc(100% + 16px); margin-right: -16px; justify-content: flex-start; }
  .book-catalog__filters button { padding-inline: 13px; font-size: 12px; }
  .book-catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px 12px !important; }
  .book-catalog-card .favorite-button { top: 8px; right: 8px; width: 32px; height: 32px; }
  .book-catalog-card__copy { padding-top: 10px; grid-template-columns: auto minmax(0, 1fr); gap: 6px; }
  .book-catalog-card .illustration-number { font-size: 19px; }
  .book-catalog-card h3 { font-size: 13px; }
  .book-catalog-card__status { grid-column: 1 / -1; justify-self: start; font-size: 10px; }
  .book-catalog-card__palette { font-size: 11px; }
}
@media (max-width: 340px) {
  .book-catalog__grid { grid-template-columns: 1fr !important; }
}
@media (prefers-reduced-motion: reduce) {
  .book-page *, .book-page *::before, .book-page *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Two-word book titles use the approved printed poster lockup. */
.book-identity .book-title-lockup {
  position: absolute;
  z-index: 1;
  top: clamp(24px, 4cqw, 42px);
  right: clamp(24px, 3cqw, 36px);
  left: clamp(34px, 5cqw, 52px);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--luna-plum);
  font-family: var(--luna-font-display) !important;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0 !important;
  line-height: 1;
  pointer-events: none;
  text-transform: uppercase;
}
.book-title-lockup__word {
  display: block;
  font-family: var(--luna-font-display) !important;
  font-style: normal;
  font-weight: 700;
}
.book-title-lockup[data-layout="two-word-poster"] .book-title-lockup__word:first-child {
  font-size: clamp(104px, 15cqw, 164px);
  line-height: .78;
  letter-spacing: -.045em !important;
  white-space: nowrap;
}
.book-title-lockup[data-layout="two-word-poster"] .book-title-lockup__word:nth-child(2) {
  margin-top: -.02em;
  margin-left: 0;
  font-size: clamp(82px, 12cqw, 128px);
  line-height: .8;
  letter-spacing: -.045em !important;
  white-space: nowrap;
}
.book-title-lockup[data-layout="default"] {
  gap: 0;
  padding: 0;
}
.book-title-lockup[data-layout="default"] .book-title-lockup__word {
  max-width: 100%;
  font-size: clamp(54px, 11cqw, 112px);
  line-height: .88;
  letter-spacing: -.035em !important;
  overflow-wrap: anywhere;
}
.book-identity[data-title-layout="two-word-poster"] .book-title-lockup {
  top: 50%;
  left: calc(clamp(24px, 3cqw, 48px) + clamp(150px, 30cqw, 200px) + 32px);
  align-items: center;
  text-align: center;
  transform: translateY(-50%);
}
.book-identity[data-title-layout="two-word-poster"] .book-identity__cover {
  z-index: 1;
  left: clamp(24px, 3cqw, 48px);
}
.book-identity[data-title-layout="two-word-poster"] .book-identity__sparkles { z-index: 2; }

@container (max-width: 700px) {
  .book-title-lockup[data-layout="two-word-poster"] .book-title-lockup__word:first-child { font-size: clamp(48px, 11.5cqw, 76px); }
  .book-title-lockup[data-layout="two-word-poster"] .book-title-lockup__word:nth-child(2) { margin-left: 0; font-size: clamp(42px, 9.5cqw, 62px); }
}
@media (max-width: 767px) {
  .book-identity[data-title-layout="two-word-poster"] { min-height: 450px; }
  .book-title-lockup { top: 20px; right: 16px; left: 20px; }
  .book-identity[data-title-layout="two-word-poster"] .book-title-lockup { left: calc(24px + min(43cqw, 190px) + 20px); }
  .book-title-lockup[data-layout="two-word-poster"] .book-title-lockup__word:first-child { font-size: clamp(40px, 10.5vw, 44px); line-height: .8; }
  .book-title-lockup[data-layout="two-word-poster"] .book-title-lockup__word:nth-child(2) { margin-left: 0; font-size: clamp(36px, 10vw, 42px); line-height: .8; }
  .book-identity[data-title-layout="two-word-poster"] .book-identity__cover { left: 24px; }
}


/* Rounded treatment for the book page, scoped away from the viewer and other routes. */
.book-page {
  --luna-radius-hero: var(--radius-xl);
  --luna-radius-panel: var(--radius-lg);
  --luna-radius-media: var(--radius-md);
}
.book-page .book-poster-hero {
  width: min(calc(100% - 48px), 1600px);
  margin: 24px auto 0;
  padding: 12px;
  gap: 12px;
  border: 1px solid var(--luna-line);
  border-radius: var(--luna-radius-hero);
  background: var(--theme-surface, #fff);
}
@media (min-width: 1280px) {
  .book-page .book-poster-hero {
    height: clamp(420px, 34vw, 620px);
    min-height: 0;
  }
  .book-page .book-poster-hero > :is(.book-identity, .book-current-preview, .book-progress-panel) {
    min-height: 0;
    height: 100%;
  }
}
.book-page :is(.book-identity, .book-current-preview, .book-progress-panel) {
  overflow: hidden;
  border: 0;
  border-radius: var(--luna-radius-panel);
}
.book-page .book-identity__cover {
  border-radius: var(--luna-radius-panel);
}
.book-page .book-identity--promo-art {
  min-height: 0;
  background: var(--theme-accent, #ff7b95);
}
.book-page .book-identity--promo-art > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  outline: 1px solid rgba(0, 0, 0, .1);
  outline-offset: -1px;
}
.book-page .book-identity--promo-art[data-book-art="vampire-diaries"] { background: #110d1a; }
.book-page .book-identity--promo-art[data-book-art="vampire-diaries"] > img { border-radius: clamp(30px, 2.7vw, 63px); object-fit: contain; }
.book-page .book-identity--promo-art[data-book-art="anime"] { background: #08080d; }
.book-page .book-identity--promo-art[data-book-art="portal-v-detstvo"] { background: #0b5287; }
.book-page .book-identity--promo-art:is([data-book-art="anime"], [data-book-art="portal-v-detstvo"]) > img {
  border-radius: clamp(30px, 2.7vw, 63px);
  object-fit: contain;
}
.book-page .book-current-preview__media {
  margin: 10px 10px 0;
  border-radius: var(--luna-radius-media);
}
.book-page .book-current-preview__media img {
  border-radius: inherit;
}
.book-page .book-current-preview__label {
  min-height: 42px;
  margin: 10px;
  padding-block: 10px;
  justify-content: center;
  border-radius: 999px;
  text-align: center;
}
.book-page .book-progress-ticks li {
  border-radius: 999px;
}
.book-page .book-progress-panel__cta {
  border-radius: 999px;
}
.book-page .book-catalog__filters {
  gap: 8px;
}
.book-page .book-catalog__filters button {
  min-height: 40px;
  padding-inline: 15px;
  border: 1px solid var(--luna-line);
  border-radius: 999px;
  background: var(--theme-surface, #fff);
}
.book-page .book-catalog__filters button + button {
  border-left: 1px solid var(--luna-line);
}
.book-page .book-catalog__filters button:hover {
  border-color: var(--luna-pink);
  background: var(--theme-soft, #fff7fa);
}
.book-page .book-catalog__filters button[data-active="true"] {
  border-color: var(--luna-pink);
  border-bottom-color: var(--luna-pink);
  background: var(--theme-surface, #fff);
}
.book-page .book-catalog-card {
  overflow: hidden !important;
  padding: 10px;
  border: 1px solid var(--luna-line) !important;
  border-radius: var(--luna-radius-panel) !important;
  background: var(--theme-surface, #fff) !important;
  box-shadow: 0 4px 12px rgba(67, 16, 57, .08) !important;
}
.book-page .book-catalog-card__preview {
  border: 0 !important;
  border-radius: var(--luna-radius-media) !important;
}
.book-page .book-catalog-card__preview img {
  border-radius: inherit !important;
}
.book-page .book-catalog-card__continue {
  border-radius: 0 0 var(--luna-radius-media) var(--luna-radius-media);
}
.book-page .book-catalog-card[data-status="in_progress"] {
  isolation: isolate;
}
.book-page .book-catalog-card[data-status="in_progress"]::before {
  position: absolute;
  z-index: 1;
  right: -5%;
  bottom: -32px;
  left: -5%;
  height: calc(100% + 64px);
  border-radius: 50% 50% 0 0 / 48px 48px 0 0;
  background: var(--luna-pink);
  content: "";
  pointer-events: none;
  transform: translateY(calc(100% - 32px));
  transition: transform 540ms cubic-bezier(.25, 1, .5, 1);
}
.book-page .book-catalog-card[data-status="in_progress"]:is(:hover, :has(.book-catalog-card__preview:focus-visible))::before {
  transform: translateY(32px);
}
.book-page .book-catalog-card[data-status="in_progress"] .book-catalog-card__continue {
  z-index: 2;
  transition: opacity 180ms ease;
}
.book-page .book-catalog-card[data-status="in_progress"]:is(:hover, :has(.book-catalog-card__preview:focus-visible)) .book-catalog-card__continue {
  opacity: 0;
}
.book-page .book-catalog-card__continue-overlay {
  position: absolute;
  z-index: 4;
  right: 22px;
  bottom: 20px;
  left: auto;
  display: block;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.015em;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 240ms cubic-bezier(.2, 0, 0, 1) 170ms, transform 240ms cubic-bezier(.2, 0, 0, 1) 170ms;
}
.book-page .book-catalog-card[data-status="in_progress"]:is(:hover, :has(.book-catalog-card__preview:focus-visible)) .book-catalog-card__continue-overlay {
  opacity: 1;
  transform: translateY(0);
}
.book-page .book-catalog-card[data-status="in_progress"] .book-catalog-card__copy,
.book-page .book-catalog-card[data-status="in_progress"] .book-catalog-card__palette {
  position: relative;
  z-index: 2;
  transition: color 220ms ease 130ms;
}
.book-page .book-catalog-card[data-status="in_progress"]:is(:hover, :has(.book-catalog-card__preview:focus-visible)) :is(.illustration-number, h3, .book-catalog-card__status, .book-catalog-card__palette) {
  color: #fff;
}
.book-page .book-catalog-card[data-status="in_progress"]:is(:hover, :has(.book-catalog-card__preview:focus-visible)) .book-catalog-card__status {
  color: rgb(255 255 255 / 88%);
}
.book-page .book-catalog-card__copy {
  padding: 13px 4px 6px;
}
.book-page .book-catalog-card__palette {
  margin-top: 0;
  padding: 0 4px 4px;
}
.book-page .book-catalog-card__status[data-status="done"],
.book-page .book-catalog__empty .empty-state {
  border-radius: 999px;
}
.book-page .book-catalog__empty .empty-state {
  border-radius: var(--luna-radius-panel);
}

@media (max-width: 767px) {
  .book-page {
    --luna-radius-hero: var(--radius-lg);
    --luna-radius-panel: var(--radius-md);
    --luna-radius-media: var(--radius-sm);
  }
  .book-page .book-poster-hero,
  .book-page .book-poster-hero--no-current {
    width: calc(100% - 24px);
    margin-top: 12px;
    padding: 8px;
  }
  .book-page .book-poster-hero > * + * {
    margin-top: 8px;
  }
  .book-page .book-identity--promo-art {
    aspect-ratio: 1402 / 1122;
  }
  .book-page .book-identity--promo-art[data-book-art="vampire-diaries"] {
    aspect-ratio: 1448 / 1086;
  }
  .book-page .book-identity--promo-art[data-book-art="anime"] {
    aspect-ratio: 1448 / 1086;
  }
  .book-page .book-identity--promo-art[data-book-art="portal-v-detstvo"] {
    aspect-ratio: 1447 / 1087;
  }
  .book-page .book-current-preview__media {
    margin: 8px 8px 0;
  }
  .book-page .book-current-preview__label {
    margin: 8px;
  }
  .book-page .book-catalog__filters {
    width: 100%;
    margin-right: 0;
    padding-bottom: 2px;
  }
  .book-page .book-catalog-card {
    padding: 8px;
  }
  /* Touch devices keep the compact action in the artwork footer. The desktop wave
     relies on hover, which can remain stuck after a tap and cover the card copy. */
  .book-page .book-catalog-card[data-status="in_progress"]::before {
    display: none;
  }
  .book-page .book-catalog-card[data-status="in_progress"] .book-catalog-card__continue-overlay {
    display: none;
  }
  .book-page .book-catalog-card[data-status="in_progress"] .book-catalog-card__continue {
    opacity: 1;
  }
  .book-page .book-catalog-card[data-status="in_progress"] :is(.illustration-number, h3, .book-catalog-card__status, .book-catalog-card__palette) {
    color: var(--luna-plum) !important;
  }
  .book-page .book-catalog-card[data-status="in_progress"] .illustration-number,
  .book-page .book-catalog-card[data-status="in_progress"] .book-catalog-card__status {
    color: var(--luna-pink) !important;
  }
  .book-page .book-catalog-card[data-status="in_progress"] .book-catalog-card__palette {
    color: var(--luna-muted) !important;
  }
}

/* Denser illustration catalog with larger artwork and shorter scan distance. */
.book-page .book-catalog {
  width: min(100%, 1760px);
  padding-inline: clamp(16px, 2.5vw, 40px);
}
.book-page .book-catalog__grid {
  gap: 18px 14px !important;
}

@media (max-width: 767px) {
  .book-page .book-catalog {
    padding-inline: 12px;
  }
  .book-page .book-catalog__grid {
    gap: 12px 8px !important;
  }
}

/* Home brand palette: Girl Power pink / plum with a lavender-blue secondary accent. */
.app-shell:has(.home-dashboard) {
  --color-bg: var(--theme-surface, #ffffff);
  --color-surface: var(--theme-surface, #ffffff);
  --color-text: var(--theme-strong, #490b3b);
  --color-text-secondary: var(--theme-muted, #765d6e);
  --color-primary: var(--theme-accent, #ff7b95);
  --color-primary-hover: var(--theme-accent, #ff7b95);
  --color-primary-soft: var(--theme-accent, #ff7b95);
  --color-cobalt: var(--theme-strong, #490b3b);
  --color-cobalt-hover: var(--theme-strong, #35062a);
  --color-cobalt-soft: var(--theme-soft, #f2e3ec);
  --color-lilac-soft: var(--theme-soft, #e8ebfa);
  --color-coral-soft: var(--theme-accent, #ff7b95);
  --color-warning: var(--theme-secondary, #4f60a1);
  --color-border: var(--theme-line, #ead9e3);
  --color-border-strong: var(--theme-accent, #ff7b95);
  --shadow-cover: 0 12px 28px color-mix(in srgb, var(--theme-strong) 14.000000000000002%, transparent);
}
.app-shell:has(.home-dashboard) :focus-visible {
  outline-color: rgba(254, 43, 133, .58);
}
.app-shell:has(.home-dashboard) .cover-stack__backdrop,
.app-shell:has(.home-dashboard) .shelf-book--pink .shelf-book__cover::before {
  background: var(--theme-secondary, #4f60a1);
}
.app-shell:has(.home-dashboard) .collection-progress {
  --cp-value: var(--theme-accent, #ff7b95);
  --cp-value-deep: var(--theme-accent, #ff7b95);
  --cp-active: var(--theme-accent, #ff7b95);
  --cp-link: var(--theme-accent, #ff7b95);
  --cp-track: var(--theme-accent, #ff7b95);
  border-color: var(--theme-accent, #ff7b95);
  background: var(--theme-accent, #ff7b95);
  color: var(--theme-strong, #3e123d);
  box-shadow: 0 12px 30px rgb(255 45 141 / 14%);
}
.app-shell:has(.home-dashboard) .collection-progress::before {
  border-color: var(--theme-accent, #ff7b95);
  background: var(--theme-accent, #ff7b95);
}
.app-shell:has(.home-dashboard) .collection-progress:hover {
  box-shadow: 0 12px 26px rgb(255 45 141 / 20%);
}
.app-shell:has(.home-dashboard) .collection-progress:focus-visible {
  outline-color: var(--theme-accent, #ff7b95);
}
.app-shell:has(.home-dashboard) .collection-progress__heading > strong,
.app-shell:has(.home-dashboard) .collection-progress__heading > b,
.app-shell:has(.home-dashboard) .collection-progress__summary > strong,
.app-shell:has(.home-dashboard) .collection-progress__states > span,
.app-shell:has(.home-dashboard) .collection-progress__footer,
.app-shell:has(.home-dashboard) .collection-progress__empty-copy {
  color: var(--theme-strong, #3e123d);
}
.app-shell:has(.home-dashboard) .collection-progress__heading > b {
  border-color: var(--theme-accent, #ff7b95);
}
.app-shell:has(.home-dashboard) .collection-progress__labels,
.app-shell:has(.home-dashboard) .collection-progress__labels > .collection-progress__caption,
.app-shell:has(.home-dashboard) .collection-progress__empty-copy > span {
  color: var(--theme-strong, #3e123d);
}
.app-shell:has(.home-dashboard) .collection-progress__states i {
  background: var(--theme-accent, #ff7b95);
}
.app-shell:has(.home-dashboard) .collection-progress__states [data-state="active"] i {
  background: #ffaf19;
}
.app-shell:has(.home-dashboard) .collection-progress__summary > p,
.app-shell:has(.home-dashboard) .collection-progress__footer > span:last-child {
  color: var(--theme-strong, #3e123d);
}
.app-shell:has(.home-dashboard) .collection-progress__footer > span > b {
  color: var(--theme-accent, #ff7b95);
}
.app-shell:has(.home-dashboard) .collection-progress__footer {
  border-top-color: var(--theme-accent, #ff7b95);
}
/* Keep the dashboard on a white base, while letting the page-bound colour wash show at the edges. */
.app-shell:has(.home-dashboard) .main-content {
  background: transparent;
}
.app-shell:has(.home-dashboard) .next-reward {
  border-color: var(--theme-secondary, #4f60a1);
  background: var(--theme-soft, #eef0fb);
}
.app-shell:has(.home-dashboard) .next-reward .progress {
  background: color-mix(in srgb, var(--theme-strong) 12%, transparent);
}

/* Catalog: a quiet library shelf with books and actions in one visual path. */
.catalog-page { --catalog-ink: var(--theme-ink, #10255c); --catalog-muted: var(--theme-muted, #657198); --catalog-line: #dfe5f0; --catalog-paper: var(--theme-stage, #f7f8fc); --catalog-pink: var(--theme-accent, #ff7b95); --catalog-pink-soft: #ffe1ef; --catalog-blue-soft: var(--theme-soft, #d3f4ff); --catalog-coral-soft: #ffe1d8; --catalog-lilac-soft: #e6e1ff; max-width: 1440px; padding-top: 54px !important; color: var(--catalog-ink); }
.catalog-page * { font-family: "Evolventa", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.catalog-intro { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(32px, 7vw, 104px); align-items: end; padding-bottom: 34px; border-bottom: 1px solid var(--catalog-line); }
.catalog-intro__eyebrow { margin: 0 0 14px; color: var(--catalog-pink); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.catalog-intro h1 { max-width: 720px; margin: 0; color: var(--catalog-ink); font-size: clamp(48px, 5vw, 72px) !important; font-weight: 800; letter-spacing: -.055em !important; line-height: .93; text-wrap: balance; }
.catalog-intro > div > p:last-child { max-width: 590px; margin: 20px 0 0; color: var(--catalog-muted); font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.catalog-intro__collection { min-height: 184px; padding: 22px 24px; display: grid; align-content: start; grid-template-columns: 1fr auto; gap: 2px 12px; border: 1px solid var(--catalog-line); border-radius: 24px; background: var(--theme-surface, #fff); }
.catalog-intro__collection > span { grid-column: 1 / -1; color: var(--catalog-muted); font-size: 13px; font-weight: 600; }.catalog-intro__collection strong { margin-top: 9px; color: var(--catalog-pink); font-size: 52px; font-weight: 800; letter-spacing: -.07em; line-height: .95; font-variant-numeric: tabular-nums; }.catalog-intro__collection b { align-self: end; padding-bottom: 6px; color: var(--catalog-ink); font-size: 13px; }.catalog-intro__collection a { grid-column: 1 / -1; margin-top: 15px; padding-top: 13px; display: inline-flex; align-items: center; gap: 7px; border-top: 1px solid var(--catalog-line); color: var(--theme-secondary, #2147c7); font-size: 13px; font-weight: 700; }.catalog-intro__collection a svg { width: 16px; height: 16px; transition: transform 180ms var(--ease); }.catalog-intro__collection a:hover svg { transform: translateX(3px); }
.catalog-switch { margin-top: 24px; display: flex; align-items: center; gap: 6px; }.catalog-switch > * { min-height: 38px; padding: 9px 15px; border-radius: 13.5px; font-size: 14px; font-weight: 700; }.catalog-switch a { color: var(--catalog-muted); transition: background 160ms ease, color 160ms ease; }.catalog-switch a:hover { background: #edf1f8; color: var(--catalog-ink); }.catalog-switch span { background: var(--catalog-ink); color: #fff; }
.catalog-controls { margin-top: 28px; padding: 12px; display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: 20px; align-items: center; border: 1px solid var(--catalog-line); border-radius: 24px; background: var(--theme-surface, #fff); }.catalog-search { min-height: 52px; padding: 0 14px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--catalog-line); border-radius: 15px; background: var(--catalog-paper); color: var(--catalog-muted); }.catalog-search:focus-within { border-color: var(--theme-secondary, #2147c7); box-shadow: 0 0 0 3px rgb(33 71 199 / 12%); }.catalog-search svg { width: 20px; height: 20px; flex: 0 0 auto; stroke-width: 2; }.catalog-search input { min-height: 50px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--catalog-ink) !important; font-size: 16px; }.catalog-search input::placeholder { color: #687492; opacity: 1; }.catalog-search input:focus { outline: 0; }
.catalog-filter { display: flex; align-items: center; gap: 12px; }.catalog-filter > span { color: var(--catalog-muted); font-size: 12px; font-weight: 700; }.catalog-filter__buttons { display: flex; gap: 4px; padding: 4px; border-radius: 15px; background: var(--catalog-paper); }.catalog-filter button { min-height: 38px; padding: 7px 13px; border: 0; border-radius: 10.5px; background: transparent; color: var(--catalog-muted); cursor: pointer; font-size: 13px; font-weight: 700; transition: background 160ms ease, color 160ms ease, transform 160ms var(--ease); }.catalog-filter button:hover { color: var(--catalog-ink); }.catalog-filter button.is-active { background: var(--theme-surface, #fff); color: var(--catalog-ink); box-shadow: 0 1px 3px rgb(16 37 92 / 12%); }.catalog-filter button:active { transform: scale(.97); }
.catalog-results { margin-top: 44px; }.catalog-results > header { margin-bottom: 22px; display: flex; align-items: end; justify-content: space-between; gap: 18px; }.catalog-results > header p { margin: 0 0 5px; color: var(--catalog-pink); font-size: 12px; font-weight: 700; }.catalog-results h2 { margin: 0; color: var(--catalog-ink); font-size: 28px !important; font-weight: 800; letter-spacing: -.04em !important; line-height: 1.1; }.catalog-reset { min-height: 36px; padding: 6px 0; border: 0; background: transparent; color: var(--theme-secondary, #2147c7); cursor: pointer; font-size: 13px; font-weight: 700; text-decoration: underline; text-decoration-color: rgb(33 71 199 / 32%); text-underline-offset: 4px; }
.catalog-book-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }.catalog-book-card { --catalog-accent-soft: var(--catalog-pink-soft); min-width: 0; padding: 18px; display: grid; grid-template-columns: minmax(136px, 38%) minmax(0, 1fr); gap: clamp(18px, 3vw, 34px); border: 1px solid var(--catalog-line); border-radius: 24px; background: var(--theme-surface, #fff); transition: border-color 180ms ease, transform 180ms var(--ease); }.catalog-book-card--blue { --catalog-accent-soft: var(--catalog-blue-soft); }.catalog-book-card--coral { --catalog-accent-soft: var(--catalog-coral-soft); }.catalog-book-card--lilac { --catalog-accent-soft: var(--catalog-lilac-soft); }.catalog-book-card:hover { border-color: #afbdd8; transform: translateY(-2px); }
.catalog-book-card__cover { position: relative; min-width: 0; display: block; align-self: stretch; isolation: isolate; }.catalog-book-card__cover::before { position: absolute; z-index: -1; inset: 9px -8px -9px 8px; border-radius: 13.5px; background: var(--catalog-accent-soft); content: ""; transition: transform 220ms var(--ease); }.catalog-book-card:hover .catalog-book-card__cover::before { transform: translate(3px, 3px); }.catalog-book-card__cover img { width: 100%; height: 100%; min-height: 226px; object-fit: cover; border-radius: 9px; box-shadow: 0 5px 12px rgb(16 37 92 / 16%); transition: transform 220ms var(--ease); }.catalog-book-card:hover .catalog-book-card__cover img { transform: translateY(-2px); }
.catalog-book-card__body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }.catalog-book-card__topline { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--catalog-muted); font-size: 11px; font-weight: 700; }.catalog-book-card__owned, .catalog-book-card__available { padding: 4px 7px; border-radius: 7.5px; white-space: nowrap; }.catalog-book-card__owned { background: #e2f2e5; color: #286544; }.catalog-book-card__available { background: var(--catalog-paper); color: var(--catalog-muted); }.catalog-book-card h3 { margin: 15px 0 10px; color: var(--catalog-ink); font-size: 27px !important; font-weight: 800 !important; letter-spacing: -.05em !important; line-height: .98; }.catalog-book-card h3 a:hover { color: var(--theme-secondary, #2147c7); }.catalog-book-card__body > p { margin: 0; color: var(--catalog-muted); font-size: 13px; line-height: 1.5; }.catalog-book-card__footer { width: 100%; margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }.catalog-book-card__count { color: var(--catalog-muted); font-size: 12px; white-space: nowrap; }.catalog-book-card__count b { color: var(--catalog-ink); font-size: 17px; font-variant-numeric: tabular-nums; }
.catalog-book-card__action, .catalog-book-card__add { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 12px; padding: 8px 11px; font-size: 12px; font-weight: 800; white-space: nowrap; }.catalog-book-card__action { color: var(--theme-secondary, #2147c7); }.catalog-book-card__action svg { width: 16px; height: 16px; transition: transform 180ms var(--ease); }.catalog-book-card__action:hover svg { transform: translateX(3px); }.catalog-book-card__add { border: 0; background: var(--catalog-pink); color: #fff; cursor: pointer; transition: background 160ms ease, transform 160ms var(--ease); }.catalog-book-card__add:hover { background: var(--theme-action, #ff7b95); transform: translateY(-1px); }.catalog-book-card__add:active { transform: scale(.97); }.catalog-book-card__add span { width: 17px; height: 17px; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / 70%); border-radius: 50%; font-size: 16px; line-height: 1; }.catalog-page .empty-state { margin: 0; border-color: var(--catalog-line); background: var(--theme-surface, #fff); }
@media (max-width: 1050px) { .catalog-intro { grid-template-columns: minmax(0, 1fr) 240px; gap: 32px; }.catalog-book-grid { grid-template-columns: 1fr; }.catalog-book-card { grid-template-columns: 210px minmax(0, 1fr); } }
@media (max-width: 767px) { .catalog-page { padding: 30px 16px 96px !important; }.catalog-intro { display: block; padding-bottom: 26px; }.catalog-intro h1 { font-size: 42px !important; letter-spacing: -.06em !important; }.catalog-intro > div > p:last-child { margin-top: 16px; font-size: 14px; }.catalog-intro__collection { min-height: 138px; margin-top: 25px; padding: 18px; }.catalog-intro__collection strong { font-size: 43px; }.catalog-switch { margin-top: 18px; }.catalog-controls { margin-top: 22px; padding: 10px; grid-template-columns: 1fr; gap: 10px; }.catalog-search { min-height: 50px; }.catalog-filter { display: block; }.catalog-filter > span { display: block; margin: 2px 0 8px 3px; }.catalog-filter__buttons { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }.catalog-filter button { min-width: 0; padding-inline: 6px; font-size: 11px; }.catalog-results { margin-top: 34px; }.catalog-results > header { align-items: start; }.catalog-results h2 { font-size: 23px !important; }.catalog-book-grid { gap: 14px; }.catalog-book-card { padding: 14px; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; border-radius: 19.5px; }.catalog-book-card__cover img { min-height: 174px; }.catalog-book-card__topline > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.catalog-book-card__owned, .catalog-book-card__available { font-size: 9px; }.catalog-book-card h3 { margin: 11px 0 7px; font-size: 22px !important; }.catalog-book-card__body > p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 12px; }.catalog-book-card__footer { padding-top: 12px; align-items: flex-end; flex-direction: column; gap: 4px; }.catalog-book-card__count { align-self: flex-start; }.catalog-book-card__action, .catalog-book-card__add { min-height: 34px; padding: 6px 8px; font-size: 10px; }.catalog-book-card__add span { width: 14px; height: 14px; font-size: 13px; } }
@media (max-width: 390px) { .catalog-intro h1 { font-size: 38px !important; }.catalog-book-card { grid-template-columns: 98px minmax(0, 1fr); gap: 13px; }.catalog-book-card__cover img { min-height: 158px; }.catalog-book-card h3 { font-size: 20px !important; } }

/* Favorites: a quiet personal gallery.  The status filter stays above the work;
   cards do not duplicate it with editing controls. */
.favorites-page { --favorites-ink: var(--theme-strong, #490b3b); --favorites-muted: var(--theme-muted, #765d6e); --favorites-line: var(--theme-line, #ead9e3); --favorites-soft: var(--theme-soft, #fff1f7); --favorites-pink: var(--theme-accent, #ff7b95); max-width: 1440px; padding-top: 42px !important; color: var(--favorites-ink); }
.favorites-page * { font-family: "Evolventa", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.favorites-hero { padding-bottom: 0; }.favorites-hero h1 { margin: 0; color: var(--favorites-ink); font-size: clamp(42px, 4vw, 56px) !important; font-weight: 800; letter-spacing: -.055em !important; line-height: .96; }
.favorites-controls { margin-top: 20px; display: flex; justify-content: flex-end; }.favorites-filter { padding: 4px; display: flex; gap: 4px; border-radius: var(--radius-pill); background: var(--theme-soft, #fff1f7); }.favorites-filter button { min-height: 38px; padding: 7px 12px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--favorites-muted); cursor: pointer; font-size: 13px; font-weight: 700; transition: background 160ms ease, color 160ms ease, transform 160ms var(--ease); }.favorites-filter button:hover { color: var(--favorites-ink); }.favorites-filter button.is-active { background: var(--theme-surface, #fff); color: var(--favorites-ink); box-shadow: 0 1px 3px rgb(73 11 59 / 12%); }.favorites-filter button:active { transform: scale(.97); }.favorites-filter b { margin-left: 4px; color: var(--favorites-pink); font-size: 10px; }
.favorites-results { margin-top: 34px; }.favorites-results > header { margin-bottom: 18px; display: flex; align-items: end; justify-content: space-between; gap: 18px; }.favorites-results h2 { margin: 0; color: var(--favorites-ink); font-size: 24px !important; font-weight: 800; letter-spacing: -.04em !important; line-height: 1.1; }.favorites-reset { min-height: 36px; padding: 6px 0; border: 0; background: transparent; color: var(--favorites-ink); cursor: pointer; font-size: 13px; font-weight: 700; text-decoration: underline; text-decoration-color: rgb(73 11 59 / 30%); text-underline-offset: 4px; }
.favorites-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 18px; }.favorite-gallery-card { min-width: 0; position: relative; display: grid; grid-template-rows: auto auto; align-content: start; }.favorite-gallery-card__media { position: relative; width: 100%; padding: 0; display: block; overflow: hidden; border: 1px solid var(--favorites-line); border-radius: 24px; background: var(--theme-soft, #fff8fb); cursor: pointer; text-align: left; }.favorite-gallery-card__media::after { position: absolute; inset: 0; background: rgb(73 11 59 / 0%); content: ""; transition: background 180ms ease; }.favorite-gallery-card__media img { width: 100%; aspect-ratio: 4 / 3; display: block; object-fit: cover; transition: transform 240ms var(--ease); }.favorite-gallery-card__media:hover::after, .favorite-gallery-card__media:focus-visible::after { background: rgb(73 11 59 / 16%); }.favorite-gallery-card__media:hover img, .favorite-gallery-card__media:focus-visible img { transform: scale(1.025); }.favorite-gallery-card__open { position: absolute; z-index: 1; right: 12px; bottom: 12px; min-height: 34px; padding: 7px 9px; display: inline-flex; align-items: center; gap: 4px; border-radius: 18px; background: var(--theme-surface, #fff); color: var(--favorites-ink); font-size: 11px; font-weight: 800; opacity: 0; transform: translateY(4px); transition: opacity 180ms ease, transform 180ms var(--ease); }.favorite-gallery-card__open svg { width: 14px; height: 14px; }.favorite-gallery-card__media:hover .favorite-gallery-card__open, .favorite-gallery-card__media:focus-visible .favorite-gallery-card__open { opacity: 1; transform: translateY(0); }.favorite-gallery-card > .favorite-button { position: absolute; z-index: 2; top: 10px; right: 10px; width: 36px; height: 36px; border: 1px solid rgb(255 255 255 / 80%); background: rgb(255 255 255 / 92%); color: var(--favorites-pink); box-shadow: 0 2px 6px rgb(73 11 59 / 12%); }.favorite-gallery-card > .favorite-button:hover { background: var(--theme-surface, #fff); }
.favorite-gallery-card__caption { min-width: 0; padding: 13px 2px 0; display: grid; grid-template-columns: 27px minmax(0, 1fr); gap: 8px; }.favorite-gallery-card__number { padding-top: 2px; color: var(--favorites-pink); font-size: 11px; font-weight: 800; }.favorite-gallery-card__caption h3 { margin: 0 0 3px; color: var(--favorites-ink); font-size: 16px !important; font-weight: 800 !important; letter-spacing: -.03em !important; line-height: 1.2; }.favorite-gallery-card__caption p { overflow: hidden; margin: 0; color: var(--favorites-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.favorites-empty-state { min-height: 354px; margin-top: 38px; padding: clamp(28px, 5vw, 60px); display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: center; gap: clamp(26px, 5vw, 60px); border: 1px solid var(--favorites-line); border-radius: 24px; background: var(--theme-surface, #fff); }.favorites-empty-state__mark { width: 118px; height: 118px; display: grid; place-items: center; border-radius: 50%; background: var(--favorites-soft); color: var(--favorites-pink); }.favorites-empty-state__mark svg { width: 46px; height: 46px; fill: currentColor; stroke-width: 1.5; }.favorites-empty-state p { margin: 0 0 8px; color: var(--favorites-pink); font-size: 12px; font-weight: 700; }.favorites-empty-state h2 { margin: 0 0 12px; color: var(--favorites-ink); font-size: 32px !important; font-weight: 800; letter-spacing: -.04em !important; }.favorites-empty-state > div > span { max-width: 500px; display: block; color: var(--favorites-muted); font-size: 15px; line-height: 1.55; }.favorites-empty-state a { margin-top: 22px; display: inline-flex; align-items: center; gap: 7px; color: var(--favorites-ink); font-size: 14px; font-weight: 800; }.favorites-empty-state a svg { width: 17px; height: 17px; transition: transform 180ms var(--ease); }.favorites-empty-state a:hover svg { transform: translateX(3px); }.favorites-no-results { min-height: 220px; padding: 40px 0; display: grid; place-content: center; justify-items: center; gap: 7px; border-top: 1px solid var(--favorites-line); color: var(--favorites-muted); text-align: center; }.favorites-no-results strong { color: var(--favorites-ink); font-size: 20px; }
@media (max-width: 1050px) { .favorites-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .favorites-page { padding: 30px 16px 96px !important; }.favorites-hero h1 { font-size: 42px !important; letter-spacing: -.06em !important; }.favorites-controls { margin-top: 16px; justify-content: stretch; }.favorites-filter { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }.favorites-filter button { min-width: 0; padding-inline: 3px; font-size: 10px; }.favorites-filter b { display: none; }.favorites-results { margin-top: 30px; }.favorites-results > header { align-items: start; }.favorites-results h2 { font-size: 23px !important; }.favorites-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px 12px; }.favorite-gallery-card__caption { padding-top: 10px; grid-template-columns: 23px minmax(0, 1fr); gap: 6px; }.favorite-gallery-card__caption h3 { font-size: 14px !important; }.favorite-gallery-card__caption p { font-size: 11px; }.favorite-gallery-card__open { opacity: 1; transform: none; right: 8px; bottom: 8px; min-height: 29px; padding: 5px 7px; font-size: 9px; }.favorite-gallery-card__open svg { width: 12px; height: 12px; }.favorite-gallery-card > .favorite-button { top: 8px; right: 8px; width: 32px; height: 32px; }.favorites-empty-state { min-height: 0; margin-top: 30px; padding: 26px 22px; grid-template-columns: 1fr; gap: 20px; }.favorites-empty-state__mark { width: 74px; height: 74px; }.favorites-empty-state__mark svg { width: 31px; height: 31px; }.favorites-empty-state h2 { font-size: 27px !important; }.favorites-empty-state > div > span { font-size: 14px; }.favorites-empty-state a { margin-top: 18px; } }
@media (max-width: 390px) { .favorites-hero h1 { font-size: 38px !important; } }

/* Page copy leads with the actual heading.  Decorative eyebrow/kicker labels
   repeat that hierarchy without helping a person complete a task. */
:where(
  .landing-eyebrow,
  .auth-intro > .eyebrow,
  .app-shell .eyebrow,
  .app-shell .kicker,
  .app-shell .book-hero-eyebrow,
  .app-shell .section-eyebrow,
  .app-shell .current-eyebrow,
  .app-shell .viewer-eyebrow,
  .catalog-intro__eyebrow,
  .catalog-results > header > div > p,
  .favorites-hero > div > p,
  .favorites-results > header > div > p,
  .favorites-empty-state > div > p,
  .admin-main .eyebrow
) { display: none !important; }

/* Achievements: a personal record of time spent with the collection, not a battle pass. */
.achievements-page { --ach-ink: var(--theme-strong, #490b3b); --ach-muted: var(--theme-muted, #765d6e); --ach-line: var(--theme-line, #ead9e3); --ach-soft: var(--theme-soft, #fff1f7); --ach-pink: var(--theme-accent, #ff7b95); --ach-yellow: var(--theme-secondary, #4f60a1); max-width: 1440px; padding-top: 54px !important; color: var(--ach-ink); }
.achievements-page * { font-family: "Evolventa", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.achievements-intro { padding-bottom: 34px; display: grid; grid-template-columns: minmax(0, 1fr) 242px; align-items: end; gap: clamp(32px, 7vw, 104px); border-bottom: 1px solid var(--ach-line); }
.achievements-intro h1 { max-width: 720px; margin: 0; color: var(--ach-ink); font-size: clamp(48px, 5vw, 72px) !important; font-weight: 800; letter-spacing: -.055em !important; line-height: .93; }
.achievements-intro > div > p { max-width: 610px; margin: 20px 0 0; color: var(--ach-muted); font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.achievements-balance { min-height: 152px; padding: 20px 22px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr; align-items: end; border: 1px solid var(--ach-line); border-radius: 24px; background: var(--theme-surface, #fff); }
.achievements-balance strong { color: var(--ach-pink); font-size: 54px; font-weight: 800; letter-spacing: -.075em; line-height: .88; font-variant-numeric: tabular-nums; }
.achievements-balance span { padding-bottom: 4px; color: var(--ach-muted); font-size: 13px; font-weight: 700; }
.achievements-balance small { grid-column: 1 / -1; align-self: end; margin-top: 17px; padding-top: 12px; border-top: 1px solid var(--ach-line); color: var(--ach-ink); font-size: 12px; font-weight: 700; }
.achievement-next { margin-top: 34px; padding: 20px 28px 20px 20px; display: grid; grid-template-columns: 98px minmax(0, 1fr) minmax(260px, 34%); gap: clamp(18px, 3vw, 42px); align-items: center; border: 1px solid var(--theme-soft, #c9cff0); border-radius: 24px; background: var(--theme-soft, #eef0fb); }
.achievement-next__art { width: 98px; height: 98px; display: grid; place-items: center; }
.achievement-next__art img { width: 100%; height: 100%; display: block; object-fit: contain; }
.achievement-next h2 { margin: 0 0 12px; color: #344178; font-size: 13px !important; font-weight: 800; letter-spacing: .01em !important; line-height: 1.2; }
.achievement-next h3 { max-width: 570px; margin: 0 0 8px; color: var(--ach-ink); font-size: 28px !important; font-weight: 800 !important; letter-spacing: -.045em !important; line-height: 1.05; }
.achievement-next p { max-width: 620px; margin: 0; color: var(--ach-muted); font-size: 14px; line-height: 1.5; }
.achievement-next__progress { padding-bottom: 2px; }
.achievement-next__progress > strong { display: block; margin-bottom: 10px; color: var(--ach-ink); font-size: 13px; font-weight: 800; }
.achievement-next__progress .progress { height: 7px; background: color-mix(in srgb, var(--theme-strong) 13%, transparent); }
.achievement-next__progress .progress span { background: var(--ach-pink); }
.achievement-next__progress > span { display: block; margin-top: 8px; color: var(--ach-muted); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.achievement-path, .rewards-catalog, .achievements-ledger { margin-top: 52px; }
.achievement-path > header, .rewards-catalog > header { margin-bottom: 22px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.achievement-path h2, .rewards-catalog h2, .achievements-ledger h2 { margin: 0; color: var(--ach-ink); font-size: 29px !important; font-weight: 800; letter-spacing: -.045em !important; line-height: 1.06; }
.achievement-path > header p, .rewards-catalog > header p { max-width: 570px; margin: 9px 0 0; color: var(--ach-muted); font-size: 13px; line-height: 1.45; }
.achievement-path__columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.achievement-path__columns > section { min-width: 0; }
.achievement-path__columns > section > h3 { margin: 0; padding: 0 0 12px; border-bottom: 2px solid var(--ach-line); color: var(--ach-ink); font-size: 15px !important; font-weight: 800 !important; letter-spacing: -.015em !important; }
.achievement-path__columns > section:last-child > h3 { border-bottom-color: var(--theme-soft, #c9cff0); }
.achievement-milestones { margin: 0; padding: 0; list-style: none; }
.achievement-milestones > li { margin: 0; }
.achievement-milestone { min-height: 106px; padding: 14px 0; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; border-bottom: 1px solid var(--ach-line); }
.achievement-milestone__icon { width: 62px; height: 62px; display: grid; place-items: center; color: var(--ach-pink); }
.achievement-milestone__icon img { width: 100%; height: 100%; display: block; object-fit: contain; }
.achievement-milestone__icon svg { width: 19px; height: 19px; }
.achievement-milestone h3 { margin: 0 0 4px; color: var(--ach-ink); font-size: 16px !important; font-weight: 800 !important; letter-spacing: -.025em !important; line-height: 1.16; }
.achievement-milestone p { margin: 0; color: var(--ach-muted); font-size: 12px; line-height: 1.42; }
.achievement-milestone small { display: inline-block; margin-top: 6px; color: #278255; font-size: 11px; font-weight: 800; }
.achievement-milestone > strong { align-self: start; margin-top: 1px; padding: 5px 7px; border-radius: 7.5px; background: #f1f7ee; color: #278255; font-size: 9px; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; }
.achievement-milestone[data-state="next"] { margin-inline: -12px; padding-inline: 12px; border-radius: 15px; background: var(--theme-soft, #eef0fb); }
.achievement-milestone[data-state="next"] .achievement-milestone__icon { color: var(--ach-ink); }
.achievement-milestone[data-state="next"] > strong { background: var(--ach-yellow); color: #fff; }
.achievement-milestone[data-state="locked"] { opacity: .68; }
.achievement-milestone[data-state="locked"] .achievement-milestone__icon { color: #997f8d; }
.achievement-milestone[data-state="locked"] > strong { background: #f5eff2; color: #886d7c; }
.achievement-path__empty { min-height: 104px; padding: 22px 0; color: var(--ach-muted); font-size: 13px; line-height: 1.5; }
.reward-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ach-line); border-left: 1px solid var(--ach-line); }
.reward-list > article { min-width: 0; min-height: 178px; padding: 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto; gap: 18px 14px; border-right: 1px solid var(--ach-line); border-bottom: 1px solid var(--ach-line); background: var(--theme-surface, #fff); }
.reward-list h3 { margin: 0 0 7px; color: var(--ach-ink); font-size: 18px !important; font-weight: 800 !important; letter-spacing: -.025em !important; line-height: 1.15; }
.reward-list p { margin: 0; color: var(--ach-muted); font-size: 12px; line-height: 1.45; }
.reward-list__cost { align-self: end; }
.reward-list__cost strong { display: block; color: var(--ach-ink); font-size: 13px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.reward-list__cost small { display: block; margin-top: 3px; color: var(--ach-muted); font-size: 10px; text-align: right; white-space: nowrap; }
.reward-list .button { min-height: 34px; align-self: end; padding: 6px 10px; border-color: var(--ach-ink); border-radius: 10.5px; color: var(--ach-ink); font-size: 11px; font-weight: 800; }
.reward-list .button:hover:not(:disabled) { border-color: var(--ach-pink); background: var(--ach-pink); color: #fff; }
.reward-list .catalog-state { align-self: end; padding: 7px 9px; border-radius: 9px; background: #f1f7ee; color: #278255; font-size: 11px; font-weight: 800; }
.achievements-ledger { padding: 30px 32px 34px; border: 1px solid var(--ach-line); border-radius: 27px; background: #fffafc; }
.achievements-ledger > header { margin-bottom: 28px; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.achievements-ledger > header p { max-width: 420px; margin: 9px 0 0; color: var(--ach-muted); font-size: 13px; line-height: 1.45; }
.achievements-ledger__balance { min-width: 136px; padding: 11px 13px 10px; display: grid; grid-template-columns: 1fr auto; align-items: baseline; border: 1px solid var(--ach-line); border-radius: 15px; background: var(--theme-surface, #fff); }
.achievements-ledger__balance span { grid-column: 1 / -1; margin-bottom: 4px; color: var(--ach-muted); font-size: 10px; font-weight: 700; }
.achievements-ledger__balance strong { color: var(--ach-ink); font-size: 25px; font-weight: 800; letter-spacing: -.055em; line-height: .95; font-variant-numeric: tabular-nums; }
.achievements-ledger__balance small { padding-bottom: 1px; color: var(--ach-muted); font-size: 10px; font-weight: 700; }
.points-journal { display: grid; gap: 24px; }
.points-day { padding-top: 19px; display: grid; grid-template-columns: 142px minmax(0, 1fr); gap: 24px; border-top: 1px solid var(--ach-line); }
.points-day h3 { margin: 0; color: var(--ach-ink); font-size: 13px !important; font-weight: 800 !important; letter-spacing: -.015em !important; line-height: 1.3; }
.points-day ol { margin: 0; padding: 0; display: grid; gap: 8px; list-style: none; }
.points-entry { min-height: 68px; padding: 10px 12px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 11px; align-items: center; border: 1px solid transparent; border-radius: 15px; background: var(--theme-surface, #fff); transition: border-color 180ms ease, transform 180ms var(--ease); }
.points-entry:hover { border-color: #e7cedc; transform: translateY(-1px); }
.points-entry__icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 13.5px; background: #fff0f7; color: var(--ach-pink); }
.points-entry__icon svg { width: 18px; height: 18px; }
.points-entry[data-kind="palette"] .points-entry__icon { background: #f1ecff; color: var(--theme-accent, #ff7b95); }
.points-entry[data-kind="book"] .points-entry__icon { background: #e9f5ff; color: #3f709c; }
.points-entry[data-kind="reward"] .points-entry__icon { background: #fff3d3; color: #966c10; }
.points-entry > div { min-width: 0; }
.points-entry > div > strong { display: block; overflow: hidden; color: var(--ach-ink); font-size: 13px; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.points-entry > div > small { display: block; margin-top: 3px; color: var(--ach-muted); font-size: 10px; font-weight: 600; }
.points-entry > b { min-width: 48px; padding-left: 9px; display: grid; justify-items: end; border-left: 1px solid var(--ach-line); color: #278255; font-variant-numeric: tabular-nums; }
.points-entry > b.negative { color: var(--theme-accent, #ff7b95); }
.points-entry > b > span { font-size: 15px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.points-entry > b > small { margin-top: 3px; font-size: 9px; font-weight: 700; }
.achievements-page .quiet-copy { color: var(--ach-muted); }
@media (max-width: 900px) { .achievements-intro { grid-template-columns: minmax(0, 1fr) 210px; gap: 30px; }.achievement-next { grid-template-columns: 84px minmax(0, 1fr); gap: 16px 22px; }.achievement-next__art { width: 84px; height: 84px; }.achievement-next__progress { grid-column: 1 / -1; max-width: 480px; }.achievement-path__columns { gap: 20px; } }
@media (max-width: 767px) { .achievements-page { padding: 30px 16px 96px !important; }.achievements-intro { display: block; padding-bottom: 26px; }.achievements-intro h1 { font-size: 42px !important; letter-spacing: -.06em !important; }.achievements-intro > div > p { margin-top: 16px; font-size: 14px; }.achievements-balance { min-height: 126px; margin-top: 25px; padding: 17px 18px; }.achievements-balance strong { font-size: 46px; }.achievements-balance small { margin-top: 13px; padding-top: 10px; }.achievement-next { margin-top: 24px; padding: 18px; grid-template-columns: 72px minmax(0, 1fr); gap: 12px 16px; border-radius: 19.5px; }.achievement-next__art { width: 72px; height: 72px; }.achievement-next__progress { grid-column: 1 / -1; }.achievement-next h3 { font-size: 24px !important; }.achievement-path, .rewards-catalog, .achievements-ledger { margin-top: 38px; }.achievement-path > header, .rewards-catalog > header { margin-bottom: 16px; }.achievement-path h2, .rewards-catalog h2, .achievements-ledger h2 { font-size: 24px !important; }.achievement-path__columns { grid-template-columns: 1fr; gap: 30px; }.achievement-milestone { min-height: 96px; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; }.achievement-milestone__icon { width: 54px; height: 54px; }.achievement-milestone__icon svg { width: 17px; height: 17px; }.achievement-milestone > strong { grid-column: 2; justify-self: start; align-self: auto; margin-top: -4px; }.achievement-milestone[data-state="next"] { margin-inline: -8px; padding-inline: 8px; }.reward-list { grid-template-columns: 1fr; }.reward-list > article { min-height: 148px; padding: 18px; }.achievements-ledger { padding-top: 22px; }.achievements-ledger .ledger-list > div { min-height: 54px; grid-template-columns: 77px minmax(0, 1fr) 38px; gap: 8px; font-size: 11px; }.achievements-ledger .ledger-list time { font-size: 10px; }.achievements-ledger .ledger-list strong { font-size: 11px; } }
@media (max-width: 390px) { .achievements-intro h1 { font-size: 38px !important; }.achievement-next h3 { font-size: 22px !important; }.achievement-milestone h3 { font-size: 15px !important; }.reward-list > article { grid-template-columns: minmax(0, 1fr) auto; gap: 14px 10px; }.reward-list .button { padding-inline: 8px; font-size: 10px; } }

@media (max-width: 767px) {
  .achievements-ledger { padding: 22px 16px 18px; border-radius: 21px; }
  .achievements-ledger > header { margin-bottom: 19px; align-items: start; gap: 12px; }
  .achievements-ledger > header p { margin-top: 6px; font-size: 12px; }
  .achievements-ledger__balance { min-width: 98px; padding: 9px 10px 8px; }
  .achievements-ledger__balance strong { font-size: 21px; }
  .points-journal { gap: 18px; }
  .points-day { padding-top: 15px; display: block; }
  .points-day h3 { margin-bottom: 10px; font-size: 12px !important; }
  .points-day ol { gap: 7px; }
  .points-entry { min-height: 62px; padding: 9px 10px; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 9px; }
  .points-entry__icon { width: 32px; height: 32px; border-radius: 12px; }
  .points-entry__icon svg { width: 16px; height: 16px; }
  .points-entry > div > strong { font-size: 12px; }
  .points-entry > b { min-width: 43px; padding-left: 7px; }
  .points-entry > b > span { font-size: 14px; }
}

/* AmbientBackground: a page-bound, purely decorative wash around the content. */
.page-shell { position: relative; isolation: isolate; min-height: 100vh; overflow: clip; background: var(--theme-surface, #fff); }
.page-content { position: relative; z-index: 1; min-height: inherit; }
.ambient-background { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; user-select: none; contain: paint; }
.ambient-orb { position: absolute; display: block; border-radius: 50%; filter: blur(92px); opacity: .42; transform: translateZ(0); will-change: auto; }
.ambient-orb--violet { width: 640px; height: 640px; top: 92px; left: -340px; background: radial-gradient(circle, rgb(168 117 255 / .72) 0%, rgb(168 117 255 / .32) 46%, rgb(168 117 255 / 0) 74%); }
.ambient-orb--pink { width: 700px; height: 700px; top: 64px; right: -372px; opacity: .48; background: radial-gradient(circle, rgb(255 114 182 / .74) 0%, rgb(255 114 182 / .33) 46%, rgb(255 114 182 / 0) 74%); }
.ambient-orb--coral { width: 560px; height: 560px; top: 580px; left: -310px; opacity: .37; background: radial-gradient(circle, rgb(255 150 127 / .68) 0%, rgb(255 150 127 / .28) 46%, rgb(255 150 127 / 0) 74%); }
.ambient-orb--cyan { width: 740px; height: 740px; top: 520px; right: -420px; opacity: .42; background: radial-gradient(circle, rgb(99 215 242 / .66) 0%, rgb(99 215 242 / .28) 46%, rgb(99 215 242 / 0) 74%); }

@media (max-width: 768px) {
  .ambient-orb { filter: blur(66px); }
  .ambient-orb--violet { width: 360px; height: 360px; top: 100px; left: -220px; opacity: .31; }
  .ambient-orb--pink { width: 400px; height: 400px; top: 190px; right: -250px; opacity: .34; }
  .ambient-orb--coral { display: none; }
  .ambient-orb--cyan { width: 420px; height: 420px; top: 620px; right: -270px; opacity: .29; }
}

/* Current achievement sticker in the home reward card. */
.dashboard-lower { grid-template-columns: minmax(0, 1fr) minmax(350px, 410px); }
.next-reward { min-height: 306px; height: auto; display: grid; grid-template-columns: minmax(0, 1fr) 156px; grid-template-areas: "body sticker" "link link"; gap: 12px 18px; }
.next-reward__body { min-width: 0; grid-area: body; }
.next-reward__body h2 { margin-bottom: 13px; }
.next-reward__body p { margin-bottom: 14px; }
.next-reward__body .progress { margin-bottom: 0; }
.next-reward__sticker { width: 156px; margin: 0; display: grid; justify-items: center; gap: 6px; grid-area: sticker; text-align: center; }
.next-reward__sticker img { width: 150px; height: 150px; display: block; object-fit: contain; filter: drop-shadow(0 7px 8px rgb(67 16 57 / 12%)); }
.next-reward__sticker figcaption { color: var(--color-text); font-size: 10px; font-weight: 700; line-height: 1.15; text-wrap: balance; }
.next-reward > a { grid-area: link; align-self: end; }
@media (max-width: 900px) {
  .dashboard-lower { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .next-reward { min-height: 252px; grid-template-columns: minmax(0, 1fr) 118px; gap: 10px 14px; }
  .next-reward__sticker { width: 118px; }
  .next-reward__sticker img { width: 112px; height: 112px; }
  .next-reward__sticker figcaption { font-size: 9px; }
}

/* Supplied Lunicolors wordmark: sized optically for the taller illustrated mark. */
.app-shell .app-brand .brand-logo { width: auto; max-width: 205px; height: 60px; object-fit: contain; }
@media (max-width: 1199px) {
  .app-shell .app-brand .brand-logo { height: 51px; }
}
@media (max-width: 900px) {
  .app-shell .app-brand .brand-logo { height: 45px; }
}
@media (max-width: 767px) {
  .app-shell .app-brand .brand-logo { height: 42px; }
}

/* Illustrated navigation stickers keep the same visual language in the header and mobile bar. */
.app-shell .app-topnav .nav-item--sticker { gap: 10px; }
.app-shell .app-topnav .header-nav-icon { width: 42px; height: 42px; flex: 0 0 auto; display: block; object-fit: contain; }
@media (max-width: 1199px) { .app-shell .app-topnav .header-nav-icon { width: 35px; height: 35px; } }
@media (max-width: 900px) { .app-shell .app-topnav .header-nav-icon { width: 29px; height: 29px; } }
@media (max-width: 767px) {
  .app-shell .bottom-nav .nav-item--sticker { gap: 1px; }
  .app-shell .bottom-nav .bottom-nav-icon { width: 29px; height: 29px; display: block; object-fit: contain; transition: transform 180ms cubic-bezier(.2, 0, 0, 1), filter 180ms cubic-bezier(.2, 0, 0, 1); }
  .app-shell .bottom-nav .nav-item--sticker.is-active .bottom-nav-icon { filter: saturate(1.08); transform: translateY(-1px) scale(1.04); }
}

/* Profile, privacy and community. These surfaces reuse the current app colours and keep social data intentionally quiet. */
.avatar { overflow: hidden; }
.avatar > img { width: 100%; height: 100%; object-fit: cover; }
.field-hint { display: block; margin-top: -2px; color: var(--color-text-secondary, var(--ink-faint)); font-size: 11px; font-weight: 500; }
.auth-checkbox { grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 10px; padding: 13px 0 2px; color: var(--ink); cursor: pointer; }
.auth-checkbox input { width: 18px; min-height: 18px; margin: 1px 0 0; accent-color: var(--rose-deep); }
.auth-checkbox span { display: grid; gap: 2px; }
.auth-checkbox strong { font-size: 13px; }
.auth-checkbox small { color: var(--ink-soft); font-size: 11px; font-weight: 400; line-height: 1.35; }

.profile-settings-page { max-width: 1180px !important; }
.profile-settings-page__header, .community-page__header { margin-bottom: 44px; display: flex; align-items: end; justify-content: space-between; gap: 28px; }
.profile-settings-page__header h1, .community-page__header h1 { margin: 0; }
.profile-settings-page__header p:not(.eyebrow), .community-page__header p:not(.eyebrow) { max-width: 620px; margin: 15px 0 0; color: var(--color-text-secondary); font-size: 15px; }
.profile-settings-form { display: grid; }
.profile-settings-section { display: grid; grid-template-columns: minmax(220px, .42fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 78px); padding: 34px 0; border-top: 1px solid var(--color-border); }
.profile-settings-section__heading h2 { margin: 0 0 9px; font-family: inherit; font-size: 19px; font-weight: 750; letter-spacing: -.025em; }
.profile-settings-section__heading p { margin: 0; color: var(--color-text-secondary); font-size: 13px; line-height: 1.5; }
.profile-identity-editor { display: grid; grid-template-columns: 164px minmax(0, 1fr); gap: 34px; align-items: start; }
.avatar-editor { display: grid; justify-items: start; gap: 10px; }
.avatar--editor { width: 132px; height: 132px; border: 3px solid var(--color-primary-soft); background: var(--color-primary); color: #fff; font-size: 48px; }
.avatar-editor__control { min-height: 36px; display: inline-flex; align-items: center; color: var(--color-primary); font-size: 12px; font-weight: 750; cursor: pointer; }
.avatar-editor__control input { position: absolute; width: 1px; min-height: 1px; opacity: 0; pointer-events: none; }
.avatar-editor__control span { text-decoration: underline; text-underline-offset: 4px; }
.avatar-editor > small { max-width: 150px; color: var(--color-text-secondary); font-size: 11px; line-height: 1.4; }
.handle-field { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; border: 1px solid var(--color-border-strong); border-radius: 12px; background: var(--theme-surface, #fff); overflow: hidden; }
.handle-field > span { padding-left: 12px; color: var(--color-text-secondary); font-size: 12px; white-space: nowrap; }
.handle-field input { min-width: 0; border: 0; border-radius: 0; }
.handle-field:focus-within { outline: 2px solid color-mix(in srgb, var(--color-primary) 30%, transparent); outline-offset: 2px; }
.privacy-controls { display: grid; gap: 24px; }
.privacy-controls > label { max-width: 340px; }
.privacy-switches { display: grid; border-top: 1px solid var(--color-border); }
.privacy-switch { grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--color-border); color: var(--color-text); cursor: pointer; }
.privacy-switch input { width: 18px; min-height: 18px; margin: 2px 0 0; accent-color: var(--color-primary); }
.privacy-switch span { display: grid; gap: 3px; }
.privacy-switch strong { font-size: 14px; }
.privacy-switch small { color: var(--color-text-secondary); font-size: 12px; font-weight: 400; line-height: 1.4; }
.profile-theme-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.profile-theme-option { position: relative; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 74px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 18px; color: var(--color-text); cursor: pointer; transition: border-color 170ms var(--ease), background 170ms var(--ease); }
.profile-theme-option:has(input:checked) { border-color: var(--profile-choice, var(--color-primary)); background: color-mix(in srgb, var(--profile-choice, var(--color-primary)) 9%, white); }
.profile-theme-option input { position: absolute; opacity: 0; pointer-events: none; }
.profile-theme-option__swatch { width: 28px; height: 28px; border-radius: 50%; background: var(--profile-choice, var(--color-primary)); }
.profile-theme-option > span:last-child { display: grid; gap: 2px; }
.profile-theme-option strong { font-size: 13px; }
.profile-theme-option small { color: var(--color-text-secondary); font-size: 11px; font-weight: 400; line-height: 1.35; }
.profile-theme-option--pink { --profile-choice: #ff7b95; }.profile-theme-option--violet { --profile-choice: #ff7b95; }.profile-theme-option--coral { --profile-choice: #e6725b; }.profile-theme-option--blue { --profile-choice: #3475c8; }
.profile-settings-section--palette > label { max-width: 340px; }
.profile-settings-form .settings-actions { padding-top: 28px; border-top: 1px solid var(--color-border); }

.public-profile, .community-page { --profile-accent: var(--theme-accent, #ff7b95); }
[data-profile-theme="violet"] { --profile-accent: var(--theme-accent, #ff7b95); --profile-accent-soft: #eee9fa; }
[data-profile-theme="coral"] { --profile-accent: #e6725b; --profile-accent-soft: #ffebe5; }
[data-profile-theme="blue"] { --profile-accent: #3475c8; --profile-accent-soft: #e6f0fc; }
[data-profile-theme="pink"] { --profile-accent: var(--theme-accent, #ff7b95); --profile-accent-soft: #ffe4ef; }
.public-profile { max-width: 1240px; margin: 0 auto; padding: 48px 34px 88px; }
.public-profile__hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 34px; align-items: end; padding: 0 0 34px; border-bottom: 1px solid color-mix(in srgb, var(--profile-accent) 28%, #d9cfd5); }
.public-profile__identity { display: flex; align-items: center; gap: 22px; }
.avatar--public { width: 116px; height: 116px; border: 4px solid var(--profile-accent-soft); background: var(--profile-accent); color: #fff; font-size: 42px; }
.public-profile__hero h1 { margin: 0; color: var(--theme-strong, #490b3b); font-size: clamp(38px, 4vw, 58px); }
.public-profile__handle { margin: 4px 0 0; color: var(--profile-accent); font-size: 14px; font-weight: 750; }
.public-profile__bio { max-width: 590px; margin: 14px 0 0; color: var(--theme-muted, #765d6e); font-size: 15px; line-height: 1.55; white-space: pre-line; }
.public-profile__stats { display: flex; flex-wrap: wrap; justify-content: end; gap: 26px; margin: 0; }
.public-profile__stats div { min-width: 76px; display: grid; gap: 1px; }
.public-profile__stats dt { order: 2; color: var(--theme-muted, #765d6e); font-size: 11px; }
.public-profile__stats dd { margin: 0; color: var(--theme-strong, #490b3b); font-size: 26px; font-weight: 800; letter-spacing: -.04em; }
.public-profile__body { display: grid; gap: 50px; padding-top: 42px; }
.public-artwork-section > header, .public-collection-section > header { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.public-artwork-section h2, .public-collection-section h2 { margin: 0; color: var(--theme-strong, #490b3b); font-family: inherit; font-size: 22px; font-weight: 800; letter-spacing: -.035em; }
.public-artwork-section > header span, .public-collection-section > header span { color: var(--profile-accent); font-size: 14px; font-weight: 800; }
.public-artwork-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.public-artwork-grid article { min-width: 0; border-top: 1px solid var(--theme-line, #ead9e3); padding-top: 9px; }
.public-artwork-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 13.5px; background: var(--profile-accent-soft); }
.public-artwork-grid article > div { padding: 9px 2px 0; display: grid; gap: 2px; }
.public-artwork-grid strong { overflow: hidden; color: var(--theme-strong, #490b3b); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.public-artwork-grid small { overflow: hidden; color: var(--theme-muted, #765d6e); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.public-profile__empty { margin: 0; padding: 18px 0; border-top: 1px solid var(--theme-line, #ead9e3); color: var(--theme-muted, #765d6e); font-size: 14px; }
.public-collection-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.public-collection-list article { min-width: 0; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 13px; align-items: center; padding: 12px 0; border-top: 1px solid var(--theme-line, #ead9e3); }
.public-collection-list img { width: 84px; height: 106px; border-radius: 10.5px; object-fit: cover; background: var(--profile-accent-soft); }
.public-collection-list h3 { margin: 0 0 6px; color: var(--theme-strong, #490b3b); font-size: 14px; }
.public-collection-list p { margin: 0 0 10px; color: var(--theme-muted, #765d6e); font-size: 11px; }
.public-collection-list .progress span { background: var(--profile-accent); }

.community-page { max-width: 1320px !important; }
.community-page__header { align-items: end; }
.community-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.community-card { min-width: 0; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 13px; padding: 16px 0; border-top: 1px solid var(--color-border-strong); transition: border-color 170ms var(--ease), transform 170ms var(--ease); }
.community-card:hover { border-color: var(--profile-accent); transform: translateY(-2px); }
.avatar--community { width: 56px; height: 56px; background: var(--profile-accent); color: #fff; font-size: 23px; }
.community-card h2 { overflow: hidden; margin: 0; color: var(--color-text); font-family: inherit; font-size: 16px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.community-card p { margin: 2px 0 5px; color: var(--profile-accent); font-size: 11px; font-weight: 700; }
.community-card small { display: -webkit-box; overflow: hidden; color: var(--color-text-secondary); font-size: 11px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.community-card ul { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; margin: 1px 0 0; padding: 0; list-style: none; }
.community-card li { display: flex; gap: 4px; color: var(--color-text-secondary); font-size: 11px; }
.community-card li b { color: var(--color-text); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .profile-settings-section { grid-template-columns: 1fr; gap: 18px; }
  .public-artwork-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .public-collection-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .community-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .profile-settings-page { padding: 30px 16px 94px !important; }
  .profile-settings-page__header, .community-page__header { display: grid; gap: 18px; margin-bottom: 28px; }
  .profile-settings-page__header .button, .community-page__header .button { justify-self: start; }
  .profile-settings-section { padding: 26px 0; }
  .profile-identity-editor { grid-template-columns: 1fr; gap: 22px; }
  .avatar-editor { grid-template-columns: 92px minmax(0, 1fr); column-gap: 15px; align-items: center; }
  .avatar--editor { width: 88px; height: 88px; grid-row: span 2; font-size: 31px; }
  .avatar-editor > small { max-width: none; }
  .profile-theme-options { grid-template-columns: 1fr; }
  .privacy-switches { margin-top: 2px; }
  .public-profile { padding: 30px 16px 62px; }
  .public-profile__hero { grid-template-columns: 1fr; gap: 22px; padding-bottom: 25px; }
  .public-profile__identity { align-items: flex-start; gap: 14px; }
  .avatar--public { width: 78px; height: 78px; border-width: 3px; font-size: 29px; }
  .public-profile__hero h1 { font-size: 34px; }
  .public-profile__stats { justify-content: start; gap: 20px; }
  .public-profile__body { gap: 38px; padding-top: 30px; }
  .public-artwork-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 10px; }
  .public-collection-list { grid-template-columns: 1fr; }
  .community-page { padding: 30px 16px 94px !important; }
  .community-grid { grid-template-columns: 1fr; gap: 8px; }
  .community-card { grid-template-columns: 58px minmax(0, 1fr); }
}

/* Shared radius scale. Components follow their role instead of rounding every edge alike. */
.app-shell .app-topbar { border-bottom: 0; }

.app-shell {
  --luni-shell-radius: var(--radius-xl);
  --luni-card-radius: var(--radius-lg);
  --luni-small-radius: var(--radius-sm);
}

/* Text buttons use a full capsule, matching the primary action reference. */
.button,
.app-shell .button,
.app-shell .illustration-card__open,
.book-page .book-progress-panel__cta,
.catalog-book-card__action,
.catalog-book-card__add,
.favorite-gallery-card__open,
.reward-list .button,
.viewer-toolbar-button,
.viewer-status-trigger,
.viewer-complete {
  border-radius: var(--radius-button);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea,
.handle-field,
.catalog-search,
.favorites-search,
.app-shell .marker-input-wrap input,
.app-shell .viewer-author-palette {
  border-radius: var(--radius-sm);
}
.handle-field input,
.catalog-search input,
.favorites-search input { border-radius: 0; }

/* Filters, tags, counters and progress intentionally remain pills. */
.status,
.balance-chip,
.filter-chip,
.chips button,
.segmented,
.segmented button,
.catalog-filter__buttons,
.catalog-filter button,
.favorites-filter,
.favorites-filter button,
.viewer-zoom-controls,
.viewer-counter,
.marker-recents__list button,
.book-page .book-current-preview__label,
.book-page .book-catalog__filters button,
.book-page .book-catalog-card__status,
.public-artwork-section > header span,
.public-collection-section > header span {
  border-radius: var(--radius-pill);
}

/* Content cards keep a generous but measured 24px corner. */
.auth-panel,
.hero-artifact,
.achievement-summary,
.palette-composer,
.admin-grid section,
.sheet,
.settings-actions,
.collection-summary,
.shelf-book,
.add-book-card,
.next-reward,
.overall-progress,
.home-widget,
.app-shell .book-card,
.app-shell .illustration-card,
.app-shell .palette-card,
.app-shell .color-card,
.book-current-card,
.author-palette-card,
.book-palette-card,
.catalog-book-card,
.favorites-hero aside,
.favorites-controls,
.favorites-empty-state,
.achievements-balance,
.achievement-next,
.achievements-ledger,
.profile-theme-option,
.app-profile-menu {
  border-radius: var(--radius-lg);
}

/* Hero and prominent promotional surfaces earn the largest radius. */
.landing-book-preview,
.landing-favorite-preview,
.landing-achievement-card,
.book-hero-new,
.app-shell .book-hero,
.app-shell .achievement-hero,
.book-page .book-poster-hero,
.illustration-viewer:not(:fullscreen) {
  border-radius: var(--radius-xl);
}

/* Image frames and compact choice surfaces sit one step below cards. */
.hero-artifact img,
.landing-book-preview > img,
.landing-favorite-image,
.public-artwork-grid img,
.public-collection-list img,
.favorite-media,
.favorite-gallery-card__media,
.book-page .illustration-preview,
.book-page .illustration-preview img,
.book-current-card .current-preview,
.profile-theme-option,
.builder-slot,
.palette-stripe,
.illustration-detail > img,
.viewer-stage-image,
.viewer-stage .illustration-placeholder {
  border-radius: var(--radius-md);
}

@media (max-width: 767px) {
  .app-shell { --luni-shell-radius: 0px; }
  .app-shell .bottom-nav { border-radius: 0; }
  .book-hero-new,
  .app-shell .book-hero,
  .app-shell .achievement-hero,
  .book-page .book-poster-hero,
  .illustration-viewer:not(:fullscreen) { border-radius: var(--radius-lg); }
  .auth-panel,
  .hero-artifact,
  .achievement-summary,
  .palette-composer,
  .collection-summary,
  .shelf-book,
  .add-book-card,
  .next-reward,
  .overall-progress,
  .home-widget,
  .app-shell .book-card,
  .app-shell .illustration-card,
  .app-shell .palette-card,
  .app-shell .color-card,
  .catalog-book-card,
  .favorites-empty-state,
  .achievement-next,
  .achievements-ledger { border-radius: var(--radius-md); }
}

/* Authentication scene follows the supplied responsive composition. The form
   itself remains the existing application form, layered over that scene. */
.auth-shell { min-width: 320px; min-height: 100svh; background: #fbf7fb; color: #21114a; }
.auth-shell #main { min-height: 100svh; }
.auth-shell .auth-layout { position: relative; isolation: isolate; display: block; width: min(calc(100% - clamp(24px, 4.4vw, 64px)), 1580px); max-width: none; min-height: calc(100svh - clamp(24px, 4.4vw, 64px)); margin: clamp(12px, 2.2vw, 32px) auto; padding: 0; overflow: hidden; border: 1px solid rgb(255 67 142 / 28%); border-radius: clamp(42px, 3.2vw, 72px); background: radial-gradient(circle at 14% 74%, rgb(211 191 255 / 54%), transparent 29%), radial-gradient(circle at 77% 18%, rgb(255 222 205 / 65%), transparent 33%), radial-gradient(circle at 89% 83%, rgb(255 212 229 / 58%), transparent 32%), linear-gradient(118deg, var(--theme-soft, #fffaf5) 0%, #fffdfb 51%, #fff6fa 100%); box-shadow: 0 30px 80px rgb(74 26 70 / 10%); }
.auth-shell .auth-layout::before, .auth-shell .auth-layout::after { position: absolute; z-index: 0; border: 1px solid rgb(255 53 137 / 28%); border-radius: 50%; content: ""; pointer-events: none; }
.auth-shell .auth-layout::before { width: min(1060px, 74vw); aspect-ratio: 1.75; left: -13%; top: -27%; transform: rotate(-9deg); }
.auth-shell .auth-layout::after { width: min(980px, 69vw); aspect-ratio: 1.65; left: -17%; bottom: -42%; border-color: rgb(142 111 224 / 25%); transform: rotate(10deg); }
.auth-glow { position: absolute; z-index: 0; width: 420px; height: 420px; border-radius: 50%; filter: blur(80px); opacity: .28; pointer-events: none; }
.auth-glow--left { left: -160px; bottom: -120px; background: var(--theme-accent, #ff7b95); }
.auth-glow--right { top: 70px; right: -180px; background: var(--theme-accent, #ff7b95); }
.auth-content { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, 455px); align-items: center; gap: clamp(48px, 7vw, 116px); min-height: inherit; padding: clamp(30px, 5vw, 82px); }
.auth-brand { position: relative; grid-column: 1; grid-row: 1; min-width: 0; min-height: min(680px, calc(100svh - 150px)); display: flex; align-items: flex-start; justify-content: center; flex-direction: column; padding-left: clamp(8px, 3.6vw, 66px); }
.auth-brand__logo { display: block; width: clamp(300px, 31vw, 480px); max-width: 92%; height: auto; transform: translateY(-52px); filter: drop-shadow(0 12px 24px rgb(97 31 94 / 8%)); user-select: none; -webkit-user-drag: none; }
.auth-note { position: absolute; left: clamp(8px, 3.6vw, 66px); bottom: clamp(26px, 4vw, 66px); width: min(420px, 74%); min-height: 206px; display: grid; grid-template-columns: 68px 1fr; align-items: center; gap: 16px; padding: 36px 30px 30px; border: 1px solid rgb(84 36 74 / 8%); border-radius: 48px; background: linear-gradient(135deg, rgb(255 255 255 / 98%), rgb(255 251 245 / 95%)); box-shadow: 0 26px 46px rgb(86 52 91 / 13%), inset 0 1px 0 rgb(255 255 255 / 90%); transform: rotate(-4.2deg); transform-origin: 48% 50%; }
.auth-note__tape { position: absolute; top: -20px; left: 50%; width: 158px; height: 42px; transform: translateX(-50%) rotate(1.4deg); opacity: .92; background-color: var(--theme-accent, #ff7b95); background-image: linear-gradient(45deg, rgb(255 255 255 / 42%) 25%, transparent 25%, transparent 75%, rgb(255 255 255 / 42%) 75%), linear-gradient(45deg, rgb(255 255 255 / 42%) 25%, transparent 25%, transparent 75%, rgb(255 255 255 / 42%) 75%); background-size: 26px 26px; background-position: 0 0, 13px 13px; clip-path: polygon(3% 6%, 98% 0, 95% 95%, 1% 100%); box-shadow: 0 9px 14px rgb(213 112 157 / 16%); }
.auth-note__heart { width: 60px; height: 60px; transform: rotate(3deg); }
.auth-note__copy { margin: 0; color: #251531; font-size: clamp(20px, 1.65vw, 27px); font-weight: 650; letter-spacing: -.025em; line-height: 1.34; }
.auth-note__copy strong { color: var(--theme-accent, #ff7b95); font-weight: 700; }
.auth-note__spark { position: absolute; right: 25px; bottom: 20px; width: 22px; height: 22px; opacity: .58; }
.auth-spark { position: absolute; z-index: 0; width: 16px; height: 16px; color: rgb(255 43 134 / 56%); pointer-events: none; }
.auth-spark::before, .auth-spark::after { position: absolute; inset: 0; margin: auto; border-radius: 148.5px; background: currentColor; content: ""; }
.auth-spark::before { width: 3px; height: 100%; }
.auth-spark::after { width: 100%; height: 3px; }
.auth-spark--one { top: 14%; left: 8%; color: rgb(139 104 211 / 45%); transform: scale(.8) rotate(45deg); }
.auth-spark--two { top: 18%; left: 53%; transform: scale(.65) rotate(45deg); }
.auth-spark--three { right: 6%; bottom: 9%; color: rgb(139 104 211 / 42%); transform: scale(.55) rotate(45deg); }
.auth-shell .auth-panel { position: relative; z-index: 1; grid-column: 2; grid-row: 1; justify-self: stretch; width: 100%; margin: 0; padding: clamp(26px, 3vw, 38px); border: 0; border-radius: var(--radius-lg); background: rgb(255 255 255 / 94%); box-shadow: 0 8px 14px rgb(91 45 122 / 8%); }
.auth-shell .auth-panel h1 { margin: 0 0 10px; color: var(--theme-strong, #351043); font-family: "Evolventa", "Helvetica Neue", sans-serif; font-size: 32px; font-weight: 700; letter-spacing: -.045em; line-height: 1.03; }
.auth-panel__lead { margin: 0 0 26px; color: #684c68; font-size: 14px; line-height: 1.5; }
.auth-shell .auth-form { gap: 15px; }
.auth-shell .auth-form label { color: #4e3850; font-size: 12px; }
.auth-shell .auth-form input { min-height: 48px; border-color: var(--theme-line, #ead8e4); background: var(--theme-surface, #fff); color: var(--theme-strong, #351043); }
.auth-shell .auth-form input::placeholder { color: #806a7e; opacity: 1; }
.auth-shell .auth-form input:focus { border-color: var(--theme-line, #ead8e4); outline: 0; box-shadow: none; }
.auth-shell .auth-form .button { min-height: 50px; margin-top: 8px; border-color: var(--theme-accent, #ff7b95); background: var(--theme-action, #ff7b95); font-size: 15px; }
.auth-shell .auth-form .button:hover:not(:disabled) { background: var(--theme-action, #ff7b95); }
.auth-shell .auth-panel > .text-link { display: inline-block; color: #7a506b; font-size: 13px; }
.auth-shell .auth-panel > p { color: #795d72; font-size: 13px; }
.auth-shell .auth-panel > p a { color: var(--theme-accent, #ff7b95); font-weight: 700; }
.auth-shell .auth-checkbox { padding-top: 2px; }

@media (max-width: 1060px) {
  .auth-content { grid-template-columns: minmax(0, 1fr) minmax(370px, 430px); gap: 44px; padding-inline: clamp(28px, 4.2vw, 52px); }
  .auth-brand { padding-left: 8px; }
  .auth-brand__logo { width: clamp(280px, 34vw, 390px); }
  .auth-note { left: 8px; width: min(370px, 84%); }
}

@media (max-width: 840px) {
  .auth-shell .auth-layout { width: calc(100% - 24px); min-height: calc(100svh - 24px); margin: 12px auto; overflow: visible; }
  .auth-content { grid-template-columns: 1fr; gap: 26px; align-items: start; padding: 22px; }
  .auth-brand { grid-column: 1; grid-row: 1; min-height: 330px; align-items: center; justify-content: flex-start; padding: 30px 0 0; }
  .auth-brand__logo { width: min(340px, 72vw); max-width: none; transform: none; }
  .auth-note { left: 50%; bottom: 6px; width: min(365px, 82vw); min-height: 154px; grid-template-columns: 54px 1fr; gap: 13px; padding: 28px 25px 23px; border-radius: 40.5px; transform: translateX(-50%) rotate(-3deg); }
  .auth-note__tape { top: -18px; width: 136px; height: 37px; }
  .auth-note__heart { width: 50px; height: 50px; }
  .auth-note__copy { font-size: clamp(18px, 3.8vw, 23px); }
  .auth-shell .auth-panel { grid-column: 1; grid-row: 2; width: min(100%, 620px); margin: 0 auto 4px; }
  .auth-shell .auth-layout::before { width: 820px; left: -380px; top: -320px; }
  .auth-shell .auth-layout::after { width: 800px; left: -420px; bottom: -460px; }
}

@media (max-width: 540px) {
  .auth-shell .auth-layout { width: 100%; min-height: 100svh; margin: 0; border-width: 0; border-radius: 0; box-shadow: none; }
  .auth-content { gap: 18px; padding: max(16px, env(safe-area-inset-top)) 15px max(20px, env(safe-area-inset-bottom)); }
  .auth-brand { min-height: 278px; padding-top: 22px; }
  .auth-brand__logo { width: min(258px, 72vw); }
  .auth-note { bottom: 4px; width: min(292px, 84vw); min-height: 130px; grid-template-columns: 43px 1fr; gap: 11px; padding: 25px 20px 18px; border-radius: 36px; box-shadow: 0 20px 38px rgb(86 52 91 / 12%); }
  .auth-note__tape { top: -15px; width: 118px; height: 33px; background-size: 22px 22px; background-position: 0 0, 11px 11px; }
  .auth-note__heart { width: 42px; height: 42px; }
  .auth-note__copy { font-size: 18px; line-height: 1.3; }
  .auth-note__spark { right: 18px; bottom: 15px; width: 17px; height: 17px; }
  .auth-spark--one { top: 8%; left: 7%; }
  .auth-spark--two { top: 13%; right: 10%; left: auto; }
  .auth-spark--three { display: none; }
  .auth-shell .auth-panel { padding: 26px 22px; }
  .auth-shell .auth-panel h1 { font-size: 29px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-shell *, .auth-shell *::before, .auth-shell *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media (max-width: 767px) {
  .boot-loading__header { min-height: 68px; padding-inline: 16px; grid-template-columns: 1fr auto; }
  .boot-loading__wordmark { width: auto; height: 42px; }
  .boot-loading__wordmark .brand-logo { max-width: 205px; height: 42px; }
  .boot-loading__nav { display: none; }
  .boot-loading__main { width: calc(100% - 32px); padding: 32px 0 94px; }
  .boot-loading__hero { min-height: 230px; grid-template-columns: minmax(126px, .68fr) minmax(0, 1fr); gap: 20px; }
  .boot-loading__hero > div { width: 100%; height: 230px; }
  .boot-loading__hero span { gap: 14px; }
  .boot-loading__cards { display: flex; gap: 12px; margin-top: 38px; overflow: hidden; }
  .boot-loading__cards i { min-width: min(78vw, 280px); height: 162px; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-loading *, .boot-loading *::before, .boot-loading *::after,
  .image-reveal { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Collection library: a distinct, task-first view rather than a dashboard clone. */
.collection-page { --collection-fuchsia: var(--theme-accent, #ff7b95); --collection-fuchsia-hover: var(--theme-accent, #ff7b95); --collection-fuchsia-soft: var(--theme-accent, #ff7b95); display: grid; gap: 32px; padding-top: 50px; }
.collection-library__header { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.collection-library__header h1 { margin: 0; color: var(--color-text); font-size: 56px; letter-spacing: -.045em; line-height: .98; text-wrap: balance; }
.collection-library__switch { flex: 0 0 auto; display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: rgb(255 255 255 / 72%); }
.collection-library__switch button { min-height: 42px; padding: 8px 16px; border: 1px solid transparent; border-radius: var(--radius-pill); background: transparent; color: var(--color-text-secondary); cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; }
.collection-library__switch button:hover { color: var(--color-text); }
.collection-library__switch button.is-active { border-color: var(--collection-fuchsia); color: var(--collection-fuchsia); background: transparent; }
.collection-library { display: grid; gap: 20px; }
.collection-library__toolbar { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.collection-library__toolbar h2 { margin: 0; color: var(--color-text); font-size: 26px; letter-spacing: -.03em; text-wrap: balance; }
.collection-library__filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.collection-library__filters button { min-height: 38px; padding: 7px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: transparent; color: var(--color-text-secondary); cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; }
.collection-library__filters button:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.collection-library__filters button.is-active { border-color: var(--collection-fuchsia); color: var(--collection-fuchsia); background: transparent; }
.collection-library__filters button span { margin-left: 5px; color: inherit; font-variant-numeric: tabular-nums; opacity: .72; }
.collection-book-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.collection-book { min-width: 0; min-height: 246px; display: grid; grid-template-columns: minmax(118px, 144px) minmax(0, 1fr); gap: 24px; align-items: center; padding: 22px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: rgb(255 255 255 / 86%); box-shadow: 0 7px 8px rgb(66 21 68 / 5%); }
.collection-book__cover { position: relative; isolation: isolate; justify-self: center; width: min(100%, 144px); display: block; }
.collection-book__cover::before { position: absolute; z-index: -1; inset: 5px -5px -5px 5px; border-radius: var(--radius-md); background: var(--collection-fuchsia-soft); content: ""; }
.collection-book--cobalt .collection-book__cover::before { background: var(--color-cobalt-soft); }.collection-book--coral .collection-book__cover::before { background: var(--color-coral-soft); }.collection-book--lilac .collection-book__cover::before { background: var(--color-lilac-soft); }
.collection-book__cover--artwork::before { content: none; }
.collection-book__artwork { position: absolute; z-index: -1; inset: 4px -4px -4px 4px; display: block; overflow: hidden; border-radius: var(--radius-md); background: var(--theme-soft, #f4edf3); }
.collection-book__cover > img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); box-shadow: 0 6px 8px rgb(46 15 45 / 12%); }
.collection-book__artwork img { width: 100%; height: 100%; max-height: none; display: block; border-radius: inherit; box-shadow: none; object-fit: cover; }
.collection-book__body { min-width: 0; min-height: 198px; display: flex; flex-direction: column; align-items: stretch; }
.collection-book__topline { min-height: 22px; display: flex; align-items: start; justify-content: flex-end; }
.collection-book__remove { width: 30px; height: 30px; margin: -5px -5px 0 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-text-secondary); cursor: pointer; font-size: 24px; font-weight: 300; line-height: 1; }
.collection-book__remove:hover { background: var(--collection-fuchsia-soft); color: var(--collection-fuchsia); }
.collection-book h2 { margin: 6px 0 20px; color: var(--color-text); font-size: 24px; letter-spacing: -.04em; line-height: 1.1; text-wrap: balance; }
.collection-book h2 a:hover { color: var(--collection-fuchsia); }
.collection-book__progress { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--color-text-secondary); font-size: 13px; }
.collection-book__progress b, .collection-book__progress strong { color: var(--color-text); font-variant-numeric: tabular-nums; }
.collection-book__progress strong { font-size: 20px; }
.collection-book .progress { height: 6px; margin-top: 9px; background: var(--color-cobalt-soft); }
.collection-book .progress span { background: var(--collection-fuchsia); }
.collection-book__status { min-height: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; color: var(--color-text-secondary); font-size: 12px; }
.collection-book__action { width: fit-content; min-height: 40px; margin-top: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--collection-fuchsia); font-size: 14px; font-weight: 800; }
.collection-book__action svg { width: 16px; height: 16px; transition: transform 170ms var(--ease); }
.collection-book__action:hover svg { transform: translateX(3px); }
.collection-library__empty .empty-state { margin-top: 0; }
@media (max-width: 1040px) { .collection-book-grid { grid-template-columns: 1fr; }.collection-book { grid-template-columns: 144px minmax(0, 1fr); } }
@media (max-width: 767px) { .collection-page { gap: 22px; padding-top: 30px; }.collection-library__header { align-items: start; flex-direction: column; gap: 20px; }.collection-library__header h1 { font-size: 40px; }.collection-library__switch { width: 100%; }.collection-library__switch button { flex: 1; padding-inline: 10px; }.collection-library__toolbar { align-items: start; flex-direction: column; gap: 13px; }.collection-library__toolbar h2 { font-size: 22px; }.collection-library__filters { justify-content: start; }.collection-book { min-height: 0; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 16px; }.collection-book__cover { width: 96px; }.collection-book__body { min-height: 156px; }.collection-book h2 { margin: 4px 0 13px; font-size: 20px; }.collection-book__progress { font-size: 12px; }.collection-book__progress strong { font-size: 17px; }.collection-book__status { margin-top: 9px; font-size: 11px; }.collection-book__status > span:last-child { display: none; }.collection-book__action { min-height: 32px; font-size: 13px; }.collection-book__remove { width: 28px; height: 28px; font-size: 21px; } }

/* Catalog: a direct browse surface, with the books ahead of the introduction. */
.catalog-page {
  --catalog-ink: var(--theme-strong, #490b3b);
  --catalog-muted: var(--theme-muted, #765d6e);
  --catalog-line: var(--theme-line, #ead9e3);
  --catalog-surface: rgb(255 255 255 / 88%);
  --catalog-fuchsia: var(--theme-accent, #ff7b95);
  --catalog-fuchsia-hover: var(--theme-accent, #ff7b95);
  --catalog-fuchsia-soft: var(--theme-accent, #ff7b95);
  --catalog-blue-soft: var(--theme-soft, #e8ebfa);
  --catalog-coral-soft: #fff0ea;
  --catalog-lilac-soft: #f2e8fb;
  max-width: 1520px;
  padding-top: 48px !important;
  color: var(--catalog-ink);
}
.catalog-page * { font-family: "Evolventa", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.catalog-header { display: flex; align-items: end; justify-content: space-between; gap: 28px; }
.catalog-header h1 { margin: 0; color: var(--catalog-ink); font-size: 52px !important; font-weight: 800; letter-spacing: -.045em !important; line-height: .98; text-wrap: balance; }
.catalog-header p { max-width: 480px; margin: 11px 0 0; color: var(--catalog-muted); font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.catalog-switch { flex: 0 0 auto; margin: 0; display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--catalog-line); border-radius: var(--radius-pill); background: var(--catalog-surface); }
.catalog-switch > * { min-height: 42px; padding: 8px 16px; border: 1px solid transparent; border-radius: var(--radius-pill); font-size: 14px; font-weight: 700; line-height: 24px; }
.catalog-switch a { display: inline-flex; align-items: center; gap: 7px; color: var(--catalog-muted); transition-property: border-color, color; transition-duration: 170ms; transition-timing-function: var(--ease); }
.catalog-switch a:hover { border-color: var(--catalog-line); background: transparent; color: var(--catalog-ink); }
.catalog-switch a b { min-width: 20px; padding: 0 5px; color: var(--catalog-fuchsia); font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; }
.catalog-switch span { border-color: var(--catalog-fuchsia); background: transparent; color: var(--catalog-fuchsia); }
.catalog-results { margin-top: 42px; }
.catalog-results > header { margin-bottom: 22px; display: grid; grid-template-columns: minmax(180px, .65fr) minmax(0, 1.35fr); align-items: end; gap: 26px; }
.catalog-results > header > div:first-child { display: flex; align-items: baseline; gap: 10px; }
.catalog-results h2 { margin: 0; color: var(--catalog-ink); font-size: 30px !important; font-weight: 800; letter-spacing: -.04em !important; line-height: 1.08; text-wrap: balance; }
.catalog-results > header > div:first-child > span { color: var(--catalog-muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.catalog-controls { width: 100%; margin: 0; padding: 0; display: flex; align-items: center; justify-content: flex-end; gap: 14px; border: 0; border-radius: 0; background: transparent; }
.catalog-search { width: min(100%, 360px); min-height: 44px; padding: 0 13px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--catalog-line); border-radius: var(--radius-sm); background: rgb(255 255 255 / 70%); color: var(--catalog-muted); transition-property: border-color, box-shadow, background-color; transition-duration: 170ms; transition-timing-function: var(--ease); }
.catalog-search:focus-within { border-color: var(--catalog-fuchsia); background: var(--theme-surface, #fff); box-shadow: 0 0 0 3px rgb(254 43 133 / 12%); }
.catalog-search svg { width: 18px; height: 18px; flex: 0 0 auto; stroke-width: 2; }
.catalog-search input { min-width: 0; min-height: 42px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--catalog-ink) !important; font-size: 14px; }
.catalog-search input::placeholder { color: var(--catalog-muted); opacity: 1; }
.catalog-search input:focus { outline: 0; }
.catalog-filter { display: flex; align-items: center; gap: 9px; }
.catalog-filter > span { color: var(--catalog-muted); font-size: 12px; font-weight: 700; }
.catalog-filter__buttons { display: flex; gap: 7px; padding: 0; border-radius: 0; background: transparent; }
.catalog-filter button { min-height: 40px; padding: 7px 12px; border: 1px solid var(--catalog-line); border-radius: var(--radius-pill); background: transparent; color: var(--catalog-muted); cursor: pointer; font-size: 12px; font-weight: 700; transition-property: border-color, color, transform; transition-duration: 170ms; transition-timing-function: var(--ease); }
.catalog-filter button:hover { border-color: var(--catalog-fuchsia); background: transparent; color: var(--catalog-fuchsia); }
.catalog-filter button.is-active { border-color: var(--catalog-fuchsia); background: transparent; color: var(--catalog-fuchsia); box-shadow: none; }
.catalog-filter button:active { transform: scale(.96); }
.catalog-reset { width: fit-content; min-height: 36px; margin: -4px 0 18px auto; padding: 6px 0; border: 0; background: transparent; color: var(--catalog-fuchsia); cursor: pointer; font-size: 13px; font-weight: 700; text-decoration: underline; text-decoration-color: rgb(254 43 133 / 36%); text-underline-offset: 4px; }
.catalog-book-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.catalog-book-card { --catalog-accent-soft: var(--catalog-fuchsia-soft); min-width: 0; padding: 14px; display: flex; flex-direction: column; gap: 16px; border: 1px solid var(--catalog-line); border-radius: var(--radius-lg); background: var(--catalog-surface); box-shadow: 0 7px 8px rgb(66 21 68 / 5%); transition-property: transform, box-shadow; transition-duration: 210ms; transition-timing-function: var(--ease); }
.catalog-book-card--blue { --catalog-accent-soft: var(--catalog-blue-soft); }.catalog-book-card--coral { --catalog-accent-soft: var(--catalog-coral-soft); }.catalog-book-card--lilac { --catalog-accent-soft: var(--catalog-lilac-soft); }
.catalog-book-card:hover { border-color: var(--catalog-line); box-shadow: 0 10px 18px rgb(66 21 68 / 8%); transform: translateY(-2px); }
.catalog-book-card__cover { min-height: 286px; padding: 18px; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius-md); background: var(--catalog-accent-soft); }
.catalog-book-card__cover::before { display: none; }
.catalog-book-card__cover img { width: auto; max-width: 82%; height: 100%; min-height: 0; max-height: 320px; display: block; border: 1px solid rgb(0 0 0 / 10%); border-radius: var(--radius-sm); box-shadow: 0 7px 10px rgb(46 15 45 / 12%); object-fit: contain; transition-property: transform; transition-duration: 230ms; transition-timing-function: var(--ease); }
.catalog-book-card:hover .catalog-book-card__cover img { transform: translateY(-3px); }
.catalog-book-card__body { min-width: 0; min-height: 160px; display: flex; flex: 1; flex-direction: column; align-items: stretch; }
.catalog-book-card__topline { min-height: 22px; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--catalog-muted); font-size: 11px; font-weight: 700; }
.catalog-book-card__owned, .catalog-book-card__available { padding: 3px 7px; border: 1px solid transparent; border-radius: var(--radius-pill); white-space: nowrap; }
.catalog-book-card__owned { border-color: rgb(54 121 79 / 28%); background: transparent; color: #286544; }.catalog-book-card__available { border-color: var(--catalog-line); background: transparent; color: var(--catalog-muted); }
.catalog-book-card h3 { margin: 12px 0 7px; color: var(--catalog-ink); font-size: 24px !important; font-weight: 800 !important; letter-spacing: -.04em !important; line-height: 1.04; text-wrap: balance; }
.catalog-book-card h3 a:hover { color: var(--catalog-fuchsia); }
.catalog-book-card__body > p { margin: 0; display: -webkit-box; overflow: hidden; color: var(--catalog-muted); font-size: 13px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.catalog-book-card__footer { width: 100%; margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.catalog-book-card__count { color: var(--catalog-muted); font-size: 12px; white-space: nowrap; }.catalog-book-card__count b { color: var(--catalog-ink); font-size: 17px; font-variant-numeric: tabular-nums; }
.catalog-book-card__action, .catalog-book-card__add { min-height: 40px; padding: 8px 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 800; white-space: nowrap; }
.catalog-book-card__action { color: var(--catalog-fuchsia); }.catalog-book-card__action svg { width: 16px; height: 16px; transition-property: transform; transition-duration: 170ms; transition-timing-function: var(--ease); }.catalog-book-card__action:hover svg { transform: translateX(3px); }
.catalog-book-card__add { border: 1px solid var(--catalog-fuchsia); background: var(--catalog-fuchsia); color: #fff; cursor: pointer; transition-property: background-color, border-color, transform; transition-duration: 170ms; transition-timing-function: var(--ease); }.catalog-book-card__add:hover { border-color: var(--catalog-fuchsia-hover); background: var(--catalog-fuchsia-hover); transform: translateY(-1px); }.catalog-book-card__add:active { transform: scale(.96); }.catalog-book-card__add span { width: 17px; height: 17px; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / 70%); border-radius: 50%; font-size: 16px; line-height: 1; }
.catalog-page .empty-state { margin: 0; border-color: var(--catalog-line); background: var(--theme-surface, #fff); }
@media (max-width: 1180px) { .catalog-book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.catalog-results > header { grid-template-columns: 1fr; align-items: start; }.catalog-controls { justify-content: space-between; } }
@media (max-width: 767px) { .catalog-page { padding: 30px 16px 96px !important; }.catalog-header { align-items: start; flex-direction: column; gap: 20px; }.catalog-header h1 { font-size: 40px !important; }.catalog-header p { max-width: 340px; margin-top: 9px; font-size: 14px; }.catalog-switch { width: 100%; }.catalog-switch > * { flex: 1; padding-inline: 10px; text-align: center; }.catalog-switch a { justify-content: center; }.catalog-results { margin-top: 32px; }.catalog-results > header { gap: 15px; margin-bottom: 16px; }.catalog-results h2 { font-size: 24px !important; }.catalog-controls { align-items: stretch; flex-direction: column; gap: 10px; }.catalog-search { width: 100%; }.catalog-filter { align-items: start; flex-direction: column; gap: 7px; }.catalog-filter__buttons { width: 100%; }.catalog-filter button { flex: 1; min-width: 0; padding-inline: 7px; font-size: 11px; }.catalog-reset { margin: 0 0 14px; }.catalog-book-grid { grid-template-columns: 1fr; gap: 14px; }.catalog-book-card { min-height: 0; display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 15px; padding: 12px; }.catalog-book-card__cover { min-height: 176px; padding: 11px; }.catalog-book-card__cover img { max-width: 88%; max-height: 164px; }.catalog-book-card__body { min-height: 176px; }.catalog-book-card__topline > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.catalog-book-card__owned, .catalog-book-card__available { padding: 3px 6px; font-size: 9px; }.catalog-book-card h3 { margin: 10px 0 6px; font-size: 20px !important; }.catalog-book-card__body > p { font-size: 12px; }.catalog-book-card__footer { padding-top: 10px; align-items: flex-end; flex-direction: column; gap: 3px; }.catalog-book-card__count { align-self: flex-start; }.catalog-book-card__action, .catalog-book-card__add { min-height: 34px; padding: 6px 9px; font-size: 10px; }.catalog-book-card__add span { width: 14px; height: 14px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .catalog-page *, .catalog-page *::before, .catalog-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* The catalog is a selection surface, so supporting copy does not compete with the books. */
.catalog-header p { display: none; }
.catalog-results { margin-top: 28px; }
.catalog-results__toolbar { margin-bottom: 22px; display: flex; justify-content: flex-end; }
.catalog-results__toolbar .catalog-controls { justify-content: flex-end; }
.catalog-book-card__topline { justify-content: flex-end; }
@media (max-width: 1180px) { .catalog-results__toolbar .catalog-controls { justify-content: space-between; } }
@media (max-width: 767px) { .catalog-results { margin-top: 24px; }.catalog-results__toolbar { margin-bottom: 16px; }.catalog-results__toolbar .catalog-controls { justify-content: stretch; } }

/* Rewards: a collectible moment first, with the ledger kept as supporting detail. */
.achievements-page {
  --ach-ink: var(--theme-strong, #490b3b);
  --ach-muted: var(--theme-muted, #765d6e);
  --ach-line: var(--theme-line, #ead9e3);
  --ach-soft: var(--theme-soft, #fff1f7);
  --ach-fuchsia: var(--theme-accent, #ff7b95);
  --ach-fuchsia-dark: var(--theme-accent, #ff7b95);
  --ach-lilac: var(--theme-soft, #eef0fb);
  max-width: 1520px;
  padding-top: 48px !important;
  color: var(--ach-ink);
}
.achievements-page * { font-family: "Evolventa", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.achievements-header { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.achievements-header h1 { margin: 0; color: var(--ach-ink); font-size: 52px !important; font-weight: 800; letter-spacing: -.045em !important; line-height: .98; text-wrap: balance; }
.achievements-header > span { color: var(--ach-muted); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rewards-spotlight { position: relative; isolation: isolate; min-height: 322px; margin-top: 28px; padding: 34px 36px; display: grid; grid-template-columns: minmax(0, 1fr) 180px minmax(214px, 270px); gap: clamp(22px, 4vw, 62px); align-items: center; overflow: hidden; border-radius: var(--radius-xl); background: var(--ach-fuchsia); color: #fff; box-shadow: 0 15px 30px rgb(198 24 101 / 18%); }
.rewards-spotlight::before { position: absolute; z-index: -1; width: 520px; aspect-ratio: 1; right: -190px; top: -310px; border-radius: 50%; background: rgb(255 255 255 / 12%); content: ""; }
.rewards-spotlight::after { position: absolute; z-index: -1; width: 260px; aspect-ratio: 1; left: 42%; bottom: -188px; border-radius: 50%; background: rgb(73 11 59 / 11%); content: ""; }
.rewards-spotlight__copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.rewards-spotlight__label { display: inline-flex; min-height: 28px; align-items: center; padding: 4px 10px; border: 1px solid rgb(255 255 255 / 46%); border-radius: var(--radius-pill); font-size: 11px; font-weight: 800; }
.rewards-spotlight h2 { max-width: 520px; margin: 15px 0 8px; color: #fff; font-size: 36px !important; font-weight: 800; letter-spacing: -.045em !important; line-height: 1.02; text-wrap: balance; }
.rewards-spotlight p { max-width: 480px; margin: 0; color: rgb(255 255 255 / 90%); font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.rewards-spotlight__reward { margin-top: 16px; color: #fff; font-size: 15px; font-variant-numeric: tabular-nums; }
.rewards-spotlight__cta { min-height: 44px; margin-top: 22px; padding: 9px 16px; display: inline-flex; align-items: center; gap: 8px; border-radius: var(--radius-pill); background: var(--theme-surface, #fff); color: var(--ach-fuchsia); font-size: 14px; font-weight: 800; transition-property: transform, background-color; transition-duration: 180ms; transition-timing-function: var(--ease); }
.rewards-spotlight__cta:hover { background: #fff7fb; transform: translateY(-1px); }.rewards-spotlight__cta:active { transform: scale(.96); }.rewards-spotlight__cta svg { width: 16px; height: 16px; }
.rewards-spotlight__art { width: 166px; height: 166px; display: grid; place-items: center; border-radius: var(--radius-lg); background: rgb(255 255 255 / 16%); }
.rewards-spotlight__art img { width: 88%; height: 88%; display: block; filter: drop-shadow(0 8px 12px rgb(73 11 59 / 16%)); object-fit: contain; }
.rewards-spotlight__art > svg { width: 58px; height: 58px; }
.rewards-spotlight__level { min-width: 0; padding: 20px; display: grid; grid-template-columns: 1fr auto; align-items: end; border: 1px solid rgb(255 255 255 / 35%); border-radius: var(--radius-lg); background: rgb(255 255 255 / 13%); }
.rewards-spotlight__level > span { grid-column: 1 / -1; color: rgb(255 255 255 / 86%); font-size: 12px; font-weight: 800; }
.rewards-spotlight__level strong { margin-top: 10px; color: #fff; font-size: 54px; font-weight: 800; letter-spacing: -.07em; line-height: .82; font-variant-numeric: tabular-nums; }
.rewards-spotlight__level small { padding-bottom: 2px; color: rgb(255 255 255 / 88%); font-size: 12px; font-weight: 700; }
.rewards-spotlight__level > div { grid-column: 1 / -1; margin-top: 18px; }.rewards-spotlight__level .progress { height: 7px; background: rgb(255 255 255 / 26%); }.rewards-spotlight__level .progress span { background: var(--theme-surface, #fff); }.rewards-spotlight__level b { display: block; margin-top: 8px; color: rgb(255 255 255 / 88%); font-size: 11px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.achievement-case, .rewards-catalog, .achievements-ledger { margin-top: 56px; }
.achievement-case > header, .rewards-catalog > header { margin-bottom: 20px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.achievement-case h2, .rewards-catalog h2, .achievements-ledger h2 { margin: 0; color: var(--ach-ink); font-size: 28px !important; font-weight: 800; letter-spacing: -.04em !important; line-height: 1.08; text-wrap: balance; }
.achievement-case > header p, .rewards-catalog > header p { margin: 7px 0 0; color: var(--ach-muted); font-size: 13px; line-height: 1.45; }
.achievement-case > header > span { min-width: 62px; min-height: 36px; padding: 7px 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ach-line); border-radius: var(--radius-pill); color: var(--ach-fuchsia); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.achievement-case__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.achievement-case__item { min-width: 0; min-height: 296px; padding: 20px; display: flex; flex-direction: column; border: 1px solid var(--ach-line); border-radius: var(--radius-lg); background: rgb(255 255 255 / 86%); }
.achievement-case__item[data-state="next"] { border-color: var(--ach-fuchsia); background: var(--ach-soft); }.achievement-case__item[data-state="locked"] { background: rgb(255 255 255 / 56%); }.achievement-case__item[data-state="locked"] .achievement-case__icon { opacity: .53; filter: grayscale(.28); }
.achievement-case__icon { width: 144px; height: 144px; display: grid; place-items: center; border-radius: 0; background: transparent; }.achievement-case__item[data-state="unlocked"] .achievement-case__icon, .achievement-case__item[data-state="next"] .achievement-case__icon { background: transparent; }
.achievement-case__icon img { width: 100%; height: 100%; display: block; object-fit: contain; }.achievement-case__icon svg { width: 48px; height: 48px; }
.achievement-case__copy { min-width: 0; margin-top: 18px; }.achievement-case__copy > span { color: var(--ach-muted); font-size: 10px; font-weight: 800; }.achievement-case__item[data-state="next"] .achievement-case__copy > span { color: var(--ach-fuchsia); }
.achievement-case__copy h3 { margin: 5px 0 5px; color: var(--ach-ink); font-size: 17px !important; font-weight: 800 !important; letter-spacing: -.025em !important; line-height: 1.13; }.achievement-case__copy p { margin: 0; display: -webkit-box; overflow: hidden; color: var(--ach-muted); font-size: 12px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.achievement-case__item > b { margin-top: auto; padding-top: 12px; color: var(--ach-fuchsia); font-size: 13px; font-variant-numeric: tabular-nums; }
.rewards-catalog > header p { max-width: 460px; }.reward-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; border: 0; }.reward-list > article { min-height: 176px; padding: 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto; gap: 16px 12px; border: 1px solid var(--ach-line); border-radius: var(--radius-lg); background: rgb(255 255 255 / 86%); }.reward-list h3 { margin: 0 0 7px; color: var(--ach-ink); font-size: 18px !important; font-weight: 800 !important; letter-spacing: -.025em !important; line-height: 1.15; }.reward-list p { margin: 0; color: var(--ach-muted); font-size: 12px; line-height: 1.45; }.reward-list__cost { align-self: end; }.reward-list__cost strong { color: var(--ach-ink); font-size: 14px; font-variant-numeric: tabular-nums; }.reward-list__cost small { display: block; margin-top: 4px; color: var(--ach-muted); font-size: 10px; }.reward-list .button { min-height: 38px; align-self: end; padding: 7px 11px; border-color: var(--ach-fuchsia); background: transparent; color: var(--ach-fuchsia); font-size: 11px; font-weight: 800; }.reward-list .button:hover:not(:disabled) { border-color: var(--ach-fuchsia); background: var(--ach-fuchsia); color: #fff; }.reward-list .catalog-state { align-self: end; padding: 7px 9px; border: 1px solid rgb(54 121 79 / 28%); border-radius: var(--radius-pill); background: transparent; color: #286544; font-size: 11px; font-weight: 800; }
.achievements-ledger { padding: 28px 30px 32px; border: 1px solid var(--ach-line); border-radius: var(--radius-lg); background: rgb(255 255 255 / 58%); }.achievements-ledger > header { margin-bottom: 26px; display: flex; align-items: end; justify-content: space-between; gap: 24px; }.achievements-ledger > header p { max-width: 380px; margin: 7px 0 0; color: var(--ach-muted); font-size: 13px; line-height: 1.45; }.achievements-ledger__balance { min-width: 130px; padding: 10px 12px 9px; display: grid; grid-template-columns: 1fr auto; align-items: baseline; border: 1px solid var(--ach-line); border-radius: var(--radius-sm); background: var(--theme-surface, #fff); }.achievements-ledger__balance span { grid-column: 1 / -1; margin-bottom: 4px; color: var(--ach-muted); font-size: 10px; font-weight: 700; }.achievements-ledger__balance strong { color: var(--ach-ink); font-size: 24px; font-weight: 800; letter-spacing: -.05em; line-height: .95; font-variant-numeric: tabular-nums; }.achievements-ledger__balance small { padding-bottom: 1px; color: var(--ach-muted); font-size: 10px; font-weight: 700; }
@media (max-width: 1120px) { .rewards-spotlight { grid-template-columns: minmax(0, 1fr) 140px; }.rewards-spotlight__level { grid-column: 1 / -1; width: min(100%, 460px); grid-template-columns: 1fr auto; }.achievement-case__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .achievements-page { padding: 30px 16px 96px !important; }.achievements-header { align-items: start; flex-direction: column; gap: 10px; }.achievements-header h1 { font-size: 40px !important; }.achievements-header > span { font-size: 13px; }.rewards-spotlight { min-height: 0; margin-top: 22px; padding: 24px 20px; grid-template-columns: minmax(0, 1fr) 94px; gap: 16px; border-radius: var(--radius-lg); }.rewards-spotlight__label { min-height: 26px; font-size: 10px; }.rewards-spotlight h2 { margin-top: 12px; font-size: 28px !important; }.rewards-spotlight p { font-size: 13px; }.rewards-spotlight__reward { margin-top: 13px; font-size: 13px; }.rewards-spotlight__cta { min-height: 40px; margin-top: 18px; font-size: 13px; }.rewards-spotlight__art { width: 94px; height: 94px; align-self: start; border-radius: var(--radius-md); }.rewards-spotlight__level { grid-column: 1 / -1; width: 100%; padding: 16px; }.rewards-spotlight__level strong { font-size: 45px; }.achievement-case, .rewards-catalog, .achievements-ledger { margin-top: 38px; }.achievement-case > header, .rewards-catalog > header { margin-bottom: 16px; }.achievement-case h2, .rewards-catalog h2, .achievements-ledger h2 { font-size: 24px !important; }.achievement-case__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.achievement-case__item { min-height: 252px; padding: 12px; border-radius: var(--radius-md); }.achievement-case__icon { width: 104px; height: 104px; }.achievement-case__copy { margin-top: 13px; }.achievement-case__copy h3 { font-size: 15px !important; }.achievement-case__copy p { font-size: 11px; }.achievement-case__item > b { padding-top: 8px; font-size: 12px; }.reward-list { grid-template-columns: 1fr; gap: 10px; }.reward-list > article { min-height: 150px; padding: 16px; border-radius: var(--radius-md); }.achievements-ledger { padding: 22px 16px 20px; border-radius: var(--radius-md); }.achievements-ledger > header { margin-bottom: 18px; align-items: start; gap: 12px; }.achievements-ledger > header p { margin-top: 6px; font-size: 12px; }.achievements-ledger__balance { min-width: 96px; padding: 9px 10px 8px; }.achievements-ledger__balance strong { font-size: 21px; } }
@media (max-width: 380px) { .rewards-spotlight { grid-template-columns: 1fr; }.rewards-spotlight__art { display: none; }.achievement-case__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .achievements-page *, .achievements-page *::before, .achievements-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Achievement unlocks stay celebratory until the user closes the card. */
body.has-achievement-celebration { overflow: hidden; }
.achievement-celebration { position: fixed; z-index: 220; inset: 0; display: grid; place-items: center; padding: 24px; overflow: hidden; opacity: 0; transition: opacity 220ms ease; }
.achievement-celebration.is-visible { opacity: 1; }
.achievement-celebration__backdrop { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgb(115 36 104 / 86%), rgb(40 6 47 / 94%) 68%); backdrop-filter: blur(8px); }
.achievement-celebration__fireworks { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.achievement-celebration__card { position: relative; z-index: 2; width: min(100%, 440px); padding: 38px 36px 34px; display: flex; flex-direction: column; align-items: center; overflow: hidden; border: 1px solid rgb(255 255 255 / 46%); border-radius: var(--radius-xl); background: linear-gradient(145deg, var(--theme-background, #fffdfd) 0%, #fff3f9 100%); box-shadow: 0 24px 70px rgb(27 4 39 / 36%); color: var(--theme-strong, #490b3b); text-align: center; transform: translateY(12px) scale(.98); transition-property: opacity, transform; transition-duration: 360ms; transition-timing-function: cubic-bezier(.2, .8, .2, 1); }
.achievement-celebration.is-visible .achievement-celebration__card { transform: translateY(0) scale(1); }
.achievement-celebration__card::before { position: absolute; inset: -78px -32px auto; height: 176px; border-radius: 50%; background: radial-gradient(circle, rgb(254 43 133 / 20%), transparent 68%); content: ""; pointer-events: none; }
.achievement-celebration__close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--theme-muted, #765d6e); cursor: pointer; transition-property: background-color, color, transform; transition-duration: 160ms; transition-timing-function: var(--ease); }
.achievement-celebration__close:hover { background: rgb(73 11 59 / 7%); color: var(--theme-strong, #490b3b); transform: rotate(4deg); }.achievement-celebration__close svg { width: 21px; height: 21px; }
.achievement-celebration__eyebrow { position: relative; margin: 0; color: var(--theme-accent, #ff7b95); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.achievement-celebration__art { position: relative; width: 196px; height: 196px; margin: 14px 0 12px; display: grid; place-items: center; background: transparent; }
.achievement-celebration__art img { width: 100%; height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 14px 15px rgb(113 27 89 / 18%)); }
.achievement-celebration__art > svg { width: 86px; height: 86px; color: var(--theme-accent, #ff7b95); }
.achievement-celebration__card h2 { position: relative; margin: 0; color: var(--theme-strong, #490b3b); font-size: 34px !important; font-weight: 800 !important; letter-spacing: -.045em !important; line-height: 1.02; text-wrap: balance; }
.achievement-celebration__description { position: relative; max-width: 310px; margin: 10px 0 0; color: var(--theme-muted, #765d6e); font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.achievement-celebration__points { position: relative; margin-top: 14px; color: var(--theme-accent, #ff7b95); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.achievement-celebration__cta { position: relative; width: 100%; min-height: 52px; margin-top: 24px; padding: 10px 20px; border: 0; border-radius: var(--radius-pill); background: var(--theme-action, #ff7b95); color: #fff; cursor: pointer; font-size: 16px; font-weight: 800; transition-property: background-color, transform; transition-duration: 180ms; transition-timing-function: var(--ease); }
.achievement-celebration__cta:hover { background: var(--theme-action, #ff7b95); transform: translateY(-1px); }.achievement-celebration__cta:active { transform: scale(.98); }
@media (max-width: 767px) { .achievement-celebration { padding: 16px; align-items: end; }.achievement-celebration__card { width: min(100%, 440px); padding: 30px 22px 22px; border-radius: var(--radius-lg); }.achievement-celebration__art { width: 160px; height: 160px; margin: 10px 0 8px; }.achievement-celebration__card h2 { font-size: 29px !important; }.achievement-celebration__description { max-width: 280px; font-size: 14px; }.achievement-celebration__cta { min-height: 50px; margin-top: 20px; } }
@media (prefers-reduced-motion: reduce) { .achievement-celebration, .achievement-celebration__card { transition: none; }.achievement-celebration__fireworks { display: none; }.achievement-celebration__backdrop { background: radial-gradient(circle at 50% 38%, var(--theme-accent, #ff7b95), #28062f 74%); } }

/* Profile settings: one calm workspace instead of a long form with an obstructive action bar. */
.profile-settings-page {
  --profile-ink: #241846;
  --profile-muted: #786b80;
  --profile-line: #eadbe6;
  --profile-soft: var(--theme-soft, #fff8fb);
  --profile-accent: var(--theme-accent, #ff7b95);
  width: min(100%, 1280px);
  max-width: 1280px !important;
  padding: 48px 34px 76px !important;
  color: var(--profile-ink);
}
.profile-settings-page[data-profile-theme="violet"] { --profile-accent: var(--theme-accent, #ff7b95); --profile-soft: #f5f1ff; }
.profile-settings-page[data-profile-theme="coral"] { --profile-accent: #e6725b; --profile-soft: #fff3ef; }
.profile-settings-page[data-profile-theme="blue"] { --profile-accent: #3475c8; --profile-soft: #eff7ff; }
.profile-settings-page * { font-family: "Evolventa", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.profile-settings-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(246px, 310px); gap: clamp(24px, 5vw, 70px); align-items: center; padding-bottom: 30px; border-bottom: 1px solid var(--profile-line); }
.profile-settings-hero__identity { min-width: 0; display: flex; align-items: center; gap: 18px; }
.profile-settings-hero .eyebrow { margin: 0 0 7px; color: var(--profile-accent); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.profile-settings-hero h1 { margin: 0; color: var(--profile-ink); font-size: clamp(40px, 5vw, 62px) !important; font-weight: 800; letter-spacing: -.055em !important; line-height: .94; text-wrap: balance; }
.profile-settings-hero__identity > div:last-child > p:last-child { max-width: 620px; margin: 11px 0 0; color: var(--profile-muted); font-size: 15px; line-height: 1.48; text-wrap: pretty; }
.profile-settings-hero__avatar { flex: 0 0 auto; }
.avatar--hero { width: 86px; height: 86px; background: var(--profile-accent); color: #fff; font-size: 34px; box-shadow: 0 7px 15px rgb(254 43 133 / 16%); }
.profile-visibility-summary { min-width: 0; padding: 18px; display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 0 11px; border: 1px solid var(--profile-line); border-radius: var(--radius-lg); background: var(--theme-surface, #fff); }
.profile-visibility-summary__dot { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--profile-accent); box-shadow: 0 0 0 4px var(--profile-soft); }
.profile-visibility-summary strong { color: var(--profile-ink); font-size: 14px; font-weight: 800; }
.profile-visibility-summary p { margin: 4px 0 0; color: var(--profile-muted); font-size: 12px; line-height: 1.42; }
.profile-public-link, .profile-preview-card > a { grid-column: 2; width: max-content; max-width: 100%; margin-top: 14px; display: inline-flex; align-items: center; gap: 7px; color: var(--profile-accent); font-size: 12px; font-weight: 800; text-decoration: none; }
.profile-public-link svg, .profile-preview-card > a svg { width: 15px; height: 15px; }
.profile-settings-page[data-profile-visibility="private"] [data-profile-public-link] { display: none; }
.profile-settings-form { display: block; }
.profile-settings-nav { margin: 24px 0; padding: 5px; display: flex; align-items: center; gap: 3px; overflow-x: auto; border: 1px solid var(--profile-line); border-radius: var(--radius-pill); background: var(--theme-surface, #fff); scrollbar-width: none; }
.profile-settings-nav::-webkit-scrollbar { display: none; }
.profile-settings-nav a { min-height: 34px; padding: 7px 12px; display: inline-flex; align-items: center; border-radius: var(--radius-pill); color: var(--profile-muted); font-size: 12px; font-weight: 800; text-decoration: none; white-space: nowrap; transition: background-color 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease); }
.profile-settings-nav a:hover, .profile-settings-nav a:focus-visible { background: var(--profile-soft); color: var(--profile-accent); outline: 0; }
.profile-settings-nav a:active { transform: scale(.97); }
.profile-settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(248px, 288px); gap: 20px; align-items: start; }
.profile-settings-main { min-width: 0; display: grid; gap: 16px; }
.profile-panel { padding: 25px; border: 1px solid var(--profile-line); border-radius: var(--radius-lg); background: rgb(255 255 255 / 88%); }
.profile-panel__header { margin-bottom: 21px; }
.profile-panel__header h2 { margin: 0; color: var(--profile-ink); font-size: 22px !important; font-weight: 800; letter-spacing: -.04em !important; line-height: 1.06; }
.profile-panel__header p { max-width: 620px; margin: 7px 0 0; color: var(--profile-muted); font-size: 13px; line-height: 1.45; text-wrap: pretty; }
.profile-identity-editor { grid-template-columns: 152px minmax(0, 1fr); gap: 24px; }
.avatar-editor { padding: 15px; display: grid; justify-items: start; gap: 11px; border-radius: var(--radius-md); background: var(--profile-soft); }
.avatar--editor { width: 112px; height: 112px; border: 0; background: var(--profile-accent); color: #fff; font-size: 42px; }
.avatar-editor__control { min-height: 32px; padding: 5px 0; color: var(--profile-accent); font-size: 12px; font-weight: 800; }
.avatar-editor__control span { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.avatar-editor > small { max-width: 122px; color: var(--profile-muted); font-size: 10px; line-height: 1.42; }
.profile-settings-page .form-stack { gap: 14px; }
.profile-settings-page .form-stack > label, .profile-select-field { display: grid; gap: 7px; color: var(--profile-ink); font-size: 12px; font-weight: 800; }
.profile-settings-page input:not([type="radio"]):not([type="checkbox"]), .profile-settings-page textarea, .profile-settings-page select { min-height: 46px; border: 1px solid var(--profile-line); border-radius: var(--radius-sm); background: var(--theme-background, #fffdfd); color: var(--profile-ink); box-shadow: none; font-size: 14px; transition: border-color 180ms var(--ease), background-color 180ms var(--ease); }
.profile-settings-page textarea { min-height: 100px; padding-top: 11px; resize: vertical; }
.profile-settings-page input:not([type="radio"]):not([type="checkbox"]):focus, .profile-settings-page textarea:focus, .profile-settings-page select:focus { border-color: var(--profile-accent); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--profile-accent) 12%, transparent); }
.profile-settings-page input[readonly] { color: var(--profile-muted); background: #faf8f9; cursor: default; }
.profile-settings-page .handle-field { border-color: var(--profile-line); border-radius: var(--radius-sm); background: var(--theme-background, #fffdfd); }
.profile-settings-page .handle-field > span { padding-left: 13px; color: var(--profile-muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.profile-settings-page .handle-field input[name="publicHandle"],
html[data-app-theme] .app-shell .profile-settings-page .handle-field input[name="publicHandle"] { min-width: 0; min-height: 44px; padding-left: 8px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.profile-settings-page .handle-field input[name="publicHandle"]:focus,
html[data-app-theme] .app-shell .profile-settings-page .handle-field input[name="publicHandle"]:focus { border: 0; box-shadow: none; }
.profile-settings-page .handle-field:focus-within { border-color: var(--profile-accent); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--profile-accent) 12%, transparent); }
.profile-settings-page .field-hint { margin: 0; color: var(--profile-muted); font-size: 10px; font-weight: 500; line-height: 1.35; }
.profile-visibility-picker { min-width: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; border: 0; }
.profile-visibility-picker legend { width: 100%; margin-bottom: 11px; padding: 0; color: var(--profile-ink); font-size: 13px; font-weight: 800; }
.profile-visibility-picker > label { position: relative; min-height: 118px; padding: 15px; display: block; overflow: hidden; border: 1px solid var(--profile-line); border-radius: var(--radius-md); background: var(--theme-surface, #fff); cursor: pointer; transition: border-color 180ms var(--ease), background-color 180ms var(--ease), transform 180ms var(--ease); }
.profile-visibility-picker > label:hover { transform: translateY(-1px); }
.profile-visibility-picker input, .profile-share-row input { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.profile-visibility-picker > label:has(input:checked) { border-color: var(--profile-accent); background: var(--profile-soft); }
.profile-visibility-picker > label > span { display: grid; gap: 6px; }
.profile-visibility-picker strong { color: var(--profile-ink); font-size: 14px; font-weight: 800; }
.profile-visibility-picker small { color: var(--profile-muted); font-size: 11px; font-weight: 500; line-height: 1.4; }
.profile-privacy-note { margin: 16px 0; padding: 12px 14px; display: grid; gap: 3px; border-radius: var(--radius-sm); background: #f8f6f7; color: var(--profile-muted); font-size: 11px; line-height: 1.42; }
.profile-privacy-note strong { color: var(--profile-ink); font-size: 12px; }
.profile-share-list { display: grid; border-top: 1px solid var(--profile-line); }
.profile-share-row { position: relative; min-height: 72px; display: grid; grid-template-columns: minmax(0, 1fr) 42px; align-items: center; gap: 14px; border-bottom: 1px solid var(--profile-line); cursor: pointer; }
.profile-share-row > span { display: grid; gap: 3px; }
.profile-share-row strong { color: var(--profile-ink); font-size: 13px; font-weight: 800; }.profile-share-row small { color: var(--profile-muted); font-size: 11px; line-height: 1.38; }
.profile-toggle { width: 38px; height: 22px; position: relative; display: block; border-radius: var(--radius-pill); background: #ddd4da; transition: background-color 180ms var(--ease); }
.profile-toggle::before { position: absolute; width: 16px; height: 16px; top: 3px; left: 3px; border-radius: 50%; background: var(--theme-surface, #fff); box-shadow: 0 1px 3px rgb(35 20 38 / 18%); content: ""; transition: transform 180ms var(--ease); }
.profile-share-row input:checked + .profile-toggle { background: var(--profile-accent); }.profile-share-row input:checked + .profile-toggle::before { transform: translateX(16px); }
.profile-share-row:has(input:focus-visible) .profile-toggle, .profile-visibility-picker > label:has(input:focus-visible) { outline: 2px solid var(--profile-accent); outline-offset: 3px; }
.profile-theme-options { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.profile-theme-option { min-height: 116px; padding: 12px; display: grid; grid-template-columns: 26px minmax(0, 1fr); align-content: start; gap: 10px; border-color: var(--profile-line); border-radius: var(--radius-md); background: var(--theme-surface, #fff); }
.profile-theme-option:hover { border-color: var(--profile-choice, var(--profile-accent)); }.profile-theme-option__swatch { width: 24px; height: 24px; }.profile-theme-option strong { color: var(--profile-ink); font-size: 12px; }.profile-theme-option small { color: var(--profile-muted); font-size: 10px; line-height: 1.35; }
.profile-panel--palette { display: flex; align-items: end; justify-content: space-between; gap: 24px; }.profile-panel--palette .profile-panel__header { margin: 0; }.profile-select-field { width: min(100%, 260px); flex: 0 0 260px; }
.profile-settings-aside { position: sticky; top: 20px; display: grid; gap: 14px; }
.profile-preview-card, .profile-help-card { padding: 20px; border: 1px solid var(--profile-line); border-radius: var(--radius-lg); background: var(--theme-surface, #fff); }
.profile-preview-card { background: linear-gradient(145deg, var(--profile-soft), var(--theme-surface, #fff) 68%); }.profile-preview-card > p { margin: 0 0 17px; color: var(--profile-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.profile-preview-card__identity { display: flex; align-items: center; gap: 11px; }.avatar--preview { width: 52px; height: 52px; background: var(--profile-accent); color: #fff; font-size: 20px; }.profile-preview-card__identity > div:last-child { min-width: 0; display: grid; gap: 3px; }.profile-preview-card__identity strong { overflow: hidden; color: var(--profile-ink); font-size: 15px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }.profile-preview-card__identity span { overflow: hidden; color: var(--profile-accent); font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.profile-preview-card__state { margin-top: 17px; padding-top: 13px; display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--profile-line); }.profile-preview-card__state > span { width: 8px; height: 8px; border-radius: 50%; background: var(--profile-accent); }.profile-preview-card__state b { color: var(--profile-ink); font-size: 11px; font-weight: 800; }.profile-preview-card > a { margin-top: 14px; }
.profile-help-card { background: #faf9f9; }.profile-help-card strong { color: var(--profile-ink); font-size: 13px; font-weight: 800; }.profile-help-card p { margin: 6px 0 0; color: var(--profile-muted); font-size: 11px; line-height: 1.43; }
.profile-settings-form .settings-actions { position: static; inset: auto; z-index: auto; margin-top: 20px; padding: 18px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 0; border-top: 1px solid var(--profile-line); border-radius: 0; background: transparent; box-shadow: none; }.profile-settings-form .settings-actions > div:first-child { display: grid; gap: 3px; }.profile-settings-form .settings-actions strong { color: var(--profile-ink); font-size: 13px; font-weight: 800; }.profile-settings-form .settings-actions span { color: var(--profile-muted); font-size: 11px; }.profile-settings-form .settings-actions > div:last-child { display: flex; align-items: center; gap: 8px; }.profile-settings-form .settings-actions .button { min-height: 46px; padding: 10px 17px; border-radius: var(--radius-pill); }.profile-settings-form .settings-actions .button--ghost { border-color: var(--profile-line); background: transparent; color: var(--profile-muted); }
@media (max-width: 1020px) { .profile-settings-layout { grid-template-columns: 1fr; }.profile-settings-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }.profile-theme-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .profile-settings-page { padding: 27px 16px 96px !important; }.profile-settings-hero { grid-template-columns: 1fr; gap: 17px; padding-bottom: 23px; }.profile-settings-hero__identity { align-items: flex-start; gap: 13px; }.avatar--hero { width: 60px; height: 60px; font-size: 25px; }.profile-settings-hero h1 { font-size: 39px !important; }.profile-settings-hero__identity > div:last-child > p:last-child { margin-top: 8px; font-size: 13px; }.profile-visibility-summary { padding: 14px; border-radius: var(--radius-md); }.profile-settings-nav { margin: 17px -2px; }.profile-settings-nav a { min-height: 32px; padding: 6px 11px; }.profile-panel { padding: 18px; border-radius: var(--radius-md); }.profile-panel__header { margin-bottom: 17px; }.profile-panel__header h2 { font-size: 20px !important; }.profile-panel__header p { font-size: 12px; }.profile-identity-editor { grid-template-columns: 1fr; gap: 17px; }.avatar-editor { grid-template-columns: 86px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 13px; }.avatar--editor { width: 80px; height: 80px; grid-row: span 2; font-size: 30px; }.avatar-editor > small { max-width: none; }.profile-settings-page .form-stack { gap: 12px; }.profile-settings-page input:not([type="radio"]):not([type="checkbox"]), .profile-settings-page textarea, .profile-settings-page select { min-height: 44px; }.profile-visibility-picker { grid-template-columns: 1fr; }.profile-visibility-picker > label { min-height: 0; }.profile-share-row { min-height: 76px; }.profile-theme-options { grid-template-columns: 1fr; }.profile-theme-option { min-height: 78px; align-items: center; }.profile-panel--palette { display: grid; gap: 16px; }.profile-select-field { width: 100%; flex: initial; }.profile-settings-aside { grid-template-columns: 1fr; }.profile-preview-card, .profile-help-card { padding: 17px; border-radius: var(--radius-md); }.profile-settings-form .settings-actions { align-items: stretch; flex-direction: column; gap: 14px; }.profile-settings-form .settings-actions > div:last-child { display: grid; grid-template-columns: 1fr 92px; }.profile-settings-form .settings-actions .button { width: 100%; padding-inline: 12px; }.profile-settings-form .settings-actions .button--ghost { min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .profile-settings-page *, .profile-settings-page *::before, .profile-settings-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }

/* The native file picker stays the actual control, placed transparently over its branded label. */
.profile-settings-page .avatar-editor__control { position: relative; overflow: hidden; }
.profile-settings-page .avatar-editor__control input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; pointer-events: auto; cursor: pointer; }

/* Site typography: Inter for text, Helvetica Neue for headings. */
body :is(h1, h2, h3, h4, h5, h6, [role="heading"]),
body :is(h1, h2, h3, h4, h5, h6, [role="heading"]) * {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* Keep book covers clean in the catalog and collection. */
.catalog-book-card__cover { background: transparent; }
.shelf-book__cover::before,
.collection-book__cover::before { content: none; }
.shelf-book__artwork,
.collection-book__artwork { display: none; }

/* Fill new book banners without letterbox borders. */
.book-page .book-identity--promo-art:is([data-book-art="bratz"], [data-book-art="movies"], [data-book-art="worlds"]) { background: transparent; }
.book-page .book-identity--promo-art:is([data-book-art="bratz"], [data-book-art="movies"], [data-book-art="worlds"]) > img {
  border-radius: 0;
  object-fit: cover;
  object-position: right center;
}

/* Center the add icon independently of font metrics. */
.catalog-book-card__add span { position: relative; flex-shrink: 0; font-size: 0; }
.catalog-book-card__add span::before,
.catalog-book-card__add span::after {
 content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 2px;
 border-radius: 1px; background: currentColor; transform: translate(-50%, -50%);
}
.catalog-book-card__add span::after { transform: translate(-50%, -50%) rotate(90deg); }

/* Original covers and readable title layout for the new fantasy books. */
.book-page .book-identity:is([data-book-slug="roots-stars"],[data-book-slug="shadow-whisper"]) {
 display: grid; grid-template-columns: 43% minmax(0,1fr); align-items: center; gap: 7%; padding: 7%; background: #123c3b;
}
.book-page .book-identity[data-book-slug="shadow-whisper"] { background: #3b142c; }
.book-page .book-identity:is([data-book-slug="roots-stars"],[data-book-slug="shadow-whisper"]) .book-title-lockup {
 position: static !important; grid-column: 2; grid-row: 1; margin: 0 !important; max-width: 100%; font-size: clamp(23px,7cqw,48px) !important; line-height: 1.04; color: #fff5e5; text-align: left; transform: none; overflow-wrap: normal;
}
.book-page .book-identity:is([data-book-slug="roots-stars"],[data-book-slug="shadow-whisper"]) .book-identity__cover {
 position: static; grid-column: 1; grid-row: 1; width: 100%; max-height: none; height: auto; aspect-ratio: auto; border: 5px solid #fff5e5; border-radius: 24px; box-shadow: -5px 7px 0 var(--theme-accent, #ff7b95); transform: rotate(-3deg);
}
.book-page .book-identity:is([data-book-slug="roots-stars"],[data-book-slug="shadow-whisper"]) .book-identity__sparkles { width: 40px; right: 7%; bottom: 7%; }

.book-page .book-identity--promo-art:is([data-book-art="roots-stars"],[data-book-art="shadow-whisper"],[data-book-art="girl-power"],[data-book-art="vampire-diaries"],[data-book-art="portal-v-detstvo"],[data-book-art="anime"]) { background: transparent; }
.book-page .book-identity--promo-art:is([data-book-art="roots-stars"],[data-book-art="shadow-whisper"],[data-book-art="girl-power"],[data-book-art="vampire-diaries"],[data-book-art="portal-v-detstvo"],[data-book-art="anime"]) > img { border-radius: 0; object-fit: cover; object-position: right center; }

/* Compact illustrated empty states, with useful contextual actions. */
.app-shell .empty-state { min-height: 240px; margin: 0; padding: 36px 48px; display: flex; align-items: center; justify-content: center; gap: 36px; border: 1px solid #efdfeb; border-radius: 36px; background: #fffafd; text-align: left; box-shadow: 0 6px 24px rgb(78 33 71 / 3%); }
.empty-state__art { width: 180px; flex: 0 0 180px; }
.empty-state__art svg { width: 100%; height: auto; display: block; }
.empty-state__copy { max-width: 490px; min-width: 0; }
.app-shell .empty-state h2 { margin: 0 0 12px; font-size: 28px !important; line-height: 1.16; letter-spacing: -.025em !important; color: var(--theme-strong, #45173e); }
.app-shell .empty-state p { max-width: 470px; margin: 0; color: var(--theme-muted, #715b6c); font-size: 15px; line-height: 1.6; }
.empty-state__actions { margin-top: 23px; display: flex; align-items: center; flex-wrap: wrap; gap: 15px 20px; }
.app-shell .empty-state .button { margin: 0; min-height: 44px; padding: 11px 20px; background: var(--theme-action, #ff7b95); border-color: var(--theme-accent, #ff7b95); color: #fff; font-size: 14px; }
.empty-state__secondary { color: var(--theme-accent, #ff7b95); font-size: 13px; font-weight: 650; text-underline-offset: 4px; }
.empty-state__secondary:hover { text-decoration: underline; }
.app-shell .favorites-empty-state { min-height: 240px; padding: 36px 48px; border-radius: 36px; gap: 32px; }
.app-shell .favorites-empty-state h2 { font-size: 28px !important; }
@media(max-width:767px) { .app-shell .empty-state { min-height: 0; padding: 28px 22px; gap: 18px; flex-direction: column; text-align: center; border-radius: 28px; } .empty-state__art { width: 134px; flex-basis: auto; } .app-shell .empty-state h2 { font-size: 24px !important; } .app-shell .empty-state p { font-size: 14px; } .empty-state__actions { justify-content: center; gap: 14px; margin-top: 20px; } .app-shell .favorites-empty-state { padding: 28px 22px; border-radius: 28px; } }

/* Empty states sit directly on the page. */
.app-shell .empty-state, .app-shell .catalog-page .empty-state, .app-shell .favorites-empty-state { background: transparent; border: 0; box-shadow: none; }

/* Ownership is quiet metadata rather than a badge. */
.catalog-book-card .catalog-book-card__topline { min-height: 22px; justify-content: flex-start; }
.catalog-book-card .catalog-book-card__owned { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #6e5b6b; font-size: 12px; font-weight: 500; line-height: 1.5; }
.catalog-book-card__owned svg { width: 15px; height: 15px; flex: 0 0 15px; color: #976381; }

/* Plain page background. */
.ambient-background { display: none; }
.page-shell { background: var(--theme-surface, #fff); }

/* Typography: Manrope Medium headings and Inter Regular body. */
@font-face { font-family: Manrope; src: url('/assets/fonts/manrope/Manrope-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
body, body * { font-family: 'Inter Variable', Inter, sans-serif !important; font-weight: 400 !important; letter-spacing: -.03em !important; }
body :is(h1,h2,h3,h4,h5,h6,[role="heading"]), body :is(h1,h2,h3,h4,h5,h6,[role="heading"]) * { font-family: Manrope, sans-serif !important; font-weight: 500 !important; letter-spacing: -.08em !important; font-style: normal !important; text-transform: lowercase !important; }
body :is(h1,h2,h3,h4,h5,h6)[data-book-title], body :is(h1,h2,h3,h4,h5,h6)[data-book-title] * { text-transform: none !important; }

/* Simple collection tabs with immediate selected feedback. */
.app-shell :is(.collection-library__switch,.catalog-switch) { display: flex; width: auto; gap: 28px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.app-shell :is(.collection-library__switch,.catalog-switch) > a { position: relative; display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 8px 0 12px; border: 0; border-radius: 0; background: transparent; color: #796778; font-size: 15px; text-decoration: none; transition: color 120ms ease; }
.app-shell :is(.collection-library__switch,.catalog-switch) > a::after { position: absolute; content: ''; height: 2px; left: 0; right: 0; bottom: 0; background: transparent; }
.app-shell :is(.collection-library__switch,.catalog-switch) > a[aria-current="page"] { color: var(--theme-strong, #45173e); }
.app-shell :is(.collection-library__switch,.catalog-switch) > a[aria-current="page"]::after { background: var(--theme-accent, #ff7b95); }
.app-shell :is(.collection-library__switch,.catalog-switch) > a:hover { color: var(--theme-accent, #ff7b95); }
.app-shell :is(.collection-library__switch,.catalog-switch) > a:focus-visible { outline: 2px solid var(--theme-accent, #ff7b95); outline-offset: 5px; }
@media(max-width:767px) { .app-shell :is(.collection-library__switch,.catalog-switch) { gap: 24px; align-self: flex-start; } }

/* Compact progress figures */
body .collection-progress__score { letter-spacing: -.08em !important; }
body .collection-progress__summary > strong b { letter-spacing: -.06em !important; }

/* Compact cover-first catalog */
.catalog-book-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 22px; }
.catalog-book-grid .catalog-book-card { padding: 0; display: flex; flex-direction: column; gap: 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none; }
.catalog-book-grid .catalog-book-card:hover { box-shadow: none; transform: none; }
.catalog-book-grid .catalog-book-card__cover { width: 100%; aspect-ratio: 3 / 4; min-height: 0; padding: 0; display: block; border-radius: 24px; background: transparent; }
.catalog-book-grid .catalog-book-card__cover img { width: 100%; max-width: 100%; height: 100%; max-height: none; min-height: 0; border: 0; border-radius: 24px; object-fit: cover; box-shadow: none; }
.catalog-book-grid .catalog-book-card:hover .catalog-book-card__cover img { transform: none; }
.catalog-book-grid .catalog-book-card__body { min-height: 0; flex: 1; }
.catalog-book-grid .catalog-book-card__topline { min-height: 18px; }
.catalog-book-grid .catalog-book-card h3 { margin: 5px 0 6px; font-size: 22px !important; line-height: 1.15; text-wrap: initial; }
.catalog-book-grid .catalog-book-card__body > p { font-size: 12px; line-height: 1.4; -webkit-line-clamp: 2; }
.catalog-book-grid .catalog-book-card__footer { margin-top: auto; padding-top: 12px; flex-direction: column; align-items: flex-start; gap: 6px; }
.catalog-book-grid .catalog-book-card__action { padding: 6px 0; }
.catalog-book-grid .catalog-book-card__add { width: 100%; min-height: 40px; padding: 8px 10px; font-size: 12px; }
@media (min-width: 1440px) { .catalog-book-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .catalog-book-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 18px; } }
@media (max-width: 767px) {
 .catalog-book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
 .catalog-book-grid .catalog-book-card { gap: 9px; }
 .catalog-book-grid .catalog-book-card__cover, .catalog-book-grid .catalog-book-card__cover img { border-radius: 18px; }
 .catalog-book-grid .catalog-book-card h3 { font-size: 19px !important; }
 .catalog-book-grid .catalog-book-card__body > p { font-size: 11px; }
 .catalog-book-grid .catalog-book-card__add { white-space: normal; font-size: 11px; }
 .catalog-book-grid .catalog-book-card__count { font-size: 11px; }
}

.collection-book-grid .collection-book, .collection-book-grid .collection-book:hover { border: 0; box-shadow: none; background: transparent; }

.home-dashboard .shelf-book, .home-dashboard .shelf-book:hover, .home-dashboard .add-book-card, .home-dashboard .add-book-card:hover { border: 0; box-shadow: none; background: transparent; }

.home-dashboard .add-book-card { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; color: var(--theme-muted, #80647b); text-align: left; }
.home-dashboard .add-book-card__plus { width: 24px; height: 24px; flex: 0 0 24px; }
.home-dashboard .add-book-card strong { font-size: 15px; line-height: 1.3; }
.home-dashboard .add-book-card:hover { color: var(--theme-accent, #ff7b95); }
.home-dashboard .add-book-card:focus-visible { outline: 2px solid var(--theme-accent, #ff7b95); outline-offset: 4px; }

.home-dashboard .collection-progress { min-height: 0; height: auto; align-self: start; grid-template-rows: auto; gap: 0; padding-bottom: 28px; }
.home-dashboard .collection-progress__body { margin-top: 0; }

.favorites-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 22px; }
.favorite-gallery-card__media { border: 0; border-radius: 24px; }
.favorite-gallery-card__caption { padding-top: 10px; }
@media (min-width: 1440px) { .favorites-gallery { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .favorites-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 18px; } }
@media (max-width: 767px) { .favorites-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; } .favorite-gallery-card__media { border-radius: 18px; } }

.home-dashboard .next-reward { min-height: 0; height: auto; align-self: start; align-content: start; grid-template-rows: auto auto; gap: 16px 18px; padding-bottom: 22px; }
.home-dashboard .next-reward > a { margin-top: 0; align-self: start; }

body .favorite-button { display: inline-grid; place-items: center; padding: 0; line-height: 0; }
body .favorite-button svg { display: block; margin: 0; flex-shrink: 0; }

.shelf-heading-actions { display: flex; align-items: center; gap: 24px; }
.home-dashboard .shelf-heading-actions .shelf-add-link { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; color: var(--theme-muted, #80647b); font-size: 13px; }
.shelf-add-link .add-book-card__plus { width: 18px; height: 18px; flex: 0 0 18px; }
.home-dashboard .shelf-heading-actions .shelf-add-link:hover { color: var(--theme-accent, #ff7b95); }
@media (max-width: 767px) { .shelf-section .dashboard-section__heading { flex-wrap: wrap; gap: 8px; } .shelf-heading-actions { gap: 18px; flex-wrap: wrap; } }

.app-shell .app-topnav { gap: 32px; }
.app-shell .app-topnav .nav-item { min-height: 48px; padding: 12px 0; gap: 0; background: transparent; border: 0; border-radius: 0; font-size: 16px; color: var(--theme-muted, #80647b); }
.app-shell .app-topnav .nav-item.is-active { color: var(--theme-strong, #3e123d); }
.app-shell .app-topnav .nav-item::after { left: 0; right: 0; height: 2px; bottom: 0; background: var(--theme-accent, #ff7b95); }
.app-shell .bottom-nav .nav-item { justify-content: center; gap: 0; background: transparent; border-radius: 0; font-size: 12px; }
.app-shell .bottom-nav .nav-item.is-active { color: var(--theme-strong, #3e123d); background: transparent; }
@media (min-width: 768px) and (max-width: 1000px) { .app-shell .app-topnav { gap: 18px; } .app-shell .app-topnav .nav-item { font-size: 14px; } }

.app-shell .app-topnav .nav-item::after { opacity: 0; transform: none; }
.app-shell .app-topnav .nav-item.is-active::after { opacity: 1; }
.collection-library__switch, .catalog-switch { display: none !important; }

.home-dashboard .favorite-card { height: auto; grid-template-rows: auto auto; align-content: start; gap: 10px; }
.home-dashboard .favorite-media { height: auto; aspect-ratio: 16 / 11; }

.app-shell .app-topnav .nav-item::after { left: -14px; right: -14px; top: 4px; bottom: 4px; width: auto; height: auto; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODAgNjAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzPjxmaWx0ZXIgaWQ9InJvdWdoIiB4PSItMTAlIiB5PSItMjAlIiB3aWR0aD0iMTIwJSIgaGVpZ2h0PSIxNDAlIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjEzIiBudW1PY3RhdmVzPSIyIiBzZWVkPSI3Ii8+PGZlRGlzcGxhY2VtZW50TWFwIGluPSJTb3VyY2VHcmFwaGljIiBzY2FsZT0iMS44Ii8+PC9maWx0ZXI+PC9kZWZzPjxwYXRoIGQ9Ik0xMTEgNTRDMTU0IDUzIDE3NyAzOCAxNzEgMjJDMTY2IDcgMTI2IDMgODcgNUM0NSA1IDkgMTMgNyAyOUM1IDQ1IDM2IDU0IDcwIDUzIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZjdiOTUiIHN0cm9rZS13aWR0aD0iMi42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIGZpbHRlcj0idXJsKCNyb3VnaCkiLz48cGF0aCBkPSJNMTMgMjJDMjUgMTAgNTggNiA5MiA2IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZjdiOTUiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iLjY1Ii8+PC9zdmc+") center / 100% 100% no-repeat; }
.app-shell .bottom-nav .nav-item::after { left: 5px; right: 5px; top: 7px; bottom: 7px; height: auto; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODAgNjAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzPjxmaWx0ZXIgaWQ9InJvdWdoIiB4PSItMTAlIiB5PSItMjAlIiB3aWR0aD0iMTIwJSIgaGVpZ2h0PSIxNDAlIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjEzIiBudW1PY3RhdmVzPSIyIiBzZWVkPSI3Ii8+PGZlRGlzcGxhY2VtZW50TWFwIGluPSJTb3VyY2VHcmFwaGljIiBzY2FsZT0iMS44Ii8+PC9maWx0ZXI+PC9kZWZzPjxwYXRoIGQ9Ik0xMTEgNTRDMTU0IDUzIDE3NyAzOCAxNzEgMjJDMTY2IDcgMTI2IDMgODcgNUM0NSA1IDkgMTMgNyAyOUM1IDQ1IDM2IDU0IDcwIDUzIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZjdiOTUiIHN0cm9rZS13aWR0aD0iMi42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIGZpbHRlcj0idXJsKCNyb3VnaCkiLz48cGF0aCBkPSJNMTMgMjJDMjUgMTAgNTggNiA5MiA2IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZjdiOTUiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iLjY1Ii8+PC9zdmc+") center / 100% 100% no-repeat; opacity: 0; }
.app-shell .bottom-nav .nav-item.is-active::after { opacity: 1; }

/* Individual hand-drawn navigation strokes */
.app-shell .app-topnav .nav-item[href="/app/collection"]::after { left: -16px; right: -13px; transform: rotate(-4deg); background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODAgNjAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzPjxmaWx0ZXIgaWQ9InIiIHg9Ii0xMCUiIHk9Ii0yMCUiIHdpZHRoPSIxMjAlIiBoZWlnaHQ9IjE0MCUiPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIuMTUiIG51bU9jdGF2ZXM9IjIiIHNlZWQ9IjQiLz48ZmVEaXNwbGFjZW1lbnRNYXAgaW49IlNvdXJjZUdyYXBoaWMiIHNjYWxlPSIyLjMiLz48L2ZpbHRlcj48L2RlZnM+PHBhdGggZD0iTTEyMiA1MUMxNjIgNDUgMTc4IDI5IDE2NCAxNkMxNDggMiAxMDQgNCA2OCA5QzI5IDE0IDQgMjYgMTAgNDBDMTYgNTMgNDcgNTcgNzkgNTIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmN2I5NSIgc3Ryb2tlLXdpZHRoPSIyLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZmlsdGVyPSJ1cmwoI3IpIi8+PC9zdmc+"); }
.app-shell .bottom-nav .nav-item[href="/app/collection"]::after { transform: rotate(-4deg); background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODAgNjAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzPjxmaWx0ZXIgaWQ9InIiIHg9Ii0xMCUiIHk9Ii0yMCUiIHdpZHRoPSIxMjAlIiBoZWlnaHQ9IjE0MCUiPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIuMTUiIG51bU9jdGF2ZXM9IjIiIHNlZWQ9IjQiLz48ZmVEaXNwbGFjZW1lbnRNYXAgaW49IlNvdXJjZUdyYXBoaWMiIHNjYWxlPSIyLjMiLz48L2ZpbHRlcj48L2RlZnM+PHBhdGggZD0iTTEyMiA1MUMxNjIgNDUgMTc4IDI5IDE2NCAxNkMxNDggMiAxMDQgNCA2OCA5QzI5IDE0IDQgMjYgMTAgNDBDMTYgNTMgNDcgNTcgNzkgNTIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmN2I5NSIgc3Ryb2tlLXdpZHRoPSIyLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZmlsdGVyPSJ1cmwoI3IpIi8+PC9zdmc+"); }
.app-shell .app-topnav .nav-item[href="/app/collection/catalog"]::after { left: -12px; right: -15px; transform: rotate(3deg); background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODAgNjAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzPjxmaWx0ZXIgaWQ9InIiIHg9Ii0xMCUiIHk9Ii0yMCUiIHdpZHRoPSIxMjAlIiBoZWlnaHQ9IjE0MCUiPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIuMTUiIG51bU9jdGF2ZXM9IjIiIHNlZWQ9IjExIi8+PGZlRGlzcGxhY2VtZW50TWFwIGluPSJTb3VyY2VHcmFwaGljIiBzY2FsZT0iMi4zIi8+PC9maWx0ZXI+PC9kZWZzPjxwYXRoIGQ9Ik02MyA1M0MyNiA1NCA1IDQxIDkgMjVDMTQgOCA1NCAzIDk2IDVDMTM5IDcgMTc0IDE4IDE3MCAzNUMxNjggNDUgMTUxIDUxIDEzMCA1MiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmY3Yjk1IiBzdHJva2Utd2lkdGg9IjIuNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBmaWx0ZXI9InVybCgjcikiLz48L3N2Zz4="); }
.app-shell .bottom-nav .nav-item[href="/app/collection/catalog"]::after { transform: rotate(3deg); background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODAgNjAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzPjxmaWx0ZXIgaWQ9InIiIHg9Ii0xMCUiIHk9Ii0yMCUiIHdpZHRoPSIxMjAlIiBoZWlnaHQ9IjE0MCUiPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIuMTUiIG51bU9jdGF2ZXM9IjIiIHNlZWQ9IjExIi8+PGZlRGlzcGxhY2VtZW50TWFwIGluPSJTb3VyY2VHcmFwaGljIiBzY2FsZT0iMi4zIi8+PC9maWx0ZXI+PC9kZWZzPjxwYXRoIGQ9Ik02MyA1M0MyNiA1NCA1IDQxIDkgMjVDMTQgOCA1NCAzIDk2IDVDMTM5IDcgMTc0IDE4IDE3MCAzNUMxNjggNDUgMTUxIDUxIDEzMCA1MiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmY3Yjk1IiBzdHJva2Utd2lkdGg9IjIuNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBmaWx0ZXI9InVybCgjcikiLz48L3N2Zz4="); }
.app-shell .app-topnav .nav-item[href="/app/achievements"]::after { left: -15px; right: -11px; transform: rotate(-2deg); background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODAgNjAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzPjxmaWx0ZXIgaWQ9InIiIHg9Ii0xMCUiIHk9Ii0yMCUiIHdpZHRoPSIxMjAlIiBoZWlnaHQ9IjE0MCUiPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIuMTUiIG51bU9jdGF2ZXM9IjIiIHNlZWQ9IjIzIi8+PGZlRGlzcGxhY2VtZW50TWFwIGluPSJTb3VyY2VHcmFwaGljIiBzY2FsZT0iMi4zIi8+PC9maWx0ZXI+PC9kZWZzPjxwYXRoIGQ9Ik0xMTIgNTVDMTUzIDU2IDE3NyA0NSAxNzMgMjhDMTY5IDEzIDEzNSA1IDkyIDRDNTEgMiAxMyA5IDggMjRDNCAzNiAyMiA0NyA0OCA1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmY3Yjk1IiBzdHJva2Utd2lkdGg9IjIuNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBmaWx0ZXI9InVybCgjcikiLz48L3N2Zz4="); }
.app-shell .bottom-nav .nav-item[href="/app/achievements"]::after { transform: rotate(-2deg); background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODAgNjAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzPjxmaWx0ZXIgaWQ9InIiIHg9Ii0xMCUiIHk9Ii0yMCUiIHdpZHRoPSIxMjAlIiBoZWlnaHQ9IjE0MCUiPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIuMTUiIG51bU9jdGF2ZXM9IjIiIHNlZWQ9IjIzIi8+PGZlRGlzcGxhY2VtZW50TWFwIGluPSJTb3VyY2VHcmFwaGljIiBzY2FsZT0iMi4zIi8+PC9maWx0ZXI+PC9kZWZzPjxwYXRoIGQ9Ik0xMTIgNTVDMTUzIDU2IDE3NyA0NSAxNzMgMjhDMTY5IDEzIDEzNSA1IDkyIDRDNTEgMiAxMyA5IDggMjRDNCAzNiAyMiA0NyA0OCA1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmY3Yjk1IiBzdHJva2Utd2lkdGg9IjIuNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBmaWx0ZXI9InVybCgjcikiLz48L3N2Zz4="); }

/* Warm neutral page background */
html, body, .app-shell, .app-canvas, .app-shell .main-content, .app-shell .page, .page-shell { background: var(--theme-background, #F6F4F1); }
.app-shell .app-topbar { background: var(--theme-background, #F6F4F1); }
.app-shell .bottom-nav { background: var(--theme-background, #F6F4F1); }

/* Wide illustrated posters for the imported books, using the exact published covers. */
.book-page .book-identity:is([data-book-slug="animals"], [data-book-slug="swan-princess"], [data-book-slug="tom-and-jerry"], [data-book-slug="avatar-aang"]) {
  --book-poster-ink: #5b3d2b;
  --book-poster-shadow: none;
  --book-poster-title-size: 39px;
  display: grid;
  grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  align-items: center;
  gap: 0;
  padding: clamp(20px, 5cqw, 40px);
  background: #ead6b6 url("/assets/home/animals-hero-backdrop-20261008.webp") center / cover no-repeat;
}
.book-page .book-identity[data-book-slug="swan-princess"] {
  --book-poster-ink: #fff2d6;
  --book-poster-shadow: 0 2px 7px rgb(6 35 88 / 70%);
  --book-poster-title-size: 32px;
  background: #164681 url("/assets/home/swan-princess-hero-backdrop-20261008.webp") center / cover no-repeat;
}
.book-page .book-identity[data-book-slug="tom-and-jerry"] {
  --book-poster-ink: #fff0cf;
  --book-poster-shadow: 0 2px 8px rgb(0 40 71 / 80%);
  --book-poster-title-size: 35px;
  background: #11699b url("/assets/home/tom-and-jerry-hero-backdrop-20261008.webp") center / cover no-repeat;
}
.book-page .book-identity[data-book-slug="avatar-aang"] {
  --book-poster-ink: #1b2b42;
  --book-poster-shadow: 0 1px 5px rgb(255 248 230 / 70%);
  --book-poster-title-size: 29px;
  background: #aec8da url("/assets/home/avatar-aang-hero-backdrop-20261008.webp") center / cover no-repeat;
}
.book-page .book-identity:is([data-book-slug="animals"], [data-book-slug="swan-princess"], [data-book-slug="tom-and-jerry"], [data-book-slug="avatar-aang"]) .book-title-lockup,
.book-page .book-identity:is([data-book-slug="animals"], [data-book-slug="swan-princess"], [data-book-slug="tom-and-jerry"], [data-book-slug="avatar-aang"])[data-title-layout="two-word-poster"] .book-title-lockup {
  position: static;
  grid-column: 2;
  grid-row: 1;
  align-items: flex-start;
  justify-self: center;
  width: 100%;
  margin: 0;
  padding-left: clamp(8px, 2cqw, 20px);
  color: var(--book-poster-ink) !important;
  text-align: left;
  text-transform: none;
  text-shadow: var(--book-poster-shadow);
  transform: none;
}
.book-page .book-identity:is([data-book-slug="animals"], [data-book-slug="swan-princess"], [data-book-slug="tom-and-jerry"], [data-book-slug="avatar-aang"]) .book-title-lockup__word,
.book-page .book-identity:is([data-book-slug="animals"], [data-book-slug="swan-princess"], [data-book-slug="tom-and-jerry"], [data-book-slug="avatar-aang"]) .book-title-lockup[data-layout="two-word-poster"] .book-title-lockup__word {
  max-width: 100%;
  margin: 0;
  color: var(--book-poster-ink) !important;
  font-size: var(--book-poster-title-size) !important;
  font-weight: 700 !important;
  line-height: 1.08;
  letter-spacing: -.03em !important;
  white-space: normal;
  overflow-wrap: normal;
}
.book-page .book-identity:is([data-book-slug="animals"], [data-book-slug="swan-princess"], [data-book-slug="tom-and-jerry"], [data-book-slug="avatar-aang"]) .book-identity__cover,
.book-page .book-identity:is([data-book-slug="swan-princess"], [data-book-slug="tom-and-jerry"], [data-book-slug="avatar-aang"])[data-title-layout="two-word-poster"] .book-identity__cover {
  position: static;
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  width: auto;
  max-width: 100%;
  height: min(76cqw, 380px);
  max-height: calc(100% - 8px);
  aspect-ratio: auto;
  object-fit: contain;
  border: 4px solid rgb(255 255 255 / 92%);
  border-radius: 10px;
  box-shadow: 0 15px 27px rgb(15 25 43 / 30%);
  transform: rotate(-3deg);
}
.book-page .book-identity:is([data-book-slug="animals"], [data-book-slug="swan-princess"], [data-book-slug="tom-and-jerry"], [data-book-slug="avatar-aang"]) .book-identity__sparkles { display: none; }
@media (max-width: 767px) {
  .book-page .book-identity:is([data-book-slug="animals"], [data-book-slug="swan-princess"], [data-book-slug="tom-and-jerry"], [data-book-slug="avatar-aang"]) {
    min-height: 300px;
    height: auto;
    aspect-ratio: 1.33;
    padding: 18px;
  }
  .book-page .book-identity:is([data-book-slug="animals"], [data-book-slug="swan-princess"], [data-book-slug="tom-and-jerry"], [data-book-slug="avatar-aang"]) .book-identity__cover { height: min(55cqw, 300px); }
}
@media (max-width: 480px) {
  .book-page .book-identity:is([data-book-slug="animals"], [data-book-slug="swan-princess"], [data-book-slug="tom-and-jerry"], [data-book-slug="avatar-aang"]) {
    min-height: 300px;
    aspect-ratio: 1.16;
    padding: 16px;
  }
  .book-page .book-identity:is([data-book-slug="animals"], [data-book-slug="swan-princess"], [data-book-slug="tom-and-jerry"], [data-book-slug="avatar-aang"]) .book-title-lockup__word,
  .book-page .book-identity:is([data-book-slug="animals"], [data-book-slug="swan-princess"], [data-book-slug="tom-and-jerry"], [data-book-slug="avatar-aang"]) .book-title-lockup[data-layout="two-word-poster"] .book-title-lockup__word { font-size: clamp(21px, 6cqw, 27px) !important; }
  .book-page .book-identity:is([data-book-slug="animals"], [data-book-slug="swan-princess"], [data-book-slug="tom-and-jerry"], [data-book-slug="avatar-aang"]) .book-identity__cover { height: min(65cqw, 245px); }
}

/* Apothecary book uses the same illustrated poster composition as the other imports. */
.book-page .book-identity[data-book-slug="pharmacist-monologue"] {
  display: grid;
  grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  align-items: center;
  gap: 0;
  padding: clamp(20px, 5cqw, 40px);
  background: #152a37 url("/assets/home/pharmacist-monologue-hero-backdrop-20261009.webp") center / cover no-repeat;
}
.book-page .book-identity[data-book-slug="pharmacist-monologue"][data-title-layout="two-word-poster"] .book-title-lockup {
  position: static;
  grid-column: 2;
  grid-row: 1;
  align-items: flex-start;
  justify-self: center;
  width: 100%;
  margin: 0;
  padding-left: clamp(8px, 2cqw, 20px);
  color: #fff2d6 !important;
  text-align: left;
  text-transform: none;
  text-shadow: 0 2px 8px rgb(0 17 32 / 85%);
  transform: none;
}
.book-page .book-identity[data-book-slug="pharmacist-monologue"] .book-title-lockup__word,
.book-page .book-identity[data-book-slug="pharmacist-monologue"] .book-title-lockup[data-layout="two-word-poster"] .book-title-lockup__word {
  max-width: 100%;
  margin: 0;
  color: #fff2d6 !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 1.08;
  letter-spacing: -.03em !important;
  white-space: normal;
  overflow-wrap: normal;
}
.book-page .book-identity[data-book-slug="pharmacist-monologue"][data-title-layout="two-word-poster"] .book-identity__cover {
  position: static;
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  width: auto;
  max-width: 100%;
  height: min(76cqw, 380px);
  max-height: calc(100% - 8px);
  aspect-ratio: auto;
  object-fit: contain;
  border: 4px solid rgb(255 255 255 / 92%);
  border-radius: 10px;
  box-shadow: 0 15px 27px rgb(15 25 43 / 30%);
  transform: rotate(-3deg);
}
.book-page .book-identity[data-book-slug="pharmacist-monologue"] .book-identity__sparkles { display: none; }
@media (max-width: 767px) {
  .book-page .book-identity[data-book-slug="pharmacist-monologue"] {
    min-height: 300px;
    height: auto;
    aspect-ratio: 1.33;
    padding: 18px;
  }
  .book-page .book-identity[data-book-slug="pharmacist-monologue"] .book-identity__cover { height: min(55cqw, 300px); }
}
@media (max-width: 480px) {
  .book-page .book-identity[data-book-slug="pharmacist-monologue"] {
    min-height: 300px;
    aspect-ratio: 1.16;
    padding: 16px;
  }
  .book-page .book-identity[data-book-slug="pharmacist-monologue"] .book-title-lockup__word,
  .book-page .book-identity[data-book-slug="pharmacist-monologue"] .book-title-lockup[data-layout="two-word-poster"] .book-title-lockup__word { font-size: 21px !important; }
  .book-page .book-identity[data-book-slug="pharmacist-monologue"] .book-identity__cover { height: min(65cqw, 245px); }
}

/* White progress card with scalloped pink trim */
/* Hover must not reset the responsive margin/width rules below. */
.app-shell:has(.home-dashboard) .collection-progress { background: var(--theme-surface, #fff); border-radius: 12px; box-shadow: none; margin: 12px; width: calc(100% - 24px); isolation: isolate; overflow: visible; }
.app-shell:has(.home-dashboard) .collection-progress:hover { box-shadow: none; transform: none; }
.app-shell:has(.home-dashboard) .collection-progress::before { content: ""; position: absolute; z-index: -1; inset: -14px; border: 0; border-radius: 0; transform: none; box-shadow: none; pointer-events: none;
 background: radial-gradient(circle at 50% 100%, var(--theme-accent, #ff7b95) 0 24px, transparent 25px) top left / 52px 26px repeat-x,
 radial-gradient(circle at 50% 0%, var(--theme-accent, #ff7b95) 0 24px, transparent 25px) bottom left / 52px 26px repeat-x,
 radial-gradient(circle at 100% 50%, var(--theme-accent, #ff7b95) 0 24px, transparent 25px) top left / 26px 52px repeat-y,
 radial-gradient(circle at 0% 50%, var(--theme-accent, #ff7b95) 0 24px, transparent 25px) top right / 26px 52px repeat-y; }
.app-shell:has(.home-dashboard) .collection-progress__body { position: relative; }

.app-shell:has(.home-dashboard) .collection-progress::before { z-index: -2; }
.app-shell:has(.home-dashboard) .collection-progress::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--theme-surface, #fff); border-radius: 12px; pointer-events: none; }

.app-shell:has(.home-dashboard) .collection-progress::before { display: block; opacity: 1; }

.app-shell:has(.home-dashboard) .collection-progress::before,
.app-shell:has(.home-dashboard) .collection-progress::after { display: none; }
.app-shell:has(.home-dashboard) .collection-progress { border-radius: 0; }
.collection-progress__trim { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.collection-progress__trim svg { display: block; overflow: visible; }

.app-shell .collection-progress__trim svg { width: 100%; height: 100%; stroke: none; fill: var(--theme-accent, #ff7b95); }
.app-shell .collection-progress__trim svg circle { fill: var(--theme-accent, #ff7b95); stroke: none; }
.app-shell .collection-progress__trim svg rect { fill: var(--theme-surface, #fff); stroke: none; }

.app-shell:has(.home-dashboard) .collection-progress { margin-top: 18px; }
@media (max-width: 767px) { .app-shell:has(.home-dashboard) .collection-progress { margin: 36px; width: calc(100% - 72px); } }

@media (min-width: 768px) { .app-shell:has(.home-dashboard) .collection-progress { margin-top: 40px; } }

/* Montserrat typography throughout the site */
@font-face { font-family: Montserrat; src: url('/assets/fonts/montserrat/Montserrat-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Montserrat; src: url('/assets/fonts/montserrat/Montserrat-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
body, body * { font-family: Montserrat, sans-serif !important; font-weight: 400 !important; }
body :is(h1,h2,h3,h4,h5,h6,[role="heading"]), body :is(h1,h2,h3,h4,h5,h6,[role="heading"]) * { font-family: Montserrat, sans-serif !important; font-weight: 500 !important; }
body, body :not(svg):not(svg *) { color: var(--theme-ink, #74585a) !important; }
body .favorite-button svg { color: var(--theme-accent, #ff7b95); }

/* Contrast for filled action buttons */
body :is(.button:not(.button--secondary):not(.button--ghost), .catalog-book-card__add, .achievement-celebration__cta, .marker-save-state button, .app-profile-trigger, .app-profile-trigger .avatar),
body :is(.button:not(.button--secondary):not(.button--ghost), .catalog-book-card__add, .achievement-celebration__cta, .marker-save-state button, .app-profile-trigger) * { color: #fff !important; }
body .reward-list .button, body .reward-list .button * { color: var(--theme-ink, #74585a) !important; }
body .reward-list .button:hover:not(:disabled), body .reward-list .button:hover:not(:disabled) * { color: #fff !important; }

.collection-progress__track { opacity: .32; }

.app-shell .collection-progress__track { opacity: .2; }

.app-shell .collection-progress__trim svg, .app-shell .collection-progress__trim svg circle { fill: var(--theme-decoration, #bac6f7); }
.app-shell .collection-progress__trim svg rect { fill: var(--theme-surface, #fff); }

.app-shell .page > header h1 { position: relative; top: 20px; }
@media (max-width: 767px) { .app-shell .page > header h1 { top: 10px; } }

body .rewards-spotlight, body .rewards-spotlight * { color: #fff !important; }
body .rewards-spotlight .rewards-spotlight__cta, body .rewards-spotlight .rewards-spotlight__cta * { color: var(--theme-ink, #74585a) !important; }
body .toast, body .toast * { color: #fff !important; }

body .viewer-complete, body .viewer-complete * { color: #fff !important; }

/* Keep the viewer still while paging between decoded images. */
.illustration-overlay, .illustration-viewer, .viewer-stage-image { animation: none !important; }

body :is(.book-progress-panel__cta, .book-current-preview__label), body :is(.book-progress-panel__cta, .book-current-preview__label) * { color: #fff !important; }

/* A single, interruptible pink wave covers the entire illustration card. */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .book-page .book-catalog-card { isolation: isolate; transition: border-color 850ms cubic-bezier(.45, 0, .55, 1); }
  .book-page .book-catalog-card[data-status="in_progress"]::before {
    content: ""; display: block; position: absolute; z-index: 1;
    inset: -64px -12%; height: auto;
    border-radius: 50% 50% 0 0 / 48px 48px 0 0;
    background: var(--theme-accent, #ff7b95); pointer-events: none;
    transform: translateY(100%);
    transition: transform 850ms cubic-bezier(.45, 0, .55, 1);
  }
  .book-page .book-catalog-card[data-status="in_progress"]:is(:hover, :has(.book-catalog-card__preview:focus-visible))::before { transform: translateY(0); }
  .book-page .book-catalog-card[data-status="in_progress"]:is(:hover, :has(.book-catalog-card__preview:focus-visible)) { border-color: var(--theme-accent, #ff7b95) !important; }
  .book-page .book-catalog-card :is(.book-catalog-card__copy, .book-catalog-card__palette) { position: relative; z-index: 3; }
  .book-page .book-catalog-card :is(.illustration-number, h3, .book-catalog-card__status, .book-catalog-card__palette) { transition: color 400ms ease; }
  body .book-page .book-catalog-card[data-status="in_progress"]:is(:hover, :has(.book-catalog-card__preview:focus-visible)) :is(.illustration-number, h3, .book-catalog-card__status, .book-catalog-card__palette, .book-catalog-card__continue-overlay) { color: #fff !important; }
  .book-page .book-catalog-card .favorite-button { z-index: 5; }
}
@media (prefers-reduced-motion: reduce) {
  .book-page .book-catalog-card::before,
  .book-page .book-catalog-card,
  .book-page .book-catalog-card :is(.illustration-number, h3, .book-catalog-card__status, .book-catalog-card__palette, .book-catalog-card__continue, .book-catalog-card__continue-overlay) { transition: none !important; }
}

@media (hover: hover) and (pointer: fine) and (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .book-page .book-catalog-card[data-status="in_progress"] .book-catalog-card__continue-overlay {
    transition: opacity 400ms ease, transform 400ms ease;
  }
  .book-page .book-catalog-card[data-status="in_progress"]:is(:hover, :has(.book-catalog-card__preview:focus-visible)) .book-catalog-card__continue-overlay {
    transition-delay: 180ms;
  }
}

/* Keep modal scroll locking and decoration updates from shifting the page. */
html { scrollbar-gutter: stable; }
.collection-progress__trim { contain: layout size; }

/* Earned night theme: profile surfaces, with the same typography and pink accent. */
.profile-theme-options { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.profile-theme-option--night { --profile-choice: #755f86; }
.profile-theme-option--night .profile-theme-option__swatch { background: #261e2b; border: 1px solid #a791b4; }
.profile-theme-option[data-locked="true"] { cursor: not-allowed; border-style: dashed; }
.profile-theme-option[data-locked="true"] .profile-theme-option__swatch { opacity: .55; }
.reward-list__received { display: grid; justify-items: start; gap: 10px; }
.reward-list__received a { font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.profile-settings-page[data-profile-theme="night"], .public-profile[data-profile-theme="night"], .community-card[data-profile-theme="night"] {
  --profile-ink: #f4edf2; --profile-muted: #c1b0bc; --profile-line: #514150;
  --profile-accent: #ff9ab0; --profile-soft: var(--theme-input, #382c3c); --profile-accent-soft: var(--theme-input, #382c3c);
  color-scheme: dark; background: #211b26 !important;
}
html:has(.profile-settings-page[data-profile-theme="night"], .public-profile[data-profile-theme="night"]),
body:has(.profile-settings-page[data-profile-theme="night"], .public-profile[data-profile-theme="night"]),
body:has(.profile-settings-page[data-profile-theme="night"]) :is(.app-shell, .app-canvas, .main-content, .app-topbar, .bottom-nav),
body:has(.public-profile[data-profile-theme="night"]) :is(.public-shell, .public-header) { background: #211b26 !important; }
body :is(.profile-settings-page, .public-profile, .community-card)[data-profile-theme="night"],
body :is(.profile-settings-page, .public-profile, .community-card)[data-profile-theme="night"] :not(svg):not(svg *),
body:has(.profile-settings-page[data-profile-theme="night"]) :is(.app-topbar, .bottom-nav) :not(svg):not(svg *),
body:has(.public-profile[data-profile-theme="night"]) .public-header :not(svg):not(svg *) { color: #f4edf2 !important; }
body :is(.profile-settings-page, .public-profile, .community-card)[data-profile-theme="night"] :is(p, small, .field-hint, .profile-privacy-note, .public-profile__bio, .public-profile__empty) { color: #c1b0bc !important; }
.profile-settings-page[data-profile-theme="night"] :is(.profile-panel, .profile-visibility-summary, .profile-theme-option, .profile-settings-nav, .profile-help-card, .profile-preview-card, .profile-visibility-picker > label) { background: #2b2331; border-color: var(--profile-line); }
.profile-settings-page[data-profile-theme="night"] :is(.avatar-editor, .profile-privacy-note) { background: var(--profile-soft); }
.profile-settings-page[data-profile-theme="night"] :is(.profile-theme-option:has(input:checked), .profile-visibility-picker > label:has(input:checked)) { background: #3c2c3e; border-color: var(--profile-accent); }
.profile-settings-page[data-profile-theme="night"] :is(input:not([type="radio"]):not([type="checkbox"]), textarea, select, .handle-field) { background: #241d2a; border-color: var(--profile-line); }
.profile-settings-page[data-profile-theme="night"] input[readonly] { background: #302635; }
.profile-settings-page[data-profile-theme="night"] input::placeholder, .profile-settings-page[data-profile-theme="night"] textarea::placeholder { color: #aa96a6; }
.profile-settings-page[data-profile-theme="night"] .settings-actions { background: transparent; border-color: var(--profile-line); }
body .profile-settings-page[data-profile-theme="night"] .button:not(.button--secondary):not(.button--ghost),
body .profile-settings-page[data-profile-theme="night"] .button:not(.button--secondary):not(.button--ghost) * { color: #fff !important; }
.profile-settings-page[data-profile-theme="night"] .button--secondary { background: var(--theme-input, #382c3c); border-color: var(--profile-line); }
.profile-settings-page[data-profile-theme="night"] .button--ghost:hover { background: var(--theme-input, #382c3c); }
.profile-settings-page[data-profile-theme="night"] .profile-preview-card { background: #302535; }
.public-profile[data-profile-theme="night"] :is(.public-profile__hero, .public-artwork-grid article, .public-collection-list article, .public-profile__empty) { border-color: var(--profile-line); }
.public-profile[data-profile-theme="night"] .public-collection-list .progress { background: #514150; }
.public-profile[data-profile-theme="night"] .public-artwork-grid img { background: var(--profile-soft); }
.community-card[data-profile-theme="night"] { padding: 16px; border-color: #514150; border-radius: 18px; }
@media (max-width: 767px) { .profile-theme-options { grid-template-columns: 1fr; } }
body:has(.profile-settings-page[data-profile-theme="night"]) .app-topbar .balance-chip { background: var(--theme-input, #382c3c); border-color: #514150; }

#profile-appearance { scroll-margin-top: 96px; }

/* Reward copy has the full card width; price and action share the footer. */
.reward-list > article { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto; gap: 20px 16px; align-items: start; }
.reward-list > article > div:first-child { min-width: 0; grid-column: 1 / -1; grid-row: 1; }
.reward-list > article .reward-list__cost { min-width: 0; grid-column: 1; grid-row: 2; align-self: end; }
.reward-list__cost small { white-space: normal; text-align: left; line-height: 1.4; }
.reward-list > article > :is(.button, .catalog-state, .reward-list__received) { grid-column: 2; grid-row: 2; justify-self: end; align-self: end; }
.reward-list__received { min-width: 0; justify-items: end; gap: 8px; }
.reward-list__received a { display: inline-flex; align-items: center; white-space: nowrap; line-height: 1.4; }
@media (max-width: 767px) { .reward-list > article { gap: 18px 12px; } }

/* Match the book legend to the actual state of every illustration tick. */
.book-progress-panel__stats i[data-state="done"],
.book-progress-ticks li[data-state="done"] { background: var(--theme-accent, #ff7b95); border: 0; }
.book-progress-panel__stats i[data-state="in-progress"],
.book-progress-ticks li[data-state="in-progress"] { background: var(--theme-secondary, #4f60a1); border: 0; }
.book-progress-panel__stats i[data-state="not-started"],
.book-progress-ticks li[data-state="not-started"] { background: transparent; border: 1.5px solid var(--theme-line, #d8cbd0); }

/* The stage must not shrink-wrap to the zoomed image. */
.viewer-image-zone { align-self: stretch; justify-self: stretch; }

/* Compact authentication forms with prompts inside the fields. */
.auth-shell .auth-panel { padding: 32px; }
.auth-shell .auth-panel h1 { margin: 0 0 24px; text-align: center; font-size: 28px; line-height: 1.2; letter-spacing: -.03em; }
.auth-shell .auth-form { gap: 12px; }
.auth-shell .auth-form input:not([type="checkbox"]) { min-height: 50px; padding: 12px 18px; font-size: 15px; line-height: 1.4; }
.auth-shell .auth-form input:focus-visible { border-color: var(--theme-line, #ead8e4); outline: none; box-shadow: none; }
.auth-shell .auth-form .button { margin-top: 4px; min-height: 50px; }
.auth-shell .field-hint { margin: -5px 4px 0; line-height: 1.4; }
.auth-shell .auth-checkbox { margin: 0; padding: 4px 0; }
.auth-shell .auth-panel > p { margin-top: 18px; line-height: 1.5; }
.auth-shell .auth-panel > .auth-panel__lead { margin: -8px 0 20px; text-align: center; }
@media (max-width: 540px) {
  .auth-shell .auth-panel { padding: 26px 22px; }
  .auth-shell .auth-panel h1 { font-size: 26px; margin-bottom: 22px; }
}
.auth-shell { overflow-x: clip; }
.proof-status { display: block; margin-top: 10px; color: var(--theme-ink, #74585a); font-size: 13px; line-height: 1.4; }
.proof-status--pending { color: var(--theme-muted, #8a6380); }
.proof-status--rejected { color: #a34263; }
.viewer-panel-footer .proof-status { margin: 0 0 8px; padding: 0 8px; }
.admin-proofs { padding: 20px 0; }
.admin-proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; }
.admin-proof-card { padding: 20px; border: 1px solid var(--theme-line, #ead9e3); border-radius: 24px; background: var(--theme-surface, #fff); }
.admin-proof-card header { display: grid; gap: 4px; margin-bottom: 16px; }
.admin-proof-card header span, .admin-proof-card > p, .admin-proof-card > small { color: var(--theme-muted, #8d7478); font-size: 14px; line-height: 1.45; }
.admin-proof-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.admin-proof-images figure { margin: 0; }
.admin-proof-images figcaption { margin-bottom: 6px; color: var(--theme-ink, #74585a); font-size: 13px; }
.admin-proof-images img, .admin-proof-images figure > span { display: block; width: 100%; height: 280px; object-fit: contain; border-radius: 14px; background: var(--theme-background, #f6f4f1); }
.admin-proof-images figure > span { padding: 24px; }
.admin-proof-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
@media (max-width: 560px) { .admin-proof-images img, .admin-proof-images figure > span { height: 200px; } }
.auth-shell .auth-error { color: #9e3457; background: #fff0f4; border-radius: 14px; padding: 12px 14px; margin: 0 0 16px; font-size: 14px; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--theme-muted, #8d7478); font-size: 13px; }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; flex: 1; background: var(--theme-line, #ead8e4); }
.auth-panel .auth-yandex { display: flex; min-height: 50px; justify-content: center; align-items: center; border: 1px solid #ead8e4; border-radius: 999px; background: white; color: #74585a; font-size: 15px; font-weight: 500; text-decoration: none; transition: border-color .2s, background .2s; }
.auth-panel .auth-yandex:hover { border-color: #ff7b95; background: #fff8fa; }
.auth-panel .auth-yandex:focus-visible, .profile-yandex-link:focus-visible { outline: 2px solid #ff7b95; outline-offset: 3px; }
.profile-yandex-link { color: #bd486f; text-decoration: underline; text-underline-offset: 3px; }

/* Account theme. The selected profileTheme applies to every signed-in route. */
html[data-app-theme] {
  --theme-background: #F6F4F1;
  --theme-surface: #ffffff;
  --theme-ink: #74585a;
  --theme-muted: #8d7478;
  --theme-line: #ead9e3;
  --theme-accent: #ff7b95;
  --theme-action: #bd486f;
  --theme-soft: #ffe9f0;
  --theme-marker-filter: none;
}
html[data-app-theme="violet"] {
  --theme-background: #f3f0f8;
  --theme-ink: #5f526e;
  --theme-muted: #796e87;
  --theme-line: #ded5ea;
  --theme-accent: #9877c5;
  --theme-action: #7350a4;
  --theme-soft: #eee6f7;
  --theme-marker-filter: hue-rotate(-70deg) saturate(.76);
}
html[data-app-theme="coral"] {
  --theme-background: #f8f1ee;
  --theme-ink: #725854;
  --theme-muted: #8a706b;
  --theme-line: #ecd9d2;
  --theme-accent: #e77561;
  --theme-action: #b85044;
  --theme-soft: #fce9e3;
  --theme-marker-filter: hue-rotate(20deg) saturate(.85);
}
html[data-app-theme="blue"] {
  --theme-background: #f0f4f9;
  --theme-ink: #4f5d72;
  --theme-muted: #6e7b8d;
  --theme-line: #d5dfeb;
  --theme-accent: #4b86c6;
  --theme-action: #2e649e;
  --theme-soft: #e3edf9;
  --theme-marker-filter: hue-rotate(-135deg) saturate(.75);
}
html[data-app-theme="night"] {
  --theme-background: #211b26;
  --theme-surface: #2c2532;
  --theme-ink: #f4edf2;
  --theme-muted: #c9b9c7;
  --theme-line: #54475b;
  --theme-accent: #ff9ab0;
  --theme-action: #b94f78;
  --theme-soft: #403044;
  --theme-marker-filter: hue-rotate(7deg) brightness(1.1);
}
html[data-app-theme] body,
html[data-app-theme] .app-shell,
html[data-app-theme] .app-canvas,
html[data-app-theme] .app-shell .main-content,
html[data-app-theme] .app-shell .page,
html[data-app-theme] .page-shell,
html[data-app-theme] .app-shell .app-topbar,
html[data-app-theme] .app-shell .bottom-nav,
html[data-app-theme] .admin-shell {
  background: var(--theme-background);
  color: var(--theme-ink);
}
html[data-app-theme] {
  --paper: var(--theme-background);
  --surface: var(--theme-surface);
  --ink: var(--theme-ink);
  --ink-soft: var(--theme-muted);
  --rose: var(--theme-action);
  --rose-deep: var(--theme-action);
  --line: var(--theme-line);
}
html[data-app-theme] .app-shell,
html[data-app-theme] .app-shell:has(.home-dashboard) {
  --color-bg: var(--theme-background);
  --color-surface: var(--theme-surface);
  --color-text: var(--theme-ink);
  --color-text-secondary: var(--theme-muted);
  --color-primary: var(--theme-accent);
  --color-primary-hover: var(--theme-action);
  --color-primary-soft: var(--theme-soft);
  --color-cobalt: var(--theme-ink);
  --color-cobalt-soft: var(--theme-soft);
  --color-lilac-soft: var(--theme-soft);
  --color-coral-soft: var(--theme-soft);
  --color-border: var(--theme-line);
  --color-border-strong: var(--theme-accent);
}
html[data-app-theme] .collection-page {
  --collection-fuchsia: var(--theme-accent);
  --collection-fuchsia-hover: var(--theme-action);
  --collection-fuchsia-soft: var(--theme-soft);
}
html[data-app-theme] .catalog-page {
  --catalog-ink: var(--theme-ink);
  --catalog-muted: var(--theme-muted);
  --catalog-line: var(--theme-line);
  --catalog-surface: var(--theme-surface);
  --catalog-fuchsia: var(--theme-accent);
  --catalog-fuchsia-hover: var(--theme-action);
  --catalog-fuchsia-soft: var(--theme-soft);
}
html[data-app-theme] .achievements-page {
  --ach-ink: var(--theme-ink);
  --ach-muted: var(--theme-muted);
  --ach-line: var(--theme-line);
  --ach-soft: var(--theme-soft);
  --ach-fuchsia: var(--theme-accent);
  --ach-fuchsia-dark: var(--theme-action);
}
html[data-app-theme] .profile-settings-page {
  --profile-ink: var(--theme-ink);
  --profile-muted: var(--theme-muted);
  --profile-line: var(--theme-line);
  --profile-soft: var(--theme-soft);
  --profile-accent: var(--theme-accent);
}
html[data-app-theme] .profile-theme-option--pink { --profile-choice: #ff7b95; }
html[data-app-theme] .profile-theme-option--violet { --profile-choice: #9877c5; }
html[data-app-theme] .profile-theme-option--coral { --profile-choice: #e77561; }
html[data-app-theme] .profile-theme-option--blue { --profile-choice: #4b86c6; }
html[data-app-theme] .profile-preview-card[data-profile-theme="violet"],
html[data-app-theme] .public-profile[data-profile-theme="violet"],
html[data-app-theme] .community-card[data-profile-theme="violet"] { --profile-accent: #9877c5; --profile-accent-soft: #eee6f7; }
html[data-app-theme] .app-shell .app-topnav .nav-item::after,
html[data-app-theme] .app-shell .bottom-nav .nav-item::after { filter: var(--theme-marker-filter); }
html[data-app-theme] .app-shell .app-topnav .nav-item,
html[data-app-theme] .app-shell .bottom-nav .nav-item,
html[data-app-theme] .app-shell :is(.collection-library__switch,.catalog-switch) > a { color: var(--theme-muted); }
html[data-app-theme] .app-shell .app-topnav .nav-item.is-active,
html[data-app-theme] .app-shell .bottom-nav .nav-item.is-active,
html[data-app-theme] .app-shell :is(.collection-library__switch,.catalog-switch) > a[aria-current="page"] { color: var(--theme-ink); }
html[data-app-theme] .app-shell :is(.collection-library__switch,.catalog-switch) > a[aria-current="page"]::after { background: var(--theme-accent); }
html[data-app-theme] .app-shell .button:not(.button--secondary):not(.button--ghost),
html[data-app-theme] .app-shell .catalog-book-card__add,
html[data-app-theme] .app-shell .empty-state .button,
html[data-app-theme] .app-shell .viewer-complete { background: var(--theme-action); border-color: var(--theme-action); color: #fff; }
html[data-app-theme] .app-shell .button:not(.button--secondary):not(.button--ghost):hover,
html[data-app-theme] .app-shell .catalog-book-card__add:hover { background: var(--theme-accent); border-color: var(--theme-accent); }
html[data-app-theme] .app-shell :is(.collection-progress__bar span,.progress span,.shelf-book__progress span,.catalog-progress span) { background: var(--theme-accent); }
html[data-app-theme] .rewards-spotlight { background: var(--theme-action); }
html[data-app-theme] .rewards-spotlight__cta { color: var(--theme-action); }
html[data-app-theme] .profile-theme-option:has(input:checked) { border-color: var(--profile-choice); background: color-mix(in srgb, var(--profile-choice) 11%, var(--theme-surface)); }

/* Night keeps artwork untouched while changing page surfaces, controls and copy. */
html[data-app-theme="night"] :is(.app-shell,.app-canvas,.main-content,.page,.page-shell,.catalog-page,.achievements-page,.collection-page,.book-page,.favorites-page,.palette-page,.profile-settings-page,.admin-shell,.public-shell) { color: var(--theme-ink); }
html[data-app-theme="night"] .app-shell :is(.app-topbar,.bottom-nav,.profile-panel,.profile-visibility-summary,.profile-settings-nav,.profile-preview-card,.profile-help-card,.profile-theme-option,.profile-visibility-picker > label,.collection-progress,.next-reward,.achievement-case__item,.reward-list > article,.achievements-ledger,.achievements-ledger__balance,.collection-book,.catalog-search,.catalog-book-card,.book-hero,.book-summary,.favorite-card,.palette-card,.color-card,.empty-state,.app-profile-menu) {
  background: var(--theme-surface);
  border-color: var(--theme-line);
  box-shadow: none;
}
html[data-app-theme="night"] .app-shell :is(h1,h2,h3,.profile-settings-hero h1,.catalog-header h1,.achievements-header h1,.reward-list h3,.empty-state h2,.collection-book h2) { color: var(--theme-ink); }
html[data-app-theme="night"] .app-shell :is(p,small,.field-hint,.catalog-header p,.reward-list p,.empty-state p,.collection-book__status,.book-summary__text) { color: var(--theme-muted); }
html[data-app-theme="night"] .app-shell :is(input:not([type="radio"]):not([type="checkbox"]),textarea,select,.handle-field) { background: var(--theme-input, #342b39); border-color: var(--theme-line); color: var(--theme-ink); }
html[data-app-theme="night"] .app-shell input::placeholder,
html[data-app-theme="night"] .app-shell textarea::placeholder { color: #c9b9c7; }
html[data-app-theme="night"] .app-shell :is(.progress,.collection-book .progress,.rewards-spotlight__level .progress) { background: #54475b; }
html[data-app-theme="night"] .app-shell :is(.profile-theme-option:has(input:checked),.profile-visibility-picker > label:has(input:checked)) { background: #44334a; border-color: var(--theme-accent); }
html[data-app-theme="night"] .app-shell .rewards-spotlight,
html[data-app-theme="night"] .app-shell .rewards-spotlight :is(h2,p,span,small,b) { color: #fff; }
html[data-app-theme="night"] .app-shell .rewards-spotlight__cta { color: var(--theme-action); }
html[data-app-theme="night"] .app-shell .collection-progress__trim svg rect { fill: var(--theme-surface); }
html[data-app-theme="night"] .illustration-viewer,
html[data-app-theme="night"] .viewer-stage,
html[data-app-theme="night"] .viewer-panel { background: var(--theme-background); color: var(--theme-ink); }
html[data-app-theme="night"] .illustration-viewer :is(.viewer-header,.viewer-sidebar,.viewer-toolbar,.viewer-zoom-controls,.viewer-counter,.marker-tracker,.marker-mapping-row,.viewer-footer) { background: var(--theme-surface); color: var(--theme-ink); border-color: var(--theme-line); }
html[data-app-theme="night"] .illustration-viewer :is(input,select) { background: var(--theme-input, #342b39); color: var(--theme-ink); border-color: var(--theme-line); }
@media (prefers-reduced-motion: reduce) {
  html[data-app-theme] .app-shell * { transition-duration: .01ms !important; }
}

/* The legacy site-wide text rule is important; night must override it explicitly. */
html[data-app-theme="night"] body :not(svg):not(svg *) { color: var(--theme-ink) !important; }
html[data-app-theme="night"] .app-shell :is(p,small,.field-hint,.catalog-header p,.reward-list p,.empty-state p,.collection-book__status,.book-summary__text,.profile-theme-option small) { color: var(--theme-muted) !important; }
html[data-app-theme="night"] .app-shell :is(.button:not(.button--secondary):not(.button--ghost),.catalog-book-card__add,.viewer-complete),
html[data-app-theme="night"] .app-shell :is(.button:not(.button--secondary):not(.button--ghost),.catalog-book-card__add,.viewer-complete) * { color: #fff !important; }
html[data-app-theme="night"] .app-shell .rewards-spotlight :is(h2,p,span,small,b) { color: #fff !important; }
html[data-app-theme="night"] .app-shell .rewards-spotlight__cta,
html[data-app-theme="night"] .app-shell .rewards-spotlight__cta * { color: var(--theme-action) !important; }
.lunix-icon { display: inline-block; width: 1.3em; height: 1.3em; flex: 0 0 auto; vertical-align: -.24em; object-fit: contain; }
.balance-chip .lunix-icon { width: 25px; height: 25px; margin-right: 6px; vertical-align: middle; }
.reward-list__cost strong { display: inline-flex; align-items: center; gap: 6px; }
.reward-list__cost .lunix-icon { width: 22px; height: 22px; }
.rewards-spotlight__level strong .lunix-icon { width: 38px; height: 38px; margin-right: 9px; vertical-align: -.05em; }
.achievements-ledger__balance strong .lunix-icon { width: 22px; height: 22px; margin-right: 4px; vertical-align: -.08em; }
.reward-list__delivery { margin-top: 9px !important; font-weight: 500; overflow-wrap: anywhere; }
.luni-status { display: inline-flex; align-items: center; margin: 10px 0 4px; padding: 5px 11px; border-radius: 999px; background: #fff1cb; color: #765027; font-size: 12px; font-weight: 600; }
.admin-grid .admin-reward-claims { grid-column: 1 / -1; }
.admin-reward-claim { align-items: start !important; }
.admin-reward-claim > span:first-child { min-width: 0; gap: 5px; }
.admin-reward-claim small { overflow-wrap: anywhere; }
.admin-reward-claim form { display: flex; align-items: center; gap: 8px; width: min(100%, 460px); }
.admin-reward-claim input { min-width: 0; flex: 1; }
.admin-reward-claim .button { flex: 0 0 auto; }
@media (max-width: 767px) { .admin-reward-claim, .admin-reward-claim form { flex-direction: column; align-items: stretch !important; }.admin-reward-claim form { width: 100%; } }

/* Each prize has its own illustration; only the price uses the Lunix coin. */
.reward-list .reward-list__intro { display: grid; grid-template-columns: minmax(0, 1fr) 76px; align-items: start; gap: 16px; }
.reward-list__copy { min-width: 0; }
.reward-list__art { display: block; width: 76px; height: 76px; border-radius: 17px; object-fit: contain; }
@media (max-width: 767px) {
  .reward-list .reward-list__intro { grid-template-columns: minmax(0, 1fr) 64px; gap: 12px; }
  .reward-list__art { width: 64px; height: 64px; border-radius: 15px; }
}

/* Make the photo action explicit in the illustration viewer. */
.viewer-panel-footer .viewer-complete[data-action="open-proof"] {
  min-height: 56px;
  height: auto;
  padding: 10px 18px;
  line-height: 1.25;
  white-space: normal;
}

/* Navigation stays in reserved side gutters, never on top of the artwork. */
.viewer-image-zone { position: relative; }
.viewer-image-frame { width: 100%; height: 100%; }
.viewer-image-zone > .stage-arrow--prev { left: 8px; }
.viewer-image-zone > .stage-arrow--next { right: 8px; }
@media (max-width: 767px) {
  .viewer-image-zone { padding-inline: 56px; }
  .viewer-image-zone > .stage-arrow--prev { left: 6px; }
  .viewer-image-zone > .stage-arrow--next { right: 6px; }
}

.sheet.sheet--proof { width: min(480px, 100%); padding: 28px; }
.proof-upload .sheet__header { align-items: start; gap: 12px; margin-bottom: 14px; }
.proof-upload .sheet__header h2 { font-size: 26px; line-height: 1.2; margin: 0; }
.proof-upload__intro { margin: 0 0 22px; font-size: 15px; line-height: 1.55; }
.proof-upload .modal-form { gap: 16px; }
.proof-file { position: relative; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 28px 20px; min-height: 168px; border: 1px dashed var(--theme-line, #d9bdcc); border-radius: 20px; background: var(--theme-soft, #fff7fa); cursor: pointer; text-align: center; }
.proof-file:hover { border-color: var(--theme-accent, #ff7b95); background: var(--theme-soft, #fff0f5); }
.proof-file:focus-within { outline: 2px solid var(--theme-ink, #74585a); outline-offset: 3px; }
.proof-file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.proof-file strong { max-width: 100%; overflow-wrap: anywhere; font-size: 16px; font-weight: 500; }
.proof-file > span:last-child { font-size: 12px; }
.proof-file__icon svg { width: 30px; height: 30px; }
.proof-upload__hint { margin: 0; font-size: 14px; line-height: 1.5; }
.proof-upload__details { font-size: 12px; line-height: 1.5; }
.proof-upload__details summary { cursor: pointer; }
.proof-upload__details p { margin: 10px 0 0; }
.viewer-panel-footer .proof-status { grid-column: 1 / -1; grid-row: 2; margin: 0; padding: 14px 16px; border-radius: 16px; background: var(--theme-soft, #fff5f8); color: var(--theme-ink, #74585a); font-size: 13px; }
.proof-status--rejected strong, .proof-status--rejected span { display: block; }
.proof-status--rejected strong { margin-bottom: 4px; font-weight: 500; }
@media (max-width: 540px) { .sheet.sheet--proof { padding: 22px; } .proof-upload .sheet__header h2 { font-size: 23px; } }

/* Lunicolors storefront composition: cream, periwinkle stripes, a few paper accents. */
.app-shell .ranking-page { width: min(1120px, calc(100% - 64px)); max-width: 1120px; padding: 30px 0 44px; margin-inline: auto; }
.ranking-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.ranking-heading h1 { margin: 0; font-size: 46px; line-height: 1; font-weight: 500; letter-spacing: -.035em; }
.ranking-heading > span { font-size: 12px; }
.ranking-stage { position: relative; padding: 28px 110px 0; isolation: isolate; }
.ranking-podium { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: end; gap: 0; max-width: 780px; margin-inline: auto; padding-top: 18px; }
.podium-place { min-width: 0; position: relative; }
.podium-place[data-slot="1"] { grid-column: 2; grid-row: 1; z-index: 2; }
.podium-place[data-slot="2"] { grid-column: 1; grid-row: 1; }
.podium-place[data-slot="3"] { grid-column: 3; grid-row: 1; }
.podium-person { display: flex; flex-direction: column; align-items: center; padding: 0 10px 22px; text-align: center; text-decoration: none; color: inherit; }
.podium-person .avatar { width: 76px; height: 76px; margin-bottom: 14px; font-size: 27px; border: 4px solid var(--theme-background, var(--theme-background, #f6f4f1)); outline: 1px solid var(--theme-line, #ded3d4); background: var(--theme-soft, #f5d8e3); }
.podium-place[data-rank="1"] .avatar { width: 92px; height: 92px; font-size: 33px; outline-color: var(--theme-accent, #e64d92); }
.podium-person > strong { font-size: 16px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.podium-person > strong small { display: inline; margin-left: 6px; font-size: 10px; }
.podium-person:hover > strong { text-decoration: underline; text-underline-offset: 4px; }
.podium-person:focus-visible { outline: 2px solid var(--theme-secondary, #5061a3); outline-offset: 4px; }
.podium-coins { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 9px; }
.podium-coins .lunix-icon { width: 22px; height: 22px; }
.podium-coins b { font-size: 28px; line-height: 1.1; font-weight: 400; font-variant-numeric: tabular-nums; }
.podium-platform { position: relative; height: 94px; display: grid; place-items: center; background: repeating-linear-gradient(90deg,var(--theme-decoration, #bac6f7) 0 25px,#e9edfa 25px 50px); border-radius: 24px 24px 0 0; }
.podium-platform::before { content: ''; position: absolute; height: 24px; top: -12px; left: 0; right: 0; background: radial-gradient(ellipse 25px 17px at 25px 18px,var(--theme-decoration, #bac6f7) 98%,transparent) 0 0/50px 24px repeat-x; }
.podium-place[data-slot="1"] .podium-platform { background: repeating-linear-gradient(90deg,var(--theme-soft, #edbdd4) 0 25px,var(--theme-soft, #fae6ee) 25px 50px); }
.podium-place[data-slot="1"] .podium-platform::before { background-image: radial-gradient(ellipse 25px 17px at 25px 18px,var(--theme-soft, #edbdd4) 98%,transparent); }
.podium-place[data-slot="3"] .podium-platform { background: repeating-linear-gradient(90deg,var(--theme-decoration, #d4daf6) 0 25px,var(--theme-soft, #eef0fb) 25px 50px); }
.podium-place[data-slot="3"] .podium-platform::before { background-image: radial-gradient(ellipse 25px 17px at 25px 18px,var(--theme-decoration, #d4daf6) 98%,transparent); }
.podium-place[data-rank="1"] .podium-platform { height: 146px; }
.podium-place[data-rank="3"] .podium-platform { height: 72px; }
.podium-platform > span { font-size: 54px; font-weight: 400; line-height: 1; color: var(--theme-secondary, #5061a3) !important; background: var(--theme-background, var(--theme-background, #f6f4f1)); width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; }
.podium-place[data-slot="1"] .podium-platform > span { color: var(--theme-accent, #e64d92) !important; }
.podium-empty-avatar { width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 14px; border: 1px dashed var(--theme-decoration, #b9bfdc); border-radius: 50%; font-size: 27px; color: var(--theme-secondary, #8893c1) !important; }
.podium-person--empty > strong { font-size: 14px; }
.podium-person--empty > span:last-child { font-size: 10px; margin-top: 8px; }
.ranking-sticker { position: absolute; pointer-events: none; width: 140px; height: 140px; object-fit: contain; z-index: 3; }
.ranking-sticker--smile { top: 5px; right: 0; transform: rotate(7deg); }
.ranking-star { position: absolute; width: 150px; height: 150px; left: -10px; top: 130px; transform: rotate(-12deg); }
.ranking-goal { display: flex; align-items: center; gap: 26px; padding: 24px 0; margin-top: 26px; border-block: 1px solid var(--theme-line, #e2d9d6); }
.ranking-goal-score { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; min-width: 112px; }
.ranking-goal-score .lunix-icon { width: 34px; height: 34px; }
.ranking-goal-score strong { display: block; font-size: 25px; font-weight: 400; font-variant-numeric: tabular-nums; }
.ranking-goal-score small { display: block; font-size: 11px; margin-top: 3px; }
.ranking-goal-copy { flex: 1; }
.ranking-goal-copy h2 { margin: 0 0 7px; font-size: 20px; line-height: 1.3; font-weight: 400; }
.ranking-goal-copy p { margin: 0; font-size: 12px; line-height: 1.55; max-width: 390px; }
.ranking-goal-action { display: flex; gap: 10px; align-items: center; flex: 0 0 auto; font-size: 13px; text-decoration: none; padding: 9px 12px 9px 18px; border: 1.5px solid var(--theme-secondary, #5061a3); border-radius: 40px; color: var(--theme-secondary, #5061a3) !important; }
.ranking-goal-action span { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--theme-secondary, #5061a3); border-radius: 50%; font-size: 20px; color: var(--theme-secondary, #5061a3) !important; }
.ranking-goal-action:hover { background: var(--theme-soft, #edf0fc); }
.ranking-person { display: grid; grid-template-columns: 40px 44px minmax(0,1fr) auto; align-items: center; gap: 20px; color: inherit; text-decoration: none; }
.ranking-person:hover .ranking-name { text-decoration: underline; text-underline-offset: 4px; }
.ranking-place,.ranking-score { font-variant-numeric: tabular-nums; }
.ranking-place { font-size: 19px; text-align: center; }
.ranking-person .avatar { width: 44px; height: 44px; font-size: 19px; }
.ranking-name { min-width: 0; overflow-wrap: anywhere; font-size: 15px; }
.ranking-name small { margin-left: 8px; font-size: 11px; }
.ranking-score { text-align: right; }
.ranking-score strong { font-size: 22px; font-weight: 400; }
.ranking-score small { display: none; }
.ranking-list { margin-top: 24px; }
.ranking-list-heading { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--theme-line, #e6dbe2); font-size: 12px; }
.ranking-list > .ranking-person { padding: 16px 0; border-bottom: 1px solid var(--theme-line, #e6dbe2); }
.ranking-list .is-self { background: #fbe9f0; }
.ranking-rules { font-size: 12px; line-height: 1.6; margin-top: 20px; max-width: 650px; }
.ranking-rules summary { cursor: pointer; width: fit-content; }
.ranking-rules p { margin: 10px 0 0; }
@media (max-width:900px) {
 .ranking-stage { padding-inline: 50px; }
 .ranking-sticker { width: 100px; height: 100px; right: -10px; }
 .ranking-star { width: 100px; height: 100px; left: -16px; }
 .ranking-goal { flex-wrap: wrap; gap: 18px; }
 .ranking-goal-action { margin-left: auto; }
}
@media (max-width:600px) {
 .app-shell .ranking-page { width: calc(100% - 32px); padding-block: 26px 36px; }
 .ranking-heading h1 { font-size: 38px; }
 .ranking-heading > span { font-size: 11px; }
 .ranking-stage { padding: 38px 0 0; }
 .ranking-podium { padding-top: 20px; }
 .podium-person { padding: 0 6px 20px; }
 .podium-person .avatar { width: 54px; height: 54px; font-size: 22px; border-width: 3px; }
 .podium-place[data-rank="1"] .avatar { width: 64px; height: 64px; font-size: 25px; }
 .podium-person > strong { font-size: 12px; }
 .podium-person > strong small { display: block; margin: 3px 0 0; font-size: 9px; }
 .podium-coins { gap: 4px; margin-top: 8px; }
 .podium-coins .lunix-icon { width: 17px; height: 17px; }
 .podium-coins b { font-size: 22px; }
 .podium-platform { height: 76px; background-size: auto; border-radius: 15px 15px 0 0; }
 .podium-place[data-rank="1"] .podium-platform { height: 112px; }
 .podium-place[data-rank="3"] .podium-platform { height: 58px; }
 .podium-platform > span { font-size: 36px; width: 50px; height: 50px; }
 .podium-empty-avatar { width: 48px; height: 48px; font-size: 24px; margin-bottom: 14px; }
 .podium-person--empty > strong { font-size: 11px; }
 .podium-person--empty > span:last-child { font-size: 9px; line-height: 1.4; }
 .ranking-sticker { width: 72px; height: 72px; top: -10px; right: -6px; }
 .ranking-star { width: 66px; height: 66px; top: 6px; left: -8px; }
 .ranking-goal { margin-top: 22px; padding-block: 18px; gap: 14px; align-items: start; }
 .ranking-goal-score { min-width: 80px; gap: 6px; }
 .ranking-goal-score .lunix-icon { width: 28px; height: 28px; }
 .ranking-goal-score strong { font-size: 23px; }
 .ranking-goal-copy { flex-basis: calc(100% - 110px); }
 .ranking-goal-copy h2 { font-size: 17px; }
 .ranking-goal-copy p { font-size: 11px; }
 .ranking-goal-action { margin-left: 94px; font-size: 12px; padding: 7px 10px 7px 14px; }
 .ranking-person { grid-template-columns: 22px 34px minmax(0,1fr) auto; gap: 12px; }
 .ranking-person .avatar { width: 34px; height: 34px; font-size: 16px; }
 .ranking-list-heading { grid-template-columns: 22px minmax(0,1fr) auto; gap: 12px; font-size: 11px; }
 .ranking-name { font-size: 13px; }
 .ranking-score strong { font-size: 20px; }
 .app-shell .bottom-nav { grid-template-columns: repeat(4,minmax(0,1fr)); }
 .app-shell .bottom-nav .nav-item { min-width: 0; padding-inline: 2px; font-size: 11px; }
}
html[data-app-theme="night"] .ranking-goal { border-color: #514655; }
/* Keep the storefront cream on this route, including the themed app canvas. */

/* A shared place has one step and a cluster of real participant avatars. */
.podium-avatar-stack { display: flex; justify-content: center; align-items: center; margin-bottom: 14px; }
.podium-avatar-link { display: block; border-radius: 50%; }
.podium-avatar-stack .avatar { margin: 0; }
.podium-avatar-link.is-self .avatar { outline: 2px solid var(--theme-secondary, #5061a3); outline-offset: 3px; }
.podium-person--shared .podium-avatar-link + .podium-avatar-link { margin-left: -12px; }
.podium-person--shared .podium-avatar-stack .avatar { width: 62px; height: 62px; font-size: 23px; }
.podium-names { font-size: 15px; line-height: 1.4; text-align: center; overflow-wrap: anywhere; }
.podium-names a { text-decoration: none; }
.podium-names a:hover { text-decoration: underline; text-underline-offset: 3px; }
.podium-names small { display: inline-block; margin-left: 5px; padding: 1px 5px; border-radius: 5px; background: var(--theme-soft, #e7eafa); font-size: 10px; color: var(--theme-secondary, #5061a3) !important; }
.podium-names button { display: block; border: 0; padding: 3px 0; margin-inline: auto; background: none; color: inherit; font: inherit; font-size: 11px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.podium-more { width: 34px; height: 34px; margin-left: -7px; padding: 0; border: 2px solid var(--theme-background, var(--theme-background, #f6f4f1)); border-radius: 50%; background: var(--theme-soft, #e7eafa); color: var(--theme-secondary, #5061a3) !important; font: inherit; font-size: 11px; cursor: pointer; }
.podium-person--empty { min-height: 104px; }
.ranking-self-summary { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 18px 0; margin-top: 24px; border-block: 1px solid var(--theme-line, #e2d9d6); font-size: 13px; }
.ranking-self-summary strong { font-size: 22px; font-weight: 500; margin-left: 9px; }
.ranking-list .ranking-person.is-self { background: var(--theme-soft, #eeeffb); border-radius: 12px; padding-inline: 12px; }
.ranking-list .is-self .ranking-name small { background: var(--theme-decoration, #bac6f7); padding: 3px 7px; border-radius: 5px; color: var(--theme-secondary, #3e4874) !important; }
.ranking-list-empty { font-size: 13px; padding: 16px 0; margin: 0; }
.sheet.sheet--ranking-members { width: min(520px,100%); }
.ranking-shared-members { display: grid; gap: 12px; }
.ranking-shared-members > a { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 12px; align-items: center; padding-block: 8px; text-decoration: none; }
.ranking-shared-members .avatar { width: 40px; height: 40px; }
.ranking-shared-members strong { font-weight: 500; }
@media (max-width:600px) {
 .podium-person--shared .podium-avatar-stack .avatar { width: 40px; height: 40px; font-size: 17px; border-width: 2px; }
 .podium-person--shared .podium-avatar-link + .podium-avatar-link { margin-left: -14px; }
 .podium-person--shared:has(.podium-avatar-link:nth-child(3)) .avatar { width: 32px; height: 32px; font-size: 13px; }
 .podium-person--shared:has(.podium-avatar-link:nth-child(3)) .podium-avatar-link + .podium-avatar-link { margin-left: -12px; }
 .podium-more { width: 24px; height: 24px; font-size: 9px; }
 .podium-names { font-size: 11px; }
 .podium-names small { margin-left: 2px; font-size: 8px; padding: 1px 3px; }
 .podium-person--empty { min-height: 94px; }
 .ranking-self-summary { font-size: 12px; gap: 12px; }
 .ranking-self-summary strong { font-size: 20px; }
}

/* Keep the profile introduction clear of the heading at every screen size. */
.profile-settings-hero h1 { line-height: 1.14; }
.profile-settings-hero__identity > div:last-child > p:last-child { margin-top: 16px; line-height: 1.55; }
@media (max-width:767px) {
 .profile-settings-hero__identity > div:last-child > p:last-child { margin-top: 12px; }
}
.app-shell .profile-settings-page > .profile-settings-hero h1 { top: 0; }
.auth-panel .auth-yandex { min-height: 56px; padding: 12px 20px; gap: 11px; border: 0; background: #202020; font-size: 16px; font-weight: 500; transition: background 160ms ease; }
body .auth-panel .auth-yandex, body .auth-panel .auth-yandex * { color: #fff !important; }
.auth-panel .auth-yandex:hover { background: #303030; }
.auth-panel .auth-yandex:active { background: #101010; }
.auth-panel .auth-yandex:focus-visible { outline: 2px solid #fc3f1d; outline-offset: 4px; }
.auth-yandex__mark { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; background: #fc3f1d; border-radius: 50%; line-height: 1; }
@media (max-width: 400px) { .auth-panel .auth-yandex { font-size: 14px; gap: 9px; } }
.auth-shell .auth-panel a.auth-yandex, .auth-shell .auth-panel a.auth-yandex * { text-decoration: none !important; }

.auth-yandex__mark img { display: block; width: 100%; height: 100%; border: 0; }

/* Reserve the hero cover box while its real image is loading. */
.home-dashboard .cover-stack > .cover-stack__cover { display: block; aspect-ratio: 4 / 5; object-fit: contain; }

/* Email confirmation shares the existing authentication layout. */
.auth-code-form .auth-code-input { text-align: center; font-size: 28px !important; letter-spacing: .32em !important; font-variant-numeric: tabular-nums; padding-inline: 24px; }
.auth-code-form .auth-code-input::placeholder { letter-spacing: .32em !important; opacity: .45; }
.auth-code-form .auth-code-resend { border: 0; background: transparent; padding: 10px 0; color: var(--theme-action,#bd486f); font-size: 13px; cursor: pointer; }
.auth-code-form .auth-code-resend:disabled { color: var(--theme-muted,#8d7478); cursor: default; }
.auth-code-form .auth-code-error { margin: 0; font-size: 13px; line-height: 1.5; color: var(--theme-error,#9e3457) !important; }
.auth-code-form .auth-code-error[hidden] { display: none; }
.auth-panel[data-auth-mode="verify"] .auth-panel__lead { margin: 0 0 20px; line-height: 1.6; font-size: 14px; overflow-wrap: anywhere; }
.auth-panel[data-auth-mode="verify"] > .text-link { display: inline-block; margin-top: 16px; font-size: 13px; }

.auth-shell:has(.auth-panel[data-auth-mode="verify"]) .auth-layout { overflow: clip; }