/* StitcherNX Website Builder - Modern Dark Theme */
:root {
    --bg-primary: #0f0f1a;
    --bg-secondary: #141425;
    --bg-card: #1a1a2e;
    --bg-input: #1e1e32;
    --bg-panel: #161628;
    --bg-elevated: #22223a;
    --text-primary: #f0f0f5;
    --text-secondary: #a0a0b8;
    --text-muted: #5a5a72;
    --accent: #9c27b0;
    --accent-glow: rgba(156, 39, 176, 0.25);
    --accent-light: #4fc3f7;
    --cyan: #4fc3f7;
    --cyan-glow: rgba(79, 195, 247, 0.15);
    --green: #81c784;
    --orange: #ffab40;
    --yellow: #ffc107;
    --border: rgba(255, 255, 255, 0.08);
    --border-focus: rgba(156, 39, 176, 0.5);
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-glow: 0 0 20px rgba(156, 39, 176, 0.15);
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --glass: rgba(255, 255, 255, 0.03);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Header */
.header {
    background: rgba(20, 20, 37, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    max-width: 840px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-left > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.back-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--glass);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition);
}

.back-link:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
    box-shadow: var(--shadow-glow);
}

.logo-text {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    background: linear-gradient(135deg, var(--accent), var(--cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.step-title {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 400;
}

.step-indicator {
    font-size: 22px;
    font-weight: 700;
    color: var(--cyan);
    opacity: 0.8;
}

/* Progress */
.progress-container {
    max-width: 840px;
    margin: 0 auto;
    padding: 0 24px;
}

.progress-bar {
    height: 3px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--cyan));
    width: 16.67%;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 12px rgba(156, 39, 176, 0.4);
}

/* Main Content */
.main-content {
    flex: 1;
    max-width: 840px;
    margin: 0 auto;
    padding: 24px 24px 32px;
    width: 100%;
    overflow: visible;
}

/* Wizard Steps */
.wizard-step {
    display: none;
    animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.wizard-step.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.step-inner {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow);
}

.step-inner h2 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 24px;
    letter-spacing: -0.3px;
}

.step-description {
    color: var(--text-secondary);
    font-size: 13px;
    margin: -16px 0 24px;
    line-height: 1.5;
}

/* Forms */
.wizard-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
}

.required {
    color: var(--accent);
}

.form-group input,
.form-group select,
.form-group textarea {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 14px;
    color: var(--text-primary);
    transition: var(--transition);
    font-family: inherit;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
    background: var(--bg-elevated);
}

.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239e9e9e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

/* URL Input Group */
.url-input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.url-input-group input {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 14px;
    color: var(--text-primary);
    transition: var(--transition);
}

.url-input-group input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Reference List */
.reference-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.reference-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.reference-item:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

.reference-item .url {
    flex: 1;
    color: var(--cyan);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reference-item .status {
    color: var(--green);
    font-size: 11px;
}

.reference-item button {
    background: #f44336;
    border: none;
    color: white;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

/* Analysis Panel */
.analysis-panel {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    margin-bottom: 16px;
}

.analysis-panel h3 {
    font-size: 14px;
    color: var(--cyan);
    margin-bottom: 12px;
    font-weight: 600;
}

.analysis-content {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.6;
}

/* Tips */
.tip {
    font-size: 12px;
    color: var(--text-muted);
    font-style: normal;
    line-height: 1.5;
}

.hint {
    font-size: 12px;
    color: var(--text-muted);
    font-style: normal;
    margin-top: 6px;
    line-height: 1.4;
}

/* Media Sections */
.media-section {
    margin-bottom: 24px;
}

.section-header {
    margin-bottom: 12px;
}

.section-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.section-title.cyan { color: var(--cyan); }
.section-title.green { color: var(--green); }
.section-title.orange { color: var(--orange); }
.section-title.gold { color: #ffc107; }

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

/* Drop Zone */
.drop-zone {
    background: var(--bg-input);
    border: 2px dashed rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    padding: 28px 20px;
    min-height: 120px;
    text-align: center;
    transition: var(--transition);
}

.drop-zone:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: var(--bg-elevated);
}

.drop-zone.dragover {
    border-color: var(--accent);
    background: rgba(156, 39, 176, 0.08);
    box-shadow: inset 0 0 30px rgba(156, 39, 176, 0.05);
}

.drop-placeholder p {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 12px;
}

.media-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.media-preview-item {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
    transition: var(--transition);
}
.media-preview-item:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

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

.media-preview-item .remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    background: rgba(244, 67, 54, 0.9);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 12px;
    cursor: pointer;
}

.media-preview-item .label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    padding: 2px;
}

.media-preview-item .label input {
    width: 100%;
    background: transparent;
    border: none;
    color: white;
    font-size: 9px;
    text-align: center;
    outline: none;
}

.media-preview-item .label select {
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
    border: none;
    color: white;
    font-size: 10px;
    text-align: center;
    outline: none;
    padding: 4px 2px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.media-preview-item .label select:hover {
    background: rgba(50, 50, 50, 0.9);
}

.media-preview-item .label select option {
    background: #1a1a2e;
    color: white;
    padding: 8px;
}

/* Character cards - override thumbnail constraints */
#character-list > div {
    width: auto;
    height: auto;
    overflow: visible;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 8px;
    background: var(--bg-elevated);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    transition: var(--transition);
}
#character-list > div:hover {
    border-color: rgba(255, 255, 255, 0.12);
}
#character-list > div img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Style Grid */
.style-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.style-card {
    background: var(--bg-input);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.style-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
    transition: var(--transition);
}

