/* ===================================
   COMPONENTS - Ultra Premium UI Elements
   =================================== */

/* ===== SIDEBAR ===== */
.sidebar {
    width: var(--sidebar-width);
    background: var(--color-bg-secondary);
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
    overflow-y: auto;
}

/* ===== NAVIGATION MENU ===== */
.nav-menu {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
}

.nav-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.nav-group.nav-primary .nav-item {
    font-weight: var(--font-weight-medium);
    opacity: 1;
}

.nav-group.nav-secondary .nav-item {
    font-weight: var(--font-weight-normal);
    opacity: 0.8;
}

.nav-group.nav-tertiary {
    margin-top: var(--spacing-2xl);
    position: relative;
}

.nav-group.nav-tertiary::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--spacing-lg));
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: var(--border-color-primary);
    opacity: 0.3;
}

.nav-group.nav-tertiary .nav-item {
    font-weight: var(--font-weight-normal);
    opacity: 0.5;
}

.nav-group.nav-footer {
    margin-bottom: var(--spacing-lg);
    position: relative;
}

.nav-group.nav-footer .nav-item {
    font-weight: var(--font-weight-normal);
    opacity: 0.6;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: all 140ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border: 1px solid transparent;
}

.nav-item:hover {
    background: var(--color-bg-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.nav-item.active {
    background: rgba(79, 70, 229, 0.06);
    border-color: rgba(79, 70, 229, 0.12);
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--color-brand-primary);
    border-radius: 0 2px 2px 0;
}

.nav-highlight {
    background: rgba(79, 70, 229, 0.04);
    border: 1px solid rgba(79, 70, 229, 0.08);
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.06);
}

.nav-highlight:hover {
    background: rgba(79, 70, 229, 0.08);
    border-color: rgba(79, 70, 229, 0.15);
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.12);
}

.nav-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-text-secondary);
    transition: color 140ms ease;
}

.nav-item:hover .nav-icon,
.nav-item.active .nav-icon {
    color: var(--color-brand-primary);
}

.nav-label {
    font-size: var(--font-size-base);
    font-weight: inherit;
    letter-spacing: var(--letter-spacing-normal);
}

/* ===== SIDEBAR FOOTER ===== */
.sidebar-footer {
    margin-top: auto;
    padding-top: var(--spacing-lg);
}

.credits-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 140ms ease;
}

.credits-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.credits-icon {
    width: 14px;
    height: 14px;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

.credits-text {
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-normal);
}

/* ===== HEADER ===== */
.header {
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: var(--spacing-xs);
}

.subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    font-weight: var(--font-weight-normal);
    letter-spacing: var(--letter-spacing-normal);
}

.sidebar-subtitle {
    font-size: 10px;
    color: #C0C0C0;
    text-align: center;
    margin: 0;
    padding-top: 4px;
    font-weight: var(--font-weight-normal);
    letter-spacing: var(--letter-spacing-normal);
}

/* Light theme: darker subtitle */
.light-theme .sidebar-subtitle {
    color: var(--color-text-secondary);
}

/* ===== SECTIONS ===== */
.section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.section-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

/* ===== TOGGLE OPTION ===== */
.toggle-option {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color-primary);
    transition: all var(--transition-base);
}

.toggle-option:hover {
    border-color: var(--border-color-secondary);
    background: var(--color-bg-hover);
}

.toggle-option label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
}

.toggle-option input[type="checkbox"] {
    width: 44px;
    height: 24px;
    appearance: none;
    background: var(--color-bg-hover);
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: all var(--transition-base);
    border: 1px solid var(--border-color-secondary);
}

.toggle-option input[type="checkbox"]::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-text-tertiary);
    top: 2px;
    left: 2px;
    transition: all var(--transition-base);
}

.toggle-option input[type="checkbox"]:checked {
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
}

.toggle-option input[type="checkbox"]:checked::before {
    left: 22px;
    background: white;
}

.toggle-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    line-height: 1.5;
    letter-spacing: var(--letter-spacing-normal);
}

/* ===== BUTTONS ===== */
.btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family);
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    letter-spacing: var(--letter-spacing-normal);
}

/* Simple hover/click animations for buttons */
.btn {
    transition: transform 140ms cubic-bezier(.2,.8,.2,1), box-shadow 140ms cubic-bezier(.2,.8,.2,1), opacity 120ms linear;
}
.btn:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 8px 20px rgba(2,6,23,0.35);
}
.btn:active:not(:disabled) {
    transform: translateY(0) scale(0.995);
    opacity: 0.95;
}
.btn:focus {
    outline: 2px solid rgba(79,70,229,0.12);
}

.btn svg {
    width: 18px;
    height: 18px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-secondary) 100%);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-brand);
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg), var(--shadow-brand);
}

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

.btn-primary:disabled {
    background: var(--color-bg-tertiary);
    color: var(--color-text-tertiary);
    cursor: not-allowed;
    box-shadow: none;
}

.btn-secondary {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    border: 1px solid var(--border-color-secondary);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--color-bg-hover);
    border-color: var(--color-brand-primary);
}

.btn-success {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-success);
}

.btn-success:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg), var(--shadow-success);
}

.btn-icon {
    padding: var(--spacing-sm);
    background: rgba(79, 70, 229, 0.1);
    border: 1px solid rgba(79, 70, 229, 0.2);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-brand-primary);
}

.btn-icon:hover {
    background: rgba(79, 70, 229, 0.15);
    transform: scale(1.05);
}

.btn-icon svg {
    width: 20px;
    height: 20px;
}

/* ===== INFO BOX ===== */
.info-box {
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(79, 70, 229, 0.05);
    border: 1px solid rgba(79, 70, 229, 0.1);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    line-height: 1.6;
    letter-spacing: var(--letter-spacing-normal);
}

/* ===== STATUS ===== */
.preview-status {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    letter-spacing: var(--letter-spacing-normal);
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-text-tertiary);
}

.status-dot.active {
    background: var(--color-success);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

.status-dot.processing {
    background: var(--color-brand-primary);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.status-dot.error {
    background: var(--color-error);
}

/* ===== ERROR MESSAGE ===== */
.error-message {
    display: none;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-md);
    color: var(--color-error-light);
    font-size: var(--font-size-sm);
    margin: var(--spacing-md) var(--spacing-lg);
    animation: slideUp var(--transition-slow) ease-out;
}

.error-message.active {
    display: block;
}

/* ===== TOAST NOTIFICATIONS ===== */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    pointer-events: none;
}

.toast-notification {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--border-color-primary);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    cursor: pointer;
    transition: all var(--transition-base);
    animation: slideInRight 0.3s ease-out;
    max-width: 400px;
}

.toast-notification:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

.toast-notification.success {
    border-color: var(--color-success);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
}

.toast-notification.error {
    border-color: var(--color-error);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
}

.toast-notification.info {
    border-color: var(--color-brand-primary);
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.1) 0%, rgba(79, 70, 229, 0.05) 100%);
}

.toast-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-notification.success .toast-icon {
    background: var(--color-success);
    color: white;
}

.toast-notification.error .toast-icon {
    background: var(--color-error);
    color: white;
}

.toast-notification.info .toast-icon {
    background: var(--color-brand-primary);
    color: white;
}

.toast-message {
    flex: 1;
    line-height: 1.4;
}

.toast-close {
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: 2px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.toast-close:hover {
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.1);
}

.toast-notification.fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}

/* Toast animations */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

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

/* ===== PREMIUM CREDITS ===== */
.premium-section {
    margin-top: auto; /* push to bottom of sidebar */
}

.premium-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color-primary);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    transition: all var(--transition-base);
}

.premium-info:hover {
    border-color: var(--border-color-secondary);
    background: var(--color-bg-hover);
}

