/* ============================================================
   GOAT GRAPHICS — CUSTOM STYLES
   A vibrant, consumer-grade design system
   ============================================================ */

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

:root {
    --gg-emerald: #10b981;
    --gg-emerald-dark: #059669;
    --gg-emerald-light: #d1fae5;
    --gg-violet: #7c3aed;
    --gg-violet-light: #ede9fe;
    --gg-slate-900: #0f172a;
    --gg-slate-800: #1e293b;
    --gg-slate-700: #334155;
    --gg-slate-600: #475569;
    --gg-slate-500: #64748b;
    --gg-slate-400: #94a3b8;
    --gg-slate-300: #cbd5e1;
    --gg-slate-200: #e2e8f0;
    --gg-slate-100: #f1f5f9;
    --gg-slate-50: #f8fafc;
    --gg-white: #ffffff;
    --gg-radius: 16px;
    --gg-radius-sm: 10px;
    --gg-radius-xs: 6px;
    --gg-shadow: 0 4px 24px rgba(0,0,0,0.06);
    --gg-shadow-lg: 0 12px 40px rgba(0,0,0,0.10);
    --gg-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --gg-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- USAGE BANNER ---------- */
.usage-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 500;
    transition: var(--gg-transition);
}
.usage-banner.hidden { display: none; }
.usage-banner.warning {
    background: linear-gradient(90deg, #fef3c7, #fde68a);
    color: #92400e;
}
.usage-banner.critical {
    background: linear-gradient(90deg, #fee2e2, #fecaca);
    color: #991b1b;
}
.usage-banner-icon { font-size: 16px; flex-shrink: 0; }
.usage-banner-text { flex: 1; }
.usage-banner-action {
    font-weight: 700;
    text-decoration: underline;
    color: inherit;
    white-space: nowrap;
}
.usage-banner-action + .usage-banner-action {
    margin-left: 4px;
}
.usage-banner-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    padding: 0 4px;
}
.usage-banner-close:hover { opacity: 1; }

/* ---------- UPGRADE / LIMIT MODAL ---------- */
.upgrade-modal-card {
    background: var(--gg-white);
    border-radius: var(--gg-radius);
    padding: 40px 32px 32px;
    max-width: 440px;
    width: 90%;
    text-align: center;
    position: relative;
    box-shadow: var(--gg-shadow-lg);
}
.upgrade-modal-icon { font-size: 48px; margin-bottom: 12px; }
.upgrade-modal-card h3 {
    font-size: 1.25rem;
    margin: 0 0 8px;
    color: var(--gg-slate-900);
}
.upgrade-modal-msg {
    color: var(--gg-slate-600);
    font-size: 0.95rem;
    margin: 0 0 20px;
}
.upgrade-modal-bar {
    height: 8px;
    border-radius: 4px;
    background: var(--gg-slate-200);
    overflow: hidden;
    margin-bottom: 8px;
}
.upgrade-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--gg-emerald), #ef4444);
    transition: width 0.6s ease;
}
.upgrade-modal-detail {
    font-size: 0.8rem;
    color: var(--gg-slate-500);
    margin: 0 0 24px;
}
.upgrade-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.gg-btn-primary {
    display: inline-block;
    background: linear-gradient(135deg, var(--gg-emerald), var(--gg-emerald-dark));
    color: white;
    font-weight: 700;
    padding: 10px 28px;
    border-radius: 8px;
    border: none;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    transition: var(--gg-transition);
}
.gg-btn-primary:hover { filter: brightness(1.08); }
.gg-btn-secondary-outline {
    display: inline-block;
    background: var(--gg-slate-100);
    color: var(--gg-slate-700);
    font-weight: 600;
    padding: 10px 28px;
    border-radius: 8px;
    border: none;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--gg-transition);
}
.gg-btn-secondary-outline:hover { background: var(--gg-slate-200); }

/* ---------- RESET OVERRIDES ---------- */
html, body {
    height: auto !important;
    overflow: auto !important;
    overflow-x: hidden !important;
}
body {
    font-family: var(--gg-font);
    background: var(--gg-slate-50);
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Hide default page content areas from base styles */
.top-menu { display: flex !important; }

/* ---------- HEADER ---------- */
.top-banner {
    background: var(--gg-white);
    border-bottom: 1px solid var(--gg-slate-200);
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
    background: rgba(255,255,255,0.92);
}

.gg-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 20px;
    color: var(--gg-slate-900);
    text-decoration: none;
    margin-right: 32px;
    letter-spacing: -0.5px;
}
.gg-brand-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--gg-emerald), var(--gg-violet));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
}

.top-menu ul {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.top-menu ul li a {
    padding: 8px 16px;
    border-radius: 8px;
    color: var(--gg-slate-600);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: var(--gg-transition);
}
.top-menu ul li a:hover {
    background: var(--gg-slate-100);
    color: var(--gg-slate-900);
}
.top-menu ul li a.nav-active {
    background: var(--gg-emerald-light);
    color: var(--gg-emerald-dark);
}

.user-info {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}
.user-info .user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gg-emerald), var(--gg-violet));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}
.user-info #userEmail {
    font-size: 13px;
    color: var(--gg-slate-500);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Credit badge in header */
.credit-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--gg-slate-50);
    border: 1px solid var(--gg-slate-200);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gg-slate-600);
    transition: var(--gg-transition);
    white-space: nowrap;
}
.credit-badge.warning { border-color: #f59e0b; color: #b45309; background: #fffbeb; }
.credit-badge.critical { border-color: #ef4444; color: #dc2626; background: #fef2f2; }
.credit-badge-icon { font-size: 13px; }
.credit-badge.hidden { display: none; }

.buy-credits-btn {
    border: 1px solid var(--gg-emerald);
    background: var(--gg-white);
    color: var(--gg-emerald-dark);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--gg-transition);
    white-space: nowrap;
}
.buy-credits-btn:hover {
    background: var(--gg-emerald-light);
}
.buy-credits-btn.hidden { display: none; }

.credit-purchase-card {
    background: var(--gg-white);
    border-radius: var(--gg-radius);
    box-shadow: var(--gg-shadow-lg);
    width: min(560px, 92vw);
    padding: 32px;
    position: relative;
}
.credit-purchase-card h3 {
    margin: 0 0 8px;
    color: var(--gg-slate-900);
    font-size: 1.3rem;
}
.credit-purchase-subtitle {
    color: var(--gg-slate-600);
    font-size: 0.92rem;
    margin: 0 0 20px;
    line-height: 1.45;
}
.credit-pack-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}
.credit-pack-card {
    border: 1px solid var(--gg-slate-200);
    border-radius: 8px;
    padding: 16px;
    background: var(--gg-slate-50);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.credit-pack-card strong {
    color: var(--gg-slate-900);
    font-size: 0.98rem;
}
.credit-pack-credits {
    color: var(--gg-emerald-dark);
    font-size: 1.25rem;
    font-weight: 800;
}
.credit-pack-price {
    color: var(--gg-slate-600);
    font-size: 0.9rem;
}
.credit-pack-card button {
    margin-top: auto;
}
.credit-purchase-review.hidden { display: none; }
.credit-purchase-review {
    border: 1px solid var(--gg-slate-200);
    border-radius: 8px;
    background: var(--gg-slate-50);
    padding: 18px;
}
.credit-purchase-review h4 {
    margin: 0 0 14px;
    color: var(--gg-slate-900);
    font-size: 1rem;
}
.credit-summary-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.credit-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--gg-slate-600);
    font-size: 0.92rem;
}
.credit-summary-row strong {
    color: var(--gg-slate-900);
    text-align: right;
}
.credit-summary-row.total {
    border-top: 1px solid var(--gg-slate-200);
    padding-top: 10px;
    font-weight: 800;
}
.credit-summary-row.total strong {
    color: var(--gg-emerald-dark);
}
.credit-review-note {
    margin: 14px 0 0;
    color: var(--gg-slate-600);
    font-size: 0.86rem;
    line-height: 1.45;
}
.credit-review-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}
.credit-purchase-status {
    min-height: 18px;
    margin: 16px 0 0;
    color: var(--gg-slate-600);
    font-size: 0.88rem;
}

.logout-button, .gg-btn-signin {
    background: var(--gg-emerald);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: var(--gg-transition);
}
.logout-button:hover, .gg-btn-signin:hover {
    background: var(--gg-emerald-dark);
    transform: translateY(-1px);
}

/* ---------- HERO ---------- */
#hero {
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    padding: 100px 24px 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(16,185,129,0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 30%, rgba(124,58,237,0.15) 0%, transparent 50%);
    pointer-events: none;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 6px 16px;
    border-radius: 100px;
    color: var(--gg-emerald);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 24px;
    backdrop-filter: blur(8px);
}
.hero-logo {
    width: auto;
    height: 280px;
    max-width: 480px;
    margin-bottom: 32px;
    object-fit: contain;
}
.hero-kicker {
    font-size: clamp(14px, 1.4vw, 18px);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    color: rgba(255,255,255,0.8);
    margin: 0 0 14px;
}
.hero-title {
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 800;
    color: white;
    line-height: 1.1;
    margin: 0 auto 20px;
    max-width: 720px;
    letter-spacing: -1.5px;
}
.hero-title .gradient-text {
    background: linear-gradient(135deg, var(--gg-emerald), #34d399, var(--gg-violet));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero-subtitle {
    font-size: clamp(16px, 2vw, 20px);
    color: rgba(255,255,255,0.6);
    max-width: 560px;
    margin: 0 auto 40px;
    line-height: 1.6;
}
.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--gg-emerald), var(--gg-emerald-dark));
    color: white;
    padding: 16px 36px;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: var(--gg-transition);
    box-shadow: 0 8px 30px rgba(16,185,129,0.3);
}
.hero-cta:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 40px rgba(16,185,129,0.4);
}
.hero-features {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-top: 48px;
    flex-wrap: wrap;
}
.hero-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.5);
    font-size: 14px;
}
.hero-feature-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(16,185,129,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--gg-emerald);
}

/* ---------- HERO PERSONAS ---------- */
.hero-personas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 56px;
    max-width: 1000px;
    width: 100%;
}
.hero-persona-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 28px 24px;
    text-align: left;
    backdrop-filter: blur(8px);
    transition: var(--gg-transition);
}
.hero-persona-card:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(16,185,129,0.25);
    transform: translateY(-3px);
}
.hero-persona-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(16,185,129,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--gg-emerald);
}
.hero-persona-title {
    font-size: 16px;
    font-weight: 700;
    color: white;
    margin: 0 0 8px;
}
.hero-persona-text {
    font-size: 14px;
    color: rgba(255,255,255,0.55);
    line-height: 1.6;
    margin: 0;
}
.hero-persona-designer {
    border-style: dashed;
}
.hero-persona-designer .hero-persona-icon {
    background: rgba(124,58,237,0.15);
    color: var(--gg-violet);
}

@media (max-width: 900px) and (min-width: 601px) {
    .hero-personas { grid-template-columns: repeat(2, 1fr); }
}

.hero-counter {
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.hero-counter-number {
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--gg-emerald), #34d399);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
}
.hero-counter-label {
    font-size: 15px;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
}

/* ---------- APP WORKSPACE ---------- */
#app-workspace {
    display: none;
    padding: 12px 24px;
}
#app-workspace.active {
    display: block;
}

/* History view — hidden by default, shown when toggled */
#history-view {
    display: none;
    padding: 24px;
    width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    min-height: 0;
}
#history-view.active {
    display: block;
}

.projects-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.projects-header h2 {
    margin: 0;
    font-size: 28px;
    color: var(--gg-slate-900);
}
.projects-subtitle {
    margin: 6px 0 0;
    color: var(--gg-slate-500);
    font-size: 14px;
}
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.project-card {
    background: var(--gg-white);
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-sm);
    padding: 18px;
    cursor: pointer;
    transition: var(--gg-transition);
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.project-card:hover {
    border-color: var(--gg-emerald);
    box-shadow: var(--gg-shadow);
    transform: translateY(-1px);
}
.project-card.active {
    border-color: var(--gg-emerald);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.12), var(--gg-shadow);
}
.project-card-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.project-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}
.project-card-title {
    font-weight: 800;
    color: var(--gg-slate-900);
    font-size: 16px;
    line-height: 1.3;
}
.project-card-meta,
.project-card-desc {
    color: var(--gg-slate-500);
    font-size: 13px;
    line-height: 1.45;
    margin-top: 6px;
}
.project-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 18px;
    color: var(--gg-slate-500);
    font-size: 12px;
    font-weight: 700;
}
.project-visibility-pill {
    align-items: center;
    background: var(--gg-slate-100);
    border-radius: 999px;
    color: var(--gg-slate-600);
    display: inline-flex;
    gap: 5px;
    padding: 4px 8px;
    white-space: nowrap;
}
.project-card-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.project-tag {
    background: var(--gg-slate-100);
    color: var(--gg-slate-600);
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
}
.project-detail-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    margin-bottom: 18px;
    background: var(--gg-white);
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-sm);
    padding: 14px;
    box-shadow: var(--gg-shadow);
}
.project-toolbar-main h3,
.project-notes-header h3 {
    margin: 0;
    color: var(--gg-slate-900);
}
.project-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.project-detail-meta span {
    background: var(--gg-slate-100);
    color: var(--gg-slate-600);
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
}
.project-toolbar-actions {
    display: flex;
    position: relative;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}
.project-notes-toggle.active {
    border-color: var(--gg-emerald);
    color: var(--gg-emerald-dark);
}
.project-more-wrap {
    position: relative;
}
.project-more-btn {
    min-width: 44px;
    padding-left: 14px;
    padding-right: 14px;
}
.project-more-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 20;
    min-width: 180px;
    background: var(--gg-white);
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-xs);
    box-shadow: var(--gg-shadow-lg);
    padding: 6px;
}
.project-more-menu button {
    width: 100%;
    border: none;
    background: transparent;
    border-radius: var(--gg-radius-xs);
    color: var(--gg-slate-700);
    cursor: pointer;
    font-family: var(--gg-font);
    font-size: 13px;
    font-weight: 700;
    padding: 9px 10px;
    text-align: left;
}
.project-more-menu button:hover {
    background: var(--gg-slate-50);
    color: var(--gg-emerald-dark);
}
.project-notes-panel {
    grid-column: 1 / -1;
    border-top: 1px solid var(--gg-slate-100);
    padding-top: 16px;
}
.project-notes-panel[hidden],
.project-more-menu[hidden] {
    display: none;
}
.project-notes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.project-notes-panel textarea,
.project-notes-header select {
    width: 100%;
    border: 1.5px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-xs);
    font-family: var(--gg-font);
    color: var(--gg-slate-800);
    background: var(--gg-white);
}
.project-notes-header select { max-width: 180px; padding: 9px 10px; }
.project-notes-panel textarea {
    min-height: 74px;
    resize: vertical;
    padding: 10px 12px;
    box-sizing: border-box;
    margin-bottom: 10px;
}
.project-notes-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}
.project-note-item {
    background: var(--gg-slate-50);
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-xs);
    padding: 10px 12px;
}
.project-note-item strong {
    display: block;
    color: var(--gg-slate-700);
    font-size: 12px;
    margin-bottom: 4px;
}
.project-visibility-pill {
    border-radius: 999px;
    background: var(--gg-slate-100);
    color: var(--gg-slate-600);
    padding: 4px 9px;
}
.projects-empty {
    background: var(--gg-white);
    border: 1px dashed var(--gg-slate-300);
    border-radius: var(--gg-radius-sm);
    padding: 40px 20px;
    text-align: center;
    color: var(--gg-slate-500);
}
.projects-empty h3 {
    margin: 0 0 8px;
    color: var(--gg-slate-800);
}
.projects-empty p { margin: 0 0 20px; }

@media (max-width: 640px) {
    .projects-header {
        flex-direction: column;
        align-items: stretch;
    }
    .projects-header h2 { font-size: 24px; }
    .projects-grid { grid-template-columns: 1fr; }
    .project-detail-panel { grid-template-columns: 1fr; }
}

/* ---------- ACKNOWLEDGEMENTS VIEW ---------- */
#acknowledgements-view {
    display: none;
    padding: 40px 24px;
    max-width: 860px;
    margin: 0 auto;
    min-height: calc(100vh - 64px);
    align-items: center;
    justify-content: center;
}
#acknowledgements-view.active {
    display: flex;
}
.ack-card {
    background: var(--gg-white);
    border-radius: var(--gg-radius);
    box-shadow: var(--gg-shadow);
    padding: 48px 40px;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.ack-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gg-emerald), var(--gg-violet), #f59e0b, #3b82f6, #ef4444);
}
.ack-header {
    text-align: center;
    margin-bottom: 32px;
}
.ack-header h2 {
    font-size: 28px;
    font-weight: 800;
    color: var(--gg-slate-900);
    margin: 0 0 8px;
}
.ack-header .ack-subtitle {
    font-size: 15px;
    color: var(--gg-slate-500);
    font-weight: 500;
}
.ack-image {
    text-align: center;
    margin-bottom: 28px;
}
.ack-image-button {
    display: inline-block;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
    border-radius: var(--gg-radius-sm);
    line-height: 0;
}
.ack-image-button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--gg-emerald) 55%, transparent);
    outline-offset: 4px;
}
.ack-image img {
    width: min(100%, 480px);
    max-width: 480px;
    display: block;
    margin: 0 auto;
    border-radius: var(--gg-radius-sm);
    border: 1px solid var(--gg-slate-200);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ack-image-button:hover img {
    border-color: color-mix(in srgb, var(--gg-emerald) 45%, var(--gg-slate-200));
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.14);
    transform: translateY(-2px);
}
.ack-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, 0.78);
}
.ack-lightbox.open {
    display: flex;
}
.ack-lightbox-panel {
    position: relative;
    width: min(1180px, 100%);
    max-height: calc(100vh - 36px);
    background: var(--gg-white);
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-sm);
    box-shadow: var(--gg-shadow-lg);
    overflow: hidden;
}
.ack-lightbox-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--gg-white);
    color: var(--gg-slate-700);
    box-shadow: var(--gg-shadow);
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
}
.ack-lightbox-close:hover,
.ack-lightbox-close:focus-visible {
    color: var(--gg-emerald-dark);
    outline: 3px solid color-mix(in srgb, var(--gg-emerald) 35%, transparent);
    outline-offset: 2px;
}
.ack-lightbox-body {
    min-height: 0;
    padding: 14px;
    background: var(--gg-slate-50);
}
.ack-lightbox-img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 64px);
    margin: 0 auto;
    display: block;
    object-fit: contain;
    border-radius: var(--gg-radius-xs);
    background: var(--gg-white);
}
.ack-body p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--gg-slate-700);
    margin: 0 0 20px;
}
.ack-body p:last-child {
    margin-bottom: 0;
}
.ack-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin: 28px 0;
}
.ack-logo-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: var(--gg-slate-100);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gg-slate-700);
    border: 1px solid var(--gg-slate-200);
}
.ack-highlight {
    background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(124,58,237,0.08));
    border: 1px solid rgba(16,185,129,0.15);
    border-radius: var(--gg-radius-sm);
    padding: 20px 24px;
    margin: 28px 0;
}
.ack-highlight p {
    margin: 0;
    color: var(--gg-slate-800);
}
.ack-divider {
    height: 1px;
    background: var(--gg-slate-200);
    margin: 28px 0;
}
.ack-footer-note {
    text-align: center;
    padding: 20px 24px;
    background: var(--gg-slate-50);
    border-radius: var(--gg-radius-sm);
    border: 1px solid var(--gg-slate-200);
    margin-top: 28px;
}
.ack-footer-note p {
    font-size: 13px;
    color: var(--gg-slate-500);
    margin: 0;
    font-style: italic;
}
.ack-body a, .ack-highlight a, .ack-footer-note a {
    color: var(--gg-emerald-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
    transition: color 0.2s;
}
.ack-body a:hover, .ack-highlight a:hover, .ack-footer-note a:hover {
    color: var(--gg-emerald);
}

.workspace-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.workspace-header > .daily-inspiration-ticker {
    flex: 1 1 520px;
    min-width: 360px;
    margin-bottom: 0;
}
.workspace-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--gg-slate-900);
    margin: 0;
}
.workspace-header .credits-badge {
    margin-left: auto;
    background: var(--gg-emerald-light);
    color: var(--gg-emerald-dark);
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
}
.getting-started-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-xs);
    background: var(--gg-white);
    color: var(--gg-slate-700);
    font-family: var(--gg-font);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: var(--gg-transition);
}
.getting-started-btn svg {
    width: 18px;
    height: 18px;
    color: var(--gg-slate-600);
}
.getting-started-btn:hover {
    border-color: var(--gg-slate-300);
    background: var(--gg-slate-50);
    color: var(--gg-slate-900);
}