.style-card:hover {
    border-color: rgba(156, 39, 176, 0.3);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.style-card.selected {
    border-color: var(--accent);
    background: rgba(156, 39, 176, 0.08);
    box-shadow: 0 0 20px rgba(156, 39, 176, 0.12);
}

.style-card.selected::before {
    background: linear-gradient(90deg, var(--accent), var(--cyan));
}

.style-card input {
    display: none;
}

.style-colors {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.color-dot {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.style-name {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
}

.style-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Color Picker Section */
.color-picker-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.color-picker-section > label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 5px;
}

.color-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.color-preview {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: var(--transition);
}
.color-preview:hover {
    transform: scale(1.05);
}

.color-input-group input[type="text"] {
    width: 100px;
    height: 36px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0 10px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: 'SF Mono', 'Fira Code', monospace;
}

.color-picker-btn {
    height: 36px;
    padding: 0 16px;
    background: linear-gradient(135deg, var(--accent), #7b1fa2);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: var(--transition);
}
.color-picker-btn:hover {
    box-shadow: 0 2px 8px rgba(156, 39, 176, 0.3);
}

.custom-color-picker {
    margin-top: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow);
}

.picker-presets {
    margin-bottom: 12px;
}

.preset-row {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
    justify-content: center;
}

.preset-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s, transform 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.preset-dot:hover, .preset-dot:active {
    border-color: #fff;
    transform: scale(1.15);
}

.picker-canvas-area {
    position: relative;
    width: 260px;
    height: 160px;
    margin: 0 auto 10px;
    border-radius: 6px;
    overflow: hidden;
    cursor: crosshair;
    touch-action: none;
}

.picker-canvas-area canvas {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 6px;
}

.picker-sv-cursor {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 3px rgba(0,0,0,0.6);
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.picker-hue-area {
    position: relative;
    width: 260px;
    height: 24px;
    margin: 0 auto 12px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    touch-action: none;
}

.picker-hue-area canvas {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 12px;
}

.picker-hue-cursor {
    position: absolute;
    top: 0;
    width: 6px;
    height: 100%;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
    pointer-events: none;
    transform: translateX(-50%);
}

.picker-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.picker-result-preview {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid var(--border, #444);
}

.picker-footer input[type="text"] {
    width: 85px;
    height: 36px;
    background: var(--bg-input, #0f0f1a);
    border: 1px solid var(--border, #333);
    border-radius: 6px;
    padding: 0 10px;
    color: var(--text-primary, #fff);
    font-size: 14px;
    font-family: monospace;
    text-align: center;
}

.picker-set-btn {
    height: 36px;
    padding: 0 20px;
    background: var(--accent, #9C27B0);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

/* Feature Sections */
.feature-section {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
}

/* Radio Group */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.radio-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    padding: 6px 0;
    transition: var(--transition);
}

.radio-label:hover .radio-mark {
    border-color: rgba(255, 255, 255, 0.2);
}

.radio-label input {
    display: none;
}

.radio-mark {
    width: 20px;
    height: 20px;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    margin-top: 2px;
    transition: var(--transition);
}

.radio-label input:checked + .radio-mark {
    border-color: var(--accent);
    box-shadow: 0 0 8px rgba(156, 39, 176, 0.3);
}

.radio-label input:checked + .radio-mark::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, var(--accent), #7b1fa2);
    border-radius: 50%;
}

/* Checkbox Grid */
.checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 6px 0;
    font-size: 13px;
    transition: var(--transition);
}

.checkbox-label:hover .checkmark {
    border-color: rgba(255, 255, 255, 0.2);
}

.checkbox-label.disabled {
    opacity: 0.5;
    cursor: default;
}

.checkbox-label input {
    display: none;
}

.checkmark {
    width: 20px;
    height: 20px;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 5px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.checkbox-label input:checked + .checkmark {
    background: linear-gradient(135deg, var(--accent), #7b1fa2);
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(156, 39, 176, 0.3);
}

.checkbox-label input:checked + .checkmark::after {
    content: '\2713';
    color: white;
    font-size: 12px;
    font-weight: 600;
}

/* Custom Item Input */
.custom-item-input {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.custom-item-input input {
    flex: 1;
    max-width: 200px;
    height: 30px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0 10px;
    color: var(--text-primary);
    font-size: 12px;
}

.custom-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.custom-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--accent), #7b1fa2);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(156, 39, 176, 0.25);
}

.custom-item button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    opacity: 0.8;
}

.custom-item button:hover {
    opacity: 1;
}

/* Review Panel */
.review-panel {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.review-section {
    background: var(--bg-panel);
    padding: 18px 20px;
}

.review-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.review-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
}

.review-item .label {
    color: var(--text-muted);
}

.review-item .value {
    color: var(--text-primary);
    text-align: right;
    max-width: 60%;
    font-weight: 500;
}

/* Building State */
.building-container {
    text-align: center;
    padding: 80px 20px;
}

.building-animation {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 32px;
}

.gear {
    position: absolute;
    font-size: 40px;
    color: var(--accent);
    animation: spin 3s linear infinite;
}

.gear-1 { top: 0; left: 0; }
.gear-2 {
    bottom: 0;
    right: 0;
    animation-direction: reverse;
    font-size: 30px;
    color: var(--cyan);
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.building-status {
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.building-progress {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    max-width: 320px;
    margin: 0 auto;
    overflow: hidden;
}

.building-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--cyan));
    width: 0%;
    transition: width 0.5s ease;
    box-shadow: 0 0 12px rgba(156, 39, 176, 0.4);
}

/* Preview */
.preview-header {
    text-align: center;
    margin-bottom: 20px;
}

.preview-header p {
    color: var(--text-secondary);
    font-size: 13px;
}

.mock-preview-banner {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: var(--radius);
    padding: 12px 18px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: #d97706;
}

.mock-preview-banner .btn {
    flex-shrink: 0;
}

.preview-toolbar {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.device-buttons {
    display: flex;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 3px;
}

.device-btn {
    background: transparent;
    border: none;
    padding: 8px 16px;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: var(--transition);
    font-size: 12px;
    font-weight: 500;
}

.device-btn:hover {
    color: var(--text-primary);
}

.device-btn.active {
    background: linear-gradient(135deg, var(--accent), #7b1fa2);
    color: white;
    box-shadow: 0 2px 6px rgba(156, 39, 176, 0.3);
}

/* Page Navigation Tabs */
.preview-page-tabs {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.page-tabs-label {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
}

.page-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.page-tab {
    padding: 6px 14px;
    font-size: 13px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    font-weight: 500;
}

.page-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.15);
}

.page-tab.active {
    background: linear-gradient(135deg, var(--accent), #7b1fa2);
    border-color: transparent;
    color: white;
    box-shadow: 0 2px 8px rgba(156, 39, 176, 0.3);
}

.preview-frame-container {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}

.preview-fullscreen-btn {
    position: absolute;
    bottom: 16px;
    right: 16px;
    padding: 8px 16px;
    font-size: 13px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    z-index: 20;
    transition: var(--transition);
}

.preview-fullscreen-btn:hover {
    background: rgba(0, 0, 0, 0.9);
}

.preview-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    font-size: 24px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.1);
    pointer-events: none;
    z-index: 10;
    white-space: nowrap;
}

.preview-frame {
    width: 100%;
    height: 70vh;
    min-height: 500px;
    max-height: 800px;
    border: none;
    background: white;
    transition: var(--transition);
}

.preview-frame.tablet {
    width: 768px;
    max-width: 100%;
    margin: 0 auto;
    display: block;
}

.preview-frame.mobile {
    width: 375px;
    max-width: 100%;
    margin: 0 auto;
    display: block;
}

/* Image-based preview (protected) */
.preview-image-container {
    position: relative;
    width: 100%;
    height: 450px;
    overflow-y: auto;
    overflow-x: hidden;
    background: white;
    transition: var(--transition);
}

.preview-image-container.tablet {
    width: 768px;
    max-width: 100%;
    margin: 0 auto;
}

.preview-image-container.mobile {
    width: 375px;
    max-width: 100%;
    margin: 0 auto;
}

.preview-image {
    width: 100%;
    height: auto;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.preview-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
}

.preview-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.preview-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
}

/* Pre-purchase Edit Panel */
.pre-purchase-edit-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 20px;
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.edit-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.edit-panel-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.edit-panel-note {
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.7;
}

.edit-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.edit-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.edit-field label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.edit-field input {
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 14px;
    transition: border-color 0.2s;
}

.edit-field input:focus {
    outline: none;
    border-color: var(--primary);
}

.edit-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.edit-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.btn-small {
    padding: 8px 16px;
    font-size: 13px;
}

.preview-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 8px;
}
.preview-toolbar .btn { white-space: nowrap; }

/* Section Editor (pre-purchase variant swapping) */
.section-editor-tabs {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}
.section-editor-tabs::-webkit-scrollbar { display: none; }
.section-tab {
    padding: 8px 14px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}
.section-tab:hover {
    color: var(--text);
}
.section-tab.active {
    color: var(--accent, #9c27b0);
    border-bottom-color: var(--accent, #9c27b0);
}
.section-editor-variants {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 60px;
}
.section-editor-variants .variant-thumb {
    width: 80px;
    height: 56px;
}
.section-editor-variants .variant-thumb.swapping {
    opacity: 0.5;
    pointer-events: none;
}

/* Purchase */
.purchase-container {
    max-width: 420px;
    margin: 0 auto;
    text-align: center;
}

.purchase-summary {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}

.purchase-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    color: var(--text-secondary);
}

.purchase-total {
    display: flex;
    justify-content: space-between;
    padding: 16px 0 0;
    margin-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 20px;
    font-weight: 700;
}

.purchase-includes {
    text-align: left;
    margin-bottom: 24px;
}

.purchase-includes h3 {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.purchase-includes ul {
    list-style: none;
}

.purchase-includes li {
    padding: 6px 0;
    font-size: 13px;
}

.purchase-includes li::before {
    content: '\2713';
    color: var(--green);
    margin-right: 8px;
}

.payment-methods {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.payment-btn {
    background: linear-gradient(135deg, var(--accent), #7b1fa2);
    border: none;
    border-radius: var(--radius-sm);
    padding: 14px;
    font-size: 15px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: var(--transition);
}

.payment-btn:hover {
    box-shadow: 0 4px 16px rgba(156, 39, 176, 0.4);
    transform: translateY(-1px);
}

.payment-btn.paypal {
    background: #0070ba;
}

.payment-btn.payfast {
    background: #00457c;
}

/* Buttons */
.btn {
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    font-family: inherit;
    letter-spacing: 0.01em;
}

.btn-small {
    padding: 8px 14px;
    font-size: 12px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent), #7b1fa2);
    color: white;
    box-shadow: 0 2px 8px rgba(156, 39, 176, 0.3);
}

.btn-primary:hover {
    box-shadow: 0 4px 16px rgba(156, 39, 176, 0.4);
    transform: translateY(-1px);
}

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

.btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Footer nav buttons -- larger and more prominent */
.footer-nav .btn {
    padding: 12px 28px;
    font-size: 15px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 700;
}
.footer-nav #btn-cancel {
    position: relative;
    background: transparent;
    border: none;
    color: transparent;
    overflow: visible;
    padding: 0;
    min-width: 120px;
    min-height: 50px;
}
.footer-nav #btn-cancel:hover {
    background: transparent;
    border: none;
}
#cancel-fire-canvas {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.footer-nav #btn-back {
    border-color: rgba(255, 255, 255, 0.18);
}
.footer-nav #btn-next {
    padding: 12px 36px;
    font-size: 16px;
    position: relative;
    overflow: hidden;
}
/* Ghost state -- floating text before form is filled */
.footer-nav #btn-next.ghost {
    background: transparent;
    border: none;
    box-shadow: none;
    color: rgba(255, 255, 255, 0.25);
    cursor: default;
    text-shadow: none;
}

/* Tesla bolt Next button when ready */
.footer-nav #btn-next.dust-btn {
    position: relative;
    z-index: 501;
    background: transparent;
    background-image: none;
    animation: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.footer-nav #btn-next.dust-btn:hover {
    transform: none;
    box-shadow: none;
}
.tesla-ch {
    position: relative;
    z-index: 1;
    display: inline-block;
    color: #fff;
    text-shadow: 0 0 8px rgba(0,0,0,0.9);
}
.footer-nav #btn-next.dust-btn::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: var(--accent);
    opacity: 0.25;
    z-index: 0;
    pointer-events: none;
    border-radius: 1px;
    box-shadow: 0 0 12px 4px var(--accent);
    animation: wirePulse 3s ease-in-out infinite;
}
@keyframes wirePulse {
    0%, 100% { opacity: 0.18; }
    50% { opacity: 0.32; }
}

/* FX canvas for bolt rendering */
#fx-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 500;
}

