/**
 * ============================================================================
 * GENZO PLAYLAB — PUBLIC CSS REBUILD
 * File: /public_html/wp-content/plugins/genzo-playlab/assets/public/css/gzpl-public.css
 * Version: 4.0.0
 * Scope: PlayLab public pages, create page, upload UI, builder cards
 * ============================================================================
 */

/* ============================================================================
   01. TOKENS
============================================================================ */
:root {
    --gzpl-bg: #050507;
    --gzpl-bg-2: #080a10;
    --gzpl-bg-3: #0d111a;
    --gzpl-bg-4: #121722;

    --gzpl-surface: rgba(14, 17, 26, .92);
    --gzpl-surface-2: rgba(18, 22, 33, .92);
    --gzpl-surface-3: rgba(24, 29, 42, .92);

    --gzpl-panel: rgba(12, 15, 24, .86);
    --gzpl-panel-2: rgba(18, 22, 33, .82);
    --gzpl-panel-3: rgba(255, 255, 255, .045);

    --gzpl-line: rgba(255, 255, 255, .095);
    --gzpl-line-2: rgba(255, 255, 255, .14);
    --gzpl-line-soft: rgba(255, 255, 255, .06);

    --gzpl-title: #ffffff;
    --gzpl-text: #e9eef8;
    --gzpl-text-soft: #b9c3d7;
    --gzpl-text-muted: #798398;
    --gzpl-text-faint: #5f687a;

    --gzpl-accent: #ff7a26;
    --gzpl-accent-2: #ff9c52;
    --gzpl-accent-3: #ffc49d;
    --gzpl-accent-soft: rgba(255, 122, 38, .12);
    --gzpl-accent-line: rgba(255, 122, 38, .26);

    --gzpl-blue: #6ea8ff;
    --gzpl-purple: #b77cff;
    --gzpl-violet: #c58bff;
    --gzpl-red: #ff5b6e;
    --gzpl-green: #61d394;
    --gzpl-gold: #ffd166;
    --gzpl-cyan: #63d6ff;

    --gzpl-danger: #ef4444;
    --gzpl-warning: #f59e0b;
    --gzpl-success: #22c55e;

    --gzpl-radius-xs: 10px;
    --gzpl-radius-sm: 14px;
    --gzpl-radius-md: 18px;
    --gzpl-radius-lg: 24px;
    --gzpl-radius-xl: 32px;
    --gzpl-radius-2xl: 42px;

    --gzpl-shadow-sm: 0 12px 30px rgba(0, 0, 0, .25);
    --gzpl-shadow: 0 24px 70px rgba(0, 0, 0, .36);
    --gzpl-shadow-lg: 0 38px 120px rgba(0, 0, 0, .52);

    --gzpl-max: 1500px;
    --gzpl-side: clamp(14px, 4vw, 76px);
    --gzpl-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --gzpl-ease: cubic-bezier(.2, .8, .2, 1);
    color-scheme: dark;
}

/* ============================================================================
   02. SCOPE / RESET
============================================================================ */
.gzpl-page,
.gzpl-shell,
.gzpl-app,
.gzpl-archive,
.gzpl-single,
.gzpl-shortcode,
.gzpl-standalone,
.gzpl-create-page {
    color: var(--gzpl-text);
    font-family: var(--gzpl-font);
}

.gzpl-page *,
.gzpl-shell *,
.gzpl-app *,
.gzpl-archive *,
.gzpl-single *,
.gzpl-shortcode *,
.gzpl-standalone *,
.gzpl-create-page *,
.gzpl-page *::before,
.gzpl-shell *::before,
.gzpl-app *::before,
.gzpl-archive *::before,
.gzpl-single *::before,
.gzpl-shortcode *::before,
.gzpl-standalone *::before,
.gzpl-create-page *::before,
.gzpl-page *::after,
.gzpl-shell *::after,
.gzpl-app *::after,
.gzpl-archive *::after,
.gzpl-single *::after,
.gzpl-shortcode *::after,
.gzpl-standalone *::after,
.gzpl-create-page *::after {
    box-sizing: border-box;
}

.gzpl-page a,
.gzpl-shell a,
.gzpl-app a,
.gzpl-archive a,
.gzpl-single a,
.gzpl-shortcode a,
.gzpl-standalone a,
.gzpl-create-page a {
    color: inherit;
    text-decoration: none;
    transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.gzpl-page img,
.gzpl-shell img,
.gzpl-app img,
.gzpl-archive img,
.gzpl-single img,
.gzpl-shortcode img,
.gzpl-standalone img,
.gzpl-create-page img {
    display: block;
    max-width: 100%;
    height: auto;
}

.gzpl-page button,
.gzpl-shell button,
.gzpl-app button,
.gzpl-create-page button,
.gzpl-page input,
.gzpl-shell input,
.gzpl-app input,
.gzpl-create-page input,
.gzpl-page select,
.gzpl-shell select,
.gzpl-app select,
.gzpl-create-page select,
.gzpl-page textarea,
.gzpl-shell textarea,
.gzpl-app textarea,
.gzpl-create-page textarea {
    font-family: inherit;
}

.gzpl-page h1,
.gzpl-page h2,
.gzpl-page h3,
.gzpl-page h4,
.gzpl-shell h1,
.gzpl-shell h2,
.gzpl-shell h3,
.gzpl-shell h4,
.gzpl-create-page h1,
.gzpl-create-page h2,
.gzpl-create-page h3,
.gzpl-create-page h4 {
    margin: 0;
    color: var(--gzpl-title);
    line-height: 1.05;
    letter-spacing: -.035em;
}

.gzpl-page p,
.gzpl-shell p,
.gzpl-create-page p {
    margin: 0 0 14px;
    color: var(--gzpl-text-soft);
    line-height: 1.68;
}

.gzpl-hidden { display: none !important; }
.gzpl-text-center { text-align: center !important; }
.gzpl-text-left { text-align: left !important; }
.gzpl-white { color: #fff !important; }
.gzpl-soft { color: var(--gzpl-text-soft) !important; }
.gzpl-muted { color: var(--gzpl-text-muted) !important; }
.gzpl-mb-0 { margin-bottom: 0 !important; }
.gzpl-mb-12 { margin-bottom: 12px !important; }
.gzpl-mb-16 { margin-bottom: 16px !important; }
.gzpl-mt-12 { margin-top: 12px !important; }
.gzpl-mt-16 { margin-top: 16px !important; }
.gzpl-mt-24 { margin-top: 24px !important; }

/* ============================================================================
   03. SHELL / LAYOUT
============================================================================ */
.gzpl-shell,
.gzpl-standalone {
    position: relative;
    width: min(var(--gzpl-max), calc(100% - (var(--gzpl-side) * 2)));
    margin: clamp(18px, 3vw, 38px) auto clamp(36px, 5vw, 72px);
    padding: clamp(14px, 2vw, 24px);
    border-radius: var(--gzpl-radius-xl);
    border: 1px solid var(--gzpl-line);
    background:
        radial-gradient(circle at 8% 0%, rgba(255, 122, 38, .15), transparent 30%),
        radial-gradient(circle at 92% 2%, rgba(110, 168, 255, .11), transparent 30%),
        linear-gradient(180deg, rgba(8, 10, 16, .98), rgba(5, 5, 7, .99));
    box-shadow: var(--gzpl-shadow-lg);
    overflow: hidden;
}

.gzpl-shell::before,
.gzpl-standalone::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
    background-size: 44px 44px;
    opacity: .42;
    mask-image: radial-gradient(circle at 50% 10%, black 0%, transparent 72%);
}

.gzpl-shell > *,
.gzpl-standalone > * {
    position: relative;
    z-index: 1;
}

.gzpl-grid,
.gzpl-builder-card-grid,
.gzpl-stack,
.gzpl-create-page,
.gzpl-builder-shell,
.gzpl-builder-group,
.gzpl-builder-section,
.gzpl-create-sidebar,
.gzpl-create-form,
.gzpl-mode-cluster,
.gzpl-mode-grid,
.gzpl-create-hero__inner,
.gzpl-create-hero__content,
.gzpl-create-hero__side,
.gzpl-create-hero__meta-row,
.gzpl-create-workspace {
    min-width: 0;
}

.gzpl-grid,
.gzpl-builder-card-grid {
    display: grid;
    gap: 18px;
    align-items: start;
}

.gzpl-grid--2,
.gzpl-builder-card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gzpl-grid--3,
.gzpl-builder-card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gzpl-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.gzpl-stack {
    display: grid;
    gap: 18px;
}

/* ============================================================================
   04. PANELS / CARDS
============================================================================ */
.gzpl-card,
.gzpl-panel,
.gzpl-builder-card,
.gzpl-builder-group,
.gzpl-builder-section,
.gzpl-note,
.gzpl-create-meta-card,
.gzpl-create-rail__item {
    position: relative;
    min-width: 0;
    border: 1px solid var(--gzpl-line);
    background:
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022)),
        var(--gzpl-panel);
    box-shadow: var(--gzpl-shadow-sm);
    overflow: hidden;
}

.gzpl-card,
.gzpl-panel {
    border-radius: var(--gzpl-radius-lg);
}

.gzpl-card {
    padding: 20px;
}

.gzpl-card::before,
.gzpl-panel::before,
.gzpl-builder-card::before,
.gzpl-builder-group::before,
.gzpl-builder-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255,255,255,.045), transparent 38%),
        radial-gradient(circle at top left, rgba(255,122,38,.06), transparent 36%);
}

.gzpl-card > *,
.gzpl-panel > *,
.gzpl-builder-card > *,
.gzpl-builder-group > *,
.gzpl-builder-section > * {
    position: relative;
    z-index: 1;
}

