/* ==========================================
   VLayer Studio — Configurateur public
   Design : character-creator coloré et ludique (esprit "équipement" de jeu)
   ========================================== */

:root {
    /* Fond doux */
    --bg-page: #f5f2fc;
    --bg-panel: #ffffff;
    --bg-tertiary: #f2effb;
    --bg-hover: #ece6fa;

    /* Texte */
    --text-primary: #2c2540;
    --text-secondary: #756d92;
    --text-muted: #ada4c4;

    --border-color: #e7e1f5;
    --border-hover: #c9baf5;

    /* Accent principal (violet ludique) */
    --accent-color: #7c3aed;
    --accent-color-soft: #a78bfa;
    --accent-glow: rgba(124, 58, 237, 0.22);

    --success-color: #22c55e;
    --danger-color: #ef4444;

    --header-height: 68px;
    --footer-height: 40px;
    --panel-width: 380px;
    --border-radius: 22px;
    --border-radius-sm: 14px;

    --font-display: 'Fredoka', sans-serif;
    --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;

    --transition-fast: 0.16s cubic-bezier(.34,1.56,.64,1);
    --transition-normal: 0.28s cubic-bezier(.34,1.56,.64,1);
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background: var(--bg-page);
    color: var(--text-primary);
    min-height: 100vh;
    overflow: hidden;
}

.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
}

/* ==========================================
   Loading screen
   ========================================== */
.loading-screen {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background:
        radial-gradient(circle at 30% 30%, rgba(124,58,237,0.12) 0%, transparent 55%),
        radial-gradient(circle at 75% 70%, rgba(236,72,153,0.10) 0%, transparent 55%),
        var(--bg-page);
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.loading-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.loading-mark-badge {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--accent-color), #ec4899);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px var(--accent-glow);
    animation: loading-bounce 1.6s ease-in-out infinite;
}
.loading-mark {
    font-size: 40px;
    color: white;
}
.loading-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
}
.loading-bar {
    width: 160px;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 8px;
}
.loading-bar-fill {
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-color), #ec4899);
    border-radius: 10px;
    animation: loading-shimmer 1.2s ease-in-out infinite;
}
@keyframes loading-bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-10px) scale(1.06); }
}
@keyframes loading-shimmer {
    0%   { transform: translateX(-150%); }
    100% { transform: translateX(350%); }
}

/* ==========================================
   Header
   ========================================== */
.app-header {
    height: var(--header-height);
    background: var(--bg-panel);
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--accent-color), #ec4899, var(--accent-color)) 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    flex-shrink: 0;
}

.logo { display: flex; align-items: center; gap: 12px; }

.logo-badge {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent-color), #ec4899);
    color: white;
    font-size: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px var(--accent-glow);
    animation: logo-wiggle 3.5s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes logo-wiggle {
    0%, 92%, 100% { transform: rotate(0deg); }
    94% { transform: rotate(-8deg); }
    96% { transform: rotate(8deg); }
    98% { transform: rotate(-4deg); }
}

.logo-text { display: flex; flex-direction: column; line-height: 1.15; }

.logo h1 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.logo-tagline {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.03em;
}

.header-actions { display: flex; gap: 10px; }

.cart-badge {
    background: var(--accent-color);
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
}
.cart-badge.hidden { display: none; }

/* ==========================================
   Buttons
   ========================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border: none;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.btn:active { transform: scale(0.94); }

.btn-ghost {
    background: var(--bg-panel);
    color: var(--text-secondary);
    border: 2px solid var(--border-color);
}
.btn-ghost:hover {
    color: var(--text-primary);
    border-color: var(--accent-color-soft);
    transform: translateY(-2px);
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-color), #ec4899);
    color: white;
    box-shadow: 0 6px 20px var(--accent-glow);
}
.btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 10px 26px var(--accent-glow);
}

.btn-full { width: 100%; }
.btn-icon { font-size: 15px; line-height: 1; }

.btn-icon-only {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-panel);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 16px;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.btn-icon-only:hover {
    color: var(--accent-color);
    border-color: var(--accent-color-soft);
    transform: scale(1.08);
}
.btn-icon-only.is-off {
    color: var(--text-secondary);
    opacity: 0.4;
}
.btn-icon-only.is-off:hover { opacity: 0.7; }

/* ==========================================
   Main Layout
   ========================================== */
