:root {
    /* Brand palette — light mode is navy-on-white. See DESIGN_SYSTEM.md §1.1. */
    --brand-navy: #304c82;
    --brand: #304c82;
    --brand-dark: #243b66;
    --bg: #ffffff;
    --bg-2: #eef3fb;
    --bg-grid: #d8e3f5;
    --bg-soft: #f3f7ff;
    --surface: #ffffff;
    --surface-2: #f3f7ff;
    --surface-raised: #f3f7ff;
    --panel: #ffffff;
    --panel-strong: #f6f9ff;
    --ink: #304c82;
    --ink-2: #3f5d97;
    --muted: #6f7da0;
    --text: #304c82;
    /* Accent: brand-led navy (per tokens.jsx); gold is --accent-3. */
    --accent: #304c82;
    --accent-2: #5d83d6;
    --accent-3: #ffd23f;
    --accent-4: #6f5cff;
    --accent-5: #ff4ea3;
    --accent-gold: #ffd23f;
    --accent-dark: #243b66;
    --pos: #1f9d55;
    --neg: #d83838;
    --warn: #ff8a00;
    /* Rarity tier tokens — canonical color per tier, theme-agnostic.
       Apply via `data-rarity="<tier>"` on any badge/pill; see [data-rarity] block. */
    --rarity-common: #94a3b8;
    --rarity-uncommon: #4ade80;
    --rarity-rare: #5dd1ff;
    --rarity-epic: #b388ff;
    --rarity-legendary: #ffce4e;
    --rarity-unique-item: #f472b6;
    --rarity-unknown: #6f7da0;
    /* Reward tokens — canonical color per reward type (bonus insert / airdrop / open-edition
       core drop). Central source for the `.cd-reward-*` badges; override in the dark block. */
    --reward-insert: #7c3aed;
    --reward-airdrop: #0e9aa0;
    --reward-coredrop: #b45309;
    --brand-soft: rgba(48, 76, 130, 0.10);
    /* Solid-navy border — gives cards their thick "sticker" outline. */
    --line: #304c82;
    --line-soft: rgba(48, 76, 130, 0.18);
    --border: #304c82;
    --chip-bg: #e7efff;
    --chip-ink: #304c82;
    /* Sticker shadow — hard, offset, no blur. */
    --shadow: 4px 4px 0 0 #304c82;
    --shadow-lg: 6px 6px 0 0 #304c82;
    --shadow-sticker: 4px 4px 0 0 #304c82;
    --shadow-sticker-lg: 6px 6px 0 0 #304c82;
    --shadow-soft: 0 8px 24px rgba(48,76,130,0.12);

    /* Radii (HANDOFF §1) */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-2xl: 36px;

    /* Density tokens — comfortable default. Switch via [data-density="compact"|"spacious"]. */
    --pad-card: 22px;
    --pad-section: 44px;
    --gap-stack: 14px;
    --gap-grid: 18px;
    --row-h: 44px;
}

[data-density="compact"] {
    --pad-card: 14px;
    --pad-section: 28px;
    --gap-stack: 10px;
    --gap-grid: 12px;
    --row-h: 36px;
}

[data-density="spacious"] {
    --pad-card: 32px;
    --pad-section: 64px;
    --gap-stack: 20px;
    --gap-grid: 24px;
    --row-h: 52px;
}

body.theme-dark {
    /* Dark palette — bold premium / web3. See DESIGN_SYSTEM.md §1.1. */
    --bg: #06080f;
    --bg-2: #090c16;
    --bg-grid: #0e1322;
    --bg-soft: #090c16;
    --surface: rgba(20, 26, 42, 0.70);
    --surface-2: rgba(28, 36, 58, 0.62);
    --surface-raised: rgba(28, 36, 56, 0.78);
    --panel: rgba(20, 26, 42, 0.70);
    --panel-strong: rgba(28, 36, 56, 0.85);
    --ink: #f1f5ff;
    --ink-2: #c8d1e6;
    --muted: #7d8aa8;
    --text: #f1f5ff;
    --brand: #f1f5ff;
    --brand-dark: #b6ffe2;
    --accent: #4cffba;
    --accent-2: #b388ff;
    --accent-3: #ffce4e;
    --accent-4: #ff7849;
    --accent-5: #5dd1ff;
    --accent-dark: #29e2a0;
    --pos: #4cffba;
    --neg: #ff5d6c;
    --warn: #ffce4e;
    --neon-green: #39ff7a;
    /* Reward tokens — brighter for dark-mode contrast (see light :root for rationale). */
    --reward-insert: #b388ff;
    --reward-airdrop: #4cd7d0;
    --reward-coredrop: #ffb454;
    --brand-soft: rgba(76, 255, 186, 0.10);
    --line: rgba(255, 255, 255, 0.10);
    --line-soft: rgba(255, 255, 255, 0.06);
    --border: rgba(255, 255, 255, 0.12);
    --chip-bg: rgba(255, 255, 255, 0.06);
    --chip-ink: #f1f5ff;
    /* Glass shadow — backdrop blur applied on .card surface itself. */
    --shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 64px rgba(0, 0, 0, 0.60);
    --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 32px 80px rgba(0, 0, 0, 0.70);
    --shadow-sticker: 0 0 0 1px rgba(255,255,255,0.08), 0 24px 64px rgba(0,0,0,0.60);
    --shadow-sticker-lg: 0 0 0 1px rgba(255,255,255,0.08), 0 32px 80px rgba(0,0,0,0.70);
    --shadow-soft: 0 18px 60px rgba(0,0,0,0.55);
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    overflow-x: clip;
}

body {
    margin: 0;
    color: var(--ink);
    font-family: "Raleway", "Manrope", "Segoe UI", sans-serif;
    letter-spacing: 0.01em;
    position: relative;
    overflow-x: clip;
    min-height: 100vh;
}

body.theme-light {
    font-family: "Raleway", "Manrope", "Segoe UI", sans-serif;
    background:
        radial-gradient(1100px 600px at -10% -10%, #dde7f8 0%, transparent 55%),
        radial-gradient(900px 500px at 110% 0%, #e6edfa 0%, transparent 60%),
        linear-gradient(180deg, #f6f8fd 0%, #ffffff 60%);
}

/* Pixel-dot grid overlay (light) — fades out top-down. */
body.theme-light::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(rgba(48, 76, 130, 0.08) 1px, transparent 1px);
    background-size: 14px 14px;
    -webkit-mask: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.04) 70%, transparent);
            mask: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.04) 70%, transparent);
}

body.theme-dark {
    background:
        radial-gradient(900px 520px at 12% -5%, rgba(76, 255, 186, 0.18), transparent 60%),
        radial-gradient(820px 480px at 95% 8%, rgba(179, 136, 255, 0.20), transparent 60%),
        radial-gradient(1100px 700px at 50% 110%, rgba(93, 209, 255, 0.10), transparent 60%),
        linear-gradient(180deg, #05070d 0%, #07090f 60%, #04060b 100%);
    background-attachment: fixed;
    font-family: "Tomorrow", "Space Grotesk", "Manrope", sans-serif;
}

/* Faint 80px grid (dark) — masked to top arc. */
body.theme-dark::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 80px 80px, 80px 80px;
    -webkit-mask: radial-gradient(ellipse at 50% 0%, black 30%, transparent 75%);
            mask: radial-gradient(ellipse at 50% 0%, black 30%, transparent 75%);
}

/* Lift content above the pseudo-element overlays. */
body > * {
    position: relative;
    z-index: 1;
}

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

.shell {
    width: min(1120px, calc(100% - 2rem));
    margin: 0 auto;
}

.site-layout-shell {
    width: min(1400px, calc(100% - 2rem));
    margin: 0 auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(12px);
    background: linear-gradient(180deg, #304c82 0%, #2a4474 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.site-banner {
    margin-top: 0.85rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(243, 248, 255, 0.92));
    box-shadow: var(--shadow);
}

body.theme-dark .site-banner {
    background: linear-gradient(180deg, rgba(15, 32, 50, 0.96), rgba(9, 24, 39, 0.94));
}

.announcement-banner p {
    margin: 0;
    color: var(--ink);
    font-weight: 700;
    text-align: center;
}

.top-ad-shell {
    margin-top: 0.9rem;
}

.page-layout-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.page-layout-shell.has-left-rail {
    grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
}

.page-layout-shell.has-right-rail {
    grid-template-columns: minmax(0, 1fr) minmax(0, 180px);
}

.page-layout-shell.has-left-rail.has-right-rail {
    grid-template-columns: minmax(0, 180px) minmax(0, 1fr) minmax(0, 180px);
}

.page-rail {
    position: sticky;
    top: 5.45rem;
}

.page-shell {
    min-width: 0;
    padding-top: 2.4rem;
}

.ad-slot {
    width: 100%;
    display: flex;
    justify-content: center;
}

.ad-slot-placeholder,
.ad-slot ins {
    width: min(100%, var(--ad-width));
    min-height: var(--ad-height);
    border-radius: 18px;
}

/* Live ad frame — clearly labeled wrapper so AdSense banners cannot be mistaken for site buttons. */
.ad-slot-frame {
    position: relative;
    padding: 1.4rem 0.9rem 0.9rem;
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    background: rgba(48, 76, 130, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    max-width: 100%;
}

body.theme-dark .ad-slot-frame {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.ad-slot-tag {
    position: absolute;
    top: 0.45rem;
    left: 0.7rem;
    color: var(--muted);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ad-slot-ins {
    border-radius: 12px;
}

.ad-slot-placeholder {
    display: grid;
    place-items: center;
    gap: 0.2rem;
    padding: 0.9rem;
    border: 1px dashed rgba(48, 76, 130, 0.34);
    background: repeating-linear-gradient(135deg, rgba(48, 76, 130, 0.08), rgba(48, 76, 130, 0.08) 18px, rgba(255, 255, 255, 0.75) 18px, rgba(255, 255, 255, 0.75) 36px);
    text-align: center;
}

body.theme-dark .ad-slot-placeholder {
    background: repeating-linear-gradient(135deg, rgba(86, 247, 207, 0.08), rgba(86, 247, 207, 0.08) 18px, rgba(255, 255, 255, 0.02) 18px, rgba(255, 255, 255, 0.02) 36px);
}

.ad-slot-label,
.ad-slot-size,
.ad-slot-copy {
    margin: 0;
}

.ad-slot-label {
    color: var(--brand-dark);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ad-slot-size {
    color: var(--ink);
    font-weight: 800;
}

.ad-slot-copy {
    color: var(--muted);
    font-size: 0.78rem;
}

body.theme-dark .site-header {
    background: linear-gradient(180deg, rgba(8, 11, 20, 0.90), rgba(6, 8, 15, 0.74));
    backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nav-shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.48rem 0;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.58rem;
}

.brand-mark {
    display: block;
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.18));
}

@media (max-width: 720px) {
    .brand-mark {
        width: 30px;
        height: 30px;
    }
}

.brand-wordmark {
    display: inline-block;
    color: #ffffff;
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    font-family: "Raleway", "Manrope", sans-serif;
    line-height: 1;
}

.brand-wordmark-dot {
    color: var(--accent-gold);
}

body.theme-dark .brand-wordmark {
    /* Dark wordmark: Tomorrow + neon green with layered glow (per user preference). */
    color: #39ff7a;
    font-family: "Tomorrow", "Space Grotesk", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    text-shadow:
        0 0 1px rgba(57, 255, 122, 0.85),
        0 0 8px rgba(57, 255, 122, 0.55),
        0 0 18px rgba(57, 255, 122, 0.35);
}

body.theme-dark .brand-wordmark-dot {
    color: #39ff7a;
}
body.theme-dark.brand-preview-page {
    background:
        radial-gradient(circle at top, rgba(86, 247, 207, 0.14), transparent 34%),
        linear-gradient(180deg, #07131d 0%, #0b1e2e 100%);
}

body.theme-dark .brand-preview-card {
    border-color: rgba(150, 220, 255, 0.12);
    background: rgba(7, 19, 29, 0.78);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
}

body.theme-dark .brand-preview-wordmark,
body.theme-dark .brand-preview-inline-wordmark {
    color: #d9fff1;
    font-family: "Tomorrow", "Space Grotesk", "Manrope", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

body.theme-dark .brand-preview-divider {
    background: linear-gradient(90deg, transparent, rgba(150, 220, 255, 0.18), transparent);
}

.nav-links {
    display: flex;
    flex: 1;
    gap: 0.72rem;
    font-size: 0.95rem;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    justify-content: flex-end;
}

.mobile-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    cursor: pointer;
    padding: 0.38rem 0.52rem;
    color: #ecf6ff;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.mobile-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
    min-width: 0;
}

.nav-links a,
.nav-dropdown > summary {
    color: #ecf6ff;
    opacity: 0.9;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: "Raleway", "Manrope", sans-serif;
}

body.theme-dark .nav-links a,
body.theme-dark .nav-dropdown > summary {
    font-family: "Tomorrow", "Manrope", sans-serif;
}

.nav-links a:hover,
.nav-dropdown > summary:hover,
.nav-dropdown[open] > summary {
    opacity: 1;
    color: var(--brand-dark);
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    list-style: none;
}

.nav-dropdown > summary::-webkit-details-marker {
    display: none;
}

.nav-dropdown > summary::after {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    opacity: 0.9;
}

.nav-dropdown-panel {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 0;
    width: min(340px, calc(100vw - 2rem));
    padding: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 18px;
    background: rgba(250, 253, 255, 0.98);
    box-shadow: 0 18px 40px rgba(14, 30, 52, 0.22);
    display: grid;
    gap: 0.75rem;
    transform: translateX(var(--dropdown-shift, 0px));
}

.nav-dropdown-panel,
.nav-dropdown-panel *,
.nav-dropdown-section,
.nav-dropdown-link,
.nav-dropdown-copy,
.nav-dropdown-link strong,
.nav-dropdown-link span {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

body.theme-dark .nav-dropdown-panel {
    border-color: rgba(122, 165, 206, 0.26);
    background: rgba(8, 20, 34, 0.98);
}

.nav-dropdown-panel-wide {
    width: min(900px, calc(100vw - 2rem));
}

.nav-dropdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.85rem;
}

.nav-dropdown-section {
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(244, 248, 255, 0.8);
}

body.theme-dark .nav-dropdown-section {
    background: rgba(255, 255, 255, 0.03);
}

.nav-dropdown-eyebrow,
.nav-dropdown-copy {
    margin: 0;
}

.nav-dropdown-eyebrow {
    color: var(--brand-dark);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nav-dropdown-copy {
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.nav-dropdown-links {
    display: grid;
    gap: 0.42rem;
}

.nav-dropdown-link {
    display: grid;
    gap: 0.16rem;
    padding: 0.62rem 0.7rem;
    border-radius: 12px;
    border: 1px solid rgba(122, 165, 206, 0.18);
    background: rgba(255, 255, 255, 0.82);
    color: var(--ink);
}

.nav-dropdown-link.has-icon {
    grid-template-columns: 32px 1fr;
    column-gap: 0.7rem;
    align-items: start;
}

.nav-dropdown-link-icon {
    grid-row: span 2;
    display: grid;
    place-items: center;
    color: var(--accent);
    font-size: 18px;
    padding-top: 2px;
}

body.theme-dark .nav-dropdown-link-icon {
    color: var(--accent-2);
}

body.theme-dark .nav-dropdown-link {
    background: rgba(255, 255, 255, 0.03);
}

.nav-dropdown-link strong,
.nav-dropdown-link span {
    margin: 0;
}

.nav-dropdown-link strong {
    color: var(--ink);
    font-size: 0.88rem;
}

.nav-dropdown-link span {
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
    font-family: "Manrope", sans-serif;
    font-weight: 600;
}

.nav-dropdown-footer {
    padding-top: 0.6rem;
    margin-top: 0.4rem;
    border-top: 1px solid var(--line);
}
.nav-dropdown-cta {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.nav-dropdown-panel a {
    color: var(--ink);
}
body.theme-dark .nav-dropdown-panel .text-link {
    color: var(--brand);
}
body.theme-dark .site-header .button.secondary {
    background: rgba(12, 26, 43, 0.94);
    color: #e6f7ff;
    border-color: rgba(122, 165, 206, 0.34);
}
body.theme-dark .site-header .button.secondary:hover {
    background: rgba(22, 43, 68, 0.98);
}
body.theme-dark .user-menu-panel .auth-status-pill.inactive {
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.88);
}
body.theme-dark .user-menu-panel .auth-status-pill.active {
    color: #d5ffdf;
}body.theme-dark .user-menu-panel {
    background: rgba(8, 24, 39, 0.98);
}
.hero,
.page-header,
.detail-hero {
    margin-bottom: 2rem;
}
.warning-copy {
    color: var(--accent-dark);
}
body.theme-dark .eyebrow,
body.theme-dark .card-label {
    color: var(--muted);
}

h1,
h2 {
    margin: 0 0 1rem;
    line-height: 1.04;
    color: var(--ink);
    font-family: "Raleway", "Manrope", sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
}

body.theme-dark h1,
body.theme-dark h2 {
    color: var(--ink);
    font-family: "Tomorrow", "Space Grotesk", "Manrope", sans-serif;
}

h1 {
    font-size: clamp(2.25rem, 5vw, 4.5rem);
    max-width: 13ch;
}

h2 {
    font-size: 1.5rem;
}
.cta-row {
    margin-top: 1.5rem;
}
body.theme-dark .button.primary {
    background: linear-gradient(120deg, #4cffba, #29e2a0);
    color: #03110b;
    box-shadow: 0 14px 30px rgba(76, 255, 186, 0.28);
}

body.theme-dark .button.primary:hover {
    background: linear-gradient(120deg, #29e2a0, #1cc78a);
}
body.theme-dark .button.secondary {
    background: rgba(255, 255, 255, 0.06);
    color: var(--ink);
    border-color: rgba(255, 255, 255, 0.10);
}

body.theme-dark .button.secondary:hover {
    background: rgba(76, 255, 186, 0.14);
}.info-expand {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.info-expand > summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.info-expand > summary::-webkit-details-marker {
    display: none;
}

.info-expand > summary::after {
    content: '▸';
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--muted);
    transition: transform 180ms ease;
}

.info-expand[open] > summary::after {
    transform: rotate(90deg);
}

.info-expand-body {
    display: grid;
    gap: 0.85rem;
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--line);
}

.theme-toggle-button {
    padding: 0.34rem 0.62rem;
    font-size: 0.7rem;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.45);
}

.theme-toggle-button:hover {
    background: rgba(255, 255, 255, 0.3);
}

body.theme-light .theme-toggle-button {
    color: #f6fbff;
}

body.theme-dark .theme-toggle-button {
    background: rgba(86, 247, 207, 0.14);
    border-color: rgba(86, 247, 207, 0.38);
    color: #cbffe9;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}

.card-grid.single {
    grid-template-columns: minmax(280px, 620px);
}

.meta-row {
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.6;
}
body.theme-dark .meta-pill.accent {
    color: #ffd5a6;
}
.refresh-indicator {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 0.78rem;
    font-weight: 700;
    animation: refresh-pulse 1.6s ease-in-out infinite;
    vertical-align: middle;
}
@keyframes refresh-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}
.action-stack {
    display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.featured-card {
    background:
        radial-gradient(circle at top right, rgba(106, 145, 209, 0.2), transparent 42%),
        linear-gradient(180deg, rgba(244, 248, 255, 0.92), rgba(234, 241, 252, 0.9));
}

body.theme-dark .featured-card {
    background:
        radial-gradient(circle at top right, rgba(86, 247, 207, 0.18), transparent 42%),
        linear-gradient(180deg, rgba(13, 36, 58, 0.9), rgba(8, 24, 40, 0.9));
}

.home-hero h1,
.directory-hero h1,
.legal-hero h1 {
    font-size: clamp(1.75rem, 3.5vw, 2.7rem);
}

.home-hero h1 {
    max-width: none;
}

.home-hero {
    max-width: 42rem;
    margin-bottom: 1.1rem;
}
.home-hero .cta-row {
    margin-top: 0.6rem;
}

.directory-hero h1,
.legal-hero h1 {
    max-width: 16ch;
}

.featured-carousel {
    display: grid;
    gap: 0.65rem;
}

.featured-carousel-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.featured-carousel-nav,
.featured-carousel-dots,
.directory-featured-row {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.featured-carousel-viewport {
    position: relative;
}

.featured-slide {
    display: grid;
    grid-template-columns: minmax(180px, 0.78fr) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: stretch;
}

.featured-slide-media {
    min-height: 190px;
}

.featured-slide-image,
.featured-slide-placeholder {
    width: 100%;
    height: 100%;
    min-height: 190px;
    border-radius: 18px;
    border: 1px solid var(--line);
}

.featured-slide-image {
    display: block;
    object-fit: cover;
}

.featured-slide-placeholder {
    display: grid;
    place-items: center;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(48, 76, 130, 0.94), rgba(36, 59, 102, 0.94));
    color: #ffffff;
    text-align: center;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.featured-slide-copy {
    display: grid;
    gap: 0.45rem;
    align-content: center;
}

.featured-slide-copy > * {
    margin: 0;
}

.featured-slide-copy h3 {
    margin: 0;
    color: var(--brand-dark);
    font-size: clamp(1.3rem, 2.2vw, 1.8rem);
    line-height: 1.08;
    font-family: "Space Grotesk", "Raleway", "Manrope", sans-serif;
}

body.theme-dark .featured-slide-copy h3 {
    color: #f4fbff;
    font-family: "Tomorrow", "Space Grotesk", "Manrope", sans-serif;
}

.featured-drop-date {
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.45;
}

.featured-dot {
    width: 11px;
    height: 11px;
    border: 0;
    border-radius: 999px;
    padding: 0;
    background: rgba(48, 76, 130, 0.22);
    cursor: pointer;
}

.featured-dot.is-active {
    background: var(--accent);
}

.directory-featured-chip {
    display: grid;
    gap: 0.18rem;
    min-width: 180px;
    padding: 0.78rem 0.92rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.78);
}

body.theme-dark .directory-featured-chip {
    background: rgba(255, 255, 255, 0.04);
}

.directory-featured-chip strong {
    color: var(--ink);
}

.directory-featured-chip span {
    color: var(--muted);
    font-size: 0.82rem;
}

.site-footer {
    margin-top: 3rem;
    padding: 2rem 0 2.4rem;
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(240, 245, 253, 0.86), rgba(227, 236, 248, 0.92));
}

body.theme-dark .site-footer {
    background: linear-gradient(180deg, rgba(6, 18, 30, 0.92), rgba(8, 19, 32, 0.98));
}

.footer-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.95fr);
    gap: 1.4rem;
    align-items: start;
}

.footer-intro {
    display: grid;
    gap: 0.55rem;
}

.footer-intro > * {
    margin: 0;
}

.footer-intro h2 {
    max-width: 14ch;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
}

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

.footer-column {
    display: grid;
    gap: 0.42rem;
}

.footer-heading {
    margin: 0 0 0.2rem;
    color: var(--brand-dark);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.footer-column a {
    color: var(--muted);
    font-weight: 700;
}

.footer-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    padding: 0.45rem 0.72rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--ink);
}

body.theme-dark .footer-social-link {
    background: rgba(255, 255, 255, 0.04);
}

.social-link-icon {
    display: inline-grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    color: #ffffff;
}

.footer-social-link.is-patreon .social-link-icon {
    background: #f96854;
}

.footer-social-link.is-x .social-link-icon {
    background: #111111;
}

.footer-social-link.is-discord .social-link-icon {
    background: #5865f2;
}
.legal-stack {
    gap: 1rem;
}

.timeline-hero h1 {
    max-width: 11ch;
}

.maintenance-page-shell {
    min-height: 100vh;
}

.maintenance-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem;
}

.maintenance-card {
    width: min(720px, 100%);
    display: grid;
    gap: 0.8rem;
    justify-items: center;
    padding: 2.2rem;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 255, 0.94));
    box-shadow: var(--shadow);
    text-align: center;
}

body.theme-dark .maintenance-card {
    background: linear-gradient(180deg, rgba(15, 31, 49, 0.98), rgba(8, 21, 35, 0.96));
}

.maintenance-mark {
    width: 82px;
    height: 82px;
    object-fit: contain;
}

.site-config-form {
    display: grid;
    gap: 0.8rem;
}

.site-config-label {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.site-config-form textarea {
    width: 100%;
    min-height: 480px;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(247, 250, 255, 0.94);
    color: var(--ink);
    font: 500 0.9rem/1.55 "Consolas", "SFMono-Regular", monospace;
    resize: vertical;
}

body.theme-dark .site-config-form textarea {
    background: rgba(9, 24, 39, 0.94);
    color: #f4fbff;
}

.timeline-controls-card,
.timeline-calendar-card,
.timeline-year-card,
.timeline-jump-card {
    display: grid;
    gap: 1rem;
}

.timeline-controls-row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.timeline-controls-actions {
    justify-content: flex-end;
}

.timeline-select-field {
    display: grid;
    gap: 0.4rem;
    min-width: 240px;
}

.timeline-select-field span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.timeline-select-field select {
    min-height: 44px;
    padding: 0.72rem 0.88rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--ink);
    font: inherit;
}

body.theme-dark .timeline-select-field select {
    background: rgba(8, 24, 39, 0.94);
    color: #f4fbff;
}

.timeline-calendar-surface {
    display: grid;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(237, 243, 252, 0.94));
}

body.theme-dark .timeline-calendar-surface {
    background: linear-gradient(180deg, rgba(10, 25, 40, 0.98), rgba(7, 18, 30, 0.96));
}

.timeline-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background: linear-gradient(135deg, rgba(34, 86, 163, 0.96), rgba(64, 122, 209, 0.88));
    color: #ffffff;
}

.timeline-calendar-header img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    padding: 0.35rem;
}

.timeline-calendar-header h3,
.timeline-calendar-header p {
    margin: 0;
}