.gzpl-panel__head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--gzpl-line-soft);
    background: rgba(255,255,255,.025);
}

.gzpl-panel__body {
    padding: 20px;
    min-width: 0;
}

.gzpl-panel__foot {
    padding: 18px 20px;
    border-top: 1px solid var(--gzpl-line-soft);
    background: rgba(255,255,255,.018);
}

.gzpl-panel__title {
    margin: 0 0 5px;
    color: #fff;
    font-size: 19px;
    font-weight: 950;
    letter-spacing: -.025em;
}

.gzpl-panel__desc {
    margin: 0;
    color: var(--gzpl-text-soft);
    font-size: 13px;
    line-height: 1.55;
}

/* ============================================================================
   05. BUTTONS / BADGES
============================================================================ */
.gzpl-btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 11px 18px;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.055);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(0,0,0,.22);
    transition:
        transform .18s var(--gzpl-ease),
        box-shadow .18s var(--gzpl-ease),
        background .18s var(--gzpl-ease),
        border-color .18s var(--gzpl-ease),
        opacity .18s ease;
}

.gzpl-btn:hover {
    transform: translateY(-1px);
    color: #fff;
    border-color: rgba(255,122,38,.30);
    box-shadow: 0 16px 38px rgba(0,0,0,.30), 0 0 28px rgba(255,122,38,.08);
}

.gzpl-btn:focus {
    outline: none;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.06),
        0 0 0 4px rgba(255,122,38,.16);
}

.gzpl-btn--primary,
.gzpl-submit,
button.gzpl-submit {
    color: #1a0902;
    border-color: rgba(255,157,95,.40);
    background: linear-gradient(135deg, var(--gzpl-accent), var(--gzpl-accent-2));
    box-shadow: 0 18px 46px rgba(255,122,38,.22);
}

.gzpl-btn--secondary {
    color: #e5e9ff;
    border-color: rgba(110,168,255,.24);
    background: linear-gradient(135deg, rgba(110,168,255,.18), rgba(110,168,255,.06));
}

.gzpl-btn--ghost {
    color: var(--gzpl-text);
    background: rgba(255,255,255,.035);
    border-color: rgba(255,255,255,.105);
}

.gzpl-btn--danger {
    color: #fecaca;
    background: rgba(239,68,68,.10);
    border-color: rgba(239,68,68,.24);
}

.gzpl-btn--small {
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 12px;
    font-size: 12px;
}

.gzpl-btn[disabled],
.gzpl-btn.is-disabled {
    opacity: .52;
    cursor: not-allowed;
    transform: none !important;
}

.gzpl-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: fit-content;
    max-width: 100%;
    min-height: 29px;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.055);
    color: var(--gzpl-text);
    font-size: 12px;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}

.gzpl-badge--mode {
    color: #ffd3b6;
    background: rgba(255,122,38,.11);
    border-color: rgba(255,122,38,.24);
}

.gzpl-badge--approved {
    color: #c7f9d8;
    background: rgba(34,197,94,.12);
    border-color: rgba(34,197,94,.24);
}

.gzpl-badge--draft {
    color: #fde68a;
    background: rgba(245,158,11,.12);
    border-color: rgba(245,158,11,.24);
}

.gzpl-badge--featured {
    color: #fbcfe8;
    background: rgba(236,72,153,.12);
    border-color: rgba(236,72,153,.24);
}

/* ============================================================================
   06. FORMS
============================================================================ */
.gzpl-field {
    display: grid;
    gap: 8px;
    align-content: start;
    min-width: 0;
}

.gzpl-field > label,
.gzpl-field label,
.gzpl-field__label {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    color: rgba(245,248,255,.94);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.35;
}

.gzpl-field__hint,
.gzpl-field small,
.gzpl-help-text,
.gzpl-helper-text {
    display: block;
    margin-top: 2px;
    color: rgba(185,195,215,.70);
    font-size: 12px;
    line-height: 1.52;
}

.gzpl-required,
.gzpl-required-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    color: #fecaca;
    background: rgba(239,68,68,.14);
    border: 1px solid rgba(239,68,68,.22);
    font-size: 10px;
    font-weight: 950;
}

input.gzpl-input,
textarea.gzpl-input,
select.gzpl-input,
.gzpl-input,
.gzpl-select,
.gzpl-textarea {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.105);
    background: rgba(255,255,255,.045);
    color: #fff;
    font: inherit;
    line-height: 1.45;
    outline: none;
    box-shadow: none;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

textarea.gzpl-input,
.gzpl-textarea {
    min-height: 118px;
    resize: vertical;
}

input.gzpl-input::placeholder,
textarea.gzpl-input::placeholder,
.gzpl-input::placeholder,
.gzpl-textarea::placeholder {
    color: rgba(185,195,215,.45);
    opacity: 1;
}

input.gzpl-input:focus,
textarea.gzpl-input:focus,
select.gzpl-input:focus,
.gzpl-input:focus,
.gzpl-select:focus,
.gzpl-textarea:focus {
    border-color: rgba(255,122,38,.36);
    background: rgba(255,255,255,.065);
    box-shadow: 0 0 0 4px rgba(255,122,38,.12);
}

select.gzpl-input option,
.gzpl-select option {
    color: #111827;
}

.gzpl-input.is-invalid,
input.gzpl-input.is-invalid,
textarea.gzpl-input.is-invalid,
select.gzpl-input.is-invalid,
.gzpl-field.is-invalid .gzpl-input,
.gzpl-upload-field.is-invalid .gzpl-upload,
.gzpl-mini-card.is-invalid,
.gzpl-builder-card.is-invalid {
    border-color: rgba(239,68,68,.42) !important;
    background: rgba(239,68,68,.07) !important;
    box-shadow: 0 0 0 4px rgba(239,68,68,.10) !important;
}

.gzpl-readonly-preview,
.gzpl-preview-input,
[data-gzpl-slug-preview],
.gzpl-slug-preview {
    display: inline-flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 15px;
    border: 1px dashed rgba(255,255,255,.12);
    background: rgba(255,255,255,.025);
    color: var(--gzpl-text-soft);
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
}

.gzpl-radio-set,
.gzpl-checkbox-set {
    display: grid;
    gap: 10px;
}

.gzpl-radio-row,
.gzpl-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 10px 13px;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
}

.gzpl-radio-row input,
.gzpl-checkbox-row input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--gzpl-accent);
}

/* ============================================================================
   07. UPLOADS
============================================================================ */
.gzpl-upload-field {
    gap: 10px;
}

.gzpl-upload {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.085);
    background:
        radial-gradient(circle at top left, rgba(255,122,38,.08), transparent 38%),
        rgba(255,255,255,.030);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.gzpl-upload:hover,
.gzpl-upload.is-dragover {
    border-color: rgba(255,122,38,.28);
    box-shadow: 0 0 0 4px rgba(255,122,38,.09);
}

.gzpl-upload.has-file {
    border-color: rgba(255,122,38,.22);
}

.gzpl-upload.is-uploading {
    border-color: rgba(99,214,255,.32);
    box-shadow: 0 0 0 4px rgba(99,214,255,.10);
}

.gzpl-upload.is-success {
    border-color: rgba(34,197,94,.28);
}

.gzpl-upload.is-error {
    border-color: rgba(239,68,68,.30);
}

.gzpl-upload__preview {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 128px;
    border-radius: 20px;
    border: 1px dashed rgba(255,255,255,.12);
    background:
        radial-gradient(circle at top left, rgba(255,122,38,.09), transparent 38%),
        linear-gradient(180deg, rgba(255,255,255,.044), rgba(255,255,255,.020));
}

.gzpl-upload[data-gzpl-upload-preview-ratio="3:4"] .gzpl-upload__preview { aspect-ratio: 3 / 4; }
.gzpl-upload[data-gzpl-upload-preview-ratio="4:5"] .gzpl-upload__preview { aspect-ratio: 4 / 5; }
.gzpl-upload[data-gzpl-upload-preview-ratio="1:1"] .gzpl-upload__preview { aspect-ratio: 1 / 1; }

.gzpl-builder-card .gzpl-upload__preview,
.gzpl-mini-card .gzpl-upload__preview,
.gzpl-choice-editor .gzpl-upload__preview,
.gzpl-option-editor .gzpl-upload__preview,
.gzpl-choice-row .gzpl-upload__preview,
.gzpl-option-row .gzpl-upload__preview,
.gzpl-scene-choice-row .gzpl-upload__preview,
.gzpl-ending-row .gzpl-upload__preview {
    max-height: 280px;
}

.gzpl-builder-card-grid--3 .gzpl-upload__preview,
.gzpl-builder-card-grid--2 .gzpl-upload__preview {
    max-height: 245px;
}

.gzpl-upload__placeholder {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 124px;
    padding: 16px;
    text-align: center;
}

.gzpl-upload__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: rgba(255,122,38,.11);
    border: 1px solid rgba(255,122,38,.22);
    color: var(--gzpl-accent-2);
    font-size: 24px;
    font-weight: 750;
}

.gzpl-upload__placeholder strong {
    color: #fff;
    font-size: 14px;
    font-weight: 950;
}

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

.gzpl-upload__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gzpl-upload__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gzpl-upload__button {
    position: relative;
    overflow: hidden;
}

.gzpl-upload__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.gzpl-upload__meta {
    display: grid;
    gap: 5px;
}

