/* Generated by scripts/build-css.js from styles.css. Edit the source files, not this one. */
/* styles/fonts.css */
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("styles/fonts/bricolage-grotesque-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("styles/fonts/bricolage-grotesque-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("styles/fonts/bricolage-grotesque-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("styles/fonts/bricolage-grotesque-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("styles/fonts/caveat-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("styles/fonts/caveat-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("styles/fonts/literata-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("styles/fonts/literata-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("styles/fonts/literata-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("styles/fonts/literata-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Patrick Hand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("styles/fonts/patrick-hand-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Patrick Hand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("styles/fonts/patrick-hand-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("styles/fonts/space-grotesk-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("styles/fonts/space-grotesk-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("styles/fonts/space-grotesk-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("styles/fonts/space-grotesk-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("styles/fonts/space-grotesk-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("styles/fonts/space-grotesk-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* styles/variables.css */
:root {
	--bg-1: #e8ebee;
	--bg-2: #d5dae0;
	--ink: #151922;
	--ink-soft: #4a5261;
	--card: #f7f8fa;
	--line: #cbd1d9;
	--accent: #2d4fbf;
	--accent-2: #7b2333;
	--danger: #b3261e;
	--success: #2e7d32;
	--shadow: 0 10px 30px rgba(21, 25, 34, 0.12);
	--strip-bg: #f0f2f5;
	--strip-border: #d5dae0;
	--input-bg: #ffffff;
	--btn-sub-bg: #dde1e7;
	--dialog-bg: #f7f8fa;
	--dialog-border: #cbd1d9;
	--auth-card-bg: #eef0f3;
	--auth-card-border: #d5dae0;
	--font-ui: "Bricolage Grotesque", "Segoe UI", sans-serif;
	--font-read: "Literata", Georgia, serif;
	--backdrop: rgba(25, 35, 43, 0.52);
	color-scheme: light;

	/* light-dark() surface tokens */
	--tint-now-reading-border: light-dark(color-mix(in srgb, var(--accent) 18%, #fff), color-mix(in srgb, var(--accent) 30%, transparent));
	--tint-now-reading-bg: light-dark(rgba(232, 242, 240, 0.56), color-mix(in srgb, var(--accent) 10%, transparent));
	--tint-chapter-avatar-bg: light-dark(#f4f0df, rgba(244, 240, 223, 0.94));
	--tint-club-room-icon-bg: light-dark(rgba(31, 42, 53, 0.13), rgba(255, 255, 255, 0.16));
	--tint-recommendation-border: light-dark(#d4dfec, rgba(90, 140, 190, 0.35));
	--tint-recommendation-bg: light-dark(rgba(232, 237, 245, 0.62), rgba(90, 140, 190, 0.1));
	--tint-club-card-border: light-dark(color-mix(in srgb, var(--accent) 20%, transparent), rgba(255, 255, 255, 0.1));
	--tint-club-card-bg: light-dark(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.06));
	--tint-chat-bubble-me-border: light-dark(color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 35%, transparent));
	--tint-chat-bubble-me-bg: light-dark(color-mix(in srgb, var(--accent) 8%, transparent), color-mix(in srgb, var(--accent) 14%, transparent));
	--tint-club-room-list-bg: light-dark(rgba(31, 42, 53, 0.08), rgba(255, 255, 255, 0.06));
	--tint-friend-profile-border: light-dark(#d6e1e8, rgba(123, 169, 205, 0.4));
	--tint-friend-profile-bg: light-dark(rgba(232, 237, 245, 0.52), rgba(255, 255, 255, 0.07));
	--tint-friend-avatar-border: light-dark(#c4d2dd, rgba(185, 215, 235, 0.55));
	--tint-friend-goal-bg: light-dark(#d9e1e8, rgba(255, 255, 255, 0.16));
	--tint-accent-bar-bg: light-dark(#d5dae0, rgba(255, 255, 255, 0.08));
	--tint-book-progress-bg: light-dark(#d5dae0, rgba(255, 255, 255, 0.1));
	--tint-trinket-tray-bg: light-dark(color-mix(in srgb, var(--accent) 6%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
	--tint-trinket-item-bg: light-dark(#fff, rgba(255, 255, 255, 0.06));
	--tint-trinket-unlocked-border: light-dark(color-mix(in srgb, var(--accent) 40%, transparent), color-mix(in srgb, var(--accent) 45%, transparent));
	--tint-trinket-unlocked-bg: light-dark(color-mix(in srgb, var(--accent) 8%, transparent), color-mix(in srgb, var(--accent) 16%, transparent));
	--tint-month-has-books-border: light-dark(color-mix(in srgb, var(--accent) 35%, transparent), color-mix(in srgb, var(--accent) 35%, transparent));
	--tint-month-has-books-bg: light-dark(color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent) 12%, transparent));
	--tint-recommendation-delete-bg: light-dark(#faf0ee, rgba(224, 104, 92, 0.16));
	--tint-recommendation-delete-border: light-dark(#e6c1bb, rgba(224, 104, 92, 0.4));
	--tint-recommendation-delete-color: light-dark(#8b4138, #ffb4ab);
	--tint-recommendation-btn-bg: light-dark(#f3ede4, rgba(255, 255, 255, 0.06));
	--tint-pill-bg: light-dark(#fff, rgba(255, 255, 255, 0.08));
	--tint-pill-unread-border: light-dark(color-mix(in srgb, var(--accent-2) 40%, transparent), rgba(224, 152, 47, 0.45));
	--tint-pill-unread-bg: light-dark(color-mix(in srgb, var(--accent-2) 12%, transparent), rgba(224, 152, 47, 0.18));
	--tint-pill-unread-color: light-dark(color-mix(in srgb, var(--accent-2) 75%, var(--ink)), #f5c988);
	--tint-pill-reading-border: light-dark(rgba(74, 103, 140, 0.35), rgba(90, 140, 190, 0.45));
	--tint-pill-reading-bg: light-dark(rgba(104, 145, 181, 0.12), rgba(90, 140, 190, 0.18));
	--tint-pill-reading-color: light-dark(#365b80, #a9cdec);
	--tint-pill-tag-border: light-dark(rgba(91, 82, 132, 0.28), rgba(150, 130, 210, 0.4));
	--tint-pill-tag-bg: light-dark(rgba(91, 82, 132, 0.09), rgba(150, 130, 210, 0.16));
	--tint-pill-tag-color: light-dark(#514779, #d9d0f5);
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* Author display rules (e.g. .field { display: flex }) otherwise beat the UA [hidden] rule. */
[hidden] {
	display: none !important;
}

body {
	font-family: var(--font-ui);
	color: var(--ink);
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--bg-1);
	line-height: 1.45;
}

body.dialog-open {
	overflow: hidden;
}

/* styles/base.css */
.wrap {
	width: min(1360px, calc(100% - 2.2rem));
	margin: 2rem auto 3rem;
	display: grid;
	gap: 1.15rem;
}

.auth-wrap {
	width: min(760px, calc(100% - 2rem));
	min-height: 100vh;
	min-height: 100dvh;
	align-content: center;
}

.legal-links {
	text-align: center;
	font-size: 0.86rem;
}

.legal-links a {
	color: var(--accent);
	font-weight: 700;
}

.privacy-wrap {
	width: min(760px, calc(100% - 2rem));
}

.privacy-policy {
	padding: 1.5rem;
}

.privacy-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 2rem;
}

.privacy-policy h1,
.privacy-policy h2 {
	font-family: var(--font-read);
}

.privacy-policy h1 {
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	margin-bottom: 0.25rem;
}

.privacy-updated {
	color: var(--ink-soft);
	font-size: 0.88rem;
	margin-bottom: 1.25rem;
}

.privacy-policy > p,
.privacy-policy section p {
	color: var(--ink-soft);
	max-width: 72ch;
}

.privacy-policy section {
	margin-top: 1.4rem;
}

.privacy-policy h2 {
	font-size: 1.05rem;
	margin-bottom: 0.4rem;
}

.panel {
	background: var(--card);
	backdrop-filter: blur(3px);
	border: 1px solid var(--line);
	border-radius: 22px;
	box-shadow: var(--shadow);
	overflow: hidden;
	transform: translateY(10px);
	opacity: 0;
	animation: rise 520ms ease forwards;
}

.panel:nth-child(2) {
	animation-delay: 80ms;
}

.panel:nth-child(3) {
	animation-delay: 140ms;
}

/* The account menu drops out of the header card, so it can't clip, and sits above the cards below. */
.hero {
	position: relative;
	z-index: 5;
	overflow: visible;
	padding: 1rem 1.25rem 1.05rem;
	border-top: 7px solid var(--accent-2);
}

.theme-toggle-corner {
	position: absolute;
	top: 0.9rem;
	right: 0.9rem;
}

.auth-hero {
	text-align: center;
	padding: 2.6rem 1.6rem 2rem;
}

.auth-hero p {
	margin: 0 auto;
	max-width: 48ch;
}

.account-strip {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.8rem;
	padding: 0.6rem 0.7rem;
	margin-bottom: 0.65rem;
	border-radius: 6px;
	background: var(--strip-bg);
	border: 1px solid var(--strip-border);
}

.account-meta {
	display: flex;
	align-items: center;
	gap: 0.68rem;
}

/* Account menu: the avatar and name open View profile / Settings / Log out. */
.account-menu {
	position: relative;
	min-width: 0;
}

.account-menu > summary {
	list-style: none;
	cursor: pointer;
	min-height: 44px;
	padding: 0.2rem 0.6rem 0.2rem 0.2rem;
	border-radius: 999px;
	transition: background-color 150ms ease;
}

.account-menu > summary::-webkit-details-marker {
	display: none;
}

.account-menu > summary:hover,
.account-menu[open] > summary {
	background: color-mix(in srgb, var(--ink) 6%, transparent);
}

.account-menu > summary:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}

.account-meta-text {
	display: grid;
	min-width: 0;
}

.account-menu-caret {
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--ink-soft);
	transition: transform 150ms ease;
}

.account-menu[open] .account-menu-caret {
	transform: rotate(180deg);
}

.account-menu-list {
	position: absolute;
	top: calc(100% + 0.35rem);
	left: 0;
	z-index: 20;
	display: grid;
	min-width: 200px;
	padding: 0.35rem;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--dialog-bg);
	box-shadow: var(--shadow);
}

.account-menu-list button,
.account-menu-list a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	min-height: 44px;
	padding: 0 0.75rem;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--ink);
	font-size: 0.92rem;
	text-align: left;
	text-decoration: none;
}

.account-menu-list button:hover,
.account-menu-list button:focus-visible,
.account-menu-list a:hover,
.account-menu-list a:focus-visible {
	background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.account-menu-list button:disabled {
	opacity: 0.5;
}

.account-menu-list svg {
	width: 18px;
	height: 18px;
	color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
	.account-menu > summary,
	.account-menu-caret {
		transition: none;
	}
}

.email-verify-banner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.6rem;
	padding: 0.25rem 0.25rem 0.25rem 0.8rem;
	margin-bottom: 0.5rem;
	border-radius: 6px;
	background: color-mix(in srgb, var(--accent-2) 8%, var(--card));
	border-left: 3px solid var(--accent-2);
	font-size: 0.86rem;
}

.email-verify-banner[data-dismissed] {
	display: none;
}

.email-verify-banner p {
	margin: 0;
}

.banner-actions {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	flex: none;
}

.account-actions {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

.icon-btn {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--btn-sub-bg);
	color: var(--ink);
}

.icon-btn svg {
	width: 18px;
	height: 18px;
	pointer-events: none;
}

.notification-center-btn {
	position: relative;
}

.notification-center-btn .notification-badge {
	position: absolute;
	top: -0.35rem;
	right: -0.35rem;
	margin-left: 0;
}

.profile-avatar {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #d8ccbe;
	background: #f8f3ed;
}

.account-email {
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.1;
}

.hero h1 {
	font-family: var(--font-ui);
	font-size: clamp(1.55rem, 3vw, 2.1rem);
	line-height: 1.1;
	letter-spacing: 0.3px;
	margin-bottom: 0.35rem;
}

.app-heading {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 1rem;
}

.view-nav,
.status-tabs {
	display: flex;
	gap: 0.25rem;
	flex-wrap: wrap;
}

.status-tabs-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
	min-width: 0;
}

.status-tabs-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
}

/* Same height as the status tab group beside it, and a comfortable tap target. */
.status-tabs-row .btn-main {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-height: 42px;
	padding: 0 1rem;
	font-size: 0.85rem;
	white-space: nowrap;
}

/* On phones the tabs fill the row, so the button gets a full-width row of its own. */
@media (max-width: 620px) {
	.status-tabs-row .btn-main {
		flex: 1 1 100%;
		min-height: 44px;
	}
}

.status-tabs-row .btn-main svg {
	width: 15px;
	height: 15px;
	flex: none;
}

.view-nav button,
.status-tabs button {
	padding: 0.42rem 0.64rem;
	border: 1px solid transparent;
	border-radius: 7px;
	background: transparent;
	color: var(--ink-soft);
	font-size: 0.86rem;
}

.view-nav button.active,
.status-tabs button.active {
	border-color: color-mix(in srgb, var(--accent) 25%, transparent);
	background: color-mix(in srgb, var(--accent) 10%, transparent);
	color: var(--accent);
}

#finished-year-filter {
	min-width: 112px;
	padding: 0.42rem 0.58rem;
	border-radius: 7px;
	font-size: 0.86rem;
	line-height: 1.2;
}

.notification-badge {
	font-variant-numeric: tabular-nums;
	display: inline-grid;
	place-items: center;
	min-width: 1.2rem;
	height: 1.2rem;
	padding: 0 0.3rem;
	margin-left: 0.2rem;
	border-radius: 999px;
	background: #b33a3a;
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
}

.notification-badge[hidden] {
	display: none;
}

.hero p {
	color: var(--ink-soft);
	max-width: 68ch;
}

/* styles/dashboard.css */
.grid {
	display: grid;
	gap: 1rem;
	padding: 1.25rem;
	grid-template-columns: 1fr;
}

.grid.single-column {
	grid-template-columns: 1fr;
}

.library-dashboard {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	padding: 1.25rem;
}

.dashboard-section {
	min-width: 0;
}

.add-book-section {
	align-self: start;
}

.now-reading-section {
	padding: 0.95rem;
	border: 1px solid var(--tint-now-reading-border);
	border-left: 5px solid var(--accent);
	border-radius: 8px;
	background: var(--tint-now-reading-bg);
}

.now-reading-section .toolbar {
	margin-bottom: 0.65rem;
}

.now-reading-section .card-title {
	margin-bottom: 0.15rem;
}

.now-reading-list {
	display: grid;
	gap: 0.65rem;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.now-reading-card {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr);
	gap: 0.7rem;
	padding: 0.7rem;
	border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.85);
}

.now-reading-cover {
	width: 58px;
	height: 84px;
	object-fit: cover;
	border: 1px solid #c9b39c;
	border-radius: 5px;
}

.now-reading-card h3 {
	font-size: 0.96rem;
	line-height: 1.25;
}

.now-reading-card p {
	font-size: 0.84rem;
	color: var(--ink-soft);
}

.now-reading-actions {
	display: flex;
	gap: 0.45rem;
	flex-wrap: wrap;
	margin-top: 0.55rem;
}

.now-reading-actions button {
	padding: 0.4rem 0.56rem;
	font-size: 0.8rem;
	border-radius: 7px;
}

.wishlist-page {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
	padding: 1.25rem;
}

.wishlist-list {
	display: grid;
	gap: 0.6rem;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.wishlist-card {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 0.62rem;
	padding: 0.65rem;
	border: 1px solid var(--line);
	border-radius: 7px;
	background: var(--card);
}

.wishlist-card img,
.wishlist-cover {
	width: 44px;
	height: 64px;
	border: 1px solid #c9b39c;
	border-radius: 4px;
	object-fit: cover;
}

.wishlist-card h3 {
	font-size: 0.92rem;
	line-height: 1.25;
}

.wishlist-card p {
	font-size: 0.8rem;
	color: var(--ink-soft);
}

.wishlist-actions {
	display: flex;
	gap: 0.42rem;
	flex-wrap: wrap;
	margin-top: 0.48rem;
}

.wishlist-actions button {
	padding: 0.36rem 0.5rem;
	font-size: 0.76rem;
	border-radius: 7px;
}

.bookshelf-page {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.9rem;
	padding: 1.25rem;
}

.journal-page {
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
}

.journal-panel {
	padding: 1rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: color-mix(in srgb, var(--card) 88%, var(--accent) 4%);
}

.collective-feature {
	display: grid;
	/* minmax(0, ...) so wide content (banner buttons) can't stretch the column past the screen. */
	grid-template-columns: minmax(0, 1fr);
	gap: 0.8rem;
	margin: 1rem 0;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
}

/* styles/challenges-series.css */
.challenge-directory {
	display: grid;
	gap: 0.6rem;
	margin-top: 0.85rem;
}

.challenge-summary-card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	padding: 0.7rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--btn-sub-bg);
	color: var(--ink);
	text-align: left;
}

.challenge-summary-card .challenge-summary-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.3rem;
	flex: none;
}

/* The title fills the row, so the status/progress column sits beside the button on every card
   instead of drifting with the title's length. */
.challenge-summary-card > span:first-child {
	flex: 1 1 auto;
}

.challenge-status-pill {
	flex: none;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ink-soft);
	background: color-mix(in srgb, var(--ink-soft) 14%, transparent);
}

.challenge-status-pill.status-active {
	color: var(--success);
	background: color-mix(in srgb, var(--success) 16%, transparent);
}

.challenge-status-pill.status-completed {
	color: var(--accent);
	background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.challenge-summary-card.active {
	border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
	background: color-mix(in srgb, var(--accent) 12%, var(--btn-sub-bg));
}

.challenge-summary-card span {
	display: grid;
	gap: 0.18rem;
	min-width: 0;
}

.challenge-summary-card small {
	color: var(--ink-soft);
}

.challenge-summary-card b {
	white-space: nowrap;
	color: var(--accent);
}

/* Button-styled label on each row (the row itself is the button); colours come from .btn-main/.btn-sub
   so every theme styles it. */
.challenge-summary-card .challenge-summary-cta {
	display: inline-flex;
	align-items: center;
	flex: none;
	min-height: 36px;
	padding: 0 1rem;
	font-size: 0.85rem;
	font-weight: 700;
	pointer-events: none;
}

.collective-feature-heading {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	align-items: flex-start;
}

.collective-feature-heading h4 {
	font-family: var(--font-read);
	font-size: clamp(1.35rem, 3vw, 2rem);
	line-height: 1.1;
}

.collective-feature-heading p {
	color: var(--ink-soft);
}

.collective-feature-heading > strong {
	display: inline-grid;
	place-items: center;
	color: var(--accent);
	font-size: 1.2rem;
}

.challenge-progress {
	height: 12px;
	border-radius: 999px;
	overflow: hidden;
	background: color-mix(in srgb, var(--btn-sub-bg) 82%, var(--ink) 8%);
}

.challenge-progress > div {
	height: 100%;
	width: 0%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--accent), var(--accent-2));
	transition: width 220ms ease;
}

.challenge-book-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: 0.5rem;
}

.challenge-book {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	padding: 0.75rem 0.5rem 0.5rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: color-mix(in srgb, var(--card) 90%, var(--accent) 3%);
}

.challenge-book.completed {
	border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
	background: color-mix(in srgb, var(--accent) 11%, var(--card));
}

.challenge-book-number {
	position: absolute;
	top: 0.3rem;
	left: 0.3rem;
	z-index: 2;
	display: inline-grid;
	place-items: center;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	background: var(--btn-sub-bg);
	color: var(--ink-soft);
	font-size: 0.6rem;
	font-weight: 700;
}

.challenge-book-stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 72px;
}

.challenge-book-cover {
	display: block;
	width: 100%;
	max-width: 72px;
	aspect-ratio: 2 / 3;
	height: auto;
	border-radius: 5px;
	object-fit: cover;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.18);
}

.challenge-book-cover-empty {
	background: var(--btn-sub-bg);
}

.challenge-book.empty-slot {
	border-style: dashed;
	background: transparent;
}

.challenge-book-cover-add {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 72px;
	aspect-ratio: 2 / 3;
	border: 1px dashed var(--line);
	border-radius: 5px;
	background: var(--btn-sub-bg);
	color: var(--ink-soft);
	cursor: pointer;
	transition: border-color 120ms ease, color 120ms ease;
}

.challenge-book-cover-add svg {
	width: 18px;
	height: 18px;
}

.challenge-book-cover-add:focus-visible {
	border-color: var(--accent);
	color: var(--accent);
}

.challenge-book-action {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: inline-grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 7px;
	border: none;
	cursor: pointer;
}

.challenge-book-action svg {
	width: 14px;
	height: 14px;
}

.challenge-book-menu {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 3;
	opacity: 0;
	transition: opacity 120ms ease;
}

.challenge-book:hover .challenge-book-menu,
.challenge-book:focus-within .challenge-book-menu,
.challenge-book-menu[open] {
	opacity: 1;
}

.challenge-book-menu-toggle {
	list-style: none;
	display: inline-grid;
	place-items: center;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 5px;
	background: var(--btn-sub-bg);
	color: var(--ink-soft);
	cursor: pointer;
}

.challenge-book-menu-toggle svg {
	width: 12px;
	height: 12px;
}

.challenge-book-menu-toggle::-webkit-details-marker {
	display: none;
}

.challenge-book-menu-actions {
	position: absolute;
	top: calc(100% + 0.3rem);
	right: 0;
	z-index: 4;
	min-width: 110px;
	padding: 0.3rem;
	display: grid;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 8px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.challenge-book-menu-actions button {
	display: block;
	width: 100%;
	padding: 0.35rem 0.5rem;
	border: none;
	border-radius: 6px;
	background: none;
	color: var(--danger);
	font-size: 0.85rem;
	text-align: left;
	cursor: pointer;
}

.challenge-book-action.complete {
	right: -0.4rem;
	background: var(--btn-sub-bg);
	color: var(--ink-soft);
	border: 1.5px solid var(--line);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.challenge-book-action.complete svg {
	visibility: hidden;
}

.challenge-book-action.complete.active {
	background: var(--accent);
	color: white;
	border-color: var(--accent);
	box-shadow: none;
}

.challenge-book-action.complete.active svg {
	visibility: visible;
}

.challenge-book-action.complete input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}

.challenge-book-action.complete:has(input:disabled) {
	cursor: not-allowed;
	opacity: 0.6;
}

.challenge-book-title {
	width: 100%;
	margin: 0;
	/* Two lines before clipping, so long titles stay recognisable. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	overflow-wrap: anywhere;
	text-align: center;
	font-size: 0.72rem;
	font-weight: 600;
}

/* Empty-state messages span the whole grid instead of squeezing into one book-sized cell. */
.challenge-book-list > .empty {
	grid-column: 1 / -1;
}

.challenge-book-rating {
	white-space: nowrap;
}

.challenge-setup-banner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.85rem 1.1rem;
	border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
	border-radius: 6px;
	background: color-mix(in srgb, var(--accent) 8%, var(--card));
	margin: 0.85rem 0;
}

.challenge-setup-banner.challenge-active-banner {
	border-color: color-mix(in srgb, var(--success) 40%, var(--line));
	background: color-mix(in srgb, var(--success) 10%, var(--card));
}

.challenge-banner-info {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.challenge-banner-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
	flex-wrap: wrap;
}

.challenge-setup-banner .btn-main,
.challenge-setup-banner .btn-sub {
	padding-block: 0.5rem;
	font-size: 0.86rem;
	white-space: nowrap;
	flex-shrink: 0;
}

.challenge-banner-info svg {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	color: var(--accent);
}

.challenge-active-banner .challenge-banner-info svg {
	color: var(--success);
}

.challenge-letter-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0.5rem 0 0.85rem;
}

.letter-pill {
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--btn-sub-bg);
	color: var(--ink);
	font-weight: 700;
	font-size: 0.82rem;
	cursor: pointer;
}

.letter-pill.used {
	background: color-mix(in srgb, var(--accent) 18%, var(--card));
	color: var(--accent);
	border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.letter-pill.active {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
}

.challenge-search-item {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.65rem;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: var(--card);
	margin-bottom: 0.5rem;
}

.challenge-search-cover {
	width: 42px;
	height: 60px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}

.challenge-search-cover.placeholder {
	display: grid;
	place-items: center;
	background: var(--btn-sub-bg);
	color: var(--ink-soft);
}

.challenge-search-info {
	display: grid;
	gap: 0.2rem;
	flex: 1;
	min-width: 0;
}

.challenge-search-info strong {
	font-size: 0.95rem;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	overflow-wrap: anywhere;
}

.challenge-search-info small {
	color: var(--ink-soft);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.badge {
	display: inline-block;
	padding: 0.15rem 0.45rem;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	width: fit-content;
}

.badge-shelf {
	background: color-mix(in srgb, var(--accent) 18%, transparent);
	color: var(--accent);
}

.badge-catalog {
	background: color-mix(in srgb, var(--ink-soft) 18%, transparent);
	color: var(--ink-soft);
}

.badge-current-pick {
	background: color-mix(in srgb, var(--accent-2) 20%, transparent);
	color: var(--accent-2);
}

.challenge-search-item.current-pick {
	border-color: color-mix(in srgb, var(--accent-2) 45%, var(--line));
	background: color-mix(in srgb, var(--accent-2) 8%, var(--card));
}

.disabled-book {
	opacity: 0.65;
}

.custom-challenge-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.65rem;
	margin-bottom: 0.85rem;
}

.custom-challenge-list {
	display: grid;
	gap: 0.55rem;
}

.custom-challenge {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.7rem;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: var(--btn-sub-bg);
}

.custom-challenge.completed span {
	color: var(--ink-soft);
	text-decoration: line-through;
}

.custom-challenge .icon-btn {
	width: 32px;
	height: 32px;
	color: var(--danger);
}

.tbr-year-field {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 0.5rem 0;
	font-size: 0.85rem;
}

.tbr-year-field select {
	font: inherit;
}

.tbr-month-grid .month-count {
	position: relative;
	cursor: pointer;
}

.tbr-month-grid .month-complete-tick {
	position: absolute;
	top: 0.3rem;
	right: 0.3rem;
	color: var(--accent);
}

.tbr-month-grid .month-count.selected .month-complete-tick {
	color: inherit;
}

.tbr-month-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin: 0.85rem 0;
}

.tbr-month-nav button {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: var(--btn-sub-bg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.tbr-spin-row {
	display: flex;
	justify-content: center;
	margin-bottom: 0.85rem;
}

.tbr-spin-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.9rem;
	font-size: 0.85rem;
	white-space: nowrap;
}

.tbr-spin-btn svg {
	width: 16px;
	height: 16px;
	flex: none;
}

.tbr-month-nav button:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.tbr-month-nav strong {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 10rem;
	text-align: center;
	font-size: 0.95rem;
}

.tbr-month-nav strong small {
	color: var(--ink-soft);
	font-weight: 400;
	font-size: 0.78rem;
}

.series-tracker-stats {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0.5rem;
	margin-bottom: 0.85rem;
}

.series-tracker-stats > div {
	padding: 0.55rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.65);
}

.series-tracker-stats span {
	display: block;
	font-size: 0.72rem;
	color: var(--ink-soft);
}

.series-tracker-stats strong {
	display: block;
	margin-top: 0.1rem;
	font-size: 1.1rem;
}

.series-tracker-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	margin-bottom: 0.85rem;
}

.series-filter-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.series-tracker-select-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.series-filter-pills button {
	padding: 0.4rem 0.8rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--card);
	color: var(--ink-soft);
	font-size: 0.82rem;
}

.series-filter-pills button.active {
	border-color: color-mix(in srgb, var(--accent) 32%, transparent);
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	color: var(--accent);
}

.series-tracker-filters select {
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	background-color: var(--input-bg);
	color: var(--ink);
	font-size: 0.82rem;
}

.series-tracker-list {
	display: grid;
	gap: 0.55rem;
	margin-top: 0.85rem;
}

.series-tracker-suggestions {
	display: grid;
	gap: 0.5rem;
	margin-bottom: 0.85rem;
}

.series-tracker-suggestions:empty {
	display: none;
}

.series-suggestion {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.55rem;
	padding: 0.5rem 0.65rem;
	border: 1px dashed var(--line);
	border-radius: 9px;
	background: var(--card);
}

.series-suggestion .meta {
	font-size: 0.8rem;
	color: var(--ink-soft);
	margin-right: auto;
}

.series-suggestion .btn-sub {
	padding: 0.35rem 0.6rem;
	font-size: 0.8rem;
}

.series-library-link {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.series-item {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.55rem;
	padding: 0.5rem 0.65rem;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: var(--btn-sub-bg);
}

.series-item strong {
	white-space: nowrap;
}

.series-item .meta {
	font-size: 0.8rem;
	white-space: nowrap;
	margin-top: 0;
	margin-right: auto;
}

.series-item .favorite {
	width: 24px;
	height: 24px;
	color: var(--ink-soft);
}

.series-item .favorite.active {
	color: #d1a815;
}

.series-item .favorite.active svg {
	fill: currentColor;
}

.series-missing {
	flex-basis: 100%;
	border-top: 1px solid var(--line);
	padding-top: 0.4rem;
}

.series-missing summary {
	cursor: pointer;
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--ink-soft);
}

.series-missing-list {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.35rem;
}

.series-missing-list li {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: 0.88rem;
}

.series-missing-number {
	min-width: 1.5rem;
	text-align: center;
	font-weight: 700;
	color: var(--ink-soft);
}

.series-missing-actions {
	display: inline-flex;
	gap: 0.35rem;
	margin-left: auto;
}

.series-missing-actions .btn-sub {
	padding: 0.2rem 0.55rem;
	font-size: 0.78rem;
}

.series-missing .hint {
	margin: 0.5rem 0 0;
}

.series-notes {
	flex-basis: 100%;
	color: var(--ink-soft);
	font-size: 0.84rem;
}

.series-item label {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.75rem;
	white-space: nowrap;
}

.series-item label input {
	width: 2.8rem;
	padding: 0.25rem 0.35rem;
}

.series-item .btn-sub {
	padding: 0.35rem 0.6rem;
	font-size: 0.8rem;
}

.pill.series-status-ongoing {
	border-color: rgba(74, 103, 140, 0.35);
	color: #365b80;
	background: rgba(104, 145, 181, 0.12);
}

.pill.series-status-complete {
	border-color: rgba(100, 140, 30, 0.45);
	color: #4d6e12;
	background: rgba(120, 165, 35, 0.13);
}

.pill.my-status-not-started {
	border-color: rgba(177, 126, 33, 0.4);
	color: #855d14;
	background: color-mix(in srgb, var(--accent-2) 12%, transparent);
}

.pill.my-status-in-progress {
	border-color: rgba(14, 150, 170, 0.4);
	color: #0b6f80;
	background: rgba(14, 150, 170, 0.12);
}

.pill.my-status-up-to-date {
	border-color: color-mix(in srgb, var(--accent) 40%, transparent);
	color: var(--accent);
	background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.pill.my-status-complete {
	border-color: rgba(122, 74, 140, 0.35);
	color: #6a3a80;
	background: rgba(122, 74, 140, 0.12);
}

@media (max-width: 620px) {
	.series-tracker-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Stack the challenge banner's message above its buttons on narrow screens. */
	.challenge-setup-banner {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	.challenge-banner-actions > * {
		flex: 1 1 auto;
		justify-content: center;
	}
}

/* A book's notes and quotes, inside Edit Book and the book details view */
.book-journal-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.4rem;
}

.book-journal-label {
	font-weight: 600;
}

.book-journal-actions {
	display: flex;
	gap: 0.4rem;
}

.book-journal-actions .btn-sub {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	min-height: 40px;
	padding: 0 0.8rem;
	font-size: 0.85rem;
}

.book-journal-actions svg {
	width: 0.95rem;
	height: 0.95rem;
}

.book-journal-list {
	display: grid;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.book-journal-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: start;
	gap: 0.55rem;
	padding: 0.5rem 0.65rem;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: var(--card);
}

.book-journal-item--quote {
	border-left: 3px solid var(--accent);
}

.book-journal-kind {
	display: inline-flex;
	padding-top: 0.15rem;
	color: var(--ink-soft);
}

.book-journal-item--quote .book-journal-kind {
	color: var(--accent);
}

.book-journal-kind svg {
	width: 0.95rem;
	height: 0.95rem;
}

.book-journal-text {
	display: grid;
	gap: 0.15rem;
	min-width: 0;
}

.book-journal-text > span {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	line-height: 1.5;
}

.book-journal-item--quote .book-journal-text > span {
	font-family: var(--font-read);
	font-style: italic;
}

.book-journal-text small {
	color: var(--ink-soft);
}

.book-journal-item .icon-btn {
	min-width: 40px;
	min-height: 40px;
	color: var(--ink-soft);
}

/* My Journal → Notes & Quotes */
.journal-notes > .toolbar {
	align-items: flex-start;
	gap: 0.75rem;
}

.journal-notes > .toolbar .hint {
	margin: 0.2rem 0 0;
}

.journal-notes > .toolbar .btn-main {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	white-space: nowrap;
}

.journal-notes > .toolbar .btn-main svg {
	width: 1rem;
	height: 1rem;
}

.series-tracker-stats.journal-notes-stats,
:root.is-app .series-tracker-stats.journal-notes-stats {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.journal-notes-list {
	display: grid;
	gap: 0.75rem;
	margin-top: 0.85rem;
}

.journal-notes-empty .btn-main {
	margin-top: 0.4rem;
}

.journal-entry {
	display: grid;
	gap: 0.55rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--card);
}

.journal-entry--quote {
	border-left: 3px solid var(--accent);
}

.journal-entry-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.journal-entry-kind {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.journal-entry--quote .journal-entry-kind {
	color: var(--accent);
}

.journal-entry-kind svg {
	width: 0.9rem;
	height: 0.9rem;
}

.journal-entry-actions {
	display: flex;
	gap: 0.2rem;
}

.journal-entry-actions .icon-btn {
	min-width: 44px;
	min-height: 44px;
	color: var(--ink-soft);
}

.journal-entry-actions .icon-btn svg {
	width: 1.05rem;
	height: 1.05rem;
}

.journal-entry-favorite.active {
	color: var(--accent);
}

.journal-entry-favorite.active svg {
	fill: currentColor;
}

.journal-entry-body {
	margin: 0;
	color: var(--ink);
	line-height: 1.6;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

blockquote.journal-entry-body {
	padding: 0;
	border: 0;
	font-family: var(--font-read);
	font-size: 1.05rem;
	font-style: italic;
}

.journal-entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.75rem;
	font-size: 0.8rem;
	color: var(--ink-soft);
}

.journal-entry-book {
	min-height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
	font: inherit;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.journal-entry-book:hover,
.journal-entry-book:focus-visible {
	color: var(--accent);
	text-decoration: underline;
}

.journal-entry-author {
	font-weight: 400;
	color: var(--ink-soft);
}

.journal-kind-field {
	margin: 0;
	padding: 0;
	border: 0;
}

.journal-kind-field legend {
	margin-bottom: 0.35rem;
}

.journal-kind-toggle input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.journal-kind-toggle label {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0.4rem 1rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--card);
	color: var(--ink-soft);
	font-size: 0.85rem;
	cursor: pointer;
}

.journal-kind-toggle input:checked + label {
	border-color: color-mix(in srgb, var(--accent) 32%, transparent);
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	color: var(--accent);
}

.journal-kind-toggle input:focus-visible + label {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

@media (max-width: 620px) {
	.journal-notes > .toolbar {
		flex-direction: column;
	}

	.journal-notes > .toolbar .btn-main {
		width: 100%;
		justify-content: center;
	}

	.series-tracker-stats.journal-notes-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Four journal sections don't fit one row on a phone: a 2×2 grid keeps every label whole.
	   (The native app shell lays these tabs out itself.) */
	:root:not(.is-app) .journal-tabs {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
		border-radius: 16px;
	}

	:root:not(.is-app) .journal-tabs button {
		justify-content: center;
		text-align: center;
	}
}

.bookcase-color-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.bookcase-swatch {
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	border: 2px solid transparent;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.bookcase-swatch.active {
	border-color: var(--accent);
}

.series-search {
	width: 100%;
	margin-bottom: 0.75rem;
}

/* Hover effects (restored) */

.challenge-summary-card:hover {
	border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
	background: color-mix(in srgb, var(--accent) 12%, var(--btn-sub-bg));
}

.challenge-book-cover-add:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.challenge-book-menu-actions button:hover {
	background: color-mix(in srgb, var(--danger) 12%, transparent);
}

.tbr-section-heading,
.tbr-catalog-heading {
	margin: 1rem 0 0.4rem;
	font-size: 0.95rem;
	font-weight: 700;
}

/* Earlier years' yearly challenges, below the live ones. */
.past-challenges {
	margin-top: 1.1rem;
}

.past-challenges h4 {
	margin: 0 0 0.5rem;
	font-size: 0.95rem;
	color: var(--ink-soft);
}

.past-challenges-list {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.past-challenges-list li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--card);
}

.past-challenge-icon {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	color: var(--ink-soft);
	background: color-mix(in srgb, var(--ink) 7%, transparent);
}

.past-challenges-list li.is-finished .past-challenge-icon {
	color: var(--accent);
	background: color-mix(in srgb, var(--accent) 14%, var(--card));
}

.past-challenge-icon svg {
	width: 17px;
	height: 17px;
}

.past-challenge-text {
	display: grid;
	flex: 1;
	min-width: 0;
}

.past-challenge-text small {
	color: var(--ink-soft);
}

/* styles/book-picker.css */
.book-picker-viewport {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	height: 176px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: color-mix(in srgb, var(--card) 92%, var(--accent) 3%);
	margin: 0.75rem 0;
	mask-image: linear-gradient(90deg, transparent 0, black 12%, black 88%, transparent 100%);
}

.book-picker-track {
	display: flex;
	gap: 14px;
	transform: translateX(0);
	will-change: transform;
}

.book-picker-card {
	flex: 0 0 auto;
	width: 118px;
	height: 168px;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
	background: var(--btn-sub-bg);
}

.book-picker-card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.book-picker-card-empty {
	width: 100%;
	height: 100%;
	background: var(--btn-sub-bg);
}

.book-picker-pointer {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	width: 0;
	height: 0;
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	border-top: 10px solid var(--accent-2);
}

.book-picker-result {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.85rem;
	margin: 0.75rem 0;
	border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
	border-radius: 6px;
	background: color-mix(in srgb, var(--accent) 11%, var(--card));
	animation: book-picker-reveal 320ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.book-picker-result {
		animation: none;
	}
}

.book-picker-result img,
.book-picker-result .book-picker-card-empty {
	flex: 0 0 auto;
	width: 72px;
	height: 104px;
	border-radius: 6px;
	object-fit: cover;
}

.book-picker-result h3 {
	margin: 0.15rem 0;
}

.book-picker-result-kicker {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0.04em;
	color: var(--accent);
}

.book-picker-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.book-picker-result [data-book-picker-start],
.book-picker-result [data-book-picker-tbr] {
	padding: 0.42rem 0.7rem;
	font-size: 0.8rem;
}

.book-picker-result [data-book-picker-tbr] {
	border: 1px solid var(--accent);
	background: transparent;
	color: var(--accent);
}

.book-picker-result [data-book-picker-tbr]:hover:not(:disabled) {
	background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.book-picker-result [data-book-picker-tbr]:disabled {
	opacity: 0.7;
	cursor: default;
}

@keyframes book-picker-reveal {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

.book-picker-filters {
	display: grid;
	gap: 0.45rem;
	margin-top: 0.25rem;
}

.book-picker-filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.book-picker-filter {
	padding: 0.32rem 0.7rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.8rem;
	cursor: pointer;
}

.book-picker-filter:hover {
	border-color: var(--accent);
}

.book-picker-filter[aria-pressed="true"] {
	border-color: var(--accent);
	background: color-mix(in srgb, var(--accent) 16%, transparent);
	color: var(--accent);
	font-weight: 700;
}

.book-picker-genres {
	position: relative;
}

.book-picker-genre-dropdown summary {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	max-width: 100%;
	padding: 0.32rem 0.7rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 0.8rem;
	cursor: pointer;
	list-style: none;
}

.book-picker-genre-dropdown summary::-webkit-details-marker {
	display: none;
}

.book-picker-genre-dropdown summary::after {
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	margin-left: 0.15rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.book-picker-genre-dropdown[open] summary::after {
	transform: translateY(2px) rotate(-135deg);
}

.book-picker-genre-dropdown summary:hover,
.book-picker-genre-dropdown[open] summary {
	border-color: var(--accent);
}

.book-picker-genre-label {
	color: var(--ink-soft);
}

.book-picker-genre-value {
	overflow: hidden;
	font-weight: 700;
	color: var(--accent);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.book-picker-genre-menu {
	position: absolute;
	top: calc(100% + 0.35rem);
	left: 0;
	z-index: 5;
	display: grid;
	min-width: 13rem;
	max-height: 16rem;
	overflow-y: auto;
	padding: 0.35rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--card);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.book-picker-genre-option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.5rem;
	border-radius: 6px;
	font-size: 0.85rem;
	cursor: pointer;
}

.book-picker-genre-option:hover {
	background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.book-picker-genre-option input {
	accent-color: var(--accent);
}

/* styles/trinkets.css */
.trinket-tray {
	padding: 0;
	border: 0;
	background: none;
}

.trinket-tray-list {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin-top: 0.5rem;
}

.trinket-tray-item {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 0.2rem;
	width: 96px;
	padding: 0.55rem 0.4rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--tint-trinket-item-bg);
	text-align: center;
	font-size: 0.76rem;
}

.trinket-tray-item.locked {
	opacity: 0.55;
}

.trinket-tray-item.unlocked {
	border-color: var(--tint-trinket-unlocked-border);
	background: var(--tint-trinket-unlocked-bg);
}

.trinket-tray-item.hidden-trinket {
	opacity: 0.7;
}

.trinket-tray-item p {
	margin: 0;
	font-size: 0.7rem;
}

.trinket-visibility-btn {
	position: absolute;
	top: 0.3rem;
	right: 0.3rem;
	width: 22px;
	height: 22px;
	padding: 0;
	display: inline-grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: var(--card);
	color: var(--ink-soft);
}

.trinket-visibility-btn svg {
	width: 13px;
	height: 13px;
}

.trinket-progress {
	width: 100%;
	height: 6px;
	margin-top: 0.15rem;
	border-radius: 999px;
	overflow: hidden;
	background: color-mix(in srgb, var(--accent) 15%, transparent);
}

.trinket-progress > div {
	height: 100%;
	background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff));
	transition: width 320ms ease;
}

.trinket-progress-label {
	margin: 0.1rem 0 0;
	font-size: 0.66rem;
	color: var(--ink-soft);
}

.trinket-tray-badge {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #d9cdbb;
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 1px 2px 3px rgba(0, 0, 0, 0.25);
}

.trinket-tray-badge svg {
	width: 20px;
	height: 20px;
}

.trinket-tray-item.locked .trinket-tray-badge {
	color: #8a7864;
}

.trinket-tray-badge.is-illustration {
	background: none;
	box-shadow: none;
	width: 34px;
	height: 48px;
}

.trinket-tray-badge.is-illustration svg {
	width: 100%;
	height: 100%;
}

.trinket-tray-badge.is-illustration.locked-illustration {
	background: #d9cdbb;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* styles/bookshelf.css */
.bookshelf-canvas {
	position: relative;
	height: 1000px;
	border: 1px solid #c9b39c;
	border-radius: 6px;
	background-color: var(--wood-base, #6b4a30);
	background-image:
		repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 150px, rgba(0, 0, 0, 0.35) 150px, rgba(0, 0, 0, 0.35) 164px),
		linear-gradient(180deg, var(--wood-light, #7a5638), var(--wood-dark, #5b3d26));
	overflow: hidden auto;
}

.book-spine {
	position: absolute;
	width: 40px;
	height: 140px;
	transform: translate(-50%, -50%);
	border-radius: 3px;
	border: 1px solid rgba(0, 0, 0, 0.35);
	box-shadow: 1px 0 3px rgba(0, 0, 0, 0.35) inset, 2px 2px 4px rgba(0, 0, 0, 0.35);
	cursor: grab;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0.4rem 0.2rem;
	transition: left 0.15s ease, top 0.15s ease;
}

.book-spine:active,
.book-spine.dragging {
	cursor: grabbing;
	z-index: 5;
	transition: none;
}

.book-spine span {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 700;
	max-height: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.book-spine.has-cover {
	width: 46px;
	background-size: cover;
	background-position: center;
}

.book-spine.has-cover::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 3px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.65) 100%);
}

.book-spine.has-cover span {
	position: relative;
	z-index: 1;
}

.shelf-trinket {
	position: absolute;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #fff;
	cursor: grab;
	border: 2px solid rgba(255, 255, 255, 0.55);
	box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.15), 2px 3px 5px rgba(0, 0, 0, 0.45);
	transition: left 0.15s ease, top 0.15s ease;
}

.shelf-trinket svg {
	width: 22px;
	height: 22px;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}

.shelf-trinket.glow {
	animation: trinket-glow 2.4s ease-in-out infinite;
}

@keyframes trinket-glow {
	0%, 100% { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.15), 2px 3px 5px rgba(0, 0, 0, 0.45), 0 0 6px 1px rgba(255, 200, 120, 0.35); }
	50% { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.15), 2px 3px 5px rgba(0, 0, 0, 0.45), 0 0 16px 5px rgba(255, 200, 120, 0.75); }
}

@media (prefers-reduced-motion: reduce) {
	.shelf-trinket.glow {
		animation: none;
		box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.15), 2px 3px 5px rgba(0, 0, 0, 0.45), 0 0 10px 2px rgba(255, 200, 120, 0.5);
	}
}

.shelf-trinket:active,
.shelf-trinket.dragging {
	cursor: grabbing;
	z-index: 5;
	transition: none;
}

.shelf-trinket.is-illustration {
	width: 44px;
	height: 140px;
	border: none;
	box-shadow: none;
	background: none;
}

.shelf-trinket.is-illustration svg {
	width: 100%;
	height: 100%;
	filter: drop-shadow(1px 3px 3px rgba(0, 0, 0, 0.45));
}

.shelf-article {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
}

.bookshelf-frame {
	padding: 1rem;
	border-radius: 6px;
	border: 1px solid var(--wood-dark, #d1b89f);
	background:
		repeating-linear-gradient(
			180deg,
			rgba(113, 70, 35, 0.16) 0,
			rgba(113, 70, 35, 0.16) 6px,
			rgba(225, 194, 159, 0.32) 6px,
			rgba(225, 194, 159, 0.32) 80px
		),
		linear-gradient(135deg, var(--wood-light, #c08f61) 0%, var(--wood-base, #e7c69f) 45%, var(--wood-dark, #b77d4f) 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* Once the rows are measured (app/shelf-planks.js), each plank sits directly under its row of cards
   instead of repeating every 80px. The repeating pattern above stays as the fallback. */
.bookshelf-frame.shelf-aligned {
	background:
		var(--shelf-planks),
		linear-gradient(rgba(225, 194, 159, 0.32), rgba(225, 194, 159, 0.32)),
		linear-gradient(135deg, var(--wood-light, #c08f61) 0%, var(--wood-base, #e7c69f) 45%, var(--wood-dark, #b77d4f) 100%);
}

.card-title {
	font-weight: 700;
	margin-bottom: 0.85rem;
	font-size: 1.4rem;
	line-height: 1.2;
}

/* styles/forms-dialogs.css */
.auth-columns {
	display: grid;
	gap: 0.85rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.auth-columns-single {
	grid-template-columns: 1fr;
	max-width: 520px;
	margin: 0 auto;
}

.auth-panel-page {
	overflow: visible;
}

.feature-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.feature-list h3 {
	margin: 0 0 0.3rem;
	font-size: 1rem;
}

.feature-list p {
	margin: 0;
	line-height: 1.5;
}

@media (max-width: 620px) {
	.feature-list {
		grid-template-columns: 1fr;
	}
}

.settings-card {
	max-width: 620px;
}

.profile-options-panel {
	display: grid;
	gap: 0.65rem;
	margin: 0.25rem 0;
	padding: 0.85rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--strip-bg);
}

.profile-options-heading {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.profile-options-heading h3 {
	margin: 0;
	font-size: 1rem;
}

.favorite-book-search {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.favorite-book-search input {
	min-width: 0;
}

.auth-card {
	padding: 0.82rem;
	border-radius: 6px;
	border: 1px solid var(--auth-card-border);
	background: var(--auth-card-bg);
	display: grid;
	gap: 0.55rem;
}

.auth-card h3 {
	font-size: 0.98rem;
	margin-bottom: 0.1rem;
}

.app-dialog {
	position: fixed;
	inset: 0;
	margin: auto;
	width: min(480px, calc(100% - 2rem));
	max-height: calc(100vh - 2rem);
	max-height: calc(100dvh - 2rem);
	overflow: auto;
	overscroll-behavior: contain;
	padding: 1.1rem;
	border: 1px solid var(--dialog-border);
	border-radius: 8px;
	background: var(--dialog-bg);
	color: var(--ink);
	box-shadow: 0 24px 70px rgba(19, 34, 45, 0.28);
}

.app-dialog::backdrop {
	background: var(--backdrop);
}

#club-book-history-dialog {
	width: min(560px, calc(100% - 2rem));
}

#collective-challenge-search-results {
	min-height: 40vh;
	max-height: 40vh;
	overflow-y: auto;
}

.club-book-history-chapters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.6rem;
}

.club-book-history-chapters .chapter-row {
	width: auto;
}

.club-book-history-messages {
	max-height: 45vh;
	overflow-y: auto;
	margin-bottom: 0.6rem;
}

.dialog-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.35rem;
}

.dialog-heading h2 {
	font-family: var(--font-read);
	font-size: 1.28rem;
}

.app-dialog .auth-card {
	margin-top: 0.9rem;
}

.library-export {
	margin-top: 1rem;
	padding-top: 0.9rem;
	border-top: 1px solid color-mix(in srgb, var(--ink-soft) 40%, var(--auth-card-border));
}

.library-export summary {
	width: fit-content;
	cursor: pointer;
	color: var(--accent);
	font-size: 0.92rem;
	font-weight: 700;
}

.library-export-body {
	display: grid;
	gap: 0.7rem;
	margin-top: 0.75rem;
}

.export-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 0.4rem 0.8rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.export-options legend {
	margin-bottom: 0.4rem;
	padding: 0;
	font-size: 0.9rem;
	font-weight: 700;
}

.export-options label {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.9rem;
}

.export-options .field-hint {
	grid-column: 1 / -1;
	margin: 0;
}

.file-picker-row {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	min-width: 0;
}

.visually-hidden-file,
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.file-picker {
	flex: 0 0 auto;
	cursor: pointer;
}

.file-picker-row:has(.visually-hidden-file:focus-visible) .file-picker {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.file-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--ink-soft);
	font-size: 0.84rem;
}

.duplicate-book-notice {
	margin-top: 0.6rem;
	padding: 0.58rem 0.65rem;
	border-left: 4px solid var(--accent-2);
	border-radius: 5px;
	background: color-mix(in srgb, var(--accent-2) 10%, transparent);
	color: #76500f;
	font-size: 0.88rem;
}


.auth-title-center {
	text-align: center;
}

/* Profile Settings dialog: sticky header + footer, tabbed panels. */
.settings-dialog {
	width: min(640px, calc(100% - 2rem));
	height: min(720px, calc(100vh - 2rem));
	height: min(720px, calc(100dvh - 2rem));
	padding: 0;
}

.settings-dialog[open] {
	display: flex;
	flex-direction: column;
}

.settings-header {
	position: sticky;
	top: 0;
	z-index: 2;
	padding: 1.1rem 1.1rem 0;
	background: var(--dialog-bg);
	border-bottom: 1px solid var(--line);
}

.settings-tabs {
	display: flex;
	gap: 0.25rem;
	overflow-x: auto;
	margin-top: 0.4rem;
}

.settings-tab {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0.5rem 0.85rem;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	background: transparent;
	color: var(--ink-soft);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.settings-tab:hover {
	color: var(--ink);
}

.settings-tab.active {
	color: var(--ink);
	border-bottom-color: var(--accent);
}

.settings-tab:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

.app-dialog .settings-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 1.1rem 1.1rem 0;
	max-width: none;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.settings-panel {
	display: grid;
	gap: 0.85rem;
	align-content: start;
}

.settings-panel[hidden] {
	display: none;
}

.settings-footer {
	position: sticky;
	bottom: 0;
	z-index: 2;
	display: grid;
	gap: 0.5rem;
	margin: auto -1.1rem 0;
	padding: 0.75rem 1.1rem;
	border-top: 1px solid var(--line);
	background: var(--dialog-bg);
}

.settings-footer .hint {
	margin: 0;
}

.settings-footer .btn-row {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
}

.unsaved-badge {
	color: var(--ink-soft);
	font-size: 0.85rem;
	font-weight: 700;
}

.unsaved-badge::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 0.4rem;
	border-radius: 50%;
	background: var(--accent);
}

.settings-discard {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--btn-sub-bg);
	font-weight: 700;
}

.settings-discard[hidden] {
	display: none;
}

.settings-discard span {
	flex: 1 1 auto;
}

.field-hint {
	margin: 0.2rem 0 0;
	color: var(--ink-soft);
	font-size: 0.85rem;
}

.field-hint[data-level="weak"] {
	color: var(--danger);
}

.password-row {
	display: flex;
	gap: 0.5rem;
}

.password-row input {
	flex: 1;
	min-width: 0;
}

.char-count {
	justify-self: end;
	color: var(--ink-soft);
	font-size: 0.8rem;
}

.char-count.near-limit {
	color: var(--danger);
	font-weight: 700;
}

.settings-group {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0.85rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--strip-bg);
}

.settings-group legend {
	padding: 0 0.4rem;
	font-weight: 700;
}

.danger-zone {
	display: grid;
	gap: 0.4rem;
	margin-top: 0.5rem;
	padding: 0.85rem;
	border: 1px solid var(--danger);
	border-radius: 8px;
}

.danger-zone h3 {
	margin: 0;
	color: var(--danger);
	font-size: 1rem;
}

.danger-zone .field-hint {
	margin: 0;
}

.danger-zone .delete-account-btn {
	margin-top: 0;
}

.support-row {
	margin-top: 1rem;
}

.support-row .btn-sub {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.support-row .btn-sub svg {
	width: 16px;
	height: 16px;
	flex: none;
}

.danger-zone .btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Theme swatches */
.theme-categories {
	display: grid;
	gap: 1rem;
	margin-top: 0.5rem;
}

.theme-category-heading {
	margin: 0 0 0.45rem;
	color: var(--ink-soft);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.theme-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
	gap: 0.6rem;
}

.theme-option {
	display: grid;
	gap: 0.45rem;
	padding: 0.5rem;
	border: 2px solid var(--line);
	border-radius: 10px;
	background: var(--btn-sub-bg);
	color: var(--ink);
	font: inherit;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}

.theme-option:hover {
	border-color: var(--ink-soft);
}

.theme-option.selected {
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent);
}

.theme-option:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.theme-swatch {
	position: relative;
	display: block;
	height: 44px;
	overflow: hidden;
	border-radius: 6px;
	background: var(--sw-bg);
	border: 1px solid rgba(128, 128, 128, 0.35);
}

.theme-swatch i,
.theme-swatch b {
	position: absolute;
	display: block;
	border-radius: 999px;
}

.theme-swatch i {
	left: 8px;
	top: 8px;
	width: 46%;
	height: 6px;
	background: var(--sw-ink);
	opacity: 0.85;
}

.theme-swatch b {
	left: 8px;
	bottom: 8px;
	width: 34px;
	height: 12px;
	background: var(--sw-accent);
}

/* Favorite book chips */
.chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.25rem 0 0;
	padding: 0;
	list-style: none;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	max-width: 100%;
	padding: 0.25rem 0.3rem 0.25rem 0.7rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--btn-sub-bg);
	font-size: 0.9rem;
}

.chip span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chip-remove {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ink-soft);
	cursor: pointer;
}

.chip-remove:hover {
	background: var(--line);
	color: var(--ink);
}

.chip-remove svg {
	width: 14px;
	height: 14px;
}

.chip-empty {
	color: var(--ink-soft);
	font-size: 0.9rem;
}

@media (max-width: 620px) {
	.settings-dialog {
		height: calc(100vh - 1rem);
		height: calc(100dvh - 1rem);
		width: calc(100% - 1rem);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.theme-option,
	.settings-tab {
		transition: border-color 0.15s ease, color 0.15s ease;
	}
}

/* Landing page: asymmetric split. Value prop + features on the left, the sign-in panel (the one real
   card on the page) on the right. Collapses to intro, sign-in, features on narrow screens so the form
   stays above the fold on phones. */
.auth-wrap.landing {
	position: relative;
	width: min(1120px, calc(100% - 2rem));
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "intro" "signin" "features" "legal";
	align-content: center;
	gap: 1.75rem;
	padding: 4.5rem 0 2rem;
}

.landing-theme-toggle {
	position: absolute;
	top: 1rem;
	right: 0;
}

.landing-intro {
	grid-area: intro;
	max-width: 34rem;
}

/* Brand mark, shown as an app-icon tile. The PNG is dark green on transparent, so the tile stays light in
   every theme to keep the mark legible on dark backgrounds too. */
.landing-logo {
	display: block;
	box-sizing: content-box;
	width: auto;
	height: 60px;
	margin-bottom: 1.4rem;
	padding: 0.7rem;
	border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
	border-radius: 18px;
	background: light-dark(#ffffff, #f6f6f2);
	box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 10%, transparent);
}

/* Full logo with wordmark, no tile: dark themes swap to the cream-lettered variant (data-scheme set by theme.js). */
.landing-wordmark img {
	display: block;
	width: auto;
	height: clamp(150px, 18vw, 220px);
	margin-bottom: 1.6rem;
	font-size: 1.5rem;
}

.landing-wordmark .logo-on-dark,
:root[data-scheme="dark"] .landing-wordmark .logo-on-light {
	display: none;
}

:root[data-scheme="dark"] .landing-wordmark .logo-on-dark {
	display: block;
}

.landing-intro h1 {
	margin: 0;
	font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.landing-lede {
	margin: 0.9rem 0 0;
	max-width: 34ch;
	color: var(--ink-soft);
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
	line-height: 1.5;
}

.landing-features {
	grid-area: features;
	max-width: 36rem;
}

.feature-list-landing {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.feature-list-landing li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.85rem;
	align-items: start;
}

.auth-wrap.landing .feature-list-landing h3 {
	margin: 0.1rem 0 0.2rem;
	font-size: 1rem;
	line-height: 1.3;
}

.feature-list-landing p {
	margin: 0;
	text-wrap: pretty;
	color: var(--ink-soft);
	font-size: 0.92rem;
	line-height: 1.5;
}

.feature-icon {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	color: var(--accent);
}

.feature-icon svg {
	width: 20px;
	height: 20px;
}

.auth-wrap.landing .landing-signin {
	grid-area: signin;
	width: 100%;
	max-width: 440px;
	padding: 1.75rem;
	border-radius: 16px;
	box-shadow: 0 24px 60px color-mix(in srgb, var(--ink) 14%, transparent);
}

.landing-signin-title {
	margin: 0 0 1.1rem;
	font-size: 1.45rem;
}

/* The landing form sits directly in the panel: no card-inside-a-card. */
.landing-signin .auth-card {
	padding: 0;
	border: 0;
	background: none;
	gap: 0.85rem;
}

.landing-form-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
}

.landing-form-meta .remember-me-row {
	margin: 0;
}

.landing-submit {
	width: 100%;
	padding-block: 0.8rem;
}

.landing-signin .hint {
	margin: 0;
}

.landing-switch {
	margin: 1.25rem 0 0;
	padding-top: 1.1rem;
	border-top: 1px solid var(--line);
	color: var(--ink-soft);
	font-size: 0.9rem;
	text-align: center;
}

.landing-switch .text-action {
	font-size: inherit;
	font-weight: 700;
}

.auth-wrap.landing .legal-links {
	grid-area: legal;
	margin-top: 0.5rem;
}

@media (min-width: 900px) {
	.auth-wrap.landing {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		grid-template-areas:
			"intro signin"
			"features signin"
			"legal legal";
		column-gap: clamp(2.5rem, 6vw, 6rem);
		row-gap: 2.5rem;
		align-items: center;
		padding: 5rem 0 2.5rem;
	}

	.landing-intro {
		align-self: end;
	}

	.landing-features {
		align-self: start;
	}

	.auth-wrap.landing .landing-signin {
		justify-self: end;
	}
}

@media (max-width: 899px) {
	.auth-wrap.landing .landing-signin {
		justify-self: center;
	}

	.landing-intro,
	.landing-features {
		justify-self: center;
		width: 100%;
		max-width: 440px;
	}
}

@media (max-width: 520px) {
	.auth-wrap.landing {
		padding-top: 4rem;
		gap: 1.5rem;
	}

	.auth-wrap.landing .landing-signin {
		padding: 1.25rem;
	}

	.landing-logo {
		height: 46px;
		padding: 0.55rem;
		border-radius: 14px;
		margin-bottom: 1rem;
	}

	.feature-list-landing {
		grid-template-columns: 1fr;
		gap: 1.1rem;
	}
}

#club-delete-form {
	display: grid;
	gap: 0.65rem;
}

/* The new-owner picker belongs to the "pass ownership" choice above it. */
#club-delete-owner-field {
	margin-left: 1.6rem;
}

.club-settings-dialog {
	width: min(560px, calc(100% - 2rem));
}

.club-settings-section {
	display: grid;
	gap: 0.65rem;
	padding: 1rem 0;
	border-top: 1px solid var(--line);
}

.club-settings-section h3 {
	margin: 0;
	font-size: 1rem;
}

.club-settings-members {
	display: grid;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.club-settings-members li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.35rem 0.6rem;
	border: 1px solid var(--line);
	border-radius: 6px;
}

.club-settings-members li > span:first-child {
	min-width: 0;
	overflow-wrap: anywhere;
	font-weight: 600;
}

.club-settings-member-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.club-settings-danger h3 {
	color: var(--danger, #a3263b);
}

.dialog-heading + .club-settings-section {
	border-top: 0;
	padding-top: 0.25rem;
}

.delete-account-clubs {
	display: grid;
	gap: 0.5rem;
	margin: 0.5rem 0;
	padding: 0.75rem;
	border: 1px solid var(--line);
	border-radius: 6px;
}

.delete-account-clubs[hidden] {
	display: none;
}

.delete-account-clubs legend {
	padding: 0 0.3rem;
	font-weight: 700;
}

.delete-account-club-list {
	display: grid;
	gap: 0.5rem;
}

/* Library layout list (Settings > Appearance). */
.library-layout-list {
	display: grid;
	gap: 0.4rem;
	margin: 0.2rem 0 0;
	padding: 0;
	list-style: none;
}

.layout-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.35rem 0.4rem 0.35rem 0.85rem;
	border-radius: 14px;
	background: color-mix(in srgb, var(--ink) 4%, var(--card));
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
}

.layout-row.is-hidden .layout-toggle span {
	color: var(--ink-soft);
}

.layout-toggle {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	font-weight: 600;
	cursor: pointer;
}

.layout-toggle input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--accent);
}

.layout-move {
	display: inline-flex;
	gap: 0.15rem;
}

.layout-move .icon-btn:disabled {
	opacity: 0.35;
}

.library-layout-reset {
	justify-self: start;
	margin-top: 0.5rem;
}

/* Reading goal reached: a centred card with one celebratory pop on the trophy. */
.goal-celebration {
	text-align: center;
}

.goal-celebration h2 {
	font-family: var(--font-read);
	font-size: 1.4rem;
	margin: 0.75rem 0 0.35rem;
}

.goal-celebration .btn-row {
	justify-content: center;
	margin-top: 1rem;
}

.goal-celebration-badge {
	display: inline-grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 999px;
	color: var(--accent);
	background: color-mix(in srgb, var(--accent) 14%, var(--card));
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 7%, transparent);
}

.goal-celebration-badge svg {
	width: 36px;
	height: 36px;
}

.goal-celebration[open] .goal-celebration-badge {
	animation: goal-pop 520ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes goal-pop {
	from { transform: scale(0.4) rotate(-12deg); opacity: 0; }
	to { transform: scale(1) rotate(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.goal-celebration[open] .goal-celebration-badge {
		animation: none;
	}
}

/* First sign-in walkthrough: three centred steps with dots and Back/Next. */
.welcome-dialog {
	width: min(440px, calc(100vw - 2rem));
}

.welcome-step {
	display: grid;
	justify-items: center;
	gap: 0.4rem;
	text-align: center;
	min-height: 15rem;
	align-content: center;
}

.welcome-step[hidden] {
	display: none;
}

.welcome-step h2 {
	font-family: var(--font-read);
	font-size: 1.4rem;
	margin: 0.35rem 0 0;
}

.welcome-kicker {
	margin: 0.5rem 0 0;
	color: var(--accent);
	font-weight: 700;
}

.welcome-badge {
	display: inline-grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 999px;
	color: var(--accent);
	background: color-mix(in srgb, var(--accent) 14%, var(--card));
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 7%, transparent);
}

.welcome-badge svg {
	width: 30px;
	height: 30px;
}

.welcome-features {
	display: grid;
	gap: 0.85rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.welcome-features li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.welcome-features strong,
.welcome-features small {
	display: block;
}

.welcome-features small {
	color: var(--ink-soft);
	font-size: 0.86rem;
	line-height: 1.45;
}

.welcome-feature-icon {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	color: var(--accent);
	background: color-mix(in srgb, var(--accent) 12%, var(--card));
}

.welcome-feature-icon svg {
	width: 18px;
	height: 18px;
}

.welcome-goal-input {
	width: 7rem;
	margin-top: 0.35rem;
	font-size: 1.6rem;
	font-weight: 700;
	text-align: center;
}

.welcome-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1rem;
}

.welcome-dots {
	display: flex;
	gap: 0.4rem;
}

.welcome-dots span {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ink) 18%, transparent);
	transition: width 220ms ease, background-color 220ms ease;
}

.welcome-dots span.is-active {
	width: 22px;
	background: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
	.welcome-dots span {
		transition: none;
	}
}

/* Optional profile picture on the create-account form. */
.register-avatar {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin-bottom: 0.4rem;
}

.register-avatar-preview {
	position: relative;
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border-radius: 999px;
	color: var(--accent);
	background: color-mix(in srgb, var(--accent) 14%, var(--card));
}

.register-avatar-preview svg {
	width: 28px;
	height: 28px;
}

.register-avatar-preview img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.register-avatar-controls {
	display: grid;
	gap: 0.4rem;
	min-width: 0;
}

.register-avatar-title {
	font-weight: 700;
	font-size: 0.92rem;
}

.register-avatar-title small {
	color: var(--ink-soft);
	font-weight: 400;
}

.register-avatar-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}

.register-avatar-buttons label.btn-sub {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding-block: 0.45rem;
	font-size: 0.86rem;
	cursor: pointer;
}

.register-avatar-buttons:has(input:focus-visible) label.btn-sub {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* January recap of last year, then this year's goal. Reuses the welcome dialog's layout. */
.welcome-footer .btn-row {
	margin-left: auto;
}

.new-year-total {
	display: grid;
	margin: 0.4rem 0 0;
}

.new-year-total strong {
	font-family: var(--font-read);
	font-size: 3rem;
	line-height: 1;
	color: var(--accent);
}

.new-year-total span {
	color: var(--ink-soft);
	font-size: 0.9rem;
}

.new-year-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
	width: 100%;
	margin: 0.6rem 0 0;
}

.new-year-stats div {
	padding: 0.55rem 0.6rem;
	border-radius: 10px;
	background: color-mix(in srgb, var(--ink) 5%, transparent);
}

.new-year-stats dt {
	color: var(--ink-soft);
	font-size: 0.78rem;
}

.new-year-stats dd {
	margin: 0.15rem 0 0;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.new-year-dialog [data-new-year-share] {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.new-year-dialog [data-new-year-share][hidden] {
	display: none;
}

/* styles/community-clubs.css */
#community-view > .toolbar {
	padding: 1.25rem 1.25rem 0;
}

.community-tabs {
	display: flex;
	justify-content: flex-end;
	flex: 0 0 auto;
	gap: 0.2rem;
	padding: 0.22rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--btn-sub-bg);
}

.community-tabs button {
	flex: 0 0 auto;
	padding: 0.42rem 0.7rem;
	border: 1px solid transparent;
	border-radius: 7px;
	background: transparent;
	color: var(--ink-soft);
	font-size: 0.8rem;
	font-weight: 700;
}

.community-shell {
	display: grid;
	grid-template-columns: 1fr;
	align-items: stretch;
	padding: 1.25rem;
}.book-clubs-hub,
.friends-hub,
.club-chat-room,
.friend-chat-room
{
	width: 100%;
	min-width: 0;
	padding: 1rem;
	border: 1px solid rgba(230, 216, 200, 0.9);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.54);
}

.book-clubs-hub {
	display: grid;
	grid-template-columns: minmax(300px, 0.42fr) minmax(0, 1fr);
	grid-template-areas:
		"heading heading"
		"clubs chat"
		"invites chat";
	gap: 1rem;
	background: color-mix(in srgb, var(--accent) 4%, var(--card));
}

.friends-hub {
	display: grid;
	grid-template-columns: minmax(300px, 0.38fr) minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"heading heading"
		"sidebar chat";
	align-items: stretch;
	gap: 1rem;
}

.friends-hub > .friends-sidebar {
	grid-area: sidebar;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
	min-height: 0;
	max-height: min(70vh, 760px);
	overflow-y: auto;
	padding-right: 0.2rem;
}

.friends-info {
	display: grid;
	gap: 0.55rem;
	align-content: start;
}

.club-chat-room,
.friend-chat-room {
	padding: 0.9rem;
	background: rgba(255, 255, 255, 0.62);
}

.friend-chat-room {
	display: flex;
	flex-direction: column;
	height: min(70vh, 760px);
	min-height: 420px;
}

.friend-chat-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	flex: 0 0 auto;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--line);
}

.friend-chat-title {
	margin: 0;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--ink);
}

.friend-activity-drawer {
	flex: 0 0 auto;
	margin-top: 0.6rem;
}

.friend-activity-drawer summary {
	cursor: pointer;
	list-style: none;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--accent);
}

.friend-activity-drawer summary::-webkit-details-marker {
	display: none;
}

.friend-activity-drawer[open] summary {
	margin-bottom: 0.5rem;
}

.friend-activity-drawer:has(#friend-profile:empty) {
	display: none;
}

.friend-chat-room .chat-messages {
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
	margin-top: 0.6rem;
}

.friend-chat-room .chat-form {
	flex: 0 0 auto;
	margin: 0.6rem 0 0;
}

.chat-send-btn {
	margin-left: auto;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 999px;
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
}

.chat-send-btn svg {
	display: block;
	width: 18px;
	height: 18px;
}

.club-chat-room {
	grid-area: chat;
}

.club-workspace-inline {
	grid-area: chat;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
}

.club-workspace-back {
	display: none;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.75rem;
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--btn-sub-bg);
	color: var(--ink-soft);
	font-weight: 700;
	font-size: 0.85rem;
}

.book-clubs-hub.club-selected > .community-section-heading,
.book-clubs-hub.club-selected > .book-clubs-list,
.book-clubs-hub.club-selected > .club-invitations {
	display: none;
}

.book-clubs-hub.club-selected {
	grid-template-columns: 1fr;
	grid-template-areas: "chat";
}

.book-clubs-hub.club-selected .club-workspace-back {
	display: inline-flex;
}

.club-workspace-inline .club-workspace-content {
	max-height: min(72vh, 900px);
	overflow-x: hidden;
	overflow-y: auto;
	padding-right: 0.3rem;
	scrollbar-width: thin;
	scrollbar-color: var(--accent) var(--btn-sub-bg);
}

.book-clubs-hub.club-selected .club-workspace-content {
	max-height: none;
	overflow: visible;
}
.club-workspace-inline .club-workspace-content > * {
	min-width: 0;
}
.club-workspace-inline .club-workspace-content::-webkit-scrollbar {
	width: 10px;
}
.club-workspace-inline .club-workspace-content::-webkit-scrollbar-track {
	border-radius: 999px;
	background: var(--btn-sub-bg);
}
.club-workspace-inline .club-workspace-content::-webkit-scrollbar-thumb {
	border: 2px solid var(--btn-sub-bg);
	border-radius: 999px;
	background: var(--accent);
}

.friend-chat-room { grid-area: chat; }

.book-clubs-hub > .community-section-heading,
.friends-hub > .community-section-heading { grid-area: heading; }

.book-clubs-hub > .book-clubs-list { grid-area: clubs; }

.book-clubs-hub > .club-invitations { grid-area: invites; }

.recommendations-panel {
	padding-top: 0.85rem;
	border-top: 1px solid var(--line);
}

#friend-profile:empty {
	display: none;
}

.community-section-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.8rem;
	margin-bottom: 0.75rem;
}

.section-kicker {
	color: var(--accent);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: none;
}

.friend-form,
.chat-form {
	display: grid;
	gap: 0.65rem;
	margin: 0.9rem 0 1rem;
	padding: 0.85rem;
	border-radius: 6px;
	border: 1px solid var(--auth-card-border);
	background: rgba(255, 255, 255, 0.7);
}

.friends-list {
	display: grid;
	gap: 0.85rem;
}

.friends-list-items,
.friend-request-list {
	display: grid;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}


.friend-requests {
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--auth-card-border);
}

.friend-requests-heading {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.5rem;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--ink-soft);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.friend-requests-count {
	display: inline-grid;
	place-items: center;
	min-width: 1.3rem;
	height: 1.3rem;
	padding: 0 0.3rem;
	border-radius: 999px;
	background: var(--accent);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
}

.friend-request-badge {
	flex: none;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--accent) 16%, transparent);
	color: var(--accent);
	font-size: 0.7rem;
	font-weight: 700;
	white-space: nowrap;
}

.friend-request-badge.pending {
	background: var(--btn-sub-bg);
	color: var(--ink-soft);
}

.friend-item.friend-request.incoming {
	border-color: color-mix(in srgb, var(--accent) 45%, var(--auth-card-border));
	background: color-mix(in srgb, var(--accent) 6%, var(--card));
}

.friend-search-results {
	display: grid;
	gap: 0.4rem;
	max-height: 220px;
	overflow-y: auto;
}

.friend-search-item .name {
	font-weight: 600;
	font-size: 0.9rem;
}

.book-clubs-panel {
	padding-bottom: 1rem;
	border-bottom: 1px solid color-mix(in srgb, var(--ink-soft) 40%, var(--auth-card-border));
	margin-bottom: 1rem;
}

.book-clubs-panel .toolbar {
	margin-bottom: 0.6rem;
}

.friends-heading {
	margin-bottom: 0;
}

.friends-heading .card-title {
	margin-bottom: 0;
}

.book-clubs-list {
	display: grid;
	gap: 0.75rem;
}

.book-club-card {
	display: grid;
	gap: 0.8rem;
	padding: 0.9rem;
	border: 1px solid var(--tint-club-card-border);
	border-left: 5px solid var(--accent);
	border-radius: 6px;
	align-self: start;
	background: var(--tint-club-card-bg);
	box-shadow: 0 12px 28px rgba(19, 34, 45, 0.08);
	cursor: pointer;
}

.book-club-card:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--accent) 32%, transparent);
	outline-offset: 2px;
}

.book-club-card.active {
	border-color: color-mix(in srgb, var(--accent) 42%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent), 0 12px 28px rgba(19, 34, 45, 0.08);
}

.book-club-empty {
	display: grid;
	place-items: center;
	gap: 0.35rem;
	min-height: 190px;
	padding: 1.2rem;
	border: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent);
	border-radius: 6px;
	background: var(--card);
	color: var(--ink-soft);
	text-align: center;
}

.book-club-empty svg {
	width: 30px;
	height: 30px;
	color: var(--accent);
}

.book-club-empty strong {
	color: var(--ink);
}.club-room-row
{
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.65rem;
	width: 100%;
	padding: 0.45rem 0.5rem;
	border-radius: 6px;
	background: transparent;
	color: var(--ink);
	text-align: left;
}.club-room-row.active,
.chapter-row.active
{
	border-color: color-mix(in srgb, var(--accent) 36%, transparent);
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	color: var(--accent);
}.club-room-row.active:disabled,
.chapter-row.active:disabled
{
	cursor: default;
	opacity: 1;
}.club-room-row > strong
{
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-width: 0;
}

.club-room-count {
	display: inline-grid;
	place-items: center;
	min-width: 2.25rem;
	height: 1.55rem;
	padding: 0 0.55rem;
	border-radius: 999px;
	background: var(--btn-sub-bg);
	color: var(--ink-soft);
	font-size: 0.78rem;
	font-weight: 700;
}

.club-room-count.has-unread {
	background: #cf6698;
	color: #fff;
}

.club-invitations,
.club-workspace-content {
	display: grid;
	gap: 0.65rem;
}

.club-workspace-dialog {
	width: min(820px, calc(100% - 2rem));
}

.club-workspace-dialog .dialog-heading {
	padding: 0.2rem 0.2rem 0.55rem;
}

.club-workspace-dialog .dialog-heading h2 {
	font-size: clamp(1.65rem, 4vw, 2.6rem);
}

.club-room-list {
	display: grid;
	gap: 0.55rem;
	padding: 0.9rem;
	border-radius: 6px;
	background: var(--tint-club-room-list-bg);
}

.club-room-list-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem;
	margin-bottom: 0.2rem;
}

.club-room-list-heading h3 {
	font-size: 1rem;
}

.club-room-list-heading svg {
	width: 18px;
	height: 18px;
}

.club-room-list-toggle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border: none;
	background: none;
	padding: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.club-room-list-heading .icon-btn {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
}

.club-room-item {
	position: relative;
}

.club-room-item .club-room-row {
	width: 100%;
	padding-right: 2.5rem;
}

.club-room-delete {
	position: absolute;
	top: 50%;
	right: 0.35rem;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	background: transparent;
	border-color: transparent;
	color: var(--danger, #c0392b);
}

.club-room-icon-options {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
	gap: 0.4rem;
}

.club-room-icon-option {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: var(--btn-sub-bg);
	color: var(--ink);
}

.club-room-icon-option svg {
	width: 18px;
	height: 18px;
	pointer-events: none;
}

.club-room-icon-option.selected {
	border-color: var(--accent);
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	color: var(--accent);
}

.club-room-row {
	grid-template-columns: auto minmax(0, 1fr) auto;
	padding: 0.55rem 0.35rem;
}

.club-room-icon {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--tint-club-room-icon-bg);
	color: var(--ink);
	font-weight: 700;
}

.club-room-icon svg {
	width: 19px;
	height: 19px;
}.chapter-row small,
.club-room-row small
{
	display: block;
	color: var(--ink-soft);
	font-size: 0.82rem;
}

.chapter-safety-note,
.chapter-directory {
	padding: 0.9rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--card);
}

.chapter-directory-toggle {
	width: 100%;
	padding: 0.45rem 0.5rem;
	border: none;
	background: none;
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-align: left;
}

.club-past-discussions-back {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: none;
	background: none;
	padding: 0.4rem 0;
	margin-bottom: 0.8rem;
	font: inherit;
	font-weight: 700;
	color: inherit;
	cursor: pointer;
}

.club-past-discussions-back svg {
	width: 20px;
	height: 20px;
}

.club-past-discussions-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.7rem;
}

.club-past-discussion-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: inherit;
}

.club-past-discussion-tile img,
.club-past-discussion-placeholder {
	width: 100%;
	aspect-ratio: 2 / 3;
	border-radius: 6px;
	object-fit: cover;
	background: rgba(31, 42, 53, 0.13);
}

.club-past-discussion-placeholder {
	display: grid;
	place-items: center;
	padding: 0.5rem;
	font-size: 0.8rem;
	font-weight: 700;
	text-align: center;
}

.club-past-discussion-count {
	position: absolute;
	top: 0.45rem;
	right: 0.45rem;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.2rem 0.5rem;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
}

.club-past-discussion-count svg {
	width: 13px;
	height: 13px;
}

.club-past-discussion-tile small {
	color: var(--ink-soft);
	font-size: 0.8rem;
}

.chapter-safety-note {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 0.8rem;
}

.chapter-safety-note .icon-btn {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 30px;
	height: 30px;
	background: transparent;
}

.chapter-note-avatar {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--tint-chapter-avatar-bg);
	color: var(--accent);
}

.chapter-note-avatar svg {
	width: 28px;
	height: 28px;
}

.chapter-list {
	display: grid;
	gap: 0.35rem;
}

.chapter-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.65rem;
	width: 100%;
	padding: 0.5rem 0.35rem;
	border-radius: 6px;
	background: transparent;
	color: var(--ink);
	text-align: left;
}

.skeleton-chapter-row {
	cursor: default;
}

.club-room-window {
	display: grid;
	gap: 0.9rem;
}

.club-room-window-top {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 0.75rem;
	padding-bottom: 0.35rem;
	border-bottom: 1px solid var(--line);
}

.club-room-window-top h3 {
	font-family: var(--font-read);
	font-size: clamp(1.35rem, 3vw, 2rem);
	line-height: 1.12;
}

.club-room-window .chat-messages {
	min-height: 320px;
	max-height: min(52vh, 560px);
}.club-invitation,
.club-reading-item
{
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.6rem;
	border: 1px solid var(--line);
	border-radius: 7px;
	background: var(--card);
}

.club-invitation span,
.club-reading-item .meta {
	flex: 1;
	color: var(--ink-soft);
	font-size: 0.82rem;
}

.club-workspace-section {
	display: grid;
	gap: 0.55rem;
	padding: 0.9rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.68);
}

.club-workspace-section > .btn-sub {
	justify-self: start;
}

.club-workspace-section h3 {
	font-size: 0.96rem;
}

.club-workspace-hero {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	padding: 0.9rem;
	border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
	border-radius: 6px;
	background: color-mix(in srgb, var(--accent) 7%, var(--card));
}

.club-workspace-hero h3 {
	font-family: var(--font-read);
	font-size: 1.28rem;
}

.club-workspace-hero p {
	color: var(--ink-soft);
	font-size: 0.86rem;
}

.club-workspace-hero {
	flex-wrap: wrap;
}

.club-workspace-hero > div {
	flex: 1;
	min-width: 0;
}

.club-workspace-hero-books {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.7rem;
	margin-top: 0.8rem;
	width: 100%;
}

.club-workspace-current-book {
	display: grid;
	gap: 0.35rem;
	min-width: 0;
}

.club-workspace-current-book-cover {
	position: relative;
	width: 110px;
	aspect-ratio: 2 / 3;
	border-radius: 6px;
	overflow: hidden;
	background: rgba(31, 42, 53, 0.13);
}

.club-workspace-current-book-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.club-workspace-current-book-caption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 1.6rem 0.5rem 0.5rem;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.68) 100%);
	color: #fff;
	font-size: 0.82rem;
	font-weight: 700;
	text-align: center;
}

.club-workspace-current-book span {
	display: grid;
	gap: 0.1rem;
}

.club-workspace-current-book small {
	color: var(--ink-soft);
}

.club-past-discussions-entry {
	position: relative;
	width: 110px;
	aspect-ratio: 2 / 3;
	border-radius: 6px;
	overflow: hidden;
	border: none;
	padding: 0;
	cursor: pointer;
	background: rgba(31, 42, 53, 0.13);
}

.club-past-discussions-entry img,
.club-past-discussions-entry .club-past-discussion-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.55);
}

.club-past-discussions-entry-label {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 0.5rem;
	color: #fff;
	font-size: 0.82rem;
	font-weight: 700;
	text-align: center;
	line-height: 1.2;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.club-workspace-inline .club-inline-form,
.club-workspace-inline .club-reading-item,
.club-workspace-inline .club-workspace-hero {
	min-width: 0;
	flex-wrap: wrap;
}

.club-workspace-inline .club-inline-form > * {
	min-width: 0;
}.club-inline-form
{
	display: flex;
	gap: 0.5rem;
}.club-inline-form select
{
	flex: 1;
	min-width: 0;
}

.club-reading-list,
.club-discussions,
.club-workspace-members {
	display: grid;
	gap: 0.45rem;
}

.club-reading-item {
	align-items: flex-start;
	flex-wrap: wrap;
}

.club-reading-item.active {
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent) inset;
}

.club-reading-item > div {
	display: grid;
	gap: 0.25rem;
	flex: 1;
	min-width: 10rem;
}

.club-reading-item label {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.8rem;
}

.club-reading-item input {
	width: 4.5rem;
}

.club-workspace-members span {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 0.88rem;
}

.book-club-heading {
	display: flex;
	justify-content: space-between;
	align-items: start;
	gap: 0.6rem;
}

.book-club-heading .pill {
	flex-shrink: 0;
	white-space: nowrap;
}

.pill.club-role-owner {
	border-color: color-mix(in srgb, var(--accent) 40%, transparent);
	color: color-mix(in srgb, var(--accent) 60%, var(--ink));
	background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.pill.club-role-member {
	color: var(--ink-soft);
}

.book-club-heading h3 {
	font-family: var(--font-read);
	font-size: 1.08rem;
}

.book-club-heading p,
.club-members span {
	font-size: 0.8rem;
	color: var(--ink-soft);
}

.club-members {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin-top: 0.5rem;
}

.club-members span {
	padding: 0.18rem 0.4rem;
	border: 1px solid #d9d2e8;
	border-radius: 999px;
	background: #fff;
}

.club-members-field {
	display: grid;
	gap: 0.45rem;
	padding: 0.7rem;
	border: 1px solid #e1d6ed;
	border-radius: 7px;
}

.club-members-field legend {
	padding: 0 0.3rem;
	font-size: 0.88rem;
	color: var(--ink-soft);
}

.club-member-options {
	display: grid;
	gap: 0.35rem;
}

.friend-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	padding: 0.72rem 0.78rem;
	border-radius: 6px;
	border: 1px solid var(--auth-card-border);
	background: rgba(255, 255, 255, 0.88);
	text-align: left;
}

.friend-select {
	display: flex;
	flex: 1;
	align-items: center;
	min-width: 0;
	padding: 0;
	background: transparent;
	color: inherit;
	text-align: left;
}

.remove-friend {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	color: var(--danger);
	background: #f8dfdc;
	border-color: #efc1bb;
}

.view-friend-profile {
	width: 34px;
	height: 34px;
	padding: 0;
	color: #285f88;
	background: #dcecf7;
	border-color: #b9d5e8;
}

.friend-item.active {
	border-color: color-mix(in srgb, var(--accent) 35%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
}

.friend-item .name {
	font-weight: 700;
	font-size: 0.95rem;
}

.friend-item .meta {
	margin-top: 0.12rem;
	font-size: 0.84rem;
	color: var(--ink-soft);
}

.friend-item .friend-select {
	padding: 0.42rem 0.68rem;
	font-size: 0.8rem;
}

.friend-item .btn-sub {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.42rem 0.68rem;
	font-size: 0.8rem;
	border-radius: 8px;
}

.friend-profile {
	display: grid;
	gap: 0.7rem;
	margin-bottom: 1rem;
	padding: 0.85rem;
	border: 1px solid var(--tint-friend-profile-border);
	border-radius: 8px;
	background: var(--tint-friend-profile-bg);
}

.friend-profile-heading {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.friend-profile-heading img {
	width: 42px;
	height: 42px;
	border: 1px solid var(--tint-friend-avatar-border);
	border-radius: 50%;
	object-fit: cover;
}

.friend-profile-heading h2 {
	font-size: 0.98rem;
	word-break: break-word;
}

.friend-profile-heading p,
.friend-reading span,
.friend-finishes li {
	font-size: 0.82rem;
	color: var(--ink-soft);
}

.friend-goal-bar {
	height: 7px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--tint-friend-goal-bg);
}

.friend-goal-bar > div {
	height: 100%;
	border-radius: inherit;
	background: #5a83a8;
}

.friend-reading,
.friend-finishes {
	border-top: 1px solid #d6e1e8;
	padding-top: 0.65rem;
}

.friend-reading h3,
.friend-finishes h3 {
	margin-bottom: 0.35rem;
	font-size: 0.82rem;
}

.friend-reading > div {
	display: flex;
	gap: 0.55rem;
	align-items: start;
}

.friend-reading img {
	width: 34px;
	height: 50px;
	border-radius: 4px;
	object-fit: cover;
}

.friend-reading p {
	display: grid;
	gap: 0.08rem;
}

.friend-finishes ul {
	display: grid;
	gap: 0.22rem;
	padding-left: 1.1rem;
}

.friend-book-card {
	position: relative;
	padding-bottom: 1.9rem;
}

.like-btn {
	position: absolute;
	right: 0.6rem;
	bottom: 0.6rem;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--card);
	color: var(--ink-soft);
	padding: 0.15rem 0.55rem;
	font-size: 0.78rem;
	cursor: pointer;
	transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}

.like-btn svg {
	width: 14px;
	height: 14px;
}

.like-btn.liked {
	border-color: var(--danger);
	background: rgba(180, 55, 45, 0.12);
	color: var(--danger);
}

.like-btn.liked svg {
	fill: var(--danger);
}

.like-btn-static {
	cursor: default;
}

.friend-review {
	margin: 0.15rem 0 0;
	color: var(--ink);
	font-size: 0.82rem;
	font-style: italic;
}

.chat-messages {
	display: grid;
	align-content: end;
	align-items: start;
	gap: 0.5rem;
	min-height: 260px;
	max-height: 420px;
	overflow: auto;
	padding: 0.85rem;
	border-radius: 6px;
	border: 1px solid var(--auth-card-border);
	background: rgba(255, 255, 255, 0.62);
	margin-top: 0.2rem;
}

.chat-bubble {
	max-width: 86%;
	padding: 0.68rem 0.78rem;
	border-radius: 6px;
	border: 1px solid var(--auth-card-border);
	background: rgba(255, 255, 255, 0.95);
}

.chat-bubble.me {
	margin-left: auto;
	border-color: var(--tint-chat-bubble-me-border);
	background: var(--tint-chat-bubble-me-bg);
}

.chat-bubble .chat-text {
	white-space: pre-wrap;
	word-break: break-word;
}

.chat-bubble .who {
	font-weight: 700;
	font-size: 0.86rem;
	margin-bottom: 0.16rem;
	color: var(--ink);
}

.chat-bubble .when {
	font-size: 0.76rem;
	color: var(--ink-soft);
	margin-top: 0.28rem;
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.chat-bubble .chat-edit-btn,
.chat-bubble .chat-delete-btn {
	width: 22px;
	height: 22px;
	opacity: 0.6;
}

.chat-bubble .chat-edit-btn {
	margin-left: auto;
}

.chat-bubble .chat-edit-btn svg,
.chat-bubble .chat-delete-btn svg {
	width: 13px;
	height: 13px;
}

.chat-deleted-text {
	color: var(--ink-soft);
	font-style: italic;
}

.chat-attachment-image {
	max-width: 220px;
	max-height: 220px;
	border-radius: 6px;
	display: block;
	object-fit: cover;
	margin-bottom: 0.3rem;
}

.chat-reactions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
	margin-top: 0.35rem;
}

.chat-reaction-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--card);
	font-size: 0.78rem;
	color: var(--ink-soft);
}

.chat-reaction-pill.mine {
	border-color: color-mix(in srgb, var(--accent) 40%, transparent);
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	color: var(--accent);
}

.chat-reaction-picker {
	position: relative;
	display: inline-block;
}

.chat-reaction-picker summary {
	list-style: none;
	cursor: pointer;
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--card);
	color: var(--ink-soft);
}

.chat-reaction-picker summary::-webkit-details-marker {
	display: none;
}

.chat-reaction-picker summary svg {
	width: 13px;
	height: 13px;
}

.chat-reaction-options {
	position: absolute;
	bottom: 100%;
	left: 0;
	margin-bottom: 0.3rem;
	display: flex;
	gap: 0.2rem;
	padding: 0.3rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--dialog-bg);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	z-index: 5;
}

.chat-reaction-options button {
	font-size: 1.15rem;
	line-height: 1;
	padding: 0.3rem;
	border-radius: 999px;
	background: transparent;
}

.chat-attachment-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.3rem 0;
}

.chat-attachment-row .icon-btn {
	width: 32px;
	height: 32px;
}

.chat-typing-indicator {
	font-size: 0.8rem;
	font-style: italic;
	color: var(--ink-soft);
	margin: 0.2rem 0 0;
}

.chat-bubble.editing {
	width: 100%;
}

.chat-edit-form {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-top: 0.2rem;
}

.chat-edit-textarea {
	width: 100%;
	min-height: 60px;
	resize: vertical;
	padding: 0.5rem 0.6rem;
	border-radius: 6px;
	border: 1px solid var(--auth-card-border);
	background: var(--input-bg);
	color: var(--ink);
	font: inherit;
}

.chat-edit-actions {
	display: flex;
	gap: 0.4rem;
	justify-content: flex-end;
}

.chat-edit-actions .btn-sub {
	padding: 0.3rem 0.7rem;
	font-size: 0.8rem;
}

.chat-empty {
	text-align: center;
	color: var(--ink-soft);
	padding: 1.2rem 0.8rem;
	border: 1px dashed var(--line);
	border-radius: 6px;
	background: var(--card);
}

.book-club-card-cover {
	width: 100%;
	max-height: 120px;
	border-radius: 8px;
	object-fit: cover;
}

.club-workspace-cover {
	width: 84px;
	height: 84px;
	border-radius: 6px;
	object-fit: cover;
	flex: 0 0 auto;
}

.club-workspace-hero h3 {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.club-workspace-hero h3 .icon-btn {
	width: 26px;
	height: 26px;
}

.club-workspace-description {
	margin-top: 0.3rem;
}

.club-discover-hub {
	width: 100%;
	min-width: 0;
	padding: 1rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--card);
}

.club-discover-list {
	display: grid;
	gap: 0.75rem;
	margin-top: 0.8rem;
}

.club-discover-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.8rem;
	padding: 0.9rem;
	border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
	border-radius: 6px;
	background: var(--card);
}

.club-discover-card .book-club-card-cover {
	width: 72px;
	height: 72px;
	max-height: none;
}

.club-discover-card-body {
	display: grid;
	gap: 0.3rem;
	min-width: 0;
}

.club-discover-card-body .meta {
	color: var(--ink-soft);
	font-size: 0.82rem;
}

.club-discover-card-body .btn-sub {
	justify-self: start;
}

.club-next-book > .btn-sub {
	margin-bottom: 0.3rem;
}

.club-nomination-list {
	display: grid;
	gap: 0.5rem;
}

.club-nomination-item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.55rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--card);
	flex-wrap: wrap;
}

.club-nomination-cover {
	width: 40px;
	height: 60px;
	flex: 0 0 auto;
	border-radius: 6px;
	overflow: hidden;
	background: rgba(31, 42, 53, 0.13);
}

.club-nomination-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.club-nomination-body {
	display: grid;
	gap: 0.1rem;
	flex: 1;
	min-width: 8rem;
}

.club-nomination-body .meta {
	color: var(--ink-soft);
	font-size: 0.78rem;
}

.club-nomination-actions {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex-wrap: wrap;
}

.club-nomination-actions .btn-sub.voted {
	border-color: color-mix(in srgb, var(--accent) 42%, transparent);
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	color: var(--accent);
}

/* Next meeting card (app/club-meetings.js) */
.club-meeting-card :where(.btn-sub, .club-meeting-rsvp-btn) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-height: 44px;
}

.club-meeting-card :where(.btn-sub, .club-meeting-rsvp-btn, .club-meeting-details) svg {
	width: 1rem;
	height: 1rem;
	flex: 0 0 auto;
}

.club-meeting-card {
	display: grid;
	gap: 0.75rem;
	padding: 0.8rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--card);
}

.club-meeting-summary {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
}

.club-meeting-date {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 3.4rem;
	padding: 0.35rem 0;
	border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
	border-radius: 6px;
	background: color-mix(in srgb, var(--accent) 10%, transparent);
	color: var(--accent);
	line-height: 1.1;
}

.club-meeting-date span {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.club-meeting-date strong {
	font-size: 1.45rem;
	font-variant-numeric: tabular-nums;
}

.club-meeting-date.compact {
	width: 2.6rem;
	padding: 0.2rem 0;
}

.club-meeting-date.compact strong {
	font-size: 1.05rem;
}

.club-meeting-info {
	display: grid;
	gap: 0.3rem;
	min-width: 0;
	flex: 1;
}

.club-meeting-when {
	justify-self: start;
	border-color: color-mix(in srgb, var(--accent) 40%, transparent);
	color: var(--accent);
}

.club-meeting-title {
	font-family: var(--font-read);
	font-size: 1.05rem;
	overflow-wrap: anywhere;
}

.club-meeting-details {
	display: grid;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--ink-soft);
	font-size: 0.86rem;
}

.club-meeting-details li {
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
	overflow-wrap: anywhere;
}

.club-meeting-details svg {
	margin-top: 0.12rem;
}

.club-meeting-details a {
	color: var(--accent);
	font-weight: 600;
}

.club-meeting-notes {
	margin: 0.2rem 0 0;
	color: var(--ink);
	font-size: 0.86rem;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.club-meeting-rsvp {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.4rem;
}

.club-meeting-rsvp-btn {
	padding: 0.4rem 0.5rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--btn-sub-bg);
	color: var(--ink);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.club-meeting-rsvp-btn:hover:not(:disabled) {
	border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

/* Same tint as a cast vote (.voted), so it reads on every theme; the inset ring makes it unmistakable. */
.club-meeting-rsvp-btn[aria-pressed="true"] {
	border-color: var(--accent);
	background: color-mix(in srgb, var(--accent) 14%, transparent);
	box-shadow: inset 0 0 0 1px var(--accent);
	color: var(--accent);
}

.club-meeting-rsvp-btn[data-club-meeting-rsvp="no"][aria-pressed="true"] {
	border-color: var(--ink-soft);
	background: color-mix(in srgb, var(--ink-soft) 14%, transparent);
	box-shadow: inset 0 0 0 1px var(--ink-soft);
	color: var(--ink);
}

.club-meeting-rsvp-btn:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.club-meeting-rsvp-btn:disabled {
	opacity: 0.65;
	cursor: progress;
}

.club-meeting-attendance {
	display: grid;
	gap: 0.1rem;
	margin: 0;
	font-size: 0.86rem;
	font-weight: 600;
}

.club-meeting-attendance small {
	color: var(--ink-soft);
	font-weight: 400;
	overflow-wrap: anywhere;
}

.club-meeting-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.club-meeting-actions .club-meeting-cancel {
	color: var(--danger);
}

.club-meeting-later h4 {
	margin: 0.2rem 0 0.4rem;
	color: var(--ink-soft);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.club-meeting-later ul {
	display: grid;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.club-meeting-later-row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.club-meeting-later-row > span:not(.club-meeting-date) {
	display: grid;
	flex: 1;
	min-width: 0;
}

.club-meeting-later-row small {
	color: var(--ink-soft);
}

.club-meeting-form-row {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 0.6rem;
}

@media (max-width: 520px) {
	.club-meeting-form-row {
		grid-template-columns: 1fr;
	}

	/* Keeps "Can't go" on one line at phone width: the words carry the meaning, the icons are extra. */
	.club-meeting-rsvp-btn svg {
		display: none;
	}

	.club-meeting-actions .btn-sub {
		flex: 1 1 auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.club-meeting-rsvp-btn {
		transition: none;
	}
}

/* In-app calls (app/club-call.js) */
.club-meeting-call {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.club-meeting-call .btn-main {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
}

.club-meeting-call svg {
	width: 1rem;
	height: 1rem;
}

.club-meeting-call small {
	color: var(--ink-soft);
}

/* Two classes so it beats the shared 560px .app-dialog width in modern-studio.css. */
.app-dialog.club-call-dialog {
	width: min(980px, calc(100vw - 32px));
}

.club-call-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 0.5rem;
	max-height: 62vh;
	overflow-y: auto;
}

.club-call-grid[data-count="1"] {
	grid-template-columns: minmax(0, 1fr);
}

.club-call-tile {
	position: relative;
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 8px;
	background: #1b2028;
}

.club-call-tile video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.club-call-tile.is-me video {
	transform: scaleX(-1);
}

.club-call-avatar {
	position: absolute;
	inset: 0;
	display: none;
	place-items: center;
	margin: auto;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--accent) 55%, #1b2028);
	color: #fff;
	font-size: 1.8rem;
	font-weight: 700;
}

.club-call-tile.camera-off video {
	visibility: hidden;
}

.club-call-tile.camera-off .club-call-avatar {
	display: grid;
}

.club-call-tile figcaption {
	position: absolute;
	left: 0.5rem;
	bottom: 0.5rem;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	max-width: calc(100% - 1rem);
	padding: 0.2rem 0.5rem;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.62);
	color: #fff;
	font-size: 0.82rem;
}

.club-call-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.club-call-muted {
	width: 0.9rem;
	height: 0.9rem;
	flex: 0 0 auto;
	color: #ff8a80;
}

.club-call-status {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	margin: 0.4rem 0 0;
	color: var(--ink-soft);
	font-size: 0.88rem;
}

.club-call-controls {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.club-call-controls button {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	padding-inline: 1rem;
}

.club-call-controls svg {
	width: 1.1rem;
	height: 1.1rem;
}

#club-call-mic[aria-pressed="true"] {
	border-color: var(--danger);
	color: var(--danger);
}

#club-call-camera[aria-pressed="true"] {
	border-color: var(--accent);
	color: var(--accent);
}

/* Reading schedule (app/club-schedule.js) */
.club-schedule-range .btn-sub {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 44px;
}

.club-schedule-range .btn-sub svg,
.club-schedule-all svg {
	width: 1rem;
	height: 1rem;
	flex: 0 0 auto;
}

.club-schedule-now {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.club-schedule-now strong {
	font-family: var(--font-read);
	font-size: 1rem;
}

/* --success is a dark green on every theme, so dark themes get a lighter one (same light-dark() as the tints). */
.club-schedule {
	--schedule-good: light-dark(var(--success), #8fd694);
}

.club-schedule-status.on-track,
.club-schedule-status.finished {
	border-color: color-mix(in srgb, var(--schedule-good) 45%, transparent);
	background: color-mix(in srgb, var(--schedule-good) 12%, transparent);
	color: var(--schedule-good);
}

.club-schedule-status.behind {
	border-color: var(--tint-pill-unread-border);
	background: var(--tint-pill-unread-bg);
	color: var(--tint-pill-unread-color);
}

/* Your progress fills the track; the notch marks where the schedule says the club should be. */
.club-schedule-track {
	position: relative;
	height: 10px;
	border-radius: 999px;
	background: var(--tint-book-progress-bg);
}

.club-schedule-fill {
	position: absolute;
	inset: 0 auto 0 0;
	border-radius: inherit;
	background: var(--accent);
}

.club-schedule-marker {
	position: absolute;
	top: -4px;
	bottom: -4px;
	width: 3px;
	margin-left: -1.5px;
	border-radius: 2px;
	background: var(--ink);
}

.club-schedule-detail {
	margin: 0;
	color: var(--ink-soft);
	font-size: 0.86rem;
}

.club-schedule-all summary {
	display: flex;
	align-items: center;
	min-height: 44px;
	cursor: pointer;
	font-weight: 600;
}

.club-schedule-all ol,
.club-schedule-behind ul,
.club-schedule-dates {
	display: grid;
	gap: 0.3rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.club-schedule-all li {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.88rem;
}

.club-schedule-all li small,
.club-schedule-behind small {
	color: var(--ink-soft);
}

.club-schedule-all li.done svg {
	color: var(--schedule-good);
}

.club-schedule-all li.late svg,
.club-schedule-all li.late small {
	color: var(--danger);
}

.club-schedule-behind h4 {
	margin: 0.2rem 0 0.4rem;
	color: var(--ink-soft);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.club-schedule-behind li {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 0.88rem;
}

.club-schedule-range {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
	align-items: end;
	gap: 0.6rem;
}

.club-schedule-dates {
	max-height: 40vh;
	overflow-y: auto;
	padding-right: 0.25rem;
}

.club-schedule-dates li {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr);
	align-items: center;
	gap: 0.5rem;
}

@media (max-width: 520px) {
	.club-schedule-range {
		grid-template-columns: 1fr 1fr;
	}

	.club-schedule-range .btn-sub {
		grid-column: 1 / -1;
		justify-content: center;
	}
}

.club-reports-list {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.club-report-item {
	padding: 0.7rem 0.8rem;
	border-radius: 6px;
	border: 1px solid var(--line);
	background: var(--strip-bg);
}

.club-report-item p {
	margin: 0 0 0.4rem;
}

.friend-block-btn {
	margin-left: auto;
}

/* Hover effects (restored) */

.club-room-item .club-room-delete:hover:not(:disabled) {
	transform: translateY(-50%);
}

.like-btn:hover {
	border-color: var(--danger);
	color: var(--danger);
}

.like-btn-static:hover {
	border-color: var(--line);
	color: var(--ink-soft);
}

.chat-bubble .chat-edit-btn:hover,
.chat-bubble .chat-delete-btn:hover {
	opacity: 1;
}

.chat-bubble .chat-delete-btn:hover {
	color: var(--danger);
}

.chat-reaction-options button:hover {
	background: var(--btn-sub-bg);
}

/* ---------- Chat: replies, shared books, spoilers ---------- */

.chat-bubble .chat-reply-btn {
	width: 22px;
	height: 22px;
	margin-left: auto;
	opacity: 0.6;
}

.chat-bubble .chat-reply-btn + .chat-edit-btn {
	margin-left: 0;
}

.chat-bubble .chat-reply-btn svg {
	width: 13px;
	height: 13px;
}

.chat-reply-quote {
	display: grid;
	gap: 0.1rem;
	width: 100%;
	margin: 0 0 0.35rem;
	padding: 0.3rem 0.5rem;
	border: 0;
	border-left: 3px solid var(--accent);
	border-radius: 4px;
	background: color-mix(in srgb, var(--accent) 9%, transparent);
	color: var(--ink-soft);
	font: inherit;
	font-size: 0.8rem;
	text-align: left;
	cursor: pointer;
}

.chat-reply-quote-who {
	font-weight: 700;
	color: var(--ink);
}

.chat-reply-quote-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chat-book-card {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0 0 0.35rem;
	padding: 0.5rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: color-mix(in srgb, var(--card) 70%, transparent);
	color: var(--ink);
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.chat-book-card:hover {
	border-color: var(--accent);
}

.chat-book-card:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.chat-book-card-cover {
	flex: none;
	width: 44px;
	height: 66px;
	border-radius: 3px;
	object-fit: cover;
}

.chat-book-card-cover.placeholder {
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--accent) 14%, transparent);
	color: var(--accent);
}

.chat-book-card-cover.placeholder svg {
	width: 18px;
	height: 18px;
}

.chat-book-card-text {
	display: grid;
	gap: 0.1rem;
	min-width: 0;
}

.chat-book-card-text strong {
	font-size: 0.9rem;
	line-height: 1.25;
}

.chat-book-card-text small {
	color: var(--ink-soft);
	font-size: 0.78rem;
}

.chat-book-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	margin-top: 0.15rem;
	color: var(--accent);
	font-size: 0.78rem;
	font-weight: 600;
}

.chat-book-card-cta svg {
	width: 13px;
	height: 13px;
}

.chat-spoiler {
	display: inline;
	padding: 0 0.15rem;
	border: 0;
	border-radius: 3px;
	background: color-mix(in srgb, var(--ink) 55%, var(--card));
	color: transparent;
	font: inherit;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.chat-spoiler.revealed {
	background: color-mix(in srgb, var(--ink) 10%, transparent);
	color: inherit;
	cursor: text;
	user-select: text;
}

.chat-spoiler:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}

.chat-bubble-flash {
	animation: chat-bubble-flash 1.2s ease;
}

@keyframes chat-bubble-flash {
	0%, 40% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
	100% { box-shadow: 0 0 0 3px transparent; }
}

@media (prefers-reduced-motion: reduce) {
	.chat-bubble-flash { animation-duration: 0.01ms; }
	.chat-spoiler, .chat-book-card { transition: none; }
}

.chat-compose-chip {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	min-width: 0;
	padding: 0.3rem 0.3rem 0.3rem 0.55rem;
	border-left: 3px solid var(--accent);
	border-radius: 4px;
	background: color-mix(in srgb, var(--accent) 9%, transparent);
	color: var(--ink-soft);
	font-size: 0.82rem;
}

.chat-compose-chip[hidden] {
	display: none;
}

.chat-compose-chip > svg {
	flex: none;
	width: 15px;
	height: 15px;
	color: var(--accent);
}

.chat-compose-chip-text {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chat-compose-chip-text strong {
	color: var(--ink);
}

.chat-compose-chip .icon-btn {
	flex: none;
	width: 28px;
	height: 28px;
}

.chat-book-options {
	display: grid;
	gap: 0.35rem;
	max-height: min(55vh, 420px);
	margin-top: 0.6rem;
	overflow-y: auto;
}

.chat-book-option {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	padding: 0.4rem 0.5rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--btn-sub-bg);
	color: var(--ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.chat-book-option:hover,
.chat-book-option:focus-visible {
	border-color: var(--accent);
}

.chat-book-option img,
.chat-book-option-cover {
	flex: none;
	width: 32px;
	height: 48px;
	border-radius: 3px;
	object-fit: cover;
}

.chat-book-option-cover {
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--accent) 14%, transparent);
	color: var(--accent);
}

.chat-book-option-cover svg {
	width: 16px;
	height: 16px;
}

.chat-book-option span {
	display: grid;
	min-width: 0;
}

.chat-book-option small {
	color: var(--ink-soft);
	font-size: 0.78rem;
}

/* Buddy reads (app/buddy-reads.js) */
.tab-badge {
	display: inline-grid;
	place-items: center;
	min-width: 1.2rem;
	height: 1.2rem;
	margin-left: 0.35rem;
	padding: 0 0.3rem;
	border-radius: 999px;
	background: var(--accent);
	color: var(--card);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
	vertical-align: middle;
}

.tab-badge[hidden] {
	display: none;
}

.buddy-reads-hub > .hint {
	margin-top: 0.4rem;
}

.buddy-reads-hub .club-invitations {
	display: grid;
	gap: 0.5rem;
	margin-top: 0.8rem;
}

.buddy-reads-hub .club-invitations:empty {
	display: none;
}

.buddy-read-card .book-club-card-cover,
.buddy-room-cover {
	width: 60px;
	height: 90px;
	max-height: none;
	object-fit: cover;
	border-radius: 3px;
}

.buddy-read-card .placeholder,
.buddy-room-cover.placeholder {
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	background: var(--tint-pill-bg);
	color: var(--ink-soft);
}

.buddy-members {
	display: grid;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.buddy-member {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 0.55rem;
	row-gap: 0.25rem;
}

.buddy-member .chat-avatar {
	grid-row: span 2;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	object-fit: cover;
}

.buddy-member-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.88rem;
	font-weight: 600;
}

.buddy-member-name svg {
	width: 0.85rem;
	height: 0.85rem;
	vertical-align: -0.1rem;
	color: var(--ink-soft);
}

.buddy-member-progress {
	color: var(--ink-soft);
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
}

.buddy-member.is-invited {
	opacity: 0.75;
}

.buddy-member.is-invited .chat-avatar {
	grid-row: auto;
}

.buddy-progress {
	grid-column: 2 / -1;
	width: 100%;
	height: 8px;
	border: 0;
	border-radius: 999px;
	overflow: hidden;
	appearance: none;
	background: var(--tint-book-progress-bg);
}

.buddy-progress::-webkit-progress-bar {
	background: var(--tint-book-progress-bg);
}

.buddy-progress::-webkit-progress-value {
	background: var(--accent-2);
	transition: width 0.3s ease;
}

.buddy-progress::-moz-progress-bar {
	background: var(--accent-2);
}

.buddy-members.compact {
	margin: 0.2rem 0 0.3rem;
}

.buddy-read-room {
	display: grid;
	gap: 0.9rem;
	margin-top: 0.8rem;
}

.buddy-read-room[hidden] {
	display: none;
}

.buddy-room-header {
	display: flex;
	align-items: center;
	gap: 0.8rem;
}

.buddy-room-header h3 {
	font-size: 1.1rem;
}

.buddy-room-header .meta {
	color: var(--ink-soft);
	font-size: 0.85rem;
}

/* "at 62%": how far through the book a buddy read message was written. */
.chat-progress-at {
	padding: 0 0.35rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--accent) 10%, transparent);
	color: var(--ink-soft);
	font-size: 0.72rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* A message from further into the book than the reader has got. */
.buddy-gated {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	padding: 0.45rem 0.7rem;
	border: 1px dashed var(--line);
	border-radius: 6px;
	background: color-mix(in srgb, var(--ink) 6%, transparent);
	color: var(--ink-soft);
	font: inherit;
	font-size: 0.85rem;
	text-align: left;
	cursor: pointer;
}

.buddy-gated svg {
	width: 1rem;
	height: 1rem;
	flex: none;
}

.buddy-gated:hover {
	background: color-mix(in srgb, var(--ink) 10%, transparent);
}

.buddy-gated:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.buddy-read-friends {
	margin: 0;
	padding: 0;
	border: 0;
}

.buddy-read-friends legend {
	margin-bottom: 0.4rem;
	font-weight: 600;
}

.buddy-read-friend-options {
	display: grid;
	gap: 0.35rem;
	max-height: 240px;
	overflow: auto;
}

.buddy-read-friend-options .checkbox-row {
	min-height: 44px;
}

@media (max-width: 560px) {
	.buddy-read-card .book-club-card-cover,
	.buddy-read-card .placeholder {
		width: 48px;
		height: 72px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.buddy-progress::-webkit-progress-value {
		transition: none;
	}
}

/* Four Community tabs: on narrow screens the track scrolls sideways instead of overflowing the page. */
@media (max-width: 560px) {
	.community-tabs {
		max-width: 100%;
		min-width: 0;
		overflow-x: auto;
		justify-content: flex-start;
		scrollbar-width: none;
	}

	.community-tabs::-webkit-scrollbar {
		display: none;
	}
}

/* Buddy read top row: back on the left, the options menu (invite, leave) on the right. */
.buddy-room-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

/* The shared back button is hidden outside an open club; buddy reads always show it. */
.buddy-room-top .club-workspace-back {
	display: inline-flex;
	margin-bottom: 0;
}

.buddy-room-menu {
	position: relative;
	margin-left: auto;
}

.buddy-room-menu > summary {
	list-style: none;
	cursor: pointer;
}

.buddy-room-menu > summary::-webkit-details-marker {
	display: none;
}

.buddy-room-menu-actions {
	position: absolute;
	top: calc(100% + 0.35rem);
	right: 0;
	z-index: 5;
	display: grid;
	gap: 0.25rem;
	min-width: 190px;
	padding: 0.4rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--dialog-bg);
	box-shadow: var(--shadow);
}

.buddy-room-menu:not([open]) .buddy-room-menu-actions {
	display: none;
}

.buddy-room-menu-actions button {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	min-height: 44px;
	padding: 0.5rem 0.7rem;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--ink);
	font: inherit;
	font-size: 0.88rem;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.buddy-room-menu-actions button:hover,
.buddy-room-menu-actions button:focus-visible {
	background: color-mix(in srgb, var(--ink) 7%, transparent);
}

html .buddy-room-menu-actions button,
html .buddy-room-menu-actions button.remove {
	border: 0;
	border-radius: 6px;
	padding-inline: 0.7rem;
	background: transparent;
	color: var(--ink);
}

html .buddy-room-menu-actions button.remove {
	color: var(--danger);
}

html .buddy-room-menu-actions button.remove:hover,
html .buddy-room-menu-actions button.remove:focus-visible {
	background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.buddy-room-menu-actions svg {
	width: 1rem;
	height: 1rem;
	flex: none;
}

/* styles/search.css */
.search-panel {
	margin-bottom: 0.7rem;
	padding: 0.8rem;
	border-radius: 6px;
	border: 1px solid var(--auth-card-border);
	background: rgba(255, 255, 255, 0.64);
}

.manual-entry {
	border-top: 1px solid color-mix(in srgb, var(--ink-soft) 40%, var(--auth-card-border));
	padding-top: 0.75rem;
}

.manual-entry summary {
	width: fit-content;
	cursor: pointer;
	color: var(--accent);
	font-weight: 700;
	font-size: 0.9rem;
}

/* Sits under "Add a book manually" and reads like it: same divider, accent and weight. */
.quick-add-link {
	margin: 0;
	padding-top: 0.75rem;
	border-top: 1px solid color-mix(in srgb, var(--ink-soft) 40%, var(--auth-card-border));
}

.app-home #library-view .quick-add-link {
	border-color: var(--studio-ring);
}

.quick-add-link a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 44px;
	color: var(--accent);
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none;
}

.quick-add-link a:hover {
	text-decoration: underline;
}

.quick-add-link svg {
	width: 1rem;
	height: 1rem;
}

.manual-entry form {
	margin-top: 0.8rem;
}

.search-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.6rem;
	margin-bottom: 0.35rem;
}

.search-row button {
	white-space: nowrap;
}

.search-row button.is-loading {
	position: relative;
	padding-right: 2rem;
}

.search-row button.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.68rem;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	border-radius: 50%;
	border: 2px solid #97bcb4;
	border-top-color: var(--accent);
	animation: spin 700ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.search-row button.is-loading::after {
		animation-duration: 2s;
	}
}

.search-results {
	display: grid;
	gap: 0.55rem;
	margin-top: 0.65rem;
}

.search-results:empty {
	display: none;
}

.search-item {
	display: grid;
	grid-template-columns: 42px 1fr auto;
	gap: 0.7rem;
	padding: 0.62rem;
	border-radius: 6px;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.9);
}

.search-cover,
.book-cover {
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: 5px;
	border: 1px solid #c9b39c;
	background: #eee2d2;
}

.search-cover {
	height: 62px;
}

.placeholder {
	display: grid;
	place-items: center;
	font-family: var(--font-read);
	font-size: 0.62rem;
	color: #6b4a31;
	background: repeating-linear-gradient(135deg, var(--line) 0, var(--line) 5px, var(--strip-bg) 5px, var(--strip-bg) 10px);
}

.search-item h3 {
	font-size: 0.96rem;
	margin-bottom: 0.1rem;
}

.search-item p {
	font-size: 0.86rem;
	color: var(--ink-soft);
}

.search-item button {
	align-self: center;
	padding: 0.45rem 0.65rem;
	font-size: 0.8rem;
	border-radius: 9px;
	background: color-mix(in srgb, var(--accent) 14%, var(--btn-sub-bg));
	color: color-mix(in srgb, var(--accent) 65%, var(--ink));
	border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
}


.reading-history + .stats-more {
	margin-top: 1.2rem;
}

.stats-more > section {
	margin-top: 0.75rem;
}

/* Sections sit directly on the page card: spacing and dividers, not nested boxes. */
#journal-panel-challenges {
	display: grid;
	gap: 1.5rem;
}

.custom-challenges.journal-panel {
	padding: 1.25rem 0 0;
	border: 0;
	border-top: 1px solid var(--line);
	border-radius: 0;
	background: none;
}

.book-clubs-hub,
.friends-hub {
	border: 0;
	background: none;
	padding: 0;
}

/* Secondary tab groups (sub-tabs and shelf status): light active state, so only the main nav is dark. */
.community-tabs button.active,
.status-tabs button.active {
	border-color: var(--line);
	background: var(--card);
	color: var(--accent);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* Theme palettes repaint these surfaces; keep them flat so content never sits against a painted edge. */
html[data-theme] .book-clubs-hub,
html[data-theme] .friends-hub,
html[data-theme] .club-workspace-inline,
html[data-theme] .trinket-tray,
html[data-theme] .custom-challenges.journal-panel {
	background: none;
	border-color: transparent;
}

html[data-theme] .custom-challenges.journal-panel {
	border-top-color: var(--line);
}

/* Cards in a row share one height; spare space goes above the buttons, so the button rows line up. */
.side-books .book {
	grid-template-rows: 1fr auto;
}

/* Reading progress runs along the bottom edge of the card, so it never adds height to the row. */
.books .book {
	position: relative;
	overflow: hidden;
}

/* An open actions menu pops out of the card, so stop clipping it and lift the card above its neighbours. */
.books .book:has(.book-settings-menu[open]) {
	overflow: visible;
	z-index: 5;
}

.books .book .book-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	margin: 0;
	border-radius: 0;
	clip-path: none;
}

/* The result title opens the book page; "Use This" still adds it straight to the shelf. */
.search-item-link {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
	text-underline-offset: 3px;
}

.search-item-link:hover {
	text-decoration-color: currentColor;
}

/* styles/forms.css */
.form-grid {
	display: grid;
	gap: 0.8rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field[hidden] {
	display: none;
}

.field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.field.full {
	grid-column: 1 / -1;
}

.field-error {
	margin-top: 0.3rem;
	font-size: 0.82rem;
	color: var(--danger);
}

[aria-invalid="true"] {
	border-color: var(--danger) !important;
}

.field-autocomplete {
	position: relative;
}

.series-suggest-list {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 20;
	margin-top: 0.3rem;
	max-height: 220px;
	overflow-y: auto;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: var(--card);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.series-suggest-list[hidden] {
	display: none;
}

.series-suggest-option {
	display: block;
	width: 100%;
	padding: 0.5rem 0.65rem;
	border: none;
	background: transparent;
	color: var(--ink);
	text-align: left;
	font: inherit;
	cursor: pointer;
}

.series-suggest-option.active {
	background: var(--btn-sub-bg);
}

label {
	font-size: 0.9rem;
	color: var(--ink-soft);
	font-weight: 500;
}

input,
select,
textarea,
button {
	font: inherit;
	border-radius: 6px;
	border: 1px solid var(--line);
}

input,
select,
textarea {
	background: var(--input-bg);
	padding: 0.62rem 0.74rem;
	color: var(--ink);
	transition: border-color 180ms ease, box-shadow 180ms ease;
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* Native option popups have limited browser styling, but use the active theme where supported. */
select option {
	color: var(--ink);
	background: var(--dialog-bg);
}

textarea {
	min-height: 92px;
	resize: vertical;
}

.checkbox-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.2rem;
}

.checkbox-row input {
	width: 18px;
	height: 18px;
	accent-color: var(--accent);
}

.consent-row {
	align-items: flex-start;
	line-height: 1.45;
}

.checkbox-row.consent-row label {
	display: block;
	min-height: 0;
	font-weight: inherit;
}

.consent-row input {
	flex: none;
	margin-top: 0.15rem;
}

.consent-row a,
.consent-note a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.consent-note {
	margin: 0;
	font-size: 0.85rem;
	text-align: center;
}

.remember-me-row {
	margin-top: -0.1rem;
}

.shelf-status-field {
	display: grid;
	gap: 0.4rem;
	padding: 0.7rem;
	border: 1px solid var(--line);
	border-radius: 7px;
	margin: 0 0 0.2rem;
}

.shelf-status-field legend {
	padding: 0 0.3rem;
	font-size: 0.88rem;
	color: var(--ink-soft);
}

.radio-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.radio-row input {
	width: 18px;
	height: 18px;
	accent-color: var(--accent);
}

.reading-fields {
	display: grid;
	gap: 0.9rem;
}

.btn-row {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin-top: 0.2rem;
}

.auth-action-separator {
	align-self: center;
	color: var(--ink-soft);
	font-size: 0.9rem;
	font-weight: 700;
}

.auth-divider {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	color: var(--ink-soft);
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.auth-divider::before,
.auth-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--line);
}

.google-signin {
	position: relative;
	width: 100%;
	height: 42px;
}

.google-signin-face {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--card);
	color: var(--ink);
	font-weight: 700;
	font-size: 0.95rem;
	pointer-events: none;
	transition: border-color 140ms ease, background 140ms ease;
}

.google-signin:hover .google-signin-face {
	border-color: var(--accent);
	background: color-mix(in srgb, var(--accent) 8%, var(--card));
}

.google-signin:focus-within .google-signin-face {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* Invisible but clickable: the real Google button lives here. */
.google-signin-frame {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
	overflow: hidden;
	opacity: 0.0001;
	color-scheme: light;
}

.google-signin-frame > div,
.google-signin-frame iframe {
	width: 100% !important;
}

.auth-divider[hidden],
.google-signin[hidden],
.google-status[hidden] {
	display: none;
}

.google-status:empty {
	display: none;
}

button {
	cursor: pointer;
	border: none;
	font-weight: 700;
	transition: filter 140ms ease, transform 140ms ease, box-shadow 140ms ease;
	touch-action: manipulation;
	padding: 0.68rem 0.95rem;
}

html {
	-webkit-tap-highlight-color: color-mix(in srgb, var(--accent) 18%, transparent);
}

a,
label,
summary,
input,
select,
textarea {
	touch-action: manipulation;
}

h1,
h2,
h3,
h4 {
	text-wrap: balance;
}

.skip-link {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 1000;
	padding: 0.5rem 0.8rem;
	border-radius: 8px;
	text-decoration: none;
	transform: translateY(-200%);
}

.skip-link:focus-visible {
	transform: none;
}

#main-content:focus {
	outline: none;
}

.field-label {
	font-size: 0.9rem;
	color: var(--ink-soft);
	font-weight: 500;
}

.shelf-title {
	margin-bottom: 0;
}

button:focus-visible,
a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.btn-main {
	background: var(--accent);
	color: #fff;
}

.btn-sub {
	background: var(--btn-sub-bg);
	color: var(--ink);
	border: 1px solid var(--line);
}

.text-action {
	width: fit-content;
	padding: 0.15rem 0;
	background: transparent;
	color: var(--accent);
	font-size: 0.86rem;
	text-decoration: underline;
}

.date-picker {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 0.4rem;
}

.date-picker-input {
	flex: 1;
	min-width: 0;
}

.date-picker-btn {
	display: grid;
	place-items: center;
	width: 2.6rem;
	flex: none;
	padding: 0;
	color: var(--ink-soft);
	background: var(--input-bg);
	border: 1px solid var(--line);
	border-radius: 6px;
	cursor: pointer;
}

.date-picker-btn[aria-expanded="true"] {
	color: var(--accent);
	border-color: var(--accent);
}

.date-popup {
	position: fixed;
	z-index: 1000;
	width: 17.5rem;
	padding: 0.75rem;
	color: var(--ink);
	background: var(--dialog-bg);
	border: 1px solid var(--dialog-border);
	border-radius: 6px;
	box-shadow: var(--shadow);
}

.date-popup[hidden] {
	display: none;
}

.date-popup-head {
	display: grid;
	grid-template-columns: 2rem 1fr 5.2rem 2rem;
	gap: 0.35rem;
	margin-bottom: 0.6rem;
}

.date-popup select {
	min-width: 0;
	padding: 0.3rem 0.4rem;
	font-size: 0.9rem;
}

.date-nav,
.date-popup-foot button {
	color: var(--ink);
	background: var(--btn-sub-bg);
	border: 1px solid var(--line);
	border-radius: 8px;
	cursor: pointer;
}

.date-nav {
	font-size: 1.2rem;
	line-height: 1;
}

.date-weekdays,
.date-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	text-align: center;
}

.date-weekdays {
	margin-bottom: 0.25rem;
	color: var(--ink-soft);
	font-size: 0.75rem;
}

.date-cell {
	aspect-ratio: 1;
	padding: 0;
	color: var(--ink);
	font: inherit;
	font-size: 0.88rem;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	cursor: pointer;
}

.date-cell.blank {
	pointer-events: none;
}

.date-cell.today {
	border-color: var(--line);
	font-weight: 700;
}

.date-cell.selected {
	color: #fff;
	background: var(--accent);
	border-color: var(--accent);
}

.date-cell:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.date-popup-foot {
	display: flex;
	justify-content: space-between;
	margin-top: 0.6rem;
}

.date-popup-foot button {
	padding: 0.3rem 0.75rem;
	font-size: 0.85rem;
}

.date-popup-foot button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Hover effects (restored) */

.series-suggest-option:hover {
	background: var(--btn-sub-bg);
}

@media (hover: hover) {
	button:hover:not(:disabled) {
		transform: translateY(-1px);
		box-shadow: inset 0 0 0 999px color-mix(in srgb, currentColor 14%, transparent);
	}
}

@media (prefers-reduced-motion: reduce) {
	button:hover:not(:disabled) {
		transform: none;
	}
}

.date-picker-btn:hover:not(:disabled) {
	color: var(--accent);
	border-color: var(--accent);
}

.date-cell:hover:not(:disabled):not(.blank) {
	border-color: var(--accent);
}

/* styles/stats-toolbar.css */
.stats {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Annual Stats: whether the reader is on track for the year's goal. The status is in words and an
   icon, with colour only as a supporting cue. */
.goal-forecast {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0.75rem 0 0;
	padding: 0.7rem 0.8rem;
	border-radius: 6px;
	background: color-mix(in srgb, var(--accent) 8%, var(--card));
	line-height: 1.45;
}

.goal-forecast p {
	margin: 0;
	font-size: 0.9rem;
}

.goal-forecast svg {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 0.1rem;
	color: var(--accent);
}

.goal-forecast[data-state="behind"],
.goal-forecast[data-state="missed"] {
	background: color-mix(in srgb, var(--accent-2) 10%, var(--card));
}

.goal-forecast[data-state="behind"] svg,
.goal-forecast[data-state="missed"] svg {
	color: var(--accent-2);
}

.goal-change {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	margin-top: 0.75rem;
}

.goal-change svg {
	width: 16px;
	height: 16px;
}

.stat {
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 0.8rem;
}

.stat .k {
	color: var(--ink-soft);
	font-size: 0.84rem;
	margin-bottom: 0.25rem;
}

.stat .v {
	font-variant-numeric: tabular-nums;
	font-size: 1.48rem;
	font-weight: 700;
	line-height: 1.1;
}

.accent-bar {
	margin-top: 0.9rem;
	height: 11px;
	background: var(--tint-accent-bar-bg);
	border-radius: 999px;
	overflow: hidden;
}

.accent-bar > div {
	height: 100%;
	background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff));
	width: 100%;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 320ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.accent-bar > div {
		transition: none;
	}
}

.goal-progress {
	margin-top: 0.65rem;
}

.goal-progress > div {
	background: linear-gradient(90deg, var(--accent-2), color-mix(in srgb, var(--accent-2) 55%, #fff));
}

.toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.85rem;
	flex-wrap: wrap;
}

.toolbar select {
	min-width: 170px;
	background: rgba(255, 255, 255, 0.9);
}

#author-filter {
	max-width: 170px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.shelf-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
}

.shelf-controls input {
	min-width: 150px;
	padding: 0.52rem 0.62rem;
}

.status-tabs {
	margin-bottom: 0.1rem;
	border-bottom: 1px solid color-mix(in srgb, var(--ink-soft) 40%, var(--auth-card-border));
	padding-bottom: 0.65rem;
}

.books {
	display: grid;
	gap: 0.65rem;
}

.side-books {
	gap: 0.9rem;
}

.side-books .book {
	grid-template-columns: 52px 1fr;
	gap: 0.72rem;
	border: 1px solid var(--line);
	border-left: 8px solid var(--wood-dark, #5e2f1c);
	background: var(--card);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
}

.side-books .book-actions {
	grid-column: 1 / -1;
	justify-content: flex-start;
}

.compact-book-list {
	gap: 0.35rem;
}

.compact-book-list .book {
	grid-template-columns: 32px minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.55rem;
	padding: 0.42rem 0.55rem;
	border-left-width: 5px;
}

.compact-book-list .book-cover {
	width: 32px;
	height: 46px;
	max-height: none;
	object-fit: cover;
}

.compact-book-list .book h3 {
	margin: 0;
	font-size: 0.9rem;
}

.compact-book-list .book h3,
.compact-book-list .book p {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.compact-book-list .book p {
	font-size: 0.8rem;
}

.compact-book-list .book-progress,
.compact-book-list .progress-label,
.compact-book-list .book-quote {
	display: none;
}

.compact-book-list .book .meta {
	display: flex;
	margin: 0;
}

.compact-book-list .book .meta .pill:not(.reread, .finished) {
	display: none;
}

.compact-book-list .book .meta .reread,
.compact-book-list .book .meta .finished {
	font-size: 0.7rem;
	padding: 0.14rem 0.34rem;
}

.compact-book-list .book-actions {
	grid-column: auto;
	flex-wrap: nowrap;
}

.compact-book-list .book-actions button:not(.book-settings-menu summary) {
	display: none;
}

.books .book-settings-menu {
	position: relative;
}

.books .book-settings-actions {
	position: absolute;
	bottom: calc(100% + 0.35rem);
	right: 0;
	z-index: 4;
	display: grid;
	gap: 0.35rem;
	min-width: 150px;
	padding: 0.45rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--dialog-bg);
	box-shadow: var(--shadow);
}

.books .book-settings-menu:not([open]) .book-settings-actions {
	display: none;
}

.books .book-settings-actions button {
	display: block !important;
	width: 100%;
	text-align: left;
}

.books .book-settings-actions button {
	display: block;
	width: 100%;
	text-align: left;
}

.side-books .empty {
	background: rgba(255, 248, 237, 0.82);
	border-color: rgba(111, 67, 38, 0.45);
	color: #5f3b24;
}

/* styles/book-card.css */
.book {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.8rem;
	padding: 0.82rem;
	background: var(--card);
	border: 1px solid var(--auth-card-border);
	border-radius: 4px;
}

.book-cover {
	max-height: 78px;
}

.book:has(.book-editor) {
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
}

.book h3 {
	font-family: var(--font-read);
	font-size: 1rem;
	line-height: 1.3;
	margin-bottom: 0.2rem;
}

/* The title and cover open the book page; the cover link is a mouse/touch shortcut, kept out of the tab order. */
.book-cover-link {
	display: block;
	border-radius: 4px;
}

.book-cover-link:hover .book-cover,
.book-cover-link:hover img {
	filter: brightness(1.06);
}

.book-title-link {
	color: inherit;
	text-decoration: none;
}

.book-title-link:hover,
.book-title-link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.book p {
	color: var(--ink-soft);
	font-size: 0.92rem;
}

.meta {
	display: flex;
	gap: 0.45rem;
	flex-wrap: wrap;
	margin-top: 0.45rem;
}

.pill {
	font-size: 0.8rem;
	padding: 0.2rem 0.47rem;
	border-radius: 3px;
	border: 1px solid var(--line);
	background: var(--tint-pill-bg);
}

.pill.read {
	border-color: color-mix(in srgb, var(--accent) 40%, transparent);
	color: color-mix(in srgb, var(--accent) 60%, var(--ink));
	background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.pill.unread {
	border-color: var(--tint-pill-unread-border);
	color: var(--tint-pill-unread-color);
	background: var(--tint-pill-unread-bg);
}

.pill.status-want {
	border-color: var(--tint-pill-unread-border);
	color: var(--tint-pill-unread-color);
	background: var(--tint-pill-unread-bg);
}

.pill.status-reading {
	border-color: var(--tint-pill-reading-border);
	color: var(--tint-pill-reading-color);
	background: var(--tint-pill-reading-bg);
}

.pill.status-dnf,
.dnf {
	border-color: rgba(179, 38, 30, 0.35);
	background: rgba(179, 38, 30, 0.1);
	color: color-mix(in srgb, var(--danger) 75%, var(--ink));
}

.pill.status-finished {
	border-color: color-mix(in srgb, var(--accent) 40%, transparent);
	color: color-mix(in srgb, var(--accent) 60%, var(--ink));
	background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.pill.finished {
	border-color: var(--tint-pill-reading-border);
	color: var(--tint-pill-reading-color);
	background: var(--tint-pill-reading-bg);
}

/* Ebook / Audiobook, with its icon. Print books show no format pill. */
.pill.format {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.pill.format svg {
	width: 0.85rem;
	height: 0.85rem;
	flex: none;
}

.pill.tag {
	border-color: var(--tint-pill-tag-border);
	background: var(--tint-pill-tag-bg);
	color: var(--tint-pill-tag-color);
}

.pill.recommended-by {
	border-color: color-mix(in srgb, var(--accent) 35%, transparent);
	background: color-mix(in srgb, var(--accent) 8%, transparent);
	color: color-mix(in srgb, var(--accent) 60%, var(--ink));
}

.book-progress {
	height: 10px;
	margin-top: 0.62rem;
	border-radius: 0;
	overflow: hidden;
	clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%);
	background: var(--tint-book-progress-bg);
}

.book-progress > div {
	height: 100%;
	background: var(--accent-2);
}

.progress-label {
	margin-top: 0.24rem;
	font-size: 0.78rem;
	color: var(--ink-soft);
}

.book-quote {
	margin-top: 0.65rem;
	padding: 0.55rem 0.65rem;
	border-left: 3px solid var(--accent-2);
	background: color-mix(in srgb, var(--accent-2) 7%, transparent);
	font-family: var(--font-read);
	font-size: 0.82rem;
	color: var(--ink-soft);
}

.book-actions {
	display: flex;
	gap: 0.4rem;
	align-items: start;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.book-actions button {
	padding: 0.4rem 0.58rem;
	font-size: 0.82rem;
	border-radius: 8px;
}

.book-settings-menu {
	position: relative;
}

.book-settings-menu summary {
	list-style: none;
	cursor: pointer;
}

.book-settings-menu summary::-webkit-details-marker {
	display: none;
}

.book-settings-menu .icon-btn {
	width: 32px;
	height: 32px;
}

.book-settings-menu > button {
	position: absolute;
	z-index: 2;
	right: 0;
	top: calc(100% + 0.3rem);
	width: max-content;
	padding: 0.42rem 0.58rem;
	background: var(--btn-sub-bg);
	box-shadow: 0 8px 20px rgba(35, 28, 22, 0.16);
}

.side-books .book-settings-menu > button {
	left: 0;
	right: auto;
}

.metadata-picker-results {
	display: grid;
	gap: 0.5rem;
	max-height: min(55vh, 32rem);
	overflow-y: auto;
}

.metadata-picker-option {
	display: grid;
	grid-template-columns: 42px 1fr;
	gap: 0.6rem;
	align-items: center;
	width: 100%;
	padding: 0.5rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--btn-sub-bg);
	color: var(--ink);
	text-align: left;
}

.metadata-picker-option img,
.metadata-picker-cover {
	width: 42px;
	height: 60px;
	border-radius: 4px;
	object-fit: cover;
	background: var(--strip-bg);
}

.metadata-picker-option span {
	display: grid;
	gap: 0.15rem;
}

.metadata-picker-option small {
	color: var(--ink-soft);
}

/* styles/skeleton.css */
/* Shared skeleton loading placeholders (shimmer-animated gray blocks) used
   while data is being fetched from the backend. Kept as one small system so
   every loading list/container looks consistent instead of five bespoke
   spinners/empty-states. */

@keyframes skeleton-shimmer {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(100%);
	}
}

.skeleton {
	position: relative;
	overflow: hidden;
	background: var(--line);
	border-radius: 6px;
}

.skeleton::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, var(--card), transparent);
	animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.skeleton::after {
		animation: none;
		opacity: 0.5;
	}
}

/* A single text-line placeholder. Width is usually overridden inline
   (e.g. style="width: 60%") to vary line lengths. */
.skeleton-line {
	height: 0.8rem;
	width: 100%;
	border-radius: 4px;
}

.skeleton-line + .skeleton-line {
	margin-top: 0.4rem;
}

/* A circular avatar placeholder, used inside .skeleton-row. */
.skeleton-avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* Matches the book/search-item card shape: a cover thumbnail beside a
   couple of text lines. Used for the library shelf and search results. */
.skeleton-book-card {
	display: grid;
	grid-template-columns: 42px 1fr;
	gap: 0.7rem;
	align-items: start;
	padding: 0.7rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--card);
}

.skeleton-book-card .skeleton-cover {
	width: 100%;
	aspect-ratio: 2 / 3;
	border-radius: 5px;
}

.skeleton-book-card-body {
	display: grid;
	align-content: center;
	gap: 0.4rem;
}

/* Matches the book-club-card shape: a left-accented card with a heading
   and a meta line. */
.skeleton-club-card {
	display: grid;
	gap: 0.55rem;
	padding: 0.9rem;
	border: 1px solid var(--line);
	border-left: 5px solid var(--line);
	border-radius: 6px;
	background: var(--card);
}

/* A simple avatar + text row, matching friend-item / list rows. */
.skeleton-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.72rem 0.78rem;
	border-radius: 6px;
	border: 1px solid var(--line);
	background: var(--card);
}

.skeleton-row-body {
	flex: 1;
	display: grid;
	gap: 0.4rem;
}

/* Matches .chat-bubble sizing/radius. Add .me to align it like an
   outgoing message. */
.skeleton-chat-bubble {
	max-width: 70%;
	display: grid;
	gap: 0.4rem;
	padding: 0.68rem 0.78rem;
	border-radius: 6px;
	border: 1px solid var(--line);
	background: var(--card);
}

.skeleton-chat-bubble.me {
	margin-left: auto;
}

/* styles/reader-profile.css */
.reader-profile-page {
	max-width: 1100px;
	padding-top: 1.25rem;
	padding-bottom: 2.5rem;
}

.reader-profile-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.reader-profile-header-actions {
	display: flex;
	gap: 0.55rem;
	align-items: center;
}

.reader-profile-preview-banner {
	margin: 0 0 1rem;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--accent);
	border-radius: 8px;
	background: color-mix(in srgb, var(--accent) 10%, transparent);
	color: var(--ink);
	font-size: 0.85rem;
}

.rp-muted {
	color: var(--ink-soft);
	font-size: 0.85rem;
}

/* Header: avatar, name, member details, bio, genres and the Message / Recommend actions. */
.reader-profile-hero {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	padding: 1.25rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--strip-bg);
}

.reader-profile-hero > img {
	flex: none;
	width: 88px;
	height: 88px;
	border: 2px solid var(--line);
	border-radius: 50%;
	object-fit: cover;
}

.rp-hero-body {
	flex: 1;
	min-width: 0;
}

.reader-profile-eyebrow {
	margin-bottom: 0.15rem;
	color: var(--ink-soft);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: none;
}

.reader-profile-hero h1 {
	margin-bottom: 0.2rem;
	font-size: 1.6rem;
	word-break: break-word;
}

.reader-profile-bio {
	max-width: 62ch;
	margin-top: 0.55rem;
	color: var(--ink);
	font-size: 0.94rem;
}

.rp-genre-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0.6rem 0 0;
	padding: 0;
	list-style: none;
}

.rp-genre-chips li {
	padding: 0.15rem 0.6rem;
	border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
	border-radius: 999px;
	background: color-mix(in srgb, var(--accent) 8%, transparent);
	color: var(--ink);
	font-size: 0.78rem;
	font-weight: 600;
}

.rp-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin: 0.6rem 0 0;
	padding: 0;
	list-style: none;
}

.rp-links a {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--accent);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
}

.rp-links a:hover,
.rp-links a:focus-visible {
	text-decoration: underline;
}

.rp-links a i {
	width: 15px;
	height: 15px;
}

.rp-hero-actions {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 0.5rem;
}

.rp-hero-actions .btn-main,
.rp-hero-actions .btn-sub {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 44px;
	text-decoration: none;
}

.rp-hero-actions svg {
	width: 16px;
	height: 16px;
}

.reader-profile-quote {
	margin: 1rem 0 0;
	padding: 0.85rem 1rem;
	border-left: 4px solid var(--accent);
	border-radius: 0 8px 8px 0;
	background: var(--btn-sub-bg);
	color: var(--ink);
	font-size: 0.96rem;
}

/* Stat tiles. The first one carries the year's goal progress. */
.reader-profile-stats {
	display: grid;
	grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
	gap: 0.65rem;
	margin: 1rem 0;
}

.reader-profile-stats > div {
	display: grid;
	align-content: start;
	gap: 0.18rem;
	padding: 0.8rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--btn-sub-bg);
}

.reader-profile-stats strong {
	font-size: 1.35rem;
}

.reader-profile-stats strong small {
	color: var(--ink-soft);
	font-size: 0.85rem;
	font-weight: 600;
}

.reader-profile-stats span {
	color: var(--ink-soft);
	font-size: 0.82rem;
}

.rp-goal-bar,
.reader-profile-progress,
.rp-bar-track {
	display: block;
	height: 8px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--line);
}

.rp-goal-bar {
	margin-top: 0.3rem;
}

.rp-goal-bar > span,
.reader-profile-progress > div,
.rp-bar {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--accent);
}

/* Two columns on wide screens: books on the left, summaries on the right. */
.rp-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
	gap: 1.5rem;
	align-items: start;
}

.rp-main,
.rp-side {
	display: grid;
	gap: 1.5rem;
	min-width: 0;
}

.reader-profile-section h2 {
	margin-bottom: 0.65rem;
	font-size: 1.1rem;
}

.rp-card {
	padding: 1rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--btn-sub-bg);
}

.rp-card h2 {
	font-size: 1rem;
}

.rp-subheading {
	margin: 0.9rem 0 0.4rem;
	color: var(--ink-soft);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.rp-more {
	margin-top: 0.75rem;
}

/* Covers */
.rp-cover {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	border-radius: 4px;
	object-fit: cover;
	background: var(--strip-bg);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.rp-cover-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.4rem;
	border: 1px solid var(--line);
	background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 22%, var(--card)), var(--strip-bg));
	color: var(--ink);
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	overflow: hidden;
}

.rp-cover-placeholder span {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}

.rp-cover-small {
	width: 52px;
}

.rp-cover-tiny {
	width: 34px;
}

/* Too small for a readable title: the placeholder is just a tinted cover. */
.rp-cover-small.rp-cover-placeholder span,
.rp-cover-tiny.rp-cover-placeholder span {
	display: none;
}

/* Covers and titles link to the book page. */
.rp-cover-link {
	display: block;
	border-radius: 4px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.rp-cover-link:hover {
	transform: translateY(-2px);
}

.rp-cover-link:hover .rp-cover {
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
}

.rp-cover-link:focus-visible,
.rp-book-link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.rp-book-link {
	color: inherit;
	text-decoration: none;
	border-radius: 2px;
}

.rp-book-link:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.rp-cover-link {
		transition: none;
	}

	.rp-cover-link:hover {
		transform: none;
	}
}

.rp-rating {
	color: var(--ink-soft);
	font-size: 0.8rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Pinned favourites */
.rp-favorites {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0.85rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rp-favorites li {
	display: grid;
	gap: 0.25rem;
	align-content: start;
	min-width: 0;
}

.rp-favorites strong {
	margin-top: 0.3rem;
	font-size: 0.85rem;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.rp-favorites li > span:not(.rp-rating) {
	color: var(--ink-soft);
	font-size: 0.78rem;
}

/* Currently reading and reviews */
.rp-reading,
.reader-profile-reviews {
	display: grid;
	gap: 0.65rem;
}

.reader-profile-book,
.reader-profile-reviews article {
	position: relative;
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	gap: 0.75rem;
	padding: 0.75rem;
	padding-bottom: 2.3rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--btn-sub-bg);
}

.reader-profile-book h3 {
	font-size: 0.95rem;
}

.reader-profile-book p {
	margin: 0.1rem 0 0.4rem;
	color: var(--ink-soft);
	font-size: 0.82rem;
}

.reader-profile-progress {
	margin: 0.45rem 0 0.3rem;
}

.reader-profile-reviews article > div {
	display: grid;
	gap: 0.2rem;
	min-width: 0;
}

/* Direct children only: a broader "span" rule would recolour the star rating's clipped gradient. */
.reader-profile-reviews article > div > span,
.reader-profile-reviews time {
	color: var(--ink-soft);
	font-size: 0.82rem;
}

.rp-review-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.reader-profile-reviews p {
	margin: 0.25rem 0 0;
	color: var(--ink);
	font-size: 0.92rem;
	white-space: pre-line;
}

/* Diary: one row per finished book, grouped under month headings. */
.rp-diary-month {
	margin: 0.9rem 0 0.35rem;
	color: var(--ink-soft);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.rp-diary-month:first-of-type {
	margin-top: 0;
}

.rp-diary {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--btn-sub-bg);
}

.rp-diary li {
	display: grid;
	grid-template-columns: 2rem 34px minmax(0, 1fr) auto;
	gap: 0.75rem;
	align-items: center;
	padding: 0.5rem 0.75rem;
}

.rp-diary li + li {
	border-top: 1px solid var(--line);
}

.rp-diary time {
	color: var(--ink-soft);
	font-size: 1.05rem;
	font-weight: 700;
	text-align: center;
}

/* Fixed-width rating number, so the stars line up whether it reads "4" or "4.25". */
.rp-diary .star-rating-value {
	min-width: 4ch;
	text-align: left;
}

.rp-diary-title {
	display: grid;
	min-width: 0;
}

.rp-diary-title strong,
.rp-diary-title small {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rp-diary-title small {
	color: var(--ink-soft);
}

/* Shelves */
.rp-shelf-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-bottom: 0.85rem;
}

.rp-shelf-tabs button {
	min-height: 40px;
	padding: 0.35rem 0.8rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--card);
	color: var(--ink-soft);
	font-size: 0.85rem;
	font-weight: 600;
}

.rp-shelf-tabs button span {
	margin-left: 0.2rem;
	opacity: 0.75;
}

.rp-shelf-tabs button[aria-selected="true"] {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--card);
}

.rp-shelf-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: 0.85rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rp-shelf-grid li {
	display: grid;
	gap: 0.2rem;
	align-content: start;
	min-width: 0;
}

/* One line with an ellipsis so every rating lines up; the full title is in the item's tooltip. */
.rp-shelf-title {
	display: block;
	margin-top: 0.2rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 0.78rem;
	line-height: 1.25;
}

/* Sidebar summaries */
.rp-taste-lines {
	display: grid;
	gap: 0.3rem;
	margin: 0 0 0.75rem;
	padding-left: 1.1rem;
	font-size: 0.9rem;
}

.rp-bars {
	display: grid;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rp-bars li {
	display: grid;
	grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr) 2.6rem;
	gap: 0.5rem;
	align-items: center;
	font-size: 0.82rem;
}

.rp-bars li > span:first-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rp-bar-value {
	color: var(--ink-soft);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.rp-year-headline {
	margin: 0 0 0.75rem;
	font-size: 0.95rem;
}

/* Books per month: one accent bar per month, value on hover or keyboard focus. */
.rp-month-chart {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 2px;
	height: 110px;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--line);
}

.rp-month-chart li {
	position: relative;
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	min-width: 0;
	outline-offset: 2px;
}

.rp-month-plot {
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.rp-month-bar {
	display: block;
	width: min(100%, 14px);
	border-radius: 4px 4px 0 0;
	background: var(--accent);
}

.rp-month-label {
	padding-top: 0.2rem;
	color: var(--ink-soft);
	font-size: 0.68rem;
	text-align: center;
}

.rp-month-chart li:hover::after,
.rp-month-chart li:focus-visible::after {
	content: attr(data-value);
	position: absolute;
	bottom: calc(100% - 0.5rem);
	left: 50%;
	z-index: 2;
	padding: 0.2rem 0.45rem;
	border-radius: 4px;
	background: var(--ink);
	color: var(--card);
	font-size: 0.72rem;
	white-space: nowrap;
	transform: translateX(-50%);
	pointer-events: none;
}

.rp-month-chart li:first-child:hover::after,
.rp-month-chart li:first-child:focus-visible::after {
	left: 0;
	transform: none;
}

.rp-month-chart li:last-child:hover::after,
.rp-month-chart li:last-child:focus-visible::after {
	right: 0;
	left: auto;
	transform: none;
}

.rp-mini-covers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.rp-match {
	margin: 0;
	font-size: 1rem;
}

.rp-match strong {
	color: var(--accent);
	font-size: 2rem;
	line-height: 1;
}

.rp-badges {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rp-badges li {
	display: grid;
	justify-items: center;
	gap: 0.25rem;
	font-size: 0.72rem;
	text-align: center;
}

.rp-badge-art {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border-radius: 50%;
	background: color-mix(in srgb, var(--accent) 10%, var(--card));
}

.rp-badge-art svg {
	width: auto;
	height: 120%;
}

.rp-clubs {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rp-clubs li {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 0.6rem;
	align-items: center;
}

.rp-clubs img,
.rp-club-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	object-fit: cover;
	background: color-mix(in srgb, var(--accent) 12%, var(--card));
}

.rp-clubs li > span:last-child {
	display: grid;
	min-width: 0;
}

.rp-clubs small {
	color: var(--ink-soft);
}

/* "Finish your profile" (own profile only): one row per missing item, each with its button. */
.rp-setup {
	margin-bottom: 1.5rem;
}

.rp-setup-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	margin-bottom: 0.6rem;
}

.rp-setup-head h2 {
	margin: 0;
}

.rp-setup-steps {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rp-setup-steps li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.65rem 0.75rem;
	border-radius: 8px;
	background: color-mix(in srgb, var(--ink) 4%, transparent);
}

.rp-setup-steps li > span {
	display: grid;
	gap: 0.1rem;
	min-width: 0;
}

.rp-setup-steps small {
	color: var(--ink-soft);
}

.rp-setup-steps .btn-sub {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 0.9rem;
	text-decoration: none;
	font-size: 0.85rem;
}

.rp-edit-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 40px;
	padding: 0 0.9rem;
}

.rp-edit-btn[hidden] {
	display: none;
}

.rp-edit-btn svg {
	width: 16px;
	height: 16px;
}

@media (max-width: 520px) {
	.rp-setup-steps li {
		flex-direction: column;
		align-items: stretch;
	}

	.rp-setup-steps .btn-sub {
		justify-content: center;
	}
}

.profile-empty,
.profile-loading {
	padding: 1rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--btn-sub-bg);
	color: var(--ink-soft);
}

.delete-account-btn {
	margin-top: 1rem;
}

@media (max-width: 900px) {
	/* One column: interleave the two so summaries sit near the top instead of after the whole shelf. */
	.rp-layout {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.rp-main,
	.rp-side {
		display: contents;
	}

	.rp-layout .reader-profile-section {
		order: 9;
	}

	.rp-layout .rp-order-1 { order: 1; }
	.rp-layout .rp-order-2 { order: 2; }
	.rp-layout .rp-order-3 { order: 3; }
	.rp-layout .rp-order-4 { order: 4; }
	.rp-layout .rp-order-5 { order: 5; }
	.rp-layout .rp-order-6 { order: 6; }
	.rp-layout .rp-order-7 { order: 7; }
	.rp-layout .rp-order-8 { order: 8; }

	.reader-profile-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rp-goal-tile {
		grid-column: 1 / -1;
	}
}

@media (max-width: 620px) {
	.reader-profile-hero {
		flex-wrap: wrap;
	}

	.rp-hero-actions {
		flex-direction: row;
		width: 100%;
	}

	.rp-hero-actions > * {
		flex: 1;
	}

	.rp-favorites {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.rp-diary li {
		grid-template-columns: 1.6rem 34px minmax(0, 1fr);
	}

	.rp-diary .rp-rating {
		grid-column: 3;
	}
}

.rp-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.1rem;
}

/* Recent activity: books added and finished, each with a like and a comment thread */
.rp-activity-list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--btn-sub-bg);
}

.activity-item {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 0.75rem;
	align-items: start;
	padding: 0.65rem 0.75rem;
}

.activity-item + .activity-item {
	border-top: 1px solid var(--line);
}

.activity-line {
	margin: 0;
	color: var(--ink);
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.activity-line .rp-book-link {
	font-weight: 700;
}

.activity-by {
	color: var(--ink-soft);
}

.activity-meta {
	margin: 0.1rem 0 0;
	color: var(--ink-soft);
	font-size: 0.8rem;
}

.activity-actions {
	display: flex;
	gap: 0.4rem;
	margin-top: 0.35rem;
}

.activity-action {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.7rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--card);
	color: var(--ink-soft);
	font-size: 0.85rem;
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.activity-action svg {
	width: 16px;
	height: 16px;
}

.activity-action:hover:not(.is-static, :disabled) {
	background: color-mix(in srgb, var(--accent) 8%, var(--card));
	color: var(--ink);
}

.activity-action:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.activity-action:disabled {
	cursor: progress;
	opacity: 0.7;
}

.activity-action.is-static {
	cursor: default;
	border-color: transparent;
	background: transparent;
}

.activity-action.is-liked {
	border-color: var(--danger);
	background: color-mix(in srgb, var(--danger) 12%, var(--card));
	color: var(--danger);
}

.activity-action.is-liked svg {
	fill: currentColor;
}

.activity-thread {
	margin-top: 0.5rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--line);
}

.activity-thread .hint {
	margin: 0 0 0.4rem;
}

.activity-comment-list {
	display: grid;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
	padding: 0;
	list-style: none;
}

.activity-comment {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr) auto;
	gap: 0.5rem;
	align-items: start;
}

.activity-comment-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
}

.activity-comment-body p {
	margin: 0;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.activity-comment-body small {
	color: var(--ink-soft);
	font-size: 0.75rem;
}

.activity-comment-delete {
	width: 44px;
	height: 44px;
}

.activity-comment-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.4rem;
}

.activity-comment-form input,
.activity-comment-form .btn-main {
	min-height: 44px;
}

.activity-status:empty {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.activity-action {
		transition: none;
	}
}

/* styles/book-edit.css */
.book-edit-form {
	display: grid;
	gap: 0.75rem;
	padding: 0.1rem 0;
	animation: rise 220ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.book-edit-form {
		animation: none;
	}
}

.book-edit-form .field input,
.book-edit-form .field select {
	padding: 0.55rem 0.68rem;
}

.book-edit-form .btn-row {
	justify-content: flex-start;
}

.toggle-read {
	background: color-mix(in srgb, var(--accent) 14%, var(--btn-sub-bg));
	color: color-mix(in srgb, var(--accent) 65%, var(--ink));
	border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
}

.recommend {
	background: color-mix(in srgb, var(--accent) 8%, var(--btn-sub-bg));
	color: var(--ink);
	border: 1px solid var(--line);
}

.remove {
	background: color-mix(in srgb, var(--danger) 16%, var(--btn-sub-bg));
	color: var(--danger);
	border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--btn-sub-bg));
}

.btn-main.remove {
	background: color-mix(in srgb, var(--danger) 16%, var(--btn-sub-bg));
	color: var(--danger);
}

.empty {
	text-align: center;
	color: var(--ink-soft);
	border: 1px dashed var(--line);
	border-radius: 6px;
	padding: 1.2rem;
	background: color-mix(in srgb, var(--card) 60%, transparent);
}

.series-detect-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.series-detect-row [hidden] {
	display: none;
}

/* styles/profile-extras.css */
.stats-overview {
	margin-bottom: 1.1rem;
	padding-bottom: 1.1rem;
	border-bottom: 1px solid color-mix(in srgb, var(--ink-soft) 40%, var(--auth-card-border));
}

.stats-overview h3,
.stats-heading {
	font-size: 0.9rem;
	margin-bottom: 0.65rem;
}

.stats-overview .accent-bar {
	margin-top: 0.75rem;
}

.reading-year-field {
	margin-bottom: 0.9rem;
}

.reading-history {
	margin-top: 1.2rem;
	padding-top: 1rem;
	border-top: 1px solid color-mix(in srgb, var(--ink-soft) 40%, var(--auth-card-border));
}

.recommendations-panel {
	padding-bottom: 1rem;
	border-bottom: 1px solid color-mix(in srgb, var(--ink-soft) 40%, var(--auth-card-border));
}

.activity-panel {
	padding: 1rem 0;
	border-bottom: 1px solid color-mix(in srgb, var(--ink-soft) 40%, var(--auth-card-border));
}

.activity-list {
	display: grid;
	gap: 0.45rem;
	color: var(--ink-soft);
	font-size: 0.88rem;
}

.activity-list p {
	margin: 0;
}

.activity-list strong,
.activity-list span {
	color: var(--ink);
}

.recommendations-list {
	display: grid;
	gap: 0.5rem;
	color: var(--ink-soft);
	font-size: 0.88rem;
}

.notifications-list {
	display: grid;
	gap: 0.55rem;
	margin-top: 0.75rem;
	max-height: min(65vh, 620px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.notifications-toolbar {
	display: flex;
	justify-content: flex-end;
	gap: 1rem;
	margin-top: 0.5rem;
	font-size: 0.85rem;
}

.notifications-toolbar[hidden] {
	display: none;
}

/* Unread notifications stand out; read ones stay in the history, quieter.
   Specificity note: many per-theme rules in themes.css load after this file and reset
   `.notification-item` background/border-color at the same specificity (attribute + class).
   The `article` qualifier here outranks those so unread styling survives on every theme. */
article.notification-item.unread {
	border-left: 4px solid var(--accent);
	background: color-mix(in srgb, var(--accent) 16%, var(--btn-sub-bg));
}

.notification-item.unread strong {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.notification-item.unread strong::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
}

.notification-item:not(.unread) strong {
	font-weight: 600;
	color: var(--ink-soft);
}

.notifications-load-older {
	justify-self: center;
}

.notification-item {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr) auto;
	gap: 0.65rem;
	align-items: center;
	width: 100%;
	padding: 0.65rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--btn-sub-bg);
	color: var(--ink);
	text-align: left;
	transition: box-shadow 120ms ease;
}

/* Match the generic `button:hover` wash (forms.css) across the whole row instead of just
   the inner .notification-open button, which otherwise paints its own smaller rectangle. */
article.notification-item:hover {
	box-shadow: inset 0 0 0 999px color-mix(in srgb, currentColor 14%, transparent);
}

.notification-open:hover {
	transform: none;
	box-shadow: none;
}

button.notification-item {
	grid-template-columns: 32px minmax(0, 1fr);
}

.notification-open {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	grid-column: 1 / 3;
	gap: 0.65rem;
	align-items: center;
	min-width: 0;
	padding: 0;
	background: transparent;
	color: inherit;
	text-align: left;
}

.notification-item svg,
.notification-open svg {
	width: 18px;
	height: 18px;
	color: var(--accent);
}

.notification-item span,
.notification-open span {
	display: grid;
	gap: 0.1rem;
	min-width: 0;
}

.notification-item small {
	color: var(--ink-soft);
	font-size: 0.8rem;
}

.notification-item .notification-preview {
	overflow: hidden;
	color: var(--ink);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.notification-open .notification-badge {
	display: inline-grid;
	vertical-align: middle;
}

.notification-item .notification-accept svg {
	color: light-dark(#2f7a4f, #6fcf97);
}

.notification-item .notification-decline svg {
	color: var(--danger);
}

.notification-actions {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.notification-actions .icon-btn {
	width: 32px;
	height: 32px;
}

.recommendation-item {
	padding: 0.65rem;
	border: 1px solid var(--tint-recommendation-border);
	border-left: 4px solid #5a83a8;
	border-radius: 6px;
	background: var(--tint-recommendation-bg);
}

.recommendation-item p + p {
	margin-top: 0.35rem;
}

.book-details-content {
	display: grid;
	gap: 1rem;
}

.book-details-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.7rem;
	margin: 0;
}

.book-details-list div {
	padding: 0.6rem;
	border: 1px solid var(--auth-card-border);
	border-radius: 7px;
}

.book-details-list dt {
	font-size: 0.76rem;
	font-weight: 700;
	color: var(--ink-soft);
	text-transform: none;
}

.book-details-list dd {
	margin: 0.2rem 0 0;
}

.book-details-content section {
	border-top: 1px solid color-mix(in srgb, var(--ink-soft) 40%, var(--auth-card-border));
	padding-top: 0.8rem;
}

.book-details-content h3 {
	font-size: 0.95rem;
	margin-bottom: 0.35rem;
}

.book-details-content p,
.book-details-content blockquote {
	margin: 0;
	white-space: pre-wrap;
}

.recommendation-item-actions {
	display: flex;
	gap: 0.35rem;
	flex-wrap: wrap;
	margin-top: 0.5rem;
}

.recommendation-item-actions button {
	background: var(--tint-recommendation-btn-bg);
	border: 1px solid #dfd0be;
	color: var(--ink-soft);
	border-radius: 6px;
	padding: 0.3rem 0.6rem;
	font-size: 0.82rem;
	cursor: pointer;
}

.recommendation-item-actions button:first-child {
	background: var(--accent, #5a83a8);
	border-color: var(--accent, #5a83a8);
	color: #fff;
}

.recommendation-item-actions button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.recommendation-item-actions button.recommendation-delete {
	background: var(--tint-recommendation-delete-bg);
	border-color: var(--tint-recommendation-delete-border);
	color: var(--tint-recommendation-delete-color);
}

.reading-history h3 {
	font-size: 0.95rem;
	margin-bottom: 0.65rem;
}

.shelf-insights {
	margin-top: 1.1rem;
	padding-top: 0.9rem;
	border-top: 1px solid color-mix(in srgb, var(--ink-soft) 40%, var(--auth-card-border));
}

.shelf-insights h3 {
	font-size: 0.95rem;
}

.shelf-insights .toolbar {
	margin-bottom: 0.6rem;
}

.insights-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
}

.insights-list > div {
	padding: 0.55rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.65);
}

.insights-list span,
.insights-list strong {
	display: block;
}

.insights-list span {
	font-size: 0.76rem;
	color: var(--ink-soft);
}

.insights-list strong {
	margin-top: 0.1rem;
	font-size: 0.86rem;
}

.monthly-history {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0.45rem;
}

.month-count,
.history-empty {
	border: 1px solid var(--line);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.7);
	padding: 0.42rem;
	text-align: center;
	color: var(--ink-soft);
	font-size: 0.78rem;
}

button.month-count {
	font: inherit;
	width: 100%;
	cursor: not-allowed;
	transition: transform 120ms ease, border-color 120ms ease;
}

button.month-count.has-books {
	cursor: pointer;
}

button.month-count.has-books:focus-visible {
	transform: translateY(-1px);
	border-color: var(--accent);
}

button.month-count.selected {
	border-color: var(--accent);
	background: var(--accent);
	color: #fff;
}

button.month-count.selected strong {
	color: #fff;
}

.insights-scope {
	margin-top: -0.2rem;
}

.link-btn {
	border: 0;
	background: none;
	padding: 0;
	color: var(--accent);
	font: inherit;
	font-size: 0.82rem;
	text-decoration: underline;
	cursor: pointer;
}

.compact-dialog > .remove {
	margin-top: 0.9rem;
}

.app-notice {
	position: fixed;
	left: 50%;
	bottom: 1.25rem;
	width: max-content;
	max-width: calc(100% - 2rem);
	padding: 0.68rem 0.9rem;
	border-radius: 8px;
	background: var(--ink);
	color: var(--card);
	box-shadow: 0 10px 25px rgba(19, 34, 45, 0.22);
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 0.5rem);
	transition: opacity 180ms ease, transform 180ms ease;
}

.app-notice.visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

.month-count strong {
	display: block;
	font-size: 1rem;
	color: var(--ink);
}

.month-count.has-books {
	border-color: var(--tint-month-has-books-border);
	background: var(--tint-month-has-books-bg);
}

.history-empty {
	grid-column: 1 / -1;
	padding: 0.7rem;
}

/* Hover effects (restored) */

button.month-count.has-books:hover {
	transform: translateY(-1px);
	border-color: var(--accent);
}

/* Reading History: one bar per month, matching the reader profile's "Year in Books" chart. */
.history-bar-chart {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 2px;
	height: 140px;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--line);
}

.history-bar-chart li {
	position: relative;
	min-width: 0;
	height: 100%;
}

.history-bar-plot {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 100%;
}

.history-bar-btn {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	width: 100%;
	height: 100%;
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: not-allowed;
}

.history-bar-btn.has-books {
	cursor: pointer;
}

.history-bar {
	display: block;
	width: min(100%, 16px);
	border-radius: 5px 5px 0 0;
	background: var(--line);
	transition: background-color 120ms ease, opacity 120ms ease;
}

.history-bar-btn.has-books .history-bar {
	background: var(--accent);
}

.history-bar-btn.selected .history-bar {
	background: var(--ink);
}

.history-bar-btn.has-books:hover .history-bar,
.history-bar-btn.has-books:focus-visible .history-bar {
	opacity: 0.8;
}

.history-bar-btn:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.history-bar-label {
	padding-top: 0.2rem;
	color: var(--ink-soft);
	font-size: 0.68rem;
	text-align: center;
}

.history-bar-chart li:hover::after,
.history-bar-chart li:focus-within::after {
	content: attr(data-value);
	position: absolute;
	bottom: calc(100% - 0.5rem);
	left: 50%;
	z-index: 2;
	padding: 0.2rem 0.45rem;
	border-radius: 4px;
	background: var(--ink);
	color: var(--card);
	font-size: 0.72rem;
	white-space: nowrap;
	transform: translateX(-50%);
	pointer-events: none;
}

.history-bar-chart li:first-child:hover::after,
.history-bar-chart li:first-child:focus-within::after {
	left: 0;
	transform: none;
}

.history-bar-chart li:last-child:hover::after,
.history-bar-chart li:last-child:focus-within::after {
	right: 0;
	left: auto;
	transform: none;
}

/* styles/responsive.css */
.hint {
	font-size: 0.88rem;
	color: var(--ink-soft);
	margin-top: 0.3rem;
}

@keyframes page-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes rise {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

@media (min-width: 980px) {
	.grid {
		grid-template-columns: 1.05fr 1fr;
	}

	.library-dashboard {
		grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
	}

	.now-reading-section {
		grid-column: 1 / -1;
	}

	.shelf-section {
		grid-column: 1 / -1;
	}

	.side-books {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.library-dashboard {
		grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
		align-items: start;
	}

	.shelf-section {
		grid-column: 1 / -1;
		margin-top: 0.2rem;
	}
}

@media (max-width: 620px) {
	.wrap {
		width: min(100% - 1rem, 1120px);
		margin-top: 0.5rem;
	}

	.account-strip,
	.app-heading,
	.toolbar {
		align-items: flex-start;
		flex-direction: column;
	}

	.account-strip {
		flex-direction: row;
	}

	.app-heading {
		gap: 0.65rem;
	}

	.view-nav {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.view-nav button {
		width: 100%;
		padding-inline: 0.35rem;
	}

	.shelf-controls,
	.toolbar select {
		width: 100%;
	}

	.shelf-controls select {
		flex: 1;
	}

	.shelf-controls {
		flex-wrap: wrap;
	}

	.book-details-list {
		grid-template-columns: 1fr;
	}

	.shelf-controls input,
	.shelf-controls select {
		min-width: 0;
		flex: 1 1 140px;
	}

	.shelf-controls input,
	#sort-view {
		flex-basis: 100%;
	}

	.status-tabs {
		flex-wrap: wrap;
	}

	.status-tabs button {
		flex: 1 1 auto;
	}

	.search-row {
		grid-template-columns: 1fr;
	}

	.search-row button {
		width: 100%;
	}

	.monthly-history {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.insights-list {
		grid-template-columns: 1fr;
	}

	.reader-profile-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.favorite-book-search {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 620px) {
	.series-tracker-list .series-item strong {
		flex: 1 1 calc(100% - 3rem);
		min-width: 0;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.series-tracker-list .series-item .meta {
		white-space: normal;
	}

	.series-tracker-list .series-item label {
		white-space: normal;
	}

	.series-tracker-filters,
	.series-tracker-select-group {
		width: 100%;
	}

	.series-tracker-select-group select {
		flex: 1 1 140px;
		min-width: 0;
	}

	.series-filter-pills {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 0.3rem;
	}

	.series-filter-pills button {
		flex: 0 0 auto;
	}

	.club-past-discussions-grid {
		grid-template-columns: 1fr;
	}

	.toolbar select,
	#author-filter {
		min-width: 0;
		max-width: 100%;
	}

	.challenge-summary-card b {
		white-space: normal;
	}
}

@media (max-width: 760px) {
	.auth-columns,
	.form-grid,
	.stats,
	.challenge-directory {
		grid-template-columns: 1fr;
	}

	.community-shell {
		grid-template-columns: 1fr;
		padding: 0.85rem;
	}

	.book-clubs-hub,
	.friends-hub {
		grid-template-columns: 1fr;
		grid-template-areas:
			"heading"
			"clubs"
			"sidebar"
			"chat"
			"invites";
	}

	.friend-chat-room {
		height: 60vh;
		min-height: 360px;
	}

	.club-workspace-hero,
	.club-inline-form {
		flex-direction: column;
	}

	.shelf-layout {
		padding: 1rem;
	}

	.account-strip {
		flex-direction: column;
		align-items: flex-start;
	}

	.search-row,
	.search-item {
		grid-template-columns: 1fr;
	}

	.book {
		grid-template-columns: 1fr;
	}

	.reader-profile-shared article {
		grid-template-columns: 1fr;
		text-align: left;
	}

	.reader-profile-hero {
		align-items: flex-start;
		flex-direction: column;
	}

	.reader-profile-list,
	.reader-profile-shared {
		grid-template-columns: 1fr;
	}

	.book-actions {
		justify-content: flex-start;
	}

	.book-editor {
		grid-column: auto;
	}
}


@media (max-width: 620px) {
	/* Let flex/grid children shrink to the screen instead of pushing the series tracker past it. */
	.journal-panel,
	.series-tracker-filters,
	.series-tracker-filters > *,
	.series-filter-pills {
		min-width: 0;
		max-width: 100%;
	}

	/* One swipeable row of status filters rather than a lone tab wrapping onto its own line. */
	.status-tabs {
		flex-wrap: nowrap;
		max-width: 100%;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.status-tabs::-webkit-scrollbar {
		display: none;
	}

	.status-tabs button {
		flex: 1 0 auto;
		white-space: nowrap;
	}
}

/* styles/themes.css */
[data-theme="notepad"] {
	--bg-1: #eee7d8;
	--bg-2: #d9d0be;
	--ink: #302a23;
	--ink-soft: #766b5e;
	--card: rgba(255, 251, 239, 0.94);
	--line: #d5c7ae;
	--accent: #9b5b35;
	--accent-2: #c77c42;
	--strip-bg: rgba(255, 248, 229, 0.9);
	--strip-border: #d5c7ae;
	--input-bg: #fffdf6;
	--btn-sub-bg: #e8ddc8;
	--dialog-bg: #fffaf0;
	--dialog-border: #d5c7ae;
	color-scheme: light;
}

[data-theme="notepad"] body {
	background:
		linear-gradient(rgba(155, 91, 53, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(155, 91, 53, 0.045) 1px, transparent 1px),
		linear-gradient(135deg, var(--bg-1), var(--bg-2));
	background-size: 32px 32px, 32px 32px, auto;
}

/* Final palette overrides: keep the named themes above legacy surface rules. */

html[data-theme="neon"] {
	--bg-1: #2d1b69;
	--bg-2: #1a0f42;
	--ink: #f1ecff;
	--ink-soft: #b7a9e0;
	--card: rgba(58, 38, 122, 0.9);
	--line: #4b3594;
	--accent: #c8ff3d;
	--accent-2: #a78bfa;
	--danger: #ff7a8a;
	--shadow: 0 18px 45px rgba(10, 4, 34, 0.6);
	--strip-bg: rgba(38, 23, 88, 0.78);
	--strip-border: #4b3594;
	--input-bg: rgba(255, 255, 255, 0.07);
	--btn-sub-bg: #3d2a86;
	--dialog-bg: #2a1a63;
	--dialog-border: #4b3594;
	--auth-card-bg: rgba(255, 255, 255, 0.05);
	--auth-card-border: #4b3594;
	--backdrop: rgba(10, 4, 34, 0.7);
	color-scheme: dark;
}

[data-theme="neon"] body {
	background: #2d1b69;
}

[data-theme="neon"] .panel,
[data-theme="neon"] .app-dialog,
[data-theme="neon"] .book,
[data-theme="neon"] .book-club-card,
[data-theme="neon"] .friend-item,
[data-theme="neon"] .notification-item,
[data-theme="neon"] .search-panel,
[data-theme="neon"] .profile-options-panel,
[data-theme="neon"] .now-reading-card,
[data-theme="neon"] .wishlist-card,
[data-theme="neon"] .stat,
[data-theme="neon"] .search-item,
[data-theme="neon"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="neon"] .btn-main,
[data-theme="neon"] .view-nav button.active,
[data-theme="neon"] .status-tabs button.active {
	background: #c8ff3d;
	color: #2d1b69;
}

[data-theme="neon"] input,
[data-theme="neon"] select,
[data-theme="neon"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

/* Neon: swap translucent-white surfaces for translucent purple so nothing reads as white */
[data-theme="neon"] .book-clubs-hub,
[data-theme="neon"] .friends-hub,
[data-theme="neon"] .club-chat-room,
[data-theme="neon"] .friend-chat-room,
[data-theme="neon"] .club-workspace-dialog,
[data-theme="neon"] .club-workspace-inline {
	border-color: var(--line);
	background: rgba(26, 15, 66, 0.85);
}

[data-theme="neon"] .club-workspace-hero,
[data-theme="neon"] .club-workspace-section,
[data-theme="neon"] .chapter-safety-note,
[data-theme="neon"] .chapter-directory,
[data-theme="neon"] .club-workspace-inline .club-room-row,
[data-theme="neon"] .club-workspace-inline .chapter-row,
[data-theme="neon"] .club-workspace-inline .club-reading-item,
[data-theme="neon"] .friend-form,
[data-theme="neon"] .chat-form,
[data-theme="neon"] .chat-messages,
[data-theme="neon"] .chat-bubble,
[data-theme="neon"] .chat-empty,
[data-theme="neon"] .shelf-recommendation,
[data-theme="neon"] .insights-list > div,
[data-theme="neon"] .series-tracker-stats > div,
[data-theme="neon"] .month-count,
[data-theme="neon"] .history-empty,
[data-theme="neon"] .side-books .empty,
[data-theme="neon"] .club-members span,
[data-theme="neon"] .toolbar select {
	border-color: var(--line);
	background: rgba(58, 38, 122, 0.55);
	color: var(--ink);
}

[data-theme="neon"] .club-room-row.active,
[data-theme="neon"] .chapter-row.active {
	border-color: rgba(200, 255, 61, 0.5);
	background: rgba(200, 255, 61, 0.14);
	color: #c8ff3d;
}

[data-theme="neon"] .pill {
	border-color: var(--line);
}

[data-theme="neon"] .pill.read,
[data-theme="neon"] .pill.status-finished,
[data-theme="neon"] .pill.recommended-by {
	border-color: rgba(200, 255, 61, 0.45);
	background: rgba(200, 255, 61, 0.16);
	color: #c8ff3d;
}

[data-theme="neon"] .pill.status-dnf {
	border-color: rgba(255, 122, 138, 0.45);
	background: rgba(255, 122, 138, 0.18);
	color: #ffb4bd;
}

/* Neon: lime backgrounds need dark purple text, not white */
[data-theme="neon"] .btn-main,
[data-theme="neon"] .btn-main *,
[data-theme="neon"] .challenge-book-action.complete.active,
[data-theme="neon"] .letter-pill.active,
[data-theme="neon"] .recommendation-item-actions button:first-child,
[data-theme="neon"] button.month-count.selected,
[data-theme="neon"] button.month-count.selected strong {
	background-color: #c8ff3d;
	color: #2d1b69;
}

[data-theme="neon"] .btn-main *,
[data-theme="neon"] button.month-count.selected strong {
	background-color: transparent;
}

html[data-theme="citrus"] {
	--bg-1: #fff4d6;
	--bg-2: #fff4d6;
	--ink: #3b2314;
	--ink-soft: #7a5a44;
	--card: rgba(255, 250, 236, 0.96);
	--line: #f0d9a8;
	--accent: #b14d16;
	--accent-2: #c2410c;
	--danger: #c0392b;
	--shadow: 0 18px 42px rgba(120, 60, 15, 0.12);
	--strip-bg: rgba(255, 248, 228, 0.92);
	--strip-border: #f0d9a8;
	--input-bg: #fffaec;
	--btn-sub-bg: #ffe9b8;
	--dialog-bg: #fffaec;
	--dialog-border: #f0d9a8;
	--auth-card-bg: rgba(255, 250, 236, 0.8);
	--auth-card-border: #f0d9a8;
	--backdrop: rgba(59, 35, 20, 0.5);
	color-scheme: light;
}

[data-theme="citrus"] body {
	background: #fff4d6;
}

[data-theme="citrus"] .panel,
[data-theme="citrus"] .app-dialog,
[data-theme="citrus"] .book,
[data-theme="citrus"] .book-club-card,
[data-theme="citrus"] .friend-item,
[data-theme="citrus"] .notification-item,
[data-theme="citrus"] .search-panel,
[data-theme="citrus"] .profile-options-panel,
[data-theme="citrus"] .now-reading-card,
[data-theme="citrus"] .wishlist-card,
[data-theme="citrus"] .stat,
[data-theme="citrus"] .search-item,
[data-theme="citrus"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="citrus"] input,
[data-theme="citrus"] select,
[data-theme="citrus"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

/* Orange backgrounds need dark text for contrast */
[data-theme="citrus"] .btn-main,
[data-theme="citrus"] .view-nav button.active,
[data-theme="citrus"] .status-tabs button.active,
[data-theme="citrus"] .challenge-book-action.complete.active,
[data-theme="citrus"] .letter-pill.active,
[data-theme="citrus"] .recommendation-item-actions button:first-child,
[data-theme="citrus"] button.month-count.selected,
[data-theme="citrus"] button.month-count.selected strong {
	background-color: #b14d16;
	color: #ffffff;
}

[data-theme="citrus"] button.month-count.selected strong {
	background-color: transparent;
}

html[data-theme="dark"] {
	--bg-1: #25272c;
	--bg-2: #25272c;
	--ink: #e9fbf5;
	--ink-soft: #9fb5ad;
	--card: rgba(50, 53, 60, 0.94);
	--line: #3f434b;
	--accent: #b8f7e4;
	--accent-2: #7fd8bf;
	--danger: #ff8a80;
	--shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
	--strip-bg: rgba(37, 39, 44, 0.85);
	--strip-border: #3f434b;
	--input-bg: rgba(255, 255, 255, 0.06);
	--btn-sub-bg: #33363d;
	--dialog-bg: #2c2e34;
	--dialog-border: #3f434b;
	--auth-card-bg: rgba(255, 255, 255, 0.04);
	--auth-card-border: #3f434b;
	--backdrop: rgba(0, 0, 0, 0.65);
	color-scheme: dark;
}

[data-theme="dark"] body {
	background: #25272c;
}

[data-theme="dark"] .panel,
[data-theme="dark"] .app-dialog,
[data-theme="dark"] .book,
[data-theme="dark"] .book-club-card,
[data-theme="dark"] .friend-item,
[data-theme="dark"] .notification-item,
[data-theme="dark"] .search-panel,
[data-theme="dark"] .profile-options-panel,
[data-theme="dark"] .now-reading-card,
[data-theme="dark"] .wishlist-card,
[data-theme="dark"] .stat,
[data-theme="dark"] .search-item,
[data-theme="dark"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="dark"] .book-clubs-hub,
[data-theme="dark"] .friends-hub,
[data-theme="dark"] .club-chat-room,
[data-theme="dark"] .friend-chat-room,
[data-theme="dark"] .club-workspace-dialog,
[data-theme="dark"] .club-workspace-inline {
	border-color: var(--line);
	background: rgba(37, 39, 44, 0.9);
}

[data-theme="dark"] .club-workspace-hero,
[data-theme="dark"] .club-workspace-section,
[data-theme="dark"] .chapter-safety-note,
[data-theme="dark"] .chapter-directory,
[data-theme="dark"] .club-workspace-inline .club-room-row,
[data-theme="dark"] .club-workspace-inline .chapter-row,
[data-theme="dark"] .club-workspace-inline .club-reading-item,
[data-theme="dark"] .friend-form,
[data-theme="dark"] .chat-form,
[data-theme="dark"] .chat-messages,
[data-theme="dark"] .chat-bubble,
[data-theme="dark"] .chat-empty,
[data-theme="dark"] .shelf-recommendation,
[data-theme="dark"] .insights-list > div,
[data-theme="dark"] .series-tracker-stats > div,
[data-theme="dark"] .month-count,
[data-theme="dark"] .history-empty,
[data-theme="dark"] .side-books .empty,
[data-theme="dark"] .club-members span,
[data-theme="dark"] .toolbar select {
	border-color: var(--line);
	background: rgba(255, 255, 255, 0.05);
	color: var(--ink);
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="dark"] .club-room-row.active,
[data-theme="dark"] .chapter-row.active {
	border-color: rgba(184, 247, 228, 0.5);
	background: rgba(184, 247, 228, 0.12);
	color: #b8f7e4;
}

[data-theme="dark"] .pill {
	border-color: var(--line);
}

[data-theme="dark"] .pill.read,
[data-theme="dark"] .pill.status-finished,
[data-theme="dark"] .pill.recommended-by {
	border-color: rgba(184, 247, 228, 0.45);
	background: rgba(184, 247, 228, 0.16);
	color: #b8f7e4;
}

[data-theme="dark"] .pill.status-dnf {
	border-color: rgba(255, 138, 128, 0.45);
	background: rgba(255, 138, 128, 0.18);
	color: #ffb4ab;
}

/* Dark backgrounds need charcoal text, not white */
[data-theme="dark"] .btn-main,
[data-theme="dark"] .view-nav button.active,
[data-theme="dark"] .status-tabs button.active,
[data-theme="dark"] .challenge-book-action.complete.active,
[data-theme="dark"] .letter-pill.active,
[data-theme="dark"] .recommendation-item-actions button:first-child,
[data-theme="dark"] button.month-count.selected,
[data-theme="dark"] button.month-count.selected strong {
	background-color: #b8f7e4;
	color: #25272c;
}

[data-theme="dark"] button.month-count.selected strong {
	background-color: transparent;
}

/* Neon/Dark are dark themes: reuse the light-on-dark series status pill colours */
[data-theme="neon"] .pill.series-status-ongoing,
[data-theme="dark"] .pill.series-status-ongoing {
	border-color: rgba(140, 185, 230, 0.5);
	color: #a9d0f5;
	background: rgba(104, 145, 181, 0.22);
}[data-theme="neon"] .pill.my-status-in-progress,
[data-theme="dark"] .pill.my-status-in-progress {
	border-color: rgba(80, 210, 230, 0.5);
	color: #86e3f2;
	background: rgba(20, 160, 185, 0.22);
}[data-theme="neon"] .pill.my-status-up-to-date,
[data-theme="dark"] .pill.my-status-up-to-date {
	border-color: rgba(70, 200, 175, 0.5);
	color: #7fe3cc;
	background: rgba(19, 140, 120, 0.22);
}[data-theme="neon"] .pill.series-status-complete,
[data-theme="dark"] .pill.series-status-complete {
	border-color: rgba(160, 205, 70, 0.5);
	color: #c5e77f;
	background: rgba(120, 165, 35, 0.22);
}[data-theme="neon"] .pill.my-status-not-started,
[data-theme="dark"] .pill.my-status-not-started {
	border-color: rgba(230, 180, 80, 0.5);
	color: #f0c877;
	background: rgba(209, 150, 30, 0.2);
}[data-theme="neon"] .pill.my-status-complete,
[data-theme="dark"] .pill.my-status-complete {
	border-color: rgba(190, 140, 220, 0.5);
	color: #d8b0f0;
	background: rgba(122, 74, 140, 0.25);
}/* Berry backgrounds need charcoal text, not white */

/* Additional themes: rose, forest, midnight */

html[data-theme="rose"] {
	--bg-1: #fde8ee;
	--bg-2: #fde8ee;
	--ink: #3d1a26;
	--ink-soft: #83505f;
	--card: rgba(255,246,249,0.96);
	--line: #f1c4d1;
	--accent: #c2255c;
	--accent-2: #9c1a48;
	--danger: #b3261e;
	--shadow: 0 18px 45px rgba(150,30,70,0.13);
	--strip-bg: rgba(255,246,249,0.96);
	--strip-border: #f1c4d1;
	--input-bg: #fff6f9;
	--btn-sub-bg: #f8d5df;
	--dialog-bg: #fff6f9;
	--dialog-border: #f1c4d1;
	--auth-card-bg: rgba(255,246,249,0.96);
	--auth-card-border: #f1c4d1;
	--backdrop: rgba(61,26,38,0.5);
	color-scheme: light;
}

[data-theme="rose"] body {
	background: #fde8ee;
}

[data-theme="rose"] .panel,
[data-theme="rose"] .app-dialog,
[data-theme="rose"] .book,
[data-theme="rose"] .book-club-card,
[data-theme="rose"] .friend-item,
[data-theme="rose"] .notification-item,
[data-theme="rose"] .search-panel,
[data-theme="rose"] .profile-options-panel,
[data-theme="rose"] .now-reading-card,
[data-theme="rose"] .wishlist-card,
[data-theme="rose"] .stat,
[data-theme="rose"] .search-item,
[data-theme="rose"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="rose"] input,
[data-theme="rose"] select,
[data-theme="rose"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="rose"] .btn-main,
[data-theme="rose"] .view-nav button.active,
[data-theme="rose"] .status-tabs button.active,
[data-theme="rose"] .challenge-book-action.complete.active,
[data-theme="rose"] .letter-pill.active,
[data-theme="rose"] .recommendation-item-actions button:first-child,
[data-theme="rose"] button.month-count.selected,
[data-theme="rose"] button.month-count.selected strong {
	background-color: #c2255c;
	color: #ffffff;
}

[data-theme="rose"] button.month-count.selected strong {
	background-color: transparent;
}

html[data-theme="forest"] {
	--bg-1: #075E46;
	--bg-2: #075E46;
	--ink: #E8FFF2;
	--ink-soft: #a8d9c2;
	--card: rgba(4, 72, 53, 0.94);
	--line: #1f8a69;
	--accent: #E8FFF2;
	--accent-2: #b8f0d4;
	--danger: #ff8a80;
	--shadow: 0 18px 45px rgba(0,0,0,0.45);
	--strip-bg: rgba(4, 72, 53, 0.94);
	--strip-border: #1f8a69;
	--input-bg: rgba(255,255,255,0.06);
	--btn-sub-bg: #0a7154;
	--dialog-bg: #06694f;
	--dialog-border: #1f8a69;
	--auth-card-bg: rgba(4, 72, 53, 0.94);
	--auth-card-border: #1f8a69;
	--backdrop: rgba(0,0,0,0.65);
	color-scheme: dark;
}

[data-theme="forest"] body {
	background: #075E46;
}

[data-theme="forest"] .panel,
[data-theme="forest"] .app-dialog,
[data-theme="forest"] .book,
[data-theme="forest"] .book-club-card,
[data-theme="forest"] .friend-item,
[data-theme="forest"] .notification-item,
[data-theme="forest"] .search-panel,
[data-theme="forest"] .profile-options-panel,
[data-theme="forest"] .now-reading-card,
[data-theme="forest"] .wishlist-card,
[data-theme="forest"] .stat,
[data-theme="forest"] .search-item,
[data-theme="forest"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="forest"] .book-clubs-hub,
[data-theme="forest"] .friends-hub,
[data-theme="forest"] .club-chat-room,
[data-theme="forest"] .friend-chat-room,
[data-theme="forest"] .club-workspace-dialog,
[data-theme="forest"] .club-workspace-inline {
	border-color: var(--line);
	background: rgba(4, 72, 53, 0.94);
}

[data-theme="forest"] .club-workspace-hero,
[data-theme="forest"] .club-workspace-section,
[data-theme="forest"] .chapter-safety-note,
[data-theme="forest"] .chapter-directory,
[data-theme="forest"] .club-workspace-inline .club-room-row,
[data-theme="forest"] .club-workspace-inline .chapter-row,
[data-theme="forest"] .club-workspace-inline .club-reading-item,
[data-theme="forest"] .friend-form,
[data-theme="forest"] .chat-form,
[data-theme="forest"] .chat-messages,
[data-theme="forest"] .chat-bubble,
[data-theme="forest"] .chat-empty,
[data-theme="forest"] .shelf-recommendation,
[data-theme="forest"] .insights-list > div,
[data-theme="forest"] .series-tracker-stats > div,
[data-theme="forest"] .month-count,
[data-theme="forest"] .history-empty,
[data-theme="forest"] .side-books .empty,
[data-theme="forest"] .club-members span,
[data-theme="forest"] .toolbar select {
	border-color: var(--line);
	background: rgba(255, 255, 255, 0.05);
	color: var(--ink);
}

[data-theme="forest"] input,
[data-theme="forest"] select,
[data-theme="forest"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="forest"] .btn-main,
[data-theme="forest"] .view-nav button.active,
[data-theme="forest"] .status-tabs button.active,
[data-theme="forest"] .challenge-book-action.complete.active,
[data-theme="forest"] .letter-pill.active,
[data-theme="forest"] .recommendation-item-actions button:first-child,
[data-theme="forest"] button.month-count.selected,
[data-theme="forest"] button.month-count.selected strong {
	background-color: #E8FFF2;
	color: #075E46;
}

[data-theme="forest"] button.month-count.selected strong {
	background-color: transparent;
}

html[data-theme="midnight"] {
	--bg-1: #0b1226;
	--bg-2: #0b1226;
	--ink: #e8edfb;
	--ink-soft: #9aa8cc;
	--card: rgba(18,28,56,0.94);
	--line: #26365f;
	--accent: #7aa2ff;
	--accent-2: #5b83e6;
	--danger: #ff8a80;
	--shadow: 0 18px 45px rgba(0,0,0,0.5);
	--strip-bg: rgba(18,28,56,0.94);
	--strip-border: #26365f;
	--input-bg: rgba(255,255,255,0.06);
	--btn-sub-bg: #16234a;
	--dialog-bg: #111c3d;
	--dialog-border: #26365f;
	--auth-card-bg: rgba(18,28,56,0.94);
	--auth-card-border: #26365f;
	--backdrop: rgba(0,0,0,0.65);
	color-scheme: dark;
}

[data-theme="midnight"] body {
	background: #0b1226;
}

[data-theme="midnight"] .panel,
[data-theme="midnight"] .app-dialog,
[data-theme="midnight"] .book,
[data-theme="midnight"] .book-club-card,
[data-theme="midnight"] .friend-item,
[data-theme="midnight"] .notification-item,
[data-theme="midnight"] .search-panel,
[data-theme="midnight"] .profile-options-panel,
[data-theme="midnight"] .now-reading-card,
[data-theme="midnight"] .wishlist-card,
[data-theme="midnight"] .stat,
[data-theme="midnight"] .search-item,
[data-theme="midnight"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="midnight"] .book-clubs-hub,
[data-theme="midnight"] .friends-hub,
[data-theme="midnight"] .club-chat-room,
[data-theme="midnight"] .friend-chat-room,
[data-theme="midnight"] .club-workspace-dialog,
[data-theme="midnight"] .club-workspace-inline {
	border-color: var(--line);
	background: rgba(18,28,56,0.94);
}

[data-theme="midnight"] .club-workspace-hero,
[data-theme="midnight"] .club-workspace-section,
[data-theme="midnight"] .chapter-safety-note,
[data-theme="midnight"] .chapter-directory,
[data-theme="midnight"] .club-workspace-inline .club-room-row,
[data-theme="midnight"] .club-workspace-inline .chapter-row,
[data-theme="midnight"] .club-workspace-inline .club-reading-item,
[data-theme="midnight"] .friend-form,
[data-theme="midnight"] .chat-form,
[data-theme="midnight"] .chat-messages,
[data-theme="midnight"] .chat-bubble,
[data-theme="midnight"] .chat-empty,
[data-theme="midnight"] .shelf-recommendation,
[data-theme="midnight"] .insights-list > div,
[data-theme="midnight"] .series-tracker-stats > div,
[data-theme="midnight"] .month-count,
[data-theme="midnight"] .history-empty,
[data-theme="midnight"] .side-books .empty,
[data-theme="midnight"] .club-members span,
[data-theme="midnight"] .toolbar select {
	border-color: var(--line);
	background: rgba(255, 255, 255, 0.05);
	color: var(--ink);
}

[data-theme="midnight"] input,
[data-theme="midnight"] select,
[data-theme="midnight"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="midnight"] .btn-main,
[data-theme="midnight"] .view-nav button.active,
[data-theme="midnight"] .status-tabs button.active,
[data-theme="midnight"] .challenge-book-action.complete.active,
[data-theme="midnight"] .letter-pill.active,
[data-theme="midnight"] .recommendation-item-actions button:first-child,
[data-theme="midnight"] button.month-count.selected,
[data-theme="midnight"] button.month-count.selected strong {
	background-color: #7aa2ff;
	color: #0b1226;
}

[data-theme="midnight"] button.month-count.selected strong {
	background-color: transparent;
}

html[data-theme="raspberry"] {
	--bg-1: #2A0F1E;
	--bg-2: #2A0F1E;
	--ink: #EAD9E2;
	--ink-soft: #c49bb0;
	--card: rgba(52, 22, 40, 0.94);
	--line: #5a2a44;
	--accent: #ff7fac;
	--accent-2: #e0407f;
	--danger: #ff8a80;
	--shadow: 0 18px 45px rgba(0,0,0,0.5);
	--strip-bg: rgba(52, 22, 40, 0.94);
	--strip-border: #5a2a44;
	--input-bg: rgba(255,255,255,0.06);
	--btn-sub-bg: #3a1a2d;
	--dialog-bg: #3a1a2d;
	--dialog-border: #5a2a44;
	--auth-card-bg: rgba(52, 22, 40, 0.94);
	--auth-card-border: #5a2a44;
	--backdrop: rgba(0,0,0,0.65);
	color-scheme: dark;
}

[data-theme="raspberry"] body {
	background: #2A0F1E;
}

[data-theme="raspberry"] .panel,
[data-theme="raspberry"] .app-dialog,
[data-theme="raspberry"] .book,
[data-theme="raspberry"] .book-club-card,
[data-theme="raspberry"] .friend-item,
[data-theme="raspberry"] .notification-item,
[data-theme="raspberry"] .search-panel,
[data-theme="raspberry"] .profile-options-panel,
[data-theme="raspberry"] .now-reading-card,
[data-theme="raspberry"] .wishlist-card,
[data-theme="raspberry"] .stat,
[data-theme="raspberry"] .search-item,
[data-theme="raspberry"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="raspberry"] .book-clubs-hub,
[data-theme="raspberry"] .friends-hub,
[data-theme="raspberry"] .club-chat-room,
[data-theme="raspberry"] .friend-chat-room,
[data-theme="raspberry"] .club-workspace-dialog,
[data-theme="raspberry"] .club-workspace-inline {
	border-color: var(--line);
	background: rgba(52, 22, 40, 0.94);
}

[data-theme="raspberry"] .club-workspace-hero,
[data-theme="raspberry"] .club-workspace-section,
[data-theme="raspberry"] .chapter-safety-note,
[data-theme="raspberry"] .chapter-directory,
[data-theme="raspberry"] .club-workspace-inline .club-room-row,
[data-theme="raspberry"] .club-workspace-inline .chapter-row,
[data-theme="raspberry"] .club-workspace-inline .club-reading-item,
[data-theme="raspberry"] .friend-form,
[data-theme="raspberry"] .chat-form,
[data-theme="raspberry"] .chat-messages,
[data-theme="raspberry"] .chat-bubble,
[data-theme="raspberry"] .chat-empty,
[data-theme="raspberry"] .shelf-recommendation,
[data-theme="raspberry"] .insights-list > div,
[data-theme="raspberry"] .series-tracker-stats > div,
[data-theme="raspberry"] .month-count,
[data-theme="raspberry"] .history-empty,
[data-theme="raspberry"] .side-books .empty,
[data-theme="raspberry"] .club-members span,
[data-theme="raspberry"] .toolbar select {
	border-color: var(--line);
	background: rgba(255, 255, 255, 0.05);
	color: var(--ink);
}

[data-theme="raspberry"] input,
[data-theme="raspberry"] select,
[data-theme="raspberry"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="raspberry"] .btn-main,
[data-theme="raspberry"] .view-nav button.active,
[data-theme="raspberry"] .status-tabs button.active,
[data-theme="raspberry"] .challenge-book-action.complete.active,
[data-theme="raspberry"] .letter-pill.active,
[data-theme="raspberry"] .recommendation-item-actions button:first-child,
[data-theme="raspberry"] button.month-count.selected,
[data-theme="raspberry"] button.month-count.selected strong {
	background-color: #ff7fac;
	color: #2A0F1E;
}

[data-theme="raspberry"] button.month-count.selected strong {
	background-color: transparent;
}

html[data-theme="cobalt"] {
	--bg-1: #0C1638;
	--bg-2: #0C1638;
	--ink: #D3E6F2;
	--ink-soft: #94aad0;
	--card: rgba(18, 30, 72, 0.94);
	--line: #26386e;
	--accent: #6fa0ff;
	--accent-2: #4a75ff;
	--danger: #ff8a80;
	--shadow: 0 18px 45px rgba(0,0,0,0.45);
	--strip-bg: rgba(18, 30, 72, 0.94);
	--strip-border: #26386e;
	--input-bg: rgba(255,255,255,0.06);
	--btn-sub-bg: #16244f;
	--dialog-bg: #16244f;
	--dialog-border: #26386e;
	--auth-card-bg: rgba(18, 30, 72, 0.94);
	--auth-card-border: #26386e;
	--backdrop: rgba(0,0,0,0.65);
	color-scheme: dark;
}

[data-theme="cobalt"] body {
	background: #0C1638;
}

[data-theme="cobalt"] .panel,
[data-theme="cobalt"] .app-dialog,
[data-theme="cobalt"] .book,
[data-theme="cobalt"] .book-club-card,
[data-theme="cobalt"] .friend-item,
[data-theme="cobalt"] .notification-item,
[data-theme="cobalt"] .search-panel,
[data-theme="cobalt"] .profile-options-panel,
[data-theme="cobalt"] .now-reading-card,
[data-theme="cobalt"] .wishlist-card,
[data-theme="cobalt"] .stat,
[data-theme="cobalt"] .search-item,
[data-theme="cobalt"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="cobalt"] .book-clubs-hub,
[data-theme="cobalt"] .friends-hub,
[data-theme="cobalt"] .club-chat-room,
[data-theme="cobalt"] .friend-chat-room,
[data-theme="cobalt"] .club-workspace-dialog,
[data-theme="cobalt"] .club-workspace-inline {
	border-color: var(--line);
	background: rgba(18, 30, 72, 0.94);
}

[data-theme="cobalt"] .club-workspace-hero,
[data-theme="cobalt"] .club-workspace-section,
[data-theme="cobalt"] .chapter-safety-note,
[data-theme="cobalt"] .chapter-directory,
[data-theme="cobalt"] .club-workspace-inline .club-room-row,
[data-theme="cobalt"] .club-workspace-inline .chapter-row,
[data-theme="cobalt"] .club-workspace-inline .club-reading-item,
[data-theme="cobalt"] .friend-form,
[data-theme="cobalt"] .chat-form,
[data-theme="cobalt"] .chat-messages,
[data-theme="cobalt"] .chat-bubble,
[data-theme="cobalt"] .chat-empty,
[data-theme="cobalt"] .shelf-recommendation,
[data-theme="cobalt"] .insights-list > div,
[data-theme="cobalt"] .series-tracker-stats > div,
[data-theme="cobalt"] .month-count,
[data-theme="cobalt"] .history-empty,
[data-theme="cobalt"] .side-books .empty,
[data-theme="cobalt"] .club-members span,
[data-theme="cobalt"] .toolbar select {
	border-color: var(--line);
	background: rgba(255, 255, 255, 0.05);
	color: var(--ink);
}

[data-theme="cobalt"] input,
[data-theme="cobalt"] select,
[data-theme="cobalt"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="cobalt"] .btn-main,
[data-theme="cobalt"] .view-nav button.active,
[data-theme="cobalt"] .status-tabs button.active,
[data-theme="cobalt"] .challenge-book-action.complete.active,
[data-theme="cobalt"] .letter-pill.active,
[data-theme="cobalt"] .recommendation-item-actions button:first-child,
[data-theme="cobalt"] button.month-count.selected,
[data-theme="cobalt"] button.month-count.selected strong {
	background-color: #6fa0ff;
	color: #0C1638;
}

[data-theme="cobalt"] button.month-count.selected strong {
	background-color: transparent;
}

/* Theme-aware scrollbars: follow each theme's accent and surface colours. */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--accent) var(--btn-sub-bg);
}

*::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

*::-webkit-scrollbar-track {
	background: var(--btn-sub-bg);
}

*::-webkit-scrollbar-thumb {
	background: var(--accent);
	border-radius: 999px;
	border: 2px solid var(--btn-sub-bg);
}

*::-webkit-scrollbar-thumb:hover {
	background: var(--accent-2);
}

/* Colorblind-friendly theme: Okabe-Ito blue/orange palette, no red/green pairing,
   strong borders, and status pills that differ by border style as well as colour. */
html[data-theme="colorblind"] {
	--bg-1: #f7f6f1;
	--bg-2: #f7f6f1;
	--ink: #111111;
	--ink-soft: #454545;
	--card: #ffffff;
	--line: #6b6b6b;
	--accent: #0072B2;
	--accent-2: #005a8d;
	--danger: #B34700;
	--shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
	--strip-bg: #ffffff;
	--strip-border: #6b6b6b;
	--input-bg: #ffffff;
	--btn-sub-bg: #e6eef4;
	--dialog-bg: #ffffff;
	--dialog-border: #111111;
	--auth-card-bg: #ffffff;
	--auth-card-border: #6b6b6b;
	--backdrop: rgba(0, 0, 0, 0.6);
	color-scheme: light;
}

[data-theme="colorblind"] body {
	background: #f7f6f1;
}

[data-theme="colorblind"] .panel,
[data-theme="colorblind"] .app-dialog,
[data-theme="colorblind"] .book,
[data-theme="colorblind"] .book-club-card,
[data-theme="colorblind"] .friend-item,
[data-theme="colorblind"] .notification-item,
[data-theme="colorblind"] .search-panel,
[data-theme="colorblind"] .profile-options-panel,
[data-theme="colorblind"] .now-reading-card,
[data-theme="colorblind"] .wishlist-card,
[data-theme="colorblind"] .stat,
[data-theme="colorblind"] .search-item,
[data-theme="colorblind"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="colorblind"] input,
[data-theme="colorblind"] select,
[data-theme="colorblind"] textarea {
	background: var(--input-bg);
	border: 1.5px solid var(--line);
	color: var(--ink);
}

[data-theme="colorblind"] a:focus-visible,
[data-theme="colorblind"] button:focus-visible,
[data-theme="colorblind"] input:focus-visible,
[data-theme="colorblind"] select:focus-visible,
[data-theme="colorblind"] textarea:focus-visible {
	outline: 3px solid #E69F00;
	outline-offset: 2px;
}

[data-theme="colorblind"] .btn-main,
[data-theme="colorblind"] .view-nav button.active,
[data-theme="colorblind"] .status-tabs button.active,
[data-theme="colorblind"] .challenge-book-action.complete.active,
[data-theme="colorblind"] .letter-pill.active,
[data-theme="colorblind"] .recommendation-item-actions button:first-child,
[data-theme="colorblind"] button.month-count.selected,
[data-theme="colorblind"] button.month-count.selected strong {
	background-color: #0072B2;
	color: #ffffff;
}

[data-theme="colorblind"] button.month-count.selected strong {
	background-color: transparent;
}

[data-theme="colorblind"] .pill.read {
	border: 2px solid #005a8d;
	background: #e1f0f9;
	color: #005a8d;
	font-weight: 700;
}

[data-theme="colorblind"] .pill.status-finished {
	border: 2px solid #005a8d;
	background: #e1f0f9;
	color: #005a8d;
	font-weight: 700;
}

[data-theme="colorblind"] .pill.recommended-by {
	border: 2px solid #005a8d;
	background: #e1f0f9;
	color: #005a8d;
	font-weight: 700;
}

[data-theme="colorblind"] .pill.status-dnf {
	border: 2px dashed #B34700;
	background: #fdeadb;
	color: #B34700;
	font-weight: 700;
}

[data-theme="colorblind"] .pill.series-status-ongoing {
	border: 2px solid #005a8d;
	background: #e1f0f9;
	color: #005a8d;
	font-weight: 700;
}

[data-theme="colorblind"] .pill.my-status-in-progress {
	border: 2px double #1a5f86;
	background: #dcf0fb;
	color: #1a5f86;
	font-weight: 700;
}

[data-theme="colorblind"] .pill.my-status-up-to-date {
	border: 2px solid #7a2f5c;
	background: #f9e6f0;
	color: #7a2f5c;
	font-weight: 700;
}

[data-theme="colorblind"] .pill.series-status-complete {
	border: 2px solid #6b4600;
	background: #fdf0cf;
	color: #6b4600;
	font-weight: 700;
}

[data-theme="colorblind"] .pill.my-status-not-started {
	border: 2px dotted #454545;
	background: #eeeeee;
	color: #454545;
	font-weight: 700;
}

[data-theme="colorblind"] .pill.my-status-complete {
	border: 2px solid #6b4600;
	background: #fdf0cf;
	color: #6b4600;
	font-weight: 700;
}

/* Space */
html[data-theme="space"] {
	--bg-1: #05060f;
	--bg-2: #05060f;
	--ink: #e8ecff;
	--ink-soft: #9aa3c7;
	--card: rgba(16, 14, 40, 0.92);
	--line: #2c2560;
	--accent: #ffd166;
	--accent-2: #b388ff;
	--danger: #ff8a80;
	--shadow: 0 18px 45px rgba(0,0,0,0.6);
	--strip-bg: rgba(16, 14, 40, 0.92);
	--strip-border: #2c2560;
	--input-bg: rgba(255,255,255,0.06);
	--btn-sub-bg: #120f30;
	--dialog-bg: #120f30;
	--dialog-border: #2c2560;
	--auth-card-bg: rgba(16, 14, 40, 0.92);
	--auth-card-border: #2c2560;
	--backdrop: rgba(0,0,0,0.7);
	color-scheme: dark;
}

[data-theme="space"] body {
	background-color: #05060f;
	background-image:
		radial-gradient(1px 1px at 12% 18%, #fff, transparent),
		radial-gradient(1px 1px at 78% 12%, #fff, transparent),
		radial-gradient(1.5px 1.5px at 45% 62%, #ffe9a8, transparent),
		radial-gradient(1px 1px at 88% 74%, #fff, transparent),
		radial-gradient(1px 1px at 25% 88%, #cfd8ff, transparent),
		radial-gradient(ellipse at 15% 0%, rgba(120, 70, 220, 0.28), transparent 55%),
		radial-gradient(ellipse at 90% 100%, rgba(40, 90, 200, 0.22), transparent 55%);
	background-attachment: fixed;
}

[data-theme="space"] .panel,
[data-theme="space"] .app-dialog,
[data-theme="space"] .book,
[data-theme="space"] .book-club-card,
[data-theme="space"] .friend-item,
[data-theme="space"] .notification-item,
[data-theme="space"] .search-panel,
[data-theme="space"] .profile-options-panel,
[data-theme="space"] .now-reading-card,
[data-theme="space"] .wishlist-card,
[data-theme="space"] .stat,
[data-theme="space"] .search-item,
[data-theme="space"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="space"] .book-clubs-hub,
[data-theme="space"] .friends-hub,
[data-theme="space"] .club-chat-room,
[data-theme="space"] .friend-chat-room,
[data-theme="space"] .club-workspace-dialog,
[data-theme="space"] .club-workspace-inline {
	border-color: var(--line);
	background: rgba(16, 14, 40, 0.92);
}

[data-theme="space"] .club-workspace-hero,
[data-theme="space"] .club-workspace-section,
[data-theme="space"] .chapter-safety-note,
[data-theme="space"] .chapter-directory,
[data-theme="space"] .club-workspace-inline .club-room-row,
[data-theme="space"] .club-workspace-inline .chapter-row,
[data-theme="space"] .club-workspace-inline .club-reading-item,
[data-theme="space"] .friend-form,
[data-theme="space"] .chat-form,
[data-theme="space"] .chat-messages,
[data-theme="space"] .chat-bubble,
[data-theme="space"] .chat-empty,
[data-theme="space"] .shelf-recommendation,
[data-theme="space"] .insights-list > div,
[data-theme="space"] .series-tracker-stats > div,
[data-theme="space"] .month-count,
[data-theme="space"] .history-empty,
[data-theme="space"] .side-books .empty,
[data-theme="space"] .club-members span,
[data-theme="space"] .toolbar select {
	border-color: var(--line);
	background: rgba(255, 255, 255, 0.05);
	color: var(--ink);
}

[data-theme="space"] input,
[data-theme="space"] select,
[data-theme="space"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="space"] .btn-main,
[data-theme="space"] .view-nav button.active,
[data-theme="space"] .status-tabs button.active,
[data-theme="space"] .challenge-book-action.complete.active,
[data-theme="space"] .letter-pill.active,
[data-theme="space"] .recommendation-item-actions button:first-child,
[data-theme="space"] button.month-count.selected,
[data-theme="space"] button.month-count.selected strong {
	background-color: #ffd166;
	color: #05060f;
}

/* Autumn */
html[data-theme="autumn"] {
	--bg-1: #f3e1c9;
	--bg-2: #f3e1c9;
	--ink: #43271b;
	--ink-soft: #8a6652;
	--card: rgba(255, 247, 235, 0.96);
	--line: #e4c79a;
	--accent: #a8481a;
	--accent-2: #7a3410;
	--danger: #b3261e;
	--shadow: 0 18px 42px rgba(90, 50, 15, 0.14);
	--strip-bg: rgba(255, 244, 227, 0.92);
	--strip-border: #e4c79a;
	--input-bg: #fff8ec;
	--btn-sub-bg: #eed4a8;
	--dialog-bg: #fff8ec;
	--dialog-border: #e4c79a;
	--auth-card-bg: rgba(255, 247, 235, 0.85);
	--auth-card-border: #e4c79a;
	--backdrop: rgba(67, 39, 27, 0.5);
	color-scheme: light;
}

[data-theme="autumn"] body {
	background: #f3e1c9;
}

[data-theme="autumn"] .panel,
[data-theme="autumn"] .app-dialog,
[data-theme="autumn"] .book,
[data-theme="autumn"] .book-club-card,
[data-theme="autumn"] .friend-item,
[data-theme="autumn"] .notification-item,
[data-theme="autumn"] .search-panel,
[data-theme="autumn"] .profile-options-panel,
[data-theme="autumn"] .now-reading-card,
[data-theme="autumn"] .wishlist-card,
[data-theme="autumn"] .stat,
[data-theme="autumn"] .search-item,
[data-theme="autumn"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="autumn"] input,
[data-theme="autumn"] select,
[data-theme="autumn"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="autumn"] .btn-main,
[data-theme="autumn"] .view-nav button.active,
[data-theme="autumn"] .status-tabs button.active,
[data-theme="autumn"] .challenge-book-action.complete.active,
[data-theme="autumn"] .letter-pill.active,
[data-theme="autumn"] .recommendation-item-actions button:first-child,
[data-theme="autumn"] button.month-count.selected,
[data-theme="autumn"] button.month-count.selected strong {
	background-color: #a8481a;
	color: #ffffff;
}

[data-theme="autumn"] button.month-count.selected strong {
	background-color: transparent;
}

/* Summer */
html[data-theme="summer"] {
	--bg-1: #fdeec5;
	--bg-2: #fdeec5;
	--ink: #30424a;
	--ink-soft: #536e77;
	--card: rgba(255, 251, 237, 0.96);
	--line: #f3dfa0;
	--accent: #0e7c86;
	--accent-2: #0a5d64;
	--danger: #c0392b;
	--shadow: 0 18px 42px rgba(200, 120, 40, 0.14);
	--strip-bg: rgba(255, 247, 222, 0.92);
	--strip-border: #f3dfa0;
	--input-bg: #fffaf0;
	--btn-sub-bg: #ffe2b0;
	--dialog-bg: #fffaf0;
	--dialog-border: #f3dfa0;
	--auth-card-bg: rgba(255, 251, 237, 0.85);
	--auth-card-border: #f3dfa0;
	--backdrop: rgba(48, 66, 74, 0.5);
	color-scheme: light;
}

[data-theme="summer"] body {
	background: #fdeec5;
}

[data-theme="summer"] .panel,
[data-theme="summer"] .app-dialog,
[data-theme="summer"] .book,
[data-theme="summer"] .book-club-card,
[data-theme="summer"] .friend-item,
[data-theme="summer"] .notification-item,
[data-theme="summer"] .search-panel,
[data-theme="summer"] .profile-options-panel,
[data-theme="summer"] .now-reading-card,
[data-theme="summer"] .wishlist-card,
[data-theme="summer"] .stat,
[data-theme="summer"] .search-item,
[data-theme="summer"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="summer"] input,
[data-theme="summer"] select,
[data-theme="summer"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="summer"] .btn-main,
[data-theme="summer"] .view-nav button.active,
[data-theme="summer"] .status-tabs button.active,
[data-theme="summer"] .challenge-book-action.complete.active,
[data-theme="summer"] .letter-pill.active,
[data-theme="summer"] .recommendation-item-actions button:first-child,
[data-theme="summer"] button.month-count.selected,
[data-theme="summer"] button.month-count.selected strong {
	background-color: #0e7c86;
	color: #ffffff;
}

[data-theme="summer"] button.month-count.selected strong {
	background-color: transparent;
}

/* Winter */
html[data-theme="winter"] {
	--bg-1: #1c2733;
	--bg-2: #1c2733;
	--ink: #eaf4fb;
	--ink-soft: #9db2c2;
	--card: rgba(35, 48, 62, 0.94);
	--line: #3c5063;
	--accent: #8fd3ff;
	--accent-2: #4fa8d8;
	--danger: #ff8a80;
	--shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
	--strip-bg: rgba(28, 39, 51, 0.85);
	--strip-border: #3c5063;
	--input-bg: rgba(255, 255, 255, 0.06);
	--btn-sub-bg: #27384a;
	--dialog-bg: #22303f;
	--dialog-border: #3c5063;
	--auth-card-bg: rgba(255, 255, 255, 0.04);
	--auth-card-border: #3c5063;
	--backdrop: rgba(0, 0, 0, 0.65);
	color-scheme: dark;
}

[data-theme="winter"] body {
	background: #1c2733;
}

[data-theme="winter"] .panel,
[data-theme="winter"] .app-dialog,
[data-theme="winter"] .book,
[data-theme="winter"] .book-club-card,
[data-theme="winter"] .friend-item,
[data-theme="winter"] .notification-item,
[data-theme="winter"] .search-panel,
[data-theme="winter"] .profile-options-panel,
[data-theme="winter"] .now-reading-card,
[data-theme="winter"] .wishlist-card,
[data-theme="winter"] .stat,
[data-theme="winter"] .search-item,
[data-theme="winter"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="winter"] .book-clubs-hub,
[data-theme="winter"] .friends-hub,
[data-theme="winter"] .club-chat-room,
[data-theme="winter"] .friend-chat-room,
[data-theme="winter"] .club-workspace-dialog,
[data-theme="winter"] .club-workspace-inline {
	border-color: var(--line);
	background: rgba(35, 48, 62, 0.94);
}

[data-theme="winter"] .club-workspace-hero,
[data-theme="winter"] .club-workspace-section,
[data-theme="winter"] .chapter-safety-note,
[data-theme="winter"] .chapter-directory,
[data-theme="winter"] .club-workspace-inline .club-room-row,
[data-theme="winter"] .club-workspace-inline .chapter-row,
[data-theme="winter"] .club-workspace-inline .club-reading-item,
[data-theme="winter"] .friend-form,
[data-theme="winter"] .chat-form,
[data-theme="winter"] .chat-messages,
[data-theme="winter"] .chat-bubble,
[data-theme="winter"] .chat-empty,
[data-theme="winter"] .shelf-recommendation,
[data-theme="winter"] .insights-list > div,
[data-theme="winter"] .series-tracker-stats > div,
[data-theme="winter"] .month-count,
[data-theme="winter"] .history-empty,
[data-theme="winter"] .side-books .empty,
[data-theme="winter"] .club-members span,
[data-theme="winter"] .toolbar select {
	border-color: var(--line);
	background: rgba(255, 255, 255, 0.05);
	color: var(--ink);
}

[data-theme="winter"] input,
[data-theme="winter"] select,
[data-theme="winter"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="winter"] .btn-main,
[data-theme="winter"] .view-nav button.active,
[data-theme="winter"] .status-tabs button.active,
[data-theme="winter"] .challenge-book-action.complete.active,
[data-theme="winter"] .letter-pill.active,
[data-theme="winter"] .recommendation-item-actions button:first-child,
[data-theme="winter"] button.month-count.selected,
[data-theme="winter"] button.month-count.selected strong {
	background-color: #8fd3ff;
	color: #1c2733;
}

[data-theme="winter"] button.month-count.selected strong {
	background-color: transparent;
}

/* Spring */
html[data-theme="spring"] {
	--bg-1: #eaf3df;
	--bg-2: #eaf3df;
	--ink: #2d3b1f;
	--ink-soft: #5c6e46;
	--card: rgba(248, 252, 240, 0.96);
	--line: #d3e6b8;
	--accent: #4d7c2a;
	--accent-2: #3a5f1f;
	--danger: #b3261e;
	--shadow: 0 18px 42px rgba(80, 120, 40, 0.12);
	--strip-bg: rgba(244, 251, 232, 0.92);
	--strip-border: #d3e6b8;
	--input-bg: #fbfdf3;
	--btn-sub-bg: #e3edc8;
	--dialog-bg: #fbfdf3;
	--dialog-border: #d3e6b8;
	--auth-card-bg: rgba(248, 252, 240, 0.85);
	--auth-card-border: #d3e6b8;
	--backdrop: rgba(45, 59, 31, 0.5);
	color-scheme: light;
}

[data-theme="spring"] body {
	background: #eaf3df;
}

[data-theme="spring"] .panel,
[data-theme="spring"] .app-dialog,
[data-theme="spring"] .book,
[data-theme="spring"] .book-club-card,
[data-theme="spring"] .friend-item,
[data-theme="spring"] .notification-item,
[data-theme="spring"] .search-panel,
[data-theme="spring"] .profile-options-panel,
[data-theme="spring"] .now-reading-card,
[data-theme="spring"] .wishlist-card,
[data-theme="spring"] .stat,
[data-theme="spring"] .search-item,
[data-theme="spring"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="spring"] input,
[data-theme="spring"] select,
[data-theme="spring"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="spring"] .btn-main,
[data-theme="spring"] .view-nav button.active,
[data-theme="spring"] .status-tabs button.active,
[data-theme="spring"] .challenge-book-action.complete.active,
[data-theme="spring"] .letter-pill.active,
[data-theme="spring"] .recommendation-item-actions button:first-child,
[data-theme="spring"] button.month-count.selected,
[data-theme="spring"] button.month-count.selected strong {
	background-color: #4d7c2a;
	color: #ffffff;
}

[data-theme="spring"] button.month-count.selected strong {
	background-color: transparent;
}

/* Cozy */
html[data-theme="fireside"] {
	--bg-1: #e8d5bf;
	--bg-2: #e8d5bf;
	--ink: #4a3320;
	--ink-soft: #78593f;
	--card: rgba(255, 248, 238, 0.96);
	--line: #dcc3a0;
	--accent: #93581c;
	--accent-2: #6e4114;
	--danger: #b3261e;
	--shadow: 0 18px 42px rgba(90, 60, 20, 0.14);
	--strip-bg: rgba(255, 246, 232, 0.92);
	--strip-border: #dcc3a0;
	--input-bg: #fffaf2;
	--btn-sub-bg: #ecd9ba;
	--dialog-bg: #fffaf2;
	--dialog-border: #dcc3a0;
	--auth-card-bg: rgba(255, 248, 238, 0.85);
	--auth-card-border: #dcc3a0;
	--backdrop: rgba(74, 51, 32, 0.5);
	color-scheme: light;
}

[data-theme="fireside"] body {
	background: #e8d5bf;
}

[data-theme="fireside"] .panel,
[data-theme="fireside"] .app-dialog,
[data-theme="fireside"] .book,
[data-theme="fireside"] .book-club-card,
[data-theme="fireside"] .friend-item,
[data-theme="fireside"] .notification-item,
[data-theme="fireside"] .search-panel,
[data-theme="fireside"] .profile-options-panel,
[data-theme="fireside"] .now-reading-card,
[data-theme="fireside"] .wishlist-card,
[data-theme="fireside"] .stat,
[data-theme="fireside"] .search-item,
[data-theme="fireside"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="fireside"] input,
[data-theme="fireside"] select,
[data-theme="fireside"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="fireside"] .btn-main,
[data-theme="fireside"] .view-nav button.active,
[data-theme="fireside"] .status-tabs button.active,
[data-theme="fireside"] .challenge-book-action.complete.active,
[data-theme="fireside"] .letter-pill.active,
[data-theme="fireside"] .recommendation-item-actions button:first-child,
[data-theme="fireside"] button.month-count.selected,
[data-theme="fireside"] button.month-count.selected strong {
	background-color: #93581c;
	color: #ffffff;
}

[data-theme="fireside"] button.month-count.selected strong {
	background-color: transparent;
}

/* Lavender */
html[data-theme="lavender"] {
	--bg-1: #e4ddee;
	--bg-2: #e4ddee;
	--ink: #2b1e3e;
	--ink-soft: #685681;
	--card: rgba(247, 245, 249, 0.96);
	--line: #c4b3db;
	--accent: #824dcb;
	--accent-2: #5c2e9e;
	--danger: #b3261e;
	--shadow: 0 18px 42px rgba(43, 30, 62, 0.14);
	--strip-bg: rgba(247, 245, 249, 0.96);
	--strip-border: #c4b3db;
	--input-bg: #faf8fb;
	--btn-sub-bg: #d7cbe6;
	--dialog-bg: #faf8fb;
	--dialog-border: #c4b3db;
	--auth-card-bg: rgba(247, 245, 249, 0.85);
	--auth-card-border: #c4b3db;
	--backdrop: rgba(43, 30, 62, 0.5);
	color-scheme: light;
}

[data-theme="lavender"] body {
	background: #e4ddee;
}

[data-theme="lavender"] .panel,
[data-theme="lavender"] .app-dialog,
[data-theme="lavender"] .book,
[data-theme="lavender"] .book-club-card,
[data-theme="lavender"] .friend-item,
[data-theme="lavender"] .notification-item,
[data-theme="lavender"] .search-panel,
[data-theme="lavender"] .profile-options-panel,
[data-theme="lavender"] .now-reading-card,
[data-theme="lavender"] .wishlist-card,
[data-theme="lavender"] .stat,
[data-theme="lavender"] .search-item,
[data-theme="lavender"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="lavender"] input,
[data-theme="lavender"] select,
[data-theme="lavender"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="lavender"] .btn-main,
[data-theme="lavender"] .view-nav button.active,
[data-theme="lavender"] .status-tabs button.active,
[data-theme="lavender"] .challenge-book-action.complete.active,
[data-theme="lavender"] .letter-pill.active,
[data-theme="lavender"] .recommendation-item-actions button:first-child,
[data-theme="lavender"] button.month-count.selected,
[data-theme="lavender"] button.month-count.selected strong {
	background-color: #824dcb;
	color: #ffffff;
}

[data-theme="lavender"] button.month-count.selected strong {
	background-color: transparent;
}

/* Sage */
html[data-theme="sage"] {
	--bg-1: #ddeeea;
	--bg-2: #ddeeea;
	--ink: #1e3e36;
	--ink-soft: #527a70;
	--card: rgba(245, 249, 248, 0.96);
	--line: #b3dbd1;
	--accent: #207e6c;
	--accent-2: #104137;
	--danger: #b3261e;
	--shadow: 0 18px 42px rgba(30, 62, 54, 0.14);
	--strip-bg: rgba(245, 249, 248, 0.96);
	--strip-border: #b3dbd1;
	--input-bg: #f8fbfb;
	--btn-sub-bg: #cbe6df;
	--dialog-bg: #f8fbfb;
	--dialog-border: #b3dbd1;
	--auth-card-bg: rgba(245, 249, 248, 0.85);
	--auth-card-border: #b3dbd1;
	--backdrop: rgba(30, 62, 54, 0.5);
	color-scheme: light;
}

[data-theme="sage"] body {
	background: #ddeeea;
}

[data-theme="sage"] .panel,
[data-theme="sage"] .app-dialog,
[data-theme="sage"] .book,
[data-theme="sage"] .book-club-card,
[data-theme="sage"] .friend-item,
[data-theme="sage"] .notification-item,
[data-theme="sage"] .search-panel,
[data-theme="sage"] .profile-options-panel,
[data-theme="sage"] .now-reading-card,
[data-theme="sage"] .wishlist-card,
[data-theme="sage"] .stat,
[data-theme="sage"] .search-item,
[data-theme="sage"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="sage"] input,
[data-theme="sage"] select,
[data-theme="sage"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="sage"] .btn-main,
[data-theme="sage"] .view-nav button.active,
[data-theme="sage"] .status-tabs button.active,
[data-theme="sage"] .challenge-book-action.complete.active,
[data-theme="sage"] .letter-pill.active,
[data-theme="sage"] .recommendation-item-actions button:first-child,
[data-theme="sage"] button.month-count.selected,
[data-theme="sage"] button.month-count.selected strong {
	background-color: #207e6c;
	color: #ffffff;
}

[data-theme="sage"] button.month-count.selected strong {
	background-color: transparent;
}

/* Sand */
html[data-theme="sand"] {
	--bg-1: #ebe6e0;
	--bg-2: #ebe6e0;
	--ink: #3e2e1e;
	--ink-soft: #816b56;
	--card: rgba(249, 247, 246, 0.96);
	--line: #dbc7b3;
	--accent: #8f684d;
	--accent-2: #5d4432;
	--danger: #b3261e;
	--shadow: 0 18px 42px rgba(62, 46, 30, 0.14);
	--strip-bg: rgba(249, 247, 246, 0.96);
	--strip-border: #dbc7b3;
	--input-bg: #fbfaf8;
	--btn-sub-bg: #e6d9cb;
	--dialog-bg: #fbfaf8;
	--dialog-border: #dbc7b3;
	--auth-card-bg: rgba(249, 247, 246, 0.85);
	--auth-card-border: #dbc7b3;
	--backdrop: rgba(62, 46, 30, 0.5);
	color-scheme: light;
}

[data-theme="sand"] body {
	background: #ebe6e0;
}

[data-theme="sand"] .panel,
[data-theme="sand"] .app-dialog,
[data-theme="sand"] .book,
[data-theme="sand"] .book-club-card,
[data-theme="sand"] .friend-item,
[data-theme="sand"] .notification-item,
[data-theme="sand"] .search-panel,
[data-theme="sand"] .profile-options-panel,
[data-theme="sand"] .now-reading-card,
[data-theme="sand"] .wishlist-card,
[data-theme="sand"] .stat,
[data-theme="sand"] .search-item,
[data-theme="sand"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="sand"] input,
[data-theme="sand"] select,
[data-theme="sand"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="sand"] .btn-main,
[data-theme="sand"] .view-nav button.active,
[data-theme="sand"] .status-tabs button.active,
[data-theme="sand"] .challenge-book-action.complete.active,
[data-theme="sand"] .letter-pill.active,
[data-theme="sand"] .recommendation-item-actions button:first-child,
[data-theme="sand"] button.month-count.selected,
[data-theme="sand"] button.month-count.selected strong {
	background-color: #8f684d;
	color: #ffffff;
}

[data-theme="sand"] button.month-count.selected strong {
	background-color: transparent;
}

/* Sky */
html[data-theme="sky"] {
	--bg-1: #dbe7f0;
	--bg-2: #dbe7f0;
	--ink: #1e313e;
	--ink-soft: #566f81;
	--card: rgba(245, 248, 249, 0.96);
	--line: #b3cadb;
	--accent: #2672b5;
	--accent-2: #194a76;
	--danger: #b3261e;
	--shadow: 0 18px 42px rgba(30, 49, 62, 0.14);
	--strip-bg: rgba(245, 248, 249, 0.96);
	--strip-border: #b3cadb;
	--input-bg: #f8fafb;
	--btn-sub-bg: #cbdbe6;
	--dialog-bg: #f8fafb;
	--dialog-border: #b3cadb;
	--auth-card-bg: rgba(245, 248, 249, 0.85);
	--auth-card-border: #b3cadb;
	--backdrop: rgba(30, 49, 62, 0.5);
	color-scheme: light;
}

[data-theme="sky"] body {
	background: #dbe7f0;
}

[data-theme="sky"] .panel,
[data-theme="sky"] .app-dialog,
[data-theme="sky"] .book,
[data-theme="sky"] .book-club-card,
[data-theme="sky"] .friend-item,
[data-theme="sky"] .notification-item,
[data-theme="sky"] .search-panel,
[data-theme="sky"] .profile-options-panel,
[data-theme="sky"] .now-reading-card,
[data-theme="sky"] .wishlist-card,
[data-theme="sky"] .stat,
[data-theme="sky"] .search-item,
[data-theme="sky"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="sky"] input,
[data-theme="sky"] select,
[data-theme="sky"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="sky"] .btn-main,
[data-theme="sky"] .view-nav button.active,
[data-theme="sky"] .status-tabs button.active,
[data-theme="sky"] .challenge-book-action.complete.active,
[data-theme="sky"] .letter-pill.active,
[data-theme="sky"] .recommendation-item-actions button:first-child,
[data-theme="sky"] button.month-count.selected,
[data-theme="sky"] button.month-count.selected strong {
	background-color: #2672b5;
	color: #ffffff;
}

[data-theme="sky"] button.month-count.selected strong {
	background-color: transparent;
}

/* Obsidian */
html[data-theme="obsidian"] {
	--bg-1: #1f1f1f;
	--bg-2: #1f1f1f;
	--ink: #f2eded;
	--ink-soft: #c6a9a9;
	--card: rgba(43, 43, 43, 0.94);
	--line: #5d3232;
	--accent: #999999;
	--accent-2: #b8b8b8;
	--danger: #ff8a80;
	--shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
	--strip-bg: rgba(43, 43, 43, 0.94);
	--strip-border: #5d3232;
	--input-bg: rgba(255, 255, 255, 0.06);
	--btn-sub-bg: #333333;
	--dialog-bg: #262626;
	--dialog-border: #5d3232;
	--auth-card-bg: rgba(43, 43, 43, 0.94);
	--auth-card-border: #5d3232;
	--backdrop: rgba(0, 0, 0, 0.65);
	color-scheme: dark;
}

[data-theme="obsidian"] body {
	background: #1f1f1f;
}

[data-theme="obsidian"] .panel,
[data-theme="obsidian"] .app-dialog,
[data-theme="obsidian"] .book,
[data-theme="obsidian"] .book-club-card,
[data-theme="obsidian"] .friend-item,
[data-theme="obsidian"] .notification-item,
[data-theme="obsidian"] .search-panel,
[data-theme="obsidian"] .profile-options-panel,
[data-theme="obsidian"] .now-reading-card,
[data-theme="obsidian"] .wishlist-card,
[data-theme="obsidian"] .stat,
[data-theme="obsidian"] .search-item,
[data-theme="obsidian"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="obsidian"] .book-clubs-hub,
[data-theme="obsidian"] .friends-hub,
[data-theme="obsidian"] .club-chat-room,
[data-theme="obsidian"] .friend-chat-room,
[data-theme="obsidian"] .club-workspace-dialog,
[data-theme="obsidian"] .club-workspace-inline {
	border-color: var(--line);
	background: rgba(43, 43, 43, 0.94);
}

[data-theme="obsidian"] .club-workspace-hero,
[data-theme="obsidian"] .club-workspace-section,
[data-theme="obsidian"] .chapter-safety-note,
[data-theme="obsidian"] .chapter-directory,
[data-theme="obsidian"] .club-workspace-inline .club-room-row,
[data-theme="obsidian"] .club-workspace-inline .chapter-row,
[data-theme="obsidian"] .club-workspace-inline .club-reading-item,
[data-theme="obsidian"] .friend-form,
[data-theme="obsidian"] .chat-form,
[data-theme="obsidian"] .chat-messages,
[data-theme="obsidian"] .chat-bubble,
[data-theme="obsidian"] .chat-empty,
[data-theme="obsidian"] .shelf-recommendation,
[data-theme="obsidian"] .insights-list > div,
[data-theme="obsidian"] .series-tracker-stats > div,
[data-theme="obsidian"] .month-count,
[data-theme="obsidian"] .history-empty,
[data-theme="obsidian"] .side-books .empty,
[data-theme="obsidian"] .club-members span,
[data-theme="obsidian"] .toolbar select {
	border-color: var(--line);
	background: rgba(255, 255, 255, 0.05);
	color: var(--ink);
}

[data-theme="obsidian"] input,
[data-theme="obsidian"] select,
[data-theme="obsidian"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="obsidian"] .btn-main,
[data-theme="obsidian"] .view-nav button.active,
[data-theme="obsidian"] .status-tabs button.active,
[data-theme="obsidian"] .challenge-book-action.complete.active,
[data-theme="obsidian"] .letter-pill.active,
[data-theme="obsidian"] .recommendation-item-actions button:first-child,
[data-theme="obsidian"] button.month-count.selected,
[data-theme="obsidian"] button.month-count.selected strong {
	background-color: #999999;
	color: #240f0f;
}

[data-theme="obsidian"] button.month-count.selected strong {
	background-color: transparent;
}

/* Plum */
html[data-theme="plum"] {
	--bg-1: #25112c;
	--bg-2: #25112c;
	--ink: #f1edf2;
	--ink-soft: #bfa9c6;
	--card: rgba(52, 26, 61, 0.94);
	--line: #52325d;
	--accent: #bc71d6;
	--accent-2: #d3a1e4;
	--danger: #ff8a80;
	--shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
	--strip-bg: rgba(52, 26, 61, 0.94);
	--strip-border: #52325d;
	--input-bg: rgba(255, 255, 255, 0.06);
	--btn-sub-bg: #3e1c4a;
	--dialog-bg: #2e1736;
	--dialog-border: #52325d;
	--auth-card-bg: rgba(52, 26, 61, 0.94);
	--auth-card-border: #52325d;
	--backdrop: rgba(0, 0, 0, 0.65);
	color-scheme: dark;
}

[data-theme="plum"] body {
	background: #25112c;
}

[data-theme="plum"] .panel,
[data-theme="plum"] .app-dialog,
[data-theme="plum"] .book,
[data-theme="plum"] .book-club-card,
[data-theme="plum"] .friend-item,
[data-theme="plum"] .notification-item,
[data-theme="plum"] .search-panel,
[data-theme="plum"] .profile-options-panel,
[data-theme="plum"] .now-reading-card,
[data-theme="plum"] .wishlist-card,
[data-theme="plum"] .stat,
[data-theme="plum"] .search-item,
[data-theme="plum"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="plum"] .book-clubs-hub,
[data-theme="plum"] .friends-hub,
[data-theme="plum"] .club-chat-room,
[data-theme="plum"] .friend-chat-room,
[data-theme="plum"] .club-workspace-dialog,
[data-theme="plum"] .club-workspace-inline {
	border-color: var(--line);
	background: rgba(52, 26, 61, 0.94);
}

[data-theme="plum"] .club-workspace-hero,
[data-theme="plum"] .club-workspace-section,
[data-theme="plum"] .chapter-safety-note,
[data-theme="plum"] .chapter-directory,
[data-theme="plum"] .club-workspace-inline .club-room-row,
[data-theme="plum"] .club-workspace-inline .chapter-row,
[data-theme="plum"] .club-workspace-inline .club-reading-item,
[data-theme="plum"] .friend-form,
[data-theme="plum"] .chat-form,
[data-theme="plum"] .chat-messages,
[data-theme="plum"] .chat-bubble,
[data-theme="plum"] .chat-empty,
[data-theme="plum"] .shelf-recommendation,
[data-theme="plum"] .insights-list > div,
[data-theme="plum"] .series-tracker-stats > div,
[data-theme="plum"] .month-count,
[data-theme="plum"] .history-empty,
[data-theme="plum"] .side-books .empty,
[data-theme="plum"] .club-members span,
[data-theme="plum"] .toolbar select {
	border-color: var(--line);
	background: rgba(255, 255, 255, 0.05);
	color: var(--ink);
}

[data-theme="plum"] input,
[data-theme="plum"] select,
[data-theme="plum"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="plum"] .btn-main,
[data-theme="plum"] .view-nav button.active,
[data-theme="plum"] .status-tabs button.active,
[data-theme="plum"] .challenge-book-action.complete.active,
[data-theme="plum"] .letter-pill.active,
[data-theme="plum"] .recommendation-item-actions button:first-child,
[data-theme="plum"] button.month-count.selected,
[data-theme="plum"] button.month-count.selected strong {
	background-color: #bc71d6;
	color: #1f0f24;
}

[data-theme="plum"] button.month-count.selected strong {
	background-color: transparent;
}

/* Slate */
html[data-theme="slate"] {
	--bg-1: #172126;
	--bg-2: #172126;
	--ink: #edf0f2;
	--ink-soft: #a9bcc6;
	--card: rgba(33, 47, 54, 0.94);
	--line: #324f5d;
	--accent: #52c9e0;
	--accent-2: #86d9ea;
	--danger: #ff8a80;
	--shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
	--strip-bg: rgba(33, 47, 54, 0.94);
	--strip-border: #324f5d;
	--input-bg: rgba(255, 255, 255, 0.06);
	--btn-sub-bg: #263740;
	--dialog-bg: #1d2930;
	--dialog-border: #324f5d;
	--auth-card-bg: rgba(33, 47, 54, 0.94);
	--auth-card-border: #324f5d;
	--backdrop: rgba(0, 0, 0, 0.65);
	color-scheme: dark;
}

[data-theme="slate"] body {
	background: #172126;
}

[data-theme="slate"] .panel,
[data-theme="slate"] .app-dialog,
[data-theme="slate"] .book,
[data-theme="slate"] .book-club-card,
[data-theme="slate"] .friend-item,
[data-theme="slate"] .notification-item,
[data-theme="slate"] .search-panel,
[data-theme="slate"] .profile-options-panel,
[data-theme="slate"] .now-reading-card,
[data-theme="slate"] .wishlist-card,
[data-theme="slate"] .stat,
[data-theme="slate"] .search-item,
[data-theme="slate"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="slate"] .book-clubs-hub,
[data-theme="slate"] .friends-hub,
[data-theme="slate"] .club-chat-room,
[data-theme="slate"] .friend-chat-room,
[data-theme="slate"] .club-workspace-dialog,
[data-theme="slate"] .club-workspace-inline {
	border-color: var(--line);
	background: rgba(33, 47, 54, 0.94);
}

[data-theme="slate"] .club-workspace-hero,
[data-theme="slate"] .club-workspace-section,
[data-theme="slate"] .chapter-safety-note,
[data-theme="slate"] .chapter-directory,
[data-theme="slate"] .club-workspace-inline .club-room-row,
[data-theme="slate"] .club-workspace-inline .chapter-row,
[data-theme="slate"] .club-workspace-inline .club-reading-item,
[data-theme="slate"] .friend-form,
[data-theme="slate"] .chat-form,
[data-theme="slate"] .chat-messages,
[data-theme="slate"] .chat-bubble,
[data-theme="slate"] .chat-empty,
[data-theme="slate"] .shelf-recommendation,
[data-theme="slate"] .insights-list > div,
[data-theme="slate"] .series-tracker-stats > div,
[data-theme="slate"] .month-count,
[data-theme="slate"] .history-empty,
[data-theme="slate"] .side-books .empty,
[data-theme="slate"] .club-members span,
[data-theme="slate"] .toolbar select {
	border-color: var(--line);
	background: rgba(255, 255, 255, 0.05);
	color: var(--ink);
}

[data-theme="slate"] input,
[data-theme="slate"] select,
[data-theme="slate"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="slate"] .btn-main,
[data-theme="slate"] .view-nav button.active,
[data-theme="slate"] .status-tabs button.active,
[data-theme="slate"] .challenge-book-action.complete.active,
[data-theme="slate"] .letter-pill.active,
[data-theme="slate"] .recommendation-item-actions button:first-child,
[data-theme="slate"] button.month-count.selected,
[data-theme="slate"] button.month-count.selected strong {
	background-color: #52c9e0;
	color: #0f1d24;
}

[data-theme="slate"] button.month-count.selected strong {
	background-color: transparent;
}

/* Charcoal */
html[data-theme="charcoal"] {
	--bg-1: #221f1c;
	--bg-2: #221f1c;
	--ink: #f2f0ed;
	--ink-soft: #c6b8a9;
	--card: rgba(48, 43, 39, 0.94);
	--line: #5d4732;
	--accent: #eba747;
	--accent-2: #f1c17e;
	--danger: #ff8a80;
	--shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
	--strip-bg: rgba(48, 43, 39, 0.94);
	--strip-border: #5d4732;
	--input-bg: rgba(255, 255, 255, 0.06);
	--btn-sub-bg: #38332e;
	--dialog-bg: #2a2622;
	--dialog-border: #5d4732;
	--auth-card-bg: rgba(48, 43, 39, 0.94);
	--auth-card-border: #5d4732;
	--backdrop: rgba(0, 0, 0, 0.65);
	color-scheme: dark;
}

[data-theme="charcoal"] body {
	background: #221f1c;
}

[data-theme="charcoal"] .panel,
[data-theme="charcoal"] .app-dialog,
[data-theme="charcoal"] .book,
[data-theme="charcoal"] .book-club-card,
[data-theme="charcoal"] .friend-item,
[data-theme="charcoal"] .notification-item,
[data-theme="charcoal"] .search-panel,
[data-theme="charcoal"] .profile-options-panel,
[data-theme="charcoal"] .now-reading-card,
[data-theme="charcoal"] .wishlist-card,
[data-theme="charcoal"] .stat,
[data-theme="charcoal"] .search-item,
[data-theme="charcoal"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="charcoal"] .book-clubs-hub,
[data-theme="charcoal"] .friends-hub,
[data-theme="charcoal"] .club-chat-room,
[data-theme="charcoal"] .friend-chat-room,
[data-theme="charcoal"] .club-workspace-dialog,
[data-theme="charcoal"] .club-workspace-inline {
	border-color: var(--line);
	background: rgba(48, 43, 39, 0.94);
}

[data-theme="charcoal"] .club-workspace-hero,
[data-theme="charcoal"] .club-workspace-section,
[data-theme="charcoal"] .chapter-safety-note,
[data-theme="charcoal"] .chapter-directory,
[data-theme="charcoal"] .club-workspace-inline .club-room-row,
[data-theme="charcoal"] .club-workspace-inline .chapter-row,
[data-theme="charcoal"] .club-workspace-inline .club-reading-item,
[data-theme="charcoal"] .friend-form,
[data-theme="charcoal"] .chat-form,
[data-theme="charcoal"] .chat-messages,
[data-theme="charcoal"] .chat-bubble,
[data-theme="charcoal"] .chat-empty,
[data-theme="charcoal"] .shelf-recommendation,
[data-theme="charcoal"] .insights-list > div,
[data-theme="charcoal"] .series-tracker-stats > div,
[data-theme="charcoal"] .month-count,
[data-theme="charcoal"] .history-empty,
[data-theme="charcoal"] .side-books .empty,
[data-theme="charcoal"] .club-members span,
[data-theme="charcoal"] .toolbar select {
	border-color: var(--line);
	background: rgba(255, 255, 255, 0.05);
	color: var(--ink);
}

[data-theme="charcoal"] input,
[data-theme="charcoal"] select,
[data-theme="charcoal"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="charcoal"] .btn-main,
[data-theme="charcoal"] .view-nav button.active,
[data-theme="charcoal"] .status-tabs button.active,
[data-theme="charcoal"] .challenge-book-action.complete.active,
[data-theme="charcoal"] .letter-pill.active,
[data-theme="charcoal"] .recommendation-item-actions button:first-child,
[data-theme="charcoal"] button.month-count.selected,
[data-theme="charcoal"] button.month-count.selected strong {
	background-color: #eba747;
	color: #241a0f;
}

[data-theme="charcoal"] button.month-count.selected strong {
	background-color: transparent;
}

/* Electric */
html[data-theme="electric"] {
	--bg-1: #2f0e24;
	--bg-2: #2f0e24;
	--ink: #f2edf0;
	--ink-soft: #c6a9bc;
	--card: rgba(61, 26, 49, 0.94);
	--line: #5d324f;
	--accent: #f547bb;
	--accent-2: #f881d1;
	--danger: #ff8a80;
	--shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
	--strip-bg: rgba(61, 26, 49, 0.94);
	--strip-border: #5d324f;
	--input-bg: rgba(255, 255, 255, 0.06);
	--btn-sub-bg: #4a1c3b;
	--dialog-bg: #36172b;
	--dialog-border: #5d324f;
	--auth-card-bg: rgba(61, 26, 49, 0.94);
	--auth-card-border: #5d324f;
	--backdrop: rgba(0, 0, 0, 0.65);
	color-scheme: dark;
}

[data-theme="electric"] body {
	background: #2f0e24;
}

[data-theme="electric"] .panel,
[data-theme="electric"] .app-dialog,
[data-theme="electric"] .book,
[data-theme="electric"] .book-club-card,
[data-theme="electric"] .friend-item,
[data-theme="electric"] .notification-item,
[data-theme="electric"] .search-panel,
[data-theme="electric"] .profile-options-panel,
[data-theme="electric"] .now-reading-card,
[data-theme="electric"] .wishlist-card,
[data-theme="electric"] .stat,
[data-theme="electric"] .search-item,
[data-theme="electric"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="electric"] .book-clubs-hub,
[data-theme="electric"] .friends-hub,
[data-theme="electric"] .club-chat-room,
[data-theme="electric"] .friend-chat-room,
[data-theme="electric"] .club-workspace-dialog,
[data-theme="electric"] .club-workspace-inline {
	border-color: var(--line);
	background: rgba(61, 26, 49, 0.94);
}

[data-theme="electric"] .club-workspace-hero,
[data-theme="electric"] .club-workspace-section,
[data-theme="electric"] .chapter-safety-note,
[data-theme="electric"] .chapter-directory,
[data-theme="electric"] .club-workspace-inline .club-room-row,
[data-theme="electric"] .club-workspace-inline .chapter-row,
[data-theme="electric"] .club-workspace-inline .club-reading-item,
[data-theme="electric"] .friend-form,
[data-theme="electric"] .chat-form,
[data-theme="electric"] .chat-messages,
[data-theme="electric"] .chat-bubble,
[data-theme="electric"] .chat-empty,
[data-theme="electric"] .shelf-recommendation,
[data-theme="electric"] .insights-list > div,
[data-theme="electric"] .series-tracker-stats > div,
[data-theme="electric"] .month-count,
[data-theme="electric"] .history-empty,
[data-theme="electric"] .side-books .empty,
[data-theme="electric"] .club-members span,
[data-theme="electric"] .toolbar select {
	border-color: var(--line);
	background: rgba(255, 255, 255, 0.05);
	color: var(--ink);
}

[data-theme="electric"] input,
[data-theme="electric"] select,
[data-theme="electric"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="electric"] .btn-main,
[data-theme="electric"] .view-nav button.active,
[data-theme="electric"] .status-tabs button.active,
[data-theme="electric"] .challenge-book-action.complete.active,
[data-theme="electric"] .letter-pill.active,
[data-theme="electric"] .recommendation-item-actions button:first-child,
[data-theme="electric"] button.month-count.selected,
[data-theme="electric"] button.month-count.selected strong {
	background-color: #f547bb;
	color: #240f1d;
}

[data-theme="electric"] button.month-count.selected strong {
	background-color: transparent;
}

/* Sunset */
html[data-theme="sunset"] {
	--bg-1: #2e170f;
	--bg-2: #2e170f;
	--ink: #f2efed;
	--ink-soft: #c6b0a9;
	--card: rgba(61, 35, 26, 0.94);
	--line: #5d3d32;
	--accent: #f57a3d;
	--accent-2: #f8a277;
	--danger: #ff8a80;
	--shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
	--strip-bg: rgba(61, 35, 26, 0.94);
	--strip-border: #5d3d32;
	--input-bg: rgba(255, 255, 255, 0.06);
	--btn-sub-bg: #4a281c;
	--dialog-bg: #361f17;
	--dialog-border: #5d3d32;
	--auth-card-bg: rgba(61, 35, 26, 0.94);
	--auth-card-border: #5d3d32;
	--backdrop: rgba(0, 0, 0, 0.65);
	color-scheme: dark;
}

[data-theme="sunset"] body {
	background: #2e170f;
}

[data-theme="sunset"] .panel,
[data-theme="sunset"] .app-dialog,
[data-theme="sunset"] .book,
[data-theme="sunset"] .book-club-card,
[data-theme="sunset"] .friend-item,
[data-theme="sunset"] .notification-item,
[data-theme="sunset"] .search-panel,
[data-theme="sunset"] .profile-options-panel,
[data-theme="sunset"] .now-reading-card,
[data-theme="sunset"] .wishlist-card,
[data-theme="sunset"] .stat,
[data-theme="sunset"] .search-item,
[data-theme="sunset"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="sunset"] .book-clubs-hub,
[data-theme="sunset"] .friends-hub,
[data-theme="sunset"] .club-chat-room,
[data-theme="sunset"] .friend-chat-room,
[data-theme="sunset"] .club-workspace-dialog,
[data-theme="sunset"] .club-workspace-inline {
	border-color: var(--line);
	background: rgba(61, 35, 26, 0.94);
}

[data-theme="sunset"] .club-workspace-hero,
[data-theme="sunset"] .club-workspace-section,
[data-theme="sunset"] .chapter-safety-note,
[data-theme="sunset"] .chapter-directory,
[data-theme="sunset"] .club-workspace-inline .club-room-row,
[data-theme="sunset"] .club-workspace-inline .chapter-row,
[data-theme="sunset"] .club-workspace-inline .club-reading-item,
[data-theme="sunset"] .friend-form,
[data-theme="sunset"] .chat-form,
[data-theme="sunset"] .chat-messages,
[data-theme="sunset"] .chat-bubble,
[data-theme="sunset"] .chat-empty,
[data-theme="sunset"] .shelf-recommendation,
[data-theme="sunset"] .insights-list > div,
[data-theme="sunset"] .series-tracker-stats > div,
[data-theme="sunset"] .month-count,
[data-theme="sunset"] .history-empty,
[data-theme="sunset"] .side-books .empty,
[data-theme="sunset"] .club-members span,
[data-theme="sunset"] .toolbar select {
	border-color: var(--line);
	background: rgba(255, 255, 255, 0.05);
	color: var(--ink);
}

[data-theme="sunset"] input,
[data-theme="sunset"] select,
[data-theme="sunset"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="sunset"] .btn-main,
[data-theme="sunset"] .view-nav button.active,
[data-theme="sunset"] .status-tabs button.active,
[data-theme="sunset"] .challenge-book-action.complete.active,
[data-theme="sunset"] .letter-pill.active,
[data-theme="sunset"] .recommendation-item-actions button:first-child,
[data-theme="sunset"] button.month-count.selected,
[data-theme="sunset"] button.month-count.selected strong {
	background-color: #f57a3d;
	color: #24140f;
}

[data-theme="sunset"] button.month-count.selected strong {
	background-color: transparent;
}

/* Candy */
html[data-theme="candy"] {
	--bg-1: #2c111f;
	--bg-2: #2c111f;
	--ink: #f2edf0;
	--ink-soft: #c6a9b8;
	--card: rgba(61, 26, 43, 0.94);
	--line: #5d3247;
	--accent: #42d3f0;
	--accent-2: #7be0f4;
	--danger: #ff8a80;
	--shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
	--strip-bg: rgba(61, 26, 43, 0.94);
	--strip-border: #5d3247;
	--input-bg: rgba(255, 255, 255, 0.06);
	--btn-sub-bg: #4a1c33;
	--dialog-bg: #361726;
	--dialog-border: #5d3247;
	--auth-card-bg: rgba(61, 26, 43, 0.94);
	--auth-card-border: #5d3247;
	--backdrop: rgba(0, 0, 0, 0.65);
	color-scheme: dark;
}

[data-theme="candy"] body {
	background: #2c111f;
}

[data-theme="candy"] .panel,
[data-theme="candy"] .app-dialog,
[data-theme="candy"] .book,
[data-theme="candy"] .book-club-card,
[data-theme="candy"] .friend-item,
[data-theme="candy"] .notification-item,
[data-theme="candy"] .search-panel,
[data-theme="candy"] .profile-options-panel,
[data-theme="candy"] .now-reading-card,
[data-theme="candy"] .wishlist-card,
[data-theme="candy"] .stat,
[data-theme="candy"] .search-item,
[data-theme="candy"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="candy"] .book-clubs-hub,
[data-theme="candy"] .friends-hub,
[data-theme="candy"] .club-chat-room,
[data-theme="candy"] .friend-chat-room,
[data-theme="candy"] .club-workspace-dialog,
[data-theme="candy"] .club-workspace-inline {
	border-color: var(--line);
	background: rgba(61, 26, 43, 0.94);
}

[data-theme="candy"] .club-workspace-hero,
[data-theme="candy"] .club-workspace-section,
[data-theme="candy"] .chapter-safety-note,
[data-theme="candy"] .chapter-directory,
[data-theme="candy"] .club-workspace-inline .club-room-row,
[data-theme="candy"] .club-workspace-inline .chapter-row,
[data-theme="candy"] .club-workspace-inline .club-reading-item,
[data-theme="candy"] .friend-form,
[data-theme="candy"] .chat-form,
[data-theme="candy"] .chat-messages,
[data-theme="candy"] .chat-bubble,
[data-theme="candy"] .chat-empty,
[data-theme="candy"] .shelf-recommendation,
[data-theme="candy"] .insights-list > div,
[data-theme="candy"] .series-tracker-stats > div,
[data-theme="candy"] .month-count,
[data-theme="candy"] .history-empty,
[data-theme="candy"] .side-books .empty,
[data-theme="candy"] .club-members span,
[data-theme="candy"] .toolbar select {
	border-color: var(--line);
	background: rgba(255, 255, 255, 0.05);
	color: var(--ink);
}

[data-theme="candy"] input,
[data-theme="candy"] select,
[data-theme="candy"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="candy"] .btn-main,
[data-theme="candy"] .view-nav button.active,
[data-theme="candy"] .status-tabs button.active,
[data-theme="candy"] .challenge-book-action.complete.active,
[data-theme="candy"] .letter-pill.active,
[data-theme="candy"] .recommendation-item-actions button:first-child,
[data-theme="candy"] button.month-count.selected,
[data-theme="candy"] button.month-count.selected strong {
	background-color: #42d3f0;
	color: #240f1a;
}

[data-theme="candy"] button.month-count.selected strong {
	background-color: transparent;
}

/* Vapor */
html[data-theme="vapor"] {
	--bg-1: #1f0e2f;
	--bg-2: #1f0e2f;
	--ink: #f0edf2;
	--ink-soft: #b8a9c6;
	--card: rgba(43, 26, 61, 0.94);
	--line: #47325d;
	--accent: #42e1f0;
	--accent-2: #7beaf4;
	--danger: #ff8a80;
	--shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
	--strip-bg: rgba(43, 26, 61, 0.94);
	--strip-border: #47325d;
	--input-bg: rgba(255, 255, 255, 0.06);
	--btn-sub-bg: #331c4a;
	--dialog-bg: #261736;
	--dialog-border: #47325d;
	--auth-card-bg: rgba(43, 26, 61, 0.94);
	--auth-card-border: #47325d;
	--backdrop: rgba(0, 0, 0, 0.65);
	color-scheme: dark;
}

[data-theme="vapor"] body {
	background: #1f0e2f;
}

[data-theme="vapor"] .panel,
[data-theme="vapor"] .app-dialog,
[data-theme="vapor"] .book,
[data-theme="vapor"] .book-club-card,
[data-theme="vapor"] .friend-item,
[data-theme="vapor"] .notification-item,
[data-theme="vapor"] .search-panel,
[data-theme="vapor"] .profile-options-panel,
[data-theme="vapor"] .now-reading-card,
[data-theme="vapor"] .wishlist-card,
[data-theme="vapor"] .stat,
[data-theme="vapor"] .search-item,
[data-theme="vapor"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="vapor"] .book-clubs-hub,
[data-theme="vapor"] .friends-hub,
[data-theme="vapor"] .club-chat-room,
[data-theme="vapor"] .friend-chat-room,
[data-theme="vapor"] .club-workspace-dialog,
[data-theme="vapor"] .club-workspace-inline {
	border-color: var(--line);
	background: rgba(43, 26, 61, 0.94);
}

[data-theme="vapor"] .club-workspace-hero,
[data-theme="vapor"] .club-workspace-section,
[data-theme="vapor"] .chapter-safety-note,
[data-theme="vapor"] .chapter-directory,
[data-theme="vapor"] .club-workspace-inline .club-room-row,
[data-theme="vapor"] .club-workspace-inline .chapter-row,
[data-theme="vapor"] .club-workspace-inline .club-reading-item,
[data-theme="vapor"] .friend-form,
[data-theme="vapor"] .chat-form,
[data-theme="vapor"] .chat-messages,
[data-theme="vapor"] .chat-bubble,
[data-theme="vapor"] .chat-empty,
[data-theme="vapor"] .shelf-recommendation,
[data-theme="vapor"] .insights-list > div,
[data-theme="vapor"] .series-tracker-stats > div,
[data-theme="vapor"] .month-count,
[data-theme="vapor"] .history-empty,
[data-theme="vapor"] .side-books .empty,
[data-theme="vapor"] .club-members span,
[data-theme="vapor"] .toolbar select {
	border-color: var(--line);
	background: rgba(255, 255, 255, 0.05);
	color: var(--ink);
}

[data-theme="vapor"] input,
[data-theme="vapor"] select,
[data-theme="vapor"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="vapor"] .btn-main,
[data-theme="vapor"] .view-nav button.active,
[data-theme="vapor"] .status-tabs button.active,
[data-theme="vapor"] .challenge-book-action.complete.active,
[data-theme="vapor"] .letter-pill.active,
[data-theme="vapor"] .recommendation-item-actions button:first-child,
[data-theme="vapor"] button.month-count.selected,
[data-theme="vapor"] button.month-count.selected strong {
	background-color: #42e1f0;
	color: #1a0f24;
}

[data-theme="vapor"] button.month-count.selected strong {
	background-color: transparent;
}

/* Volt */
html[data-theme="volt"] {
	--bg-1: #0e192f;
	--bg-2: #0e192f;
	--ink: #edeff2;
	--ink-soft: #a9b3c6;
	--card: rgba(26, 38, 61, 0.94);
	--line: #32405d;
	--accent: #428ffa;
	--accent-2: #7eb2fc;
	--danger: #ff8a80;
	--shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
	--strip-bg: rgba(26, 38, 61, 0.94);
	--strip-border: #32405d;
	--input-bg: rgba(255, 255, 255, 0.06);
	--btn-sub-bg: #1c2b4a;
	--dialog-bg: #172136;
	--dialog-border: #32405d;
	--auth-card-bg: rgba(26, 38, 61, 0.94);
	--auth-card-border: #32405d;
	--backdrop: rgba(0, 0, 0, 0.65);
	color-scheme: dark;
}

[data-theme="volt"] body {
	background: #0e192f;
}

[data-theme="volt"] .panel,
[data-theme="volt"] .app-dialog,
[data-theme="volt"] .book,
[data-theme="volt"] .book-club-card,
[data-theme="volt"] .friend-item,
[data-theme="volt"] .notification-item,
[data-theme="volt"] .search-panel,
[data-theme="volt"] .profile-options-panel,
[data-theme="volt"] .now-reading-card,
[data-theme="volt"] .wishlist-card,
[data-theme="volt"] .stat,
[data-theme="volt"] .search-item,
[data-theme="volt"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="volt"] .book-clubs-hub,
[data-theme="volt"] .friends-hub,
[data-theme="volt"] .club-chat-room,
[data-theme="volt"] .friend-chat-room,
[data-theme="volt"] .club-workspace-dialog,
[data-theme="volt"] .club-workspace-inline {
	border-color: var(--line);
	background: rgba(26, 38, 61, 0.94);
}

[data-theme="volt"] .club-workspace-hero,
[data-theme="volt"] .club-workspace-section,
[data-theme="volt"] .chapter-safety-note,
[data-theme="volt"] .chapter-directory,
[data-theme="volt"] .club-workspace-inline .club-room-row,
[data-theme="volt"] .club-workspace-inline .chapter-row,
[data-theme="volt"] .club-workspace-inline .club-reading-item,
[data-theme="volt"] .friend-form,
[data-theme="volt"] .chat-form,
[data-theme="volt"] .chat-messages,
[data-theme="volt"] .chat-bubble,
[data-theme="volt"] .chat-empty,
[data-theme="volt"] .shelf-recommendation,
[data-theme="volt"] .insights-list > div,
[data-theme="volt"] .series-tracker-stats > div,
[data-theme="volt"] .month-count,
[data-theme="volt"] .history-empty,
[data-theme="volt"] .side-books .empty,
[data-theme="volt"] .club-members span,
[data-theme="volt"] .toolbar select {
	border-color: var(--line);
	background: rgba(255, 255, 255, 0.05);
	color: var(--ink);
}

[data-theme="volt"] input,
[data-theme="volt"] select,
[data-theme="volt"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="volt"] .btn-main,
[data-theme="volt"] .view-nav button.active,
[data-theme="volt"] .status-tabs button.active,
[data-theme="volt"] .challenge-book-action.complete.active,
[data-theme="volt"] .letter-pill.active,
[data-theme="volt"] .recommendation-item-actions button:first-child,
[data-theme="volt"] button.month-count.selected,
[data-theme="volt"] button.month-count.selected strong {
	background-color: #428ffa;
	color: #0f1624;
}

[data-theme="volt"] button.month-count.selected strong {
	background-color: transparent;
}

/* Blaze */
html[data-theme="blaze"] {
	--bg-1: #2f110e;
	--bg-2: #2f110e;
	--ink: #f2eeed;
	--ink-soft: #c6aca9;
	--card: rgba(61, 29, 26, 0.94);
	--line: #5d3632;
	--accent: #f55c3d;
	--accent-2: #f88d77;
	--danger: #ff8a80;
	--shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
	--strip-bg: rgba(61, 29, 26, 0.94);
	--strip-border: #5d3632;
	--input-bg: rgba(255, 255, 255, 0.06);
	--btn-sub-bg: #4a201c;
	--dialog-bg: #361917;
	--dialog-border: #5d3632;
	--auth-card-bg: rgba(61, 29, 26, 0.94);
	--auth-card-border: #5d3632;
	--backdrop: rgba(0, 0, 0, 0.65);
	color-scheme: dark;
}

[data-theme="blaze"] body {
	background: #2f110e;
}

[data-theme="blaze"] .panel,
[data-theme="blaze"] .app-dialog,
[data-theme="blaze"] .book,
[data-theme="blaze"] .book-club-card,
[data-theme="blaze"] .friend-item,
[data-theme="blaze"] .notification-item,
[data-theme="blaze"] .search-panel,
[data-theme="blaze"] .profile-options-panel,
[data-theme="blaze"] .now-reading-card,
[data-theme="blaze"] .wishlist-card,
[data-theme="blaze"] .stat,
[data-theme="blaze"] .search-item,
[data-theme="blaze"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="blaze"] .book-clubs-hub,
[data-theme="blaze"] .friends-hub,
[data-theme="blaze"] .club-chat-room,
[data-theme="blaze"] .friend-chat-room,
[data-theme="blaze"] .club-workspace-dialog,
[data-theme="blaze"] .club-workspace-inline {
	border-color: var(--line);
	background: rgba(61, 29, 26, 0.94);
}

[data-theme="blaze"] .club-workspace-hero,
[data-theme="blaze"] .club-workspace-section,
[data-theme="blaze"] .chapter-safety-note,
[data-theme="blaze"] .chapter-directory,
[data-theme="blaze"] .club-workspace-inline .club-room-row,
[data-theme="blaze"] .club-workspace-inline .chapter-row,
[data-theme="blaze"] .club-workspace-inline .club-reading-item,
[data-theme="blaze"] .friend-form,
[data-theme="blaze"] .chat-form,
[data-theme="blaze"] .chat-messages,
[data-theme="blaze"] .chat-bubble,
[data-theme="blaze"] .chat-empty,
[data-theme="blaze"] .shelf-recommendation,
[data-theme="blaze"] .insights-list > div,
[data-theme="blaze"] .series-tracker-stats > div,
[data-theme="blaze"] .month-count,
[data-theme="blaze"] .history-empty,
[data-theme="blaze"] .side-books .empty,
[data-theme="blaze"] .club-members span,
[data-theme="blaze"] .toolbar select {
	border-color: var(--line);
	background: rgba(255, 255, 255, 0.05);
	color: var(--ink);
}

[data-theme="blaze"] input,
[data-theme="blaze"] select,
[data-theme="blaze"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="blaze"] .btn-main,
[data-theme="blaze"] .view-nav button.active,
[data-theme="blaze"] .status-tabs button.active,
[data-theme="blaze"] .challenge-book-action.complete.active,
[data-theme="blaze"] .letter-pill.active,
[data-theme="blaze"] .recommendation-item-actions button:first-child,
[data-theme="blaze"] button.month-count.selected,
[data-theme="blaze"] button.month-count.selected strong {
	background-color: #f55c3d;
	color: #24110f;
}

[data-theme="blaze"] button.month-count.selected strong {
	background-color: transparent;
}

/* Monsoon */
html[data-theme="monsoon"] {
	--bg-1: #dfe9ec;
	--bg-2: #dfe9ec;
	--ink: #1e363e;
	--ink-soft: #567681;
	--card: rgba(245, 248, 249, 0.96);
	--line: #b3d1db;
	--accent: #2f768e;
	--accent-2: #1c4654;
	--danger: #b3261e;
	--shadow: 0 18px 42px rgba(30, 54, 62, 0.14);
	--strip-bg: rgba(245, 248, 249, 0.96);
	--strip-border: #b3d1db;
	--input-bg: #f8fbfb;
	--btn-sub-bg: #cbdfe6;
	--dialog-bg: #f8fbfb;
	--dialog-border: #b3d1db;
	--auth-card-bg: rgba(245, 248, 249, 0.85);
	--auth-card-border: #b3d1db;
	--backdrop: rgba(30, 54, 62, 0.5);
	color-scheme: light;
}

[data-theme="monsoon"] body {
	background: #dfe9ec;
}

[data-theme="monsoon"] .panel,
[data-theme="monsoon"] .app-dialog,
[data-theme="monsoon"] .book,
[data-theme="monsoon"] .book-club-card,
[data-theme="monsoon"] .friend-item,
[data-theme="monsoon"] .notification-item,
[data-theme="monsoon"] .search-panel,
[data-theme="monsoon"] .profile-options-panel,
[data-theme="monsoon"] .now-reading-card,
[data-theme="monsoon"] .wishlist-card,
[data-theme="monsoon"] .stat,
[data-theme="monsoon"] .search-item,
[data-theme="monsoon"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="monsoon"] input,
[data-theme="monsoon"] select,
[data-theme="monsoon"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="monsoon"] .btn-main,
[data-theme="monsoon"] .view-nav button.active,
[data-theme="monsoon"] .status-tabs button.active,
[data-theme="monsoon"] .challenge-book-action.complete.active,
[data-theme="monsoon"] .letter-pill.active,
[data-theme="monsoon"] .recommendation-item-actions button:first-child,
[data-theme="monsoon"] button.month-count.selected,
[data-theme="monsoon"] button.month-count.selected strong {
	background-color: #2f768e;
	color: #ffffff;
}

[data-theme="monsoon"] button.month-count.selected strong {
	background-color: transparent;
}

/* Harvest */
html[data-theme="harvest"] {
	--bg-1: #f1ebda;
	--bg-2: #f1ebda;
	--ink: #3e361e;
	--ink-soft: #7a7052;
	--card: rgba(249, 248, 245, 0.96);
	--line: #dbd1b3;
	--accent: #866518;
	--accent-2: #45340c;
	--danger: #b3261e;
	--shadow: 0 18px 42px rgba(62, 54, 30, 0.14);
	--strip-bg: rgba(249, 248, 245, 0.96);
	--strip-border: #dbd1b3;
	--input-bg: #fbfbf8;
	--btn-sub-bg: #e6dfcb;
	--dialog-bg: #fbfbf8;
	--dialog-border: #dbd1b3;
	--auth-card-bg: rgba(249, 248, 245, 0.85);
	--auth-card-border: #dbd1b3;
	--backdrop: rgba(62, 54, 30, 0.5);
	color-scheme: light;
}

[data-theme="harvest"] body {
	background: #f1ebda;
}

[data-theme="harvest"] .panel,
[data-theme="harvest"] .app-dialog,
[data-theme="harvest"] .book,
[data-theme="harvest"] .book-club-card,
[data-theme="harvest"] .friend-item,
[data-theme="harvest"] .notification-item,
[data-theme="harvest"] .search-panel,
[data-theme="harvest"] .profile-options-panel,
[data-theme="harvest"] .now-reading-card,
[data-theme="harvest"] .wishlist-card,
[data-theme="harvest"] .stat,
[data-theme="harvest"] .search-item,
[data-theme="harvest"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="harvest"] input,
[data-theme="harvest"] select,
[data-theme="harvest"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="harvest"] .btn-main,
[data-theme="harvest"] .view-nav button.active,
[data-theme="harvest"] .status-tabs button.active,
[data-theme="harvest"] .challenge-book-action.complete.active,
[data-theme="harvest"] .letter-pill.active,
[data-theme="harvest"] .recommendation-item-actions button:first-child,
[data-theme="harvest"] button.month-count.selected,
[data-theme="harvest"] button.month-count.selected strong {
	background-color: #866518;
	color: #ffffff;
}

[data-theme="harvest"] button.month-count.selected strong {
	background-color: transparent;
}

/* Hygge */
html[data-theme="hygge"] {
	--bg-1: #ebe4e0;
	--bg-2: #ebe4e0;
	--ink: #3e291e;
	--ink-soft: #816456;
	--card: rgba(249, 247, 246, 0.96);
	--line: #dbc0b3;
	--accent: #a95160;
	--accent-2: #753843;
	--danger: #b3261e;
	--shadow: 0 18px 42px rgba(62, 41, 30, 0.14);
	--strip-bg: rgba(249, 247, 246, 0.96);
	--strip-border: #dbc0b3;
	--input-bg: #fbf9f8;
	--btn-sub-bg: #e6d4cb;
	--dialog-bg: #fbf9f8;
	--dialog-border: #dbc0b3;
	--auth-card-bg: rgba(249, 247, 246, 0.85);
	--auth-card-border: #dbc0b3;
	--backdrop: rgba(62, 41, 30, 0.5);
	color-scheme: light;
}

[data-theme="hygge"] body {
	background: #ebe4e0;
}

[data-theme="hygge"] .panel,
[data-theme="hygge"] .app-dialog,
[data-theme="hygge"] .book,
[data-theme="hygge"] .book-club-card,
[data-theme="hygge"] .friend-item,
[data-theme="hygge"] .notification-item,
[data-theme="hygge"] .search-panel,
[data-theme="hygge"] .profile-options-panel,
[data-theme="hygge"] .now-reading-card,
[data-theme="hygge"] .wishlist-card,
[data-theme="hygge"] .stat,
[data-theme="hygge"] .search-item,
[data-theme="hygge"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="hygge"] input,
[data-theme="hygge"] select,
[data-theme="hygge"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="hygge"] .btn-main,
[data-theme="hygge"] .view-nav button.active,
[data-theme="hygge"] .status-tabs button.active,
[data-theme="hygge"] .challenge-book-action.complete.active,
[data-theme="hygge"] .letter-pill.active,
[data-theme="hygge"] .recommendation-item-actions button:first-child,
[data-theme="hygge"] button.month-count.selected,
[data-theme="hygge"] button.month-count.selected strong {
	background-color: #a95160;
	color: #ffffff;
}

[data-theme="hygge"] button.month-count.selected strong {
	background-color: transparent;
}

/* Candlelight */
html[data-theme="candlelight"] {
	--bg-1: #f1e9da;
	--bg-2: #f1e9da;
	--ink: #3e331e;
	--ink-soft: #7a6d52;
	--card: rgba(249, 248, 245, 0.96);
	--line: #dbcdb3;
	--accent: #976611;
	--accent-2: #523809;
	--danger: #b3261e;
	--shadow: 0 18px 42px rgba(62, 51, 30, 0.14);
	--strip-bg: rgba(249, 248, 245, 0.96);
	--strip-border: #dbcdb3;
	--input-bg: #fbfaf8;
	--btn-sub-bg: #e6ddcb;
	--dialog-bg: #fbfaf8;
	--dialog-border: #dbcdb3;
	--auth-card-bg: rgba(249, 248, 245, 0.85);
	--auth-card-border: #dbcdb3;
	--backdrop: rgba(62, 51, 30, 0.5);
	color-scheme: light;
}

[data-theme="candlelight"] body {
	background: #f1e9da;
}

[data-theme="candlelight"] .panel,
[data-theme="candlelight"] .app-dialog,
[data-theme="candlelight"] .book,
[data-theme="candlelight"] .book-club-card,
[data-theme="candlelight"] .friend-item,
[data-theme="candlelight"] .notification-item,
[data-theme="candlelight"] .search-panel,
[data-theme="candlelight"] .profile-options-panel,
[data-theme="candlelight"] .now-reading-card,
[data-theme="candlelight"] .wishlist-card,
[data-theme="candlelight"] .stat,
[data-theme="candlelight"] .search-item,
[data-theme="candlelight"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="candlelight"] input,
[data-theme="candlelight"] select,
[data-theme="candlelight"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="candlelight"] .btn-main,
[data-theme="candlelight"] .view-nav button.active,
[data-theme="candlelight"] .status-tabs button.active,
[data-theme="candlelight"] .challenge-book-action.complete.active,
[data-theme="candlelight"] .letter-pill.active,
[data-theme="candlelight"] .recommendation-item-actions button:first-child,
[data-theme="candlelight"] button.month-count.selected,
[data-theme="candlelight"] button.month-count.selected strong {
	background-color: #976611;
	color: #ffffff;
}

[data-theme="candlelight"] button.month-count.selected strong {
	background-color: transparent;
}

/* Chai */
html[data-theme="chai"] {
	--bg-1: #eee4dd;
	--bg-2: #eee4dd;
	--ink: #3e2b1e;
	--ink-soft: #816856;
	--card: rgba(249, 247, 245, 0.96);
	--line: #dbc4b3;
	--accent: #a2592f;
	--accent-2: #67391e;
	--danger: #b3261e;
	--shadow: 0 18px 42px rgba(62, 43, 30, 0.14);
	--strip-bg: rgba(249, 247, 245, 0.96);
	--strip-border: #dbc4b3;
	--input-bg: #fbfaf8;
	--btn-sub-bg: #e6d7cb;
	--dialog-bg: #fbfaf8;
	--dialog-border: #dbc4b3;
	--auth-card-bg: rgba(249, 247, 245, 0.85);
	--auth-card-border: #dbc4b3;
	--backdrop: rgba(62, 43, 30, 0.5);
	color-scheme: light;
}

[data-theme="chai"] body {
	background: #eee4dd;
}

[data-theme="chai"] .panel,
[data-theme="chai"] .app-dialog,
[data-theme="chai"] .book,
[data-theme="chai"] .book-club-card,
[data-theme="chai"] .friend-item,
[data-theme="chai"] .notification-item,
[data-theme="chai"] .search-panel,
[data-theme="chai"] .profile-options-panel,
[data-theme="chai"] .now-reading-card,
[data-theme="chai"] .wishlist-card,
[data-theme="chai"] .stat,
[data-theme="chai"] .search-item,
[data-theme="chai"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="chai"] input,
[data-theme="chai"] select,
[data-theme="chai"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="chai"] .btn-main,
[data-theme="chai"] .view-nav button.active,
[data-theme="chai"] .status-tabs button.active,
[data-theme="chai"] .challenge-book-action.complete.active,
[data-theme="chai"] .letter-pill.active,
[data-theme="chai"] .recommendation-item-actions button:first-child,
[data-theme="chai"] button.month-count.selected,
[data-theme="chai"] button.month-count.selected strong {
	background-color: #a2592f;
	color: #ffffff;
}

[data-theme="chai"] button.month-count.selected strong {
	background-color: transparent;
}

/* Flannel */
html[data-theme="flannel"] {
	--bg-1: #ece1df;
	--bg-2: #ece1df;
	--ink: #3e231e;
	--ink-soft: #815d56;
	--card: rgba(249, 246, 245, 0.96);
	--line: #dbbab3;
	--accent: #ae5042;
	--accent-2: #77372d;
	--danger: #b3261e;
	--shadow: 0 18px 42px rgba(62, 35, 30, 0.14);
	--strip-bg: rgba(249, 246, 245, 0.96);
	--strip-border: #dbbab3;
	--input-bg: #fbf9f8;
	--btn-sub-bg: #e6d0cb;
	--dialog-bg: #fbf9f8;
	--dialog-border: #dbbab3;
	--auth-card-bg: rgba(249, 246, 245, 0.85);
	--auth-card-border: #dbbab3;
	--backdrop: rgba(62, 35, 30, 0.5);
	color-scheme: light;
}

[data-theme="flannel"] body {
	background: #ece1df;
}

[data-theme="flannel"] .panel,
[data-theme="flannel"] .app-dialog,
[data-theme="flannel"] .book,
[data-theme="flannel"] .book-club-card,
[data-theme="flannel"] .friend-item,
[data-theme="flannel"] .notification-item,
[data-theme="flannel"] .search-panel,
[data-theme="flannel"] .profile-options-panel,
[data-theme="flannel"] .now-reading-card,
[data-theme="flannel"] .wishlist-card,
[data-theme="flannel"] .stat,
[data-theme="flannel"] .search-item,
[data-theme="flannel"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="flannel"] input,
[data-theme="flannel"] select,
[data-theme="flannel"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="flannel"] .btn-main,
[data-theme="flannel"] .view-nav button.active,
[data-theme="flannel"] .status-tabs button.active,
[data-theme="flannel"] .challenge-book-action.complete.active,
[data-theme="flannel"] .letter-pill.active,
[data-theme="flannel"] .recommendation-item-actions button:first-child,
[data-theme="flannel"] button.month-count.selected,
[data-theme="flannel"] button.month-count.selected strong {
	background-color: #ae5042;
	color: #ffffff;
}

[data-theme="flannel"] button.month-count.selected strong {
	background-color: transparent;
}

/* Hearth */
html[data-theme="hearth"] {
	--bg-1: #2b1612;
	--bg-2: #2b1612;
	--ink: #f2eeed;
	--ink-soft: #c6aea9;
	--card: rgba(61, 32, 26, 0.94);
	--line: #5d3932;
	--accent: #f06e42;
	--accent-2: #f4997b;
	--danger: #ff8a80;
	--shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
	--strip-bg: rgba(61, 32, 26, 0.94);
	--strip-border: #5d3932;
	--input-bg: rgba(255, 255, 255, 0.06);
	--btn-sub-bg: #47251f;
	--dialog-bg: #361c17;
	--dialog-border: #5d3932;
	--auth-card-bg: rgba(61, 32, 26, 0.94);
	--auth-card-border: #5d3932;
	--backdrop: rgba(0, 0, 0, 0.65);
	color-scheme: dark;
}

[data-theme="hearth"] body {
	background: #2b1612;
}

[data-theme="hearth"] .panel,
[data-theme="hearth"] .app-dialog,
[data-theme="hearth"] .book,
[data-theme="hearth"] .book-club-card,
[data-theme="hearth"] .friend-item,
[data-theme="hearth"] .notification-item,
[data-theme="hearth"] .search-panel,
[data-theme="hearth"] .profile-options-panel,
[data-theme="hearth"] .now-reading-card,
[data-theme="hearth"] .wishlist-card,
[data-theme="hearth"] .stat,
[data-theme="hearth"] .search-item,
[data-theme="hearth"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="hearth"] .book-clubs-hub,
[data-theme="hearth"] .friends-hub,
[data-theme="hearth"] .club-chat-room,
[data-theme="hearth"] .friend-chat-room,
[data-theme="hearth"] .club-workspace-dialog,
[data-theme="hearth"] .club-workspace-inline {
	border-color: var(--line);
	background: rgba(61, 32, 26, 0.94);
}

[data-theme="hearth"] .club-workspace-hero,
[data-theme="hearth"] .club-workspace-section,
[data-theme="hearth"] .chapter-safety-note,
[data-theme="hearth"] .chapter-directory,
[data-theme="hearth"] .club-workspace-inline .club-room-row,
[data-theme="hearth"] .club-workspace-inline .chapter-row,
[data-theme="hearth"] .club-workspace-inline .club-reading-item,
[data-theme="hearth"] .friend-form,
[data-theme="hearth"] .chat-form,
[data-theme="hearth"] .chat-messages,
[data-theme="hearth"] .chat-bubble,
[data-theme="hearth"] .chat-empty,
[data-theme="hearth"] .shelf-recommendation,
[data-theme="hearth"] .insights-list > div,
[data-theme="hearth"] .series-tracker-stats > div,
[data-theme="hearth"] .month-count,
[data-theme="hearth"] .history-empty,
[data-theme="hearth"] .side-books .empty,
[data-theme="hearth"] .club-members span,
[data-theme="hearth"] .toolbar select {
	border-color: var(--line);
	background: rgba(255, 255, 255, 0.05);
	color: var(--ink);
}

[data-theme="hearth"] input,
[data-theme="hearth"] select,
[data-theme="hearth"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="hearth"] .btn-main,
[data-theme="hearth"] .view-nav button.active,
[data-theme="hearth"] .status-tabs button.active,
[data-theme="hearth"] .challenge-book-action.complete.active,
[data-theme="hearth"] .letter-pill.active,
[data-theme="hearth"] .recommendation-item-actions button:first-child,
[data-theme="hearth"] button.month-count.selected,
[data-theme="hearth"] button.month-count.selected strong {
	background-color: #f06e42;
	color: #24130f;
}

[data-theme="hearth"] button.month-count.selected strong {
	background-color: transparent;
}

/* Woolen */
html[data-theme="woolen"] {
	--bg-1: #e9e6e2;
	--bg-2: #e9e6e2;
	--ink: #3e311e;
	--ink-soft: #816f56;
	--card: rgba(248, 248, 246, 0.96);
	--line: #dbcab3;
	--accent: #866941;
	--accent-2: #534128;
	--danger: #b3261e;
	--shadow: 0 18px 42px rgba(62, 49, 30, 0.14);
	--strip-bg: rgba(248, 248, 246, 0.96);
	--strip-border: #dbcab3;
	--input-bg: #fbfaf8;
	--btn-sub-bg: #e6dbcb;
	--dialog-bg: #fbfaf8;
	--dialog-border: #dbcab3;
	--auth-card-bg: rgba(248, 248, 246, 0.85);
	--auth-card-border: #dbcab3;
	--backdrop: rgba(62, 49, 30, 0.5);
	color-scheme: light;
}

[data-theme="woolen"] body {
	background: #e9e6e2;
}

[data-theme="woolen"] .panel,
[data-theme="woolen"] .app-dialog,
[data-theme="woolen"] .book,
[data-theme="woolen"] .book-club-card,
[data-theme="woolen"] .friend-item,
[data-theme="woolen"] .notification-item,
[data-theme="woolen"] .search-panel,
[data-theme="woolen"] .profile-options-panel,
[data-theme="woolen"] .now-reading-card,
[data-theme="woolen"] .wishlist-card,
[data-theme="woolen"] .stat,
[data-theme="woolen"] .search-item,
[data-theme="woolen"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="woolen"] input,
[data-theme="woolen"] select,
[data-theme="woolen"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="woolen"] .btn-main,
[data-theme="woolen"] .view-nav button.active,
[data-theme="woolen"] .status-tabs button.active,
[data-theme="woolen"] .challenge-book-action.complete.active,
[data-theme="woolen"] .letter-pill.active,
[data-theme="woolen"] .recommendation-item-actions button:first-child,
[data-theme="woolen"] button.month-count.selected,
[data-theme="woolen"] button.month-count.selected strong {
	background-color: #866941;
	color: #ffffff;
}

[data-theme="woolen"] button.month-count.selected strong {
	background-color: transparent;
}

/* Cabin */
html[data-theme="cabin"] {
	--bg-1: #ede5de;
	--bg-2: #ede5de;
	--ink: #3e2d1e;
	--ink-soft: #816a56;
	--card: rgba(249, 247, 245, 0.96);
	--line: #dbc6b3;
	--accent: #3a784f;
	--accent-2: #21452d;
	--danger: #b3261e;
	--shadow: 0 18px 42px rgba(62, 45, 30, 0.14);
	--strip-bg: rgba(249, 247, 245, 0.96);
	--strip-border: #dbc6b3;
	--input-bg: #fbfaf8;
	--btn-sub-bg: #e6d8cb;
	--dialog-bg: #fbfaf8;
	--dialog-border: #dbc6b3;
	--auth-card-bg: rgba(249, 247, 245, 0.85);
	--auth-card-border: #dbc6b3;
	--backdrop: rgba(62, 45, 30, 0.5);
	color-scheme: light;
}

[data-theme="cabin"] body {
	background: #ede5de;
}

[data-theme="cabin"] .panel,
[data-theme="cabin"] .app-dialog,
[data-theme="cabin"] .book,
[data-theme="cabin"] .book-club-card,
[data-theme="cabin"] .friend-item,
[data-theme="cabin"] .notification-item,
[data-theme="cabin"] .search-panel,
[data-theme="cabin"] .profile-options-panel,
[data-theme="cabin"] .now-reading-card,
[data-theme="cabin"] .wishlist-card,
[data-theme="cabin"] .stat,
[data-theme="cabin"] .search-item,
[data-theme="cabin"] .empty {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="cabin"] input,
[data-theme="cabin"] select,
[data-theme="cabin"] textarea {
	background: var(--input-bg);
	border-color: var(--line);
	color: var(--ink);
}

[data-theme="cabin"] .btn-main,
[data-theme="cabin"] .view-nav button.active,
[data-theme="cabin"] .status-tabs button.active,
[data-theme="cabin"] .challenge-book-action.complete.active,
[data-theme="cabin"] .letter-pill.active,
[data-theme="cabin"] .recommendation-item-actions button:first-child,
[data-theme="cabin"] button.month-count.selected,
[data-theme="cabin"] button.month-count.selected strong {
	background-color: #3a784f;
	color: #ffffff;
}

[data-theme="cabin"] button.month-count.selected strong {
	background-color: transparent;
}

/* styles/theme-overrides-mobile.css */
:root {
	--page-gutter: clamp(1rem, 3vw, 2rem);
}

.wrap {
	width: min(1180px, calc(100% - (var(--page-gutter) * 2)));
	max-width: 1180px;
}

.panel > .community-shell,
.panel > .library-dashboard,
.panel > .wishlist-page,
.panel > .bookshelf-page,
.reader-profile-page {
	padding-inline: var(--page-gutter);
}

@media (max-width: 760px) {
	:root {
		--page-gutter: 0.75rem;
	}

	.wrap {
		width: calc(100% - (var(--page-gutter) * 2));
	}
}

[data-theme="notepad"] .panel,
[data-theme="notepad"] .app-dialog,
[data-theme="notepad"] .book,
[data-theme="notepad"] .book-club-card,
[data-theme="notepad"] .friend-item,
[data-theme="notepad"] .notification-item,
[data-theme="notepad"] .search-panel,
[data-theme="notepad"] .profile-options-panel {
	background: #fffaf0;
	border-color: #d5c7ae;
	color: #302a23;
}

[data-theme="notepad"] .btn-main,
[data-theme="notepad"] .view-nav button.active,
[data-theme="notepad"] .status-tabs button.active {
	background: #9b5b35;
	color: #fffaf0;
}

[data-theme="notepad"] input,
[data-theme="notepad"] select,
[data-theme="notepad"] textarea {
	background: #fffdf6;
	border-color: #d5c7ae;
	color: #302a23;
}

.wrap {
	width: min(1180px, calc(100% - 2rem));
	max-width: 1180px;
	padding-inline: 0;
}

.panel,
.library-dashboard,
.community-shell,
.reader-profile-page {
	width: 100%;
}

.panel > .community-shell,
.panel > .library-dashboard,
.panel > .wishlist-page,
.panel > .bookshelf-page,
.reader-profile-page {
	padding-inline: 1rem;
}

.community-shell,
.library-dashboard,
.wishlist-page,
.bookshelf-page,
.reader-profile-page {
	min-width: 0;
}

@media (max-width: 760px) {
	.wrap {
		width: min(100% - 1rem, 1180px);
		padding-inline: 0;
	}

	.panel > .community-shell,
	.panel > .library-dashboard,
	.panel > .wishlist-page,
	.panel > .bookshelf-page,
	.reader-profile-page {
		padding-inline: 0.75rem;
	}
}

/* Modern reading-studio visual system */

/* styles/modern-studio.css */
:root {
	--bg-1: #e8ebee;
	--bg-2: #d5dae0;
	--ink: #151922;
	--ink-soft: #4a5261;
	--card: #f7f8fa;
	--line: #cbd1d9;
	--accent: #2d4fbf;
	--accent-2: #7b2333;
	--danger: #b3261e;
	--shadow: 0 10px 30px rgba(21, 25, 34, 0.12);
	--strip-bg: #f0f2f5;
	--strip-border: #d5dae0;
	--input-bg: #ffffff;
	--btn-sub-bg: #dde1e7;
	--dialog-bg: #f7f8fa;
	--dialog-border: #cbd1d9;
	--auth-card-bg: #eef0f3;
	--auth-card-border: #d5dae0;
	--backdrop: rgba(17, 20, 26, 0.58);
}

body {
	background: var(--bg-1);
}

.wrap {
	width: min(1180px, calc(100% - 2rem));
	margin-top: 1.2rem;
	gap: 0.8rem;
}

.panel {
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: var(--shadow);
	backdrop-filter: blur(10px);
	visibility: visible !important;
	animation: none !important;
	opacity: 1 !important;
	transform: none !important;
}

.hero {
	padding: 1rem 1.1rem 0.95rem;
	border-top: 3px solid var(--accent-2);
}

.account-strip {
	margin-bottom: 0.9rem;
	padding: 0.45rem 0.55rem;
	border-radius: 6px;
	background: transparent;
	border-color: transparent;
}

.profile-avatar {
	width: 40px;
	height: 40px;
	border: 2px solid var(--accent);
}

.account-email {
	font-size: 0.9rem;
	letter-spacing: 0.01em;
}

.account-actions {
	gap: 0.3rem;
}

.icon-btn {
	width: 40px;
	height: 40px;
	border-radius: 9px;
	background: var(--btn-sub-bg);
	transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.app-heading {
	align-items: center;
	padding: 0.3rem 0.4rem 0;
}

.hero h1 {
	font-family: var(--font-ui);
	font-size: clamp(1.35rem, 2.6vw, 1.9rem);
	letter-spacing: -0.02em;
}

.view-nav,
.status-tabs {
	gap: 0.2rem;
	padding: 0.22rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--btn-sub-bg);
}

.view-nav button,
.status-tabs button {
	padding: 0.42rem 0.7rem;
	border-radius: 7px;
	color: var(--ink-soft);
	font-size: 0.8rem;
	font-weight: 700;
}

.view-nav button.active,
.status-tabs button.active {
	border-color: transparent;
	background: var(--ink);
	color: var(--card);
}

.grid,
.library-dashboard,
.wishlist-page,
.bookshelf-page {
	padding: 1rem;
	gap: 1rem;
}.dashboard-section,
.library-panel .panel,
.search-panel,
.shelf-section,
.community-shell > *,
.book-clubs-hub,
.friends-hub,
.club-chat-room,
.friend-chat-room
{
	border-color: var(--line);
	border-radius: 6px;
}

.now-reading-section,
.search-panel,
.manual-entry,
.bookshelf-frame,
.trinket-tray,
.community-shell > *,
.book-club-card,
.friend-item,
.recommendation-item,
.notification-item {
	box-shadow: none;
}

.now-reading-section {
	border-left: 3px solid var(--accent);
	background: color-mix(in srgb, var(--accent) 7%, var(--card));
}

.card-title,
.dashboard-section h2,
.reader-profile-section h2 {
	font-family: var(--font-read);
	letter-spacing: -0.02em;
}

button,
input,
select,
textarea {
	font: inherit;
}

input,
select,
textarea {
	border-color: var(--line);
	border-radius: 8px;
	background: var(--input-bg);
	color: var(--ink);
	box-shadow: none;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent);
	outline-offset: 2px;
}.btn-main,
.btn-sub,
.toggle-read,
.recommend
{
	border-radius: 8px;
	font-weight: 700;
	transition: transform 160ms ease, filter 160ms ease;
}

.btn-main {
	background: var(--accent);
}

.btn-sub {
	border-color: var(--line);
	background: var(--btn-sub-bg);
	color: var(--ink);
}

.book,
.now-reading-card,
.book-club-card,
.friend-item,
.reader-profile-book,
.reader-profile-reviews article,
.reader-profile-shared article,
.profile-options-panel,
.notification-item {
	border-color: var(--line);
	border-radius: 6px;
	background: color-mix(in srgb, var(--card) 88%, var(--accent) 3%);
}

.book-club-card {
	border-left: 3px solid var(--accent);
}

.book-club-card.active {
	border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent);
}.club-room-row.active,
.chapter-row.active
{
	border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
	background: color-mix(in srgb, var(--accent) 14%, var(--btn-sub-bg));
	color: var(--accent);
}

.notification-item {
	background: color-mix(in srgb, var(--card) 90%, var(--accent) 4%);
}

.notification-actions .icon-btn {
	width: 32px;
	height: 32px;
}

.app-dialog {
	width: min(560px, calc(100% - 1.5rem));
	border-radius: 6px;
	box-shadow: 0 28px 90px rgba(16, 28, 32, 0.28);
}

.club-workspace-dialog {
	width: min(1080px, calc(100% - 2rem));
	max-height: min(880px, calc(100vh - 2rem));
	max-height: min(880px, calc(100dvh - 2rem));
	overflow: hidden;
}

.club-workspace-dialog .club-workspace-content {
	max-height: calc(min(880px, 100vh - 2rem) - 6rem);
	max-height: calc(min(880px, 100dvh - 2rem) - 6rem);
	overflow: auto;
	padding-right: 0.25rem;
}

.dialog-heading {
	padding-bottom: 0.7rem;
	border-bottom: 1px solid var(--line);
}

.reader-profile-page {
	max-width: 1040px;
	padding-top: 0.6rem;
}

.reader-profile-hero {
	border-color: var(--line);
	border-radius: 6px;
	background: color-mix(in srgb, var(--card) 90%, var(--accent) 5%);
}

.reader-profile-stats > div {
	border-color: var(--line);
	border-radius: 6px;
	background: var(--btn-sub-bg);
}

@media (max-width: 760px) {
	.wrap {
		width: min(100% - 1rem, 1180px);
		margin-top: 0.65rem;
	}

	.account-strip,
	.app-heading {
		align-items: flex-start;
	}

	.account-strip {
		flex-wrap: wrap;
	}

	.account-actions {
		margin-left: auto;
	}

	.app-heading {
		flex-direction: column;
	}

	.view-nav {
		width: 100%;
		justify-content: stretch;
	}

	.view-nav button {
		flex: 1;
	}
}

/* Hover effects (restored) */

.icon-btn:hover:not(:disabled) {
	border-color: var(--accent);
	background: color-mix(in srgb, var(--accent) 12%, var(--btn-sub-bg));
	transform: translateY(-1px);
}

.btn-main:hover:not(:disabled),
.btn-sub:hover:not(:disabled) {
	box-shadow: inset 0 0 0 999px color-mix(in srgb, currentColor 14%, transparent);
	transform: translateY(-1px);
}

@media (pointer: coarse) {
	.icon-btn,
	.book-settings-menu .icon-btn {
		min-width: 44px;
		min-height: 44px;
	}
}

/* Compact phone header: avatar, name and the four account buttons share one row, and the
   secondary note and spacing shrink, so content starts much higher on small screens. */
@media (max-width: 620px) {
	.account-strip {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: 0.5rem;
		margin-bottom: 0.4rem;
		padding: 0.3rem 0.2rem;
	}

	.account-menu {
		flex: 1;
	}

	.account-meta {
		min-width: 0;
		gap: 0.5rem;
	}

	.account-email {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	#account-note {
		display: none;
	}

	.profile-avatar {
		width: 34px;
		height: 34px;
		flex: none;
	}

	.account-actions {
		flex: none;
		margin-left: 0;
		gap: 0.2rem;
	}

	.account-actions .icon-btn {
		width: 36px;
		height: 36px;
	}

	.email-verify-banner {
		font-size: 0.8rem;
		margin-bottom: 0.4rem;
	}

	.app-heading {
		gap: 0.4rem;
		padding-top: 0;
	}

	.hero h1 {
		font-size: 1.2rem;
	}
}

/* styles/studio.css */
/* Studio visual layer (site-wide).
   Soft-structural look: cards sit on the page as "double-bezel" plates (an inner ring, a thin tinted shell
   and an outer ring, all drawn with box-shadows so no extra markup is needed), interactive controls are
   pills, inner tiles are tinted wells instead of grey-bordered boxes, and motion uses one spring curve.
   Colours come only from theme tokens, so every theme keeps its palette; notepad (paper-pencil.css) loads
   after this file and keeps its hand-drawn look.

   Shape rule: cards 22px, inner wells 14px, inputs and logo tiles 12px, menu rows 10px, buttons/tabs/chips
   fully round. Chat bubbles (18px with one tucked corner) are the only exception.
   Elevation: cards use --studio-bezel, popovers --studio-pop, dialogs --studio-lift. */

:root {
	--studio-ease: cubic-bezier(0.32, 0.72, 0, 1);
	--studio-radius: 22px;
	--studio-radius-inner: 14px;
	--studio-ring: color-mix(in srgb, var(--ink) 8%, transparent);
	--studio-radius-row: 10px;
	--studio-well: color-mix(in srgb, var(--ink) 4%, var(--card));
	--studio-logo-tile: light-dark(#ffffff, #f6f6f2);
	--studio-edge: color-mix(in srgb, var(--ink) 13%, transparent);
	--studio-bezel: 0 0 0 1px var(--studio-edge), 0 24px 48px -28px color-mix(in srgb, var(--ink) 3%, transparent);
	--studio-pop: 0 0 0 1px var(--studio-ring), 0 18px 40px -16px color-mix(in srgb, var(--ink) 12%, transparent);
	--studio-lift: 0 0 0 1px var(--studio-ring), 0 40px 90px -30px color-mix(in srgb, var(--ink) 20%, transparent);
	--studio-soft: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent), 0 10px 24px -16px color-mix(in srgb, var(--ink) 3%, transparent);
}

/* ---------- Core components (every page) ---------- */

svg.lucide {
	stroke-width: 1.6;
}

.icon-btn {
	border-radius: 999px;
	border-color: transparent;
	transition: transform 420ms var(--studio-ease), background-color 220ms var(--studio-ease), border-color 220ms var(--studio-ease);
}

html .btn-main,
html .btn-sub,
html .remove,
html .toggle-read,
html .recommend,
html .now-reading-actions button,
html .book-actions button,
html .club-workspace-back {
	border-radius: 999px;
	padding-inline: 1.05rem;
	transition: transform 420ms var(--studio-ease), box-shadow 260ms var(--studio-ease), filter 260ms var(--studio-ease);
}

/* Default icon size inside buttons; :where() keeps specificity at zero so per-component sizes still win. */
:where(.btn-main, .btn-sub) svg {
	width: 16px;
	height: 16px;
	flex: none;
	vertical-align: -0.2em;
}

:where(button.btn-main, button.btn-sub):has(> svg) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
}

/* Links styled as buttons get the same box as real buttons. */
a.btn-main,
a.btn-sub {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	padding: 0.68rem 1.2rem;
	font-weight: 700;
	text-decoration: none;
}

button:active:not(:disabled) {
	transform: scale(0.98);
	transition-duration: 120ms;
}

input,
select,
textarea {
	border-radius: 12px;
}

/* Customizable select popups (Chromium 135+); other browsers keep the native list themed via forms.css. */
@supports (appearance: base-select) {
	html:not([data-theme="notepad"]) select,
	html:not([data-theme="notepad"]) ::picker(select) {
		appearance: base-select;
	}

	html:not([data-theme="notepad"]) select::picker-icon {
		color: var(--ink-soft);
		transition: rotate 200ms var(--studio-ease);
	}

	html:not([data-theme="notepad"]) select:open::picker-icon {
		rotate: 180deg;
	}

	html:not([data-theme="notepad"]) ::picker(select) {
		margin-block: 6px;
		padding: 6px;
		border: 0;
		border-radius: var(--studio-radius-inner);
		background: var(--card);
		color: var(--ink);
		box-shadow: var(--studio-pop);
	}

	html:not([data-theme="notepad"]) select option {
		gap: 0.5rem;
		padding: 0.5rem 0.75rem;
		border-radius: var(--studio-radius-row);
		background: transparent;
		color: var(--ink);
		transition: background-color 150ms ease;
	}

	html:not([data-theme="notepad"]) select option:hover,
	html:not([data-theme="notepad"]) select option:focus-visible {
		outline: none;
		background: var(--studio-well);
	}

	html:not([data-theme="notepad"]) select option:checked {
		background: color-mix(in srgb, var(--accent) 14%, var(--card));
		font-weight: 600;
	}

	html:not([data-theme="notepad"]) select option::checkmark {
		color: var(--accent);
	}
}

.pill {
	border-radius: 999px;
}

.app-dialog {
	border: 0;
	border-radius: var(--studio-radius);
	box-shadow: var(--studio-lift);
	/* Scrollbar sits inside the rounded plate: no track or arrows, thumb inset from the corners.
	   Chromium only honours ::-webkit-scrollbar when the standard properties are auto. */
	scrollbar-width: auto;
	scrollbar-color: auto;
}

.app-dialog::-webkit-scrollbar {
	width: 14px;
}

.app-dialog::-webkit-scrollbar-track {
	margin-block: var(--studio-radius);
	background: transparent;
}

.app-dialog::-webkit-scrollbar-thumb {
	border: 4px solid transparent;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ink) 22%, transparent) padding-box;
}

.app-dialog::-webkit-scrollbar-thumb:hover {
	background-color: color-mix(in srgb, var(--ink) 38%, transparent);
}

.app-dialog::-webkit-scrollbar-button {
	display: none;
}

@supports not selector(::-webkit-scrollbar) {
	.app-dialog {
		scrollbar-width: thin;
		scrollbar-color: color-mix(in srgb, var(--ink) 22%, transparent) transparent;
	}
}

.app-dialog .auth-card {
	border-radius: var(--studio-radius-inner);
}

/* Read-only detail fields (book details dialog) as wells. */
.book-details-list div {
	border: 0;
	border-radius: var(--studio-radius-inner);
	background: var(--studio-well);
	box-shadow: inset 0 0 0 1px var(--studio-ring);
}

.empty,
.chat-empty {
	border-radius: var(--studio-radius-inner);
}

/* ---------- Home header island ---------- */

.app-home .wrap {
	gap: 1.75rem;
	margin-top: 1.25rem;
	padding-bottom: 3rem;
}

.app-home .panel.hero {
	padding: 0.85rem 1.1rem 1rem;
	border: 0;
	border-radius: var(--studio-radius);
	box-shadow: var(--studio-bezel);
}

.app-home .account-strip {
	margin-bottom: 0.6rem;
	padding: 0.2rem 0.1rem;
}

.app-home .app-brand {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0;
}

/* Logo tiles (home, profile, legal pages): the mark is dark on transparent, so the tile stays light in every theme. */
.app-home .app-logo,
.app-profile .app-logo,
.app-brand-link .app-logo,
.app-legal .app-logo {
	flex: none;
	box-sizing: content-box;
	width: auto;
	height: 26px;
	padding: 0.28rem;
	border-radius: 12px;
	background: var(--studio-logo-tile);
	box-shadow: 0 0 0 1px var(--studio-ring), var(--studio-soft);
}

.app-home .app-logo {
	height: 30px;
	padding: 0.32rem;
}

/* Main nav, shelf status and section sub-tabs all share one pill track. */
.app-home .view-nav,
.app-home .status-tabs,
.app-home .community-tabs {
	padding: 0.25rem;
	border: 0;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px var(--studio-ring);
}

.app-home .view-nav button,
.app-home .status-tabs button,
.app-home .community-tabs button {
	border-radius: 999px;
	padding-inline: 0.85rem;
	transition: background-color 260ms var(--studio-ease), color 260ms var(--studio-ease);
}

.app-home .community-tabs button.active,
.app-home .status-tabs button.active {
	border-color: transparent;
	box-shadow: 0 0 0 1px var(--studio-ring), var(--studio-soft);
}

/* ---------- Library bento ---------- */

/* The library view is no longer a card holding cards: its sections sit on the page. */
.app-home #library-view.panel {
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
	overflow: visible;
}

.app-home #library-view .library-dashboard {
	grid-template-columns: minmax(0, 1fr);
	gap: 1.9rem;
	padding: 0.5rem 0.45rem;
	align-items: stretch;
}

/* Below desktop the column wrappers dissolve, so every card is a grid item in reading order. */
.app-home .bento-top,
.app-home .bento-main,
.app-home .bento-side {
	display: contents;
}

/* Section order comes from the reader's saved layout (app/library-layout.js sets `order` on each section). */
.app-home .shelf-section { margin-top: 0; }

.app-home #library-view .layout-hidden {
	display: none !important;
}

.app-home #library-view :is(.dashboard-section, .shelf-section) {
	min-width: 0;
	padding: 1.4rem;
	border: 0;
	border-radius: var(--studio-radius);
	background: var(--card);
	box-shadow: var(--studio-bezel);
}

.app-home #library-view .now-reading-section {
	background: color-mix(in srgb, var(--accent) 6%, var(--card));
}

.app-home #library-view .card-title {
	margin: 0 0 1rem;
	font-size: 1.3rem;
	line-height: 1.15;
}

.app-home #library-view .bento-goal .hint {
	margin-bottom: 1rem;
}

.app-home .bento-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.app-home .bento-card-head .card-title {
	margin: 0;
}

.app-home .bento-card-head select {
	width: auto;
	min-width: 6.5rem;
	padding-block: 0.4rem;
}

/* Inner tiles: tinted wells instead of grey-bordered boxes. */
.app-home #library-view .stat,
.app-home #library-view .now-reading-card,
.app-home #library-view .search-panel {
	border: 0;
	border-radius: var(--studio-radius-inner);
	background: color-mix(in srgb, var(--ink) 4%, var(--card));
	box-shadow: inset 0 0 0 1px var(--studio-ring);
}

.app-home #library-view .stat .v {
	font-size: 1.65rem;
	letter-spacing: -0.02em;
}

.app-home .stats-overview {
	margin: 0;
	padding: 0;
	border: 0;
}

.app-home .reading-history {
	margin: 0;
	padding: 0;
	border: 0;
}

.app-home #library-view .accent-bar {
	height: 8px;
}

.app-home #library-view .accent-bar > div {
	background: var(--accent);
	border-radius: inherit;
	transition-timing-function: var(--studio-ease);
	transition-duration: 900ms;
}

.app-home #library-view .manual-entry {
	border-color: var(--studio-ring);
}

/* Shelf Insights: same tinted wells and number scale as the stat tiles above. */
.app-home #library-view .shelf-insights {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--studio-ring);
}

.app-home #library-view .shelf-insights .toolbar {
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	margin-bottom: 0.35rem;
}

.app-home #library-view .shelf-insights h3 {
	margin: 0;
	font-size: 1rem;
}

.app-home #library-view .shelf-insights .btn-row {
	flex-wrap: nowrap;
	gap: 0.4rem;
}

.app-home #library-view .insights-scope {
	margin: 0 0 0.85rem;
}

.app-home #library-view .insights-list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

.app-home #library-view .insights-list > div {
	padding: 0.8rem 0.9rem;
	border: 0;
	border-radius: var(--studio-radius-inner);
	background: color-mix(in srgb, var(--ink) 4%, var(--card));
	box-shadow: inset 0 0 0 1px var(--studio-ring);
}

/* An odd tile out spans the full row instead of leaving a gap. */
.app-home #library-view .insights-list > div:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.app-home #library-view .insights-list span {
	font-size: 0.84rem;
	line-height: 1.3;
}

.app-home #library-view .insights-list strong {
	margin-top: 0.3rem;
	font-size: 1.4rem;
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

/* One accent per page: progress fills and the verify banner use --accent, not the secondary maroon. */
.app-home .book-progress > div {
	background: var(--accent);
}

.app-home .email-verify-banner {
	border-radius: var(--studio-radius-inner);
	border-left-color: var(--accent);
	background: color-mix(in srgb, var(--accent) 7%, var(--card));
}

/* Shelf: keep the wooden bookcase, but frame it like the other plates. */
.app-home .bookshelf-frame {
	border: 0;
	border-radius: var(--studio-radius-inner);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 12%, transparent), inset 0 10px 24px -14px rgba(0, 0, 0, 0.35);
}

.app-home #books .book {
	border-radius: var(--studio-radius-inner);
	box-shadow: var(--studio-soft);
}

/* ---------- Shelf cards ---------- */

.star-rating {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.82rem;
	line-height: 1;
}

.star-rating-stars {
	letter-spacing: 0.06em;
	font-size: 0.95rem;
	background: linear-gradient(90deg, var(--accent) var(--rating), color-mix(in srgb, var(--ink) 18%, transparent) var(--rating));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.star-rating-value {
	color: var(--ink-soft);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.app-home #books .book .meta {
	align-items: center;
	gap: 0.4rem 0.6rem;
}

.app-home #books .book .meta .pill {
	border: 0;
	box-shadow: inset 0 0 0 1px var(--studio-ring);
}

/* Book "more actions" menu: a popover of plain rows, not a stack of pill buttons. */
.app-home .books .book-settings-actions {
	min-width: 190px;
	padding: 0.35rem;
	gap: 0.1rem;
	border: 0;
	border-radius: var(--studio-radius-inner);
	box-shadow: var(--studio-pop);
}

html .books .book-settings-actions button {
	padding: 0.5rem 0.7rem;
	border: 0;
	border-radius: var(--studio-radius-row);
	background: transparent;
	box-shadow: none;
	color: var(--ink);
	font-weight: 600;
	white-space: nowrap;
}

html .books .book-settings-actions button:hover:not(:disabled) {
	transform: none;
	background: var(--studio-well);
}

html .books .book-settings-actions button.remove {
	color: var(--danger);
}

/* Search results (add a book, club picks, nominations). */
.search-item {
	border: 0;
	border-radius: var(--studio-radius-inner);
	background: var(--card);
	box-shadow: inset 0 0 0 1px var(--studio-ring);
}

html .search-item button {
	border: 0;
	border-radius: 999px;
	padding-inline: 0.9rem;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Collective challenges: list rows as wells, banner as a tinted well. */
.app-home .challenge-summary-card {
	border: 0;
	border-radius: var(--studio-radius-inner);
	background: var(--studio-well);
	box-shadow: inset 0 0 0 1px var(--studio-ring);
}

.app-home .challenge-summary-card.active,
.app-home .challenge-summary-card[aria-pressed="true"],
.app-home .challenge-summary-card[aria-expanded="true"] {
	background: color-mix(in srgb, var(--accent) 9%, var(--card));
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}

.app-home .challenge-setup-banner {
	border: 0;
	border-radius: var(--studio-radius-inner);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}

.app-home .challenge-setup-banner.challenge-active-banner {
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 30%, transparent);
}

/* Club settings member rows. */
.club-settings-members li {
	border: 0;
	border-radius: var(--studio-radius-inner);
	background: var(--studio-well);
	box-shadow: inset 0 0 0 1px var(--studio-ring);
}

/* The book picker's pointer uses the page accent, like every other indicator. */
.book-picker-pointer {
	border-top-color: var(--accent);
}

.book-picker-result {
	border: 0;
	border-radius: var(--studio-radius-inner);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ---------- Home: Wishlist, My Journal and Community views ---------- */

/* Each of these views is one plate; everything inside it is flat sections and tinted wells. */
.app-home .app-view.panel:not(#library-view) {
	border: 0;
	border-radius: var(--studio-radius);
	box-shadow: var(--studio-bezel);
}

.app-home .app-view.panel:not(#library-view) > .toolbar,
.app-home .app-view.panel:not(#library-view) .wishlist-page > .toolbar,
.app-home .app-view.panel:not(#library-view) .journal-page > .toolbar {
	align-items: center;
}

.app-home .app-view .card-title {
	font-size: 1.3rem;
	line-height: 1.15;
}

/* Sections that were boxes inside the plate become plain sections. */
.app-home .journal-panel,
.app-home .book-clubs-hub,
.app-home .friends-hub,
.app-home .club-discover-hub,
.app-home .friend-chat-room .chat-messages,
.app-home .friend-chat-room .chat-form,
.app-home .club-chat-room .chat-messages,
.app-home .club-chat-room .chat-form {
	border: 0;
	background: transparent;
	box-shadow: none;
}

.app-home .journal-panel,
.app-home .club-discover-hub {
	padding: 0;
}

/* Tinted wells: one treatment for every item card in these views. */
.app-home .wishlist-card,
.app-home .custom-challenge,
.app-home .challenge-book,
.app-home .challenge-search-item,
.app-home .series-item,
.app-home .series-tracker-stats > div,
.app-home .book-club-card,
.app-home .club-workspace-section,
.app-home .chapter-directory,
.app-home .chapter-safety-note,
.app-home .club-discover-card,
.app-home .friend-item,
.app-home .friend-chat-room,
.app-home .club-chat-room {
	border: 0;
	border-radius: var(--studio-radius-inner);
	background: var(--studio-well);
	box-shadow: inset 0 0 0 1px var(--studio-ring);
}

.app-home .book-club-card.active,
.app-home .friend-item.active {
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
}

.app-home .club-workspace-hero {
	border: 0;
	border-radius: var(--studio-radius-inner);
	background: color-mix(in srgb, var(--accent) 7%, var(--card));
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

.app-home .tbr-month-grid button,
.app-home .tbr-month-grid > * {
	border-radius: var(--studio-radius-inner);
}

.app-home .series-tracker-stats strong {
	font-variant-numeric: tabular-nums;
}

/* The tab already names the section, so the small kicker above each Community heading is dropped. */
.app-home .community-section-heading .section-kicker {
	display: none;
}

/* Chat rows, the conversation list and the composer are styled in chat.css. */

.app-home .club-room-list {
	border: 0;
	border-radius: var(--studio-radius-inner);
	background: var(--studio-well);
	box-shadow: inset 0 0 0 1px var(--studio-ring);
}

.app-home .friend-item .friend-select {
	border: 0;
	border-radius: var(--studio-radius-row);
	background: transparent;
}

.app-home .club-workspace-back {
	border: 0;
	box-shadow: inset 0 0 0 1px var(--studio-ring);
}

.app-home .friend-chat-room .chat-form textarea {
	min-height: 52px;
}

/* ---------- Reader profile page ---------- */

.app-profile .reader-profile-brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

.app-brand-link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--ink);
	font-weight: 700;
	text-decoration: none;
}

.app-profile .reader-profile-page {
	padding-bottom: 3rem;
}

/* Plates: hero and side cards. */
.app-profile .reader-profile-hero,
.app-profile .rp-card {
	border: 0;
	border-radius: var(--studio-radius);
	background: var(--card);
	box-shadow: var(--studio-bezel);
}

.app-profile .reader-profile-hero {
	padding: 1.5rem;
}

.app-profile .rp-card {
	padding: 1.25rem;
}

.app-profile .rp-layout {
	gap: 1.9rem;
}

.app-profile .rp-main,
.app-profile .rp-side {
	gap: 1.9rem;
}

/* Wells: stats tiles, the reading card, reviews and diary entries. */
.app-profile .reader-profile-stats > div,
.app-profile .reader-profile-book,
.app-profile .reader-profile-reviews article {
	border: 0;
	border-radius: var(--studio-radius-inner);
	background: var(--studio-well);
	box-shadow: inset 0 0 0 1px var(--studio-ring);
}

.app-profile .reader-profile-stats strong {
	font-size: 1.55rem;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.app-profile .rp-diary {
	gap: 0.6rem;
	border: 0;
	background: transparent;
}

.app-profile .rp-diary li {
	border-radius: var(--studio-radius-inner);
	background: var(--studio-well);
	box-shadow: inset 0 0 0 1px var(--studio-ring);
}

.app-profile .rp-diary li + li {
	border-top: 0;
}

.app-profile .rp-shelf-grid > * {
	min-width: 0;
}

.app-profile .rp-shelf-grid .star-rating {
	flex-wrap: wrap;
	gap: 0.1rem 0.3rem;
}

.app-profile .rp-shelf-grid .star-rating-stars {
	font-size: 0.78rem;
	letter-spacing: 0;
}

.app-profile .rp-shelf-tabs button {
	border: 0;
	box-shadow: inset 0 0 0 1px var(--studio-ring);
}

.app-profile .rp-cover-placeholder {
	border: 0;
	border-radius: var(--studio-radius-row);
	box-shadow: inset 0 0 0 1px var(--studio-ring);
}

.app-profile .reader-profile-preview-banner {
	border: 0;
	border-radius: var(--studio-radius-inner);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}

.app-profile .rp-bar-track,
.app-profile .rp-goal-bar,
.app-profile .reader-profile-progress {
	border-radius: 999px;
}

@media (max-width: 520px) {
	.app-brand-link span {
		display: none;
	}
}

/* ---------- Standalone pages: reset password and 404 ---------- */

.auth-wrap.standalone-page {
	position: relative;
	width: min(460px, calc(100% - 2rem));
	padding: 4.5rem 0 2.5rem;
}

.app-standalone .standalone-card,
.app-standalone .not-found-card {
	border: 0;
	border-radius: var(--studio-radius);
	box-shadow: var(--studio-bezel);
}

.app-standalone .standalone-card {
	padding: 2rem 1.75rem 1.75rem;
}

.standalone-logo-link {
	display: inline-block;
	border-radius: 18px;
}

.app-standalone .landing-logo {
	height: 52px;
	margin-bottom: 1.25rem;
}

.app-standalone .standalone-card h1 {
	margin: 0 0 0.35rem;
	font-size: 1.7rem;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.standalone-lede {
	margin: 0 0 1.5rem;
	color: var(--ink-soft);
}

.app-standalone .standalone-card .auth-card {
	padding: 0;
	border: 0;
	background: none;
	gap: 0.85rem;
}

.app-standalone .standalone-card .hint {
	margin: 0;
}

.app-standalone .not-found-logo {
	display: block;
	margin: 0 auto 1.25rem;
}

/* ---------- Legal pages: privacy and terms ---------- */

.app-legal .privacy-wrap {
	width: min(820px, calc(100% - 2rem));
	padding-bottom: 3rem;
}

.app-legal .privacy-policy {
	padding: 1.75rem clamp(1.25rem, 4vw, 3rem) 2.5rem;
	border: 0;
	border-radius: var(--studio-radius);
	box-shadow: var(--studio-bezel);
}

.app-legal .privacy-header {
	align-items: center;
	margin-bottom: 2.25rem;
}

.app-legal .privacy-policy > p,
.app-legal .privacy-policy section {
	max-width: 68ch;
}

.app-legal .privacy-policy section {
	margin-top: 1.9rem;
}

.app-legal .privacy-policy h2 {
	margin-bottom: 0.55rem;
	font-size: 1.15rem;
}

.app-legal .privacy-policy section p + p {
	margin-top: 0.75rem;
}

.app-legal .reader-profile-brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* ---------- Breakpoints ---------- */

@media (min-width: 700px) and (max-width: 979px) {
	.app-home #library-view .library-dashboard {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Every section spans the row except the two stat cards, which pair up unless one is hidden. */
	.app-home #library-view :is(.dashboard-section, .shelf-section) {
		grid-column: 1 / -1;
	}

	.app-home #library-view .bento-side:not(.layout-single) > * {
		grid-column: auto;
	}
}

@media (min-width: 980px) {
	/* Desktop: two independent columns above the shelf, so cards of different heights never leave holes.
	   .bento-top wraps just the two columns, which also keeps the sticky stats column out of the shelf. */
	.app-home #library-view .library-dashboard {
		grid-template-columns: minmax(0, 1fr);
	}

	.app-home .bento-top {
		display: grid;
		grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr);
		gap: 1.9rem;
		align-items: start;
		min-width: 0;
	}

	.app-home .bento-main,
	.app-home .bento-side {
		display: flex;
		flex-direction: column;
		gap: 1.9rem;
		min-width: 0;
	}

	.app-home .bento-top.layout-one-column {
		grid-template-columns: minmax(0, 1fr);
	}

	.app-home .bento-main > *,
	.app-home .bento-side > * {
		align-self: stretch;
	}

	/* The stats column follows the reader down while the taller left column scrolls. */
	.app-home .bento-side {
		position: sticky;
		top: 1.25rem;
	}
}

@media (max-width: 620px) {
	/* The main nav wraps to a 2x2 grid here; a full pill track would bulge, so use the card radius. */
	.app-home .view-nav {
		border-radius: 18px;
	}

	.app-home .wrap {
		gap: 1.25rem;
	}

	.app-home #library-view .library-dashboard {
		gap: 1.4rem;
		padding-inline: 0.45rem;
	}

	.app-home #library-view :is(.dashboard-section, .shelf-section) {
		padding: 1.1rem;
	}

	.app-home .app-logo {
		height: 24px;
		padding: 0.25rem;
	}
}

/* ---------- Entry motion ---------- */
/* Sections ease up once as they first scroll into view (app/reveal.js adds the classes). */

@media (prefers-reduced-motion: no-preference) {
	.app-home.js-reveal [data-reveal] {
		opacity: 0;
		transform: translateY(18px);
	}

	.app-home.js-reveal [data-reveal].is-revealed {
		opacity: 1;
		transform: none;
		transition: opacity 700ms var(--studio-ease), transform 900ms var(--studio-ease);
	}
}

@media (prefers-reduced-motion: reduce) {
	button:active:not(:disabled) {
		transform: none;
	}
}

/* ---------- Touch targets ---------- */
/* On touch or narrow screens every control gets a >=44x44px hit area. Tabs grow for real;
   icon buttons, text links, summaries and compact buttons keep their look and get an invisible,
   centred ::after hit area instead, so layout doesn't shift. */
@media (pointer: coarse), (max-width: 640px) {
	.now-reading-actions button,
	.view-nav button,
	.status-tabs [role="tab"],
	.community-tabs [role="tab"],
	.settings-tab,
	.rp-shelf-tabs button,
	select,
	input[type="search"] {
		min-height: 44px;
	}

	:where(.icon-btn, .text-action, .legal-links a, .manual-entry > summary, .book-actions button, .book-settings-menu summary, #open-book-picker-dialog, .app-brand-link, .date-picker-btn) {
		position: relative;
	}

	.icon-btn::after,
	.text-action::after,
	.legal-links a::after,
	.manual-entry > summary::after,
	.book-actions button::after,
	.book-settings-menu summary::after,
	#open-book-picker-dialog::after,
	.app-brand-link::after,
	.date-picker-btn::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: max(100%, 44px);
		height: max(100%, 44px);
		transform: translate(-50%, -50%);
	}

	/* Checkboxes stay 18-22px; their label row becomes the 44px target. */
	.checkbox-row {
		min-height: 44px;
	}

	.checkbox-row input {
		width: 22px;
		height: 22px;
	}

	.checkbox-row label {
		display: flex;
		align-items: center;
		align-self: stretch;
		min-height: 44px;
		cursor: pointer;
	}
}

/* ---------- Rating dialog ---------- */

/* Grid/flex children default to min-width: auto, letting inputs push past narrow dialogs. */
.app-dialog .auth-card,
.app-dialog .field,
.app-dialog .field > * {
	min-width: 0;
}

.app-dialog .field > input:not([type="checkbox"], [type="radio"]),
.app-dialog .field > textarea,
.app-dialog .field > select {
	width: 100%;
}

/* Quarter-star rating slider (app/rating-input.js). */
.rating-input {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: fit-content;
	min-height: 48px;
	padding: 0 0.4rem;
	border-radius: var(--studio-radius-inner);
	cursor: pointer;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.rating-input:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.rating-input-stars {
	font-size: 2.1rem;
	line-height: 1;
	letter-spacing: 0.04em;
	background: linear-gradient(90deg, var(--accent) var(--rating, 0%), color-mix(in srgb, var(--ink) 22%, transparent) var(--rating, 0%));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.rating-input-value {
	min-width: 4ch;
	color: var(--ink);
	font-size: 1rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.rating-input.is-empty .rating-input-value {
	color: var(--ink-soft);
	font-weight: 500;
}

/* ---------- Settings dialog tabs ---------- */
/* On phones the four tabs sit in a 2x2 grid instead of a sideways-scrolling strip. */
@media (max-width: 520px) {
	.settings-tabs {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 0.25rem;
		overflow: visible;
	}

	.settings-tab {
		padding-inline: 0.5rem;
		text-align: center;
		white-space: normal;
	}
}

/* ---------- Safe areas (viewport-fit=cover) ---------- */
/* Keep content clear of notches, rounded corners and the home indicator. env() is 0 elsewhere. */
:root {
	--safe-top: env(safe-area-inset-top, 0px);
	--safe-right: env(safe-area-inset-right, 0px);
	--safe-bottom: env(safe-area-inset-bottom, 0px);
	--safe-left: env(safe-area-inset-left, 0px);
}

body {
	padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}

.app-notice {
	bottom: calc(1.25rem + var(--safe-bottom));
}

/* Dialogs centre inside the safe area and never run under the system UI. */
.app-dialog {
	inset: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
	max-width: calc(100% - 6px - 2em - var(--safe-left) - var(--safe-right));
	max-height: calc(100dvh - 2rem - var(--safe-top) - var(--safe-bottom));
}

@media (max-width: 620px) {
	.settings-dialog {
		height: calc(100dvh - 1rem - var(--safe-top) - var(--safe-bottom));
	}
}

/* ---------- Blank cover placeholder ---------- */
/* Decorative "Book" label (aria-hidden): readable size, theme ink so it holds >=3:1 on both stripe tones. */
.placeholder {
	font-size: max(0.72rem, 11px);
	font-weight: 700;
	color: var(--ink-soft);
}

/* styles/chat.css */
/* ---------- Messaging: conversation list, message rows, composer ----------
   Loaded after the theme files so these layouts win over the older bubble styles.
   Colours come from theme tokens (--accent, --ink, --card), so every theme follows along. */

/* ---------- Conversation list ---------- */

.app-home .conversation-list {
	gap: 2px;
}

.app-home .friend-item.conversation {
	position: relative;
	gap: 0;
	padding: 0;
	border: 0;
	border-radius: var(--studio-radius-row, 10px);
	background: transparent;
	box-shadow: none;
	transition: background-color 0.15s ease;
}

.app-home .friend-item.conversation:hover {
	background: color-mix(in srgb, var(--ink) 5%, transparent);
}

/* A tint rather than solid accent: every theme sets its own text colour on accent, so plain ink stays readable. */
.app-home .friend-item.conversation.active {
	background: color-mix(in srgb, var(--accent) 16%, transparent);
	box-shadow: none;
}

.app-home .friend-item.conversation .friend-select {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 66px;
	padding: 0.55rem 0.7rem;
	border-radius: inherit;
	font-size: inherit;
}

.app-home .friend-item.conversation .friend-select:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

.conversation-avatar {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}

.conversation-main {
	display: grid;
	flex: 1;
	gap: 0.15rem;
	min-width: 0;
}

.conversation-top,
.conversation-bottom {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}

.app-home .friend-item.conversation .name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--ink);
}

.conversation-time {
	flex: none;
	color: var(--ink-soft);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
}

.app-home .friend-item.conversation .meta {
	/* Block, not the generic .meta flex row, so "You:" stays inline and the preview ellipsizes. */
	display: block;
	flex: 1;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.86rem;
	color: var(--ink-soft);
}

.app-home .friend-item.conversation.unread .meta {
	color: var(--ink);
}

.conversation-you {
	color: var(--accent);
	font-weight: 600;
}

.conversation-unread {
	display: inline-grid;
	flex: none;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--accent);
	color: var(--card);
	font-size: 0.72rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.app-home .friend-item.conversation.active .name {
	color: var(--accent);
}

/* Profile / remove sit over the row's right edge on hover (always shown on touch screens). */
.conversation-actions {
	position: absolute;
	top: 50%;
	right: 0.55rem;
	display: flex;
	gap: 0.3rem;
	padding: 0.2rem;
	border-radius: 999px;
	background: var(--card);
	box-shadow: 0 2px 10px color-mix(in srgb, var(--ink) 14%, transparent);
	translate: 0 -50%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.conversation:hover .conversation-actions,
.conversation:focus-within .conversation-actions {
	opacity: 1;
	pointer-events: auto;
}

.conversation-actions .icon-btn {
	width: 32px;
	height: 32px;
}

@media (hover: none) {
	.conversation-actions {
		position: static;
		margin-right: 0.45rem;
		padding: 0;
		background: transparent;
		box-shadow: none;
		translate: none;
		opacity: 1;
		pointer-events: auto;
	}
}

/* ---------- Chat header ---------- */

.friend-chat-title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
	font-size: 1rem;
}

.friend-chat-title > span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chat-header-avatar {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
}

/* ---------- Message rows ---------- */

.app-home .chat-messages {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0.5rem 0;
}

/* Short threads sit at the bottom, next to the composer. */
.app-home .chat-messages > :first-child {
	margin-top: auto;
}

.app-home .chat-messages .chat-load-older {
	align-self: center;
	margin-bottom: 0.4rem;
}

.chat-day-separator {
	display: flex;
	justify-content: center;
	margin: 0.8rem 0 0.35rem;
}

.chat-day-separator span {
	padding: 0.15rem 0.65rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ink) 6%, transparent);
	color: var(--ink-soft);
	font-size: 0.75rem;
	font-weight: 600;
}

/* Their messages: avatar + bubble on the left. Mine: bubble on the right, no avatar. */
.app-home .chat-messages .chat-bubble {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	align-items: end;
	column-gap: 0.55rem;
	max-width: none;
	margin: 0;
	padding: 0.45rem 0.9rem 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.app-home .chat-messages .chat-bubble.grouped {
	padding-top: 0.15rem;
}

.app-home .chat-messages .chat-bubble.me {
	grid-template-columns: minmax(0, 1fr);
}

.chat-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
}

/* Follow-ups from the other person show their time in the avatar gutter on hover. */
.chat-gutter-time {
	align-self: center;
	color: var(--ink-soft);
	font-size: 0.66rem;
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.12s ease;
}

.chat-bubble:hover .chat-gutter-time,
.chat-bubble:focus-within .chat-gutter-time {
	opacity: 1;
}

.app-home .chat-messages .chat-body {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-self: start;
	min-width: 0;
	max-width: min(75%, 560px);
	padding: 0.45rem 0.75rem 0.4rem;
	border-radius: 18px 18px 18px 6px;
	background: color-mix(in srgb, var(--ink) 6%, var(--card));
	box-shadow: inset 0 0 0 1px var(--studio-ring, var(--line));
}

.app-home .chat-messages .chat-bubble.me .chat-body {
	justify-self: end;
	border-radius: 18px 18px 6px 18px;
	background: color-mix(in srgb, var(--accent) 15%, var(--card));
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Consecutive messages tuck their corners together on the sender's side. */
.app-home .chat-messages .chat-bubble.them.grouped .chat-body {
	border-top-left-radius: 6px;
}

.app-home .chat-messages .chat-bubble.me.grouped .chat-body {
	border-top-right-radius: 6px;
}

.app-home .chat-messages .chat-bubble.editing .chat-body {
	width: 100%;
	max-width: none;
}

.chat-meta {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin-bottom: 0.1rem;
}

/* My bubbles skip "You" and keep the time in the bottom corner. */
.app-home .chat-bubble.me .chat-meta {
	order: 10;
	align-self: flex-end;
	margin: 0.1rem 0 0;
}

.app-home .chat-bubble.me .chat-meta .who {
	display: none;
}

.app-home .chat-bubble .chat-meta .who {
	margin: 0;
	color: var(--accent);
	font-size: 0.86rem;
	font-weight: 700;
}

.app-home .chat-bubble .chat-meta .when {
	display: inline;
	margin: 0;
	color: var(--ink-soft);
	font-size: 0.72rem;
	font-variant-numeric: tabular-nums;
}

.app-home .chat-bubble .chat-text {
	color: var(--ink);
	font-size: 0.95rem;
	line-height: 1.45;
}

.chat-note {
	margin-left: 0.4rem;
	color: var(--ink-soft);
	font-size: 0.72rem;
	white-space: nowrap;
}

.chat-seen svg {
	width: 13px;
	height: 13px;
	margin-right: 0.15rem;
	color: var(--accent);
	vertical-align: -2px;
}

.app-home .chat-bubble .chat-attachment-image,
.app-home .chat-bubble .chat-book-card,
.app-home .chat-bubble .chat-reply-quote {
	margin-top: 0.2rem;
}

.app-home .chat-bubble .chat-book-card,
.app-home .chat-bubble .chat-reply-quote {
	max-width: 420px;
}

.app-home .chat-bubble.me .chat-reply-quote {
	background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Reply / react / edit / delete / report: a small toolbar riding the bubble's top edge on hover. */
.chat-actions {
	position: absolute;
	top: -14px;
	left: 8px;
	z-index: 1;
	display: flex;
	gap: 0.1rem;
	padding: 0.15rem;
	border-radius: 8px;
	background: var(--card);
	box-shadow: 0 2px 10px color-mix(in srgb, var(--ink) 16%, transparent);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.12s ease;
}

/* Anchored on the side facing the middle of the chat, so the toolbar never pokes past the edge. */
.chat-bubble.me .chat-actions {
	right: 8px;
	left: auto;
}

.chat-bubble:hover .chat-actions,
.chat-bubble:focus-within .chat-actions {
	opacity: 1;
	pointer-events: auto;
}

.app-home .chat-bubble .chat-actions .icon-btn {
	width: 28px;
	height: 28px;
	min-width: 28px;
	min-height: 28px;
	margin: 0;
	border: 0;
	background: transparent;
	opacity: 0.75;
}

.app-home .chat-bubble .chat-actions .icon-btn:hover {
	opacity: 1;
	background: color-mix(in srgb, var(--ink) 7%, transparent);
}

.app-home .chat-bubble .chat-actions .icon-btn svg {
	width: 14px;
	height: 14px;
}

.chat-bubble .chat-reactions:empty {
	display: none;
}

.app-home .chat-actions .chat-reaction-add {
	width: 28px;
	height: 28px;
	min-width: 28px;
	min-height: 28px;
	border-radius: 6px;
	color: var(--ink-soft);
}

.app-home .chat-actions .chat-reaction-add svg {
	width: 15px;
	height: 15px;
}

/* The emoji row opens below the toolbar so the first message never clips it. */
.chat-actions .chat-reaction-options {
	top: 100%;
	right: auto;
	bottom: auto;
	left: 0;
	z-index: 2;
	margin: 0.3rem 0 0;
}

.chat-bubble.me .chat-actions .chat-reaction-options {
	right: 0;
	left: auto;
}

.chat-bubble:has(.chat-reaction-picker[open]) .chat-actions {
	opacity: 1;
	pointer-events: auto;
}

@media (hover: none) {
	.chat-actions {
		position: static;
		align-self: flex-end;
		margin-top: 0.2rem;
		padding: 0;
		background: transparent;
		box-shadow: none;
		opacity: 0.7;
		pointer-events: auto;
	}

	.chat-gutter-time {
		opacity: 0.8;
	}
}

/* ---------- Typing indicator ---------- */

.app-home .chat-typing-indicator:not([hidden]) {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	padding: 0.2rem 0.9rem 0.3rem calc(0.9rem + 12px);
	font-style: normal;
}

.app-home .chat-typing-indicator::before {
	content: "";
	flex: none;
	width: 5px;
	height: 5px;
	margin-right: 14px;
	border-radius: 50%;
	animation: chat-typing-dots 1.2s infinite;
}

@keyframes chat-typing-dots {
	0%, 100% {
		background: var(--accent);
		box-shadow: 8px 0 color-mix(in srgb, var(--accent) 35%, transparent), 16px 0 color-mix(in srgb, var(--accent) 35%, transparent);
	}
	33% {
		background: color-mix(in srgb, var(--accent) 35%, transparent);
		box-shadow: 8px 0 var(--accent), 16px 0 color-mix(in srgb, var(--accent) 35%, transparent);
	}
	66% {
		background: color-mix(in srgb, var(--accent) 35%, transparent);
		box-shadow: 8px 0 color-mix(in srgb, var(--accent) 35%, transparent), 16px 0 var(--accent);
	}
}

/* ---------- Composer ---------- */

/* Shared by the friend chat and club rooms. */
.app-home form.chat-compose-form {
	border: 0;
	background: transparent;
	box-shadow: none;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.4rem;
	margin: 0.5rem 0 0;
	padding: 0;
}

.chat-compose-bar {
	display: flex;
	min-width: 0;
	align-items: flex-end;
	gap: 0.45rem;
}

.chat-compose-pill {
	display: flex;
	flex: 1;
	align-items: flex-end;
	gap: 0.1rem;
	min-width: 0;
	padding: 0.2rem 0.3rem 0.2rem 1rem;
	border-radius: 24px;
	background: color-mix(in srgb, var(--ink) 5%, var(--card));
	box-shadow: inset 0 0 0 1px var(--studio-ring, var(--line));
	transition: box-shadow 0.15s ease;
}

.chat-compose-pill:focus-within {
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent);
}

.app-home .chat-compose-form .chat-compose-pill textarea {
	flex: 1;
	width: 0;
	min-width: 0;
	min-height: 40px;
	max-height: 160px;
	padding: 0.55rem 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	outline: none;
	color: var(--ink);
	font-size: 0.95rem;
	line-height: 1.4;
	resize: none;
}

.app-home .chat-compose-form .chat-compose-pill textarea::placeholder {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.app-home .chat-form .chat-compose-icon {
	flex: none;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ink-soft);
}

.app-home .chat-form .chat-compose-icon:hover {
	background: color-mix(in srgb, var(--ink) 6%, transparent);
	color: var(--accent);
}

.app-home .chat-form .chat-compose-icon svg {
	width: 20px;
	height: 20px;
}

.chat-compose-bar > .chat-compose-icon {
	margin-bottom: 2px;
}

.app-home .chat-compose-bar .chat-send-btn {
	width: 44px;
	height: 44px;
	margin: 0;
}

/* studio.css pads every .btn-main (html .btn-main); the round send button needs none or the icon overflows sideways. */
html .btn-main.chat-send-btn {
	padding: 0;
}

/* Lucide's paper plane is weighted toward the top-right; nudge it to look centred. */
html .btn-main.chat-send-btn svg {
	transform: translate(-1px, 1px);
}

.chat-attachment-name:empty {
	display: none;
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.app-home .friend-item.conversation,
	.conversation-actions,
	.chat-gutter-time,
	.chat-actions,
	.chat-compose-pill {
		transition: none;
	}

	.app-home .chat-typing-indicator::before {
		animation: none;
		background: var(--accent);
		box-shadow: 8px 0 var(--accent), 16px 0 var(--accent);
	}
}

@media (max-width: 640px) {
	.app-home .chat-messages .chat-bubble {
		grid-template-columns: 30px minmax(0, 1fr);
		column-gap: 0.45rem;
		padding-inline: 0.5rem;
	}

	.app-home .chat-messages .chat-body {
		max-width: 85%;
	}

	.chat-avatar {
		width: 30px;
		height: 30px;
	}

	.conversation-avatar {
		width: 42px;
		height: 42px;
	}
}

/* ---------- Friends heading ---------- */

/* "Add Friend" lines up with the Friends title, and its icon sits on the text's centre line. */
.app-home .friends-heading {
	align-items: center;
}

.app-home #open-friend-dialog {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 40px;
	padding: 0.45rem 1rem;
	font-size: 0.9rem;
	line-height: 1;
}

.app-home #open-friend-dialog svg {
	flex: none;
	width: 18px;
	height: 18px;
}

/* ---------- Book club rooms ---------- */

/* Club rooms use the same window as the friend chat: a soft well, header, transparent thread, pill composer. */
.app-home .club-room-window {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0.9rem;
	border-radius: var(--studio-radius-inner, 14px);
	background: var(--studio-well, var(--card));
	box-shadow: inset 0 0 0 1px var(--studio-ring, var(--line));
}

.app-home .club-room-window-top {
	padding-bottom: 0.6rem;
}

.app-home .club-room-window-top h3 {
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
}

.app-home .club-room-window .chat-messages {
	min-height: 320px;
	max-height: min(56vh, 600px);
	margin-top: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.app-home [data-club-compose-extras] {
	display: grid;
	gap: 0.4rem;
}

.app-home [data-club-compose-extras]:empty {
	display: none;
}

/* Past-book history is read-only, so there's nothing to reply from. */
.club-book-history-messages .chat-reply-btn {
	display: none;
}

/* ---------- Online status ---------- */

.presence-avatar {
	position: relative;
	display: inline-flex;
	flex: none;
}

/* The ring matches the surface behind the avatar so the dot reads as a cut-out. */
.presence-dot {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #2fb35d;
	box-shadow: 0 0 0 2px var(--studio-well, var(--card));
}

.chat-header-avatar + .presence-dot {
	width: 10px;
	height: 10px;
}

.chat-header-text {
	display: grid;
	min-width: 0;
	line-height: 1.2;
}

.chat-header-text > span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chat-header-status {
	color: var(--ink-soft);
	font-size: 0.75rem;
	font-weight: 500;
}

/* ---------- "New messages" divider ---------- */

.chat-new-marker {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0.6rem 0.9rem 0.2rem;
	color: var(--accent);
	font-size: 0.75rem;
	font-weight: 700;
}

.chat-new-marker::before,
.chat-new-marker::after {
	content: "";
	flex: 1;
	height: 1px;
	background: color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ---------- Getting started checklist (Library) ---------- */

.onboarding-card {
	grid-column: 1 / -1;
	display: grid;
	gap: 0.75rem;
}

.onboarding-card[hidden] {
	display: none;
}

.onboarding-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
}

.onboarding-head .hint {
	margin: 0.15rem 0 0;
}

.onboarding-progress {
	height: 6px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ink) 8%, transparent);
	overflow: hidden;
}

.onboarding-progress span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--accent);
	transition: width 0.3s ease;
}

.onboarding-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.onboarding-steps li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 0.3rem 0.6rem;
	padding: 0.75rem;
	border-radius: var(--studio-radius-inner, 12px);
	background: var(--studio-well, color-mix(in srgb, var(--ink) 4%, var(--card)));
	box-shadow: inset 0 0 0 1px var(--studio-ring, var(--line));
}

.onboarding-steps li .btn-sub {
	grid-column: 2;
	justify-self: start;
	min-height: 36px;
	margin-top: 0.3rem;
	padding: 0.35rem 0.85rem;
	font-size: 0.85rem;
}

.onboarding-check svg {
	width: 20px;
	height: 20px;
	color: var(--ink-soft);
}

.onboarding-steps li.is-done .onboarding-check svg {
	color: var(--accent);
}

.onboarding-text {
	display: grid;
	gap: 0.15rem;
	min-width: 0;
}

.onboarding-text small {
	color: var(--ink-soft);
	font-size: 0.82rem;
	line-height: 1.35;
}

.onboarding-steps li.is-done .onboarding-text strong {
	color: var(--ink-soft);
	text-decoration: line-through;
}

@media (prefers-reduced-motion: reduce) {
	.onboarding-progress span { transition: none; }
}

/* ---------- Translations ---------- */

/* app/i18n.js hides a non-English page until it's translated (at most 1.5s), so English never flashes. */
html.i18n-pending body {
	visibility: hidden;
}

.legal-links .language-select {
	width: auto;
	min-height: 32px;
	padding: 0.15rem 1.8rem 0.15rem 0.5rem;
	border-radius: 8px;
	font-size: 0.85rem;
}

/* styles/reader-tags.css */
/* Reader tag picker (app/reader-tags.js): pace, mood and plot/character chips, used in the finish
   dialog and on the book page. Each chip is a real radio/checkbox with its label styled as a pill. */

.reader-tags-details {
	border-radius: var(--studio-radius-inner, 12px);
	background: var(--studio-well, transparent);
	box-shadow: inset 0 0 0 1px var(--studio-ring, var(--line));
}

.reader-tags-details summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2rem 0.5rem;
	min-height: 44px;
	padding: 0.7rem 0.9rem;
	cursor: pointer;
	font-weight: 700;
}

.reader-tags-details summary span {
	color: var(--ink-soft);
	font-size: 0.85rem;
	font-weight: 400;
}

.reader-tags-details > div {
	padding: 0 0.9rem 0.9rem;
}

.reader-tag-picker {
	display: grid;
	gap: 0.85rem;
}

.reader-tag-group {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.reader-tag-group legend {
	margin-bottom: 0.4rem;
	padding: 0;
	font-size: 0.88rem;
	font-weight: 700;
}

.reader-tag-group legend small {
	color: var(--ink-soft);
	font-weight: 400;
}

.reader-tag-options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

/* The input stays focusable for keyboards and screen readers; only its label shows. */
.reader-tag-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.reader-tag-chip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 0.9rem;
	border-radius: 999px;
	background: var(--dialog-bg, var(--card));
	box-shadow: inset 0 0 0 1px var(--line);
	color: var(--ink);
	font-size: 0.88rem;
	cursor: pointer;
	user-select: none;
	transition: background-color 150ms ease, box-shadow 150ms ease;
}

.reader-tag-input:checked + .reader-tag-chip {
	background: color-mix(in srgb, var(--accent) 16%, var(--dialog-bg, var(--card)));
	box-shadow: inset 0 0 0 2px var(--accent);
	font-weight: 700;
}

.reader-tag-input:focus-visible + .reader-tag-chip {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.reader-tag-input:disabled + .reader-tag-chip {
	opacity: 0.45;
	cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
	.reader-tag-chip {
		transition: none;
	}
}

/* styles/reading-features.css */
/* Reading streak, reading-days heatmap, DNF reasons, Year in Review and the barcode
   scanner. Colours come from theme tokens only, so every theme (and dark mode) carries over. */

/* Streak line on Now Reading */
.reading-streak {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.65rem;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--accent) 12%, var(--card));
	color: var(--ink);
	font-size: 0.88rem;
	font-weight: 600;
}

.reading-streak svg {
	width: 16px;
	height: 16px;
	color: var(--accent);
}

/* Reading days heatmap */
.reading-log {
	--reading-log-cell: 11px;
	--reading-log-gap: 3px;
	margin-top: 1rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--line);
}

.reading-log-title {
	margin: 0;
	font-size: 1rem;
}

.reading-log .hint {
	margin: 0.2rem 0 0.6rem;
}

.reading-log-scroll {
	overflow-x: auto;
	padding-bottom: 0.35rem;
	scrollbar-width: thin;
}

.reading-log-scroll:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Cells stretch to fill the card on wide screens, and stop shrinking at 10px (then the year scrolls). */
.reading-log-months,
.reading-log-grid {
	display: grid;
	grid-template-columns: repeat(var(--reading-log-columns), minmax(10px, 1fr));
	gap: var(--reading-log-gap);
	min-width: calc(var(--reading-log-columns) * (10px + var(--reading-log-gap)));
}

.reading-log-months {
	margin-bottom: 4px;
	color: var(--ink-soft);
	font-size: 0.7rem;
	line-height: 1;
}

.reading-log-month {
	white-space: nowrap;
}

.reading-log-grid {
	grid-template-rows: repeat(7, auto);
	grid-auto-flow: column;
}

.reading-log-cell {
	display: block;
	aspect-ratio: 1;
	border-radius: 2px;
	background: color-mix(in srgb, var(--line) 55%, transparent);
}

.reading-log-cell[data-level="1"] { background: color-mix(in srgb, var(--accent) 28%, var(--card)); }
.reading-log-cell[data-level="2"] { background: color-mix(in srgb, var(--accent) 50%, var(--card)); }
.reading-log-cell[data-level="3"] { background: color-mix(in srgb, var(--accent) 74%, var(--card)); }
.reading-log-cell[data-level="4"] { background: var(--accent); }

/* Estimated days (from start and finish dates) are striped so they read as approximate. */
.reading-log-cell.is-estimated {
	background-image: repeating-linear-gradient(135deg, transparent 0 2px, color-mix(in srgb, var(--card) 55%, transparent) 2px 3.5px);
}

.reading-log-estimate-label {
	margin: 0 0.75rem 0 0.25rem;
}

.reading-log-note {
	margin: 0.35rem 0 0;
	font-size: 0.78rem;
}

.reading-log-cell.is-outside {
	visibility: hidden;
}

.reading-log-cell.is-future {
	opacity: 0.35;
}

.reading-log-cell.is-today {
	box-shadow: 0 0 0 1.5px var(--ink);
}

.reading-log-legend .reading-log-cell {
	width: var(--reading-log-cell);
}

.reading-log-legend {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--reading-log-gap);
	margin-top: 0.4rem;
	color: var(--ink-soft);
	font-size: 0.75rem;
}

.reading-log-legend span:first-child {
	margin-right: 0.25rem;
}

.reading-log-legend span:last-child {
	margin-left: 0.25rem;
}

/* DNF reasons reuse the reader-tag chips */
.dnf-reason-group {
	margin: 0;
}

/* Annual Stats actions */
.goal-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.goal-actions .goal-change {
	margin-top: 0;
}

.goal-wrapped {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
}

.goal-wrapped svg {
	width: 16px;
	height: 16px;
}

/* Year in Review */
.wrapped-dialog {
	width: min(560px, calc(100vw - 2rem));
}

.wrapped-content {
	display: grid;
	gap: 1.1rem;
}

.wrapped-hero {
	padding: 1.1rem 1.2rem;
	border-radius: 14px;
	background: color-mix(in srgb, var(--accent) 12%, var(--card));
	text-align: center;
}

.wrapped-big {
	margin: 0;
	color: var(--accent);
	font-family: var(--font-ui);
	font-size: clamp(3.5rem, 14vw, 5rem);
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.wrapped-big-label {
	margin: 0.2rem 0 0;
	font-size: 1.1rem;
	font-weight: 600;
}

.wrapped-goal {
	margin: 0.35rem 0 0;
	color: var(--ink-soft);
}

.wrapped-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 0.5rem;
	margin: 0;
}

.wrapped-tiles div {
	padding: 0.7rem 0.8rem;
	border: 1px solid var(--line);
	border-radius: 10px;
}

.wrapped-tiles dt,
.wrapped-taste dt {
	color: var(--ink-soft);
	font-size: 0.8rem;
}

.wrapped-tiles dd {
	margin: 0.15rem 0 0;
	font-size: 1.25rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.wrapped-section h3 {
	margin: 0 0 0.5rem;
	font-size: 1rem;
}

.wrapped-taste {
	display: grid;
	gap: 0.6rem;
	margin: 0;
}

.wrapped-taste dd {
	margin: 0.15rem 0 0;
}

.wrapped-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wrapped-chips li {
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--accent) 12%, var(--card));
	font-size: 0.88rem;
}

.wrapped-books {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wrapped-book {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 0.7rem;
	align-items: center;
}

.wrapped-book img,
.wrapped-cover-placeholder {
	width: 44px;
	height: 66px;
	border-radius: 4px;
	object-fit: cover;
}

.wrapped-cover-placeholder {
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--line) 60%, transparent);
	color: var(--ink-soft);
}

.wrapped-book p {
	margin: 0;
}

.wrapped-book-label {
	color: var(--ink-soft);
	font-size: 0.78rem;
}

.wrapped-book-title {
	font-family: var(--font-read);
	font-weight: 700;
	overflow-wrap: anywhere;
}

.wrapped-book-meta {
	color: var(--ink-soft);
	font-size: 0.85rem;
}

.wrapped-footer button {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
}

.wrapped-footer svg {
	width: 16px;
	height: 16px;
}

/* Barcode scanner */
.add-book-section .search-row {
	grid-template-columns: minmax(0, 1fr) auto auto;
}

.search-row .scan-isbn-btn {
	width: 44px;
	height: auto;
	min-height: 44px;
	align-self: stretch;
}

:root.is-app .search-row .scan-isbn-btn {
	flex: none;
	border-radius: 12px;
}

@media (max-width: 620px) {
	.add-book-section .search-row {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.add-book-section .search-row #search-btn {
		grid-column: 1 / -1;
	}

	.search-row .scan-isbn-btn {
		width: 48px;
	}
}

.barcode-viewport {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: 12px;
	background: #000;
}

.barcode-viewport video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.barcode-guide {
	position: absolute;
	inset: 32% 12%;
	border: 2px solid rgba(255, 255, 255, 0.9);
	border-radius: 8px;
	box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35);
}

.barcode-status {
	min-height: 2.6em;
	margin: 0.6rem 0;
}

.barcode-manual label {
	display: block;
	margin-bottom: 0.3rem;
	font-weight: 600;
}

.barcode-manual-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.5rem;
}

.barcode-manual-row input,
.barcode-manual-row button {
	min-height: 44px;
}

@media (prefers-reduced-motion: reduce) {
	.activity-action,
	.reader-tag-chip {
		transition: none;
	}
}

/* styles/book-page.css */
/* ---------- Book page (/book) ----------
   One catalog book: cover hero with the shelf and rating controls, the description, who's reading it,
   series / also-enjoyed / more-by-author rows, the author, and ratings & reviews. Colours come only
   from theme tokens; shapes follow studio.css (cards 22px, wells 14px, controls fully round). */

.book-page {
	max-width: 1100px;
	padding-top: 1.25rem;
	padding-bottom: 3rem;
}

.book-page-header {
	align-items: center;
}

.book-muted {
	color: var(--ink-soft);
	font-size: 0.9rem;
}

.book-label {
	margin: 0 0 0.45rem;
	color: var(--ink-soft);
	font-family: var(--font-ui);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ---------- Search ----------
   Popovers (search results, the shelf menu) use --dialog-bg: several themes make --card translucent,
   which would let the page show through. */

.book-search {
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: 1.5rem;
}

.book-search > svg {
	position: absolute;
	left: 1rem;
	width: 18px;
	height: 18px;
	color: var(--ink-soft);
	pointer-events: none;
}

.book-search input {
	width: 100%;
	min-height: 48px;
	padding: 0.7rem 3rem 0.7rem 2.75rem;
	border: 0;
	border-radius: 999px;
	background: var(--card);
	box-shadow: var(--studio-bezel);
	color: var(--ink);
	font-size: 1rem;
}

.book-search input:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.book-search input::-webkit-search-cancel-button {
	display: none;
}

.book-search-clear {
	position: absolute;
	right: 0.3rem;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--ink-soft);
}

.book-search-clear svg {
	width: 18px;
	height: 18px;
}

.book-search-results {
	position: absolute;
	top: calc(100% + 0.4rem);
	right: 0;
	left: 0;
	z-index: 30;
	max-height: min(70vh, 560px);
	overflow-y: auto;
	padding: 0.35rem;
	border-radius: var(--studio-radius-inner);
	background: var(--dialog-bg, var(--card));
	box-shadow: var(--studio-pop);
}

.book-search-results ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.book-search-results li + li {
	border-top: 1px solid var(--studio-ring);
}

.book-search-results a {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	min-height: 64px;
	padding: 0.55rem 0.6rem;
	border-radius: var(--studio-radius-row);
	color: var(--ink);
	text-decoration: none;
}

.book-search-results a:hover,
.book-search-results a:focus-visible {
	background: var(--studio-well);
}

.book-search-results strong {
	display: block;
	font-family: var(--font-read);
	font-size: 0.98rem;
	line-height: 1.3;
}

.book-search-results small {
	color: var(--ink-soft);
	font-size: 0.85rem;
}

.book-search-cover {
	flex: none;
	width: 44px;
	height: 66px;
	border-radius: 4px;
	object-fit: cover;
	font-size: 0;
}

.book-search-note {
	margin: 0;
	padding: 0.85rem;
	color: var(--ink-soft);
	font-size: 0.92rem;
}

/* ---------- Covers ---------- */

.book-cover-placeholder {
	display: grid;
	place-items: center;
	padding: 0.5rem;
	background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 22%, var(--card)), color-mix(in srgb, var(--accent-2) 18%, var(--card)));
	color: var(--ink);
	font-family: var(--font-read);
	text-align: center;
	overflow: hidden;
}

/* ---------- Hero ---------- */

.book-hero {
	display: grid;
	grid-template-columns: minmax(150px, 240px) 1fr;
	gap: 2rem;
	align-items: start;
	padding: 1.75rem;
	border-radius: var(--studio-radius);
	background: var(--card);
	box-shadow: var(--studio-bezel);
}

.book-hero-cover {
	display: flex;
	justify-content: center;
}

.book-hero-img {
	width: 100%;
	max-width: 240px;
	aspect-ratio: 2 / 3;
	height: auto;
	border-radius: 6px 10px 10px 6px;
	object-fit: cover;
	box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 20%, transparent), 0 18px 36px -18px color-mix(in srgb, var(--ink) 55%, transparent);
}

.book-hero-img.book-cover-placeholder {
	font-size: 1.15rem;
}

.book-hero-body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

.book-series-kicker {
	margin: 0;
	color: var(--ink-soft);
	font-family: var(--font-read);
	font-size: 1.05rem;
	font-style: italic;
}

.book-hero h1 {
	margin: 0;
	font-family: var(--font-read);
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.book-subtitle {
	margin: 0;
	color: var(--ink-soft);
	font-family: var(--font-read);
	font-size: 1.05rem;
}

.book-author {
	margin: 0.1rem 0 0;
	font-family: var(--font-read);
	font-size: 1.2rem;
}

.book-author a {
	color: var(--ink);
	text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent);
	text-underline-offset: 3px;
}

.book-rating-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.7rem;
	width: fit-content;
	margin: 0.6rem 0 0.4rem;
	color: var(--ink);
	text-decoration: none;
}

.book-rating-summary.is-empty {
	color: var(--ink-soft);
	font-size: 0.92rem;
}

.book-rating-summary strong,
.book-score-value strong {
	font-family: var(--font-read);
	font-size: 1.9rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.book-rating-summary > span:last-child {
	flex-basis: 100%;
	color: var(--ink-soft);
	font-size: 0.9rem;
}

.book-rating-stars .star-rating-stars {
	font-size: 1.6rem;
	letter-spacing: 0.08em;
}

/* Shelf split button: the main action plus a menu of every shelf. */
.book-hero-actions {
	margin-top: 0.4rem;
}

.book-shelf-control {
	position: relative;
	display: flex;
	width: min(100%, 360px);
}

.book-shelf-primary,
.book-shelf-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	border: 0;
	background: var(--accent);
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	transition: filter 200ms var(--studio-ease), transform 200ms var(--studio-ease);
}

/* .btn-main (and each theme's override of it) supplies the colours while the book isn't shelved. */
.book-shelf-control .book-shelf-primary {
	flex: 1;
	padding: 0 1.2rem;
	border-radius: 999px 0 0 999px;
}

.book-shelf-control .book-shelf-more {
	width: 52px;
	padding: 0;
	border-left: 1px solid color-mix(in srgb, #fff 35%, transparent);
	border-radius: 0 999px 999px 0;
}

.book-shelf-primary.is-on-shelf {
	background: color-mix(in srgb, var(--accent) 12%, var(--card));
	color: var(--accent);
	box-shadow: inset 0 0 0 2px var(--accent);
}

.book-shelf-primary.is-on-shelf + .book-shelf-more {
	background: color-mix(in srgb, var(--accent) 12%, var(--card));
	color: var(--accent);
	border-left-color: var(--accent);
	box-shadow: inset -2px 0 0 0 var(--accent), inset 0 2px 0 0 var(--accent), inset 0 -2px 0 0 var(--accent);
}

.book-shelf-primary:hover:not(:disabled),
.book-shelf-more:hover:not(:disabled) {
	filter: brightness(1.08);
}

.book-shelf-primary:active:not(:disabled),
.book-shelf-more:active:not(:disabled) {
	transform: scale(0.98);
}

.book-shelf-primary:disabled,
.book-shelf-more:disabled {
	opacity: 0.6;
	cursor: progress;
}

.book-shelf-primary svg,
.book-shelf-more svg {
	width: 20px;
	height: 20px;
}

.book-shelf-menu {
	position: absolute;
	top: calc(100% + 0.4rem);
	right: 0;
	left: 0;
	z-index: 20;
	display: grid;
	padding: 0.35rem;
	border-radius: var(--studio-radius-inner);
	background: var(--dialog-bg, var(--card));
	box-shadow: var(--studio-pop);
}

.book-shelf-menu[hidden] {
	display: none;
}

.book-shelf-menu button,
.book-shelf-menu a {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	min-height: 44px;
	padding: 0 0.8rem;
	border: 0;
	border-radius: var(--studio-radius-row);
	background: transparent;
	color: var(--ink);
	font-size: 0.95rem;
	text-align: left;
	text-decoration: none;
}

.book-shelf-menu button:hover,
.book-shelf-menu button:focus-visible,
.book-shelf-menu a:hover,
.book-shelf-menu a:focus-visible {
	background: var(--studio-well);
}

.book-shelf-menu a {
	border-top: 1px solid var(--studio-ring);
	border-radius: 0 0 var(--studio-radius-row) var(--studio-radius-row);
	color: var(--accent);
	font-weight: 700;
}

.book-shelf-menu svg {
	width: 18px;
	height: 18px;
}

.book-shelf-menu .book-menu-check {
	margin-left: auto;
	color: var(--accent);
}

.book-shelf-status {
	min-height: 1.2em;
	margin: 0.35rem 0 0;
	color: var(--ink-soft);
	font-size: 0.85rem;
}

/* Rate this book: the app's quarter-star slider (app/rating-input.js), with its label above. */
.book-rate {
	display: grid;
	gap: 0.1rem;
	margin-top: 0.3rem;
}

.book-rate label {
	color: var(--ink-soft);
	font-size: 0.9rem;
}

.book-match {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.6rem;
	width: fit-content;
	margin: 0 0 0.5rem;
	font-size: 0.92rem;
}

.book-match-percent {
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--success) 16%, var(--card));
	color: color-mix(in srgb, var(--success) 55%, var(--ink));
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.book-match.is-muted {
	color: var(--ink-soft);
	font-size: 0.86rem;
}

.book-match svg {
	flex: none;
	width: 16px;
	height: 16px;
}

.book-quick-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.6rem;
}

.book-quick-actions .btn-sub {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	font-size: 0.9rem;
	font-weight: 700;
}

.book-quick-actions svg {
	width: 17px;
	height: 17px;
}

/* Small pill actions inside sections (challenges, series tracker, clubs). */
.book-chip-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 40px;
	padding: 0 0.9rem;
	border: 0;
	border-radius: 999px;
	background: color-mix(in srgb, var(--accent) 12%, var(--card));
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
	/* Mixed toward the ink so it stays readable where a theme's accent is pale or grey. */
	color: color-mix(in srgb, var(--accent) 70%, var(--ink));
	font-size: 0.88rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.book-chip-btn:hover:not(:disabled) {
	background: color-mix(in srgb, var(--accent) 20%, var(--card));
}

.book-chip-btn:disabled {
	opacity: 0.6;
}

.book-chip-btn svg {
	width: 16px;
	height: 16px;
}

/* ---------- Body ---------- */

.book-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
	gap: 1.9rem;
	margin-top: 1.9rem;
}

.book-main,
.book-side {
	display: flex;
	flex-direction: column;
	gap: 1.9rem;
	min-width: 0;
}

.book-section h2 {
	margin: 0 0 0.85rem;
	font-family: var(--font-read);
	font-size: 1.4rem;
	font-weight: 700;
}

.book-section h2 em {
	font-style: italic;
	font-weight: 400;
}

.book-section:focus {
	outline: none;
}

.book-side .book-section {
	padding: 1.25rem;
	border-radius: var(--studio-radius);
	background: var(--card);
	box-shadow: var(--studio-bezel);
}

.book-clamp p {
	max-width: 68ch;
	margin: 0 0 0.8rem;
	font-family: var(--font-read);
	font-size: 1.02rem;
	line-height: 1.65;
}

.book-clamp.is-clamped {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	line-clamp: 6;
	overflow: hidden;
}

.book-clamp.is-clamped p:last-child,
.book-clamp p:last-child {
	margin-bottom: 0;
}

.book-more-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ink);
	font-weight: 700;
}

.book-more-toggle svg {
	width: 18px;
	height: 18px;
	transition: transform 200ms var(--studio-ease);
}

.book-more-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.book-genres {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 0.9rem;
	margin-top: 1rem;
}

.book-genres .book-label {
	margin: 0;
	font-size: 0.82rem;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 400;
}

.book-genres ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.book-genres li {
	padding-bottom: 0.1rem;
	border-bottom: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
	font-weight: 700;
}

.book-moods li {
	border-bottom-color: color-mix(in srgb, var(--accent-2) 55%, transparent);
	font-weight: 500;
}

.book-facts {
	display: grid;
	gap: 0.3rem;
	margin: 1.1rem 0 0;
	padding: 0;
	list-style: none;
	color: var(--ink-soft);
	font-size: 0.92rem;
}

/* Your reading: the reader's own history, pace, quote, notes and challenges. */
.book-yours {
	display: grid;
	gap: 0.6rem;
	padding: 1.25rem;
	border-radius: var(--studio-radius);
	background: var(--card);
	box-shadow: var(--studio-bezel);
}

.book-yours h2 {
	margin-bottom: 0.2rem;
}

.book-yours > p {
	margin: 0;
}

.book-your-quote {
	margin: 0.2rem 0;
	padding: 0.2rem 0 0.2rem 1rem;
	border-left: 3px solid var(--accent);
	font-family: var(--font-read);
	font-size: 1.05rem;
	font-style: italic;
}

.book-journal-link {
	display: inline-block;
	margin-top: 0.4rem;
	color: var(--accent);
	font-size: 0.85rem;
	font-weight: 600;
}

.book-your-notes .book-label span {
	margin-left: 0.4rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.book-challenges ul {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.book-challenges li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
}

.book-challenges li small {
	color: var(--ink-soft);
	font-size: 0.82rem;
}

.book-challenges li.is-done {
	color: color-mix(in srgb, var(--success) 55%, var(--ink));
	font-weight: 700;
}

.book-challenges li.is-done svg {
	width: 18px;
	height: 18px;
}

.book-challenges li.is-muted {
	color: var(--ink-soft);
}

.book-challenges .book-muted {
	margin: 0.5rem 0 0;
	font-size: 0.82rem;
}

.book-yours-actions .btn-sub {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
}

.book-yours-actions svg {
	width: 17px;
	height: 17px;
}

/* Your take: the reader's own pace / mood / plot tags. */
.book-take {
	display: grid;
	gap: 0.55rem;
	margin: 0.2rem 0;
	padding: 0.9rem 1rem;
	border-radius: var(--studio-radius-inner);
	background: var(--studio-well);
	box-shadow: inset 0 0 0 1px var(--studio-ring);
}

.book-take .book-label,
.book-take > .book-muted {
	margin: 0;
}

.book-take > .book-chip-btn {
	justify-self: start;
}

.book-take-actions {
	display: flex;
	gap: 0.5rem;
}

.book-take-actions button {
	min-height: 44px;
}

.book-take-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.book-take-chips li {
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--accent) 12%, var(--dialog-bg, var(--card)));
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
	font-size: 0.86rem;
	font-weight: 700;
}

.book-take-chips li span {
	margin-left: 0.2rem;
	color: var(--ink-soft);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

/* What Collective readers say: stat tiles, then the readers' tags. */
.book-say {
	display: grid;
	gap: 1rem;
}

.book-say h2 {
	margin-bottom: 0;
}

.book-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.book-stats li {
	display: grid;
	gap: 0.15rem;
	padding: 0.85rem 1rem;
	border-radius: var(--studio-radius-inner);
	background: var(--studio-well);
	box-shadow: inset 0 0 0 1px var(--studio-ring);
}

.book-stats strong {
	font-family: var(--font-read);
	font-size: 1.25rem;
	font-variant-numeric: tabular-nums;
}

.book-stats span {
	color: var(--ink-soft);
	font-size: 0.84rem;
}

.book-say-row .book-label {
	margin-bottom: 0.4rem;
}

.book-say-row > p:not(.book-label) {
	margin: 0;
	font-weight: 700;
}

.book-pace {
	display: flex;
	gap: 3px;
	height: 14px;
	overflow: hidden;
	border-radius: 999px;
}

.book-pace-slow { background: color-mix(in srgb, var(--accent) 35%, var(--card)); }
.book-pace-medium { background: color-mix(in srgb, var(--accent) 65%, var(--card)); }
.book-pace-fast { background: var(--accent); }

.book-pace-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1rem;
	margin: 0.45rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.86rem;
	font-variant-numeric: tabular-nums;
}

.book-pace-legend li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.book-pace-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.book-say-note {
	margin: 0;
	font-size: 0.82rem;
}

/* Content warnings stay folded away until asked for. */
.book-warnings {
	margin-top: 1.1rem;
	border-radius: var(--studio-radius-inner);
	background: var(--studio-well);
	box-shadow: inset 0 0 0 1px var(--studio-ring);
}

.book-warnings summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2rem 0.5rem;
	min-height: 48px;
	padding: 0.6rem 1rem;
	cursor: pointer;
	font-weight: 700;
}

.book-warnings summary small {
	flex-basis: 100%;
	padding-left: 1.6rem;
	color: var(--ink-soft);
	font-size: 0.8rem;
	font-weight: 400;
}

.book-warnings summary svg {
	width: 18px;
	height: 18px;
	color: var(--accent-2);
}

.book-warnings ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0 1rem 1rem;
	list-style: none;
}

.book-warnings li {
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	background: var(--card);
	box-shadow: inset 0 0 0 1px var(--studio-ring);
	font-size: 0.85rem;
}

/* Who's reading it. */
.book-community {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 1rem 0;
	border-block: 1px solid var(--line);
	list-style: none;
}

.book-community li {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.book-avatar-stack {
	display: flex;
	flex: none;
	width: 96px;
}

.book-avatar-stack img {
	width: 40px;
	height: 40px;
	border: 2px solid var(--card);
	border-radius: 50%;
	object-fit: cover;
}

.book-avatar-stack img + img {
	margin-left: -12px;
}

.book-avatar-stack.is-empty svg {
	width: 40px;
	height: 40px;
	padding: 9px;
	border-radius: 50%;
	background: var(--studio-well);
	color: var(--ink-soft);
}

/* Horizontal cover rows: series, also enjoyed, more by the author. */
.book-row {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 132px;
	gap: 1rem;
	margin: 0;
	padding: 0.2rem 0.2rem 0.6rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	list-style: none;
}

.book-side .book-row {
	grid-auto-columns: 108px;
}

.book-row li {
	scroll-snap-align: start;
}

.book-row a {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	color: var(--ink);
	text-decoration: none;
}

.book-row-cover {
	width: 100%;
	aspect-ratio: 2 / 3;
	height: auto;
	margin-bottom: 0.35rem;
	border-radius: 4px 7px 7px 4px;
	object-fit: cover;
	box-shadow: 0 10px 20px -14px color-mix(in srgb, var(--ink) 60%, transparent);
	transition: transform 260ms var(--studio-ease);
	font-size: 0.8rem;
}

.book-row a:hover .book-row-cover,
.book-row a:focus-visible .book-row-cover {
	transform: translateY(-3px);
}

.book-row strong {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	font-family: var(--font-read);
	font-size: 0.92rem;
	line-height: 1.3;
}

.book-row span:not(.book-row-badge),
.book-row small {
	color: var(--ink-soft);
	font-size: 0.8rem;
}

.book-row-badge {
	position: absolute;
	top: 0.4rem;
	left: 0.4rem;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ink) 78%, transparent);
	color: var(--card);
	font-size: 0.75rem;
	font-weight: 700;
}

.book-row li.is-current .book-row-cover {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}

/* Clubs reading this. */
.book-clubs {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.book-clubs li {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.7rem 0.85rem;
	border-radius: var(--studio-radius-inner);
	background: var(--studio-well);
	box-shadow: inset 0 0 0 1px var(--studio-ring);
}

.book-clubs li > span:not(.book-club-icon) {
	flex: 1;
	min-width: 0;
}

.book-clubs img,
.book-club-icon {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	object-fit: cover;
}

.book-club-icon {
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--accent) 14%, var(--card));
	color: var(--accent);
}

.book-club-icon svg {
	width: 20px;
	height: 20px;
}

.book-clubs strong {
	display: block;
	overflow-wrap: anywhere;
}

.book-clubs small {
	color: var(--ink-soft);
	font-size: 0.82rem;
}

.book-series-progress {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin: -0.35rem 0 0.85rem;
	color: var(--ink-soft);
	font-size: 0.9rem;
}

.book-series-progress > svg {
	width: 18px;
	height: 18px;
	color: color-mix(in srgb, var(--success) 55%, var(--ink));
}

/* Find a copy. */
.book-find {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.book-find a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 56px;
	padding: 0.55rem 0.8rem;
	border-radius: var(--studio-radius-inner);
	background: var(--studio-well);
	box-shadow: inset 0 0 0 1px var(--studio-ring);
	color: var(--ink);
	text-decoration: none;
}

.book-find a:hover,
.book-find a:focus-visible {
	box-shadow: inset 0 0 0 1px var(--accent);
}

.book-find a > span:not(.visually-hidden) {
	flex: 1;
	min-width: 0;
}

.book-find strong {
	display: block;
	font-size: 0.95rem;
}

.book-find small {
	color: var(--ink-soft);
	font-size: 0.8rem;
}

.book-find svg {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--accent);
}

.book-find .book-find-arrow {
	width: 16px;
	height: 16px;
	color: var(--ink-soft);
}

/* About the author. */
.book-author-card {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-bottom: 0.85rem;
}

.book-author-card img,
.book-author-initials {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
}

.book-author-initials {
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--accent) 16%, var(--card));
	color: var(--accent);
	font-family: var(--font-read);
	font-size: 1.3rem;
	font-weight: 700;
}

.book-author-card strong {
	display: block;
	font-family: var(--font-read);
	font-size: 1.15rem;
}

.book-author-card span {
	color: var(--ink-soft);
	font-size: 0.88rem;
}

.book-side .book-clamp p {
	font-size: 0.95rem;
}

/* Ratings & reviews. */
.book-score {
	padding: 1.1rem 1.2rem;
	border-radius: var(--studio-radius-inner);
	background: var(--studio-well);
	box-shadow: inset 0 0 0 1px var(--studio-ring);
}

.book-score-value {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.book-score .book-muted {
	margin: 0.35rem 0 0.8rem;
}

.book-distribution {
	display: grid;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.book-distribution li {
	display: grid;
	grid-template-columns: 4.2rem 1fr 5.5rem;
	align-items: center;
	gap: 0.7rem;
	font-size: 0.88rem;
}

.book-distribution li > span:first-child {
	font-weight: 700;
}

.book-distribution li > span:last-child {
	color: var(--ink-soft);
	font-variant-numeric: tabular-nums;
}

.book-bar {
	height: 12px;
	overflow: hidden;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ink) 10%, transparent);
}

.book-bar span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--accent);
}

.book-reviews {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.book-reviews li {
	display: grid;
	gap: 0.55rem;
	padding: 1rem 1.1rem;
	border-radius: var(--studio-radius-inner);
	background: var(--studio-well);
	box-shadow: inset 0 0 0 1px var(--studio-ring);
}

.book-review-head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: fit-content;
	color: var(--ink);
	text-decoration: none;
}

.book-review-head img {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
}

.book-review-head strong {
	display: block;
	font-family: var(--font-read);
}

.book-review-head small {
	color: var(--ink-soft);
	font-size: 0.82rem;
}

/* Friends / All reviews switch. */
.book-review-tabs {
	display: inline-flex;
	gap: 0.25rem;
	margin: 1.6rem 0 0.9rem;
	padding: 0.25rem;
	border-radius: 999px;
	background: var(--studio-well);
	box-shadow: inset 0 0 0 1px var(--studio-ring);
}

.book-review-tabs button {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 40px;
	padding: 0 1rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--ink-soft);
	font-weight: 700;
}

.book-review-tabs button span {
	min-width: 1.5em;
	padding: 0.05rem 0.4rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ink) 8%, transparent);
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
}

.book-review-tabs button[aria-selected="true"] {
	background: var(--dialog-bg, var(--card));
	box-shadow: inset 0 0 0 1.5px var(--accent);
	color: var(--ink);
}

.book-review-anon {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--accent) 14%, var(--card));
	color: var(--accent);
}

.book-review-anon svg {
	width: 20px;
	height: 20px;
}

.book-reviews-more {
	margin-top: 0.85rem;
	min-height: 44px;
}

.book-reviews-privacy {
	margin: 0.75rem 0 0;
	font-size: 0.82rem;
}

.book-spoiler-note {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: -0.25rem 0 0.75rem;
	color: var(--ink-soft);
	font-size: 0.88rem;
}

.book-spoiler-note svg {
	flex: none;
	width: 17px;
	height: 17px;
}

.book-review-hidden {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 96px;
	overflow: hidden;
	border-radius: var(--studio-radius-row);
}

.book-review-blur {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0.3rem;
	font-family: var(--font-read);
	filter: blur(6px);
	opacity: 0.7;
	user-select: none;
	pointer-events: none;
}

.book-review-hidden .btn-sub {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
}

.book-review-hidden svg {
	width: 17px;
	height: 17px;
}

/* Recommend / add-to-club dialog. */
.book-dialog-clubs {
	display: grid;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
}

.book-dialog-clubs li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--studio-ring);
}

.book-reviews .book-clamp p {
	font-size: 0.97rem;
}

/* Empty, signed-out and error states. */
.book-empty {
	display: grid;
	justify-items: center;
	gap: 0.85rem;
	padding: 3rem 1.25rem;
	border-radius: var(--studio-radius);
	background: var(--card);
	box-shadow: var(--studio-bezel);
	text-align: center;
}

.book-empty svg {
	width: 40px;
	height: 40px;
	color: var(--ink-soft);
}

.book-empty p {
	max-width: 42ch;
	margin: 0;
	color: var(--ink-soft);
}

/* Before a search: discover sections (heading, one-line description, a row of covers), divided by
   hairlines. The page widens for them so ten covers fit a row at a readable size. */
.book-page:has(.book-discover) {
	max-width: 1360px;
}

.book-discover {
	--discover-pad: clamp(1.1rem, 0.6rem + 2vw, 2rem);
	display: flex;
	flex-direction: column;
	padding: var(--discover-pad);
	border-radius: var(--studio-radius);
	background: var(--card);
	box-shadow: var(--studio-bezel);
}

.discover-section {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	min-width: 0;
}

.discover-section + .discover-section {
	margin-top: 2.25rem;
	padding-top: 2.25rem;
	border-top: 1px solid var(--studio-ring);
}

.discover-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.85rem 1.5rem;
}

.discover-head > div {
	min-width: 0;
}

/* A lone icon button (Recommended for You's refresh) stays beside the heading instead of wrapping under it. */
.discover-head:has(> .icon-btn) {
	flex-wrap: nowrap;
	align-items: flex-start;
}

.discover-head > .icon-btn {
	flex: none;
}

.discover-head h2 {
	margin: 0;
	font-family: var(--font-read);
	font-size: clamp(1.55rem, 1.15rem + 1.3vw, 2.25rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.discover-head p {
	max-width: 62ch;
	margin: 0.4rem 0 0;
	color: var(--ink-soft);
	font-size: 1rem;
	line-height: 1.5;
	text-wrap: pretty;
}

.book-discover-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}

.book-discover-filter select {
	min-height: 44px;
	min-width: 8.5rem;
}

/* Everyone / Friends switch: two radios with a thumb that slides under the checked one. */
.discover-scope {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-width: 0;
	height: 44px;
	padding: 4px;
	border-radius: 999px;
	background: var(--studio-well);
	box-shadow: inset 0 0 0 1px var(--studio-ring);
}

.discover-scope input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.discover-scope label {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	min-width: 5.5rem;
	padding: 0 1rem;
	border-radius: 999px;
	color: var(--ink-soft);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	transition: color 200ms var(--studio-ease);
}

.discover-scope label:hover {
	color: var(--ink);
}

/* --dialog-bg rather than --card: several themes make --card translucent. */
.discover-scope input:checked + label {
	color: var(--dialog-bg, var(--card));
}

.discover-scope input:focus-visible + label {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.discover-scope-thumb {
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 4px;
	width: calc(50% - 4px);
	border-radius: 999px;
	background: var(--ink);
	box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--ink) 50%, transparent);
	transition: transform 240ms var(--studio-ease);
}

.discover-scope[data-scope="friends"] .discover-scope-thumb {
	transform: translateX(100%);
}

.book-discover-note {
	margin: 0;
	padding: 1.1rem 1.25rem;
	border-radius: var(--studio-radius-inner);
	background: var(--studio-well);
	color: var(--ink-soft);
}

/* .wrap is a grid, so without this the long cover rows widen the page instead of scrolling. */
.book-content {
	min-width: 0;
}

/* Ten covers share the row when they fit at a readable size; otherwise the row scrolls sideways,
   bleeding to the card's edges so a cut-off cover reads as "more this way". */
.cover-row {
	display: grid;
	grid-template-columns: repeat(10, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.4cqi, 1.25rem);
	margin: 0;
	padding: 0.5rem 0 0.25rem;
	list-style: none;
}

@container (max-width: 1080px) {
	.cover-row {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: clamp(104px, 14cqi, 128px);
		margin-inline: calc(-1 * var(--discover-pad));
		padding: 0.5rem var(--discover-pad) 0.75rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scroll-padding-inline: var(--discover-pad);
		scrollbar-width: thin;
	}

	.cover-row li {
		scroll-snap-align: start;
	}
}

.cover-row a {
	position: relative;
	display: block;
	border-radius: 4px 7px 7px 4px;
	-webkit-tap-highlight-color: transparent;
}

.cover-row-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	border-radius: 4px 7px 7px 4px;
	object-fit: cover;
	background: var(--studio-well);
	box-shadow: 0 0 0 1px var(--studio-ring), 0 10px 20px -14px color-mix(in srgb, var(--ink) 70%, transparent);
	transition: transform 220ms var(--studio-ease), box-shadow 220ms var(--studio-ease);
	font-size: 0.8rem;
}

.cover-row-img.book-cover-placeholder {
	font-size: clamp(0.8rem, 1.1cqi, 0.95rem);
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.cover-row a:hover .cover-row-img,
.cover-row a:focus-visible .cover-row-img {
	transform: translateY(-4px);
	box-shadow: 0 0 0 1px var(--studio-ring), 0 18px 26px -14px color-mix(in srgb, var(--ink) 80%, transparent);
}

.cover-row a:active .cover-row-img {
	transform: translateY(-1px);
	transition-duration: 90ms;
}

.cover-row a:focus-visible {
	outline: none;
}

.cover-row a:focus-visible .cover-row-img {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
}

/* "Not interested" on a recommended cover: always visible (touch has no hover), in the bottom corner so it
   never covers a placeholder's title, rides up with the cover, and its ::before stretches the tap target to 44px. */
.cover-row li {
	position: relative;
}

.cover-row-dismiss {
	position: absolute;
	right: 0.35rem;
	bottom: 0.35rem;
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--card) 88%, transparent);
	color: var(--ink);
	box-shadow: 0 1px 4px color-mix(in srgb, #000 25%, transparent);
	cursor: pointer;
	transition: transform 220ms var(--studio-ease), background-color 150ms ease;
}

.cover-row-dismiss::before {
	content: "";
	position: absolute;
	inset: -0.5rem;
}

.cover-row-dismiss svg {
	width: 1rem;
	height: 1rem;
}

.cover-row li:has(a:hover) .cover-row-dismiss,
.cover-row li:has(a:focus-visible) .cover-row-dismiss {
	transform: translateY(-4px);
}

.cover-row-dismiss:hover {
	background: var(--card);
}

.cover-row-dismiss:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}

/* #1-#3 badges tucked into the cover's bottom-right corner. Medal colours sit on cover art rather
   than the theme, so they're fixed and each pairs with a text colour that passes 4.5:1. */
.cover-row-rank {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 0.2rem 0.5rem;
	border-radius: 8px 0 7px 0;
	box-shadow: -1px -1px 0 color-mix(in srgb, #000 18%, transparent);
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
	transition: transform 220ms var(--studio-ease);
}

.cover-row a:hover .cover-row-rank,
.cover-row a:focus-visible .cover-row-rank {
	transform: translateY(-4px);
}

.cover-row a:active .cover-row-rank {
	transform: translateY(-1px);
	transition-duration: 90ms;
}

.cover-row-rank.is-rank-1 {
	background: #f2b705;
	color: #1d1600;
}

.cover-row-rank.is-rank-2 {
	background: #59616e;
	color: #fff;
}

.cover-row-rank.is-rank-3 {
	background: #a8410f;
	color: #fff;
}

/* Loading: a row of shimmering cover shapes holds the space, so nothing jumps when the books arrive. */
.cover-row-skeleton {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	border-radius: 4px 7px 7px 4px;
}

/* Shared hover/focus tooltip (positioned by book.js). Inverted colours so it stands off any cover. */
.cover-tip {
	position: fixed;
	z-index: 50;
	display: grid;
	gap: 0.15rem;
	max-width: min(22rem, calc(100vw - 16px));
	padding: 0.6rem 0.85rem;
	border-radius: 10px;
	background: var(--ink);
	color: var(--dialog-bg, var(--card));
	box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.45);
	font-size: 0.9rem;
	line-height: 1.35;
	pointer-events: none;
	animation: cover-tip-in 140ms var(--studio-ease);
}

.cover-tip[hidden] {
	display: none;
}

.cover-tip strong {
	font-family: var(--font-read);
	font-size: 0.98rem;
}

.cover-tip strong span {
	font-family: var(--font-ui);
	font-size: 0.85rem;
	font-weight: 400;
	opacity: 0.8;
}

.cover-tip small {
	font-size: 0.85rem;
	opacity: 0.85;
}

.cover-tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: var(--arrow-x, 50%);
	border: 7px solid transparent;
	border-top-color: var(--ink);
	transform: translateX(-50%);
}

.cover-tip.is-below::after {
	top: auto;
	bottom: 100%;
	border-top-color: transparent;
	border-bottom-color: var(--ink);
}

@keyframes cover-tip-in {
	from {
		opacity: 0;
		translate: 0 3px;
	}
}

/* Phones: the filters take a full row under the heading; the switch spans it, the selects split it. */
@media (max-width: 620px) {
	.book-discover-filters {
		width: 100%;
	}

	.discover-scope {
		flex: 1 1 100%;
	}

	.book-discover-filter {
		flex: 1 1 0;
		min-width: 0;
	}

	.book-discover-filter select {
		width: 100%;
		min-width: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.discover-scope-thumb,
	.discover-scope label,
	.cover-row-img,
	.cover-row-rank,
	.cover-row-dismiss {
		transition: none;
	}

	.cover-tip {
		animation: none;
	}

	.cover-row a:hover .cover-row-img,
	.cover-row a:focus-visible .cover-row-img,
	.cover-row a:active .cover-row-img,
	.cover-row a:hover .cover-row-rank,
	.cover-row a:focus-visible .cover-row-rank,
	.cover-row li:has(a:hover) .cover-row-dismiss,
	.cover-row li:has(a:focus-visible) .cover-row-dismiss,
	.cover-row a:active .cover-row-rank {
		transform: none;
	}
}

.book-skeleton .book-hero-img {
	height: auto;
	box-shadow: none;
}

.book-skeleton .book-hero-body {
	gap: 0.7rem;
	padding-top: 0.5rem;
}

.book-skeleton .skeleton-line {
	height: 1rem;
	margin: 0;
}

.book-skeleton .skeleton-line.is-title {
	height: 2.2rem;
}

/* ---------- Phones and tablets ---------- */

@media (max-width: 900px) {
	.book-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.book-side .book-section {
		padding: 0;
		background: transparent;
		box-shadow: none;
	}

	.book-side .book-row {
		grid-auto-columns: 132px;
	}
}

@media (max-width: 620px) {
	.book-page .app-brand-link span {
		display: none;
	}

	.book-hero {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.25rem;
		padding: 1.5rem 1.1rem;
		text-align: center;
	}

	.book-hero-img {
		max-width: 200px;
	}

	.book-hero-body {
		align-items: center;
	}

	.book-rating-summary {
		justify-content: center;
	}

	.book-match {
		justify-content: center;
		text-align: center;
	}

	.book-rating-summary > span:last-child {
		text-align: center;
	}

	.book-hero-actions,
	.book-shelf-control {
		width: 100%;
	}

	.book-distribution li {
		grid-template-columns: 3.9rem 1fr 4.8rem;
		gap: 0.5rem;
	}

	.book-row {
		grid-auto-columns: 118px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.book-row-cover,
	.book-shelf-primary,
	.book-shelf-more,
	.book-more-toggle svg {
		transition: none;
	}
}

/* Full search results (Enter in the book search): every match, so readers can pick the right edition. */
.book-results-title {
	margin: 0 0 0.25rem;
	font-family: var(--font-read);
	font-size: clamp(1.35rem, 3vw, 1.8rem);
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.book-results-list {
	display: grid;
	gap: 0.25rem;
	margin: 1rem 0;
	padding: 0;
	list-style: none;
}

.book-result-main {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	min-height: 88px;
	padding: 0.6rem 0.7rem;
	border-radius: var(--studio-radius-row);
	color: var(--ink);
	text-decoration: none;
	transition: background-color 150ms ease;
}

.book-result-main:hover,
.book-result-main:focus-visible {
	background: var(--studio-well);
}

/* A book's editions, tucked under its row and indented to line up with the title. */
.book-result-editions {
	margin: 0 0 0.35rem calc(0.7rem + 52px + 0.9rem);
}

.book-result-editions summary {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 0.7rem;
	border-radius: var(--studio-radius-row);
	color: var(--accent);
	font-size: 0.88rem;
	font-weight: 600;
	cursor: pointer;
}

.book-result-editions summary:hover,
.book-result-editions summary:focus-visible {
	background: var(--studio-well);
}

.book-result-editions ul {
	display: grid;
	gap: 0.15rem;
	margin: 0.25rem 0 0;
	padding: 0;
	list-style: none;
	border-left: 2px solid var(--studio-ring);
}

.book-result-editions a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 44px;
	padding: 0.4rem 0.8rem;
	border-radius: 0 var(--studio-radius-row) var(--studio-radius-row) 0;
	color: var(--ink);
	font-size: 0.88rem;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: background-color 150ms ease;
}

.book-result-editions a:hover,
.book-result-editions a:focus-visible {
	background: var(--studio-well);
}

.book-result-editions small {
	color: var(--ink-soft);
	font-size: 0.8rem;
}

/* Big enough to tell the editions' covers apart. */
.book-result-editions .book-edition-cover {
	width: 48px;
	height: 72px;
}

.book-edition-text {
	display: grid;
	gap: 0.1rem;
	min-width: 0;
}

@media (max-width: 520px) {
	.book-result-editions {
		margin-left: 0.7rem;
	}
}

.book-results-list .book-search-cover {
	width: 52px;
	height: 78px;
}

.book-result-text {
	display: grid;
	gap: 0.15rem;
	min-width: 0;
}

.book-result-text strong {
	font-family: var(--font-read);
	font-size: 1rem;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.book-result-text small {
	color: var(--ink-soft);
	font-size: 0.85rem;
	overflow-wrap: anywhere;
}

.book-results-more {
	display: block;
	min-height: 44px;
	margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
	.book-result-main,
	.book-result-editions a {
		transition: none;
	}
}

/* styles/paper-pencil.css */
/* Paper theme: a pencil-on-paper notebook look (graphite ink, hand lettering, paper grain, wobbly sketched borders). */
html[data-theme="notepad"] {
	--bg-1: #f1ead9;
	--bg-2: #e2d8c0;
	--ink: #35353a;
	--ink-soft: #6a6862;
	--card: rgba(250, 245, 230, 0.9);
	--line: #8d8a82;
	--accent: #4b4b52;
	--accent-2: #77767c;
	--danger: #a8443b;
	--shadow: 2px 3px 0 rgba(53, 53, 58, 0.16);
	--strip-bg: rgba(246, 240, 224, 0.92);
	--strip-border: #8d8a82;
	--input-bg: rgba(255, 252, 240, 0.7);
	--btn-sub-bg: #e6dcc4;
	--dialog-bg: #f7f1de;
	--dialog-border: #6f6d67;
	--paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0 0.22 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
	--paper-fibres: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.09' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.38 0 0 0 0 0.25 0 0 0 0.45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='0.35'/%3E%3C/svg%3E");
	--pencil-font: "Patrick Hand", "Segoe Print", "Bradley Hand", cursive;
	--pencil-heading-font: "Caveat", "Patrick Hand", "Segoe Print", cursive;
	--sketch-radius: 255px 14px 225px 14px / 14px 225px 14px 255px;
	--sketch-radius-sm: 155px 8px 135px 8px / 8px 135px 8px 155px;
	color-scheme: light;
}

/* The page itself: paper grain + fibres over a warm sheet with faint notebook ruling and a margin line */
html[data-theme="notepad"] body {
	background: var(--bg-1);
}

/* Painted once on its own fixed layer; background-attachment: fixed forces a full repaint on every scroll frame. */
html[data-theme="notepad"]::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(90deg, transparent 4.2rem, rgba(190, 80, 70, 0.28) 4.2rem, rgba(190, 80, 70, 0.28) calc(4.2rem + 1px), transparent calc(4.2rem + 1px)),
		repeating-linear-gradient(180deg, transparent 0, transparent 31px, rgba(90, 120, 165, 0.2) 31px, rgba(90, 120, 165, 0.2) 32px),
		var(--paper-fibres),
		var(--paper-grain),
		radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(120, 95, 55, 0.22) 100%);
	background-size: auto, auto, 500px 500px, 300px 300px, auto;
	will-change: transform;
}

/* Everything is lettered in pencil */
html[data-theme="notepad"] body,
html[data-theme="notepad"] body * {
	font-family: var(--pencil-font);
	letter-spacing: 0.01em;
}

html[data-theme="notepad"] body {
	font-size: 1.1rem;
}

html[data-theme="notepad"] h1,
html[data-theme="notepad"] h2,
html[data-theme="notepad"] h3,
html[data-theme="notepad"] h4,
html[data-theme="notepad"] .brand,
html[data-theme="notepad"] .book-title {
	font-family: var(--pencil-heading-font);
	font-weight: 700;
	letter-spacing: 0.02em;
}

html[data-theme="notepad"] h1 { font-size: 2.6em; }
html[data-theme="notepad"] h2 { font-size: 2em; }
html[data-theme="notepad"] h3 { font-size: 1.6em; }

/* Graphite smudge: text is slightly soft and uneven, like pencil pressed into paper */
html[data-theme="notepad"] body,
html[data-theme="notepad"] button,
html[data-theme="notepad"] input,
html[data-theme="notepad"] select,
html[data-theme="notepad"] textarea {
	color: var(--ink);
}

/* Blurred text-shadow on every element is costly to paint, so only headings get the smudge */
html[data-theme="notepad"] h1,
html[data-theme="notepad"] h2,
html[data-theme="notepad"] h3,
html[data-theme="notepad"] .brand {
	text-shadow: 0.4px 0.4px 0.6px rgba(53, 53, 58, 0.55);
}

/* Lucide icons look like pencil line drawings */
html[data-theme="notepad"] svg.lucide,
html[data-theme="notepad"] [data-lucide] {
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Sheets of paper, sketched with a wobbly pencil outline */
html[data-theme="notepad"] .panel,
html[data-theme="notepad"] .app-dialog,
html[data-theme="notepad"] .book,
html[data-theme="notepad"] .book-club-card,
html[data-theme="notepad"] .friend-item,
html[data-theme="notepad"] .notification-item,
html[data-theme="notepad"] .search-panel,
html[data-theme="notepad"] .profile-options-panel,
html[data-theme="notepad"] .now-reading-card,
html[data-theme="notepad"] .wishlist-card,
html[data-theme="notepad"] .stat,
html[data-theme="notepad"] .search-item,
html[data-theme="notepad"] .empty,
html[data-theme="notepad"] .club-workspace-hero,
html[data-theme="notepad"] .club-workspace-section,
html[data-theme="notepad"] .chapter-directory,
html[data-theme="notepad"] .shelf-recommendation,
html[data-theme="notepad"] .insights-list > div,
html[data-theme="notepad"] .series-tracker-stats > div {
	background-color: var(--card);
	background-image: var(--paper-grain);
	background-size: 300px 300px;
	border: 2px solid #55545a;
	border-radius: var(--sketch-radius);
	color: var(--ink);
	box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.35), inset 0 0 22px rgba(140, 110, 60, 0.12);
}

html[data-theme="notepad"] .app-dialog {
	background-color: var(--dialog-bg);
}

html[data-theme="notepad"] .app-dialog::backdrop {
	background: rgba(70, 60, 45, 0.45);
}

/* Slightly different tilt per card so nothing looks ruled by a machine */
html[data-theme="notepad"] .book:nth-child(odd),
html[data-theme="notepad"] .book-club-card:nth-child(odd) { transform: rotate(-0.35deg); }
html[data-theme="notepad"] .book:nth-child(even),
html[data-theme="notepad"] .book-club-card:nth-child(even) { transform: rotate(0.3deg); }

/* Buttons, tabs and pills: pencil-outlined boxes; the active one is shaded in with graphite */
html[data-theme="notepad"] button,
html[data-theme="notepad"] .btn-sub,
html[data-theme="notepad"] .pill,
html[data-theme="notepad"] .club-members span,
html[data-theme="notepad"] .month-count,
html[data-theme="notepad"] .letter-pill {
	border: 2px solid #55545a;
	border-radius: var(--sketch-radius-sm);
}

html[data-theme="notepad"] .btn-sub,
html[data-theme="notepad"] .month-count,
html[data-theme="notepad"] .pill {
	background-color: rgba(255, 252, 240, 0.55);
	color: var(--ink);
}

html[data-theme="notepad"] .btn-main,
html[data-theme="notepad"] .view-nav button.active,
html[data-theme="notepad"] .status-tabs button.active,
html[data-theme="notepad"] .challenge-book-action.complete.active,
html[data-theme="notepad"] .letter-pill.active,
html[data-theme="notepad"] button.month-count.selected {
	background-color: #4b4b52;
	background-image:
		repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.09) 0 1px, transparent 1px 4px),
		var(--paper-grain);
	color: #f7f1de;
	text-shadow: none;
}

/* Form fields: written on paper with a pencil-drawn box */
html[data-theme="notepad"] input,
html[data-theme="notepad"] select,
html[data-theme="notepad"] textarea {
	background-color: var(--input-bg);
	background-image: var(--paper-grain);
	border: 2px solid #6f6d67;
	border-radius: var(--sketch-radius-sm);
	color: var(--ink);
	font-size: 1.05em;
}

html[data-theme="notepad"] input:focus,
html[data-theme="notepad"] select:focus,
html[data-theme="notepad"] textarea:focus {
	outline: 2px dashed #4b4b52;
	outline-offset: 2px;
}

html[data-theme="notepad"] ::placeholder {
	color: #9a978d;
	opacity: 1;
}

/* Rules and dividers as pencil strokes */
html[data-theme="notepad"] hr {
	border: 0;
	height: 4px;
	background: repeating-linear-gradient(90deg, #6f6d67 0 14px, transparent 14px 18px);
	opacity: 0.7;
	border-radius: 4px;
}

html[data-theme="notepad"] a {
	color: #3c3c44;
	text-decoration: underline wavy rgba(60, 60, 68, 0.5);
	text-underline-offset: 3px;
}

html[data-theme="notepad"] ::selection {
	background: rgba(75, 75, 82, 0.28);
}

/* Book covers: pencil-shaded and slightly faded, like a drawn thumbnail */
html[data-theme="notepad"] .book img,
html[data-theme="notepad"] .book-cover img,
html[data-theme="notepad"] .search-item img {
	filter: grayscale(0.65) contrast(1.05) sepia(0.25);
	border: 2px solid #55545a;
	border-radius: 4px 9px 5px 10px;
}

/* Hover effects (restored) */

html[data-theme="notepad"] button:hover:not(:disabled) {
	transform: translate(-1px, -1px) rotate(-0.4deg);
}

@media (prefers-reduced-motion: reduce) {
html[data-theme="notepad"] button:hover:not(:disabled) {
		transform: none;
	}
}

/* Book page: menu rows and inline text buttons aren't boxes, even on paper. */
html[data-theme="notepad"] .book-shelf-menu button,
html[data-theme="notepad"] .book-search-clear,
html[data-theme="notepad"] .book-more-toggle {
	border: 0;
}

html[data-theme="notepad"] .book-shelf-menu button:hover:not(:disabled) {
	transform: none;
}

/* styles/mobile-app.css */
/* Packaged app only: every rule is scoped to html.is-app (set by config.js inside the app), and :where()
   keeps that scope from adding specificity, so the app renders exactly as before and the website never
   picks these up. */
/* The main menu's buttons carry icons for the app's bottom tab bar; the website shows text only. */
html:not(.is-app) .view-nav > button > svg {
	display: none;
}

/* App-like phone UX: bottom tab bar, safe-area insets, touch tuning.
   Kept separate so the native-app-specific layer stays easy to find. */

html:where(.is-app) {
	-webkit-tap-highlight-color: transparent;
}

:where(.is-app) body {
	overscroll-behavior-y: contain;
	padding-top: env(safe-area-inset-top);
}

:where(.is-app) button,
:where(.is-app) a,
:where(.is-app) select {
	touch-action: manipulation;
}

@media (max-width: 640px) {
	:root:where(.is-app) {
		--bottom-nav-height: 4.2rem;
	}

	:where(.is-app) body {
		padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
	}

	:where(.is-app) .privacy-wrap,
	:where(.is-app) .auth-wrap {
		padding-bottom: env(safe-area-inset-bottom);
	}

	:where(.is-app) .icon-btn,
	:where(.is-app) .btn-main,
	:where(.is-app) .btn-sub {
		min-height: 44px;
	}

	/* .hero's transform/backdrop-filter entrance animation creates a CSS containing
	   block, which would anchor the fixed .view-nav below to the panel instead of
	   the viewport. Drop it here so the bottom tab bar escapes to the real viewport edge. */
	:where(.is-app) .panel.hero {
		transform: none;
		backdrop-filter: none;
		animation: none;
		opacity: 1;
	}

	:where(.is-app) .view-nav {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0;
		width: 100%;
		margin: 0;
		padding: 0.3rem 0.3rem calc(0.3rem + env(safe-area-inset-bottom));
		background: var(--card);
		border-top: 1px solid var(--line);
		box-shadow: 0 -6px 20px rgba(21, 25, 34, 0.1);
	}

	:where(.is-app) .view-nav button {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.15rem;
		width: 100%;
		min-height: 3.2rem;
		padding: 0.3rem 0.1rem;
		border-radius: 10px;
		font-size: 0.66rem;
		line-height: 1.1;
		white-space: nowrap;
		position: relative;
	}

	:where(.is-app) .view-nav button svg {
		width: 20px;
		height: 20px;
	}

	:where(.is-app) .view-nav button .notification-badge {
		position: absolute;
		top: 0.05rem;
		right: calc(50% - 1.3rem);
		margin: 0;
	}
}

/* styles/app-shell.css */
/* Native-app shell for the packaged Flutter app only (config.js adds .is-app to <html>).
   The website is untouched: every rule here is scoped to :root.is-app, which also
   out-ranks the [data-theme] / html[data-theme] overrides so it holds on every theme. */

:root.is-app {
	--app-bar-height: 3.5rem;
	--tab-bar-height: 4.25rem;
	--sheet-radius: 22px;
	--press-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	-webkit-tap-highlight-color: transparent;
	scrollbar-width: none;
}

:root.is-app ::-webkit-scrollbar {
	display: none;
}

:root.is-app body:has(.view-nav) {
	padding-top: 0;
	padding-bottom: calc(var(--tab-bar-height) + env(safe-area-inset-bottom));
	overscroll-behavior: none;
}

/* App chrome isn't text to copy; content (reviews, chat, notes) and fields still are. */
:root.is-app button,
:root.is-app .view-nav,
:root.is-app .account-strip,
:root.is-app .dialog-heading,
:root.is-app .card-title,
:root.is-app .settings-tab {
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

/* iOS zooms into any field under 16px on focus. */
:root.is-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
:root.is-app select,
:root.is-app textarea {
	font-size: max(16px, 1em);
}

/* ---------- Screens: full-bleed surfaces instead of floating website cards ---------- */

:root.is-app .wrap {
	width: 100%;
	margin: 0;
	gap: 0;
}

:root.is-app .panel {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
	transform: none;
	opacity: 1;
	animation: none;
}

:root.is-app .app-view {
	min-height: calc(100dvh - var(--app-bar-height) - var(--tab-bar-height));
}

@media (prefers-reduced-motion: no-preference) {
	:root.is-app .app-view:not([hidden]) {
		animation: app-screen-in 200ms var(--press-ease);
	}
}

@keyframes app-screen-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

/* ---------- Top app bar ---------- */

:root.is-app .panel.hero:not(.auth-hero) {
	position: sticky;
	top: 0;
	z-index: 30;
	padding: 0;
	border-top: 0;
	border-bottom: 1px solid var(--line);
	background: var(--card);
}

:root.is-app .account-strip {
	min-height: var(--app-bar-height);
	margin: 0;
	padding: 0.35rem 0.5rem 0.35rem 1rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	flex-direction: row;
	align-items: center;
}

:root.is-app .app-account {
	display: flex;
	flex: 1;
	align-items: center;
	min-width: 0;
	gap: 0.6rem;
}

:root.is-app .profile-avatar {
	width: 34px;
	height: 34px;
	flex: none;
	border-width: 1px;
}

:root.is-app .account-actions {
	gap: 0;
	flex: none;
}

:root.is-app .account-actions .icon-btn,
:root.is-app .dialog-heading .icon-btn {
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ink);
}

:root.is-app .account-actions .icon-btn svg {
	width: 22px;
	height: 22px;
}

:root.is-app .notification-center-btn .notification-badge {
	top: 0.3rem;
	right: 0.3rem;
}

:root.is-app .email-verify-banner {
	margin: 0 0.75rem 0.6rem;
}

/* The bottom tab bar replaces the in-page title row. */
:root.is-app .app-heading {
	display: contents;
}

:root.is-app .app-heading h1 {
	display: none;
}

/* ---------- Bottom tab bar (Material 3 style: pill indicator behind the icon) ---------- */

:root.is-app .view-nav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	width: 100%;
	height: calc(var(--tab-bar-height) + env(safe-area-inset-bottom));
	margin: 0;
	padding: 0.4rem 0.25rem env(safe-area-inset-bottom);
	background: var(--card);
	border: 0;
	border-top: 1px solid var(--line);
	border-radius: 0;
	box-shadow: none;
}

:root.is-app .view-nav button {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0.25rem;
	width: 100%;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--ink-soft);
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.1;
	white-space: nowrap;
}

:root.is-app .view-nav button svg {
	box-sizing: content-box;
	width: 22px;
	height: 22px;
	padding: 0.25rem 1.1rem;
	border-radius: 999px;
	transition: background-color 200ms var(--press-ease);
}

/* Touch screens keep :hover on the last-tapped element, so the site's hover shade
   (forms.css `button:hover`) would stick; the :active press below gives feedback instead. */
:root.is-app button:hover {
	transform: none;
	box-shadow: none;
}

:root.is-app .view-nav button.active {
	border: 0;
	background: transparent;
	color: var(--ink);
	font-weight: 800;
}

:root.is-app .view-nav button.active svg {
	background: color-mix(in srgb, var(--accent) 18%, transparent);
	color: var(--accent);
}

:root.is-app .view-nav button .notification-badge {
	position: absolute;
	top: -0.1rem;
	left: calc(50% + 0.55rem);
	right: auto;
	margin: 0;
}

/* ---------- Dialogs become bottom sheets ---------- */

:root.is-app .app-dialog {
	inset: auto 0 0 0 !important;
	width: 100% !important;
	max-width: none !important;
	max-height: 92dvh !important;
	margin: 0 !important;
	padding: 1.6rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom));
	border: 0;
	border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
	box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.22);
	overscroll-behavior: contain;
}

/* Grab handle: decorative, the close button stays the real control. */
:root.is-app .app-dialog::before {
	content: "";
	position: absolute;
	top: 0.55rem;
	left: 50%;
	z-index: 3;
	width: 36px;
	height: 4px;
	margin-left: -18px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ink) 25%, transparent);
}

:root.is-app .settings-dialog,
:root.is-app .club-workspace-dialog {
	height: 92dvh !important;
}

/* Settings scrolls inside its own header/footer, so the sheet itself has no padding. */
:root.is-app .settings-dialog {
	padding: 0 0 env(safe-area-inset-bottom);
}

:root.is-app .settings-header {
	padding-top: 1.6rem;
}

@media (prefers-reduced-motion: no-preference) {
	:root.is-app .app-dialog[open] {
		animation: app-sheet-up 280ms var(--press-ease);
	}

	:root.is-app .app-dialog[open]::backdrop {
		animation: app-fade-in 280ms ease;
	}
}

@keyframes app-sheet-up {
	from { transform: translateY(100%); }
	to { transform: none; }
}

@keyframes app-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* ---------- Touch feedback ---------- */

@media (prefers-reduced-motion: no-preference) {
	:root.is-app button,
	:root.is-app .btn-main,
	:root.is-app .btn-sub {
		transition: transform 120ms var(--press-ease), background-color 150ms ease, opacity 150ms ease;
	}
}

:root.is-app button:active:not(:disabled),
:root.is-app .btn-main:active,
:root.is-app .btn-sub:active {
	transform: scale(0.96);
}

:root.is-app .view-nav button:active {
	transform: none;
}

:root.is-app .view-nav button:active svg,
:root.is-app .account-actions .icon-btn:active {
	background: color-mix(in srgb, var(--ink) 10%, transparent);
}

:root.is-app .btn-main,
:root.is-app .btn-sub {
	min-height: 48px;
	border-radius: 12px;
}

:root.is-app .icon-btn {
	min-width: 44px;
	min-height: 44px;
}

/* ---------- Sign-in screen: an app launch screen, not a landing page ---------- */

:root.is-app .auth-wrap.landing {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100dvh;
	padding: 1.5rem 1.1rem calc(1rem + env(safe-area-inset-bottom));
	gap: 0.5rem;
}

:root.is-app .landing-features {
	display: none;
}

:root.is-app .auth-wrap.landing .landing-hero {
	max-width: none;
	padding: 1rem 0 0.5rem;
	background: transparent;
	border: 0;
}

:root.is-app .auth-wrap.landing .landing-hero {
	position: static;
}

:root.is-app .auth-wrap.landing .theme-toggle-corner {
	position: fixed;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 5;
	border: 0;
	border-radius: 50%;
	background: transparent;
}

:root.is-app .auth-wrap.landing .landing-hero h1 {
	font-size: 1.75rem;
}

:root.is-app .auth-wrap.landing .landing-hero p {
	font-size: 1rem;
}

/* "Welcome Back" already titles the card. */
:root.is-app .auth-wrap.landing #auth-form > h3 {
	display: none;
}

/* Google refuses OAuth inside embedded WebViews ("disallowed_useragent"), so the web button is
   replaced by native Google and Apple sign-in buttons (login.js; #native-signin). */
:root.is-app #google-signin,
:root.is-app #google-status {
	display: none !important;
}

.native-signin[hidden],
.native-signin-btn[hidden] {
	display: none !important;
}

:root.is-app .native-signin {
	display: grid;
	gap: 0.75rem;
}

/* Both buttons share one size and shape; Apple's (per its HIG) is solid black on light screens and
   white on dark ones, with the system font, and is listed first so it is never less prominent. */
:root.is-app .native-signin-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	width: 100%;
	min-height: 48px;
	padding: 0 1rem;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--card);
	color: var(--ink);
	font: 600 1rem/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

:root.is-app .native-signin-btn svg {
	flex: none;
}

:root.is-app .native-signin-btn:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

:root.is-app .native-signin-btn:disabled {
	opacity: 0.55;
	cursor: default;
}

:root.is-app .native-apple {
	border-color: #000;
	background: #000;
	color: #fff;
}

:root.is-app[data-scheme="dark"] .native-apple {
	border-color: #fff;
	background: #fff;
	color: #000;
}

/* ---------- Offline banner (rc:connectivity from the Flutter shell) ---------- */

:root.is-app .app-offline-banner {
	position: fixed;
	top: env(safe-area-inset-top);
	left: 0;
	right: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.25rem;
	padding: 0.4rem 1rem;
	background: var(--ink);
	color: var(--card);
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
}

:root.is-app .app-offline-banner[hidden] {
	display: none;
}

:root.is-app .app-offline-banner svg {
	width: 16px;
	height: 16px;
	flex: none;
}

:root.is-app .auth-wrap.landing .landing-signin {
	max-width: none;
	border-radius: var(--sheet-radius);
	box-shadow: none;
	border: 1px solid var(--line);
}

:root.is-app .auth-wrap.landing .landing-signin .grid {
	padding: 1rem;
}

:root.is-app .auth-wrap.landing .auth-card {
	border: 0;
	background: transparent;
	padding: 0;
}

:root.is-app .auth-wrap.landing .btn-row .btn-main {
	flex: 1;
}

:root.is-app .auth-wrap.landing .legal-links {
	margin-top: auto;
	font-size: 0.78rem;
}

/* =====================================================================
   Phone layout for home.html (app/app-shell.js rearranges the DOM)
   ===================================================================== */

:root.is-app .app-ic {
	width: 22px;
	height: 22px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

:root.is-app .app-label {
	margin: 0;
	color: var(--ink-soft);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Section headings sit under a top bar that already names the screen. */
:root.is-app .app-view .card-title {
	font-size: 1.25rem;
	line-height: 1.2;
}

/* ---------- Top bar: avatar, tab title, bell, settings ---------- */

/* The avatar sheet and the gear replace the website's account dropdown. */
:root.is-app #account-menu,
:root.is-app #club-reports-btn {
	display: none !important;
}

:root.is-app .app-avatar-btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-left: -0.4rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
}

:root.is-app .app-title {
	margin: 0;
	font-family: var(--font-ui);
	font-size: 1.35rem;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0;
}

/* ---------- Shared phone list rows ---------- */

:root.is-app .app-list {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--input-bg);
}

:root.is-app .app-list > button,
:root.is-app .app-row {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;
	width: 100%;
	min-height: 56px;
	margin: 0;
	padding: 0 12px 0 16px;
	border: 0;
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	background: transparent;
	color: var(--ink);
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	text-align: left;
}

:root.is-app .app-list > :last-child {
	border-bottom: 0;
}

:root.is-app .app-row > span:first-of-type {
	flex: 1;
	min-width: 0;
}

:root.is-app .app-row > .app-ic:last-child {
	width: 20px;
	height: 20px;
	color: var(--ink-soft);
}

:root.is-app .app-row-value {
	color: var(--ink-soft);
	font-size: 0.9rem;
	font-weight: 500;
}

:root.is-app .app-wide {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	margin-top: 0.75rem;
}

:root.is-app .app-sheet .dialog-heading {
	margin-bottom: 0.75rem;
}

/* ---------- Library: search, Now reading, stats card ---------- */

:root.is-app .library-dashboard {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1rem;
}

:root.is-app .add-book-section {
	order: -1;
}

:root.is-app .add-book-section > .card-title {
	display: none;
}

:root.is-app .add-book-section .search-panel {
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

:root.is-app .add-book-section #search-status {
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
}

:root.is-app .search-row {
	display: flex;
	gap: 0.5rem;
}

:root.is-app .search-row #book-search {
	flex: 1;
	min-width: 0;
	min-height: 50px;
	border-radius: 12px;
}

:root.is-app .search-row #search-btn {
	flex: none;
	width: auto;
	padding: 0 1rem;
}

/* Search results: a cover thumbnail beside the title, not a cropped full-width strip. */
:root.is-app #search-results {
	gap: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--input-bg);
}

:root.is-app #search-results:empty {
	display: none;
}

:root.is-app #search-results .search-item {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-items: center;
	gap: 0.5rem 0.85rem;
	margin: 0;
	padding: 0.75rem;
	border: 0;
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

:root.is-app #search-results .search-item:last-child {
	border-bottom: 0;
}

:root.is-app #search-results .search-cover {
	grid-row: 1 / span 2;
	width: 56px;
	height: 84px;
	max-height: none;
	margin: 0;
	border-radius: 4px;
	object-fit: cover;
	align-self: start;
}

:root.is-app #search-results .search-item h3 {
	margin: 0;
	overflow: hidden;
	font-size: 1rem;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

:root.is-app #search-results .search-item p {
	margin: 0.2rem 0 0;
	font-size: 0.85rem;
}

:root.is-app #search-results .search-item button {
	grid-column: 2;
	justify-self: start;
	width: auto;
	min-height: 40px;
	padding: 0 1rem;
	border-radius: 999px;
}

:root.is-app .add-book-section .manual-entry {
	margin-top: 0.25rem;
	border: 0;
	padding: 0;
}

:root.is-app .add-book-section .manual-entry > summary {
	display: flex;
	align-items: center;
	min-height: 44px;
	list-style: none;
	color: var(--accent);
	font-weight: 700;
}

:root.is-app .add-book-section .manual-entry > summary::-webkit-details-marker {
	display: none;
}

:root.is-app .now-reading-section {
	border-radius: 16px;
}

:root.is-app .now-reading-section .card-title {
	font-family: var(--font-ui);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

:root.is-app .app-stats-card {
	padding: 0.5rem 1rem 1rem;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--input-bg);
}

:root.is-app .app-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

:root.is-app .app-card-head .link-btn {
	min-height: 44px;
	min-width: 0;
	padding: 0 0.25rem;
	border: 0;
	background: transparent;
	color: var(--accent);
	font-weight: 700;
}

:root.is-app .app-stat-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
}

:root.is-app .app-stat-row b {
	display: block;
	font-size: 1.4rem;
	line-height: 1.1;
}

:root.is-app .app-stat-row span {
	color: var(--ink-soft);
	font-size: 0.8rem;
}

/* ---------- Shelf tab (the old Wishlist view now holds the shelf) ---------- */

:root.is-app #wishlist-view {
	padding: 1rem;
}

:root.is-app #wishlist-view .shelf-section > .toolbar,
:root.is-app #wishlist-view .wishlist-page .toolbar h2 {
	display: none;
}

:root.is-app #wishlist-view .wishlist-page {
	padding: 0;
}

:root.is-app #wishlist-add-btn {
	width: 100%;
}

:root.is-app #wishlist-view.app-show-wishlist #open-book-picker-dialog,
:root.is-app #wishlist-view:not(.app-show-wishlist) .wishlist-page,
:root.is-app #wishlist-view.app-show-wishlist .bookshelf-frame,
:root.is-app #wishlist-view.app-show-wishlist .app-shelf-bar {
	display: none;
}

:root.is-app .status-tabs-row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.75rem;
}

:root.is-app #status-tabs,
:root.is-app .journal-tabs {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5rem;
	overflow-x: auto;
	margin: 0 -1rem;
	padding: 0 1rem;
	scrollbar-width: none;
}

:root.is-app #status-tabs {
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

:root.is-app .journal-tabs {
	margin: 0;
	padding: 3px;
}

:root.is-app #community-view > .toolbar h2,
:root.is-app #community-view .toolbar > div > h2.card-title {
	display: none;
}

:root.is-app #status-tabs button {
	flex: none;
	min-height: 40px;
	padding: 0 1rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--input-bg);
	color: var(--ink);
	font-size: 0.9rem;
	font-weight: 600;
}

:root.is-app #status-tabs button.active {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--card);
}

:root.is-app #open-book-picker-dialog {
	justify-content: center;
	width: 100%;
}

:root.is-app .app-shelf-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0.25rem -0.4rem 0.25rem 0;
}

:root.is-app .app-shelf-bar .hint {
	margin: 0;
}

:root.is-app .app-shelf-bar .icon-btn {
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ink);
}

/* Compact book rows instead of the wooden bookcase. */
:root.is-app #wishlist-view .bookshelf-frame {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

:root.is-app #books {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--input-bg);
}

:root.is-app #books .book {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	grid-template-rows: auto;
	align-items: center;
	gap: 0 12px;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 10px 6px 10px 12px;
	border: 0;
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	transform: none;
}

:root.is-app #books .book:last-child {
	border-bottom: 0;
}

:root.is-app #books .book > :nth-child(n + 4) {
	grid-column: 1 / -1;
}

:root.is-app #books .book-cover {
	width: 44px;
	height: 66px;
	margin: 0;
	border-radius: 4px;
	object-fit: cover;
	font-size: 0.6rem;
}

:root.is-app #books .book h3 {
	margin: 0;
	overflow: hidden;
	font-size: 1rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

:root.is-app #books .book p {
	margin: 2px 0 0;
	font-size: 0.85rem;
}

:root.is-app #books .book .meta {
	margin-top: 4px;
}

:root.is-app #books .book .meta .pill:not([class*="status-"]),
:root.is-app #books .book-quote {
	display: none;
}

:root.is-app #books .book .meta .pill[class*="status-"] {
	display: inline-flex;
	padding: 0.1rem 0.45rem;
	font-size: 0.72rem;
}

:root.is-app #books .book-actions {
	display: flex;
	margin: 0;
	padding: 0;
	border: 0;
}

:root.is-app #books .book-actions > :not(.book-settings-menu),
:root.is-app #toggle-shelf-layout {
	display: none;
}

/* A book's more-actions menu opens as a bottom action sheet; tapping the scrim closes it. */
:root.is-app .book-settings-menu > summary {
	border: 0;
	border-radius: 50%;
	background: transparent;
	list-style: none;
}

/* The site lifts a card with an open menu (z-index: 5), which would trap the fixed
   sheet below the tab bar; without it the sheet layers against the whole page. */
:root.is-app #books .book:has(.book-settings-menu[open]) {
	z-index: auto;
}

:root.is-app .book-settings-menu[open] > summary::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 60;
	background: var(--backdrop);
}

:root.is-app .book-settings-menu[open] .book-settings-actions {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 61;
	display: flex;
	flex-direction: column;
	gap: 0;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 1.25rem 1rem calc(1rem + env(safe-area-inset-bottom));
	border: 0;
	border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
	background: var(--dialog-bg);
	box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.22);
	transform: none;
}

@media (prefers-reduced-motion: no-preference) {
	:root.is-app .book-settings-menu[open] .book-settings-actions {
		animation: app-sheet-up 260ms var(--press-ease);
	}
}

/* #books out-ranks the compact-list rule that hides every action button but the menu. */
:root.is-app #books .book-settings-actions button {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	min-height: 54px;
	margin: 0;
	padding: 0 0.5rem;
	border: 0;
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	background: transparent;
	color: var(--ink);
	font-size: 1rem;
	font-weight: 600;
	text-align: left;
}

:root.is-app .book-settings-actions button:last-child {
	border-bottom: 0;
}

:root.is-app .book-settings-actions .remove {
	color: var(--danger);
}

/* Filter & sort sheet. */
:root.is-app .app-filter-body .shelf-controls {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
	width: 100%;
}

:root.is-app .app-filter-body .shelf-controls > * {
	width: 100%;
	min-height: 50px;
}

:root.is-app .app-filter-body .bookcase-color-wrap {
	display: none;
}

/* ---------- My Journal: segmented sections, Stats moved in from Library ---------- */

:root.is-app #shelf-view .journal-page > .toolbar h2 {
	display: none;
}

:root.is-app #shelf-view .journal-page {
	padding: 1rem;
}

:root.is-app .journal-tabs {
	width: 100%;
}

:root.is-app .journal-tabs button {
	flex: 1 0 auto;
}

:root.is-app #journal-panel-stats .stats-section > .card-title {
	display: none;
}

:root.is-app #journal-panel-stats .stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

/* Settings on/off choices read as switches, the phone convention. */
:root.is-app .settings-group .checkbox-row {
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	min-height: 52px;
}

:root.is-app .settings-group input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	flex: none;
	width: 46px;
	height: 28px;
	margin: 0;
	border: 0;
	border-radius: 14px;
	background: var(--line);
	cursor: pointer;
	transition: background-color 150ms ease;
}

:root.is-app .settings-group input[type="checkbox"]::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	transition: left 150ms ease;
}

:root.is-app .settings-group input[type="checkbox"]:checked {
	background: var(--accent);
}

:root.is-app .settings-group input[type="checkbox"]:checked::after {
	left: 21px;
}

:root.is-app .settings-group input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* Series: one summary row, scrolling status chips, compact controls. */
:root.is-app .series-tracker > .toolbar,
:root.is-app .series-tracker > .toolbar h3 {
	display: none;
}

:root.is-app .series-tracker-stats {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0;
	padding: 0.75rem 0.25rem;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--input-bg);
}

/* Number on top, label under it: a label that wraps to two lines grows downwards,
   so every number stays on the same line. */
:root.is-app .series-tracker-stats > div {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 0.15rem;
	min-width: 0;
	padding: 0 0.15rem;
	border: 0;
	border-left: 1px solid var(--line);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	text-align: center;
}

:root.is-app .series-tracker-stats > div:first-child {
	border-left: 0;
}

:root.is-app .series-tracker-stats strong {
	order: -1;
	font-size: 1.3rem;
	line-height: 1.1;
}

/* Compact series cards: title and star on one line, small status pills, then the
   read count, books-left field and Edit on a single row. */
:root.is-app .series-tracker-list {
	gap: 0.5rem;
}

:root.is-app .series-item {
	align-items: center;
	gap: 0.35rem 0.5rem;
	padding: 0.65rem 0.5rem 0.65rem 0.9rem;
	border-radius: 14px;
}

:root.is-app .series-item > strong {
	order: -2;
	flex: 1 1 calc(100% - 48px);
	min-width: 0;
	font-size: 1rem;
	line-height: 1.25;
}

:root.is-app .series-item > .favorite {
	order: -1;
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
	margin: -0.35rem 0 0 auto;
	border: 0;
	border-radius: 50%;
	background: transparent;
}

:root.is-app .series-item > .pill {
	padding: 0.1rem 0.45rem;
	font-size: 0.72rem;
}

:root.is-app .series-item > .meta {
	font-size: 0.8rem;
}

:root.is-app .series-item > label {
	gap: 0.4rem;
	font-size: 0.8rem;
}

:root.is-app .series-item > label input {
	width: 3.5rem;
	min-height: 36px;
	padding: 0 0.5rem;
}

/* Drop the panel around the whole tracker: the page is already the container. */
:root.is-app .series-tracker.journal-panel {
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

:root.is-app .series-item > button:not(.favorite),
:root.is-app .series-item > .btn-sub {
	min-height: 36px;
	padding: 0 0.85rem;
	font-size: 0.85rem;
}

:root.is-app .series-item > .series-missing {
	flex-basis: 100%;
	margin-top: 0.15rem;
	font-size: 0.85rem;
}

:root.is-app .series-tracker-stats span {
	color: var(--ink-soft);
	font-size: 0.68rem;
	line-height: 1.2;
}

:root.is-app .series-filter-pills {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5rem;
	overflow-x: auto;
	margin: 0 -1rem;
	padding: 0 1rem;
	scrollbar-width: none;
}

:root.is-app .series-filter-pills button {
	flex: none;
	min-height: 40px;
	border-radius: 999px;
}

:root.is-app .series-tracker-select-group {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
}

:root.is-app .series-tracker-select-group select {
	width: 100%;
}

/* Collective challenge detail: stack the heading, the "pick your books" notice and its
   buttons, instead of squeezing them side by side (which wrapped text one word per line). */
:root.is-app .collective-feature-heading {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
}

:root.is-app .collective-feature-heading > strong {
	display: block;
	font-size: 1rem;
}

:root.is-app .challenge-setup-banner {
	flex-direction: column;
	align-items: stretch;
	gap: 0.75rem;
}

:root.is-app .challenge-banner-info {
	align-items: flex-start;
	gap: 0.6rem;
}

:root.is-app .challenge-banner-info > span {
	flex: 1;
	min-width: 0;
}

:root.is-app .challenge-banner-actions {
	flex-direction: column;
	align-items: stretch;
	gap: 0.5rem;
}

:root.is-app .challenge-banner-actions button {
	justify-content: center;
	width: 100%;
	white-space: normal;
}

/* ---------- Community: the segmented tabs already name each section ---------- */

/* Club chat rooms read as tappable rows: card, room icon, count, chevron. */
:root.is-app .club-room-list {
	padding: 0.75rem;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--input-bg);
}

:root.is-app .club-room-row {
	position: relative;
	width: 100%;
	min-height: 60px;
	padding: 0.5rem 2.5rem 0.5rem 0.5rem;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--card);
	color: var(--ink);
	text-align: left;
}

:root.is-app .club-room-row::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 1rem;
	width: 9px;
	height: 9px;
	margin-top: -5px;
	border-top: 2px solid var(--ink-soft);
	border-right: 2px solid var(--ink-soft);
	transform: rotate(45deg);
}

:root.is-app .club-room-item + .club-room-item {
	margin-top: 0.5rem;
}

:root.is-app .club-room-icon {
	background: color-mix(in srgb, var(--accent) 14%, transparent);
	color: var(--accent);
}

/* The spoiler tip's dismiss button sat on top of its text. */
:root.is-app .chapter-safety-note {
	position: relative;
	padding-right: 3.25rem;
}

:root.is-app .chapter-safety-note > .icon-btn {
	position: absolute;
	top: 0.4rem;
	right: 0.4rem;
	border: 0;
	border-radius: 50%;
	background: transparent;
}

:root.is-app #community-view .community-section-heading {
	justify-content: flex-end;
	margin-bottom: 0.25rem;
}

:root.is-app #community-view .community-section-heading .card-title,
:root.is-app #community-view .community-section-heading .section-kicker {
	display: none;
}

/* A friend's chat opens full screen with a back arrow and the message box pinned low. */
:root.is-app .friends-hub:not(.app-chat-open) .friend-chat-room,
:root.is-app .friends-hub:not(.app-chat-open) .app-chat-back {
	display: none;
}

:root.is-app .friends-hub.app-chat-open .friend-chat-room {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: flex;
	flex-direction: column;
	height: 100dvh;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--card);
}

@media (prefers-reduced-motion: no-preference) {
	:root.is-app .friends-hub.app-chat-open .friend-chat-room {
		animation: app-push-in 240ms var(--press-ease);
	}
}

@keyframes app-push-in {
	from { transform: translateX(24px); opacity: 0; }
	to { transform: none; opacity: 1; }
}

:root.is-app .app-chat-open .friend-chat-header {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	min-height: var(--app-bar-height);
	padding: 0 0.5rem;
	border-bottom: 1px solid var(--line);
}

:root.is-app .app-chat-open .app-chat-back {
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ink);
}

:root.is-app .app-chat-open .friend-chat-title {
	flex: 1;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	font-size: 1.1rem;
	font-weight: 800;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Composer on one row: attach, message, send. */
:root.is-app .app-chat-open .chat-form {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: end;
	gap: 0.25rem 0.5rem;
}

:root.is-app .app-chat-open .chat-form .field {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
}

:root.is-app .app-chat-open .chat-attachment-row {
	display: contents;
}

:root.is-app .app-chat-open #chat-attachment-btn {
	grid-column: 1;
	grid-row: 1;
}

:root.is-app .app-chat-open .chat-send-btn {
	grid-column: 3;
	grid-row: 1;
	min-width: 48px;
	border-radius: 50%;
}

:root.is-app .app-chat-open #chat-attachment-name,
:root.is-app .app-chat-open #chat-status {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 0.8rem;
}

:root.is-app .app-chat-open #chat-text {
	min-height: 48px;
	max-height: 128px;
	padding: 12px 16px;
	border-radius: 24px;
	resize: none;
}

:root.is-app .app-chat-open .friend-activity-drawer {
	padding: 0 1rem;
}

:root.is-app .app-chat-open #chat-messages {
	flex: 1;
	min-height: 0;
	max-height: none;
	overflow-y: auto;
	padding: 1rem;
	border: 0;
	background: transparent;
}

:root.is-app .app-chat-open .chat-form {
	flex: none;
	margin: 0;
	padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom));
	border: 0;
	border-top: 1px solid var(--line);
	border-radius: 0;
	background: var(--card);
}

/* ---------- Settings: a full-screen list of sections, each its own page ---------- */

:root.is-app .settings-dialog {
	height: 100dvh !important;
	max-height: 100dvh !important;
	border-radius: 0;
}

:root.is-app .settings-dialog::before,
:root.is-app .settings-tabs,
:root.is-app .settings-dialog:not(.app-sub) .settings-panel,
:root.is-app .settings-dialog:not(.app-sub) .settings-footer,
:root.is-app .settings-dialog:not(.app-sub) .app-settings-back,
:root.is-app .settings-dialog.app-sub .app-settings-hub,
:root.is-app .settings-dialog.app-sub [data-close-dialog="settings-dialog"] {
	display: none !important;
}

:root.is-app .settings-header {
	padding-top: 0.5rem;
}

:root.is-app .settings-dialog .dialog-heading {
	justify-content: flex-start;
	gap: 0.25rem;
}

:root.is-app .settings-dialog .dialog-heading h2 {
	flex: 1;
	margin: 0;
}

:root.is-app .app-settings-hub {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 0.5rem 0 1rem;
}

:root.is-app .app-settings-me {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--input-bg);
}

:root.is-app .app-settings-avatar {
	width: 52px;
	height: 52px;
	flex: none;
	border-radius: 50%;
	background: var(--btn-sub-bg) center / cover no-repeat;
}

:root.is-app .app-settings-name {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 800;
}

:root.is-app .app-settings-email {
	margin: 0;
}

:root.is-app .app-danger > .app-label {
	padding: 0.75rem 16px 0.25rem;
	color: var(--danger);
}

:root.is-app .app-danger > button {
	color: var(--danger);
}

/* styles/admin.css */
/* Admin console (/admin): dense, card-based so every view works at phone width. */
.admin-page {
	max-width: 980px;
	padding-bottom: 3rem;
}

/* .wrap is a grid; without this the scrolling tab row widens the page on phones. */
.admin-page > *,
#admin-app {
	min-width: 0;
}

.admin-gate,
.admin-empty {
	padding: 1.5rem 0;
	color: var(--ink-soft);
	text-align: center;
	list-style: none;
}

.admin-muted {
	color: var(--ink-soft);
	font-size: 0.875rem;
}

.admin-stats {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0.6rem;
	margin-bottom: 1rem;
}

.admin-stat {
	display: grid;
	gap: 0.15rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--card);
	color: var(--ink);
	text-decoration: none;
	transition: border-color 150ms ease;
}

.admin-stat:hover,
.admin-stat:focus-visible {
	border-color: var(--accent);
}

.admin-stat-value {
	font-size: 1.6rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.admin-stat-label {
	color: var(--ink-soft);
	font-size: 0.85rem;
}

.admin-online-dot {
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	margin-right: 0.35rem;
	border-radius: 50%;
	background: var(--success);
	vertical-align: 0.05em;
}

.admin-tabs {
	display: flex;
	gap: 0.25rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--line);
	overflow-x: auto;
	scrollbar-width: none;
}

.admin-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	padding: 0 0.9rem;
	border-bottom: 2px solid transparent;
	color: var(--ink-soft);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.admin-tab svg {
	width: 1.05rem;
	height: 1.05rem;
}

.admin-tab:hover {
	color: var(--ink);
}

.admin-tab[aria-current="page"] {
	border-bottom-color: var(--accent);
	color: var(--ink);
}

.admin-badge {
	min-width: 1.35rem;
	padding: 0.05rem 0.4rem;
	border-radius: 999px;
	background: var(--danger);
	color: #fff;
	font-size: 0.75rem;
	text-align: center;
}

:root[data-theme="dark"] .admin-badge {
	color: #25272c;
}

.admin-content:focus {
	outline: none;
}

.admin-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.85rem;
}

.admin-toolbar h1,
.admin-card-head h1 {
	font-size: 1.35rem;
}

.admin-back {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 44px;
}

.admin-segmented {
	display: inline-flex;
	padding: 3px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--btn-sub-bg);
}

.admin-segment {
	min-height: 38px;
	padding: 0 0.9rem;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--ink-soft);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.admin-segment[aria-pressed="true"] {
	background: var(--card);
	color: var(--ink);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.admin-card {
	display: grid;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--card);
	list-style: none;
}

.admin-card.is-focused {
	border-color: var(--accent);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}

.admin-card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.admin-card-head > div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
}

.admin-card-type {
	font-weight: 600;
}

.admin-card-title,
.admin-section-title {
	font-size: 1.05rem;
}

.admin-section-title {
	margin: 1.4rem 0 0.6rem;
}

.admin-quote {
	display: grid;
	gap: 0.4rem;
	padding: 0.75rem 0.9rem;
	border-left: 3px solid var(--line);
	border-radius: 0 8px 8px 0;
	background: var(--strip-bg);
	font-family: var(--font-read);
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.admin-quote footer {
	font-family: var(--font-ui);
}

.admin-reply {
	padding: 0.75rem 0.9rem;
	border-left: 3px solid var(--accent);
	border-radius: 0 8px 8px 0;
	background: var(--strip-bg);
	overflow-wrap: anywhere;
}

.admin-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0.6rem 1rem;
}

.admin-facts dt {
	color: var(--ink-soft);
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.admin-facts dd {
	overflow-wrap: anywhere;
}

.admin-pill {
	display: inline-block;
	margin-left: 0.3rem;
	padding: 0.1rem 0.5rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--tint-pill-bg);
	color: var(--ink-soft);
	font-size: 0.75rem;
	font-weight: 600;
	vertical-align: middle;
	white-space: nowrap;
}

.admin-card-head .admin-pill:first-child {
	margin-left: 0;
}

.admin-pill.is-warn {
	border-color: var(--tint-pill-unread-border);
	background: var(--tint-pill-unread-bg);
	color: var(--tint-pill-unread-color);
}

.admin-pill.is-danger {
	border-color: color-mix(in srgb, var(--danger) 45%, transparent);
	background: color-mix(in srgb, var(--danger) 12%, transparent);
	color: var(--danger);
}

.admin-pill.is-ok {
	border-color: color-mix(in srgb, var(--success) 45%, transparent);
	background: color-mix(in srgb, var(--success) 12%, transparent);
	color: var(--success);
}

.admin-alert {
	padding: 0.7rem 0.9rem;
	border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
	border-radius: 10px;
	background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.admin-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.admin-actions > button,
.admin-confirm-actions > button {
	min-height: 44px;
}

/* The danger action sits after the others and is the only filled red button on a card. */
.admin-danger.btn-main {
	background: var(--danger);
	color: #fff;
}

:root[data-theme="dark"] .admin-danger.btn-main {
	color: #25272c;
}

.admin-danger-outline {
	border-color: color-mix(in srgb, var(--danger) 55%, transparent);
	color: var(--danger);
}

.admin-actions button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.admin-search {
	position: relative;
	margin-bottom: 0.75rem;
}

.admin-search svg {
	position: absolute;
	top: 50%;
	left: 0.85rem;
	width: 1.1rem;
	height: 1.1rem;
	color: var(--ink-soft);
	transform: translateY(-50%);
	pointer-events: none;
}

.admin-search input {
	width: 100%;
	min-height: 46px;
	padding-left: 2.5rem;
}

.admin-user-list,
.admin-history,
.admin-error-list,
.admin-status-list {
	display: grid;
	gap: 0.4rem;
	list-style: none;
}

.admin-list-caption {
	color: var(--ink-soft);
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.admin-user-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.35rem 1rem;
	min-height: 52px;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--card);
	color: var(--ink);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.admin-user-row:hover,
.admin-user-row:focus-visible {
	border-color: var(--accent);
}

.admin-user-tags {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
}

.admin-history li {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--line);
}

.admin-reply-form {
	display: grid;
	gap: 0.45rem;
}

.admin-reply-form label {
	font-weight: 600;
	font-size: 0.9rem;
}

.admin-reply-form textarea {
	width: 100%;
	resize: vertical;
}

.admin-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 0.75rem;
}

.admin-grid .admin-card {
	align-content: start;
	margin-bottom: 0;
}

.admin-status-list li {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 0.5rem;
}

.admin-dot {
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--line);
}

.admin-dot.is-ok {
	background: var(--success);
}

.admin-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
}

.admin-table th,
.admin-table td {
	padding: 0.35rem 0.25rem;
	border-bottom: 1px solid var(--line);
	text-align: left;
}

.admin-table th {
	color: var(--ink-soft);
	font-size: 0.8rem;
}

.admin-error-message {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.85rem;
	overflow-wrap: anywhere;
}

.admin-confirm-form {
	display: grid;
	gap: 0.85rem;
}

.admin-confirm-actions {
	justify-content: flex-end;
}

.admin-toast {
	position: fixed;
	bottom: calc(1rem + env(safe-area-inset-bottom));
	left: 50%;
	z-index: 50;
	max-width: calc(100% - 2rem);
	padding: 0.7rem 1rem;
	border-radius: 10px;
	background: var(--ink);
	color: var(--bg-1);
	box-shadow: var(--shadow);
	transform: translateX(-50%);
}

.admin-toast.is-error {
	background: var(--danger);
	color: #fff;
}

@media (max-width: 640px) {
	.admin-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Five tiles in two columns: the last one spans the row instead of sitting alone. */
	.admin-stat:last-child {
		grid-column: 1 / -1;
	}

	.admin-tab {
		flex: 1;
		justify-content: center;
		padding: 0 0.5rem;
	}

	.admin-actions > button {
		flex: 1 1 auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.admin-stat {
		transition: none;
	}
}

.admin-quote > .admin-pill {
	justify-self: start;
	margin-left: 0;
}

/* The account menu's "Admin console" entry (home page). */
.account-menu-count {
	margin-left: auto;
}

/* The "Admin" shortcut on another reader's profile. */
a.rp-edit-btn {
	color: var(--ink);
	text-decoration: none;
}

/* Admin-only controls inside the app: reviews on the book page, other people's club messages. */
.book-review-admin-remove {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 44px;
	color: var(--danger);
}

.book-review-admin-remove svg {
	width: 1rem;
	height: 1rem;
}

.chat-admin-delete-btn {
	color: var(--danger);
}

.profile-admin-suspend.is-suspend {
	border-color: color-mix(in srgb, var(--danger) 55%, transparent);
	color: var(--danger);
}

/* Reported users list: the count leads, so the worst offenders stand out. */
.admin-reported-who {
	display: grid;
	gap: 0.3rem;
}

.admin-reported-reasons .admin-pill:first-child {
	margin-left: 0;
}

.admin-report-count {
	display: inline-flex;
	align-items: baseline;
	gap: 0.25rem;
	font-size: 1.25rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.admin-report-count small {
	color: var(--ink-soft);
	font-size: 0.8rem;
	font-weight: 600;
}

/* Dashboard: KPI tiles with sparklines, then a grid of chart cards that each link to their tab. */
.admin-kpis {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0.6rem;
	margin-bottom: 0.75rem;
}

.admin-kpi {
	align-content: start;
}

.admin-kpi-foot {
	display: grid;
	gap: 0.35rem;
	margin-top: 0.2rem;
	font-size: 0.8rem;
}

.admin-kpi-foot .admin-muted {
	font-size: 0.8rem;
}

.admin-spark {
	width: 100%;
	height: 28px;
}

.admin-dash-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

.admin-dash-card {
	align-content: start;
	margin-bottom: 0;
}

.admin-dash-card .admin-card-title .admin-pill {
	vertical-align: 0.1em;
}

.admin-more {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	min-height: 44px;
	font-size: 0.9rem;
}

.admin-more svg {
	width: 1rem;
	height: 1rem;
}

.admin-chart {
	position: relative;
	padding-top: 1.1rem;
}

.admin-chart svg {
	display: block;
	width: 100%;
	height: 120px;
	overflow: visible;
}

.admin-chart rect:not(.admin-chart-hit) {
	fill: var(--accent);
}

.admin-chart rect.is-warn {
	fill: var(--tint-pill-unread-color);
}

.admin-chart rect.is-danger,
.admin-swatch.is-danger {
	fill: var(--danger);
	background: var(--danger);
}

.admin-chart rect.is-danger-soft,
.admin-swatch.is-danger-soft {
	fill: color-mix(in srgb, var(--danger) 40%, var(--card));
	background: color-mix(in srgb, var(--danger) 40%, var(--card));
}

.admin-chart-hit {
	fill: transparent;
}

.admin-chart g:hover .admin-chart-hit {
	fill: color-mix(in srgb, var(--ink) 6%, transparent);
}

.admin-chart-base {
	stroke: var(--line);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.admin-chart-area {
	fill: color-mix(in srgb, var(--accent) 16%, transparent);
}

.admin-chart-stroke {
	fill: none;
	stroke: var(--accent);
	stroke-width: 2;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.admin-chart circle {
	fill: var(--accent);
	opacity: 0;
}

.admin-chart g:hover circle {
	opacity: 1;
}

.admin-chart-max {
	position: absolute;
	top: 0;
	left: 0;
	color: var(--ink-soft);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
}

.admin-chart-axis {
	display: flex;
	justify-content: space-between;
	margin-top: 0.3rem;
	color: var(--ink-soft);
	font-size: 0.75rem;
}

.admin-breakdown,
.admin-legend {
	display: grid;
	gap: 0.45rem;
	padding: 0;
	list-style: none;
}

.admin-breakdown li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.2rem 0.75rem;
	font-size: 0.9rem;
}

.admin-breakdown-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.admin-breakdown-count {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.admin-breakdown-track {
	grid-column: 1 / -1;
	height: 6px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ink) 8%, transparent);
	overflow: hidden;
}

.admin-breakdown-track span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--accent);
}

.admin-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	font-size: 0.85rem;
}

.admin-swatch {
	display: inline-block;
	width: 0.7rem;
	height: 0.7rem;
	margin-right: 0.35rem;
	border-radius: 3px;
	vertical-align: -0.05em;
}

.admin-totals {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-totals dd {
	font-size: 1.15rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
	.admin-dash-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.admin-kpis {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Cards without a Details link keep the same header height as those with one. */
.admin-dash-card .admin-card-head {
	min-height: 44px;
}