.daily-inspiration-ticker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius);
    background: linear-gradient(120deg, color-mix(in srgb, var(--gg-violet) 10%, var(--gg-white)), color-mix(in srgb, var(--gg-emerald) 8%, var(--gg-white)));
    box-shadow: var(--gg-shadow-lg);
    position: relative;
    overflow: hidden;
}
.daily-inspiration-ticker::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gg-white) 55%, transparent), transparent);
    transform: translateX(-120%);
    animation: dailyTickerSweep 7s linear infinite;
}
.daily-inspiration-ticker.hidden,
.daily-inspiration-card.hidden {
    display: none;
}
.daily-inspiration-backdrop.hidden {
    display: none;
}
.daily-inspiration-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1850;
    background:
        radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--gg-violet) 22%, transparent), transparent 42%),
        radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--gg-emerald) 18%, transparent), transparent 45%),
        color-mix(in srgb, var(--gg-slate-900) 38%, transparent);
    backdrop-filter: blur(4px);
}
body.daily-inspiration-open {
    overflow: hidden;
}
.daily-inspiration-copy {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.daily-inspiration-label {
    flex: 0 0 auto;
    padding: 5px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--gg-violet) 22%, var(--gg-white));
    color: color-mix(in srgb, var(--gg-violet) 75%, var(--gg-slate-900));
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}
.daily-inspiration-headline {
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--gg-slate-900);
    font-family: var(--gg-font);
    font-size: 14px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.daily-inspiration-headline.daily-ticker-flip {
    animation: dailyTickerFlip 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.daily-inspiration-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
}
.daily-inspiration-bonus {
    color: color-mix(in srgb, var(--gg-emerald-dark) 82%, var(--gg-slate-900));
    font-size: 12px;
    font-weight: 900;
    padding: 5px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--gg-emerald) 18%, var(--gg-white));
}
.daily-inspiration-link,
.daily-topic-use {
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-xs);
    background: var(--gg-white);
    color: var(--gg-slate-800);
    font-family: var(--gg-font);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: var(--gg-transition);
}
.daily-inspiration-link {
    padding: 8px 12px;
}
.daily-topic-use {
    padding: 8px 10px;
    align-self: flex-start;
}
.daily-inspiration-link:hover,
.daily-topic-use:hover {
    border-color: var(--gg-emerald);
    color: var(--gg-emerald-dark);
    background: var(--gg-emerald-light);
}
.daily-inspiration-card {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1900;
    width: min(960px, calc(100vw - 56px));
    max-height: min(760px, calc(100vh - 64px));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius);
    background:
        radial-gradient(circle at 14% -8%, color-mix(in srgb, var(--gg-violet) 20%, transparent), transparent 48%),
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--gg-emerald) 16%, transparent), transparent 42%),
        var(--gg-white);
    box-shadow: var(--gg-shadow-lg);
}
.daily-inspiration-card.opening {
    animation: dailyCardExpandFromTicker 360ms cubic-bezier(0.22, 0.9, 0.28, 1);
}
.daily-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.daily-card-kicker {
    margin: 0 0 4px;
    color: color-mix(in srgb, var(--gg-violet) 65%, var(--gg-slate-700));
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}
.daily-card-header h2 {
    margin: 0;
    color: var(--gg-slate-900);
    font-size: 21px;
    font-weight: 900;
}
.daily-card-close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--gg-radius-xs);
    background: var(--gg-slate-100);
    color: var(--gg-slate-500);
    font-size: 20px;
    cursor: pointer;
}
.daily-card-close:hover {
    background: var(--gg-slate-200);
    color: var(--gg-slate-800);
}
.daily-card-subtitle {
    margin: 10px 0 14px;
    color: var(--gg-slate-600);
    font-size: 14px;
    line-height: 1.5;
}
.daily-topic-list {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}
.daily-topic-carousel {
    display: grid;
    gap: 14px;
    min-height: 0;
    height: 100%;
}
.daily-topic-carousel-main {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
    gap: 14px;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
}
.daily-topic-panel,
.daily-topic-facts-panel {
    padding: 16px;
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-sm);
    background: linear-gradient(145deg, color-mix(in srgb, var(--gg-slate-50) 86%, var(--gg-white)), var(--gg-white));
    box-shadow: 0 14px 30px color-mix(in srgb, var(--gg-slate-900) 10%, transparent);
}
.daily-topic-panel h3 {
    margin: 6px 0 8px;
    color: var(--gg-slate-900);
    font-size: 30px;
    line-height: 1.15;
    font-weight: 900;
}
.daily-topic-panel p {
    margin: 0;
    color: var(--gg-slate-600);
    font-size: 14px;
    line-height: 1.62;
}
.daily-topic-facts-title {
    margin: 0 0 8px;
    color: var(--gg-slate-800);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}
.daily-topic-facts,
.daily-topic-sections {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
}
.daily-topic-facts li,
.daily-topic-sections li {
    color: var(--gg-slate-600);
    font-size: 13px;
    line-height: 1.5;
}
.daily-topic-carousel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 12px 14px;
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-sm);
    background: color-mix(in srgb, var(--gg-white) 92%, var(--gg-slate-50));
    box-shadow: 0 -8px 18px color-mix(in srgb, var(--gg-slate-900) 8%, transparent);
}
.daily-topic-carousel-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}
.daily-topic-nav-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--gg-slate-200);
    border-radius: 999px;
    background: var(--gg-white);
    color: var(--gg-slate-700);
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    transition: var(--gg-transition);
}
.daily-topic-nav-btn:hover {
    border-color: var(--gg-emerald);
    color: var(--gg-emerald-dark);
    background: var(--gg-emerald-light);
}
.daily-topic-position {
    color: var(--gg-slate-600);
    font-size: 12px;
    font-weight: 700;
    margin-left: 2px;
}
.daily-topic-dots {
    display: flex;
    align-items: center;
    gap: 6px;
}
.daily-topic-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: none;
    background: var(--gg-slate-300);
    cursor: pointer;
    transition: var(--gg-transition);
}
.daily-topic-dot.active {
    width: 22px;
    background: var(--gg-emerald);
}
.daily-topic-use {
    padding: 9px 14px;
    align-self: auto;
}
.daily-topic-card-counter {
    color: var(--gg-slate-600);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}
.daily-topic-overview {
    margin-top: 8px;
}
.daily-topic-item {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-sm);
    background: linear-gradient(145deg, color-mix(in srgb, var(--gg-slate-50) 86%, var(--gg-white)), var(--gg-white));
    box-shadow: 0 10px 26px color-mix(in srgb, var(--gg-slate-900) 9%, transparent);
    transition: var(--gg-transition);
}
.daily-topic-item:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--gg-violet) 30%, var(--gg-slate-200));
}
.daily-topic-item.selected {
    border-color: color-mix(in srgb, var(--gg-emerald) 45%, var(--gg-violet));
    background: linear-gradient(145deg, color-mix(in srgb, var(--gg-emerald) 12%, var(--gg-white)), color-mix(in srgb, var(--gg-violet) 7%, var(--gg-white)));
    box-shadow: 0 14px 28px color-mix(in srgb, var(--gg-emerald) 20%, transparent);
}
.daily-topic-meta span {
    color: var(--gg-slate-600);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}
.daily-topic-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.daily-topic-meta span {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--gg-slate-200);
    background: color-mix(in srgb, var(--gg-white) 86%, var(--gg-slate-50));
}
.daily-topic-item h3 {
    margin: 0;
    color: var(--gg-slate-900);
    font-size: 15px;
    font-weight: 900;
}
.daily-topic-item p {
    margin: 0;
    color: var(--gg-slate-600);
    font-size: 13px;
    line-height: 1.45;
}
.daily-topic-seed {
    margin: 0;
    color: var(--gg-slate-700);
    font-size: 12px;
    line-height: 1.45;
    border-left: 3px solid color-mix(in srgb, var(--gg-violet) 40%, var(--gg-slate-200));
    padding-left: 10px;
}
.daily-topic-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.daily-topic-tags span {
    font-size: 11px;
    font-weight: 700;
    color: var(--gg-slate-600);
    background: var(--gg-slate-100);
    border: 1px solid var(--gg-slate-200);
    border-radius: 999px;
    padding: 3px 8px;
}

@keyframes dailyTickerFlip {
    0% { transform: translateY(9px) rotateX(22deg); opacity: 0; }
    100% { transform: translateY(0) rotateX(0deg); opacity: 1; }
}

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

@keyframes dailyCardExpandFromTicker {
    0% {
        top: var(--daily-expand-start-y, 120px);
        left: var(--daily-expand-start-x, 50%);
        transform: translate(-50%, -50%) scale(0.44);
        opacity: 0;
    }
    100% {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.workspace-grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    grid-template-rows: auto auto;
    gap: 12px;
}
.source-panel   { grid-column: 1; grid-row: 1; }
.config-panel    { grid-column: 2; grid-row: 1; align-self: start; }
.mobile-tab-bar  { grid-column: 1 / -1; }
.preview-panel   { /* removed from grid */ display: none; }

/* ---------- PANELS (shared) ---------- */
.panel {
    background: var(--gg-white);
    border-radius: var(--gg-radius);
    border: 1px solid var(--gg-slate-200);
    box-shadow: var(--gg-shadow);
    overflow: hidden;
}
.panel-header {
    padding: 10px 16px;
    border-bottom: 1px solid var(--gg-slate-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.panel-header h2 {
    font-size: 15px;
    font-weight: 700;
    color: var(--gg-slate-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.panel-header .panel-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.panel-body {
    padding: 20px;
}

/* ---------- LEFT PANEL — SOURCE INPUT ---------- */
.source-panel .panel-icon {
    background: var(--gg-violet-light);
}

/* Quill editor overrides */
#editor-container {
    min-height: 180px;
    flex: 1;
    overflow-y: auto;
    border: none !important;
    font-family: var(--gg-font);
    font-size: 14px;
    line-height: 1.7;
    color: var(--gg-slate-800);
}
.ql-toolbar.ql-snow {
    border: none !important;
    border-bottom: 1px solid var(--gg-slate-100) !important;
    padding: 8px 12px !important;
    background: var(--gg-slate-50);
}
.ql-container.ql-snow {
    border: none !important;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.ql-editor {
    padding: 16px 20px !important;
}
.ql-editor.ql-blank::before {
    color: var(--gg-slate-400);
    font-style: normal;
}

.source-panel {
    position: relative;
    height: 75vh;
    display: flex;
    flex-direction: column;
}
.source-panel .panel-body {
    padding: 0;
    padding-bottom: 56px; /* space for pinned generate btn */
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.source-meta-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    padding: 0 16px;
    margin-top: 8px;
    box-sizing: border-box;
}
.editor-wrapper {
    border: 2px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-sm);
    overflow: hidden;
    transition: var(--gg-transition);
    margin: 10px 16px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.editor-wrapper:focus-within {
    border-color: var(--gg-emerald);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.1);
}

.footer-input-group {
    padding: 0;
    margin-top: 0;
}
.footer-input-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--gg-slate-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.footer-input-group input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-xs);
    font-size: 14px;
    color: var(--gg-slate-800);
    transition: var(--gg-transition);
    box-sizing: border-box;
    font-family: var(--gg-font);
}
.footer-input-group input:focus {
    outline: none;
    border-color: var(--gg-emerald);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.1);
}

.guide-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1250;
    background:
        radial-gradient(circle at 16% 10%, color-mix(in srgb, var(--gg-violet) 20%, transparent), transparent 42%),
        radial-gradient(circle at 86% 6%, color-mix(in srgb, var(--gg-emerald) 16%, transparent), transparent 45%),
        color-mix(in srgb, var(--gg-slate-900) 46%, transparent);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.guide-modal-backdrop.opening {
    animation: guideModalBackdropIn 240ms ease-out;
}
.guide-modal {
    width: min(1180px, 100%);
    height: min(90vh, 900px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% -8%, color-mix(in srgb, var(--gg-violet) 18%, transparent), transparent 48%),
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--gg-emerald) 14%, transparent), transparent 44%),
        var(--gg-white);
    border: 1px solid color-mix(in srgb, var(--gg-slate-200) 86%, var(--gg-white));
    border-radius: var(--gg-radius-sm);
    box-shadow: 0 26px 64px color-mix(in srgb, var(--gg-slate-900) 24%, transparent);
}
.guide-modal.opening {
    animation: guideModalExpandIn 360ms cubic-bezier(0.22, 0.9, 0.28, 1);
}
.guide-modal-body {
    overflow-y: auto;
}
.guide-modal-header,
.guide-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid color-mix(in srgb, var(--gg-slate-200) 60%, var(--gg-white));
}
.guide-modal-footer {
    border-bottom: none;
    border-top: 1px solid color-mix(in srgb, var(--gg-slate-200) 60%, var(--gg-white));
    justify-content: flex-end;
    background: color-mix(in srgb, var(--gg-white) 92%, var(--gg-slate-50));
}
.guide-modal-header {
    background: linear-gradient(120deg, color-mix(in srgb, var(--gg-violet) 10%, var(--gg-white)), color-mix(in srgb, var(--gg-emerald) 9%, var(--gg-white)));
}
.guide-modal-header h2 {
    margin: 0;
    color: var(--gg-slate-900);
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -0.01em;
}
.guide-modal-body {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 14px;
    padding: 16px 20px 18px;
    /* height / overflow set on .guide-modal via grid row */
}
.guide-step {
    border: 1px solid color-mix(in srgb, var(--gg-slate-200) 75%, var(--gg-white));
    border-radius: var(--gg-radius-sm);
    background: color-mix(in srgb, var(--gg-white) 94%, var(--gg-slate-50));
    box-shadow: 0 12px 28px color-mix(in srgb, var(--gg-slate-900) 7%, transparent);
    padding: 12px;
}
.guide-step:first-child {
    grid-row: span 2;
    background: linear-gradient(145deg, color-mix(in srgb, var(--gg-violet) 7%, var(--gg-white)), color-mix(in srgb, var(--gg-emerald) 7%, var(--gg-white)));
}
.guide-step-label {
    color: var(--gg-slate-500);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}
.guide-step-helper {
    margin: -2px 0 10px;
    color: var(--gg-slate-600);
    font-size: 12px;
    line-height: 1.5;
}
.guide-audience-tabs {
    display: grid;
    gap: 8px;
}
.guide-audience-tab,
.guide-template-card {
    border: 1px solid var(--gg-slate-200);
    background: var(--gg-white);
    color: var(--gg-slate-700);
    border-radius: var(--gg-radius-xs);
    cursor: pointer;
    text-align: left;
    font-family: var(--gg-font);
    transition: var(--gg-transition);
}
.guide-audience-tab {
    padding: 11px 13px;
    font-weight: 800;
    border-radius: 10px;
}
.guide-audience-tab.active,
.guide-template-card.active,
.guide-audience-tab:hover,
.guide-template-card:hover {
    border-color: var(--gg-emerald);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gg-emerald) 22%, transparent);
    transform: translateY(-1px);
}
.guide-template-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.guide-template-card {
    padding: 12px;
    border-radius: 10px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--gg-slate-50) 84%, var(--gg-white)), var(--gg-white));
}
.guide-template-card strong {
    display: block;
    color: var(--gg-slate-900);
    font-size: 14px;
    margin-bottom: 4px;
}
.guide-template-card span {
    color: var(--gg-slate-500);
    font-size: 12px;
    line-height: 1.35;
}
.guide-preview {
    background: linear-gradient(145deg, color-mix(in srgb, var(--gg-slate-50) 86%, var(--gg-white)), var(--gg-white));
    border: 1px solid var(--gg-slate-200);
    border-radius: 10px;
    padding: 14px;
    color: var(--gg-slate-600);
    font-size: 12px;
    line-height: 1.45;
}
.guide-sample-preview {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--gg-slate-200);
}
.guide-sample-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    color: var(--gg-slate-700);
}
.guide-sample-header span {
    color: var(--gg-slate-500);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.guide-sample-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.guide-sample-card {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--gg-slate-200);
    border-radius: 10px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--gg-slate-50) 86%, var(--gg-white)), var(--gg-white));
    color: var(--gg-slate-700);
    text-align: left;
    font-family: var(--gg-font);
    transition: var(--gg-transition);
}
.guide-sample-card:hover,
.guide-sample-card.active {
    border-color: var(--gg-emerald);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gg-emerald) 20%, transparent);
    transform: translateY(-1px);
}
.guide-sample-select {
    display: grid;
    gap: 8px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
    font-family: var(--gg-font);
}
.guide-sample-thumb {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--gg-radius-xs);
    background: var(--gg-slate-100);
}
.guide-sample-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.guide-sample-meta {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.guide-sample-meta strong,
.guide-sample-meta small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.guide-sample-meta strong {
    color: var(--gg-slate-900);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.guide-sample-timing {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    color: var(--gg-slate-500);
    background: var(--gg-slate-100);
    border-radius: 3px;
    padding: 1px 4px;
    letter-spacing: 0.02em;
}
.guide-sample-meta small {
    color: var(--gg-slate-500);
    font-size: 10px;
}
.guide-sample-zoom {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-xs);
    background: var(--gg-slate-50);
    color: var(--gg-slate-700);
    cursor: pointer;
    font-family: var(--gg-font);
    font-size: 11px;
    font-weight: 800;
    transition: var(--gg-transition);
}
.guide-sample-zoom:hover {
    border-color: var(--gg-emerald);
    color: var(--gg-emerald-dark);
    background: var(--gg-white);
}
.guide-sample-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, 0.72);
}
.guide-sample-lightbox.open {
    display: flex;
}

@keyframes guideModalBackdropIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes guideModalExpandIn {
    0% {
        transform: translate(var(--guide-expand-x, 0px), var(--guide-expand-y, -40px)) scale(0.45);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
}
.guide-sample-lightbox-panel {
    width: min(1120px, 100%);
    max-height: calc(100vh - 36px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background: var(--gg-white);
    border-radius: var(--gg-radius-sm);
    box-shadow: var(--gg-shadow-lg);
    overflow: hidden;
}
.guide-sample-lightbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--gg-slate-100);
}
.guide-sample-lightbox-header h3 {
    margin: 0;
    color: var(--gg-slate-900);
    font-size: 18px;
}
.guide-sample-lightbox-header p {
    margin: 4px 0 0;
    color: var(--gg-slate-500);
    font-size: 12px;
}
.guide-sample-lightbox-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--gg-slate-100);
    color: var(--gg-slate-700);
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
}
.guide-sample-lightbox-body {
    min-height: 0;
    padding: 14px;
    background: var(--gg-slate-50);
}
.guide-sample-lightbox-body img {
    width: 100%;
    height: 100%;
    max-height: calc(100vh - 150px);
    object-fit: contain;
    display: block;
    border-radius: var(--gg-radius-xs);
    background: var(--gg-white);
}
@media (max-width: 760px) {
    .guide-modal-body { grid-template-columns: 1fr; }
    .guide-step:first-child { grid-row: auto; }
    .guide-template-grid { grid-template-columns: 1fr; }
    .guide-sample-grid { grid-template-columns: 1fr; }
}
.project-picker-group {
    padding: 0;
    margin-top: 0;
    box-sizing: border-box;
}
.project-picker-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--gg-slate-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.project-picker-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}
.project-picker-row select {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-xs);
    background: var(--gg-white);
    color: var(--gg-slate-800);
    font-size: 14px;
    font-family: var(--gg-font);
    box-sizing: border-box;
    transition: var(--gg-transition);
}
.project-picker-row select:focus {
    outline: none;
    border-color: var(--gg-emerald);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.1);
}
.project-mini-btn {
    border: 1px solid var(--gg-slate-200);
    background: var(--gg-slate-100);
    color: var(--gg-slate-700);
    border-radius: var(--gg-radius-xs);
    padding: 0 14px;
    min-height: 42px;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--gg-font);
    box-sizing: border-box;
    transition: var(--gg-transition);
}
.project-mini-btn:hover {
    border-color: var(--gg-emerald);
    color: var(--gg-emerald);
}

.learning-context-group {
    margin: 10px 16px 0;
    border: 1.5px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-sm);
    padding: 12px;
    background: var(--gg-slate-50);
}
.learning-context-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--gg-slate-700);
    font-weight: 800;
    font-size: 13px;
    margin-bottom: 10px;
}
.learning-context-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.learning-context-group input,
.learning-context-group textarea {
    width: 100%;
    border: 1.5px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-xs);
    padding: 9px 10px;
    font-family: var(--gg-font);
    font-size: 13px;
    box-sizing: border-box;
    color: var(--gg-slate-800);
    background: var(--gg-white);
}
.learning-context-group textarea {
    margin-top: 8px;
    resize: vertical;
    min-height: 60px;
}
.learning-context-group input:focus,
.learning-context-group textarea:focus {
    outline: none;
    border-color: var(--gg-emerald);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.1);
}

.project-modal-backdrop,
.project-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.44);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.project-modal {
    width: min(820px, 100%);
    max-height: calc(100vh - 36px);
    overflow: auto;
    background: var(--gg-white);
    border-radius: var(--gg-radius-sm);
    box-shadow: var(--gg-shadow-lg);
}
.project-modal-header,
.project-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--gg-slate-100);
}
.project-modal-footer {
    border-bottom: none;
    border-top: 1px solid var(--gg-slate-100);
    justify-content: flex-end;
}
.project-modal-header h2 { margin: 0; color: var(--gg-slate-900); }
.project-modal-close {
    border: none;
    background: transparent;
    font-size: 26px;
    cursor: pointer;
    color: var(--gg-slate-500);
}
.project-modal-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 18px;
}
.project-modal-body label {
    display: grid;
    gap: 6px;
    color: var(--gg-slate-600);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.project-modal-body input,
.project-modal-body select,
.project-modal-body textarea {
    border: 1.5px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-xs);
    padding: 10px 12px;
    font-family: var(--gg-font);
    font-size: 14px;
    color: var(--gg-slate-800);
    background: var(--gg-white);
    text-transform: none;
    letter-spacing: 0;
}
.project-modal-wide { grid-column: 1 / -1; }
@media (max-width: 640px) {
    .learning-context-grid,
    .project-modal-body { grid-template-columns: 1fr; }
}

/* Custom instructions accordion */
.style-options-group {
    margin: 8px 16px 4px;
    border: 1.5px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-sm);
    overflow: hidden;
}
.style-options-header {
    padding: 8px 14px;
    background: var(--gg-slate-50, #f8fafc);
    border-bottom: 1px solid var(--gg-slate-200);
}
.style-options-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gg-slate-400);
}
.style-options-body {
    padding: 8px 0 4px;
}
.style-options-group .style-chooser-row {
    padding: 4px 14px 6px;
}
.style-options-group .custom-instructions-toggle {
    padding: 6px 14px;
}
.style-options-group .custom-instructions-body {
    padding: 0 14px;
}
.style-options-group .custom-instructions-body.open {
    padding: 0 14px 8px;
}
.style-options-disclaimer {
    margin: 4px 14px 6px;
    font-size: 11px;
    color: var(--gg-slate-400);
    line-height: 1.4;
}
.custom-instructions-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--gg-slate-500);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 16px;
    width: 100%;
    text-align: left;
    transition: var(--gg-transition);
}
.custom-instructions-toggle:hover {
    color: var(--gg-slate-700);
}
.custom-instructions-toggle .chevron {
    transition: var(--gg-transition);
    font-size: 10px;
}
.custom-instructions-toggle.open .chevron {
    transform: rotate(90deg);
}
.custom-instructions-body {
    display: none;
    padding: 0 20px;
    position: relative;
}
.custom-instructions-body.open {
    display: block;
    padding-bottom: 8px;
}

/* ── Style-analyze loading overlay ── */
.style-analyze-overlay {
    position: absolute;
    inset: 0 20px 8px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--gg-slate-50, #f8fafc);
    border: 2px solid var(--gg-emerald);
    border-radius: var(--gg-radius-xs);
    z-index: 2;
}
.style-analyze-overlay.hidden { display: none; }
.style-analyze-spinner {
    width: 18px; height: 18px;
    border: 2.5px solid var(--gg-slate-200);
    border-top-color: var(--gg-emerald);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.style-analyze-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--gg-slate-500);
}

.custom-instructions-body textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px 14px;
    border: 2px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-xs);
    font-size: 13px;
    font-family: var(--gg-font);
    color: var(--gg-slate-700);
    resize: vertical;
    transition: var(--gg-transition);
    box-sizing: border-box;
}
.custom-instructions-body textarea:focus {
    outline: none;
    border-color: var(--gg-emerald);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.1);
}

.generate-btn-wrap {
    padding: 20px;
}
.generate-btn {
    width: auto;
    padding: 12px 28px;
    background: linear-gradient(135deg, var(--gg-emerald), var(--gg-emerald-dark));
    color: white;
    border: none;
    border-radius: var(--gg-radius-sm);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--gg-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(16,185,129,0.25);
    font-family: var(--gg-font);
}
.generate-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(16,185,129,0.35);
}
.generate-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.generate-btn .spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.generate-btn.loading .spinner { display: block; }
.generate-btn.loading .btn-text { display: none; }
.generate-btn.loading .btn-loading-text { display: inline; }
.btn-loading-text { display: none; }

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