.app-main {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ==========================================
   Stage — the character, with equipment slots floating beside it
   ========================================== */
.stage-panel {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 20px;
    background:
        radial-gradient(circle, rgba(124, 58, 237, 0.09) 1.5px, transparent 1.5px) 0 0 / 28px 28px,
        var(--bg-page);
    position: relative;
    overflow: hidden;
    padding: 24px;
}

.stage-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.35;
    pointer-events: none;
}
.stage-blob-1 {
    width: 420px; height: 420px;
    background: #a78bfa;
    top: -120px; left: -100px;
}
.stage-blob-2 {
    width: 380px; height: 380px;
    background: #f9a8d4;
    bottom: -140px; right: -100px;
}

.preview-container {
    /* Capped, not flex:1 — an uncapped stage stretches edge to edge and
       shoves the equipment columns out to the far sides. A fixed basis lets
       justify-content:center on .stage-panel pull the whole group (both
       columns + character) together instead. */
    flex: 0 1 560px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    min-width: 0;
}

/* Grounds the character — without this it reads as floating in empty space.
   Two layers: a tight, darker contact shadow right at the feet, and a wider,
   softer accent-tinted glow underneath it for ambient depth. */
.stage-platform {
    /* Vertical position (bottom) is set inline by PublicRenderer, which
       measures the actual lowest opaque pixel of the composited character
       so the shadow tracks the feet regardless of how much transparent
       padding a given asset leaves below them — a fixed % here drifted
       from the feet on assets with different padding. */
    position: absolute;
    bottom: 9%;
    left: 50%;
    transform: translateX(-50%);
    width: 30%;
    height: 22px;
    background: radial-gradient(ellipse at center, rgba(44, 37, 64, 0.28) 0%, transparent 75%);
    border-radius: 50%;
    z-index: 0;
}
.stage-platform.hidden { display: none; }
.stage-platform::before {
    content: '';
    position: absolute;
    inset: -18px -60px;
    background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 70%);
    border-radius: 50%;
    z-index: -1;
}

/* Empty-state hint — shown only until the client has picked at least one item */
.stage-hint {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.stage-hint.hidden { opacity: 0; }
.stage-hint svg {
    width: 44px;
    height: 44px;
    color: var(--accent-color-soft);
    animation: hint-bounce 1.8s ease-in-out infinite;
}
.stage-hint p {
    max-width: 220px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
    line-height: 1.5;
}
@keyframes hint-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* Pulsing ring on required-but-empty equipment slots, before anything is picked */
.equipment-slot.needs-attention {
    animation: slot-invite 1.6s ease-in-out infinite;
}
@keyframes slot-invite {
    0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
    50%      { box-shadow: 0 0 0 8px transparent; }
}

/* Wraps the canvas + its ground shadow so pan/zoom (applied here, see
   PublicRenderer._applyTransform) moves both together — previously the
   shadow was a sibling of the canvas and stayed put while dragging. */
.stage-figure {
    position: relative;
    display: inline-block;
    z-index: 1;
    transform-origin: center center;
    cursor: grab;
    touch-action: none;
}
.stage-figure.dragging { cursor: grabbing; }

#avatar-canvas {
    /* Sizing is computed and set as exact px by PublicRenderer.resize() —
       no CSS max-width/height here. A percentage max-width on this element
       and .stage-platform's percentage width both resolve against
       #stage-figure's shrink-to-fit width, but browsers compute that
       shrink-to-fit pass BEFORE this element's own max-width clamps it,
       so the two ended up disagreeing about the container width and the
       ground shadow rendered ~28px off-center from the canvas. */
    position: relative;
    z-index: 1;
    border-radius: var(--border-radius);
    filter: drop-shadow(0 20px 30px rgba(124, 58, 237, 0.18));
    display: block;
}
.stage-figure.dragging #avatar-canvas {
    filter: drop-shadow(0 26px 36px rgba(124, 58, 237, 0.24));
}