.timeline-calendar-eyebrow {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.86;
}

.timeline-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.timeline-calendar-dayname {
    padding: 0.7rem 0.45rem;
    border: 1px solid var(--line);
    background: rgba(236, 242, 250, 0.92);
    color: var(--brand-dark);
    text-align: center;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.theme-dark .timeline-calendar-dayname {
    background: rgba(255, 255, 255, 0.04);
}

.timeline-calendar-day {
    min-height: 150px;
    padding: 0.45rem;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.76);
}

body.theme-dark .timeline-calendar-day {
    background: rgba(255, 255, 255, 0.02);
}

.timeline-calendar-day.is-empty {
    background: rgba(233, 239, 248, 0.5);
}

body.theme-dark .timeline-calendar-day.is-empty {
    background: rgba(255, 255, 255, 0.01);
}

.timeline-calendar-date {
    margin-bottom: 0.35rem;
    color: var(--ink);
    font-size: 0.84rem;
    font-weight: 800;
}

.timeline-calendar-events {
    display: grid;
    gap: 0.28rem;
}

.timeline-calendar-event {
    display: block;
    padding: 0.32rem 0.38rem;
    border-radius: 9px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
    background: #3d6fb9;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeline-calendar-event.is-sale-begins {
    background: #2b8a58;
}

.timeline-calendar-event.is-sale-ends {
    background: #5a6472;
}

.timeline-calendar-event.is-sold-out {
    background: #d6a519;
    color: #1d1a10;
}

.timeline-list-grid {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.timeline-jump-card {
    position: sticky;
    top: 5.4rem;
}

.timeline-jump-links {
    display: grid;
    gap: 0.45rem;
    max-height: 70vh;
    overflow: auto;
}

.timeline-jump-links a {
    color: var(--muted);
    font-weight: 700;
}

.timeline-year-stack,
.timeline-month-stack,
.timeline-events-list,
.timeline-day-events {
    display: grid;
    gap: 0.9rem;
}

.timeline-year-label {
    margin: 0;
    color: var(--brand-dark);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.timeline-month-block {
    display: grid;
    gap: 0.85rem;
}

.timeline-month-block h2 {
    margin: 0;
}

.timeline-day-row {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
}

.timeline-day-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    background: rgba(48, 76, 130, 0.08);
    color: var(--brand-dark);
    font-size: 0.82rem;
    font-weight: 800;
}

.timeline-event-item {
    padding: 0.88rem 0.95rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
}

body.theme-dark .timeline-event-item {
    background: rgba(255, 255, 255, 0.03);
}

.timeline-event-item p,
.timeline-event-item a {
    margin: 0;
    color: var(--ink);
    font-weight: 600;
    line-height: 1.55;
}

.breadcrumb-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1.5rem;
    color: var(--muted);
    font-size: 0.95rem;
}

.tools-feedback {
    margin-bottom: 1rem;
}

.tools-feedback.success {
    border-color: rgba(84, 198, 139, 0.5);
    background: rgba(84, 198, 139, 0.14);
}

.tools-feedback.error {
    border-color: rgba(255, 127, 42, 0.5);
    background: rgba(255, 127, 42, 0.14);
}

.internal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
}

.internal-head {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: flex-start;
}

.badge-stack {
    justify-content: flex-end;
}

.internal-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.internal-info-list {
    margin: 0;
}

.checkbox-row {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    color: var(--muted);
    font-weight: 600;
}

.checkbox-row input {
    accent-color: var(--accent);
}

.internal-refresh-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.page-header {
    display: grid;
    gap: 0.7rem;
}

.page-header > * {
    margin: 0;
}
.page-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-title {
    margin: 0;
    max-width: none;
}

.internal-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.9rem;
}

.internal-summary-card,
.hero-card {
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 255, 0.92));
    box-shadow: var(--shadow);
}

body.theme-dark .internal-summary-card,
body.theme-dark .hero-card {
    background: linear-gradient(180deg, rgba(14, 32, 50, 0.96), rgba(9, 24, 39, 0.94));
}

.internal-summary-card {
    display: grid;
    gap: 0.35rem;
}

.internal-summary-label,
.internal-summary-detail {
    margin: 0;
    color: var(--muted);
}

.internal-summary-label {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.internal-summary-value {
    margin: 0;
    color: var(--brand-dark);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
}

.internal-summary-detail {
    font-size: 0.84rem;
    line-height: 1.5;
}

.internal-ops-card {
    display: grid;
    gap: 1rem;
}

.internal-ops-card .section-head {
    margin-bottom: 0;
}

.internal-ops-actions {
    justify-content: flex-end;
}

.table-wrap {
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(248, 251, 255, 0.84);
}

body.theme-dark .table-wrap {
    background: rgba(9, 24, 39, 0.9);
}

.table-grid {
    width: 100%;
    min-width: 780px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.92rem;
}

.table-grid th,
.table-grid td {
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.table-grid thead th {
    background: var(--panel-strong);
    color: var(--brand-dark);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

body.theme-dark .table-grid thead th {
    background: rgba(16, 38, 60, 0.98);
}

.table-grid tbody tr:hover {
    background: rgba(48, 76, 130, 0.06);
}

body.theme-dark .table-grid tbody tr:hover {
    background: rgba(86, 247, 207, 0.08);
}

.table-grid tbody tr:last-child td {
    border-bottom: 0;
}

.table-grid td {
    color: var(--ink);
    line-height: 1.55;
}

.table-grid td code {
    display: inline-block;
    padding: 0.12rem 0.38rem;
    border-radius: 999px;
    background: rgba(48, 76, 130, 0.08);
    color: var(--muted);
    font-size: 0.76rem;
}

.table-grid td .button {
    white-space: nowrap;
}
.redeem-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}.support-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
}

.support-link-card {
    display: grid;
    gap: 0.2rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.62);
    color: inherit;
}

.support-link-card span {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

body.theme-dark .support-link-card {
    background: rgba(255, 255, 255, 0.04);
}
body.theme-dark .stat-card {
    background: rgba(255, 255, 255, 0.04);
}
@media (max-width: 920px) {
    .nav-links {
        gap: 0.55rem;
    }

    .nav-links a {
        font-size: 0.68rem;
    }

    .auth-name {
        max-width: 92px;
    }
}

.breadcrumb-row a {
    color: var(--brand);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.user-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.9fr);
    gap: 1.25rem;
    align-items: stretch;
}

.detail-hero-compact {
    grid-template-columns: minmax(0, 1.45fr) minmax(220px, 0.65fr);
    gap: 1rem;
    align-items: start;
}
.detail-hero-compact h1 {
    max-width: none;
    font-size: clamp(1.95rem, 3.4vw, 3rem);
}

.detail-hero-compact .hero-preview,
.detail-hero-compact .media-placeholder {
    min-height: 180px;
    max-height: 220px;
}
.badge-row {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.compact-row {
    margin-bottom: 0;
}
body.theme-dark .badge {
    background: rgba(79, 195, 247, 0.12);
    color: #d6f4ff;
}
body.theme-dark .badge.accent {
    color: #ffd3a0;
}

/* Section badge: a visual anchor while scrolling. Paired with the section's
   text heading, never replacing it — an unlabelled glyph is the mistake the
   SOL symbol already taught us.
   Lives here, NOT in collection_detail.html's inline <style>: that block is
   gated on `marketplace_snippet`, so collections without a synced marketplace
   rollup lost these rules and rendered the badges unpositioned (in-flow),
   which pushed the Overview KPI strip and edition viewer apart. */
.cd-section-badge {
    position: absolute; top: -.7rem; left: 1rem; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.9rem; height: 1.9rem; border-radius: 999px;
    border: 1px solid currentColor; font-size: .8rem;
    background: var(--dc3-surface, canvas); opacity: .85;
}
.cd-section[data-nav-icon], .kpi-strip[data-nav-icon] { position: relative; }
.cd-jumpnav-dot.has-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.15rem; height: 1.15rem; font-size: .72rem; background: none;
}

.kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.kpi-strip.kpi-strip-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.kpi-strip.kpi-strip-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kpi-strip.kpi-strip-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Reach meter inside the Packs KPI tile (moved there from the old full-width
   pack strip, 2026-07-30). */
.kpi-pack-track {
    margin-top: 0.45rem;
}

