/* ===== RESET & VARIABLES ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
    --bg:#0f0911;--bg-card:#161b22;--bg-card-hover:#1c2330;--bg-input:#1c2330;
    --border:#2d333b;--border-focus:#6C63FF;
    --text:#e6edf3;--text-secondary:#8b949e;--text-muted:#545d68;
    --accent:#6C63FF;--accent-glow:rgba(108,99,255,0.3);
    --success:#22c55e;--danger:#ef4444;--warning:#f59e0b;
    --radius:12px;--radius-sm:8px;--radius-xs:6px;
    --transition:0.2s ease;
    --font-main:'Inter',-apple-system,sans-serif;
    --font-mono:'Space Mono',monospace;
}
html{scroll-behavior:smooth}
body{font-family:var(--font-main);background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column}
#hero,#app{flex:1 0 auto}
/* Hide the global footer on the editor step — it needs the full viewport */
body:has(#step4.active) .site-footer{display:none}
.hidden{display:none!important}
.hidden-input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}

/* ===== HERO ===== */
#hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(108,99,255,0.15),transparent),radial-gradient(ellipse 60% 50% at 80% 50%,rgba(168,85,247,0.08),transparent),radial-gradient(ellipse 60% 50% at 20% 80%,rgba(59,130,246,0.08),transparent)}
.hero-content{text-align:center;z-index:1;padding:2rem;max-width:640px}
.logo{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:2rem}
.logo h1{font-size:3rem;font-weight:900;letter-spacing:-2px}.logo h1 span{color:var(--accent)}
.logo-cd{width:56px;height:56px;border-radius:50%;background:conic-gradient(from 0deg,#6C63FF,#a855f7,#3b82f6,#6C63FF);display:flex;align-items:center;justify-content:center;animation:spin 6s linear infinite;flex-shrink:0}
.logo-cd.small{width:32px;height:32px}
.logo-cd-inner{width:30%;height:30%;border-radius:50%;background:var(--bg)}
@keyframes spin{to{transform:rotate(360deg)}}
.tagline{font-size:1.25rem;color:var(--text-secondary);margin-bottom:0.5rem}
.subtitle{font-size:0.95rem;color:var(--text-muted);margin-bottom:2.5rem;line-height:1.6}
.hero-badges{display:flex;gap:12px;justify-content:center;margin-top:2rem;flex-wrap:wrap}
.badge{padding:6px 14px;background:var(--bg-card);border:1px solid var(--border);border-radius:50px;font-size:0.8rem;color:var(--text-secondary)}

/* ===== FREE SHIPPING ===== */
.free-shipping-banner{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:2rem;padding:14px 28px;background:linear-gradient(135deg,rgba(34,197,94,0.12),rgba(34,197,94,0.06));border:2px solid rgba(34,197,94,0.35);border-radius:50px;font-size:0.95rem;color:var(--success);font-weight:500;animation:shippingPulse 3s ease-in-out infinite}
.free-shipping-banner span{font-weight:800;font-size:1.05rem;letter-spacing:1px}
.free-shipping-banner svg{color:var(--success);flex-shrink:0}
@keyframes shippingPulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0.2)}50%{box-shadow:0 0 20px 4px rgba(34,197,94,0.15)}}
.free-shipping-badge-inline{display:flex;align-items:center;gap:8px;justify-content:center;padding:12px 20px;background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.25);border-radius:var(--radius-sm);font-size:0.85rem;color:var(--success);font-weight:700;margin-bottom:2rem;letter-spacing:0.5px}
.free-shipping-badge-inline svg{color:var(--success);flex-shrink:0}

/* ===== BUTTONS ===== */
.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;background:var(--accent);color:#fff;border:none;border-radius:50px;font-size:1rem;font-weight:600;cursor:pointer;transition:all var(--transition);font-family:var(--font-main)}
.btn-primary:hover{background:#5b52ee;transform:translateY(-2px);box-shadow:0 8px 30px var(--accent-glow)}
.btn-secondary{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--bg-card);color:var(--text);border:1px solid var(--border);border-radius:50px;font-size:0.9rem;font-weight:500;cursor:pointer;transition:all var(--transition);font-family:var(--font-main)}
.btn-secondary:hover{background:var(--bg-card-hover);border-color:var(--text-muted)}
.btn-text{background:none;border:none;color:var(--text-muted);font-size:0.85rem;cursor:pointer;padding:8px;font-family:var(--font-main);transition:color var(--transition)}
.btn-text:hover{color:var(--accent)}

/* ===== APP HEADER ===== */
.app-header{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;border-bottom:1px solid var(--border);background:rgba(13,17,23,0.95);backdrop-filter:blur(20px);position:sticky;top:0;z-index:200}
.app-logo{display:flex;align-items:center;gap:10px;font-size:1rem;cursor:pointer;color:var(--text);font-weight:300}
.app-logo strong{color:var(--accent);font-weight:700}
.steps-indicator{display:flex;align-items:center;gap:8px}
.step-dot{display:flex;align-items:center;gap:6px;font-size:0.8rem;color:var(--text-muted);transition:color var(--transition)}
.step-dot span{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg-card);border:1px solid var(--border);font-weight:600;font-size:0.75rem;transition:all var(--transition)}
.step-dot.active{color:var(--accent)}.step-dot.active span{background:var(--accent);color:#fff;border-color:var(--accent)}
.step-dot.done span{background:var(--success);color:#fff;border-color:var(--success)}.step-dot.done{color:var(--success)}
.step-line{width:24px;height:1px;background:var(--border)}

/* ===== STEP PANELS ===== */
.step-panel{display:none;animation:fadeInUp 0.3s ease}.step-panel.active{display:block}
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.step-content{max-width:640px;margin:0 auto;padding:3rem 2rem 4rem}
.step-content.wide{max-width:960px}
.step-content h2{font-size:1.75rem;font-weight:800;margin-bottom:0.5rem}
.step-desc{color:var(--text-secondary);margin-bottom:2rem;font-size:0.95rem}
.step-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:2.5rem;align-items:center}

/* ===== FORMS ===== */
.form-group{margin-bottom:1.25rem}
.form-group label{display:block;font-size:0.85rem;font-weight:600;margin-bottom:6px;color:var(--text-secondary)}
.form-group input[type="text"],.form-group textarea,.form-group select{width:100%;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:0.9rem;font-family:var(--font-main);transition:border-color var(--transition);outline:none}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--accent)}
textarea{resize:vertical;min-height:140px}
.divider{display:flex;align-items:center;gap:16px;margin:2rem 0 1.5rem}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)}
.divider span{font-size:0.85rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}