.gzpl-upload__ratio {
    color: var(--gzpl-accent-3);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gzpl-upload__hint {
    color: var(--gzpl-text-soft);
    font-size: 12px;
    line-height: 1.52;
}

.gzpl-upload-lite,
.gzpl-batch-upload {
    position: relative;
    display: grid;
    place-items: center;
    gap: 10px;
    min-height: 156px;
    padding: 28px 18px;
    text-align: center;
    border-radius: 24px;
    border: 2px dashed rgba(255,255,255,.12);
    background:
        radial-gradient(circle at top left, rgba(255,122,38,.08), transparent 42%),
        rgba(255,255,255,.032);
    cursor: pointer;
    overflow: hidden;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.gzpl-upload-lite:hover,
.gzpl-batch-upload:hover,
.gzpl-batch-upload.is-dragover {
    border-color: rgba(255,122,38,.40);
    background: rgba(255,122,38,.055);
    box-shadow: 0 0 0 4px rgba(255,122,38,.08);
}

.gzpl-upload-lite input,
.gzpl-batch-upload__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.gzpl-batch-upload__icon {
    color: var(--gzpl-accent);
    font-size: 44px;
    line-height: 1;
    font-weight: 300;
}

/* ============================================================================
   08. CREATE PAGE
============================================================================ */
.gzpl-create-page {
    display: grid;
    gap: 20px;
}

.gzpl-create-page .gzpl-panel {
    background:
        radial-gradient(circle at top right, rgba(255,122,38,.07), transparent 30%),
        radial-gradient(circle at top left, rgba(110,168,255,.055), transparent 26%),
        linear-gradient(180deg, rgba(18,22,33,.92), rgba(8,10,16,.92));
}

.gzpl-create-page--forge {
    gap: 20px;
}

/* Hero */
.gzpl-create-hero {
    overflow: hidden;
    border-radius: 32px;
    border: 1px solid var(--gzpl-line);
    background:
        radial-gradient(circle at 12% 0%, rgba(255,122,38,.22), transparent 31%),
        radial-gradient(circle at 90% 15%, rgba(110,168,255,.15), transparent 28%),
        linear-gradient(135deg, rgba(18,22,32,.98), rgba(6,8,13,.98));
    box-shadow: var(--gzpl-shadow);
}

.gzpl-create-hero .gzpl-panel__body {
    padding: clamp(22px, 3vw, 42px);
}

.gzpl-create-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, .72fr);
    gap: clamp(18px, 3vw, 40px);
    align-items: stretch;
}

.gzpl-create-hero__content {
    display: grid;
    gap: 16px;
    align-content: start;
}

.gzpl-eyebrow,
.gzpl-hero__eyebrow,
.gzpl-builder-stage__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    min-height: 32px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid rgba(255,122,38,.24);
    background: rgba(255,122,38,.10);
    color: #ffc49d;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.gzpl-create-hero__title {
    max-width: 780px;
    color: #fff;
    font-size: clamp(34px, 5.2vw, 78px);
    line-height: .94;
    letter-spacing: -.065em;
    font-weight: 980;
}

.gzpl-create-hero__desc {
    max-width: 760px;
    margin: 0;
    color: rgba(232,237,247,.82);
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.70;
}

.gzpl-create-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    align-items: center;
}

.gzpl-create-hero__actions .gzpl-btn {
    min-height: 48px;
    border-radius: 999px;
}

.gzpl-create-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.gzpl-create-hero__meta-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.gzpl-create-meta-card {
    display: grid;
    gap: 8px;
    padding: 16px;
    border-radius: 20px;
    background:
        radial-gradient(circle at top left, rgba(255,122,38,.10), transparent 44%),
        rgba(255,255,255,.035);
}

.gzpl-create-meta-card__label {
    color: rgba(255,196,157,.88);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gzpl-create-meta-card__value {
    color: #fff;
    font-size: 18px;
    font-weight: 950;
}

.gzpl-create-meta-card__text {
    margin: 0;
    color: rgba(232,237,247,.72);
    font-size: 13px;
    line-height: 1.52;
}

.gzpl-create-rail {
    display: grid;
    gap: 12px;
    height: 100%;
}

.gzpl-create-rail__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 14px;
    border-radius: 22px;
    background: rgba(255,255,255,.042);
}

.gzpl-create-rail__item.is-active {
    border-color: rgba(255,122,38,.26);
    background: rgba(255,122,38,.08);
}

.gzpl-create-rail__step,
.gzpl-progress-list__item > span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 13px;
    color: #ffd3b6;
    background: rgba(255,122,38,.14);
    border: 1px solid rgba(255,122,38,.28);
    font-weight: 950;
}

.gzpl-create-rail__item strong {
    color: #fff;
    font-size: 14px;
    font-weight: 950;
}

.gzpl-create-rail__item p {
    margin: 4px 0 0;
    color: rgba(232,237,247,.68);
    font-size: 12px;
    line-height: 1.45;
}

/* Mode picker */
#gzpl-mode-switch .gzpl-panel__head {
    padding: 20px 22px 8px;
    border-bottom: 0;
    background: transparent;
}

#gzpl-mode-switch .gzpl-panel__body {
    padding: 14px 22px 24px;
}

.gzpl-mode-cluster {
    padding: 18px;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.026);
}

.gzpl-mode-cluster + .gzpl-mode-cluster {
    margin-top: 18px;
}

.gzpl-mode-cluster__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.gzpl-mode-cluster__head h3 {
    color: #fff;
    font-size: clamp(22px, 2.2vw, 34px);
    letter-spacing: -.045em;
}

.gzpl-mode-cluster__head p {
    max-width: 620px;
    margin: 0;
    color: rgba(232,237,247,.68);
}

.gzpl-mode-grid,
.gzpl-mode-grid--forge {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.gzpl-mode-card,
.gzpl-mode-card--forge {
    position: relative;
    display: block;
    min-height: 210px;
    padding: 18px;
    border-radius: 25px;
    border: 1px solid rgba(255,255,255,.09);
    background:
        radial-gradient(circle at top left, rgba(255,122,38,.12), transparent 46%),
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
    overflow: hidden;
    box-shadow: var(--gzpl-shadow-sm);
    transition: transform .22s var(--gzpl-ease), border-color .22s var(--gzpl-ease), box-shadow .22s var(--gzpl-ease), background .22s var(--gzpl-ease);
}

.gzpl-mode-card:hover,
.gzpl-mode-card--forge:hover {
    transform: translateY(-4px);
    border-color: rgba(255,122,38,.34);
    box-shadow: 0 24px 70px rgba(0,0,0,.40), 0 0 34px rgba(255,122,38,.10);
}

.gzpl-mode-card.is-active,
.gzpl-mode-card--forge.is-active {
    border-color: rgba(255,122,38,.55);
    background:
        radial-gradient(circle at top left, rgba(255,122,38,.22), transparent 48%),
        linear-gradient(180deg, rgba(255,122,38,.08), rgba(255,255,255,.026));
}

.gzpl-mode-card__stripe {
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255,122,38,.72), transparent);
}

.gzpl-mode-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
}

.gzpl-mode-card__index {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.52);
    font-weight: 950;
}

.gzpl-mode-card__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 28px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,122,38,.10);
    border: 1px solid rgba(255,122,38,.20);
    color: #ffc49d;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.gzpl-mode-card__title {
    margin-top: 14px;
    color: #fff;
    font-size: clamp(22px, 1.9vw, 32px);
    line-height: 1.02;
    font-weight: 980;
    letter-spacing: -.045em;
}

.gzpl-mode-card__desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 9px 0 0;
    color: rgba(232,237,247,.74);
    font-size: 13px;
    line-height: 1.55;
}

.gzpl-mode-card__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 13px;
}

.gzpl-mode-card__facts span {
    min-height: 26px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.09);
    color: rgba(232,237,247,.76);
    font-size: 11px;
    font-weight: 800;
}

.gzpl-mode-card__meta {
    margin-top: 14px;
}

/* Workspace */
.gzpl-create-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.58fr) minmax(280px, .58fr);
    gap: 20px;
    align-items: start;
}

.gzpl-panel--workspace > .gzpl-panel__head {
    position: sticky;
    top: 12px;
    z-index: 10;
    border-radius: 24px 24px 0 0;
    backdrop-filter: blur(18px);
    background: linear-gradient(180deg, rgba(14,17,27,.92), rgba(14,17,27,.74));
}

.gzpl-panel--workspace .gzpl-panel__title {
    font-size: 22px;
}

.gzpl-builder-stage {
    padding: clamp(18px, 2vw, 26px);
    border-radius: 26px;
    border: 1px solid rgba(255,122,38,.20);
    background:
        radial-gradient(circle at top left, rgba(255,122,38,.14), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.022));
}

.gzpl-builder-stage__title {
    color: #fff;
    font-size: clamp(28px, 3.2vw, 48px);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 980;
}

.gzpl-builder-stage__desc {
    max-width: 780px;
    color: rgba(232,237,247,.78);
    line-height: 1.65;
}

.gzpl-builder-stage__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.gzpl-builder-group,
.gzpl-builder-section {
    padding: clamp(16px, 2vw, 22px);
    border-radius: 26px;
}

.gzpl-builder-group__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: #fff;
    font-size: 20px;
    letter-spacing: -.025em;
    font-weight: 950;
}

.gzpl-builder-group__title::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gzpl-accent);
    box-shadow: 0 0 18px rgba(255,122,38,.75);
}

.gzpl-builder-section__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.gzpl-builder-section__head h3 {
    color: #fff;
    font-size: clamp(24px, 2.2vw, 34px);
}

.gzpl-builder-section__head p {
    margin: 7px 0 0;
    color: rgba(232,237,247,.72);
}

