:root {
    --font-body: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --bg-top: #101725;
    --bg-bottom: #1f2d45;
    --surface: rgba(14, 22, 35, 0.82);
    --surface-strong: rgba(10, 16, 27, 0.92);
    --surface-border: rgba(154, 175, 201, 0.24);
    --text-main: #eef4ff;
    --text-muted: #9fb0c6;
    --text-soft: #c6d3e4;
    --button-bg: rgba(255, 255, 255, 0.08);
    --button-text: #f2f7ff;
    --button-border: rgba(168, 186, 210, 0.34);
    --button-hover-border: rgba(255, 255, 255, 0.5);
    --button-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
    --panel-shadow: 0 30px 70px rgba(0, 0, 0, 0.28);
    --canvas-frame-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    --control-track: rgba(255, 255, 255, 0.14);
    --control-range: #5ea2ff;
    --handle-border: #5ea2ff;
    --depth-border: #ff9f43;
    --label-panel-bg: rgba(255, 255, 255, 0.06);
    --label-panel-border: rgba(255, 255, 255, 0.1);
    --info-bg: rgba(255, 255, 255, 0.06);
    --canvas-border: rgba(173, 194, 218, 0.25);
    --canvas-bg: #0e1420;
    --input-bg: rgba(255, 255, 255, 0.08);
    --input-border: rgba(176, 194, 216, 0.24);
    --swatch-border: rgba(255, 255, 255, 0.12);
    --swatch-text: rgba(255, 255, 255, 0.92);
    --swatch-shadow: 0 0 6px rgba(0, 0, 0, 0.85);
    --accent-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
    --color-hover-shadow: inset 0 0 0 1px rgba(23, 32, 42, 0.18), 0 10px 18px rgba(0, 0, 0, 0.18);
    --color-active-shadow: inset 0 0 0 1px rgba(23, 32, 42, 0.22), 0 0 0 3px rgba(255, 255, 255, 0.08);
    --tone-red: #ff7070;
    --tone-green: #77de8d;
    --tone-blue: #7d9eff;
}

:root[data-theme='light'] {
    --bg-top: #edf3f9;
    --bg-bottom: #dce5ef;
    --surface: rgba(255, 255, 255, 0.8);
    --surface-strong: rgba(255, 255, 255, 0.92);
    --surface-border: rgba(116, 137, 161, 0.28);
    --text-main: #17202a;
    --text-muted: #5d6f82;
    --text-soft: #425567;
    --button-bg: #ffffff;
    --button-text: #17202a;
    --button-border: rgba(116, 137, 161, 0.35);
    --button-hover-border: rgba(93, 111, 130, 0.6);
    --button-shadow: 0 12px 24px rgba(23, 32, 42, 0.1);
    --panel-shadow: 0 24px 52px rgba(63, 81, 101, 0.14);
    --canvas-frame-bg: linear-gradient(135deg, rgba(236, 241, 246, 0.95), rgba(221, 230, 239, 0.95));
    --control-track: #d2dde8;
    --control-range: #477cb4;
    --handle-border: #477cb4;
    --depth-border: #d97706;
    --label-panel-bg: #eef4fa;
    --label-panel-border: #d5e0ea;
    --info-bg: rgba(20, 33, 50, 0.05);
    --canvas-border: rgba(125, 148, 173, 0.55);
    --canvas-bg: #ffffff;
    --input-bg: rgba(255, 255, 255, 0.92);
    --input-border: rgba(116, 137, 161, 0.28);
    --swatch-border: rgba(23, 32, 42, 0.12);
    --swatch-text: rgba(255, 255, 255, 0.92);
    --swatch-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
    --accent-shadow: 0 16px 34px rgba(23, 32, 42, 0.12);
    --color-hover-shadow: inset 0 0 0 1px rgba(23, 32, 42, 0.18), 0 10px 18px rgba(23, 32, 42, 0.12);
    --color-active-shadow: inset 0 0 0 1px rgba(23, 32, 42, 0.22), 0 0 0 3px rgba(23, 32, 42, 0.12);
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

html:hover,
body:hover {
    scrollbar-color: var(--surface-border) transparent;
}

html {
    background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
}

body {
    margin: 0;
    font-family: var(--font-body);
    background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
    color: var(--text-main);
}

button,
input,
select,
label {
    font: inherit;
}

button {
    padding: 10px 16px;
    border: 1px solid var(--button-border);
    border-radius: 999px;
    background: var(--button-bg);
    color: var(--button-text);
    cursor: pointer;
    font-size: 14px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

button:hover {
    transform: translateY(-1px);
    border-color: var(--button-hover-border);
    box-shadow: var(--button-shadow);
}

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.header-actions {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-shrink: 0;
}

.header-home-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 10px 16px;
    border: 1px solid var(--button-border);
    border-radius: 999px;
    background: var(--button-bg);
    color: var(--button-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.header-home-link:hover {
    transform: translateY(-1px);
    border-color: var(--button-hover-border);
    box-shadow: var(--button-shadow);
}

.header-home-link:focus-visible {
    outline: none;
    border-color: var(--button-hover-border);
    box-shadow: 0 0 0 2px rgba(94, 162, 255, 0.2);
}

.mode-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    min-width: 96px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--button-border);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mode-badge-habitant {
    background: rgba(119, 222, 141, 0.14);
    border-color: rgba(119, 222, 141, 0.35);
    color: #8cf0a2;
}

/* Tier-specific badges (Phase 1 — Campeur/Résident/Artisan/Paysan).
   Hue progression: amber (free) → green (basic) → violet (creator) → gold (top). */
.mode-badge-campeur {
    background: rgba(255, 180, 100, 0.14);
    border-color: rgba(255, 180, 100, 0.40);
    color: #ffcb8a;
}

.mode-badge-resident {
    background: rgba(119, 222, 141, 0.14);
    border-color: rgba(119, 222, 141, 0.35);
    color: #8cf0a2;
}

.mode-badge-artisan {
    background: rgba(190, 150, 255, 0.16);
    border-color: rgba(190, 150, 255, 0.40);
    color: #cdb6ff;
}

.mode-badge-paysan {
    background: rgba(245, 200, 100, 0.16);
    border-color: rgba(245, 200, 100, 0.45);
    color: #f5d77a;
}

.mode-badge-visitor {
    background: rgba(125, 158, 255, 0.14);
    border-color: rgba(125, 158, 255, 0.35);
    color: #b9caff;
}

.theme-toggle {
    min-width: 128px;
    white-space: nowrap;
}

.wallet-connect {
    display: grid;
    grid-template-rows: 14px auto;
    align-items: flex-end;
    gap: 4px;
}

.wallet-connect #walletLabel {
    display: block;
    min-height: 14px;
    line-height: 14px;
    font-size: 11px;
    color: var(--text-muted);
    font-family: monospace;
    white-space: nowrap;
}

.wallet-connect #walletLabel:empty::before {
    content: '\00a0';
}

.wallet-connect #walletBtn {
    align-self: end;
    min-width: 180px;
    white-space: nowrap;
}