/* ===== TABS ===== */
.import-options{display:flex;gap:4px;background:var(--bg-card);padding:4px;border-radius:var(--radius-sm);margin-bottom:1.25rem}
.tab-btn{flex:1;padding:10px;border:none;background:transparent;color:var(--text-muted);font-size:0.85rem;font-weight:500;border-radius:var(--radius-xs);cursor:pointer;transition:all var(--transition);font-family:var(--font-main)}
.tab-btn.active{background:var(--accent);color:#fff}
.tab-content{display:none}.tab-content.active{display:block}

/* ===== TRACK ADDER ===== */
.track-adder{display:flex;gap:8px;margin-bottom:1rem}
.track-adder input{flex:1;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-xs);color:var(--text);font-size:0.9rem;font-family:var(--font-main);outline:none;transition:border-color var(--transition)}
.track-adder input:focus{border-color:var(--accent)}
.track-adder input:nth-child(3){max-width:80px}
.btn-add{width:42px;height:42px;border-radius:var(--radius-xs);background:var(--accent);color:#fff;border:none;font-size:1.25rem;cursor:pointer;transition:background var(--transition);flex-shrink:0}
.btn-add:hover{background:#5b52ee}

/* ===== TRACK LIST ===== */
.track-list{display:flex;flex-direction:column;gap:4px;margin-top:1rem}
.track-item{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xs);transition:background var(--transition)}
.track-item:hover{background:var(--bg-card-hover)}
.track-num{font-size:0.8rem;color:var(--text-muted);font-weight:700;min-width:24px;font-family:var(--font-mono)}
.track-info{flex:1;min-width:0}
.track-info .title{font-weight:600;font-size:0.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-info .artist{font-size:0.8rem;color:var(--text-muted)}
.track-duration{font-size:0.8rem;color:var(--text-muted);font-family:var(--font-mono)}
.track-remove{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;font-size:1.1rem;line-height:1;transition:color var(--transition)}
.track-remove:hover{color:var(--danger)}
.track-count{text-align:center;color:var(--text-muted);font-size:0.85rem;margin-top:1rem}
#pasteArea{width:100%;padding:12px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:0.9rem;font-family:var(--font-main);outline:none;min-height:160px;margin-bottom:12px}
#pasteArea:focus{border-color:var(--accent)}

/* ===== AUDIO UPLOAD ===== */
.audio-upload-zone{width:100%;border:2px dashed var(--border);border-radius:var(--radius);padding:2.5rem 2rem;text-align:center;cursor:pointer;transition:all var(--transition);color:var(--text-muted);margin-bottom:1.25rem}
.audio-upload-zone:hover,.audio-upload-zone.dragover{border-color:var(--accent);background:rgba(108,99,255,0.05)}
.audio-upload-zone svg{margin-bottom:1rem;opacity:0.5}
.audio-upload-zone p{font-size:0.95rem;margin-bottom:0.5rem}
.upload-link{color:var(--accent);text-decoration:underline;cursor:pointer}
.upload-hint{font-size:0.8rem;display:block;margin-top:0.25rem}
.audio-file-list{display:flex;flex-direction:column;gap:4px;margin-bottom:1rem}
.audio-file-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xs);cursor:grab}
.audio-file-item:hover{background:var(--bg-card-hover)}
.audio-file-item.dragging{opacity:0.5}.audio-file-item.drag-over{border-color:var(--accent)}
.audio-file-num{font-size:0.8rem;color:var(--text-muted);font-weight:700;min-width:24px;font-family:var(--font-mono)}
.audio-file-name{flex:1;font-size:0.85rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.audio-file-size{font-size:0.75rem;color:var(--text-muted);font-family:var(--font-mono)}
.audio-file-remove{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;font-size:1.1rem;transition:color var(--transition)}
.audio-file-remove:hover{color:var(--danger)}
.audio-stats{text-align:center;color:var(--text-muted);font-size:0.85rem;margin-bottom:1rem}
.audio-info{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;background:rgba(108,99,255,0.06);border:1px solid rgba(108,99,255,0.15);border-radius:var(--radius-sm);margin-bottom:1.5rem;font-size:0.8rem;color:var(--text-secondary);line-height:1.5}
.audio-info svg{flex-shrink:0;margin-top:1px;color:var(--accent)}

/* ====================================================
   EDITOR LAYOUT
   ==================================================== */
.editor-layout{display:flex;flex-direction:column;height:calc(100vh - 53px);overflow:hidden}

/* TOOLBAR */
.editor-toolbar{display:flex;align-items:center;gap:4px;padding:8px 16px;background:var(--bg-card);border-bottom:1px solid var(--border);flex-shrink:0;overflow-x:auto}
.toolbar-group{display:flex;align-items:center;gap:2px}
.toolbar-separator{width:1px;height:28px;background:var(--border);margin:0 6px;flex-shrink:0}
.tool-btn{display:flex;align-items:center;gap:5px;padding:7px 12px;border:none;background:transparent;color:var(--text-secondary);font-size:0.78rem;font-weight:500;border-radius:var(--radius-xs);cursor:pointer;transition:all var(--transition);font-family:var(--font-main);white-space:nowrap}
.tool-btn:hover{background:var(--bg-card-hover);color:var(--text)}
.tool-btn.active{background:var(--accent);color:#fff}
.tool-btn.danger:hover{color:var(--danger)}
.tool-btn svg{flex-shrink:0}

/* EDITOR MAIN */
.editor-main{display:flex;flex:1;overflow:hidden}

/* PANELS */
.editor-panel{width:220px;flex-shrink:0;background:var(--bg-card);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.panel-props{border-right:none;border-left:1px solid var(--border)}
.panel-header{padding:12px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
.panel-header h3{font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-secondary)}
.panel-body{flex:1;overflow-y:auto;padding:8px}
.panel-empty{color:var(--text-muted);font-size:0.8rem;text-align:center;padding:20px 10px}

/* Layer items */
.layer-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--radius-xs);cursor:pointer;transition:background var(--transition);font-size:0.8rem;color:var(--text-secondary);border:1px solid transparent;margin-bottom:2px}
.layer-item:hover{background:var(--bg-card-hover)}
.layer-item.active{background:rgba(108,99,255,0.12);border-color:var(--accent);color:var(--text)}
.layer-item .layer-icon{width:20px;text-align:center;opacity:0.5;flex-shrink:0}
.layer-item .layer-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Properties panel */
.props-section{margin-bottom:16px}
.props-section-title{font-size:0.7rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;padding:0 2px}
.props-row{display:flex;gap:6px;margin-bottom:6px;align-items:center}
.props-row label{font-size:0.75rem;color:var(--text-muted);min-width:22px;flex-shrink:0}
.props-row input[type="number"]{flex:1;padding:5px 8px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-xs);color:var(--text);font-size:0.8rem;font-family:var(--font-mono);outline:none;width:0;min-width:0}
.props-row input[type="number"]:focus{border-color:var(--accent)}
.props-row input[type="range"]{flex:1;accent-color:var(--accent);height:6px;-webkit-appearance:none;appearance:none;background:var(--bg-input);border-radius:3px;outline:none;cursor:pointer}
.props-row input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:grab;box-shadow:0 1px 6px var(--accent-glow);transition:transform 0.12s ease}
.props-row input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.2)}
.props-row input[type="range"]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:grab;border:none}
.props-row input[type="color"]{width:32px;height:28px;border:2px solid var(--border);border-radius:var(--radius-xs);cursor:pointer;background:none;padding:1px}
.props-row select{flex:1;padding:5px 8px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-xs);color:var(--text);font-size:0.8rem;font-family:var(--font-main);outline:none}
.props-row select:focus{border-color:var(--accent)}
.props-row .props-val{font-size:0.75rem;color:var(--text-muted);min-width:30px;text-align:right;font-family:var(--font-mono)}
.props-check{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:0.8rem;color:var(--text-secondary);cursor:pointer}
.props-check input{accent-color:var(--accent)}

/* Filter row */
.filter-row{margin-bottom:8px}
.filter-row label{display:block;font-size:0.75rem;color:var(--text-muted);margin-bottom:3px}
.filter-row input[type="range"]{width:100%;-webkit-appearance:none;appearance:none;height:6px;background:var(--bg-input);border-radius:3px;outline:none;cursor:pointer}
.filter-row input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:grab;box-shadow:0 1px 6px var(--accent-glow);transition:transform 0.12s ease}
.filter-row input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.2)}
.filter-row input[type="range"]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:grab;border:none}