/* ---------- PREVIEW MODAL ---------- */
.preview-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.6);
    backdrop-filter: blur(8px);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.preview-modal-overlay.hidden { display: none; }
.preview-modal {
    background: var(--gg-white);
    border-radius: var(--gg-radius);
    max-width: min(1120px, calc(100vw - 32px));
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--gg-shadow-lg);
    position: relative;
}
.preview-modal .panel-header {
    position: sticky;
    top: 0;
    background: var(--gg-white);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--gg-slate-200);
}
.preview-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--gg-slate-200);
    background: var(--gg-white);
    color: var(--gg-slate-500);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--gg-transition);
}
.preview-modal-close:hover {
    background: var(--gg-slate-100);
    color: var(--gg-slate-900);
}
.preview-modal .panel-body {
    padding: 0;
}
.preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    color: var(--gg-slate-400);
    text-align: center;
    padding: 40px;
}
.preview-placeholder-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: var(--gg-slate-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    margin-bottom: 20px;
}
.preview-placeholder h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--gg-slate-500);
    margin: 0 0 8px;
}
.preview-placeholder p {
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
}

/* Progress state */
.progress-container {
    display: none;
    padding: 40px;
    text-align: center;
}
.progress-container.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}
.progress-animation {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: conic-gradient(var(--gg-emerald), var(--gg-violet), var(--gg-emerald));
    display: flex;
    align-items: center;
    justify-content: center;
    animation: progressSpin 2s linear infinite;
    margin-bottom: 24px;
}
.progress-animation-inner {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--gg-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}
@keyframes progressSpin {
    to { transform: rotate(360deg); }
}
.progress-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--gg-slate-700);
    margin-bottom: 8px;
}
.progress-subtext {
    font-size: 13px;
    color: var(--gg-slate-400);
}

/* Result state */
.result-container {
    display: none;
    padding: 20px;
}
.result-container.active { display: block; }
.result-image-wrap {
    position: relative;
    border-radius: var(--gg-radius-sm);
    overflow: hidden;
    background: var(--gg-slate-100);
}
.result-image-wrap img {
    width: 100%;
    display: block;
    border-radius: var(--gg-radius-sm);
}
#resultSvgContainer {
    position: relative;
}
.result-zoom-btn {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--gg-slate-900) 18%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--gg-white) 92%, transparent);
    color: var(--gg-slate-800);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--gg-slate-900) 14%, transparent);
    cursor: pointer;
    z-index: 3;
    transition: var(--gg-transition);
}
.result-zoom-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.result-zoom-btn:hover {
    background: var(--gg-white);
    color: var(--gg-emerald-dark);
    border-color: color-mix(in srgb, var(--gg-emerald) 48%, var(--gg-slate-200));
}
.result-image-wrap:hover .result-zoom-btn,
#resultSvgContainer:hover .result-zoom-btn,
.result-zoom-btn:focus-visible,
.deathmatch-media:hover .result-zoom-btn {
    display: inline-flex !important;
}
.result-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.result-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: var(--gg-radius-xs);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--gg-transition);
    text-decoration: none;
    border: none;
    font-family: var(--gg-font);
}
.result-action-btn.primary {
    background: var(--gg-emerald);
    color: white;
}
.result-action-btn.primary:hover {
    background: var(--gg-emerald-dark);
}
.result-action-btn.secondary {
    background: var(--gg-slate-100);
    color: var(--gg-slate-700);
    border: 1px solid var(--gg-slate-200);
}
.result-action-btn.secondary:hover {
    background: var(--gg-slate-200);
}
.result-action-btn.published {
    background: transparent;
    color: var(--gg-slate-500);
    border-color: var(--gg-slate-200);
}

/* Deathmatch state */
.deathmatch-container {
    display: none;
    padding: 20px;
}
.deathmatch-container.active {
    display: block;
}
.deathmatch-header {
    margin-bottom: 16px;
}
.deathmatch-header h3 {
    margin: 0 0 4px;
    color: var(--gg-slate-900);
    font-size: 18px;
}
.deathmatch-header p {
    margin: 0;
    color: var(--gg-slate-500);
    font-size: 13px;
}
.deathmatch-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.deathmatch-card {
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-sm);
    background: var(--gg-white);
    overflow: hidden;
    min-width: 0;
}
.deathmatch-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--gg-slate-100);
}
.deathmatch-card-head strong {
    color: var(--gg-slate-900);
    font-size: 13px;
}
.deathmatch-status-pill {
    flex-shrink: 0;
    border-radius: 999px;
    padding: 3px 8px;
    background: var(--gg-slate-100);
    color: var(--gg-slate-600);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}
.deathmatch-card.is-completed .deathmatch-status-pill {
    background: var(--gg-emerald-light);
    color: var(--gg-emerald-dark);
}
.deathmatch-card.is-failed .deathmatch-status-pill {
    background: #fee2e2;
    color: #991b1b;
}
.deathmatch-media {
    position: relative;
    min-height: 260px;
    background: var(--gg-slate-100);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.deathmatch-placeholder {
    padding: 24px 18px;
    text-align: center;
    color: var(--gg-slate-500);
}
.deathmatch-spinner {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 4px solid var(--gg-slate-200);
    border-top-color: var(--gg-emerald);
    animation: gg-spin 0.9s linear infinite;
    margin: 0 auto 14px;
}
.deathmatch-progress-text {
    color: var(--gg-slate-700);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}
.deathmatch-progress-subtext {
    margin-top: 6px;
    color: var(--gg-slate-400);
    font-size: 12px;
    line-height: 1.35;
}
.deathmatch-image,
.deathmatch-svg-preview svg {
    width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: contain;
    display: block;
    background: var(--gg-white);
}
.deathmatch-svg-preview {
    width: 100%;
    height: 100%;
    min-height: 260px;
    background: var(--gg-white);
}
.deathmatch-zoom-btn {
    display: inline-flex;
}
.deathmatch-actions {
    padding: 10px 12px 12px;
}
.deathmatch-actions .result-action-btn {
    width: 100%;
    justify-content: center;
}
.deathmatch-error-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    background: #fee2e2;
    color: #991b1b;
    font-weight: 900;
}

.gg-fullsize-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: color-mix(in srgb, var(--gg-slate-900) 78%, transparent);
}
.gg-fullsize-lightbox.hidden { display: none; }
.gg-fullsize-panel {
    position: relative;
    width: min(1280px, 100%);
    height: min(90vh, 920px);
    background: var(--gg-white);
    border-radius: var(--gg-radius-sm);
    box-shadow: var(--gg-shadow-lg);
    padding: 12px;
}
.gg-fullsize-panel img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: var(--gg-slate-50);
    border-radius: var(--gg-radius-xs);
}
.gg-fullsize-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    border: 1px solid var(--gg-slate-200);
    border-radius: 8px;
    background: var(--gg-white);
    color: var(--gg-slate-700);
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    z-index: 2;
}

@media (max-width: 880px) {
    .deathmatch-grid {
        grid-template-columns: 1fr;
    }
    .deathmatch-media {
        min-height: 220px;
    }
}
.result-action-btn.published:hover {
    background: var(--gg-slate-100);
}

/* Error state */
.error-container {
    display: none;
    padding: 40px;
    text-align: center;
}
.error-container.active { display: block; }
.error-container .error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}
.error-container h3 {
    color: #ef4444;
    margin: 0 0 8px;
}
.error-container p {
    color: var(--gg-slate-500);
    font-size: 14px;
}
.error-container button {
    margin-top: 16px;
    background: var(--gg-slate-100);
    border: 1px solid var(--gg-slate-200);
    padding: 10px 20px;
    border-radius: var(--gg-radius-xs);
    cursor: pointer;
    font-weight: 600;
    font-family: var(--gg-font);
    transition: var(--gg-transition);
}
.error-container button:hover {
    background: var(--gg-slate-200);
}

/* ---------- SETTINGS PANEL (sidebar) ---------- */
.config-panel {
    position: sticky;
    top: 88px;
    height: 75vh;
    max-width: 420px;
    overflow-y: auto;
    background: var(--gg-white);
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius);
    box-shadow: none;
}
.config-panel .panel-icon {
    background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(124,58,237,0.15));
}
.config-panel .panel-header {
    background: transparent;
    border-bottom: 1px solid var(--gg-slate-200);
}
.config-panel .panel-body {
    padding: 0;
}

.config-section {
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--gg-slate-100);
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}
.config-section:last-child { border-bottom: none; }
.config-section-label {
    display: flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--gg-slate-400);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}

/* Segmented control (pill toggles) */
.seg-control {
    display: flex;
    background: var(--gg-slate-100);
    border-radius: 8px;
    padding: 2px;
    position: relative;
}
.seg-control .seg-option {
    flex: 1;
    padding: 6px 4px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--gg-slate-500);
    cursor: pointer;
    border-radius: 6px;
    transition: var(--gg-transition);
    position: relative;
    z-index: 1;
    user-select: none;
    border: none;
    background: none;
    font-family: var(--gg-font);
}
.seg-control .seg-option:hover {
    color: var(--gg-slate-700);
}
.seg-control .seg-option.active {
    background: var(--gg-white);
    color: var(--gg-slate-900);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* Canvas shape preset dropdown */
.size-preset-select {
    width: 100%;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--gg-slate-200);
    background: var(--gg-slate-100);
    color: var(--gg-slate-800);
    font-size: 12px;
    font-weight: 600;
    font-family: var(--gg-font);
    cursor: pointer;
    appearance: auto;
    line-height: 1.4;
}
.size-preset-select:focus {
    outline: none;
    border-color: var(--gg-emerald);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gg-emerald) 15%, transparent);
}
.size-preset-select option, .size-preset-select optgroup {
    font-family: var(--gg-font);
    font-size: 12px;
}

.canvas-shape-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid var(--gg-slate-200);
    border-radius: 8px;
    background: var(--gg-white);
}
.canvas-shape-svg {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
}
.canvas-shape-svg rect {
    fill: color-mix(in srgb, var(--gg-emerald) 12%, var(--gg-white));
    stroke: var(--gg-emerald);
    stroke-width: 2;
}
.canvas-shape-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.canvas-shape-meta span:first-child {
    font-size: 12px;
    font-weight: 700;
    color: var(--gg-slate-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.canvas-shape-meta span:last-child {
    font-size: 11px;
    font-weight: 600;
    color: var(--gg-slate-400);
}

/* Output resolution — pro-gated control */
.quality-cost-note {
    font-size: 9px;
    font-weight: 500;
    color: var(--gg-slate-400);
    margin-left: 3px;
    vertical-align: middle;
    opacity: 0.8;
}
.config-section-provider-note {
    font-size: 10px;
    font-weight: 500;
    color: var(--gg-slate-400);
    background: color-mix(in srgb, var(--gg-slate-400) 12%, transparent);
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: .02em;
}
.quality-pro-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .03em;
    background: var(--gg-emerald);
    color: #fff;
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 4px;
    vertical-align: middle;
    line-height: 1.5;
}
.seg-option.quality-locked {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
.quality-locked-hint {
    font-size: 11px;
    color: var(--gg-slate-400);
    margin-top: 6px;
}
.quality-locked-hint a {
    color: var(--gg-emerald);
    text-decoration: underline;
}

.provider-speed-scale {
    margin-top: 6px;
}
.provider-speed-scale-label {
    font-size: 11px;
    color: var(--gg-slate-500);
    margin-bottom: 4px;
}
.provider-speed-track {
    position: relative;
    padding: 2px 2px 0;
}
.provider-speed-track::before {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    top: 8px;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--gg-emerald) 58%, var(--gg-white)),
        color-mix(in srgb, var(--gg-slate-300) 72%, var(--gg-white)),
        color-mix(in srgb, var(--gg-slate-500) 78%, var(--gg-white))
    );
}
.provider-speed-points {
    position: relative;
    display: flex;
    justify-content: space-between;
}
.provider-speed-point {
    width: 33.333%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.provider-speed-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--gg-white);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--gg-slate-900) 16%, transparent);
    margin-top: 3px;
}
.provider-speed-point.is-fast .provider-speed-dot {
    background: color-mix(in srgb, var(--gg-emerald) 70%, var(--gg-white));
}
.provider-speed-point.is-medium .provider-speed-dot {
    background: color-mix(in srgb, var(--gg-slate-300) 82%, var(--gg-white));
}
.provider-speed-point.is-slow .provider-speed-dot {
    background: color-mix(in srgb, var(--gg-slate-500) 82%, var(--gg-white));
}
.provider-speed-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--gg-slate-600);
    line-height: 1;
}

/* Visual card selectors */
.card-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.card-option {
    padding: 10px 8px;
    border: 2px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-sm);
    text-align: center;
    cursor: pointer;
    transition: var(--gg-transition);
    background: var(--gg-white);
}
.card-option:hover {
    border-color: var(--gg-slate-300);
    background: var(--gg-slate-50);
}
.card-option.active {
    border-color: var(--gg-emerald);
    background: rgba(16,185,129,0.04);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.08);
}
.card-option.active .card-option-label {
    color: var(--gg-slate-700);
    font-weight: 600;
}
.card-option.active .card-option-icon {
    transform: none;
}
.card-option-icon {
    font-size: 18px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-option-icon svg {
    width: 26px;
    height: 26px;
    color: var(--gg-slate-400);
    transition: color 0.2s;
}
.card-option.active .card-option-icon svg {
    color: var(--gg-emerald);
}
.card-option:hover .card-option-icon svg {
    color: var(--gg-emerald-dark);
}
.card-option-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--gg-slate-700);
}

/* Color swatch buttons */
.swatch-group {
    display: flex;
    gap: 10px;
}
.swatch-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--gg-radius-sm);
    border: 2px solid transparent;
    transition: var(--gg-transition);
    background: none;
    font-family: var(--gg-font);
}
.swatch-option:hover { background: var(--gg-slate-50); }
.swatch-option.active {
    border-color: var(--gg-emerald);
    background: rgba(16,185,129,0.04);
}
.swatch-colors {
    display: flex;
    gap: 3px;
}
.swatch-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}
.swatch-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--gg-slate-600);
}

/* Brand Kit Accordion */
.brand-kit-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--gg-font);
}
.brand-kit-body {
    display: none;
    margin-top: 12px;
}
.brand-kit-body.open { display: block; }

.brand-field {
    margin-bottom: 14px;
}
.brand-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--gg-slate-500);
    margin-bottom: 5px;
}
.brand-field input[type="text"] {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-xs);
    font-size: 13px;
    font-family: var(--gg-font);
    color: var(--gg-slate-800);
    box-sizing: border-box;
    transition: var(--gg-transition);
}
.brand-field input[type="text"]:focus {
    outline: none;
    border-color: var(--gg-emerald);
}
.color-pickers {
    display: flex;
    gap: 10px;
}
.color-picker-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.color-picker-group label {
    font-size: 10px;
    font-weight: 600;
    color: var(--gg-slate-500);
    margin: 0;
}
.color-picker-group input[type="color"] {
    width: 36px;
    height: 36px;
    border: 2px solid var(--gg-slate-200);
    border-radius: 8px;
    cursor: pointer;
    padding: 2px;
    background: var(--gg-white);
}

.logo-upload-area {
    border: 2px dashed var(--gg-slate-200);
    border-radius: var(--gg-radius-xs);
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: var(--gg-transition);
    position: relative;
}
.logo-upload-area:hover {
    border-color: var(--gg-emerald);
    background: rgba(16,185,129,0.02);
}
.logo-upload-area input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.logo-upload-area .upload-icon {
    font-size: 24px;
    margin-bottom: 4px;
}
.logo-upload-area .upload-text {
    font-size: 12px;
    color: var(--gg-slate-400);
}
.logo-preview {
    display: none;
    margin-top: 8px;
}
.logo-preview img {
    max-width: 80px;
    max-height: 40px;
    object-fit: contain;
}
.logo-preview .remove-logo {
    font-size: 11px;
    color: #ef4444;
    cursor: pointer;
    margin-left: 8px;
    border: none;
    background: none;
    font-weight: 600;
    font-family: var(--gg-font);
}

/* ---------- LIBRARY ---------- */
#history-section {
    margin-top: 32px;
}
.history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.history-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--gg-slate-900);
    margin: 0;
}
/* ─── Library Filters ─────────────────────────────────── */
.history-controls {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    background: var(--gg-white);
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-sm);
    box-shadow: var(--gg-shadow);
    margin-bottom: 20px;
    padding: 12px;
}
.history-filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.history-filter-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--gg-slate-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.history-publish-pills,
.history-footer-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.history-pill {
    padding: 5px 14px;
    border-radius: 100px;
    border: 1px solid var(--gg-slate-200);
    background: var(--gg-white);
    color: var(--gg-slate-500);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--gg-font);
    transition: var(--gg-transition);
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.history-pill:hover {
    border-color: var(--gg-emerald);
    color: var(--gg-emerald);
}
.history-pill.active {
    background: var(--gg-emerald);
    color: white;
    border-color: var(--gg-emerald);
}
.history-pill .pill-count {
    margin-left: 4px;
    opacity: 0.75;
    font-weight: 500;
}
.library-layout {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.library-folder-panel {
    position: sticky;
    top: 88px;
    background: var(--gg-white);
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-sm);
    box-shadow: var(--gg-shadow);
    padding: 14px;
    max-height: calc(100vh - 120px);
    overflow: auto;
}
.library-folder-header {
    color: var(--gg-slate-500);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.library-folder-list {
    display: grid;
    gap: 4px;
}
.library-folder-item {
    --folder-accent: var(--gg-emerald);
    width: 100%;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--gg-slate-700);
    border-radius: var(--gg-radius-xs);
    cursor: pointer;
    font-family: var(--gg-font);
    font-size: 13px;
    font-weight: 700;
    min-height: 38px;
    padding: 7px 9px;
    text-align: left;
    transition: var(--gg-transition);
}
.library-folder-item:hover {
    background: var(--gg-slate-50);
    border-color: var(--gg-slate-200);
}
.is-dragging-design .library-folder-item[data-drop-enabled="true"] {
    border-color: color-mix(in srgb, var(--folder-accent) 45%, var(--gg-slate-200));
    background: color-mix(in srgb, var(--folder-accent) 8%, var(--gg-white));
}
.library-folder-item.drag-over {
    background: color-mix(in srgb, var(--folder-accent) 16%, var(--gg-white));
    border-color: var(--folder-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--folder-accent) 18%, transparent);
    transform: translateX(2px);
}
.library-folder-item.active {
    background: var(--gg-emerald-light);
    border-color: var(--gg-emerald);
    color: var(--gg-emerald-dark);
}
.library-folder-icon {
    position: relative;
    width: 18px;
    height: 14px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--folder-accent) 18%, var(--gg-white));
    border: 1px solid color-mix(in srgb, var(--folder-accent) 46%, var(--gg-slate-200));
}
.library-folder-icon::before {
    content: '';
    position: absolute;
    left: 1px;
    top: -5px;
    width: 9px;
    height: 5px;
    border-radius: 3px 3px 0 0;
    background: color-mix(in srgb, var(--folder-accent) 22%, var(--gg-white));
    border: 1px solid color-mix(in srgb, var(--folder-accent) 46%, var(--gg-slate-200));
    border-bottom: none;
}
.library-folder-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.library-folder-count {
    background: var(--gg-slate-100);
    border-radius: 999px;
    color: var(--gg-slate-500);
    font-size: 11px;
    font-weight: 800;
    min-width: 24px;
    padding: 3px 7px;
    text-align: center;
}
.library-folder-item.active .library-folder-count {
    background: var(--gg-white);
    color: var(--gg-emerald-dark);
}
.library-folder-trailing {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    justify-content: flex-end;
}
.project-access-icon {
    align-items: center;
    color: var(--gg-slate-500);
    display: inline-flex;
    height: 18px;
    justify-content: center;
    width: 18px;
}
.project-access-icon svg {
    fill: none;
    height: 15px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 15px;
}
.library-folder-item[data-folder-state="private"] .project-access-icon,
.project-card[data-folder-state="private"] .project-access-icon {
    color: var(--gg-slate-400);
}
.library-folder-item[data-folder-state="shared-with-me"] .project-access-icon,
.library-folder-item[data-folder-state="people-shared"] .project-access-icon,
.project-card[data-folder-state="shared-with-me"] .project-access-icon,
.project-card[data-folder-state="people-shared"] .project-access-icon {
    color: var(--gg-violet);
}
.library-folder-item[data-folder-state="link-shared"] .project-access-icon,
.project-card[data-folder-state="link-shared"] .project-access-icon {
    color: var(--gg-emerald-dark);
}
.library-main-panel {
    min-width: 0;
}
.library-selection-bar {
    align-items: center;
    background: var(--gg-white);
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-sm);
    box-shadow: var(--gg-shadow);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 10px 12px;
}
.library-selection-bar[hidden] {
    display: none;
}
#librarySelectionCount {
    color: var(--gg-slate-700);
    font-size: 13px;
    font-weight: 800;
}
.library-selection-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
.history-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
@media (max-width: 1200px) {
    .history-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .library-layout { grid-template-columns: 1fr; }
    .library-folder-panel {
        position: static;
        max-height: none;
    }
    .history-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .history-grid { grid-template-columns: 1fr; }
}
.history-card {
    background: var(--gg-white);
    border-radius: var(--gg-radius-sm);
    border: 1px solid var(--gg-slate-200);
    overflow: hidden;
    transition: var(--gg-transition);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    position: relative;
}
.history-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--gg-shadow-lg);
    border-color: var(--gg-emerald);
}
.history-card.selected {
    border-color: var(--gg-emerald);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.14), var(--gg-shadow);
}
.history-card[draggable="true"] {
    cursor: grab;
}
.history-card.dragging {
    cursor: grabbing;
    opacity: 0.55;
    transform: scale(0.98);
}
.history-select-toggle {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 5;
    cursor: pointer;
}
.history-select-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.history-select-toggle span {
    align-items: center;
    background: color-mix(in srgb, var(--gg-white) 92%, transparent);
    border: 2px solid var(--gg-white);
    border-radius: 6px;
    box-shadow: var(--gg-shadow);
    display: flex;
    height: 24px;
    justify-content: center;
    width: 24px;
}
.history-select-toggle span::after {
    color: var(--gg-white);
    content: '\2713';
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    opacity: 0;
}
.history-select-toggle input:checked + span {
    background: var(--gg-emerald);
    border-color: var(--gg-emerald);
}
.history-select-toggle input:checked + span::after {
    opacity: 1;
}
.history-card-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background: var(--gg-slate-100);
}
.history-card-body {
    padding: 12px;
}
.history-card-body .history-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--gg-slate-800);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.history-card-body .history-date {
    font-size: 12px;
    color: var(--gg-slate-400);
    margin-bottom: 6px;
}
.history-card-body .history-config {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.config-badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--gg-slate-100);
    border-radius: 100px;
    font-size: 10px;
    font-weight: 600;
    color: var(--gg-slate-600);
}
.history-empty {
    text-align: center;
    padding: 40px;
    color: var(--gg-slate-400);
    font-size: 14px;
}