.premium-icon {
    width: 16px;
    height: 16px;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

.premium-text {
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-normal);
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .toast-container {
        top: 10px;
        right: 10px;
        left: 10px;
    }

    .toast-notification {
        max-width: none;
    }
}

/* ===== SETTINGS MENU ===== */
.settings-menu {
    position: relative;
    display: flex;
    align-items: center;
}

.settings-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--spacing-sm);
    background: var(--color-bg-secondary);
    border: 1px solid var(--border-color-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    z-index: var(--z-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-base);
    padding: var(--spacing-md);
}

.settings-dropdown[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.settings-header {
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color-primary);
    margin-bottom: var(--spacing-sm);
}

.settings-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.settings-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.settings-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    text-align: left;
    width: 100%;
}

.settings-option:hover {
    background: var(--color-bg-hover);
}

.settings-option.active {
    background: rgba(79, 70, 229, 0.1);
    color: var(--color-brand-primary);
    border: 1px solid rgba(79, 70, 229, 0.2);
}

.settings-option .theme-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ===== OVERVIEW STEPS ===== */
.overview-steps {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-2xl);
}

.steps-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    text-align: center;
    margin: 0 0 var(--spacing-md) 0;
    letter-spacing: var(--letter-spacing-tight);
}

.steps-subtitle {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    text-align: center;
    margin: 0 0 var(--spacing-2xl) 0;
    line-height: 1.5;
    letter-spacing: var(--letter-spacing-normal);
}

.steps-container {
    display: flex;
    gap: var(--spacing-xl);
    justify-content: center;
}

.step-card {
    flex: 1;
    max-width: 280px;
    padding: var(--spacing-xl);
    background: var(--color-bg-secondary);
    border: 1px solid var(--border-color-primary);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: all var(--transition-base);
}

.step-card:hover {
    background: var(--color-bg-hover);
    transform: translateY(-2px);
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(79, 70, 229, 0.1);
    color: var(--color-brand-primary);
    border-radius: 50%;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-md);
    letter-spacing: var(--letter-spacing-normal);
}

.step-icon {
    width: 48px;
    height: 48px;
    color: var(--color-text-secondary);
    margin: 0 auto var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-icon svg {
    width: 24px;
    height: 24px;
}

.step-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-sm) 0;
    letter-spacing: var(--letter-spacing-tight);
}

.step-description {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
    letter-spacing: var(--letter-spacing-normal);
}

/* ===== OVERVIEW VALUE ===== */
.overview-value {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-2xl);
}

.value-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    text-align: center;
    margin: 0 0 var(--spacing-2xl) 0;
    letter-spacing: var(--letter-spacing-tight);
}

.value-container {
    display: flex;
    gap: var(--spacing-xl);
    justify-content: center;
}

.value-card {
    flex: 1;
    max-width: 280px;
    padding: var(--spacing-xl);
    background: transparent;
    border: none;
    border-radius: var(--radius-lg);
    text-align: center;
    transition: background-color var(--transition-base);
}

.value-card:hover {
    background: rgba(255, 255, 255, 0.02);
}

.value-icon {
    width: 48px;
    height: 48px;
    color: var(--color-text-secondary);
    margin: 0 auto var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.value-icon svg {
    width: 24px;
    height: 24px;
}

.value-title-card {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-sm) 0;
    letter-spacing: var(--letter-spacing-tight);
}

.value-description {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
    letter-spacing: var(--letter-spacing-normal);
}

/* ===== OVERVIEW EVENT TYPES ===== */
.overview-event-types {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-2xl);
}

.event-types-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    text-align: center;
    margin: 0 0 var(--spacing-md) 0;
    letter-spacing: var(--letter-spacing-tight);
}

.event-types-subtitle {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    text-align: center;
    margin: 0 0 var(--spacing-2xl) 0;
    line-height: 1.5;
    letter-spacing: var(--letter-spacing-normal);
}

.event-types-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    max-width: 1000px;
    margin: 0 auto;
}

.event-type-card {
    padding: var(--spacing-lg);
    background: var(--color-bg-secondary);
    border: 1px solid var(--border-color-primary);
    border-radius: var(--radius-lg);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.event-type-card:hover {
    background: var(--color-bg-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.event-type-icon {
    width: 48px;
    height: 48px;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.event-type-icon svg {
    width: 24px;
    height: 24px;
}

.event-type-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: var(--letter-spacing-tight);
}

.event-type-description {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0;
    letter-spacing: var(--letter-spacing-normal);
}

/* ===== OVERVIEW HERO ===== */
.overview-hero {
    min-height: 420px;
    height: auto;
    background: var(--color-bg-primary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color-primary);
    margin-bottom: var(--spacing-xl);
    display: flex;
    align-items: center;
    padding: var(--spacing-2xl);
}

.hero-content {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--spacing-lg);
    align-items: center;
}

.hero-text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.hero-headline {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: 1.2;
    margin: 0;
    letter-spacing: var(--letter-spacing-tight);
}

.hero-subheadline {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
    letter-spacing: var(--letter-spacing-normal);
}

.hero-cta {
    align-self: flex-start;
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
    background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-hover) 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
}

.hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.35);
}

/* Light theme button harmony */
.light-theme .hero-cta {
    background: linear-gradient(135deg, var(--color-brand-primary) 0%, #3B82F6 100%);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.light-theme .hero-cta:hover {
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
}

.hero-microcopy {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin: 0;
    font-weight: var(--font-weight-normal);
    letter-spacing: var(--letter-spacing-normal);
}

.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.gallery-preview {
    background: var(--color-bg-secondary);
    border: 1px solid var(--border-color-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--spacing-sm);
    width: 200px;
    height: 150px;
}

.gallery-item {
    background: linear-gradient(135deg, var(--color-bg-hover) 0%, var(--color-bg-tertiary) 100%);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color-primary);
}

/* ===== LOADING ===== */
.loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 11, var(--backdrop-opacity));
    backdrop-filter: blur(var(--backdrop-blur));
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--spacing-lg);
    z-index: 10;
}

/* ===== AUTH MODAL & OVERLAY ===== */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6,6,8,0.6);
  backdrop-filter: blur(4px);
  z-index: 1000;
}

/* Vidro extra independente, usado apenas quando o modal premium aparece */
.premium-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  z-index: 1002; /* acima do auth-modal (1001) e abaixo do premium-modal (1003) */
}

.auth-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  width: 420px;
  max-width: calc(100% - 32px);
  font-family: var(--font-family);
}

/* Premium error modal (larger, centered overlay that sits above the auth modal) */
.premium-modal {
  z-index: 1003; /* acima do auth-modal e do premium-overlay */
  width: 520px;
  max-width: calc(100% - 32px);
}

.premium-modal .auth-card {
  padding: 28px;
  border-radius: 14px;
}

.premium-modal .premium-title{
  font-size:18px;
  font-weight:700;
  margin-bottom:8px;
}

.premium-modal .premium-message{
  color: var(--color-text-tertiary);
  font-size:14px;
  margin-bottom:18px;
  line-height:1.45;
}

.premium-modal .premium-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  margin-top:16px;
  flex-wrap:wrap;
  flex-direction:column;
}

.premium-modal .premium-actions .btn{
  width:100%;
  padding: var(--spacing-sm) var(--spacing-lg);
  text-align:center;
}

.premium-modal .premium-actions .btn-primary{
  order:3;
}

.premium-modal .premium-actions .btn-secondary{
  order:1;
}

.premium-modal .premium-actions .btn-secondary:last-of-type{
  order:2;
}

@media (min-width:520px){
  .premium-modal .premium-actions{
    flex-direction:row;
    justify-content:flex-end;
  }
  .premium-modal .premium-actions .btn{
    width:auto;
    min-width:140px;
  }
}

@media (max-width:520px){
  .premium-modal{ width: calc(100% - 24px); left:50%; transform:translate(-50%,-50%); }
  .premium-modal .premium-actions{ justify-content:stretch; }
  .premium-modal .premium-actions .btn{ width:100%; }
}