/* CANVAS AREA */
.editor-canvas-area{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.canvas-tabs{display:flex;gap:4px;padding:8px 12px;background:var(--bg);border-bottom:1px solid var(--border);flex-shrink:0}
.canvas-tab{padding:8px 18px;border:none;background:var(--bg-card);color:var(--text-muted);font-size:0.8rem;font-weight:500;border-radius:var(--radius-xs);cursor:pointer;transition:all var(--transition);font-family:var(--font-main)}
.canvas-tab:hover{color:var(--text)}.canvas-tab.active{background:var(--accent);color:#fff}
.canvas-wrapper{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;background:repeating-conic-gradient(#1c2330 0% 25%,#161b22 0% 50%) 50%/20px 20px;position:relative}
.canvas-wrapper canvas{box-shadow:0 4px 40px rgba(0,0,0,0.4)}
.canvas-zoom{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--bg-card);border-top:1px solid var(--border);justify-content:center;flex-shrink:0}
.zoom-btn{padding:4px 12px;border:1px solid var(--border);background:var(--bg-input);color:var(--text);border-radius:var(--radius-xs);cursor:pointer;font-size:0.85rem;font-family:var(--font-mono);transition:all var(--transition)}
.zoom-btn:hover{border-color:var(--accent)}
#zoomLevel{font-size:0.8rem;color:var(--text-muted);font-family:var(--font-mono);min-width:40px;text-align:center}

/* EDITOR BOTTOM */
.editor-bottom{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--bg-card);border-top:1px solid var(--border);flex-shrink:0}
.editor-bottom-info{font-size:0.8rem;color:var(--text-muted);font-family:var(--font-mono)}

/* ===== EXPORT ===== */
.btn-export{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:var(--bg-card);border:1px solid var(--border);border-radius:50px;color:var(--text);font-size:0.85rem;font-weight:500;cursor:pointer;transition:all var(--transition);font-family:var(--font-main)}
.btn-export:hover{border-color:var(--accent);background:rgba(108,99,255,0.1)}
.btn-export.all{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-export.all:hover{background:#5b52ee}
.btn-export.wav{background:#059669;border-color:#059669;color:#fff}
.btn-export.wav:hover{background:#047857}
.export-big-btns{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.export-section{margin-bottom:2rem}

/* Progress */
.conversion-progress{margin:1.5rem 0;text-align:center}
.progress-bar{height:6px;background:var(--bg-input);border-radius:3px;overflow:hidden;margin-bottom:8px}
.progress-fill{height:100%;background:var(--accent);border-radius:3px;width:0;transition:width 0.3s ease}
#progressText{font-size:0.85rem;color:var(--text-secondary)}

/* ===== TOAST ===== */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--bg-card);border:1px solid var(--border);color:var(--text);padding:12px 24px;border-radius:50px;font-size:0.9rem;z-index:9999;transition:transform 0.3s ease;box-shadow:0 10px 40px rgba(0,0,0,0.4);pointer-events:none;white-space:nowrap}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ===== PROPS EXTRAS ===== */
.props-align-btn{padding:4px 10px;border:1px solid var(--border);background:var(--bg-input);color:var(--text-muted);border-radius:var(--radius-xs);cursor:pointer;font-size:0.75rem;transition:all var(--transition);font-family:var(--font-main);flex:1;text-align:center}
.props-align-btn:hover{border-color:var(--text-muted);color:var(--text)}
.props-align-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* ===== IMAGE SEARCH MODAL ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);z-index:500;display:flex;align-items:center;justify-content:center;padding:2rem}
.modal{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);width:100%;max-width:860px;max-height:85vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,0.6)}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border)}
.modal-header h3{font-size:1rem;font-weight:700}
.modal-close{background:none;border:none;color:var(--text-muted);font-size:1.4rem;cursor:pointer;padding:4px 8px;border-radius:var(--radius-xs);transition:all var(--transition)}
.modal-close:hover{color:var(--text);background:var(--bg-input)}
.modal-search-bar{display:flex;gap:8px;padding:14px 20px;border-bottom:1px solid var(--border)}
.modal-search-bar input{flex:1;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:0.9rem;outline:none;font-family:var(--font-main);transition:border-color var(--transition)}
.modal-search-bar input:focus{border-color:var(--accent)}
.modal-search-tags{display:flex;flex-wrap:wrap;gap:6px;padding:10px 20px;border-bottom:1px solid var(--border)}
.search-tag{padding:5px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:50px;color:var(--text-secondary);font-size:0.75rem;cursor:pointer;transition:all var(--transition);font-family:var(--font-main)}
.search-tag:hover{border-color:var(--accent);color:var(--text)}
.modal-body{flex:1;overflow-y:auto;padding:16px 20px;min-height:200px}
.modal-placeholder{text-align:center;color:var(--text-muted);padding:3rem 1rem;font-size:0.9rem}
.search-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.search-item{position:relative;border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:1;cursor:pointer;background:var(--bg-input);border:2px solid transparent;transition:border-color var(--transition)}
.search-item:hover{border-color:var(--accent)}
.search-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.3s ease}
.search-item:hover img{transform:scale(1.05)}
.search-item-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.7) 0%,transparent 50%);opacity:0;transition:opacity var(--transition);display:flex;align-items:flex-end;padding:10px}
.search-item:hover .search-item-overlay{opacity:1}
.search-item-overlay span{color:#fff;font-size:0.75rem;font-weight:600}
.search-attribution{text-align:center;padding:10px;font-size:0.7rem;color:var(--text-muted)}
.search-attribution a{color:var(--accent)}
.modal-footer{padding:12px 20px;border-top:1px solid var(--border);text-align:center}
.search-loading{text-align:center;padding:2rem;color:var(--text-muted)}
.search-loading .spinner{display:inline-block;width:24px;height:24px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 0.7s linear infinite;margin-bottom:8px}

/* ===== PREVIEW TABS ===== */
.preview-tabs{display:flex;gap:4px;background:var(--bg-card);padding:4px;border-radius:var(--radius-sm);margin-bottom:1.5rem;flex-wrap:wrap}
.preview-tab{flex:1;min-width:fit-content;padding:10px 12px;border:none;background:transparent;color:var(--text-muted);font-size:0.8rem;font-weight:500;border-radius:var(--radius-xs);cursor:pointer;transition:all var(--transition);font-family:var(--font-main);white-space:nowrap}
.preview-tab.active{background:var(--accent);color:#fff}
.preview-tab:hover:not(.active){color:var(--text);background:var(--bg-input)}
.preview-view{display:none;animation:fadeInUp 0.3s ease}.preview-view.active{display:block}

/* ===== CASE 3D STYLES ===== */
.case-3d{display:flex;flex-direction:column;align-items:center;padding:2rem 0;min-height:380px;justify-content:center}

/* Closed Front — Transparent jewel case (142×125mm ratio) */
.closed-front .jewel-case{width:355px;height:312px;position:relative;border-radius:4px;overflow:hidden;box-shadow:8px 8px 30px rgba(0,0,0,0.4),-2px -2px 12px rgba(255,255,255,0.06),inset 0 0 80px rgba(200,220,255,0.04);border:3px solid rgba(180,200,220,0.35);background:rgba(10,10,12,0.92)}
.closed-front .jewel-case::before{content:'';position:absolute;inset:8px;border:1px solid rgba(180,200,220,0.12);border-radius:2px;pointer-events:none;z-index:3}
.jewel-art{width:100%;height:100%;object-fit:cover;display:block;max-width:100%;max-height:100%}
.jewel-gloss{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.jewel-gloss::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(135deg,transparent 30%,rgba(200,220,255,0.12) 42%,rgba(255,255,255,0.35) 50%,rgba(200,220,255,0.12) 58%,transparent 70%);animation:glossSweep 4s ease-in-out infinite alternate}
.jewel-gloss::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(200,220,255,0.14) 0%,rgba(255,255,255,0.06) 25%,transparent 50%,rgba(0,0,0,0.04) 100%)}
@keyframes glossSweep{0%{transform:translate(-40%,-40%)}100%{transform:translate(40%,40%)}}
.jewel-edge-right{position:absolute;top:0;right:-6px;width:6px;height:100%;background:linear-gradient(180deg,rgba(200,210,220,0.4),rgba(150,160,170,0.2),rgba(200,210,220,0.35));border-radius:0 2px 2px 0}
.jewel-edge-bottom{position:absolute;bottom:-6px;left:0;width:100%;height:6px;background:linear-gradient(90deg,rgba(200,210,220,0.4),rgba(150,160,170,0.2),rgba(200,210,220,0.35));border-radius:0 0 2px 2px}