/* ---------- DESIGN DETAIL MODAL ---------- */
.design-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.6);
    backdrop-filter: blur(8px);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.design-detail-overlay.hidden { display: none; }
.design-detail-modal {
    position: relative;
    background: var(--gg-white);
    border-radius: var(--gg-radius);
    max-width: min(1180px, calc(100vw - 32px));
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--gg-shadow-lg);
    display: flex;
    flex-direction: column;
}
.design-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--gg-slate-200);
}
.design-detail-header h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--gg-slate-900);
    margin: 0;
}
.design-detail-title-block {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.design-detail-title-block h2 {
    max-width: min(58vw, 620px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.design-detail-counter {
    font-size: 12px;
    font-weight: 700;
    color: var(--gg-slate-500);
}
.design-detail-close {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--gg-slate-200);
    background: var(--gg-white);
    color: var(--gg-slate-500);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--gg-transition);
}
.design-detail-close:hover {
    background: var(--gg-slate-100);
    color: var(--gg-slate-900);
}
.detail-header-publish-btn {
    padding: 6px 16px;
    border-radius: 8px;
    border: 1px solid var(--gg-emerald);
    background: var(--gg-emerald);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--gg-transition);
    white-space: nowrap;
}
.detail-header-publish-btn:hover {
    background: var(--gg-emerald-dark, #059669);
}
.detail-header-publish-btn.published {
    background: transparent;
    color: var(--gg-slate-600);
    border-color: var(--gg-slate-300);
}
.detail-header-publish-btn.published:hover {
    background: var(--gg-slate-100);
    color: var(--gg-slate-800);
}
.design-detail-body {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
    gap: 0;
    min-height: 0;
}
@media (max-width: 768px) {
    .design-detail-body { grid-template-columns: 1fr; }
}
.design-detail-image-wrap {
    position: relative;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gg-slate-50);
    border-right: 1px solid var(--gg-slate-200);
    min-height: min(70vh, 720px);
}
@media (max-width: 768px) {
    .design-detail-image-wrap { border-right: none; border-bottom: 1px solid var(--gg-slate-200); }
}
.design-detail-image-wrap img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: var(--gg-radius-sm);
    box-shadow: var(--gg-shadow);
}
.design-detail-nav-btn {
    position: absolute;
    top: 50%;
    z-index: 4;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid var(--gg-slate-200);
    background: color-mix(in srgb, var(--gg-white) 92%, transparent);
    color: var(--gg-slate-700);
    box-shadow: var(--gg-shadow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translateY(-50%);
    transition: var(--gg-transition);
}
.design-detail-nav-btn[hidden] { display: none; }
.design-detail-nav-btn svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.design-detail-nav-btn:hover:not(:disabled) {
    border-color: var(--gg-emerald);
    color: var(--gg-emerald);
    transform: translateY(-50%) scale(1.04);
}
.design-detail-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.design-detail-nav-prev { left: 16px; }
.design-detail-nav-next { right: 16px; }
.design-detail-info {
    padding: 24px;
    overflow-y: auto;
    max-height: 70vh;
}
@media (max-width: 768px) {
    .design-detail-modal { max-width: calc(100vw - 16px); }
    .design-detail-title-block h2 { max-width: 52vw; }
    .design-detail-image-wrap { min-height: 50vh; }
    .design-detail-nav-btn {
        width: 40px;
        height: 40px;
        top: 44%;
    }
    .design-detail-nav-prev { left: 12px; }
    .design-detail-nav-next { right: 12px; }
}
.design-detail-section {
    margin-bottom: 20px;
}
.design-detail-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gg-slate-400);
    margin-bottom: 8px;
}
.design-detail-prompt {
    font-size: 14px;
    line-height: 1.6;
    color: var(--gg-slate-700);
    background: var(--gg-slate-50);
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-xs);
    padding: 14px 16px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 120px;
    overflow-y: auto;
}
.design-detail-settings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.detail-setting-item {
    background: var(--gg-slate-50);
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-xs);
    padding: 10px 14px;
}
.detail-setting-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--gg-slate-400);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}
.detail-setting-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--gg-slate-800);
    text-transform: capitalize;
}
.design-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--gg-slate-200);
}
.design-detail-actions a,
.design-detail-actions button {
    flex: 1 1 120px;
    padding: 10px 16px;
    border-radius: var(--gg-radius-xs);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: var(--gg-transition);
    text-decoration: none;
    border: none;
    font-family: var(--gg-font);
}
.design-detail-actions .detail-btn-primary {
    background: var(--gg-emerald);
    color: white;
}
.design-detail-actions .detail-btn-primary:hover {
    background: var(--gg-emerald-dark);
}
.design-detail-actions .detail-btn-secondary {
    background: var(--gg-slate-100);
    color: var(--gg-slate-700);
}
.design-detail-actions .detail-btn-secondary:hover {
    background: var(--gg-slate-200);
}
.design-detail-actions .detail-btn-regenerate {
    background: var(--gg-violet);
    color: white;
}
.design-detail-actions .detail-btn-regenerate:hover {
    background: var(--gg-violet-light);
    color: var(--gg-violet);
}
.design-detail-actions .detail-btn-edit {
    background: var(--gg-slate-700);
    color: white;
}
.design-detail-actions .detail-btn-edit:hover {
    background: var(--gg-slate-800);
}
.design-detail-actions .detail-btn-present {
    background: #2563eb;
    color: white;
}
.design-detail-actions .detail-btn-present:hover {
    background: #1d4ed8;
}
.design-detail-actions .detail-btn-present:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: auto;
}
.gg-inline-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: gg-inline-spin 0.75s linear infinite;
}

.publish-action-btn.is-loading {
    pointer-events: none;
}

.publish-action-btn.is-loading {
    color: var(--gg-emerald-dark);
    background: var(--gg-emerald-light);
    border-color: var(--gg-emerald);
}

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

@media (prefers-reduced-motion: reduce) {
    .gg-inline-spinner {
        animation-duration: 2.4s;
    }
}

.gg-decart-world-page {
    min-height: 100vh;
    background: var(--gg-slate-50);
}

.gg-decart-world-shell {
    min-height: 100vh;
    padding: 28px;
}

.gg-decart-world-stage {
    max-width: 1240px;
    margin: 0 auto;
}

.gg-decart-world-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.gg-decart-kicker {
    margin: 0 0 5px;
    color: var(--gg-emerald-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.gg-decart-world-header h1 {
    margin: 0;
    color: var(--gg-slate-900);
    font-size: 30px;
    line-height: 1.1;
}

.gg-decart-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-xs);
    color: var(--gg-slate-700);
    background: var(--gg-white);
    font-weight: 700;
    text-decoration: none;
}

.gg-decart-world-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.82fr) minmax(360px, 1.18fr);
    gap: 16px;
}

.gg-decart-panel,
.gg-decart-prompt-card {
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-sm);
    background: var(--gg-white);
    box-shadow: var(--gg-shadow);
    overflow: hidden;
}

.gg-decart-panel-primary {
    border-color: color-mix(in srgb, var(--gg-emerald) 30%, var(--gg-slate-200));
}

.gg-decart-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 0 14px;
    border-bottom: 1px solid var(--gg-slate-200);
    color: var(--gg-slate-700);
    font-size: 13px;
    font-weight: 800;
}

.gg-decart-experiment-label {
    color: var(--gg-slate-500);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.gg-decart-media {
    display: grid;
    place-items: center;
    min-height: 420px;
    padding: 14px;
    background: var(--gg-slate-50);
}

.gg-decart-media img {
    display: block;
    width: 100%;
    max-height: 520px;
    object-fit: contain;
    border-radius: var(--gg-radius-xs);
    background: var(--gg-white);
}

.gg-decart-media img.gg-decart-world-frame {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--gg-slate-900);
}

.gg-decart-output {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--gg-slate-200) 70%, transparent) 1px, transparent 1px),
        linear-gradient(color-mix(in srgb, var(--gg-slate-200) 70%, transparent) 1px, transparent 1px),
        color-mix(in srgb, var(--gg-emerald-light) 28%, var(--gg-white));
    background-size: 32px 32px;
}

.gg-decart-controls {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 14px 0;
}

.gg-decart-controls button {
    min-height: 38px;
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-xs);
    background: var(--gg-white);
    color: var(--gg-slate-700);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.gg-decart-controls button:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--gg-emerald) 45%, var(--gg-slate-200));
    color: var(--gg-emerald-dark);
}

.gg-decart-controls button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.gg-decart-controls button.is-active {
    color: var(--gg-white);
    border-color: var(--gg-emerald-dark);
    background: var(--gg-emerald-dark);
    opacity: 1;
}

.gg-decart-control-hint {
    margin: 8px 14px 14px;
    color: var(--gg-slate-500);
    font-size: 12px;
}

.gg-decart-model-note {
    margin: -6px 14px 14px;
    color: var(--gg-slate-600);
    font-size: 12px;
    line-height: 1.35;
}

.gg-decart-loading,
.gg-decart-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 520px;
    padding: 13px 15px;
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-xs);
    color: var(--gg-slate-700);
    background: var(--gg-white);
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
}

.gg-decart-status {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.gg-decart-status strong {
    color: var(--gg-slate-900);
}

.gg-decart-status-warning {
    border-color: color-mix(in srgb, var(--gg-emerald) 32%, var(--gg-slate-200));
    background: color-mix(in srgb, var(--gg-emerald-light) 34%, var(--gg-white));
}

.gg-decart-status-error {
    border-color: color-mix(in srgb, #dc2626 30%, var(--gg-slate-200));
    color: #991b1b;
    background: color-mix(in srgb, #fee2e2 60%, var(--gg-white));
}

.gg-decart-prompt-card {
    margin-top: 16px;
}

.gg-decart-prompt-card p {
    margin: 0;
    padding: 14px;
    color: var(--gg-slate-700);
    font-size: 14px;
    line-height: 1.55;
}

@media (max-width: 860px) {
    .gg-decart-world-shell {
        padding: 16px;
    }

    .gg-decart-world-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .gg-decart-world-grid {
        grid-template-columns: 1fr;
    }

    .gg-decart-media {
        min-height: 300px;
    }

    .gg-decart-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Card toolbar present button — coming soon */
.publish-action-btn.present-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: auto;
}

/* Result toolbar present button — coming soon */
#presentInterviewerBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: auto;
}

/* ── Edit Panel ── */
.edit-panel {
    padding: 16px 20px;
    border-top: 1px solid var(--gg-slate-200);
    background: var(--gg-slate-50);
}
.edit-panel.hidden { display: none; }
.edit-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.edit-panel-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--gg-slate-800);
    margin: 0;
}
.edit-panel-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--gg-slate-500);
    padding: 0;
    line-height: 1;
}
.edit-panel-close:hover { color: var(--gg-slate-800); }
.edit-panel-hint {
    font-size: 13px;
    color: var(--gg-slate-500);
    margin: 0 0 10px 0;
}
.edit-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.edit-chip {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--gg-slate-300);
    background: var(--gg-white);
    font-size: 12px;
    color: var(--gg-slate-600);
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--gg-font);
}
.edit-chip:hover {
    background: var(--gg-emerald-light);
    border-color: var(--gg-emerald);
    color: var(--gg-emerald-dark);
}
.edit-instructions-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--gg-radius-sm);
    border: 1px solid var(--gg-slate-300);
    font-size: 14px;
    font-family: var(--gg-font);
    resize: vertical;
    min-height: 60px;
    box-sizing: border-box;
    color: var(--gg-slate-800);
    background: var(--gg-white);
}
.edit-instructions-input:focus {
    outline: none;
    border-color: var(--gg-emerald);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}
.edit-apply-btn {
    margin-top: 10px;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: var(--gg-radius-sm);
    background: var(--gg-emerald);
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--gg-font);
    transition: all 0.15s;
}
.edit-apply-btn:hover:not(:disabled) { background: var(--gg-emerald-dark); }
.edit-apply-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.edit-apply-btn.loading {
    pointer-events: none;
    opacity: 0.7;
}
.edit-apply-btn.loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}

.design-detail-actions .detail-btn-gif {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: white;
}
.design-detail-actions .detail-btn-gif:hover {
    background: linear-gradient(135deg, #d97706, #ea580c);
}
.design-detail-actions .detail-btn-gif:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* ---------- STORYBOOK / COMIC BOOK LAYOUT ---------- */
.design-detail-modal.storybook-mode {
    max-width: 860px;
}
.design-detail-modal.storybook-mode .design-detail-body {
    display: flex;
    flex-direction: column;
}
.storybook-pages {
    padding: 28px;
    background: var(--gg-slate-100);
    display: flex;
    justify-content: center;
}

/* ── Page navigator (Library viewer) ── */
.sb-page-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px 24px 0;
    background: var(--gg-slate-100);
}
.sb-page-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--gg-slate-300);
    background: #fff;
    color: var(--gg-slate-700);
    font-size: 18px;
    cursor: pointer;
    transition: var(--gg-transition);
    flex-shrink: 0;
}
.sb-page-nav-btn:hover:not(:disabled) {
    border-color: var(--gg-violet);
    color: var(--gg-violet);
}
.sb-page-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.sb-page-counter {
    font-size: 13px;
    font-weight: 600;
    color: var(--gg-slate-600);
    min-width: 90px;
    text-align: center;
}

/* ── Comic book page ── */
.storybook-page {
    position: relative;
    width: 100%;
    max-width: 680px;
    background: #fff;
    border: 2px solid #222;
    border-radius: 3px;
    box-shadow:
        4px 6px 16px rgba(0,0,0,0.15),
        1px 1px 0 rgba(0,0,0,0.05);
    overflow: hidden;
    /* subtle page texture */
    background-image:
        linear-gradient(to bottom, rgba(0,0,0,0.01) 1px, transparent 1px);
    background-size: 100% 6px;
}

/* ── Title/cover page — dedicated full page for the cover image ── */
.storybook-title-page .storybook-title-page-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: #000;
    min-height: 300px;
}
.storybook-title-page .storybook-title-page-inner img {
    max-height: 500px;
    max-width: 100%;
    width: auto;
    border-radius: 4px;
    cursor: pointer;
}

/* ── Panel grid: 2 columns, auto rows ── */
.storybook-panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 10px;
}
/* Odd last panel spans full width */
.storybook-panel-grid.panels-odd .storybook-panel:last-child {
    grid-column: 1 / -1;
}

/* ── Individual panel (comic frame) ── */
.storybook-panel {
    position: relative;
    overflow: hidden;
    border: 2px solid #111;
    margin: 3px;
    background: #000;
    cursor: pointer;
}
.storybook-panel img {
    width: 100%;
    display: block;
    object-fit: contain;
    background: #000;
}
.storybook-panel:hover {
    z-index: 2;
    outline: 2px solid var(--gg-violet);
    outline-offset: -2px;
}

/* ── Hover caption ── */
.storybook-panel-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 10px 8px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: #fff;
    font-size: 11px;
    line-height: 1.4;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.storybook-panel:hover .storybook-panel-caption {
    opacity: 1;
}

/* ── Page number footer ── */
.storybook-page-footer {
    text-align: center;
    padding: 6px 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    font-family: 'Georgia', 'Times New Roman', serif;
    letter-spacing: 1px;
    border-top: 1px solid #ddd;
    margin: 0 10px;
}
.storybook-page-credit {
    font-size: 9px;
    font-style: italic;
    font-weight: 400;
    color: #999;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

/* ── Morph video ── */
.storybook-morph-section {
    padding: 16px 24px;
    border-top: 1px solid var(--gg-slate-200);
}
.storybook-morph-section .storybook-morph-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gg-slate-400);
    margin-bottom: 10px;
}
.storybook-morph-section video {
    width: 100%;
    max-height: 360px;
    border-radius: var(--gg-radius-sm);
    box-shadow: var(--gg-shadow);
    background: #000;
}

/* ── Info / meta ── */
.storybook-info {
    padding: 24px;
    border-top: 1px solid var(--gg-slate-200);
}
.storybook-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.storybook-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    background: var(--gg-violet-light);
    color: var(--gg-violet);
}
.storybook-transcript {
    font-size: 13px;
    line-height: 1.65;
    color: var(--gg-slate-600);
    background: var(--gg-slate-50);
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-xs);
    padding: 14px 16px;
    max-height: 120px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Lightbox (full-screen single panel) ── */
.storybook-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.88);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}
.storybook-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.storybook-lightbox-caption {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 14px;
    background: rgba(0,0,0,0.6);
    padding: 8px 20px;
    border-radius: 99px;
    max-width: 80vw;
    text-align: center;
}

/* ── Loading spinner ── */
.storybook-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: var(--gg-slate-400);
    gap: 10px;
}
.storybook-loading .spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--gg-slate-200);
    border-top-color: var(--gg-violet);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ── Inline action buttons (inside scroll flow) ── */
.storybook-inline-actions {
    display: flex;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--gg-slate-200);
    background: var(--gg-white);
}
.storybook-inline-actions a,
.storybook-inline-actions button {
    flex: 1;
    padding: 10px 16px;
    border-radius: var(--gg-radius-xs);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: var(--gg-transition);
    text-decoration: none;
    border: none;
    font-family: var(--gg-font);
}
.storybook-inline-actions .detail-btn-primary {
    background: var(--gg-emerald);
    color: white;
}
.storybook-inline-actions .detail-btn-primary:hover {
    background: var(--gg-emerald-dark);
}
.storybook-inline-actions .detail-btn-secondary {
    background: var(--gg-slate-100);
    color: var(--gg-slate-700);
}
.storybook-inline-actions .detail-btn-secondary:hover {
    background: var(--gg-slate-200);
}

/* ── Regenerate Video Panel ── */
.sb-regen-section {
    padding: 16px 24px;
    border-top: 1px solid var(--gg-slate-200);
}
.sb-regen-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gg-violet);
    background: none;
    border: none;
    padding: 0;
    font-family: var(--gg-font);
}
.sb-regen-toggle:hover { opacity: 0.8; }
.sb-regen-toggle .sb-regen-caret {
    display: inline-block;
    transition: transform 0.2s;
    font-size: 10px;
}
.sb-regen-toggle.open .sb-regen-caret { transform: rotate(90deg); }
.sb-regen-panel {
    display: none;
    margin-top: 12px;
    padding: 14px 16px;
    background: var(--gg-slate-50);
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-xs);
}
.sb-regen-panel.open { display: block; }
.sb-regen-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.sb-regen-row:last-child { margin-bottom: 0; }
.sb-regen-row label {
    font-size: 13px;
    font-weight: 600;
    color: var(--gg-slate-700);
    min-width: 90px;
}
.sb-regen-row select {
    flex: 1;
    padding: 6px 10px;
    border-radius: var(--gg-radius-xs);
    border: 1px solid var(--gg-slate-300);
    font-size: 13px;
    font-family: var(--gg-font);
    background: var(--gg-white);
    color: var(--gg-slate-700);
}
.sb-regen-row .sb-regen-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--gg-slate-700);
    cursor: pointer;
}
.sb-regen-row .sb-regen-check input { cursor: pointer; }
.sb-regen-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}
.sb-regen-btn {
    padding: 8px 18px;
    border-radius: var(--gg-radius-xs);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: var(--gg-font);
    transition: var(--gg-transition);
}
.sb-regen-btn-primary {
    background: var(--gg-violet);
    color: white;
}
.sb-regen-btn-primary:hover { filter: brightness(1.1); }
.sb-regen-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.sb-regen-status {
    font-size: 12px;
    color: var(--gg-slate-500);
    margin-top: 8px;
}

/* ---------- SKETCH BADGE ---------- */
.sketch-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: color-mix(in srgb, var(--gg-violet) 85%, transparent);
    color: var(--gg-white);
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    z-index: 2;
}


/* Settings panels visibility */
#sketchSettings { display: none; }
#sketchSettings.active { display: block; }
#infographicSettings.hidden { display: none; }

/* SVG result container */
#resultSvgContainer {
    display: none;
    width: 100%;
    overflow: auto;
    background: var(--gg-white);
    border-radius: var(--gg-radius-sm);
    border: 1px solid var(--gg-slate-200);
}
#resultSvgContainer svg {
    width: 100%;
    height: auto;
    display: block;
}

/* ---------- VIDEO GENERATION ---------- */
.video-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(15, 23, 42, 0.75);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
}
.video-badge::before {
    content: '▶';
    font-size: 8px;
}
.history-card {
    position: relative;
}
.history-card-img-wrap {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: var(--gg-slate-100);
}
.history-card-img-wrap img,
.history-card-img-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- DELETE BUTTON ON TILE ---------- */
.delete-btn-tile {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(239, 68, 68, 0.85);
    color: #fff;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--gg-transition);
    z-index: 3;
    opacity: 0;
    font-family: var(--gg-font);
    line-height: 1;
}
.history-card:hover .delete-btn-tile {
    opacity: 1;
}
.delete-btn-tile:hover {
    background: #dc2626;
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.5);
}

/* ---------- DELETE BUTTON IN DETAIL MODAL ---------- */
.design-detail-actions .detail-btn-delete {
    background: #ef4444;
    color: white;
}
.design-detail-actions .detail-btn-delete:hover {
    background: #dc2626;
}

/* ---------- DELETE CONFIRM OVERLAY ---------- */
.delete-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.6);
    backdrop-filter: blur(8px);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.delete-confirm-overlay.hidden { display: none; }
.delete-confirm-box {
    background: var(--gg-white);
    border-radius: var(--gg-radius);
    max-width: 420px;
    width: 100%;
    padding: 32px;
    text-align: center;
    box-shadow: var(--gg-shadow-lg);
}
.delete-confirm-box h3 {
    margin: 0 0 8px;
    font-size: 20px;
    color: var(--gg-slate-900);
}
.delete-confirm-box p {
    margin: 0 0 24px;
    font-size: 14px;
    color: var(--gg-slate-500);
}
.delete-confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.delete-confirm-actions button {
    padding: 10px 24px;
    border-radius: var(--gg-radius-xs);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: var(--gg-font);
    transition: var(--gg-transition);
}
.delete-confirm-cancel {
    background: var(--gg-slate-100);
    color: var(--gg-slate-700);
}
.delete-confirm-cancel:hover {
    background: var(--gg-slate-200);
}
.delete-confirm-yes {
    background: #ef4444;
    color: white;
}
.delete-confirm-yes:hover {
    background: #dc2626;
}
.export-choice-all-btn {
    background: var(--gg-slate-700);
    color: white;
}
.export-choice-all-btn:hover {
    background: var(--gg-slate-900);
}
.export-choice-selected-btn {
    background: var(--gg-violet);
    color: white;
}
.export-choice-selected-btn:hover {
    opacity: 0.88;
}

.detail-btn-animate {
    background: linear-gradient(135deg, var(--gg-violet), var(--gg-emerald)) !important;
    color: white !important;
}
.detail-btn-animate:hover {
    opacity: 0.9;
}

