:root {
    --bg: #f3f6ff;
    --bg-soft: #ffffff;
    --panel: #ffffff;
    --panel-elevated: #f6f9ff;
    --ink: #141c2e;
    --ink-muted: #58617a;
    --muted: #58617a;
    --line: #d8deea;
    --accent: #ff7b39;
    --accent-2: #6b66ff;
    --accent-dark: #d85f1f;
    --ok: #3bc57a;
    --warning: #f6b24a;
    --danger: #f87171;
    --surface-glow: #f3f6ff;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body,
button,
input,
select,
textarea {
    font-family: Inter, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

body {
    margin: 0;
    color: var(--ink);
    background: #f3f6ff;
    line-height: 1.5;
}

a {
    color: inherit;
    text-decoration: none;
}

.inline-strong-link {
    color: var(--accent);
    font-weight: 800;
    text-decoration: underline;
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.18em;
}

.container {
    width: min(1200px, 92vw);
    margin: 0 auto;
}

.row {
    display: flex;
    gap: 1rem;
}

.between {
    justify-content: space-between;
}

.center {
    align-items: center;
}

.gap-sm {
    gap: 0.75rem;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
    backdrop-filter: blur(10px);
    background: rgba(248, 251, 255, 0.9);
}

.topbar .container {
    padding: 0.85rem 0;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.brand-icon {
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 auto;
}

.brand-word-page {
    color: var(--ink);
}

.brand-word-sake {
    color: var(--accent);
}

.brand-tagline {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0;
    margin-left: 0.15rem;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .brand-tagline {
        display: none;
    }
}

.nav-links {
    align-items: center;
}

.storefront-header-row {
    gap: 1.15rem;
}

.storefront-menu-toggle.btn {
    display: none;
}

.storefront-menu-panel {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

.storefront-nav {
    flex-wrap: wrap;
    justify-content: flex-end;
}
.nav-links a {
    font-size: 0.92rem;
    color: var(--ink-muted);
    transition: color 160ms ease;
}

.nav-links a:hover {
    color: var(--ink);
}

.cart-link {
    position: relative;
    padding-right: 1.2rem;
}

.cart-badge {
    position: absolute;
    top: -0.45rem;
    right: 0;
    min-width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 0.7rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.3rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cart-badge-pulse {
    animation: cartPulse 500ms ease-out 2;
}

@keyframes cartPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 123, 57, 0.35);
    }

    60% {
        transform: scale(1.2);
        box-shadow: 0 0 0 8px rgba(255, 123, 57, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 123, 57, 0);
    }
}

.lang-switcher {
    position: relative;
    margin-left: auto;
}

.lang-switcher summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--ink-muted);
}

.lang-menu {
    position: absolute;
    right: 0;
    top: 1.8rem;
    width: min(290px, 80vw);
    max-height: 320px;
    overflow: auto;
    padding: 0.6rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
    display: grid;
    gap: 0.4rem;
}

.lang-menu a {
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    color: var(--ink-muted);
}

.lang-menu a:hover {
    background: color-mix(in srgb, var(--accent-2) 16%, transparent);
    color: var(--ink);
}

.page-content {
    padding: 2.5rem 0 4.25rem;
}

.storefront-main:has(.control-dashboard) {
    width: min(1440px, 96vw);
    padding-top: 1rem;
}

.control-dashboard {
    --control-gap: 0.75rem;
    padding: clamp(0.75rem, 1.2vw, 1rem);
}

.control-dashboard .display-title {
    font-size: clamp(1.45rem, 1.9vw, 1.9rem);
}

.control-dashboard .lede {
    margin-top: 0.2rem;
    font-size: 0.92rem;
}

.control-dashboard .kicker {
    margin-bottom: 0.25rem;
}

.control-dashboard-header,
.control-card-header,
.control-card-actions,
.control-lists-grid .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.control-dashboard-header {
    margin-bottom: 0.65rem;
}

.control-dashboard-title {
    min-width: 0;
}

.control-dashboard-status {
    display: grid;
    gap: 0.1rem;
    min-width: 10rem;
    padding: 0.5rem 0.7rem;
    border-radius: 12px;
    font-size: 0.85rem;
}

.control-dashboard-status-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 800;
}

.control-dashboard-status-dot {
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 999px;
}

.control-dashboard .wrap-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.control-dashboard .wrap-actions .btn {
    padding: 0.34rem 0.56rem;
    border-radius: 999px;
    font-size: 0.78rem;
}

.control-overview-grid,
.control-lists-grid {
    display: grid;
    gap: var(--control-gap);
}

.control-overview-grid {
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr) minmax(240px, 0.85fr);
    align-items: stretch;
}

.control-card,
.control-stat-card,
.control-queue-mini-card,
.control-lists-grid > .cart-item {
    align-items: stretch;
    padding: 0.68rem;
    gap: 0.55rem;
}

.control-dashboard .cart-item,
.control-dashboard .order-item {
    min-width: 0;
}

.control-dashboard h2,
.control-dashboard p {
    margin: 0;
}

.control-dashboard h2 {
    font-size: 0.98rem;
    line-height: 1.15;
}

.control-card-message {
    margin-top: 0.25rem !important;
    font-size: 0.9rem;
    font-weight: 800;
}

.control-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
}

.control-metric-grid > div,
.control-stat-card,
.control-queue-mini-card {
    border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.64);
}

.control-metric-grid > div {
    padding: 0.45rem 0.5rem;
}

.control-metric-grid span,
.control-stat-card .muted,
.control-queue-mini-card .muted,
.control-dashboard-status .muted {
    display: block;
    font-size: 0.72rem;
    line-height: 1.25;
}

.control-metric-grid strong,
.control-stat-card strong,
.control-queue-mini-card > strong {
    display: block;
    margin-top: 0.1rem;
    font-size: 1.18rem;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.control-metric-grid-tight {
    grid-template-columns: 1fr;
}

.control-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.control-stat-card {
    display: grid;
    align-content: center;
    padding: 0.6rem;
}

.control-stat-card strong {
    font-size: 1.55rem;
}

.control-queue-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--control-gap);
    margin-top: var(--control-gap);
}

.control-queue-mini-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.control-queue-mini-card .control-card-actions,
.control-queue-mini-card > .muted {
    grid-column: 1 / -1;
}

.control-lists-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0.9rem;
}

.control-lists-grid > .cart-item {
    display: grid;
    align-content: start;
}

.control-lists-grid .mb-3 {
    margin-bottom: 0.4rem;
}

.control-lists-grid .divide-y > * + * {
    border-top: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
}

.control-lists-grid .py-3 {
    padding: 0.55rem 0;
}

.control-lists-grid .first\:pt-0:first-child {
    padding-top: 0;
}

.control-lists-grid .last\:pb-0:last-child {
    padding-bottom: 0;
}

.control-lists-grid .text-sm,
.control-dashboard .text-sm {
    font-size: 0.84rem;
}

.control-lists-grid a:not(.btn) {
    color: var(--accent-dark);
    font-weight: 800;
}

.control-dashboard .btn-small {
    white-space: nowrap;
}

.control-dashboard .border,
.control-dashboard.border {
    border-width: 1px;
    border-style: solid;
}