/* Closed Back — Transparent jewel case (142×125mm ratio) */
.closed-back .jewel-case{width:355px;height:312px;position:relative;border-radius:4px;overflow:hidden;box-shadow:-8px 8px 30px rgba(0,0,0,0.4),2px -2px 12px rgba(255,255,255,0.06),inset 0 0 80px rgba(200,220,255,0.04);border:3px solid rgba(180,200,220,0.35);background:rgba(10,10,12,0.92)}
.closed-back .jewel-case::before{content:'';position:absolute;inset:8px;border:1px solid rgba(180,200,220,0.12);border-radius:2px;pointer-events:none;z-index:3}
.jewel-tray-texture{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent,transparent 60px,rgba(200,220,255,0.03) 60px,rgba(200,220,255,0.03) 61px);pointer-events:none}
.jewel-edge-left{position:absolute;top:0;left:-6px;width:6px;height:100%;background:linear-gradient(180deg,rgba(200,210,220,0.4),rgba(150,160,170,0.2),rgba(200,210,220,0.35));border-radius:2px 0 0 2px}

/* Spine */
.spine-view{padding:2rem}
.spine-mockup-img{display:flex;justify-content:center;align-items:center}
.spine-preview-img{height:380px;width:auto;object-fit:contain;border:1px solid #444;border-radius:2px;box-shadow:4px 4px 20px rgba(0,0,0,0.5)}

/* Open Case — Transparent jewel case (142×125mm ratio) */
.open-case{display:flex;align-items:stretch;box-shadow:0 12px 40px rgba(0,0,0,0.4),0 0 60px rgba(200,220,255,0.04);border-radius:4px;overflow:hidden}
.open-left{width:340px;height:300px;position:relative;background:rgba(10,10,12,0.92);border:3px solid rgba(180,200,220,0.35);border-right:none;flex-shrink:0}
.open-left .open-art{width:100%;height:100%;object-fit:cover;display:block}
.open-left::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(200,220,255,0.12) 0%,transparent 40%,rgba(0,0,0,0.03) 100%);pointer-events:none;z-index:3}
.open-spine{width:10px;background:linear-gradient(180deg,rgba(200,210,220,0.35),rgba(150,160,170,0.15),rgba(200,210,220,0.3));flex-shrink:0}
.open-right{width:340px;height:300px;position:relative;background:rgba(10,10,12,0.92);border:3px solid rgba(180,200,220,0.35);border-left:none;flex-shrink:0;overflow:hidden}
.open-right .jewel-gloss{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:4}
.open-right .jewel-gloss::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(135deg,transparent 30%,rgba(200,220,255,0.10) 42%,rgba(255,255,255,0.22) 50%,rgba(200,220,255,0.10) 58%,transparent 70%);animation:glossSweep 4s ease-in-out infinite alternate}
.open-right .jewel-gloss::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(200,220,255,0.10) 0%,transparent 40%,rgba(0,0,0,0.04) 100%)}
.open-tray-art{width:100%;height:100%;object-fit:cover;display:block;opacity:0.3}
.open-cd-holder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:76%;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,0.6)}
.open-cd-holder::after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,0.2) 0%,transparent 45%,rgba(255,255,255,0.05) 100%);pointer-events:none;z-index:5}
.open-cd-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.open-cd-hole{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:14%;height:14%;border-radius:50%;background:rgba(13,17,23,0.9);border:2px solid rgba(200,220,255,0.12);z-index:2}
.open-cd-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:26%;height:26%;border-radius:50%;border:1px solid rgba(255,255,255,0.06);z-index:2;pointer-events:none}
.open-cd-spindle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8%;height:8%;border-radius:50%;background:rgba(200,210,220,0.2);border:1px solid rgba(200,210,220,0.3);z-index:3}

/* CD Solo Preview */
.cd-solo{padding:2rem 0}
.cd-preview-disc{width:300px;height:300px;border-radius:50%;position:relative;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,0.5);background:#111;margin:0 auto}
.cd-preview-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.cd-preview-disc::after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,0.18) 0%,transparent 40%,rgba(255,255,255,0.06) 70%,transparent 100%);pointer-events:none;z-index:4}
.cd-preview-hole{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:14%;height:14%;border-radius:50%;background:rgba(13,17,23,0.9);border:2px solid rgba(200,220,255,0.12);z-index:3}
.cd-preview-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:26%;height:26%;border-radius:50%;border:1px solid rgba(255,255,255,0.06);z-index:2;pointer-events:none}
.cd-preview-ring.outer{width:96%;height:96%;border-color:rgba(255,255,255,0.04)}
.cd-side-label{text-align:center;margin-top:16px;font-size:0.85rem;color:var(--text-muted);font-style:italic}

