/* Per-app theme tokens (the app's dark/light palette via light-dark()),
   moved here so the shared css/general.css can be app-agnostic. */
/* Theme tokens via CSS light-dark(): each token is declared once as
   light-dark(<light>, <dark>) and resolves off the element's `color-scheme`.
   "system" leaves color-scheme: light dark (follows the OS); the data-theme
   overrides below force one or the other. The teal brand hue comes from
   variables.css; light uses the darker teal for contrast on white.
   Keep the light/dark --bg in sync with THEME_COLOR in js/theme.js. */
:root {
	color-scheme: light dark;

	--bg:           light-dark(#f6f1e7, #16130d);
	--bg-grad-top:  light-dark(#e8dfc8, #1e2a22);
	--surface:      light-dark(#fffdf8, #201c14);
	--surface-2:    light-dark(#f0e9d9, #262019);
	--surface-3:    light-dark(#e5dcc6, #322a20);
	--text:         light-dark(#23201a, #f3efe6);
	--text-dim:     light-dark(#6b6555, #b0a892);
	--text-faint:   light-dark(#9a927c, #7a725f);
	--color-primary-on-surface:     light-dark(var(--color-primary-700), var(--color-primary-400));
	--color-primary-grad:  linear-gradient(135deg,
		light-dark(var(--color-primary-dark), var(--color-primary)) 0%,
		light-dark(var(--color-primary), var(--color-primary-400)) 100%);
	--border:       light-dark(#e4dcc7, #322a20);
	--danger:       light-dark(#dc2626, #ef4444);
	--nav-bg:       light-dark(rgba(246, 241, 231, 0.9), rgba(22, 19, 13, 0.92));
	--player-h:     76px;
	--nav-h:        62px;
}

/* ─── Page headers ──────────────────────────────────────────────────────── */
.page-title {
	font: var(--font-h3);
	margin: var(--space-2xs) 0 var(--space-m);
}
.section-title {
	font: var(--font-h5);
	margin: var(--space-l) 0 var(--space-s);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.top-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s);
	margin-bottom: var(--space-m);
}
.top-bar .brand {
	font: var(--font-h4);
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}
/* Icons are inline SVG (js/icons.js) carrying class="ms", so every existing
   `.ms { font-size: … }` rule still sizes them: the svg is 1em square and
   inherits color via fill. Replaces the old Material Symbols webfont. */
svg.ms {
	width: 1em;
	height: 1em;
	fill: currentColor;
	vertical-align: -0.15em;
	flex-shrink: 0;
}

.top-bar .brand .ms { color: var(--color-primary); font-size: 26px; }

.icon-btn {
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text);
	width: 40px; height: 40px;
	border-radius: 50%;
	display: grid; place-items: center;
	cursor: pointer;
}
.icon-btn:hover { background: var(--surface-3); }
.icon-btn .ms { font-size: 22px; }
/* Toggle-style icon button (aria-pressed), e.g. the editor's auto-bold switch. */
.icon-btn.on {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

.link-btn {
	background: none;
	border: none;
	color: var(--text-dim);
	font: var(--font-body-medium-semibold);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	cursor: pointer;
	padding: var(--space-2xs) 0;
}
.link-btn:hover { color: var(--text); }
.link-btn .ms { font-size: 20px; }
.danger-text { color: var(--danger); }
.danger-text:hover { color: var(--danger); }

.play-btn {
	background: var(--color-primary-grad);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: var(--space-s) var(--space-l);
	font: var(--font-body-medium-bold);
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	cursor: pointer;
	white-space: nowrap;
}
.play-btn:active { transform: scale(0.97); }
.play-btn:disabled { background: var(--surface-3); color: var(--text-faint); cursor: not-allowed; }
.ghost-btn {
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: 999px;
	padding: var(--space-s) var(--space-m);
	font: var(--font-body-medium-medium);
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	cursor: pointer;
}
.ghost-btn:hover { background: var(--surface-3); }

.row-icon {
	background: none;
	border: none;
	color: var(--text-faint);
	display: grid;
	place-items: center;
	padding: var(--space-2xs);
	cursor: pointer;
	border-radius: 50%;
	flex-shrink: 0;

	&:hover { color: var(--text); background: var(--surface-3); }
	&:disabled { opacity: 0.3; cursor: default; background: none; }
	& .ms { font-size: 20px; }
}

/* ─── Filter chips ──────────────────────────────────────────────────────── */
.chip-row {
	display: flex;
	gap: var(--space-xs);
	overflow-x: auto;
	padding-bottom: var(--space-xs);
	margin-bottom: var(--space-s);
	-webkit-overflow-scrolling: touch;
}
.chip {
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text-dim);
	border-radius: 999px;
	padding: var(--space-xs) var(--space-m);
	font: var(--font-body-small-semibold);
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
}
.chip:hover { background: var(--surface-3); }
.chip.on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.chip {
	display: inline-grid;
	grid-auto-flow: column;
	align-items: center;
	gap: var(--space-xs);
}
.chip-dot {
	width: 10px; height: 10px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.25);
}
.chip.on .chip-dot { border-color: rgba(255, 255, 255, 0.6); }
.chip-add { padding: var(--space-xs) var(--space-s); }
.chip-add .ms { font-size: 18px; display: block; }

/* ─── Top-bar list menu ─────────────────────────────────────────────────── */
.top-bar-end { display: grid; grid-auto-flow: column; align-items: center; gap: var(--space-s); }
.list-menu-wrap { position: relative; }
.menu-backdrop { position: fixed; inset: 0; z-index: 15; }
.list-menu {
	position: absolute;
	inset-inline-end: 0;
	top: calc(100% + var(--space-xs));
	z-index: 20;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: var(--shadow-card, 0 8px 24px rgba(0, 0, 0, 0.4));
	padding: var(--space-xs);
	min-width: 200px;
	display: grid;

	& button {
		background: none;
		border: none;
		color: var(--text);
		font: var(--font-body-medium-semibold);
		display: grid;
		grid-auto-flow: column;
		justify-content: start;
		align-items: center;
		gap: var(--space-s);
		padding: var(--space-s) var(--space-s);
		border-radius: 8px;
		cursor: pointer;
		text-align: start;
		white-space: nowrap;

		&:hover { background: var(--surface-3); }
		&:disabled { opacity: 0.4; cursor: default; background: none; }
		& .ms { font-size: 20px; }
	}
}

/* ─── List editor modal ─────────────────────────────────────────────────── */
.modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 50;
	background: rgba(0, 0, 0, 0.5);
	display: grid;
	place-items: center;
	padding: var(--space-l);
}
.list-editor, .todo-editor, .image-drop {
	width: min(420px, 100%);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-modal, 20px);
	padding: var(--space-l);
	/* Grid auto-rows size to content, so the name field keeps its natural
	   single-line height instead of stretching like a flex column would. */
	display: grid;
	gap: var(--space-m);

	& h3 { font: var(--font-h5); margin: 0; }
	& p { margin: 0; }
	& .color-row { border-top: none; padding-top: 0; margin-top: 0; }
}
/* Labelled field rows in the to-do editor: caption above a full-width control. */
.todo-editor .field {
	display: grid;
	gap: var(--space-xs);

	& > span { font: var(--font-body-small-semibold); color: var(--text-dim); }
	& .todo-date, & .todo-recur { width: 100%; }
}
.modal-actions {
	display: grid;
	grid-auto-flow: column;
	justify-content: end;
	align-items: center;
	gap: var(--space-s);
}

/* ─── Add to-do ─────────────────────────────────────────────────────────── */
/* Grid (not flex): the global `form` rule forces flex-direction: column, which
   would turn .todo-input's flex-basis into a 200px-tall field. */
/* Two rows: the text input spans the top; due date, repeat, and Add sit below
   so four controls never crowd a single phone-width line. */
.todo-add {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--space-xs);
	margin-bottom: var(--space-m);
}
.todo-input { grid-column: 1 / -1; }
.todo-input {
	min-width: 0;
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: 12px;
	padding: var(--space-s) var(--space-m);
	font: var(--font-body-large-regular);
}
.todo-date, .todo-recur {
	min-width: 0;
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: 12px;
	padding: var(--space-s) var(--space-s);
	font: var(--font-body-medium-regular);
	color-scheme: inherit; /* native pickers follow the active theme */
}
.todo-input:focus, .todo-date:focus, .todo-recur:focus { outline: none; border-color: var(--color-primary); }

/* ─── To-do list ────────────────────────────────────────────────────────── */
.todo-list { display: flex; flex-direction: column; gap: var(--space-xs); }
.todo-row {
	display: flex;
	align-items: center;
	gap: var(--space-s);
	padding: var(--space-s) var(--space-s);
	border-radius: 12px;
	background: var(--surface);
	border: 1px solid var(--border);
}
.todo-row.dragging {
	border-color: var(--color-primary);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.todo-row .drag-handle {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	color: var(--text-faint);
	cursor: grab;
	touch-action: none;

	&:active { cursor: grabbing; }
	& .ms { font-size: 22px; }
}
.todo-check {
	background: none;
	border: none;
	padding: 0;
	color: var(--text-faint);
	cursor: pointer;
	display: grid;
	place-items: center;
	flex-shrink: 0;

	& .ms { font-size: 26px; }
}
.todo-row.done .todo-check { color: var(--color-primary); }
.todo-main {
	flex: 1;
	min-width: 0;
	cursor: pointer;

	&:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 6px; }
}
.todo-text { font: var(--font-body-large-medium); }
.todo-row.done .todo-text { color: var(--text-dim); text-decoration: line-through; }
.todo-meta { display: flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-2xs); flex-wrap: wrap; }
.todo-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	font: var(--font-body-xsmall-bold);
	color: var(--color-primary-on-surface);
	background: color-mix(in oklch, var(--color-primary) 18%, transparent);
	border-radius: 999px;
	padding: var(--space-3xs) var(--space-xs);

	& .ms { font-size: 14px; }
}
.todo-due {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	font: var(--font-body-small-regular);
	color: var(--text-dim);
}
.todo-due .ms { font-size: 15px; }
.todo-due.overdue { color: var(--danger); }

/* ─── Notes grid ────────────────────────────────────────────────────────── */
.notes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: var(--space-m);
}
.note-card {
	position: relative;
	display: block;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-card, 16px);
	padding: var(--space-m) var(--space-m) var(--space-s);
	min-height: 96px;
	cursor: pointer;
	transition: transform 0.12s, border-color 0.12s;
	overflow: hidden;
}
.note-card:active { transform: scale(0.98); }
.note-card:hover { border-color: var(--color-primary); }
.note-title { font: var(--font-body-large-bold); margin-bottom: var(--space-xs); padding-inline-end: var(--space-xl); }
.note-body {
	font: var(--font-body-medium-regular);
	color: var(--text-dim);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 6;
	line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
	white-space: pre-wrap;
}
.note-thumb {
	display: block;
	width: 100%;
	max-height: 160px;
	object-fit: cover;
	border-radius: 10px;
	margin: var(--space-3xs) 0 var(--space-xs);
}
.note-date {
	font: var(--font-body-xsmall-regular);
	color: var(--text-faint);
	margin-top: var(--space-s);
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
}
/* Attachment count, pushed to the far end of the date row. */
.note-attach {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-inline-start: auto;

	& svg.ms { font-size: 14px; }
}
.note-pin {
	position: absolute;
	top: var(--space-xs); inset-inline-end: var(--space-xs);
	background: none;
	border: none;
	color: var(--text-faint);
	cursor: pointer;
	padding: var(--space-2xs);
	border-radius: 50%;
	display: grid; place-items: center;

	& .ms { font-size: 18px; }
	&:hover { color: var(--text); background: rgba(0, 0, 0, 0.2); }
	&.on { color: var(--color-primary-on-surface); }
}