.gzpl-builder-section__badge {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.gzpl-builder-card {
    padding: 16px;
    border-radius: 22px;
}

.gzpl-builder-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.gzpl-builder-card__head strong {
    display: block;
    color: #fff;
    font-size: 15px;
    font-weight: 950;
}

.gzpl-builder-card__head span {
    display: block;
    margin-top: 3px;
    color: var(--gzpl-text-muted);
    font-size: 12px;
}

.gzpl-drag-handle {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.045);
    color: var(--gzpl-text-soft);
    cursor: grab;
}

.gzpl-drag-handle:active {
    cursor: grabbing;
}

/* Sidebar */
.gzpl-create-sidebar {
    position: sticky;
    top: 14px;
    display: grid;
    gap: 14px;
}

.gzpl-create-sidebar__panel {
    border-radius: 24px;
}

.gzpl-create-sidebar__panel .gzpl-panel__head {
    padding: 16px 16px 10px;
    border-bottom: 0;
    background: transparent;
}

.gzpl-create-sidebar__panel .gzpl-panel__body {
    padding: 12px 16px 16px;
}

.gzpl-progress-list,
.gzpl-side-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gzpl-progress-list__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
}

.gzpl-progress-list__item strong {
    display: block;
    color: #fff;
    font-size: 13px;
}

.gzpl-progress-list__item small {
    display: block;
    margin-top: 3px;
    color: var(--gzpl-text-muted);
    line-height: 1.45;
}

.gzpl-side-list li {
    position: relative;
    padding-left: 18px;
    color: rgba(232,237,247,.74);
    font-size: 13px;
    line-height: 1.48;
}

.gzpl-side-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,122,38,.75);
}

/* Actions */
.gzpl-create-actions {
    position: sticky;
    bottom: 12px;
    z-index: 20;
    padding: 14px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(8,10,16,.86);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 60px rgba(0,0,0,.38);
}

.gzpl-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.gzpl-action-row__group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Notes / imports */
.gzpl-note {
    display: grid;
    gap: 5px;
    padding: 14px;
    border-radius: 18px;
    border-color: rgba(255,122,38,.18);
    background: rgba(255,122,38,.055);
}

.gzpl-note strong {
    color: #fff;
}

.gzpl-note p {
    margin: 0;
    color: var(--gzpl-text-soft);
    font-size: 13px;
}

.gzpl-builder-import {
    display: grid;
    gap: 16px;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
}

.gzpl-builder-import__head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    justify-content: space-between;
}

.gzpl-builder-import__head h4 {
    color: #fff;
    font-size: 20px;
}

.gzpl-builder-import__head p {
    margin-top: 6px;
}

/* ============================================================================
   09. PUBLIC ARCHIVE / SINGLE FALLBACKS
============================================================================ */
.gzpl-archive,
.gzpl-single,
.gzpl-shortcode {
    display: grid;
    gap: 22px;
}

.gzpl-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 22px;
    padding: clamp(22px, 3vw, 34px);
    border-radius: 30px;
    border: 1px solid var(--gzpl-line);
    background:
        radial-gradient(circle at top left, rgba(255,122,38,.14), transparent 30%),
        radial-gradient(circle at top right, rgba(110,168,255,.10), transparent 28%),
        linear-gradient(180deg, rgba(18,22,33,.94), rgba(8,10,16,.98));
    box-shadow: var(--gzpl-shadow);
}

.gzpl-hero__title {
    color: #fff;
    font-size: clamp(30px, 4vw, 58px);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 980;
}

.gzpl-hero__desc {
    max-width: 940px;
    color: var(--gzpl-text-soft);
    font-size: 15px;
}

.gzpl-hero__meta,
.gzpl-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gzpl-test-grid,
.gzpl-archive-grid,
.gzpl-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.gzpl-test-card,
.gzpl-archive-card {
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid var(--gzpl-line);
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
    box-shadow: var(--gzpl-shadow-sm);
}

.gzpl-test-card__media,
.gzpl-archive-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0b0f19;
}

.gzpl-test-card__media img,
.gzpl-archive-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gzpl-test-card__body,
.gzpl-archive-card__body {
    padding: 16px;
}

.gzpl-test-card__title,
.gzpl-archive-card__title {
    color: #fff;
    font-size: 20px;
    font-weight: 950;
    line-height: 1.12;
}

/* ============================================================================
   10. STATUS / MODAL / UTILITIES
============================================================================ */
.gzpl-alert,
.gzpl-toast {
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    color: var(--gzpl-text);
}

.gzpl-alert--success,
.gzpl-toast--success {
    border-color: rgba(34,197,94,.28);
    background: rgba(34,197,94,.10);
}

.gzpl-alert--error,
.gzpl-toast--error {
    border-color: rgba(239,68,68,.28);
    background: rgba(239,68,68,.10);
}

.gzpl-alert--warning,
.gzpl-toast--warning {
    border-color: rgba(245,158,11,.28);
    background: rgba(245,158,11,.10);
}

.gzpl-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(10px);
}

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

.gzpl-modal__dialog {
    width: min(720px, 100%);
    max-height: min(780px, 92vh);
    overflow: auto;
    border-radius: 28px;
    border: 1px solid var(--gzpl-line);
    background: linear-gradient(180deg, rgba(18,22,33,.98), rgba(8,10,16,.98));
    box-shadow: var(--gzpl-shadow-lg);
}

.gzpl-modal__head,
.gzpl-modal__body,
.gzpl-modal__foot {
    padding: 20px;
}

.gzpl-modal__head {
    border-bottom: 1px solid var(--gzpl-line-soft);
}

.gzpl-modal__foot {
    border-top: 1px solid var(--gzpl-line-soft);
}

/* ============================================================================
   11. RESPONSIVE
============================================================================ */
@media (max-width: 1180px) {
    .gzpl-create-hero__inner,
    .gzpl-create-workspace {
        grid-template-columns: 1fr;
    }

    .gzpl-create-sidebar {
        position: static;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gzpl-mode-grid,
    .gzpl-mode-grid--forge,
    .gzpl-test-grid,
    .gzpl-archive-grid,
    .gzpl-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gzpl-builder-card-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 780px) {
    .gzpl-shell,
    .gzpl-standalone,
    .gzpl-create-page.gzpl-shell {
        width: min(100% - 20px, var(--gzpl-max));
        margin-top: 12px;
        padding: 12px;
        border-radius: 24px;
    }

    .gzpl-create-hero .gzpl-panel__body {
        padding: 18px;
    }

    .gzpl-create-hero__title {
        font-size: clamp(32px, 10vw, 48px);
    }

    .gzpl-create-hero__meta-row,
    .gzpl-create-sidebar,
    .gzpl-grid--2,
    .gzpl-grid--3,
    .gzpl-grid--4 {
        grid-template-columns: 1fr;
    }

    .gzpl-mode-grid,
    .gzpl-mode-grid--forge {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .gzpl-mode-cluster {
        padding: 12px;
        border-radius: 22px;
    }

    .gzpl-mode-cluster__head {
        display: block;
    }

    .gzpl-mode-cluster__head p {
        margin-top: 6px;
    }

    .gzpl-mode-card,
    .gzpl-mode-card--forge {
        min-height: 170px;
        padding: 13px;
        border-radius: 19px;
    }

    .gzpl-mode-card__top {
        margin-top: 8px;
    }

    .gzpl-mode-card__index {
        width: 30px;
        height: 30px;
        border-radius: 11px;
        font-size: 12px;
    }

    .gzpl-mode-card__eyebrow {
        min-height: 24px;
        padding: 5px 7px;
        max-width: 100%;
        font-size: 9px;
    }

    .gzpl-mode-card__title {
        margin-top: 10px;
        font-size: 16px;
        line-height: 1.08;
    }

    .gzpl-mode-card__desc {
        font-size: 11px;
        line-height: 1.38;
        -webkit-line-clamp: 3;
    }

    .gzpl-mode-card__facts {
        display: none;
    }

    .gzpl-mode-card__meta {
        margin-top: 10px;
    }

    .gzpl-mode-card__meta .gzpl-badge {
        min-height: 24px;
        padding: 5px 7px;
        font-size: 10px;
    }

    .gzpl-builder-card-grid--3,
    .gzpl-builder-card-grid--2,
    .gzpl-test-grid,
    .gzpl-archive-grid,
    .gzpl-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .gzpl-builder-card-grid--3 .gzpl-upload__preview,
    .gzpl-builder-card-grid--2 .gzpl-upload__preview {
        max-height: none;
    }

    .gzpl-builder-card {
        padding: 12px;
        border-radius: 18px;
    }

    .gzpl-builder-card__head {
        display: grid;
        grid-template-columns: 1fr auto auto;
        align-items: start;
    }

    .gzpl-builder-card__head strong {
        font-size: 13px;
    }

    .gzpl-builder-card__head span {
        font-size: 11px;
    }

    .gzpl-panel--workspace > .gzpl-panel__head {
        position: static;
    }

    .gzpl-create-actions {
        bottom: 8px;
    }

    .gzpl-action-row,
    .gzpl-action-row__group {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .gzpl-action-row .gzpl-btn,
    .gzpl-action-row__group .gzpl-btn {
        width: 100%;
    }

    .gzpl-builder-section__head,
    .gzpl-builder-import__head {
        display: block;
    }

    .gzpl-builder-section__badge {
        justify-content: flex-start;
        margin-top: 10px;
    }

    .gzpl-panel__head {
        display: block;
    }
}

@media (max-width: 430px) {
    .gzpl-mode-card,
    .gzpl-mode-card--forge {
        min-height: 160px;
    }

    .gzpl-builder-card-grid--3,
    .gzpl-builder-card-grid--2,
    .gzpl-test-grid,
    .gzpl-archive-grid,
    .gzpl-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gzpl-builder-card {
        padding: 10px;
    }

    .gzpl-upload {
        padding: 9px;
        border-radius: 18px;
    }

    .gzpl-upload__placeholder {
        min-height: 100px;
        padding: 10px;
    }

    .gzpl-upload__placeholder strong {
        font-size: 12px;
    }

    .gzpl-upload__placeholder small,
    .gzpl-upload__hint {
        font-size: 10px;
    }

    .gzpl-btn {
        min-height: 42px;
        padding: 10px 12px;
        font-size: 12px;
    }
}

/* ============================================================================
   12. ACCESSIBILITY
============================================================================ */
@media (prefers-reduced-motion: reduce) {
    .gzpl-page *,
    .gzpl-shell *,
    .gzpl-app *,
    .gzpl-create-page * {
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ============================================================================
   13. CREATE WIZARD PLAN — PLAYLAB OLUŞTURMA MASASI
   Works with create-playlab-wizard-v1.php
   Keeps JS/AJAX/data-gzpl-* behavior untouched.
============================================================================ */

.gzpl-create-page--wizard {
    --gzpl-wiz-top: 8px;
    --gzpl-wiz-side: 340px;
    --gzpl-wiz-gap: 16px;
    width: min(1560px, calc(100% - clamp(18px, 5vw, 96px))) !important;
    padding: clamp(12px, 1.6vw, 22px) !important;
    border-radius: 32px !important;
}

/* Compact topbar instead of giant hero */
.gzpl-create-page--wizard .gzpl-wizard-topbar {
    position: sticky;
    top: var(--gzpl-wiz-top);
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 72px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.09);
    background:
        radial-gradient(circle at top left, rgba(255,122,38,.13), transparent 36%),
        rgba(7, 9, 15, .88);
    box-shadow: 0 18px 54px rgba(0,0,0,.28);
    backdrop-filter: blur(18px);
}

.gzpl-wizard-brand {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-width: 0;
}

.gzpl-wizard-brand__mark {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    border: 1px solid rgba(255,122,38,.32);
    background: rgba(255,122,38,.11);
    color: #ffc49d;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: .08em;
}

.gzpl-wizard-brand strong {
    display: block;
    color: #fff;
    font-size: 17px;
    line-height: 1.05;
    font-weight: 980;
    letter-spacing: -.035em;
}

.gzpl-wizard-brand small {
    display: block;
    margin-top: 5px;
    color: rgba(232,237,247,.62);
    font-size: 12px;
    line-height: 1.35;
    font-weight: 750;
}

.gzpl-wizard-topbar__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
}

.gzpl-wizard-status {
    display: inline-grid;
    gap: 2px;
    min-height: 42px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.045);
}

.gzpl-wizard-status em {
    color: rgba(232,237,247,.52);
    font-style: normal;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.gzpl-wizard-status strong {
    color: #fff;
    font-size: 12px;
    font-weight: 920;
}

/* Main wizard split: content + right assistant */
.gzpl-wizard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--gzpl-wiz-side);
    gap: var(--gzpl-wiz-gap);
    align-items: start;
}

.gzpl-wizard-main,
.gzpl-wizard-side,
.gzpl-wizard-form,
.gzpl-wizard-panels,
.gzpl-wizard-panel,
.gzpl-wizard-card {
    min-width: 0;
}

.gzpl-wizard-form {
    display: grid;
    gap: 14px;
}

/* Stepper */
.gzpl-wizard-stepper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    padding: 10px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.028);
}

