/* ============================================================
   Comics Craver — Global Design System
   Reference language: warm near-black canvas, high-contrast
   serif display type, brand red accent, warm dark form fields.

   Layers:
     1. Tokens          5. Shared components (cards/states/tabs)
     2. Base & type     6. Page sections (landing/auth/profile/…)
     3. Layout          7. Series & Reader
     4. Controls        8. Responsive / motion preferences
   ============================================================ */

:root {
    /* Backgrounds — Bold Typography */
    --bg-base: #0A0A0A;
    --bg-surface: #0F0F0F; /* card */
    --bg-card: #0F0F0F;
    --bg-hover: #1A1A1A; /* input/muted */

    /* Text */
    --text-main: #FAFAFA;
    --text-muted: #737373; /* mutedForeground */
    --text-disabled: #404040;

    /* Borders */
    --border-color: #262626;
    --border-light: #262626;

    /* Brand accent */
    --accent-main: #FF3D00;
    --accent-hover: #E03600;
    --accent-glow: rgba(255, 61, 0, 0.25);

    /* Danger (errors/destructive) */
    --danger-color: #f87171;

    /* Warning (admin/master accent) */
    --warning: #f59e0b;
    --warning-hover: color-mix(in srgb, var(--warning) 80%, #fff);

    /* Legacy alias */
    --primary-color: var(--accent-main);

    /* Form fields */
    --input-bg: #1A1A1A;
    --input-bg-hover: #262626;
    --input-border: #262626;
    --input-placeholder: #737373;
    --input-text: #FAFAFA;

    /* Spacing scale */
    --spacing-xs: 0.25rem; /* 4px  */
    --spacing-sm: 0.5rem;  /* 8px  */
    --spacing-md: 1rem;    /* 16px */
    --spacing-lg: 1.5rem;  /* 24px */
    --spacing-xl: 2rem;    /* 32px */
    --spacing-xxl: 3rem;   /* 48px */

    /* Border radius - Sharp visual structure, but keep some usability radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Control geometry */
    --control-h-sm: 2.25rem;  /* 36px chips & compact rows   */
    --control-h: 2.75rem;     /* 44px default controls (mobile touch target) */
    --control-h-lg: 3.25rem;  /* 52px hero/search controls   */

    /* Shadows - Minimal shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
    --shadow-glow: 0 4px 16px var(--accent-glow);

    /* Motion — fast, restrained, ease-out */
    --dur-fast: 150ms;
    --dur-base: 200ms;
    --dur-image: 500ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    /* Content widths */
    --width-page: 1400px;
    --width-narrow: 880px;
    --width-reader: 800px;

    /* Typography */
    --font-family: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
    --font-display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;

    /* Native widgets (scrollbars, select popups) follow the dark theme */
    color-scheme: dark;
}

/* ============================================================
   2. Base & Typography
   ============================================================ */

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

/* Author display values (e.g. .card { display:flex }) beat the UA's
   [hidden] rule, so JS toggling `el.hidden` silently did nothing.
   Re-assert it so the hidden attribute always wins. */
[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-base);
    color: var(--text-main);
    font-family: var(--font-family);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    -webkit-tap-highlight-color: transparent;
}

::selection {
    background: var(--accent-main);
    color: #fff;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--dur-base) var(--ease-out);
}

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

button {
    font-family: inherit;
}

/* Serif display voice for headings; tighten tracking as sizes grow */
h1, h2, h3 {
    font-family: var(--font-display);
    color: var(--text-main);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

h4, h5, h6 {
    color: var(--text-main);
    font-weight: 600;
    line-height: 1.25;
}

.page-title {
    font-size: clamp(1.9rem, 1.35rem + 2vw, 2.5rem);
    letter-spacing: -0.02em;
    line-height: 1.12;
    margin-bottom: var(--spacing-sm);
}

.section-title {
    font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
    letter-spacing: -0.01em;
    margin-bottom: var(--spacing-md);
}

.text-muted {
    color: var(--text-muted);
}

/* ============================================================
   3. Layout
   ============================================================ */

.page-container {
    max-width: var(--width-page);
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-lg);
    width: 100%;
    flex: 1;
}

.page-header {
    margin-bottom: var(--spacing-lg);
}

.page-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.page-header-row .page-title {
    margin-bottom: var(--spacing-xs);
}

.section-block {
    margin-bottom: var(--spacing-xl);
}

.card-pad {
    padding: var(--spacing-lg);
}

/* Buttons inside padded cards sit inline, not stretched */
.card-pad > .btn {
    align-self: flex-start;
}

.toolbar-search {
    display: flex;
    align-items: center;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    padding: 0.35rem 1.1rem;
    min-width: 240px;
    transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.toolbar-search:focus-within {
    border-color: var(--accent-main);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.toolbar-search input {
    background: transparent;
    border: none;
    padding: 0.35rem 0;
    box-shadow: none;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.95rem;
    flex: 1;
    outline: none;
}

.toolbar-search input::placeholder {
    color: var(--input-placeholder);
}

/* ============================================================
   4. Navigation
   ============================================================ */

.navbar {
    background-color: rgba(26, 19, 16, 0.82);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar-container {
    max-width: var(--width-page);
    margin: 0 auto;
    padding: 0.875rem var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.navbar-brand {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    display: flex;
    align-items: baseline;
    line-height: 1;
    flex-shrink: 0;
}

.navbar-brand:hover .brand-accent {
    color: var(--accent-hover);
}

.brand-text {
    color: var(--text-main);
}

.brand-accent {
    color: var(--accent-main);
    transition: color var(--dur-fast) var(--ease-out);
}

/* Desktop links — animated underline anchored to the label */
.navbar-links {
    display: flex;
    gap: var(--spacing-lg);
    align-items: center;
}

.nav-link {
    position: relative;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.375rem 0;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-base) var(--ease-out);
}

.nav-link:hover {
    color: var(--text-main);
}

.nav-link:hover::after,
.nav-link.active::after,
.nav-link[aria-current="page"]::after {
    transform: scaleX(1);
}

.nav-link.active,
.nav-link[aria-current="page"] {
    color: var(--accent-main);
}

.navbar-actions {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.navbar-user {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* Active-page cue for the avatar-only profile control */
.navbar-user.active .avatar,
.navbar-user[aria-current="page"] .avatar {
    box-shadow: 0 0 0 2px var(--accent-main);
}

.nav-link-admin {
    color: var(--warning);
    font-weight: 500;
    font-size: 0.95rem;
}

.nav-link-admin:hover,
.nav-link-admin.active {
    color: var(--warning-hover);
}

/* Mobile navigation */
.mobile-menu-btn {
    display: none;
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    color: var(--text-main);
    cursor: pointer;
    padding: 0.5rem;
    margin-right: calc(-0.5rem + var(--spacing-sm));
    border-radius: var(--radius-sm);
    transition: background-color var(--dur-fast) var(--ease-out);
}

.mobile-menu-btn:active {
    background-color: var(--bg-hover);
}

.mobile-menu-btn[aria-expanded="true"] {
    background-color: var(--bg-hover);
}

.mobile-nav-menu {
    display: none;
    flex-direction: column;
    background-color: var(--bg-surface);
    border-top: 1px solid var(--border-color);
    padding: var(--spacing-sm) 0 var(--spacing-md);
    box-shadow: var(--shadow-md);
}

.mobile-nav-menu.open {
    display: flex;
    animation: menu-in var(--dur-base) var(--ease-out);
}

@keyframes menu-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mobile-nav-link {
    padding: 0.8rem var(--spacing-xl);
    color: var(--text-main);
    font-weight: 500;
    position: relative;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.mobile-nav-link:hover {
    background-color: var(--bg-hover);
}

.mobile-nav-link.active,
.mobile-nav-link[aria-current="page"] {
    color: var(--accent-main);
    background-color: rgba(224, 85, 78, 0.07);
}

.mobile-nav-link.active::before,
.mobile-nav-link[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--accent-main);
}

.mobile-nav-divider {
    border: none;
    height: 1px;
    background-color: var(--border-color);
    margin: var(--spacing-sm) 0;
}

.btn-secondary-mobile, .btn-primary-mobile {
    margin: var(--spacing-xs) var(--spacing-xl);
    text-align: center;
    border-radius: var(--radius-full);
    padding: 0.65rem 1rem;
    font-weight: 600;
}

.btn-secondary-mobile {
    background-color: var(--bg-base);
    color: var(--text-main);
    border: 1px solid var(--border-color);
}

.btn-primary-mobile {
    background-color: var(--accent-main);
    color: #fff;
    border: none;
}

.mobile-nav-link.btn-secondary-mobile:active,
.mobile-nav-link.btn-primary-mobile:active {
    transform: scale(0.98);
}

/* Admin "viewing as user" strip */
.viewing-banner {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9999;
    background: rgba(245, 158, 11, 0.14);
    color: var(--warning);
    border-bottom: 1px solid rgba(245, 158, 11, 0.35);
    backdrop-filter: blur(6px);
    padding: 8px var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
}

.viewing-banner-btn {
    margin-left: 12px;
    padding: 4px var(--spacing-md) !important;
    font-size: 0.85rem !important;
}

/* ============================================================
   4b. Controls — buttons
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    min-height: var(--control-h);
    padding: 0.5rem 1.4rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
    border: 1px solid transparent;
    line-height: 1.2;
    text-align: center;
}

/* Press feedback lands on pointer-down via :active — instant, not on release */
.btn:active {
    transform: scale(0.97);
}

.btn-primary {
    background-color: var(--accent-main);
    color: #fff;
    box-shadow: 0 6px 18px rgba(224, 85, 78, 0.22);
}

.btn-primary:hover {
    background-color: var(--accent-hover);
    box-shadow: var(--shadow-glow);
}

.btn-primary:active {
    box-shadow: 0 3px 10px rgba(224, 85, 78, 0.2);
}

.btn-secondary {
    background-color: transparent;
    color: var(--text-main);
    border-color: var(--border-light);
}

.btn-secondary:hover {
    background-color: var(--bg-hover);
    border-color: var(--text-disabled);
}

.btn-danger-ghost {
    background-color: transparent;
    color: var(--accent-main);
    border-color: rgba(224, 85, 78, 0.35);
}

.btn-danger-ghost:hover {
    background-color: rgba(224, 85, 78, 0.1);
    border-color: rgba(224, 85, 78, 0.5);
}

.btn.disabled,
.btn:disabled {
    opacity: 0.45;
    pointer-events: none;
}

.btn-lg {
    min-height: var(--control-h-lg);
    padding: 0.75rem 1.9rem;
    font-size: 1rem;
}

.btn-sm {
    min-height: var(--control-h-sm);
    padding: 0.3rem 0.95rem;
    font-size: 0.85rem;
}

.btn.loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn.loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   4c. Controls — inputs & selects
   ============================================================ */

.input-group,
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
}

.input-group-flush {
    margin: 0;
}

.input-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
}

.input-field {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--input-text);
    min-height: var(--control-h);
    padding: 0.55rem 1rem;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.95rem;
    transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
    width: 100%;
}

.input-field:hover {
    background-color: var(--input-bg-hover);
    border-color: var(--text-disabled);
}

.input-field:focus {
    background-color: var(--input-bg);
    border-color: var(--accent-main);
    box-shadow: 0 0 0 3px var(--accent-glow);
    outline: none;
}

.input-field::placeholder {
    color: var(--input-placeholder);
}

.input-field:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Keep autofilled fields dark instead of the browser pale-yellow/blue fill */
.input-field:-webkit-autofill,
.input-field:-webkit-autofill:hover,
.input-field:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--input-text);
    -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset;
    transition: background-color 9999s ease-in-out 0s;
    caret-color: var(--input-text);
}