.auth-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  padding: 24px;
  border-radius: 12px;
  color: var(--color-text-primary);
  box-shadow: 0 8px 32px rgba(2,6,23,0.6);
}

.auth-header h2 { margin: 0 0 6px 0; font-size: 20px; }
.auth-header .muted { color: var(--color-text-tertiary); font-size: 13px; }

.auth-body .field { margin-bottom: 12px; display: flex; flex-direction: column; }
.auth-body label { font-size: 12px; color: var(--color-text-tertiary); margin-bottom: 6px; }
.auth-body input { padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); color: var(--color-text-primary); }

.auth-body input.input-error {
    border-color: var(--color-error);
    background: rgba(239, 68, 68, 0.05);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
}

/* Code boxes */
.code-boxes { display:flex; gap:10px; justify-content:center; margin-top:8px; }
.code-box { width:48px; height:56px; text-align:center; font-size:20px; border-radius:10px; border:1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.01); color: var(--color-text-primary); outline: none; transition: box-shadow 0.18s, border-color 0.18s; }
.code-box:focus { box-shadow: 0 6px 20px rgba(79,70,229,0.12); border-color: var(--color-brand-primary); }
.code-box.filled { background: rgba(79,70,229,0.06); }

.code-box[disabled] { opacity:0.5; }

.auth-close { background: transparent; border: none; color: var(--color-text-tertiary); font-size: 20px; position: absolute; right: 12px; top: 10px; cursor: pointer; }

.actions { 
  display: flex; 
  gap: 24px; 
  justify-content: space-between;
  align-items: center;
  margin-top: 8px; 
}
.actions .link { background: transparent; color: var(--color-text-tertiary); border: none; padding: 10px; }

/* make login button float to the right within actions when visible */
.actions #login-from-register { margin-left: auto; }

.hidden { display:none !important; }

/* Light theme auth modal contrast fixes */
.light-theme .auth-overlay {
  background: rgba(226, 235, 255, 0.72);
  backdrop-filter: blur(10px);
}

.light-theme .premium-backdrop {
  background: rgba(209, 221, 250, 0.78);
}

.light-theme .auth-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 255, 0.92)),
    var(--color-surface-elevated);
  border: 1px solid rgba(83, 104, 255, 0.18);
  box-shadow:
    0 24px 60px rgba(83, 104, 255, 0.16),
    0 10px 28px rgba(15, 23, 42, 0.08);
}

.light-theme .auth-header h2,
.light-theme .premium-modal .premium-title {
  color: var(--color-text-primary);
}

.light-theme .auth-header .muted,
.light-theme .premium-modal .premium-message {
  color: var(--color-text-secondary);
}

.light-theme .auth-body input,
.light-theme .auth-body select,
.light-theme .auth-body textarea {
  border-color: rgba(83, 104, 255, 0.18);
  background: rgba(255, 255, 255, 0.96);
  color: var(--color-text-primary);
}

.light-theme .auth-body input::placeholder,
.light-theme .auth-body textarea::placeholder {
  color: #7f8cab;
}

.light-theme .auth-body input:focus,
.light-theme .auth-body select:focus,
.light-theme .auth-body textarea:focus {
  border-color: rgba(83, 104, 255, 0.48);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(83, 104, 255, 0.12);
}

.light-theme .code-box {
  border-color: rgba(83, 104, 255, 0.2);
  background: rgba(255, 255, 255, 0.98);
  color: var(--color-text-primary);
}

.light-theme .code-box.filled {
  background: rgba(83, 104, 255, 0.08);
}

.light-theme .auth-close,
.light-theme .actions .link {
  color: var(--color-text-secondary);
}

.light-theme .actions .link:hover,
.light-theme .actions .link:focus-visible,
.light-theme .auth-close:hover,
.light-theme .auth-close:focus-visible {
  color: var(--color-brand-primary);
}

.light-theme .actions .link {
  background: rgba(83, 104, 255, 0.06);
  border: 1px solid rgba(83, 104, 255, 0.12);
}

.light-theme .actions .link:hover:not(:disabled),
.light-theme .actions .link:focus-visible {
  background: rgba(83, 104, 255, 0.1);
  border-color: rgba(83, 104, 255, 0.22);
}

.light-theme #auth-error {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.18);
}

.loading-overlay.active {
    display: flex;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-bg-tertiary);
    border-top-color: var(--color-brand-primary);
    border-radius: 50%;
    animation: spin 800ms linear infinite;
}

.loading-text {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    text-align: center;
    letter-spacing: var(--letter-spacing-normal);
}

.timer-display {
    font-size: var(--font-size-sm);
    color: var(--color-brand-primary);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--letter-spacing-wide);
}
/* Force visible when not hidden and position under the validate button wrapper */
.actions > div > .timer-display{
  margin-top:8px;
  display:inline-block;
}

/* header user menu styles (added) */
.user-menu{ position:relative; display:flex; align-items:center; }
.user-controls{ display:flex; align-items:center; gap:8px; }
.user-name{ max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.user-sep{ color:var(--color-text-tertiary); }
.user-controls .btn.link{ background:transparent; border:0; color:var(--color-text-primary); padding:6px 8px; }

/* site logo sizing for toolbar */
.site-logo{
  width: 140px;
  height: 83px;
  max-width: 140px;
  max-height: 83px;
  object-fit: contain; /* show full rectangular logo */
  border-radius: 0; /* keep rectangular */
  display: block;
  flex: 0 0 140px; /* keep space in toolbar for logo width */
}

/* high-density screens: keep same visual size (avoid unexpected doubling) */
@media (min-resolution:192dpi), (-webkit-min-device-pixel-ratio:2){
  .site-logo{ width:140px; height:83px; }
}

/* responsive: reduce logo size on small screens */
@media (max-width:720px){
  .site-logo{ width:48px; height:48px; flex:0 0 48px; }
}

/* align toolbar items: title on left, user menu on right */
.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 12px 18px; border-bottom: 1px solid var(--border-color-primary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); background: var(--color-bg-secondary); }

/* sidebar logo (header) */
.sidebar-logo{
  width: 140px;
  height: 83px;
  object-fit: contain;
  display: block;
  margin-bottom: 0;
}

/* user menu minimal style */
.user-menu{ gap:10px; color:var(--color-text-tertiary); font-size:14px; }
.user-menu .btn.link{ color:var(--color-text-tertiary); padding:4px 6px; }
.user-menu .btn.link:hover{ color:var(--color-text-primary); text-decoration:underline; }

/* settings button in user menu */
.settings-menu .settings-btn {
    background: transparent;
    border: 0;
    color: var(--color-text-tertiary);
    padding: 4px 6px;
    font-size: 14px;
}

.settings-menu .settings-btn:hover {
    color: var(--color-text-primary);
    text-decoration: underline;
}

.settings-menu .settings-btn .settings-icon {
    width: 16px;
    height: 16px;
}

/* Profile menu dropdown (overrides for dynamically-created #profile-menu) */
#profile-menu{
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border: 1px solid var(--border-color-primary);
  box-shadow: var(--shadow-md);
  padding: 6px;
  border-radius: 8px;
  min-width: 160px;
  z-index: var(--z-dropdown);
}

#profile-menu .btn.link{
  display:block;
  width:100%;
  text-align:left;
  padding:6px 8px;
  font-size:var(--font-size-sm);
  color:var(--color-text-primary);
  background:transparent;
  border:none;
  border-radius:6px;
}

#profile-menu .btn.link:hover{
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
  text-decoration: none;
}

@media (max-width:720px){
  .user-name{ display:none; }
}