/* Video config modal */
.video-config-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.6);
    backdrop-filter: blur(8px);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.video-config-overlay.hidden { display: none; }
.video-config-modal {
    background: var(--gg-white);
    border-radius: var(--gg-radius);
    max-width: 480px;
    width: 100%;
    box-shadow: var(--gg-shadow-lg);
    overflow: hidden;
}
.video-config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--gg-slate-200);
}
.video-config-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--gg-slate-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.video-config-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.video-config-preview {
    width: 100%;
    max-height: 180px;
    object-fit: contain;
    border-radius: var(--gg-radius-sm);
    border: 1px solid var(--gg-slate-200);
}
.video-config-field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gg-slate-400);
    margin-bottom: 8px;
}
.video-config-field input,
.video-config-field select,
.video-config-field textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-xs);
    font-size: 14px;
    font-family: var(--gg-font);
    color: var(--gg-slate-800);
    transition: var(--gg-transition);
    box-sizing: border-box;
}
.video-config-field input:focus,
.video-config-field select:focus,
.video-config-field textarea:focus {
    outline: none;
    border-color: var(--gg-emerald);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.1);
}
.video-config-actions {
    display: flex;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--gg-slate-200);
}
.video-config-actions button {
    flex: 1;
    padding: 12px 16px;
    border-radius: var(--gg-radius-xs);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--gg-transition);
    border: none;
    font-family: var(--gg-font);
}
.video-config-cancel {
    background: var(--gg-slate-100);
    color: var(--gg-slate-700);
}
.video-config-cancel:hover {
    background: var(--gg-slate-200);
}
.video-config-submit {
    background: linear-gradient(135deg, var(--gg-violet), var(--gg-emerald));
    color: white;
}
.video-config-submit:hover {
    opacity: 0.9;
}
.video-config-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Video player in detail modal */
.design-detail-image-wrap video {
    max-width: 100%;
    max-height: 60vh;
    border-radius: var(--gg-radius-sm);
    box-shadow: var(--gg-shadow);
}

/* Video generation progress in config modal */
.video-progress {
    text-align: center;
    padding: 20px 0;
}
.video-progress .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--gg-slate-200);
    border-top-color: var(--gg-emerald);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 12px;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.video-progress-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--gg-slate-700);
}
.video-progress-subtext {
    font-size: 12px;
    color: var(--gg-slate-400);
    margin-top: 4px;
}

/* ---------- AUTH MODAL OVERRIDES ---------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.6);
    backdrop-filter: blur(8px);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-overlay.hidden { display: none; }
.auth-card {
    background: var(--gg-white);
    border-radius: var(--gg-radius);
    padding: 40px;
    max-width: 420px;
    width: 90%;
    box-shadow: var(--gg-shadow-lg);
    position: relative;
}
.auth-card h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--gg-slate-900);
    margin-bottom: 24px;
}
.auth-card .form-group {
    margin-bottom: 16px;
}
.auth-card .form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--gg-slate-600);
    margin-bottom: 6px;
}
.auth-card .form-group input {
    width: 100%;
    padding: 11px 14px;
    border: 2px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-xs);
    font-size: 14px;
    font-family: var(--gg-font);
    transition: var(--gg-transition);
    box-sizing: border-box;
}
.auth-card .form-group input:focus {
    outline: none;
    border-color: var(--gg-emerald);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.1);
}
.auth-button {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, var(--gg-emerald), var(--gg-emerald-dark));
    color: white;
    border: none;
    border-radius: var(--gg-radius-xs);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--gg-transition);
    font-family: var(--gg-font);
}
.auth-button:hover { opacity: 0.9; }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--gg-slate-400);
    font-size: 13px;
}
.auth-divider::before, .auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gg-slate-200);
}

.social-login-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.social-login-btn {
    width: 100%;
    padding: 11px;
    border: 2px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-xs);
    background: var(--gg-white);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: var(--gg-transition);
    font-family: var(--gg-font);
    color: var(--gg-slate-700);
}
.social-login-btn:hover {
    background: var(--gg-slate-50);
    border-color: var(--gg-slate-300);
}
.social-login-btn svg {
    width: 18px;
    height: 18px;
}

.modal-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--gg-slate-400);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: var(--gg-transition);
}
.modal-close-btn:hover {
    background: var(--gg-slate-100);
    color: var(--gg-slate-700);
}

.auth-switch {
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    color: var(--gg-slate-500);
}
.auth-switch a {
    color: var(--gg-emerald);
    font-weight: 600;
    text-decoration: none;
}
.auth-switch a:hover { text-decoration: underline; }

.error-message {
    background: #fef2f2;
    color: #dc2626;
    padding: 10px 14px;
    border-radius: var(--gg-radius-xs);
    font-size: 13px;
    margin-top: 12px;
}
.error-message.hidden { display: none; }
.success-message {
    background: var(--gg-emerald-light);
    color: var(--gg-emerald-dark);
    padding: 10px 14px;
    border-radius: var(--gg-radius-xs);
    font-size: 13px;
    margin-top: 12px;
}
.success-message.hidden { display: none; }

/* ---------- CLEAR EDITOR BUTTON ---------- */
.clear-editor-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--gg-slate-100);
    border: 1px solid var(--gg-slate-200);
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gg-slate-500);
    cursor: pointer;
    font-family: var(--gg-font);
    transition: var(--gg-transition);
}
.clear-editor-btn:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
}

/* ---------- GENERATE BUTTON (pinned bottom-right of source panel) ---------- */
.generate-btn-row {
    position: absolute;
    bottom: 12px;
    right: 16px;
    z-index: 5;
}

/* ---------- RESPONSIVE ---------- */
/* Mobile tab bar — hidden on desktop */
.mobile-tab-bar {
    display: none;
}

@media (max-width: 768px) {
    .workspace-grid {
        grid-template-columns: 1fr;
    }
    .daily-inspiration-ticker {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
    .workspace-header {
        align-items: flex-start;
    }
    .workspace-header > .daily-inspiration-ticker {
        min-width: 0;
        width: 100%;
        flex-basis: 100%;
    }
    .daily-inspiration-copy,
    .daily-inspiration-actions {
        width: 100%;
    }
    .daily-inspiration-actions {
        justify-content: space-between;
    }
    .daily-inspiration-headline {
        white-space: normal;
    }
    .daily-inspiration-card {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(100vw - 24px);
        max-height: calc(100vh - 110px);
        padding: 14px;
    }
    .source-meta-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .daily-topic-carousel-main {
        grid-template-columns: 1fr;
    }
    .daily-topic-panel h3 {
        font-size: 22px;
    }
    .daily-topic-carousel-footer {
        flex-direction: column;
        align-items: stretch;
    }
    .daily-topic-carousel-nav {
        justify-content: center;
    }
    .daily-topic-dots {
        justify-content: center;
        flex-wrap: wrap;
    }
    .daily-topic-use {
        width: 100%;
    }
    .source-panel   { grid-column: 1; grid-row: auto; height: auto; }
    .config-panel    { grid-column: 1; grid-row: auto; position: static; max-height: none; height: auto; }
    /* generate button now inside source panel */
    .expand-prompt-pill { display: none; }
    .preview-panel   { display: none; }

    /* Show mobile tab bar */
    .mobile-tab-bar {
        display: flex;
        gap: 0;
        background: var(--gg-white);
        border: 1px solid var(--gg-slate-200);
        border-radius: var(--gg-radius);
        overflow: hidden;
        margin-bottom: 12px;
    }
    .mobile-tab-bar button {
        flex: 1;
        padding: 12px 16px;
        border: none;
        background: none;
        font-family: var(--gg-font);
        font-size: 14px;
        font-weight: 600;
        color: var(--gg-slate-500);
        cursor: pointer;
        transition: var(--gg-transition);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    .mobile-tab-bar button:first-child {
        border-right: 1px solid var(--gg-slate-200);
    }
    .mobile-tab-bar button.active {
        background: var(--gg-emerald-light);
        color: var(--gg-emerald-dark);
    }

    /* Hide inactive panel */
    .workspace-grid.mobile-tab-settings .source-panel {
        display: none;
    }
    .workspace-grid.mobile-tab-prompt .config-panel {
        display: none;
    }
    /* Default: show prompt, hide settings */
    .workspace-grid .config-panel {
        /* shown by default on desktop, toggled on mobile */
    }
}
@media (max-width: 768px) {
    .top-menu { display: none !important; }
    .top-banner { padding: 0 16px; }
    #app-workspace { padding: 16px; min-width: 0; }
    #hero { padding: 60px 16px 50px; }
    .hero-features { gap: 16px; }
    .hero-personas { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; }
    .hero-persona-card { padding: 22px 20px; }
    .auth-card { padding: 28px; }
}

/* ---------- SCROLLBAR ---------- */
.config-panel::-webkit-scrollbar {
    width: 4px;
}
.config-panel::-webkit-scrollbar-thumb {
    background: var(--gg-slate-300);
    border-radius: 100px;
}

/* ---------- ANIMATIONS ---------- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
    animation: fadeInUp 0.5s ease forwards;
}
.delay-1 { animation-delay: 0.1s; opacity: 0; }
.delay-2 { animation-delay: 0.2s; opacity: 0; }
.delay-3 { animation-delay: 0.3s; opacity: 0; }

/* Toast notifications */
.gg-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--gg-slate-900);
    color: white;
    padding: 14px 20px;
    border-radius: var(--gg-radius-sm);
    font-size: 14px;
    font-weight: 500;
    z-index: 2000;
    animation: slideInRight 0.3s ease;
    box-shadow: var(--gg-shadow-lg);
}
@keyframes slideInRight {
    from { transform: translateX(100px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* --- Site Footer --- */
.site-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: var(--gg-slate-900, #0f172a);
    padding: 2.5rem 0;
    text-align: center;
    color: #b8c2cc;
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-top: auto;
}
.site-footer a {
    color: var(--gg-emerald, #10b981);
    text-decoration: none;
    transition: color 0.3s;
}
.site-footer a:hover {
    color: var(--gg-emerald-dark, #059669);
    text-decoration: underline;
}
.site-footer .footer-links {
    margin-bottom: 0.75rem;
}
.site-footer .footer-links a {
    margin: 0 0.75rem;
}
.site-footer .footer-copyright {
    font-size: 0.8rem;
    opacity: 0.6;
    margin-top: 0.5rem;
}

/* ============================================================
   STORY CANVAS STYLES
   ============================================================ */
#story-view {
    display: none;
    flex-direction: column;
    height: calc(100dvh - 64px);
    max-height: calc(100dvh - 64px);
    overflow: hidden;
    /* Shrink when usage banner or other elements take space above */
    margin-top: 0;
}
#story-view.active { display: flex; }
/* When usage banner is visible, reduce story view height */
.usage-banner:not(.hidden) ~ #story-view {
    height: calc(100dvh - 64px - 42px);
    max-height: calc(100dvh - 64px - 42px);
}

/* ── Toolbar ── */
.sc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 20px;
    background: var(--gg-white);
    border-bottom: 1px solid var(--gg-slate-200);
    flex-wrap: wrap;
    z-index: 10;
}
.sc-toolbar-left, .sc-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.sc-toolbar-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sc-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gg-slate-500);
    white-space: nowrap;
}
.sc-seg { font-size: 12px; }
.sc-seg .seg-option { padding: 4px 10px; font-size: 12px; }

.sc-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: var(--gg-radius-xs);
    border: 1px solid var(--gg-slate-300);
    background: var(--gg-white);
    color: var(--gg-slate-700);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--gg-transition);
    white-space: nowrap;
}
.sc-btn:hover { background: var(--gg-slate-100); }
.sc-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sc-btn svg { flex-shrink: 0; }

.sc-btn-record {
    background: var(--gg-emerald);
    color: white;
    border-color: var(--gg-emerald-dark);
}
.sc-btn-record:hover { background: var(--gg-emerald-dark); }
.sc-btn-record.recording {
    background: #ef4444;
    border-color: #dc2626;
    animation: sc-pulse 1.5s infinite;
}

.sc-btn-stop {
    background: #ef4444; color: white; border-color: #dc2626;
    padding: 8px 20px; font-size: 14px; font-weight: 600;
    border-radius: var(--gg-radius-sm);
    animation: sc-pulse-stop 1.8s infinite;
    gap: 6px;
}
.sc-btn-stop:hover { background: #dc2626; }
@keyframes sc-pulse-stop {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.45); }
    50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}
.sc-btn-pause { background: #f59e0b; color: white; border-color: #d97706; }
.sc-btn-new-story {
    background: var(--gg-emerald); color: white; border-color: var(--gg-emerald);
    padding: 8px 20px; font-size: 14px; font-weight: 600;
    border-radius: var(--gg-radius-sm); gap: 6px;
}
.sc-btn-new-story:hover { filter: brightness(1.1); }
.sc-btn-generate { border-color: var(--gg-violet); color: var(--gg-violet); }
.sc-btn-generate:hover { background: var(--gg-violet-light); }
.sc-btn-sample { border-color: var(--gg-emerald); color: var(--gg-emerald-dark); }
.sc-btn-sample:hover { background: var(--gg-emerald-light); }

@keyframes sc-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
    50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}

.sc-waveform {
    border-radius: 4px;
    background: var(--gg-slate-100);
    border: 1px solid var(--gg-slate-200);
}

.sc-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: var(--gg-slate-100);
    color: var(--gg-slate-600);
    white-space: nowrap;
}
.sc-status-badge.extracting { background: #dbeafe; color: #1d4ed8; }
.sc-status-badge.generating { background: #fef3c7; color: #92400e; animation: sc-pulse-soft 2s infinite; }
.sc-status-badge.recording { background: #fee2e2; color: #991b1b; }
.sc-status-badge.playing { background: #ede9fe; color: #5b21b6; }

@keyframes sc-pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ── Sample Modal ── */
.sc-sample-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.sc-sample-modal.hidden { display: none; }
.sc-sample-modal-content {
    background: var(--gg-white);
    border-radius: var(--gg-radius);
    padding: 28px;
    max-width: 720px;
    width: 90%;
    box-shadow: var(--gg-shadow-lg);
}
.sc-sample-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.sc-sample-header h3 {
    font-size: 18px;
    color: var(--gg-slate-900);
    margin: 0;
}
.sc-sample-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--gg-slate-400);
    cursor: pointer;
}
.sc-sample-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}
.sc-sample-card {
    border: 2px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-sm);
    padding: 20px;
    cursor: pointer;
    transition: var(--gg-transition);
    text-align: center;
}
.sc-sample-card:hover {
    border-color: var(--gg-emerald);
    box-shadow: var(--gg-shadow);
    transform: translateY(-2px);
}
.sc-sample-icon { font-size: 36px; margin-bottom: 10px; }
.sc-sample-card h4 {
    font-size: 15px;
    color: var(--gg-slate-900);
    margin: 0 0 8px;
}
.sc-sample-card p {
    font-size: 12px;
    color: var(--gg-slate-500);
    margin: 0 0 10px;
    line-height: 1.5;
}
.sc-sample-duration {
    font-size: 11px;
    color: var(--gg-slate-400);
    font-weight: 500;
}

/* ── Canvas area — Layered ── */
.sc-canvas-area {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    background: var(--gg-slate-50);
}
.sc-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sc-empty-state {
    text-align: center;
    padding: 40px;
    color: var(--gg-slate-400);
}
.sc-empty-icon { font-size: 64px; margin-bottom: 16px; opacity: 0.5; }
.sc-empty-state h3 {
    font-size: 22px;
    color: var(--gg-slate-600);
    margin: 0 0 8px;
}
.sc-empty-state p {
    font-size: 14px;
    color: var(--gg-slate-400);
    line-height: 1.6;
}

/* ── Config Wizard Panel (two-column layout like Create panel) ── */
.sc-config-panel {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 0;
    background: var(--gg-slate-50);
    z-index: 15;
    animation: scConfigAppear 0.3s ease-out;
    overflow: visible;
}
.sc-config-panel.hidden { display: none; }
@keyframes scConfigAppear {
    from { opacity: 0; } to { opacity: 1; }
}

/* Close button — floats top-right of config panel, only shown when overlaying a story */
.sc-config-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 20;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--gg-slate-200, #e2e8f0);
    color: var(--gg-slate-600, #475569);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.sc-config-close-btn:hover {
    background: var(--gg-slate-300, #cbd5e1);
    color: var(--gg-slate-800, #1e293b);
}
.sc-config-close-btn.hidden { display: none; }

/* Left Column — Story Content (matches Create panel source-panel) */
.sc-config-left {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--gg-white);
    border-right: 1px solid var(--gg-slate-200);
    overflow: hidden;
}
.sc-config-left-header {
    padding: 10px 16px;
    border-bottom: 1px solid var(--gg-slate-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sc-config-left-header h2 {
    font-size: 15px;
    font-weight: 700;
    color: var(--gg-slate-900);
    margin: 0;
}
.sc-config-header-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}
.sc-config-header-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--gg-slate-100);
    border: 1px solid var(--gg-slate-200);
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gg-slate-500);
    cursor: pointer;
    font-family: var(--gg-font);
    transition: var(--gg-transition);
}
.sc-config-header-btn:hover {
    background: var(--gg-slate-200);
    color: var(--gg-slate-700);
}
.sc-config-header-btn.clear-btn:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
}
.sc-config-left-body {
    padding: 0;
    padding-bottom: 56px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Story mode toggle (narrate vs build) — compact pill */
.sc-config-mode-toggle {
    display: inline-flex;
    align-self: flex-start;
    gap: 0;
    margin: 10px 16px 0;
    border: 1.5px solid var(--gg-slate-200);
    border-radius: 999px;
    overflow: hidden;
    background: var(--gg-slate-50);
}
.sc-mode-btn {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gg-slate-500);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}
.sc-mode-btn:first-child { border-right: 1.5px solid var(--gg-slate-200); }
.sc-mode-btn:hover:not(.active) { background: var(--gg-slate-100); }
.sc-mode-btn.active {
    background: var(--gg-emerald);
    color: #fff;
    border-radius: 999px;
}

/* Row: mode pill + sample button side by side */
.sc-config-mode-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 16px 0;
}
.sc-config-mode-row .sc-config-mode-toggle {
    margin: 0;  /* parent row handles margin */
}
.sc-sample-pill {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gg-slate-500);
    background: var(--gg-slate-50);
    border: 1.5px solid var(--gg-slate-200);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}
.sc-sample-pill:hover {
    background: var(--gg-slate-100);
    color: var(--gg-slate-700);
}

.sc-config-editor-wrap {
    border: 2px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-sm);
    overflow: hidden;
    transition: var(--gg-transition);
    margin: 10px 16px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.sc-config-editor-wrap:focus-within {
    border-color: var(--gg-emerald);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.1);
}
.sc-config-story-textarea {
    width: 100%;
    flex: 1;
    min-height: 120px;
    padding: 16px 20px;
    border: none;
    font-family: var(--gg-font);
    font-size: 14px;
    color: var(--gg-slate-800);
    resize: none;
    outline: none;
    background: var(--gg-white);
    line-height: 1.7;
    box-sizing: border-box;
}
.sc-config-story-textarea::placeholder {
    color: var(--gg-slate-400);
    font-style: normal;
}
/* Custom instructions accordion (matches Create panel) */
.sc-config-instr-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--gg-slate-500);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 16px;
    width: 100%;
    text-align: left;
    transition: var(--gg-transition);
    font-family: var(--gg-font);
}
.sc-config-instr-toggle:hover { color: var(--gg-slate-700); }
.sc-config-instr-toggle .chevron {
    transition: var(--gg-transition);
    font-size: 10px;
}
.sc-config-instr-toggle.open .chevron {
    transform: rotate(90deg);
}
.sc-config-instr-body {
    display: none;
    padding: 0 20px;
}
.sc-config-instr-body.open {
    display: block;
    padding-bottom: 8px;
}
.sc-config-instr-body textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px 14px;
    border: 2px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-xs);
    font-size: 13px;
    font-family: var(--gg-font);
    color: var(--gg-slate-700);
    resize: vertical;
    transition: var(--gg-transition);
    box-sizing: border-box;
}
.sc-config-instr-body textarea:focus {
    outline: none;
    border-color: var(--gg-emerald);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.1);
}
.sc-config-instr-warn {
    width: 100%;
    font-size: 11px;
    padding: 5px 10px;
    margin-top: 6px;
    border-radius: var(--gg-radius-xs);
    background: color-mix(in srgb, #f59e0b 12%, transparent);
    border: 1px solid color-mix(in srgb, #f59e0b 40%, transparent);
    color: #92400e;
    line-height: 1.4;
}
.sc-config-instr-warn.hidden { display: none; }
/* Generate button pinned bottom-right (matches Create panel) */
.sc-config-generate-row {
    position: absolute;
    bottom: 12px;
    right: 16px;
    z-index: 5;
}
.sc-config-generate-btn {
    width: auto;
    padding: 12px 28px;
    background: linear-gradient(135deg, var(--gg-emerald), var(--gg-emerald-dark));
    color: white;
    border: none;
    border-radius: var(--gg-radius-sm);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--gg-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(16,185,129,0.25);
    font-family: var(--gg-font);
}
.sc-config-generate-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(16,185,129,0.35);
}
.sc-config-generate-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Right Column — Settings */
.sc-config-right {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: visible;
    background: var(--gg-white);
}
.sc-config-right-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--gg-slate-100);
}
.sc-config-right-header h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--gg-slate-800);
    margin: 0;
}
.sc-config-right-body {
    flex: 1;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
}

.sc-config-section {
    margin-bottom: 0;
}
.sc-config-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gg-slate-500);
    margin-bottom: 8px;
}