.gzpl-wizard-step {
    appearance: none;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.035);
    color: rgba(255,255,255,.76);
    min-height: 70px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    text-align: left;
    border-radius: 18px;
    padding: 10px;
    cursor: pointer;
    transition:
        transform .18s var(--gzpl-ease),
        background .18s var(--gzpl-ease),
        border-color .18s var(--gzpl-ease),
        color .18s var(--gzpl-ease);
}

.gzpl-wizard-step:hover {
    transform: translateY(-1px);
    border-color: rgba(255,122,38,.24);
    color: #fff;
}

.gzpl-wizard-step.is-active {
    color: #fff;
    border-color: rgba(255,122,38,.42);
    background: linear-gradient(135deg, rgba(255,122,38,.16), rgba(255,255,255,.045));
}

.gzpl-wizard-step.is-done {
    border-color: rgba(34,197,94,.25);
    background: rgba(34,197,94,.065);
}

.gzpl-wizard-step span {
    grid-row: 1 / span 2;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color: #ffc49d;
    font-size: 12px;
    font-weight: 950;
}

.gzpl-wizard-step strong {
    color: inherit;
    font-size: 13px;
    line-height: 1.1;
    font-weight: 950;
}

.gzpl-wizard-step small {
    color: rgba(232,237,247,.55);
    font-size: 11px;
    line-height: 1.25;
    font-weight: 760;
}

.gzpl-wizard-mobile-meta {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,122,38,.18);
    background: rgba(255,122,38,.07);
}

.gzpl-wizard-mobile-meta strong {
    color: #ffd3b6;
    font-size: 12px;
    font-weight: 950;
}

.gzpl-wizard-mobile-meta span {
    color: rgba(255,255,255,.82);
    font-size: 13px;
    font-weight: 850;
}

.gzpl-wizard-progress {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.065);
}

.gzpl-wizard-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ff7a26, #b77cff);
    transition: width .25s ease;
}

/* Panels */
.gzpl-wizard-panel {
    display: none;
    animation: gzplWizardIn .22s ease both;
}

.gzpl-wizard-panel.is-active {
    display: block;
}

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

.gzpl-wizard-card {
    padding: clamp(16px, 2.1vw, 26px);
    min-height: 620px;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.09);
    background:
        radial-gradient(circle at top left, rgba(255,122,38,.08), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.022)),
        rgba(9, 12, 20, .84);
    box-shadow: 0 22px 70px rgba(0,0,0,.34);
    overflow: hidden;
}

.gzpl-wizard-panel-head {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}

.gzpl-wizard-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    color: #ffc49d;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.gzpl-wizard-kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #ff7a26;
    box-shadow: 0 0 18px rgba(255,122,38,.72);
}

.gzpl-wizard-panel-head h2 {
    max-width: 920px;
    color: #fff;
    font-size: clamp(28px, 3.4vw, 52px);
    line-height: .98;
    letter-spacing: -.06em;
    font-weight: 980;
}

.gzpl-wizard-panel-head p {
    max-width: 820px;
    margin: 0;
    color: rgba(232,237,247,.72);
    font-size: 15px;
    line-height: 1.65;
}

/* Step 1 mode selection */
.gzpl-wizard-mode-cluster {
    margin-top: 16px;
}

.gzpl-mode-grid--wizard {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gzpl-mode-card--wizard {
    min-height: 190px;
}

.gzpl-mode-card--wizard .gzpl-mode-card__stripe,
.gzpl-mode-card--wizard .gzpl-mode-card__index {
    display: none;
}

.gzpl-mode-card--wizard .gzpl-mode-card__top {
    justify-content: space-between;
}

.gzpl-mode-card--wizard .gzpl-mode-card__title {
    margin-top: 18px;
}

/* Step 2 foundation */
.gzpl-wizard-foundation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, .72fr);
    gap: 16px;
    align-items: start;
}

.gzpl-builder-group--foundation,
.gzpl-builder-group--cover {
    height: 100%;
}

.gzpl-title-input,
.gzpl-create-page--wizard #gzpl_title {
    min-height: 56px;
    font-size: 17px;
    font-weight: 850;
}

.gzpl-builder-group--cover .gzpl-upload__preview {
    min-height: 220px;
}

.gzpl-wizard-soft-note {
    margin-top: 12px;
    display: grid;
    gap: 5px;
    padding: 13px;
    border-radius: 18px;
    border: 1px solid rgba(255,122,38,.16);
    background: rgba(255,122,38,.06);
}

.gzpl-wizard-soft-note strong {
    color: #ffd3b6;
    font-size: 13px;
}

.gzpl-wizard-soft-note span {
    color: rgba(232,237,247,.67);
    font-size: 12px;
    line-height: 1.5;
}

/* Step 3 builder */
.gzpl-wizard-mode-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gzpl-wizard-card .gzpl-builder-group--workspace {
    margin-top: 12px;
}

.gzpl-create-page--wizard .gzpl-builder-section {
    box-shadow: none;
}

/* Bigger builder layouts on desktop; avoids dead blank space */
.gzpl-create-page--wizard .gzpl-builder-card-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gzpl-create-page--wizard .gzpl-builder-card-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Step 4 review */
.gzpl-wizard-review-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.gzpl-builder-card--review {
    min-height: 170px;
}

.gzpl-builder-card--review p {
    color: rgba(232,237,247,.72);
    line-height: 1.55;
}

.gzpl-wizard-submit-zone {
    margin-top: 16px;
}

/* Wizard bottom controls */
.gzpl-wizard-actions {
    position: sticky;
    bottom: 10px;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(7, 9, 15, .84);
    box-shadow: 0 18px 60px rgba(0,0,0,.38);
    backdrop-filter: blur(18px);
}

.gzpl-wizard-actions .gzpl-btn {
    min-width: 138px;
}

/* Right assistant panel */
.gzpl-wizard-side {
    display: grid;
    gap: 14px;
}

.gzpl-wizard-side-card {
    border-radius: 24px;
}

.gzpl-wizard-side-card--sticky {
    position: sticky;
    top: 96px;
    z-index: 5;
}