/* Subdued packs-vs-items breakdown under a KPI value. */
.kpi-breakdown {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.72rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* Packed-collection lifecycle panel (scaffold — see PACKED_COLLECTIONS.md) */
.pack-stats .pack-stats-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}
.pack-stats .pack-stats-subtitle {
    font-size: 0.8rem;
    color: rgba(148, 163, 184, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.pack-stats .pack-stats-kpis { margin-bottom: 0.75rem; }
.pack-stats .pack-stats-footnote {
    font-size: 0.85rem;
    color: rgba(148, 163, 184, 0.9);
    margin: 0.9rem 0 0;
}

/* Pack "reached collectors" readout — one headline metric + progress bar + split. */
.pack-reach { max-width: 100%; }
.pack-reach-headline {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}
.pack-reach-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.pack-reach-value { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.pack-reach-value strong { font-weight: 800; }
.pack-reach-of { color: var(--muted); font-size: 1rem; }
.pack-reach-track {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: var(--line-soft);
    overflow: hidden;
    margin: 0.6rem 0 0.75rem;
}
.pack-reach-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.pack-reach-split {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    font-size: 0.9rem;
}
.pack-reach-chip strong { font-variant-numeric: tabular-nums; font-weight: 800; }
.pack-reach-muted { color: var(--muted); }

/* Hover/focus tooltip on the ⓘ — the custody caveat lives here, not as body text. */
.pack-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    color: var(--muted);
    font-size: 0.72rem;
    cursor: help;
    position: relative;
    user-select: none;
}
.pack-info::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    width: min(20rem, 72vw);
    background: var(--surface-strong, #0f172a);
    color: var(--ink);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.7rem;
    font-size: 0.78rem;
    line-height: 1.35;
    letter-spacing: normal;
    text-transform: none;
    font-weight: 500;
    text-align: left;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity 120ms ease;
    z-index: 40;
    pointer-events: none;
}
.pack-info:hover::after,
.pack-info:focus-visible::after { opacity: 1; visibility: visible; }

@media (max-width: 1100px) {
    .kpi-strip,
    .kpi-strip.kpi-strip-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 620px) {
    .kpi-strip.kpi-strip-3 {
        grid-template-columns: 1fr;
    }
}

/* --- Wallet checklist lens --- */
/* Connected-wallet shortcut, above the paste field. */
.cd-checklist-mine {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1rem;
}
.cd-checklist-mine-addr {
    font-size: 0.8rem;
    color: var(--muted);
}
.cd-checklist-mine-hint {
    font-size: 0.8rem;
    flex: 1 1 16rem;
}

.cd-checklist-input {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}
.cd-checklist-address {
    flex: 1 1 22rem;
    min-width: 0;
    padding: 0.6rem 0.8rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.85rem;
}
.cd-checklist-note {
    margin: 0.7rem 0 0;
    font-size: 0.8rem;
    color: var(--muted);
}
.cd-checklist-error {
    margin: 0.7rem 0 0;
    font-size: 0.85rem;
    color: var(--neg, #ef4444);
}
.cd-checklist-result { margin-top: 1.1rem; }
.cd-checklist-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.cd-checklist-headline { font-weight: 700; font-size: 1.05rem; }
.cd-checklist-missing-toggle {
    font-size: 0.82rem;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}
.cd-checklist-quests {
    display: grid;
    gap: 0.85rem;
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1.5px solid var(--line-soft);
}
.cd-quest-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: 0.88rem;
    margin-bottom: 0.35rem;
}
.cd-quest-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    padding: 0.15rem 0;
    cursor: pointer;
    color: var(--ink);
    font: inherit;
    text-align: left;
}
.cd-quest-dot {
    width: 9px; height: 9px; border-radius: 3px;
    background: var(--line); flex: 0 0 auto;
}
.cd-quest-toggle[aria-pressed="true"] .cd-quest-dot { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.cd-quest-toggle:hover .cd-quest-title { text-decoration: underline; }
.cd-quest-title { font-weight: 600; }
.cd-quest-progress { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.cd-quest.is-complete .cd-quest-progress { color: var(--pos, #22c55e); font-weight: 700; }
.cd-quest-track { display: block; height: 7px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.cd-quest-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width 250ms ease; }
.cd-quest.is-complete .cd-quest-fill { background: var(--pos, #22c55e); }
.cd-quest-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: var(--muted);
}
.cd-quest-global { font-weight: 600; }
.cd-quest-multi-note {
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    color: var(--muted);
}
.cd-quest-multi-note a { color: var(--accent); text-decoration: none; }
.cd-quest-multi-note a:hover { text-decoration: underline; }
.cd-quest-link { color: var(--accent); text-decoration: none; }
.cd-quest-link:hover { text-decoration: underline; }
.cd-quest-clearhl {
    justify-self: start;
    background: none;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    color: var(--muted);
    cursor: pointer;
}

/* "You" column — hidden until a wallet is checked, then revealed. */
.cd-rarity-table .cd-you-col,
.cd-rarity-table .cd-you-cell { display: none; }
.cd-rarity-table.is-checked .cd-you-col,
.cd-rarity-table.is-checked .cd-you-cell { display: table-cell; }
.cd-you-empty { color: var(--muted); }
.cd-you-owned { color: var(--pos, #22c55e); font-weight: 800; font-size: 1rem; }
.cd-you-need { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
.cd-you-listed { color: var(--warn); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; cursor: help; }

/* Owned rows — a clear left accent bar + tint so the shift is unmistakable. */
tr[data-group-row].is-owned > td:first-child { box-shadow: inset 3px 0 0 0 var(--pos, #22c55e); }
tr[data-group-row].is-owned { background: color-mix(in srgb, var(--pos, #22c55e) 10%, transparent); }
tr.cd-row-hidden { display: none; }

/* Serial-level inventory — collapsible list of every held copy + CSV export. */
.cd-inventory {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}
.cd-inventory-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.cd-inventory-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    color: var(--text);
}
.cd-inventory-toggle i { transition: transform 0.15s ease; font-size: 0.8rem; color: var(--muted); }
.cd-inventory-toggle[aria-expanded="true"] i { transform: rotate(90deg); }
.cd-inventory-csv { font-size: 0.8rem; }
.cd-inventory-hint { margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--muted); }
.cd-inventory-groups { margin-top: 0.85rem; display: flex; flex-direction: column; gap: 0.6rem; }
.cd-inv-group {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    background: color-mix(in srgb, var(--line) 12%, transparent);
}
.cd-inv-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.cd-inv-group-name { font-weight: 700; font-size: 0.9rem; }
.cd-inv-group-count { color: var(--muted); font-weight: 700; font-size: 0.85rem; }
.cd-inv-serials { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cd-inv-serial {
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 700;
}
.cd-inv-serial.is-burned {
    background: color-mix(in srgb, var(--neg, #ef4444) 16%, transparent);
    color: var(--neg, #ef4444);
    text-decoration: line-through;
}

/* Rainbow completion — a collapsed-by-default block tucked under the quests. */
.cd-rainbow {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--line);
}
.cd-rainbow-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    color: var(--text);
}
.cd-rainbow-toggle .cd-rainbow-caret { transition: transform 0.15s ease; font-size: 0.8rem; color: var(--muted); }
.cd-rainbow-toggle[aria-expanded="true"] .cd-rainbow-caret { transform: rotate(90deg); }
.cd-rainbow-intro { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--muted); }
.cd-rainbow-totals {
    margin: 0.6rem 0 0;
    padding: 0.55rem 0.7rem;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    font-size: 0.82rem;
    color: var(--text);
}
.cd-rainbow-totals strong { color: var(--accent); }
.cd-rainbow-leaders { margin-top: 0.7rem; }
.cd-rainbow-leaders-title { margin: 0 0 0.4rem; font-size: 0.8rem; font-weight: 700; color: var(--text); }
.cd-rainbow-leaders-title i { color: var(--warn, #f59e0b); }
.cd-rainbow-leaders-list {
    list-style: none;
    counter-reset: rank;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.cd-rainbow-leader {
    counter-increment: rank;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    font-size: 0.82rem;
}
.cd-rainbow-leader::before {
    content: counter(rank);
    flex: 0 0 auto;
    width: 1.3rem;
    height: 1.3rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
    font-weight: 800;
    font-size: 0.75rem;
}
.cd-rainbow-leader-addr { font-weight: 700; }
.cd-rainbow-leader-count { margin-left: auto; color: var(--muted); }
.cd-rainbow-leader-count strong { color: var(--text); }
.cd-rainbow-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.85rem;
    margin-top: 0.85rem;
}
.cd-rainbow-card {
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--line) 12%, transparent);
}
.cd-rainbow-name { font-weight: 800; font-size: 1rem; }
.cd-rainbow-done { margin-top: 0.35rem; font-size: 0.85rem; color: var(--muted); }
.cd-rainbow-done.is-live { color: var(--text); }
.cd-rainbow-done strong { font-size: 1.15rem; color: var(--accent); }
.cd-rainbow-colors { margin-top: 0.7rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cd-rainbow-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.5rem 0.15rem 0.35rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: 0.78rem;
    font-weight: 700;
}
.cd-rainbow-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; display: inline-block; }

/* Per-quest filter: the table is narrowed to the quest's rows (non-members hidden via
   cd-row-hidden), and each shown row is coloured green (owned) / red (missing) once a
   wallet is checked — no dimming (that wrongly faded the visible member rows). */
tr[data-group-row].cd-q-in > td:first-child { box-shadow: inset 3px 0 0 0 var(--muted); }
tr[data-group-row].cd-q-owned { background: color-mix(in srgb, var(--pos, #22c55e) 14%, transparent); }
tr[data-group-row].cd-q-owned > td:first-child { box-shadow: inset 3px 0 0 0 var(--pos, #22c55e); }
tr[data-group-row].cd-q-missing { background: color-mix(in srgb, var(--neg, #ef4444) 12%, transparent); }
tr[data-group-row].cd-q-missing > td:first-child { box-shadow: inset 3px 0 0 0 var(--neg, #ef4444); }

/* Quest filter chips — above the rarity table; narrow it to one quest's items. */
.cd-quest-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.4rem 0 1rem;
}
.cd-quest-filter-label { font-size: 0.8rem; color: var(--muted); font-weight: 600; margin-right: 0.15rem; }
.cd-qfilter-chip {
    border: 1.5px solid var(--line);
    background: var(--surface);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.cd-qfilter-chip:hover { border-color: var(--accent); }
.cd-qfilter-chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.cd-qfilter-status { font-size: 0.82rem; color: var(--muted); margin-left: 0.35rem; }
.cd-quest-hint { font-size: 0.8rem; color: var(--muted); margin: 0.4rem 0 0; }

/* --- Quick-jump section nav --- */
[data-nav-label][id] { scroll-margin-top: 1.25rem; }
.cd-jumpnav { position: fixed; z-index: 45; }
.cd-jumpnav-toggle { display: none; }
.cd-jumpnav-list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    border: 1.5px solid var(--line-soft);
    border-radius: var(--radius-md);
    padding: 0.4rem;
    backdrop-filter: blur(8px);
}
.cd-jumpnav-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
}
.cd-jumpnav-item:hover { color: var(--ink); }
.cd-jumpnav-item.is-active { color: var(--ink); background: var(--line-soft); }
.cd-jumpnav-dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; opacity: 0.45; flex: 0 0 auto; }
.cd-jumpnav-item.is-active .cd-jumpnav-dot { opacity: 1; background: var(--accent); }

/* Desktop rail starts at 1400px, NOT 1024px.
   The rail is fixed to the viewport while `.shell` is min(1120px, 100% - 2rem)
   centered, so the usable gutter is (viewport - 1120) / 2. An expanded rail is
   ~160px wide, which means it overlapped the content across the whole
   1024-1450px range — most laptops:

       1024px -> ~16px gutter  -> overlaps ~145px
       1280px -> ~80px gutter  -> overlaps ~80px
       1440px -> ~160px gutter -> grazes

   Below 1400px the mobile FAB takes over: bottom-right, out of the flow, and
   only expands when asked. */
@media (min-width: 1400px) {
    .cd-jumpnav { right: 0.9rem; top: 50%; transform: translateY(-50%); }

    /* Collapsed to an icon column at rest (~50px inside a 240px+ gutter),
       expanding to full labels on hover or keyboard focus. The labels stay in
       the DOM and are only clipped — `display: none` would hide them from
       screen readers too, which is the opposite of what a nav needs. */
    .cd-jumpnav-label {
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        white-space: nowrap;
        transition: max-width 160ms ease, opacity 120ms ease;
    }
    .cd-jumpnav-item { gap: 0; transition: gap 160ms ease; }
    .cd-jumpnav:hover .cd-jumpnav-label,
    .cd-jumpnav:focus-within .cd-jumpnav-label { max-width: 11rem; opacity: 1; }
    .cd-jumpnav:hover .cd-jumpnav-item,
    .cd-jumpnav:focus-within .cd-jumpnav-item { gap: 0.5rem; }
}
@media (min-width: 1400px) and (prefers-reduced-motion: reduce) {
    .cd-jumpnav-label, .cd-jumpnav-item { transition: none; }
}
/* Mobile/tablet/laptop: a bottom-right FAB that expands the list upward on tap. */
@media (max-width: 1399px) {
    .cd-jumpnav { right: 1rem; bottom: 1rem; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
    .cd-jumpnav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 999px;
        border: 1.5px solid var(--line);
        background: var(--surface);
        color: var(--ink);
        font-size: 1.1rem;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
        cursor: pointer;
        order: 2;
    }
    .cd-jumpnav-list { display: none; order: 1; max-height: 60vh; overflow-y: auto; }
    .cd-jumpnav.is-open .cd-jumpnav-list { display: flex; }
}

.kpi-coverage {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.kpi-coverage-track {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: rgba(48, 76, 130, 0.10);
    overflow: hidden;
}

body.theme-dark .kpi-coverage-track {
    background: rgba(255, 255, 255, 0.08);
}

.kpi-coverage-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--brand-navy), #4a6db0);
    border-radius: 999px;
    transition: width 360ms ease;
}

body.theme-dark .kpi-coverage-fill {
    background: linear-gradient(90deg, #4cffba, #5dd1ff);
}

.kpi-coverage-meta {
    color: var(--muted);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}

/* === Home: Recent activity feed (HANDOFF §3 simplified to timeline events) === */

.recent-activity .section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.recent-activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.recent-activity-row {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    gap: 1rem;
    align-items: baseline;
    padding: 0.7rem 0;
    border-top: 1px solid var(--line-soft);
}

.recent-activity-row:first-child {
    border-top: none;
}

.recent-activity-date {
    color: var(--muted);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.recent-activity-event {
    color: var(--ink);
    font-size: 0.95rem;
    line-height: 1.5;
}

.recent-activity-event a {
    color: var(--ink);
    border-bottom: 1px dashed var(--line);
    transition: color 140ms ease, border-color 140ms ease;
}

.recent-activity-event a:hover {
    color: var(--brand-navy);
    border-bottom-color: currentColor;
}

body.theme-dark .recent-activity-event a:hover {
    color: var(--accent);
}

@media (max-width: 600px) {
    .recent-activity-row {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
}

/* === HANDOFF §5 — Collections directory === */

.directory-header {
    padding: 2rem 0 0.5rem;
}

.directory-header h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 0.4rem 0 0.6rem;
}
.directory-toolbar {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    padding: 1rem 0 1.25rem;
}

.directory-search {
    flex: 1 1 280px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--muted);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.78rem;
    cursor: pointer;
    text-align: left;
}

.directory-search:hover {
    border-color: var(--ink-2);
}

.directory-search-placeholder {
    flex: 1;
}

.directory-search-kbd {
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--line-soft);
    border-radius: 4px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.65rem;
    color: var(--ink-2);
}

.directory-view-toggle {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--surface-2);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
}

.dir-view-btn {
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.85rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink-2);
    cursor: pointer;
}

.dir-view-btn.is-active {
    background: var(--brand-navy);
    color: #ffffff;
}

body.theme-dark .dir-view-btn.is-active {
    background: linear-gradient(120deg, #4cffba, #29e2a0);
    color: #03110b;
}

.directory-sort {
    padding: 0.5rem 0.8rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 200px;
}

.directory-body {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    padding-bottom: 3rem;
}

@media (max-width: 900px) {
    .directory-body {
        grid-template-columns: minmax(0, 1fr);
    }
}

.directory-rail {
    position: sticky;
    top: 5.45rem;
    padding: 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

body.theme-dark .directory-rail {
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

@media (max-width: 900px) {
    .directory-rail {
        position: static;
    }
}

.dir-filter-group {
    margin-top: 1rem;
}

.dir-filter-title {
    display: block;
    margin-bottom: 0.5rem;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-2);
}

.dir-filter-list {
    display: grid;
    gap: 0.25rem;
}

.dir-filter-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.55rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease;
}

.dir-filter-option.is-active {
    background: var(--surface-2);
    border-color: var(--line);
}

.dir-filter-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.dir-filter-checkbox {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1.5px solid var(--line);
    background: transparent;
    flex-shrink: 0;
}

.dir-filter-option.is-active .dir-filter-checkbox {
    background: var(--accent);
    border-color: var(--accent);
}

body.theme-dark .dir-filter-option.is-active .dir-filter-checkbox {
    background: var(--accent);
    border-color: var(--accent);
}

.dir-filter-label {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--ink);
}

.dir-filter-option.is-active .dir-filter-label {
    font-weight: 700;
}

.dir-filter-reset {
    width: 100%;
    margin-top: 1rem;
    padding: 0.55rem 0.85rem;
    background: transparent;
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.dir-filter-reset:hover {
    color: var(--ink);
    border-color: var(--ink-2);
}

.directory-result-meta {
    margin-bottom: 1rem;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--gap-grid);
}

.dir-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    color: var(--ink);
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.dir-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

body.theme-dark .dir-card {
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.dir-card-art {
    position: relative;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, var(--brand-soft), var(--surface-2));
    display: grid;
    place-items: center;
    overflow: hidden;
}

.dir-card-img,
video.dir-card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.dir-card-monogram {
    font-family: "VT323", "Tomorrow", monospace;
    font-size: 4.5rem;
    line-height: 1;
    color: rgba(48, 76, 130, 0.32);
    text-shadow: 0 3px 0 rgba(255, 255, 255, 0.45);
}

body.theme-dark .dir-card-monogram {
    color: rgba(255, 255, 255, 0.20);
    text-shadow: 0 3px 0 rgba(0, 0, 0, 0.40);
}

.dir-card-pill {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dir-card-body {
    padding: 1rem 1.1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.dir-card-eyebrow {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.dir-card-name {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ink);
    line-height: 1.2;
}

.dir-card-stats {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.4rem;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    color: var(--muted);
    letter-spacing: 0.04em;
}

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

.dir-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1.4fr) auto auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 0.85rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    color: var(--ink);
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: transform 140ms ease;
}

.dir-row:hover {
    transform: translateY(-1px);
}

body.theme-dark .dir-row {
    backdrop-filter: blur(12px) saturate(140%);
}

.dir-row-art {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line-soft);
}

.dir-row-art img,
.dir-row-art video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dir-row-art span {
    font-family: "VT323", monospace;
    font-size: 1.6rem;
    color: rgba(48, 76, 130, 0.45);
}

body.theme-dark .dir-row-art span {
    color: rgba(255, 255, 255, 0.30);
}

.dir-row-eyebrow {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.dir-row-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
}

.dir-row-stat {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}
.dir-row-pill {
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    color: var(--ink-2);
}

.dir-empty {
    grid-column: 1 / -1;
    padding: 2rem;
    text-align: center;
    color: var(--muted);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
}

@media (max-width: 700px) {
    .dir-row {
        grid-template-columns: 56px minmax(0, 1fr);
    }
    .dir-row .dir-row-stat,
    .dir-row .dir-row-pill {
        display: none;
    }
}

/* === HANDOFF §6 — Asset / edition detail leaf page === */

.asset-hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 900px) {
    .asset-hero {
        grid-template-columns: 1fr;
    }
}

.asset-art-card {
    padding: 0;
    overflow: hidden;
}

.asset-art-frame {
    position: relative;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, var(--brand-soft), var(--surface-2));
    display: grid;
    place-items: center;
    overflow: hidden;
}

.asset-art-img {
    width: 100%;
    height: 100%;
    /* Focused view: show the WHOLE piece (contain), not a cropped fill (cover) —
       non-square art / video would otherwise get cut off by the 1:1 frame. */
    object-fit: contain;
    display: block;
}

/* Clickable focused artwork -> opens the lightbox. Fills the frame; the media
   inside keeps its own object-fit. */
.asset-art-trigger {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.asset-art-expand {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    font-size: 1.05rem;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.asset-art-frame:hover .asset-art-expand,
.asset-art-trigger:focus-visible .asset-art-expand {
    opacity: 1;
}

.asset-art-monogram {
    font-family: "VT323", "Tomorrow", monospace;
    font-size: 8rem;
    line-height: 1;
    color: rgba(48, 76, 130, 0.32);
    text-shadow: 0 6px 0 rgba(255, 255, 255, 0.40);
}

body.theme-dark .asset-art-monogram {
    color: rgba(255, 255, 255, 0.18);
    text-shadow: 0 6px 0 rgba(0, 0, 0, 0.40);
}

.asset-art-pills {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: flex;
    gap: 0.4rem;
}

.asset-art-status {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}

.asset-art-pill {
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.62);
    color: #ffffff;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.asset-art-pill.rarity-pill {
    background: var(--accent-2, var(--accent));
    color: var(--ink);
}

body.theme-dark .asset-art-pill.rarity-pill {
    color: #03110b;
}

/* Canonical rarity indicator — colored dot on any element with `data-rarity="<tier>"`.
   Maps tier name (lowercased) to the matching --rarity-* token. */
[data-rarity] { --rarity-color: var(--rarity-unknown); }
[data-rarity="common"],
[data-rarity="core"]      { --rarity-color: var(--rarity-common); }
[data-rarity="uncommon"]  { --rarity-color: var(--rarity-uncommon); }
[data-rarity="rare"]      { --rarity-color: var(--rarity-rare); }
[data-rarity="epic"]      { --rarity-color: var(--rarity-epic); }
[data-rarity="legendary"] { --rarity-color: var(--rarity-legendary); }
/* Tiers outside the classic ladder: MLB special-moment inserts ("UNIQUE",
   ed. 30-40) and 1-of-1 unique-items collections both theme as `unique`.
   `insert` is the same idea under the name the 2026 Gold Series ships
   (Rarity: INSERT — Pixicons / Momenticons), so it shares the theme. */
[data-rarity="unique"],
[data-rarity="insert"]    { --rarity-color: var(--rarity-unique-item); }

/* Slab components carry data-rarity for theming but render their own chrome —
   the dot would float as a stray mark above the case label. The slab stage
   also carries data-rarity (for the rarity glow / tinted backdrop). */
[data-rarity]:not(.comic-slab):not(.slab-stage)::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 0.45em;
    vertical-align: 0.08em;
    background: var(--rarity-color);
    flex-shrink: 0;
}

.asset-art-pill.status-active {
    background: var(--pos);
    color: #ffffff;
}

.asset-art-pill.status-burned {
    background: var(--neg);
    color: #ffffff;
}

.asset-summary-card {
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.asset-serial-display {
    margin: 0;
    font-size: clamp(2.5rem, 5vw, 3.6rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.asset-pill-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.asset-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    margin-top: 0.4rem;
}

@media (max-width: 540px) {
    .asset-stat-grid {
        grid-template-columns: 1fr;
    }
}

.asset-stat-tile {
    padding: 0.85rem 0.95rem;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.asset-stat-mono {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 1rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    word-break: break-all;
}

.asset-stat-meta {
    color: var(--muted);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}

.asset-action-row {
    margin-top: auto;
}

.asset-detail-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 900px) {
    .asset-detail-grid {
        grid-template-columns: 1fr;
    }
}

.asset-trait-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
    margin-top: 0.85rem;
}

@media (max-width: 600px) {
    .asset-trait-grid {
        grid-template-columns: 1fr;
    }
}

.asset-trait-tile {
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}

.asset-trait-name {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.asset-trait-value {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
}

.asset-trait-meter {
    margin-top: 0.55rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.asset-trait-meter-track {
    position: relative;
    flex: 1;
    height: 4px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    overflow: hidden;
}

.asset-trait-meter-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--brand-navy), #4a6db0);
    border-radius: 999px;
}

body.theme-dark .asset-trait-meter-fill {
    background: linear-gradient(90deg, var(--accent), var(--accent-5));
}

.asset-trait-meter-stat {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.68rem;
    color: var(--muted);
    min-width: 70px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.asset-history-list {
    list-style: none;
    margin: 0.85rem 0 0;
    padding: 0;
}

.asset-history-row {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--line-soft);
}

.asset-history-row:first-child {
    border-top: none;
}

.asset-history-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--line);
    margin-top: 0.35rem;
    justify-self: center;
}

.asset-history-dot.is-current {
    background: var(--pos);
    box-shadow: 0 0 0 4px rgba(31, 157, 85, 0.12);
}

body.theme-dark .asset-history-dot.is-current {
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(76, 255, 186, 0.18);
}

.asset-history-dot.is-burned {
    background: var(--neg);
    box-shadow: 0 0 0 4px rgba(216, 56, 56, 0.10);
}

.asset-history-head {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.asset-history-when {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    color: var(--muted);
}

.asset-history-detail {
    margin: 0.15rem 0 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.asset-history-note {
    margin-top: 1rem;
    font-size: 0.78rem;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    letter-spacing: 0.04em;
}

/* .asset-sibling* rules removed 2026-08-07 (Phase 3b) along with the sibling
   strip on the asset detail page — see PERFORMANCE_OPTIMIZATION_PLAN.md §3b. */

/* === HANDOFF §7 — Timeline / drop calendar agenda === */

.timeline-page-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: end;
    padding: 2rem 0 1rem;
}

@media (max-width: 700px) {
    .timeline-page-header {
        grid-template-columns: 1fr;
    }
}

.timeline-page-header h1 {
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 0.4rem 0 0.6rem;
}

.timeline-filter-strip {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0 0 1.25rem;
}

.dc3-pill-btn {
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease;
}

.dc3-pill-btn:hover {
    border-color: var(--ink-2);
}

.dc3-pill-btn.is-active {
    background: var(--brand-navy);
    color: #ffffff;
    border-color: var(--brand-navy);
}

body.theme-dark .dc3-pill-btn.is-active {
    background: linear-gradient(120deg, #4cffba, #29e2a0);
    color: #03110b;
    border-color: transparent;
}

.timeline-agenda {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2rem;
}

.timeline-month-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.timeline-month-head {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1.5px solid var(--line);
}

.timeline-month-head h2 {
    margin: 0;
    font-size: 1.6rem;
    letter-spacing: -0.01em;
}

.timeline-month-count {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.10em;
    color: var(--muted);
    text-transform: uppercase;
}

.timeline-row-stack {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.timeline-agenda-row {
    display: grid;
    grid-template-columns: 110px 88px minmax(0, 1fr) auto;
    gap: 0;
    align-items: stretch;
    padding: 0;
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

body.theme-dark .timeline-agenda-row {
    border: 1px solid var(--line);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.timeline-agenda-row > .timeline-agenda-date {
    padding: 1rem 0.9rem;
    border-right: 1.5px solid var(--line-soft);
    display: grid;
    place-content: center;
    text-align: center;
}

.timeline-agenda-art {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    min-height: 88px;
}

.timeline-agenda-monogram {
    font-family: "VT323", "Tomorrow", monospace;
    font-size: 2.4rem;
    line-height: 1;
    color: rgba(0, 0, 0, 0.30);
    text-shadow: 0 3px 0 rgba(255, 255, 255, 0.20);
}

.timeline-agenda-row > .timeline-agenda-body {
    padding: 1rem 1.1rem;
}

.timeline-agenda-row > .timeline-agenda-action {
    padding: 0.85rem 1rem;
    align-self: center;
}

@media (max-width: 700px) {
    .timeline-agenda-row {
        grid-template-columns: 80px 60px minmax(0, 1fr);
    }
    .timeline-agenda-action {
        grid-column: 1 / -1;
        border-top: 1.5px solid var(--line-soft);
    }
    .timeline-agenda-art {
        min-height: 60px;
    }
    .timeline-agenda-monogram {
        font-size: 1.6rem;
    }
}

.timeline-agenda-date {
    text-align: center;
    padding-right: 1rem;
    border-right: 1px solid var(--line-soft);
}

.timeline-agenda-day {
    font-family: "Raleway", sans-serif;
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

body.theme-dark .timeline-agenda-day {
    font-family: "Tomorrow", sans-serif;
}

.timeline-agenda-month-mono {
    margin-top: 0.25rem;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    color: var(--muted);
}

.timeline-agenda-year {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-top: 0.15rem;
}

.timeline-agenda-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.timeline-agenda-meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.timeline-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    color: var(--ink-2);
    text-transform: uppercase;
}

.timeline-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--dot-color, var(--ink-2));
}

.timeline-agenda-title {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.4;
}

.timeline-agenda-title a {
    color: var(--ink);
    border-bottom: 1px dashed var(--line);
    transition: color 140ms ease, border-color 140ms ease;
}

.timeline-agenda-title a:hover {
    color: var(--brand-navy);
    border-bottom-color: currentColor;
}

body.theme-dark .timeline-agenda-title a:hover {
    color: var(--accent);
}

.timeline-agenda-action {
    display: flex;
    gap: 0.4rem;
}

/* === HANDOFF §8 — Modal shell + ⌘K, Connect Wallet, Redeem Confirm === */

body.has-modal-open {
    overflow: hidden;
}

.dc3-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 4vh 1rem;
}

.dc3-modal[hidden] {
    display: none !important;
}

.dc3-modal-scrim {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(48, 76, 130, 0.04), rgba(48, 76, 130, 0.55) 70%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
}

body.theme-dark .dc3-modal-scrim {
    background: radial-gradient(ellipse at 50% 30%, rgba(76, 255, 186, 0.06), rgba(0, 0, 0, 0.78) 70%);
}

.dc3-modal-card {
    position: relative;
    z-index: 1;
    width: min(92vw, 640px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    color: var(--ink);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.theme-dark .dc3-modal-card {
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
}

.dc3-modal-close {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: var(--ink-2);
    cursor: pointer;
}

.dc3-modal-close:hover {
    color: var(--ink);
    border-color: var(--ink-2);
}

/* ⌘K command search */

.cmdk-card {
    width: min(92vw, 640px);
}

.cmdk-search-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.95rem 1.1rem;
    border-bottom: 1.5px solid var(--line);
}

.cmdk-search-row > .fa-magnifying-glass {
    color: var(--muted);
}

.cmdk-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink);
}

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

.cmdk-kbd,
.cmdk-row-hint {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    padding: 0.1rem 0.42rem;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: 4px;
    color: var(--ink-2);
}

.cmdk-results {
    overflow-y: auto;
    padding: 0.6rem;
}

.cmdk-section-eyebrow {
    margin: 0.35rem 0.6rem 0.4rem;
}

.cmdk-list {
    list-style: none;
    margin: 0 0 0.4rem;
    padding: 0;
}

.cmdk-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid transparent;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
}

.cmdk-row:hover {
    background: var(--surface-2);
    border-color: var(--line);
}

.cmdk-row-glyph {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-xs);
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    font-size: 0.85rem;
}

.cmdk-row-monogram {
    font-family: "VT323", monospace;
    font-size: 0.95rem;
    color: var(--ink-2);
    letter-spacing: 0.04em;
}

.cmdk-row-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}

.cmdk-row-meta {
    margin-left: 0.4rem;
    color: var(--muted);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.7rem;
}

.cmdk-empty {
    padding: 0.85rem;
    text-align: center;
    color: var(--muted);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.78rem;
}

.cmdk-footer {
    display: flex;
    gap: 1.1rem;
    padding: 0.7rem 1.1rem;
    border-top: 1px solid var(--line-soft);
    color: var(--muted);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
}

/* Connect wallet modal */

.cwm-card {
    width: min(92vw, 480px);
    padding: 1.5rem;
    gap: 0.85rem;
    overflow: visible;
}

.cwm-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.cwm-disclaimer {
    margin: 0.5rem 0 0;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

.cwm-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.cwm-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.85rem 1rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background-color 140ms ease, border-color 140ms ease;
}

.cwm-row:hover {
    border-color: var(--ink-2);
}

.cwm-row.is-primary {
    background: var(--brand-navy);
    color: #ffffff;
    border-color: transparent;
}

body.theme-dark .cwm-row.is-primary {
    background: linear-gradient(120deg, #4cffba, #29e2a0);
    color: #03110b;
}

.cwm-row-glyph {
    font-size: 1.4rem;
    text-align: center;
}

.cwm-row-text {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.cwm-row-text strong {
    font-size: 0.95rem;
    font-weight: 700;
}

.cwm-row-text span {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.10em;
    opacity: 0.8;
}

.cwm-row-arrow {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.95rem;
}

.cwm-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.85rem;
    margin-top: 0.85rem;
    border-top: 1px solid var(--line-soft);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    color: var(--muted);
    letter-spacing: 0.06em;
}

.cwm-link {
    color: var(--brand-navy);
}

body.theme-dark .cwm-link {
    color: var(--accent);
}

/* Redeem confirm modal */

.rcm-card {
    width: min(92vw, 540px);
    overflow: visible;
}

.rcm-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--line-soft);
}

.rcm-eyebrow {
    color: var(--neg);
}

.rcm-body {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.rcm-summary {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 0.85rem;
    align-items: center;
}

.rcm-thumb {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--brand-soft), var(--surface-2));
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    font-family: "VT323", monospace;
    font-size: 2rem;
    color: rgba(48, 76, 130, 0.45);
}

body.theme-dark .rcm-thumb {
    color: rgba(255, 255, 255, 0.3);
}

.rcm-collection {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.10em;
    color: var(--muted);
    text-transform: uppercase;
}

.rcm-edition {
    display: block;
    margin-top: 0.15rem;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.rcm-pills {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.rcm-receipt {
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.rcm-receipt-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.85rem;
}

.rcm-receipt-label {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--muted);
}

.rcm-warning {
    padding: 0.7rem 0.9rem;
    border: 1.5px solid var(--neg);
    background: rgba(216, 56, 56, 0.06);
    color: var(--neg);
    border-radius: var(--radius-sm);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.78rem;
    line-height: 1.5;
}

body.theme-dark .rcm-warning {
    background: rgba(255, 93, 108, 0.10);
}

.rcm-confirm-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
}

.rcm-actions {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 0.6rem;
    margin-top: 0.4rem;
}

.dc3-btn.rcm-burn {
    background: var(--neg);
    color: #ffffff;
    border-color: transparent;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.82rem 1.2rem;
}

.dc3-btn.rcm-burn:hover {
    background: #b62a2a;
    transform: translateY(-1px);
}

body.theme-dark .dc3-btn.rcm-burn:hover {
    background: #ff7785;
}

.kpi-card {
    padding: 1.1rem 1.2rem;
}

.kpi-card strong {
    display: block;
    margin-top: 0.35rem;
    color: var(--ink);
    font-family: "Raleway", "Manrope", sans-serif;
    font-size: 1.45rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

body.theme-dark .kpi-card strong {
    font-family: "Tomorrow", "Space Grotesk", sans-serif;
}

.content-stack {
    display: grid;
    gap: 1.25rem;
}
body.theme-dark .mockup-switcher-link {
    background: rgba(255, 255, 255, 0.04);
    color: #d7efff;
}

body.theme-dark .mockup-switcher-link.is-active {
    background: rgba(86, 247, 207, 0.18);
    color: #eafff8;
}
.compact-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
body.theme-dark .mockup-owner-card strong,
body.theme-dark .mockup-dense-section h3,
body.theme-dark .mockup-data-chip {
    color: #eafff8;
}

body.theme-dark .mockup-data-chip {
    background: rgba(86, 247, 207, 0.12);
}

.user-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
body.theme-dark .highlight-card {
    background:
        radial-gradient(circle at top left, rgba(255, 159, 67, 0.14), transparent 38%),
        linear-gradient(180deg, rgba(16, 39, 63, 0.93), rgba(11, 29, 46, 0.9));
}

.section-head {
    margin-bottom: 1rem;
}
.short {
    max-width: none;
}
.rarity-focus {
    padding: 1.5rem;
}

.rarity-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.rarity-item {
    padding: 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(248, 251, 255, 0.94);
}

body.theme-dark .rarity-item {
    background: rgba(8, 33, 53, 0.9);
}

.rarity-item h3 {
    margin: 0 0 0.75rem;
    color: var(--brand-dark);
    line-height: 1.25;
}

.dev-toggle-row {
    justify-content: space-between;
}

.dev-toggle-row h1 {
    margin-bottom: 0;
}

.json-panel {
    margin-top: 1.25rem;
}

.code-block {
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
    border-radius: var(--radius-md);
    background: #1f2a44;
    color: #eef3fb;
    font-size: 0.88rem;
    line-height: 1.6;
}

.top-grid {
    margin-bottom: 1.25rem;
}
.hero-preview,
.media-placeholder {
    width: 100%;
    min-height: 240px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
}

.hero-preview {
    object-fit: cover;
}

.redeem-preview-image {
    max-width: 320px;
    min-height: 0;
    max-height: 320px;
    margin: 0 auto;
    display: block;
}

.media-placeholder {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(48, 76, 130, 0.94), rgba(36, 59, 102, 0.94));
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.video-mode {
    background: linear-gradient(135deg, rgba(48, 76, 130, 0.94), rgba(249, 104, 84, 0.92));
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.8rem;
}

.stat-box {
    padding: 0.95rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}

body.theme-dark .stat-box {
    background: rgba(255, 255, 255, 0.04);
}

.stat-box strong {
    display: block;
    margin-top: 0.25rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.rarity-scroll {
    overflow-x: auto;
}

.rarity-table-v2 {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
}

.rarity-table-v2 th,
.rarity-table-v2 td {
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.rarity-table-v2 th {
    color: var(--brand-dark);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.table-primary-cell {
    display: grid;
    gap: 0.2rem;
}

.table-primary-cell strong {
    color: var(--ink);
}

.table-primary-cell span {
    color: var(--muted);
    font-size: 0.8rem;
}

.bullet-list {
    margin: 0;
    padding-left: 1.2rem;
    line-height: 1.7;
}

.asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}

.asset-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.asset-preview {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: rgba(232, 238, 248, 0.45);
}

/* Metadata scroller on browse cards.
   Traits were an unbounded pill row, so a 17-trait asset ran several times taller
   than a 3-trait one and the grid never lined up. Capping the height here makes
   every card the same shape while keeping all of it reachable. The card's own
   description was removed outright — it was the collection's, identical on every
   card, and the page states it once already. */
.asset-card-meta {
    max-height: 9rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-right: 0.25rem;
}

/* Still used by the server-rendered fallback browser
   (components/collection_asset_browser.html), which runs for any collection with
   no published browse.json. The client-side card dropped its description. */
.asset-card-desc {
    max-height: 4.4em;
    overflow-y: auto;
    margin: 0 0 0.2rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--muted, var(--ink));
    opacity: 0.85;
    overscroll-behavior: contain;
}

.asset-meta-list {
    gap: 0.7rem;
}

.asset-action-row {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Off-site destinations, always visible.
   These were briefly a "⋯" popover, which read as hiding them — and a wide screen
   does not help, because .asset-grid is auto-fit/minmax: extra width becomes more
   columns, not wider cards, so a card is ~220-280px at any viewport. Four full
   buttons will not fit there; a wrapped row of compact links shows every option
   for about one extra line of height. */
.asset-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.45rem;
    margin-top: 0.5rem;
}
.asset-link-item {
    padding: 0.22rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.74rem;
    text-decoration: none;
    color: var(--muted, inherit);
    white-space: nowrap;
    transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}
.asset-link-item::after {
    /* Marks these as leaving the site, which the primary button does not. */
    content: " \2197";
    font-size: 0.65em;
    opacity: 0.7;
}
.asset-link-item:hover,
.asset-link-item:focus-visible {
    border-color: #5dd1ff;
    color: var(--text);
    background: rgba(93, 209, 255, 0.1);
}

.value-break {
    overflow-wrap: anywhere;
}

.edition-legend {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.group-browser-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

.group-browser-card {
    padding: 1.2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(248, 251, 255, 0.95);
}

body.theme-dark .group-browser-card {
    background: rgba(10, 30, 48, 0.9);
}

.group-browser-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.group-browser-head h3 {
    margin: 0;
    color: var(--brand-dark);
}

.compact-stats {
    margin-bottom: 0.9rem;
}

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

.edition-controls {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}
.edition-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 0.55rem;
}

.edition-slot {
    display: grid;
    gap: 0.2rem;
    padding: 0.65rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    text-align: center;
    min-height: 76px;
    align-content: center;
}

.edition-slot strong {
    color: var(--brand-dark);
    font-size: 0.95rem;
}

.edition-slot span {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.edition-slot.is-active {
    background: rgba(58, 176, 119, 0.2);
    border-color: rgba(84, 198, 139, 0.5);
}

.edition-slot.is-burned {
    background: rgba(255, 127, 42, 0.2);
    border-color: rgba(255, 168, 94, 0.5);
}

.edition-slot.is-missing {
    background: rgba(95, 107, 122, 0.08);
    border-style: dashed;
}

.edition-slot:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(48, 76, 130, 0.08);
}

.control-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.9rem;
    margin-top: 1rem;
}

.control-grid label {
    display: grid;
    gap: 0.45rem;
}

.control-grid select {
    width: 100%;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--ink);
}

body.theme-dark .control-grid select {
    background: rgba(11, 32, 52, 0.95);
}

.control-actions {
    align-self: end;
}

.pagination-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.top-pagination {
    margin-top: 1rem;
}

.pagination-footer {
    margin-top: 1.25rem;
}

.owner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.owner-card {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(248, 251, 255, 0.95);
}

.top-owners-compact {
    padding-top: 1.15rem;
}

.owners-compact-table {
    min-width: 640px;
}

.edition-viewer-table {
    min-width: 900px;
}

.collection-edition-grid {
    grid-template-columns: 1fr;
}

body.theme-dark .owner-card {
    background: rgba(9, 31, 50, 0.9);
}

.reveal-up {
    opacity: 0;
    transform: translateY(20px);
    animation: reveal-up 520ms ease forwards;
}

.reveal-up.delay-1 { animation-delay: 90ms; }
.reveal-up.delay-2 { animation-delay: 180ms; }
.reveal-up.delay-3 { animation-delay: 270ms; }

@keyframes reveal-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.owner-card h3 {
    margin: 0 0 0.75rem;
    color: var(--brand-dark);
}

.wallet-nav-panel {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.wallet-nav-address,
.wallet-nav-connect,
.wallet-nav-disconnect {
    white-space: nowrap;
    font-size: 0.72rem;
    padding: 0.36rem 0.62rem;
}

.wallet-nav-error {
    display: block;
    margin: 0;
    color: #c5532d;
    font-size: 0.8rem;
}

.wallet-connect-error-toast {
    display: block;
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.75rem;
    color: #c5532d;
    background: rgba(197, 83, 45, 0.08);
    border: 1px solid rgba(197, 83, 45, 0.25);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.wallet-mobile-chooser {
    display: block;
    margin: 0.75rem 0 0;
    padding: 0.9rem 1rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.wallet-mobile-chooser-copy {
    margin: 0 0 0.65rem;
    font-size: 0.9rem;
    color: var(--ink);
}

.wallet-mobile-chooser-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.wallet-mobile-chooser-actions .dc3-btn {
    width: 100%;
    justify-content: center;
}

.wallet-deeplink-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 0.85rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.wallet-deeplink-banner.is-success {
    background: #1f8a4c;
}

.wallet-deeplink-banner.is-error {
    background: #c5532d;
}

.wallet-page {
    display: grid;
    gap: 1rem;
}

.wallet-address-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0;
    color: var(--muted);
}

.wallet-address-code {
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-dark);
}

.wallet-assets-section {
    display: grid;
    gap: 1rem;
}

.wallet-summary-strip {
    display: grid;
    gap: 0.9rem;
}

.wallet-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.8rem;
}

.wallet-summary-card,
.wallet-assets-toolbar,
.wallet-asset-card,
.wallet-connect-prompt {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow);
}

body.theme-dark .wallet-summary-card,
body.theme-dark .wallet-assets-toolbar,
body.theme-dark .wallet-asset-card,
body.theme-dark .wallet-connect-prompt {
    background: rgba(10, 28, 46, 0.92);
}

.wallet-summary-card {
    padding: 0.95rem 1rem;
}

.wallet-summary-label,
.wallet-summary-detail,
.wallet-rarity-heading,
.wallet-summary-muted,
.wallet-asset-collection,
.wallet-asset-description,
.wallet-asset-count,
.wallet-loading-msg,
.wallet-empty-msg,
.wallet-error-msg,
.wallet-error-message,
.wallet-no-wallet-hint {
    margin: 0;
    color: var(--muted);
}

.wallet-summary-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ── Collection thumbnail grid ─────────────────────────────── */
.collection-thumb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}

.collection-thumb-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--panel);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.collection-thumb-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.collection-thumb-card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--accent);
}

.collection-thumb-media {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(48, 76, 130, 0.18), rgba(36, 59, 102, 0.22));
}

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

.collection-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: rgba(48, 76, 130, 0.55);
    background: linear-gradient(135deg, rgba(48, 76, 130, 0.1), rgba(86, 247, 207, 0.08));
}

body.theme-dark .collection-thumb-placeholder {
    color: rgba(86, 247, 207, 0.45);
    background: linear-gradient(135deg, rgba(48, 76, 130, 0.28), rgba(86, 247, 207, 0.06));
}

.collection-thumb-body {
    padding: 0.65rem 0.75rem 0.75rem;
    display: grid;
    gap: 0.15rem;
}

.collection-thumb-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.collection-thumb-brand {
    font-size: 0.74rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 560px) {
    .collection-thumb-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 0.75rem;
    }
}