.eyebrow {
    margin: 0 0 2px;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.page-subtitle,
#modeHint,
.panel-copy,
.carre-help p {
    color: var(--text-muted);
}

.page-header h1,
.carre-header h1 {
    margin: 0;
    font-size: clamp(18px, 2vw, 28px);
}

.index-page,
.carre-page {
    max-width: 100%;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    min-height: 560px;
    box-sizing: border-box;
    overflow: hidden;
}

.home-page {
    max-width: 1120px;
    margin: 0 auto;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 100dvh;
    box-sizing: border-box;
}

.home-header {
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px;
    border-radius: 24px;
    background: var(--surface);
    border: 1px solid var(--surface-border);
    box-shadow: var(--panel-shadow);
    backdrop-filter: blur(12px);
}

.home-header-actions {
    width: auto;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.home-title-block {
    min-width: 0;
}

.home-title-block h1 {
    margin: 0;
    font-size: clamp(24px, 3.4vw, 44px);
    line-height: 1.08;
}

.home-hero {
    background: var(--surface-strong);
    border: 1px solid var(--surface-border);
    border-radius: 24px;
    padding: clamp(24px, 4vw, 54px);
    box-shadow: var(--panel-shadow);
    display: grid;
    gap: 22px;
}

.home-lead {
    margin: 0;
    max-width: 68ch;
    font-size: clamp(16px, 2vw, 21px);
    line-height: 1.62;
    color: var(--text-soft);
}

.home-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 13px 26px;
    border-radius: 999px;
    border: 1px solid var(--button-border);
    background: var(--button-bg);
    color: var(--button-text);
    text-decoration: none;
    font-weight: 700;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.home-cta:hover {
    transform: translateY(-1px);
    border-color: var(--button-hover-border);
    box-shadow: var(--button-shadow);
}

.home-shell {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.home-main {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.home-sidebar {
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 24px;
    box-shadow: var(--panel-shadow);
    backdrop-filter: blur(12px);
    padding: 20px;
}

.index-shell {
    flex: 1;
    min-height: 0;
}

.page-header,
.carre-header {
    margin-bottom: 10px;
    flex-shrink: 0;
}

.index-shell,
#palette-container,
#canvas-container,
.carre-help {
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 24px;
    box-shadow: var(--panel-shadow);
    backdrop-filter: blur(12px);
}

.index-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 20px;
    align-items: stretch;
    padding: 20px;
    overflow: hidden;
}

.index-stage {
    flex: 1;
    min-height: 0;
}

.index-stage,
.canvas-frame {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
    border-radius: 22px;
    background: var(--canvas-frame-bg);
    height: 100%;
    box-sizing: border-box;
}

#zoomCanvas {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    border: 1px solid var(--canvas-border);
    box-shadow: var(--accent-shadow);
    background: #000000;
    image-rendering: pixelated;
    touch-action: none; /* prevent browser pinch-zoom; handled by JS */
}

#thumbnails,
#selectionOverlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.published-thumbnail {
    image-rendering: pixelated;
    border-radius: 2px;
    pointer-events: none;
}

.drawing-modal-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(8, 12, 18, 0.74);
    z-index: 1000;
}

.drawing-modal-overlay[hidden] {
    display: none;
}

.drawing-modal {
    width: min(1080px, 96vw);
    max-height: 92vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 18px;
    padding: 20px;
    border-radius: 20px;
    background: var(--surface-strong);
    border: 1px solid var(--surface-border);
    box-shadow: var(--panel-shadow);
}

.drawing-modal-viewer {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    padding: 12px;
    border-radius: 16px;
    background: var(--canvas-frame-bg);
    border: 1px solid var(--surface-border);
}

.drawing-modal-viewer img {
    width: 100%;
    max-height: 66vh;
    object-fit: contain;
    border-radius: 10px;
    image-rendering: pixelated;
}

.drawing-modal-meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.drawing-modal-meta h2 {
    margin: 0;
}

.drawing-modal-row {
    margin: 0;
    font-size: 13px;
    color: var(--text-soft);
}

.drawing-modal-row strong {
    color: var(--text-main);
}

.drawing-modal-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.drawing-shell {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 24px;
    box-shadow: var(--panel-shadow);
    backdrop-filter: blur(12px);
}

.drawing-main {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.drawing-main h1 {
    margin: 0;
    font-size: clamp(20px, 2.2vw, 32px);
}

.drawing-stage {
    flex: 1;
    min-height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: var(--canvas-frame-bg);
    border: 1px solid var(--surface-border);
    padding: 16px;
}

.drawing-stage img {
    width: min(100%, 900px);
    max-width: 100%;
    max-height: 74vh;
    object-fit: contain;
    image-rendering: pixelated;
    border-radius: 10px;
}

.strata-svg-host {
    width: min(100%, 900px);
    max-width: 100%;
    max-height: 74vh;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.strata-svg-host svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}

.strata-page {
    height: calc(100dvh - 24px);
    min-height: 560px;
    overflow: hidden;
}

.strata-page .drawing-shell {
    flex: 1;
    min-height: 0;
}

.strata-page .drawing-main {
    height: 100%;
}

.strata-page .drawing-stage {
    min-height: 0;
    padding: clamp(8px, 1.2vw, 14px);
    align-items: center;
    justify-content: center;
}

.strata-page .strata-svg-host {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
}

body.index-body .strata-page {
    min-width: 0;
    width: calc(100vw - 24px);
    min-height: 0;
    height: calc(100dvh - 24px);
    max-height: calc(100dvh - 24px);
    overflow: hidden;
}

.drawing-sidebar {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    background: var(--surface-strong);
    border: 1px solid var(--surface-border);
}

.drawing-meta-list {
    display: grid;
    gap: 8px;
}

.drawing-meta-list p {
    margin: 0;
    font-size: 13px;
    color: var(--text-soft);
}

.drawing-meta-list strong {
    color: var(--text-main);
}

.drawing-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.drawing-error {
    padding: 16px;
    border-radius: 14px;
    background: rgba(190, 52, 52, 0.15);
    border: 1px solid rgba(222, 119, 119, 0.45);
    color: var(--text-main);
}

.canvas-wrap {
    position: relative;
    display: flex;
    line-height: 0;
    border-radius: 18px;
    overflow: visible;
}

#canvas {
    display: block;
    max-width: 100%;
    border-radius: 18px;
    border: 1px solid var(--canvas-border);
    box-shadow: var(--accent-shadow);
}

.controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 0;
}

.slider-group {
    display: grid;
    gap: 8px;
}

.slider-group label {
    font-size: 14px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
}

.tone-red {
    color: var(--tone-red);
}

.tone-green {
    color: var(--tone-green);
}

.tone-blue {
    color: var(--tone-blue);
}

.val {
    color: var(--text-muted);
    font-size: 12px;
}

input[type='range'] {
    width: 100%;
    cursor: pointer;
}

.slider-value {
    width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text-main);
}

.color-info {
    margin-top: 4px;
    padding: 16px;
    background: var(--info-bg);
    border-radius: 16px;
    text-align: center;
    border-left: 5px solid var(--surface-border);
}

#hexValue {
    font-family: Consolas, "Courier New", monospace;
    font-size: 18px;
    display: block;
    margin-top: 5px;
    font-weight: 700;
}

#coordValue {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
}

#palettePreview {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 6px;
    overflow-y: auto;
    max-height: 180px;
}

.palette-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin: 10px 0 4px;
}

.palette-empty {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    padding: 8px 0;
}

.palette-swatch {
    width: 100%;
    min-height: 56px;
    border-radius: 14px;
    border: 1px solid var(--swatch-border);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.palette-swatch span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 6px;
    font-size: 11px;
    color: var(--swatch-text);
    text-shadow: var(--swatch-shadow);
}

.palette-tabs-shell {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 18px;
    background: var(--surface-strong);
    border: 1px solid var(--surface-border);
}

.palette-tabs-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
}