.input-field.error {
    border-color: var(--danger-color);
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18);
}

/* Dark select with custom chevron (native arrow looks broken on dark fills) */
select.input-field {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23a99c8e' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.6rem;
    width: auto;
}

select.input-field option,
select.input-field optgroup {
    background-color: var(--bg-surface);
    color: var(--text-main);
}

/* Search inputs: hide the native clear-button clutter on dark fills */
.input-field::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* Form States */
.error-msg {
    color: var(--danger-color);
    background-color: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.25);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-md);
    text-align: center;
}

/* Inline notice banner (partial source failures) — danger tints, amber stays
   admin-only per the palette rules */
.notice-warn {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    background-color: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.25);
    color: var(--text-muted);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
}

/* ============================================================
   5. Shared components
   ------------------------------------------------------------
   5a. Cards        5b. States & skeletons   5c. Tabs
   5d. Chapter UI   5e. Tables
   ============================================================ */

/* ---- 5a. Cards ---- */
.card {
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-light);
}

.card:active {
    transform: translateY(-1px);
}

.card-image {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    display: block;
    background: var(--bg-surface);
}

.card-image-placeholder {
    width: 100%;
    aspect-ratio: 2 / 3;
    background-color: var(--bg-surface);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-disabled);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Faint bookmark glyph so missing covers look deliberate */
.card-image-placeholder::before {
    content: "";
    width: 30px;
    height: 40px;
    background-color: var(--text-disabled);
    opacity: 0.45;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
}

.card-content {
    padding: var(--spacing-md);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
}

.card-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Secondary line under card titles (source · status) */
.card-source {
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cover status chip (library cards) */
.card-chip {
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid var(--border-light);
    background: var(--bg-surface);
    padding: 1px 8px;
    border-radius: var(--radius-full);
}

/* Search source grouping */
.search-source-section {
    width: 100%;
    margin-bottom: var(--spacing-xl);
}

.search-source-section > h3 {
    width: 100%;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
    font-size: 1.15rem;
    font-weight: 600;
}

.search-source-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--spacing-lg);
}

.search-source-grid .card {
    color: inherit;
}

/* ---- 5b. Loading, empty & error states ---- */
.state-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xxl) var(--spacing-lg);
    text-align: center;
    background-color: var(--bg-surface);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border-light);
}

.state-icon {
    font-size: 2.4rem;
    line-height: 1;
    margin-bottom: var(--spacing-xs);
    opacity: 0.9;
}

.state-title {
    font-size: 1.15rem;
    font-weight: 600;
}

.state-container .btn {
    margin-top: var(--spacing-md);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-main);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: var(--spacing-md);
}

/* Skeletons — soft shimmer shown while content loads.
   Gradient rides a ::after layer so the animation is transform-only. */
.skeleton {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--bg-card);
}

.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, var(--bg-hover) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
    to { transform: translateX(100%); }
}

.skeleton-card .skeleton-cover {
    aspect-ratio: 2 / 3;
    border-radius: 0;
}

.skeleton-card .skeleton-line {
    margin: var(--spacing-sm) var(--spacing-md);
}

.skeleton-line {
    height: 0.8rem;
    border-radius: var(--radius-sm);
}

.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-80 { width: 80%; }

.skeleton-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.skeleton-thumb {
    width: 56px;
    height: 84px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.skeleton-rows { display: flex; flex-direction: column; gap: var(--spacing-md); }
.skeleton-grids { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--spacing-lg); }

/* Search loading skeletons reuse the real card primitives (.card +
   .card-image + .card-content) inside .search-source-grid itself, so cover
   ratio, card chrome and responsive columns are identical to live results. */
.search-skeleton { pointer-events: none; }
.skeleton-heading {
    display: inline-block;
    height: 1.15rem;
    width: min(240px, 60%);
    vertical-align: middle;
}

/* ---- 5c. Tab navigation ---- */
.tab-nav {
    display: flex;
    gap: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.tab-nav::-webkit-scrollbar {
    display: none;
}

.tab-nav .nav-link {
    font-weight: 500;
    padding: var(--spacing-sm) 0 calc(var(--spacing-sm) + 2px);
    white-space: nowrap;
}

/* Tabs may be <a> or <button> — normalize buttons to look identical */
button.nav-link {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text-muted);
    cursor: pointer;
}

.tab-nav .nav-link::after {
    bottom: -1px;
    height: 2px;
}

.tab-nav .nav-link.active::after,
.tab-nav .nav-link[aria-selected="true"]::after {
    background: var(--accent-main);
}

.tab-nav .nav-link.active,
.tab-nav button.nav-link[aria-selected="true"] {
    color: var(--accent-main);
}