.gzpl-wizard-side-card h3 {
    margin: 9px 0 0;
    color: #fff;
    font-size: 24px;
    line-height: 1.08;
    letter-spacing: -.045em;
    font-weight: 980;
}

.gzpl-wizard-side-card p {
    margin: 9px 0 0;
    color: rgba(232,237,247,.68);
    font-size: 13px;
    line-height: 1.55;
}

.gzpl-wizard-side-steps {
    display: grid;
    gap: 9px;
    margin-top: 16px;
}

.gzpl-wizard-side-steps > div {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 11px;
    border-radius: 17px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.028);
}

.gzpl-wizard-side-steps > div.is-active {
    border-color: rgba(255,122,38,.25);
    background: rgba(255,122,38,.075);
}

.gzpl-wizard-side-steps strong {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 13px;
    border: 1px solid rgba(255,122,38,.24);
    background: rgba(255,122,38,.10);
    color: #ffc49d;
    font-size: 12px;
    font-weight: 950;
}

.gzpl-wizard-side-steps span {
    color: rgba(232,237,247,.70);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 760;
}

/* Empty states in wizard shell */
.gzpl-wizard-empty {
    margin-top: 16px;
}

/* Make long mode builders less intimidating */
.gzpl-create-page--wizard .gzpl-builder-section__head h3 {
    font-size: clamp(22px, 2vw, 32px);
}

.gzpl-create-page--wizard .gzpl-builder-section__head p {
    max-width: 820px;
}

.gzpl-create-page--wizard .gzpl-builder-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.020)),
        rgba(11, 14, 22, .78);
}

/* Better card image upload density inside 2/3 column builder grids */
.gzpl-create-page--wizard .gzpl-builder-card-grid--3 .gzpl-upload__preview,
.gzpl-create-page--wizard .gzpl-builder-card-grid--2 .gzpl-upload__preview {
    min-height: 180px;
    max-height: none;
}

.gzpl-create-page--wizard .gzpl-builder-card-grid--3 .gzpl-upload,
.gzpl-create-page--wizard .gzpl-builder-card-grid--2 .gzpl-upload {
    padding: 12px;
}

/* For triple-pick/tour cards: prevent right-side dead space by using full internal width */
.gzpl-create-page--wizard [data-gzpl-builder-mode="triple-pick"] .gzpl-builder-card,
.gzpl-create-page--wizard [data-gzpl-builder-mode="versus"] .gzpl-builder-card,
.gzpl-create-page--wizard [data-gzpl-builder-mode="tier"] .gzpl-builder-card {
    width: 100%;
}

/* ============================================================================
   14. CREATE WIZARD RESPONSIVE
============================================================================ */
@media (max-width: 1280px) {
    .gzpl-create-page--wizard {
        --gzpl-wiz-side: 310px;
    }

    .gzpl-wizard-panel-head h2 {
        font-size: clamp(28px, 3vw, 44px);
    }

    .gzpl-create-page--wizard .gzpl-builder-card-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    .gzpl-wizard-layout {
        grid-template-columns: 1fr;
    }

    .gzpl-wizard-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gzpl-wizard-side-card--sticky {
        position: static;
    }

    .gzpl-wizard-foundation {
        grid-template-columns: 1fr;
    }

    .gzpl-wizard-review-grid,
    .gzpl-mode-grid--wizard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 780px) {
    .gzpl-create-page--wizard {
        width: min(100% - 18px, 1560px) !important;
        padding: 10px !important;
        border-radius: 24px !important;
    }

    .gzpl-create-page--wizard .gzpl-wizard-topbar {
        position: relative;
        top: auto;
        display: grid;
        border-radius: 20px;
    }

    .gzpl-wizard-topbar__actions {
        justify-content: flex-start;
    }

    .gzpl-wizard-status {
        min-height: 38px;
    }

    .gzpl-wizard-backlink {
        width: 100%;
    }

    .gzpl-wizard-stepper {
        display: none;
    }

    .gzpl-wizard-mobile-meta {
        display: flex;
    }

    .gzpl-wizard-card {
        min-height: auto;
        padding: 14px;
        border-radius: 22px;
    }

    .gzpl-wizard-panel-head {
        margin-bottom: 14px;
    }

    .gzpl-wizard-panel-head h2 {
        font-size: clamp(25px, 8vw, 38px);
    }

    .gzpl-wizard-panel-head p {
        font-size: 13px;
    }

    .gzpl-mode-grid--wizard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .gzpl-mode-card--wizard {
        min-height: 165px;
        padding: 13px;
        border-radius: 19px;
    }

    .gzpl-mode-card--wizard .gzpl-mode-card__facts {
        display: none;
    }

    .gzpl-mode-card--wizard .gzpl-mode-card__title {
        font-size: 16px;
    }

    .gzpl-mode-card--wizard .gzpl-mode-card__desc {
        font-size: 11px;
        line-height: 1.38;
    }

    .gzpl-wizard-review-grid,
    .gzpl-wizard-side {
        grid-template-columns: 1fr;
    }

    .gzpl-wizard-actions {
        bottom: 8px;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .gzpl-wizard-actions .gzpl-btn {
        width: 100%;
        min-width: 0;
    }

    .gzpl-wizard-submit-zone,
    .gzpl-wizard-submit-zone .gzpl-action-row__group {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .gzpl-create-page--wizard .gzpl-builder-card-grid--3,
    .gzpl-create-page--wizard .gzpl-builder-card-grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .gzpl-create-page--wizard .gzpl-builder-card {
        padding: 10px;
    }

    .gzpl-create-page--wizard .gzpl-builder-card__head {
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: 8px;
    }

    .gzpl-create-page--wizard .gzpl-builder-card__head strong {
        font-size: 13px;
    }

    .gzpl-create-page--wizard .gzpl-builder-card__head span {
        font-size: 11px;
    }
}

@media (max-width: 430px) {
    .gzpl-wizard-brand {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .gzpl-wizard-brand__mark {
        width: 38px;
        height: 38px;
        border-radius: 14px;
    }

    .gzpl-wizard-status {
        width: calc(50% - 5px);
    }

    .gzpl-wizard-card {
        padding: 12px;
    }

    .gzpl-wizard-actions {
        padding: 10px;
    }

    .gzpl-create-page--wizard .gzpl-builder-card-grid--3,
    .gzpl-create-page--wizard .gzpl-builder-card-grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .gzpl-create-page--wizard .gzpl-upload__placeholder strong {
        font-size: 12px;
    }

    .gzpl-create-page--wizard .gzpl-upload__placeholder small,
    .gzpl-create-page--wizard .gzpl-upload__hint {
        font-size: 10px;
    }
}

/* ============================================================================
   15. TEMPORARY COMPATIBILITY
   If create-playlab-wizard-v1.php still contains inline style, this file wins.
============================================================================ */
.gzpl-create-page--wizard .gzpl-create-hero {
    display: none !important;
}

/* ============================================================================
   16. CREATE WIZARD V2 — NO TOPBAR / NO SIDEBAR / WIDER CONTENT
============================================================================ */
.gzpl-create-page--wizard {
    width: min(1680px, calc(100% - clamp(14px, 4vw, 72px))) !important;
    margin-top: 6px !important;
    padding-top: 10px !important;
}

.gzpl-create-page--wizard .gzpl-wizard-topbar,
.gzpl-create-page--wizard .gzpl-wizard-side {
    display: none !important;
}

.gzpl-create-page--wizard .gzpl-wizard-layout {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
}

.gzpl-create-page--wizard .gzpl-wizard-main {
    width: 100% !important;
}

.gzpl-create-page--wizard .gzpl-wizard-card {
    min-height: auto !important;
}

.gzpl-create-page--wizard .gzpl-wizard-stepper {
    position: sticky;
    top: 6px;
    z-index: 80;
    backdrop-filter: blur(18px);
    background:
        radial-gradient(circle at top left, rgba(255,122,38,.08), transparent 34%),
        rgba(7, 9, 15, .86) !important;
    box-shadow: 0 18px 54px rgba(0,0,0,.28);
}

.gzpl-create-page--wizard .gzpl-wizard-panel-head h2 {
    max-width: 1120px;
}

.gzpl-create-page--wizard .gzpl-wizard-panel-head p {
    max-width: 1040px;
}

.gzpl-create-page--wizard .gzpl-mode-grid--wizard {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.gzpl-create-page--wizard .gzpl-wizard-foundation {
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr) !important;
}

.gzpl-create-page--wizard .gzpl-builder-card-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.gzpl-create-page--wizard .gzpl-builder-card-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Step 4 rework */
.gzpl-wizard-card--final {
    display: grid;
    gap: 18px;
}

.gzpl-wizard-final-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    gap: 16px;
    align-items: end;
    padding: clamp(18px, 2.2vw, 28px);
    border-radius: 26px;
    border: 1px solid rgba(255,122,38,.20);
    background:
        radial-gradient(circle at top left, rgba(255,122,38,.16), transparent 40%),
        linear-gradient(180deg, rgba(255,255,255,.050), rgba(255,255,255,.020));
}

.gzpl-wizard-final-hero h2 {
    margin-top: 8px;
    color: #fff;
    font-size: clamp(30px, 4vw, 58px);
    line-height: .96;
    letter-spacing: -.065em;
    font-weight: 980;
}

.gzpl-wizard-final-hero p {
    max-width: 860px;
    margin: 10px 0 0;
    color: rgba(232,237,247,.74);
    line-height: 1.65;
}

.gzpl-wizard-final-badge {
    display: grid;
    gap: 6px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.045);
}

.gzpl-wizard-final-badge span {
    color: rgba(255,196,157,.86);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gzpl-wizard-final-badge strong {
    color: #fff;
    font-size: 20px;
    line-height: 1.08;
    font-weight: 970;
}

.gzpl-wizard-final-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.gzpl-wizard-final-card {
    display: grid;
    gap: 10px;
    align-content: start;
    min-height: 220px;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.09);
    background:
        radial-gradient(circle at top left, rgba(255,122,38,.08), transparent 42%),
        rgba(255,255,255,.035);
}

.gzpl-wizard-final-card--primary {
    border-color: rgba(255,122,38,.30);
    background:
        radial-gradient(circle at top left, rgba(255,122,38,.15), transparent 44%),
        rgba(255,122,38,.055);
}

.gzpl-wizard-final-card > span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    border: 1px solid rgba(255,122,38,.24);
    background: rgba(255,122,38,.10);
    color: #ffc49d;
    font-size: 12px;
    font-weight: 950;
}