/* CD Reflective/Data Side */
.cd-reflective{background:linear-gradient(135deg,#c0c0c0 0%,#e8e8e8 20%,#a0a0a0 40%,#d5d5d5 60%,#b8b8b8 80%,#e0e0e0 100%)}
.cd-rainbow{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,
    rgba(255,0,0,0.08),rgba(255,165,0,0.1),rgba(255,255,0,0.08),
    rgba(0,255,0,0.1),rgba(0,128,255,0.08),rgba(128,0,255,0.1),
    rgba(255,0,0,0.08));z-index:1;mix-blend-mode:overlay;animation:cdShimmer 6s linear infinite}
.cd-grooves{position:absolute;inset:14%;border-radius:50%;z-index:1;
    background:repeating-radial-gradient(circle at center,rgba(0,0,0,0) 0px,rgba(0,0,0,0) 2px,rgba(0,0,0,0.06) 2.5px,rgba(0,0,0,0) 3px);pointer-events:none}
@keyframes cdShimmer{to{transform:rotate(360deg)}}

/* ===== 3D CD CASE INTERACTIVE ===== */
.cd3d-scene{width:360px;height:320px;perspective:900px;margin:0 auto 16px}
.cd3d-case{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateY(20deg) rotateX(5deg);transition:transform 0.05s linear}
.cd3d-face{position:absolute;backface-visibility:hidden;overflow:hidden}
.cd3d-face img{width:100%;height:100%;object-fit:cover;display:block;max-width:100%;max-height:100%}

/* Front — Transparent (142×125mm ratio) */
.cd3d-front{width:340px;height:300px;top:10px;left:10px;background:rgba(10,10,12,0.92);border:3px solid rgba(180,200,220,0.35);border-radius:3px;z-index:2}
.cd3d-gloss{position:absolute;inset:0;pointer-events:none;border-radius:3px;overflow:hidden;z-index:5}
.cd3d-gloss::before{content:'';position:absolute;top:-80%;left:-80%;width:260%;height:260%;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,0.14) 42%,rgba(255,255,255,0.28) 50%,rgba(255,255,255,0.14) 58%,transparent 70%);animation:glossSweep3d 5s ease-in-out infinite alternate}
.cd3d-gloss::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,0.2) 0%,transparent 40%,rgba(0,0,0,0.12) 100%);border-radius:3px}
@keyframes glossSweep3d{0%{transform:translate(-35%,-35%) rotate(-5deg)}100%{transform:translate(35%,35%) rotate(5deg)}}
/* Back — Transparent (142×125mm ratio) */
.cd3d-back{width:340px;height:300px;top:10px;left:10px;background:rgba(10,10,12,0.92);border:3px solid rgba(180,200,220,0.35);border-radius:3px;transform:rotateY(180deg) translateZ(12px);overflow:hidden;position:relative}
.cd3d-back .cd3d-gloss{position:absolute;inset:0;pointer-events:none;border-radius:3px;overflow:hidden;z-index:5}
.cd3d-back .cd3d-gloss::before{content:'';position:absolute;top:-80%;left:-80%;width:260%;height:260%;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,0.10) 42%,rgba(255,255,255,0.20) 50%,rgba(255,255,255,0.10) 58%,transparent 70%);animation:glossSweep3d 5s ease-in-out infinite alternate}
.cd3d-back .cd3d-gloss::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,0.14) 0%,transparent 40%,rgba(0,0,0,0.08) 100%);border-radius:3px}
/* Right spine — Transparent */
.cd3d-right{width:12px;height:300px;top:10px;left:350px;background:linear-gradient(180deg,rgba(200,210,220,0.3),rgba(150,160,170,0.12),rgba(200,210,220,0.25));transform:rotateY(90deg);transform-origin:left center;display:flex;align-items:center;justify-content:center;overflow:hidden}
/* Left spine — Transparent */
.cd3d-left{width:12px;height:300px;top:10px;left:10px;background:linear-gradient(180deg,rgba(200,210,220,0.3),rgba(150,160,170,0.12),rgba(200,210,220,0.25));transform:rotateY(-90deg);transform-origin:right center;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cd3d-spine-text{writing-mode:vertical-rl;text-orientation:mixed;font-size:0.4rem;color:rgba(255,255,255,0.5);letter-spacing:0.5px;white-space:nowrap;overflow:hidden;max-height:280px;text-transform:uppercase}
.cd3d-spine-img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
/* Top — Transparent */
.cd3d-top{width:340px;height:12px;top:10px;left:10px;background:linear-gradient(90deg,rgba(200,210,220,0.3),rgba(150,160,170,0.12),rgba(200,210,220,0.25));transform:rotateX(90deg);transform-origin:bottom center}
/* Bottom — Transparent */
.cd3d-bottom{width:340px;height:12px;top:298px;left:10px;background:linear-gradient(90deg,rgba(200,210,220,0.25),rgba(150,160,170,0.1),rgba(200,210,220,0.2));transform:rotateX(-90deg);transform-origin:top center}

/* Slider */
.cd3d-slider{width:300px;-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:var(--bg-input);outline:none;cursor:pointer}
.cd3d-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:grab;box-shadow:0 1px 6px var(--accent-glow);transition:transform 0.12s ease}
.cd3d-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}
.cd3d-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:grab;border:none}
.cd3d-hint{font-size:0.8rem;color:var(--text-muted);margin-top:8px}

/* ===== CASE TYPE SELECTION ===== */
.case-type-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:2rem}
.case-type-card{background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius);padding:24px;cursor:pointer;transition:all var(--transition);text-align:center}
.case-type-card:hover{border-color:var(--text-muted);background:var(--bg-card-hover)}
.case-type-card.active{border-color:var(--accent);background:rgba(108,99,255,0.08);box-shadow:0 0 20px var(--accent-glow)}
.case-type-icon{margin:0 auto 16px;color:var(--text-muted);display:flex;justify-content:center}
.case-type-card.active .case-type-icon{color:var(--accent)}
.case-type-card h3{font-size:1.1rem;font-weight:700;margin-bottom:8px}
.case-type-card p{font-size:0.85rem;color:var(--text-secondary);margin-bottom:12px;line-height:1.5}
.case-features{list-style:none;text-align:left;padding:0}
.case-features li{font-size:0.8rem;color:var(--text-muted);padding:4px 0;padding-left:20px;position:relative}
.case-features li::before{content:'✓';position:absolute;left:0;color:var(--accent);font-weight:700}
.case-dimensions{margin-top:12px;padding:8px 12px;background:rgba(108,99,255,0.08);border:1px solid rgba(108,99,255,0.2);border-radius:var(--radius-xs);font-size:0.75rem;color:var(--accent);font-family:var(--font-mono);text-align:center;letter-spacing:0.5px}
.case-price{margin-top:12px;font-size:1.1rem;color:var(--text);font-weight:500}
.case-price strong{font-size:1.4rem;font-weight:900;color:var(--accent)}

/* ===== AD / PAYMENT MODAL ===== */
.ad-modal{max-width:500px}
.ad-content{padding:24px;text-align:center}
.ad-placeholder{margin-bottom:24px}
.ad-box{background:var(--bg-input);border:2px dashed var(--border);border-radius:var(--radius);padding:20px;min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ad-box-label{font-size:0.7rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:8px}
.ad-box-inner{color:var(--text-muted);font-size:0.9rem}
.ad-timer{margin-bottom:24px}
.ad-timer-circle{width:80px;height:80px;margin:0 auto 12px;position:relative}
.ad-timer-circle svg{width:100%;height:100%;transform:rotate(-90deg)}
.ad-timer-bg{fill:none;stroke:var(--border);stroke-width:6}
.ad-timer-progress{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear}
.ad-timer-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.4rem;font-weight:800;color:var(--text);font-family:var(--font-mono)}
.ad-timer-label{font-size:0.9rem;color:var(--text-secondary)}
.ad-actions{display:flex;flex-direction:column;align-items:center;gap:8px}
.ad-premium-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 32px;background:linear-gradient(135deg,#f59e0b,#ef4444);border:none;border-radius:50px;color:#fff;font-size:1rem;font-weight:700;cursor:pointer;transition:all var(--transition);font-family:var(--font-main);width:100%;max-width:320px}
.ad-premium-btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(245,158,11,0.3)}
.ad-premium-sub{font-size:0.75rem;font-weight:400;opacity:0.9}
.ad-download-btn{padding:14px 32px;width:100%;max-width:320px}