.preview-overlay {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    pointer-events: none;
}

.preview-info {
    background: var(--bg-panel);
    border: 2px solid var(--border-color);
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
}

/* Always-visible but low-key price teaser — never hidden, never the star of the show */
.price-badge {
    background: var(--bg-panel);
    border: 2px solid transparent;
    background-image: linear-gradient(var(--bg-panel), var(--bg-panel)), linear-gradient(90deg, var(--accent-color), #ec4899);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    color: var(--accent-color);
}
.price-badge:empty { display: none; }

.preview-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.8);
}

.zoom-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-color), #ec4899);
    cursor: pointer;
}
.zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    border: 3px solid var(--accent-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}
.zoom-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    border: 3px solid var(--accent-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}
.zoom-slider::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-color), #ec4899);
}

.order-fab {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent-color), #ec4899);
    color: white;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 10px 28px var(--accent-glow);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.order-fab:hover { transform: translateX(-50%) translateY(-3px) scale(1.03); box-shadow: 0 14px 34px var(--accent-glow); }
.order-fab:active { transform: translateX(-50%) scale(0.96); }

.order-fab-count {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

#zoom-level {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    min-width: 44px;
    text-align: center;
}

/* ==========================================
   Equipment columns — floating beside the character, like a gear screen
   ========================================== */
.equipment-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    z-index: 1;
    flex-shrink: 0;
}

.equipment-slot {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 18px;
    padding: 8px 18px 8px 8px;
    cursor: pointer;
    font-family: var(--font-body);
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.06);
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.equipment-col:last-child .equipment-slot { flex-direction: row-reverse; padding: 8px 8px 8px 18px; }

.equipment-slot:hover {
    transform: scale(1.05);
    border-color: var(--slot-color, var(--accent-color));
    box-shadow: 0 10px 24px rgba(0,0,0,0.1);
}
.equipment-slot:active { transform: scale(0.97); }
.equipment-slot.filled {
    border-color: var(--slot-color, var(--accent-color));
    background: rgba(255, 255, 255, 0.85);
}

.equipment-slot-thumb {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--bg-panel);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}
.equipment-slot.filled .equipment-slot-thumb { border-color: var(--slot-color, var(--accent-color)); }
.equipment-slot-thumb img { width: 100%; height: 100%; object-fit: cover; }
.equipment-slot-icon { width: 24px; height: 24px; color: var(--text-muted); }
.equipment-slot-icon svg { width: 100%; height: 100%; }
.equipment-slot.filled .equipment-slot-icon { color: var(--slot-color, var(--accent-color)); }

.equipment-slot-check {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--slot-color, var(--accent-color));
    color: white;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-panel);
}

.equipment-slot-label {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-secondary);
    white-space: nowrap;
}
.equipment-slot.filled .equipment-slot-label { color: var(--text-primary); }

.final-block-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
    margin-top: 18px;
}
.final-block-title:first-child { margin-top: 0; }

.color-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.color-picker-mini {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: transparent;
    padding: 2px;
}

.color-presets { display: flex; gap: 8px; flex-wrap: wrap; }

.color-preset {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--transition-normal);
    outline: none;
    position: relative;
}
.color-preset:hover { transform: scale(1.15) rotate(8deg); }
.color-preset.active {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 3px var(--accent-glow);
    transform: scale(1.15);
}

#accent-color { width: 56px; height: 36px; border: none; border-radius: var(--border-radius-sm); cursor: pointer; background: transparent; }
#accent-color::-webkit-color-swatch-wrapper { padding: 0; }
#accent-color::-webkit-color-swatch { border: 2px solid var(--border-color); border-radius: var(--border-radius-sm); }