.tab-nav button.nav-link:focus-visible {
    outline: 2px solid var(--accent-main);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---- 5d. Chapter affordances shared by series/history ---- */
.chapter-read { opacity: .58; filter: saturate(.55); }
.chapter-in-progress { border-left: 3px solid var(--accent-main); }
.chapter-bookmarked { box-shadow: inset 3px 0 0 var(--accent-main); }

.chapter-actions {
    display: inline-flex;
    gap: var(--spacing-xs);
    align-items: center;
    flex-shrink: 0;
}

.chapter-action-btn {
    position: relative;
    border: 1px solid var(--border-light);
    background: var(--bg-surface);
    color: var(--text-main);
    border-radius: var(--radius-full);
    padding: 0.28rem 0.7rem;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}

/* Invisible halo widens the touch target without changing the visual size */
.chapter-action-btn::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: inherit;
}

.chapter-action-btn:hover { background: var(--bg-hover); border-color: var(--text-disabled); }
.chapter-action-btn:active { transform: scale(0.96); }

/* Context menu (chapter rows, history cards) */
.chapter-context-menu {
    position: fixed;
    z-index: 500;
    display: grid;
    gap: 2px;
    padding: 0.4rem;
    min-width: 200px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    animation: context-in var(--dur-fast) var(--ease-out);
    transform-origin: top left;
}

@keyframes context-in {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
}

.chapter-context-menu .chapter-action-btn {
    text-align: left;
    border-color: transparent;
    background: transparent;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
}

.chapter-context-menu .chapter-action-btn:hover {
    background: var(--bg-hover);
}

/* Centered pagination affordance */
.load-more {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-xl);
}

/* ---- 5e. Tables ---- */
.table-card {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.data-table th {
    padding: var(--spacing-md);
    font-weight: 500;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.data-table td {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr {
    transition: background-color var(--dur-fast) var(--ease-out);
}

.data-table tbody tr:hover {
    background-color: var(--bg-hover);
}

.data-table .cell-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.data-table .cell-muted {
    color: var(--text-muted);
}

.table-empty-note {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-md);
    color: var(--text-muted);
}

/* ============================================================
   6. Page sections
   ============================================================ */

/* ---------- Landing page ---------- */
.landing-main {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.hero-section {
    position: relative;
    text-align: center;
    padding: calc(var(--spacing-xxl) * 2.4) 0 calc(var(--spacing-xxl) * 1.6);
    overflow: hidden;
}

/* Ambient warm glows behind the hero */
.hero-section::before,
.hero-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

.hero-section::before {
    width: 640px;
    height: 640px;
    top: -320px;
    left: 50%;
    transform: translateX(-78%);
    background: radial-gradient(circle, rgba(224, 85, 78, 0.14) 0%, transparent 65%);
}

.hero-section::after {
    width: 720px;
    height: 720px;
    top: -260px;
    left: 50%;
    transform: translateX(8%);
    background: radial-gradient(circle, rgba(244, 238, 228, 0.06) 0%, transparent 65%);
}

.hero-container {
    max-width: var(--width-narrow);
    padding-top: 0;
    padding-bottom: 0;
    margin: 0 auto;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-main);
    background: rgba(224, 85, 78, 0.08);
    border: 1px solid rgba(224, 85, 78, 0.25);
    border-radius: var(--radius-full);
    padding: 0.4rem 1rem;
    margin-bottom: var(--spacing-lg);
}

.hero-title {
    font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: var(--spacing-lg);
    line-height: 1.05;
}

.hero-subtitle {
    font-size: 1.15rem;
    margin: 0 auto var(--spacing-xl);
    line-height: 1.65;
    max-width: 560px;
}

.hero-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    align-items: center;
}

.hero-note {
    margin-top: var(--spacing-lg);
    font-size: 0.85rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.info-section {
    padding-bottom: var(--spacing-xxl);
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    max-width: 1080px;
    margin: 0 auto;
    align-items: start;
}

.info-column {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
}

.info-column > .section-title {
    font-size: 1.35rem;
    margin-bottom: var(--spacing-lg);
}

.step-list, .benefit-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.step-list li {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
}

.step-number {
    font-family: var(--font-display);
    background-color: rgba(224, 85, 78, 0.12);
    color: var(--accent-main);
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    border: 1px solid rgba(224, 85, 78, 0.3);
}

.step-content h3 {
    font-size: 1.05rem;
    margin-bottom: 4px;
}

.step-content p {
    font-size: 0.95rem;
}

.benefit-list li {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    font-size: 1rem;
    background-color: var(--bg-card);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.benefit-list li:hover {
    border-color: var(--border-light);
    background-color: var(--bg-hover);
}

.benefit-icon {
    color: var(--accent-main);
    font-weight: 700;
    flex-shrink: 0;
}

/* Footer */
.site-footer {
    border-top: 1px solid var(--border-color);
    margin-top: auto;
    padding: var(--spacing-xl) 0;
    background-color: var(--bg-surface);
}

.footer-container {
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-brand {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.footer-links {
    display: flex;
    gap: var(--spacing-lg);
}

.footer-links a {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.footer-links a:hover {
    color: var(--text-main);
}

/* ---------- Extensions search field (shared with home) ---------- */
.search-controls {
    display: flex;
    gap: var(--spacing-md);
    background-color: var(--bg-card);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.search-input-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-wrapper .search-icon {
    position: absolute;
    left: 1.2rem;
    color: var(--text-disabled);
    pointer-events: none;
    display: flex;
}

.search-large {
    width: 100%;
    padding-left: 3rem;
    font-size: 1.05rem;
    min-height: var(--control-h-lg);
}

/* ---------- Auth pages (login / signup) ---------- */
.auth-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xxl) var(--spacing-md);
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-xl);
}

.auth-title {
    font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.2rem);
    letter-spacing: -0.02em;
    margin-bottom: var(--spacing-sm);
}

.auth-subtitle {
    margin-bottom: var(--spacing-xl);
}

.auth-card .btn-primary {
    width: 100%;
    margin-top: var(--spacing-sm);
    min-height: var(--control-h-lg);
    padding: 0.7rem 1.4rem;
    font-size: 1rem;
}

.auth-footer {
    margin-top: var(--spacing-lg);
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-muted);
}

.auth-footer a {
    color: var(--accent-main);
    font-weight: 600;
}

.auth-footer a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* ---------- Library ---------- */
.library-toolbar-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-xl);
}

.library-toolbar-row .tab-nav {
    flex: 1;
    min-width: 260px;
}

/* ---------- Search ---------- */
.search-hero {
    max-width: 760px;
    margin-bottom: var(--spacing-xxl);
}

.search-form {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-top: var(--spacing-lg);
}

.search-form .input-field:first-child {
    flex: 1;
    min-width: 220px;
    min-height: var(--control-h-lg);
}

.search-form select.input-field {
    min-width: 170px;
    min-height: var(--control-h-lg);
}

.search-form .btn {
    min-height: var(--control-h-lg);
    padding: 0 1.8rem;
}

.search-status {
    text-align: center;
    padding: var(--spacing-xxl) var(--spacing-md);
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.search-status[data-variant="error"] {
    color: var(--danger-color);
}

.search-status .state-icon {
    margin-bottom: 0;
}

/* ---------- History & Updates ---------- */
.updates-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.updates-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.history-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.history-group-title {
    margin-bottom: 0;
}

.history-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding: calc(var(--spacing-sm) + 2px) var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

a.history-card:hover {
    border-color: var(--border-light);
    background: var(--bg-hover);
}

.history-thumb {
    flex: 0 0 auto;
    width: 80px;
    height: 120px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: linear-gradient(135deg, var(--bg-hover) 0%, var(--bg-base) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-disabled);
    font-weight: 600;
    font-size: 0.95rem;
}

img.history-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.history-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-disabled);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}

.history-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0; /* allow truncation */
}

.history-meta {
    color: var(--text-muted);
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-actions {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-xs);
    align-items: center;
    flex-shrink: 0;
    align-self: center;
}