.btn-accent {
    background: linear-gradient(135deg, var(--accent), #7b1fa2);
    color: white;
}

.btn-text {
    background: transparent;
    color: var(--text-secondary);
}

.btn-text:hover {
    color: var(--text-primary);
}

.btn-large {
    padding: 14px 28px;
    font-size: 15px;
    border-radius: var(--radius);
}

.btn-large .price {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: 15px;
    margin-left: 10px;
    font-size: 13px;
}

/* Footer Navigation */
.footer-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 28px;
    background: rgba(14, 14, 28, 0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid rgba(156, 39, 176, 0.2);
    max-width: 840px;
    margin: 0 auto;
    width: 100%;
    position: sticky;
    bottom: 0;
    z-index: 50;
}

.nav-right {
    display: flex;
    gap: 10px;
}

/* Layout Blueprint Grid */
.layout-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.layout-card {
    background: var(--bg-input);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}

.layout-card:hover {
    border-color: rgba(156, 39, 176, 0.3);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.layout-card.selected {
    border-color: var(--accent);
    background: rgba(156, 39, 176, 0.08);
    box-shadow: 0 0 24px rgba(156, 39, 176, 0.12);
}

.layout-card input {
    display: none;
}

.layout-card .wireframe {
    height: 110px;
    background: var(--bg-primary);
    border-radius: 4px;
    margin-bottom: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 6px;
    gap: 4px;
}

.layout-card .wf-nav {
    height: 6px;
    background: rgba(156, 39, 176, 0.4);
    border-radius: 2px;
    flex-shrink: 0;
}

.layout-card .wf-hero {
    flex: 2;
    background: rgba(156, 39, 176, 0.25);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.layout-card .wf-hero-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 3px;
}

.layout-card .wf-hero-text .wf-line {
    height: 3px;
    background: rgba(255,255,255,0.25);
    border-radius: 1px;
}

.layout-card .wf-hero-text .wf-line.short {
    width: 60%;
}

.layout-card .wf-hero-img {
    flex: 1;
    background: rgba(79, 195, 247, 0.2);
    border-radius: 2px;
    min-height: 100%;
}

.layout-card .wf-about {
    flex: 1.5;
    display: flex;
    gap: 3px;
    border-radius: 2px;
}

.layout-card .wf-about-text {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 3px;
    justify-content: center;
}

.layout-card .wf-about-text .wf-line {
    height: 2px;
    background: rgba(255,255,255,0.15);
    border-radius: 1px;
}

.layout-card .wf-about-img {
    flex: 1;
    background: rgba(79, 195, 247, 0.15);
    border-radius: 2px;
}

.layout-card .wf-about-card {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.08);
    margin: 0 auto;
    width: 80%;
}

.layout-card .wf-about-stats {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.layout-card .wf-about-stats .wf-stat-bar {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    display: flex;
    gap: 4px;
    padding: 2px;
    align-items: center;
    justify-content: center;
}

.layout-card .wf-about-stats .wf-stat-num {
    width: 12px;
    height: 8px;
    background: rgba(156, 39, 176, 0.3);
    border-radius: 2px;
}

.layout-card .wf-services {
    flex: 1.5;
    display: flex;
    gap: 3px;
    border-radius: 2px;
}

.layout-card .wf-svc-card {
    flex: 1;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
}

.layout-card .wf-svc-icon-card {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.layout-card .wf-svc-icon-card .wf-icon {
    width: 8px;
    height: 8px;
    background: rgba(156, 39, 176, 0.4);
    border-radius: 50%;
}

.layout-card .wf-svc-alt {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.layout-card .wf-svc-row {
    flex: 1;
    display: flex;
    gap: 3px;
}

.layout-card .wf-svc-row-text {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
}

.layout-card .wf-svc-row-img {
    flex: 1;
    background: rgba(79, 195, 247, 0.12);
    border-radius: 2px;
}

.layout-card .wf-svc-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 2px 0;
}

.layout-card .wf-svc-list-item {
    flex: 1;
    display: flex;
    gap: 4px;
    align-items: center;
}

.layout-card .wf-svc-list-item .wf-num {
    width: 10px;
    font-size: 6px;
    color: rgba(156, 39, 176, 0.6);
    font-weight: 700;
    text-align: center;
}

.layout-card .wf-svc-list-item .wf-bar {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,0.1);
    border-radius: 1px;
}

.layout-card .wf-footer {
    height: 6px;
    background: rgba(255,255,255,0.04);
    border-radius: 2px;
    flex-shrink: 0;
}

.layout-name {
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 2px;
    color: var(--text-primary);
}

.layout-desc {
    font-size: 10px;
    color: var(--text-secondary);
}

/* Dynamic / Surprise Me card */
.layout-card.dynamic .wireframe {
    position: relative;
    overflow: hidden;
}

.layout-card.dynamic .wf-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 30%,
        rgba(156, 39, 176, 0.15) 50%,
        transparent 70%
    );
    animation: layoutShimmer 2.5s ease-in-out infinite;
}

@keyframes layoutShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.layout-card.dynamic .wf-dice {
    font-size: 20px;
    color: rgba(156, 39, 176, 0.6);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: dicePulse 2s ease-in-out infinite;
}

@keyframes dicePulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

/* Section Customizer Accordion */
.section-customizer {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-top: 16px;
    overflow: hidden;
}

.section-customizer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    cursor: pointer;
    transition: var(--transition);
}

.section-customizer-header:hover {
    background: rgba(255, 255, 255, 0.02);
}

.section-customizer-header .sc-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.section-customizer-header .sc-arrow {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.3s ease;
}

.section-customizer.open .sc-arrow {
    transform: rotate(180deg);
}

.section-customizer-body {
    display: none;
    padding: 0 15px 15px;
}

.section-customizer.open .section-customizer-body {
    display: block;
    animation: fadeIn 0.2s ease;
}

/* Variant Picker Row */
.variant-row {
    margin-bottom: 14px;
}