/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .overview-steps {
        padding: var(--spacing-xl);
    }

    .steps-container {
        gap: var(--spacing-lg);
    }

    .step-card {
        padding: var(--spacing-lg);
    }

    .overview-value {
        padding: var(--spacing-xl);
    }

    .value-container {
        gap: var(--spacing-lg);
    }

    .value-card {
        padding: var(--spacing-lg);
    }

    .overview-hero {
        height: auto;
        padding: var(--spacing-xl);
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .hero-text {
        order: 1;
        text-align: center;
    }

    .hero-visual {
        order: 2;
    }

    .hero-headline {
        font-size: var(--font-size-xl);
    }

    .hero-cta {
        align-self: center;
    }
}

@media (max-width: 768px) {
    .overview-steps {
        padding: var(--spacing-lg);
    }

    .steps-container {
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    .step-card {
        max-width: none;
        padding: var(--spacing-lg);
    }

    .overview-value {
        padding: var(--spacing-lg);
    }

    .value-container {
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    .value-card {
        max-width: none;
        padding: var(--spacing-lg);
    }

    .overview-event-types {
        padding: var(--spacing-lg);
    }

    .event-types-container {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: var(--spacing-md);
    }

    .event-type-card {
        padding: var(--spacing-md);
    }

    .overview-hero {
        padding: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
    }

    .hero-content {
        gap: var(--spacing-lg);
    }

    .hero-text {
        gap: var(--spacing-md);
    }

    .hero-headline {
        font-size: var(--font-size-lg);
        line-height: 1.3;
    }

    .hero-subheadline {
        font-size: var(--font-size-sm);
        line-height: 1.6;
    }

    .gallery-preview {
        padding: var(--spacing-md);
    }

    .gallery-grid {
        width: 180px;
        height: 135px;
    }
}

/* ===== PLACEHOLDER SECTION ===== */
.placeholder-section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: var(--spacing-2xl);
}

/* Modo placeholder: mostrar todos os botões */

.placeholder-hero {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xl);
}

.placeholder-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: var(--letter-spacing-tight);
}

.placeholder-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
}

.placeholder-icon {
    width: 80px;
    height: 80px;
    color: var(--color-text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
}

.placeholder-icon svg {
    width: 48px;
    height: 48px;
}

.placeholder-message {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin: 0;
    letter-spacing: var(--letter-spacing-normal);
}

.placeholder-submessage {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-tertiary);
    margin: 0;
    line-height: 1.5;
    letter-spacing: var(--letter-spacing-normal);
}

@media (max-width: 768px) {
    .placeholder-section {
        padding: var(--spacing-xl);
        min-height: 300px;
    }

    .placeholder-title {
        font-size: var(--font-size-xl);
    }

    .placeholder-message {
        font-size: var(--font-size-base);
    }

    .placeholder-submessage {
        font-size: var(--font-size-sm);
    }

    .placeholder-icon {
        width: 64px;
        height: 64px;
    }

    .placeholder-icon svg {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 480px) {
    .overview-hero {
        padding: var(--spacing-md);
        height: auto;
    }

    .hero-content {
        gap: var(--spacing-md);
    }

    .hero-text {
        gap: var(--spacing-sm);
    }

    .hero-headline {
        font-size: var(--font-size-base);
        line-height: 1.4;
    }

    .hero-subheadline {
        font-size: var(--font-size-xs);
        line-height: 1.7;
    }

    .hero-cta {
        padding: var(--spacing-sm) var(--spacing-lg);
        font-size: var(--font-size-sm);
    }

    .hero-microcopy {
        font-size: var(--font-size-xs);
    }

    .gallery-preview {
        padding: var(--spacing-sm);
    }

    .gallery-grid {
        width: 160px;
        height: 120px;
        gap: var(--spacing-xs);
    }
}

/* ===== WIZARD ===== */
.wizard-container {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-xl);
}

.wizard-header {
    margin-bottom: var(--spacing-2xl);
}

.wizard-progress {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.wizard-step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    opacity: 0.4;
    transition: opacity var(--transition-base);
}

.wizard-step-indicator.active {
    opacity: 1;
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    border-radius: 50%;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border: 2px solid var(--border-color-primary);
    transition: all var(--transition-base);
}

.wizard-step-indicator.active .step-number {
    background: var(--color-brand-primary);
    color: white;
    border-color: var(--color-brand-primary);
}

.step-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    font-weight: var(--font-weight-medium);
    text-align: center;
    letter-spacing: var(--letter-spacing-normal);
}

.wizard-content {
    margin-bottom: var(--spacing-2xl);
}

.wizard-step {
    background: var(--color-bg-secondary);
    border: 1px solid var(--border-color-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
}

.wizard-step-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.wizard-step-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: var(--letter-spacing-tight);
}

.wizard-step-content {
    max-width: 600px;
    margin: 0 auto;
}

.wizard-step-description {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    text-align: center;
    margin-bottom: var(--spacing-xl);
    line-height: 1.6;
    letter-spacing: var(--letter-spacing-normal);
}

.event-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
}

.event-type-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--color-bg-tertiary);
    border: 2px solid var(--border-color-primary);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    text-align: center;
}

.event-type-option:hover {
    border-color: var(--color-brand-primary);
    background: rgba(79, 70, 229, 0.05);
    transform: translateY(-2px);
}

.event-type-option .event-type-icon {
    width: 48px;
    height: 48px;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color var(--transition-base);
}

.event-type-option:hover .event-type-icon {
    color: var(--color-brand-primary);
}

.event-type-option .event-type-icon svg {
    width: 24px;
    height: 24px;
}

.event-type-option h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: var(--letter-spacing-tight);
}

.event-type-option p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
    letter-spacing: var(--letter-spacing-normal);
}

.wizard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--border-color-primary);
}

.wizard-btn-back {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    border: 1px solid var(--border-color-secondary);
}

.wizard-btn-back:hover:not(:disabled) {
    background: var(--color-bg-hover);
    border-color: var(--color-brand-primary);
}

.wizard-btn-next {
    margin-left: auto;
}

@media (max-width: 768px) {
    .wizard-container {
        padding: var(--spacing-lg);
    }

    .wizard-step {
        padding: var(--spacing-lg);
    }

    .wizard-progress {
        gap: var(--spacing-md);
    }

    .event-types-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .wizard-footer {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .wizard-btn-back {
        order: 2;
        width: 100%;
    }

    .wizard-btn-next {
        order: 1;
        width: 100%;
        margin-left: 0;
    }
}

/* ===== FORM ELEMENTS ===== */
.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-group label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
    letter-spacing: var(--letter-spacing-normal);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--border-color-primary);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    transition: all var(--transition-fast);
    letter-spacing: var(--letter-spacing-normal);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

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

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.event-details-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* ===== STEP SELECT TYPE ===== */
.step-select-type {
    max-width: 1000px;
    margin: 0 auto;
}

.step-select-type-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    text-align: center;
    margin: 0 0 var(--spacing-sm) 0;
    letter-spacing: var(--letter-spacing-tight);
}

.step-select-type-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    text-align: center;
    margin: 0 0 var(--spacing-2xl) 0;
    line-height: 1.6;
    letter-spacing: var(--letter-spacing-normal);
}

.step-select-type-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    position: relative;
}

.step-lateral-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    position: relative;
}

.step-lateral-nav-right {
    order: 2;
}

.step-lateral-btn {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    padding: var(--spacing-lg) var(--spacing-sm);
    min-height: 120px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

.step-lateral-btn svg {
    width: 16px;
    height: 16px;
    transform: rotate(90deg);
}

.step-lateral-btn:hover:not(:disabled) {
    transform: rotate(180deg) scale(1.05);
}

.step-lateral-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.event-types-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    max-width: 800px;
    margin: 0 auto;
}

.event-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--color-bg-secondary);
    border: 2px solid var(--border-color-primary);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all var(--transition-base);
    text-align: center;
    position: relative;
    min-height: 180px;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.event-type-card:hover {
    border-color: var(--color-brand-primary);
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.02) 0%, rgba(79, 70, 229, 0.05) 100%);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.12);
}