.gzpl-wizard-final-card strong {
    color: #fff;
    font-size: 20px;
    line-height: 1.08;
    font-weight: 960;
    letter-spacing: -.03em;
}

.gzpl-wizard-final-card p {
    color: rgba(232,237,247,.68);
    font-size: 13px;
    line-height: 1.52;
}

.gzpl-wizard-final-card .gzpl-btn {
    width: 100%;
    margin-top: auto;
}

.gzpl-wizard-final-checks {
    display: grid;
    grid-template-columns: minmax(240px, .45fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.028);
}

.gzpl-wizard-final-checks h3 {
    color: #fff;
    font-size: 24px;
    line-height: 1.05;
    letter-spacing: -.04em;
    font-weight: 970;
}

.gzpl-wizard-final-checks p {
    margin-top: 8px;
    color: rgba(232,237,247,.64);
    line-height: 1.55;
}

/* Missing field redirect notice */
.gzpl-wizard-validation-note {
    display: grid;
    gap: 4px;
    margin: 0 0 16px;
    padding: 13px 14px;
    border-radius: 18px;
    border: 1px solid rgba(239,68,68,.32);
    background:
        radial-gradient(circle at top left, rgba(239,68,68,.12), transparent 46%),
        rgba(239,68,68,.075);
}

.gzpl-wizard-validation-note strong {
    color: #fecaca;
    font-size: 14px;
    font-weight: 950;
}

.gzpl-wizard-validation-note span {
    color: rgba(255,235,235,.78);
    font-size: 13px;
    line-height: 1.45;
}

/* Cleaner public wording area */
.gzpl-create-page--wizard .gzpl-mode-cluster__head h3 {
    font-size: clamp(24px, 2.4vw, 38px);
}

.gzpl-create-page--wizard .gzpl-mode-cluster__head p {
    color: rgba(232,237,247,.66);
}

/* If no admin modes are visible, the first mode step feels like a normal picker. */
.gzpl-create-page--wizard .gzpl-wizard-mode-cluster:first-of-type {
    margin-top: 10px;
}