/* ─── Note color themes (cards + editor) ────────────────────────────────── */
/* Tints are theme-aware: pale in light mode (so dark --text stays legible),
   deep in dark mode (so light --text stays legible). See general.css. */
.color-default { --note-tint: var(--surface-2); }
.color-yellow  { --note-tint: light-dark(#f7eeba, #3a3414); }
.color-green   { --note-tint: light-dark(#cdebd9, #14321f); }
.color-blue    { --note-tint: light-dark(#cfe2f3, #14283a); }
.color-pink    { --note-tint: light-dark(#f4d4e3, #3a1428); }
.color-purple  { --note-tint: light-dark(#e3d3f3, #281438); }
.note-card.color-default { background: var(--surface-2); }
.note-card:not(.color-default) { background: var(--note-tint); }

/* ─── Note editor ───────────────────────────────────────────────────────── */
.editor {
	position: relative; /* anchors the drag-and-drop veil */
	background: var(--note-tint, var(--surface-2));
	border: 1px solid var(--border);
	border-radius: var(--radius-card, 16px);
	padding: var(--space-m);
	min-height: 70dvh;
	display: flex;
	flex-direction: column;
	transition: background 0.2s;
}
.editor-bar {
	display: flex;
	align-items: center;
	gap: var(--space-s);
	margin-bottom: var(--space-xs);
}
.editor-status { flex: 1; font: var(--font-body-small-regular); }
.editor-actions { display: flex; gap: var(--space-xs); }
.editor-title {
	background: none;
	border: none;
	color: var(--text);
	font: var(--font-h4);
	padding: var(--space-xs) var(--space-3xs);
	outline: none;
}
.editor-title::placeholder { color: var(--text-faint); }
.editor-body {
	flex: 1;
	background: none;
	border: none;
	color: var(--text);
	font: var(--font-body-large-regular);
	line-height: 1.6;
	padding: var(--space-xs) var(--space-3xs);
	outline: none;
	min-height: 40dvh;
	white-space: pre-wrap;
	overflow-wrap: anywhere;

	& img {
		max-width: 100%;
		height: auto;
		border-radius: var(--radius-card, 16px);
		margin: var(--space-xs) 0;
	}
	/* contenteditable has no native placeholder — fake one while truly empty. */
	&:empty::before {
		content: attr(data-placeholder);
		color: var(--text-faint);
		pointer-events: none;
	}
}

/* ─── Drag-and-drop attach target ────────────────────────────────────────── */
.editor.dragging { outline: 2px dashed var(--color-primary); outline-offset: -4px; }
.drop-veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: var(--space-xs);
	border-radius: var(--radius-card, 16px);
	background: color-mix(in srgb, var(--surface-2) 88%, transparent);
	color: var(--color-primary);
	font: var(--font-body-large-bold);
	/* Must not intercept the drag — it sits over the very element listening. */
	pointer-events: none;

	& svg.ms { font-size: 2rem; }
}

/* ─── Note attachments (base64 files carried in the note's sync payload) ──── */
.attach-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	margin-top: var(--space-s);
	padding: 0;
	list-style: none;
}
.attach-chip {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-2xs) var(--space-xs);
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-card, 16px);

	& > svg.ms { flex: none; color: var(--text-faint); }
}
.attach-name {
	flex: 1;
	min-width: 0;
	color: var(--text);
	text-decoration: none;

	&:hover { text-decoration: underline; }
}
.attach-size { flex: none; font: var(--font-body-xsmall-regular); }

.color-row {
	display: flex;
	gap: var(--space-s);
	padding-top: var(--space-s);
	margin-top: var(--space-xs);
	border-top: 1px solid var(--border);
}
.swatch {
	width: 28px; height: 28px;
	border-radius: 50%;
	border: 2px solid var(--border);
	cursor: pointer;
	padding: 0;
}
.swatch.on { border-color: var(--text); transform: scale(1.1); }
.swatch-default { background: var(--surface-3); }
.swatch-yellow  { background: #b8a23a; }
.swatch-green   { background: #2f9e63; }
.swatch-blue    { background: #3a86c8; }
.swatch-pink    { background: #c8497e; }
.swatch-purple  { background: #8a52c8; }

/* ─── Empty state ───────────────────────────────────────────────────────── */
.empty {
	text-align: center;
	color: var(--text-dim);
	padding: 60px var(--space-l);
}
.empty .ms { font-size: 54px; color: var(--surface-3); margin-bottom: var(--space-s); }
.empty p { margin: var(--space-2xs) 0; }

/* ─── Search ────────────────────────────────────────────────────────────── */
.search-input {
	width: 100%;
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: 12px;
	padding: var(--space-s) var(--space-m);
	font: var(--font-body-large-regular);
	margin-bottom: var(--space-m);
}
.search-input:focus { outline: none; border-color: var(--color-primary); }

/* ─── Settings ──────────────────────────────────────────────────────────── */
.settings-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-s);
	margin-bottom: var(--space-l);
}
.stat {
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-card, 16px);
	padding: var(--space-l) var(--space-s);
	text-align: center;
}
.stat-num { font: var(--font-h3); color: var(--color-primary-on-surface); }
.stat-label { font: var(--font-body-small-regular); color: var(--text-dim); margin-top: var(--space-3xs); }
.settings-list { display: flex; flex-direction: column; gap: var(--space-xs); }
.settings-item {
	display: flex;
	align-items: center;
	gap: var(--space-s);
	width: 100%;
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: 12px;
	padding: var(--space-m);
	font: var(--font-body-large-medium);
	cursor: pointer;
}
.settings-item:hover { background: var(--surface-3); }
.settings-item:disabled { opacity: 0.6; cursor: default; }
.settings-item .ms { font-size: 22px; color: var(--text-dim); }
/* Trailing state label (e.g. the On/Off on the reminders toggle). */
.settings-state {
	margin-inline-start: auto;
	font: var(--font-body-medium-bold);
	color: var(--color-primary-on-surface);
}
.settings-item[aria-checked="false"] .settings-state { color: var(--text-faint); }
.settings-hint { margin: var(--space-xs) var(--space-2xs) 0; font: var(--font-body-small-regular); }
.settings-foot { margin-top: var(--space-xl); text-align: center; font: var(--font-body-small-regular); }

/* ─── Segmented control (theme toggle) ──────────────────────────────────── */
.seg {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: var(--space-2xs);
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: var(--space-2xs);
	margin-bottom: var(--space-m);

	& button {
		border: none;
		background: none;
		color: var(--text-dim);
		font: var(--font-body-small-semibold);
		padding: var(--space-xs);
		border-radius: 9px;
		cursor: pointer;
		display: grid;
		grid-auto-flow: column;
		align-items: center;
		justify-content: center;
		gap: var(--space-2xs);

		& .ms { font-size: 18px; }
		&.on { background: var(--color-primary); color: #fff; }
	}
}

/* ─── Auth page ─────────────────────────────────────────────────────────── */
.auth-page { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-l); }
.auth-card {
	width: 100%;
	max-width: 380px;
	text-align: center;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 20px;
	padding: var(--space-2xl) var(--space-xl);
}
.auth-logo {
	width: 72px; height: 72px;
	border-radius: 20px;
	background: var(--color-primary-grad);
	display: grid; place-items: center;
	margin: 0 auto var(--space-l);
	color: #fff;
}
.auth-logo .ms { font-size: 40px; }
.auth-title { font: var(--font-h3); margin: 0 0 var(--space-xs); }
.auth-subtitle { color: var(--text-dim); margin: 0 0 var(--space-xl); font: var(--font-body-medium-regular); }
.auth-actions { display: flex; flex-direction: column; gap: var(--space-s); }
.auth-hint { color: var(--text-dim); font: var(--font-body-small-regular); margin: 0 0 var(--space-l); line-height: 1.5; }
.auth-error { color: var(--danger); font: var(--font-body-small-medium); margin-top: var(--space-m); }

@media (max-width: 400px) {
	.notes-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-s); }
}

/* ─── Pull-to-refresh (notes) ─────────────────────────────────────────────── */
.ptr-indicator {
	position: fixed;
	top: 0;
	left: 50%;
	z-index: 60;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-top: -48px;               /* parked just above the viewport */
	border-radius: 50%;
	background: var(--surface-2);
	border: 1px solid var(--border);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
	opacity: 0;
	transform: translateX(-50%);
	transition: transform 0.2s ease, opacity 0.2s ease;
	pointer-events: none;

	&.dragging { transition: none; }  /* track the finger 1:1 while pulling */

	& .ptr-spinner {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		border: 2px solid var(--surface-3);
		border-top-color: var(--text-faint);
	}

	&.ready .ptr-spinner { border-top-color: var(--color-primary); }
	&.busy  .ptr-spinner { border-top-color: var(--color-primary); animation: spin 0.8s linear infinite; }
}

/* ═══ Kapter: books, detail, reader ═══════════════════════════════════════ */

.btn--ghost { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn--ghost:hover { background: var(--surface-3); }

.spacer { flex: 1; }
.small { font: var(--font-body-small-regular); }
.truncate-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.spinner {
	display: inline-block;
	width: 20px; height: 20px;
	border-radius: 50%;
	border: 2px solid var(--surface-3);
	border-top-color: var(--color-primary);
	animation: spin 0.8s linear infinite;
}
.spinner-center { display: grid; place-items: center; padding: 48px; }

/* ─── Segmented status filter (reuses .seg; adds sub-nav spacing) ─────────── */
.status-seg { margin-top: var(--space-xs); }

/* ─── Book grid ──────────────────────────────────────────────────────────── */
.book-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: var(--space-m);
}
.book-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	cursor: pointer;
	transition: transform 0.12s;
}
.book-card:active { transform: scale(0.98); }
.book-cover {
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: var(--radius-medium, 12px);
	background: var(--surface-2);
	box-shadow: var(--shadow-card);
	border: 1px solid var(--border);
}
.book-cover.placeholder {
	display: grid;
	place-items: center;
	color: var(--color-primary-on-surface);
	background: linear-gradient(160deg, var(--surface-2), var(--surface-3));
	position: relative;
}
.book-cover.placeholder span {
	font: var(--font-h3);
	position: absolute;
}
.book-cover.placeholder .ms { font-size: 46px; opacity: 0.18; }
.book-meta { display: flex; flex-direction: column; gap: 2px; }
.book-title { font: var(--font-body-medium-bold); color: var(--text); line-height: 1.3; }
.book-author { font: var(--font-body-small-regular); color: var(--text-dim); }
.fav-badge {
	position: absolute;
	top: var(--space-xs); inset-inline-end: var(--space-xs);
	color: var(--color-gold);
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.fav-badge .ms { font-size: 20px; }

.progress-bar {
	height: 5px;
	border-radius: 999px;
	background: var(--surface-3);
	overflow: hidden;
	margin-top: var(--space-2xs);
}
.progress-bar span {
	display: block;
	height: 100%;
	background: var(--color-primary);
	border-radius: 999px;
}

/* ─── Reading list ───────────────────────────────────────────────────────── */
.reading-list { display: flex; flex-direction: column; gap: var(--space-m); }
.reading-row {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	align-items: center;
	gap: var(--space-m);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-card, 16px);
	padding: var(--space-s);
}
.reading-cover { display: block; }
.reading-cover .book-cover { box-shadow: none; }
.reading-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.read-cta { white-space: nowrap; }

/* ─── Book detail ────────────────────────────────────────────────────────── */
.detail-head {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: var(--space-m);
	margin-bottom: var(--space-l);
}
.detail-head-info { display: flex; flex-direction: column; gap: var(--space-xs); align-self: center; }
.detail-title { font: var(--font-h4); margin: 0; line-height: 1.2; }
.detail-section { margin-top: var(--space-l); }
.detail-section h2 { font: var(--font-h6); margin: 0 0 var(--space-xs); }
.description { color: var(--text-dim); line-height: 1.6; white-space: pre-wrap; }
.detail-foot { margin-top: var(--space-l); }
.read-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-card, 16px);
	padding: var(--space-l);
	margin-bottom: var(--space-m);
}
.read-cta-lg { width: 100%; justify-content: center; }
.notes-area {
	width: 100%;
	min-height: 120px;
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: 12px;
	padding: var(--space-s) var(--space-m);
	font: var(--font-body-large-regular);
	resize: vertical;
}
.notes-area:focus { outline: none; border-color: var(--color-primary); }
.field-label {
	display: grid;
	gap: var(--space-2xs);
	font: var(--font-body-small-semibold);
	color: var(--text-dim);
	margin-top: var(--space-m);
}
.select {
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: 12px;
	padding: var(--space-s) var(--space-m);
	font: var(--font-body-large-regular);
	color-scheme: inherit;
}
.select:focus { outline: none; border-color: var(--color-primary); }

/* ─── Stars + favorite ───────────────────────────────────────────────────── */
.stars { display: inline-flex; gap: 2px; color: var(--color-gold); }
.stars .star-btn { background: none; border: none; padding: 0; color: inherit; cursor: default; display: inline-grid; place-items: center; }
.stars.interactive .star-btn { cursor: pointer; }
.stars .ms { font-size: 24px; }
.fav-toggle {
	align-self: start;
	background: none;
	border: 1px solid var(--border);
	color: var(--text-dim);
	border-radius: 999px;
	padding: var(--space-2xs) var(--space-s);
	font: var(--font-body-small-semibold);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	cursor: pointer;
}
.fav-toggle.on { color: var(--color-gold-on-surface); border-color: var(--color-gold); }
.fav-toggle .ms { font-size: 18px; }

/* ─── Upload drop ────────────────────────────────────────────────────────── */
.upload-drop {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	background: var(--surface-2);
	border: 2px dashed var(--border);
	color: var(--text-dim);
	border-radius: var(--radius-card, 16px);
	padding: var(--space-xl) var(--space-l);
	margin-bottom: var(--space-m);
	cursor: pointer;
	font: var(--font-body-medium-semibold);
	text-align: center;
}
.upload-drop:hover { border-color: var(--color-primary); color: var(--text); }
.upload-drop input { display: none; }
.upload-drop .ms { font-size: 24px; }

/* ─── Detail dropdown menu ───────────────────────────────────────────────── */
.menu {
	position: absolute;
	top: 48px; inset-inline-end: 0;
	z-index: 20;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.3);
	padding: var(--space-2xs);
	display: grid;
	min-width: 190px;
}
.menu button {
	background: none; border: none; color: var(--text);
	font: var(--font-body-medium-semibold);
	display: flex; align-items: center; gap: var(--space-s);
	padding: var(--space-s);
	border-radius: 8px;
	cursor: pointer; text-align: start;
}
.menu button:hover { background: var(--surface-2); }
.menu button.danger { color: var(--danger); }
.menu .ms { font-size: 20px; }

/* ─── Add book ───────────────────────────────────────────────────────────── */
.search-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-xs); align-items: start; }
.search-row .search-input { margin-bottom: var(--space-m); }
.search-row .btn { height: 52px; }
.result-list { display: flex; flex-direction: column; gap: var(--space-xs); }
.result-row {
	display: grid;
	grid-template-columns: 46px 1fr auto;
	align-items: center;
	gap: var(--space-m);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: var(--space-s);
	cursor: pointer;
	text-align: start;
	color: var(--text);
}
.result-row:hover { border-color: var(--color-primary); }
.result-row:disabled { opacity: 0.5; }
.result-cover { width: 46px; height: 69px; object-fit: cover; border-radius: 6px; background: var(--surface-2); }
.result-cover.placeholder { display: grid; place-items: center; color: var(--text-faint); }
.result-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.result-row > .ms { color: var(--color-primary); font-size: 24px; }
.add-manual { width: 100%; margin-top: var(--space-l); justify-content: center; }
.row-actions { display: flex; justify-content: flex-end; gap: var(--space-s); }