.event-type-card.selected {
    border-color: var(--color-brand-primary);
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.08) 0%, rgba(79, 70, 229, 0.12) 100%);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15), 0 4px 16px rgba(79, 70, 229, 0.1);
    transform: translateY(-2px);
}

.event-type-card.selected::after {
    content: '';
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    width: 24px;
    height: 24px;
    background: var(--color-brand-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

.event-type-card.selected::after {
    content: '✓';
}

.event-type-icon {
    width: 64px;
    height: 64px;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition-base);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color-primary);
}

.event-type-card:hover .event-type-icon,
.event-type-card.selected .event-type-icon {
    color: var(--color-brand-primary);
    background: rgba(79, 70, 229, 0.1);
    border-color: rgba(79, 70, 229, 0.3);
    transform: scale(1.1);
}

.event-type-icon svg {
    width: 32px;
    height: 32px;
}

.event-type-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1.3;
}

.event-type-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
    letter-spacing: var(--letter-spacing-normal);
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.wizard-footer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--border-color-primary);
}

.wizard-btn-secondary {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    border: 1px solid var(--border-color-secondary);
}

.wizard-btn-secondary:hover:not(:disabled) {
    background: var(--color-bg-hover);
    border-color: var(--color-brand-primary);
}

.wizard-btn-primary {
    background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-secondary) 100%);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-brand);
}

.wizard-btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg), var(--shadow-brand);
}

.wizard-btn-primary:disabled {
    background: var(--color-bg-tertiary);
    color: var(--color-text-tertiary);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

@media (max-width: 1024px) {
    .event-types-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: var(--spacing-lg);
    }
}

@media (max-width: 768px) {
    .event-types-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--spacing-lg);
    }

    .event-type-card {
        min-height: 180px;
        padding: var(--spacing-lg);
        gap: var(--spacing-md);
    }

    .event-type-icon {
        width: 56px;
        height: 56px;
    }

    .event-type-icon svg {
        width: 28px;
        height: 28px;
    }

    .wizard-footer-actions {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .wizard-btn-secondary {
        order: 2;
        width: 100%;
    }

    .wizard-btn-primary {
        order: 1;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .event-types-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .event-type-card {
        min-height: 160px;
        padding: var(--spacing-md);
    }

    .event-type-icon {
        width: 48px;
        height: 48px;
    }

    .event-type-icon svg {
        width: 24px;
        height: 24px;
    }

    .event-type-title {
        font-size: var(--font-size-base);
    }

    .event-type-description {
        font-size: var(--font-size-xs);
    }
}

/* ===== STEP DADOS BASICOS ===== */
.step-dados-basicos {
    max-width: 500px;
    margin: 0 auto;
}

.step-dados-basicos-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    text-align: center;
    margin: 0 0 var(--spacing-sm) 0;
    letter-spacing: var(--letter-spacing-tight);
}

.step-dados-basicos-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    text-align: center;
    margin: 0 0 var(--spacing-2xl) 0;
    line-height: 1.6;
    letter-spacing: var(--letter-spacing-normal);
}

.event-type-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(79, 70, 229, 0.1);
    border: 1px solid rgba(79, 70, 229, 0.2);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    color: var(--color-brand-primary);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-xl);
    letter-spacing: var(--letter-spacing-normal);
}

.event-type-badge-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.dados-basicos-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.dados-basicos-field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.dados-basicos-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-normal);
}

.dados-basicos-label.required::after {
    content: ' *';
    color: var(--color-error);
}

.dados-basicos-input,
.dados-basicos-textarea {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--border-color-primary);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    transition: all var(--transition-fast);
    letter-spacing: var(--letter-spacing-normal);
}

.dados-basicos-input:focus,
.dados-basicos-textarea:focus {
    outline: none;
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

.dados-basicos-input::placeholder,
.dados-basicos-textarea::placeholder {
    color: var(--color-text-tertiary);
}

.dados-basicos-textarea {
    resize: vertical;
    min-height: 80px;
}

.dados-basicos-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    line-height: 1.4;
    letter-spacing: var(--letter-spacing-normal);
}

@media (max-width: 768px) {
    .step-dados-basicos {
        padding: 0 var(--spacing-md);
    }

    .dados-basicos-form {
        gap: var(--spacing-md);
    }
}

/* ===== STEP CONFIRMACAO FINAL ===== */
.step-confirmacao-final {
    max-width: 600px;
    margin: 0 auto;
}

.step-confirmacao-final-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    text-align: center;
    margin: 0 0 var(--spacing-sm) 0;
    letter-spacing: var(--letter-spacing-tight);
}

.step-confirmacao-final-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    text-align: center;
    margin: 0 0 var(--spacing-2xl) 0;
    line-height: 1.6;
    letter-spacing: var(--letter-spacing-normal);
}

.confirmacao-resumo {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.resumo-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, var(--color-bg-tertiary) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid var(--border-color-primary);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.resumo-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border-color: rgba(79, 70, 229, 0.2);
}

.resumo-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    flex-shrink: 0;
}

.resumo-value {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    text-align: right;
    flex: 1;
    margin-left: var(--spacing-lg);
}

.event-type-badge-small {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.1) 0%, rgba(79, 70, 229, 0.05) 100%);
    border: 1px solid rgba(79, 70, 229, 0.2);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    color: var(--color-brand-primary);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-normal);
}

.event-type-badge-small .event-type-badge-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.confirmacao-info {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(16, 185, 129, 0.02) 100%);
    border: 1px solid rgba(16, 185, 129, 0.1);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-2xl);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.06);
}

.info-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.info-icon svg {
    width: 24px;
    height: 24px;
    color: white;
}

.info-text {
    flex: 1;
    color: var(--color-text-primary);
    line-height: 1.6;
    letter-spacing: var(--letter-spacing-normal);
}

.info-text p {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

.info-text ul {
    margin: 0;
    padding-left: var(--spacing-lg);
    list-style: none;
}

.info-text li {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xs);
    position: relative;
}

.info-text li::before {
    content: '✓';
    position: absolute;
    left: -20px;
    color: var(--color-success);
    font-weight: bold;
    font-size: var(--font-size-sm);
}

/* ===== WIZARD TOP HEADER ACTIONS ===== */
.wizard-top-actions {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--border-color-primary);
    padding: var(--spacing-sm) var(--spacing-xl);
    transition: all var(--transition-base);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

.wizard-top-actions.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.wizard-top-actions-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
}

.wizard-top-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-fast);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    letter-spacing: var(--letter-spacing-normal);
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-primary);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.wizard-top-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(79, 70, 229, 0.3);
    transform: translateY(-1px);
}

.wizard-top-btn:active:not(:disabled) {
    transform: translateY(0);
}

.wizard-top-btn svg {
    width: 16px;
    height: 16px;
}

.wizard-top-btn-primary {
    background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-secondary) 100%);
    color: white;
    border: none;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}

.wizard-top-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-secondary) 100%);
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.4);
    transform: translateY(-1px);
}

.wizard-top-btn-primary:disabled {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.4);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* ===== INLINE CARD ACTIONS ===== */
.card-inline-actions {
    display: none;
    margin-top: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.05) 0%, rgba(79, 70, 229, 0.02) 100%);
    border: 1px solid rgba(79, 70, 229, 0.1);
    border-radius: var(--radius-xl);
    animation: slideUp 0.3s ease-out;
}

.card-inline-actions.visible {
    display: block;
}

.card-inline-actions-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-lg);
}

.card-inline-btn {
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-base);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    letter-spacing: var(--letter-spacing-normal);
    min-width: 140px;
}

.card-inline-btn svg {
    width: 18px;
    height: 18px;
}