.palette-active-rgb {
    margin: 0;
    font-size: 12px;
    color: var(--text-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.02em;
}

.palette-tab-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tab-arrow {
    min-width: 36px;
    padding: 8px 10px;
    border-radius: 12px;
}

.tab-label {
    min-width: 112px;
    text-align: center;
    font-size: 12px;
    color: var(--text-soft);
}

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

.palette-grid-drawing .drawing-color-swatch {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    box-shadow: inset 0 0 0 1px rgba(23, 32, 42, 0.14);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.palette-grid-drawing .drawing-color-swatch:hover {
    transform: translateY(-1px);
    box-shadow: var(--color-hover-shadow);
}

.palette-grid-drawing .drawing-swatch-active {
    border-color: var(--text-main);
    box-shadow: var(--color-active-shadow), 0 0 0 2px var(--text-main) inset;
    transform: translateY(-1px);
}

.legacy-redirect-section {
    max-width: 900px;
    margin: 32px auto 0;
    padding: 24px;
    background: var(--panel-bg, rgba(255,255,255,0.04));
    border: 1px solid var(--panel-border, rgba(255,255,255,0.08));
    border-radius: 18px;
}

.legacy-redirect-link {
    display: inline-block;
    padding: 10px 28px;
    border-radius: 999px;
    background: var(--button-bg);
    color: var(--button-text);
    border: 1px solid var(--button-border);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.18s, background 0.18s;
}

.legacy-redirect-link:hover {
    border-color: var(--button-hover-border);
    background: rgba(255,255,255,0.12);
}

.carre-layout {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 188px minmax(0, 1fr) 280px;
    gap: 20px;
    align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 24px;
    box-shadow: var(--panel-shadow);
    backdrop-filter: blur(12px);
    padding: 20px;
    overflow: hidden;
}

.carre-left-tools {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--surface-strong);
    border: 1px solid var(--surface-border);
    border-radius: 20px;
    overflow-y: auto;
}

.carre-mode-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.carre-mode-buttons.undo-redo-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
}

.carre-mode-buttons.undo-redo-row .icon-btn {
    flex: 1 1 0;
    min-width: 0;
}

.icon-btn {
    padding: 8px;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon-btn:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.carre-mode-buttons button,
.carre-left-tools button,
.carre-action-buttons button {
    width: 100%;
    text-align: center;
}

.carre-mode-buttons button.is-active {
    background: var(--text-main);
    color: var(--bg-top);
    border-color: var(--text-main);
}

#publishToolsSection #publishParallaxBtn.is-active {
    background: var(--text-main);
    color: var(--bg-top);
    border-color: var(--text-main);
}

#publishToolsSection #publishZotropeBtn.is-active {
    background: var(--text-main);
    color: var(--bg-top);
    border-color: var(--text-main);
}

#publishToolsSection #publishPasserelleBtn.is-active {
    background: var(--text-main);
    color: var(--bg-top);
    border-color: var(--text-main);
}

#publishToolsSection .publish-tool-slider {
    display: block;
    width: 100%;
    margin: 4px 0 8px;
    cursor: pointer;
}

.publish-sale-label {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.publish-sale-select,
#salePriceInput {
    width: 100%;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text-main);
    box-sizing: border-box;
}

.publish-sale-select option {
    color: var(--text-main);
    background: var(--surface-strong);
}

.publish-sale-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#soloToolsSection #scissorsToggleBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 8px;
    line-height: 0;
}

#soloToolsSection #scissorsToggleBtn.is-active {
    background: var(--text-main);
    color: var(--bg-top);
    border-color: var(--text-main);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--text-main) 35%, transparent);
}

.carre-stage {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.carre-canvas-row {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: stretch;
}

.carre-stage .canvas-frame {
    flex: 1;
    min-height: 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
    border-radius: 22px;
    background: var(--canvas-frame-bg);
    height: 100%;
    box-sizing: border-box;
}

.carre-stage .canvas-frame #canvas {
    display: block;
    /* Width/height controlled by JS (resizeCanvas) to stay in sync with Paper.js view size */
}

.carre-hint {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
}

#palette-container {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    min-width: 0;
    min-height: 0;
}

#palette-container h3 {
    margin: 0 0 4px;
    font-size: 16px;
}

.palette-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.palette-section-title {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
}

.palette-panel-empty {
    font-size: 12px;
    color: var(--text-muted);
    padding: 6px 0;
    margin: 0;
}

#palette,
#palette-background {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

#colorPaletteGrid,
#bgPaletteGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#selectedColorLabel {
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--label-panel-bg);
    border: 1px solid var(--label-panel-border);
    font-size: 14px;
    color: var(--text-soft);
}

.color {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(23, 32, 42, 0.14);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.color:hover {
    transform: translateY(-1px);
    box-shadow: var(--color-hover-shadow);
}

.color.active {
    border-color: var(--text-main);
    box-shadow: var(--color-active-shadow);
}

.carre-buttons,
.carre-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    margin-top: auto;
}

.carre-buttons button,
.carre-action-buttons button {
    width: 100%;
    text-align: center;
}

.carre-buttons button:disabled,
.carre-action-buttons button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.palette-panel-action {
    width: 100%;
    margin-top: 12px;
    text-align: center;
}

/* Inline slot-color editor (no surrounding frame; the palette section is the frame). */
.slot-color-editor {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.slot-color-editor button {
    width: 100%;
    text-align: center;
}

.slot-color-editor #slotColorInlineInput {
    width: 100%;
    height: 40px;
    border: 1px solid var(--label-panel-border);
    border-radius: 8px;
    padding: 2px;
    background: transparent;
    cursor: pointer;
}

#slotColorPickerRow {
    display: flex;
    align-items: center;
    gap: 8px;
}

#slotColorInput {
    flex: 1;
    min-width: 0;
    height: 32px;
    border: 1px solid var(--label-panel-border);
    border-radius: 6px;
    padding: 0 2px;
    background: transparent;
    cursor: pointer;
}

#slotColorOkBtn {
    flex-shrink: 0;
    width: auto !important;
    padding: 0 14px;
}

#canvas {
    background: var(--canvas-bg);
    cursor: crosshair;
    border-radius: 18px;
    border: 1px solid var(--canvas-border);
    box-shadow: var(--accent-shadow);
}

#visibilityContainer {
    position: relative;
    width: 44px;
    flex-shrink: 0;
    align-self: stretch;
}

#visibilityTrack,
#visibilityRange {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    border-radius: 999px;
}

#visibilityTrack {
    top: 0;
    height: 100%;
    background: var(--control-track);
}

#visibilityRange {
    top: 0;
    height: 0;
    background: var(--control-range);
}

.handle,
#depthHandle {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 6px;
    cursor: pointer;
    background: var(--surface-strong);
}

.handle {
    width: 22px;
    height: 14px;
    border: 2px solid var(--handle-border);
    box-shadow: 0 8px 16px rgba(71, 124, 180, 0.22);
}

#depthHandle {
    width: 18px;
    height: 12px;
    border: 2px solid var(--depth-border);
    box-shadow: 0 8px 16px rgba(217, 119, 6, 0.22);
    display: none;
}

#visibilityRuler {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 9px;
    color: var(--text-muted);
    pointer-events: none;
    overflow: hidden;
}

#visibilityRuler span {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 2px;
    line-height: 1;
}