/* ===== 3D OPEN PREVIEW ===== */
.preview-section-title{text-align:center;font-size:1rem;font-weight:700;color:var(--text-secondary);margin-bottom:16px;text-transform:uppercase;letter-spacing:1px}
.cd3d-open-wrapper{display:flex;justify-content:center;padding:20px 0 16px;min-height:340px;align-items:center}
.cd3d-open-scene{perspective:1200px;display:flex;justify-content:center;align-items:center}
.cd3d-open-rotator{position:relative;transform-style:preserve-3d;transition:transform 0.05s linear;display:inline-block}
.cd3d-open-face{backface-visibility:hidden}
.cd3d-open-face-front{position:relative}
.cd3d-open-face-back{position:absolute;top:0;left:0;width:100%;height:100%;transform:rotateY(180deg);display:flex;align-items:stretch}
.cd3d-open-exterior{display:flex;align-items:stretch;width:100%;height:100%;border-radius:4px;overflow:hidden}
.cd3d-open-exterior-panel{flex:1;overflow:hidden;background:rgba(200,220,240,0.04);border:2px solid rgba(180,200,220,0.25);position:relative}
.cd3d-open-exterior-panel:first-child{border-radius:4px 0 0 4px;border-right:none}
.cd3d-open-exterior-panel:last-child{border-radius:0 4px 4px 0;border-left:none}
.cd3d-open-exterior-panel img{width:100%;height:100%;object-fit:cover;display:block}
.cd3d-open-exterior-spine-bar{width:14px;flex-shrink:0;background:linear-gradient(180deg,rgba(200,210,220,0.35),rgba(150,160,170,0.15),rgba(200,210,220,0.3));overflow:hidden;position:relative}
.cd3d-open-exterior-spine-bar img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.cd3d-open-case{display:flex;align-items:stretch;transition:transform 0.1s linear;transform-style:preserve-3d}
.cd3d-open-left{width:310px;height:275px;position:relative;background:rgba(10,10,12,0.92);border:3px solid rgba(180,200,220,0.35);border-right:none;border-radius:4px 0 0 4px;overflow:hidden;flex-shrink:0}
.cd3d-open-left img{width:100%;height:100%;object-fit:cover;display:block}
.cd3d-open-left::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.1) 0%,transparent 40%,rgba(0,0,0,0.05) 100%);pointer-events:none;z-index:3}

/* Ajoute une tranche épaisse à gauche — Transparent */
.cd3d-open-left::before {
    content: '';
    position: absolute;
    top: 12px;
    left: -16px;
    width: 16px;
    height: calc(100% - 24px);
    background: linear-gradient(90deg, rgba(150,160,170,0.15) 60%, rgba(200,210,220,0.25) 100%);
    border-radius: 6px 0 0 6px;
    box-shadow: 2px 0 8px rgba(0,0,0,0.12);
    z-index: 2;
}
.cd3d-open-label{position:absolute;top:8px;left:8px;font-size:0.65rem;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:0.5px;z-index:5;background:rgba(0,0,0,0.5);padding:2px 8px;border-radius:4px}
.cd3d-open-spine{width:14px;flex-shrink:0;background:linear-gradient(180deg,rgba(200,210,220,0.35),rgba(150,160,170,0.15),rgba(200,210,220,0.3));overflow:hidden;position:relative}
.cd3d-open-right{width:310px;height:275px;position:relative;background:rgba(10,10,12,0.92);border:3px solid rgba(180,200,220,0.35);border-left:none;border-radius:0 4px 4px 0;overflow:hidden;flex-shrink:0}
.cd3d-open-right .cd3d-gloss{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:4}
.cd3d-open-right .cd3d-gloss::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(135deg,transparent 35%,rgba(255,255,255,0.12) 45%,rgba(255,255,255,0.22) 50%,rgba(255,255,255,0.12) 55%,transparent 65%);animation:glossSweep 4s ease-in-out infinite alternate}
.cd3d-open-right .cd3d-gloss::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.10) 0%,transparent 40%,rgba(0,0,0,0.06) 100%)}

/* Ajoute une tranche épaisse à droite — Transparent */
.cd3d-open-right::after {
    content: '';
    position: absolute;
    top: 12px;
    right: -16px;
    width: 16px;
    height: calc(100% - 24px);
    background: linear-gradient(270deg, rgba(150,160,170,0.15) 60%, rgba(200,210,220,0.25) 100%);
    border-radius: 0 6px 6px 0;
    box-shadow: -2px 0 8px rgba(0,0,0,0.12);
    z-index: 2;
}
.cd3d-open-back-inside-img{width:100%;height:100%;object-fit:cover;display:block}
.cd3d-open-cd-holder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70%;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,0.6)}
.cd3d-open-cd-holder::after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,0.2) 0%,transparent 45%,rgba(255,255,255,0.06) 100%);pointer-events:none;z-index:5}
.cd3d-open-cd-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.cd3d-open-cd-hole{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:14%;height:14%;border-radius:50%;background:rgba(13,17,23,0.9);border:2px solid rgba(200,220,255,0.12);z-index:2}
.cd3d-open-cd-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:26%;height:26%;border-radius:50%;border:1px solid rgba(255,255,255,0.06);z-index:2;pointer-events:none}

/* ===== MULTI DISC OPEN PREVIEW ===== */
.cd3d-multi-book{display:flex;align-items:stretch;min-height:280px;transform-style:preserve-3d}
.cd3d-multi-panel{width:290px;height:255px;position:relative;background:rgba(10,10,12,0.92);border:3px solid rgba(180,200,220,0.35);overflow:hidden;flex-shrink:0}
.cd3d-multi-panel img{width:100%;height:100%;object-fit:cover;display:block}
.cd3d-multi-panel .cd3d-gloss{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:4}
.cd3d-multi-panel .cd3d-gloss::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(135deg,transparent 35%,rgba(255,255,255,0.14) 45%,rgba(255,255,255,0.26) 50%,rgba(255,255,255,0.14) 55%,transparent 65%);animation:glossSweep 4s ease-in-out infinite alternate}
.cd3d-multi-panel .cd3d-gloss::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.12) 0%,transparent 40%,rgba(0,0,0,0.06) 100%)}
.cd3d-multi-left{border-radius:4px 0 0 4px;border-right:1px solid rgba(255,255,255,0.1)}
.cd3d-multi-right{border-radius:0 4px 4px 0;border-left:1px solid rgba(255,255,255,0.1)}
.cd3d-multi-cd-holder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:65%;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,0.6)}
.cd3d-multi-cd-holder::after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,0.18) 0%,transparent 45%,rgba(255,255,255,0.05) 100%);pointer-events:none;z-index:5}
.cd3d-multi-cd-holder-back{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:65%;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,0.6)}
.cd3d-multi-cd-holder-back::after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,0.18) 0%,transparent 45%,rgba(255,255,255,0.05) 100%);pointer-events:none;z-index:5}
.cd3d-multi-cd-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.cd3d-multi-cd-hole{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:14%;height:14%;border-radius:50%;background:rgba(13,17,23,0.9);border:2px solid rgba(200,220,255,0.12);z-index:2}
/* Flipping page wrapper — sits between the two transparent panels */
.cd3d-multi-page-wrapper{width:6px;flex-shrink:0;position:relative;z-index:10}
.cd3d-multi-page{width:270px;height:255px;position:absolute;top:0;right:0;transform-origin:right center;transform:rotateY(0deg);transform-style:preserve-3d;transition:transform 0.15s linear}
.cd3d-multi-page-front,.cd3d-multi-page-back{position:absolute;inset:0;backface-visibility:hidden;background:rgba(20,20,22,0.55);backdrop-filter:blur(2px);border:1px solid rgba(255,255,255,0.12);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}
.cd3d-multi-page-back{transform:rotateY(180deg);background:rgba(30,30,34,0.55)}

/* ===== OPEN CD2 FLIPPED PAGE OVERLAY ===== */
.open-flipped-page{position:absolute;inset:0;background:rgba(20,20,22,0.60);backdrop-filter:blur(2px);border:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;z-index:5}
.open-flipped-cd-holder{width:76%;aspect-ratio:1;border-radius:50%;overflow:hidden;position:relative;box-shadow:0 4px 24px rgba(0,0,0,0.6)}
.open-flipped-cd-holder::after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,0.2) 0%,transparent 45%,rgba(255,255,255,0.05) 100%);pointer-events:none;z-index:5}