.card-inline-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-primary);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.card-inline-btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(79, 70, 229, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15);
}

.card-inline-btn-primary {
    background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-secondary) 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}

.card-inline-btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
}

.card-inline-btn-primary:disabled {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.4);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

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

@media (max-width: 768px) {
    .step-confirmacao-final {
        padding: 0 var(--spacing-md);
    }

    .confirmacao-resumo {
        gap: var(--spacing-md);
    }

    .resumo-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
        padding: var(--spacing-md);
    }

    .resumo-value {
        text-align: left;
        margin-left: 0;
    }

    .confirmacao-info {
        flex-direction: column;
        text-align: center;
        padding: var(--spacing-lg);
    }

    .info-icon {
        align-self: center;
    }

    .info-text ul {
        text-align: left;
    }

    .wizard-top-actions {
        padding: var(--spacing-sm) var(--spacing-md);
        margin: calc(-1 * var(--spacing-lg)) calc(-1 * var(--spacing-lg)) 0;
        margin-bottom: var(--spacing-md);
    }

    .wizard-top-actions-container {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .wizard-top-btn {
        width: 100%;
        justify-content: center;
    }

    .card-inline-actions {
        padding: var(--spacing-md);
    }

    .card-inline-actions-container {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .card-inline-btn {
        width: 100%;
        min-width: none;
    }
}

/* ===== WIZARD VERTICAL ===== */
.wizard-vertical-container {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-xl);
}

.wizard-vertical-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.wizard-vertical-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-sm) 0;
    letter-spacing: var(--letter-spacing-tight);
}

.wizard-vertical-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0;
    letter-spacing: var(--letter-spacing-normal);
}

.wizard-vertical-sections {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* ===== WIZARD SECTION CARDS ===== */
.wizard-section-card {
    background: var(--color-bg-secondary);
    border: 2px solid var(--border-color-primary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all var(--transition-base);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.wizard-section-card.card-active {
    border-color: var(--color-brand-primary);
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.02) 0%, rgba(79, 70, 229, 0.05) 100%);
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.12);
}

.wizard-section-card.card-completed {
    border-color: var(--color-success);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.02) 0%, rgba(16, 185, 129, 0.05) 100%);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08);
}

.wizard-section-card.card-locked {
    opacity: 0.6;
    pointer-events: none;
}

.wizard-section-card.card-locked .card-content {
    display: none;
}

/* ===== CARD HEADER ===== */
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg) var(--spacing-xl);
    background: var(--color-bg-tertiary);
    border-bottom: 1px solid var(--border-color-primary);
    transition: all var(--transition-base);
}

.wizard-section-card.card-active .card-header {
    background: rgba(79, 70, 229, 0.05);
    border-bottom-color: rgba(79, 70, 229, 0.2);
}

.wizard-section-card.card-completed .card-header {
    background: rgba(16, 185, 129, 0.05);
    border-bottom-color: rgba(16, 185, 129, 0.2);
}

.card-header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.card-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    border-radius: 50%;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border: 2px solid var(--border-color-primary);
    transition: all var(--transition-base);
}

.wizard-section-card.card-active .card-number {
    background: var(--color-brand-primary);
    color: white;
    border-color: var(--color-brand-primary);
}

.wizard-section-card.card-completed .card-number {
    background: var(--color-success);
    color: white;
    border-color: var(--color-success);
}

.card-title-info h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-xs) 0;
    letter-spacing: var(--letter-spacing-tight);
}

.card-title-info p {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin: 0;
    letter-spacing: var(--letter-spacing-normal);
}

.card-status {
    display: flex;
    align-items: center;
}

.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transition: all var(--transition-base);
}

.status-active {
    background: var(--color-brand-primary);
    box-shadow: 0 0 12px rgba(79, 70, 229, 0.5);
}

.status-completed {
    background: var(--color-success);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
}

.status-locked {
    background: var(--color-text-tertiary);
}

/* ===== CARD CONTENT ===== */
.card-content {
    padding: var(--spacing-xl);
    transition: all var(--transition-base);
}

.wizard-section-card.card-active .card-content {
    animation: slideDown 0.3s ease-out;
}

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

/* ===== CARD ACTIONS ===== */
.card-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color-primary);
    margin-top: var(--spacing-lg);
}

.card-btn-primary {
    background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-secondary) 100%);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-brand);
    border: none;
}

.card-btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg), var(--shadow-brand);
}

.card-btn-primary:disabled {
    background: var(--color-bg-tertiary);
    color: var(--color-text-tertiary);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* ===== STEP DESCRIPTIONS ===== */
.step-description {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-xl) 0;
    line-height: 1.6;
    letter-spacing: var(--letter-spacing-normal);
}

/* ===== SHARE OPTIONS ===== */
.share-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.share-option {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--border-color-primary);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

.share-option:hover {
    background: var(--color-bg-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.share-option-icon {
    width: 48px;
    height: 48px;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--color-bg-primary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color-primary);
}

.share-option-content {
    flex: 1;
}

.share-option-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-xs) 0;
    letter-spacing: var(--letter-spacing-tight);
}

.share-option-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-lg) 0;
    line-height: 1.5;
    letter-spacing: var(--letter-spacing-normal);
}

.share-link-container {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.share-link-input {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-primary);
    border: 1px solid var(--border-color-primary);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    letter-spacing: var(--letter-spacing-normal);
}

.share-link-input:focus {
    outline: none;
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

.share-copy-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--border-color-secondary);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.share-copy-btn:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-brand-primary);
}

.qr-code-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-lg);
}

.qr-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    background: var(--color-bg-tertiary);
    border: 2px dashed var(--border-color-primary);
    border-radius: var(--radius-lg);
    color: var(--color-text-tertiary);
    gap: var(--spacing-sm);
}

.qr-placeholder svg {
    width: 32px;
    height: 32px;
}

.qr-placeholder p {
    font-size: var(--font-size-xs);
    margin: 0;
    text-align: center;
    letter-spacing: var(--letter-spacing-normal);
}

/* ===== RESPONSIVE WIZARD VERTICAL ===== */
@media (max-width: 768px) {
    .wizard-vertical-container {
        padding: var(--spacing-lg);
    }

    .wizard-vertical-sections {
        gap: var(--spacing-md);
    }

    .wizard-section-card {
        border-radius: var(--radius-lg);
    }

    .card-header {
        padding: var(--spacing-md) var(--spacing-lg);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .card-header-left {
        width: 100%;
    }

    .card-status {
        align-self: flex-end;
    }

    .card-content {
        padding: var(--spacing-lg);
    }

    .share-options {
        gap: var(--spacing-lg);
    }

    .share-option {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-md);
    }

    .share-link-container {
        flex-direction: column;
        width: 100%;
    }

    .share-link-input {
        width: 100%;
    }

    .share-copy-btn {
        width: 100%;
        justify-content: center;
    }

    .qr-code-container {
        align-items: center;
    }
}

@media (max-width: 480px) {
    .wizard-vertical-container {
        padding: var(--spacing-md);
    }

    .wizard-vertical-title {
        font-size: var(--font-size-xl);
    }

    .wizard-vertical-subtitle {
        font-size: var(--font-size-sm);
    }

    .card-header {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .card-content {
        padding: var(--spacing-md);
    }

    .card-title-info h3 {
        font-size: var(--font-size-base);
    }

    .share-option {
        padding: var(--spacing-md);
    }
}

/* ===== PUBLIC EVENT PAGE ===== */
.public-event-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-primary);
    padding: var(--spacing-xl);
}

.public-event-state {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 400px;
    width: 100%;
}

.public-event-state:not(.hidden) {
    display: flex;
}

.public-event-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xl);
    padding: var(--spacing-2xl);
    background: var(--color-bg-secondary);
    border: 1px solid var(--border-color-primary);
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.public-event-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-bg-tertiary);
    border: 2px solid var(--border-color-primary);
    flex-shrink: 0;
}