/* Stacked variant: card body row on top, chapter list below */
.history-card--stacked {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.history-card--stacked .history-actions {
    align-self: flex-end;
}

.history-top {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
}

.history-main-link {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--spacing-md);
    min-width: 0;
    border-radius: var(--radius-sm);
}

.history-main-link:hover .card-title {
    color: var(--accent-hover);
}

.history-card .card-title {
    transition: color var(--dur-fast) var(--ease-out);
}

.history-chapters-list {
    margin-top: 4px;
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.history-chapter-row a {
    color: var(--text-main);
    display: inline-flex;
    gap: 6px;
    align-items: baseline;
    padding: 2px 0;
    border-radius: var(--radius-sm);
}

.history-chapter-row a:hover {
    color: var(--accent-hover);
}

/* ---------- Profile ---------- */
.profile-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-xxl);
}

.profile-header-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-header-info .page-title {
    margin-bottom: 0;
}

.profile-header-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.detail-grid dd {
    margin: 0;
}

.avatar {
    border-radius: 50%;
    background: var(--accent-main);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    user-select: none;
}

.avatar-lg {
    width: 80px;
    height: 80px;
    font-size: 2rem;
    box-shadow: var(--shadow-glow);
}

.avatar-sm {
    width: 32px;
    height: 32px;
    font-size: 0.95rem;
}

.role-badge {
    font-size: 0.75rem;
    font-weight: 600;
    background-color: rgba(224, 85, 78, 0.12);
    color: var(--accent-main);
    border: 1px solid rgba(224, 85, 78, 0.35);
    padding: 2px 10px;
    border-radius: var(--radius-full);
}

.role-badge.master {
    background-color: rgba(245, 158, 11, 0.12);
    color: var(--warning);
    border-color: rgba(245, 158, 11, 0.4);
}

.detail-grid {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--spacing-md) var(--spacing-lg);
    align-items: baseline;
}

.detail-label {
    color: var(--text-muted);
}

.detail-grid dd {
    min-width: 0;
    overflow-wrap: anywhere;
}

.placeholder-panel {
    padding: var(--spacing-xxl) var(--spacing-lg);
    text-align: center;
    color: var(--text-muted);
    border: 1px dashed var(--border-light);
    border-radius: var(--radius-lg);
    background: transparent;
}

/* ---------- Settings ---------- */
.settings-layout {
    display: flex;
    gap: var(--spacing-xxl);
    flex-wrap: wrap;
}

.settings-nav {
    flex: 0 0 190px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: 90px;
    align-self: flex-start;
}

.settings-nav a {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.95rem;
    border-left: 2px solid transparent;
    transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.settings-nav a:hover {
    color: var(--text-main);
    background-color: var(--bg-hover);
}

.settings-nav a.active {
    color: var(--accent-main);
    border-left-color: var(--accent-main);
    background-color: rgba(224, 85, 78, 0.06);
}

.settings-sections {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xxl);
}

.settings-sections .section-title {
    margin-bottom: var(--spacing-md);
}

.settings-card-stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.theme-note {
    margin-bottom: var(--spacing-md);
}

.theme-swatches {
    display: flex;
    gap: var(--spacing-md);
}

.theme-swatch {
    width: 80px;
    height: 60px;
    border-radius: var(--radius-sm);
}

.theme-swatch.dark {
    background: var(--bg-base);
    border: 2px solid var(--accent-main);
}

.theme-swatch.light {
    background: #efeadf;
    border: 1px solid var(--border-color);
    opacity: 0.55;
}

/* ---------- Admin ---------- */
.admin-title {
    color: var(--warning);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xxl);
}

.stat-card {
    padding: var(--spacing-lg);
}

.stat-label {
    margin-bottom: var(--spacing-sm);
}

.stat-value {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.5rem);
    line-height: 1;
}

.ext-badge.master {
    background-color: var(--warning);
    color: #fff;
    border-color: var(--warning-hover);
}

/* ============================================================
   7. Series & Reader (migrated from page-local styles)
   ============================================================ */

/* ---------- Series details ---------- */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-muted);
    margin-bottom: var(--spacing-lg);
    font-weight: 500;
    transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.back-link:hover {
    color: var(--accent-main);
}

.back-link svg {
    transition: transform var(--dur-fast) var(--ease-out);
}

.back-link:hover svg {
    transform: translateX(-3px);
}

.series-header {
    display: flex;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xxl);
    flex-wrap: wrap;
}

.series-cover-container {
    flex: 0 0 250px;
    width: 250px;
    aspect-ratio: 2 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
}

.series-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.series-info {
    flex: 1;
    min-width: min(300px, 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.series-title {
    font-size: clamp(1.8rem, 1.3rem + 2vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: var(--spacing-sm);
}

.series-meta {
    margin-bottom: var(--spacing-md);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.series-badge {
    background-color: var(--primary-color);
    color: #fff;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: inline-block;
}

.series-description {
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: var(--spacing-lg);
    flex-grow: 1;
}

.series-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    align-items: center;
    margin-top: auto;
}

.library-feedback {
    min-height: 1.4em;
    margin-top: var(--spacing-sm);
    font-size: 0.9rem;
}

.chapters-section {
    margin-top: var(--spacing-xxl);
}

.chapter-count {
    color: var(--text-muted);
    font-size: 1.05rem;
    font-family: var(--font-family);
    font-weight: 400;
}

.chapter-error-note {
    padding: var(--spacing-md);
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.25);
    border-radius: var(--radius-md);
    color: var(--text-main);
    font-size: 0.9rem;
}

.chapter-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.chapter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    padding-left: calc(var(--spacing-md) + 3px); /* room for state borders */
    background-color: var(--bg-card);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-main);
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.chapter-row:hover {
    background-color: var(--bg-hover);
    border-color: var(--border-color);
}

.chapter-row-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex: 1;
    min-width: 0;
    border-radius: var(--radius-sm);
}

.chapter-row .chapter-title {
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.chapter-date {
    color: var(--text-muted);
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* Pointer devices get a quiet reveal of row actions; touch keeps them visible */
@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
    .chapter-row .chapter-actions {
        opacity: 0;
        transition: opacity var(--dur-base) var(--ease-out);
    }

    .chapter-row:hover .chapter-actions,
    .chapter-row:focus-within .chapter-actions {
        opacity: 1;
    }
}

@media (max-width: 640px) {
    .series-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .series-meta {
        justify-content: center;
    }

    .series-actions {
        justify-content: center;
        width: 100%;
    }

    .chapter-row {
        flex-wrap: wrap;
    }

    .chapter-row-link {
        flex-basis: 100%;
        flex-wrap: wrap;
    }

    .chapter-row .chapter-title {
        flex-basis: 100%;
        white-space: normal;
    }

    .chapter-date {
        order: 3;
    }
}

/* ---------- Reader ---------- */
.reader-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    padding-top: calc(var(--spacing-sm) + env(safe-area-inset-top, 0px));
    background: rgba(15, 15, 15, 0.88);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--border-color);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.reader-nav .btn {
    min-height: var(--control-h-sm);
    padding: 0.3rem 0.95rem;
    font-size: 0.88rem;
}

.reader-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    text-align: center;
    flex-grow: 1;
    margin: 0 var(--spacing-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Thin reading-progress line pinned to the bottom edge of the top bar.
   Driven by scaleX so per-frame updates stay off the layout path. */
.reader-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--accent-main);
    box-shadow: 0 0 8px var(--accent-glow);
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
}

.reader-pages {
    max-width: var(--width-reader);
    margin: 0 auto;
    /* Match the fixed top bar, which grows by the notch inset */
    padding-top: calc(64px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.reader-page {
    /* Fill the reading column at the image's own aspect ratio. A forced
       aspect-ratio + object-fit: contain letterboxed every page into a 2:3
       box, shrinking tall webtoon strips to a narrow sliver. The surface
       background still masks the brief pop-in of lazily decoded pages. */
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: -1px;
    background: var(--bg-surface);
}

.reader-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    padding-bottom: calc(var(--spacing-sm) + env(safe-area-inset-bottom, 0px));
    background: rgba(15, 15, 15, 0.88);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-top: 1px solid var(--border-color);
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.reader-nav-btn {
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border-light);
    min-height: 2.5rem;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-full);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}

.reader-nav-btn:hover:not(:disabled) {
    background: var(--bg-hover);
}