.carre-help {
    margin-top: 24px;
    padding: 20px 22px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.carre-help strong {
    display: block;
    margin-bottom: 6px;
}

/* Language selector styles */
.language-selector {
    display: flex;
    align-items: center;
}

/* ===================================================
   HYBRID AUTH STYLES (Sprint 1)
   =================================================== */

.auth-hybrid-section {
    margin: 40px auto;
    max-width: 500px;
    padding: 20px;
    border: 1px solid var(--color-border, #ccc);
    border-radius: 8px;
    background: var(--color-bg-secondary, #f5f5f5);
}

[data-theme="dark"] .auth-hybrid-section {
    background: #2a2a2a;
    border-color: #444;
}

.auth-container h2 {
    text-align: center;
    margin: 0 0 20px 0;
    font-size: 1.5rem;
}

/* Auth Tabs */
.auth-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--color-border, #ccc);
}

.auth-tab-btn {
    padding: 10px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 500;
    color: var(--color-text-secondary, #666);
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
}

.auth-tab-btn:hover {
    color: var(--color-text, #000);
}

.auth-tab-btn.auth-tab-active {
    color: var(--color-primary, #007bff);
    border-bottom-color: var(--color-primary, #007bff);
}

[data-theme="dark"] .auth-tab-btn {
    color: #aaa;
}

[data-theme="dark"] .auth-tab-btn.auth-tab-active {
    color: #4a9eff;
}

/* Auth Forms */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-input {
    padding: 10px 12px;
    border: 1px solid var(--color-border, #ccc);
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
}

[data-theme="dark"] .auth-input {
    background: #1a1a1a;
    color: #fff;
    border-color: #444;
}

.auth-input:focus {
    outline: none;
    border-color: var(--color-primary, #007bff);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

/* Auth Buttons */
.auth-button,
.auth-button-secondary {
    padding: 10px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
}

.auth-button {
    background: var(--color-primary, #007bff);
    color: white;
}

.auth-button:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.auth-button-secondary {
    background: var(--color-border, #e0e0e0);
    color: var(--color-text, #000);
}

[data-theme="dark"] .auth-button-secondary {
    background: #333;
    color: #fff;
}

.auth-button-secondary:hover {
    opacity: 0.8;
}

/* Auth Messages */
.auth-message {
    padding: 10px;
    border-radius: 4px;
    font-size: 13px;
    text-align: center;
    min-height: 20px;
}

.auth-message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

[data-theme="dark"] .auth-message.success {
    background: #1e3a2f;
    color: #98c890;
    border: 1px solid #2d5a3d;
}

.auth-message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

[data-theme="dark"] .auth-message.error {
    background: #3a2424;
    color: #ff6b6b;
    border: 1px solid #5a3a3a;
}

/* User Session Block */
.user-session {
    margin-top: 20px;
    padding: 16px;
    background: var(--color-bg-light, #f9f9f9);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 4px;
}

[data-theme="dark"] .user-session {
    background: #1a1a1a;
    border-color: #333;
}

.session-info {
    margin-bottom: 12px;
}

.session-info p {
    margin: 6px 0;
    font-size: 13px;
}

.session-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.session-actions button {
    flex: 1;
    min-width: 120px;
}

/* ===================================================
   DONATIONS & PERKS STYLES (Sprint 2)
   =================================================== */

.donations-section {
    margin: 40px 0;
    padding: 20px;
    background: linear-gradient(135deg, var(--color-bg-secondary, #f5f5f5) 0%, var(--color-bg-light, #fafafa) 100%);
    border-radius: 8px;
    border-left: 4px solid var(--color-primary, #007bff);
}

[data-theme="dark"] .donations-section {
    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
    border-left-color: #4a9eff;
}

.donations-container {
    max-width: 600px;
    margin: 0 auto;
}

.donations-container h2 {
    margin: 0 0 12px 0;
    font-size: 1.4rem;
}

.donations-intro {
    font-size: 13px;
    color: var(--color-text-secondary, #666);
    margin: 0 0 16px 0;
}

[data-theme="dark"] .donations-intro {
    color: #aaa;
}

/* Donation Channels */
.donation-channels {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.donation-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
    text-decoration: none;
    background: white;
    color: #000;
}

.donation-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.donation-btn-kofi {
    background: #FF5E5B;
    color: white;
    border-color: #FF5E5B;
}

.donation-btn-kofi:hover {
    background: #ff4444;
}

.donation-btn-tezos {
    background: #3DBBF3;
    color: white;
    border-color: #3DBBF3;
}

.donation-btn-tezos:hover {
    background: #1fa8e0;
}

.donation-btn-claim {
    background: var(--color-primary, #007bff);
    color: white;
    flex: 1;
}

.donation-btn-claim:hover {
    background: #0056b3;
}

[data-theme="dark"] .donation-btn:not(.donation-btn-kofi):not(.donation-btn-tezos):not(.donation-btn-claim) {
    background: #333;
    color: #fff;
}

.donation-icon {
    font-size: 1.2rem;
}

.donation-text {
    display: none;
}

@media (min-width: 500px) {
    .donation-text {
        display: inline;
    }
}

/* Perks Section */
.perks-section {
    margin: 20px 0;
    padding: 16px;
    background: var(--color-bg-light, #f9f9f9);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 6px;
}

[data-theme="dark"] .perks-section {
    background: #1a1a1a;
    border-color: #333;
}

.perks-section h3 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
}

.perks-intro {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: var(--color-text-secondary, #666);
}

[data-theme="dark"] .perks-intro {
    color: #aaa;
}

.perks-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.perk-item {
    padding: 12px;
    background: white;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 4px;
    font-size: 13px;
    text-align: center;
}

[data-theme="dark"] .perk-item {
    background: #222;
    border-color: #444;
}

.perk-item-label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
}

.perk-item-expiry {
    display: block;
    font-size: 11px;
    color: var(--color-text-secondary, #999);
}

[data-theme="dark"] .perk-item-expiry {
    color: #666;
}

/* ===================================================
   CONTENT MODERATION STYLES (Sprint 3)
   =================================================== */

.moderation-controls {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border, #e0e0e0);
}

[data-theme="dark"] .moderation-controls {
    border-top-color: #444;
}

.flag-btn {
    width: 100%;
    padding: 10px 16px;
    background: #ff6b6b;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
}

.flag-btn:hover {
    background: #ff5252;
    transform: translateY(-1px);
}

.flag-btn:active {
    transform: translateY(0);
}

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(2px);
}

.modal-content {
    background: white;
    border-radius: 8px;
    max-width: 450px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .modal-content {
    background: #2a2a2a;
    color: white;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid var(--color-border, #e0e0e0);
}

[data-theme="dark"] .modal-header {
    border-bottom-color: #444;
}

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

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--color-text-secondary, #666);
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: var(--color-bg-secondary, #f5f5f5);
    color: var(--color-text, #000);
}

[data-theme="dark"] .modal-close:hover {
    background: #333;
    color: white;
}

/* Report Form */
.report-form {
    padding: 20px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 14px;
}

.form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border, #ccc);
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    background: white;
    color: #000;
}

[data-theme="dark"] .form-control {
    background: #1a1a1a;
    color: white;
    border-color: #444;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary, #007bff);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

/* Modal Footer */
.modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 16px 20px;
    border-top: 1px solid var(--color-border, #e0e0e0);
    background: var(--color-bg-light, #f9f9f9);
}

[data-theme="dark"] .modal-footer {
    background: #1a1a1a;
    border-top-color: #444;
}

.btn-primary,
.btn-secondary {
    padding: 10px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
}

.btn-primary {
    background: var(--color-primary, #007bff);
    color: white;
}

.btn-primary:hover {
    background: #0056b3;
    transform: translateY(-1px);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary {
    background: var(--color-border, #e0e0e0);
    color: var(--color-text, #000);
}

[data-theme="dark"] .btn-secondary {
    background: #333;
    color: white;
}

.btn-secondary:hover {
    opacity: 0.8;
}

/* Report Status Messages */
.report-status {
    padding: 16px 20px;
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
    margin: 16px 20px 0 20px;
}

.report-status.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

[data-theme="dark"] .report-status.success {
    background: #1e3a2f;
    color: #98c890;
}

.report-status.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

[data-theme="dark"] .report-status.error {
    background: #3a2424;
    color: #ff6b6b;
}

.report-status.pending {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

[data-theme="dark"] .report-status.pending {
    background: #1f3a3f;
    color: #8cd4e0;
}

.claim-perks-info {
    padding: 12px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    margin-top: 12px;
}

[data-theme="dark"] .claim-perks-info {
    background: #3d3a1f;
    border-color: #7a7532;
}

.claim-perks-info p {
    margin: 0 0 8px 0;
    font-size: 13px;
}

/* Donation Status */
.donation-status {
    margin-top: 16px;
    padding: 12px;
    border-radius: 4px;
    font-size: 13px;
    text-align: center;
}

.donation-status.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

[data-theme="dark"] .donation-status.success {
    background: #1e3a2f;
    color: #98c890;
}

.donation-status.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

[data-theme="dark"] .donation-status.error {
    background: #3a2424;
    color: #ff6b6b;
}

.donation-status.pending {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

[data-theme="dark"] .donation-status.pending {
    background: #1f3a3f;
    color: #8cd4e0;
}

.language-select {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--button-border);
    background: var(--button-bg);
    color: var(--button-text);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-body);
}

.language-select:hover {
    border-color: var(--button-hover-border);
}

.language-select:focus {
    outline: none;
    border-color: var(--button-hover-border);
    box-shadow: 0 0 0 2px rgba(94, 162, 255, 0.2);
}

.language-select option {
    background: var(--surface-strong);
    color: var(--text-main);
    padding: 8px;
}

@media (max-width: 1120px) {
    .index-shell,
    .carre-layout,
    .drawing-shell,
    .drawing-modal {
        grid-template-columns: 1fr;
    }

    .carre-left-tools,
    #palette-container {
        overflow: visible;
    }

    .carre-mode-buttons {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .carre-help {
        grid-template-columns: 1fr;
    }

    #canvas {
        width: min(92vw, 720px);
        height: min(92vw, 720px);
    }
}

@media (max-width: 640px) {
    .index-page,
    .carre-page,
    .home-page {
        padding: 16px;
    }

    .site-header {
        flex-direction: column;
        align-items: stretch;
    }

    .index-shell,
    #palette-container,
    #canvas-container,
    .carre-help {
        border-radius: 18px;
    }

    .carre-buttons,
    .carre-action-buttons {
        flex-direction: column;
    }

    .carre-mode-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .palette-tabs-header {
        flex-direction: column;
        align-items: stretch;
    }

    .palette-tab-nav {
        justify-content: space-between;
    }

    #visibilityContainer {
        width: 44px;
    }

    #thumbnails,
    #selectionOverlay {
        width: calc(100% - 24px);
        height: calc(100% - 24px);
    }

    .drawing-modal-overlay {
        padding: 12px;
    }

    .drawing-modal,
    .drawing-shell {
        padding: 14px;
        gap: 12px;
    }

    .drawing-stage {
        min-height: 320px;
    }

    .home-header {
        padding: 16px;
    }

    .home-shell {
        grid-template-columns: 1fr;
    }
}

/* Fixed desktop layout for index/carre: scale down uniformly, then use global page scroll. */
body.index-body {
    overflow: auto;
}

body.index-body .index-page,
body.index-body .carre-page {
    max-width: none;
    margin: 0 auto;
    overflow: visible;
    width: calc(100vw - 24px);
    height: auto;
}

body.index-body .index-page {
    min-width: 1240px;
    min-height: max(860px, calc(100vh - 24px));
}

body.index-body .carre-page {
    /* Desktop territory: fit the viewport vertically — inner panels scroll
       independently rather than the whole page. Horizontal min-width keeps
       the 3-col layout legible on narrow widescreens. */
    min-width: 1380px;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

/* Keep original desktop structure regardless of viewport width. */
body.index-body .site-header {
    flex-direction: row !important;
    align-items: center !important;
}

body.index-body .index-shell {
    grid-template-columns: minmax(0, 1fr) 280px !important;
}

body.index-body .carre-layout {
    grid-template-columns: 188px minmax(0, 1fr) 280px !important;
}

body.index-body .carre-mode-buttons {
    grid-template-columns: 1fr !important;
}

body.index-body .palette-tabs-header {
    flex-direction: column !important;
    align-items: flex-start !important;
}

body.index-body .palette-tab-nav {
    justify-content: flex-start !important;
}

/* Avoid inner side-column scrollbars; let the page handle overflow globally. */
body.index-body .controls,
body.index-body .carre-left-tools,
body.index-body #palette-container {
    overflow: visible !important;
}

/* ===================================================
   TOUCH DEVICES — Lift forced desktop minimum widths
   so the page never overflows horizontally on tablets
   in landscape orientation.
   =================================================== */
@media (pointer: coarse) {
    body.index-body .index-page,
    .index-page {
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: auto !important;
    }

    body.index-body .carre-page,
    .carre-page {
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: auto !important;
    }

    .strata-page,
    body.index-body .strata-page {
        height: auto !important;
        min-height: 0 !important;
        overflow: auto !important;
        width: auto !important;
        max-height: none !important;
    }

    /* Strata/drawing shell on tablets: keep both columns but cap sidebar,
       let the publication take all the room it can, and make the sidebar
       content wrap so it never overflows the rounded frame. */
    .strata-page .drawing-shell,
    body.index-body .strata-page .drawing-shell {
        grid-template-columns: minmax(0, 1fr) clamp(220px, 26vw, 300px) !important;
        padding: 12px !important;
        gap: 12px !important;
        align-items: stretch !important;
    }
    .strata-page .drawing-sidebar {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .strata-page .drawing-sidebar button,
    .strata-page .drawing-sidebar .flag-btn {
        width: 100%;
        max-width: 100%;
    }
    .strata-page .drawing-stage {
        min-height: 0;
        padding: 8px;
    }
    .strata-page .strata-svg-host,
    body.index-body .strata-page .strata-svg-host {
        /* Cap by both available width AND viewport height so the square
           never pushes shapes beyond the rounded frame. */
        width: min(100%, calc(80svh));
        height: auto;
        max-width: 100%;
        max-height: 80svh;
        margin: 0 auto;
        overflow: hidden;
    }
    .strata-page .strata-svg-host svg {
        overflow: hidden !important;
    }
}

/* Tablet portrait: stack publication on top, sidebar below; SVG = nearly full viewport width. */
@media (pointer: coarse) and (orientation: portrait) {
    .strata-page .drawing-shell,
    body.index-body .strata-page .drawing-shell {
        grid-template-columns: 1fr !important;
    }
    .strata-page .strata-svg-host,
    body.index-body .strata-page .strata-svg-host {
        width: min(96vw, 60svh);
        height: auto;
        max-height: 60svh;
    }
}

/* ===================================================
   STRATA IMMERSIVE MODE (diaporama)
   Default: only the publication. A "Plein ecran" action
   in the sidebar (re)enters immersive; a small close
   button on top-right exits it.
   =================================================== */
.strata-close-immersive {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 60;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.strata-close-immersive[hidden] {
    display: none !important;
}
.strata-close-immersive:hover,
.strata-close-immersive:focus-visible {
    opacity: 1;
    transform: scale(1.05);
    outline: none;
}

body.strata-immersive .site-header {
    display: none !important;
}
body.strata-immersive .strata-page .drawing-sidebar {
    display: none !important;
}
body.strata-immersive,
body.strata-immersive.index-body {
    overflow: hidden !important;
}
body.strata-immersive .strata-page,
body.strata-immersive.index-body .strata-page {
    padding: 0 !important;
    margin: 0 !important;
    width: 100vw !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    gap: 0 !important;
}
body.strata-immersive .strata-page .drawing-shell {
    grid-template-columns: 1fr !important;
    padding: 0 !important;
    gap: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    height: 100dvh !important;
}
body.strata-immersive .strata-page .drawing-main {
    height: 100dvh !important;
    gap: 0 !important;
}
body.strata-immersive .strata-page .drawing-stage {
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    height: 100dvh !important;
    min-height: 0 !important;
    flex: 1 1 auto;
}
body.strata-immersive .strata-page .strata-svg-host {
    width: min(100vw, 100dvh) !important;
    height: min(100vw, 100dvh) !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
}

/* ===================================================
   MOBILE & PORTRAIT ADAPTATION
   — phones any orientation (≤ 767 px)
   — tablets in portrait (≤ 1024 px, orientation: portrait)
   Overrides the desktop-lock rules above so that
   touch devices in portrait get a single-column layout.
   =================================================== */

/* Prevent browser gestures from interfering with canvas drawing/pan */
#canvas {
    touch-action: none;
}

/* Slider handles & tracks must NOT scroll the page when dragged on touch. */
#visibilityContainer,
#visibilityContainer .handle,
#visibilityContainer #depthHandle,
#visibilityContainer #visibilityRange,
#visibilityContainer #visibilityTrack {
    touch-action: none;
}

/* While the user is dragging a visibility/depth handle, freeze page scroll.
   touch-action: none on handles is not enough on iPad Safari to prevent
   the page from scrolling when fingers move outside the handle bounds. */
body.is-slider-dragging {
    overflow: hidden !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
}
body.is-slider-dragging * {
    touch-action: none !important;
}

/* Enlarge tap targets for visibility/depth handles via a transparent hit-area */
.handle::after,
#depthHandle::after {
    content: '';
    position: absolute;
    inset: -16px -12px;
}

/* On touch devices, expand the handle hit-area further so iPad users can
   reliably grab the depth and visibility sliders without "missing" them. */
@media (pointer: coarse) {
    /* Kill horizontal page scroll on touch devices: any 1-2 px of overflow
       (from a swatch shadow, button focus ring, etc.) becomes a swipable
       scrollbar on iOS and shifts the whole layout sideways during a drag. */
    html, body, body.index-body {
        overflow-x: hidden !important;
        max-width: 100vw;
    }
    .handle::after,
    #depthHandle::after {
        inset: -22px -22px;
    }
    /* Drop the soft glow halos around the handles on touch: they bleed past
       the 44 px slider column and visually overlap the neighbouring palette
       column on iPad landscape. The handle borders are enough on their own. */
    .handle,
    #depthHandle {
        box-shadow: none !important;
    }
    /* Keep the canvas strictly inside its rounded frame on touch devices
       so transient layout shifts (URL bar, scroll, slider drag) can never
       make it visually overflow the cadre. */
    .carre-stage .canvas-frame {
        overflow: hidden;
    }
    /* The visibility column hosts handles whose touch hit-area is wider than
       the column itself; raise it above neighbouring columns so a touch on
       the hit-area is always captured by the slider, never by the palette. */
    #visibilityContainer {
        position: relative;
        z-index: 5;
    }
}

@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
    /* --- Remove forced desktop widths (portrait / phone fallback) --- */
    body.index-body .index-page {
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: auto !important;
    }

    body.index-body .carre-page {
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: auto !important;
    }

    .index-page,
    .carre-page {
        height: auto !important;
        min-height: 0 !important;
        overflow: auto !important;
    }

    .strata-page,
    body.index-body .strata-page {
        height: auto !important;
        min-height: 0 !important;
        overflow: auto !important;
        width: auto !important;
        max-height: none !important;
    }

    /* --- Restore responsive header --- */
    body.index-body .site-header {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .header-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .wallet-connect #walletBtn {
        min-width: 0;
        width: 100%;
    }

    .theme-toggle {
        min-width: 0;
        flex: 1;
    }

    /* --- index-shell: 2 col → 1 col, palette below --- */
    body.index-body .index-shell {
        grid-template-columns: 1fr !important;
        overflow: auto !important;
    }

    .index-shell {
        grid-template-columns: 1fr;
        overflow: auto;
    }

    /* --- carre-layout: 3 col → 1 col, canvas on top → tools → palette --- */
    body.index-body .carre-layout {
        grid-template-columns: 1fr !important;
        overflow: auto !important;
    }

    .carre-layout {
        grid-template-columns: 1fr;
        overflow: auto;
    }

    /* Reorder: canvas first, tools second, palette third */
    .carre-stage            { order: 1; }
    .carre-left-tools       { order: 2; overflow-y: visible !important; }
    #palette-container      { order: 3; overflow-y: visible !important; }

    /* Mode buttons: 2-column grid in tool panel */
    body.index-body .carre-mode-buttons {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Palette tabs: restore responsive layout */
    body.index-body .palette-tabs-header {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    body.index-body .palette-tab-nav {
        justify-content: space-between !important;
    }

    /* Inner panels: restore scroll instead of page overflow */
    body.index-body .controls,
    body.index-body .carre-left-tools,
    body.index-body #palette-container {
        overflow: auto !important;
        max-height: 50svh;
    }

    /* Canvas-frame: square, driven by column width.
       Reduce layout padding so available width > 320 px (JS minimum),
       letting the frame contain the canvas without overflow. */
    body.index-body .carre-layout,
    .carre-layout {
        padding: 8px !important;
    }

    .carre-stage .canvas-frame {
        flex: none;
        width: 100%;
        height: auto !important;
        min-height: 0;
        aspect-ratio: 1;
    }

    /* drawing-shell / drawing-modal: single column */
    .drawing-shell,
    .drawing-modal {
        grid-template-columns: 1fr !important;
    }

    /* drawing-modal stacks viewer above meta */
    .drawing-modal-viewer {
        min-height: 220px;
    }

    /* strata SVG: constrain to viewport */
    .strata-svg-host {
        width: 90vw;
        height: 90vw;
        max-height: 70svh;
    }

    /* help grid: single column on mobile */
    .carre-help {
        grid-template-columns: 1fr !important;
    }

    /* Ensure buttons meet 44 px touch target */
    button,
    .header-home-link,
    .home-cta {
        min-height: 44px;
    }

    /* Visibility/depth handles: bigger touch area */
    .handle,
    #depthHandle {
        width: 32px !important;
        height: 24px !important;
    }
}

/* ===================================================
   STRATA — extra overflow safety for tablets.
   Force every part of the cadre to clip its content
   and use border-box so paddings can't expand frames.
   =================================================== */
@media (pointer: coarse) {
    .strata-page,
    .strata-page *,
    .strata-page *::before,
    .strata-page *::after {
        box-sizing: border-box;
    }
    .strata-page .drawing-shell,
    .strata-page .drawing-main,
    .strata-page .drawing-stage {
        overflow: hidden !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }
    .strata-page .strata-svg-host,
    body.index-body .strata-page .strata-svg-host {
        max-width: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }
    .strata-page .strata-svg-host svg,
    body.index-body .strata-page .strata-svg-host svg {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        display: block;
    }
}

/* ===================================================
   TERRITORY — iPad portrait
   Stack: tools (Edition/Publish/Mode) → canvas → horizontal
   visibility slider → palette+actions side by side.
   =================================================== */
@media (pointer: coarse) and (orientation: portrait) {
    /* Reorder: edition tools above canvas, canvas, palette below */
    body.index-body .carre-stage      { order: 2 !important; }
    body.index-body .carre-left-tools { order: 1 !important; }
    body.index-body #palette-container { order: 3 !important; }

    /* Visibility column becomes a horizontal bar under the canvas. */
    body.index-body .carre-canvas-row {
        flex-direction: column !important;
        gap: 8px !important;
    }
    #visibilityContainer.is-horizontal {
        width: 100% !important;
        height: 38px !important;
        flex: none !important;
        align-self: stretch !important;
    }
    #visibilityContainer.is-horizontal #visibilityTrack {
        top: 50% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 4px !important;
        transform: translateY(-50%) !important;
    }
    #visibilityContainer.is-horizontal #visibilityRange {
        top: 50% !important;
        height: 4px !important;
        transform: translateY(-50%) !important;
        /* left/width are driven by JS (updateVisibilityHandles) — do NOT
           pin them here, or the blue range stops following the handles. */
    }
    #visibilityContainer.is-horizontal .handle,
    #visibilityContainer.is-horizontal #depthHandle {
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
    #visibilityContainer.is-horizontal .handle {
        width: 22px !important;
        height: 30px !important;
    }
    #visibilityContainer.is-horizontal #depthHandle {
        width: 18px !important;
        height: 26px !important;
    }
    #visibilityContainer.is-horizontal #visibilityRuler {
        /* Horizontal ruler: flow ticks left→right above the bar so iPad
           portrait keeps the same graduations as landscape. */
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        top: 2px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 10px !important;
    }
    #visibilityContainer.is-horizontal #visibilityRuler span {
        text-align: center;
        flex: 1 1 0;
        min-width: 0;
    }

    /* Palette container: 2-col grid. Palette on the left, action
       buttons (back/import/save…) on the right. */
    body.index-body #palette-container {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        gap: 12px !important;
        align-items: start !important;
        max-height: none !important;
        overflow: visible !important;
    }
    body.index-body #palette-container .palette-tabs-shell,
    body.index-body #palette-container #drawing-color-palette-section {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        min-width: 0;
    }
    body.index-body #palette-container .palette-top-actions {
        grid-column: 2 !important;
        grid-row: 1 !important;
        margin: 0 !important;
    }
    body.index-body #palette-container .carre-action-buttons {
        grid-column: 2 !important;
        grid-row: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    body.index-body #palette-container .carre-action-buttons button {
        width: 100% !important;
    }

    /* Compact edition tools at the top so the canvas keeps the largest area. */
    body.index-body .carre-left-tools {
        max-height: none !important;
        overflow: visible !important;
        padding: 10px !important;
        gap: 8px !important;
    }
    body.index-body .carre-left-tools .palette-section {
        gap: 2px !important;
    }
    body.index-body .carre-left-tools .carre-mode-buttons button {
        padding: 6px 8px !important;
        font-size: 13px !important;
        min-height: 44px;
    }

    /* Compact palette + action column on iPad portrait so the whole layout
       fits without (or barely with) page scrolling. */
    body.index-body #palette-container {
        padding: 10px !important;
        gap: 10px !important;
        /* Clip transform/box-shadow of palette swatches so the active
           swatch can never visually leak above the canvas during a drag. */
        overflow: hidden !important;
    }
    body.index-body #palette-container .palette-tabs-shell {
        padding: 10px !important;
    }
    body.index-body #palette-container .palette-grid {
        gap: 6px !important;
    }
    body.index-body #palette-container .carre-action-buttons button,
    body.index-body #palette-container .palette-top-actions button {
        padding: 8px 10px !important;
        font-size: 13px !important;
        min-height: 44px;
    }
    /* Horizontal slider container: taller so the expanded hit-area of its
       handles stays within its own bounds and does not bleed into the
       palette below (which used to trigger phantom palette clicks). */
    #visibilityContainer.is-horizontal {
        height: 56px !important;
        position: relative;
        z-index: 5;
    }
    /* In portrait, the canvas-row stacks (column flow), so the 22px gap from
       the touch rule above creates wasted space. Use a tighter gap here. */
    body.index-body .carre-canvas-row {
        gap: 10px !important;
    }

    /* Horizontal visibility slider: width is driven by JS in resizeCanvas()
       to match the canvas display width exactly, so the right depth handle
       never extends past the canvas edge (which used to make the layout
       shift sideways on iPad portrait during a depth-handle drag). */
    body.index-body #visibilityContainer.is-horizontal {
        align-self: center !important;
    }
}

/* ===================================================
   TERRITORY — iPad landscape
   Keep 3-col layout but shrink side panels so the canvas
   stays as large and square as possible.
   =================================================== */
@media (pointer: coarse) and (orientation: landscape) {
    /* Override the generic touch rule above (which forces height:auto on
       every coarse-pointer device): in landscape we need a fixed-height
       page so the grid row can stretch to fill the viewport. Without this,
       on reload the row collapses to the canvas' intrinsic 300×150 size. */
    body.index-body .carre-page,
    .carre-page {
        height: 100dvh !important;
        max-height: 100dvh !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 6px 8px !important;
    }
    body.index-body .site-header.carre-header,
    .carre-header {
        padding: 6px 10px !important;
        margin-bottom: 6px !important;
        gap: 8px !important;
        flex-shrink: 0;
    }
    body.index-body .carre-layout {
        grid-template-columns: 140px minmax(0, 1fr) 208px !important;
        gap: 8px !important;
        padding: 8px !important;
        overflow: hidden !important;
        height: 100% !important;
        min-height: 0 !important;
    }
    /* Tight gap inside the canvas row so the canvas reclaims the few extra
       pixels between itself and the vertical slider. Handle box-shadows are
       already disabled on touch above, so 8 px is enough clearance. */
    body.index-body .carre-canvas-row {
        gap: 8px !important;
    }
    body.index-body .carre-mode-buttons {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
    body.index-body .carre-mode-buttons button,
    body.index-body .carre-left-tools button {
        font-size: 12px !important;
        padding: 6px 8px !important;
        min-height: 36px !important;
    }
    body.index-body .carre-left-tools,
    body.index-body #palette-container {
        max-height: calc(100dvh - 110px) !important;
        overflow-y: auto !important;
    }
    body.index-body .palette-tabs-header {
        flex-direction: column !important;
        gap: 6px !important;
    }
    body.index-body .carre-action-buttons button {
        font-size: 12px !important;
        padding: 6px 8px !important;
    }
    body.index-body .carre-stage,
    body.index-body .carre-canvas-row {
        min-width: 0 !important;
        min-height: 0 !important;
    }
    body.index-body .carre-stage .canvas-frame {
        flex: none !important;
        aspect-ratio: 1 / 1 !important;
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 auto !important;
    }
}

/* ===================================================
   PRICING PAGE (pricing.html)
   =================================================== */
.pricing-page {
    max-width: 1240px;
    gap: 24px;
}

.header-home-link {
    color: var(--text-soft);
    text-decoration: none;
    border-bottom: 1px dashed transparent;
}
.header-home-link:hover {
    border-bottom-color: var(--text-soft);
}

.cycle-banner {
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 18px;
    padding: 14px 20px;
    box-shadow: var(--panel-shadow);
    backdrop-filter: blur(12px);
}
.cycle-banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cycle-banner-icon {
    font-size: 12px;
    line-height: 1;
}
.cycle-banner-text {
    margin: 0;
    font-size: 15px;
    color: var(--text-soft);
}
.cycle-banner-campeur .cycle-banner-icon { color: #ffcb8a; }
.cycle-banner-resident .cycle-banner-icon { color: #8cf0a2; }
.cycle-banner-artisan .cycle-banner-icon { color: #cdb6ff; }
.cycle-banner-paysan .cycle-banner-icon { color: #f5d77a; }

.pricing-intro {
    text-align: center;
    padding: 8px 12px;
}
.pricing-lead {
    margin: 0 auto;
    max-width: 68ch;
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.6;
    color: var(--text-soft);
}
.pricing-sublead {
    margin: 10px auto 0;
    max-width: 60ch;
    font-size: 14px;
    color: var(--text-muted);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px 22px;
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 22px;
    box-shadow: var(--panel-shadow);
    backdrop-filter: blur(12px);
    overflow: hidden;
}

.pricing-card-featured {
    border-color: rgba(190, 150, 255, 0.5);
    box-shadow: 0 0 0 1px rgba(190, 150, 255, 0.18), var(--panel-shadow);
    transform: translateY(-6px);
}

.pricing-card-ribbon {
    position: absolute;
    top: 14px;
    right: -34px;
    transform: rotate(35deg);
    background: rgba(190, 150, 255, 0.25);
    color: #cdb6ff;
    border: 1px solid rgba(190, 150, 255, 0.45);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 36px;
}

.pricing-current-badge {
    align-self: flex-start;
    background: rgba(94, 162, 255, 0.16);
    border: 1px solid rgba(94, 162, 255, 0.4);
    color: #b9caff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
}

.pricing-card-current {
    outline: 2px solid rgba(94, 162, 255, 0.35);
    outline-offset: -2px;
}

.pricing-card-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pricing-card-tier {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-main);
}
.pricing-card-tagline {
    font-size: 13px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pricing-card-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--surface-border);
}
.price-amount {
    font-size: 38px;
    font-weight: 700;
    color: var(--text-main);
}
.price-period {
    font-size: 14px;
    color: var(--text-muted);
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-soft);
}
.pricing-features li {
    padding-left: 22px;
    position: relative;
}
.pricing-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: #8cf0a2;
    font-weight: 700;
}
.pricing-features li.muted {
    color: var(--text-muted);
}
.pricing-features li.muted::before {
    content: '—';
    color: var(--text-muted);
}

.pricing-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid var(--button-border);
    background: var(--button-bg);
    color: var(--button-text);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.pricing-cta:not(:disabled):hover {
    transform: translateY(-1px);
    border-color: var(--button-hover-border);
    box-shadow: var(--button-shadow);
}
.pricing-cta:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.pricing-cta-featured:not(:disabled) {
    background: rgba(190, 150, 255, 0.2);
    border-color: rgba(190, 150, 255, 0.5);
}
.pricing-cta-current {
    background: rgba(94, 162, 255, 0.12);
    border-color: rgba(94, 162, 255, 0.4);
    color: #b9caff;
}

.pricing-fineprint {
    margin: 0;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

.checkout-status {
    margin: 12px auto 20px;
    max-width: 720px;
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid var(--surface-border);
    background: var(--surface);
    color: var(--text-main);
    text-align: center;
}
.checkout-status-success {
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.45);
    color: #166534;
}
.checkout-status-error {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.55);
    color: #991b1b;
}
.checkout-status-warn {
    background: rgba(250, 204, 21, 0.18);
    border-color: rgba(250, 204, 21, 0.6);
    color: #854d0e;
}
.checkout-status-info {
    background: rgba(96, 165, 250, 0.12);
    border-color: rgba(96, 165, 250, 0.5);
    color: #1e40af;
}