.control-dashboard .border-emerald-200 { border-color: #a7f3d0; }
.control-dashboard .bg-emerald-50 { background: #ecfdf5; }
.control-dashboard .text-emerald-900 { color: #064e3b; }
.control-dashboard .border-amber-200 { border-color: #fde68a; }
.control-dashboard .bg-amber-50 { background: #fffbeb; }
.control-dashboard .bg-amber-100 { background: #fef3c7; }
.control-dashboard .text-amber-800 { color: #92400e; }
.control-dashboard .text-amber-900 { color: #78350f; }
.control-dashboard .border-rose-200 { border-color: #fecdd3; }
.control-dashboard .bg-rose-50 { background: #fff1f2; }
.control-dashboard .text-rose-900 { color: #881337; }
.control-dashboard .border-sky-200 { border-color: #bae6fd; }
.control-dashboard .bg-sky-50 { background: #f0f9ff; }
.control-dashboard .bg-sky-100 { background: #e0f2fe; }
.control-dashboard .text-sky-800 { color: #075985; }
.control-dashboard .text-sky-900 { color: #0c4a6e; }
.control-dashboard .border-slate-200 { border-color: #e2e8f0; }
.control-dashboard .bg-slate-50 { background: #f8fafc; }
.control-dashboard .text-slate-900 { color: #0f172a; }
.control-dashboard .bg-emerald-500 { background: #10b981; }
.control-dashboard .bg-rose-500 { background: #f43f5e; }
.control-dashboard .bg-slate-400 { background: #94a3b8; }

.control-dashboard .checkout-panel {
    max-width: none;
    padding: 0.75rem;
    gap: 0.5rem;
}

@media (max-width: 1100px) {
    .control-overview-grid,
    .control-lists-grid {
        grid-template-columns: 1fr 1fr;
    }

    .control-queue-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .control-queue-card,
    .control-lists-grid > .cart-item:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .storefront-main:has(.control-dashboard) {
        width: min(100% - 1rem, 96vw);
    }

    .control-dashboard-header,
    .control-card-header,
    .control-card-actions,
    .control-lists-grid .flex {
        align-items: flex-start;
        flex-direction: column;
    }

    .control-card-actions,
    .control-card-actions .btn {
        width: 100%;
    }

    .control-dashboard-status {
        width: 100%;
    }

    .control-overview-grid,
    .control-queue-strip,
    .control-lists-grid,
    .control-metric-grid,
    .control-stats-grid {
        grid-template-columns: 1fr;
    }
}

.control-image-jobs-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.95rem;
    border: 3px solid #0f172a;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.control-image-jobs-table thead th {
    background: #0f172a;
    color: #f9fafb;
    padding: 1rem 0.9rem;
    text-align: left;
    position: sticky;
    top: 0;
    border-right: 2px solid #475569;
}

.control-image-jobs-table thead th:last-child {
    border-right: 0;
}

.control-image-jobs-table tbody td {
    padding: 1rem 0.9rem;
    vertical-align: top;
    border-top: 2px solid #cbd5e1;
    border-right: 2px solid #cbd5e1;
}

.control-image-jobs-table tbody td:last-child {
    border-right: 0;
}

.control-image-jobs-table tbody tr:nth-child(odd) {
    background: #e0f2fe;
}

.control-image-jobs-table tbody tr:nth-child(even) {
    background: #f8fafc;
}

.control-image-jobs-table tbody tr:hover {
    background: #bfdbfe;
}

.control-image-jobs-table tbody tr.control-image-job-stalled {
    background: #fde68a;
    box-shadow: inset 6px 0 0 #d97706;
}

.control-image-job-status {
    display: inline-block;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform: capitalize;
    background: #d1d5db;
    color: #111827;
    border: 1px solid rgba(15, 23, 42, 0.15);
}

.control-image-job-status-processing,
.control-image-job-status-generating {
    background: #2563eb;
    color: #eff6ff;
}

.control-image-job-status-complete,
.control-image-job-status-completed {
    background: #16a34a;
    color: #f0fdf4;
}

.control-image-job-status-failed,
.control-image-job-status-error {
    background: #dc2626;
    color: #fef2f2;
}

.control-image-job-status-pending {
    background: #f59e0b;
    color: #fff7ed;
}

.control-image-job-cell-label {
    display: block;
    font-size: 0.75rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.2rem;
}

.control-image-job-thumbnail {
    display: block;
    max-width: 80px;
    max-height: 80px;
    width: auto;
    height: auto;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    object-fit: contain;
}

.hero {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 1.25rem;
    padding: clamp(1.4rem, 2.5vw, 2rem);
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 24px rgba(20, 28, 46, 0.08);
    margin-bottom: 2rem;
}

.hero h1 {
    margin: 0 0 0.8rem;
    font-size: clamp(1.95rem, 4vw, 3rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
}

.hero p {
    color: var(--ink-muted);
}

 .home-hero-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 100%;
 }

 .home-hero-visuals {
    margin-top: 0.2rem;
    min-height: 340px;
    flex: 1 1 auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background: #eaf0fb;
 }

 .home-hero-visual-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
 }

 .home-hero-visual-slide-animated {
    opacity: 0;
    animation-name: homeHeroVisualCycle;
    animation-duration: 12s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: 0s;
 }

 .home-hero-visual-slide-animated:nth-child(2) { animation-delay: 3s; }
 .home-hero-visual-slide-animated:nth-child(3) { animation-delay: 6s; }
 .home-hero-visual-slide-animated:nth-child(4) { animation-delay: 9s; }
 .home-hero-visual-slide-animated:nth-child(5) { animation-delay: 12s; }
 .home-hero-visual-slide-animated:nth-child(6) { animation-delay: 15s; }

 .landing-hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
 }

 .landing-counter {
    margin: 0.8rem 0 0;
    font-weight: 700;
    color: color-mix(in srgb, var(--accent-dark) 48%, var(--ink-muted));
 }

 .landing-counter-soft {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.38rem 0.62rem;
    border: 1px solid color-mix(in srgb, var(--line) 92%, #fff);
    border-radius: 999px;
    background: color-mix(in srgb, #ffffff 86%, #f6f8fc);
    animation: landingCounterBreathe 3.5s ease-in-out infinite;
 }

 .landing-counter-icon {
    display: inline-flex;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    color: color-mix(in srgb, var(--accent-dark) 55%, var(--ink-muted));
    background: color-mix(in srgb, var(--accent) 14%, #fff);
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    line-height: 1;
 }

 .landing-gallery {
    margin-top: 1rem;
    display: grid;
    gap: 0.6rem;
 }

 .landing-gallery-main {
    width: 100%;
    max-height: 380px;
    min-height: 300px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--line);
 }

 .landing-gallery-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.6rem;
 }

 .landing-gallery-strip img {
    width: 100%;
    height: 112px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--line);
 }

 .buy-box-hero {
    align-self: start;
 }

 .landing-testimonials p:first-child {
    margin-top: 0;
    font-weight: 600;
 }

.eyebrow {
    margin: 0 0 0.6rem;
    color: var(--accent);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.72rem;
}

.surface {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel);
}

.section-shell {
    padding: clamp(1rem, 1.8vw, 1.4rem);
}

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

.display-title {
    margin: 0;
    font-size: clamp(1.5rem, 2.4vw, 2.2rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.lede {
    margin: 0.4rem 0 0;
    color: var(--ink-muted);
}
.hero-panel,
.demo-stage {
    display: grid;
    gap: 0.8rem;
}

.pulse-card,
.demo-sheet,
.demo-arrow,
.card,
.buy-box,
.faq-item,
.builder-empty,
.simple-list {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
}

.pulse-card,
.demo-sheet,
.demo-arrow {
    padding: 0.9rem;
    animation: float 3s ease-in-out infinite;
}

.pulse-card.delay {
    animation-delay: 0.5s;
}

.demo-arrow {
    text-align: center;
    color: var(--accent-dark);
    font-weight: 700;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes homeHeroVisualCycle {
    0% { opacity: 0; }
    8% { opacity: 1; }
    26% { opacity: 1; }
    34% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes landingCounterBreathe {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.84;
    }
    50% {
        transform: translateY(-1px);
        opacity: 1;
    }
}

section {
    margin-bottom: 2rem;
}

.grid {
    display: grid;
    gap: 1rem;
}

.cards {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.card {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
}

.card h3 {
    margin-top: 0;
}

.home-create-btn {
    margin-top: 0.55rem;
    width: fit-content;
}

.text-link {
    color: color-mix(in srgb, var(--accent) 88%, #fff);
    font-weight: 700;
}

.pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.pill {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    background: color-mix(in srgb, var(--accent-2) 12%, transparent);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.68rem 1.05rem;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    border: 1px solid color-mix(in srgb, var(--accent) 75%, #000);
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease, background 160ms ease;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.26);
}

.btn-secondary {
    background: color-mix(in srgb, var(--accent-2) 7%, transparent);
    color: var(--ink);
    border-color: color-mix(in srgb, var(--line) 82%, var(--ink-muted));
}

.btn-secondary:hover {
    background: color-mix(in srgb, var(--accent-2) 14%, transparent);
}

.btn-small {
    padding: 0.38rem 0.75rem;
    font-size: 0.88rem;
    font-weight: 600;
}

.buy-box {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel-elevated) 92%, #000);
}

.purchase-clarity {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1rem 0;
}

.clarity-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.85rem;
    display: grid;
    gap: 0.35rem;
}

.clarity-card strong {
    font-size: 1rem;
    line-height: 1.2;
}

.clarity-card p {
    margin: 0;
    color: var(--ink-muted);
    font-size: 0.92rem;
}

.clarity-card-now {
    background: color-mix(in srgb, var(--accent) 10%, #fff);
}

.clarity-card-later {
    background: color-mix(in srgb, var(--accent-2) 18%, #fff);
}

.clarity-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-dark);
    background: color-mix(in srgb, #fff 52%, var(--accent) 48%);
}

.buy-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.choice-picker,
.size-picker {
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    gap: 0.4rem;
}

.choice-picker legend,
.size-picker legend {
    padding: 0;
    font-weight: 600;
    color: var(--ink-muted);
}

.choice-picker-options,
.size-picker-options {
    display: grid;
    gap: 0.65rem;
}

.choice-option,
.size-option {
    display: block;
}

.choice-option-input,
.size-option-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice-option-card,
.size-option-card {
    display: grid;
    gap: 0.18rem;
    min-height: 100%;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-soft) 78%, #fff 22%);
    color: var(--ink);
    line-height: 1.25;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.choice-option-card strong,
.size-option-card strong {
    color: var(--ink);
}

.choice-option-card span,
.size-option-card span {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ink-muted);
}

.choice-option-input:checked + .choice-option-card,
.size-option-input:checked + .size-option-card {
    border-color: color-mix(in srgb, var(--accent) 68%, #000 8%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
    background: color-mix(in srgb, var(--accent) 9%, #fff);
}

.choice-option-input:focus-visible + .choice-option-card,
.size-option-input:focus-visible + .size-option-card {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

label {
    display: grid;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--ink-muted);
}

.field-hint {
    font-size: 0.8rem;
    color: color-mix(in srgb, var(--accent-dark) 82%, #000);
    font-weight: 600;
}

.field-error {
    font-size: 0.82rem;
    color: color-mix(in srgb, var(--danger) 82%, #7a1025 18%);
    font-weight: 700;
}

.field-label-with-help {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.help-jump-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
    background: color-mix(in srgb, var(--accent) 12%, #fff);
    color: color-mix(in srgb, var(--accent-dark) 78%, #000);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
}

.help-jump-link:focus-visible,
.help-jump-link:hover {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.field-warning {
    font-size: 0.82rem;
    color: color-mix(in srgb, #c77700 82%, #5a3900 18%);
    font-weight: 700;
}

input[aria-invalid="true"] {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}

button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

select,
input,
button,
textarea {
    font: inherit;
    padding: 0.56rem 0.66rem;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-soft) 78%, #fff 22%);
    color: var(--ink);
}

.price-row {
    display: flex;
    gap: 2rem;
    font-size: 1.1rem;
}

.price-row strong {
    font-size: 1.25rem;
}

.buy-box-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.8rem;
}

.buy-note {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    background: color-mix(in srgb, var(--accent) 9%, transparent);
    color: var(--ink-muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.buy-box-form {
    display: grid;
    gap: 0.9rem;
}

.layout-picker {
    grid-column: 1 / -1;
}

.layout-toggle-list {
    display: grid;
    gap: 0.55rem;
}

.layout-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-soft) 82%, #fff 18%);
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.layout-toggle-row-active {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
    background: color-mix(in srgb, var(--accent) 8%, #fff);
}

.layout-toggle-name {
    font-weight: 700;
    color: var(--ink);
}

.layout-toggle-button {
    min-width: 4.2rem;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--line) 88%, #fff);
    background: #fff;
    color: var(--ink-muted);
    font-weight: 800;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.layout-toggle-button-active {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
    background: color-mix(in srgb, var(--accent) 86%, #fff 14%);
    color: #fff;
    box-shadow: 0 10px 20px rgba(20, 28, 46, 0.08);
}

.layout-toggle-button:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ---- Reuse project collapsible panel ---- */

.reuse-project-panel legend {
    margin-bottom: 0.55rem;
}

.reuse-project-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    width: 100%;
    padding: 0.75rem 0.95rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-soft) 82%, #fff 18%);
    color: var(--ink);
    font-size: inherit;
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
    text-align: left;
}

.reuse-project-trigger:hover {
    border-color: color-mix(in srgb, var(--accent) 16%, var(--line));
    background: color-mix(in srgb, var(--bg-soft) 60%, #fff 40%);
}

.reuse-project-trigger:focus-visible,
.reuse-project-trigger[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
    background: color-mix(in srgb, var(--accent) 8%, #fff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}

.reuse-project-trigger-summary {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.reuse-project-trigger-label {
    font-weight: 700;
    font-size: 0.96rem;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reuse-project-trigger-sub {
    font-weight: 500;
    font-size: 0.82rem;
    color: var(--ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reuse-project-trigger-sub:empty {
    display: none;
}

.reuse-project-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent-ink, var(--accent));
    font-size: 0.75rem;
    font-weight: 800;
    transition: transform 0.22s ease, background-color 0.22s ease;
}

.reuse-project-trigger[aria-expanded="true"] .reuse-project-chevron {
    transform: rotate(180deg);
    background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.reuse-project-body {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.65rem;
    overflow: hidden;
    transition: grid-template-rows 0.28s ease, opacity 0.22s ease, margin-top 0.28s ease;
}

/* When hidden: collapse to zero height */
.reuse-project-body[hidden] {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    margin-top: 0;
    gap: 0;
}

.reuse-project-body > * {
    overflow: hidden;
}

/* Visible state: auto-height grid row */
.reuse-project-body:not([hidden]) {
    grid-template-rows: 1fr;
}

.reuse-project-list .layout-toggle-row {
    cursor: pointer;
}

.reuse-project-list {
    max-height: min(18rem, 56vh);
    overflow-y: auto;
    padding-right: 0.2rem;
}

/* ---- End reuse project panel ---- */

.page-summary-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.page-summary-strip span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-soft) 86%, #fff 14%);
    color: var(--ink-muted);
    font-size: 0.84rem;
    font-weight: 700;
}

.page-summary-strip strong {
    color: var(--ink);
    font-size: 0.94rem;
}

.cart-review-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 1rem;
    overflow: auto;
}

.cart-review-modal[hidden] {
    display: none;
}

.cart-review-modal-backdrop {
    position: fixed;
    inset: 0;
    border: 0;
    background: rgba(20, 28, 46, 0.48);
    cursor: pointer;
}

.cart-review-modal-card {
    position: relative;
    z-index: 1;
    width: min(680px, 94vw);
    display: grid;
    gap: 1rem;
    padding: 1.1rem;
    border: 1px solid color-mix(in srgb, var(--line) 82%, #fff);
    border-radius: 22px;
    background: color-mix(in srgb, var(--panel) 96%, #fff);
    box-shadow: 0 24px 70px rgba(20, 28, 46, 0.22);
}

.cart-review-modal-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem;
    align-items: start;
}

.cart-review-modal-header h3,
.cart-review-modal-header p {
    margin: 0;
}

.cart-review-modal-header > .muted {
    grid-column: 1 / -1;
}

.cart-review-modal-close {
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink-muted);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.cart-review-modal-close:hover,
.cart-review-modal-close:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
    color: var(--ink);
}

.cart-review-character-highlight {
    display: grid;
    gap: 0.25rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    border-radius: 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, #fff), #fff 72%);
}

.cart-review-character-highlight span {
    color: var(--ink-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cart-review-character-highlight strong {
    color: var(--ink);
    font-family: Fraunces, Georgia, serif;
    font-size: clamp(2rem, 7vw, 3.4rem);
    line-height: 0.95;
}

.cart-review-character-highlight small {
    color: var(--ink-muted);
    font-weight: 700;
}

.cart-review-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin: 0;
}

.cart-review-summary-grid div {
    display: grid;
    gap: 0.2rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-soft) 86%, #fff 14%);
}

.cart-review-summary-grid dt {
    color: var(--ink-soft);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.cart-review-summary-grid dd {
    margin: 0;
    color: var(--ink);
    font-weight: 800;
}

.cart-review-modal-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.6rem;
}

.cart-review-modal-open {
    overflow: hidden;
}

@media (max-width: 640px) {
    .cart-review-summary-grid {
        grid-template-columns: 1fr;
    }

    .cart-review-modal-actions .btn {
        width: 100%;
    }
}

.buy-box-help-section {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.buy-box-help-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.buy-box-help-card {
    display: grid;
    gap: 0.45rem;
    padding: 0.95rem 1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel) 92%, #fff);
}

.buy-box-help-card h3,
.buy-box-help-card p {
    margin: 0;
}

.buy-box-help-card h3:focus-visible,
.quality-tier-panel:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, #fff);
    outline-offset: 4px;
}

.social-proof-grid,
.workflow-grid,
.quality-grid {
    display: grid;
    gap: 0.85rem;
}

.social-proof-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.social-proof-slider {
    border: 1px solid color-mix(in srgb, var(--line) 92%, #fff);
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel) 96%, #fff);
    overflow: hidden;
}

.social-proof-slider-track {
    display: flex;
    transition: transform 380ms ease;
    will-change: transform;
}

.social-proof-slide {
    flex: 0 0 100%;
    border: 0;
    border-radius: 0;
    padding: clamp(0.9rem, 2vw, 1.2rem);
}

.social-proof-slide .lede {
    margin-bottom: 0.45rem;
    font-size: clamp(1rem, 2.6vw, 1.3rem);
    line-height: 1.35;
}

.social-proof-slider-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.55rem 0.8rem 0.75rem;
    border-top: 1px solid color-mix(in srgb, var(--line) 92%, #fff);
    background: color-mix(in srgb, var(--surface-glow) 55%, #fff);
}

.social-proof-slider-dot {
    width: 0.55rem;
    height: 0.55rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--line) 85%, #fff);
    background: color-mix(in srgb, var(--line) 70%, #fff);
    cursor: pointer;
}

.social-proof-slider-dot.is-active {
    background: var(--accent);
    border-color: color-mix(in srgb, var(--accent-dark) 65%, var(--line));
}

.workflow-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    position: relative;
}

.quality-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.stat-card,
.workflow-step,
.quality-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
    padding: 0.85rem;
}

.workflow-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
    gap: 1rem;
    align-items: end;
    margin-bottom: 1rem;
}

.workflow-intro {
    margin: 0;
    max-width: 34rem;
}

.workflow-step-modern {
    position: relative;
    display: grid;
    gap: 0.85rem;
    min-height: 100%;
    padding: 1.1rem;
    background: color-mix(in srgb, var(--panel-elevated) 55%, #fff);
    box-shadow: 0 16px 30px rgba(20, 28, 46, 0.06);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.workflow-step-modern:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--accent-2) 26%, var(--line));
    box-shadow: 0 20px 36px rgba(20, 28, 46, 0.1);
}

.workflow-step-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.workflow-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, #fff);
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    color: var(--accent-dark);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.workflow-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 18px;
    background: color-mix(in srgb, var(--accent-2) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--accent-2) 18%, var(--line));
    color: color-mix(in srgb, var(--accent-dark) 62%, var(--accent-2));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.workflow-step-icon svg {
    width: 1.35rem;
    height: 1.35rem;
}

.workflow-step-modern h3 {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.25;
}

.workflow-step-modern p {
    margin: 0;
}

.stat-card strong {
    display: block;
    font-size: 1.35rem;
    line-height: 1.1;
}

.trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.trust-chip {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    padding: 0.3rem 0.65rem;
    font-size: 0.82rem;
    color: var(--ink-muted);
}

@media (min-width: 900px) {
    .workflow-grid::before {
        content: '';
        position: absolute;
        top: 1.6rem;
        left: 8%;
        right: 8%;
        height: 1px;
        background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-2) 16%, var(--line)), transparent);
        pointer-events: none;
    }

    .workflow-step-modern {
        z-index: 1;
    }
}

@media (max-width: 760px) {
    .workflow-header {
        grid-template-columns: 1fr;
    }
}

.hero-counter-panel {
    align-content: start;
}

.hero-cta-grid {
    display: grid;
    gap: 0.65rem;
}

.builder-cta-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-2) 8%, #fff);
    padding: 0.75rem 0.8rem;
    display: grid;
    gap: 0.35rem;
}

.builder-cta-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.builder-cta-title {
    font-weight: 700;
}

.builder-cta-subtitle {
    font-size: 0.82rem;
    color: var(--ink-muted);
}

.builder-cta-counter {
    font-size: 0.8rem;
    color: color-mix(in srgb, var(--accent-dark) 85%, #000);
}

.builder-cta-create-btn {
    margin: 0;
}

.quality-card-image {
    width: 100%;
    max-height: 170px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--line);
    margin-bottom: 0.55rem;
}

.quality-preview-btn {
    margin-top: 0.5rem;
}

.quality-tier-panel {
    margin-top: 1rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    padding: 0.8rem;
}

.quality-tier-panel h3 {
    margin: 0 0 0.3rem;
}

.quality-tier-table-wrap {
    overflow-x: auto;
}

.quality-tier-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 420px;
}

.quality-tier-table th,
.quality-tier-table td {
    border: 1px solid var(--line);
    padding: 0.55rem 0.6rem;
    text-align: left;
    vertical-align: top;
}

.quality-tier-table th {
    background: color-mix(in srgb, var(--bg-soft) 88%, #fff);
    font-size: 0.88rem;
}

.quality-tier-recommended td,
.quality-tier-recommended th {
    background: color-mix(in srgb, var(--accent) 9%, #fff);
}

.quality-badge {
    display: inline-flex;
    margin-left: 0.4rem;
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    background: color-mix(in srgb, var(--accent) 18%, #fff);
    color: var(--accent-dark);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.faq-list {
    display: grid;
    gap: 0.8rem;
}

.status-banner {
    border: 1px solid var(--line);
    background: #fff8dd;
    border-radius: 10px;
    padding: 0.75rem;
}

.status-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.status-chip-in-progress {
    background: #fff8dd;
    color: var(--accent-dark);
}

.status-chip-completed {
    background: #e9f6eb;
    color: #1f6a2d;
}

.status-chip-error {
    background: #fee2e2;
    color: #991b1b;
}

.status-chip-pending-count {
    background: color-mix(in srgb, var(--accent) 14%, #fff);
    color: var(--accent-dark);
}

.order-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1rem 0 1.15rem;
}

.order-tab {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    min-width: 8.5rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.7rem 0.95rem;
    background: color-mix(in srgb, var(--panel) 88%, #fff);
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.order-tab span {
    font-size: 0.9rem;
    font-weight: 700;
}

.order-tab strong {
    display: inline-flex;
    min-width: 1.8rem;
    justify-content: center;
    align-items: center;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    background: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
    font-weight: 800;
}

.order-tab:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.05);
}

.order-tab.is-active {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, #fff), color-mix(in srgb, var(--accent-2) 10%, #fff));
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
}

.order-list {
    gap: 1rem;
}

.orders-empty-filter {
    align-items: center;
    margin-bottom: 1rem;
}

.orders-empty-filter h2 {
    margin: 0 0 0.2rem;
}

.cart-list {
    display: grid;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.cart-item {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
    padding: 0.9rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.order-completed-books {
    display: grid;
    gap: 0.8rem;
    width: 100%;
    margin-top: 0.4rem;
    padding-top: 0.8rem;
    border-top: 1px solid color-mix(in srgb, var(--line) 88%, #fff);
}

.order-item {
    display: grid;
    gap: 0.85rem;
}

.order-item-in-progress {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 7%, #fff), #fff);
}

.order-item-completed {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, #fff), #fff);
}

.order-item-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
}

.order-item-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0 0 0.2rem;
}

.order-books-list {
    display: grid;
    gap: 0.8rem;
}

.order-item-completed .order-books-list,
.order-item-completed .order-completed-books {
    gap: 0.9rem;
}

.order-completed-books-title {
    margin: 0;
    font-weight: 700;
}

.order-book-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-2) 8%, #fff);
    padding: 0.9rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
}

.order-book-card h3 {
    margin: 0;
}

.order-book-card-compact {
    align-items: center;
}

.order-book-card-active {
    background: color-mix(in srgb, var(--accent-2) 7%, #fff);
}

.order-book-card-print {
    align-items: start;
    flex-wrap: wrap;
}

.order-book-card-completed {
    align-items: start;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, #fff), #fff);
}

.order-book-card-print .support-ticket-card {
    flex: 0 0 100%;
    width: 100%;
}

.order-book-info {
    display: grid;
    gap: 0.3rem;
}

.order-book-topline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.order-book-section-title {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent-dark);
}

.order-book-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    background: color-mix(in srgb, var(--accent) 18%, #fff);
    color: var(--accent-dark);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.order-book-meta-id {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink-muted);
}

.order-book-actions {
    justify-content: flex-end;
}

.order-book-actions-primary {
    align-self: center;
}

.order-book-action-groups {
    display: grid;
    gap: 0.7rem;
    width: 100%;
}

.order-action-group {
    display: grid;
    gap: 0.6rem;
    border: 1px solid color-mix(in srgb, var(--line) 88%, #fff);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-soft) 56%, #fff);
    padding: 0.75rem;
}

.order-action-group .support-ticket-card {
    margin-top: 0;
}

.order-action-group-title {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent-dark);
}

.order-pdf-settings-button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.order-pdf-settings-button::before {
    content: "⚙";
    font-size: 0.9em;
    line-height: 1;
}

.order-pdf-settings-grid {
    display: grid;
    gap: 0.85rem;
}

.order-pdf-settings-grid label {
    display: grid;
    gap: 0.35rem;
}

.order-pdf-settings-status {
    min-height: 1.2rem;
    margin: 0;
}

.order-printed-copies {
    border: 1px solid color-mix(in srgb, var(--line) 88%, #fff);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-soft) 60%, #fff);
    padding: 0.8rem 0.9rem;
}

.print-orders-panel {
    margin-top: 0.9rem;
}

.order-printed-copies summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    font-weight: 800;
}

.order-printed-copies summary strong {
    display: inline-flex;
    min-width: 1.8rem;
    justify-content: center;
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    background: #fff;
}

.order-printed-copies-list {
    display: grid;
    gap: 0.7rem;
    margin-top: 0.8rem;
}

.order-printed-copy-row {
    display: grid;
    gap: 0.25rem;
    padding-top: 0.65rem;
    border-top: 1px solid color-mix(in srgb, var(--line) 88%, #fff);
}

.order-printed-copy-row:first-child {
    padding-top: 0;
    border-top: 0;
}

.order-tracking-card {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.45rem;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    border-left: 3px solid var(--accent);
    border-radius: 14px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, #fff), color-mix(in srgb, var(--accent-2) 7%, #fff));
    padding: 0.75rem;
}

.order-tracking-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.order-tracking-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.order-tracking-title,
.order-tracking-provider {
    display: block;
}

.order-tracking-title {
    font-weight: 800;
    color: var(--ink);
}

.order-tracking-provider {
    color: var(--ink-muted);
    font-size: 0.88rem;
}

.order-tracking-code-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    color: var(--ink-muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.order-tracking-code-row code {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    padding: 0.22rem 0.55rem;
    color: var(--ink);
    font-size: 0.84rem;
    font-weight: 800;
    word-break: break-all;
    user-select: all;
}

.order-tracking-link {
    justify-self: start;
}

.order-tracking-note {
    margin: 0;
    font-size: 0.82rem;
}

.order-book-export-status {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
}

.order-book-export-status:empty {
    display: none;
}

.order-book-export-status.is-working {
    position: relative;
    border: 1px solid rgba(180, 111, 42, 0.28);
    border-radius: 12px;
    background: rgba(255, 246, 232, 0.96);
    padding: 0.65rem 0.75rem 0.65rem 2.25rem;
    color: #8a5a1e;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(132, 89, 35, 0.08);
}

.order-book-export-status.is-working::before {
    content: "";
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    width: 0.85rem;
    height: 0.85rem;
    border: 2px solid rgba(132, 89, 35, 0.2);
    border-top-color: var(--accent-dark);
    border-radius: 999px;
    animation: builderSpin 0.9s linear infinite;
}

.toast-container {
    position: fixed;
    z-index: 1200;
    right: 1.25rem;
    bottom: 1.25rem;
    display: grid;
    gap: 0.65rem;
    width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
}

.storefront-toast {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.65rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent-2);
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel) 94%, #fff);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
    color: var(--ink);
    font-weight: 800;
    line-height: 1.35;
    pointer-events: auto;
    animation: toastSlideUp 220ms ease-out;
}

.storefront-toast::before {
    content: "i";
    display: inline-grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-2) 18%, #fff);
    color: var(--accent-2);
    font-size: 0.8rem;
    font-weight: 900;
}

.storefront-toast.is-leaving {
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 180ms ease, transform 180ms ease;
}

.storefront-toast-success {
    border-left-color: var(--ok);
}

.storefront-toast-success::before {
    content: "✓";
    background: color-mix(in srgb, var(--ok) 18%, #fff);
    color: #197947;
}

.storefront-toast-error {
    border-left-color: var(--danger);
}

.storefront-toast-error::before {
    content: "!";
    background: color-mix(in srgb, var(--danger) 16%, #fff);
    color: #b42318;
}

@keyframes toastSlideUp {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }

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

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

    .storefront-toast.is-leaving {
        transition: none;
    }
}

.order-book-flow {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    justify-content: center;
    align-self: center;
    color: var(--accent-dark);
}

.order-book-flow-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.24rem 0.6rem;
    background: color-mix(in srgb, var(--accent) 14%, #fff);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.order-book-flow-badge-print {
    background: color-mix(in srgb, var(--accent-2) 22%, #fff);
}

.order-book-flow-arrow {
    font-size: 1rem;
    font-weight: 900;
}

.order-book-reorder-form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.65rem;
}

.control-event-info {
    width: 100%;
}

.control-event-payload {
    margin: 0;
    padding: 0.75rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-soft) 92%, #fff);
    border: 1px solid var(--line);
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--ink);
}

@media (max-width: 760px) {
    .toast-container {
        right: 1rem;
        bottom: 1rem;
        left: 1rem;
        width: auto;
    }

    .order-tabs {
        display: grid;
    }

    .order-tab {
        min-width: 0;
        width: 100%;
    }

    .order-item-header,
    .order-book-card {
        display: grid;
    }

    .order-book-action-groups {
        gap: 0.8rem;
    }

    .order-book-actions {
        justify-content: start;
    }

    .order-book-actions-primary {
        align-self: stretch;
    }

    .order-book-flow {
        justify-content: start;
    }
}

.checkout-panel {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    padding: 1rem;
    display: grid;
    gap: 0.6rem;
    max-width: 420px;
}

.checkout-panel.pagination-panel {
    width: 100%;
    max-width: none;
    padding: 0.75rem;
}

/* ── Pagination ── */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.32rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    color: var(--ink-muted);
    font-size: 0.84rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.pagination-btn:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    color: var(--ink);
    background: color-mix(in srgb, var(--accent) 8%, #fff);
}

.pagination-btn--disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.pagination-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.pagination-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.85rem;
    height: 1.85rem;
    padding: 0 0.25rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    color: var(--ink-muted);
    font-size: 0.84rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.pagination-page:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    color: var(--ink);
    background: color-mix(in srgb, var(--accent) 8%, #fff);
}

.pagination-page--current {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    background: color-mix(in srgb, var(--accent) 18%, #fff);
    color: var(--accent-dark);
    font-weight: 800;
    cursor: default;
    pointer-events: none;
}

.pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    color: var(--ink-muted);
    font-size: 0.84rem;
    font-weight: 600;
}

@media (max-width: 420px) {
    .pagination {
        gap: 0.25rem;
    }

    .pagination-btn {
        padding: 0.3rem 0.5rem;
        font-size: 0.8rem;
    }

    .pagination-btn-label {
        display: none;
    }

    .pagination-page {
        min-width: 1.65rem;
        height: 1.65rem;
        font-size: 0.8rem;
    }
}

.checkout-consent {
    display: flex;
    align-items: start;
    gap: 0.7rem;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--ink-muted);
}

.checkout-consent input {
    margin-top: 0.18rem;
}

@media (max-width: 760px) {
    .purchase-clarity,
    .price-row {
        grid-template-columns: 1fr;
        display: grid;
        gap: 0.65rem;
    }

    .buy-box-help-grid {
        grid-template-columns: 1fr;
    }

    .layout-toggle-row {
        display: grid;
        grid-template-columns: 1fr auto;
    }
}

.wrap-actions {
    flex-wrap: wrap;
}

.faq-item {
    padding: 0.8rem;
}

.faq-item summary {
    font-weight: 700;
    cursor: pointer;
}

.simple-list {
    padding: 1rem 1rem 1rem 1.8rem;
}

.legal-sections {
    display: grid;
    gap: 1rem;
    margin-top: 1.2rem;
}

.legal-section {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    padding: clamp(1rem, 1.8vw, 1.35rem);
}

.legal-section h2 {
    margin: 0 0 0.65rem;
    font-size: clamp(1.05rem, 1.8vw, 1.35rem);
}

.legal-section p {
    margin: 0.65rem 0 0;
    color: var(--ink-muted);
}

.legal-section ul {
    margin: 0.75rem 0 0;
    padding-left: 1.2rem;
    color: var(--ink-muted);
}

.storefront-footer a {
    color: inherit;
    font-weight: 700;
}

.builder-shell {
    display: grid;
    gap: 1rem;
}


.builder-summary-card,
.builder-current-book-card,
.builder-active-card {
    min-width: 0;
}


.builder-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    padding: 1rem;
    display: grid;
    gap: 0.9rem;
}

.builder-current-book-card {
    gap: 0.45rem;
}

.builder-current-book-title {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.2;
}

.builder-current-book-meta {
    display: grid;
    gap: 0.2rem;
}

.support-ticket-card {
    gap: 0.85rem;
}

.support-ticket-toggle {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0;
    text-align: left;
    width: 100%;
}

.support-ticket-toggle strong,
.support-ticket-toggle span {
    display: block;
}

.support-ticket-toggle-meta {
    color: var(--ink-muted);
    flex: 0 0 auto;
    font-size: 0.9rem;
    text-align: right;
}

.support-ticket-toggle[aria-expanded="true"] .support-ticket-toggle-meta span {
    transform: rotate(180deg);
}

.support-ticket-panel {
    display: grid;
    gap: 0.85rem;
}

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

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

.support-ticket-form {
    max-width: none;
}

.support-thread {
    display: grid;
    gap: 0.65rem;
}

.support-thread-control {
    width: 100%;
}

.support-message {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.8rem;
    background: color-mix(in srgb, var(--bg-soft) 88%, #fff);
}

.support-message-staff {
    background: color-mix(in srgb, var(--accent) 12%, #fff);
}

.support-message-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    color: var(--ink-muted);
    font-size: 0.85rem;
}

.support-message p {
    white-space: pre-wrap;
}

.support-image-report-card {
    display: grid;
    gap: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--warning) 42%, var(--line));
    border-radius: var(--radius-sm);
    background: #fffaf0;
    padding: 1rem;
}

.support-image-report-card.is-refunded {
    border-color: color-mix(in srgb, #2f9e44 45%, var(--line));
    background: #f4fff7;
}

.support-image-report-card.is-closed-no-refund {
    background: var(--bg-soft);
}

.support-image-report-main {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
}

.support-image-report-main img,
.support-image-report-gallery img {
    display: block;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    cursor: zoom-in;
}

.support-image-report-gallery {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.support-image-report-gallery figure {
    display: grid;
    gap: 0.35rem;
    margin: 0;
}

.support-image-report-gallery figure.is-reported img {
    border-color: var(--warning);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 28%, transparent);
}

.support-image-report-actions {
    align-items: end;
    display: grid;
    gap: 0.65rem;
    grid-template-columns: minmax(150px, 190px) minmax(220px, 1fr) auto auto;
}

 .builder-debug-panel {
    border: 1px solid #cfd7ee;
    border-radius: 10px;
    background: #f7f9ff;
    padding: 0.75rem;
    display: grid;
    gap: 0.7rem;
}

 .builder-debug-header p {
    margin: 0;
}

 .builder-debug-panel-body {
    display: grid;
    gap: 0.65rem;
}

 .builder-debug-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.5rem;
}

 .builder-debug-kv {
    border: 1px solid #dce3f5;
    border-radius: 8px;
    background: #fff;
    padding: 0.4rem 0.45rem;
    display: grid;
    gap: 0.2rem;
}

 .builder-debug-kv-label {
    color: var(--muted);
    font-size: 0.75rem;
}

 .builder-debug-kv-value {
    font-weight: 700;
    font-size: 0.85rem;
}

 .builder-debug-section {
    border: 1px solid #dce3f5;
    border-radius: 8px;
    background: #fff;
    padding: 0.55rem;
    display: grid;
    gap: 0.45rem;
}

 .builder-debug-section h3 {
    margin: 0;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
 }

 .builder-debug-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
 }

 .builder-debug-toolbar p {
    margin: 0;
 }

 .builder-debug-toolbar-button {
    flex-shrink: 0;
 }

 .builder-debug-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
    max-height: 240px;
    overflow: auto;
}

 .builder-debug-item {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fcfcff;
    padding: 0.35rem 0.45rem;
}

 .builder-debug-item p {
    margin: 0;
    font-size: 0.82rem;
}

 .builder-debug-item-selectable {
    padding: 0;
}

 .builder-debug-item-selected {
    border-color: #9eb6e4;
    box-shadow: inset 0 0 0 1px #c5d5f3;
    background: #f2f6ff;
}

 .builder-debug-event-button {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: transparent;
    text-align: left;
    color: inherit;
    padding: 0.35rem 0.45rem;
    cursor: pointer;
}

 .builder-debug-event-button:hover {
    background: #f7f9ff;
}

 .builder-debug-event-button:focus-visible {
    outline: 2px solid #8ca7da;
    outline-offset: 1px;
}

 .builder-debug-grid-detail {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

 .builder-debug-copy-row {
    display: flex;
    justify-content: flex-end;
 }

 .builder-debug-copy-button {
    margin-top: 0.1rem;
 }

 .builder-debug-detail-block {
    border: 1px solid #dce3f5;
    border-radius: 8px;
    background: #fcfdff;
    padding: 0.4rem;
}

 .builder-debug-detail-block summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 0.8rem;
}

 .builder-debug-detail-block[open] summary {
    margin-bottom: 0.35rem;
}

 .builder-debug-pre {
    margin: 0;
    max-height: 260px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.76rem;
    line-height: 1.35;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

 .builder-debug-reference-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.65rem;
 }

 .builder-debug-reference-image {
    display: grid;
    gap: 0.3rem;
 }

 .builder-debug-reference-image img {
    display: block;
    width: 100%;
    max-height: 160px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #dce3f5;
    background: #fff;
 }

 .builder-debug-item-client-warn {
    border-color: #efd8b7;
    background: #fff8f0;
}

 .builder-debug-status {
    display: inline-flex;
    padding: 0.08rem 0.4rem;
    border-radius: 999px;
    border: 1px solid #dce3f5;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: lowercase;
}

 .builder-debug-status-succeeded,
 .builder-debug-status-complete {
    background: #eff8f0;
    border-color: #bfe2ba;
    color: #245f1b;
}

 .builder-debug-status-failed,
 .builder-debug-status-error {
    background: #fff2f2;
    border-color: #f3c4c4;
    color: #8d1f1f;
}

 .builder-debug-status-polled,
 .builder-debug-status-pending {
    background: #f4f6ff;
    border-color: #cfd7ee;
    color: #27447a;
}

 .builder-debug-status-skipped {
    background: #fff8eb;
    border-color: #efd8b7;
    color: #8a5a1e;
}

 .builder-debug-type {
    display: inline-flex;
    margin-left: 0.25rem;
    padding: 0.08rem 0.4rem;
    border-radius: 999px;
    border: 1px solid #dce3f5;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: lowercase;
 }

 .builder-debug-type-text {
    background: #eef7ff;
    border-color: #bfdcff;
    color: #1d4f91;
 }

 .builder-debug-type-text-from-image {
    background: #f2f0ff;
    border-color: #d3c8ff;
    color: #5b3ba3;
 }

 .builder-debug-type-image {
    background: #effbf4;
    border-color: #bfe8cc;
    color: #21633d;
 }

 .builder-debug-type-client-only {
    background: #f5f6f8;
    border-color: #d6dbe4;
    color: #4b5568;
 }

 .builder-debug-type-poll {
    background: #fff8eb;
    border-color: #efd8b7;
    color: #8a5a1e;
 }

 .builder-debug-type-other {
    background: #f4f6ff;
    border-color: #cfd7ee;
    color: #27447a;
 }

.builder-step {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.8rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    display: grid;
    gap: 0.8rem;
}

.builder-step-surface {
    background: color-mix(in srgb, var(--panel-elevated) 75%, #fff);
    border-color: color-mix(in srgb, var(--line) 84%, #fff);
    min-width: 0;
}

.builder-step legend {
    padding: 0 0.4rem;
    font-weight: 700;
}

.builder-step textarea {
    min-height: 90px;
}

.builder-actions {
    display: flex;
    justify-content: flex-start;
}

.builder-inline-action {
    margin-bottom: 0.8rem;
}

.builder-icon-form {
    margin: 0;
}

.icon-btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--accent-dark);
    font-weight: 700;
    line-height: 1;
}

.builder-inline-form {
    display: grid;
    gap: 0.75rem;
}

.builder-credits-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
}

.builder-credits-label {
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink);
}

.builder-credits-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    font-weight: 800;
    background: color-mix(in srgb, var(--accent-2) 14%, #fff);
    color: var(--accent-dark);
}

.builder-credits-copy {
    margin: 0;
    color: var(--ink-muted);
    font-size: 0.92rem;
}

.builder-credits-bar.is-empty {
    border-color: #efd8b7;
    background: #fff8f0;
}

.builder-credits-bar.is-empty .builder-credits-pill {
    background: #fde9d2;
    color: #8a5a1e;
}

.builder-credits-cta {
    margin-left: auto;
}

.builder-progress-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
}

.builder-global-credits-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--accent-2) 34%, var(--line));
    border-radius: 999px;
    padding: 0.35rem 0.65rem;
    background: color-mix(in srgb, var(--accent-2) 12%, #fff);
    color: var(--accent-dark);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
}

.builder-credit-pack-preview {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
}

.builder-fields {
    display: grid;
    gap: 0.85rem;
}

.builder-fields > * {
    min-width: 0;
}

.builder-field-full {
    grid-column: 1 / -1;
}

.builder-field-half {
    grid-column: span 1;
}

.builder-reuse-import {
    display: grid;
    gap: 0.85rem;
    margin: 0.35rem 0 0.7rem;
    padding: 1rem;
    border-color: color-mix(in srgb, var(--accent-2) 34%, var(--line));
    background: color-mix(in srgb, var(--accent-2) 9%, var(--panel));
}

.builder-reuse-import summary {
    cursor: pointer;
    color: var(--ink);
}

.builder-reuse-import > :last-child {
    margin-bottom: 0;
}


.builder-step-nav {
    margin-top: 0.3rem;
}

.builder-step-nav-note {
    margin: 0.5rem 0 0;
}

.builder-step-generation-banner {
    margin: 0 0 1rem;
    border-color: #efd8b7;
    background: linear-gradient(135deg, #fffaf0 0%, #fff3d9 100%);
    box-shadow: 0 10px 24px color-mix(in srgb, #d79d46 14%, transparent);
}

.builder-step-generation-banner-title {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    color: #7a4d16;
    font-size: 1rem;
    font-weight: 800;
}

.builder-step-generation-banner-title::before {
    content: "";
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 0.35rem color-mix(in srgb, currentColor 18%, transparent);
    animation: pulseFade 1.1s ease-in-out infinite;
}

.builder-step-generation-banner-copy {
    margin: 0.45rem 0 0;
    color: #8a5a1e;
    line-height: 1.5;
}

.builder-page-plan-progress {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.85rem;
    color: #7a4d16;
    font-size: 0.88rem;
    font-weight: 800;
}

.builder-page-plan-progress-track {
    width: 100%;
    height: 0.55rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(138, 90, 30, 0.14);
}

.builder-page-plan-progress-track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #d79d46 0%, #f4cb84 100%);
    transition: width 0.35s ease;
}

.builder-step-waiting-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.5rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid #efd8b7;
    border-radius: 999px;
    background: #fff8f0;
    color: #8a5a1e;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.builder-step-waiting-badge::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.65;
    animation: pulseFade 1.2s ease-in-out infinite;
}

.builder-page-plan-loading-card {
    position: relative;
    overflow: hidden;
    border-color: #efd8b7;
    background: linear-gradient(180deg, #fffdf8 0%, #fff8ef 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.builder-page-plan-loading-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.55) 45%, transparent 75%);
    transform: translateX(-100%);
    animation: builderLoadingSweep 1.7s ease-in-out infinite;
    pointer-events: none;
}

.builder-page-plan-loading-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.25rem;
}

.builder-page-plan-loading-card-header p {
    margin: 0;
    min-width: 0;
    flex-shrink: 0;
}

.builder-page-plan-loading-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid #efd8b7;
    border-radius: 999px;
    background: #fff8f0;
    color: #8a5a1e;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.builder-page-plan-loading-pill::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: currentColor;
    animation: pulseFade 1.1s ease-in-out infinite;
}

.builder-page-plan-loading-copy {
    position: relative;
    margin: 0.55rem 0 0.8rem;
    color: #8a5a1e;
    font-weight: 600;
}

.builder-page-plan-loading-bar {
    position: relative;
    width: 100%;
    height: 0.4rem;
    margin-top: 0.9rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(138, 90, 30, 0.12);
}

.builder-page-plan-loading-bar::after {
    content: "";
    display: block;
    width: 35%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #e8b35d 0%, #f4cb84 100%);
    animation: builderLoadingBar 1.3s ease-in-out infinite;
}

.builder-step-cancel-button {
    background: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 78%, #000);
    color: #fff;
}

.builder-step-cancel-button[hidden] {
    display: none;
}

.builder-progress-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    gap: 0.55rem;
    margin-bottom: 0.35rem;
}

.builder-progress-current {
    margin: 0;
    font-size: 0.84rem;
}

.builder-steps-indicator {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 0.08rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.builder-steps-indicator::-webkit-scrollbar {
    display: none;
}

.builder-step-pill {
    min-height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.2rem 0.55rem;
    white-space: nowrap;
    flex: 0 0 auto;
}

.builder-step-pill-active {
    border-color: var(--accent);
    background: #fff2ea;
    font-weight: 700;
}

.builder-step-pill-link {
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.builder-step-pill-link:hover,
.builder-step-pill-link:focus-visible {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.builder-step-pill-locked {
    opacity: 0.68;
    background: color-mix(in srgb, var(--ink-soft) 6%, #fff);
}

.builder-step-pill-lock {
    margin-right: 0.25rem;
}

.builder-step-lock-note {
    margin: 0.4rem 0 0;
}

.builder-persons-list {
    display: grid;
    gap: 0.75rem;
}

.builder-person {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.65rem;
    display: grid;
    gap: 0.55rem;
    min-width: 0;
    background: #fff;
}

.builder-person label,
.builder-person input,
.builder-person textarea,
.builder-person select {
    min-width: 0;
    max-width: 100%;
}

.builder-person input[type="file"] {
    width: 100%;
}

.builder-person-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.builder-person-header p {
    margin: 0;
    font-weight: 700;
}

.builder-person-remove {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 8px;
    padding: 0.25rem 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
}

.builder-character-analysis-banner {
    position: sticky;
    top: 4.75rem;
    z-index: 8;
    margin: 0.85rem 0 1rem;
    border-color: #efd8b7;
    background: linear-gradient(135deg, #fffaf0 0%, #fff3d9 100%);
    box-shadow: 0 10px 24px color-mix(in srgb, #d79d46 14%, transparent);
}

.builder-character-analysis-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    padding: 0.2rem 0.55rem;
    border: 1px solid #efd8b7;
    border-radius: 999px;
    background: #fff8f0;
    color: #8a5a1e;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.builder-character-analysis-chip::before {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.72;
}

.builder-character-analysis-chip.is-working::before {
    animation: pulseFade 1.1s ease-in-out infinite;
}

.builder-character-analysis-chip.is-complete {
    border-color: #bfe2ba;
    background: #eff8f0;
    color: #245f1b;
}

.builder-character-analysis-chip.is-complete::before {
    content: "✓";
    width: auto;
    height: auto;
    background: transparent;
    opacity: 1;
}

.builder-character-analysis-chip.is-muted {
    border-color: var(--line);
    background: color-mix(in srgb, var(--bg-soft) 88%, #fff);
    color: var(--ink-muted);
}

@media (max-width: 760px) {
    .builder-character-analysis-banner {
        position: static;
    }
}

.builder-character-tag-groups {
    display: grid;
    gap: 0.75rem 1rem;
    padding: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
    border-radius: 12px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 12%, #fff), #fff);
}

.builder-character-tag-group {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
}

.builder-character-tag-header {
    display: grid;
    gap: 0.15rem;
}

.builder-character-tag-header p {
    margin: 0;
}

.builder-character-tag-header .muted {
    font-size: 0.78rem;
    line-height: 1.35;
}

.builder-character-tag-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.builder-character-tag-button {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    border-radius: 999px;
    padding: 0.38rem 0.68rem;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.builder-character-tag-button:hover {
    border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
    background: color-mix(in srgb, var(--accent-2) 10%, #fff);
}

.builder-character-tag-button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, #fff);
    outline-offset: 2px;
}

.builder-character-tag-button-active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent-2) 22%, #fff);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
    transform: translateY(-1px);
}

@media (min-width: 720px) {
    .builder-character-tag-groups {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

.builder-photo-preview {
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 0.35rem;
    background: var(--panel);
}

.builder-photo-preview img {
    display: block;
    width: 100%;
    max-height: 240px;
    object-fit: contain;
}

.builder-toggle-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.7rem 0.8rem;
    background: var(--panel);
}

.builder-person-name-row {
    display: grid;
    gap: 0.8rem;
    min-width: 0;
}

.builder-toggle-field-compact {
    margin-top: 0.2rem;
}

.builder-person-name-row > label:first-child {
    margin-bottom: 0;
}

@media (min-width: 780px) {
    .builder-person-name-row {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
        align-items: start;
    }
}

.builder-toggle-copy {
    display: grid;
    gap: 0.2rem;
    flex: 1 1 auto;
    min-width: 0;
}

.builder-toggle-title {
    font-weight: 700;
    line-height: 1.25;
}

.builder-toggle-control {
    position: relative;
    flex: 0 0 auto;
    width: 52px;
    height: 30px;
}

.builder-toggle-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.builder-toggle-slider {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: #cfd6df;
    transition: background-color 0.18s ease;
    position: relative;
}

.builder-toggle-slider::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.18);
    transition: transform 0.18s ease;
}

.builder-toggle-input:checked + .builder-toggle-slider {
    background: var(--accent);
}

.builder-toggle-input:checked + .builder-toggle-slider::after {
    transform: translateX(22px);
}

.builder-toggle-input:focus-visible + .builder-toggle-slider {
    outline: 2px solid rgba(251, 122, 31, 0.35);
    outline-offset: 2px;
}

.builder-style-mode-toggle {
    gap: 1rem;
    align-items: flex-start;
    flex-direction: column;
}

.builder-style-mode-toggle-options {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    flex: 0 0 auto;
}

.builder-style-mode-toggle-option {
    color: var(--muted);
    font-size: 0.95rem;
    transition: color 0.18s ease;
}

.builder-style-mode-toggle-option-active {
    color: var(--ink);
    font-weight: 700;
}

.builder-character-sheet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: start;
    gap: 0.75rem;
}

.builder-character-sheet-card {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    padding: 0.6rem;
    display: grid;
    align-content: start;
    gap: 0.45rem;
}

.builder-review-header,
.builder-inline-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.builder-inline-actions-wrap {
    flex-wrap: wrap;
    justify-content: flex-start;
}

.builder-review-form,
.builder-character-review-form {
    display: grid;
    gap: 0.55rem;
}

.builder-character-review-field {
    display: grid;
    gap: 0.45rem;
}

.builder-character-advanced-settings {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.5rem;
    background: #fafafa;
}

.builder-character-advanced-settings summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.builder-character-advanced-settings[open] summary {
    margin-bottom: 0.5rem;
    color: var(--ink);
}

.builder-age-combo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6rem;
    gap: 0.7rem;
    align-items: center;
}

.builder-age-combo input[type='number'] {
    width: 100%;
}

.builder-character-review-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.builder-character-review-actions {
    margin-left: auto;
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .builder-character-review-label-row {
        align-items: flex-start;
    }

    .builder-character-review-actions {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }
}

.builder-change-hint {
    font-size: 0.84rem;
    padding: 0.2rem 0;
}

.builder-character-sheet-preview {
    border: 1px dashed var(--line);
    border-radius: 8px;
    min-height: 180px;
    background: #fff;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.builder-character-sheet-preview.is-selected {
    border: 1px solid var(--accent, #2f6fed);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #2f6fed) 18%, transparent);
}

.builder-character-sheet-preview-button {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.builder-character-sheet-selected-pill,
.builder-character-sheet-fullscreen-pill {
    position: absolute;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
    color: var(--accent, #2f6fed);
    font-weight: 700;
    pointer-events: none;
}

.builder-character-sheet-selected-pill {
    left: 0.65rem;
    bottom: 0.65rem;
    padding: 0.28rem 0.6rem;
    font-size: 0.82rem;
}

.builder-character-sheet-fullscreen-pill {
    top: 0.65rem;
    right: 0.65rem;
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
}

.builder-character-sheet-preview-button:focus-visible {
    outline: 2px solid var(--accent, #2f6fed);
    outline-offset: -2px;
}

.builder-character-sheet-history {
    display: grid;
    gap: 0.45rem;
}

.builder-character-sheet-history-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(88px, 1fr);
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.15rem;
}

.builder-world-reference-history-strip {
    grid-auto-columns: 88px;
    justify-content: start;
}

.builder-character-sheet-history-item {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.3rem;
    background: #fff;
    display: grid;
    gap: 0.3rem;
    cursor: pointer;
    min-width: 88px;
}

.builder-character-sheet-history-item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.builder-character-sheet-history-item.is-selected {
    border-color: var(--accent, #2f6fed);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #2f6fed) 30%, transparent);
    display: none;
}

.builder-world-reference-history-strip .builder-character-sheet-history-item.is-selected {
    display: grid;
}

.builder-character-sheet-history-thumb {
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--surface-muted, #f6f7f9);
}

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

.builder-character-sheet-history-meta {
    display: grid;
    gap: 0.1rem;
    font-size: 0.78rem;
}

.builder-character-sheet-history-meta small {
    color: var(--muted);
}

.builder-character-sheet-history-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent, #2f6fed) 12%, white);
    color: var(--accent, #2f6fed);
    font-weight: 600;
}

.page-plan-item {
    display: grid;
    gap: 0.6rem;
}

.builder-page-plan-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.builder-page-plan-title,
.builder-page-plan-version-meta {
    margin: 0;
}

.builder-page-plan-version-meta {
    text-align: right;
    white-space: nowrap;
}

.builder-page-plan-field {
    min-width: 0;
}

.builder-page-plan-generation-copy {
    display: grid;
    gap: 0.2rem;
    padding: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-2) 9%, #fff);
}

.builder-page-plan-generation-title,
.builder-page-plan-generation-copy .muted {
    margin: 0;
}

.builder-page-plan-generation-title {
    color: var(--ink);
    font-weight: 800;
}

.builder-special-page-tools {
    display: grid;
    gap: 0.45rem;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel-elevated) 88%, #fff);
}

.builder-special-page-meter {
    height: 0.5rem;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line) 65%, #fff);
}

.builder-special-page-meter > span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--ok), var(--warning));
    transition: width 140ms ease, background-color 140ms ease;
}

.builder-special-page-meter > span.is-full,
.builder-special-page-warning {
    background: var(--danger);
    color: var(--danger);
}

.builder-special-page-warning {
    margin: 0;
    font-weight: 700;
}

textarea[name="special_page_text"][aria-invalid="true"] {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}

.builder-page-plan-advanced {
    display: grid;
    gap: 0.75rem;
}

.builder-page-plan-panel-script {
    display: grid;
    gap: 0.75rem;
    padding: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
    border-radius: 12px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 10%, #fff), #fff);
}

.builder-page-plan-panel-script-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.builder-page-plan-panel-script-copy {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.builder-page-plan-panel-script-title,
.builder-page-plan-panel-script-hint,
.builder-page-plan-panel-script-count,
.builder-page-plan-panel-card-title,
.builder-page-plan-panel-card-summary {
    margin: 0;
}

.builder-page-plan-panel-script-title {
    color: var(--ink);
}

.builder-page-plan-panel-script-hint {
    max-width: 44rem;
    font-size: 0.84rem;
    line-height: 1.4;
}

.builder-page-plan-panel-script-tools {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.builder-page-plan-panel-script-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    background: color-mix(in srgb, var(--accent-2) 12%, #fff);
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.builder-page-plan-panel-script-list {
    display: grid;
    gap: 0.65rem;
}

.builder-page-plan-panel-card {
    display: grid;
    gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--line));
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel) 90%, #fff);
}

.builder-page-plan-panel-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.builder-page-plan-panel-card-copy {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.builder-page-plan-panel-card-title {
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 800;
}

.builder-page-plan-panel-card-summary {
    font-size: 0.8rem;
    line-height: 1.35;
}

.builder-page-plan-panel-card-remove {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 999px;
    padding: 0.28rem 0.6rem;
    color: var(--ink-muted);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.builder-page-plan-panel-card-remove:hover {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
    background: color-mix(in srgb, var(--accent-2) 10%, #fff);
    color: var(--ink);
}

.builder-page-plan-panel-card-remove:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, #fff);
    outline-offset: 2px;
}

.builder-page-plan-panel-card-fields {
    display: grid;
    gap: 0.6rem;
}

.builder-page-plan-panel-card-field {
    min-width: 0;
}

.builder-page-plan-panel-card-field input {
    width: 100%;
}

.builder-page-plan-panel-dialogue-fields {
    display: grid;
    grid-template-columns: minmax(0, 150px) minmax(0, 140px) minmax(0, 1fr);
    gap: 0.5rem;
}

.builder-page-plan-panel-dialogue-fields > select,
.builder-page-plan-panel-dialogue-fields > input {
    min-width: 0;
    width: 100%;
}

.builder-page-plan-actions {
    display: grid;
    gap: 0.4rem;
    margin-bottom: 0.65rem;
}

.outline-editor-list {
    max-height: none;
    overflow: visible;
}

.outline-details {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    padding: 0.35rem 0.5rem;
}

.outline-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
    list-style: none;
    padding: 0.6rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent-2) 10%, #fff);
    font-weight: 700;
    color: var(--ink);
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.outline-details-heading {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.outline-details-summary-advanced {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 12%, #fff), color-mix(in srgb, var(--accent) 10%, #fff));
}

.outline-details-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, #fff);
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    color: var(--accent-dark);
    font-size: 0.8rem;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(255, 123, 57, 0.12);
    flex: 0 0 auto;
}

.outline-details summary::-webkit-details-marker {
    display: none;
}

.outline-details summary::after {
    content: '⌄';
    margin-left: auto;
    font-size: 1rem;
    line-height: 1;
    color: var(--accent);
    transition: transform 160ms ease, color 160ms ease;
}

.outline-details summary:hover {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
    background: color-mix(in srgb, var(--accent-2) 14%, #fff);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
}

.outline-details summary:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 65%, #fff);
    outline-offset: 2px;
}

.outline-details[open] summary {
    margin-bottom: 0.45rem;
}

.outline-details[open] .outline-details-icon {
    background: color-mix(in srgb, var(--accent) 18%, #fff);
}

.outline-details[open] summary::after {
    transform: rotate(180deg);
}

.builder-outline-form {
    display: grid;
    gap: 0.55rem;
}

.builder-cast-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
}

.builder-cast-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.builder-cast-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    font-size: 0.82rem;
    min-width: 0;
}

.builder-cast-pill strong {
    display: inline-grid;
    place-items: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel);
    font-size: 0.72rem;
}

.builder-style-presets {
    display: grid;
    gap: 0.6rem;
}

.builder-style-preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.6rem;
}

.builder-style-preset-card {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 10px;
    text-align: left;
    padding: 0.45rem;
    display: grid;
    gap: 0.35rem;
    cursor: pointer;
}

.builder-style-preset-card-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

.builder-style-preset-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 3;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #e2e2e2;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.builder-style-thumb-wrap {
    position: relative;
    display: block;
}

.builder-style-preset-card-active .builder-style-thumb-wrap::before,
.builder-style-mode-choice-group .choice-option-input:checked + .choice-option-card .builder-style-mode-preview::before {
    content: '+';
    position: absolute;
    top: 0.45rem;
    left: 0.45rem;
    z-index: 1;
    display: inline-grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.68);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
    pointer-events: none;
}

.builder-style-preset-thumb-custom-only {
    background-color: #f2f2f2;
    border-style: dashed;
}

.builder-style-preset-thumb-storybook-classic {
    background-color: #d8b588;
}

.builder-style-preset-thumb-comic-1920s {
    background-color: #ceb98d;
}

.builder-style-preset-thumb-manga-shonen {
    background-color: #cfcfcf;
}

.builder-style-preset-thumb-manga-linework {
    background-color: #d4d4d4;
}

.builder-style-preset-thumb-anime-cinematic {
    background-color: #4662df;
}

.builder-style-preset-thumb-manhwa-linework {
    background-color: #8fb4e8;
}

.builder-style-preset-thumb-manhua-brush-linework {
    background-color: #b7aba0;
}

.builder-style-preset-thumb-seinen-dramatic-ink {
    background-color: #8b8b8b;
}

.builder-style-preset-thumb-watercolor-soft {
    background-color: #d9d2fb;
}

.builder-style-preset-thumb-pixel-retro {
    background-color: #5f6bb0;
}

.builder-style-preset-thumb-fantasy-epic {
    background-color: #6f4da0;
}

.builder-style-preset-thumb-cyberpunk-neon {
    background-color: #7a3f9a;
}

.builder-style-preset-thumb-photoreal-polished {
    background-color: #b8c0c7;
}

.builder-style-preset-label {
    font-weight: 700;
    font-size: 0.9rem;
}

.builder-style-mode-choice-group {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.builder-style-mode-help {
    margin: 0 0 0.55rem;
}

.builder-style-mode-fieldset {
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-soft) 82%, #fff 18%);
}

.builder-style-mode-fieldset-cover {
    background: color-mix(in srgb, var(--accent) 4%, #fff);
}

.builder-style-mode-fieldset-interior {
    background: color-mix(in srgb, var(--accent-2) 8%, #fff);
}

.builder-language-fieldset {
    background: color-mix(in srgb, var(--accent) 7%, #fff);
}

.builder-language-select-wrap {
    display: grid;
    gap: 0.4rem;
    margin: 0;
}

.builder-language-current {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin: 0.65rem 0 0;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, #fff);
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 800;
}

[data-builder-language-select][data-builder-language-locked="1"] {
    cursor: not-allowed;
    opacity: 0.72;
}

.builder-style-mode-choice-group .choice-option-card {
    gap: 0.55rem;
    padding: 0.65rem;
    align-content: start;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.builder-style-mode-choice-group .choice-option {
    min-width: 0;
}

.builder-style-mode-preview {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 5 / 3;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #f0f0f0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.builder-style-mode-caption {
    font-size: 0.82rem;
    line-height: 1.35;
}

.builder-style-mode-preview[hidden] {
    display: none;
}

.builder-style-mode-choice-group .choice-option-input:checked + .choice-option-card {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent), 0 12px 24px rgba(0, 0, 0, 0.08);
    background: color-mix(in srgb, var(--accent) 12%, #fff);
    border-color: color-mix(in srgb, var(--accent) 78%, #000 8%);
    transform: translateY(-2px);
}

.builder-style-mode-choice-group .choice-option-input:checked + .choice-option-card strong::after {
    content: 'Selected';
    display: inline-flex;
    margin-left: 0.45rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 16%, #fff);
    color: var(--ink);
    font-size: 0.7rem;
    font-weight: 700;
    vertical-align: middle;
}

@media (max-width: 720px) {
    .builder-style-mode-choice-group {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 900px) {
    .builder-shell {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .builder-summary-card {
        grid-column: 1;
        grid-row: 1;
    }

    .builder-current-book-card {
        grid-column: 2;
        grid-row: 1;
    }

    .builder-active-card,
    .builder-debug-panel {
        grid-column: 1 / -1;
    }

    .builder-active-card {
        grid-row: 2;
    }

    .builder-debug-panel {
        grid-row: 3;
    }

    .builder-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .builder-fields[data-builder-step="subject-profile"],
    .builder-fields > .builder-persons,
    .builder-fields > .builder-style-presets,
    .builder-fields > .outline-details {
        grid-column: 1 / -1;
    }

    .builder-page-plan-advanced {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .builder-page-plan-panel-card-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .builder-cast-summary {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    .builder-cast-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }

    .builder-page-plan-field-wide,
    .builder-page-plan-panel-card-field-wide,
    .builder-page-plan-advanced > .builder-cast-grid,
    .builder-page-plan-advanced > .muted {
        grid-column: 1 / -1;
    }

    .builder-style-preset-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

.builder-style-priority {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    padding: 0.12rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    background: #fff;
}

.builder-style-priority-core {
    background: #f0f7ff;
    border-color: #bdd9ff;
    color: #185186;
}

.builder-style-priority-popular {
    background: #f4fbf3;
    border-color: #bfe2ba;
    color: #245f1b;
}

.builder-style-priority-niche {
    background: #fff8f0;
    border-color: #efd8b7;
    color: #8a5a1e;
}

.page-preview-shell {
    border: 1px dashed var(--line);
    border-radius: 10px;
    min-height: 170px;
    display: grid;
    place-items: center;
    background: #fff;
    overflow: hidden;
}

.review-pages-browser {
    display: grid;
    gap: 1rem;
}

.review-pages-tabs {
    display: flex;
    gap: 0.65rem;
    overflow-x: auto;
    padding-bottom: 0.2rem;
    scrollbar-width: thin;
}

.review-pages-tab {
    flex: 0 0 auto;
    min-width: 84px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    padding: 0.55rem 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-weight: 700;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.review-pages-tab:hover {
    border-color: #bdd9ff;
    transform: translateY(-1px);
}

.review-pages-tab:focus-visible {
    outline: 2px solid #6ea8ff;
    outline-offset: 2px;
}

.review-pages-tab.is-active {
    border-color: #8bbcff;
    background: #f4f8ff;
    box-shadow: 0 10px 24px rgba(42, 95, 179, 0.12);
}

.outline-version-tabs {
    margin-top: 0.5rem;
}

.outline-version-tab-form {
    flex: 0 0 auto;
}

.outline-version-tab {
    min-width: 150px;
}

.review-pages-tab-number {
    font-size: 0.95rem;
}

.review-pages-tab-state {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    overflow: hidden;
    border-radius: 999px;
    padding: 0.12rem 0.45rem;
    font-size: 0.68rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.review-pages-tab-state-complete {
    background: #e9f6eb;
    color: #1f6a2d;
}

.review-pages-tab-state-error {
    background: #fff1f0;
    color: #a53a32;
}

.review-pages-tab-state-info {
    background: #eef4ff;
    color: #315b97;
}

.review-pages-tab-state-warning {
    background: #fff8dd;
    color: var(--accent-dark);
}

.review-pages-tab-state-pending,
.review-pages-tab-state-generating,
.review-pages-tab-state-processing {
    background: #fff8dd;
    color: var(--accent-dark);
}

.review-pages-tab-state-pending::before,
.review-pages-tab-state-generating::before,
.review-pages-tab-state-processing::before,
.review-pages-status-chip-pending::before,
.review-pages-status-chip-generating::before,
.review-pages-status-chip-processing::before {
    content: '';
    flex: 0 0 auto;
    width: 0.38rem;
    height: 0.38rem;
    border-radius: 999px;
    background: currentColor;
    animation: builderStatusDotPulse 1.15s ease-in-out infinite;
}

.review-pages-tab-state-pending::after,
.review-pages-tab-state-generating::after,
.review-pages-tab-state-processing::after,
.review-pages-status-chip-pending::after,
.review-pages-status-chip-generating::after,
.review-pages-status-chip-processing::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.55) 45%, transparent 72%);
    transform: translateX(-120%);
    animation: builderBadgeShimmer 2.4s ease-in-out infinite;
}

.builder-modal-warning {
    display: grid;
    gap: 0.35rem;
    margin: 0.75rem 0;
    padding: 0.75rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--warning) 55%, var(--line));
    border-radius: var(--radius-sm);
    background: #fff8dd;
    color: var(--accent-dark);
}

.builder-modal-warning ul {
    margin: 0;
    padding-left: 1.1rem;
}

.review-pages-panel {
    display: grid;
    gap: 0.85rem;
}

.review-pages-panel-header {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
}

.review-pages-panel-kicker {
    margin-bottom: 0.2rem;
}

.review-pages-version-strip {
    display: grid;
    gap: 0.4rem;
}

.review-pages-version-strip[hidden] {
    display: none;
}

.version-selector-label {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.version-selector {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem;
    width: fit-content;
    max-width: 100%;
    border: 1px solid color-mix(in srgb, var(--line) 84%, var(--ink-muted));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-2) 5%, #fff);
    padding: 0.2rem;
}

.version-selector form {
    margin: 0;
}

.version-selector-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    padding: 0.48rem 0.72rem;
    transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.version-selector-button:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-2) 12%, transparent);
    color: var(--ink);
    transform: translateY(-1px);
}

.version-selector-button:focus-visible {
    outline: 2px solid #6ea8ff;
    outline-offset: 2px;
}

.version-selector-button.is-selected,
.version-selector-button[data-version-selected="1"] {
    background: var(--accent);
    box-shadow: 0 6px 14px rgba(42, 95, 179, 0.18);
    color: #fff;
}

.version-selector-button:disabled {
    cursor: default;
    opacity: 1;
}

.review-page-preview-shell {
    position: relative;
    min-height: 320px;
    padding: 1rem;
    background: linear-gradient(180deg, #fffdf8 0%, #ffffff 100%);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.25s ease;
}

.review-page-report-button {
    position: absolute;
    right: 0.85rem;
    top: 0.85rem;
    z-index: 3;
    border-color: rgba(15, 23, 42, 0.18);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(6px);
}

.review-page-report-button:hover:not(:disabled) {
    background: #fff;
    transform: translateY(-1px);
}

.review-page-report-button.is-reported,
.review-page-report-button.is-reported:disabled {
    color: #047857;
    border-color: rgba(5, 150, 105, 0.32);
    background: rgba(236, 253, 245, 0.94);
    box-shadow: 0 10px 28px rgba(5, 150, 105, 0.14);
    cursor: default;
    opacity: 1;
}

.review-page-report-button[hidden] {
    display: none;
}

.review-page-report-reasons {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
}

.review-page-report-reasons legend {
    padding-inline: 0.25rem;
    font-weight: 800;
}

.review-page-report-reasons label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
}

.review-page-preview-debug-layout {
    display: grid;
    gap: 1rem;
}

.review-page-preview-debug-layout.has-page-plan-debug {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
}

.review-page-plan-debug {
    border: 1px solid #bdd9ff;
    border-radius: var(--radius-sm);
    background: #f7fbff;
    box-shadow: 0 14px 34px rgba(42, 95, 179, 0.08);
    display: grid;
    gap: 0.75rem;
    max-height: min(72vh, 760px);
    overflow: auto;
    padding: 0.85rem;
}

.review-page-plan-debug-header {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.review-page-plan-debug-kicker {
    color: #315b97;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-bottom: 0.2rem;
    text-transform: uppercase;
}

.review-page-plan-debug-body {
    border-top: 1px solid #d7e4f6;
    padding-top: 0.75rem;
}

.review-page-plan-debug-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
}

.review-page-plan-debug-list > div {
    display: grid;
    gap: 0.25rem;
}

.review-page-plan-debug-list dt {
    color: #315b97;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.review-page-plan-debug-list dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.review-page-plan-debug-list pre {
    background: #fff;
    border: 1px solid #d7e4f6;
    border-radius: 8px;
    color: var(--ink);
    font: 0.78rem/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    margin: 0;
    max-height: 260px;
    overflow: auto;
    padding: 0.65rem;
    white-space: pre-wrap;
}

.review-page-plan-panel-script-list {
    display: grid;
    gap: 0.65rem;
}

.review-page-plan-panel-script-card {
    background: #fff;
    border: 1px solid #d7e4f6;
    border-radius: 10px;
    display: grid;
    gap: 0.55rem;
    padding: 0.7rem;
}

.review-page-plan-panel-script-title {
    color: #315b97;
    font-size: 0.78rem;
    font-weight: 800;
    margin: 0;
}

.review-page-plan-panel-script-fields {
    display: grid;
    gap: 0.45rem;
    margin: 0;
}

.review-page-plan-panel-script-fields > div {
    display: grid;
    gap: 0.15rem;
}

.review-page-plan-panel-script-fields > div.is-empty dd {
    color: #8a96a8;
}

.review-page-plan-panel-script-fields dt {
    color: #516985;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.review-page-plan-panel-script-fields dd {
    margin: 0;
}

.review-page-shell-ready {
    border-color: #b9d9c0;
}

.review-page-shell-error {
    border-color: #efc3bd;
}

.review-page-shell-pending {
    border-color: #e8d7ad;
}

.review-page-shell-loading {
    border-color: #d7e4f6;
    position: relative;
}

.review-page-shell-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(214,231,248,0.45) 50%, rgba(255,255,255,0) 100%);
    transform: translateX(-100%);
    animation: builderLoadingSweep 1.2s linear infinite;
    pointer-events: none;
}

.review-page-shell-pop {
    animation: reviewPageReveal 0.42s ease;
}

.review-page-preview-image {
    display: block;
    width: auto;
    height: auto;
    max-width: min(100%, 760px);
    max-height: 72vh;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(27, 39, 54, 0.16);
    object-fit: contain;
    aspect-ratio: auto;
    cursor: zoom-in;
}

.review-page-feedback,
.review-page-error {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    display: grid;
    gap: 0.75rem;
    text-align: center;
}

.review-pages-panel-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.back-cover-preview-column {
    display: grid;
    gap: 0.65rem;
    align-content: start;
}

.back-cover-preview-label {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.back-cover-spread-preview,
.back-cover-video-prompt-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

.back-cover-video-actions {
    display: grid;
    justify-items: start;
    justify-content: start;
    width: 100%;
}

.back-cover-modify-form {
    display: grid;
    gap: 0.5rem;
    width: min(100%, 24rem);
}

.back-cover-modify-form textarea,
.back-cover-video-prompt-layout textarea {
    width: 100%;
    box-sizing: border-box;
}

.back-cover-video-prompt-layout .builder-field-block {
    display: grid;
    gap: 0.65rem;
}

.cover-video-preview {
    display: block;
    width: min(100%, 760px);
    max-height: 72vh;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(27, 39, 54, 0.16);
    background: #111827;
}

.cover-video-working-placeholder {
    min-height: 18rem;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.65rem;
    padding: 2rem;
    border-radius: 10px;
    background: linear-gradient(135deg, #fffaf0 0%, #f6fbff 100%);
    text-align: center;
}

.cover-video-working-spinner {
    width: 2.4rem;
    height: 2.4rem;
    border: 3px solid rgba(132, 89, 35, 0.2);
    border-top-color: var(--accent-dark);
    border-radius: 999px;
    animation: builderSpin 0.9s linear infinite;
}

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

.review-pages-status-chip {
    flex: 0 0 auto;
    position: relative;
    overflow: hidden;
}

.review-pages-status-chip-complete {
    background: #e9f6eb;
    color: #1f6a2d;
}

.review-pages-status-chip-error {
    background: #fff1f0;
    color: #a53a32;
}

.review-pages-status-chip-pending,
.review-pages-status-chip-generating,
.review-pages-status-chip-processing {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    background: #fff8dd;
    color: var(--accent-dark);
}

.page-preview-image {
    display: block;
    width: 100%;
    height: auto;
}

.page-placeholder {
    color: var(--muted);
    font-weight: 700;
    animation: pulseFade 1.2s ease-in-out infinite;
}

.page-preview-button {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 8px;
    padding: 0.45rem 0.7rem;
    font-weight: 700;
}

.page-error-hint {
    margin: 0.4rem 0 0;
    padding: 0.35rem 0.5rem;
    border: 1px solid #efd8b7;
    border-radius: 8px;
    background: #fff8f0;
    color: #8a5a1e;
    font-size: 0.82rem;
    line-height: 1.35;
}

.review-page-modal-preview-shell {
    align-items: center;
    justify-items: center;
    min-height: 240px;
    max-height: 60vh;
    overflow: auto;
}

.review-page-modify-modal-actions {
    justify-content: flex-end;
    margin-top: 0.75rem;
}

[data-review-page-modify-modal] textarea {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.review-page-modify-guidance {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.4;
}

[data-review-page-modify-modal] .review-page-preview-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@keyframes pulseFade {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}

@keyframes builderStatusDotPulse {
    0%, 100% {
        opacity: 0.45;
        transform: scale(0.82);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes builderBadgeShimmer {
    0%, 52% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(120%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .review-pages-tab-state-pending::before,
    .review-pages-tab-state-generating::before,
    .review-pages-tab-state-processing::before,
    .review-pages-tab-state-pending::after,
    .review-pages-tab-state-generating::after,
    .review-pages-tab-state-processing::after,
    .review-pages-status-chip-pending::before,
    .review-pages-status-chip-generating::before,
    .review-pages-status-chip-processing::before,
    .review-pages-status-chip-pending::after,
    .review-pages-status-chip-generating::after,
    .review-pages-status-chip-processing::after {
        animation: none;
    }
}

@keyframes builderLoadingSweep {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes builderLoadingBar {
    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(320%);
    }
}

@keyframes reviewPageReveal {
    0% {
        opacity: 0.25;
        transform: translateY(8px) scale(0.985);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.review-actions-bar {
    position: sticky;
    bottom: 0.6rem;
    z-index: 2;
    border: 1px solid var(--line);
    background: rgba(255, 250, 240, 0.95);
    border-radius: 12px;
    padding: 0.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.btn-working {
    position: relative;
    opacity: 0.8;
    pointer-events: none;
}

.btn-disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
    cursor: not-allowed;
}

.btn-working::after {
    content: "";
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-right-color: transparent;
    display: inline-block;
    margin-left: 0.45rem;
    vertical-align: middle;
    animation: spin 0.8s linear infinite;
}

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

.image-viewer {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    z-index: 40;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.image-viewer[hidden] {
    display: none;
}

@media (max-width: 720px) {
    .builder-card,
    .builder-step,
    .builder-modal-card {
        padding: 0.85rem;
    }

    .builder-progress-top {
        align-items: stretch;
    }

    .builder-steps-indicator {
        padding-bottom: 0.2rem;
    }

    .builder-step-nav {
        display: grid;
        gap: 0.75rem;
    }

    .builder-step-nav > div,
    .builder-step-nav > .wrap-actions {
        width: 100%;
    }

    .builder-step-nav .btn {
        width: 100%;
    }

    .builder-step-waiting-badge {
        margin-left: 0;
        width: 100%;
        justify-content: center;
        white-space: normal;
        border-radius: 10px;
    }

    .builder-person-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .builder-person-remove {
        width: 100%;
    }

    .builder-review-header,
    .builder-inline-actions {
        flex-wrap: wrap;
    }

    .builder-story-ideas-actions {
        width: 100%;
    }

    .builder-story-ideas-actions .btn {
        flex: 1 1 100%;
        width: 100%;
    }

    .builder-character-crop-layout {
        gap: 0.7rem;
    }

    .builder-character-crop-image-wrap {
        min-height: 260px;
    }

    .builder-character-crop-modal-card {
        width: min(100vw - 1rem, 860px);
        max-height: calc(100vh - 1rem);
        padding: 0.85rem;
    }

    .builder-character-crop-image-wrap {
        height: min(52vh, 420px);
    }

    .builder-character-crop-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        margin-left: 0;
    }

    .builder-character-crop-actions .btn {
        min-width: 0;
        width: 100%;
    }

    .builder-photo-preview img {
        max-height: 180px;
    }

    .builder-cast-grid,
    .builder-cast-summary {
        grid-template-columns: 1fr;
    }

    .builder-page-plan-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.2rem;
    }

    .builder-page-plan-version-meta {
        text-align: left;
        white-space: normal;
    }

    .builder-page-plan-panel-script-tools,
    .builder-page-plan-panel-card-header {
        align-items: stretch;
        flex-direction: column;
    }

    .builder-page-plan-panel-card-remove,
    .builder-page-plan-panel-script-tools .btn {
        width: 100%;
    }

    .builder-page-plan-panel-dialogue-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-plan-item > .row.wrap-actions {
        display: grid;
        gap: 0.6rem;
    }

    .page-plan-item > .row.wrap-actions form,
    .page-plan-item > .row.wrap-actions .btn {
        width: 100%;
    }

    .review-pages-tab {
        min-width: 72px;
        padding-inline: 0.7rem;
    }

    .review-pages-panel-header {
        flex-direction: column;
    }

    .review-page-preview-shell {
        min-height: 240px;
        padding: 0.75rem;
    }

    .review-page-report-button {
        position: static;
        justify-self: stretch;
        margin-bottom: 0.65rem;
        width: 100%;
    }

    .support-image-report-main,
    .support-image-report-actions {
        grid-template-columns: 1fr;
    }

    .review-page-preview-debug-layout.has-page-plan-debug {
        grid-template-columns: 1fr;
    }

    .review-page-plan-debug {
        max-height: none;
    }

    .review-page-plan-debug-header {
        flex-direction: column;
    }

    .review-page-plan-debug-header .btn {
        width: 100%;
    }

    .builder-modal-card {
        max-height: calc(100dvh - 1rem);
        overflow: auto;
    }

    .review-page-modal-preview-shell {
        min-height: 160px;
        max-height: 32vh;
        padding: 0.5rem;
    }

    .review-pages-panel-actions {
        justify-content: stretch;
    }

    .back-cover-spread-preview,
    .back-cover-video-prompt-layout {
        grid-template-columns: 1fr;
    }

    .review-pages-panel-actions .page-preview-button {
        width: 100%;
    }
}

.image-viewer-media {
    max-width: 96vw;
    max-height: 82vh;
    border-radius: 10px;
    background: #fff;
}

[data-coloring-reference-filter="grayscale"] .builder-character-sheet-preview-button img,
[data-coloring-reference-filter="grayscale"] .builder-character-sheet-history-thumb img,
.image-viewer-media.is-grayscale {
    filter: grayscale(100%);
}

.image-viewer-title {
    color: #fff;
    margin: 0.7rem 0 0;
}

.image-viewer-close {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid #fff;
    background: transparent;
    color: #fff;
    font-weight: 700;
}

.builder-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 1rem;
    overflow: auto;
}

.builder-modal[hidden] {
    display: none;
}

.builder-modal-backdrop {
    position: fixed;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.55);
    cursor: pointer;
}

.builder-modal-card {
    position: relative;
    z-index: 1;
    width: min(560px, 92vw);
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    padding: 0.9rem;
    display: grid;
    gap: 0.6rem;
}

.builder-modal-card h3 {
    margin: 0;
}

.builder-story-ideas-modal-card {
    width: min(760px, 94vw);
}

.builder-step-review-modal-card {
    width: min(840px, 96vw);
}

.builder-step-review-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.builder-step-review-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.builder-step-review-item,
.builder-step-review-visual {
    display: grid;
    gap: 0.35rem;
    padding: 0.8rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-soft) 82%, #fff 18%);
}

.builder-step-review-item-label,
.builder-step-review-item-value,
.builder-step-review-visual-header p {
    margin: 0;
}

.builder-step-review-item-label {
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
}

.builder-step-review-item-value {
    font-size: 0.95rem;
    line-height: 1.45;
}

.builder-step-review-item-meta {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--ink-muted);
}

.builder-step-review-visuals {
    display: grid;
    gap: 0.75rem;
}

.builder-step-review-visual-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.75rem;
}

.builder-step-review-visual-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    border: 1px solid var(--line);
    background-color: #ececec;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.builder-step-review-visual-thumb-contain {
    background-color: #fff;
    background-size: contain;
}

.builder-step-review-visual-thumb.is-empty {
    display: grid;
    place-items: center;
    padding: 1rem;
    text-align: center;
    color: var(--ink-soft);
    border-style: dashed;
}

.builder-modal-open {
    overflow: hidden;
}

.builder-character-crop-modal-card {
    width: min(860px, 96vw);
    max-height: calc(100vh - 2rem);
    padding: 1rem;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: auto;
}

.builder-character-crop-subtitle {
    margin: 0.25rem 0 0;
}

.builder-character-crop-layout {
    display: grid;
    gap: 0.85rem;
    min-height: 0;
}

.builder-character-crop-mode-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.builder-character-crop-mode-buttons .btn {
    width: auto;
}

.builder-character-crop-mode-active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, #fff);
}

.builder-character-crop-workspace {
    display: grid;
    width: 100%;
    justify-items: center;
}

.builder-character-crop-image-wrap {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 0;
    height: min(58vh, 520px);
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-2) 10%, #fff);
    overflow: hidden;
}

.builder-character-crop-image-wrap img {
    display: block;
    max-width: 100%;
}

.builder-character-crop-image-wrap .cropper-container {
    margin: 0 auto;
    max-width: 100%;
}

.builder-character-crop-preview-shell,
.builder-character-crop-meta {
    display: grid;
    gap: 0.45rem;
    padding: 0.8rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}

.builder-character-crop-preview-shell p,
.builder-character-crop-meta p {
    margin: 0;
}

.builder-character-crop-preview {
    width: min(220px, 100%);
    aspect-ratio: 2 / 3;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--accent-2) 8%, #fff);
}

.builder-character-crop-preview img {
    display: block;
    max-width: 100%;
}

.builder-character-crop-actions {
    display: grid;
    gap: 0.75rem;
    justify-items: stretch;
    margin-top: 0.1rem;
}

.builder-character-crop-actions .btn {
    width: 100%;
}

.builder-story-ideas-list {
    display: grid;
    gap: 0.75rem;
    max-height: min(70vh, 760px);
    overflow: auto;
}

.builder-story-idea-card {
    display: grid;
    gap: 0.45rem;
    width: 100%;
    text-align: left;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.85rem 0.95rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 6%, #fff), #fff);
    color: var(--ink);
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background-color 160ms ease;
}

.builder-story-idea-card:hover {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
    box-shadow: 0 10px 22px rgba(20, 28, 46, 0.08);
    transform: translateY(-1px);
}

.builder-story-idea-card:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 65%, #fff);
    outline-offset: 2px;
}

.builder-story-idea-category {
    display: inline-flex;
    width: fit-content;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-2) 16%, #fff);
    color: var(--ink-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.builder-story-idea-title {
    font-size: 1rem;
    line-height: 1.35;
}

.builder-story-idea-description {
    margin: 0;
}

.outline-list {
    display: grid;
    gap: 0.55rem;
    max-height: 380px;
    overflow: auto;
    grid-auto-rows: max-content;
}

.outline-list.outline-editor-list {
    max-height: none;
    overflow: visible;
}

.outline-list-page-plan-tabs {
    max-height: none;
    overflow: visible;
}

.outline-item {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.65rem;
    background: var(--panel);
}

.muted {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.footer {
    border-top: 1px solid var(--line);
    padding: 1rem 0;
    color: var(--muted);
}

.storefront-footer {
    background: color-mix(in srgb, #ffffff 70%, transparent);
}

@media (max-width: 900px) {
    .storefront-header-row {
        align-items: center;
    }

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

    .home-hero-visuals {
        min-height: 230px;
    }

    .topbar .container {
        flex-wrap: wrap;
    }

    .storefront-menu-toggle.btn {
        display: inline-flex;
        margin-left: auto;
    }

    .storefront-menu-panel {
        display: none;
        order: 3;
        width: 100%;
        margin-left: 0;
        padding-top: 0.6rem;
        gap: 0.75rem;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }

    .storefront-menu-panel.is-open {
        display: flex;
    }

    .storefront-nav {
        width: auto;
        flex: 1 1 auto;
        justify-content: flex-start;
    }

    .lang-switcher {
        width: auto;
        flex: 0 0 auto;
    }

    .lang-menu {
        margin-top: 0;
        width: min(290px, calc(100vw - 2rem));
        max-width: calc(100vw - 2rem);
    }

    .cart-item {
        flex-direction: column;
        align-items: flex-start;
    }
}

html {
    scroll-behavior: smooth;
}

body,
button,
input,
select,
textarea {
    font-family: "Manrope", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.display-title,
.hero h1,
.buy-box-title,
.landing-social-stat strong,
.landing-quote-card blockquote {
    font-family: "Fraunces", Georgia, serif;
    letter-spacing: -0.03em;
}

.storefront-body.page-home {
    background:
        radial-gradient(circle at top left, rgba(246, 227, 210, 0.85), transparent 34%),
        linear-gradient(180deg, #fbf7f2 0%, #f6f8fc 48%, #fdfbf8 100%);
}

.storefront-body.page-landing {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 10%, transparent), transparent 26%),
        linear-gradient(180deg, color-mix(in srgb, var(--surface-glow) 60%, #fff) 0%, #fdfcf9 100%);
}

.storefront-body.theme-sunrise {
    --bg: #fff5ec;
    --bg-soft: #fffdf9;
    --panel: #fffdfa;
    --panel-elevated: #fff3e7;
    --ink: #281910;
    --ink-muted: #6f5747;
    --muted: #6f5747;
    --line: #ecd3bf;
    --accent: #d86b3d;
    --accent-2: #f0bf6f;
    --accent-dark: #9a4f24;
    --surface-glow: #fff0e2;
}

.storefront-body.theme-noir {
    --bg: #efe9e0;
    --bg-soft: #f9f5ef;
    --panel: #fcfaf5;
    --panel-elevated: #f2ece3;
    --ink: #1d1a17;
    --ink-muted: #625a54;
    --muted: #625a54;
    --line: #ddd1c3;
    --accent: #52614d;
    --accent-2: #b4966c;
    --accent-dark: #384238;
    --surface-glow: #f1ebe2;
}

.storefront-body.theme-rose {
    --bg: #f9eef0;
    --bg-soft: #fffafb;
    --panel: #fffafb;
    --panel-elevated: #f9f1f0;
    --ink: #28171e;
    --ink-muted: #705560;
    --muted: #705560;
    --line: #ebd2d7;
    --accent: #b86d84;
    --accent-2: #e5bfad;
    --accent-dark: #7f4358;
    --surface-glow: #f8e8ed;
}

.storefront-body.theme-comic {
    --bg: #fff6e8;
    --bg-soft: #fffdf8;
    --panel: #fffdfa;
    --panel-elevated: #fff2d9;
    --ink: #1f1b1a;
    --ink-muted: #66564c;
    --muted: #66564c;
    --line: #ecd5a6;
    --accent: #d84e1d;
    --accent-2: #ffd34a;
    --accent-dark: #8c2d12;
    --surface-glow: #fff0cf;
}

.storefront-body.page-home .page-content,
.storefront-body.page-landing .page-content {
    padding-top: 3rem;
}

.page-home .hero-home,
.page-landing .landing-hero-editorial {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    border-color: color-mix(in srgb, var(--line) 88%, #fff);
    background: linear-gradient(145deg, color-mix(in srgb, var(--surface-glow) 80%, #fff), #fff 70%);
    box-shadow: 0 28px 64px rgba(20, 28, 46, 0.12);
}

.page-home .hero-home {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    align-items: start;
}

.page-home .hero-home::before,
.page-landing .landing-hero-editorial::before {
    content: "";
    position: absolute;
    inset: auto -8% -12% auto;
    width: 280px;
    height: 280px;
    border-radius: 999px;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 30%, #fff), transparent 70%);
    pointer-events: none;
    opacity: 0.7;
}

.home-hero-main,
.landing-hero-content {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.home-hero-main,
.home-hero-stage,
.landing-hero-content,
.buy-box-editorial {
    display: grid;
    gap: 1rem;
}

.home-hero-main {
    align-content: start;
}

.home-hero-lede,
.landing-hero-lede {
    margin: 0;
    max-width: 42rem;
    font-size: 1.03rem;
    color: var(--ink-muted);
}

.home-hero-actions,
.landing-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.home-hero-assurance {
    margin-top: 0.1rem;
}

.home-hero-stage {
    align-content: start;
    min-width: 0;
}

.home-hero-stage-main,
.landing-gallery-feature,
.landing-gallery-thumb {
    padding: 0.7rem;
    border: 1px solid color-mix(in srgb, var(--line) 88%, #fff);
    border-radius: 24px;
    background: color-mix(in srgb, var(--panel) 88%, #fff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.home-hero-stage-main {
    margin: 0;
}

.home-hero-stage-image {
    display: block;
    width: 100%;
    min-height: 380px;
    max-height: 460px;
    object-fit: cover;
    border-radius: 18px;
}

.cover-video {
    display: block;
    width: 100%;
    background: var(--ink);
}

.cover-video-fallback-img {
    display: none;
}

.home-hero-stage-caption {
    display: grid;
    gap: 0.25rem;
    margin-top: 0.8rem;
    color: var(--ink-muted);
}

.home-hero-stage-label,
.builder-cta-audience,
.clarity-label {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.24rem 0.62rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.home-hero-stage-label {
    color: var(--accent-dark);
    background: color-mix(in srgb, var(--accent) 16%, #fff);
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
}

.home-hero-stage-stack {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.home-hero-stage-tile {
    display: grid;
    gap: 0.55rem;
    padding: 0.55rem;
    border: 1px solid color-mix(in srgb, var(--line) 88%, #fff);
    border-radius: 18px;
    background: color-mix(in srgb, var(--panel) 88%, #fff);
}

.home-hero-stage-tile img {
    width: 100%;
    height: 132px;
    object-fit: cover;
    border-radius: 12px;
}

.home-hero-stage-tile span {
    font-size: 0.84rem;
    font-weight: 700;
}

.home-section-heading,
.landing-section-heading,
.buy-box-hero-header,
.home-quality-intro {
    display: grid;
    gap: 0.45rem;
}

.home-section-heading-compact {
    margin-bottom: 1rem;
}

.home-builder-shell,
.home-social-shell,
.home-quality-shell,
.home-shelf-panel {
    border-radius: 24px;
    background: color-mix(in srgb, var(--panel) 92%, #fff);
    box-shadow: 0 18px 40px rgba(20, 28, 46, 0.06);
}

.home-builder-grid,
.home-shelf-grid,
.landing-social-stats,
.landing-testimonial-stack {
    display: grid;
    gap: 1rem;
}

.home-builder-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.home-shelf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-shelf-panel {
    align-content: start;
}

.home-shelf-items {
    display: grid;
    gap: 0.7rem;
}

.home-shelf-item {
    display: grid;
    gap: 0.18rem;
    padding: 0.95rem 1rem;
    border: 1px solid color-mix(in srgb, var(--line) 90%, #fff);
    border-radius: 16px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-glow) 28%, #fff), #fff);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.home-shelf-item:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
    box-shadow: 0 12px 26px rgba(20, 28, 46, 0.08);
}

.home-shelf-item-title {
    font-weight: 800;
    color: var(--ink);
}

.home-shelf-item-copy {
    color: var(--ink-muted);
    font-size: 0.92rem;
}

.home-shelf-item-arrow {
    margin-top: 0.15rem;
    color: var(--accent-dark);
    font-size: 0.82rem;
    font-weight: 800;
}

.builder-cta-card-rich {
    --card-accent: var(--accent);
    --card-glow: color-mix(in srgb, var(--surface-glow) 55%, #fff);
    display: grid;
    gap: 0.85rem;
    min-height: 100%;
    padding: 1rem;
    border-radius: 22px;
    border-color: color-mix(in srgb, var(--card-accent) 18%, var(--line));
    background: linear-gradient(180deg, var(--card-glow), #fff 85%);
    box-shadow: 0 16px 34px rgba(20, 28, 46, 0.08);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.builder-cta-card-rich:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--card-accent) 28%, var(--line));
    box-shadow: 0 22px 42px rgba(20, 28, 46, 0.12);
}

.builder-cta-card-theme-sunrise {
    --card-accent: #d86b3d;
    --card-glow: #fff2e6;
}

.builder-cta-card-theme-noir {
    --card-accent: #52614d;
    --card-glow: #f4eee5;
}

.builder-cta-card-theme-rose {
    --card-accent: #b86d84;
    --card-glow: #faeef1;
}

.builder-cta-card-theme-comic {
    --card-accent: #d84e1d;
    --card-glow: #fff0cd;
}

.builder-cta-image-link {
    display: block;
}

.builder-cta-image {
    width: 100%;
    height: 190px;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--line) 90%, #fff);
    transition: transform 220ms ease;
}

.builder-cta-card-rich:hover .builder-cta-image {
    transform: scale(1.02);
}

.builder-cta-audience {
    color: color-mix(in srgb, var(--card-accent) 78%, #000);
    background: color-mix(in srgb, var(--card-accent) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--card-accent) 26%, var(--line));
}

.builder-cta-counter {
    max-width: 14rem;
    text-align: right;
    font-weight: 700;
}

.builder-cta-title {
    margin: 0;
    font-size: 1.45rem;
    line-height: 1.1;
}

.builder-cta-subtitle {
    margin: 0;
    color: var(--ink-muted);
}

.builder-cta-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.builder-cta-badge {
    max-width: 15rem;
    color: var(--ink-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.builder-cta-create-btn {
    margin: 0;
    background: var(--card-accent);
    border-color: color-mix(in srgb, var(--card-accent) 80%, #000);
}

.home-social-shell .social-proof-slider,
.home-social-shell .social-proof-slider-dots {
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-glow) 36%, #fff), #fff);
}

.home-quality-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 1rem;
    align-items: start;
}

.home-quality-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.home-quality-card {
    border-radius: 20px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-glow) 24%, #fff), #fff);
}

.page-landing .landing-hero-editorial {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.88fr);
}

.landing-hero-copy {
    display: grid;
    gap: 0.75rem;
}

.landing-proof-cluster {
    display: grid;
    gap: 0.85rem;
}

.landing-social-stats {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.landing-social-stat,
.landing-quote-card {
    border: 1px solid color-mix(in srgb, var(--line) 88%, #fff);
    border-radius: 18px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-glow) 28%, #fff), #fff);
    padding: 1rem;
}

.landing-social-stat strong {
    display: block;
    font-size: 1.65rem;
    line-height: 1;
}

.landing-social-stat span {
    display: block;
    margin-top: 0.35rem;
    color: var(--ink-muted);
    font-size: 0.92rem;
}

.landing-quote-card {
    margin: 0;
    display: grid;
    gap: 0.5rem;
}

.landing-quote-card blockquote {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.35;
}

.landing-quote-card figcaption {
    color: var(--ink-muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.landing-gallery-editorial {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(150px, 0.8fr);
    gap: 0.75rem;
}

.landing-gallery-feature {
    margin: 0;
}

.landing-gallery-main {
    max-height: 460px;
    min-height: 340px;
    border-radius: 18px;
}

.landing-gallery-main.cover-video {
    object-fit: cover;
}

.landing-gallery-caption {
    margin-top: 0.75rem;
    font-size: 0.84rem;
    font-weight: 800;
    color: var(--accent-dark);
}

.landing-gallery-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
    align-content: start;
}

.landing-gallery-thumb {
    padding: 0.5rem;
    border-radius: 18px;
}

.landing-gallery-thumb img {
    width: 100%;
    height: 122px;
    object-fit: cover;
    border-radius: 12px;
}

.buy-box-editorial {
    align-self: start;
    border-radius: 24px;
    box-shadow: 0 26px 48px rgba(20, 28, 46, 0.12);
    background: linear-gradient(180deg, color-mix(in srgb, var(--panel-elevated) 88%, #fff), #fff);
}

.buy-box-title {
    margin: 0;
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    line-height: 1.1;
}

.buy-box-intro {
    margin: 0;
    color: var(--ink-muted);
}

.landing-section-heading {
    margin-bottom: 1rem;
}

.landing-quality-grid .quality-card {
    border-radius: 18px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-glow) 26%, #fff), #fff);
}

.quality-preview-link {
    display: inline-flex;
    margin-top: 0.45rem;
}

.storefront-body.theme-noir .landing-hero-editorial,
.storefront-body.theme-noir .buy-box-editorial {
    background: linear-gradient(145deg, #f7f3ec, #fff 72%);
}

.storefront-body.theme-rose .landing-quote-card,
.storefront-body.theme-rose .landing-social-stat {
    background: linear-gradient(180deg, #fff6f8, #fff);
}

.storefront-body.theme-comic .landing-gallery-feature,
.storefront-body.theme-comic .buy-box-editorial {
    box-shadow: 0 12px 0 color-mix(in srgb, var(--accent-2) 40%, transparent), 0 22px 42px rgba(20, 28, 46, 0.12);
}

.storefront-body.theme-comic .landing-quote-card,
.storefront-body.theme-comic .landing-social-stat {
    border-style: solid;
    border-width: 2px;
}

@media (max-width: 960px) {
    .home-shelf-grid,
    .home-quality-shell,
    .page-landing .landing-hero-editorial,
    .landing-gallery-editorial {
        grid-template-columns: 1fr;
    }

    .landing-gallery-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .page-home .hero-home,
    .page-landing .landing-hero-editorial {
        border-radius: 24px;
        padding: 1.1rem;
    }

    .home-builder-grid,
    .home-shelf-grid,
    .landing-social-stats,
    .landing-testimonial-stack,
    .home-quality-grid {
        grid-template-columns: 1fr;
    }

    .home-hero-stage-stack,
    .landing-gallery-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-hero-stage-image,
    .landing-gallery-main {
        min-height: 280px;
    }

    .builder-cta-counter {
        text-align: left;
        max-width: none;
    }

    .builder-cta-footer {
        align-items: flex-start;
    }
}

@media (max-width: 520px) {
    .home-hero-stage-stack,
    .landing-gallery-strip {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cover-video {
        display: none;
    }

    .cover-video-fallback-img {
        display: block;
    }
}
.control-miniatures-summary {
    margin-top: 1rem;
}

.control-miniatures-list {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.control-miniatures-style-block {
    padding: 1rem;
    border: 1px solid rgba(21, 28, 38, 0.08);
    border-radius: 22px;
    background: rgba(255, 250, 244, 0.5);
}

.control-miniatures-style-header {
    margin-bottom: 1rem;
}

.control-miniatures-style-title {
    min-width: 0;
}

.control-miniatures-review-links {
    margin-top: 0.55rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 0.15rem;
    scrollbar-width: thin;
}

.control-miniatures-review-links .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.control-miniatures-review-disabled {
    opacity: 0.46;
    pointer-events: none;
}

.control-miniatures-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}

.control-miniatures-style-meta {
    margin-top: 0.35rem;
    line-height: 1.45;
    white-space: nowrap;
    overflow-x: auto;
}

.control-miniatures-figure,
.control-miniatures-missing {
    margin: 0;
}

.control-miniatures-figure img,
.control-miniatures-missing {
    display: block;
    width: 100%;
    height: 180px;
    border-radius: 18px;
    border: 1px solid rgba(21, 28, 38, 0.1);
    background: #fff;
}

.control-miniatures-figure img[data-image-src] {
    cursor: zoom-in;
}

.control-miniatures-figure img {
    object-fit: cover;
}

.control-miniatures-figure figcaption {
    margin-top: 0.5rem;
    font-size: 0.92rem;
    color: #5b6270;
}

.control-miniatures-missing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: #5b6270;
    background: linear-gradient(135deg, rgba(255, 250, 244, 1), rgba(241, 236, 229, 1));
}

@media (max-width: 1200px) {
    .control-miniatures-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .control-miniatures-review-links {
        padding-bottom: 0.35rem;
    }

    .control-miniatures-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.control-review-section {
    margin-top: 2rem;
}

.control-review-section h2,
.control-review-section h3 {
    margin-bottom: 0.85rem;
}

.control-review-image-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}

.control-review-video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.control-review-video-card {
    margin: 0;
}

.control-review-video-card video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    border: 1px solid rgba(21, 28, 38, 0.1);
    background: #151c26;
    object-fit: contain;
}

.control-review-video-card figcaption {
    margin-top: 0.5rem;
    font-size: 0.92rem;
    color: #5b6270;
}

.control-reference-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.control-reference-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.checkout-overlay[data-style-example-dialog] {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
    padding: 1rem;
    overflow: auto;
    background: rgba(20, 28, 46, 0.56);
}

.checkout-modal {
    position: relative;
    width: min(760px, 94vw);
    max-height: calc(100dvh - 2rem);
    overflow: auto;
    display: grid;
    gap: 0.9rem;
    padding: 1.1rem;
    border: 1px solid rgba(21, 28, 38, 0.1);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(20, 28, 46, 0.28);
}

.checkout-modal h2,
.checkout-modal p {
    margin: 0;
}

.checkout-modal .control-review-image-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.checkout-modal .control-miniatures-figure img,
.checkout-modal .control-miniatures-missing {
    height: min(260px, 38vh);
}

.checkout-modal-close {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink-muted);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.checkout-modal-close:hover,
.checkout-modal-close:focus-visible {
    border-color: var(--accent);
    color: var(--accent-dark);
}

.checkout-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.6rem;
}

.control-book-links {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.control-book-links li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(21, 28, 38, 0.08);
}

.control-book-links li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.control-book-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

@media (max-width: 1200px) {
    .control-review-image-grid,
    .control-reference-columns {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .control-review-image-grid,
    .control-review-video-grid,
    .control-reference-columns,
    .control-reference-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .control-book-links li {
        flex-direction: column;
    }

    .control-book-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 520px) {
    .control-review-image-grid,
    .control-review-video-grid,
    .control-reference-columns,
    .control-reference-grid {
        grid-template-columns: 1fr;
    }

    .checkout-modal .control-review-image-grid {
        grid-template-columns: 1fr;
    }
}