.summary-content {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 12px 14px;
    font-size: 12px;
    line-height: 1.6;
    max-height: 180px;
    overflow-y: auto;
}
.summary-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--border-color); }
.summary-item:last-child { border-bottom: none; }
.summary-label { color: var(--text-muted); font-weight: 700; flex-shrink: 0; white-space: nowrap; }
.summary-value { color: var(--accent-color); font-weight: 800; }
.summary-value-row { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.summary-module-name { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.summary-color-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-color); flex-shrink: 0; }

.slot-empty-hint { font-size: 12px; color: var(--text-muted); font-style: italic; padding: 8px 0; }

.text-input-public {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    margin: 14px 0 10px;
    transition: border-color var(--transition-fast);
}
.text-input-public::placeholder { color: var(--text-muted); font-weight: 600; }
.text-input-public:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 3px var(--accent-glow); }

/* ==========================================
   Picker overlay (opens on equipment slot click)
   ========================================== */
.picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(44, 37, 64, 0.45);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1500;
}
.picker-overlay.hidden { display: none; }

.picker-panel {
    background: var(--bg-panel);
    border-radius: 28px;
    padding: 28px 32px 32px;
    width: min(640px, 92vw);
    max-height: 82vh;
    overflow-y: auto;
    box-shadow: 0 30px 80px rgba(44, 37, 64, 0.35);
    animation: picker-pop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes picker-pop {
    from { transform: scale(0.9); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.picker-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.picker-title { font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--text-primary); }
.picker-close {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.picker-close:hover { background: var(--danger-color); border-color: var(--danger-color); color: white; transform: rotate(90deg); }

.picker-description { font-size: 13px; color: var(--text-secondary); margin-bottom: 20px; }

/* ==========================================
   Module Grid (tiles) — used inside the picker
   ========================================== */
.module-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.module-item {
    aspect-ratio: 1;
    background: var(--bg-tertiary);
    border: 3px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    overflow: hidden;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.module-item:hover { transform: translateY(-4px) scale(1.04) rotate(-1deg); border-color: var(--border-hover); }
.module-item:active { transform: scale(0.96); }

.module-item.active {
    border-color: var(--accent-color);
    box-shadow: 0 8px 20px var(--accent-glow);
}
.module-item.active::after {
    content: '✓';
    position: absolute;
    top: 6px; right: 6px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--accent-color);
    color: white;
    font-size: 11px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
}

.module-item.none {
    background: repeating-linear-gradient(135deg, var(--bg-tertiary), var(--bg-tertiary) 6px, var(--border-color) 6px, var(--border-color) 7px);
}

.module-item img { width: 100%; height: 100%; object-fit: cover; }

.module-item .module-name {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 6px;
    background: rgba(44, 37, 64, 0.75);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    color: white;
}
.module-item.active .module-name { background: var(--accent-color); }

.tint-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 2px dashed var(--border-color);
}

/* ==========================================
   Footer
   ========================================== */
.app-footer {
    height: var(--footer-height);
    background: var(--bg-panel);
    border-top: 3px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
}
.app-footer p { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.footer-sep { font-size: 11px; color: var(--border-hover); }
.footer-link {
    font-size: 11px;
    font-weight: 800;
    color: var(--accent-color);
    text-decoration: none;
    background: none;
    border: none;
    font-family: inherit;
    padding: 0;
    cursor: pointer;
}
.footer-link:hover { text-decoration: underline; }

/* ==========================================
   Cart / presets item lists (shared)
   ========================================== */
.cart-items { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.cart-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 8px 12px;
}
.cart-item-thumb {
    width: 44px;
    height: 44px;
    border-radius: var(--border-radius-sm);
    object-fit: cover;
    background: var(--bg-panel);
    flex-shrink: 0;
}
.cart-item-label {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}
.cart-item-remove, .cart-item-action {
    background: var(--bg-panel);
    border: 2px solid var(--border-color);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.cart-item-remove:hover { background: var(--danger-color); border-color: var(--danger-color); color: white; }
.cart-item-action:hover { color: var(--text-primary); border-color: var(--accent-color-soft); }
.cart-empty-hint { font-size: 13px; color: var(--text-muted); text-align: center; padding: 20px 0; }

.contact-textarea { resize: vertical; min-height: 80px; font-family: inherit; border-radius: var(--border-radius-sm); }

/* Favorite star on module tiles — top-left to avoid the active-checkmark (top-right) */
.module-favorite-star {
    position: absolute;
    top: 6px; left: 6px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(44, 37, 64, 0.55);
    color: white;
    border: none;
    font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: transform var(--transition-fast);
}
.module-favorite-star:hover { transform: scale(1.15); }
.module-favorite-star.active { background: #f59e0b; color: white; }

/* Full price shown right before checkout — always clear, never a surprise */
.order-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 12px 16px;
    margin: 18px 0 6px;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-secondary);
}
.order-price-row .order-price-value {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--accent-color);
}

/* ==========================================
   Toast Notification
   ========================================== */
.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-primary);
    padding: 14px 26px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: white;
    box-shadow: 0 10px 30px rgba(44, 37, 64, 0.3);
    z-index: 2500;
    transition: all var(--transition-normal);
}
.toast.hidden { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(20px); }