.reader-nav-btn:active:not(:disabled) {
    transform: scale(0.96);
}

#btn-bookmark.active {
    color: var(--accent-main);
}
#btn-bookmark.active svg {
    fill: currentColor;
}

.reader-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.reader-nav-btn.primary {
    background: var(--accent-main);
    border-color: var(--accent-main);
    color: #fff;
}

.reader-nav-btn.primary:hover:not(:disabled) {
    background: var(--accent-hover);
}

.reader-select {
    flex: 1;
    min-width: 0;
    max-width: 320px;
    min-height: 2.5rem;
    text-align: center;
    padding: 0.35rem 2.2rem 0.35rem 1rem;
    background-color: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-full);
    font-family: inherit;
    font-size: 0.88rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23a99c8e' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
}

.reader-select option {
    background-color: var(--bg-surface);
    color: var(--text-main);
}

/* Hidden state for auto-hide — visibility removes the bars from the tab
   order after the fade, so focus never lands on invisible controls */
.reader-nav.controls-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100%);
    visibility: hidden;
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), visibility 0s linear 0.3s;
}

.reader-bottom-nav.controls-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
    visibility: hidden;
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), visibility 0s linear 0.3s;
}

/* Lighter blur on small (GPU-weakest) screens; none once hidden */
@media (max-width: 640px) {
    .reader-nav,
    .reader-bottom-nav {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

.reader-nav.controls-hidden,
.reader-bottom-nav.controls-hidden {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

@media (max-width: 560px) {
    .reader-nav .btn span.reader-back-label {
        display: none;
    }

    .reader-select {
        max-width: none;
    }
}

/* ============================================================
   Extensions page
   ============================================================ */

.ext-main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.ext-page-header {
    margin-bottom: 0;
}

.ext-list-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.ext-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.ext-card.ext-added {
    background-color: rgba(224, 85, 78, 0.05);
    border-color: rgba(224, 85, 78, 0.35);
}

.ext-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
}

.ext-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.ext-name {
    font-size: 1.2rem;
    margin: 0;
}

.ext-version {
    font-size: 0.8rem;
    background-color: var(--bg-surface);
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-light);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Quiet status chip — solid coral reserved for primary actions */
.ext-badge {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    background-color: rgba(224, 85, 78, 0.12);
    color: var(--accent-main);
    border: 1px solid rgba(224, 85, 78, 0.35);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.ext-desc {
    font-size: 0.95rem;
}

.ext-id {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.ext-id code {
    color: var(--text-main);
}

.ext-actions {
    flex-shrink: 0;
}

.btn-ext-add,
.btn-ext-remove {
    min-width: 104px;
}

.btn-ext-remove {
    background-color: transparent;
    color: var(--text-muted);
    border-color: var(--border-light);
}

.btn-ext-remove:hover {
    color: #fff;
    background-color: rgba(224, 85, 78, 0.12);
    border-color: rgba(224, 85, 78, 0.4);
}

.ext-skeleton-row {
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* ============================================================
   8. Responsive, motion & input preferences
   ============================================================ */

@media (max-width: 900px) {
    .page-container {
        padding: var(--spacing-lg) var(--spacing-lg);
    }
}

@media (max-width: 600px) {
    .page-container {
        padding: var(--spacing-md) var(--spacing-md);
    }
    
    .library-grid, .search-grid, .updates-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-sm);
    }
}

@media (max-width: 480px) {
    .page-container { padding: var(--spacing-md) var(--spacing-sm); }
    
    .library-grid, .search-grid, .updates-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
    
    .series-header-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--spacing-md);
    }
    
    .series-cover-wrapper {
        width: 140px;
        flex-shrink: 0;
    }
}

@media (max-width: 800px) {
    .history-thumb { width: 72px; height: 108px; }
}

@media (max-width: 768px) {
    .navbar-container {
        padding: 0.75rem var(--spacing-md);
    }

    .page-container {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .navbar-links, .navbar-actions {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
    }

    .hero-section {
        padding: var(--spacing-xxl) 0 calc(var(--spacing-xxl) * 1.2);
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .footer-container {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .ext-card {
        flex-direction: column;
        align-items: stretch;
    }

    .ext-actions .btn {
        width: 100%;
    }

    .search-controls {
        flex-direction: column;
    }

    .auth-main {
        padding-top: var(--spacing-lg);
        justify-content: flex-start;
    }

    .auth-card {
        padding: var(--spacing-lg);
    }

    .toolbar-search {
        min-width: 100%;
    }

    .settings-nav {
        position: static;
        flex: 1 1 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }

    .settings-nav a {
        border-left: none;
        border-bottom: 2px solid transparent;
        border-radius: var(--radius-sm);
    }

    .settings-nav a.active {
        border-left: none;
        border-bottom-color: var(--accent-main);
    }

    .detail-grid {
        grid-template-columns: 1fr;
        gap: 2px var(--spacing-lg);
    }

    .detail-grid .detail-label {
        margin-top: var(--spacing-sm);
    }

    .search-form .btn {
        flex: 1;
    }

    .search-source-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: var(--spacing-md);
    }

    .library-toolbar-row .tab-nav {
        flex-basis: 100%;
    }

    .page-header-row {
        align-items: stretch;
    }

    .history-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 480px) {
    .page-container { padding: var(--spacing-lg) var(--spacing-md); }
    .history-card { gap: var(--spacing-sm); padding: var(--spacing-sm); }
    .history-thumb { width: 64px; height: 96px; }
    .history-body { gap: 4px; }
    .info-column { padding: var(--spacing-lg); }
    .stat-grid { grid-template-columns: 1fr; }
}

/* ---- Reduced motion: keep feedback, drop movement ---- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .skeleton {
        animation: none;
    }

    .skeleton::after {
        animation: none;
        opacity: 0;
    }
}

/* ---- Skip link: hidden until keyboard-focused ---- */
/* Visually hidden but available to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -48px;
    left: var(--spacing-md);
    z-index: 10000;
    background: var(--accent-main);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.6rem 1.2rem;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus-visible {
    top: 0;
    outline-offset: 0;
}

/* ---- Reduced transparency: frost the glass layers solid ---- */
@media (prefers-reduced-transparency: reduce) {
    .navbar,
    .reader-nav,
    .reader-bottom-nav {
        background: var(--bg-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* ---------- Fullscreen Mode ---------- */
body.fullscreen-active {
    overflow: hidden !important;
}

#reader-content.css-fullscreen {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    z-index: 9999;
    overflow-y: auto;
    background-color: var(--bg-body);
    /* Safe areas for notched devices in landscape/portrait */
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* Ensure native fullscreen gets the proper background if we fullscreen an element */
:fullscreen, ::backdrop {
    background-color: var(--bg-body);
}

/* Make fullscreen button accessible with touch */
#btn-fullscreen {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Infinite Scroll Reader ──────────────────────────────────────────────── */
.chapter-divider {
    text-align: center;
    padding: 3.5rem 1rem;
    margin: 3rem 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.02);
}

.chapter-divider .ch-title {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    font-family: 'Outfit', sans-serif;
    color: var(--text-main);
}

.chapter-end-indicator {
    text-align: center;
    padding: 4rem 1rem;
    margin-top: 2rem;
    font-size: 1rem;
    color: var(--text-muted);
    font-style: italic;
    border-top: 1px solid var(--border-color);
}

.chapter-error-inline {
    text-align: center;
    padding: 3rem 1rem;
    margin: 2rem 0;
    border: 1px dashed var(--danger-color);
    border-radius: var(--radius-md);
    background: rgba(255, 60, 60, 0.05);
}

/* Onboarding Modal */
.onboarding-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.onboarding-modal {
    width: calc(100% - 32px);
    max-width: 480px;
    box-sizing: border-box;
}

.onboarding-title {
    margin-top: 0;
    font-size: 1.5rem;
}

.onboarding-subtitle {
    margin-bottom: 1.5rem;
}

.onboarding-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.onboarding-btn {
    text-align: left;
    padding: 1rem;
    height: auto;
    min-height: 0;
    width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    min-width: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    color: var(--text-main);
    cursor: pointer;
    font-family: inherit;
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.onboarding-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-disabled);
}

.onboarding-btn-title {
    display: block;
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.onboarding-btn-description {
    font-size: 0.9rem;
    font-weight: normal;
    color: var(--text-muted);
    opacity: 0.9;
    line-height: 1.4;
}



/* ============================================================
   Comments Modal
   ============================================================ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
}

.modal-content.comments-modal-content {
    background: var(--bg-surface);
    width: 90vw;
    max-width: 800px;
    height: 85vh;
    max-height: 85vh;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.btn-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 var(--spacing-sm);
    transition: color var(--dur-base) var(--ease-out);
}

.btn-close:hover {
    color: var(--text-main);
}

.modal-body.comments-modal-body {
    flex: 1;
    width: 100%;
    padding: 0;
    background: var(--bg-base);
    overflow-y: auto;
}

/* Lock body scrolling */
body.modal-open {
    overflow: hidden;
}


/* ============================================================
   Native Comments Viewer
   ============================================================ */

.comments-modal-body {
    background: var(--bg-base);
    overflow-y: auto;
    padding: var(--spacing-md);
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.comment-item {
    display: flex;
    gap: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.comment-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    object-fit: cover;
    background: var(--bg-surface);
    flex-shrink: 0;
}

.comment-content-wrapper {
    flex: 1;
    min-width: 0;
}

.comment-header {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.comment-username {
    font-weight: 600;
    color: var(--text-main);
    word-break: break-all;
}

.comment-timestamp {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.comment-text {
    color: var(--text-main);
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.comment-avatar-fallback {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--bg-card);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.2rem;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
}

.comment-media {
    margin-top: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.comment-media-image {
    max-width: 100%;
    max-height: 300px;
    width: auto;
    object-fit: contain;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

/* Mobile Bottom Navigation */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(60px + env(safe-area-inset-bottom));
    background-color: var(--bg-surface);
    border-top: 1px solid var(--border-color);
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.65rem;
    font-weight: 500;
    gap: 4px;
    transition: color var(--dur-fast) var(--ease-out);
}

.bottom-nav-item svg {
    width: 20px;
    height: 20px;
}

.bottom-nav-item.active,
.bottom-nav-item:hover {
    color: var(--accent-main);
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
    }
    
    /* Hide top mobile menu hamburger if we have bottom nav */
    body:not(.reader-page) .mobile-menu-btn {
        display: none;
    }
}

/* BRUTALIST LANDING PAGE */
.brutalist-main {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-xxl) var(--spacing-md);
    min-height: 100vh;
    max-width: 1440px;
    margin: 0 auto;
}
.brutalist-hero {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
    margin-bottom: var(--spacing-xxl);
}
.brutalist-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 15vh;
}
.brutalist-logo {
    color: var(--text-main);
}
.brutalist-action-link {
    text-decoration: none;
    color: var(--text-main);
    transition: color 0.2s;
}
.brutalist-action-link:hover {
    color: var(--accent-main);
}
.brutalist-hero-middle {
    display: flex;
    flex-direction: column;
}
.brutalist-massive-type {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 700;
    font-size: clamp(3rem, 12vw, 10rem);
    line-height: 0.85;
    letter-spacing: -0.04em;
    margin: 0;
    text-transform: uppercase;
    word-break: break-word;
    color: var(--text-main);
}
.brutalist-hero-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 10vh;
    flex-wrap: wrap;
    gap: var(--spacing-xl);
}
.brutalist-editorial-label {
    font-size: 0.875rem;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.4;
    letter-spacing: 0.05em;
}
.brutalist-cta-link {
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(1.25rem, 3vw, 2rem);
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    color: var(--text-main);
    transition: color 0.2s;
}
.brutalist-cta-link:hover {
    color: var(--accent-main);
}
.brutalist-features {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--spacing-xxl);
}
.brutalist-feature-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--spacing-xl) 0;
    gap: var(--spacing-md);
}
.brutalist-feature-number {
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.02em;
}
.brutalist-feature-desc {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    color: var(--text-muted);
    margin: 0;
    text-align: right;
    max-width: 400px;
    line-height: 1.3;
}
.brutalist-divider {
    border: none;
    border-top: 2px solid var(--border-color);
    margin: 0;
    width: 100%;
}

@media (max-width: 768px) {
    .brutalist-feature-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .brutalist-feature-desc {
        text-align: left;
    }
}

/* ============================================================
   COMMENTS UI (MangaGo & AsuraScans)
   ============================================================ */

.comment-item {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--border-color);
}

.comment-item:last-child {
    border-bottom: none;
}

.comment-avatar-wrap {
    flex-shrink: 0;
}

.comment-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--bg-hover);
    display: block;
}