@media (max-width: 1180px) {
    .gzpl-create-page--wizard .gzpl-wizard-foundation,
    .gzpl-wizard-final-hero,
    .gzpl-wizard-final-checks {
        grid-template-columns: 1fr !important;
    }

    .gzpl-wizard-final-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 780px) {
    .gzpl-create-page--wizard {
        width: min(100% - 14px, 1680px) !important;
        margin-top: 4px !important;
        padding-top: 8px !important;
    }

    .gzpl-create-page--wizard .gzpl-wizard-stepper {
        display: none !important;
    }

    .gzpl-create-page--wizard .gzpl-wizard-mobile-meta {
        display: flex !important;
        position: sticky;
        top: 6px;
        z-index: 80;
        backdrop-filter: blur(18px);
    }

    .gzpl-create-page--wizard .gzpl-mode-grid--wizard {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .gzpl-create-page--wizard .gzpl-builder-card-grid--3,
    .gzpl-create-page--wizard .gzpl-builder-card-grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .gzpl-wizard-final-hero,
    .gzpl-wizard-final-checks,
    .gzpl-wizard-final-card {
        padding: 14px;
        border-radius: 20px;
    }

    .gzpl-wizard-final-hero h2 {
        font-size: clamp(26px, 8vw, 40px);
    }

    .gzpl-wizard-final-card {
        min-height: auto;
    }
}

/* v1.1.0 Factory draft edit navigation */
.gzpl-factory-editbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 18px;padding:13px 16px;border:1px solid rgba(139,92,246,.28);border-radius:14px;background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(168,85,247,.04))}.gzpl-factory-editbar>div{display:flex;align-items:center;gap:10px}.gzpl-factory-editbar span{font-size:10px;font-weight:900;letter-spacing:.12em;color:#8b5cf6}.gzpl-factory-editbar strong{font-size:13px}.gzpl-factory-editbar nav{display:flex;gap:8px;flex-wrap:wrap}.gzpl-factory-editbar a{padding:7px 10px;border-radius:9px;border:1px solid rgba(127,127,127,.18);text-decoration:none;font-size:12px;font-weight:700}@media(max-width:720px){.gzpl-factory-editbar{align-items:flex-start;flex-direction:column}}

/* ============================================================================
   17. COMMUNITY BUILDER — MOBILE STUDIO 1.3.1
   Tier / Triple Pick / Versus use purpose-built phone layouts. These rules
   intentionally sit at the end of the stylesheet to replace older 2-column
   compatibility rules.
============================================================================ */
.gzpl-upload__mobile-copy,
.gzpl-mobile-swipe-hint {
    display: none;
}

@media (max-width: 900px) {
    .gzpl-create-page--wizard {
        width: 100% !important;
        max-width: none !important;
        margin: 0 auto max(18px, env(safe-area-inset-bottom)) !important;
        padding: max(6px, env(safe-area-inset-top)) 6px max(10px, env(safe-area-inset-bottom)) !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .gzpl-create-page--wizard .gzpl-wizard-layout,
    .gzpl-create-page--wizard .gzpl-wizard-main,
    .gzpl-create-page--wizard .gzpl-wizard-form,
    .gzpl-create-page--wizard .gzpl-wizard-panels,
    .gzpl-create-page--wizard .gzpl-wizard-panel,
    .gzpl-create-page--wizard .gzpl-wizard-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .gzpl-create-page--wizard .gzpl-wizard-side,
    .gzpl-create-page--wizard .gzpl-wizard-stepper,
    .gzpl-create-page--wizard .gzpl-wizard-topbar {
        display: none !important;
    }

    .gzpl-create-page--wizard .gzpl-wizard-mobile-meta {
        display: flex !important;
        top: max(5px, env(safe-area-inset-top)) !important;
        min-height: 48px !important;
        padding: 10px 13px !important;
        border-radius: 16px !important;
        background: rgba(8, 10, 16, .94) !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, .34) !important;
    }

    .gzpl-create-page--wizard .gzpl-wizard-card {
        padding: 11px !important;
        border-radius: 20px !important;
    }

    .gzpl-create-page--wizard .gzpl-wizard-panel-head {
        gap: 6px !important;
        margin-bottom: 12px !important;
    }

    .gzpl-create-page--wizard .gzpl-wizard-panel-head h2 {
        font-size: clamp(26px, 8.4vw, 38px) !important;
        line-height: 1.02 !important;
    }

    .gzpl-create-page--wizard .gzpl-wizard-panel-head p {
        font-size: 13px !important;
        line-height: 1.52 !important;
    }

    .gzpl-create-page--wizard .gzpl-mode-grid--wizard,
    .gzpl-create-page--wizard .gzpl-wizard-foundation,
    .gzpl-create-page--wizard .gzpl-grid--2,
    .gzpl-create-page--wizard .gzpl-grid--3,
    .gzpl-create-page--wizard .gzpl-builder-card-grid--2,
    .gzpl-create-page--wizard .gzpl-builder-card-grid--3,
    .gzpl-create-page--wizard #gzpl-tier-repeater-container,
    .gzpl-create-page--wizard #gzpl-versus-repeater-container {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .gzpl-create-page--wizard .gzpl-mode-card--wizard {
        min-height: 128px !important;
    }

    .gzpl-create-page--wizard .gzpl-builder-group--workspace,
    .gzpl-create-page--wizard .gzpl-builder-shell,
    .gzpl-create-page--wizard .gzpl-builder-section {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .gzpl-create-page--wizard .gzpl-builder-section::before,
    .gzpl-create-page--wizard .gzpl-builder-group--workspace::before {
        display: none !important;
    }

    .gzpl-create-page--wizard .gzpl-builder-section__head {
        display: block !important;
        margin-bottom: 12px !important;
        padding: 13px !important;
        border: 1px solid rgba(255, 122, 38, .16) !important;
        border-radius: 18px !important;
        background: rgba(255, 122, 38, .055) !important;
    }

    .gzpl-create-page--wizard .gzpl-builder-section__head h3 {
        font-size: 22px !important;
    }

    .gzpl-create-page--wizard .gzpl-builder-section__head p {
        margin-top: 5px !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    .gzpl-create-page--wizard .gzpl-builder-section__badge,
    .gzpl-create-page--wizard .gzpl-wizard-mode-meta {
        display: none !important;
    }

    .gzpl-create-page--wizard .gzpl-builder-group:not(.gzpl-builder-group--workspace) {
        padding: 12px !important;
        border-radius: 20px !important;
    }

    .gzpl-create-page--wizard .gzpl-builder-group__title {
        margin-bottom: 11px !important;
        font-size: 17px !important;
    }

    .gzpl-create-page--wizard .gzpl-builder-health {
        top: calc(max(5px, env(safe-area-inset-top)) + 54px) !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
        padding: 10px !important;
        margin-bottom: 12px !important;
        border-radius: 16px !important;
    }

    .gzpl-create-page--wizard .gzpl-builder-health__bar {
        grid-column: 1 / -1 !important;
        height: 7px !important;
    }

    .gzpl-create-page--wizard .gzpl-builder-health .gzpl-btn {
        width: auto !important;
        min-height: 40px !important;
        padding: 8px 10px !important;
        font-size: 11px !important;
    }

    .gzpl-create-page--wizard .gzpl-batch-upload {
        grid-template-columns: 44px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        place-items: center start !important;
        min-height: 0 !important;
        padding: 13px !important;
        gap: 3px 11px !important;
        text-align: left !important;
        border-radius: 18px !important;
    }

    .gzpl-create-page--wizard .gzpl-batch-upload__icon {
        grid-row: 1 / 3 !important;
        font-size: 36px !important;
    }

    .gzpl-create-page--wizard .gzpl-batch-upload strong {
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    .gzpl-create-page--wizard .gzpl-batch-upload p {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    /* Tier and Versus: one readable editor card per row. */
    .gzpl-create-page--wizard #gzpl-tier-repeater-container,
    .gzpl-create-page--wizard #gzpl-versus-repeater-container,
    .gzpl-create-page--wizard #gzpl-triple-repeater-container {
        display: grid !important;
        gap: 12px !important;
    }

    .gzpl-create-page--wizard [data-gzpl-tier-card],
    .gzpl-create-page--wizard [data-gzpl-versus-card],
    .gzpl-create-page--wizard [data-gzpl-triple-round] {
        width: 100% !important;
        min-width: 0 !important;
        padding: 12px !important;
        border-radius: 19px !important;
    }

    .gzpl-create-page--wizard .gzpl-builder-card__head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto auto !important;
        align-items: center !important;
        gap: 6px !important;
        margin-bottom: 12px !important;
    }

    .gzpl-create-page--wizard [data-gzpl-versus-card] .gzpl-builder-card__head {
        grid-template-columns: minmax(0, 1fr) auto auto !important;
    }

    .gzpl-create-page--wizard .gzpl-builder-card__head > div {
        min-width: 0 !important;
    }

    .gzpl-create-page--wizard .gzpl-builder-card__head strong {
        font-size: 14px !important;
    }

    .gzpl-create-page--wizard .gzpl-builder-card__head span {
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        font-size: 10px !important;
    }

    .gzpl-create-page--wizard .gzpl-builder-card__head .gzpl-btn,
    .gzpl-create-page--wizard .gzpl-drag-handle {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        font-size: 0 !important;
        border-radius: 12px !important;
    }

    .gzpl-create-page--wizard [data-gzpl-card-toggle]::before {
        content: "−";
        font-size: 19px;
        line-height: 1;
    }

    .gzpl-create-page--wizard .is-collapsed [data-gzpl-card-toggle]::before {
        content: "+";
    }

    .gzpl-create-page--wizard .gzpl-remove-node-btn::before {
        content: "×";
        font-size: 19px;
        line-height: 1;
    }

    .gzpl-create-page--wizard .gzpl-drag-handle span {
        display: block !important;
        margin: 0 !important;
        overflow: visible !important;
        font-size: 17px !important;
    }

    /* Compact horizontal image picker used by every community card. */
    .gzpl-create-page--wizard [data-gzpl-builder-mode="tier"] .gzpl-upload,
    .gzpl-create-page--wizard [data-gzpl-builder-mode="versus"] .gzpl-upload,
    .gzpl-create-page--wizard [data-gzpl-builder-mode="triple-pick"] .gzpl-upload {
        display: grid !important;
        grid-template-columns: 108px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "preview actions"
            "preview meta" !important;
        align-items: center !important;
        gap: 8px 11px !important;
        min-height: 128px !important;
        padding: 10px !important;
        border-radius: 17px !important;
    }

    .gzpl-create-page--wizard [data-gzpl-builder-mode="tier"] .gzpl-upload__preview,
    .gzpl-create-page--wizard [data-gzpl-builder-mode="versus"] .gzpl-upload__preview,
    .gzpl-create-page--wizard [data-gzpl-builder-mode="triple-pick"] .gzpl-upload__preview {
        grid-area: preview !important;
        width: 108px !important;
        min-width: 108px !important;
        height: 108px !important;
        min-height: 108px !important;
        max-height: 108px !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 15px !important;
    }

    .gzpl-create-page--wizard [data-gzpl-builder-mode] .gzpl-upload__placeholder {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        gap: 4px !important;
        padding: 7px !important;
    }

    .gzpl-create-page--wizard [data-gzpl-builder-mode] .gzpl-upload__icon {
        width: 34px !important;
        height: 34px !important;
        border-radius: 11px !important;
        font-size: 20px !important;
    }

    .gzpl-create-page--wizard .gzpl-upload__desktop-copy {
        display: none !important;
    }

    .gzpl-create-page--wizard .gzpl-upload__mobile-copy {
        display: inline !important;
        font-size: 12px !important;
    }

    .gzpl-create-page--wizard [data-gzpl-builder-mode] .gzpl-upload__placeholder small {
        font-size: 9px !important;
    }

    .gzpl-create-page--wizard [data-gzpl-builder-mode] .gzpl-upload__actions {
        grid-area: actions !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-self: end !important;
        gap: 7px !important;
    }

    .gzpl-create-page--wizard [data-gzpl-builder-mode] .gzpl-upload__actions .gzpl-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        justify-content: center !important;
        padding: 9px 10px !important;
        font-size: 12px !important;
    }

    .gzpl-create-page--wizard [data-gzpl-builder-mode] .gzpl-upload__meta {
        grid-area: meta !important;
        align-self: start !important;
        gap: 2px !important;
    }

    .gzpl-create-page--wizard [data-gzpl-builder-mode] .gzpl-upload__ratio {
        font-size: 10px !important;
    }

    .gzpl-create-page--wizard [data-gzpl-builder-mode] .gzpl-upload__hint {
        font-size: 10px !important;
        line-height: 1.35 !important;
    }

    /* Triple Pick: a round stays vertical, its 3 cards become a swipe deck. */
    .gzpl-create-page--wizard .gzpl-mobile-swipe-hint {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        margin: -2px 0 9px !important;
        color: rgba(232, 237, 247, .58) !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        letter-spacing: .025em !important;
    }

    .gzpl-create-page--wizard [data-gzpl-triple-round] > .gzpl-builder-card-grid--3 {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 10px !important;
        width: auto !important;
        margin-inline: -7px !important;
        padding: 2px 7px 12px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-inline: contain !important;
        scroll-snap-type: x mandatory !important;
        scroll-padding-inline: 7px !important;
        scrollbar-width: none !important;
        touch-action: pan-x pan-y !important;
    }

    .gzpl-create-page--wizard [data-gzpl-triple-round] > .gzpl-builder-card-grid--3::-webkit-scrollbar {
        display: none !important;
    }

    .gzpl-create-page--wizard [data-gzpl-triple-round] .gzpl-mini-card {
        flex: 0 0 min(84vw, 390px) !important;
        width: min(84vw, 390px) !important;
        min-width: min(84vw, 390px) !important;
        max-width: min(84vw, 390px) !important;
        padding: 13px !important;
        border: 1px solid rgba(255, 255, 255, .09) !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, .028) !important;
        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;
    }

    .gzpl-create-page--wizard .gzpl-mini-card__head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }

    .gzpl-create-page--wizard .gzpl-mini-card__head strong {
        color: #fff !important;
        font-size: 15px !important;
    }

    .gzpl-create-page--wizard .gzpl-mini-card__head .gzpl-drag-handle {
        display: none !important;
    }

    .gzpl-create-page--wizard #gzpl-tier-add-node,
    .gzpl-create-page--wizard #gzpl-triple-add-node,
    .gzpl-create-page--wizard #gzpl-versus-add-node {
        width: 100% !important;
        min-height: 48px !important;
    }

    .gzpl-create-page--wizard .gzpl-wizard-actions {
        bottom: max(5px, env(safe-area-inset-bottom)) !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 7px !important;
        padding: 8px !important;
        border-radius: 17px !important;
    }

    .gzpl-create-page--wizard .gzpl-wizard-quicksave {
        grid-column: 1 / -1 !important;
        min-height: 42px !important;
    }

    .gzpl-create-page--wizard .gzpl-wizard-actions [data-gzpl-wizard-prev],
    .gzpl-create-page--wizard .gzpl-wizard-actions [data-gzpl-wizard-next] {
        min-height: 46px !important;
    }
}

@media (max-width: 360px) {
    .gzpl-create-page--wizard [data-gzpl-builder-mode="tier"] .gzpl-upload,
    .gzpl-create-page--wizard [data-gzpl-builder-mode="versus"] .gzpl-upload,
    .gzpl-create-page--wizard [data-gzpl-builder-mode="triple-pick"] .gzpl-upload {
        grid-template-columns: 92px minmax(0, 1fr) !important;
    }

    .gzpl-create-page--wizard [data-gzpl-builder-mode] .gzpl-upload__preview {
        width: 92px !important;
        min-width: 92px !important;
        height: 92px !important;
        min-height: 92px !important;
        max-height: 92px !important;
    }

    .gzpl-create-page--wizard [data-gzpl-triple-round] .gzpl-mini-card {
        flex-basis: 86vw !important;
        width: 86vw !important;
        min-width: 86vw !important;
        max-width: 86vw !important;
    }
}