.wallet-summary-value {
    margin: 0.3rem 0 0.15rem;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--brand-dark);
}

.wallet-summary-detail {
    font-size: 0.82rem;
}

.wallet-rarity-summary {
    display: grid;
    gap: 0.55rem;
}

.wallet-rarity-heading {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.wallet-rarity-chip-row,
.wallet-asset-meta-row,
.wallet-asset-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.wallet-rarity-chip,
.wallet-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 0.75rem;
    font-weight: 700;
}

.wallet-meta-pill-accent {
    background: rgba(247, 140, 54, 0.14);
    color: var(--accent-dark);
}

.wallet-assets-toolbar {
    display: grid;
    gap: 0.8rem;
    padding: 0.95rem 1rem;
}

.wallet-filter-row {
    display: grid;
    gap: 0.65rem;
}

.wallet-filter-row-primary {
    grid-template-columns: minmax(280px, 2.2fr) minmax(160px, 1fr) minmax(180px, 1.2fr);
}

.wallet-filter-row-secondary {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    align-items: center;
}

.wallet-search-input,
.wallet-select-input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--ink);
    padding: 0.82rem 0.9rem;
    font: inherit;
}

body.theme-dark .wallet-search-input,
body.theme-dark .wallet-select-input {
    background: rgba(11, 32, 52, 0.95);
    color: var(--ink);
}

.wallet-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 46px;
    padding: 0 0.2rem;
    color: var(--ink);
    font-weight: 700;
}

.wallet-asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.85rem;
}

.wallet-asset-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 0.9rem;
    padding: 0.8rem;
    align-items: start;
}

.wallet-asset-img-wrap {
    width: 96px;
    height: 96px;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(48, 76, 130, 0.08);
    display: grid;
    place-items: center;
}

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

.wallet-asset-img-placeholder {
    padding: 0.6rem;
    text-align: center;
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.35;
}

.wallet-asset-info {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
}

.wallet-asset-topline {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 0.75rem;
}

.wallet-asset-name {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--ink);
}

.wallet-asset-mint {
    white-space: nowrap;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: rgba(48, 76, 130, 0.08);
    color: var(--muted);
    font-size: 0.73rem;
}

.wallet-asset-collection {
    font-size: 0.82rem;
}

.wallet-asset-collection-empty {
    opacity: 0.7;
}

.wallet-dc3-block {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.wallet-dc3-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    background: rgba(48, 76, 130, 0.12);
    color: var(--brand-dark);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wallet-dc3-badge.is-muted {
    color: var(--muted);
    background: rgba(95, 107, 122, 0.12);
}

.wallet-dc3-link,
.wallet-inline-link {
    color: var(--brand-dark);
    font-size: 0.82rem;
    font-weight: 700;
}

.wallet-asset-description {
    font-size: 0.82rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wallet-pagination,
.wallet-disconnect-row {
    display: flex;
    justify-content: center;
}

.wallet-connect-prompt {
    padding: 1.2rem;
    display: grid;
    gap: 0.75rem;
}

.wallet-connect-lead {
    margin: 0;
    color: var(--ink);
    font-weight: 600;
}

.wallet-error-message,
.wallet-error-msg {
    color: #c5532d;
}

@media (max-width: 720px) {
    .nav-shell {
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35rem;
    }

    .brand-mark {
        width: 30px;
        height: 30px;
    }

    .brand-wordmark {
        font-size: 0.98rem;
    }

    .brand-preview-card {
        border-radius: 24px;
    }

    .brand-preview-wordmark {
        width: min(70vw, 300px);
    }

    .brand-preview-inline {
        gap: 0.75rem;
    }

    .brand-preview-inline-wordmark {
        font-size: clamp(1.5rem, 9vw, 2.6rem);
    }

    .brand-preview-copy h1 {
        font-size: clamp(2.4rem, 14vw, 4rem);
    }

    .wallet-nav-panel {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .header-actions {
        margin-left: auto;
        flex-wrap: nowrap;
        gap: 0.35rem;
    }

    .user-menu {
        flex-wrap: nowrap;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .nav-links {
        display: none;
        flex: 0 0 100%;
        order: 10;
        flex-direction: column;
        justify-content: flex-start;
        white-space: normal;
        gap: 0;
        padding: 0.35rem 0;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        margin-top: 0.1rem;
    }

    .nav-shell.is-menu-open .nav-links {
        display: flex;
    }

    .nav-links > a {
        display: flex;
        align-items: center;
        padding: 0.6rem 0.1rem;
        font-size: 0.82rem;
    }

    .user-menu-panel {
        right: 0;
        left: auto;
        width: min(100vw - 1rem, 320px);
    }

    .user-menu-toggle {
        width: auto;
    }

    .nav-dropdown {
        width: 100%;
    }

    .nav-dropdown > summary {
        width: 100%;
        justify-content: space-between;
        padding: 0.6rem 0.1rem;
    }

    .nav-dropdown-panel,
    .nav-dropdown-panel-wide {
        position: static;
        width: 100%;
        min-width: 0;
        margin-top: 0.45rem;
    }

    .nav-dropdown-grid,
    .timeline-list-grid {
        grid-template-columns: 1fr;
    }

    .page-layout-shell,
    .page-layout-shell.has-left-rail,
    .page-layout-shell.has-right-rail,
    .page-layout-shell.has-left-rail.has-right-rail {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-rail {
        display: none;
    }

    .page-shell {
        padding-top: 2rem;
    }

    .featured-slide,
    .footer-shell,
    .footer-columns {
        grid-template-columns: 1fr;
    }

    .timeline-controls-row,
    .timeline-calendar-header,
    .timeline-day-row {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }

    .timeline-select-field {
        min-width: 0;
    }

    .timeline-jump-card {
        position: static;
    }

    .timeline-calendar-day {
        min-height: 100px;
    }

    .timeline-calendar-event {
        font-size: 0.62rem;
    }

    .user-hero,
    .kpi-strip {
        grid-template-columns: 1fr;
    }

    .pagination-row {
        align-items: flex-start;
    }

    .compact-hero,
    .stat-card-grid {
        grid-template-columns: 1fr;
    }

    .redeem-overview-grid {
        grid-template-columns: 1fr;
    }

    .mockup-compact-layout,
    .mockup-hybrid-hero,
    .mockup-dense-grid {
        grid-template-columns: 1fr;
    }

    .wallet-filter-row-primary,
    .wallet-filter-row-secondary,
    .wallet-asset-grid {
        grid-template-columns: 1fr;
    }

    .wallet-asset-card {
        grid-template-columns: 80px minmax(0, 1fr);
    }

    .wallet-asset-img-wrap {
        width: 80px;
        height: 80px;
    }

    .detail-hero-compact {
        grid-template-columns: 1fr;
    }

    .detail-hero-compact .hero-preview,
    .detail-hero-compact .media-placeholder {
        max-height: 260px;
    }
}

@media (max-width: 500px) {
    .stat-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .shell,
    .site-layout-shell {
        width: calc(100% - 1.25rem);
    }

    .page-shell {
        padding-top: 1.5rem;
    }

    .card {
        padding: 1.1rem;
    }
}

/* Terminal mode: denser, data-first layout for overview/internal surfaces. */
body.page-mode-terminal .page-shell {
    padding-top: 2.2rem;
}

body.page-mode-terminal h1 {
    font-size: clamp(1.9rem, 3.8vw, 2.8rem);
    max-width: none;
}

body.page-mode-terminal h2 {
    font-size: 1.22rem;
}

body.page-mode-terminal .lede,
body.page-mode-terminal .detail-copy {
    font-size: 0.96rem;
    line-height: 1.65;
}

body.page-mode-terminal .card,
body.page-mode-terminal .featured-card {
    border-radius: 14px;
    padding: 1.1rem;
    box-shadow: 0 12px 28px rgba(1, 11, 21, 0.36);
}

body.page-mode-terminal .content-stack {
    gap: 0.95rem;
}

body.page-mode-terminal .internal-grid {
    gap: 0.9rem;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

body.page-mode-terminal .internal-summary-grid {
    gap: 0.75rem;
}

body.page-mode-terminal .internal-summary-card,
body.page-mode-terminal .info-card,
body.page-mode-terminal .hero-card {
    padding: 0.95rem;
    border-radius: 12px;
}

body.page-mode-terminal .internal-summary-value {
    font-size: 1.35rem;
}

body.page-mode-terminal .meta-pill,
body.page-mode-terminal .refresh-indicator {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.page-mode-terminal .button {
    padding: 0.58rem 0.9rem;
    font-size: 0.82rem;
}

body.page-mode-terminal .definition-list dt {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
}

body.page-mode-terminal .definition-list dd {
    font-size: 0.9rem;
}

body.page-mode-terminal .overview-controls {
    gap: 0.75rem;
    padding: 0.72rem 0.95rem;
}

body.page-mode-terminal .overview-search {
    min-width: 200px;
    padding: 0.34rem 0.62rem;
    border-radius: 8px;
    font-size: 0.84rem;
}

body.page-mode-terminal .overview-count {
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body.page-mode-terminal .overview-table {
    font-size: 0.82rem;
}

body.page-mode-terminal .overview-table thead th {
    padding: 0.48rem 0.62rem;
    font-size: 0.69rem;
    letter-spacing: 0.1em;
}

body.page-mode-terminal .overview-table tbody td {
    padding: 0.5rem 0.62rem;
}

body.page-mode-terminal .rarity-pill {
    padding: 0.12rem 0.42rem;
    border-radius: 8px;
    font-size: 0.72rem;
}

body.page-mode-terminal .rarity-count {
    font-size: 0.7rem;
}

body.page-mode-terminal .section-head {
    margin-bottom: 0.7rem;
}

body.page-mode-terminal .table-wrap {
    border-radius: 12px;
}

body.page-mode-terminal .table-grid {
    min-width: 720px;
    font-size: 0.82rem;
}

body.page-mode-terminal .table-grid th,
body.page-mode-terminal .table-grid td {
    padding: 0.56rem 0.62rem;
}

body.page-mode-terminal .table-grid thead th {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
}

body.page-mode-terminal .eyebrow,
body.page-mode-terminal .card-label {
    font-size: 0.72rem;
    margin-bottom: 0.42rem;
}

/* === HANDOFF §4 Variant B — TraitCards with distribution bars === */

.trait-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.trait-section-meta {
    margin: 0;
    color: var(--muted);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
}

.trait-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--gap-grid);
    margin-top: 1.25rem;
}

.trait-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: var(--pad-card);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

body.theme-dark .trait-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
}

.trait-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.trait-card-title {
    margin: 0;
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
}

.trait-value-badge {
    flex-shrink: 0;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--ink-2);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body.theme-dark .trait-value-badge {
    background: rgba(76, 255, 186, 0.10);
    color: var(--ink-2);
}

.trait-bar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.trait-bar-row {
    margin: 0;
}

.trait-bar-link {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.32rem 0.4rem;
    border-radius: var(--radius-sm);
    color: var(--ink);
    text-decoration: none;
    transition: background-color 140ms ease;
}

.trait-bar-link:hover {
    background: var(--brand-soft);
}

body.theme-dark .trait-bar-link:hover {
    background: rgba(76, 255, 186, 0.08);
}

.trait-bar-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.88rem;
    font-weight: 600;
}

.trait-bar-track {
    position: relative;
    display: block;
    height: 6px;
    border-radius: 999px;
    background: rgba(48, 76, 130, 0.10);
    overflow: hidden;
}

body.theme-dark .trait-bar-track {
    background: rgba(255, 255, 255, 0.06);
}

.trait-bar-fill {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-navy), #4a6db0);
    transform-origin: left center;
}

body.theme-dark .trait-bar-fill {
    background: linear-gradient(90deg, #4cffba, #5dd1ff);
}

.trait-bar-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    color: var(--ink-2);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.trait-bar-pct {
    color: var(--muted);
    font-size: 0.7rem;
}

.trait-card-more {
    align-self: flex-start;
    color: var(--ink-2);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: border-color 140ms ease, color 140ms ease;
}

.trait-card-more:hover {
    color: var(--ink);
    border-bottom-color: currentColor;
}

body.theme-dark .trait-card-more:hover {
    color: var(--accent);
}

/* Trait browser — List view */

.trait-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1rem;
}

.trait-list-row {
    display: grid;
    grid-template-columns: minmax(160px, 200px) minmax(0, 1fr);
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    align-items: start;
}

@media (max-width: 600px) {
    .trait-list-row {
        grid-template-columns: 1fr;
    }
}

.trait-list-meta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.trait-list-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
}

.trait-list-count {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--muted);
    text-transform: uppercase;
}

.trait-list-values {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.trait-list-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.65rem;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 140ms ease, transform 80ms ease;
}

.trait-list-chip:hover {
    border-color: var(--ink-2);
    transform: translateY(-1px);
}

.trait-list-chip-count {
    color: var(--muted);
    font-size: 0.7rem;
}

.trait-list-more {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    color: var(--muted);
    align-self: center;
    padding: 0.2rem 0.4rem;
    border-bottom: 1px dashed var(--line-soft);
}

.trait-list-more:hover {
    color: var(--ink);
    border-bottom-color: currentColor;
}

/* Trait browser — Stats view */

.trait-stats {
    margin-top: 1rem;
    overflow-x: auto;
}

.trait-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.trait-stats-table thead th {
    padding: 0.55rem 0.75rem;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.10em;
    color: var(--muted);
    text-transform: uppercase;
    font-weight: 700;
    text-align: left;
    border-bottom: 1.5px solid var(--line);
}

.trait-stats-table thead th.num {
    text-align: right;
}

.trait-stats-table tbody td {
    padding: 0.7rem 0.75rem;
    border-bottom: 1.5px solid var(--line-soft);
    font-variant-numeric: tabular-nums;
}

.trait-stats-table tbody td.num {
    text-align: right;
}

.trait-stats-table tbody tr:hover {
    background: var(--surface-2);
}

/* === Canonical .dc3-* utility classes — see DESIGN_SYSTEM.md §2 === */

.dc3-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    background: var(--chip-bg);
    color: var(--chip-ink);
    border: 1px solid var(--line-soft);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}

.dc3-pill.live::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--pos);
    box-shadow: 0 0 0 4px rgba(76, 255, 186, 0.18);
    animation: dc3-pulse 1.6s infinite;
    display: block;
}

/* Reward badge — flags a grouping row/chip that arrived outside the normal pack
   (bonus insert, airdrop, open-edition core drop). Outlined in the reward's color
   so it reads distinctly from base rarity tiers in both themes. */
.cd-reward-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 3px 7px;
    font-size: 9.5px;
    font-weight: 700;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    border-radius: 6px;
    border: 1px solid currentColor;
    background: transparent;
}

.cd-reward-insert { color: var(--reward-insert); }
.cd-reward-airdrop { color: var(--reward-airdrop); }
.cd-reward-coredrop { color: var(--reward-coredrop); }

/* Animated-asset affordances. `asset-art-anim` badges the individual asset page;
   `cd-anim-marker` is a small ▶ overlay on dense thumbnails (focused-animation:
   grids stay static, motion plays on the asset page / lightbox). */
.asset-art-anim {
    background: var(--accent);
    color: #03110b;
    border-color: transparent;
}

.cd-anim-marker {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    padding-left: 1px;
    pointer-events: none;
    z-index: 2;
}

.cd-mini-card,
.cd-rarest-card {
    position: relative;
}

.dc3-pill.dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--dot-color, var(--accent));
    display: block;
}

@keyframes dc3-pulse {
    50% { box-shadow: 0 0 0 6px rgba(76, 255, 186, 0); }
}

.dc3-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--surface-2);
    border: 1.5px solid var(--line);
    border-radius: 8px;
    line-height: 1;
}

body.theme-dark .dc3-tag {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04);
}

.dc3-num {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-feature-settings: "tnum", "ss01";
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.dc3-stat-label {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}

.dc3-stat-value {
    font-family: "Raleway", "Manrope", sans-serif;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

body.theme-dark .dc3-stat-value {
    font-family: "Tomorrow", "Space Grotesk", sans-serif;
}

/* Edition slot — gold active in light, mint glow in dark, striped red burned */
.dc3-slot {
    aspect-ratio: 1 / 1;
    min-width: 0;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-weight: 700;
    font-size: 11px;
    border: 1.5px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    position: relative;
    overflow: hidden;
    text-decoration: none;
    transition: transform 80ms ease;
}

.dc3-slot:hover {
    transform: translateY(-1px);
}

/* Five or more digits (#25375). Applied by the viewer when it builds the label,
   so the step-down is driven by the actual text rather than guessed from the
   collection's size. */
.dc3-slot.is-long {
    font-size: 9.5px;
    letter-spacing: -0.02em;
}

body.theme-dark .dc3-slot {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
}

.dc3-slot.active {
    background: var(--accent-3);
    border-color: var(--ink);
    color: var(--ink);
}

body.theme-dark .dc3-slot.active {
    background: linear-gradient(135deg, rgba(76, 255, 186, 0.32), rgba(76, 255, 186, 0.10));
    border-color: rgba(76, 255, 186, 0.45);
    color: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(76, 255, 186, 0.25);
}

.dc3-slot.burned {
    background: repeating-linear-gradient(45deg, var(--neg) 0 4px, #b32a2a 4px 8px);
    border-color: var(--ink);
    color: #ffffff;
}

body.theme-dark .dc3-slot.burned {
    background: repeating-linear-gradient(45deg, rgba(255, 93, 108, 0.30) 0 6px, rgba(255, 93, 108, 0.10) 6px 12px);
    border-color: rgba(255, 93, 108, 0.30);
    color: var(--neg);
}

.dc3-slot.miss {
    color: var(--muted);
    opacity: 0.55;
}

/* Listed = active, but held in a marketplace escrow while up for sale. Layered
   over .active so it wins on color while keeping the active geometry. */
.dc3-slot.active.listed {
    background: var(--warn);
    border-color: var(--ink);
    color: var(--ink);
}

body.theme-dark .dc3-slot.active.listed {
    background: linear-gradient(135deg, rgba(255, 206, 78, 0.32), rgba(255, 206, 78, 0.10));
    border-color: rgba(255, 206, 78, 0.45);
    color: var(--warn);
    box-shadow: inset 0 0 0 1px rgba(255, 206, 78, 0.25);
}

/* Scanline overlay (dark only — used on hero / asset / timeline art tiles) */
.dc3-scan {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(255, 255, 255, 0.02) 3px 4px);
    mix-blend-mode: overlay;
}

body.theme-light .dc3-scan {
    display: none;
}

/* Glow gradient border (dark only — wraps a card with conic accent border) */
.dc3-glow-border {
    position: relative;
}

.dc3-glow-border::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2), var(--accent-5));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: 0.7;
}

body.theme-light .dc3-glow-border::before {
    display: none;
}

/* Brushstroke underline highlight (used on hero "arcade" word) */
.dc3-brush {
    position: relative;
    display: inline-block;
}

.dc3-brush::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 10px;
    background: var(--accent-3);
    border-radius: 12px;
    transform: skewX(-6deg);
    z-index: -1;
    opacity: 0.85;
}

body.theme-dark .dc3-brush::after {
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    height: 8px;
    bottom: -4px;
    opacity: 0.6;
    filter: blur(0.5px);
}

/* Pixel sparkle glyph (light hero) */
.dc3-sparkle {
    position: absolute;
    pointer-events: none;
    image-rendering: pixelated;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-weight: 700;
    color: var(--accent-3);
    font-size: 14px;
    line-height: 1;
}

body.theme-dark .dc3-sparkle {
    color: var(--accent);
}

/* Header inline search input — opens ⌘K modal on click. */
.header-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    min-width: 240px;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.78);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    text-align: left;
    transition: background-color 140ms ease, border-color 140ms ease;
}

.header-search:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.28);
}

.header-search > .fa-magnifying-glass {
    color: rgba(255, 255, 255, 0.7);
}

.header-search-placeholder {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-search-kbd {
    padding: 0.1rem 0.4rem;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 4px;
    color: #ffffff;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.62rem;
}

body.theme-dark .header-search {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
    color: var(--muted);
}

body.theme-dark .header-search:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.20);
}

body.theme-dark .header-search > .fa-magnifying-glass {
    color: var(--muted);
}

body.theme-dark .header-search-kbd {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--line-soft);
    color: var(--ink-2);
}

@media (max-width: 900px) {
    .header-search {
        min-width: 0;
    }
    .header-search-placeholder {
        display: none;
    }
}

/* Compact sun/moon icon toggle in the header. */
.theme-toggle-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.95rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 140ms ease, border-color 140ms ease, transform 80ms ease;
}

.theme-toggle-icon:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-1px);
}

.theme-toggle-icon:active {
    transform: translateY(0);
}

body.theme-dark .theme-toggle-icon {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
    color: var(--accent-3);
}

body.theme-dark .theme-toggle-icon:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.20);
}

/* Account trigger — sits next to the theme toggle in the navy header. */
.account-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.8rem 0.4rem 0.65rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: #ffffff;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 140ms ease, border-color 140ms ease, transform 80ms ease;
}

.account-trigger:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-1px);
}

.account-trigger.is-signed-in {
    background: var(--accent-3);
    color: #1a2a4d;
    border-color: transparent;
}

.account-trigger.is-signed-in:hover {
    background: #ffe27a;
}

.account-trigger-icon {
    font-size: 0.95rem;
}

.account-trigger-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--pos);
    box-shadow: 0 0 0 3px rgba(31, 157, 85, 0.18);
}

body.theme-dark .account-trigger {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
}

body.theme-dark .account-trigger:hover {
    background: rgba(255, 255, 255, 0.10);
}

body.theme-dark .account-trigger.is-signed-in {
    background: linear-gradient(120deg, #4cffba, #29e2a0);
    color: #001a14;
    box-shadow: 0 0 0 1px rgba(76, 255, 186, 0.40), 0 8px 24px rgba(76, 255, 186, 0.18);
}

@media (max-width: 600px) {
    .account-trigger-label {
        display: none;
    }
    .account-trigger {
        padding: 0.4rem 0.55rem;
    }
}

/* Account modal sections (acm-*) */

.acm-card {
    width: min(92vw, 480px);
    padding: 0;
    overflow: visible;
}

.acm-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--line-soft);
}

.acm-head h2 {
    margin: 0.25rem 0 0;
    font-size: 1.4rem;
    letter-spacing: -0.01em;
}

.acm-body {
    padding: 1.25rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-height: 70vh;
    overflow-y: auto;
}