.variant-row-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.variant-preview-link {
    margin-left: 6px;
    font-size: 0.7rem;
    color: var(--cyan, #4fc3f7);
    opacity: 0.5;
    text-decoration: none;
    transition: opacity 0.2s;
}
.variant-preview-link:hover {
    opacity: 1;
}

.variant-picker {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.variant-thumb {
    width: 72px;
    height: 48px;
    background: var(--bg-input);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    padding: 4px;
    gap: 2px;
    overflow: hidden;
    position: relative;
}

.variant-thumb:hover {
    border-color: rgba(156, 39, 176, 0.3);
    transform: translateY(-1px);
}

.variant-thumb.selected {
    border-color: var(--accent);
    background: rgba(156, 39, 176, 0.08);
    box-shadow: 0 0 8px rgba(156, 39, 176, 0.15);
}

.variant-thumb .vt-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 6px;
    text-align: center;
    color: var(--text-muted);
    background: rgba(0,0,0,0.5);
    padding: 1px 0;
}

/* Variant thumb wireframe elements */
.variant-thumb .vt-hero-centered {
    flex: 1;
    background: rgba(156, 39, 176, 0.2);
    border-radius: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.variant-thumb .vt-hero-centered .vt-line {
    width: 60%;
    height: 2px;
    background: rgba(255,255,255,0.2);
    border-radius: 1px;
}

.variant-thumb .vt-hero-split {
    flex: 1;
    display: flex;
    gap: 2px;
}

.variant-thumb .vt-hero-split .vt-text {
    flex: 1;
    background: rgba(255,255,255,0.05);
    border-radius: 1px;
}

.variant-thumb .vt-hero-split .vt-img {
    flex: 1;
    background: rgba(79, 195, 247, 0.15);
    border-radius: 1px;
}

.variant-thumb .vt-full-bg {
    flex: 1;
    background: linear-gradient(to bottom, rgba(156,39,176,0.15), rgba(156,39,176,0.3));
    border-radius: 1px;
}

.variant-thumb .vt-minimal {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.variant-thumb .vt-minimal .vt-dot {
    width: 10px;
    height: 1px;
    background: rgba(156, 39, 176, 0.4);
}

.variant-thumb .vt-two-col {
    flex: 1;
    display: flex;
    gap: 2px;
}

.variant-thumb .vt-two-col > div {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border-radius: 1px;
}

.variant-thumb .vt-two-col > div:last-child {
    background: rgba(79, 195, 247, 0.12);
}

.variant-thumb .vt-card-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.variant-thumb .vt-card-center .vt-card-box {
    width: 70%;
    height: 70%;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 2px;
    background: rgba(255,255,255,0.04);
}

.variant-thumb .vt-stats {
    flex: 1;
    display: flex;
    gap: 1px;
    align-items: flex-end;
    padding: 2px;
}

.variant-thumb .vt-stats div {
    flex: 1;
    background: rgba(156, 39, 176, 0.25);
    border-radius: 1px;
}

.variant-thumb .vt-three-cards {
    flex: 1;
    display: flex;
    gap: 2px;
}

.variant-thumb .vt-three-cards div {
    flex: 1;
    background: rgba(255,255,255,0.08);
    border-radius: 1px;
}

.variant-thumb .vt-four-icons {
    flex: 1;
    display: flex;
    gap: 2px;
}

.variant-thumb .vt-four-icons div {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    justify-content: center;
}

.variant-thumb .vt-four-icons div .vt-dot {
    width: 4px;
    height: 4px;
    background: rgba(156, 39, 176, 0.35);
    border-radius: 50%;
}

.variant-thumb .vt-alt-rows {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.variant-thumb .vt-alt-rows .vt-alt-row {
    flex: 1;
    display: flex;
    gap: 2px;
}

.variant-thumb .vt-alt-rows .vt-alt-row > div {
    flex: 1;
    border-radius: 1px;
}

.variant-thumb .vt-list-items {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
}

.variant-thumb .vt-list-items .vt-list-item {
    height: 3px;
    background: rgba(255,255,255,0.08);
    border-radius: 1px;
}

.variant-thumb .vt-cta-centered {
    flex: 1;
    background: rgba(156, 39, 176, 0.2);
    border-radius: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.variant-thumb .vt-cta-centered .vt-btn {
    width: 16px;
    height: 4px;
    background: rgba(255,255,255,0.25);
    border-radius: 2px;
}

.variant-thumb .vt-cta-split {
    flex: 1;
    display: flex;
    gap: 2px;
    align-items: center;
    background: rgba(156, 39, 176, 0.15);
    border-radius: 1px;
    padding: 2px;
}

.variant-thumb .vt-cta-split .vt-cta-text {
    flex: 1;
}

.variant-thumb .vt-cta-split .vt-cta-btn {
    width: 12px;
    height: 6px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
}

.variant-thumb .vt-cta-card {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.variant-thumb .vt-cta-card .vt-card-inner {
    width: 70%;
    height: 70%;
    background: rgba(156, 39, 176, 0.25);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.variant-thumb .vt-cta-gradient {
    flex: 1;
    background: linear-gradient(135deg, rgba(26,26,46,0.3), rgba(156,39,176,0.3));
    border-radius: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.variant-thumb .vt-cta-gradient .vt-btn {
    width: 16px;
    height: 4px;
    background: rgba(255,255,255,0.25);
    border-radius: 2px;
}

.variant-thumb .vt-cta-editorial {
    flex: 1;
    background: rgba(156, 39, 176, 0.18);
    border-radius: 1px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 5px 6px;
    gap: 3px;
}
.variant-thumb .vt-cta-editorial .vt-rule {
    width: 10px;
    height: 1px;
    background: rgba(255,255,255,0.35);
}
.variant-thumb .vt-cta-editorial .vt-lines {
    width: 18px;
    height: 5px;
    border-top: 1px solid rgba(255,255,255,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.variant-thumb .vt-cta-editorial .vt-btn {
    width: 14px;
    height: 4px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
}

.variant-thumb .vt-cta-brutalist {
    flex: 1;
    background: rgba(220, 218, 210, 0.5);
    border-radius: 1px;
    display: flex;
}
.variant-thumb .vt-cta-brutalist .vt-brut-left {
    flex: 1;
    border-right: 1px solid rgba(0,0,0,0.25);
    background: repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0px, rgba(0,0,0,0.12) 2px, transparent 2px, transparent 5px);
}
.variant-thumb .vt-cta-brutalist .vt-brut-right {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 4px;
}
.variant-thumb .vt-cta-brutalist .vt-btn {
    width: 14px;
    height: 4px;
    background: rgba(0,0,0,0.3);
}

/* Bento hero thumbnail */
.variant-thumb .vt-bento {
    width: 100%; height: 100%;
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px;
}
.variant-thumb .vt-bento .vt-bento-lg {
    background: rgba(79,195,247,0.15); border-radius: 2px; grid-row: 1/3;
}
.variant-thumb .vt-bento .vt-bento-sm {
    display: flex; flex-direction: column; gap: 2px;
}
.variant-thumb .vt-bento .vt-bento-sm div {
    flex: 1; background: rgba(255,255,255,0.06); border-radius: 2px;
}

/* Editorial hero thumbnail */
.variant-thumb .vt-editorial {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 3px;
}
.variant-thumb .vt-ed-big-text {
    width: 70%; height: 5px; background: rgba(156,39,176,0.4); border-radius: 1px; margin-bottom: 3px;
}
.variant-thumb .vt-ed-cols {
    display: flex; gap: 2px; width: 100%;
}
.variant-thumb .vt-ed-cols div {
    flex: 1; height: 8px; background: rgba(255,255,255,0.06); border-radius: 1px;
}

/* Noir hero thumbnail */
.variant-thumb .vt-noir {
    width: 100%; height: 100%;
    position: relative; background: rgba(0,0,0,0.3); border-radius: 3px;
}
.variant-thumb .vt-noir-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.6));
    border-radius: inherit;
}
.variant-thumb .vt-noir-text {
    position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
    width: 50%; height: 3px; background: rgba(255,255,255,0.25); border-radius: 1px;
}

/* Masonry gallery thumbnail */
.variant-thumb .vt-masonry {
    width: 100%; height: 100%;
    display: flex; gap: 2px; padding: 2px; align-items: flex-end;
}
.variant-thumb .vt-masonry div {
    flex: 1; background: rgba(255,255,255,0.08); border-radius: 1px;
}

/* Carousel gallery thumbnail */
.variant-thumb .vt-carousel {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center; gap: 2px; padding: 2px;
}
.variant-thumb .vt-car-arrow {
    font-size: 8px; color: rgba(255,255,255,0.3);
}
.variant-thumb .vt-car-slide {
    flex: 1; height: 80%; background: rgba(79,195,247,0.12); border-radius: 2px;
}

/* Card grid gallery thumbnail */
.variant-thumb .vt-card-grid {
    width: 100%; height: 100%;
    display: flex; gap: 3px; padding: 3px; align-items: stretch;
}
.variant-thumb .vt-cg-card {
    flex: 1; background: rgba(255,255,255,0.06); border-radius: 2px;
    border: 1px solid rgba(255,255,255,0.08);
}

/* Quote cards testimonials thumbnail */
.variant-thumb .vt-quote-cards {
    width: 100%; height: 100%;
    display: flex; gap: 3px; padding: 3px; align-items: stretch;
}
.variant-thumb .vt-qc {
    flex: 1; background: rgba(255,255,255,0.06); border-radius: 2px;
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 2px; font-size: 10px; color: rgba(156,39,176,0.5); line-height: 1;
}

/* Footer simple thumbnail */
.variant-thumb .vt-footer-simple {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}
.variant-thumb .vt-footer-simple .vt-line {
    height: 3px; background: rgba(255,255,255,0.1); border-radius: 1px;
}

/* Social footer thumbnail */
.variant-thumb .vt-social-footer {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center; gap: 4px;
}
.variant-thumb .vt-social-footer .vt-dot {
    width: 6px; height: 6px; border-radius: 50%; background: rgba(79,195,247,0.2);
}

/* Gallery: Spotlight strip */
.variant-thumb .vt-spotlight-strip {
    width: 100%; height: 100%;
    display: flex; gap: 2px; padding: 3px; align-items: stretch;
}
.variant-thumb .vt-spot-big {
    flex: 2; background: rgba(255,255,255,0.1); border-radius: 2px;
}
.variant-thumb .vt-spot-sm {
    flex: 1; background: rgba(255,255,255,0.06); border-radius: 2px;
}

/* Gallery: Card stack */
.variant-thumb .vt-card-stack {
    width: 100%; height: 100%;
    position: relative; display: flex; align-items: center; justify-content: center;
}
.variant-thumb .vt-card-stack div {
    position: absolute; width: 24px; height: 30px; border-radius: 2px;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1);
}
.variant-thumb .vt-cs1 { transform: rotate(-10deg) translate(-4px, 2px); }
.variant-thumb .vt-cs2 { transform: rotate(0deg); background: rgba(255,255,255,0.1); }
.variant-thumb .vt-cs3 { transform: rotate(8deg) translate(4px, 2px); }

/* Gallery: Split showcase */
.variant-thumb .vt-split-showcase {
    width: 100%; height: 100%;
    display: flex; gap: 2px; padding: 3px; align-items: stretch;
}
.variant-thumb .vt-ss-big {
    flex: 2; background: rgba(255,255,255,0.1); border-radius: 2px;
}
.variant-thumb .vt-ss-col {
    flex: 1; display: flex; flex-direction: column; gap: 2px;
}
.variant-thumb .vt-ss-col div {
    flex: 1; background: rgba(255,255,255,0.06); border-radius: 2px;
}

/* Gallery: Polaroid scatter */
.variant-thumb .vt-polaroid {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center; gap: 2px;
}
.variant-thumb .vt-pol {
    width: 16px; height: 20px; background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 1px;
    border-bottom-width: 4px;
}

/* Nav bar base */
.variant-thumb .vt-nav-bar {
    width: 100%; height: 100%;
    display: flex; align-items: center; padding: 0 4px; gap: 4px;
    background: rgba(255,255,255,0.04); border-radius: 2px;
}
.variant-thumb .vt-nav-logo {
    width: 12px; height: 8px; background: rgba(255,255,255,0.15); border-radius: 1px;
}
.variant-thumb .vt-nav-links {
    display: flex; gap: 3px; margin-left: 4px;
}
.variant-thumb .vt-nav-links div {
    width: 10px; height: 3px; background: rgba(255,255,255,0.12); border-radius: 1px;
}
.variant-thumb .vt-nav-links.vt-pills div {
    border-radius: 4px; background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12); padding: 0 1px;
}
.variant-thumb .vt-nav-links.vt-underlined div {
    border-bottom: 1px solid rgba(156,39,176,0.4);
}
.variant-thumb .vt-nav-floating {
    margin: 4px; border-radius: 6px; background: rgba(255,255,255,0.06);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* Shop grid */
.variant-thumb .vt-shop-grid {
    width: 100%; height: 100%;
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px;
}
.variant-thumb .vt-shop-grid div {
    background: rgba(255,255,255,0.08); border-radius: 2px;
}
.variant-thumb .vt-shop-grid.vt-shop-clean {
    gap: 4px; padding: 4px;
}
.variant-thumb .vt-shop-grid.vt-shop-overlay div {
    position: relative; background: rgba(255,255,255,0.1);
}
.variant-thumb .vt-shop-grid.vt-shop-overlay div span {
    position: absolute; bottom: 1px; left: 1px; right: 1px; height: 4px;
    background: rgba(0,0,0,0.3); border-radius: 1px;
}

/* Shop list */
.variant-thumb .vt-shop-list {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; gap: 2px; padding: 3px;
}
.variant-thumb .vt-shop-list div {
    height: 10px; background: rgba(255,255,255,0.06); border-radius: 2px;
}

/* Shop magazine */
.variant-thumb .vt-shop-mag {
    width: 100%; height: 100%;
    display: flex; gap: 2px; padding: 3px;
}
.variant-thumb .vt-mag-big {
    flex: 2; background: rgba(255,255,255,0.1); border-radius: 2px;
}
.variant-thumb .vt-mag-col {
    flex: 1; display: flex; flex-direction: column; gap: 2px;
}
.variant-thumb .vt-mag-col div {
    flex: 1; background: rgba(255,255,255,0.06); border-radius: 2px;
}

/* Shop compact */
.variant-thumb .vt-shop-compact {
    width: 100%; height: 100%;
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; padding: 2px;
}
.variant-thumb .vt-shop-compact div {
    background: rgba(255,255,255,0.08); border-radius: 1px;
}

/* Shop landscape */
.variant-thumb .vt-shop-landscape {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; gap: 2px; padding: 3px;
}
.variant-thumb .vt-shop-landscape div {
    flex: 1; background: rgba(255,255,255,0.08); border-radius: 2px;
}
.variant-thumb .vt-shop-landscape.vt-shop-lookbook div {
    background: rgba(255,255,255,0.12);
}

/* Shop tall portrait */
.variant-thumb .vt-shop-tall {
    width: 100%; height: 100%;
    display: flex; gap: 2px; padding: 3px; align-items: stretch;
}
.variant-thumb .vt-shop-tall div {
    flex: 1; background: rgba(255,255,255,0.08); border-radius: 2px;
}

/* Promo bar base */
.variant-thumb .vt-promo-bar {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(156,39,176,0.15); border-radius: 2px;
}
.variant-thumb .vt-promo-inner {
    width: 50%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 2px;
}
.variant-thumb .vt-promo-gradient {
    background: linear-gradient(90deg, rgba(156,39,176,0.2), rgba(79,195,247,0.2));
}
.variant-thumb .vt-promo-minimal {
    background: transparent; border: 1px solid rgba(255,255,255,0.1);
}
.variant-thumb .vt-promo-split {
    background: transparent; padding: 0;
}
.variant-thumb .vt-promo-half {
    flex: 1; height: 100%;
}
.variant-thumb .vt-promo-half:first-child {
    background: rgba(156,39,176,0.15); border-radius: 2px 0 0 2px;
}
.variant-thumb .vt-promo-half:last-child {
    background: rgba(79,195,247,0.15); border-radius: 0 2px 2px 0;
}
.variant-thumb .vt-promo-none {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.2); font-size: 18px;
}

/* Responsive */
@media (max-width: 600px) {
    .style-grid {
        grid-template-columns: 1fr;
    }

    .layout-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .checkbox-grid {
        flex-direction: column;
    }

    .preview-actions {
        flex-direction: column;
    }

    .url-input-group {
        flex-wrap: wrap;
    }

    .url-input-group input {
        width: 100%;
    }

    .variant-thumb {
        width: 60px;
        height: 40px;
    }
}

/* Option Cards (Background Style, Hero Image) */
.option-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 15px;
}

.option-card {
    background: var(--bg-input);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 10px;
    cursor: pointer;
    text-align: center;
    transition: var(--transition);
}

.option-card:hover {
    border-color: rgba(156, 39, 176, 0.3);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.option-card.selected {
    border-color: var(--accent);
    background: rgba(156, 39, 176, 0.08);
    box-shadow: 0 0 20px rgba(156, 39, 176, 0.12);
}

.option-card input[type="radio"] {
    display: none;
}

.option-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.option-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.option-desc {
    font-size: 10px;
    color: var(--text-secondary);
}

/* Sub-options panel */
.sub-options {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-top: 12px;
}

.sub-options label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    display: block;
}

.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-card);
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
    font-size: 12px;
}

.radio-option:hover {
    background: rgba(156, 39, 176, 0.15);
}

.radio-option input[type="radio"]:checked + span {
    color: var(--accent);
}

/* Upload area */
.upload-area {
    border: 2px dashed var(--border);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    background: var(--bg-card);
}

.upload-area p {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

#hero-preview {
    margin-top: 10px;
}

#hero-preview img {
    max-width: 200px;
    max-height: 120px;
    border-radius: 8px;
    object-fit: cover;
}