/* =====================================================================
   BETA BANNER (global, top of page)
   ===================================================================== */
#grynwych-beta-banner {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px clamp(12px, 3vw, 24px);
    background: linear-gradient(90deg, #facc15, #fde047);
    color: #422006;
    font-size: 14px;
    line-height: 1.45;
    border-bottom: 1px solid #ca8a04;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}
.beta-banner-icon {
    font-size: 18px;
    flex-shrink: 0;
}
.beta-banner-text {
    flex: 1;
}
.beta-banner-text strong {
    font-weight: 700;
}
.beta-banner-close {
    background: transparent;
    border: 1px solid rgba(66, 32, 6, 0.35);
    color: #422006;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    line-height: 1;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}
.beta-banner-close:hover {
    background: rgba(66, 32, 6, 0.12);
    border-color: rgba(66, 32, 6, 0.55);
}
@media (max-width: 540px) {
    #grynwych-beta-banner { font-size: 13px; }
    .beta-banner-icon { font-size: 16px; }
}

/* =====================================================================
   ACCOUNT PAGE
   ===================================================================== */
.account-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(16px, 3vw, 32px);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.account-visitor {
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 22px;
    padding: 32px;
    text-align: center;
    color: var(--text-main);
}
.account-visitor h2 {
    margin: 0 0 12px;
}

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

.account-card {
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 22px;
    box-shadow: var(--panel-shadow);
    backdrop-filter: blur(12px);
    padding: 24px clamp(20px, 3vw, 28px);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.account-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.account-card-header h2 {
    margin: 0;
    font-size: 20px;
    color: var(--text-main);
}

.account-meta {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.account-meta > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-bottom: 1px solid var(--surface-border);
    padding-bottom: 10px;
}
.account-meta > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.account-meta dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 0;
}
.account-meta dd {
    margin: 0;
    font-size: 15px;
    color: var(--text-main);
}
.account-mono {
    font-family: ui-monospace, "Cascadia Mono", "JetBrains Mono", monospace;
    font-size: 12px;
    word-break: break-all;
    color: var(--text-muted);
}

.account-hint {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

.account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}

/* Outline & danger variants for pricing-cta reused on account page */
.pricing-cta-outline {
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--surface-border);
}
.pricing-cta-outline:hover:not(:disabled) {
    border-color: var(--accent, #7c3aed);
    color: var(--accent, #7c3aed);
}
.pricing-cta-danger {
    background: #dc2626;
    color: #fff;
    border: 1px solid #b91c1c;
}
.pricing-cta-danger:hover:not(:disabled) {
    background: #b91c1c;
}
.pricing-cta-inline {
    display: inline-block;
    width: auto;
}

/* Cancellation dialog */
.account-dialog {
    border: 1px solid var(--surface-border);
    border-radius: 18px;
    padding: 0;
    background: var(--surface);
    color: var(--text-main);
    max-width: 480px;
    width: calc(100% - 32px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}
.account-dialog::backdrop {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
}
.account-dialog-form {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.account-dialog-form h3 {
    margin: 0;
    font-size: 20px;
}
.account-dialog-form p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
}
.account-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .account-grid {
        grid-template-columns: 1fr;
    }
    .account-card {
        padding: 20px;
    }
}

.pricing-faq {
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 22px;
    box-shadow: var(--panel-shadow);
    backdrop-filter: blur(12px);
    padding: 26px clamp(20px, 3vw, 36px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pricing-faq h2 {
    margin: 0 0 8px;
    font-size: 22px;
    color: var(--text-main);
}
.pricing-faq details {
    border-bottom: 1px solid var(--surface-border);
    padding: 10px 0;
}
.pricing-faq details:last-of-type {
    border-bottom: 0;
}
.pricing-faq summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-main);
    list-style: none;
    padding: 4px 0;
}
.pricing-faq summary::-webkit-details-marker { display: none; }
.pricing-faq summary::before {
    content: '+';
    display: inline-block;
    width: 18px;
    color: var(--text-muted);
    font-weight: 700;
}
.pricing-faq details[open] summary::before { content: '−'; }
.pricing-faq details p {
    margin: 8px 0 4px 18px;
    font-size: 14px;
    color: var(--text-soft);
    line-height: 1.55;
}

/* Pricing — secondary CTA on homepage */
.home-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px dashed var(--button-border);
    background: transparent;
    color: var(--text-soft);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: border-color 0.15s, color 0.15s;
}
.home-cta-secondary:hover {
    border-style: solid;
    border-color: var(--button-hover-border);
    color: var(--text-main);
}
.home-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

/* Pricing responsive */
@media (max-width: 1100px) {
    .pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pricing-card-featured {
        transform: none;
    }
}
@media (max-width: 640px) {
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    .pricing-card {
        padding: 20px 18px;
    }
}