.acm-section {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.acm-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.acm-section-label {
    margin: 0;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}

body.theme-dark .acm-section-label {
    color: var(--muted);
}

.acm-status-pill {
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.acm-status-pill.active {
    background: rgba(31, 157, 85, 0.14);
    color: var(--pos);
}

body.theme-dark .acm-status-pill.active {
    background: rgba(76, 255, 186, 0.14);
    color: var(--accent);
}

.acm-status-pill.inactive {
    background: var(--surface-2);
    color: var(--muted);
}

.acm-copy {
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.5;
}

.acm-value {
    margin: 0;
    color: var(--ink);
    font-weight: 700;
    font-size: 0.9rem;
    word-break: break-all;
}

.acm-actions {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.acm-section-links {
    gap: 0.35rem;
}

/* Generic small text input (currently: wallet display-name field). */
.dc3-input {
    font-family: inherit;
    font-size: 0.86rem;
    padding: 0.4rem 0.6rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-1);
    color: var(--ink);
}

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

.wallet-name-form-row {
    flex-wrap: nowrap;
}

.wallet-name-form-row .dc3-input {
    flex: 1;
    min-width: 0;
}

.wallet-name-error {
    margin: 0;
    color: var(--neg, #d64545);
    font-size: 0.82rem;
}

.wallet-name-success {
    margin: 0;
    color: var(--pos);
    font-size: 0.82rem;
}

.wallet-name-cooldown {
    font-style: italic;
}

/* === Collection detail (cd-*) — see DESIGN_SYSTEM.md §5.3, §7 === */

.cd-breadcrumb {
    padding: 1.4rem 0 0;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--muted);
}

.cd-breadcrumb a {
    color: var(--muted);
}

.cd-breadcrumb strong {
    color: var(--ink);
    font-weight: 700;
}

/* Hero */

.cd-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 1.6rem;
    /* Top-align so the aspect-ratio cover art keeps its natural height instead of
       stretching to match a tall summary column (which left empty space below it). */
    align-items: start;
    padding: 1.4rem 0 1.5rem;
}

@media (max-width: 900px) {
    .cd-hero-grid {
        grid-template-columns: 1fr;
    }
}

.cd-hero-summary {
    padding: 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cd-hero-pills {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cd-hero-title {
    margin: 0;
    font-size: clamp(2.5rem, 5.5vw, 4rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    font-weight: 800;
}

.cd-hero-summary-copy {
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.5;
    max-width: 540px;
}

/* Notes block tucked into the hero card's dead space (guarded on collection.notes). */
.cd-hero-notes {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
    max-width: 540px;
}
.cd-hero-notes .dc3-eyebrow {
    margin-bottom: 0.3rem;
}
.cd-hero-notes-body {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.55;
    white-space: pre-line;   /* preserve authored line breaks */
}

.cd-hero-actions {
    margin-top: 0.25rem;
}

.cd-hero-footer {
    margin-top: auto;
    padding-top: 1.1rem;
    border-top: 1.5px solid var(--line-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cd-hero-coverage {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.cd-coverage-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--pos);
    box-shadow: 0 0 0 4px rgba(31, 157, 85, 0.18);
}

body.theme-dark .cd-coverage-dot {
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(76, 255, 186, 0.18);
}

.cd-hero-art {
    padding: 0;
    overflow: hidden;
}

.cd-art-frame {
    position: relative;
    aspect-ratio: 1.1 / 1;
    background: linear-gradient(135deg, var(--brand-soft), var(--surface-2));
    display: grid;
    place-items: center;
    overflow: hidden;
    min-height: 320px;
}

.cd-art-img,
video.cd-art-img {
    width: 100%;
    height: 100%;
    /* Show the WHOLE cover (contain), not a cropped fill — non-square art / video
       was getting cut off by the frame. */
    object-fit: contain;
    display: block;
}

/* Clickable hero cover -> opens the lightbox. */
.cd-art-trigger {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.cd-art-expand {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    font-size: 1.05rem;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.cd-art-frame:hover .cd-art-expand,
.cd-art-trigger:focus-visible .cd-art-expand {
    opacity: 1;
}

.cd-art-monogram {
    font-family: "VT323", "Tomorrow", monospace;
    font-size: clamp(7rem, 14vw, 11rem);
    line-height: 1;
    color: rgba(48, 76, 130, 0.32);
    text-shadow: 0 6px 0 rgba(255, 255, 255, 0.40);
}

body.theme-dark .cd-art-monogram {
    color: rgba(255, 255, 255, 0.18);
    text-shadow: 0 6px 0 rgba(0, 0, 0, 0.40);
}

/* Sections */

.cd-section {
    padding: 0 0 1.25rem;
}

.cd-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.cd-section-h {
    margin: 0.25rem 0 0;
    font-size: 1.4rem;
    letter-spacing: -0.01em;
    font-weight: 800;
}

.cd-section-sub {
    margin: 0.45rem 0 0;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Release card */

.cd-release-card,
.cd-packs-card {
    padding: 1.5rem;
}

/* Phased-drop waves — folded into the Release info card. */
.cd-release-waves {
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
}
.cd-release-waves .dc3-eyebrow {
    margin-bottom: 0.55rem;
}

/* Phased-drop waves list. */
.cd-waves {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.cd-wave {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1rem;
    align-items: center;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-2, rgba(255, 255, 255, 0.02));
}
.cd-wave-n { font-weight: 700; }
.cd-wave-date {
    color: var(--muted);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.85rem;
}
.cd-wave-packs { font-size: 0.85rem; white-space: nowrap; }
.cd-wave.is-done { opacity: 0.6; }
.cd-waves-note { margin-top: 0.75rem; }

.cd-release-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
}

.cd-release-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 2rem;
}
@media (max-width: 620px) {
    .cd-release-grid--compact {
        grid-template-columns: 1fr;
    }
}

/* Packs — a thin full-width strip: lead label, the reached metric + slim bar, and the
   sealed/opened/owners split, laid out in one row that wraps on narrow screens. */
.pack-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.75rem;
    padding: 0.9rem 1.25rem;
}
.pack-strip-lead { display: flex; align-items: baseline; gap: 0.6rem; flex: 0 0 auto; }
.pack-strip-title { font-weight: 800; font-size: 1rem; }
.pack-strip-sub { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.pack-strip-metric {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 20rem;
    min-width: 14rem;
}
.pack-strip-reached { font-size: 0.9rem; white-space: nowrap; }
.pack-strip-reached strong { font-weight: 800; font-variant-numeric: tabular-nums; }
.pack-strip-track {
    flex: 1 1 auto;
    height: 7px;
    border-radius: 999px;
    background: var(--line-soft);
    overflow: hidden;
    min-width: 5rem;
}
.pack-strip-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.pack-strip-split {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    font-size: 0.85rem;
    flex: 0 0 auto;
}
.pack-strip-split strong { font-variant-numeric: tabular-nums; font-weight: 800; }

@media (max-width: 720px) {
    .cd-release-grid {
        grid-template-columns: 1fr;
    }
}

.cd-deflist {
    margin: 0;
    display: grid;
    gap: 0;
}

.cd-deflist > div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.65rem 0;
    border-top: 1.5px solid var(--line-soft);
}

.cd-deflist > div:first-child {
    border-top: none;
}

.cd-deflist dt {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}

.cd-deflist dd {
    margin: 0;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ink);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Rarity table */

.cd-rarity-card {
    padding: 1.5rem;
}

.cd-rarity-legend {
    display: flex;
    gap: 0.5rem;
}

.cd-legend-swatch {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    display: inline-block;
}

.cd-rarity-table-scroll {
    overflow-x: auto;
    margin-top: 0.5rem;
}

.cd-rarity-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.cd-rarity-table thead th {
    padding: 0.6rem 0.75rem;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.10em;
    color: var(--muted);
    text-transform: uppercase;
    font-weight: 700;
    text-align: left;
    border-bottom: 1.5px solid var(--line);
}

.cd-rarity-table thead th.num {
    text-align: right;
}

.cd-rarity-table tbody td {
    padding: 0.75rem;
    border-bottom: 1.5px solid var(--line-soft);
    font-variant-numeric: tabular-nums;
}

.cd-rarity-table tbody td.num {
    text-align: right;
}

/* Flex lives on an inner span, NOT the <td>. A flex <td> drops out of table
   layout and makes adjacent columns shift/stack (the Name+Rarity-stacked bug). */
.cd-rarity-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

/* Keep the identity columns on a single line; the table scroll container
   (.cd-rarity-table-scroll) handles any horizontal overflow. */
.cd-rarity-namecol,
.cd-rarity-raritycol {
    white-space: nowrap;
}

.cd-rarity-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1.5px solid var(--line);
    flex-shrink: 0;
}

.cd-num-pos { color: var(--pos); font-weight: 700; }
.cd-num-neg { color: var(--neg); font-weight: 700; }
.cd-num-muted { color: var(--muted); }
.cd-num-listed { color: var(--warn); font-weight: 700; }

.cd-coverage-cell {
    min-width: 160px;
}

.cd-coverage-bar {
    display: inline-block;
    width: 100px;
    height: 6px;
    background: var(--surface-2);
    border: 1.5px solid var(--line-soft);
    border-radius: 4px;
    overflow: hidden;
    vertical-align: middle;
}

.cd-coverage-bar-fill {
    display: block;
    height: 100%;
    border-radius: 4px;
}

.cd-coverage-pct {
    display: inline-block;
    margin-left: 0.5rem;
    color: var(--muted);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.75rem;
    min-width: 30px;
    text-align: right;
    vertical-align: middle;
}

/* Edition viewer + Top owners 2-col */

.cd-viewer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 1.25rem;
}

@media (max-width: 1100px) {
    .cd-viewer-grid {
        grid-template-columns: 1fr;
    }
}

.cd-viewer-card {
    padding: 1.5rem;
}

.cd-mode-toggle {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--surface-2);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
}

.cd-mode-btn {
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.85rem;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-2);
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.cd-mode-btn.is-active {
    background: var(--ink);
    color: #ffffff;
}

body.theme-dark .cd-mode-btn.is-active {
    background: linear-gradient(180deg, #4cffba, #2adba0);
    color: #001a14;
    box-shadow: 0 0 0 1px rgba(76, 255, 186, 0.40), 0 6px 18px rgba(76, 255, 186, 0.22);
}

.cd-band-chips {
    display: flex;
    gap: 0.45rem;
    margin: 0.85rem 0 1rem;
    flex-wrap: wrap;
}

/* Large groupings (item-title-plus-rarity sets): cap the chip area height and
   scroll, so hundreds of chips don't push the page down. Pairs with the
   type-ahead search row. */
.cd-band-chips-scroll {
    max-height: 260px;
    overflow-y: auto;
    align-content: flex-start;
    padding: 0.5rem;
    border: 1.5px solid var(--line-soft);
    border-radius: var(--radius-md);
}

.cd-band-search-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.85rem;
}

.cd-band-search {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.55rem 0.75rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 0.85rem;
}

.cd-band-search-count {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.75rem;
}

/* On small screens keep the scroll area shorter so the viewer stays usable. */
@media (max-width: 640px) {
    .cd-band-chips-scroll {
        max-height: 180px;
    }
}

.cd-band-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    transition: transform 80ms ease, box-shadow 120ms ease;
}

/* Pinned Packs chip — packs sit outside the set checklist, so the chip is set
   apart (accent border + trailing divider) at the head of the chip list. */
.cd-band-chip-packs {
    border-color: var(--accent);
    border-style: dashed;
}
.cd-band-divider {
    align-self: stretch;
    width: 1.5px;
    background: var(--line-soft);
    margin: 0 0.35rem;
}

body.theme-light .cd-band-chip {
    box-shadow: 3px 3px 0 0 var(--line);
}

body.theme-light .cd-band-chip:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 0 var(--line);
}

body.theme-light .cd-band-chip:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 0 var(--line);
}

.cd-band-chip.is-active {
    background: var(--ink);
    color: #ffffff;
}

body.theme-dark .cd-band-chip {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.14);
}

body.theme-dark .cd-band-chip.is-active {
    background: linear-gradient(180deg, #4cffba, #2adba0);
    color: #001a14;
    border-color: transparent;
    box-shadow: 0 0 0 1px rgba(76, 255, 186, 0.40), 0 12px 30px rgba(76, 255, 186, 0.22);
}

.cd-band-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.cd-band-chip-count {
    margin-left: 0.25rem;
    font-size: 0.65rem;
    opacity: 0.7;
    font-weight: 600;
}

/* Sized by CONTENT, not by a fixed column count. The old `repeat(20, minmax(0,
   1fr))` let every cell shrink without limit, so a large set (2026 MLB Base
   Series ICONs runs to #25375 — six characters) clipped its own labels against
   `.dc3-slot`'s `overflow: hidden`. auto-fill with a floor keeps every button
   readable and simply fits fewer per row on narrow screens. */
.cd-edition-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3.25rem, 1fr));
    gap: 5px;
    margin-top: 0.5rem;
}

@media (max-width: 720px) {
    .cd-edition-grid {
        grid-template-columns: repeat(auto-fill, minmax(2.9rem, 1fr));
    }
}

.cd-edition-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--muted);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    padding: 1.5rem;
}

.cd-viewer-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1.5px solid var(--line-soft);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cd-viewer-link {
    color: var(--ink-2);
    font-weight: 600;
    border-bottom: 1px dashed var(--line-soft);
}

.cd-viewer-link:hover {
    color: var(--ink);
    border-bottom-color: currentColor;
}

body.theme-dark .cd-viewer-link:hover {
    color: var(--accent);
}

/* Top owners */

.cd-owners-card {
    padding: 1.5rem;
}

.cd-owners-list {
    display: grid;
    gap: 0.4rem;
    margin-top: 0.85rem;
}

.cd-owners-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
    margin-top: 0.85rem;
}

@media (max-width: 600px) {
    .cd-owners-grid-2col {
        grid-template-columns: 1fr;
    }
}

.cd-owner-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    background: var(--surface-2);
    border: 1.5px solid var(--line-soft);
    border-radius: var(--radius-sm);
}

.cd-owner-rank {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--surface);
    border: 1.5px solid var(--line);
    display: grid;
    place-items: center;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ink);
}

.cd-owner-rank.is-gold {
    background: linear-gradient(135deg, var(--accent-3), #ffe48a);
    border-color: var(--ink);
    color: #15203b;
    box-shadow: 0 4px 0 0 rgba(48, 76, 130, 0.18);
}
.cd-owner-rank.is-silver {
    background: linear-gradient(135deg, #eef0f4, #c4c9d2);
    border-color: var(--ink);
    color: #1b2436;
    box-shadow: 0 4px 0 0 rgba(48, 76, 130, 0.14);
}
.cd-owner-rank.is-bronze {
    background: linear-gradient(135deg, #f0c38c, #cf8a44);
    border-color: var(--ink);
    color: #2c1a07;
    box-shadow: 0 4px 0 0 rgba(120, 70, 20, 0.18);
}

body.theme-dark .cd-owner-rank.is-gold {
    background: linear-gradient(135deg, var(--accent-3), var(--accent));
    color: #15203b;
    border-color: transparent;
}
body.theme-dark .cd-owner-rank.is-silver {
    background: linear-gradient(135deg, #f2f4f8, #b9bfca);
    color: #1b2436;
    border-color: transparent;
}
body.theme-dark .cd-owner-rank.is-bronze {
    background: linear-gradient(135deg, #f3c590, #c9813c);
    color: #2c1a07;
    border-color: transparent;
}

.cd-owner-addr {
    font-size: 0.82rem;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}
a.cd-owner-addr:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cd-owner-count {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent);
}

body.theme-dark .cd-owner-count {
    color: var(--accent);
}

/* === Home (home-*) — see DESIGN_SYSTEM.md §3 ============================ */

.home-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 2.25rem;
    align-items: center;
    padding: 2rem 0 1.25rem;
    position: relative;
}

@media (max-width: 980px) {
    .home-hero-grid {
        grid-template-columns: 1fr;
    }
}

.home-hero-copy {
    position: relative;
    min-width: 0;
}

.home-hero-pills {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.home-hero-title {
    margin: 0;
    font-size: clamp(2.6rem, 6vw, 5rem);
    line-height: 0.92;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.home-hero-lede {
    margin-top: 1.1rem;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.5;
    max-width: 560px;
}

.home-hero-actions {
    margin-top: 1.5rem;
}

.home-hero-stats {
    margin-top: 1.85rem;
    padding-top: 1.4rem;
    border-top: 1.5px solid var(--line-soft);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.home-stat {
    display: grid;
    gap: 0.2rem;
}

.home-stat-sm .dc3-stat-value {
    font-size: 1.4rem;
}

.home-sparkle {
    font-size: 16px;
}

.home-sparkle-1 { top: -16px; left: -22px; }
.home-sparkle-2 { top: 130px; right: 70px; font-size: 18px; }
.home-sparkle-3 { bottom: 220px; right: -8px; }

/* Featured Spotlight */

.home-spotlight {
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-xl);
}

.home-spotlight-cover {
    position: relative;
    aspect-ratio: 1 / 1;
    max-height: 520px;
    background: linear-gradient(135deg, var(--brand-soft), var(--surface-2));
    display: grid;
    place-items: center;
    overflow: hidden;
}

.home-spotlight-img,
video.home-spotlight-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.home-spotlight-monogram {
    font-family: "VT323", "Tomorrow", monospace;
    font-size: 5.5rem;
    line-height: 1;
    color: rgba(48, 76, 130, 0.45);
    text-shadow: 0 4px 0 rgba(255, 255, 255, 0.30);
    letter-spacing: 0.04em;
}

body.theme-dark .home-spotlight-monogram {
    color: rgba(255, 255, 255, 0.20);
    text-shadow: 0 4px 0 rgba(0, 0, 0, 0.40);
}

.home-spotlight-pills {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: flex;
    gap: 0.45rem;
}

.home-spotlight-body {
    padding: 1.5rem;
}

.home-spotlight-title {
    margin: 0.25rem 0 0;
    font-size: 1.85rem;
    letter-spacing: -0.02em;
    font-weight: 800;
}

.home-spotlight-drop {
    margin: 0.4rem 0 0;
    color: var(--muted);
    font-size: 0.85rem;
}

.home-spotlight-stats {
    margin-top: 1.1rem;
    padding: 0.9rem 0;
    border-top: 1.5px solid var(--line-soft);
    border-bottom: 1.5px solid var(--line-soft);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.home-spotlight-actions {
    margin-top: 1.1rem;
    display: flex;
    gap: 0.5rem;
}
/* Quick links strip */

.home-quicklinks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1.5rem 0;
}

@media (max-width: 880px) {
    .home-quicklinks {
        grid-template-columns: repeat(2, 1fr);
    }
}

.home-quicklink {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.85rem;
    align-items: center;
    padding: 1rem 1.1rem;
    color: var(--ink);
    text-decoration: none;
    transition: transform 100ms ease;
}

.home-quicklink:hover {
    transform: translate(-1px, -1px);
}

.home-quicklink-accent {
    background: linear-gradient(135deg, var(--accent-3), #ffe48a);
    color: #15203b;
    border-color: var(--ink);
}

body.theme-dark .home-quicklink-accent {
    background: linear-gradient(135deg, rgba(76, 255, 186, 0.22), rgba(179, 136, 255, 0.18));
    color: var(--ink);
    border-color: var(--line);
}

/* Digital Slabs quicklink — violet counterpart to the gold accent card. */
.home-quicklink-slabs {
    background: linear-gradient(135deg, #d9c8ff, #f0e8ff);
    color: #15203b;
    border-color: var(--ink);
}

body.theme-dark .home-quicklink-slabs {
    background: linear-gradient(135deg, rgba(179, 136, 255, 0.24), rgba(76, 141, 255, 0.16));
    color: var(--ink);
    border-color: var(--line);
}

.home-quicklink-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.10);
    border-radius: var(--radius-sm);
    font-size: 1.5rem;
}

body.theme-dark .home-quicklink-icon {
    background: rgba(255, 255, 255, 0.08);
}

.home-quicklink-body {
    min-width: 0;
}

.home-quicklink-body strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: inherit;
}

.home-quicklink-sub {
    display: block;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-top: 0.15rem;
}

.home-quicklink-new {
    padding: 2px 7px;
    font-size: 9px;
    vertical-align: middle;
    margin-left: 0.35rem;
    background: var(--accent);
    color: #03110b;
    border-color: transparent;
}

.home-quicklink-accent .home-quicklink-sub,
.home-quicklink-slabs .home-quicklink-sub {
    color: rgba(21, 32, 59, 0.7);
}

body.theme-dark .home-quicklink-accent .home-quicklink-sub,
body.theme-dark .home-quicklink-slabs .home-quicklink-sub {
    color: var(--muted);
}

.home-quicklink-arrow {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 1.05rem;
}

/* Sections */

.home-section {
    padding: 1.5rem 0;
}

.home-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}

.home-section-h {
    margin: 0.25rem 0 0;
    font-size: 1.85rem;
    letter-spacing: -0.02em;
    font-weight: 800;
}

/* Tracked tiles */

.home-tracked-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 880px) {
    .home-tracked-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    .home-tracked-grid {
        grid-template-columns: 1fr;
    }
}

.home-tile {
    padding: 0;
    overflow: hidden;
    text-decoration: none;
    color: var(--ink);
    transition: transform 140ms ease;
}

.home-tile:hover {
    transform: translateY(-2px);
}

.home-tile-cover {
    position: relative;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, var(--brand-soft), var(--surface-2));
    display: grid;
    place-items: center;
    overflow: hidden;
}

.home-tile-img,
video.home-tile-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.home-tile-monogram {
    font-family: "Raleway", sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: rgba(48, 76, 130, 0.30);
    letter-spacing: -0.04em;
}

body.theme-dark .home-tile-monogram {
    font-family: "Tomorrow", sans-serif;
    color: rgba(255, 255, 255, 0.18);
}

.home-tile-body {
    padding: 0.75rem 0.9rem;
    display: grid;
    gap: 0.25rem;
}

.home-tile-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
}

.home-tile-meta {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    color: var(--muted);
    text-transform: uppercase;
}

/* Up next */

.home-upnext-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 880px) {
    .home-upnext-grid {
        grid-template-columns: 1fr;
    }
}

.home-upnext-summary {
    padding: 1.75rem;
}

.home-upnext-copy {
    margin-top: 0.85rem;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.home-upnext-actions {
    margin-top: 1.1rem;
}

.home-upnext-list {
    padding: 0;
    overflow: hidden;
}

.home-upnext-row {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1.1rem 1.4rem;
    border-top: 1.5px solid var(--line-soft);
}

.home-upnext-row:first-child {
    border-top: none;
}

.home-upnext-date {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.10em;
    color: var(--accent);
}

.home-upnext-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--accent);
}

.home-upnext-body strong {
    display: block;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--ink);
}

.home-upnext-body strong a {
    color: var(--ink);
    border-bottom: 1px dashed var(--line-soft);
}

.home-upnext-body strong a:hover {
    color: var(--brand-navy);
    border-bottom-color: currentColor;
}

body.theme-dark .home-upnext-body strong a:hover {
    color: var(--accent);
}

.home-upnext-time {
    margin-top: 0.2rem;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    color: var(--muted);
}

.home-upnext-arrow {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    color: var(--muted);
    font-size: 1rem;
}

/* Member callout */