/* Animated gradient keyframes for AI Animated preview */
@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Purple section title */
.section-title.purple {
    color: #bb86fc;
}

/* Logo & Brand Identity Step */
.logo-choice-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.logo-choice-card {
    background: var(--bg-input);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 15px;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.logo-choice-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
    transition: var(--transition);
}

.logo-choice-card:hover {
    border-color: rgba(156, 39, 176, 0.3);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.logo-choice-card.selected {
    border-color: var(--accent);
    background: rgba(156, 39, 176, 0.06);
    box-shadow: 0 0 20px rgba(156, 39, 176, 0.12);
}

.logo-choice-card.selected::before {
    background: linear-gradient(90deg, var(--accent), var(--cyan));
}

.logo-choice-icon {
    margin-bottom: 12px;
    color: var(--cyan);
}

.logo-choice-title {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
}

.logo-choice-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

.logo-panel {
    margin-top: 16px;
}

.logo-preview-img {
    max-width: 200px;
    max-height: 200px;
    border-radius: var(--radius);
    object-fit: contain;
    background: var(--bg-elevated);
    padding: 12px;
    display: block;
    margin: 0 auto 12px;
    border: 1px solid var(--border);
}

.logo-preview-area {
    text-align: center;
    padding: 15px;
}

.logo-analysis-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    margin-top: 10px;
    background: var(--bg-panel);
    border-radius: 6px;
    font-size: 12px;
    color: var(--cyan);
}

.brand-profile-summary {
    margin-top: 16px;
    background: var(--bg-panel);
    border-radius: var(--radius);
    padding: 20px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--cyan);
    box-shadow: var(--shadow-sm);
}

.brand-colors {
    display: flex;
    gap: 12px;
    margin: 20px 0 28px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.brand-color-swatch {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    border: 2px solid var(--border);
    position: relative;
    transition: transform 0.2s;
}

.brand-color-swatch:hover {
    transform: scale(1.1);
}

.brand-color-swatch.primary {
    width: 56px;
    height: 56px;
    border-color: var(--cyan);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.3);
}

.brand-color-swatch .color-hex {
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    color: var(--text-muted);
    white-space: nowrap;
}

.brand-color-swatch .color-label {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    color: var(--cyan);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.brand-style {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.brand-review-section-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.brand-review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 4px;
}

.brand-review-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
}

.brand-review-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--cyan);
    margin-bottom: 4px;
}

.brand-review-value {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.brand-review-archetype {
    text-transform: capitalize;
    font-weight: 600;
    color: var(--text);
}

.brand-review-notes {
    margin-top: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px 14px;
}

.brand-review-notes .brand-review-value {
    font-style: italic;
}

.generate-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.logo-generating {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background: var(--bg-panel);
    border-radius: 6px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--cyan);
}

.generated-logo-result {
    text-align: center;
    margin-top: 15px;
}

.generated-logo-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 10px;
}

.skip-message {
    padding: 20px;
    text-align: center;
}

.spinner-small {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    flex-shrink: 0;
}

.btn-danger {
    background: #f44336;
    color: white;
    border: none;
}

@media (max-width: 600px) {
    .logo-choice-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Logo Pipeline - Progress Dots */
.logo-pipeline-progress {
    margin-bottom: 18px;
    padding: 0 4px;
}
.pipeline-steps {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}
.pipeline-steps::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 20px;
    right: 20px;
    height: 2px;
    background: var(--border);
    z-index: 0;
}
.pipeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 1;
    min-width: 48px;
}
.pipeline-step .ps-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    transition: all 0.3s ease;
}
.pipeline-step span {
    font-size: 10px;
    color: var(--text-muted);
    transition: color 0.3s ease;
}
.pipeline-step.active .ps-dot {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 12px rgba(156, 39, 176, 0.4);
}
.pipeline-step.active span {
    color: var(--accent-light);
}
.pipeline-step.completed .ps-dot {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}
.pipeline-step.completed span {
    color: var(--green);
}