/* ===== TEMPLATES MODAL ===== */
.templates-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:4px}
.template-card{border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;border:2px solid var(--border);transition:all var(--transition)}
.template-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.3)}
.template-preview{width:100%;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;gap:6px;overflow:hidden}
.tpl-preview-artist{font-size:0.55rem;letter-spacing:1px;text-transform:uppercase;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0.85}
.tpl-preview-title{font-size:1rem;font-weight:800;text-align:center;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.template-card-label{padding:8px 12px;font-size:0.75rem;font-weight:600;background:var(--bg-card);text-align:center;color:var(--text-secondary);border-top:1px solid var(--border)}
.tool-btn-templates{background:rgba(108,99,255,0.12);border:1px solid rgba(108,99,255,0.3);color:var(--accent)}
.tool-btn-templates:hover{background:rgba(108,99,255,0.2);color:var(--accent)}

/* ===== EXPORT GRID (updated for more cards) ===== */
.export-individual{margin-bottom:2rem;text-align:center}
.export-individual-label{font-size:0.85rem;color:var(--text-muted);margin-bottom:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}
.export-btn-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}

/* ===== FONT PREVIEW IN SELECT ===== */
.font-preview-option{padding:6px 10px;font-size:0.9rem}
.font-preview-wrap{display:flex;flex-direction:column;gap:4px}
.font-preview-item{padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-xs);cursor:pointer;transition:all var(--transition);background:var(--bg-input)}
.font-preview-item:hover{border-color:var(--accent);background:var(--bg-card-hover)}
.font-preview-item.font-active{border-color:var(--accent);background:rgba(108,99,255,0.12)}
.font-preview-sample{font-size:1rem;line-height:1.4;color:var(--text)}
.font-preview-name{font-size:0.65rem;color:var(--text-muted);font-family:var(--font-main);margin-top:2px}

/* ===== TRANSPARENT PREVIEW CONTAINERS ===== */
.cd3d-container{margin:0 auto 2rem;text-align:center;background:rgba(200,220,255,0.02);border:1px solid rgba(180,200,220,0.12);border-radius:var(--radius);padding:24px;backdrop-filter:blur(4px)}
.preview-view .case-3d{background:rgba(200,220,255,0.02);border:1px solid rgba(180,200,220,0.08);border-radius:var(--radius);backdrop-filter:blur(2px)}

/* ===== PRICING SECTION ===== */
.pricing-cards{display:flex;justify-content:center;gap:20px;margin-bottom:2rem}
.pricing-card{display:none;background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius);padding:28px 24px;text-align:center;transition:all var(--transition);position:relative;flex:0 1 320px;max-width:380px}
.pricing-card.active{display:block}
.pricing-card:hover{border-color:var(--text-muted);background:var(--bg-card-hover)}
.pricing-card.active{border-color:var(--accent);background:rgba(108,99,255,0.06);box-shadow:0 0 20px var(--accent-glow)}
.pricing-card .price{font-size:2rem;font-weight:900;color:var(--text);margin:8px 0}
.pricing-card .price-label{font-size:0.8rem;color:var(--text-muted)}
.pricing-card .price-includes{font-size:0.75rem;color:var(--accent);margin-top:8px}
.pricing-promo{text-align:center;padding:14px 20px;background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.2);border-radius:var(--radius-sm);margin-bottom:2rem;font-size:0.9rem;color:var(--success)}

/* ===== ORDER FORM ===== */
.order-section{margin-top:2rem}
.order-form{max-width:540px;margin:0 auto}
.order-form .form-group{margin-bottom:1rem}
.order-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.order-summary{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:1.5rem}
.order-summary-row{display:flex;justify-content:space-between;padding:6px 0;font-size:0.9rem;color:var(--text-secondary)}
.order-summary-row.total{border-top:1px solid var(--border);padding-top:12px;margin-top:8px;font-weight:700;font-size:1.05rem;color:var(--text)}
.order-legal{margin-bottom:1.5rem}
.order-legal label{display:flex;align-items:flex-start;gap:10px;font-size:0.85rem;color:var(--text-secondary);cursor:pointer;line-height:1.5}
.order-legal input[type="checkbox"]{margin-top:3px;accent-color:var(--accent);flex-shrink:0;width:18px;height:18px}
.order-legal a{color:var(--accent);text-decoration:underline}
.btn-order{width:100%;padding:16px;font-size:1.05rem;font-weight:700;border-radius:var(--radius-sm)}
.btn-order:disabled{opacity:0.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.order-success{text-align:center;padding:2rem;background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.2);border-radius:var(--radius);margin-top:1.5rem}
.order-success h3{color:var(--success);font-size:1.3rem;margin-bottom:8px}
.order-success p{color:var(--text-secondary);font-size:0.9rem}

/* ===== STRIPE PAYMENT MODAL ===== */
.payment-summary{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;margin-bottom:16px}

/* ===== TOS MODAL ===== */
.tos-modal{max-width:700px;max-height:80vh}
.tos-content{padding:24px;overflow-y:auto;max-height:calc(80vh - 120px);font-size:0.88rem;color:var(--text-secondary);line-height:1.7}
.tos-content h2{font-size:1.1rem;color:var(--text);margin:1.5rem 0 0.5rem;font-weight:700}
.tos-content h2:first-child{margin-top:0}
.tos-content p{margin-bottom:0.75rem}
.tos-content ul{margin:0.5rem 0 1rem 1.5rem}
.tos-content ul li{margin-bottom:0.4rem}

/* ===== GLOBAL SITE FOOTER ===== */
.site-footer{border-top:1px solid var(--border);background:var(--bg-card);margin-top:auto;padding:1.5rem 1rem}
.site-footer-inner{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:0.82rem;color:var(--text-muted)}
.site-footer-links{display:flex;gap:18px;flex-wrap:wrap}
.site-footer-links a{color:var(--text-muted);text-decoration:none;transition:color var(--transition)}
.site-footer-links a:hover{color:var(--accent)}
@media(max-width:640px){
  .site-footer-inner{flex-direction:column;text-align:center}
  .site-footer-links{justify-content:center;gap:14px}
}

/* ===== PREVIEW LOADING STATE ===== */
.cd3d-container{position:relative}
.cd3d-container.is-loading{min-height:300px}
.cd3d-container.is-loading > *:not(.preview-section-title){opacity:0;pointer-events:none}
.cd3d-container.is-loading::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(108,99,255,0.04),rgba(168,85,247,0.02));border-radius:var(--radius);z-index:10;backdrop-filter:blur(2px)}
.cd3d-container.is-loading::after{content:'';position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border:3px solid rgba(108,99,255,0.18);border-top-color:var(--accent);border-radius:50%;animation:spin 0.7s linear infinite;z-index:11}

/* ===== MOBILE PANEL TOGGLES (hidden by default on desktop) ===== */
.mobile-panel-toggle{display:none}
.mobile-panel-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:180;backdrop-filter:blur(4px)}
.mobile-panel-backdrop.is-open{display:block}

/* ====================================================
   MOBILE EDITOR — full rewrite for screens <= 900px
   ==================================================== */