.home-member-callout {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.5rem;
    align-items: center;
    padding: 2rem;
    background: linear-gradient(135deg, var(--accent-3), #ffe48a);
    border-color: var(--ink);
    color: #15203b;
}

body.theme-dark .home-member-callout {
    background: linear-gradient(135deg, rgba(76, 255, 186, 0.10), rgba(179, 136, 255, 0.10));
    color: var(--ink);
    border-color: var(--line);
}

.home-member-mascot {
    width: 112px;
    height: 112px;
    display: block;
    filter: drop-shadow(3px 3px 0 rgba(21, 32, 59, 0.30));
}

body.theme-dark .home-member-mascot {
    filter: drop-shadow(0 0 24px rgba(76, 255, 186, 0.5));
}

.home-member-eyebrow {
    color: #15203b !important;
}

body.theme-dark .home-member-eyebrow {
    color: var(--accent) !important;
}

.home-member-h {
    margin: 0.25rem 0 0;
    font-size: 1.65rem;
    line-height: 1.15;
    color: inherit;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.home-member-sub {
    margin: 0.55rem 0 0;
    color: rgba(21, 32, 59, 0.7);
    font-size: 0.88rem;
    line-height: 1.5;
    max-width: 560px;
}

body.theme-dark .home-member-sub {
    color: var(--muted);
}

.home-member-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

@media (max-width: 880px) {
    .home-member-callout {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .home-member-mascot {
        margin: 0 auto;
    }
    .home-member-actions {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* ============================================================== */
/* === Canonical .dc3-* utilities (full migration target) ====== */
/* See DESIGN_SYSTEM.md §2. These are the ONLY shared utilities. */
/* ============================================================== */

/* Card primitive (replaces .card / .info-card / .stat-card / .highlight-card) */
.dc3-card {
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--pad-card);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

body.theme-dark .dc3-card {
    background: linear-gradient(180deg, rgba(20,26,42,0.78), rgba(14,19,34,0.62));
    border: 1px solid var(--line);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

body.theme-light .dc3-card.sticker {
    box-shadow: var(--shadow-sticker);
}

body.theme-light .dc3-card.sticker-lg {
    box-shadow: var(--shadow-sticker-lg);
}

body.theme-dark .dc3-card.sticker,
body.theme-dark .dc3-card.sticker-lg {
    box-shadow: var(--shadow);
}

/* Unminted "legacy" designs (BATCOWLS-style browse grid): same grid as live
   assets, must read as visually distinct at a glance -- no owner, no chain
   presence, reference-only. Reuses --surface-2/--muted (already themed for
   both light and dark, see :root / body.theme-dark above) rather than
   hardcoding a second color set that would need its own dark-mode variant. */
.dc3-card.legacy-item-card,
body.theme-dark .dc3-card.legacy-item-card {
    background: var(--surface-2);
    border-style: dashed;
}
.legacy-item-card .asset-preview {
    opacity: 0.72;
    filter: grayscale(30%);
}
.legacy-item-card h2 {
    color: var(--muted);
}

/* Button primitive (replaces .button / .small-button) */
.dc3-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    min-height: 40px;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.88rem;
    border: 1.5px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 80ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

body.theme-light .dc3-btn {
    box-shadow: 3px 3px 0 0 var(--line);
}

body.theme-light .dc3-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 0 var(--line);
}

body.theme-light .dc3-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 0 var(--line);
}

.dc3-btn.primary {
    background: var(--ink);
    color: #ffffff;
}

body.theme-dark .dc3-btn {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
}

body.theme-dark .dc3-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.24);
}

body.theme-dark .dc3-btn.primary {
    background: linear-gradient(180deg, #4cffba, #2adba0);
    color: #001a14;
    border-color: transparent;
    box-shadow: 0 0 0 1px rgba(76, 255, 186, 0.40), 0 12px 36px rgba(76, 255, 186, 0.25);
}

body.theme-dark .dc3-btn.primary:hover {
    box-shadow: 0 0 0 1px rgba(76, 255, 186, 0.60), 0 18px 50px rgba(76, 255, 186, 0.35);
}

.dc3-btn.accent {
    background: var(--accent-3);
    color: #15203b;
    border-color: var(--ink);
}

body.theme-dark .dc3-btn.accent {
    background: linear-gradient(180deg, var(--accent-2), #8e63ff);
    color: #0a0218;
    border-color: transparent;
    box-shadow: 0 0 0 1px rgba(179, 136, 255, 0.40), 0 12px 36px rgba(179, 136, 255, 0.25);
}

.dc3-btn.success {
    background: linear-gradient(120deg, #22c55e, #16a34a);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 12px 26px rgba(34, 197, 94, 0.28);
}

.dc3-btn.success:hover {
    background: linear-gradient(120deg, #16a34a, #15803d);
}

.dc3-btn.ghost {
    background: transparent;
    box-shadow: none;
    border-color: transparent;
}

body.theme-light .dc3-btn.ghost {
    box-shadow: none;
}

.dc3-btn.ghost:hover {
    background: var(--surface-2);
}

.dc3-btn.sm {
    min-height: 32px;
    padding: 6px 12px;
    font-size: 0.78rem;
    border-radius: var(--radius-sm);
}

body.theme-light .dc3-btn.sm {
    box-shadow: 2px 2px 0 0 var(--line);
}

body.theme-light .dc3-btn.sm:hover {
    box-shadow: 3px 3px 0 0 var(--line);
}

.dc3-btn:disabled,
.dc3-btn[disabled] {
    opacity: 0.52;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Page header / hero (replaces .page-header) */
.dc3-page-header {
    padding: 2rem 0 1rem;
}

.dc3-page-header h1 {
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 0.4rem 0 0.6rem;
}

/* Eyebrow (replaces .eyebrow / .card-label) */
.dc3-eyebrow {
    margin: 0 0 0.75rem;
    color: var(--accent);
    font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

body.theme-dark .dc3-eyebrow {
    color: var(--muted);
}

/* Lede / intro paragraph (replaces .lede) */
.dc3-lede {
    max-width: 60ch;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.6;
}

.dc3-lede.short {
    max-width: 50ch;
    font-size: 0.95rem;
}

/* Detail copy (replaces .detail-copy / .body-copy) */
.dc3-copy {
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

.dc3-copy.short {
    margin: 0.45rem 0 0;
}

.dc3-copy.value-break {
    word-break: break-all;
}

/* Action row (replaces .action-row) */
.dc3-action-row {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.dc3-action-row.compact {
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Inline text link (replaces .text-link / .muted-link) */
.dc3-text-link {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: border-color 140ms ease, color 140ms ease;
}

.dc3-text-link:hover {
    border-bottom-color: currentColor;
}
body.theme-dark .dc3-text-link {
    color: var(--accent);
}

/* Muted helper (replaces .muted) */
.dc3-muted {
    color: var(--muted);
}

/* Definition list (replaces .definition-list / .info-list) */
.dc3-deflist {
    display: grid;
    gap: 0;
    margin: 0;
}

.dc3-deflist > div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.65rem 0;
    border-top: 1px solid var(--line-soft);
}

.dc3-deflist > div:first-child {
    border-top: none;
}

.dc3-deflist dt {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}

.dc3-deflist dd {
    margin: 0;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ink);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dc3-deflist.compact > div {
    padding: 0.45rem 0;
}

/* Pill accent variant (replaces .badge.accent / .meta-pill.accent) */
.dc3-pill.accent {
    background: rgba(255, 159, 67, 0.18);
    color: #8f4d00;
    border-color: transparent;
}

body.theme-dark .dc3-pill.accent {
    background: rgba(255, 120, 73, 0.18);
    color: var(--accent-4);
}

.dc3-pill.muted-pill {
    background: var(--surface-2);
    color: var(--muted);
}

/* ==========================================================================
   Journey page (/journey)
   See SolanaTooling/StoryTelling/JOURNEY_HANDOFF.md for the full spec.
   ========================================================================== */

.jp-breadcrumb {
    margin-bottom: 24px;
}

/* --- Hero ---------------------------------------------------------------- */

.jp-hero {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    align-items: center;
    margin: 12px 0 56px;
}

.jp-hero-title {
    font-family: "Tomorrow", "Space Grotesk", "Manrope", sans-serif;
    font-weight: 800;
    font-size: clamp(48px, 7vw, 88px);
    line-height: 0.92;
    letter-spacing: -0.04em;
    margin: 16px 0 20px;
    color: var(--ink);
}

.jp-hero-line {
    display: block;
}

.jp-hero-sub {
    font-size: 18px;
    line-height: 1.6;
    color: var(--muted);
    max-width: 600px;
    margin: 0 0 24px;
}

.jp-hero-cues {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.jp-year-chip {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--accent);
    background: var(--surface-2);
    border: 1.5px solid var(--line-soft);
    padding: 6px 12px;
    border-radius: 999px;
}

.jp-cue-mono {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--muted);
}

.jp-hero-mascot {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    position: relative;
    text-align: center;
}

.jp-mascot-frame {
    position: relative;
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jp-mascot-img {
    width: 180px;
    height: auto;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.18));
}

body.theme-dark .jp-mascot-img {
    filter: drop-shadow(0 0 24px rgba(255, 94, 44, 0.45));
}

.jp-mascot-footer {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--muted);
    margin: 16px 0 0;
}

/* --- Chapter index strip ------------------------------------------------- */

.jp-index-card {
    margin-bottom: 64px;
    padding: 28px 32px;
}

.jp-index-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 20px;
}

.jp-index-hint {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--muted);
}

.jp-index-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    position: relative;
}

.jp-index-tile {
    position: relative;
    display: block;
}

.jp-index-tile > a {
    display: block;
    padding: 16px 14px;
    border: 1.5px solid var(--line-soft);
    border-radius: 12px;
    background: var(--surface-2);
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.jp-index-tile > a:hover {
    transform: translateY(-2px);
    border-color: var(--ch-accent, var(--accent));
}

.jp-index-num {
    display: block;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ch-accent, var(--accent));
    margin-bottom: 8px;
}

.jp-index-title {
    display: block;
    font-family: "Tomorrow", "Space Grotesk", "Manrope", sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: var(--ink);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.jp-index-range {
    display: block;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.06em;
}

.jp-index-arrow {
    position: absolute;
    right: -14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--muted);
    pointer-events: none;
}

/* --- Chapter sections ---------------------------------------------------- */

.jp-chapter {
    border-top: 1.5px solid var(--line);
    margin-top: 60px;
    padding: 48px 0 64px;
    position: relative;
}

.jp-chapter.is-even {
    background: var(--surface-2);
    margin-left: calc(-1 * (50vw - 50%));
    margin-right: calc(-1 * (50vw - 50%));
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
}

body.theme-dark .jp-chapter.is-even {
    background: rgba(255, 255, 255, 0.015);
}

.jp-chapter.is-muted .jp-chapter-lede,
.jp-chapter.is-muted .jp-milestone-body {
    color: var(--muted);
}

.jp-chapter.is-placeholder .jp-milestone {
    opacity: 0.85;
}

.jp-chapter-divider {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 2.5fr;
    gap: 36px;
    align-items: end;
    margin-bottom: 36px;
}

.jp-chapter-num {
    font-family: "VT323", "JetBrains Mono", ui-monospace, monospace;
    font-size: 240px;
    line-height: 0.85;
    color: var(--ch-accent, var(--accent));
    text-shadow: 4px 4px 0 var(--line-soft);
}

body.theme-dark .jp-chapter-num {
    text-shadow: 0 0 40px var(--ch-accent, var(--accent));
}

.jp-chapter-arc {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--ch-accent, var(--accent));
    margin: 0 0 8px;
}

.jp-chapter-title {
    font-family: "Tomorrow", "Space Grotesk", "Manrope", sans-serif;
    font-weight: 800;
    font-size: clamp(36px, 4vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    color: var(--ink);
}

.jp-chapter-range {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin: 0;
}

.jp-placeholder-pill {
    display: inline-block;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--warn);
    background: rgba(255, 206, 78, 0.12);
    border: 1.5px solid var(--warn);
    padding: 4px 10px;
    border-radius: 999px;
    margin: 12px 0 0;
}

.jp-chapter-body {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 36px;
}

.jp-chapter-aside {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.jp-chapter-lede {
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink);
    max-width: 360px;
    margin: 0;
}

.jp-monogram-tile {
    aspect-ratio: 1;
    border-radius: 14px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: var(--shadow-sticker, 4px 4px 0 0 rgba(0, 0, 0, 0.12));
}

.jp-monogram-pill {
    position: absolute;
    top: 12px;
    left: 12px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(0, 0, 0, 0.32);
    padding: 4px 8px;
    border-radius: 999px;
}

.jp-monogram-glyph {
    font-family: "VT323", "JetBrains Mono", ui-monospace, monospace;
    font-size: 160px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.96);
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
}

.jp-monogram-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.jp-monogram-tile.has-image .jp-monogram-pill {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
}

.jp-chapter-main {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* --- Milestone cards ----------------------------------------------------- */

.jp-milestone-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.jp-milestone {
    padding: 22px 24px;
    border-left: 4px solid var(--ch-accent, var(--accent));
}

.jp-milestone.is-placeholder-event {
    opacity: 0.7;
    border-left-style: dashed;
}

.jp-milestone-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.jp-milestone-date {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ch-accent, var(--accent));
}

.jp-milestone-sources {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.jp-source-chip {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--ink-2, var(--muted));
    background: var(--surface-2);
    border: 1.5px solid var(--line-soft);
    padding: 3px 8px;
    border-radius: 999px;
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.jp-source-chip:hover {
    border-color: var(--ch-accent, var(--accent));
    color: var(--ch-accent, var(--accent));
}

.jp-milestone-title {
    font-family: "Tomorrow", "Space Grotesk", "Manrope", sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 8px 0 0;
    color: var(--ink);
}

.jp-milestone-body {
    font-size: 15px;
    line-height: 1.55;
    color: var(--muted);
    margin: 8px 0 0;
}

/* --- Stats row ----------------------------------------------------------- */

.jp-stats-row {
    display: grid;
    grid-template-columns: repeat(var(--stat-count, 3), 1fr);
    gap: 24px;
    padding: 22px 0;
    border-top: 1.5px solid var(--line-soft);
    border-bottom: 1.5px solid var(--line-soft);
}

.jp-stat-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.jp-stat-label {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--muted);
}

.jp-stat-value {
    font-family: "Tomorrow", "Space Grotesk", "Manrope", sans-serif;
    font-weight: 800;
    font-size: 36px;
    line-height: 1;
    color: var(--ch-accent, var(--accent));
    letter-spacing: -0.02em;
}

/* --- Features grid ------------------------------------------------------- */

.jp-features {
    margin-top: 8px;
}

.jp-features-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.jp-feature-card {
    padding: 18px 16px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 96px;
}

.jp-feature-index {
    position: absolute;
    top: 8px;
    left: 12px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ch-accent, var(--accent));
}

.jp-feature-label {
    font-family: "Tomorrow", "Space Grotesk", "Manrope", sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
    line-height: 1.3;
}

/* --- Quote --------------------------------------------------------------- */

.jp-quote {
    position: relative;
    padding: 36px 32px 28px;
    border: 1.5px solid var(--ch-accent, var(--accent));
    background: color-mix(in srgb, var(--ch-accent, var(--accent)) 10%, transparent);
}

body.theme-dark .jp-quote {
    background: rgba(255, 255, 255, 0.03);
}

.jp-quote-mark {
    position: absolute;
    top: -20px;
    left: 16px;
    font-family: "VT323", "JetBrains Mono", ui-monospace, monospace;
    font-size: 96px;
    line-height: 1;
    color: var(--ch-accent, var(--accent));
    opacity: 0.5;
}

.jp-quote-body {
    font-family: "Tomorrow", "Space Grotesk", "Manrope", sans-serif;
    font-size: 22px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.01em;
}

.jp-quote-attrib {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin-top: 16px;
}

/* --- Closing CTA --------------------------------------------------------- */

.jp-closing {
    margin-top: 80px;
    padding: 36px 40px;
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 32px;
    align-items: center;
}

.jp-closing-mascot img {
    width: 100px;
    height: auto;
}

.jp-closing-title {
    font-family: "Tomorrow", "Space Grotesk", "Manrope", sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 8px 0;
    color: var(--ink);
}

.jp-closing-sub {
    font-size: 15px;
    line-height: 1.55;
    color: var(--muted);
    margin: 0;
    max-width: 520px;
}

.jp-closing-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 200px;
}

.jp-closing-actions .dc3-btn {
    text-align: center;
}

/* --- Mobile -------------------------------------------------------------- */

@media (max-width: 880px) {
    .jp-hero {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .jp-hero-title {
        font-size: clamp(36px, 10vw, 56px);
    }
    .jp-hero-mascot {
        max-width: 280px;
        justify-self: center;
    }
    .jp-index-grid {
        grid-template-columns: 1fr;
    }
    .jp-index-arrow {
        display: none;
    }
    /* Drop the calc(50vw - 50%) full-bleed on mobile — the math overshoots
       the viewport edge under grid gaps / Safari 100vw quirks and gets
       silently clipped by overflow-x: clip on body. Keep the band visible
       within the container instead. */
    .jp-chapter.is-even {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
    .jp-chapter-divider {
        grid-template-columns: 1fr;
        gap: 16px;
        align-items: start;
    }
    .jp-chapter-num {
        font-size: 90px;
        line-height: 1;
    }
    .jp-chapter-body {
        grid-template-columns: 1fr;
    }
    .jp-monogram-tile {
        aspect-ratio: 1.6;
    }
    .jp-monogram-glyph {
        font-size: 96px;
    }
    .jp-stats-row {
        grid-template-columns: repeat(min(var(--stat-count, 2), 2), 1fr);
    }
    .jp-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .jp-closing {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .jp-closing-mascot {
        justify-self: center;
    }
    .jp-closing-actions {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .jp-stats-row {
        grid-template-columns: 1fr;
    }
    .jp-features-grid {
        grid-template-columns: 1fr;
    }
}

/* === Platform news — home (home-news-*) ======================== */
.home-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.home-news-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    padding: 0;
}
.home-news-card:hover { transform: translateY(-2px); }
.home-news-accent {
    display: block;
    height: 4px;
    width: 100%;
    background: var(--accent-5);
}
.home-news-thumb {
    display: block;
    width: 100%;
    height: 140px;
    overflow: hidden;
    background: var(--surface-2);
}
.home-news-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.home-news-body {
    padding: 18px 20px 14px;
    display: grid;
    gap: 10px;
    flex: 1;
}
.home-news-dateline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}
.home-news-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--accent-5);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-5) 25%, transparent);
    display: inline-block;
}
.home-news-source {
    color: var(--ink-2);
    font-weight: 600;
}
.home-news-title {
    font-size: 19px;
    line-height: 1.25;
    margin: 0;
    color: var(--ink);
    font-weight: 700;
}
.home-news-summary {
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home-news-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1.5px solid var(--line-soft);
}
.home-news-tag {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.home-news-read {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--muted);
}
.home-news-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
}
.home-news-fallback-text {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--muted);
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .home-news-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .home-news-accent { height: 3px; }
    .home-news-thumb { height: 120px; }
    .home-news-body { padding: 14px 16px 12px; }
    .home-news-title { font-size: 16px; }
    .home-news-summary { font-size: 12px; }
    .home-news-footer { display: none; }
}

/* === Platform news — timeline (timeline-news-*) ================ */
.timeline-news-card {
    padding: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: 240px 1fr;
}
.timeline-news-rail {
    padding: 20px;
    border-right: 1.5px solid var(--line-soft);
    background: var(--surface-2);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.timeline-news-rail-h {
    font-size: 22px;
    margin: 0;
    color: var(--ink);
}
.timeline-news-rail-actions {
    margin-top: auto;
}
.timeline-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.timeline-news-cell {
    padding: 0;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border-left: 1.5px solid var(--line-soft);
    overflow: hidden;
}
.timeline-news-cell:first-child { border-left: none; }
.timeline-news-cell:hover { background: var(--surface-2); }
.timeline-news-thumb {
    display: block;
    width: 100%;
    height: 90px;
    overflow: hidden;
    background: var(--surface-2);
}
.timeline-news-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.timeline-news-content {
    padding: 14px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.timeline-news-dateline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--muted);
}
.timeline-news-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--accent-5);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-5) 25%, transparent);
    display: inline-block;
}
.timeline-news-title {
    font-size: 15px;
    line-height: 1.3;
    margin: 0;
    color: var(--ink);
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.timeline-news-read {
    margin-top: auto;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--muted);
}

@media (max-width: 900px) {
    .timeline-news-card {
        grid-template-columns: 1fr;
    }
    .timeline-news-rail {
        border-right: none;
        border-bottom: 1.5px solid var(--line-soft);
    }
    .timeline-news-grid {
        grid-template-columns: 1fr;
    }
    .timeline-news-cell {
        border-left: none;
        border-top: 1.5px solid var(--line-soft);
    }
    .timeline-news-cell:first-child { border-top: none; }
}

/* === Member benefits page (member-benefit-*) =================== */
.member-benefit-card {
    position: relative;
    padding-top: 1.6rem;
}

.member-benefit-icon {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    border: 1.5px solid var(--line);
    color: var(--accent);
    font-size: 1.4rem;
    line-height: 1;
}

body.theme-dark .member-benefit-icon {
    border-color: rgba(255, 255, 255, 0.10);
    color: var(--accent-2);
}

.member-benefit-card .dc3-eyebrow,
.member-benefit-card h2,
.member-benefit-card .dc3-copy,
.member-benefit-card .dc3-action-row {
    margin-left: calc(44px + 0.85rem);
}

@media (max-width: 600px) {
    .member-benefit-icon {
        position: static;
        margin-bottom: 0.75rem;
    }
    .member-benefit-card .dc3-eyebrow,
    .member-benefit-card h2,
    .member-benefit-card .dc3-copy,
    .member-benefit-card .dc3-action-row {
        margin-left: 0;
    }
}


/* =========================================================================
   COMICS — virtual slab + library grid + detail page + reader
   ========================================================================= */

/* ---- Library ----------------------------------------------------------- */
.comics-library-page .comics-library-count {
    color: var(--dc3-text-muted, #94a3b8);
    font-variant-numeric: tabular-nums;
}
.comics-library-empty {
    border: 1px dashed rgba(148, 163, 184, 0.35);
    border-radius: 14px;
    padding: 3rem 2rem;
    text-align: center;
}
.comics-library-empty h2 { margin: 0 0 0.75rem; }
.comics-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* ---- Slab -------------------------------------------------------------- */
.comic-slab {
    --slab-color: var(--rarity-color, var(--rarity-unknown));
    position: relative;
    display: block;
    perspective: 1400px;
    color: inherit;
    text-decoration: none;
    isolation: isolate;
}
a.comic-slab:hover { transform: translateY(-2px); }
a.comic-slab { transition: transform 0.18s ease; }

.comic-slab-inner {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
    border-radius: 14px;
    /* Plastic case look: translucent edge + subtle gloss highlight on top */
    background:
        linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.0) 35%),
        linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 40%, rgba(0,0,0,0.20));
    box-shadow:
        0 18px 40px -22px rgba(0, 0, 0, 0.7),
        0 2px 0 rgba(255, 255, 255, 0.05) inset,
        0 -2px 0 rgba(0, 0, 0, 0.35) inset,
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.comic-slab--flippable.is-flipped .comic-slab-inner { transform: rotateY(180deg); }

.comic-slab-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    gap: 0.5rem;
    border-radius: 14px;
}
.comic-slab-face--back { transform: rotateY(180deg); }

/* Top label strip — rarity-tinted band + content */
.comic-slab-label {
    position: relative;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.65));
    border-radius: 8px;
    padding: 0.65rem 0.75rem 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.comic-slab-label-band {
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--slab-color);
    box-shadow: 0 0 14px var(--slab-color);
}
.comic-slab-label-content { display: flex; flex-direction: column; gap: 0.2rem; }
.comic-slab-title {
    margin: 0;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
    /* Wrap up to two lines instead of ellipsizing — long issue titles
       ("Absolute Superman (2024-) #1") must stay fully readable. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.comic-slab-subtitle {
    margin: 0;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.comic-slab-grade-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 0.25rem;
    gap: 0.5rem;
}
.comic-slab-grade { display: flex; flex-direction: column; line-height: 1; }
.comic-slab-grade-label,
.comic-slab-cert-label {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.55);
}
.comic-slab-grade-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--slab-color);
    letter-spacing: 0.01em;
}
/* margin-left:auto keeps the cert pinned right when the grade block is absent
   (grade only renders when grading metadata exists). */
.comic-slab-cert { text-align: right; display: flex; flex-direction: column; gap: 0.1rem; margin-left: auto; }
.comic-slab-cert-value {
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: rgba(255, 255, 255, 0.85);
}

/* Cover slot */
.comic-slab-cover {
    position: relative;
    flex: 1;
    background: #000;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.comic-slab-cover-img {
    width: 100%;
    height: 100%;
    /* contain, not cover: a slab shows the WHOLE item. Off-ratio art
       letterboxes against the black inner well like a real case. */
    object-fit: contain;
    display: block;
}
.comic-slab-cover-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
}
.comic-slab-rarity-stripe {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: linear-gradient(0deg, var(--slab-color), transparent);
    color: #0f172a;
    background-color: var(--slab-color);
    text-align: center;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    padding: 0.2rem 0;
    mix-blend-mode: normal;
}

/* Footer meta */
.comic-slab-footer {
    background: rgba(15, 23, 42, 0.75);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.comic-slab-meta { margin: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.comic-slab-meta-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    gap: 0.75rem;
}
.comic-slab-meta-row dt {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 0;
}
.comic-slab-meta-row dd {
    margin: 0;
    text-align: right;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Owner: full pubkey on the large slab (wraps), CSS ellipsis on small cards. */
.comic-slab-owner-value {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
.comic-slab--lg .comic-slab-owner-value {
    white-space: normal;
    word-break: break-all;
    line-height: 1.25;
    font-size: 0.7rem;
}

/* Back face — organized metadata panel (credits / details / provenance) */
.comic-slab-back-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    scrollbar-width: thin;
}
.comic-slab-back-heading {
    margin: 0 0 0.25rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--slab-color);
}
.comic-slab-back-section + .comic-slab-back-section { border-top: 1px solid rgba(255, 255, 255, 0.07); padding-top: 0.5rem; }
.comic-slab-back-rows { margin: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.comic-slab-back-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.75);
}
.comic-slab-back-row dt {
    margin: 0;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.45);
}
.comic-slab-back-row dd {
    margin: 0;
    text-align: right;
    overflow-wrap: anywhere;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.comic-slab--lg .comic-slab-back-row { font-size: 0.75rem; }
.comic-slab--lg .comic-slab-back-row dt { font-size: 0.62rem; }

.comic-slab-notes {
    margin: 0;
    padding-left: 1rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.75);
}
.comic-slab-notes-empty {
    margin: 0;
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
    font-size: 0.75rem;
}

/* Flip control */
.comic-slab-flip-hint {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    background: rgba(15, 23, 42, 0.85);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem;
    cursor: pointer;
}
.comic-slab-flip-hint:hover { background: rgba(15, 23, 42, 1); }

/* Size variants */
.comic-slab--sm { width: 100%; max-width: 240px; margin: 0 auto; }
.comic-slab--lg { width: 100%; max-width: 380px; }
.comic-slab--lg .comic-slab-title { font-size: 1.05rem; }
.comic-slab--lg .comic-slab-grade-value { font-size: 1.75rem; }
.comic-slab--lg .comic-slab-meta-row { font-size: 0.78rem; }
.comic-slab--lg .comic-slab-meta-row dt { font-size: 0.65rem; }

/* ---- Detail page ------------------------------------------------------- */
.comic-detail-breadcrumb { margin-bottom: 1rem; }
.comic-detail-breadcrumb a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.comic-detail-breadcrumb a:hover { color: #fff; }

.comic-detail-grid {
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: 2.5rem;
    align-items: start;
}
@media (max-width: 800px) {
    .comic-detail-grid { grid-template-columns: 1fr; }
}

.comic-detail-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 0.4rem;
}
.comic-detail-title { margin: 0 0 0.4rem; font-size: 2rem; line-height: 1.1; }
.comic-detail-subtitle { margin: 0 0 1.25rem; color: rgba(255, 255, 255, 0.7); }

.comic-detail-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem 1.25rem;
    margin: 0 0 1.75rem;
}
.comic-detail-facts > div { display: flex; flex-direction: column; gap: 0.15rem; }
.comic-detail-facts dt {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}
.comic-detail-facts dd { margin: 0; font-size: 0.95rem; }
.comic-detail-mint {
    font-size: 0.7rem;
    word-break: break-all;
    color: rgba(255, 255, 255, 0.7);
}
.comic-detail-rarity-pill {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--rarity-color);
    color: #0f172a;
    font-weight: 700;
    font-size: 0.8rem;
}

.comic-detail-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; }
.comic-detail-read-btn { font-size: 1.05rem; padding: 0.75rem 1.5rem; }
.comic-detail-stub-note {
    border: 1px dashed rgba(255, 206, 78, 0.5);
    background: rgba(255, 206, 78, 0.08);
    color: rgba(255, 206, 78, 0.95);
    padding: 0.65rem 0.9rem;
    border-radius: 8px;
    font-size: 0.85rem;
}