.public-event-icon.error {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--color-error);
}

.public-event-icon svg {
    width: 32px;
    height: 32px;
    color: var(--color-text-secondary);
}

.public-event-icon.error svg {
    color: var(--color-error);
}

.public-event-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: var(--letter-spacing-tight);
}

.public-event-text {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
    letter-spacing: var(--letter-spacing-normal);
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--color-bg-tertiary);
    border-top-color: var(--color-brand-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

@media (max-width: 768px) {
    .public-event-container {
        padding: var(--spacing-lg);
    }

    .public-event-content {
        padding: var(--spacing-xl);
        gap: var(--spacing-lg);
    }

    .public-event-title {
        font-size: var(--font-size-lg);
    }

    .public-event-icon {
        width: 64px;
        height: 64px;
    }

    .public-event-icon svg {
        width: 24px;
        height: 24px;
    }
}

/* ============================================================
   PREMIUM OVERRIDES - Elevated minimal visual system
   ============================================================ */

.sidebar,
.toolbar,
.wizard-section-card,
.preview-card,
.step-card,
.value-card,
.event-type-card,
.event-tabs,
.share-card,
.evento-details-card,
.upload-counter-bar,
.colaborador-hero,
.public-event-content,
.auth-card,
.credits-card {
    backdrop-filter: blur(var(--backdrop-blur));
}

.sidebar,
.toolbar,
.share-card,
.evento-details-card,
.upload-counter-bar,
.colaborador-hero,
.public-event-content,
.auth-card,
.credits-card,
.wizard-section-card,
.preview-card,
.step-card,
.value-card,
.event-type-card,
.event-tabs {
    backdrop-filter: none;
}

.sidebar {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
        var(--color-surface-strong);
    border-right: 1px solid var(--border-color-primary);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03);
}

.header {
    gap: 12px;
    padding-bottom: 22px;
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

.sidebar-logo {
    max-width: 156px;
    height: auto;
    filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.22));
}

.sidebar-subtitle {
    max-width: 180px;
    color: var(--color-text-secondary);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nav-item {
    min-height: 52px;
    padding: 14px 16px;
    border-radius: 18px;
    color: var(--color-text-secondary);
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.nav-item.active,
.nav-highlight {
    background:
        linear-gradient(135deg, rgba(124, 140, 255, 0.18), rgba(52, 215, 255, 0.08)),
        rgba(255, 255, 255, 0.03);
    border-color: rgba(124, 140, 255, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow-brand);
}

.nav-item.active::before {
    width: 4px;
    height: 26px;
    background: linear-gradient(180deg, var(--color-brand-secondary), var(--color-brand-primary));
    box-shadow: 0 0 20px rgba(52, 215, 255, 0.38);
}

.nav-item:hover .nav-icon,
.nav-item.active .nav-icon,
.nav-highlight .nav-icon {
    color: var(--color-brand-secondary);
}

.credits-card {
    padding: 14px 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(124, 140, 255, 0.14), rgba(52, 215, 255, 0.08));
    border-color: rgba(124, 140, 255, 0.18);
    color: var(--color-text-secondary);
}

.toolbar {
    position: sticky;
    top: 0;
    z-index: 50;
    min-height: 74px;
    padding: 14px 28px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
        rgba(8, 12, 26, 0.72);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.toolbar-title,
.wizard-vertical-title,
.public-event-title,
.hero-headline,
.steps-title,
.value-title,
.event-types-title,
.card-title,
.evento-nome,
.colaborador-title,
.done-title,
.processing-title {
    font-family: var(--font-family-display);
}

.toolbar-title {
    font-size: clamp(1.05rem, 1vw + 0.85rem, 1.45rem);
    letter-spacing: -0.04em;
}

.mobile-menu-toggle,
.mobile-nav-backdrop,
.mobile-user-toggle,
.mobile-user-launcher,
.mobile-user-backdrop {
    display: none;
}

.mobile-menu-toggle {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid var(--border-color-primary);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    padding: 0;
    cursor: pointer;
}

.mobile-menu-toggle span {
    width: 16px;
    height: 1.8px;
    border-radius: 999px;
    background: currentColor;
    transition: transform var(--transition-base), opacity var(--transition-base);
}

.mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 110;
    border: 0;
    background: rgba(6, 8, 22, 0.5);
}

.mobile-user-toggle,
.mobile-user-launcher {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    border: 1px solid var(--border-color-primary);
    background: linear-gradient(135deg, rgba(124, 140, 255, 0.14), rgba(52, 215, 255, 0.08));
    color: var(--color-text-primary);
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0;
    cursor: pointer;
    position: relative;
    z-index: 121;
}

.mobile-user-backdrop {
    position: fixed;
    inset: 0;
    z-index: 110;
    border: 0;
    background: rgba(6, 8, 22, 0.42);
}

.mobile-user-icon {
    width: 20px;
    height: 20px;
    display: block;
}

.mobile-user-avatar {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.16);
    font-size: 11px;
    font-weight: 700;
}

.mobile-user-bars {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
}

.mobile-user-bars span {
    width: 10px;
    height: 1.6px;
    border-radius: 999px;
    background: currentColor;
}

.user-controls {
    gap: 10px;
    padding: 8px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(124, 140, 255, 0.08), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(124, 140, 255, 0.12);
}

.user-controls .btn.link,
.settings-btn {
    border-radius: 999px;
}

.btn {
    min-height: 46px;
    padding: 12px 18px;
    border-radius: 16px;
    font-weight: 600;
}

.btn-primary {
    color: var(--color-brand-ink);
    background: linear-gradient(135deg, var(--color-brand-secondary) 0%, var(--color-brand-primary) 52%, #5668FF 100%);
}

.btn-primary:hover:not(:disabled) {
    box-shadow: 0 20px 44px rgba(88, 131, 255, 0.3);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(124, 140, 255, 0.12);
}

.btn-secondary:hover:not(:disabled),
.btn.link:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06);
}

.overview-hero,
.overview-steps,
.overview-value,
.overview-event-types,
.wizard-vertical-container,
.wizard-section-card,
.event-tabs,
.share-card,
.public-event-content,
.auth-card,
.evento-details-card,
.upload-counter-bar,
.colaborador-hero {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
        var(--color-surface-elevated);
    border: 1px solid rgba(124, 140, 255, 0.12);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.overview-hero,
.overview-steps,
.overview-value,
.overview-event-types,
.wizard-section-card,
.event-tabs,
.share-card,
.public-event-content,
.auth-card {
    border-radius: 28px;
    position: relative;
    overflow: hidden;
}

.overview-hero::before,
.overview-steps::before,
.overview-value::before,
.overview-event-types::before,
.wizard-section-card::before,
.public-event-content::before,
.auth-card::before {
    content: none;
}

.overview-hero::after,
.wizard-section-card::after {
    content: '';
    position: absolute;
    inset: auto -20% -45% auto;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(52, 215, 255, 0.2), transparent 65%);
    pointer-events: none;
}

.hero-headline {
    font-size: clamp(2.35rem, 4.3vw, 4.5rem);
    line-height: 1;
    max-width: 10.5ch;
    text-wrap: balance;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    padding: 8px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(124, 140, 255, 0.14), rgba(52, 215, 255, 0.08));
    border: 1px solid rgba(124, 140, 255, 0.18);
    color: var(--color-text-primary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-eyebrow::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-brand-secondary), var(--color-brand-primary));
    box-shadow: 0 0 16px rgba(52, 215, 255, 0.5);
}

.hero-subheadline,
.steps-subtitle,
.event-types-subtitle,
.wizard-vertical-subtitle,
.public-event-text {
    color: var(--color-text-secondary);
    font-size: clamp(0.96rem, 0.5vw + 0.84rem, 1.08rem);
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(124, 140, 255, 0.14);
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 500;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 6px;
}