.comment-avatar-fallback {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 1.1rem;
    font-family: "JetBrains Mono", monospace;
}

.comment-content-wrapper {
    flex-grow: 1;
    min-width: 0;
}

.comment-header {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--spacing-sm);
    align-items: baseline;
    margin-bottom: var(--spacing-xs);
}

.comment-username {
    font-weight: 600;
    color: var(--text-main);
    font-size: 1rem;
}

.comment-timestamp {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.comment-text {
    color: var(--text-main);
    line-height: 1.6;
    font-size: 0.95rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Skeleton Loading */
.comment-skeleton {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
    animation: skeleton-pulse 1.5s infinite ease-in-out;
}
.skeleton-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--bg-hover);
    flex-shrink: 0;
}
.skeleton-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}
.skeleton-line {
    height: 12px;
    background-color: var(--bg-hover);
    border-radius: 2px;
}
.skeleton-line.short { width: 30%; }
.skeleton-line.medium { width: 60%; }
.skeleton-line.long { width: 100%; }

@keyframes skeleton-pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

/* Empty & Error States */
.comment-empty-state, .comment-error-state {
    padding: var(--spacing-xl) var(--spacing-md);
    text-align: center;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.comment-empty-icon {
    font-size: 2rem;
    margin-bottom: var(--spacing-xs);
    opacity: 0.5;
}

/* Load more loader */
.comment-load-more {
    text-align: center;
    padding: var(--spacing-md);
    color: var(--text-muted);
    font-size: 0.9rem;
    font-family: "JetBrains Mono", monospace;
}

/* ── Reply toggle & nested replies ─────────────────────────── */
.comment-reply-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: var(--spacing-xs);
    padding: 0.2rem 0.5rem;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-family: "JetBrains Mono", monospace;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.comment-reply-toggle:hover {
    border-color: var(--accent-color, #FF3D00);
    color: var(--text-main);
}

.comment-replies-container {
    margin-top: var(--spacing-xs);
    padding-left: var(--spacing-md);
    border-left: 2px solid var(--border-color);
}

/* Reply items are indented and slightly de-emphasized */
.comment-reply-item {
    padding: var(--spacing-sm) 0;
    border-bottom: none;
    opacity: 0.9;
}
.comment-reply-item .comment-avatar,
.comment-reply-item .comment-avatar-fallback {
    width: 28px;
    height: 28px;
    font-size: 0.7rem;
}
.comment-reply-item .comment-username {
    font-size: 0.82rem;
}
.comment-reply-item .comment-text {
    font-size: 0.88rem;
}

.comment-replies-loading {
    padding: var(--spacing-xs) 0;
    font-size: 0.82rem;
    font-family: "JetBrains Mono", monospace;
}

/* ── Spoilers ────────────────────────────────────────────────────────────── */
.spoiler-text {
    background-color: var(--text-color, #888);
    color: transparent;
    cursor: pointer;
    border-radius: 4px;
    padding: 0 4px;
    transition: background-color 0.2s, color 0.2s;
    user-select: none;
}

.spoiler-text:hover {
    background-color: var(--text-color, #666);
}

.spoiler-text.revealed {
    background-color: rgba(255, 255, 255, 0.1);
    color: inherit;
    user-select: auto;
}

/* ── NSFW content setting ───────────────────────────────────────────────
   Square, token-driven, no new palette. Appearance-only; the backend gate
   in app/extensions/nsfw.py is the actual enforcement. */
.nsfw-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.nsfw-row-text {
    flex: 1 1 14rem;
    min-width: 0;
}

#nsfw-status {
    margin: 0.25rem 0 0;
}

/* Acknowledgement gate */
.nsfw-ack {
    margin-top: var(--spacing-sm);
    border-left: 3px solid var(--accent-main);
}

.nsfw-ack-check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: var(--spacing-sm);
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1.4;
}

.nsfw-ack-check input {
    margin: 0.15rem 0 0;
    accent-color: var(--accent-main);
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.nsfw-ack-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: var(--spacing-sm);
    flex-wrap: wrap;
}

.nsfw-ack-actions .btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Locked NSFW source in the Extensions list */
.ext-card.is-nsfw-locked .ext-name::after {
    content: "NSFW";
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.35rem;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bg-base);
    background: var(--accent-main);
    vertical-align: middle;
}

.ext-card.is-nsfw-locked {
    opacity: 0.65;
}

/* Password reset / email change panels. Square, token-driven, no new palette. */
.auth-divider {
    border: 0;
    border-top: 1px solid var(--border-color, #2a2a2a);
    margin: var(--spacing-md) 0;
}
.notice-ok {
    border-left: 3px solid var(--accent-main);
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

/* ============================================================
   9. Reader settings & keyboard shortcuts
   Brutalist: square corners, no decorative shadows, one accent.
   ============================================================ */

/* Reader toolbar grouping: navigation on the left, informational controls
   separated by a rule so the row is not one undifferentiated cluster. The
   rules are scoped to .reader-nav on purpose -- .chapter-actions is shared
   with the series page's chapter rows. */
.reader-nav .reader-tools {
    position: relative;
    padding-left: var(--spacing-sm);
    margin-left: var(--spacing-xs);
    border-left: 1px solid var(--border-color);
}

.reader-nav .reader-tools > * + * {
    margin-left: var(--spacing-xs);
}

/* Auto-scroll pressed state. Square, accent, no glow. */
.reader-nav-btn.is-running {
    border-color: var(--accent-main);
    color: var(--accent-main);
    background: var(--accent-glow);
}

.reader-nav-btn.is-running:hover {
    background: var(--accent-glow);
    color: var(--accent-main);
}

/* Narrow screens: drop the informational cluster to bare icon widths so the
   navigation controls keep their room. */
@media (max-width: 720px) {
    .reader-nav .chapter-actions {
        min-width: 0;
    }

    .reader-nav .reader-tools {
        padding-left: 0;
        margin-left: 0;
        border-left: none;
    }

    .reader-nav .reader-tools > * + * {
        margin-left: 0;
    }

    .reader-nav .reader-title {
        font-size: 0.9rem;
    }
}

/* Floating reader controls (comments). A sibling of the nav in the DOM, fixed
   against the viewport. Kept clear of the right edge, the bottom bar and the
   safe area so it never sits on top of content the reader is trying to read. */
.reader-side-controls {
    position: fixed;
    right: max(var(--spacing-sm), env(safe-area-inset-right, 0px));
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    z-index: 150;
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out),
        visibility 0s linear 0.3s;
}

.reader-side-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-h);
    height: var(--control-h);
    padding: 0;
    background: rgba(15, 15, 15, 0.88);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 0;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.reader-side-btn:hover {
    border-color: var(--accent-main);
    color: var(--accent-main);
}

.reader-side-btn:focus-visible {
    outline: 2px solid var(--accent-main);
    outline-offset: 2px;
}

/* Hide with the rest of the chrome when the bars are dismissed. */
.reader-side-controls.controls-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(12px);
    visibility: hidden;
}