/* Logo Pipeline - Phases */
/* Color Builder */
.color-builder {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.color-slot {
    width: 48px;
    height: 48px;
    border: 2px dashed var(--border);
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 18px;
}
.color-slot:hover {
    border-color: rgba(79, 195, 247, 0.5);
}
.color-slot.filled {
    border-style: solid;
    border-color: rgba(255,255,255,0.15);
}
.color-slot .remove-color {
    display: none;
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    z-index: 2;
}
.color-slot.filled .remove-color {
    display: block;
}
.color-slot .remove-color:hover {
    background: #dc2626;
}
.color-slot .slot-name {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.color-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(5, 36px);
    gap: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    margin-top: 4px;
}
.color-dropdown-item {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}
.color-dropdown-item:hover {
    border-color: #fff;
    transform: scale(1.12);
    z-index: 1;
}
.color-dropdown-item[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: var(--text-primary);
    background: var(--bg-darker);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 10;
}
.color-picker-item {
    grid-column: 1 / -1;
    background: var(--bg-darker);
    border: 1px dashed var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 11px;
    padding: 6px;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease;
}
.color-picker-item:hover {
    border-color: var(--cyan);
    color: var(--text-primary);
}
.btn-add-color {
    background: none;
    border: 1px dashed var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    padding: 6px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-add-color:hover {
    border-color: var(--cyan);
    color: var(--cyan);
}

.logo-phase {
    display: none;
}
.logo-phase.active {
    display: block;
    animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.phase-title {
    font-size: 15px;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.phase-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

/* Logo Pipeline - Loading States */
.logo-pipeline-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 15px;
    background: var(--bg-panel);
    border-radius: 8px;
    font-size: 13px;
    color: var(--cyan);
}
.seed-progress-bar {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin-top: 12px;
    overflow: hidden;
}
.seed-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--cyan));
    border-radius: 2px;
    transition: width 0.8s ease;
}

/* Logo Pipeline - Seed Gallery */
.seed-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 4px;
}
.seed-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.seed-card:hover {
    border-color: rgba(255,255,255,0.15);
    box-shadow: var(--shadow-sm);
}
.seed-card:active {
    transform: scale(0.97);
}
.seed-card.selected {
    border-color: var(--green);
}
.seed-card.selected .seed-check {
    opacity: 1;
}
.seed-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}
.seed-placeholder {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 12px;
    background: var(--bg-panel);
}
.seed-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 6px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
}
.seed-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--green);
    opacity: 0;
    transition: opacity 0.2s ease;
    position: relative;
}
.seed-check::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 4px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.seed-index {
    font-size: 10px;
    color: rgba(255,255,255,0.7);
    background: rgba(0,0,0,0.5);
    padding: 2px 6px;
    border-radius: 10px;
}
.seed-rating-bar {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 8px 6px;
    background: var(--bg-panel);
}
.seed-slider-row {
    display: flex;
    align-items: center;
    gap: 4px;
}
.seed-slider-label {
    font-size: 9px;
    color: var(--text-secondary);
    width: 32px;
    text-align: right;
    flex-shrink: 0;
}
.seed-slider {
    flex: 1;
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border);
    border-radius: 2px;
    outline: none;
}
.seed-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--cyan);
    cursor: pointer;
}
.seed-rating-val {
    font-size: 10px;
    color: var(--cyan);
    font-weight: 600;
    min-width: 14px;
    text-align: center;
}

/* Seed selection count */
.seed-selection-count {
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    margin: 10px 0 8px;
}

/* Logo Pipeline - Refined Options */
.refined-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.refined-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.refined-card:hover {
    border-color: rgba(255,255,255,0.15);
    box-shadow: var(--shadow-sm);
}
.refined-card:active {
    transform: scale(0.98);
}
.refined-card.selected {
    border-color: var(--accent);
    box-shadow: 0 0 20px rgba(156, 39, 176, 0.25);
}
.refined-img {
    width: 100%;
    max-height: 240px;
    object-fit: contain;
    display: block;
    background: var(--bg-panel);
    padding: 8px;
}
.refined-label {
    padding: 10px 12px;
    font-size: 13px;
    color: var(--text-primary);
    border-top: 1px solid var(--border);
}

/* Logo Pipeline - Final Result */
.final-logo-result {
    text-align: center;
    padding: 16px 0;
}
.final-logo-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 14px;
}