@media(max-width:900px){
    /* App-level adjustments */
    .steps-indicator{display:none}
    .export-preview-row{grid-template-columns:1fr 1fr}
    .case-type-grid{grid-template-columns:1fr}
    .pricing-cards{grid-template-columns:1fr}
    .modal-overlay{padding:1rem}
    .modal{max-height:90vh}
    .search-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
    .templates-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}

    /* ===== EDITOR LAYOUT ===== */
    /* Use dynamic viewport units to handle iOS/Android address bar correctly. Fallback to 100vh. */
    .editor-layout{
        height:calc(100vh - 53px);
        height:calc(100dvh - 53px);
        display:flex;
        flex-direction:column;
        overflow:hidden;
    }

    /* TOOLBAR — compact icons only, horizontal scroll */
    .editor-toolbar{
        flex-shrink:0;
        padding:6px 8px;
        gap:2px;
        overflow-x:auto;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
    }
    .editor-toolbar::-webkit-scrollbar{display:none}
    .tool-btn{
        padding:9px 10px;
        flex-shrink:0;
        gap:0;
    }
    .tool-btn span{display:none}
    .tool-btn svg{width:20px;height:20px}
    .toolbar-separator{margin:0 4px;height:24px}
    /* Hide the toolbar variant of mobile-panel-toggle (we use the bottom-bar variant) */
    .editor-toolbar .mobile-panel-toggle{display:none}

    /* MAIN AREA holds canvas only (panels become bottom sheets) */
    .editor-main{
        flex:1;
        min-height:0;
        display:flex;
        flex-direction:column;
        overflow:hidden;
    }
    .editor-canvas-area{
        flex:1;
        min-height:0;
        display:flex;
        flex-direction:column;
    }

    /* CANVAS TABS — horizontal scroll */
    .canvas-tabs{
        flex-shrink:0;
        gap:2px;
        padding:6px 8px;
        overflow-x:auto;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
        flex-wrap:nowrap;
    }
    .canvas-tabs::-webkit-scrollbar{display:none}
    .canvas-tab{
        padding:8px 14px;
        font-size:0.78rem;
        flex-shrink:0;
        white-space:nowrap;
    }

    /* CANVAS WRAPPER — fills remaining vertical space */
    .canvas-wrapper{
        flex:1;
        min-height:0;
        padding:8px;
        background:repeating-conic-gradient(#1c2330 0% 25%,#161b22 0% 50%) 50%/16px 16px;
    }

    /* CANVAS ZOOM — slim bar */
    .canvas-zoom{
        flex-shrink:0;
        padding:4px 12px;
        gap:6px;
    }
    .zoom-btn{padding:5px 14px;min-height:32px}

    /* BOTTOM BAR — Back / Layers + Props / Next */
    .editor-bottom{
        flex-shrink:0;
        padding:8px 10px;
        gap:6px;
        display:grid;
        grid-template-columns:auto 1fr auto;
        align-items:center;
    }
    .editor-bottom-info{display:none}
    .editor-bottom .btn-secondary,
    .editor-bottom .btn-primary{
        padding:11px 14px;
        font-size:0.85rem;
        gap:6px;
        border-radius:var(--radius-sm);
    }
    .editor-bottom .mobile-panel-toggle{
        display:flex;
        gap:6px;
        justify-content:center;
        align-items:center;
    }
    .editor-bottom .mobile-panel-toggle .tool-btn{
        background:var(--bg-input);
        border:1px solid var(--border);
        padding:9px 12px;
        gap:5px;
        flex:0 0 auto;
    }
    .editor-bottom .mobile-panel-toggle .tool-btn span{display:inline;font-size:0.78rem}
    .editor-bottom .mobile-panel-toggle .tool-btn svg{width:16px;height:16px}

    /* PANELS — bottom sheets sliding up from bottom */
    .editor-panel{
        display:flex;
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        top:auto;
        width:100%;
        max-height:65vh;
        max-height:65dvh;
        z-index:200;
        transform:translateY(100%);
        transition:transform 0.28s ease;
        border:none;
        border-top:1px solid var(--border);
        border-radius:18px 18px 0 0;
        box-shadow:0 -10px 40px rgba(0,0,0,0.55);
        background:var(--bg-card);
    }
    .editor-panel.panel-props{border-left:none}
    .editor-panel.is-open{transform:translateY(0)}
    .editor-panel::before{
        content:'';
        position:absolute;
        top:8px;
        left:50%;
        transform:translateX(-50%);
        width:42px;
        height:4px;
        border-radius:2px;
        background:var(--text-muted);
        opacity:0.4;
        z-index:5;
    }
    .editor-panel .panel-header{
        padding:18px 20px 12px;
        text-align:center;
        border-bottom:1px solid var(--border);
    }
    .editor-panel .panel-body{
        padding:12px 16px 24px;
    }
    .layer-item{padding:11px 12px;font-size:0.88rem}
    .props-row input[type="number"]{padding:8px 10px;font-size:0.88rem;min-height:36px}
    .props-row input[type="range"]{height:8px;min-height:32px}
    .props-row select{padding:8px 10px;font-size:0.88rem;min-height:36px}
    .props-align-btn{padding:8px 10px;font-size:0.82rem;min-height:36px}
    .props-check{padding:8px 0}
}

/* General mobile (not editor-specific) */
@media(max-width:640px){
    .step-content{padding:2rem 1.25rem 3rem}
    .logo h1{font-size:2.2rem}
    .track-adder{flex-wrap:wrap}
    .track-adder input:nth-child(3){max-width:none}
    .export-big-btns .btn-export{font-size:0.8rem;padding:12px 16px}
    .export-preview-row{grid-template-columns:1fr}
    .cd3d-open-left,.cd3d-open-right{width:180px;height:160px}
    .cd3d-multi-panel{width:160px;height:140px}
    .cd3d-multi-page{width:150px;height:140px}

    /* Order form */
    .order-form .form-row{grid-template-columns:1fr}

    /* Step actions */
    .step-actions{flex-direction:column-reverse;align-items:stretch}
    .step-actions .btn-primary,.step-actions .btn-secondary{justify-content:center;width:100%}

    /* Hero */
    .hero-content{padding:1.5rem}
    .free-shipping-banner{padding:12px 18px;font-size:0.85rem}
}
@media(max-width:520px){
    .cd3d-scene{transform:scale(0.78);transform-origin:center top;margin-bottom:-72px}
    .cd3d-slider{width:min(280px,90%)}
    .cd3d-container{padding:18px 12px}
    .case-type-card{padding:18px}
    .pricing-card{padding:22px 18px}
    .preview-tab{padding:8px 10px;font-size:0.75rem}
    .hero-badges{gap:8px}
    .badge{padding:5px 11px;font-size:0.72rem}

    /* Editor on tiny screens — hide back/next svg arrows to save room */
    .editor-bottom .btn-secondary svg,
    .editor-bottom .btn-primary svg{display:none}
    .editor-bottom .btn-secondary,
    .editor-bottom .btn-primary{padding:10px 12px;font-size:0.78rem}
    .editor-bottom .mobile-panel-toggle .tool-btn span{display:none}
    .editor-bottom .mobile-panel-toggle .tool-btn{padding:9px 10px}
    .canvas-tab{padding:7px 11px;font-size:0.72rem}
}
@media(max-width:380px){
    .cd3d-scene{transform:scale(0.62);margin-bottom:-122px}
    .cd3d-open-left,.cd3d-open-right{width:140px;height:124px}
    .cd3d-multi-panel{width:130px;height:114px}
    .cd3d-multi-page{width:124px;height:114px}
    .logo h1{font-size:1.8rem}
    .step-content h2{font-size:1.4rem}
}