/* Style category toggle (Business / Creative) */
.sc-style-category-toggle {
    display: inline-flex;
    gap: 0;
    margin-bottom: 6px;
    border: 1.5px solid var(--gg-slate-200);
    border-radius: 999px;
    overflow: hidden;
    background: var(--gg-slate-50);
}
.sc-style-cat-btn {
    padding: 5px 14px;
    font-size: 11px;
    font-weight: 600;
    color: var(--gg-slate-500);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    font-family: var(--gg-font);
}
.sc-style-cat-btn:first-child {
    border-right: 1.5px solid var(--gg-slate-200);
}
.sc-style-cat-btn:hover:not(.active) {
    background: var(--gg-slate-100);
}
.sc-style-cat-btn.active {
    background: var(--gg-emerald);
    color: #fff;
    border-radius: 999px;
}
.sc-style-category-desc {
    font-size: 11px;
    color: var(--gg-slate-400);
    margin-bottom: 8px;
    line-height: 1.3;
    font-style: italic;
}
/* Card subtitle line */
.sc-config-card-sub {
    font-size: 9px;
    color: var(--gg-slate-400);
    font-weight: 500;
    line-height: 1.2;
}
.sc-config-card.active .sc-config-card-sub {
    color: var(--gg-emerald-dark);
}
/* Hidden utility for category filtering */
.sc-config-card.hidden {
    display: none;
}
.sc-config-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}
.sc-config-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 6px 8px;
    border: 2px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-sm);
    background: var(--gg-white);
    cursor: pointer;
    transition: var(--gg-transition);
    text-align: center;
}
.sc-config-card:hover {
    border-color: var(--gg-slate-300);
    background: var(--gg-slate-50);
}
.sc-config-card.active {
    border-color: var(--gg-emerald);
    background: var(--gg-emerald-light);
}
.sc-config-card-icon {
    font-size: 20px;
    line-height: 1;
}
.sc-config-card-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--gg-slate-700);
}
.sc-config-card.active .sc-config-card-label {
    color: var(--gg-emerald-dark);
}
/* Aspect ratio cards */
.sc-config-cards.sc-ratio-cards {
    grid-template-columns: repeat(4, 1fr);
}
.sc-config-ratio-icon {
    width: 30px;
    height: 20px;
    border: 2px solid var(--gg-slate-300);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 700;
    color: var(--gg-slate-400);
    transition: var(--gg-transition);
}
.sc-config-card.active .sc-config-ratio-icon {
    border-color: var(--gg-emerald-dark);
    color: var(--gg-emerald-dark);
}
.sc-config-ratio-icon.ratio-1-1 { width: 22px; height: 22px; }
.sc-config-ratio-icon.ratio-9-16 { width: 16px; height: 26px; }
.sc-config-ratio-icon.ratio-3-2 { width: 28px; height: 20px; }

/* (instructions styles moved to left column — see .sc-config-instr-* above) */

/* ── Collapsible Video Generation Section ── */
.sc-config-collapsible {
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-sm);
    overflow: hidden;
}
.sc-config-collapse-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--gg-slate-50);
    cursor: pointer;
    user-select: none;
    transition: var(--gg-transition);
}
.sc-config-collapse-header:hover {
    background: var(--gg-slate-100);
}
.sc-config-collapse-header .sc-config-label {
    margin: 0;
    flex: 1;
}
.sc-config-collapse-chevron {
    font-size: 12px;
    color: var(--gg-slate-400);
    transition: transform 0.25s ease;
}
.sc-config-collapsible.open .sc-config-collapse-chevron {
    transform: rotate(180deg);
}
.sc-config-collapse-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.sc-config-collapsible.open .sc-config-collapse-body {
    max-height: 600px;
}
.sc-config-collapse-inner {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Voice picker inside config panel ── */
.sc-cfg-voice-picker {
    position: relative;
    display: inline-flex;
}
.sc-cfg-voice-picker-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-xs);
    background: var(--gg-white);
    font-size: 13px;
    font-weight: 600;
    color: var(--gg-slate-700);
    cursor: pointer;
    transition: var(--gg-transition);
}
.sc-cfg-voice-picker-btn:hover { border-color: var(--gg-slate-300); background: var(--gg-slate-50); }
.sc-cfg-voice-dropdown {
    position: fixed;
    min-width: 210px;
    background: var(--gg-white);
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-sm);
    box-shadow: var(--gg-shadow-lg);
    z-index: 9999;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
}
.sc-cfg-voice-dropdown.hidden { display: none; }
.sc-cfg-voice-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--gg-slate-600);
    transition: background 0.15s;
}
.sc-cfg-voice-option:hover { background: var(--gg-slate-50); }
.sc-cfg-voice-option.active { background: var(--gg-emerald-light); color: var(--gg-emerald-dark); font-weight: 600; }
.sc-cfg-voice-play {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--gg-slate-100);
    border: 1px solid var(--gg-slate-200);
    cursor: pointer;
    font-size: 12px;
    color: var(--gg-slate-500);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--gg-transition);
    line-height: 1;
}
.sc-cfg-voice-play:hover {
    background: var(--gg-emerald-light);
    color: var(--gg-emerald-dark);
    border-color: var(--gg-emerald);
}

/* ── Config panel responsive ── */
@media (max-width: 768px) {
    .sc-config-panel {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    .sc-config-left {
        border-right: none;
        border-bottom: 1px solid var(--gg-slate-200);
        max-height: 45vh;
    }
    .sc-config-cards { grid-template-columns: repeat(2, 1fr); }
    .sc-config-header-actions { flex-wrap: wrap; }
}
@media (max-width: 520px) {
    .sc-config-left-body { padding: 0 16px 16px; }
    .sc-config-right-body { padding: 12px; }
    .sc-config-cards.sc-ratio-cards { grid-template-columns: repeat(2, 1fr); }
}
.sc-main-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: opacity 0.6s ease;
    border-radius: 4px;
    /* Hidden by default — card stack replaces it */
    display: none;
}

/* ── Layered card stack ── */
.sc-layer-stack {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sc-layer-stack.hidden { display: none; }

.sc-layer-deck {
    position: relative;
    width: 80%;
    max-width: 900px;
    aspect-ratio: 16/9;
    max-height: 80%;
}

/* Each card in the deck */
.sc-layer-card {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    transition: transform 0.45s cubic-bezier(.4,0,.2,1),
                opacity 0.35s ease,
                box-shadow 0.3s ease;
    cursor: pointer;
    backface-visibility: hidden;
    will-change: transform, opacity;
}
.sc-layer-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #000;
}
/* Active (topmost) card */
.sc-layer-card.sc-card-active {
    z-index: 10;
    transform: translate(0, 0) scale(1);
    opacity: 1;
    box-shadow: 0 6px 28px rgba(0,0,0,0.22);
}
/* Cards behind — each offset further */
.sc-layer-card.sc-card-behind-1 {
    z-index: 9;
    transform: translate(8px, 8px) scale(0.97);
    opacity: 0.7;
    box-shadow: 0 3px 16px rgba(0,0,0,0.12);
}
.sc-layer-card.sc-card-behind-2 {
    z-index: 8;
    transform: translate(16px, 16px) scale(0.94);
    opacity: 0.45;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.sc-layer-card.sc-card-behind-3 {
    z-index: 7;
    transform: translate(24px, 24px) scale(0.91);
    opacity: 0.25;
}
/* Cards beyond 3 behind — hidden */
.sc-layer-card.sc-card-hidden {
    z-index: 1;
    transform: translate(28px, 28px) scale(0.88);
    opacity: 0;
    pointer-events: none;
}
/* Cards before active (already viewed) — slide off to the left */
.sc-layer-card.sc-card-before {
    z-index: 5;
    transform: translate(-28px, 4px) scale(0.94);
    opacity: 0;
    pointer-events: none;
}

/* Navigation controls */
.sc-layer-nav {
    position: absolute;
    bottom: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 20;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 4px 8px;
}
.sc-layer-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: rgba(255,255,255,0.12);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.sc-layer-nav-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.25);
    transform: scale(1.05);
}
.sc-layer-nav-btn:active:not(:disabled) {
    transform: scale(0.95);
}
.sc-layer-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}
.sc-layer-counter {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    padding: 0 6px;
    min-width: 40px;
    text-align: center;
    white-space: nowrap;
}
.sc-thought-image {
    position: absolute;
    inset: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    margin: auto;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    border-radius: 4px;
    z-index: 3;
}
/* ── Creative prelude animation — elegant paintbrush ── */
.sc-creative-prelude {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 45%,
        color-mix(in srgb, var(--gg-slate-100) 40%, transparent) 0%,
        transparent 65%);
    animation: sc-prelude-fadein 1.2s cubic-bezier(.4,0,.2,1);
}
.sc-creative-prelude.hidden { display: none; }

@keyframes sc-prelude-fadein {
    from { opacity: 0; } to { opacity: 1; }
}

/* Watercolor washes — soft expanding blobs */
.sc-prelude-wash {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0;
    mix-blend-mode: multiply;
}
.sc-wash-1 {
    width: 220px; height: 160px;
    background: color-mix(in srgb, var(--gg-emerald) 18%, transparent);
    top: 25%; left: 15%;
    animation: sc-wash-breathe 8s ease-in-out infinite 0s;
}
.sc-wash-2 {
    width: 180px; height: 200px;
    background: color-mix(in srgb, var(--gg-violet) 14%, transparent);
    top: 35%; right: 18%;
    animation: sc-wash-breathe 9s ease-in-out infinite 2.5s;
}
.sc-wash-3 {
    width: 160px; height: 140px;
    background: color-mix(in srgb, #38bdf8 12%, transparent);
    bottom: 22%; left: 35%;
    animation: sc-wash-breathe 10s ease-in-out infinite 4s;
}
@keyframes sc-wash-breathe {
    0%   { opacity: 0;   transform: scale(0.6) rotate(-8deg); }
    30%  { opacity: 1;   transform: scale(1) rotate(0deg); }
    60%  { opacity: 0.7; transform: scale(1.1) rotate(3deg); }
    100% { opacity: 0;   transform: scale(0.7) rotate(-5deg); }
}

/* Paintbrush icon — elegant sable brush SVG */
.sc-prelude-brush {
    z-index: 2;
    color: var(--gg-slate-500);
    filter: drop-shadow(0 2px 16px color-mix(in srgb, var(--gg-emerald) 25%, transparent));
    animation: sc-brush-paint 6s cubic-bezier(.4,0,.2,1) infinite;
    transform-origin: 85% 90%;
}
@keyframes sc-brush-paint {
    0%   { transform: rotate(-12deg) translateX(-8px); }
    15%  { transform: rotate(2deg)   translateX(12px); }
    30%  { transform: rotate(-6deg)  translateX(-4px) translateY(-3px); }
    50%  { transform: rotate(5deg)   translateX(8px)  translateY(2px); }
    65%  { transform: rotate(-3deg)  translateX(-6px); }
    80%  { transform: rotate(4deg)   translateX(10px) translateY(-2px); }
    100% { transform: rotate(-12deg) translateX(-8px); }
}

/* Label */
.sc-prelude-label {
    margin-top: 24px;
    font-size: 14px;
    font-weight: 400;
    color: var(--gg-slate-400);
    letter-spacing: 3px;
    text-transform: uppercase;
    z-index: 2;
    font-style: italic;
}
.sc-prelude-dots::after {
    content: '';
    animation: sc-dots 2s steps(4, end) infinite;
}
@keyframes sc-dots {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
}

/* Flowing calligraphic brush strokes — SVG paths with draw-on */
.sc-prelude-calligraphy {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.sc-prelude-calligraphy path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.sc-callig-1 {
    stroke: color-mix(in srgb, var(--gg-emerald) 35%, transparent);
    stroke-width: 2.5;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: sc-callig-draw 4s cubic-bezier(.25,.1,.25,1) infinite 0.5s;
}
.sc-callig-2 {
    stroke: color-mix(in srgb, var(--gg-violet) 25%, transparent);
    stroke-width: 1.8;
    stroke-dasharray: 350;
    stroke-dashoffset: 350;
    animation: sc-callig-draw 5s cubic-bezier(.25,.1,.25,1) infinite 2s;
}
.sc-callig-3 {
    stroke: color-mix(in srgb, #fbbf24 30%, transparent);
    stroke-width: 2;
    stroke-dasharray: 320;
    stroke-dashoffset: 320;
    animation: sc-callig-draw 4.5s cubic-bezier(.25,.1,.25,1) infinite 3.5s;
}
.sc-callig-4 {
    stroke: color-mix(in srgb, #38bdf8 22%, transparent);
    stroke-width: 1.5;
    stroke-dasharray: 280;
    stroke-dashoffset: 280;
    animation: sc-callig-draw 5.5s cubic-bezier(.25,.1,.25,1) infinite 1s;
}
@keyframes sc-callig-draw {
    0%   { stroke-dashoffset: 400; opacity: 0; }
    10%  { opacity: 0.8; }
    50%  { stroke-dashoffset: 0;   opacity: 0.6; }
    70%  { stroke-dashoffset: 0;   opacity: 0.3; }
    100% { stroke-dashoffset: 0;   opacity: 0; }
}

/* Paint drip accent — tiny drops that fall from strokes */
.sc-prelude-drip {
    position: absolute;
    width: 4px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    opacity: 0;
}
.sc-drip-1 {
    height: 8px; background: color-mix(in srgb, var(--gg-emerald) 40%, transparent);
    top: 38%; left: 42%;
    animation: sc-drip-fall 6s ease-in infinite 2s;
}
.sc-drip-2 {
    height: 6px; background: color-mix(in srgb, var(--gg-violet) 30%, transparent);
    top: 32%; right: 35%;
    animation: sc-drip-fall 7s ease-in infinite 4s;
}
.sc-drip-3 {
    height: 10px; background: color-mix(in srgb, #fbbf24 35%, transparent);
    top: 45%; left: 55%;
    animation: sc-drip-fall 8s ease-in infinite 5.5s;
}
@keyframes sc-drip-fall {
    0%   { opacity: 0;   transform: translateY(0) scaleY(1); }
    8%   { opacity: 0.7; transform: translateY(0) scaleY(1); }
    25%  { opacity: 0.5; transform: translateY(30px) scaleY(1.4); }
    40%  { opacity: 0;   transform: translateY(60px) scaleY(0.6); }
    100% { opacity: 0;   transform: translateY(60px) scaleY(0.6); }
}

.sc-thought-image.visible {
    opacity: 1;
    animation: sc-thought-glow 2s ease-in-out infinite;
}
@keyframes sc-thought-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(124,58,237,0.2); }
    50% { box-shadow: 0 0 40px rgba(124,58,237,0.4); }
}

/* ── Floating panels ── */
.sc-transcript-float {
    position: absolute;
    top: 16px;
    left: 16px;
    bottom: auto;
    width: 380px;
    max-height: 520px;
    background: color-mix(in srgb, var(--gg-white) 55%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: var(--gg-radius-sm);
    border: 1px solid color-mix(in srgb, var(--gg-slate-200) 60%, transparent);
    box-shadow: 0 4px 24px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.45);
    z-index: 5;
    overflow: hidden;
    transition: var(--gg-transition);
}
.sc-transcript-float.collapsed { max-height: 38px; }
.sc-transcript-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gg-slate-600);
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid var(--gg-slate-100);
}
.sc-word-count {
    font-size: 11px;
    font-weight: 400;
    color: var(--gg-slate-400);
}
.sc-chevron {
    font-size: 10px;
    transition: transform 0.2s;
}
.collapsed .sc-chevron { transform: rotate(-90deg); }
.sc-transcript-body {
    max-height: 380px;
    overflow-y: auto;
    padding: 10px 14px;
}
.sc-transcript-text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--gg-slate-700);
}
.sc-transcript-text .sc-chunk {
    display: inline;
}
.sc-transcript-text .sc-chunk-new {
    animation: sc-fade-in 0.4s ease;
}
@keyframes sc-fade-in {
    from { opacity: 0; background: #fef3c7; }
    to { opacity: 1; background: transparent; }
}

.sc-beats-float {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 300px;
    max-height: 240px;
    background: color-mix(in srgb, var(--gg-white) 92%, transparent);
    backdrop-filter: blur(12px);
    border-radius: var(--gg-radius-sm);
    border: 1px solid var(--gg-slate-200);
    box-shadow: var(--gg-shadow);
    z-index: 5;
    overflow: hidden;
    transition: var(--gg-transition);
}
.sc-beats-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gg-slate-600);
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid var(--gg-slate-100);
}
.sc-beats-body {
    max-height: 190px;
    overflow-y: auto;
    padding: 8px 14px;
}
.sc-beats-list {
    margin: 0;
    padding-left: 20px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--gg-slate-600);
}
.sc-beats-list li { margin-bottom: 4px; }

/* ── Timeline Layout ── */
.sc-timeline-area {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--gg-slate-50);
    position: relative;
}
.sc-timeline-area.hidden { display: none; }
.sc-timeline-strip {
    display: flex;
    gap: 16px;
    padding: 20px;
    overflow-x: auto;
    flex: 1;
    align-items: center;
}
.sc-timeline-empty {
    color: var(--gg-slate-400);
    font-size: 14px;
    text-align: center;
    width: 100%;
}
.sc-timeline-panel {
    flex-shrink: 0;
    width: 280px;
    border-radius: var(--gg-radius-sm);
    overflow: hidden;
    border: 2px solid var(--gg-slate-200);
    background: var(--gg-white);
    cursor: pointer;
    transition: var(--gg-transition);
}
.sc-timeline-panel:hover {
    border-color: var(--gg-emerald);
    box-shadow: var(--gg-shadow);
    transform: translateY(-3px);
}
.sc-timeline-panel.active-panel {
    border-color: var(--gg-violet);
    animation: sc-pulse-border 2s infinite;
}
@keyframes sc-pulse-border {
    0%, 100% { border-color: var(--gg-violet); }
    50% { border-color: rgba(124,58,237,0.3); }
}
.sc-timeline-panel img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}
.sc-timeline-panel-info {
    padding: 10px 12px;
}
.sc-timeline-panel-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--gg-slate-500);
    margin-bottom: 4px;
}
.sc-timeline-panel-caption {
    font-size: 12px;
    color: var(--gg-slate-600);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sc-timeline-title {
    border: 2px solid var(--gg-accent, #6366f1);
    position: relative;
}
.sc-timeline-title .sc-timeline-panel-label {
    font-weight: 700;
    color: var(--gg-accent, #6366f1);
}
/* Title panel lives on its own dedicated cover page */
.sc-storyboard-title-page {
    border-color: var(--gg-accent, #6366f1);
}
.sc-storyboard-title-page-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: #000;
    min-height: 280px;
}
.sc-storyboard-title-page-inner img {
    max-height: 420px;
    max-width: 100%;
    width: auto;
    display: block;
    object-fit: contain;
    cursor: pointer;
}
.sc-timeline-transcript {
    border-top: 1px solid var(--gg-slate-200);
    padding: 12px 20px;
    max-height: 160px;
    overflow-y: auto;
    background: var(--gg-white);
}

/* ── Creative prelude variant for timeline & storyboard (full-area overlay) ── */
.sc-creative-prelude-alt {
    position: absolute;
    inset: 0;
    border-radius: 0;
    z-index: 10;
}

/* ── Transcript float inside timeline & storyboard views ── */
.sc-transcript-float-view {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 12;
}

/* ── Lightbox ── */
.sc-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 40px;
}
.sc-lightbox.hidden { display: none; }
.sc-lightbox-close {
    position: absolute;
    top: 16px;
    right: 24px;
    background: none;
    border: none;
    color: white;
    font-size: 32px;
    cursor: pointer;
}
.sc-lightbox-img {
    max-width: 90vw;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 8px;
}
.sc-lightbox-caption {
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    margin-top: 16px;
    text-align: center;
    max-width: 600px;
}

/* ── Playing indicator ── */
.sc-playing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gg-violet);
}

/* ── Morph Video Controls ── */
.sc-morph-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--gg-slate-50);
    border-top: 1px solid var(--gg-slate-200);
}
.sc-morph-controls.hidden { display: none; }
.sc-morph-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--gg-radius-sm);
    border: 1.5px solid var(--gg-violet);
    background: transparent;
    color: var(--gg-violet);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--gg-transition);
}
.sc-morph-btn:hover {
    background: var(--gg-violet-light);
}
.sc-morph-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.sc-morph-btn-play {
    background: var(--gg-violet);
    color: white;
    border-color: var(--gg-violet);
}
.sc-morph-btn-play:hover {
    background: var(--gg-violet-dark, #6d28d9);
}
.sc-morph-progress {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--gg-slate-200);
    overflow: hidden;
}
.sc-morph-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--gg-violet);
    border-radius: 2px;
    transition: width 0.1s linear;
}
.sc-morph-label {
    font-size: 12px;
    color: var(--gg-slate-500);
    white-space: nowrap;
}

/* ── Audio Options ── */
.sc-audio-options {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    background: color-mix(in srgb, var(--gg-violet) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--gg-violet) 20%, transparent);
    border-radius: var(--gg-radius-sm);
}
.sc-audio-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--gg-slate-600);
    cursor: pointer;
    user-select: none;
}
.sc-audio-toggle input[type="checkbox"] {
    accent-color: var(--gg-violet);
    width: 15px;
    height: 15px;
    cursor: pointer;
}
.sc-audio-toggle:hover { color: var(--gg-violet); }

.sc-bgm-mood-select {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: var(--gg-radius-sm);
    border: 1px solid var(--gg-slate-300);
    background: var(--gg-white);
    color: var(--gg-slate-700);
    cursor: pointer;
    outline: none;
}
.sc-bgm-mood-select:focus { border-color: var(--gg-violet); }

/* ── Toolbar Divider & Section Label ── */
.sc-toolbar-divider {
    width: 1px;
    height: 28px;
    background: var(--gg-slate-200);
    margin: 0 4px;
    flex-shrink: 0;
}
.sc-toolbar-section-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gg-violet);
    opacity: 0.7;
    white-space: nowrap;
    padding: 2px 0;
}

/* ── Canvas Views Wrapper ── */
.sc-canvas-wrap {
    flex: 1 1 0;
    min-height: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── Floating Stop Listening Bar ── */
.sc-stop-bar {
    display: none;
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    background: rgba(30, 30, 30, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 14px;
    padding: 10px 14px;
    align-items: center;
    gap: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.28);
}
.sc-stop-bar.active {
    display: inline-flex;
}
.sc-stop-bar-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f1f5f9;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.sc-stop-bar-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ef4444;
    animation: sc-stop-dot-pulse 1.4s ease-in-out infinite;
}
@keyframes sc-stop-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}
.sc-stop-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 22px;
    border: none;
    border-radius: 10px;
    background: #ef4444;
    color: white;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    white-space: nowrap;
}
.sc-stop-bar-btn:hover {
    background: #dc2626;
    transform: scale(1.03);
}
.sc-stop-bar-btn:active {
    transform: scale(0.97);
}

/* ── Floating Complete / New Story Bar ── */
.sc-complete-bar {
    display: none;
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    background: rgba(30, 30, 30, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 14px;
    padding: 10px 14px;
    align-items: center;
    gap: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.28);
}
.sc-complete-bar.active {
    display: inline-flex;
}
.sc-complete-bar-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f1f5f9;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.sc-complete-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 22px;
    border: none;
    border-radius: 10px;
    background: var(--gg-emerald, #10b981);
    color: white;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    white-space: nowrap;
}
.sc-complete-bar-btn:hover {
    filter: brightness(1.1);
    transform: scale(1.03);
}
.sc-complete-bar-btn:active {
    transform: scale(0.97);
}

.sc-canvas-wrap > .sc-canvas-area,
.sc-canvas-wrap > .sc-timeline-area,
.sc-canvas-wrap > .sc-storyboard-area {
    flex: 1 1 0;
    min-height: 0;
}

/* ── Floating Layout Switcher (inside canvas) ── */
.sc-canvas-layout-float {
    display: none;
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 20;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-sm);
    padding: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
}
.sc-canvas-layout-float.active {
    display: block;
}