/* Responsive option grid */
@media (max-width: 600px) {
    .option-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Logo Animation Preview Cards */
.logo-anim-grid { grid-template-columns: repeat(4, 1fr); }
.anim-preview-box {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
}
.anim-demo-pulse { animation: wiz-pulse 2s ease-in-out infinite; }
.anim-demo-glow { animation: wiz-glow 3s ease-in-out infinite; }
.anim-demo-bounce { animation: wiz-bounce 2s ease infinite; }
.anim-demo-fade-in { animation: wiz-fade-in 2.5s ease infinite; }
.anim-demo-float { animation: wiz-float 4s ease-in-out infinite; }
.anim-demo-breathe { animation: wiz-breathe 4s ease-in-out infinite; }
.anim-shimmer-wrap { position: relative; overflow: hidden; }
.anim-shimmer-wrap::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: wiz-shimmer 3s ease-in-out infinite;
}
@keyframes wiz-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
@keyframes wiz-glow {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(255,193,7,0.2)); }
    50% { filter: drop-shadow(0 0 10px rgba(255,193,7,0.6)); }
}
@keyframes wiz-bounce {
    0%, 100% { transform: translateY(0); }
    20% { transform: translateY(-6px); }
    40% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
    60% { transform: translateY(0); }
}
@keyframes wiz-fade-in {
    0%, 40% { opacity: 0.3; transform: translateY(4px); }
    60%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes wiz-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
@keyframes wiz-breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
@keyframes wiz-shimmer {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .anim-demo, .anim-shimmer-wrap::after { animation: none !important; }
}
@media (max-width: 600px) {
    .logo-anim-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Heading Effect Preview Cards */
.heading-style-grid, .heading-hover-grid, .heading-entrance-grid, .heading-font-grid {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 700px) {
    .heading-style-grid, .heading-hover-grid, .heading-entrance-grid, .heading-font-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.heading-preview-box {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 700; color: #e0e0e0;
    position: relative; overflow: hidden;
}
/* Text Style previews */
.hp-none { color: #c0c0c0; }
.hp-gradient {
    background: linear-gradient(135deg, #9C27B0, #E91E63);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hp-outline {
    -webkit-text-stroke: 2px #9C27B0; -webkit-text-fill-color: transparent; font-size: 24px;
}
.hp-neon {
    color: #00e5ff;
    text-shadow: 0 0 7px #00e5ff, 0 0 20px rgba(0,229,255,0.5), 0 0 40px rgba(0,229,255,0.25);
}
.hp-emboss {
    color: #888;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.3);
}
.hp-retro {
    color: #E91E63;
    text-shadow: 1px 1px 0 rgba(233,30,99,0.7), 2px 2px 0 rgba(233,30,99,0.5),
                 3px 3px 0 rgba(233,30,99,0.3), 4px 4px 0 rgba(233,30,99,0.15);
}
.hp-split {
    background: linear-gradient(to bottom, #9C27B0 50%, #E91E63 50%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
/* Sticker & canvas hero text effect previews */
.option-grid-divider {
    grid-column: 1 / -1; text-align: center; padding: 6px 0 2px;
    font-size: 8px; letter-spacing: .3em; text-transform: uppercase;
    color: rgba(255,255,255,.18); border-top: 1px solid rgba(255,255,255,.06);
    margin-top: 4px;
}
.hp-canvas-bg { border-radius: 6px; }
/* Sticker previews */
.hp-stk-vinyl {
    color: #ff4466; font-weight: 900; font-family: 'Bangers', cursive;
    -webkit-text-stroke: 2px #fff; paint-order: stroke fill;
    text-shadow: 2px 3px 3px rgba(0,0,0,.2);
}
.hp-stk-chromebadge {
    background: linear-gradient(to bottom, #f0f0f6, #606070, #e0e0ea, #808090);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    font-weight: 900; -webkit-text-stroke: 1px #333;
}
.hp-stk-holo {
    background: linear-gradient(135deg, #ff80c0, #4080ff, #60ff60, #ffdd00, #ff4040, #c060ff);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    font-weight: 700; -webkit-text-stroke: 2px #fff; paint-order: stroke fill;
}
.hp-stk-goldseal {
    background: linear-gradient(to bottom, #fff8c0, #c89010, #ffe040, #a06800);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    font-weight: 700; font-family: 'Cinzel', serif;
}
.hp-stk-neonsign {
    color: #ffffff; font-weight: 400; font-family: 'Pacifico', cursive; font-size: 18px;
    text-shadow: 0 0 6px #ff2868, 0 0 16px rgba(255,40,104,.5);
}
.hp-stk-graffiti {
    color: #ff2020; font-weight: 400; font-family: 'Permanent Marker', cursive;
    -webkit-text-stroke: 1.5px #1a1a1a; paint-order: stroke fill;
    text-shadow: 2px 3px 3px rgba(0,0,0,.2);
}
.hp-stk-retrobadge {
    color: #fff8e8; font-weight: 400; font-family: 'Bungee', sans-serif; font-size: 16px;
    text-shadow: 0 0 0 transparent; background: #e04810; padding: 2px 6px; border-radius: 4px;
}
.hp-stk-pixel {
    color: #00cc44; font-weight: 400; font-family: 'Press Start 2P', monospace; font-size: 12px;
    -webkit-text-stroke: 1.5px #1a1a2e; paint-order: stroke fill;
    text-shadow: 2px 3px 2px rgba(0,0,0,.2);
}
.hp-stk-bubble {
    color: #44bbff; font-weight: 400; font-family: 'Luckiest Guy', cursive;
    -webkit-text-stroke: 2px #2060c0; paint-order: stroke fill;
    text-shadow: 2px 3px 3px rgba(0,0,0,.2);
}
.hp-stk-watercolor {
    background: linear-gradient(135deg, rgba(200,60,100,.7), rgba(100,80,180,.6), rgba(60,120,180,.55));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    font-weight: 400; font-family: 'Sacramento', cursive; font-size: 24px;
}
.hp-canvas-yellowretro {
    color: #ffe040; font-weight: 900;
    text-shadow: 2px 2px 0 #903010;
}
.hp-canvas-elegantchrome {
    background: linear-gradient(to bottom, #e8e8f0, #707088, #d0d0e0, #808090);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    font-weight: 700; font-family: Georgia, serif;
}
.hp-canvas-smoke {
    color: rgba(180,180,200,.6); font-weight: 900;
    text-shadow: 0 0 8px rgba(150,150,170,.3);
}
.hp-canvas-y2kchrome {
    background: linear-gradient(to bottom, #ff70d0, #40c0ff, #80ff60, #ff4080);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    font-weight: 900;
}
.hp-canvas-cyberglitch {
    color: #e0e0f0; font-weight: 900;
    text-shadow: 3px 0 0 rgba(0,255,255,.4), -3px 0 0 rgba(255,0,100,.4);
}
.hp-canvas-rushinglight {
    color: #ffe040; font-weight: 900;
    text-shadow: 0 0 8px rgba(255,100,0,.6);
}
.hp-canvas-strangerthings {
    color: #cc0000; font-weight: 900;
    text-shadow: 0 0 8px #ff1020, 0 0 20px rgba(255,16,32,.4);
}
.hp-canvas-vhs {
    color: rgba(220,210,230,.7); font-weight: 900;
    text-shadow: -3px 0 rgba(255,0,0,.5), 3px 0 rgba(0,80,255,.5);
}
.hp-canvas-alienglow {
    color: #00d0e8; font-weight: 900;
    text-shadow: 0 0 8px #00e8ff, 0 0 20px rgba(0,232,255,.4);
}
.hp-canvas-frozenneon {
    color: #d8c8ff; font-weight: 900;
    text-shadow: 0 0 8px #a040ff, 0 0 18px rgba(64,128,255,.4);
}
.hp-canvas-liquidgold {
    background: linear-gradient(to bottom, #fff8a0, #d4a010, #ffe850, #b08000, #d0a010);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    font-weight: 400; font-family: 'Great Vibes', cursive; font-size: 24px;
    text-shadow: none; filter: drop-shadow(1px 2px 1px rgba(0,0,0,.3));
}
.hp-canvas-layered3d {
    color: #fff; font-weight: 400; font-family: 'Bungee Shade', sans-serif; font-size: 16px;
    text-shadow: 3px 3px 0 #ec4899, 6px 6px 0 #3b82f6, 9px 9px 0 #10b981;
}
.hp-canvas-contentcreator {
    background: linear-gradient(90deg, #ff6b35, #9333ea, #3b82f6);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    font-weight: 900; font-family: 'Archivo Black', sans-serif;
}
.hp-canvas-staypositive {
    color: #fff; font-weight: 700; font-family: 'Fredoka', sans-serif;
    text-shadow: 1px 2px 3px rgba(0,0,0,.1);
}
.hp-canvas-retrovibes {
    color: #ff6830; font-weight: 400; font-family: 'Righteous', sans-serif;
    text-shadow: 2px 2px 0 #d4802a, 4px 4px 0 #a85820, 6px 6px 0 #5c3310;
}
.hp-canvas-pastelcloud {
    background: linear-gradient(90deg, #ff9ec4, #c49cff, #9cc4ff, #8ce8c8);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    font-weight: 400; font-family: 'Lilita One', sans-serif;
}
/* Hover effect previews */
.hp-hover-sheen { position: relative; overflow: hidden; }
.hp-hover-sheen::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    animation: wiz-heading-sheen 3s ease-in-out infinite;
}
@keyframes wiz-heading-sheen {
    0%, 70% { left: -100%; }
    100% { left: 100%; }
}
.hp-glow-demo { animation: wiz-heading-glow 3s ease-in-out infinite; }
@keyframes wiz-heading-glow {
    0%, 100% { text-shadow: none; }
    50% { text-shadow: 0 0 10px rgba(156,39,176,0.6), 0 0 30px rgba(156,39,176,0.3); }
}
.hp-hover-underline { position: relative; }
.hp-hover-underline::after {
    content: ''; position: absolute; bottom: 4px; left: 50%; width: 70%;
    transform: translateX(-50%); height: 2px; background: #9C27B0;
    animation: wiz-heading-underline 3s ease-in-out infinite;
}
@keyframes wiz-heading-underline {
    0%, 40% { transform: translateX(-50%) scaleX(0); }
    60%, 80% { transform: translateX(-50%) scaleX(1); }
    100% { transform: translateX(-50%) scaleX(0); }
}
.hp-spread-demo { animation: wiz-heading-spread 3s ease-in-out infinite; }
@keyframes wiz-heading-spread {
    0%, 100% { letter-spacing: 0; }
    50% { letter-spacing: 0.15em; }
}
.hp-colorshift-demo { animation: wiz-heading-colorshift 3s ease-in-out infinite; }
@keyframes wiz-heading-colorshift {
    0%, 100% { color: #c0c0c0; }
    50% { color: #9C27B0; }
}
.hp-blur-demo { animation: wiz-heading-blur 3s ease-in-out infinite; }
@keyframes wiz-heading-blur {
    0%, 100% { filter: blur(0); }
    30%, 50% { filter: blur(2px); }
}
/* Entrance animation previews */
.hp-fadeup-demo { animation: wiz-heading-fadeup 3s ease-in-out infinite; }
@keyframes wiz-heading-fadeup {
    0%, 40% { opacity: 0; transform: translateY(8px); }
    60%, 90% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(8px); }
}
.hp-slideleft-demo { animation: wiz-heading-slideleft 3s ease-in-out infinite; }
@keyframes wiz-heading-slideleft {
    0%, 40% { opacity: 0; transform: translateX(-12px); }
    60%, 90% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(-12px); }
}
.hp-blurin-demo { animation: wiz-heading-blurin 3s ease-in-out infinite; }
@keyframes wiz-heading-blurin {
    0%, 40% { opacity: 0; filter: blur(6px); }
    60%, 90% { opacity: 1; filter: blur(0); }
    100% { opacity: 0; filter: blur(6px); }
}
.hp-scaleup-demo { animation: wiz-heading-scaleup 3s ease-in-out infinite; }
@keyframes wiz-heading-scaleup {
    0%, 40% { opacity: 0; transform: scale(0.7); }
    60%, 90% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.7); }
}
.hp-typewriter-demo {
    overflow: hidden; white-space: nowrap; display: inline-block;
    animation: wiz-heading-typewriter 3s steps(2, end) infinite;
}
@keyframes wiz-heading-typewriter {
    0%, 30% { width: 0; }
    50%, 90% { width: 1.2em; }
    100% { width: 0; }
}
/* Section title color: pink */
.section-title.pink { color: #E91E63; }
@media (prefers-reduced-motion: reduce) {
    .hp-glow-demo, .hp-spread-demo, .hp-colorshift-demo, .hp-blur-demo,
    .hp-fadeup-demo, .hp-slideleft-demo, .hp-blurin-demo, .hp-scaleup-demo,
    .hp-typewriter-demo, .hp-hover-sheen::after, .hp-hover-underline::after { animation: none !important; }
}

/* ============================================
   INDUSTRY SHAPE GRID
   ============================================ */
.industry-shape-grid {
    grid-template-columns: repeat(4, 1fr) !important;
}
.industry-shape-grid .option-card svg {
    display: block;
    margin: 0 auto;
}
.industry-shape-grid .option-card.auto-highlight {
    border-color: rgba(156, 39, 176, 0.35);
    background: rgba(156, 39, 176, 0.04);
    box-shadow: 0 0 12px rgba(156, 39, 176, 0.08);
}
@media (max-width: 768px) {
    .industry-shape-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ============================================
   VARIANT HOVER PREVIEW PANEL
   ============================================ */
.vhp-panel {
    position: fixed;
    z-index: 9999;
    right: 24px;
    top: 50%;
    transform: translateY(-50%) scale(0.96);
    width: 440px;
    background: #0d0d14;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06), 0 0 80px rgba(156,39,176,0.08);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    display: none;
}
.vhp-panel.visible {
    display: block;
    opacity: 1;
    transform: translateY(-50%) scale(1);
    pointer-events: auto;
}
.vhp-frame-wrap {
    width: 440px;
    height: 260px;
    overflow: hidden;
    position: relative;
    border-radius: 14px 14px 0 0;
    background: #0a0a0f;
}

/* Mobile: stack vhp-panel at bottom instead of fixed right */
@media (max-width: 600px) {
    .vhp-panel {
        right: 8px;
        left: 8px;
        width: auto;
        top: auto;
        bottom: 16px;
        transform: none;
        max-height: 50vh;
        overflow-y: auto;
    }
    .vhp-panel.visible {
        transform: none;
    }
    .vhp-frame-wrap {
        width: 100%;
        height: 180px;
    }
}
.vhp-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 1260px;
    height: 743px;
    transform: scale(0.349);
    transform-origin: top left;
    overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text);
    line-height: 1.6;
    --primary: #1a1a2e;
    --secondary: #16213e;
    --accent: #9c27b0;
    --accent-rgb: 156,39,176;
    --text: #e0e0e0;
    --text-muted: rgba(255,255,255,0.55);
    --card-heading: #fff;
    --card-text: rgba(255,255,255,0.85);
    --card-text-muted: rgba(255,255,255,0.5);
}
/* Base styles for variant preview (mirrors showcase.html .preview-frame) */
.vhp-frame *{box-sizing:border-box;}
.vhp-frame img{max-width:100%;height:auto;display:block;}
.vhp-frame a{color:var(--accent);text-decoration:none;}
.vhp-frame section{overflow:hidden;}
.vhp-frame .nav{
    display:flex;align-items:center;justify-content:space-between;
    padding:1rem 2rem;
    background:rgba(10,10,15,0.85);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(255,255,255,0.06);
    position:relative;z-index:10;
}
.vhp-frame .nav__brand{font-size:1.2rem;font-weight:700;color:#fff;}
.vhp-frame .nav__links{display:flex;gap:1.5rem;list-style:none;margin:0;padding:0;}
.vhp-frame .nav__links a{color:rgba(255,255,255,0.7);text-decoration:none;font-size:0.9rem;transition:color 0.2s;}
.vhp-frame .nav__links a:hover{color:#fff;}
.vhp-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 5%, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0.08) 70%, transparent 95%);
}
.vhp-info {
    padding: 14px 18px 16px;
    background: #0d0d14;
    border-radius: 0 0 14px 14px;
}
.vhp-name {
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}
.vhp-desc {
    color: rgba(255,255,255,0.5);
    font-size: 0.82rem;
    line-height: 1.5;
    min-height: 1.5em;
}
.vhp-cursor {
    display: inline;
    color: #9c27b0;
    animation: vhp-blink 0.6s step-end infinite;
    font-weight: 300;
    margin-left: 1px;
}
.vhp-cursor.done {
    animation: vhp-blink 0.6s step-end 2;
    animation-fill-mode: forwards;
    opacity: 0;
}
@keyframes vhp-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ============================================
   LIVE PREVIEW PANEL (floating, draggable, resizable)
   ============================================ */
.lpp {
    position: fixed;
    z-index: 9998;
    right: 32px;
    top: 80px;
    width: 420px;
    height: 560px;
    min-width: 280px;
    min-height: 300px;
    background: #0d0d14;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 80px rgba(156,39,176,0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.lpp-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
}
.lpp-titlebar:active { cursor: grabbing; }
.lpp-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.03em;
}
.lpp-controls { display: flex; gap: 4px; align-items: center; }
.lpp-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.5);
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.15s;
}
.lpp-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }
.lpp-btn.lpp-close { font-size: 18px; border: none; padding: 2px 6px; }
.lpp-btn.lpp-close:hover { color: #f44336; }
.lpp-body {
    flex: 1;
    overflow: hidden;
    position: relative;
    background: #0a0a0f;
}
.lpp-frame {
    width: 100%;
    height: 100%;
    border: none;
    background: #0a0a0f;
}
.lpp-resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
    z-index: 1;
}
.lpp-resize-handle::after {
    content: '';
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(255,255,255,0.15);
    border-bottom: 2px solid rgba(255,255,255,0.15);
}

/* Toggle button */
.lpp-toggle {
    position: fixed;
    z-index: 9997;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(156,39,176,0.9);
    color: #fff;
    border: none;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(156,39,176,0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}
.lpp-toggle:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(156,39,176,0.4); }

/* Mobile: full-width bottom sheet */
@media (max-width: 600px) {
    .lpp {
        right: 0;
        left: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        height: 50vh;
        border-radius: 16px 16px 0 0;
    }
    .lpp-toggle { bottom: 16px; right: 16px; padding: 8px 16px; }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* Selection highlight */
::selection {
    background: rgba(156, 39, 176, 0.3);
    color: white;
}

/* =========================
   STEP INFO CARDS
========================= */
/* Info cards - positioned to the side */
.wizard-step {
    position: relative;
}
.step-info-card {
    position: absolute;
    right: -300px;
    top: 0;
    width: 260px;
    padding: 16px 18px;
    border-radius: var(--radius);
    background: rgba(156, 39, 176, 0.06);
    border: 1px solid rgba(156, 39, 176, 0.15);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.step-info-card .info-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(156, 39, 176, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.step-info-card .info-content {
    min-width: 0;
}
.step-info-card .info-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-light);
    margin-bottom: 4px;
}
.step-info-card .info-text {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.55;
}
.step-info-card .info-text strong {
    color: var(--text-primary);
}
.step-info-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
}
.step-info-pills span {
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 20px;
    background: rgba(79, 195, 247, 0.08);
    border: 1px solid rgba(79, 195, 247, 0.15);
    color: var(--accent-light);
    letter-spacing: 0.04em;
    font-weight: 500;
}
/* Hide side card on narrow screens, show below content instead */
@media (max-width: 1300px) {
    .step-info-card {
        position: static;
        width: auto;
        margin-top: 16px;
        flex-direction: row;
        align-items: flex-start;
    }
}

/* =========================
   ANIMATED BACKGROUND
========================= */
#bg-wrap {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 18%, rgba(156,39,176,.08), transparent 24%),
        radial-gradient(circle at 82% 26%, rgba(79,195,247,.06), transparent 20%),
        radial-gradient(circle at 50% 82%, rgba(30,20,80,.06), transparent 24%),
        linear-gradient(180deg, #0f0f1a 0%, #141425 42%, #0f0f1a 100%);
}
#bg-wrap canvas {
    position: absolute;
    inset: -6%;
    width: 112%;
    height: 112%;
    display: block;
}
#vignette {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 75% 55% at 50% 40%, transparent 30%, rgba(15,15,26,.5) 100%),
        linear-gradient(to bottom, rgba(15,15,26,.4), transparent 18%, transparent 78%, rgba(15,15,26,.7) 100%);
}
#grain {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: .03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 180px;
}

/* ── Star Nav ── */
#sn-legend {
    position: fixed;
    left: 36px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 20px;
    pointer-events: auto;
}
.sn-legend-item {
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0.5;
    transition: opacity 0.3s;
    cursor: pointer;
}
.sn-legend-item:hover { opacity: 1; }
.sn-legend-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 10px currentColor;
}
.sn-legend-label {
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
}

/* Card (draggable, non-blocking) */
.sn-card {
    position: fixed;
    bottom: 80px;
    right: 24px;
    z-index: 15;
    max-width: 340px;
    width: 90vw;
    background: rgba(8,8,16,0.92);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 28px 32px;
    transform: scale(0.85);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;
}
.sn-card.visible {
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
}
.sn-drag-bar {
    width: 40px;
    height: 4px;
    background: rgba(255,255,255,0.12);
    border-radius: 2px;
    margin: 0 auto 14px;
    cursor: grab;
}
.sn-drag-bar:active { cursor: grabbing; }
.sn-card-close {
    position: absolute;
    top: 12px; right: 16px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.25);
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}
.sn-card-close:hover { color: white; }
.sn-card-category {
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sn-card-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px currentColor;
}
.sn-card h3 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: white;
    margin-bottom: 10px;
    line-height: 1.15;
}
.sn-card p {
    font-size: 11px;
    line-height: 1.8;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.03em;
}
#sn-card-media video {
    max-width: 100%;
    border-radius: 6px;
    margin-bottom: 10px;
}
.sn-card-accent {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
}
.sn-card-tag {
    display: inline-block;
    margin-top: 16px;
    font-size: 9px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 6px 14px;
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    transition: all 0.2s;
}
.sn-card-tag:hover {
    border-color: rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.7);
}

/* Hint */
#sn-hint {
    position: fixed;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.1);
    z-index: 5;
    pointer-events: none;
    animation: sn-hint-pulse 4s ease-in-out infinite;
    font-family: 'Inter', sans-serif;
}
@keyframes sn-hint-pulse {
    0%,100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Cursor (only on bg hover) */
#sn-cursor {
    position: fixed;
    width: 6px; height: 6px;
    background: white;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000;
    transform: translate(-50%,-50%);
    transition: width 0.2s, height 0.2s, opacity 0.2s;
    mix-blend-mode: screen;
    opacity: 0;
}
#sn-cursor.active { width: 12px; height: 12px; opacity: 1; }

@media (max-width: 768px) {
    #sn-legend { left: 16px; gap: 14px; }
    .sn-card { right: 12px; bottom: 60px; max-width: 280px; padding: 20px 22px; }
    #sn-hint { bottom: 20px; }
}

/* Push all content above the background */
.header,
.progress-container,
.main-content,
.wizard-footer,
.build-overlay {
    position: relative;
    z-index: 10;
}