/* ---- Reader ------------------------------------------------------------ */
.comic-reader-page {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr;
    height: calc(100vh - 80px);
    min-height: 600px;
    background: #050810;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}
.comic-reader-page.has-thumbs { grid-template-columns: 1fr 220px; }

.comic-reader-topbar {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: rgba(15, 23, 42, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.comic-reader-topbar-left,
.comic-reader-topbar-right { display: flex; align-items: center; gap: 0.5rem; }
.comic-reader-topbar-right { justify-content: flex-end; }
.comic-reader-topbar-center { display: flex; align-items: center; gap: 0.5rem; justify-content: center; }
.comic-reader-title {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 30ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.comic-reader-page-indicator {
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.9);
    min-width: 5ch;
    text-align: center;
}
.comic-reader-page-indicator-sep { color: rgba(255, 255, 255, 0.4); margin: 0 0.25rem; }

.comic-reader-fit-group {
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    overflow: hidden;
}
.comic-reader-fit-btn {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: 0;
    padding: 0.3rem 0.55rem;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 2.5ch;
}
.comic-reader-fit-btn + .comic-reader-fit-btn { border-left: 1px solid rgba(255, 255, 255, 0.08); }
.comic-reader-fit-btn.is-active { background: rgba(93, 209, 255, 0.18); color: #5dd1ff; }

.comic-reader-stage {
    position: relative;
    overflow: auto;
    background: #050810;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.comic-reader-loading {
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
}
.comic-reader-progress { width: 240px; height: 6px; }
.comic-reader-page-area { max-width: 100%; max-height: 100%; }
.comic-reader-page-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    user-select: none;
    -webkit-user-drag: none;
}
.comic-reader-page-img[data-fit="width"]  { width: 100%; height: auto; max-height: none; }
.comic-reader-page-img[data-fit="height"] { height: 100%; width: auto; max-width: none; }
.comic-reader-page-img[data-fit="page"]   { max-width: 100%; max-height: 100%; }
.comic-reader-page-img[data-fit="actual"] { width: auto; height: auto; max-width: none; max-height: none; }

.comic-reader-error {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.08);
    border: 1px solid rgba(255, 107, 107, 0.35);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    max-width: 480px;
    text-align: center;
}

.comic-reader-thumbs {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    background: rgba(15, 23, 42, 0.85);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.comic-reader-thumbs-scroll {
    height: 100%;
    overflow-y: auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.comic-reader-thumb {
    display: block;
    width: 100%;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    background: #000;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    padding: 0;
}
.comic-reader-thumb.is-active { border-color: #5dd1ff; }
.comic-reader-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.comic-reader-thumb-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
    text-align: center;
    padding-top: 0.15rem;
}

/* Fullscreen tweaks */
.comic-reader-page:fullscreen { border-radius: 0; height: 100vh; }

/* ============================================================
   Unique-items showcase: mint progress, mini-gallery, rarest
   pieces, rare traits, lightbox  (collection_detail.html)
   ============================================================ */
.cd-mint-card { display: flex; flex-direction: column; gap: 0.85rem; }
.cd-mint-head { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.cd-mint-count { margin: 0; }
.cd-mint-of { font-size: 0.62em; color: var(--muted); font-weight: 600; }
.cd-mint-pct {
    margin-left: auto; font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 1.4rem; font-weight: 700; color: var(--brand-navy);
}
body.theme-dark .cd-mint-pct { color: #5dd1ff; }
.cd-mint-track { height: 10px; }

.cd-gallery-section { display: flex; flex-direction: column; gap: 1rem; }
.cd-mini-gallery {
    display: grid; gap: 0.7rem;
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
}
.cd-mini-card {
    position: relative; padding: 0; border: 0; background: none; cursor: pointer;
    border-radius: 16px; overflow: hidden; display: block; line-height: 0;
}
.cd-mini-img {
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
    border-radius: 16px; border: 1px solid var(--line);
    background: rgba(232, 238, 248, 0.45);
    transition: transform 240ms ease, box-shadow 240ms ease;
}
.cd-mini-card:hover .cd-mini-img { transform: scale(1.05); box-shadow: 0 8px 26px rgba(0,0,0,0.28); }
.cd-mini-num {
    position: absolute; left: 7px; bottom: 7px; padding: 2px 8px;
    font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.7rem; font-weight: 700;
    color: #fff; background: rgba(8, 14, 28, 0.72); border-radius: 999px; line-height: 1.4;
}

.cd-rarest-grid {
    display: grid; gap: 0.85rem;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.cd-rarest-card {
    padding: 0; border: 1px solid var(--line); background: none; cursor: pointer;
    border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; text-align: left;
}
.cd-rarest-img {
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
    transition: transform 240ms ease;
}
.cd-rarest-card:hover .cd-rarest-img { transform: scale(1.04); }
.cd-rarest-meta { display: flex; flex-direction: column; gap: 2px; padding: 0.55rem 0.7rem 0.7rem; }
.cd-rarest-num { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; font-size: 0.85rem; }
.cd-rarest-trait { font-size: 0.74rem; color: var(--muted); }
.cd-rarest-trait strong { color: var(--text); }

.cd-rare-traits { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cd-rare-chip {
    display: inline-flex; flex-direction: column; gap: 2px; text-decoration: none;
    padding: 0.5rem 0.8rem; border: 1px solid var(--line); border-radius: 14px;
    background: rgba(255,255,255,0.02); transition: border-color 200ms ease, transform 200ms ease;
}
.cd-rare-chip:hover { border-color: #5dd1ff; transform: translateY(-2px); }
.cd-rare-chip-fam { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.cd-rare-chip-val { font-weight: 700; font-size: 0.9rem; }
.cd-rare-chip-count { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.72rem; color: var(--muted); }

/* === Trait table (unique-items) ===========================================
   A sortable two-level table: dimensions, each expanding to its values. Replaced
   a chip strip that showed example values — you could not see which dimension was
   rare without hunting, which is the question this section exists to answer. */
.cd-traittable-scroll { overflow-x: auto; }
/* Standing explanation of the "N · N%" pairs, so the numbers do not depend on a
   hover to be understood. */
.cd-traittable-legend {
    margin: 0.35rem 0 0;
    font-size: 0.76rem;
    color: var(--muted);
}
.cd-traittable-legend strong { color: var(--text); font-weight: 600; }

.cd-traittable { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.cd-traittable th, .cd-traittable td { padding: 0.45rem 0.6rem; text-align: left; vertical-align: middle; }
.cd-traittable thead th { border-bottom: 1px solid var(--line); white-space: nowrap; }
.cd-traittable .num { text-align: right; }
.cd-tt-row { border-top: 1px solid var(--line); }
.cd-tt-row:first-child { border-top: 0; }
.cd-tt-row.is-open { background: rgba(93,209,255,0.04); }
.cd-tt-name { font-weight: 600; overflow-wrap: anywhere; }

.cd-tt-sortbtn {
    display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer;
    padding: 0; border: 0; background: none; color: var(--muted);
    font: inherit; font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.cd-tt-sortbtn:hover, .cd-tt-sortbtn:focus-visible { color: var(--text); }
.cd-tt-sortbtn.is-sorted { color: #5dd1ff; }
/* The arrow only appears on the sorted column, so an unsorted header stays quiet. */
.cd-tt-arrow { font-size: 0.6rem; opacity: 0; }
.cd-tt-sortbtn.is-sorted .cd-tt-arrow { opacity: 1; }
.cd-tt-sortbtn.is-sorted .cd-tt-arrow::before { content: "\\25B2"; }
.cd-tt-sortbtn.is-sorted.is-desc .cd-tt-arrow::before { content: "\\25BC"; }

.cd-tt-expander { width: 2rem; }
.cd-tt-toggle {
    width: 1.5rem; height: 1.5rem; cursor: pointer; line-height: 1;
    border: 1px solid var(--line); border-radius: 6px;
    background: rgba(255,255,255,0.02); color: inherit; font: inherit; font-size: 0.8rem;
}
.cd-tt-toggle:hover, .cd-tt-toggle:focus-visible { border-color: #5dd1ff; }
.cd-tt-values > td { padding-top: 0; padding-bottom: 0.8rem; }
.cd-traitstrip-vals { display: flex; flex-wrap: wrap; gap: 0.4rem; }

@media (max-width: 640px) {
    .cd-traittable { font-size: 0.8rem; }
    .cd-traittable th, .cd-traittable td { padding: 0.4rem 0.35rem; }
}

/* Chips are <button>, not <a>: they filter in place rather than navigating. */
.cd-traitchip {
    display: inline-flex; align-items: baseline; gap: 0.4rem; cursor: pointer;
    padding: 0.28rem 0.6rem; border: 1px solid var(--line); border-radius: 999px;
    background: rgba(255,255,255,0.02); color: inherit; font: inherit;
    transition: border-color 160ms ease, background-color 160ms ease;
}
.cd-traitchip:hover, .cd-traitchip:focus-visible { border-color: #5dd1ff; background: rgba(93,209,255,0.08); }
.cd-traitchip-val { font-weight: 600; font-size: 0.8rem; }
.cd-traitchip-fam { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.cd-traitchip-count { font-size: 0.7rem; color: var(--muted); }
.cd-traitchip.is-rare { border-color: rgba(93,209,255,0.35); }



.cd-lightbox {
    position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
    padding: 4vh 4vw;
}
.cd-lightbox[hidden] { display: none; }
.cd-lightbox-backdrop { position: absolute; inset: 0; border: 0; background: rgba(4, 8, 18, 0.82); cursor: zoom-out; }
.cd-lightbox-panel {
    position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.9rem;
    max-width: min(560px, 92vw); max-height: 92vh; background: var(--surface, #11182a);
    border: 1px solid var(--line); border-radius: 22px; padding: 1rem; overflow: auto;
}
.cd-lightbox-x {
    position: absolute; top: 8px; right: 12px; z-index: 2; border: 0; background: none;
    color: var(--muted); font-size: 1.8rem; line-height: 1; cursor: pointer;
}
.cd-lightbox-img { width: 100%; border-radius: 14px; border: 1px solid var(--line); }
.cd-lightbox-title { margin: 0; font-size: 1.05rem; }
.cd-lightbox-traits { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cd-lightbox-trait {
    display: inline-flex; gap: 5px; padding: 3px 9px; border: 1px solid var(--line);
    border-radius: 999px; font-size: 0.72rem; color: var(--text);
}
.cd-lightbox-trait em { color: var(--muted); font-style: normal; }

/* ==========================================================================
   Digital Slab — public virtual-slab component (promoted from /dev/slab-lab).
   Markup: templates/v2/components/_slab.html (digital_slab macro).
   Behavior: static/js/slab.js (pointer tilt + flip).
   Reuses .comic-slab plumbing (flip faces, rarity theming, back panel).
   ========================================================================== */

/* Stage: provides perspective (required for the ply stack's translateZ depth)
   and the display-shelf backdrop. */
.slab-stage {
    display: flex;
    justify-content: center;
    padding: 2.25rem 1rem 2.75rem;
    background: radial-gradient(120% 100% at 50% 0%, #16233c 0%, #0d1526 60%, #0a1120 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    overflow: hidden;
    perspective: 1200px;
}

/* 3D wrapper: pointer tilt via CSS custom properties set by slab.js. */
.slab3d {
    position: relative;
    width: 100%;
    max-width: 420px;
    transform-style: preserve-3d;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.slab3d.is-live { transition: transform 0.06s linear; }
.slab-stage .comic-slab--lg { max-width: 420px; }

/* Registered so the showcase keyframes can interpolate the glare position;
   inherits:true keeps the JS-set values on .slab3d visible to the glare child. */
@property --gx { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --gy { syntax: '<percentage>'; inherits: true; initial-value: 25%; }

/* Specular gloss — follows the pointer, floated in front of the case so the
   art reads as sitting inside the acrylic. */
.slab3d-glare {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.25s ease;
    mix-blend-mode: screen;
    transform: translateZ(18px);
    background: radial-gradient(340px circle at var(--gx, 50%) var(--gy, 25%),
        rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.09) 32%, rgba(255, 255, 255, 0) 62%);
}
.slab3d.is-live .slab3d-glare { opacity: 1; }

/* Case depth: acrylic edge stack + tilt-reactive ground shadow. */
.slab3d--deep .comic-slab-inner {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.10) inset,
        0 -1px 0 rgba(0, 0, 0, 0.40) inset,
        0 0 0 1px rgba(255, 255, 255, 0.07) inset,
        0 2px 0 rgba(148, 163, 184, 0.18),
        0 4px 0 rgba(100, 116, 139, 0.14),
        0 6px 0 rgba(71, 85, 105, 0.12),
        0 8px 0 rgba(51, 65, 85, 0.10),
        0 30px 50px -18px rgba(0, 0, 0, 0.85);
}
.slab3d--deep::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -2.1rem;
    height: 1.4rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    filter: blur(14px);
    z-index: -1;
    transform: translateX(calc(var(--ryn, 0) * -14px)) scaleX(calc(1 - var(--tilt-amt, 0) * 0.12));
}

/* Real thickness: parallax ply stack (translateZ layers behind the case). */
.slab3d--thick > .comic-slab { transform: translateZ(12px); }
.slab3d-ply {
    position: absolute;
    inset: 0;
    border-radius: 15px;
    pointer-events: none;
    background: rgba(148, 163, 184, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.5) inset;
    transform: translateZ(var(--z, -4px));
}

/* Showcase mode: hands-free idle orbit + gloss sweep; hover takes over. */
@keyframes slab-orbit {
    0%, 100% { transform: rotateX(2.5deg) rotateY(-9deg); }
    50% { transform: rotateX(-1.5deg) rotateY(9deg); }
}
@keyframes slab-sweep {
    0%, 100% { --gx: 18%; opacity: 0.75; }
    50% { --gx: 82%; opacity: 0.9; }
}
.slab3d--orbit:not(.is-live) { animation: slab-orbit 7s ease-in-out infinite; }
.slab3d--orbit:not(.is-live) .slab3d-glare { animation: slab-sweep 7s ease-in-out infinite; opacity: 0.8; }
@media (prefers-reduced-motion: reduce) {
    .slab3d--orbit:not(.is-live),
    .slab3d--orbit:not(.is-live) .slab3d-glare { animation: none; }
}

/* ══ Slab personalization (Slab Studio) ════════════════════════════════════
   Shareable live-view look options: environment (backdrop), motion (idle
   animation), glow (rarity aura), material (case body), pose (resting angle).
   All are driven by data-attributes on the stage and are inert until set — a
   plain .slab-stage (asset section, viewer) keeps the default look. The Studio
   control panel below sets them; the permalink also seeds them server-side from
   URL params so a shared look renders with no flash. Prototyped in
   /dev/slab-lab (routes/dev_lab.py). */

/* Rarity glow — a colored aura radiating from behind the slab. Screen-blended
   so it adds light on a dark scene, sized larger than the slab so the halo
   spills past its edges. Reads the stage's --rarity-color (from data-rarity). */
.slab-glow {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
    mix-blend-mode: screen;
    background: radial-gradient(58% 50% at 50% 50%, var(--rarity-color, #5dd1ff) 0%,
        color-mix(in srgb, var(--rarity-color, #5dd1ff) 45%, transparent) 40%, rgba(0,0,0,0) 74%);
    filter: blur(28px); transition: opacity 0.3s ease;
}
.slab-stage[data-glow] .slab3d { position: relative; z-index: 1; }
.slab-stage[data-glow="off"]   .slab-glow { opacity: 0; }
.slab-stage[data-glow="soft"]  .slab-glow { opacity: 0.6; }
.slab-stage[data-glow="bloom"] .slab-glow { opacity: 0.95; }

/* Environment — stage backdrop. */
.slab-stage[data-env="midnight"]  { background: radial-gradient(120% 100% at 50% 0%, #16233c 0%, #0d1526 60%, #0a1120 100%); }
.slab-stage[data-env="studio"]    { background: radial-gradient(120% 100% at 50% -10%, #eef2f8 0%, #ccd6e4 55%, #aab6c9 100%); border-color: rgba(15,23,42,0.12); }
.slab-stage[data-env="spotlight"] { background:
    radial-gradient(72% 56% at 50% 28%, rgba(255,240,210,0.36) 0%, rgba(255,240,210,0.06) 42%, rgba(0,0,0,0) 68%),
    radial-gradient(150% 130% at 50% 135%, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0) 55%),
    #070910; }
.slab-stage[data-env="void"]      { background: #04060b; }
.slab-stage[data-env="rarity"]    { background: radial-gradient(115% 92% at 50% 0%, color-mix(in srgb, var(--rarity-color, #5dd1ff) 30%, #0b1220) 0%, #060a12 72%); }
.slab-stage[data-env="azure"]     { background: radial-gradient(120% 100% at 50% 0%, #12385e 0%, #0a1f38 60%, #05101f 100%); }
.slab-stage[data-env="ember"]     { background: radial-gradient(130% 100% at 50% 118%, #4a2a1a 0%, #2a130a 45%, rgba(0,0,0,0) 82%), #120703; }
.slab-stage[data-env="verdant"]   { background: radial-gradient(85% 85% at 50% 48%, #16483a 0%, #0a231a 55%, #04110c 100%); }
/* Custom — user color mixed into a dark base (intensity = mix %); --env-light
   swaps the anchor. Fades to transparent over a solid base so no seam appears. */
.slab-stage[data-env="custom"]                            { background: radial-gradient(115% 92% at 50% 0%, color-mix(in srgb, var(--env-base, #1e88e5) var(--env-intensity, 32%), #0b1220) 0%, #060a12 72%); }
.slab-stage[data-env="custom"][data-env-light="center"]   { background: radial-gradient(85% 85% at 50% 48%, color-mix(in srgb, var(--env-base, #1e88e5) var(--env-intensity, 32%), #0b1220) 0%, #060a12 74%); }
.slab-stage[data-env="custom"][data-env-light="below"]    { background: radial-gradient(130% 100% at 50% 118%, color-mix(in srgb, var(--env-base, #1e88e5) var(--env-intensity, 32%), #0b1220) 0%, rgba(0,0,0,0) 82%), #060a12; }
.slab-stage[data-env="custom"][data-env-light="spotlight"]{ background:
    radial-gradient(72% 56% at 50% 28%, color-mix(in srgb, var(--env-base, #1e88e5) var(--env-intensity, 32%), transparent) 0%, rgba(0,0,0,0) 62%),
    radial-gradient(150% 130% at 50% 135%, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0) 55%),
    #060a12; }

/* Motion — idle animation; hover takes over via :not(.is-live). Stage-scoped so
   these beat the base .slab3d--orbit rule. */
@keyframes slab-showcase { 0%, 100% { transform: rotateX(3deg) rotateY(-16deg); } 50% { transform: rotateX(-2deg) rotateY(16deg); } }
@keyframes slab-float { 0%, 100% { transform: translateY(-7px) rotateX(4.5deg) rotateY(-4deg); } 50% { transform: translateY(7px) rotateX(-2deg) rotateY(4deg); } }
.slab-stage[data-motion="sway"]     .slab3d--orbit:not(.is-live) { animation: slab-orbit 7s ease-in-out infinite; }
.slab-stage[data-motion="showcase"] .slab3d--orbit:not(.is-live) { animation: slab-showcase 9s ease-in-out infinite; }
.slab-stage[data-motion="float"]    .slab3d--orbit:not(.is-live) { animation: slab-float 6s ease-in-out infinite; }
.slab-stage[data-motion="still"]    .slab3d--orbit:not(.is-live) { animation: none; transform: rotateX(var(--rest-rx, 2deg)) rotateY(var(--rest-ry, -8deg)); }
.slab-stage[data-motion="still"]    .slab3d--orbit:not(.is-live) .slab3d-glare { animation: none; }
.slab-stage[data-pose="front"] { --rest-rx: 0deg; --rest-ry: 0deg; }
.slab-stage[data-pose="hero"]  { --rest-rx: 4deg; --rest-ry: -10deg; }
.slab-stage[data-pose="left"]  { --rest-rx: 3deg; --rest-ry: -18deg; }
.slab-stage[data-pose="right"] { --rest-rx: 3deg; --rest-ry: 18deg; }

/* Material — the plies ARE the visible acrylic edges, so drive their fill/edge,
   the interior tint, and the glare character. */
.slab-stage[data-material] .slab3d-ply { background: var(--ply-fill, rgba(148,163,184,0.05)); border-color: var(--ply-edge, rgba(255,255,255,0.10)); }
.slab-stage[data-material="acrylic"] { --ply-fill: rgba(148,163,184,0.05);  --ply-edge: rgba(255,255,255,0.10); }
.slab-stage[data-material="smoked"]  { --ply-fill: rgba(12,18,32,0.55);     --ply-edge: rgba(255,255,255,0.04); }
.slab-stage[data-material="clear"]   { --ply-fill: rgba(190,214,240,0.015); --ply-edge: rgba(255,255,255,0.36); }
.slab-stage[data-material="frosted"] { --ply-fill: rgba(226,232,240,0.11);  --ply-edge: rgba(255,255,255,0.16); }
.slab-stage[data-material="smoked"]  .comic-slab-inner { box-shadow: inset 0 0 80px rgba(2,6,23,0.78), 0 30px 50px -18px rgba(0,0,0,0.85); }
.slab-stage[data-material="clear"]   .comic-slab-inner { box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 0 0 1px rgba(255,255,255,0.14), inset 0 0 24px rgba(180,220,255,0.06), 0 30px 50px -18px rgba(0,0,0,0.85); }
.slab-stage[data-material="frosted"] .comic-slab-inner { box-shadow: inset 0 0 40px rgba(226,232,240,0.12), 0 30px 50px -18px rgba(0,0,0,0.85); }
.slab-stage[data-material="clear"]   .slab3d-glare { background: radial-gradient(300px circle at var(--gx,50%) var(--gy,25%), rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.12) 28%, rgba(255,255,255,0) 58%); }
.slab-stage[data-material="frosted"] .slab3d-glare { background: radial-gradient(420px circle at var(--gx,50%) var(--gy,25%), rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.07) 42%, rgba(255,255,255,0) 72%); }
.slab-stage[data-material="smoked"]  .slab3d-glare { background: radial-gradient(320px circle at var(--gx,50%) var(--gy,25%), rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.05) 34%, rgba(255,255,255,0) 62%); }

/* ── Slab Studio: compact, collapsible customization panel ────────────────
   Space-conscious for boxed-in surfaces — a toggle reveals a chip grid. Uses
   the theme tokens (--surface/--line/--border/--text/--muted/--ink) so it
   reads correctly in BOTH light and dark mode. */
.slab-studio { margin: 0.85rem auto 0; max-width: 720px; text-align: center; }
/* "Customize the look" is a headline feature — give the toggle a special accent
   (brand-tinted fill, brand ring, sparkle) so people notice it's more than a
   plain button, and center it under the controls. */
.slab-studio-toggle { display: inline-flex; align-items: center; gap: 0.4rem; font: inherit; font-size: 0.82rem;
    font-weight: 600; color: var(--ink); background: color-mix(in srgb, var(--brand) 12%, var(--surface-2));
    border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--border));
    border-radius: 999px; padding: 0.4rem 0.95rem; cursor: pointer;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 9%, transparent); transition: box-shadow 0.2s ease, border-color 0.2s ease; }
.slab-studio-toggle:hover { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent); }
.slab-studio-spark { font-size: 0.9em; line-height: 1; }
/* The panel is a left-aligned grid — the centered text-align on the wrapper
   must not cascade into it. */
.slab-studio-panel { text-align: left; }
.slab-studio-caret { transition: transform 0.2s ease; font-size: 0.7em; }
.slab-studio-toggle[aria-expanded="true"] .slab-studio-caret { transform: rotate(180deg); }
.slab-studio-panel { margin-top: 0.75rem; padding: 0.85rem 1rem; border: 1px solid var(--line);
    border-radius: 14px; background: var(--surface-2);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.7rem 1.25rem; }
.slab-studio-group { display: flex; flex-direction: column; gap: 0.4rem; }
.slab-studio-group > span { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.slab-studio-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
/* Chips: a visible swatch + label; the radio itself is visually hidden but
   focusable, and the selected chip gets a brand ring. */
.slab-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.74rem; color: var(--text);
    padding: 0.2rem 0.5rem 0.2rem 0.35rem; border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
    background: var(--surface); }
.slab-chip:hover { border-color: var(--brand); }
.slab-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.slab-chip:has(input:checked) { border-color: var(--brand); color: var(--ink); font-weight: 600;
    background: color-mix(in srgb, var(--brand) 14%, transparent); }
.slab-chip:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 1px; }
.slab-swatch { display: inline-block; width: 15px; height: 15px; border-radius: 4px;
    border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(0,0,0,0.25) inset; flex-shrink: 0; }
.slab-studio-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.7rem; margin-top: 0.5rem;
    padding: 0.55rem 0.7rem; border: 1px dashed var(--border); border-radius: 10px; grid-column: 1 / -1; }
.slab-studio-custom > span { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.slab-studio-custom label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.74rem; color: var(--text); }
.slab-studio-custom input[type="color"] { width: 30px; height: 22px; padding: 0; border: 1px solid var(--border); border-radius: 5px; background: none; cursor: pointer; }
.slab-studio-custom input[type="range"] { accent-color: var(--brand); }
.slab-custom-val { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; color: var(--muted); min-width: 2.6em; }
.slab-studio-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.slab-studio-btn { font-size: 0.72rem; color: var(--text); background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 999px; padding: 0.22rem 0.65rem; cursor: pointer; }
.slab-studio-btn:hover { border-color: var(--brand); }
.slab-studio-hint { flex-basis: 100%; margin: 0; font-size: 0.68rem; color: var(--muted); }

/* Drag-to-turn: grab the slab and drag horizontally to flip it. The art is an
   <img> that otherwise ghost-drags / text-selects, so suppress user-select +
   native drag on the case and take over touch gestures. */
.slab-stage[data-slab-drag] { touch-action: pan-y; }
.slab-stage[data-slab-drag] .comic-slab { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.slab-stage[data-slab-drag] .comic-slab img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
.slab-stage[data-slab-drag] .comic-slab.is-dragging { cursor: grabbing; }
.slab-stage[data-slab-drag] .comic-slab.is-dragging .comic-slab-inner { transition: none; }
/* Flip control lives OFF the case on the permalink — hide the in-case button. */
.slab-stage--permalink .comic-slab-flip-hint { display: none; }

/* Fading side arrows — the reliable click/tap-to-turn control (the primary
   affordance; drag is the bonus). Always tappable on touch (no hover). */
.slab-turn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
    width: 2.4rem; height: 2.4rem; display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; line-height: 1; color: #fff; cursor: pointer;
    background: rgba(10,16,30,0.55); border: 1px solid rgba(255,255,255,0.22); border-radius: 999px;
    opacity: 0; transition: opacity 0.2s ease, background 0.2s ease; }
.slab-turn--left { left: 0.6rem; }
.slab-turn--right { right: 0.6rem; }
.slab-turn:hover { background: rgba(10,16,30,0.85); }
.slab-stage:hover .slab-turn, .slab-turn:focus-visible { opacity: 1; }
@media (hover: none) { .slab-turn { opacity: 0.9; } }

/* Off-case Flip button row under the stage. */
.slab-controls { display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.85rem; }

/* Asset-page slab CTA — centered, top of the segment, with the customize
   sparkle so it reads as the gateway to the same feature as "Customize the
   look" on the permalink. */
.asset-slab-actions { justify-content: center; align-items: center; margin: 0.35rem 0 0.25rem; flex-wrap: wrap; gap: 0.75rem; }
.slab-cta-spark { font-size: 0.95em; line-height: 1; }

/* Static teaser (asset page): the whole card is a link to the permalink. */
.slab-teaser { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; text-decoration: none; color: inherit; }
.slab-teaser .slab-stage { width: 100%; cursor: pointer; }
.slab-teaser-cta { align-self: center; }

/* -- Case layout ("labcase"): CGC-style proportions: compact label (~12%),
   art window (~82%), micro info bar + asset-id lip (~6%). -- */
.labcase .comic-slab-inner { aspect-ratio: 13 / 20; }
.labcase .comic-slab-face { padding: 0.55rem; gap: 0.45rem; }

.labcase-label {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.7));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 0.5rem 0.6rem 0.45rem;
    overflow: hidden;
}
.labcase-label::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--slab-color);
    box-shadow: 0 0 12px var(--slab-color);
}
.labcase-label-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.6rem;
    min-width: 0;
}
.labcase-title-wrap { min-width: 0; }
.labcase-title {
    margin: 0;
    /* Explicit light color: the slab is a dark object, so the name must NOT
       inherit the page's (light-theme) dark ink onto the dark label band. */
    color: #eff3fb;
    font-weight: 700;
    font-size: 0.78rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.labcase-sub {
    margin: 0.1rem 0 0;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.68);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.labcase-gradecert {
    flex-shrink: 0;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
}
.labcase-grade { font-size: 1.1rem; font-weight: 800; line-height: 1; color: var(--slab-color); }
/* Collector-set nameplate. Sits above the owner line and deliberately shares
   its typographic weight -- a nickname is provenance, not a title, and must not
   compete with the real item name at the top of the label. */
.labcase-nameplate {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    min-width: 0;
    margin-bottom: 0.15rem;
}
.labcase-nameplate-label {
    flex-shrink: 0;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.45);
}
.labcase-nameplate-text {
    font-size: 0.62rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.labcase-ownerline { display: flex; align-items: baseline; gap: 0.4rem; min-width: 0; }
.labcase-ownerline-label {
    flex-shrink: 0;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.45);
}
.labcase-ownerline code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.58rem;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Art window: media keeps its intrinsic aspect, floating on case material
   with small even margins — nothing is ever cropped. */
.labcase-art {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.07), rgba(15, 23, 42, 0.45));
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 5px;
    overflow: hidden;
}
.labcase-art img,
.labcase-art video {
    max-height: 96%;
    max-width: 92%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 2px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
/* video has no intrinsic size until metadata loads — hold a card-ish ratio
   so the case doesn't reflow (auto = intrinsic wins once known) */
.labcase-art video { height: 96%; aspect-ratio: auto 2 / 3; }

/* Self-heal fallback (see static/js/img-retry.js): once retries are exhausted
   the image gets .img-failed. Replace the browser's broken-image glyph and the
   alt text with a calm placeholder tile so a genuinely dead link degrades
   gracefully instead of showing a jarring broken icon. */
img.img-failed {
    min-width: 3rem;
    min-height: 3rem;
    color: transparent;                 /* hide the alt text */
    background: linear-gradient(135deg,
        var(--surface-2, rgba(148, 163, 184, 0.1)),
        var(--surface, rgba(15, 23, 42, 0.6)));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    object-fit: cover;
}

.labcase-microbar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    flex-shrink: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.6);
    padding: 0 0.15rem;
}
.labcase-micro-rarity {
    /* Brighten the rarity hue toward white so even muted tiers (Common,
       Unknown) stay vibrant; the raw-color line is the pre-color-mix fallback.
       A faint same-hue glow adds the "slab" pop without hurting legibility. */
    color: var(--slab-color);
    color: color-mix(in srgb, var(--slab-color) 72%, white);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-shadow: 0 0 6px color-mix(in srgb, var(--slab-color) 60%, transparent), 0 0 13px color-mix(in srgb, var(--slab-color) 30%, transparent);
}
/* Serial: the number wears the rarity accent (brightened, to match the rarity
   label), while the "/ edition" denominator stays muted so the microbar keeps
   one dominant colored pairing rather than three competing tones. */
.labcase-micro-serial-num {
    color: var(--slab-color);
    color: color-mix(in srgb, var(--slab-color) 72%, white);
    font-weight: 800;
    text-shadow: 0 0 6px color-mix(in srgb, var(--slab-color) 60%, transparent), 0 0 13px color-mix(in srgb, var(--slab-color) 30%, transparent);
}
.labcase-microbar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Preview-feature note. Deliberately a quiet footnote (muted, small, hairline
   rule) rather than a loud banner — it reads as honest transparency, not a
   paywall warning. */
.slab-disclaimer {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    margin: 1.1rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
    font-size: 0.72rem;
    line-height: 1.55;
    color: var(--muted);
}
.slab-disclaimer i {
    color: var(--muted);
    margin-top: 0.12rem;
    flex-shrink: 0;
}
.slab-disclaimer strong { color: var(--ink); font-weight: 700; }

/* Share/Copy readiness spinner — only shown when a cold share card is still
   rendering (dc3GatedShare in slab.js); the common warm path stays instant. */
.dc3-btn.is-loading { pointer-events: none; opacity: 0.9; }
.dc3-btn.is-loading::before {
    content: "";
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-right: 0.45em;
    vertical-align: -0.08em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: dc3-btn-spin 0.6s linear infinite;
}
@keyframes dc3-btn-spin { to { transform: rotate(360deg); } }

/* Full on-chain asset id — the slab's authority line, chain-explorer paste-able. */
.labcase-mint {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6rem;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.labcase-mint--front { flex-shrink: 0; text-align: center; padding: 0 0.15rem; }

/* Attribution wordmark: centered in the seam between label plate and art. */
.labcase-brandmark {
    display: block;
    pointer-events: none;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    font-size: 0.44rem;
    letter-spacing: 0.3em;
    line-height: 1;
    flex-shrink: 0;
    margin: -0.15rem 0;
    color: rgba(255, 255, 255, 0.24);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
/* Back wordmark: mirrors the front brandmark ("DC3.WIKI · DIGITAL SLAB"). Kept
   subdued on purpose, but a touch bolder/brighter than before so it holds its
   own against the customization options. */
.labcase-backbrand {
    margin: 0;
    flex-shrink: 0;
    text-align: center;
    padding-top: 0.15rem;
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

/* Front-info customization: page sets these on <body> (or any ancestor). */
.slabopt-no-mint .comic-slab-face--front .labcase-mint { display: none; }
.slabopt-no-owner .labcase-ownerline { display: none; }
.slabopt-no-mint .labcase-cert-field--id { display: none; }
.slabopt-no-owner .labcase-cert-field--owner { display: none; }

/* ══ Digital Slab certification label ("I" layout, 2026-08-13) ═══════════════
   Real-graded-slab styling: branding band (B&W mascot + wordmark), then a title
   row — item + serial headline with the grade pinned top-left, same row as the
   title, aligned to its first line even if the title wraps — series line,
   centered Owner + Asset ID, and the owner's Remark on its own full-width row
   below. Both faces mirror (back drops the grade & microbar). Replaces the
   "H" bottom-right-grade layout (2026-08-11). Remark is capped at 50 chars
   server-side so it stays ~one line. */
.labcase-cert {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    flex-shrink: 0;
    text-align: center;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.7));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 0.5rem 0.6rem 0.5rem;
    overflow: hidden;
}
.labcase-cert::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--slab-color);
    box-shadow: 0 0 12px var(--slab-color);
}
.labcase-cert-brand { display: flex; align-items: center; justify-content: center; gap: 0.34rem; }
.labcase-cert-badge { height: 1rem; width: auto; opacity: 0.9; }
.labcase-cert-word {
    font-weight: 800; font-size: 0.46rem; letter-spacing: 0.22em;
    text-transform: uppercase; color: rgba(255, 255, 255, 0.6);
}
.labcase-cert-item {
    margin: 0; color: #eff3fb; font-weight: 800; font-size: 0.8rem; line-height: 1.12;
    overflow: hidden; text-overflow: ellipsis;
}
.labcase-cert-series {
    margin: 0.03rem 0 0; font-size: 0.52rem; color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase; letter-spacing: 0.08em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Title row: grade pinned top-left (grid-column 1, aligned to the top so it
   sits level with the title's first line even across a 2-line wrap); title
   itself lives in the center column, kept genuinely centered by the mirrored
   empty column on the right (same width as the grade column). */
.labcase-cert-titlerow {
    display: grid; grid-template-columns: 3.2rem 1fr 3.2rem;
    align-items: start; gap: 0.35rem;
}
.labcase-cert-grade {
    grid-column: 1; justify-self: start; align-self: start;
    font-size: 1.4rem; font-weight: 800; line-height: 1; color: var(--slab-color);
}
.labcase-cert-headline { grid-column: 2; min-width: 0; }
.labcase-cert-foot {
    display: flex; justify-content: center; margin-top: 0.04rem;
}
.labcase-cert-meta {
    display: flex; flex-direction: column; align-items: center; gap: 0.14rem; min-width: 0;
}
.labcase-cert-field { display: flex; align-items: baseline; gap: 0.3rem; min-width: 0; }
.labcase-cert-lbl {
    flex-shrink: 0; font-size: 0.42rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.45);
}
.labcase-cert-val {
    font-size: 0.44rem; color: rgba(255, 255, 255, 0.85);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: -0.01em; word-break: break-all; line-height: 1.2; min-width: 0;
}
.labcase-cert-remark {
    display: flex; align-items: baseline; gap: 0.3rem; text-align: left;
    margin-top: 0.22rem; padding-top: 0.2rem; border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.labcase-cert-remarktext {
    font-style: italic; font-weight: 600; color: #fff; font-size: 0.52rem;
    overflow-wrap: anywhere;
}


/* Share-image readiness. Only ever visible while the card is rendering, so it
   reads as a transient status rather than persistent chrome. */
.slab-card-state {
    align-self: center;
    font-size: 0.78rem;
    color: var(--warn);
    white-space: nowrap;
}

/* Owner affordance on the slab viewer's link out to the item page. */
#slabs-stage-permalink.is-owner {
    color: var(--accent);
    font-weight: 600;
}

/* Slab naming panel (permalink page). Standardized alongside Share/Copy/Flip
   in the top action row — the "Add a remark" button there toggles this panel
   open in place, same collapse pattern as the Slab Studio panel. */
.slab-naming {
    margin: 0.85rem 0 0;
    padding: 0.9rem 1rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.slab-naming-note { margin: 0 0 0.6rem; font-size: 0.82rem; }
.slab-naming-caret { transition: transform 0.2s ease; font-size: 0.7em; margin-left: 0.3em; }
[data-naming-toggle][aria-expanded="true"] .slab-naming-caret { transform: rotate(180deg); }
.slab-naming-editor {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.slab-naming-input {
    flex: 1 1 16rem;
    min-width: 0;
    padding: 0.5rem 0.7rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--bg);
    color: var(--ink);
    font-size: 0.9rem;
}
.slab-naming-error {
    margin: 0.55rem 0 0;
    font-size: 0.85rem;
    color: var(--neg, #ef4444);
}
.slab-naming-public {
    margin: 0.6rem 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
}

/* Asset detail: Digital Slab section */
.asset-slab-card { margin-bottom: 1.25rem; }
.asset-slab-note { margin: 0.25rem 0 0.9rem; font-size: 0.85rem; }
.asset-slab-card .slab-stage { max-width: 620px; margin: 0 auto; }

/* Slab permalink page */
.slab-permalink-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.slab-permalink-title { margin: 0.1rem 0 0; font-size: 1.6rem; }
.slab-permalink-sub { margin: 0.2rem 0 0; }
.slab-permalink-card { margin-bottom: 2rem; }
.slab-permalink-card .slab-stage { max-width: 720px; margin: 0.75rem auto 0; padding-top: 3rem; padding-bottom: 3.25rem; }
.slab-permalink-hint { text-align: center; margin: 0.75rem 0 0; font-size: 0.8rem; }

/* Slab viewer (/slabs) */
.slabs-intro-card { margin-bottom: 1.25rem; }
.slabs-intro-card h1 { margin: 0.15rem 0 0.35rem; }
.slabs-search { position: relative; max-width: 520px; margin-top: 1rem; }
.slabs-search input,
.slabs-q {
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
}
.slabs-search input:focus,
.slabs-q:focus { outline: 2px solid rgba(93, 209, 255, 0.45); outline-offset: 1px; }
.slabs-collection-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    max-height: 340px;
    overflow-y: auto;
    background: var(--card, #101a30);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.5);
}
.slabs-menu-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    text-align: left;
    padding: 0.55rem 0.85rem;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}
.slabs-menu-item:last-child { border-bottom: 0; }
.slabs-menu-item:hover { background: rgba(93, 209, 255, 0.08); }
.slabs-menu-item span { font-size: 0.7rem; color: var(--muted); }

.slabs-stage-card { margin-bottom: 1.25rem; }
.slabs-stage-card .slab-stage { max-width: 680px; margin: 0.75rem auto 0; padding-top: 2.75rem; padding-bottom: 3rem; }
.slabs-browser-card { margin-bottom: 2rem; }
.slabs-browser-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.slabs-group-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0; }
.slabs-chip {
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}
.slabs-chip:hover { border-color: rgba(93, 209, 255, 0.6); }
.slabs-chip.is-active { border-color: #5dd1ff; color: #5dd1ff; }
.slabs-q { max-width: 420px; margin-bottom: 0.9rem; }
.slabs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
}
.slabs-tile {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #0b1220;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
.slabs-tile::before { content: none; } /* no rarity dot on tiles */
.slabs-tile img { width: 100%; height: 100%; object-fit: contain; display: block; }
.slabs-tile:hover { border-color: var(--rarity-color, #5dd1ff); }
/* Owned items (connected wallet matches the baked owner) — same --pos green
   the wallet checklist uses for owned rows, so "you own this" reads the same
   language across the site. */
.slabs-tile.is-owned { border-color: var(--pos, #22c55e); box-shadow: 0 0 0 1px var(--pos, #22c55e); }
.slabs-tile-owned {
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--pos, #22c55e);
    color: #04150c;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.slabs-tile-blank {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.35);
    font-size: 1.4rem;
}
.slabs-tile-serial {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.85rem 0.35rem 0.25rem;
    background: linear-gradient(0deg, rgba(2, 6, 23, 0.85), transparent);
    color: #e2e8f0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.68rem;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.slabs-empty { margin: 1rem 0 0; }
.slabs-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.25rem;
}

/* Slab viewer — intro hero (decorative example slab) + brand-grouped picker */
.slabs-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
}
.slabs-intro-copy { min-width: 0; }
.slabs-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.slabs-hero-stage {
    width: 100%;
    max-width: 280px;
    margin: 0;
    padding: 2.25rem 0.5rem 2.5rem;
    pointer-events: none;      /* clicks fall through to the hero link */
}
a.slabs-hero .slabs-hero-stage { transition: transform 0.2s ease; }
a.slabs-hero:hover .slabs-hero-stage { transform: translateY(-3px); }
.slabs-hero-tag {
    font-size: 0.72rem;
    color: var(--muted);
    text-align: center;
    letter-spacing: 0.02em;
}
a.slabs-hero:hover .slabs-hero-tag { color: var(--brand); }
/* Demo art panel — a gradient stand-in so the hero needs no image fetch. */
.labcase-art--demo {
    width: 88%;
    aspect-ratio: 3 / 4;
    background:
        radial-gradient(circle at 32% 26%, rgba(93, 209, 255, 0.55), transparent 60%),
        radial-gradient(circle at 72% 74%, rgba(179, 136, 255, 0.5), transparent 58%),
        linear-gradient(150deg, #1b2a44, #0a1120);
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
@media (max-width: 720px) {
    .slabs-intro-grid { grid-template-columns: 1fr; }
    .slabs-hero { order: -1; }             /* lead with the slab on mobile */
    .slabs-hero-stage { max-width: 220px; }
}

.slabs-pick-card { margin-bottom: 1.25rem; }
.slabs-pick-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}
.slabs-pick-head .slabs-search { margin-top: 0; flex: 1 1 260px; }

/* Brand-first explorer: pills + on-demand results, so the page loads a handful
   of pills rather than 300+ image tiles (see slabs_viewer.html). */
.slabs-explore { margin-top: 1.1rem; }
.slabs-explore-label {
    margin: 0 0 0.55rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.slabs-brand-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.slabs-brand-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card, #101a30);
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.slabs-brand-pill:hover { border-color: #5dd1ff; transform: translateY(-1px); }
.slabs-brand-pill-count {
    font-size: 0.7rem;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.02rem 0.4rem;
}
.slabs-results { margin-top: 1.25rem; }
.slabs-results-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
}
.slabs-results-title { margin: 0; font-size: 0.95rem; }
.slabs-results-more { margin-top: 1rem; text-align: center; }
/* Collection picker tiles — deliberately mirror the /collections directory
   card (.dir-card): full-width square art, an unclamped title (the old
   44px-icon horizontal row made a collection unrecognizable and cut its name
   off with no way to read the rest), brand eyebrow above the name. Sized a
   notch smaller than the directory's 260px cards (200px) since this is a
   picker embedded above Step 2, not the whole page's content. The
   recent-N-then-"Show all" capping and paced/lazy thumbnail loading in the
   JS above are unchanged — only the tile's look changed, not how many render. */
.slabs-collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.9rem;
}
.slabs-coll-tile {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    text-align: left;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface, var(--card, #101a30));
    color: var(--text);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.slabs-coll-tile[hidden] { display: none; }
.slabs-coll-tile:hover { border-color: #5dd1ff; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
body.theme-dark .slabs-coll-tile {
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.slabs-coll-art {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand-soft, rgba(93, 209, 255, 0.08)), var(--surface-2, #0b1220));
    overflow: hidden;
}
.slabs-coll-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.slabs-coll-mono {
    font-family: "VT323", "Tomorrow", monospace;
    font-size: 2.6rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.22);
}
.slabs-coll-meta { min-width: 0; display: flex; flex-direction: column; gap: 0.22rem; padding: 0.7rem 0.75rem 0.85rem; }
.slabs-coll-brand {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}
.slabs-coll-name {
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink, var(--text));
    /* No clamp — the whole title shows, wrapping onto a second line rather
       than being cut off with no way to read the rest. */
}
.slabs-coll-badge {
    position: absolute;
    top: 0.55rem;
    left: 0.55rem;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
}
.slabs-no-match { margin: 0.5rem 0 0; }

/* === Phase 2b — client-side asset browse controls === */

.browse-controls .section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.browse-control-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin: 1rem 0 1.25rem;
}

.browse-control-row label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted, inherit);
}

.browse-control-row select,
.browse-control-row input[type="search"] {
    min-width: 9rem;
    padding: 0.4rem 0.55rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink);
    font-size: 0.85rem;
    text-transform: none;
    letter-spacing: normal;
}

.browse-control-row .browse-search { flex: 1 1 14rem; }
.browse-control-row .browse-search input { width: 100%; }

.browse-controls .pagination-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

@media (max-width: 720px) {
    .browse-control-row { gap: 0.6rem; }
    .browse-control-row select,
    .browse-control-row input[type="search"] { min-width: 0; width: 100%; }
    .browse-control-row label { flex: 1 1 8rem; }
}

/* === Quests Hub (qh-*) === */
/* See Flask/v2/QUESTS_HUB_PLAN.md. Horizontal "list row" cards (owner
   feedback 2026-08-28: the original vertical cards ran too tall; smaller
   art, info spread out horizontally, items-expand as its own horizontal
   strip below the row) -- mirrors .dir-row's row composition rather than
   .dir-card's stacked one. Staged locally for review, not yet decided. */

.qh-section {
    margin-bottom: var(--pad-section);
}

.qh-section-head {
    margin-bottom: var(--gap-stack);
}

/* Single-column stack of full-width rows, not a card grid. */
.qh-quest-grid {
    display: flex;
    flex-direction: column;
    gap: var(--gap-stack);
}

.qh-quest-card {
    padding: 0;
    overflow: hidden;
}

/* Landed on via a deep link from a collection page's "View full quest on the
   Quests Hub" link -- a brief highlight confirms which card is the target. */
.qh-quest-card:target {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* A wallet completing a quest highlights the whole card, not just the
   checkmark text (owner feedback 2026-08-28: a small green word is easy to
   miss). Tint + border, both from --pos so it stays correct in both themes
   without a hardcoded color. */
.qh-quest-card.is-complete {
    background: color-mix(in srgb, var(--pos) 10%, var(--surface));
    border-color: var(--pos);
}

body.theme-dark .qh-quest-card.is-complete {
    background: color-mix(in srgb, var(--pos) 16%, var(--surface));
}

.qh-quest-row {
    display: flex;
    align-items: stretch;
    gap: 0.9rem;
    padding: 0.75rem 0.9rem;
}

.qh-quest-art {
    position: relative;
    flex: 0 0 84px;
    width: 84px;
    height: 84px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--brand-soft), var(--surface-2));
    display: grid;
    place-items: center;
    overflow: hidden;
}

.qh-quest-img,
video.qh-quest-img {
    width: 100%;
    height: 100%;
    /* contain, not cover: cover cropped most cover art (owner feedback
       2026-08-24) -- matches .dir-card-img's convention (DESIGN_SYSTEM.md §5.6). */
    object-fit: contain;
    display: block;
}

.qh-quest-monogram {
    font-family: "VT323", "Tomorrow", monospace;
    font-size: 1.8rem;
    line-height: 1;
    color: rgba(48, 76, 130, 0.32);
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.45);
}

body.theme-dark .qh-quest-monogram {
    color: rgba(255, 255, 255, 0.20);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.40);
}

.qh-quest-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
}

/* Top row: status, brand, date, reward -- all inline, wraps on narrow
   screens instead of stacking as separate full-width lines. */
.qh-quest-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    row-gap: 0.2rem;
}

.qh-quest-window-lead {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent);
}

.qh-quest-title {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ink);
    line-height: 1.25;
}

.qh-quest-req {
    margin: 0;
    color: var(--ink-2);
    font-size: 0.82rem;
}

.qh-quest-reward-line {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--accent-3);
    font-weight: 600;
    font-size: 0.78rem;
    margin-left: auto;
}

/* Everything secondary -- related collections, official link, live
   completion count, wallet-check status, items toggle -- as one wrapping
   horizontal strip of small segments instead of stacked footer blocks. */
.qh-quest-meta-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem 0.7rem;
    margin-top: 0.15rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--line-soft);
    font-size: 0.76rem;
}

.qh-quest-collections-block {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.qh-quest-footer-label {
    color: var(--muted);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.qh-quest-completed {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    color: var(--muted);
}

.qh-quest-check-status {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.75rem;
    font-weight: 600;
}

.qh-quest-check-status.is-ok {
    color: var(--pos);
}

/* "View your items" expand -- which items, from which collection, at what
   rarity/serial, satisfy this quest (owner feedback 2026-08-24). Opens as
   its own full-width horizontal strip below the row, not inline text
   (owner feedback 2026-08-28). */
.qh-quest-items-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--ink);
    margin-left: auto;
}

.qh-quest-items-toggle i { transition: transform 0.15s ease; font-size: 0.7rem; color: var(--muted); }
.qh-quest-items-toggle[aria-expanded="true"] i { transform: rotate(90deg); }

.qh-quest-items {
    display: flex;
    flex-direction: row;
    gap: 0.6rem;
    overflow-x: auto;
    padding: 0 0.9rem 0.85rem;
}

.qh-item-collection {
    flex: 0 0 auto;
    min-width: 200px;
    max-width: 260px;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    background: color-mix(in srgb, var(--line) 12%, transparent);
}

.qh-item-collection-name {
    font-weight: 700;
    font-size: 0.8rem;
    margin-bottom: 0.35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qh-item-group {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.3rem;
}

.qh-item-group-label {
    font-size: 0.72rem;
    color: var(--muted);
    min-width: 5rem;
}

.qh-item-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.qh-item-chip {
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 700;
}

.qh-wallet-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

@media (max-width: 640px) {
    .qh-quest-row { flex-wrap: wrap; }
    .qh-quest-art { flex-basis: 64px; width: 64px; height: 64px; }
}