/* ─── Reader (fullscreen) ────────────────────────────────────────────────── */
.reader {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: grid;
	grid-template-rows: auto 1fr auto;
	background: var(--bg);
	padding-top: env(safe-area-inset-top, 0px);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
.reader-bar {
	display: flex;
	align-items: center;
	gap: var(--space-s);
	padding: var(--space-s) var(--space-m);
	border-bottom: 1px solid var(--border);
	background: var(--surface);
}
.reader-title { flex: 1; font: var(--font-body-medium-bold); }
.reader-pct { font: var(--font-body-small-semibold); color: var(--color-primary-on-surface); }
.reader-stage {
	min-height: 0;
	overflow: auto;
	display: grid;
	place-items: center;
	position: relative;
	background: var(--surface-2);
}
.reader-stage canvas { display: block; box-shadow: 0 4px 20px rgba(0,0,0,0.3); background: #fff; }
.reader-stage .epub-container, .reader-stage iframe { background: #fff; }
.reader-controls {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: var(--space-m);
	padding: var(--space-s) var(--space-m);
	border-top: 1px solid var(--border);
	background: var(--surface);
}
.reader-controls .icon-btn.flip { transform: scaleX(-1); }
.reader-progress {
	height: 6px;
	border-radius: 999px;
	background: var(--surface-3);
	overflow: hidden;
}
.reader-progress span { display: block; height: 100%; background: var(--color-primary); }
.reader-page-label { font: var(--font-body-small-regular); color: var(--text-dim); white-space: nowrap; }

@media (max-width: 400px) {
	.book-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-s); }
}

/* ─── Scan model additions ───────────────────────────────────────────────── */
.scan-line { margin: calc(-1 * var(--space-xs)) 0 var(--space-s); }
.fmt-badge {
	position: absolute;
	top: var(--space-xs); inset-inline-start: var(--space-xs);
	background: rgba(0, 0, 0, 0.62);
	color: #fff;
	font: var(--font-body-xsmall-bold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 2px 6px;
	border-radius: 6px;
}
.detail-head .meta-row .fmt-badge,
.meta-row .fmt-badge {
	position: static;
	background: var(--surface-3);
	color: var(--text-dim);
}
.meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs);
}
.meta-row > span:not(.fmt-badge)::before { content: ""; }