/* ── Regen Video Modal ── */
.sc-regen-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
}
.sc-regen-modal-overlay.hidden { display: none; }
.sc-regen-modal {
    background: var(--gg-white);
    border-radius: var(--gg-radius);
    padding: 28px 30px;
    max-width: 460px;
    width: 92%;
    box-shadow: var(--gg-shadow-lg);
}
.sc-regen-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}
.sc-regen-modal-header h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--gg-slate-900);
    margin: 0;
}
.sc-regen-modal-close {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--gg-slate-400);
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.sc-regen-modal-close:hover { color: var(--gg-slate-700); }
.sc-regen-modal-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.sc-regen-modal-row > label {
    font-size: 12px;
    font-weight: 600;
    color: var(--gg-slate-600);
    min-width: 70px;
    flex-shrink: 0;
}
.sc-regen-modal-row select {
    font-size: 13px;
    padding: 7px 10px;
    border-radius: var(--gg-radius-xs);
    border: 1px solid var(--gg-slate-300);
    background: var(--gg-white);
    color: var(--gg-slate-700);
    flex: 1;
    outline: none;
}
.sc-regen-modal-row select:focus { border-color: var(--gg-violet); }
.sc-regen-modal-checks {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.sc-regen-modal-check {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--gg-slate-600);
    cursor: pointer;
}
.sc-regen-modal-check input[type="checkbox"] {
    accent-color: var(--gg-violet);
    width: 15px;
    height: 15px;
    cursor: pointer;
}
.sc-regen-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--gg-slate-100);
}
.sc-regen-modal-cancel {
    padding: 8px 18px;
    border-radius: var(--gg-radius-xs);
    border: 1px solid var(--gg-slate-300);
    background: var(--gg-white);
    color: var(--gg-slate-600);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.sc-regen-modal-cancel:hover { background: var(--gg-slate-100); }
.sc-regen-modal-submit {
    padding: 8px 22px;
    border-radius: var(--gg-radius-xs);
    border: none;
    background: var(--gg-violet);
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--gg-transition);
}
.sc-regen-modal-submit:hover { background: #6d28d9; }
.sc-regen-modal-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.sc-regen-modal-status {
    font-size: 12px;
    color: var(--gg-slate-500);
    margin-top: 12px;
    text-align: center;
    line-height: 1.5;
}
.sc-regen-modal-status.hidden { display: none; }

/* ── Voice Picker (custom dropdown with preview) ── */
.sc-voice-picker {
    position: relative;
}
.sc-voice-picker.disabled { opacity: 0.4; pointer-events: none; }
.sc-voice-picker-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: var(--gg-radius-sm);
    border: 1px solid var(--gg-slate-300);
    background: var(--gg-white);
    color: var(--gg-slate-700);
    cursor: pointer;
    min-width: 80px;
    justify-content: space-between;
}
.sc-voice-picker-btn:hover { border-color: var(--gg-violet); }
.sc-voice-picker-arrow { flex-shrink: 0; transition: transform 0.2s; }
.sc-voice-picker.open .sc-voice-picker-arrow { transform: rotate(180deg); }

.sc-voice-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 180px;
    background: var(--gg-white);
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-sm);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 500;
    padding: 4px 0;
    max-height: 280px;
    overflow-y: auto;
}
.sc-voice-dropdown.hidden { display: none; }

.sc-voice-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    cursor: pointer;
    gap: 8px;
    transition: background 0.15s;
}
.sc-voice-option:hover { background: color-mix(in srgb, var(--gg-violet) 8%, transparent); }
.sc-voice-option.active {
    background: color-mix(in srgb, var(--gg-violet) 12%, transparent);
    font-weight: 600;
}
.sc-voice-name { font-size: 13px; color: var(--gg-slate-700); flex: 1; }
.sc-voice-play-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--gg-violet);
    background: transparent;
    color: var(--gg-violet);
    font-size: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
}
.sc-voice-play-btn:hover {
    background: var(--gg-violet);
    color: white;
}
.sc-voice-play-btn.loading {
    pointer-events: none;
    opacity: 0.6;
}
.sc-voice-play-btn.playing {
    background: var(--gg-violet);
    color: white;
}

/* ── Video Player Modal ── */
.sc-video-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.88);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2100;
    padding: 40px;
}
.sc-video-modal.hidden { display: none; }
.sc-video-modal-close {
    position: absolute;
    top: 16px;
    right: 24px;
    background: none;
    border: none;
    color: white;
    font-size: 32px;
    cursor: pointer;
}
.sc-video-modal video {
    max-width: 90vw;
    max-height: 75vh;
    border-radius: 8px;
}
.sc-video-modal-actions {
    margin-top: 16px;
    display: flex;
    gap: 12px;
}
.sc-video-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border-radius: var(--gg-radius-sm);
    border: 1.5px solid white;
    background: transparent;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: var(--gg-transition);
}
.sc-video-download:hover {
    background: rgba(255,255,255,0.15);
}

/* ── WebGL Morph Canvas ── */
.sc-morph-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 10;
    pointer-events: none;
}
.sc-morph-canvas.hidden { display: none; }
.sc-playing-dots span {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gg-violet);
    animation: sc-dot-bounce 1.4s ease-in-out infinite;
}
.sc-playing-dots span:nth-child(2) { animation-delay: 0.2s; }
.sc-playing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes sc-dot-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .sc-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 8px 12px;
    }
    .sc-toolbar-left, .sc-toolbar-right {
        width: 100%;
        flex-wrap: wrap;
    }
    .sc-transcript-float { width: calc(100% - 32px); left: 16px; right: 16px; }
    .sc-beats-float { display: none; }
    .sc-timeline-panel { width: 220px; }
    .sc-storyboard-area { padding: 12px; }
    .sc-storyboard-page-grid { grid-template-columns: 1fr; }
}

/* ── Live Storyboard / Comic Book Layout ── */
.sc-storyboard-area {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 20px;
    overflow-y: auto;
    background: var(--gg-slate-100);
    align-items: center;
    position: relative;
}
.sc-storyboard-area.hidden { display: none; }
.sc-storyboard-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--gg-slate-400);
    font-size: 14px;
    text-align: center;
}
.sc-storyboard-page {
    position: relative;
    width: 100%;
    max-width: 680px;
    background: #fff;
    border: 2px solid #222;
    border-radius: 3px;
    box-shadow:
        4px 6px 16px rgba(0,0,0,0.15),
        1px 1px 0 rgba(0,0,0,0.05);
    overflow: hidden;
    animation: sc-pageAppear 0.4s ease-out;
    background-image:
        linear-gradient(to bottom, rgba(0,0,0,0.01) 1px, transparent 1px);
    background-size: 100% 6px;
}
@keyframes sc-pageAppear {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
.sc-storyboard-page-footer {
    text-align: center;
    padding: 6px 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    font-family: 'Georgia', 'Times New Roman', serif;
    letter-spacing: 1px;
    border-top: 1px solid #ddd;
    margin: 0 10px;
}
.sc-storyboard-page-footer .storybook-page-credit {
    font-size: 9px;
    font-style: italic;
    font-weight: 400;
    color: #999;
    letter-spacing: 0.3px;
    margin-top: 2px;
}
.sc-storyboard-page-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 10px;
}
.sc-storyboard-page-grid.cols-odd .sc-storyboard-cell:last-child { grid-column: 1 / -1; }
.sc-storyboard-cell {
    position: relative;
    overflow: hidden;
    background: #000;
    border: 2px solid #111;
    margin: 3px;
    cursor: pointer;
}
.sc-storyboard-cell:hover {
    z-index: 2;
    outline: 2px solid var(--gg-violet);
    outline-offset: -2px;
}
.sc-storyboard-cell img {
    width: 100%;
    display: block;
    object-fit: contain;
    background: #000;
}
.sc-storyboard-cell-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 10px 8px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: #fff;
    font-size: 11px;
    line-height: 1.4;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.sc-storyboard-cell:hover .sc-storyboard-cell-caption {
    opacity: 1;
}
.sc-storyboard-cell-badge {
    position: absolute;
    bottom: 4px;
    right: 5px;
    background: rgba(0,0,0,0.45);
    color: rgba(255,255,255,0.75);
    font-size: 9px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 99px;
    pointer-events: none;
}
/* ── Loading placeholder shimmer (shared) ── */
@keyframes sc-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* Timeline generating placeholder */
.sc-timeline-panel.sc-generating {
    cursor: default;
    pointer-events: none;
    border-style: dashed;
    border-color: var(--gg-slate-300);
    background: linear-gradient(90deg,
        var(--gg-slate-100) 25%,
        var(--gg-slate-200) 50%,
        var(--gg-slate-100) 75%);
    background-size: 200% 100%;
    animation: sc-shimmer 1.5s linear infinite;
    position: relative;
}
.sc-timeline-panel.sc-generating .sc-timeline-panel-info {
    opacity: 0.5;
}
.sc-timeline-panel.sc-generating .sc-tl-spinner {
    position: absolute;
    top: calc(80px - 16px);
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    border: 3px solid rgba(0,0,0,0.1);
    border-top-color: var(--gg-violet);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

/* Storyboard generating placeholder */
.sc-storyboard-cell.sc-generating {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #1e1e2e 25%, #2a2a42 50%, #1e1e2e 75%);
    background-size: 200% 100%;
    animation: sc-shimmer 1.5s linear infinite;
    cursor: default;
    pointer-events: none;
}
.sc-storyboard-cell.sc-generating::after {
    content: '';
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255,255,255,0.15);
    border-top-color: var(--gg-violet);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

/* Layered view — next-gen glass badge */
.sc-next-gen-badge {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: rgba(0,0,0,0.52);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 24px;
    padding: 7px 14px 7px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    z-index: 8;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35);
    animation: sc-badge-fadein 0.35s ease;
    white-space: nowrap;
}
.sc-next-gen-badge.hidden { display: none; }
@keyframes sc-badge-fadein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.sc-next-gen-badge-spinner {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

/* ── Storyboard Full-Page Preview (page flip) ── */
.sc-preview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.sc-preview-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.sc-preview-close:hover { opacity: 1; }
.sc-preview-page-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    overflow-y: auto;
    padding: 24px;
}
.sc-preview-page-wrap .sc-storyboard-page {
    max-width: min(90vw, 780px);
    width: 100%;
    box-shadow: 0 12px 48px rgba(0,0,0,0.6);
    animation: sc-previewPageFlip 0.35s ease-out;
    margin: auto;
}
@keyframes sc-previewPageFlip {
    from { opacity: 0; transform: rotateY(12deg) scale(0.95); }
    to   { opacity: 1; transform: rotateY(0) scale(1); }
}
.sc-preview-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 24px;
    user-select: none;
}
.sc-preview-nav-btn {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 22px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.15s;
}
.sc-preview-nav-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.22);
    transform: scale(1.08);
}
.sc-preview-nav-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}
.sc-preview-page-indicator {
    color: rgba(255,255,255,0.8);
    font-size: 15px;
    font-family: 'Georgia', 'Times New Roman', serif;
    letter-spacing: 1px;
    min-width: 100px;
    text-align: center;
}
.sc-storyboard-preview-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 8px 18px;
    background: var(--gg-violet);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.sc-storyboard-preview-btn:hover { background: var(--gg-violet-dark, #6d28d9); }

/* ============================================================
   STYLE LIBRARY
   ============================================================ */

/* -- Locked settings (controlled by style) -- */
.config-section.style-locked {
    opacity: 0.35;
    pointer-events: none;
}
.style-locked-label {
    display: none;
    font-size: 10px;
    color: var(--gg-emerald-dark);
    font-weight: 600;
    font-family: var(--gg-font);
    margin-left: auto;
}
.config-section.style-locked .style-locked-label {
    display: inline;
}
.config-mode-toggle.style-locked {
    opacity: 0.35;
    pointer-events: none;
}

/* -- Style chooser row (in source panel) -- */
.style-chooser-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 20px 8px;
}
.style-chooser-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--gg-slate-100);
    color: var(--gg-slate-600);
    font-weight: 600;
    padding: 7px 16px;
    border-radius: var(--gg-radius-xs);
    border: 2px dashed var(--gg-slate-300);
    font-size: 13px;
    font-family: var(--gg-font);
    cursor: pointer;
    transition: var(--gg-transition);
}
.style-chooser-btn:hover {
    border-color: var(--gg-emerald);
    color: var(--gg-emerald-dark);
    background: var(--gg-emerald-light);
}
.style-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--gg-emerald-light);
    color: var(--gg-emerald-dark);
    padding: 5px 10px 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--gg-font);
}
.style-badge.hidden { display: none; }
.style-badge-clear {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: rgba(5,150,105,0.15);
    color: var(--gg-emerald-dark);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--gg-transition);
}
.style-badge-clear:hover {
    background: rgba(5,150,105,0.3);
}

/* -- Style library modal overlay -- */
.style-library-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.6);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.style-library-overlay.hidden { display: none; }

/* -- Style library modal card -- */
.style-library-modal {
    background: var(--gg-white);
    border-radius: var(--gg-radius);
    max-width: 720px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--gg-shadow-lg);
}
.style-library-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gg-slate-200);
}
.style-library-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gg-slate-900);
    margin: 0;
}
.style-library-description {
    margin: 0;
    padding: 10px 20px 0;
    font-size: 13px;
    color: var(--gg-slate-500);
    line-height: 1.45;
}
.style-library-close {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--gg-slate-200);
    background: var(--gg-white);
    color: var(--gg-slate-500);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--gg-transition);
}
.style-library-close:hover {
    background: var(--gg-slate-100);
    color: var(--gg-slate-900);
}

/* -- Tabs -- */
.style-library-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--gg-slate-200);
    padding: 0 20px;
}
.style-tab {
    padding: 10px 20px;
    border: none;
    background: none;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--gg-font);
    color: var(--gg-slate-500);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: var(--gg-transition);
}
.style-tab:hover { color: var(--gg-slate-700); }
.style-tab.active {
    color: var(--gg-emerald-dark);
    border-bottom-color: var(--gg-emerald);
}

/* -- Tab content -- */
.style-library-body { padding: 16px 20px; }
.style-tab-content { display: none; }
.style-tab-content.active { display: block; }

/* -- Upload row -- */
.style-upload-row { margin-bottom: 16px; }
.style-upload-btn { font-size: 13px; padding: 8px 20px; }

/* -- Style grid -- */
.style-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.style-card {
    border: 2px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: var(--gg-transition);
    background: var(--gg-white);
}
.style-card:hover {
    border-color: var(--gg-slate-400);
    box-shadow: var(--gg-shadow);
}
.style-card.selected {
    border-color: var(--gg-emerald);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
}
.style-card-thumb {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    background: var(--gg-slate-100);
}
.style-card-info {
    padding: 8px 10px;
}
.style-card-mode {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 3px;
    margin: 6px 10px 0;
    font-family: var(--gg-font);
}
.style-card-mode--infographic {
    background: rgba(16,185,129,0.12);
    color: var(--gg-emerald-dark);
}
.style-card-mode--sketch {
    background: rgba(99,102,241,0.12);
    color: #4f46e5;
}
.style-card-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--gg-slate-700);
    padding: 4px 10px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.style-card-actions {
    padding: 0 10px 8px;
    display: flex;
    gap: 6px;
}
.style-card-edit,
.style-card-delete {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid var(--gg-slate-200);
    background: var(--gg-white);
    color: var(--gg-slate-500);
    cursor: pointer;
    font-family: var(--gg-font);
    transition: var(--gg-transition);
}
.style-card-edit:hover { background: var(--gg-slate-100); color: var(--gg-slate-700); }
.style-card-delete:hover { background: #fef2f2; color: #dc2626; border-color: #fecaca; }

/* -- Empty states -- */
.style-empty {
    text-align: center;
    color: var(--gg-slate-400);
    font-size: 14px;
    padding: 40px 20px;
}
.style-empty.hidden { display: none; }
.style-loading {
    text-align: center;
    color: var(--gg-slate-400);
    font-size: 14px;
    padding: 40px 20px;
}

/* -- Style upload modal -- */
.style-upload-modal {
    background: var(--gg-white);
    border-radius: var(--gg-radius);
    max-width: 520px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--gg-shadow-lg);
}
.style-upload-body { padding: 20px; }
.style-upload-dropzone {
    border: 2px dashed var(--gg-slate-300);
    border-radius: var(--gg-radius-sm);
    padding: 40px 20px;
    text-align: center;
    color: var(--gg-slate-400);
    cursor: pointer;
    transition: var(--gg-transition);
}
.style-upload-dropzone:hover,
.style-upload-dropzone.drag-over {
    border-color: var(--gg-emerald);
    background: rgba(16,185,129,0.04);
    color: var(--gg-emerald-dark);
}
.style-upload-dropzone p {
    margin: 0;
    font-size: 14px;
}
.style-upload-preview {
    max-height: 200px;
    max-width: 100%;
    border-radius: var(--gg-radius-sm);
    margin: 12px auto;
    display: block;
}
.style-upload-preview.hidden { display: none; }

/* -- Analysis progress -- */
.style-analysis-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    color: var(--gg-slate-500);
    font-size: 14px;
}
.style-analysis-progress.hidden { display: none; }
.style-analysis-progress .spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gg-slate-200);
    border-top-color: var(--gg-emerald);
    border-radius: 50%;
    animation: gg-spin 0.8s linear infinite;
}

/* -- Edit section -- */
.style-edit-section { margin-top: 16px; }
.style-edit-section.hidden { display: none; }
.style-edit-section label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--gg-slate-600);
    margin-bottom: 4px;
    margin-top: 12px;
}
.style-edit-section label:first-child { margin-top: 0; }
.style-text-input,
.style-textarea,
.style-select {
    width: 100%;
    padding: 9px 12px;
    border: 2px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-xs);
    font-size: 13px;
    font-family: var(--gg-font);
    color: var(--gg-slate-700);
    background: var(--gg-white);
    transition: var(--gg-transition);
    box-sizing: border-box;
}
.style-text-input:focus,
.style-textarea:focus,
.style-select:focus {
    outline: none;
    border-color: var(--gg-emerald);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.1);
}
.style-textarea { resize: vertical; min-height: 100px; }

/* -- Upload actions -- */
.style-upload-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid var(--gg-slate-200);
}

/* -- Responsive -- */
@media (max-width: 600px) {
    .style-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .style-library-modal,
    .style-upload-modal { max-width: 100%; margin: 12px; }
}

/* ============================================================
   GALLERY STYLES
   ============================================================ */
#gallery-view {
    display: none;
    padding: 24px;
    width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    min-height: 0;
}
#gallery-view.active { display: block; }

.gallery-header {
    margin-bottom: 20px;
}
.gallery-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--gg-slate-900);
    margin: 0;
}
.gallery-subtitle {
    font-size: 14px;
    color: var(--gg-slate-400);
    margin: 4px 0 0;
}
.gallery-controls {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.gallery-sort-pills,
.gallery-type-pills {
    display: flex;
    gap: 6px;
}
.gallery-pill,
.gallery-type-pill {
    padding: 6px 16px;
    border-radius: 100px;
    border: 1px solid var(--gg-slate-200);
    background: var(--gg-white);
    color: var(--gg-slate-500);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--gg-font);
    transition: var(--gg-transition);
}
.gallery-pill:hover,
.gallery-type-pill:hover {
    border-color: var(--gg-emerald);
    color: var(--gg-emerald);
}
.gallery-pill.active,
.gallery-type-pill.active {
    background: var(--gg-emerald);
    color: white;
    border-color: var(--gg-emerald);
}

/* Gallery Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 320px));
    gap: 20px;
}

.gallery-card {
    background: var(--gg-white);
    border-radius: var(--gg-radius-sm);
    border: 1px solid var(--gg-slate-200);
    overflow: hidden;
    transition: var(--gg-transition);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.gallery-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--gg-shadow-lg);
    border-color: var(--gg-emerald);
}
.gallery-card-img-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 180px;
    background: var(--gg-slate-100);
}
.gallery-card-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: var(--gg-slate-100);
}
.gallery-card-body {
    padding: 12px;
    min-width: 0;
}
.gallery-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--gg-slate-800);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gallery-card-creator {
    font-size: 12px;
    color: var(--gg-emerald);
    font-weight: 500;
    margin-bottom: 6px;
}
.gallery-card-stats {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: var(--gg-slate-400);
    margin-bottom: 6px;
}
.gallery-card-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.gallery-tag {
    display: inline-block;
    padding: 2px 8px;
    background: var(--gg-slate-100);
    border-radius: 100px;
    font-size: 10px;
    font-weight: 600;
    color: var(--gg-slate-600);
}
.gallery-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 1;
}
.gallery-badge-story {
    background: var(--gg-violet);
    color: white;
}
.gallery-empty {
    text-align: center;
    padding: 40px;
    color: var(--gg-slate-400);
    font-size: 14px;
}

/* Gallery Detail Overlay */
.gallery-detail-modal {
    background: var(--gg-white);
    border-radius: var(--gg-radius);
    max-width: 800px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--gg-shadow-lg);
    position: relative;
    padding: 32px;
}
.gallery-detail-modal.is-maximized {
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    padding: 24px;
}
.gallery-detail-modal.is-maximized .gallery-detail-content {
    min-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
}
.gallery-detail-modal.is-maximized .gallery-detail-image,
.gallery-detail-modal.is-maximized .gallery-detail-panels,
.gallery-detail-modal.is-maximized .gallery-detail-video {
    flex: 1;
    min-height: 0;
}
.gallery-detail-modal.is-maximized .gallery-detail-image {
    display: flex;
    align-items: center;
    justify-content: center;
}
.gallery-detail-modal.is-maximized .gallery-detail-image img,
.gallery-detail-modal.is-maximized .gallery-detail-image video,
.gallery-detail-modal.is-maximized .gallery-detail-video video {
    max-width: 100%;
    max-height: calc(100vh - 260px);
    object-fit: contain;
}
.gallery-detail-close,
.gallery-detail-maximize {
    position: absolute;
    top: 12px;
    background: none;
    border: none;
    color: var(--gg-slate-400);
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.gallery-detail-close {
    right: 12px;
    font-size: 24px;
}
.gallery-detail-maximize {
    right: 52px;
}
.gallery-detail-close:hover,
.gallery-detail-maximize:hover {
    background: var(--gg-slate-100);
    color: var(--gg-slate-700);
}
.gallery-detail-maximize-icon {
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-radius: 3px;
    display: block;
    position: relative;
}
.gallery-detail-maximize.is-restore .gallery-detail-maximize-icon {
    transform: translate(2px, -2px);
}
.gallery-detail-maximize.is-restore .gallery-detail-maximize-icon::after {
    content: '';
    position: absolute;
    width: 11px;
    height: 11px;
    border: 2px solid currentColor;
    border-radius: 3px;
    left: -7px;
    bottom: -7px;
    background: var(--gg-white);
}
.gallery-detail-header h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--gg-slate-900);
    margin: 0 0 8px;
}
.gallery-detail-creator {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--gg-slate-500);
}
.gallery-social-links {
    display: flex;
    gap: 8px;
    font-size: 12px;
}
.gallery-detail-image,
.gallery-detail-panels {
    margin: 20px 0;
}
.gallery-detail-image img,
.gallery-detail-image video {
    display: block;
    max-width: 100%;
    border-radius: 8px;
    margin: 0 auto;
}
.gallery-detail-panels {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}
.gallery-detail-panel img {
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--gg-slate-200);
}
.gallery-detail-beat {
    font-size: 12px;
    color: var(--gg-slate-500);
    margin-top: 6px;
    line-height: 1.4;
}
.gallery-detail-video {
    margin: 16px 0;
}
.gallery-detail-preview {
    background: var(--gg-slate-50);
    border-radius: var(--gg-radius-sm);
    padding: 16px;
    margin: 16px 0;
}
.gallery-detail-preview p {
    font-size: 13px;
    color: var(--gg-slate-600);
    line-height: 1.5;
    margin: 0;
}
.gallery-detail-remixed {
    font-size: 12px;
    color: var(--gg-slate-400);
    margin: 12px 0;
}
.gallery-detail-remixed a {
    color: var(--gg-emerald);
}
.gallery-detail-style-tag {
    font-size: 12px;
    color: var(--gg-slate-400);
    margin: 8px 0;
}
.gallery-detail-style-tag strong {
    color: var(--gg-slate-300);
}
.gallery-detail-actions-bar {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

/* ============================================================
   PUBLISH MODAL STYLES
   ============================================================ */
.publish-modal {
    background: var(--gg-white);
    border-radius: var(--gg-radius);
    max-width: 480px;
    width: 95%;
    box-shadow: var(--gg-shadow-lg);
    overflow: hidden;
}
.publish-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--gg-slate-200);
}
.publish-modal-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--gg-slate-900);
    margin: 0;
}
.publish-modal-close {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--gg-slate-400);
    cursor: pointer;
}
.publish-modal-close:hover { color: var(--gg-slate-700); }
.publish-modal-body {
    padding: 20px 24px;
}
.publish-explainer {
    background: var(--gg-slate-50);
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-sm);
    color: var(--gg-slate-600);
    margin-bottom: 18px;
    padding: 14px 16px;
}
.publish-explainer strong {
    color: var(--gg-slate-800);
    display: block;
    font-size: 13px;
    margin-bottom: 6px;
}
.publish-explainer p {
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}
.publish-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--gg-slate-700);
    margin-bottom: 6px;
}
.publish-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-xs);
    font-size: 14px;
    font-family: var(--gg-font);
    color: var(--gg-slate-800);
    background: var(--gg-white);
    margin-bottom: 16px;
    box-sizing: border-box;
}
.publish-input:focus {
    outline: none;
    border-color: var(--gg-emerald);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.1);
}
.publish-tags-wrap {
    margin-bottom: 16px;
}
.publish-tags-list {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.publish-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--gg-emerald-light);
    color: var(--gg-emerald-dark);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
}
.publish-tag-remove {
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    color: var(--gg-emerald-dark);
    padding: 0;
    line-height: 1;
}
.publish-hint {
    font-size: 13px;
    color: var(--gg-slate-400);
    margin: 0;
}
.publish-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--gg-slate-200);
}