/* On a phone the rail sits above the bottom bar rather than over the page. */
@media (max-width: 640px) {
    .reader-side-controls {
        top: auto;
        bottom: calc(76px + var(--spacing-sm) + env(safe-area-inset-bottom, 0px));
        transform: none;
    }

    .reader-side-controls.controls-hidden {
        transform: translateX(12px);
    }
}

@media (max-width: 640px) {
    .reader-side-btn {
        width: var(--control-h-sm);
        height: var(--control-h-sm);
    }
}

.reader-nav-icon {
    padding: 0 var(--spacing-sm);
    min-width: var(--control-h-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Reading direction ────────────────────────────────────────────────
   vertical: the continuous webtoon strip the reader has always used.
   ltr / rtl: paged mode -- one page at a time, turned with the horizontal
   keys. `rd-paged` is toggled by the settings layer rather than keyed off
   the direction so the two stay in one place. */
body.rd-dir-vertical #reader-pages-container {
    align-items: center;
}

body.rd-paged #reader-pages-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
}

body.rd-paged .reader-page {
    display: none;
    width: auto;
    max-width: 100%;
    max-height: calc(100dvh - 150px);
    margin-bottom: 0;
}

body.rd-paged .reader-page.rd-current-page {
    display: block;
}

/* Processed-page wrapper (MangaGo / MangaPill / Comix). These were inline
   styles on the element; inline `display` beats any stylesheet rule, which
   silently defeated the paged-mode `display: none` above and showed every
   page at once in LTR/RTL mode. */
.reader-page-proc {
    position: relative;
    display: flex;
    justify-content: center;
}

body.rd-paged .reader-page-proc.rd-current-page {
    display: flex;
}

/* In paged mode the max-height above lands on the wrapper, and a flex box does
   not shrink a taller child unless overflow is hidden. Constrain the image
   itself so a long MangaPill page is letterboxed instead of spilling past the
   viewport. */
body.rd-paged .reader-page-proc>img {
    max-height: calc(100dvh - 150px);
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

/* Page counter, shown only in paged mode. */
.rd-page-counter {
    position: fixed;
    left: 50%;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 150;
    padding: 0.2rem 0.6rem;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    background: rgba(10, 10, 10, 0.75);
    border: 1px solid var(--border-color);
    pointer-events: none;
}

.rd-page-counter[hidden] {
    display: none;
}

/* Infinite scroll's furniture -- the chapter transition markers, the
   "end of series" note and the loading sentinel -- belongs to the vertical
   strip. Left visible in paged mode they push the page off-centre and offer
   taps that turn nothing. */
body.rd-paged .chapter-end-indicator,
body.rd-paged .chapter-transition-marker,
body.rd-paged #reader-infinite-sentinel {
    display: none;
}

/* ── Progress bar placement ────────────────────────────────────────────
   #reader-progress was moved out of the top nav, whose backdrop-filter makes
   it a containing block for fixed children; from the body every viewport edge
   is reachable. The bar's own transform stays on the off-layout path, so only
   box geometry changes between these rules. */
.reader-progress {
    position: fixed;
    /* Both axes are reset here. The base rule this overrides pins a 2px
       height, which would otherwise leave the left/right docks a 2px stub
       instead of a full-height bar. */
    width: auto;
    height: auto;
    background: var(--accent-main);
    box-shadow: none;
    pointer-events: none;
    z-index: 201;
    margin: 0;
}

body.rd-prog-bottom .reader-progress {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    transform-origin: 0 50%;
}

body.rd-prog-top .reader-progress {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    height: 2px;
    transform-origin: 0 50%;
}

body.rd-prog-left .reader-progress {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 2px;
    /* Fill upward so the end of the chapter stays the far end of the bar. */
    transform-origin: 50% 100%;
}

body.rd-prog-right .reader-progress {
    top: 0;
    bottom: 0;
    right: 0;
    left: auto;
    width: 2px;
    transform-origin: 50% 100%;
}

/* "Hidden" removes it from the reader UI entirely rather than fading it out. */
body.rd-prog-hidden .reader-progress {
    display: none;
}

/* ── Page filters: grayscale + dim ─────────────────────────────────────
   Set on the container so every page inherits one composited filter instead
   of each image carrying its own. The dim rule is gated on a class rather
   than on --rd-dim being 0: a filter of brightness(1) is a visual no-op but
   still promotes the whole page stack to its own compositing layer, which is
   real cost on a chapter of large images. */
body.rd-gray #reader-pages-container {
    filter: grayscale(1);
}

body.rd-dim:not(.rd-gray) #reader-pages-container {
    filter: brightness(calc(1 - var(--rd-dim, 0)));
}

body.rd-dim.rd-gray #reader-pages-container {
    filter: grayscale(1) brightness(calc(1 - var(--rd-dim, 0)));
}