.hero-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 14px 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014));
    border: 1px solid rgba(124, 140, 255, 0.12);
    box-shadow: 0 12px 32px rgba(9, 16, 34, 0.22);
}

.hero-stat strong {
    color: var(--color-text-primary);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.hero-stat span {
    color: var(--color-text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

.gallery-preview,
.preview-area,
.qr-code-container,
.qr-placeholder {
    border-radius: 24px;
}

.hero-visual-stack {
    position: relative;
    width: min(100%, 420px);
    padding: 30px 20px 26px;
}

.gallery-preview {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
        rgba(12, 18, 34, 0.8);
    border: 1px solid rgba(124, 140, 255, 0.14);
    box-shadow: 0 28px 70px rgba(8, 13, 30, 0.34);
}

.gallery-preview::before {
    content: '';
    position: absolute;
    inset: 14px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.gallery-grid {
    width: 100%;
    max-width: 240px;
    height: 180px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(124, 140, 255, 0.8), rgba(52, 215, 255, 0.6));
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.gallery-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 28% 25%, rgba(255, 255, 255, 0.36), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.18));
}

.gallery-item:nth-child(2n) {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.88), rgba(124, 58, 237, 0.62));
}

.gallery-item:nth-child(3n) {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.78), rgba(59, 130, 246, 0.68));
}

.gallery-item:nth-child(4n) {
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.72), rgba(99, 102, 241, 0.62));
}

.preview-floating-card {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
    max-width: 210px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(10, 15, 28, 0.84);
    border: 1px solid rgba(124, 140, 255, 0.14);
    box-shadow: 0 16px 32px rgba(7, 12, 24, 0.2);
}

.preview-floating-card strong {
    color: var(--color-text-primary);
    font-size: 13px;
    line-height: 1.35;
}

.preview-floating-label {
    color: var(--color-text-tertiary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.preview-floating-card-top {
    top: 0;
    right: -6px;
}

.preview-floating-card-bottom {
    left: -10px;
    bottom: 0;
}

.light-theme .gallery-preview {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 248, 255, 0.88)),
        rgba(255, 255, 255, 0.95);
    border-color: rgba(16, 23, 42, 0.08);
    box-shadow: 0 24px 60px rgba(83, 104, 255, 0.14);
}

.light-theme .gallery-preview::before {
    border-color: rgba(16, 23, 42, 0.06);
}

.light-theme .preview-floating-card {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(16, 23, 42, 0.08);
    box-shadow: 0 18px 36px rgba(83, 104, 255, 0.12);
}

.light-theme .preview-floating-card strong {
    color: #0f172a;
}

.light-theme .preview-floating-label {
    color: #475569;
}

.gallery-preview,
.preview-card,
.share-option,
.wizard-section-card,
.event-tabs,
.public-event-content,
.auth-card {
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
}

.step-card,
.value-card,
.event-type-card,
.stat-card,
.ranking-item,
.participante-item,
.share-option {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
    border: 1px solid rgba(124, 140, 255, 0.12);
    border-radius: 22px;
    box-shadow: var(--shadow-sm);
}

.step-card:hover,
.value-card:hover,
.event-type-card:hover,
.stat-card:hover,
.ranking-item:hover,
.participante-item:hover,
.share-option:hover {
    transform: translateY(-4px);
    border-color: rgba(52, 215, 255, 0.22);
    box-shadow: 0 24px 54px rgba(19, 30, 66, 0.42);
}

.step-number,
.card-number {
    background: linear-gradient(135deg, rgba(124, 140, 255, 0.26), rgba(52, 215, 255, 0.18));
    border: 1px solid rgba(124, 140, 255, 0.24);
    color: var(--color-text-primary);
}

.value-icon,
.step-icon,
.event-type-icon,
.public-event-icon {
    background: linear-gradient(180deg, rgba(124, 140, 255, 0.16), rgba(52, 215, 255, 0.08));
    border-color: rgba(124, 140, 255, 0.2);
}

.event-type-card.selected,
.event-type-card.active,
.wizard-section-card.card-active {
    border-color: rgba(124, 140, 255, 0.34);
    box-shadow: 0 28px 70px rgba(88, 131, 255, 0.18);
}

.auth-card,
.public-event-content {
    max-width: 560px;
}

.auth-body .field label,
.auth-body label,
.dados-basicos-label {
    margin-bottom: 8px;
    color: var(--color-text-secondary);
    font-weight: 600;
    display: inline-block;
}

.auth-body input,
.auth-body select,
.auth-body textarea,
.dados-basicos-input,
.share-link-input,
.link-input {
    width: 100%;
    min-height: 52px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
    color: var(--color-text-primary);
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.auth-body input:focus,
.auth-body select:focus,
.auth-body textarea:focus,
.dados-basicos-input:focus,
.share-link-input:focus,
.link-input:focus {
    border-color: rgba(52, 215, 255, 0.55);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 4px rgba(88, 131, 255, 0.12);
    outline: none;
}

.code-box {
    width: 52px;
    height: 56px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

.settings-dropdown,
.toast-notification {
    background: rgba(10, 15, 28, 0.92);
    border-color: rgba(124, 140, 255, 0.14);
    border-radius: 18px;
}

.public-event-container {
    padding: clamp(18px, 4vw, 40px);
    background:
        radial-gradient(circle at top right, rgba(124, 140, 255, 0.22), transparent 26%),
        radial-gradient(circle at bottom left, rgba(52, 215, 255, 0.16), transparent 28%),
        var(--color-bg-primary);
}

.public-event-content {
    padding: clamp(28px, 4vw, 44px);
}

.public-event-icon {
    width: 92px;
    height: 92px;
    border-width: 1px;
}

.public-event-icon svg {
    width: 42px;
    height: 42px;
}

.wizard-vertical-container {
    padding: clamp(22px, 4vw, 36px);
}

.wizard-vertical-header {
    gap: 10px;
    margin-bottom: 24px;
}

.wizard-vertical-title {
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1;
}

.wizard-vertical-subtitle {
    max-width: 560px;
    margin-inline: auto;
}

.card-header {
    position: relative;
    background:
        linear-gradient(135deg, rgba(124, 140, 255, 0.08), rgba(52, 215, 255, 0.03)),
        rgba(255, 255, 255, 0.02);
}

.card-header::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(124, 140, 255, 0.28), transparent);
}

.share-option-icon {
    background: linear-gradient(135deg, rgba(124, 140, 255, 0.14), rgba(52, 215, 255, 0.08));
    border-color: rgba(124, 140, 255, 0.18);
}

.share-link-input,
.link-input {
    font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
    font-size: 12px;
}

.event-type-card {
    min-height: 196px;
    justify-content: center;
}

.value-card,
.step-card {
    min-height: 220px;
    justify-content: center;
}

.share-options,
.event-types-grid,
.steps-container,
.value-container,
.event-types-container {
    gap: 18px;
}

.share-link-container,
.link-copy-row,
.galeria-actions,
.card-actions {
    gap: 12px;
}

.stats-grid {
    gap: 14px;
}

.stat-card {
    min-height: 128px;
    padding: 20px;
}

.light-theme body::before {
    background: radial-gradient(circle, rgba(83, 104, 255, 0.14) 0%, rgba(83, 104, 255, 0.04) 36%, transparent 72%);
}

.light-theme body::after {
    background: radial-gradient(circle, rgba(0, 191, 239, 0.12) 0%, rgba(0, 191, 239, 0.04) 40%, transparent 74%);
}

.light-theme .toolbar,
.light-theme .settings-dropdown,
.light-theme .toast-notification {
    background: rgba(248, 251, 255, 0.9);
}

.light-theme .sidebar {
    box-shadow: inset -1px 0 0 rgba(31, 29, 26, 0.04);
}