/* ============================================================
   PROJECT SHARING MODAL
   ============================================================ */
.project-sharing-modal {
    background: var(--gg-white);
    border-radius: var(--gg-radius-sm);
    box-shadow: var(--gg-shadow-xl);
    max-height: 86vh;
    max-width: 720px;
    overflow: hidden;
    width: min(720px, calc(100vw - 32px));
}
.project-sharing-body {
    display: grid;
    gap: 14px;
    max-height: calc(86vh - 86px);
    overflow-y: auto;
    padding: 18px 22px 22px;
}
.sharing-section {
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-sm);
    padding: 14px;
}
.sharing-section-heading {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}
.sharing-section-heading h3 {
    color: var(--gg-slate-800);
    font-size: 15px;
    margin: 0 0 4px;
}
.sharing-section-heading p {
    color: var(--gg-slate-500);
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
}
.sharing-switch {
    cursor: pointer;
    flex: 0 0 auto;
    position: relative;
}
.sharing-switch input {
    position: absolute;
    opacity: 0;
}
.sharing-switch span {
    background: var(--gg-slate-200);
    border-radius: 999px;
    display: block;
    height: 24px;
    position: relative;
    transition: var(--gg-transition);
    width: 44px;
}
.sharing-switch span::after {
    background: var(--gg-white);
    border-radius: 50%;
    box-shadow: var(--gg-shadow-sm);
    content: '';
    height: 18px;
    left: 3px;
    position: absolute;
    top: 3px;
    transition: var(--gg-transition);
    width: 18px;
}
.sharing-switch input:checked + span {
    background: var(--gg-emerald);
}
.sharing-switch input:checked + span::after {
    transform: translateX(20px);
}
.sharing-switch input:disabled + span {
    cursor: not-allowed;
    opacity: 0.55;
}
.sharing-link-row,
.sharing-add-row {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}
.sharing-link-row {
    grid-template-columns: minmax(0, 1fr) auto;
}
.sharing-add-row {
    grid-template-columns: minmax(0, 1fr) 120px auto;
}
.sharing-link-row input,
.sharing-add-row input,
.sharing-add-row select,
.permission-role-select {
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-xs);
    color: var(--gg-slate-800);
    font-family: var(--gg-font);
    font-size: 13px;
    min-height: 38px;
    padding: 8px 10px;
}
.sharing-link-row input:read-only {
    background: var(--gg-slate-50);
    color: var(--gg-slate-600);
}
.project-permissions-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}
.permission-row {
    align-items: center;
    border: 1px solid var(--gg-slate-100);
    border-radius: var(--gg-radius-xs);
    display: grid;
    gap: 10px;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    padding: 9px;
}
.permission-avatar {
    align-items: center;
    background: var(--gg-emerald-light);
    border-radius: 50%;
    color: var(--gg-emerald-dark);
    display: flex;
    font-size: 13px;
    font-weight: 800;
    height: 34px;
    justify-content: center;
    width: 34px;
}
.permission-person {
    min-width: 0;
}
.permission-person strong,
.permission-person span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.permission-person strong {
    color: var(--gg-slate-800);
    font-size: 13px;
}
.permission-person span {
    color: var(--gg-slate-500);
    font-size: 12px;
}
.permission-actions {
    align-items: center;
    display: flex;
    gap: 8px;
}
.permission-role-pill {
    background: var(--gg-slate-100);
    border-radius: 999px;
    color: var(--gg-slate-600);
    font-size: 11px;
    font-weight: 800;
    padding: 5px 9px;
}
.permission-remove-btn {
    align-items: center;
    background: var(--gg-white);
    border: 1px solid var(--gg-slate-200);
    border-radius: 50%;
    color: var(--gg-slate-500);
    cursor: pointer;
    display: flex;
    height: 28px;
    justify-content: center;
    width: 28px;
}
.permission-remove-btn:hover {
    border-color: #fecaca;
    color: #dc2626;
}
.permission-empty {
    color: var(--gg-slate-500);
    font-size: 13px;
    padding: 8px 0;
}

/* ============================================================
   HISTORY CARD PUBLISH ACTIONS
   ============================================================ */
.history-card-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 7px 8px 7px 42px;
    border-bottom: 1px solid var(--gg-slate-200);
    background: color-mix(in srgb, var(--gg-white) 94%, var(--gg-slate-100));
}
.history-card-toolbar.no-status {
    justify-content: flex-end;
}
.history-card-toolbar-actions {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    justify-content: flex-end;
}
.history-contributor {
    color: var(--gg-slate-500);
    font-size: 12px;
    line-height: 1.3;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.publish-status-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 100px;
    background: var(--gg-emerald-light);
    color: var(--gg-emerald-dark);
}
.publish-action-btn {
    align-items: center;
    border-radius: 6px;
    border: 1px solid var(--gg-slate-200);
    background: var(--gg-white);
    color: var(--gg-slate-500);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--gg-font);
    height: 30px;
    justify-content: center;
    padding: 0;
    transition: var(--gg-transition);
    width: 30px;
}
.publish-action-btn:disabled,
.publish-action-btn.disabled {
    cursor: not-allowed;
    opacity: 0.45;
}
.publish-action-btn svg {
    fill: none;
    height: 16px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 16px;
}
.publish-action-btn:hover {
    background: var(--gg-white);
    border-color: var(--gg-emerald);
    color: var(--gg-emerald);
}
.publish-action-btn:disabled:hover,
.publish-action-btn.disabled:hover {
    border-color: var(--gg-slate-200);
    color: var(--gg-slate-500);
}
.history-card-toolbar .delete-btn-tile {
    position: static;
    opacity: 1;
    background: var(--gg-white);
    color: var(--gg-slate-500);
    border: 1px solid var(--gg-slate-200);
    border-radius: 6px;
    box-shadow: none;
    font-size: inherit;
}
.history-card-toolbar .delete-btn-tile:hover {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
    box-shadow: none;
    transform: none;
}
.history-card-toolbar .publish-btn {
    background: var(--gg-white);
    border-color: var(--gg-slate-200);
    color: var(--gg-slate-500);
}
.history-card-toolbar .publish-btn:hover {
    background: var(--gg-white);
    border-color: var(--gg-emerald);
    color: var(--gg-emerald);
}
.unpublish-btn:hover {
    border-color: #fecaca;
    color: #dc2626;
    background: #fef2f2;
}

/* ============================================================
   PUBLIC SHARED PROJECT VIEWER
   ============================================================ */
.shared-project-mode .top-menu,
.shared-project-mode .nav-toggle,
.shared-project-mode .user-info,
.shared-project-mode .top-banner,
.shared-project-mode #hero,
.shared-project-mode #app-workspace,
.shared-project-mode #history-view,
.shared-project-mode #gallery-view,
.shared-project-mode #acknowledgements-view,
.shared-project-mode #story-view,
.shared-project-mode #developer-view,
.shared-project-mode #side-menu,
.shared-project-mode #signupNotification {
    display: none !important;
}
.shared-project-view {
    background: var(--gg-slate-50);
    min-height: 100vh;
    padding: 32px 18px 56px;
}
.shared-project-shell {
    margin: 0 auto;
    max-width: 1120px;
}
.shared-project-loading,
.shared-project-error,
.shared-project-empty {
    background: var(--gg-white);
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-sm);
    color: var(--gg-slate-600);
    padding: 28px;
    text-align: center;
}
.shared-project-header,
.shared-project-section-title {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.shared-project-brand {
    color: var(--gg-slate-900);
    font-weight: 900;
    text-decoration: none;
}
.shared-project-mode-pill,
.shared-project-section-title span {
    background: var(--gg-emerald-light);
    border-radius: 999px;
    color: var(--gg-emerald-dark);
    font-size: 12px;
    font-weight: 800;
    padding: 5px 10px;
}
.shared-project-hero {
    background: var(--gg-white);
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-sm);
    margin-bottom: 22px;
    padding: 28px;
}
.shared-project-kicker {
    color: var(--gg-emerald-dark);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    margin: 0 0 8px;
    text-transform: uppercase;
}
.shared-project-hero h1 {
    color: var(--gg-slate-900);
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.05;
    margin: 0 0 12px;
}
.shared-project-hero p {
    color: var(--gg-slate-600);
    margin: 0;
    max-width: 760px;
}
.shared-project-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.shared-project-meta span {
    background: var(--gg-slate-100);
    border-radius: 999px;
    color: var(--gg-slate-600);
    font-size: 12px;
    font-weight: 800;
    padding: 5px 10px;
}
.shared-project-tags {
    margin-top: 16px;
}
.shared-project-section-title h2 {
    color: var(--gg-slate-900);
    margin: 0;
}
.shared-design-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.shared-design-card {
    background: var(--gg-white);
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-sm);
    overflow: hidden;
}
.shared-design-media {
    align-items: center;
    background: var(--gg-slate-100);
    color: var(--gg-slate-500);
    display: flex;
    height: 190px;
    justify-content: center;
    text-decoration: none;
}
.shared-design-media img,
.shared-design-media video {
    height: 100%;
    object-fit: contain;
    width: 100%;
}
.shared-design-media.media-missing img {
    display: none;
}
.shared-design-body {
    padding: 14px;
}
.shared-design-body h3 {
    color: var(--gg-slate-900);
    font-size: 15px;
    margin: 0 0 6px;
}
.shared-design-body p {
    color: var(--gg-slate-500);
    font-size: 13px;
    line-height: 1.4;
    margin: 0 0 10px;
}
.shared-design-link {
    color: var(--gg-emerald-dark);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}
.shared-gallery-badge {
    background: var(--gg-emerald);
    color: var(--gg-white);
}
.shared-card-placeholder {
    align-items: center;
    color: var(--gg-slate-500);
    display: flex;
    font-size: 13px;
    justify-content: center;
}
.shared-register-callout {
    background: var(--gg-slate-50);
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-sm);
    color: var(--gg-slate-600);
    display: grid;
    flex: 1 1 100%;
    gap: 8px;
    padding: 14px;
}
.shared-register-callout strong {
    color: var(--gg-slate-900);
}
.shared-register-callout span {
    font-size: 13px;
    line-height: 1.45;
}
.shared-register-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.publish-btn {
    background: var(--gg-emerald);
    color: white;
    border-color: var(--gg-emerald);
}
.publish-btn:hover {
    background: var(--gg-emerald-dark);
    border-color: var(--gg-emerald-dark);
    color: white;
}

@media (max-width: 640px) {
    .sharing-link-row,
    .sharing-add-row {
        grid-template-columns: 1fr;
    }
    .permission-row {
        grid-template-columns: 34px minmax(0, 1fr);
    }
    .permission-actions {
        grid-column: 2;
        justify-content: flex-start;
    }
}

/* ============================================================
   STYLE CARD ENHANCEMENTS
   ============================================================ */
.style-card-creator {
    font-size: 11px;
    color: var(--gg-emerald);
    font-weight: 500;
    padding: 0 10px;
}
.style-card-usage {
    font-size: 10px;
    color: var(--gg-slate-400);
    padding: 2px 10px 0;
}
.style-card-publish {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid var(--gg-emerald);
    background: var(--gg-emerald);
    color: white;
    cursor: pointer;
    font-family: var(--gg-font);
    transition: var(--gg-transition);
}
.style-card-publish:hover {
    background: var(--gg-emerald-dark);
    border-color: var(--gg-emerald-dark);
}

/* ============================================================
   STYLE MODAL — GALLERY TAB
   ============================================================ */
.style-gallery-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.style-gallery-sort-pills,
.style-gallery-type-pills {
    display: flex;
    gap: 6px;
}
.style-gallery-pill,
.style-gallery-type-pill {
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid var(--gg-slate-200);
    background: var(--gg-white);
    color: var(--gg-slate-500);
    font-size: 12px;
    font-weight: 600;
    font-family: var(--gg-font);
    cursor: pointer;
    transition: var(--gg-transition);
}
.style-gallery-pill:hover,
.style-gallery-type-pill:hover {
    border-color: var(--gg-slate-400);
    color: var(--gg-slate-700);
}
.style-gallery-pill.active,
.style-gallery-type-pill.active {
    background: var(--gg-emerald);
    border-color: var(--gg-emerald);
    color: white;
}
.style-gallery-card {
    position: relative;
}
.style-gallery-load-more {
    text-align: center;
    padding: 16px 0 4px;
}

/* ============================================================
   CREATOR PROFILE BUTTON (header)
   ============================================================ */
.creator-profile-btn {
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid var(--gg-emerald);
    background: transparent;
    color: var(--gg-emerald);
    font-size: 12px;
    font-weight: 600;
    font-family: var(--gg-font);
    cursor: pointer;
    transition: var(--gg-transition);
    white-space: nowrap;
}
.creator-profile-btn:hover {
    background: var(--gg-emerald);
    color: white;
}


/* ============================================================
   DEVELOPER VIEW
   ============================================================ */

#developer-view {
    display: none;
    padding: 40px 24px;
    max-width: 900px;
    margin: 0 auto;
    min-height: calc(100vh - 64px);
}
#developer-view.active { display: block; }

.gg-dev-container { width: 100%; }

.gg-dev-header { margin-bottom: 32px; }
.gg-dev-header h2 { font-size: 24px; font-weight: 700; color: var(--gg-slate-900); margin: 0 0 6px; }
.gg-dev-subtitle { font-size: 14px; color: var(--gg-slate-500); margin: 0; }

.gg-dev-section {
    background: var(--gg-white);
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-sm);
    padding: 24px;
    margin-bottom: 24px;
}
.gg-dev-section h3 { font-size: 16px; font-weight: 700; color: var(--gg-slate-900); margin: 0 0 4px; }
.gg-dev-section-desc { font-size: 13px; color: var(--gg-slate-500); margin: 0 0 16px; }

.gg-dev-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.gg-dev-keys-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.gg-dev-keys-table th {
    text-align: left;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gg-slate-500);
    border-bottom: 1px solid var(--gg-slate-200);
}
.gg-dev-keys-table td {
    padding: 12px 12px;
    border-bottom: 1px solid var(--gg-slate-100);
    color: var(--gg-slate-700);
    vertical-align: middle;
}
.gg-dev-keys-table tr:last-child td { border-bottom: none; }

.gg-dev-scope-tag {
    display: inline-block;
    padding: 2px 8px;
    background: var(--gg-emerald-light);
    color: var(--gg-emerald-dark);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    margin: 2px 2px;
}
.gg-dev-status {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}
.gg-dev-status-active { background: var(--gg-emerald-light); color: var(--gg-emerald-dark); }
.gg-dev-status-revoked { background: #fee2e2; color: #dc2626; }
.gg-dev-status-expired { background: var(--gg-slate-100); color: var(--gg-slate-500); }

.gg-dev-action-revoke {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--gg-slate-400);
    border-radius: 4px;
    transition: color var(--gg-transition), background var(--gg-transition);
}
.gg-dev-action-revoke:hover { color: #dc2626; background: #fee2e2; }

.gg-dev-empty {
    text-align: center;
    padding: 32px;
    color: var(--gg-slate-500);
    font-size: 14px;
}
.gg-dev-spinner {
    width: 28px; height: 28px;
    border: 3px solid var(--gg-slate-200);
    border-top-color: var(--gg-emerald);
    border-radius: 50%;
    animation: gg-spin 0.7s linear infinite;
    margin: 0 auto;
}

.gg-dev-endpoint-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 10px 14px;
    background: var(--gg-slate-50);
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-xs);
}
.gg-dev-endpoint-label { font-size: 12px; font-weight: 600; color: var(--gg-slate-500); white-space: nowrap; }
.gg-dev-endpoint-url { flex: 1; font-size: 13px; color: var(--gg-slate-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.gg-dev-mcp-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 0;
    border-bottom: 2px solid var(--gg-slate-200);
}
.gg-dev-mcp-tab {
    background: none;
    border: none;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gg-slate-500);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color var(--gg-transition), border-color var(--gg-transition);
}
.gg-dev-mcp-tab:hover { color: var(--gg-slate-800); }
.gg-dev-mcp-tab.active { color: var(--gg-emerald-dark); border-bottom-color: var(--gg-emerald); font-weight: 600; }

.gg-dev-mcp-panels { margin-top: 0; }
.gg-dev-mcp-panel { display: none; padding: 16px 0 0; }
.gg-dev-mcp-panel.active { display: block; }
.gg-dev-panel-desc { font-size: 13px; color: var(--gg-slate-600); margin: 0 0 10px; }
.gg-dev-panel-desc code { background: var(--gg-slate-100); padding: 1px 4px; border-radius: 3px; font-size: 12px; }

.gg-dev-code-wrap {
    position: relative;
    background: var(--gg-slate-900);
    border-radius: var(--gg-radius-xs);
    overflow: hidden;
}
.gg-dev-code-wrap pre {
    margin: 0;
    padding: 14px 40px 14px 14px;
    overflow-x: auto;
}
.gg-dev-code-wrap code {
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
    color: #e2e8f0;
    white-space: pre;
}
.gg-dev-copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gg-slate-400);
    padding: 4px;
    border-radius: 4px;
    transition: color var(--gg-transition);
    flex-shrink: 0;
}
.gg-dev-copy-btn:hover { color: var(--gg-emerald); }
.gg-dev-copy-abs {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255,255,255,0.08);
    padding: 5px;
    border-radius: 4px;
}
.gg-dev-copy-abs:hover { background: rgba(255,255,255,0.15); color: white; }

.gg-dev-tools-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.gg-dev-tool-item {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 12px;
    align-items: baseline;
    padding: 8px 12px;
    background: var(--gg-slate-50);
    border-radius: var(--gg-radius-xs);
    font-size: 13px;
}
.gg-dev-tool-item code {
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
    color: var(--gg-emerald-dark);
    font-weight: 600;
}
.gg-dev-tool-item span { color: var(--gg-slate-600); }

.gg-dev-modal-card {
    background: var(--gg-white);
    border-radius: var(--gg-radius);
    box-shadow: var(--gg-shadow-lg);
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    overflow: hidden;
}
.gg-dev-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--gg-slate-100);
}
.gg-dev-modal-header h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--gg-slate-900); }
.gg-dev-modal-close {
    background: none; border: none; font-size: 22px; cursor: pointer;
    color: var(--gg-slate-400); line-height: 1; padding: 0 4px;
}
.gg-dev-modal-close:hover { color: var(--gg-slate-800); }

.gg-dev-modal-body { padding: 20px 24px 24px; }
.gg-dev-field { margin-bottom: 16px; }
.gg-dev-field label { display: block; font-size: 13px; font-weight: 600; color: var(--gg-slate-700); margin-bottom: 6px; }
.gg-dev-field input[type=text],
.gg-dev-field select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-xs);
    font-size: 14px;
    color: var(--gg-slate-800);
    background: var(--gg-white);
    box-sizing: border-box;
    transition: border-color var(--gg-transition);
}
.gg-dev-field input[type=text]:focus,
.gg-dev-field select:focus { outline: none; border-color: var(--gg-emerald); }

.gg-dev-scopes-grid { display: flex; flex-direction: column; gap: 8px; }
.gg-dev-scope-item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: start;
    padding: 10px 12px;
    background: var(--gg-slate-50);
    border: 1px solid var(--gg-slate-200);
    border-radius: var(--gg-radius-xs);
    cursor: pointer;
}
.gg-dev-scope-item input { grid-row: 1 / 3; margin-top: 2px; accent-color: var(--gg-emerald); }
.gg-dev-scope-name { font-size: 13px; font-weight: 600; color: var(--gg-emerald-dark); font-family: monospace; }
.gg-dev-scope-desc { grid-column: 2; font-size: 12px; color: var(--gg-slate-500); }

.gg-dev-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

.gg-dev-key-warning {
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: var(--gg-radius-xs);
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #92400e;
}

@media (max-width: 600px) {
    #developer-view { padding: 16px; }
    .gg-dev-tool-item { grid-template-columns: 1fr; }
    .gg-dev-section { padding: 16px; }
}