/* ── Strip margin ───────────────────────────────────────────────────────
   A gap between pages in every reading direction, so the strip breathes
   without disturbing the -1px overlap that keeps full-bleed art seamless. */
body:not(.rd-double-offset) .reader-page {
    margin-bottom: calc(-1px + var(--rd-strip-margin, 0px));
}

/* ── Double-page offset spreads ─────────────────────────────────────────
   Only meaningful with room for two pages side by side; below the breakpoint,
   and in paged mode, the single-column strip is left exactly as it was.

   "Offset" is the standard fix for a 2-up view: the chapter's opening page
   stands alone on the right, and reading starts from the second spread. It is
   done with grid placement, not a transform -- translating a page sideways
   pushed it past the container and produced horizontal scroll on the whole
   document. */
@media (min-width: 900px) {
    body.rd-double-offset:not(.rd-paged) #reader-pages-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        max-width: calc(var(--width-reader) * 1.6);
    }

    body.rd-double-offset:not(.rd-paged) .reader-page {
        margin-bottom: 0;
    }

    /* The opening page occupies the right column on its own, so auto-flow
       sends the second page to the left of the following row. Keyed on the
       grid rule above rather than on a reading direction: the only mode where
       this rule applies is the continuous strip (ltr/rtl are paged and are
       excluded by :not(.rd-paged)), so gating on rd-dir-ltr here would never
       match anything. */
    body.rd-double-offset:not(.rd-paged) #reader-pages-container .reader-page:first-child {
        grid-column: 2;
    }
}

/* ============================================================
   Reader dialogs (settings + shortcuts)
   Mobile-first: full-bleed sheet on phones, centred panel from 640px.
   ============================================================ */

.rd-overlay {
    z-index: 10000;
    align-items: flex-end;
    padding: 0;
}

.rd-dialog {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    /* Square corners and no decorative shadow: the panel edge and the type
       carry the structure, matching the rest of the reader. */
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    max-width: 100%;
    height: 92dvh;
    max-height: 92dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: rd-slide-up 0.18s var(--ease-out);
}

.rd-dialog-shortcuts {
    max-width: 100%;
}

@keyframes rd-slide-up {
    from {
        transform: translateY(12px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rd-dialog {
        animation: none;
    }
}

@media (min-width: 640px) {
    .rd-overlay {
        align-items: center;
        padding: var(--spacing-md);
    }

    .rd-dialog {
        width: 92vw;
        max-width: 560px;
        height: auto;
        max-height: 86vh;
    }

    .rd-dialog-shortcuts {
        max-width: 480px;
    }
}

.rd-dialog-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    padding: var(--spacing-md) var(--spacing-lg);
    flex: 0 0 auto;
}

/* The dialogs move focus to the close button on open, so give that ring the
   same deliberate accent outline the other controls use rather than relying
   on the UA default. */
.rd-dialog-header .btn-close:focus-visible {
    outline: 2px solid var(--accent-main);
    outline-offset: 2px;
}

.rd-dialog-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-main);
}

.rd-dialog-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xl);
    background: var(--bg-base);
}

.rd-section {
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--border-color);
}

.rd-section:first-child {
    padding-top: 0;
}

.rd-section-last {
    border-bottom: none;
}

/* Uppercase, letter-spaced section labels. */
.rd-label {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    margin: 0 0 var(--spacing-sm);
}

.rd-hint {
    margin: var(--spacing-sm) 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-muted);
}

/* ── Selectable option groups ─────────────────────────────────────────── */

.rd-choices {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
}

.rd-choices-wrap {
    grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
}

@media (min-width: 480px) {
    .rd-choices {
        grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    }
}

.rd-choice {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
    min-height: var(--control-h);
}

/* The input stays focusable for keyboard and screen readers but is not
   painted; the label span is the visible control. */
.rd-choice input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.rd-choice span {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: var(--control-h);
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 0.88rem;
    line-height: 1.25;
    transition: border-color var(--dur-base) var(--ease-out),
        color var(--dur-base) var(--ease-out),
        background-color var(--dur-base) var(--ease-out);
}

.rd-choice:hover span {
    border-color: var(--text-muted);
}

.rd-choice input:checked+span {
    border-color: var(--accent-main);
    background: var(--accent-glow);
    color: var(--accent-main);
    font-weight: 600;
}

.rd-choice input:focus-visible+span {
    outline: 2px solid var(--accent-main);
    outline-offset: 2px;
}

/* ── Stepper (strip margin) ───────────────────────────────────────────── */

.rd-stepper {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-xs);
}

.rd-step,
.rd-reset {
    font-family: var(--font-display);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    cursor: pointer;
    min-height: var(--control-h);
    min-width: var(--control-h);
    padding: 0 var(--spacing-md);
    font-size: 1rem;
    border-radius: 0;
}

.rd-step:hover,
.rd-reset:hover {
    border-color: var(--accent-main);
    color: var(--accent-main);
}

.rd-step:active {
    background: var(--accent-glow);
}

.rd-step:focus-visible,
.rd-reset:focus-visible {
    outline: 2px solid var(--accent-main);
    outline-offset: 2px;
}

.rd-stepper-value {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--control-h);
    border: 1px solid var(--border-color);
    background: var(--bg-base);
    font-family: "JetBrains Mono", monospace;
    font-size: 0.9rem;
    color: var(--text-main);
    min-width: 5rem;
}

.rd-reset {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.rd-reset-block {
    width: 100%;
}

/* ── Sliders ──────────────────────────────────────────────────────────── */

.rd-slider {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--spacing-sm);
}

.rd-slider-spaced {
    margin-top: var(--spacing-md);
    grid-template-columns: auto 1fr auto;
}

.rd-slider-name {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.rd-slider input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-height: var(--control-h);
    background: transparent;
    cursor: pointer;
    margin: 0;
}

.rd-slider input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    background: var(--border-color);
    border-radius: 0;
}

.rd-slider input[type="range"]::-moz-range-track {
    height: 4px;
    background: var(--border-color);
    border-radius: 0;
}

.rd-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -7px;
    background: var(--accent-main);
    border: none;
    border-radius: 0;
}

.rd-slider input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--accent-main);
    border: none;
    border-radius: 0;
}

.rd-slider input[type="range"]:focus-visible {
    outline: 2px solid var(--accent-main);
    outline-offset: 4px;
}

.rd-value {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.82rem;
    color: var(--accent-main);
    min-width: 4.5rem;
    text-align: right;
}

/* ── Switches ─────────────────────────────────────────────────────────── */

.rd-switch {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.4;
    min-height: var(--control-h);
}

.rd-switch input {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0.1rem 0 0;
    border: 1px solid var(--border-color);
    background: var(--bg-base);
    border-radius: 0;
    cursor: pointer;
    position: relative;
}

.rd-switch input:checked {
    background: var(--accent-main);
    border-color: var(--accent-main);
}

.rd-switch input:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid var(--bg-base);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.rd-switch input:focus-visible {
    outline: 2px solid var(--accent-main);
    outline-offset: 2px;
}

/* ── Keyboard shortcut list ───────────────────────────────────────────── */

.rd-shortcuts {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.rd-shortcut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-color);
}

.rd-shortcut:last-child {
    border-bottom: none;
}

.rd-shortcut dt {
    font-size: 0.9rem;
    color: var(--text-main);
    min-width: 0;
}

/* Qualifier inside a shortcut label ("chapter in vertical mode"). */
.rd-hint-inline {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-muted);
}

.rd-shortcut dd {
    margin: 0;
    display: flex;
    gap: var(--spacing-xs);
    flex: 0 0 auto;
}

.rd-shortcut kbd,
.rd-key-inline {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0.32rem 0.42rem;
    min-width: 1.75rem;
    text-align: center;
    color: var(--text-main);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-bottom-width: 2px;
    border-radius: 0;
    display: inline-block;
}

.rd-key-inline {
    font-size: 0.68rem;
    padding: 0.18rem 0.3rem;
    min-width: 0;
    vertical-align: middle;
    margin-left: 0.15rem;
}

/* On the narrowest phones the two columns crowd each other; stack the keys
   under their label rather than shrinking the type. */
@media (max-width: 380px) {
    .rd-shortcut {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
}