/* ==========================================
   Order confirmation modal
   ========================================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(44, 37, 64, 0.5);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}
.modal-overlay.hidden { display: none; }
#account-logged-out.hidden, #account-logged-in.hidden { display: none; }

.modal-box {
    background: var(--bg-panel);
    border-radius: 28px;
    padding: 40px 32px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 30px 80px rgba(44, 37, 64, 0.35);
    animation: picker-pop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-success-icon {
    width: 60px; height: 60px;
    background: rgba(34, 197, 94, 0.12);
    color: var(--success-color);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    font-weight: 700;
    margin: 0 auto 20px;
    border: 3px solid rgba(34, 197, 94, 0.3);
}
.modal-title { font-family: var(--font-display); font-size: 24px; font-weight: 600; margin-bottom: 8px; color: var(--text-primary); }
.modal-sub { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
.order-reference-display {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent-color);
    background: var(--bg-tertiary);
    padding: 14px 24px;
    border-radius: var(--border-radius-sm);
    margin: 12px 0;
    font-family: var(--font-display);
    border: 2px solid var(--border-color);
}
.order-ref-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 24px; line-height: 1.6; }

.btn-public {
    display: flex; align-items: center; justify-content: center;
    padding: 13px 24px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    border: none;
    width: 100%;
    margin-bottom: 8px;
    font-family: var(--font-body);
    transition: all var(--transition-fast);
}
.btn-public-primary { background: linear-gradient(135deg, var(--accent-color), #ec4899); color: white; }
.btn-public-primary:hover { transform: translateY(-2px) scale(1.02); }
.btn-public-secondary { background: var(--bg-tertiary); color: var(--text-secondary); border: 2px solid var(--border-color); }
.btn-public-secondary:hover { border-color: var(--border-hover); }

/* ==========================================
   Scrollbar
   ========================================== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }

/* ==========================================
   Responsive
   ========================================== */
@media (max-width: 1024px) {
    .equipment-slot-label { display: none; }
    .equipment-slot { padding: 8px; border-radius: 14px; }
    .equipment-col:last-child .equipment-slot { padding: 8px; }
}

@media (max-width: 768px) {
    .stage-panel { flex-direction: column; gap: 12px; padding: 16px; padding-bottom: 76px; }
    .preview-container { order: 1; width: 100%; }
    .equipment-col {
        order: 2;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    .preview-controls { display: none; } /* saves vertical space on small screens */
    .order-fab { bottom: 12px; padding: 11px 20px; font-size: 13px; }
    .picker-title { font-size: 20px; }
    .picker-panel { padding: 22px 20px 26px; }

    .app-header { height: auto; min-height: var(--header-height); padding: 10px 14px; gap: 8px; }
    .logo h1 { font-size: 17px; }
    .header-actions { gap: 8px; }
    .header-actions .btn { padding: 8px 14px; font-size: 12px; }
}

@media (max-width: 480px) {
    .logo h1 { display: none; }
    .header-actions .btn .btn-label { display: none; }
    .header-actions .btn { padding: 10px; }
    .module-grid { grid-template-columns: repeat(2, 1fr); }
}