/* ===================================
 * CSS RESETS & BASE STYLES
 * =================================== */

/* Box sizing reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove default margins and padding */
h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, dd,
figure, blockquote {
    margin: 0;
    padding: 0;
}

/* Reset list styles */
ul, ol {
    list-style: none;
}

/* Reset button styles */
button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* Reset input/textarea styles */
input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* Reset anchor styles */
a {
    color: inherit;
    text-decoration: none;
}

/* Images and media */
img, svg, video {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Tables */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Remove tap highlight on mobile */
button, a, input, textarea {
    -webkit-tap-highlight-color: transparent;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Prevent text size adjustment on orientation change */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ===================================
 * AI ONBOARDING PANEL
 * =================================== */
.funl-ai-panel {
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: var(--funl-bg-surface);
    box-shadow: none;
    height: calc(100vh - 60px); /* Account for page header */
    display: flex;
    flex-direction: column;
}

/* Adjust for WordPress admin bar */
.admin-bar .funl-ai-panel {
    height: calc(100vh - 60px - 32px);
}

/* Hide the panel header - keeping styles in case needed later */
.funl-ai-panel__header {
    display: none;
}

.funl-ai-panel__eyebrow {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 6px;
    color: var(--funl-text-muted);
}

.funl-ai-panel__subtitle {
    margin: 8px 0 0;
    color: var(--funl-text-muted);
}

.funl-ai-panel__status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--funl-text-muted);
}

.funl-ai-status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--funl-status-ready-text);
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.35);
    animation: funl-ai-pulse 2s infinite;
}

.funl-ai-panel__status.is-syncing .funl-ai-status-dot {
    background: var(--funl-warning);
}

.funl-ai-panel__status.has-error .funl-ai-status-dot {
    background: var(--funl-danger);
    animation: none;
}

@keyframes funl-ai-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.35);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

.funl-ai-panel__layout {
    display: flex;
    gap: 0;
    flex-wrap: nowrap;
    align-items: stretch;
    flex: 1;
    min-height: 0;
}

.funl-ai-chat {
    flex: 2;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--funl-bg-surface);
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--funl-border);
    overflow: hidden;
    position: relative;
    min-height: 0;
}

.funl-ai-chat__scroll-wrapper {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
}

.funl-ai-messages {
    flex: 1;
    padding: 32px;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    justify-content: flex-end;
    min-height: 0;
    scroll-padding-bottom: 160px;
}

.funl-ai-empty {
    text-align: center;
    padding: 40px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

/* Loading spinner for initial chat load */
.funl-ai-loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.funl-ai-spinner {
    animation: funl-spinner-rotate 1.4s linear infinite;
}

.funl-ai-spinner__track {
    stroke: var(--funl-border);
}

.funl-ai-spinner__path {
    stroke: var(--funl-primary);
    stroke-dasharray: 80, 200;
    stroke-dashoffset: 0;
    animation: funl-spinner-dash 1.4s ease-in-out infinite;
}

@keyframes funl-spinner-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes funl-spinner-dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 80, 200;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 80, 200;
        stroke-dashoffset: -125;
    }
}

.funl-ai-sidebar {
    flex: 1;
    min-width: 240px;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow-y: auto;
    min-height: 0;
}

.funl-ai-card {
    background: var(--funl-bg-body);
    padding: 12px 20px;
    border-bottom: 1px solid var(--funl-border);
}

.funl-ai-card:last-child {
    border-bottom: none;
}

.funl-ai-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
    user-select: none;
    transition: margin 0.2s ease;
}

.funl-ai-card__header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.funl-ai-card.is-collapsed .funl-ai-card__header {
    margin-bottom: 0;
}

.funl-ai-card__header h3::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: var(--funl-ai-header-icon);
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.2s ease;
}

.funl-ai-card.is-collapsed .funl-ai-card__header h3::before {
    transform: rotate(-90deg);
}

.funl-ai-card__body {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease;
}

.funl-ai-card.is-collapsed .funl-ai-card__body {
    max-height: 0 !important;
    opacity: 0;
    margin: 0;
    padding: 0;
}

.funl-ai-ready-pill {
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--funl-status-incomplete-bg);
    color: var(--funl-status-incomplete-text);
}

.funl-ai-ready-pill.is-ready {
    background: var(--funl-status-success-bg);
    color: var(--funl-status-success-text);
}

/* Field Accordion Styles */
.funl-ai-field-accordion {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.funl-ai-accordion-step {
    border-bottom: 1px solid var(--funl-border);
}

.funl-ai-accordion-step:last-child {
    border-bottom: 0;
}

.funl-ai-accordion-step__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.funl-ai-accordion-step__header:hover {
    background: var(--funl-bg-muted);
    margin: 0 -12px;
    padding-left: 12px;
    padding-right: 12px;
}

.funl-ai-accordion-step__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--funl-text-muted);
    transition: transform 0.2s;
}

.funl-ai-accordion-step.is-expanded .funl-ai-accordion-step__chevron {
    transform: rotate(180deg);
}

.funl-ai-accordion-step__title {
    flex: 1;
    font-weight: 600;
    font-size: 13px;
}

.funl-ai-accordion-step__count {
    font-size: 12px;
    color: var(--funl-text-muted);
    background: var(--funl-bg-muted);
    padding: 2px 8px;
    border-radius: 10px;
}

.funl-ai-accordion-step.is-complete .funl-ai-accordion-step__count {
    background: var(--funl-status-success-bg);
    color: var(--funl-status-success-text);
}

.funl-ai-accordion-step__body {
    display: none;
    padding: 0 0 8px 20px;
}

.funl-ai-accordion-step.is-expanded .funl-ai-accordion-step__body {
    display: block;
}

.funl-ai-accordion-field {
    padding: 6px 0;
}

.funl-ai-accordion-field__display {
    display: flex;
    align-items: center;
    gap: 8px;
}

.funl-ai-accordion-field__check {
    color: var(--funl-border);
    flex-shrink: 0;
}

.funl-ai-accordion-field.is-complete .funl-ai-accordion-field__check {
    color: var(--funl-success);
}

.funl-ai-accordion-field__label {
    flex: 1;
    font-size: 13px;
    color: var(--funl-text-muted);
}

.funl-ai-accordion-field.is-complete .funl-ai-accordion-field__label {
    color: var(--funl-text);
}

.funl-ai-accordion-field__value {
    font-size: 12px;
    color: var(--funl-text-muted);
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.funl-ai-accordion-field__edit-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--funl-text-muted);
    cursor: pointer;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.funl-ai-accordion-field:hover .funl-ai-accordion-field__edit-btn {
    opacity: 1;
}

.funl-ai-accordion-field__edit-btn:hover {
    background: var(--funl-bg-muted);
    color: var(--funl-primary);
}

/* Field Edit Form */
.funl-ai-accordion-field__edit-form {
    display: none;
    margin-top: 8px;
    gap: 6px;
}

/* When editing: hide value and edit button, but keep label visible */
.funl-ai-accordion-field.is-editing .funl-ai-accordion-field__value,
.funl-ai-accordion-field.is-editing .funl-ai-accordion-field__edit-btn {
    display: none;
}

.funl-ai-accordion-field.is-editing .funl-ai-accordion-field__edit-form {
    display: flex;
    align-items: flex-start;
}

.funl-ai-accordion-field__input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--funl-border);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    background: var(--funl-bg);
    color: var(--funl-text);
    resize: vertical;
}

.funl-ai-accordion-field__input:focus {
    outline: none;
    border-color: var(--funl-primary);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}

/* Field input wrapper for complex fields */
.funl-ai-accordion-field__input-wrapper {
    flex: 1;
    min-width: 0;
}

/* Select field */
.funl-ai-accordion-field__select {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--funl-border);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    background: var(--funl-bg);
    color: var(--funl-text);
    cursor: pointer;
}

.funl-ai-accordion-field__select:focus {
    outline: none;
    border-color: var(--funl-primary);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}

/* Textarea field */
.funl-ai-accordion-field__textarea {
    width: 100%;
    min-height: 60px;
    resize: vertical;
}

/* Color field */
.funl-ai-accordion-field__color-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.funl-ai-accordion-field__color-input {
    flex: 1;
    min-width: 80px;
}

.funl-ai-accordion-field__color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--funl-border);
    cursor: pointer;
    flex-shrink: 0;
}

/* Image field */
.funl-ai-accordion-field__image-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.funl-ai-accordion-field__image-preview {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border-radius: 8px;
    background: 
        linear-gradient(45deg, #f3f4f6 25%, transparent 25%),
        linear-gradient(-45deg, #f3f4f6 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f3f4f6 75%),
        linear-gradient(-45deg, transparent 75%, #f3f4f6 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
    background-color: #ffffff;
}

.funl-dark-mode .funl-ai-accordion-field__image-preview {
    background: 
        linear-gradient(45deg, #374151 25%, transparent 25%),
        linear-gradient(-45deg, #374151 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #374151 75%),
        linear-gradient(-45deg, transparent 75%, #374151 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
    background-color: #1f2937;
}

.funl-ai-accordion-field__image-preview img,
.funl-ai-accordion-field__image-preview .funl-media-item__svg {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}

.funl-ai-accordion-field__image-title {
    font-size: 12px;
    color: var(--funl-text-muted);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.funl-ai-accordion-field__image-upload-btn {
    padding: 6px 12px;
    font-size: 12px;
    background: var(--funl-primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: #fff;
    transition: background 0.15s;
}

.funl-ai-accordion-field__image-upload-btn:hover {
    background: var(--funl-primary-hover);
}

.funl-ai-accordion-field__image-buttons {
    display: flex;
    gap: 8px;
}

.funl-ai-accordion-field__image-remove-btn {
    padding: 6px 12px;
    font-size: 12px;
    background: var(--funl-bg-delete);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: #fff;
    transition: background 0.15s;
}

.funl-ai-accordion-field__image-remove-btn:hover {
    background: var(--funl-bg-delete-hover);
}

/* Checkbox and radio groups */
.funl-ai-accordion-field__checkbox-group,
.funl-ai-accordion-field__radio-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.funl-ai-accordion-field__checkbox-label,
.funl-ai-accordion-field__radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--funl-text);
    cursor: pointer;
}

.funl-ai-accordion-field__checkbox,
.funl-ai-accordion-field__radio {
    margin: 0;
    cursor: pointer;
}

/* Field value display - clickable image link */
.funl-ai-field-image-link {
    text-decoration: none;
    cursor: pointer;
}

.funl-ai-field-image-link:hover {
    text-decoration: underline;
}

/* Field value display - color swatch */
.funl-ai-field-color-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid var(--funl-border);
    margin-right: 4px;
    vertical-align: middle;
}

.funl-ai-accordion-field__save-btn,
.funl-ai-accordion-field__cancel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--funl-border);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}

.funl-ai-accordion-field__save-btn {
    background: var(--funl-success);
    border-color: var(--funl-success);
    color: #fff;
}

.funl-ai-accordion-field__save-btn:hover {
    background: #059669;
    border-color: #059669;
}

.funl-ai-accordion-field__save-btn.is-saving {
    opacity: 0.6;
    pointer-events: none;
}

.funl-ai-accordion-field__cancel-btn {
    background: var(--funl-bg);
    color: var(--funl-text-muted);
}

.funl-ai-accordion-field__cancel-btn:hover {
    background: var(--funl-bg-muted);
    color: var(--funl-text);
}

.funl-ai-accordion-empty {
    color: var(--funl-text-muted);
    font-size: 13px;
    padding: 8px 0;
}

/* Legacy progress list styles (keeping for backwards compatibility) */
.funl-ai-progress-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.funl-ai-progress-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--funl-border);
}

.funl-ai-progress-item:last-child {
    border-bottom: 0;
}

.funl-ai-progress-item--complete .funl-ai-progress-label {
    color: var(--funl-success);
    font-weight: 600;
}

.funl-ai-progress-label {
    font-weight: 500;
}

.funl-ai-progress-value {
    color: var(--funl-text-muted);
    font-size: 13px;
    text-align: right;
}

.funl-ai-missing {
    margin-top: 16px;
}

.funl-ai-missing__label {
    font-weight: 600;
    margin-bottom: 6px;
}

.funl-ai-missing ul {
    margin: 0;
    padding-left: 20px;
    color: var(--funl-text-muted);
}

.funl-ai-logo-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
}

.funl-ai-logo-gallery__item {
    flex: 1;
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--funl-bg-muted);
    border: 1px solid var(--funl-border);
    position: relative;
}

.funl-ai-logo-gallery__item a {
    display: block;
    text-decoration: none;
}

.funl-ai-logo-gallery__item img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Edit button on gallery items */
.funl-ai-logo-gallery__item .funl-ai-logo-edit-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s, transform 0.1s;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 4px;
}

.funl-ai-logo-gallery__item .funl-ai-logo-edit-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.funl-ai-logo-gallery__item:hover .funl-ai-logo-edit-btn {
    opacity: 1;
}

.funl-ai-logo-gallery__item .funl-ai-logo-edit-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.05);
}

/* Delete button on gallery items */
.funl-ai-logo-gallery__item .funl-ai-logo-delete-btn,
.funl-ai-logo-item .funl-ai-logo-delete-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 24px;
    height: 24px;
    padding: 0;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s, transform 0.1s;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.funl-ai-logo-gallery__item .funl-ai-logo-delete-btn svg,
.funl-ai-logo-item .funl-ai-logo-delete-btn svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.funl-ai-logo-gallery__item:hover .funl-ai-logo-delete-btn,
.funl-ai-logo-item:hover .funl-ai-logo-delete-btn {
    opacity: 1;
}

.funl-ai-logo-gallery__item .funl-ai-logo-delete-btn:hover,
.funl-ai-logo-item .funl-ai-logo-delete-btn:hover {
    background: #dc2626;
    transform: scale(1.1);
}

/* Vectorize button on gallery items */
.funl-ai-logo-gallery__item .funl-ai-logo-vectorize-btn,
.funl-ai-logo-item .funl-ai-logo-vectorize-btn {
    position: absolute;
    bottom: 40px;
    right: 8px;
    background: rgba(59, 130, 246, 0.9);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s, transform 0.1s;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 5px;
}

.funl-ai-logo-gallery__item .funl-ai-logo-vectorize-btn svg,
.funl-ai-logo-item .funl-ai-logo-vectorize-btn svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.funl-ai-logo-gallery__item:hover .funl-ai-logo-vectorize-btn,
.funl-ai-logo-item:hover .funl-ai-logo-vectorize-btn {
    opacity: 1;
}

.funl-ai-logo-gallery__item .funl-ai-logo-vectorize-btn:hover,
.funl-ai-logo-item .funl-ai-logo-vectorize-btn:hover {
    background: rgba(37, 99, 235, 1);
    transform: scale(1.05);
}

.funl-ai-logo-gallery__item .funl-ai-logo-vectorize-btn:disabled,
.funl-ai-logo-item .funl-ai-logo-vectorize-btn:disabled {
    background: rgba(107, 114, 128, 0.8);
    cursor: not-allowed;
    transform: none;
}

/* Vectorization result display */
.funl-ai-vectorize-result {
    margin: 12px 0;
}

.funl-ai-vectorize-result p {
    margin-bottom: 12px;
}

.funl-ai-logo-vector {
    position: relative;
    display: inline-block;
    background: 
        linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
        linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
        linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
    border-radius: 8px;
    overflow: hidden;
}

.funl-ai-logo-vector img {
    max-width: 200px;
    max-height: 200px;
    display: block;
}

.funl-ai-logo-vector figcaption {
    background: rgba(0, 0, 0, 0.75);
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.funl-ai-size-comparison {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
}

.funl-ai-download-btn {
    display: inline-block;
    background: var(--funl-primary);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s;
}

.funl-ai-download-btn:hover {
    background: var(--funl-primary-hover);
    color: #fff;
    text-decoration: none;
}

/* Vector Preview with Format Selection */
.funl-vector-preview {
    margin: 12px 0;
}

.funl-vector-preview-image {
    display: inline-block;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}

.funl-vector-preview-image img {
    max-height: 70vh;
    display: block;
    background: repeating-conic-gradient(#f0f0f0 0% 25%, transparent 0% 50%) 50% / 16px 16px;
}

.funl-vector-preview-expiry {
    font-size: 12px;
    color: var(--funl-text-muted);
    margin-bottom: 16px;
}

.funl-vector-format-selection p {
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 500;
}

.funl-vector-format-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.funl-vector-format-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    background: var(--funl-bg-surface);
    border: 2px solid var(--funl-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 100px;
}

.funl-vector-format-btn:hover {
    border-color: var(--funl-primary);
    background: var(--funl-bg-hover);
}

.funl-vector-format-btn.selected {
    border-color: var(--funl-primary);
    background: var(--funl-primary);
}

.funl-vector-format-btn .format-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--funl-text);
    margin-bottom: 4px;
}

.funl-vector-format-btn .format-desc {
    font-size: 10px;
    color: var(--funl-text);
    text-align: center;
}

.funl-vector-format-btn.selected .format-label,
.funl-vector-format-btn.selected .format-desc {
    color: var(--funl-text-white);
}

.funl-vector-download-selected-btn {
    margin-top: 16px;
    width: 100%;
    padding: 12px 20px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.funl-vector-actions {
    margin-top: 12px;
}

.funl-vector-actions p {
    font-size: 12px;
    color: var(--funl-text-muted);
}

/* Vector Downloads Result */
.funl-vector-downloads {
    margin: 12px 0;
}

.funl-download-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.funl-download-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.funl-download-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--funl-primary);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    transition: all 0.2s;
    flex: 1;
    min-width: 200px;
}

.funl-download-link:hover {
    background: var(--funl-primary-hover);
    color: #fff;
    text-decoration: none;
}

.funl-download-format {
    font-weight: 500;
}

.funl-download-icon {
    font-size: 14px;
    margin-left: auto;
}

.funl-save-as-logo-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--funl-status-success-bg);
    color: var(--funl-status-success-text);
    border: 1px solid currentColor;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.funl-save-as-logo-btn:hover {
    background: var(--funl-status-success-text);
    color: #fff;
}

.funl-save-as-logo-btn.saved {
    background: var(--funl-status-success-text);
    color: #fff;
    pointer-events: none;
}

.funl-save-as-logo-btn .save-icon {
    font-size: 14px;
}

.funl-save-logo-prompt {
    margin-top: 12px;
}

.funl-download-errors {
    margin-top: 12px;
    color: var(--funl-status-error-text);
    font-size: 13px;
}

.funl-download-errors + ul {
    margin-top: 4px;
    padding-left: 20px;
    font-size: 12px;
    color: var(--funl-text-muted);
}

/* ===================================
   Unified Media Item Component
   Standardized rendering for logos/images
   in chat history, galleries, and sidebar
   =================================== */

/* Base media item */
.funl-media-item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
    background: 
        linear-gradient(45deg, #f3f4f6 25%, transparent 25%),
        linear-gradient(-45deg, #f3f4f6 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f3f4f6 75%),
        linear-gradient(-45deg, transparent 75%, #f3f4f6 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
    background-color: #ffffff;
}

.funl-dark-mode .funl-media-item {
    background: 
        linear-gradient(45deg, #374151 25%, transparent 25%),
        linear-gradient(-45deg, #374151 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #374151 75%),
        linear-gradient(-45deg, transparent 75%, #374151 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
    background-color: #1f2937;
}

.funl-media-item a {
    display: flex;
    align-content: center;
    flex: 1;
}

.funl-media-item__link {
    cursor: zoom-in;
}

.funl-media-item img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Gallery context - items in multi-image gallery */
.funl-media-item--gallery {
    margin: 0;
}

.funl-media-item--gallery img {
    width: auto;
    max-width: 100%;
    height: auto;
}

/* Sidebar context - smaller items */
.funl-media-item--sidebar {
    margin: 0;
}

.funl-media-item--sidebar .funl-media-item__link {
    display: block;
    padding: 0.5rem;
}

.funl-media-item--sidebar img {
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Inline SVG styling - SVGs are inlined with width/height removed for CSS control */
.funl-media-item__svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Vector preview context */
.funl-media-item--vector img,
.funl-media-item--vector .funl-media-item__svg {
    max-width: 250px;
    max-height: 250px;
}

/* Deleted item placeholder */
.funl-media-item--deleted {
    background: var(--funl-bg-hover);
    border: 2px dashed var(--funl-border);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    min-height: 80px;
    padding: 16px;
}

.funl-media-item__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--funl-text-muted);
}

.funl-media-item__deleted-icon {
    width: 32px;
    height: 32px;
    opacity: 0.5;
}

/* Button container positioning */
.funl-media-item__edit,
.funl-media-item__delete,
.funl-media-item__vectorize {
    position: absolute;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s, transform 0.1s;
    z-index: 5;
}

.funl-media-item:hover .funl-media-item__edit,
.funl-media-item:hover .funl-media-item__delete,
.funl-media-item:hover .funl-media-item__vectorize {
    opacity: 1;
}

/* Edit button - top right */
.funl-media-item__edit {
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.funl-media-item__edit:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.05);
}

.funl-media-item__edit .funl-media-item__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Delete button - top left, circular */
.funl-media-item__delete {
    top: 8px;
    left: 8px;
    width: 24px;
    height: 24px;
    padding: 0;
    background: var(--funl-bg-delete);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.funl-media-item__delete:hover {
    background: var(--funl-bg-delete-hover);
    transform: scale(1.1);
}

.funl-media-item__delete .funl-media-item__icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* Vectorize button - bottom right */
.funl-media-item__vectorize {
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.funl-media-item__vectorize:hover {
    background: var(--funl-primary);
    transform: scale(1.05);
}

.funl-media-item__vectorize .funl-media-item__icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* Figcaption for labels */
.funl-media-item figcaption {
    padding: 0.25rem;
    font-size: 12px;
    color: var(--funl-text);
    background: var(--funl-bg-surface);
    text-align: center;
}

.funl-media-item figcaption strong {
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.funl-media-item figcaption a {
    display: block;
    text-align: center;
    color: var(--funl-primary);
    text-decoration: none;
    font-size: 11px;
}

.funl-media-item figcaption a:hover {
    text-decoration: underline;
}

/* Size comparison for vector results */
.funl-media-item__size-comparison {
    display: block;
    font-size: 11px;
    color: var(--funl-text-muted);
    margin-bottom: 4px;
}

/* Media gallery container */
.funl-media-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 12px 0;
}

/* Single item gallery - don't use grid, display inline */
.funl-media-gallery--single {
    display: block;
}

.funl-media-gallery--single .funl-media-item {
    max-width: 300px;
}

/* Dark mode adjustments for vectorize button */
.funl-dark-mode .funl-ai-logo-vector {
    background: 
        linear-gradient(45deg, #374151 25%, transparent 25%),
        linear-gradient(-45deg, #374151 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #374151 75%),
        linear-gradient(-45deg, transparent 75%, #374151 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}

/* Dark mode for vector preview format buttons */
.funl-dark-mode .funl-vector-preview-image img {
    background: repeating-conic-gradient(#374151 0% 25%, #1f2937 0% 50%) 50% / 20px 20px;
}

/* Dark mode for review summary SVG thumbnails */
.funl-dark-mode .funl-ai-review-summary .funl-review-thumb--svg {
    background: 
        linear-gradient(45deg, #374151 25%, transparent 25%),
        linear-gradient(-45deg, #374151 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #374151 75%),
        linear-gradient(-45deg, transparent 75%, #374151 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
    background-color: #1f2937;
}

/* ========================================
 * AI CHAT REVIEW SUMMARY
 * ======================================== */

.funl-ai-message__bubble .funl-ai-review-summary h4 {
    margin: 0 0 1rem;
    font-size: 1.4rem;
    font-weight: 300;
}

.funl-ai-review-summary .funl-review-step {
    margin-top: 20px;
    padding-top: 12px;
}

.funl-ai-review-summary .funl-review-step:last-of-type {
    margin-bottom: 12px;
    padding-bottom: 0;
    border-bottom: none;
}

.funl-ai-message__bubble .funl-ai-review-summary h5 {
    margin: 0;
    padding: 0.5rem 0 0.75rem;
    border: 1px solid var(--funl-border);
    border-left: none;
    border-right: none;
    font-size: 1.2rem;
    font-weight: 700;
}

.funl-ai-review-summary .funl-review-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 12px;
    margin: 0;
}

.funl-ai-review-summary .funl-review-fields dt {
    font-weight: 700;
    color: var(--funl-text-muted);
    margin-top: 1rem;
}

.funl-ai-review-summary .funl-review-fields dd {
    margin: 0;
    color: var(--funl-text-primary);
    word-break: break-word;
}

.funl-ai-review-summary .funl-review-fields dd a {
    color: var(--funl-link);
    text-decoration: none;
}

.funl-ai-review-summary .funl-review-fields dd a:hover {
    text-decoration: underline;
}

.funl-ai-review-summary .funl-review-thumb {
    max-width: 100%;
    max-height: 200px;
    border-radius: var(--funl-radius-sm);
    border: 1px solid var(--funl-border);
    display: block;
}

/* Desktop adjustments */
@media (min-width: 601px) {
    .funl-ai-review-summary .funl-review-fields {
        grid-template-columns: minmax(150px, 1fr) 3fr;
        align-items: center;
    }

    .funl-ai-review-summary .funl-review-fields dd {
        margin-top: 1rem;
    }
}

/* SVG thumbnail container */
.funl-ai-review-summary .funl-review-thumb--svg {
    display: inline-block;
    width: 100%;
    height: auto;
    padding: 8px;
    background: 
        linear-gradient(45deg, #e5e5e5 25%, transparent 25%),
        linear-gradient(-45deg, #e5e5e5 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e5e5e5 75%),
        linear-gradient(-45deg, transparent 75%, #e5e5e5 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
    background-color: #fff;
    overflow: hidden;
}

.funl-ai-review-summary .funl-review-thumb--svg svg,
.funl-ai-review-summary .funl-review-thumb--svg .funl-media-item__svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
}

/* Clickable image thumbnail link */
.funl-ai-review-summary .funl-review-thumb-link {
    display: inline-block;
    cursor: zoom-in;
    transition: opacity 0.15s ease, transform 0.15s ease;
    border-radius: var(--funl-radius-sm);
}

.funl-ai-review-summary .funl-review-thumb-link:hover {
    opacity: 0.85;
    transform: scale(1.02);
}

.funl-ai-review-summary .funl-review-thumb-link:active {
    transform: scale(0.98);
}

.funl-ai-review-summary .funl-color-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid var(--funl-border);
    vertical-align: middle;
    margin-right: 4px;
}

.funl-ai-review-summary code {
    background: var(--funl-bg-surface);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.85em;
}

.funl-ai-review-summary .funl-review-missing {
    background: var(--funl-status-warning-bg);
    color: var(--funl-status-warning-text);
    padding: 10px 12px;
    border-radius: var(--funl-radius-sm);
    margin-top: 8px;
}

.funl-ai-review-summary .funl-review-missing p {
    margin: 0;
    font-size: 0.9rem;
}

.funl-ai-review-summary .funl-review-missing p.funl-review-action {
    margin-top: 8px;
}

.funl-ai-review-summary .funl-review-complete {
    background: var(--funl-status-success-bg);
    color: var(--funl-status-success-text);
    padding: 10px 12px;
    border-radius: var(--funl-radius-sm);
    margin-top: 8px;
}

.funl-ai-review-summary .funl-review-complete p {
    margin: 0;
    font-size: 0.9rem;
}

.funl-ai-review-summary .funl-review-complete p.funl-review-action {
    margin-top: 8px;
}

/* ========================================
 * AI ACCOUNT SCAN COMPARISON TABLE
 * ======================================== */

.funl-ai-scan-summary {
    margin: 0;
}

.funl-ai-scan-summary h4 {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--funl-text-heading);
}

.funl-ai-scan-summary p {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--funl-text-muted);
}

.funl-ai-scan-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.funl-ai-scan-table th,
.funl-ai-scan-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--funl-border);
    vertical-align: middle;
}

.funl-ai-scan-table th {
    background: var(--funl-bg-subtle);
    font-weight: 600;
    color: var(--funl-text-heading);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.funl-ai-scan-table th:first-child {
    border-radius: var(--funl-radius-sm) 0 0 0;
    width: 32px;
    text-align: center;
}

.funl-ai-scan-table th:last-child {
    border-radius: 0 var(--funl-radius-sm) 0 0;
    width: 70px;
    text-align: center;
}

.funl-ai-scan-table tbody tr:hover {
    background: var(--funl-bg-hover);
}

.funl-ai-scan-table tbody tr.funl-scan-row--different {
    background: var(--funl-status-info-bg);
}

.funl-ai-scan-table tbody tr.funl-scan-row--different:hover {
    background: color-mix(in srgb, var(--funl-status-info-bg) 70%, var(--funl-bg-hover) 30%);
}

.funl-ai-scan-table tbody tr.funl-scan-row--empty-local {
    background: var(--funl-status-success-bg);
}

.funl-ai-scan-table tbody tr.funl-scan-row--empty-local:hover {
    background: color-mix(in srgb, var(--funl-status-success-bg) 70%, var(--funl-bg-hover) 30%);
}

.funl-ai-scan-table td:first-child {
    text-align: center;
}

.funl-ai-scan-table td:last-child {
    text-align: center;
}

.funl-ai-scan-table .funl-scan-field-label {
    font-weight: 500;
    color: var(--funl-text-primary);
}

.funl-ai-scan-table .funl-scan-field-step {
    font-size: 0.75rem;
    color: var(--funl-text-muted);
    display: block;
    margin-top: 2px;
}

.funl-ai-scan-table .funl-scan-value {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--funl-text-primary);
}

.funl-ai-scan-table .funl-scan-value--empty {
    color: var(--funl-text-light);
    font-style: italic;
}

.funl-ai-scan-table .funl-scan-value--api {
    font-weight: 500;
}

.funl-ai-scan-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--funl-primary);
}

.funl-ai-scan-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.75rem;
}

.funl-ai-scan-status--new {
    background: var(--funl-status-success-bg);
    color: var(--funl-status-success-text);
}

.funl-ai-scan-status--different {
    background: var(--funl-status-info-bg);
    color: var(--funl-status-info-text);
}

.funl-ai-scan-status--same {
    background: var(--funl-bg-muted);
    color: var(--funl-text-muted);
}

.funl-ai-scan-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--funl-border);
}

.funl-ai-scan-import-btn,
.funl-ai-scan-skip-btn {
    flex: 1;
    min-width: 120px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.funl-ai-scan-import-btn {
    background: var(--funl-primary);
    border: none;
    color: var(--funl-text-white);
}

.funl-ai-scan-import-btn:hover:not(:disabled) {
    background: var(--funl-primary-hover);
}

.funl-ai-scan-import-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.funl-ai-scan-import-btn.is-complete {
    background: var(--funl-success);
}

.funl-ai-scan-skip-btn {
    background: var(--funl-bg-muted);
    border: 1px solid var(--funl-border);
    color: var(--funl-text-primary);
}

.funl-ai-scan-skip-btn:hover:not(:disabled) {
    background: var(--funl-border);
}

.funl-ai-scan-skip-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.funl-ai-scan-select-all {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: var(--funl-text-muted);
}

.funl-ai-scan-select-all label {
    cursor: pointer;
    user-select: none;
}

.funl-ai-scan-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    font-size: 0.8rem;
    color: var(--funl-text-muted);
}

.funl-ai-scan-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .funl-ai-scan-table {
        font-size: 0.8rem;
    }
    
    .funl-ai-scan-table th,
    .funl-ai-scan-table td {
        padding: 6px 8px;
    }
    
    .funl-ai-scan-table .funl-scan-value {
        max-width: 80px;
    }
    
    .funl-ai-scan-actions {
        flex-direction: column;
    }
    
    .funl-ai-scan-import-btn,
    .funl-ai-scan-skip-btn {
        width: 100%;
    }
}

/* Delete logo confirmation dialog */
.funl-ai-delete-logo-confirm {
    position: fixed;
    z-index: 10000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--funl-bg-surface);
    border: 1px solid var(--funl-border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    padding: 20px;
    min-width: 300px;
    max-width: 90vw;
    animation: funl-delete-confirm-in 0.15s ease-out;
}

.funl-ai-delete-logo-confirm__overlay {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    animation: funl-delete-overlay-in 0.15s ease-out;
}

@keyframes funl-delete-confirm-in {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes funl-delete-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.funl-ai-delete-logo-confirm__title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--funl-text-heading);
}

.funl-ai-delete-logo-confirm__message {
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--funl-text-muted);
    line-height: 1.5;
}

.funl-ai-delete-logo-confirm__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.funl-ai-delete-logo-confirm__cancel,
.funl-ai-delete-logo-confirm__submit {
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}

.funl-ai-delete-logo-confirm__cancel {
    background: var(--funl-bg-muted);
    border: 1px solid var(--funl-border);
    color: var(--funl-text-primary);
}

.funl-ai-delete-logo-confirm__cancel:hover {
    background: var(--funl-border);
}

.funl-ai-delete-logo-confirm__submit {
    background: #dc2626;
    border: none;
    color: #fff;
}

.funl-ai-delete-logo-confirm__submit:hover {
    background: #b91c1c;
}

/* Image Modal - higher z-index than media picker to allow lightbox from within picker */
.funl-ai-image-modal__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10100;
    backdrop-filter: blur(4px);
}

.funl-ai-image-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10101;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.funl-ai-image-modal__close {
    position: absolute;
    top: -40px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}

.funl-ai-image-modal__close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.funl-ai-image-modal__img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Inline SVG in modal - needs explicit dimensions since SVG viewBox alone won't size it */
.funl-ai-image-modal__svg {
    width: 90vw;
    height: 85vh;
    border-radius: 8px;
    background: 
        linear-gradient(45deg, #f3f4f6 25%, transparent 25%),
        linear-gradient(-45deg, #f3f4f6 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f3f4f6 75%),
        linear-gradient(-45deg, transparent 75%, #f3f4f6 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
    background-color: #ffffff;
}

.funl-dark-mode .funl-ai-image-modal__svg {
    background: 
        linear-gradient(45deg, #374151 25%, transparent 25%),
        linear-gradient(-45deg, #374151 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #374151 75%),
        linear-gradient(-45deg, transparent 75%, #374151 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
    background-color: #1f2937;
}

.funl-ai-image-modal__loading {
    color: #fff;
    font-size: 14px;
}

.funl-ai-image-modal__link {
    display: block;
}

.funl-ai-image-modal__link:hover .funl-ai-image-modal__img {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 3px var(--funl-primary);
}

/* Image modal trigger link in messages */
.funl-ai-image-modal-trigger {
    color: var(--funl-primary);
    text-decoration: underline;
    cursor: pointer;
}

.funl-ai-image-modal-trigger:hover {
    text-decoration: none;
}

/* Media Picker Modal */
.funl-ai-media-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.funl-ai-media-picker-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001;
    background: var(--funl-bg-surface);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.funl-ai-media-picker__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--funl-border);
}

.funl-ai-media-picker__header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--funl-text-primary);
}

.funl-ai-media-picker__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--funl-text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}

.funl-ai-media-picker__close:hover {
    background: var(--funl-bg-subtle);
    color: var(--funl-text-primary);
}

.funl-ai-media-picker__tabs {
    display: flex;
    border-bottom: 1px solid var(--funl-border);
}

.funl-ai-media-picker__tab {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: var(--funl-text-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.funl-ai-media-picker__tab:hover {
    color: var(--funl-text-primary);
}

.funl-ai-media-picker__tab.is-active {
    color: var(--funl-primary);
    border-bottom-color: var(--funl-primary);
}

.funl-ai-media-picker__content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.funl-ai-media-picker__panel {
    display: none;
}

.funl-ai-media-picker__panel.is-active {
    display: block;
}

/* Dropzone in media picker */
.funl-ai-media-picker__dropzone {
    border: 2px dashed var(--funl-border);
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.funl-ai-media-picker__dropzone:hover {
    border-color: var(--funl-primary);
    background: var(--funl-bg-hover);
}

.funl-ai-media-picker__dropzone .dz-message {
    color: var(--funl-text-muted);
    font-size: 14px;
}

.funl-ai-media-picker__dropzone .dz-preview {
    margin: 10px auto;
}

.funl-ai-media-picker__dropzone .dz-preview .dz-image {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
}

.funl-ai-media-picker__dropzone .dz-preview .dz-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.funl-ai-media-picker__dropzone .dz-preview .dz-progress {
    height: 4px;
    background: var(--funl-border);
    border-radius: 2px;
    margin-top: 8px;
}

.funl-ai-media-picker__dropzone .dz-preview .dz-upload {
    display: block;
    height: 100%;
    background: var(--funl-primary);
    border-radius: 2px;
    transition: width 0.2s;
}

.funl-ai-media-picker__dropzone .dz-preview .dz-success-mark,
.funl-ai-media-picker__dropzone .dz-preview .dz-error-mark {
    display: none;
}

.funl-ai-media-picker__dropzone .dz-preview.dz-success .dz-success-mark {
    display: block;
    text-align: center;
    margin-top: 8px;
}

.funl-ai-media-picker__dropzone .dz-preview.dz-success .dz-success-mark svg {
    width: 24px;
    height: 24px;
    fill: var(--funl-success);
}

/* Media grid in picker */
.funl-ai-media-picker__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.funl-ai-media-picker__item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    background: 
        linear-gradient(45deg, #f3f4f6 25%, transparent 25%),
        linear-gradient(-45deg, #f3f4f6 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f3f4f6 75%),
        linear-gradient(-45deg, transparent 75%, #f3f4f6 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
    background-color: #ffffff;
}

.funl-dark-mode .funl-ai-media-picker__item {
    background: 
        linear-gradient(45deg, #374151 25%, transparent 25%),
        linear-gradient(-45deg, #374151 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #374151 75%),
        linear-gradient(-45deg, transparent 75%, #374151 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
    background-color: #1f2937;
}

.funl-ai-media-picker__item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    display: block;
    cursor: zoom-in;
}

/* SVG items use inline SVG for proper scaling */
.funl-ai-media-picker__item--svg .funl-media-item__svg {
    display: block;
    flex: 1;
    width: 100%;
    height: auto;
    cursor: zoom-in;
}

.funl-ai-media-picker__item-title {
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    color: var(--funl-text-muted);
    background: var(--funl-bg-surface);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.funl-ai-media-picker__item:hover .funl-ai-media-picker__select-btn {
    opacity: 1;
}

.funl-ai-media-picker__select-btn {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    background: var(--funl-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
}

.funl-ai-media-picker__select-btn:hover {
    background: var(--funl-primary-dark, #4338ca);
}

.funl-ai-media-picker__empty,
.funl-ai-media-picker__loading {
    text-align: center;
    color: var(--funl-text-muted);
    font-size: 14px;
    padding: 40px 20px;
}

.funl-ai-logo-gallery__item figcaption {
    padding: 8px 10px;
    font-size: 11px;
    text-align: center;
    color: var(--funl-text-muted);
    background: var(--funl-bg-surface);
    line-height: 1.4;
}

.funl-ai-logo-gallery__item figcaption strong {
    display: block;
    font-size: 13px;
    color: var(--funl-text-primary);
    margin-bottom: 2px;
}

.funl-ai-logo-prompt {
    margin-top: 12px;
    font-size: 12px;
    color: var(--funl-text-muted);
}

.funl-ai-logo-prompt summary {
    cursor: pointer;
    color: var(--funl-primary);
    font-weight: 500;
}

.funl-ai-logo-prompt summary:hover {
    text-decoration: underline;
}

.funl-ai-logo-prompt p {
    margin: 8px 0 0;
    padding: 10px 12px;
    background: var(--funl-bg-muted);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.funl-ai-logo-prompt p.funl-ai-prompt-refs {
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--funl-bg-subtle);
    border-left: 3px solid var(--funl-primary);
    font-size: 11px;
}

.funl-ai-logo-prompt p.funl-ai-prompt-refs strong {
    color: var(--funl-text-muted);
}

/* Edit Confirmation UI - for complex logo edits requiring user review */
.funl-ai-edit-confirmation {
    background: var(--funl-bg-muted);
    border: 1px solid var(--funl-border);
    border-left: 4px solid var(--funl-warning, #f59e0b);
    border-radius: 12px;
    padding: 16px;
    margin: 12px 0;
}

.funl-ai-edit-confirmation__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.funl-ai-edit-confirmation__icon {
    color: var(--funl-warning, #f59e0b);
    flex-shrink: 0;
}

.funl-ai-edit-confirmation__title {
    font-weight: 600;
    font-size: 14px;
    color: var(--funl-text-primary);
}

.funl-ai-edit-confirmation__intro {
    font-size: 13px;
    color: var(--funl-text-muted);
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.funl-ai-edit-confirmation__intro strong {
    color: var(--funl-text-primary);
}

.funl-ai-edit-confirmation__field {
    margin-bottom: 12px;
}

.funl-ai-edit-confirmation__field label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--funl-text-muted);
    margin-bottom: 6px;
}

.funl-ai-edit-confirmation__textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--funl-border);
    border-radius: 8px;
    background: var(--funl-bg-primary);
    color: var(--funl-text-primary);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.funl-ai-edit-confirmation__textarea:focus {
    outline: none;
    border-color: var(--funl-primary);
    box-shadow: 0 0 0 3px rgba(var(--funl-primary-rgb, 0, 102, 255), 0.1);
}

.funl-ai-edit-confirmation__questions {
    background: var(--funl-bg-primary);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

.funl-ai-edit-confirmation__questions p {
    margin: 0 0 8px 0;
    font-size: 12px;
}

.funl-ai-edit-confirmation__questions ul {
    margin: 0;
    padding-left: 20px;
}

.funl-ai-edit-confirmation__questions li {
    font-size: 13px;
    color: var(--funl-text-muted);
    margin-bottom: 4px;
}

.funl-ai-edit-confirmation__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.funl-ai-edit-confirmation__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.funl-ai-edit-confirmation__btn svg {
    flex-shrink: 0;
}

.funl-ai-edit-confirmation__btn--confirm {
    background: var(--funl-primary);
    color: white;
}

.funl-ai-edit-confirmation__btn--confirm:hover {
    background: var(--funl-primary-hover, #0052cc);
}

.funl-ai-edit-confirmation__btn--cancel {
    background: var(--funl-bg-secondary, #e5e7eb);
    color: var(--funl-text-muted);
}

.funl-ai-edit-confirmation__btn--cancel:hover {
    background: var(--funl-border);
}

/* Dark mode adjustments */
.funl-dark-mode .funl-ai-edit-confirmation {
    background: var(--funl-bg-subtle);
}

.funl-dark-mode .funl-ai-edit-confirmation__textarea {
    background: var(--funl-bg-primary);
    border-color: var(--funl-border);
}

.funl-dark-mode .funl-ai-edit-confirmation__questions {
    background: var(--funl-bg-tertiary, #1f2937);
}

.funl-dark-mode .funl-ai-edit-confirmation__btn--cancel {
    background: var(--funl-bg-tertiary, #374151);
    color: var(--funl-text-primary);
}

/* Processed logo preview */
.funl-ai-logo-preview {
    margin: 12px 0;
    text-align: center;
}

.funl-ai-logo-preview__image {
    margin: 12px 0;
    padding: 16px;
    background: var(--funl-bg-muted);
    border-radius: 12px;
    position: relative;
    display: inline-block;
}

.funl-ai-logo-preview__image img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    background: repeating-conic-gradient(#f0f0f0 0% 25%, transparent 0% 50%) 50% / 16px 16px;
    border-radius: 8px;
    display: block;
}

/* Edit button on logo preview - top right like gallery items */
.funl-ai-logo-preview__image .funl-ai-logo-edit-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s, transform 0.1s;
    z-index: 5;
}

.funl-ai-logo-preview__image:hover .funl-ai-logo-edit-btn {
    opacity: 1;
}

.funl-ai-logo-preview__image .funl-ai-logo-edit-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.05);
}

.funl-dark-mode .funl-ai-logo-preview__image img {
    background: repeating-conic-gradient(#333 0% 25%, transparent 0% 50%) 50% / 16px 16px;
}

.funl-ai-logo-preview__actions {
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--funl-status-info-bg);
    color: var(--funl-status-info-text);
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
}

/* Confirmed logo */
.funl-ai-logo-confirmed {
    margin: 12px 0;
    padding: 16px;
    background: var(--funl-status-success-bg);
    border-radius: 12px;
    text-align: center;
}

.funl-ai-logo-confirmed p {
    margin: 0 0 12px;
    color: var(--funl-status-success-text);
    font-weight: 500;
}

.funl-ai-logo-confirmed figure {
    margin: 0;
    position: relative;
    display: inline-block;
}

.funl-ai-logo-confirmed img {
    max-width: 150px;
    max-height: 150px;
    object-fit: contain;
    background: repeating-conic-gradient(#f0f0f0 0% 25%, transparent 0% 50%) 50% / 16px 16px;
    border-radius: 8px;
}

.funl-dark-mode .funl-ai-logo-confirmed img {
    background: repeating-conic-gradient(#333 0% 25%, transparent 0% 50%) 50% / 16px 16px;
}

/* Optimization offer - styled like regular chat content, not a special box */
.funl-ai-optimization-offer {
    margin: 0;
    padding: 0;
}

.funl-ai-optimization-offer p {
    margin: 0 0 12px;
    color: inherit;
    font-weight: normal;
}

.funl-ai-optimization-offer ul {
    margin: 0 0 16px 20px;
    padding: 0;
    list-style: disc;
    color: inherit;
    opacity: 0.85;
}

.funl-ai-optimization-offer ul li {
    margin: 4px 0;
}

.funl-ai-optimization-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.funl-ai-optimization-btn {
    padding: 8px 16px;
    border: 1px solid var(--funl-primary);
    border-radius: 6px;
    background: var(--funl-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    text-decoration: none;
}

.funl-ai-optimization-btn:hover {
    background: var(--funl-primary-hover);
    border-color: var(--funl-primary-hover);
    color: #fff;
    text-decoration: none;
}

.funl-ai-optimization-btn:active {
    transform: scale(0.98);
}

/* Download buttons in vector results - styled like primary action buttons */
.funl-ai-optimization-btn[download] {
    background: var(--funl-primary);
    color: #fff;
    border-color: var(--funl-primary);
}

.funl-ai-optimization-btn[download]:hover {
    background: var(--funl-primary-hover);
    border-color: var(--funl-primary-hover);
    color: #fff;
}

.funl-ai-optimization-btn--primary {
    background: var(--funl-primary);
    color: #fff;
    border-color: var(--funl-primary);
}

.funl-ai-optimization-btn--primary:hover {
    background: var(--funl-primary-hover);
    border-color: var(--funl-primary-hover);
}

.funl-ai-optimization-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Color mapping display for color variants */
.funl-color-mapping {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0 12px;
    font-size: 13px;
    color: var(--funl-text-muted);
}

.funl-color-swatch {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid var(--funl-border);
    vertical-align: middle;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.funl-dark-mode .funl-color-swatch {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* ========================================
   Logo Editor Modal
   ======================================== */
.funl-logo-editor-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
}

.funl-logo-editor-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
}

.funl-logo-editor-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--funl-bg-secondary, #fff);
    border-radius: 16px;
    width: 90vw;
    max-width: 800px;
    height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.funl-dark-mode .funl-logo-editor-container {
    background: var(--funl-bg-secondary, #2a2a2a);
}

.funl-logo-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--funl-border-color, #ddd);
}

.funl-logo-editor-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--funl-text-primary, #222);
}

.funl-dark-mode .funl-logo-editor-header h3 {
    color: var(--funl-text-primary, #fff);
}

.funl-logo-editor-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--funl-text-muted);
    padding: 4px 8px;
    line-height: 1;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}

.funl-logo-editor-close:hover {
    background: var(--funl-bg-tertiary, #f0f0f0);
    color: var(--funl-text-primary, #222);
}

.funl-dark-mode .funl-logo-editor-close:hover {
    background: var(--funl-bg-tertiary, #444);
    color: var(--funl-text-primary, #fff);
}

.funl-logo-editor-body {
    flex: 1;
    overflow: hidden;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Scrollable viewport for canvas */
.funl-logo-editor-viewport {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: repeating-conic-gradient(#e8e8e8 0% 25%, #f8f8f8 0% 50%) 50% / 16px 16px;
    border-radius: 8px;
    border: 1px solid var(--funl-border-color, #ddd);
    padding: 20px;
}

.funl-dark-mode .funl-logo-editor-viewport {
    background: repeating-conic-gradient(#333 0% 25%, #222 0% 50%) 50% / 16px 16px;
    border-color: var(--funl-border-dark, #444);
}

.funl-logo-editor-canvas-wrap {
    position: relative;
    margin: auto;
    background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 10px 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

.funl-dark-mode .funl-logo-editor-canvas-wrap {
    background: repeating-conic-gradient(#444 0% 25%, #555 0% 50%) 50% / 10px 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.funl-logo-editor-canvas {
    display: block;
}

/* Zoom Controls */
.funl-logo-editor-zoom-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 0;
}

.funl-logo-editor-zoom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--funl-border-color, #ddd);
    border-radius: 6px;
    background: var(--funl-bg-secondary, #f5f5f5);
    color: var(--funl-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.funl-logo-editor-zoom-btn:hover {
    background: var(--funl-bg-tertiary, #e0e0e0);
    border-color: var(--funl-primary-color, #4a90d9);
    color: var(--funl-primary-color, #4a90d9);
}

.funl-logo-editor-zoom-btn svg {
    width: 18px;
    height: 18px;
}

.funl-logo-editor-zoom-level {
    min-width: 50px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--funl-text-muted);
}

.funl-dark-mode .funl-logo-editor-zoom-btn {
    background: var(--funl-bg-tertiary, #333);
    border-color: var(--funl-border-dark, #444);
    color: var(--funl-text-muted);
}

.funl-dark-mode .funl-logo-editor-zoom-btn:hover {
    background: var(--funl-bg-quaternary, #444);
    border-color: var(--funl-primary-color, #4a90d9);
    color: var(--funl-primary-color, #4a90d9);
}

.funl-dark-mode .funl-logo-editor-zoom-level {
    color: var(--funl-text-muted);
}

/* Crop Overlay & Box */
.funl-logo-editor-crop-overlay {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: visible;
}

.funl-logo-editor-crop-box {
    position: absolute;
    border: 2px dashed var(--funl-primary-color, #4a90d9);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4);
    pointer-events: auto;
    cursor: grab;
    box-sizing: border-box;
}

.funl-logo-editor-crop-box:active {
    cursor: grabbing;
}

/* Crop Handles */
.funl-logo-editor-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--funl-primary-color, #4a90d9);
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transform: translate(-50%, -50%);
    transition: transform 0.1s, background 0.2s;
}

.funl-logo-editor-handle:hover {
    transform: translate(-50%, -50%) scale(1.2);
    background: var(--funl-primary-hover, #3a7bc8);
}

.funl-logo-editor-handle--nw { top: 0; left: 0; cursor: nw-resize; }
.funl-logo-editor-handle--n { top: 0; left: 50%; cursor: n-resize; }
.funl-logo-editor-handle--ne { top: 0; left: 100%; cursor: ne-resize; }
.funl-logo-editor-handle--e { top: 50%; left: 100%; cursor: e-resize; }
.funl-logo-editor-handle--se { top: 100%; left: 100%; cursor: se-resize; }
.funl-logo-editor-handle--s { top: 100%; left: 50%; cursor: s-resize; }
.funl-logo-editor-handle--sw { top: 100%; left: 0; cursor: sw-resize; }
.funl-logo-editor-handle--w { top: 50%; left: 0; cursor: w-resize; }

/* Controls Section */
.funl-logo-editor-controls {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.funl-logo-editor-control-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.funl-logo-editor-control-group label {
    font-size: 14px;
    font-weight: 500;
    color: var(--funl-text-muted);
}

.funl-dark-mode .funl-logo-editor-control-group label {
    color: var(--funl-text-muted);
}

.funl-logo-editor-toggle-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.funl-logo-editor-tolerance {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--funl-bg-tertiary, #e0e0e0);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.funl-dark-mode .funl-logo-editor-tolerance {
    background: var(--funl-bg-tertiary, #444);
}

.funl-logo-editor-tolerance::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--funl-primary-color, #4a90d9);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.funl-logo-editor-tolerance::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--funl-primary-color, #4a90d9);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Footer & Buttons */
.funl-logo-editor-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 16px 20px;
    border-top: 1px solid var(--funl-border-color, #ddd);
}

.funl-logo-editor-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    border: none;
}

.funl-logo-editor-btn:hover {
    transform: translateY(-1px);
}

.funl-logo-editor-btn--primary {
    background: var(--funl-primary-color, #4a90d9);
    color: #fff;
}

.funl-logo-editor-btn--primary:hover {
    background: var(--funl-primary-hover, #3a7bc8);
}

.funl-logo-editor-btn--secondary {
    background: var(--funl-bg-tertiary, #e0e0e0);
    color: var(--funl-text-primary, #222);
}

.funl-dark-mode .funl-logo-editor-btn--secondary {
    background: var(--funl-bg-tertiary, #444);
    color: var(--funl-text-primary, #fff);
}

.funl-logo-editor-btn--secondary:hover {
    background: var(--funl-bg-quaternary, #d0d0d0);
}

.funl-dark-mode .funl-logo-editor-btn--secondary:hover {
    background: var(--funl-bg-quaternary, #555);
}

.funl-logo-editor-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Loading State */
.funl-logo-editor-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.funl-dark-mode .funl-logo-editor-loading {
    background: rgba(0, 0, 0, 0.9);
}

.funl-logo-editor-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--funl-border-color, #ddd);
    border-top-color: var(--funl-primary-color, #4a90d9);
    border-radius: 50%;
    animation: funl-spin 0.8s linear infinite;
}

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

/* Logo Editor Tabs */
.funl-logo-editor-tabs {
    display: flex;
    border-bottom: 1px solid var(--funl-border-color, #ddd);
    padding: 0 20px;
    gap: 4px;
}

.funl-logo-editor-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    background: transparent;
    color: var(--funl-text-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.2s ease;
}

.funl-logo-editor-tab:hover {
    color: var(--funl-text-primary, #222);
    background: var(--funl-bg-tertiary, #f5f5f5);
}

.funl-logo-editor-tab--active {
    color: var(--funl-primary-color, #4a90d9);
    border-bottom-color: var(--funl-primary-color, #4a90d9);
}

.funl-dark-mode .funl-logo-editor-tab:hover {
    color: var(--funl-text-primary, #fff);
    background: var(--funl-bg-tertiary, #333);
}

.funl-dark-mode .funl-logo-editor-tab--active {
    color: var(--funl-primary-color, #4a90d9);
}

.funl-logo-editor-tab svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Color Mode Canvas Cursor */
.funl-logo-editor-canvas-wrap.funl-logo-editor-color-mode {
    cursor: crosshair;
}

.funl-logo-editor-color-cursor {
    position: absolute;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* Color Replacement Controls */
.funl-logo-editor-color-instructions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--funl-bg-tertiary, #f0f8ff);
    border-radius: 8px;
    color: var(--funl-text-muted);
    font-size: 14px;
}

.funl-dark-mode .funl-logo-editor-color-instructions {
    background: var(--funl-bg-tertiary, #2a3a4a);
}

.funl-logo-editor-color-instructions svg {
    flex-shrink: 0;
    color: var(--funl-primary-color, #4a90d9);
}

.funl-logo-editor-help-text {
    font-size: 12px;
    color: var(--funl-text-light);
    margin-top: 4px;
}

/* Color Mappings List */
.funl-logo-editor-color-mappings {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.funl-logo-editor-color-mappings > label {
    font-size: 14px;
    font-weight: 500;
    color: var(--funl-text-muted);
}

.funl-logo-editor-color-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
    padding: 4px;
}

.funl-logo-editor-color-empty {
    padding: 20px;
    text-align: center;
    color: var(--funl-text-light);
    font-size: 13px;
    background: var(--funl-bg-tertiary, #f5f5f5);
    border-radius: 8px;
    border: 2px dashed var(--funl-border-color, #ddd);
}

.funl-dark-mode .funl-logo-editor-color-empty {
    background: var(--funl-bg-tertiary, #2a2a2a);
    border-color: var(--funl-border-dark, #444);
}

.funl-logo-editor-color-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--funl-bg-secondary, #fff);
    border: 1px solid var(--funl-border-color, #ddd);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.funl-dark-mode .funl-logo-editor-color-item {
    background: var(--funl-bg-secondary, #333);
    border-color: var(--funl-border-dark, #444);
}

.funl-logo-editor-color-item--flash {
    background: var(--funl-warning-bg, #fff3cd);
    border-color: var(--funl-warning-color, #ffc107);
}

.funl-logo-editor-color-from {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 2px solid var(--funl-border-color, #ccc);
    flex-shrink: 0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.funl-logo-editor-color-arrow {
    color: var(--funl-text-light);
    flex-shrink: 0;
}

.funl-logo-editor-color-swatch {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 2px solid var(--funl-border);
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: border-color 0.15s ease, transform 0.1s ease;
}

.funl-logo-editor-color-swatch:hover {
    border-color: var(--funl-primary);
    transform: scale(1.05);
}

.funl-logo-editor-color-swatch:active {
    transform: scale(0.98);
}

.funl-logo-editor-color-hex {
    font-family: monospace;
    font-size: 13px;
    color: var(--funl-text-muted);
    flex: 1;
    min-width: 70px;
}

.funl-logo-editor-color-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--funl-text-light);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.funl-logo-editor-color-remove:hover {
    background: var(--funl-danger-bg, #fee2e2);
    color: var(--funl-danger-color, #dc2626);
}

.funl-dark-mode .funl-logo-editor-color-remove:hover {
    background: rgba(220, 38, 38, 0.2);
}

/* Color Tolerance Slider */
.funl-logo-editor-color-tolerance {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--funl-bg-tertiary, #e0e0e0);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.funl-dark-mode .funl-logo-editor-color-tolerance {
    background: var(--funl-bg-tertiary, #444);
}

.funl-logo-editor-color-tolerance::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--funl-primary-color, #4a90d9);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.funl-logo-editor-color-tolerance::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--funl-primary-color, #4a90d9);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Preview Canvas */
.funl-logo-editor-preview-canvas {
    display: block;
}

/* Body state when editor is open */
body.funl-logo-editor-open {
    overflow: hidden;
}

/* Edit Button on Logo Images */
.funl-ai-logo-item {
    position: relative;
    max-width: 300px;
}

/* Logo Card Styles */
.funl-ai-logo-card .funl-ai-generate-logo {
    display: block;
    width: 100%;
    margin-bottom: 12px;
}

.funl-ai-logo-card .funl-ai-logo-empty {
    margin: 0;
    padding: 16px 0;
    text-align: center;
    color: var(--funl-text-muted);
    font-size: 13px;
}

/* Sidebar Logo Grid (Media panel) */
.funl-ai-logo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0;
}

.funl-ai-logo-grid .funl-ai-logo-item {
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--funl-bg-muted);
    border: 1px solid var(--funl-border);
}

.funl-ai-logo-grid .funl-ai-logo-item a {
    display: block;
    text-decoration: none;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-conic-gradient(var(--funl-bg-muted) 0% 25%, var(--funl-bg-surface) 0% 50%) 50% / 12px 12px;
}

.funl-dark-mode .funl-ai-logo-grid .funl-ai-logo-item a {
    background: repeating-conic-gradient(#333 0% 25%, #222 0% 50%) 50% / 12px 12px;
}

.funl-ai-logo-grid .funl-ai-logo-item img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.funl-ai-logo-grid .funl-ai-logo-item figcaption,
.funl-ai-logo-grid .funl-ai-logo-item .funl-ai-logo-meta {
    padding: 6px 8px;
    font-size: 11px;
    text-align: center;
    color: var(--funl-text-muted);
    background: var(--funl-bg-surface);
    line-height: 1.3;
    border-top: 1px solid var(--funl-border);
}

.funl-ai-logo-edit-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
    z-index: 5;
}

.funl-ai-logo-item:hover .funl-ai-logo-edit-btn {
    opacity: 1;
}

.funl-ai-logo-edit-btn:hover {
    background: rgba(0, 0, 0, 0.9);
}

.funl-ai-message {
    display: flex;
    width: 100%;
}

.funl-ai-message--assistant {
    justify-content: flex-start;
}

.funl-ai-message__bubble {
    display: inline-block;
    padding: 14px 18px;
    border-radius: 18px;
    max-width: 80%;
    line-height: 1.5;
    font-size: 16px;
    box-shadow: var(--funl-ai-bubble-shadow);
}

.funl-ai-message--pending .funl-ai-message__bubble {
    opacity: 0.7;
}

/* Infinite scroll loading indicator */
.funl-ai-loading-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    color: var(--funl-text-muted);
    font-size: 13px;
}

.funl-ai-loading-more .funl-ai-loading-dots {
    display: inline-flex;
    gap: 4px;
}

.funl-ai-loading-more .funl-ai-loading-dots span {
    width: 6px;
    height: 6px;
    background: var(--funl-text-muted);
    border-radius: 50%;
    animation: funl-ai-dot-bounce 1.2s infinite ease-in-out;
}

.funl-ai-loading-more .funl-ai-loading-dots span:nth-child(1) {
    animation-delay: 0s;
}

.funl-ai-loading-more .funl-ai-loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.funl-ai-loading-more .funl-ai-loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

/* "Scroll up for more" hint */
.funl-ai-load-more-hint {
    text-align: center;
    padding: 12px 16px;
    color: var(--funl-text-muted);
    font-size: 12px;
    opacity: 0.7;
    user-select: none;
}

.funl-ai-message--assistant .funl-ai-message__bubble {
    background: var(--funl-ai-bubble-assistant-bg);
    color: var(--funl-text-primary);
    border: 1px solid var(--funl-ai-bubble-assistant-border);
}

.funl-ai-message--user {
    justify-content: flex-end;
}

.funl-ai-message--user .funl-ai-message__bubble {
    background: var(--funl-primary);
    color: #fff;
    text-align: left;
    border: none;
}

/* Typing indicator for AI thinking state */
.funl-ai-typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
}

.funl-ai-typing-bubble {
    padding: 12px 16px !important;
    min-height: auto !important;
}

.funl-ai-typing-bubble .funl-ai-typing-indicator {
    margin: 0;
}

.funl-ai-typing-indicator span {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--funl-ai-typing-dot-color);
    border-radius: 50%;
    opacity: 0.4;
    animation: funl-typing-bounce 1.4s infinite ease-in-out both;
}

.funl-ai-typing-indicator span:nth-child(1) {
    animation-delay: -0.32s;
}

.funl-ai-typing-indicator span:nth-child(2) {
    animation-delay: -0.16s;
}

.funl-ai-typing-indicator span:nth-child(3) {
    animation-delay: 0s;
}

@keyframes funl-typing-bounce {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.4;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Markdown content styles within bubbles */
.funl-ai-message__bubble p {
    margin: 0 0 0.75em 0;
}

.funl-ai-message__bubble p:last-child {
    margin-bottom: 0;
}

.funl-ai-message__bubble h1,
.funl-ai-message__bubble h2,
.funl-ai-message__bubble h3,
.funl-ai-message__bubble h4,
.funl-ai-message__bubble h5,
.funl-ai-message__bubble h6 {
    margin: 0.75em 0 0.5em 0;
    line-height: 1.3;
    font-weight: 600;
}

.funl-ai-message__bubble h1:first-child,
.funl-ai-message__bubble h2:first-child,
.funl-ai-message__bubble h3:first-child,
.funl-ai-message__bubble h4:first-child,
.funl-ai-message__bubble h5:first-child,
.funl-ai-message__bubble h6:first-child {
    margin-top: 0;
}

.funl-ai-message__bubble h1 { font-size: 1.4em; }
.funl-ai-message__bubble h2 { font-size: 1.25em; }
.funl-ai-message__bubble h3 { font-size: 1.1em; }
.funl-ai-message__bubble h4 { font-size: 1em; }
.funl-ai-message__bubble h5 { font-size: 0.95em; }
.funl-ai-message__bubble h6 { font-size: 0.9em; }

.funl-ai-message__bubble strong {
    font-weight: 600;
}

.funl-ai-message__bubble em {
    font-style: italic;
}

.funl-ai-message__bubble del {
    text-decoration: line-through;
    opacity: 0.7;
}

.funl-ai-message__bubble code {
    background: var(--funl-ai-code-bg);
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.9em;
}

.funl-ai-message--user .funl-ai-message__bubble code {
    background: var(--funl-ai-code-user-bg);
}

.funl-ai-message__bubble pre {
    background: var(--funl-ai-pre-bg);
    padding: 12px 14px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 0.75em 0;
    font-size: 0.85em;
}

.funl-ai-message__bubble pre:first-child {
    margin-top: 0;
}

.funl-ai-message__bubble pre:last-child {
    margin-bottom: 0;
}

.funl-ai-message__bubble pre code {
    background: none;
    padding: 0;
    font-size: inherit;
}

.funl-ai-message--user .funl-ai-message__bubble pre {
    background: var(--funl-ai-pre-user-bg);
}

.funl-ai-message__bubble ul,
.funl-ai-message__bubble ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
}

.funl-ai-message__bubble ul:first-child,
.funl-ai-message__bubble ol:first-child {
    margin-top: 0;
}

.funl-ai-message__bubble ul:last-child,
.funl-ai-message__bubble ol:last-child {
    margin-bottom: 0;
}

.funl-ai-message__bubble li {
    margin: 0.25em 0;
}

/* Field list from website scan results */
.funl-ai-field-list {
    list-style: none;
    padding: 0;
    margin: 0.75em 0;
    background: var(--funl-ai-field-list-bg);
    border-radius: 8px;
    padding: 0.5em 0;
}

.funl-ai-field-list li {
    padding: 0.4em 1em;
    margin: 0;
    border-bottom: 1px solid var(--funl-ai-field-list-border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em;
}

.funl-ai-field-list li:last-child {
    border-bottom: none;
}

.funl-ai-field-list li strong {
    color: var(--funl-primary, #3b82f6);
    flex-shrink: 0;
}

.funl-ai-message__bubble blockquote {
    margin: 0.75em 0;
    padding: 0.5em 0 0.5em 1em;
    border-left: 3px solid var(--funl-ai-blockquote-border);
    color: inherit;
    opacity: 0.9;
}

.funl-ai-message__bubble blockquote:first-child {
    margin-top: 0;
}

.funl-ai-message__bubble blockquote:last-child {
    margin-bottom: 0;
}

.funl-ai-message--user .funl-ai-message__bubble blockquote {
    border-left-color: var(--funl-ai-blockquote-user-border);
}

.funl-ai-message__bubble hr {
    border: none;
    border-top: 1px solid var(--funl-ai-hr-color);
    margin: 1em 0;
}

.funl-ai-message--user .funl-ai-message__bubble hr {
    border-top-color: var(--funl-ai-hr-user-color);
}

.funl-ai-message__bubble a {
    color: var(--funl-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.funl-ai-message--user .funl-ai-message__bubble a {
    color: #fff;
    text-decoration-color: rgba(255, 255, 255, 0.5);
}

.funl-ai-message--user .funl-ai-message__bubble a:hover {
    text-decoration-color: #fff;
}

.funl-ai-message__meta {
    margin-top: 6px;
    font-size: 12px;
    color: var(--funl-text-muted);
}

.funl-ai-structured {
    display: none;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    border-left: 2px solid var(--funl-border);
    padding-left: 12px;
    font-size: 13px;
}

.funl-ai-structured__label {
    font-weight: 600;
    margin-right: 8px;
}

/* Rewind conversation button - user messages only, positioned to the right */
.funl-ai-message {
    position: relative;
}

.funl-ai-message__rewind {
    position: relative;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin-right: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--funl-bg-surface);
    color: var(--funl-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease, background 0.15s ease, color 0.15s ease;
    box-shadow: var(--funl-shadow);
}

.funl-ai-message--user:hover .funl-ai-message__rewind,
.funl-ai-message--user .funl-ai-message__rewind:focus-visible {
    opacity: 1;
    visibility: visible;
}

.funl-ai-message__rewind:hover {
    background: var(--funl-primary);
    color: #fff;
}

.funl-ai-message__rewind:focus-visible {
    outline: 2px solid var(--funl-primary);
    outline-offset: 2px;
}

.funl-ai-message__rewind svg {
    width: 14px;
    height: 14px;
}

/* Rewind confirmation dialog - user messages only */
.funl-ai-rewind-confirm {
    position: absolute;
    z-index: 100;
    top: 0;
    right: 0;
    background: var(--funl-bg-surface);
    border: 1px solid var(--funl-border);
    border-radius: 12px;
    box-shadow: var(--funl-shadow-lg);
    padding: 16px;
    min-width: 260px;
    animation: funl-rewind-confirm-in 0.15s ease-out;
}

@keyframes funl-rewind-confirm-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.funl-ai-rewind-confirm__title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--funl-text-heading);
}

.funl-ai-rewind-confirm__message {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--funl-text-muted);
    line-height: 1.5;
}

.funl-ai-rewind-confirm__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.funl-ai-rewind-confirm__cancel,
.funl-ai-rewind-confirm__submit {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}

.funl-ai-rewind-confirm__cancel {
    background: var(--funl-bg-muted);
    border: 1px solid var(--funl-border);
    color: var(--funl-text-primary);
}

.funl-ai-rewind-confirm__cancel:hover {
    background: var(--funl-border);
}

.funl-ai-rewind-confirm__submit {
    background: #ef4444;
    border: none;
    color: #fff;
}

.funl-ai-rewind-confirm__submit:hover {
    background: #dc2626;
}

/* Mobile: show rewind button on tap (toggle via JS) */
@media (max-width: 768px) {
    .funl-ai-message--user .funl-ai-message__rewind {
        opacity: 0.6;
        visibility: visible;
    }

    .funl-ai-rewind-confirm {
        position: fixed;
        top: auto;
        bottom: 20px;
        left: 20px;
        right: 20px;
        margin: 0;
        min-width: auto;
    }
}

.funl-ai-composer {
    margin-top: auto;
    border: none;
    border-radius: 0 0 18px 18px;
    padding: 0 20px 16px;
    background: var(--funl-bg-surface);
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 -5px 30px var(--funl-bg-surface);
    position: sticky;
    bottom: 0;
    z-index: 2;
}

/* Attachments preview area */
.funl-ai-composer__attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.funl-ai-composer__attachments:empty {
    display: none;
}

.funl-ai-attachment {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--funl-bg-muted);
    border: 1px solid var(--funl-border);
    border-radius: 8px;
    font-size: 13px;
    max-width: 200px;
}

.funl-ai-attachment--image {
    padding: 4px;
}

.funl-ai-attachment__thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
}

.funl-ai-attachment__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--funl-text-muted);
}

.funl-ai-attachment__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--funl-text);
}

.funl-ai-attachment__remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--funl-danger);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
}

.funl-ai-attachment:hover .funl-ai-attachment__remove {
    opacity: 1;
}

.funl-ai-attachment--uploading {
    opacity: 0.6;
}

.funl-ai-attachment--uploading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: funlShimmer 1.5s infinite;
}

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

/* Modern input wrap with icons */
.funl-ai-composer__input-wrap {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background: var(--funl-ai-bubble-assistant-bg);
    border: 1px solid var(--funl-border);
    border-radius: 24px;
    padding: 8px 8px 8px 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.funl-ai-composer__input-wrap:focus-within {
    border-color: var(--funl-primary);
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
}

.funl-ai-composer__attach-btn,
.funl-ai-composer__send-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--funl-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.funl-ai-composer__attach-btn:hover {
    background: var(--funl-bg-muted);
    color: var(--funl-text);
}

.funl-ai-composer__send-btn {
    background: var(--funl-primary);
    color: #fff;
}

.funl-ai-composer__send-btn:hover {
    background: var(--funl-primary-dark, #005a87);
}

.funl-ai-composer__send-btn:disabled {
    background: var(--funl-bg-muted);
    color: var(--funl-text-muted);
    cursor: not-allowed;
}

.funl-ai-composer textarea {
    flex: 1;
    box-sizing: border-box;
    width: 100%;
    resize: none;
    min-height: 24px;
    max-height: 150px;
    border: none;
    background: transparent;
    color: var(--funl-text-primary);
    padding: 6px 0;
    font-size: 15px;
    line-height: 1.5;
    font-family: inherit;
}

.funl-ai-composer textarea:focus {
    outline: none;
    box-shadow: none;
}

.funl-ai-composer textarea::placeholder {
    color: var(--funl-text-muted);
}

/* Hidden file input */
.funl-ai-composer__file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Drop overlay */
.funl-ai-composer__drop-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 115, 170, 0.1);
    border: 2px dashed var(--funl-primary);
    border-radius: 18px;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
}

.funl-ai-composer.is-drag-over .funl-ai-composer__drop-overlay {
    display: flex;
}

.funl-ai-composer__drop-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--funl-primary);
    font-size: 16px;
    font-weight: 500;
}

.funl-ai-alert {
    min-height: 0;
    font-size: 13px;
    color: var(--funl-text-muted);
    padding: 0 4px;
}

.funl-ai-alert:empty {
    display: none;
}

.funl-ai-alert.is-error {
    color: var(--funl-danger);
}

.funl-ai-alert.is-success {
    color: var(--funl-success);
}

.funl-ai-alert.is-info {
    color: var(--funl-text-primary);
}

.funl-ai-message__bubble {
    position: relative;
}

.funl-ai-message__bubble[data-timestamp]::after {
    content: attr(data-timestamp);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translate(-50%, 6px);
    background: var(--funl-ai-tooltip-bg);
    color: #fff;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 999px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 10;
}

.funl-ai-message__bubble[data-timestamp]::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(100% + 2px);
    transform: translate(-50%, 6px);
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: var(--funl-ai-tooltip-bg) transparent transparent transparent;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.funl-ai-message__bubble[data-timestamp]:hover::after,
.funl-ai-message__bubble[data-timestamp]:hover::before,
.funl-ai-message__bubble.is-timestamp-visible::after,
.funl-ai-message__bubble.is-timestamp-visible::before,
.funl-ai-message__bubble:focus-visible::after,
.funl-ai-message__bubble:focus-visible::before {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Attachments in user messages */
.funl-ai-message__attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.funl-ai-message__attachment-image {
    display: block;
    max-width: 200px;
    border-radius: 8px;
    overflow: hidden;
}

.funl-ai-message__attachment-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.funl-ai-message__attachment-file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    font-size: 12px;
    color: inherit;
    text-decoration: none;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.funl-ai-message__attachment-file:hover {
    background: rgba(255, 255, 255, 0.25);
}

.funl-ai-color-token {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 8px 2px 2px;
    margin: -6px 0 4px;
    top: 6px;
    border-radius: 999px;
    border: 1px solid var(--funl-border);
    background: var(--funl-ai-color-token-bg);
    font-size: 13px;
    position: relative;
}

.funl-ai-color-token__swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--funl-ai-color-swatch-border);
    box-shadow: inset 0 1px 2px var(--funl-ai-color-swatch-border);
}

.funl-ai-color-token__value {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-size: 12px;
}

.funl-ai-message__bubble--typing {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.funl-ai-typing-dots {
    display: inline-flex;
    gap: 6px;
}

.funl-ai-typing-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--funl-text-muted);
    animation: funlAiTyping 1s infinite ease-in-out;
}

.funl-ai-message--user .funl-ai-typing-dots span {
    background: rgba(255, 255, 255, 0.8);
}

@keyframes funlAiTyping {
    0%, 80%, 100% {
        opacity: 0.3;
        transform: translateY(0);
    }
    40% {
        opacity: 1;
        transform: translateY(-4px);
    }
}

/* Logo Loading Message */
.funl-ai-message--logo-loading .funl-ai-message__bubble {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.funl-ai-logo-loading-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--funl-text);
}

/* Site Scanning Message */
.funl-ai-message--scanning .funl-ai-message__bubble {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.funl-ai-scanning-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--funl-text);
}

/* Submit Account Button */
.funl-ai-submit-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px;
    margin-top: 8px;
}

.funl-ai-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 22px 44px;
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #15803d 100%);
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.funl-ai-submit-btn .funl-ai-submit-btn__text {
    line-height: 1em;
    padding-bottom: 4px;
}

.funl-ai-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.funl-ai-submit-btn:hover:not(:disabled)::before {
    left: 100%;
}

.funl-ai-submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 50%, #16a34a 100%);
}

.funl-ai-submit-btn:active:not(:disabled) {
    transform: translateY(0);
}

.funl-ai-submit-btn:disabled {
    cursor: not-allowed;
    opacity: 0.8;
}

/* Icon visibility - show send icon by default, gear when loading */
.funl-ai-submit-btn__icon--gear {
    display: none;
}

.funl-ai-submit-btn.is-loading .funl-ai-submit-btn__icon--send {
    display: none;
}

.funl-ai-submit-btn.is-loading .funl-ai-submit-btn__icon--gear {
    display: inline-block;
    animation: funlSubmitSpin 1s linear infinite;
}

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

.funl-ai-submit-success {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 600;
    color: var(--funl-success, #22c55e);
    background: rgba(34, 197, 94, 0.1);
    border-radius: 12px;
    animation: funlSubmitSuccessFadeIn 0.3s ease-out;
}

.funl-ai-submit-success svg {
    stroke: var(--funl-success, #22c55e);
}

@keyframes funlSubmitSuccessFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.funl-ai-submit-error {
    margin-top: 12px;
    padding: 10px 16px;
    font-size: 14px;
    color: var(--funl-error, #ef4444);
    background: rgba(239, 68, 68, 0.1);
    border-radius: 8px;
    text-align: center;
}

/* Confetti Effect */
.funl-ai-confetti-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 100;
}

.funl-ai-confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    opacity: 0;
    animation: funlConfettiBurst 1.5s cubic-bezier(0.15, 0.8, 0.3, 1) forwards;
}

.funl-ai-confetti--circle {
    border-radius: 50%;
}

.funl-ai-confetti--square {
    border-radius: 2px;
}

.funl-ai-confetti--ribbon {
    width: 4px;
    height: 14px;
    border-radius: 2px;
}

@keyframes funlConfettiBurst {
    0% {
        opacity: 1;
        transform: translateY(0) translateX(0) rotate(0deg) scale(var(--confetti-start-scale, 1));
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(var(--confetti-travel, -400px)) translateX(var(--confetti-drift, 0px)) rotate(var(--confetti-rotation, 720deg)) scale(var(--confetti-end-scale, 0.6));
    }
}

/* Dark mode adjustments for submit button */
.funl-dark-mode .funl-ai-submit-btn {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.funl-dark-mode .funl-ai-submit-btn:hover:not(:disabled) {
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.funl-ai-composer__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 0 4px;
}

.funl-ai-hint {
    font-size: 12px;
    color: var(--funl-text-muted);
}

.funl-ai-scan-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    color: var(--funl-primary);
    cursor: pointer;
    text-decoration: none;
}

.funl-ai-scan-link:hover {
    text-decoration: underline;
}

.funl-ai-composer__actions {
    display: flex;
    gap: 10px;
}

.funl-ai-site-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.funl-ai-site-input {
    display: flex;
    gap: 10px;
}

.funl-ai-site-input input[type="url"] {
    flex: 1;
    border-radius: 10px;
    border: 1px solid var(--funl-border);
    padding: 10px 12px;
}

.funl-ai-site-help {
    margin: 0;
    font-size: 12px;
    color: var(--funl-text-muted);
}

.funl-ai-site-result {
    margin-top: 12px;
    border: 1px dashed var(--funl-border);
    border-radius: 12px;
    padding: 12px;
    background: var(--funl-bg-subtle);
}

.funl-ai-site-text {
    font-size: 14px;
    color: var(--funl-text-primary);
    line-height: 1.5;
}

.funl-ai-site-fields {
    margin: 16px 0 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 12px;
    font-size: 13px;
}

.funl-ai-site-source {
    font-size: 12px;
    color: var(--funl-text-muted);
    margin: 0 0 8px;
}

@media (max-width: 1024px) {
    .funl-ai-panel__layout {
        flex-direction: column;
    }
    
    .funl-ai-panel {
        height: auto;
        min-height: calc(100vh - 70px);
    }
    
    .funl-ai-chat {
        border-right: none;
        border-bottom: 1px solid var(--funl-border);
        min-height: 400px;
    }
    
    .funl-ai-sidebar {
        max-width: none;
        overflow-y: visible;
    }
}

@media (max-width: 640px) {
    .funl-ai-panel {
        padding: 0;
    }

    .funl-ai-panel__header {
        flex-direction: column;
    }

    .funl-ai-composer__footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .funl-ai-composer__actions {
        width: 100%;
        flex-direction: column;
    }

    .funl-ai-site-input {
        flex-direction: column;
    }
    
    .funl-ai-sidebar {
        padding: 16px;
    }
    
    .funl-ai-messages {
        padding: 16px;
    }
}
/* ============================================
 * FUNL ONBOARDING PLUGIN - CONSOLIDATED STYLES
 * ============================================ */

/* ===================================
 * CSS VARIABLES - CONSOLIDATED
 * =================================== 
 * 
 * VARIABLE NAMING CONVENTION:
 * --funl-{category}-{variant}
 * 
 * BACKGROUND HIERARCHY:
 * - surface: white cards, main content areas
 * - subtle:  very light gray backgrounds (#f8fafc)
 * - muted:   medium gray backgrounds (#f3f4f6)
 * - active:  hover/active states (#e5e7eb)
 * 
 * TEXT HIERARCHY:
 * - primary: main body text
 * - heading: headings and emphasis
 * - muted:   subdued/secondary text
 * - light:   placeholders/disabled
 * 
 * =================================== */
:root {
    /* ===== CORE BRAND COLORS ===== */
    --funl-primary: #0073aa;
    --funl-primary-hover: #005a87;
    --funl-primary-dark: #004666;
    
    --funl-success: #00a32a;
    --funl-success-hover: #007a20;
    --funl-success-dark: #005c18;
    
    --funl-warning: #f59e0b;
    --funl-warning-dark: #92400e;
    
    --funl-danger: #ef4444;
    --funl-danger-hover: #dc2626;
    --funl-danger-dark: #7f1d1d;
    
    --funl-edit: #16863f;
    --funl-edit-hover: #10632e;
    
    --funl-gray: #6c757d;
    --funl-gray-hover: #5a6169;
    --funl-gray-dark: #495057;
    
    /* ===== BACKGROUND COLORS (Consolidated) ===== */
    /* Surface: white backgrounds for cards, inputs, main content */
    --funl-bg-surface: #fff;
    /* Subtle: very light gray for sections, sidebars */
    --funl-bg-subtle: #f8fafc;
    /* Muted: medium gray for disabled areas, separators */
    --funl-bg-muted: #f3f4f6;
    /* Active: for hover/active states */
    --funl-bg-active: #e5e7eb;
    /* Hover: blue-tinted hover state */
    --funl-bg-hover: #eff6ff;
    /* Body: page background */
    --funl-bg-body: #f5f5f5;
    /* Primary tint: for highlighting primary-colored areas */
    --funl-bg-primary: rgba(0, 115, 170, 0.1);
    /* Delete: red for delete buttons */
    --funl-bg-delete: #dc2626;
    /* Delete hover: darker red for delete buttons on hover */
    --funl-bg-delete-hover: #991b1b;
    
    /* Shorthand */
    --funl-bg: var(--funl-bg-surface);
    
    /* ===== TEXT COLORS (Consolidated) ===== */
    /* Primary: main body text */
    --funl-text-primary: #374151;
    /* Heading: headings and strong emphasis */
    --funl-text-heading: #1f2937;
    /* Muted: secondary/subdued text */
    --funl-text-muted: #6b7280;
    /* Light: placeholders, disabled text */
    --funl-text-light: #9ca3af;
    /* White: inverse text on dark backgrounds */
    --funl-text-white: #fff;
    
    /* Shorthand */
    --funl-text: var(--funl-text-primary);
    
    /* ===== BORDER COLORS (Consolidated) ===== */
    /* Standard border */
    --funl-border: #e5e7eb;
    /* Focus/hover state border */
    --funl-border-focus: #d1d5db;
    
    /* ===== INPUT/FORM COLORS (Consolidated) ===== */
    --funl-input-bg: var(--funl-bg-surface);
    --funl-input-border: var(--funl-border);
    --funl-input-border-hover: var(--funl-border-focus);
    --funl-input-border-focus: var(--funl-primary);
    --funl-input-placeholder: var(--funl-text-light);
    --funl-input-focus-shadow: rgba(59, 130, 246, 0.1);
    
    /* Form validation colors */
    --funl-form-error-bg: #fef2f2;
    --funl-form-error-border: var(--funl-danger);
    --funl-form-success-bg: #f0fdf4;
    --funl-form-success-border: var(--funl-success);
    
    /* ===== UTILITY ALIASES ===== */
    --funl-link: var(--funl-primary);
    --funl-error: var(--funl-danger);
    
    /* ===== RECORD STATUS COLORS ===== */
    --funl-status-pending-bg: #fff3cd;
    --funl-status-pending-text: #856404;
    --funl-status-pending-border: #ffeaa7;
    
    --funl-status-processing-bg: #cce5ff;
    --funl-status-processing-text: #004085;
    --funl-status-processing-border: #80bdff;
    
    --funl-status-completed-bg: #d4edda;
    --funl-status-completed-text: #155724;
    --funl-status-completed-border: #a3d977;
    
    --funl-status-failed-bg: #f8d7da;
    --funl-status-failed-text: #721c24;
    --funl-status-failed-border: #f5c6cb;
    
    /* Ready uses same as completed */
    --funl-status-ready-bg: var(--funl-status-completed-bg);
    --funl-status-ready-text: var(--funl-success);
    --funl-status-ready-border: #b3e5b3;
    
    --funl-status-incomplete-bg: var(--funl-bg-subtle);
    --funl-status-incomplete-text: var(--funl-gray);
    --funl-status-incomplete-border: var(--funl-border);
    
    /* Connection Status */
    --funl-status-connected-bg: #f0fdf4;
    --funl-status-connected-border: #bbf7d0;
    --funl-status-not-connected-bg: #fef2f2;
    --funl-status-not-connected-border: #fecaca;
    
    /* ===== MESSAGE STATUS COLORS ===== */
    --funl-status-success-bg: #f0f9f4;
    --funl-status-success-text: #065f46;
    --funl-status-warning-bg: #fffbeb;
    --funl-status-warning-text: #92400e;
    --funl-status-error-bg: #fef2f2;
    --funl-status-error-text: #991b1b;
    --funl-status-info-bg: #f0f9ff;
    --funl-status-info-text: #1e40af;
    
    /* ===== STEP INDICATOR COLORS ===== */
    --funl-step-current: var(--funl-primary);
    --funl-step-completed: var(--funl-success);
    --funl-step-incomplete: var(--funl-danger);
    --funl-step-incomplete-text: var(--funl-text-white);
    --funl-step-pending: #ddd;
    --funl-step-pending-text: #666;
    --funl-step-locked: var(--funl-text-light);
    --funl-step-indicator-pending: var(--funl-bg-muted);
    --funl-step-indicator-pending-text: var(--funl-text-light);
    
    /* ===== COMPONENT COLORS ===== */
    --funl-connection-bg: var(--funl-bg-subtle);
    --funl-connection-border: var(--funl-border);
    --funl-theme-toggle-border: var(--funl-border);
    --funl-setup-card-bg: var(--funl-bg-surface);
    --funl-card-border: var(--funl-border);
    --funl-card-meta-label: var(--funl-text-muted);
    --funl-card-meta-value: var(--funl-text-primary);
    
    /* Indicator Colors */
    --funl-indicator-warning: var(--funl-warning);
    --funl-indicator-error: var(--funl-danger);
    
    /* ===== AI CHAT COMPONENT ===== */
    --funl-ai-bubble-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
    --funl-ai-bubble-assistant-bg: #fff;
    --funl-ai-bubble-assistant-border: rgba(15, 23, 42, 0.08);
    --funl-ai-code-bg: rgba(15, 23, 42, 0.08);
    --funl-ai-code-user-bg: rgba(255, 255, 255, 0.2);
    --funl-ai-pre-bg: rgba(15, 23, 42, 0.06);
    --funl-ai-pre-user-bg: rgba(255, 255, 255, 0.15);
    --funl-ai-blockquote-border: rgba(15, 23, 42, 0.2);
    --funl-ai-blockquote-user-border: rgba(255, 255, 255, 0.4);
    --funl-ai-hr-color: rgba(15, 23, 42, 0.15);
    --funl-ai-hr-user-color: rgba(255, 255, 255, 0.3);
    --funl-ai-field-list-bg: rgba(15, 23, 42, 0.04);
    --funl-ai-field-list-border: rgba(15, 23, 42, 0.06);
    --funl-ai-tooltip-bg: rgba(15, 23, 42, 0.92);
    --funl-ai-color-token-bg: rgba(15, 23, 42, 0.04);
    --funl-ai-color-swatch-border: rgba(15, 23, 42, 0.15);
    --funl-ai-typing-dot-color: var(--funl-primary);
    --funl-ai-header-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    
    /* ===== PROGRESS BAR ===== */
    --funl-progress-bg: #e5e5e5;
    --funl-progress-fill: linear-gradient(90deg, var(--funl-primary), var(--funl-primary-hover));
    --funl-progress-fill-gradient: linear-gradient(90deg, var(--funl-primary), var(--funl-primary-hover));
    --funl-progress-fill-shadow: 0 1px 2px rgba(0, 115, 170, 0.3);
    --funl-progress-bg-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    
    /* ===== CREATE NEW CARD ===== */
    --funl-create-new-bg: var(--funl-btn-neutral);
    --funl-create-new-border: var(--funl-border);
    --funl-create-new-hover-bg: var(--funl-bg-hover);
    --funl-create-new-hover-border: var(--funl-primary);
    
    /* ===== SHADOWS ===== */
    --funl-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --funl-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --funl-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
    --funl-shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.15);
    
    /* ===== BORDER RADIUS ===== */
    --funl-radius-sm: 4px;
    --funl-radius: 6px;
    --funl-radius-md: 8px;
    --funl-radius-lg: 12px;
    --funl-radius-xl: 20px;
    
    /* ===== BUTTON GRADIENTS ===== */
    --funl-btn-primary: linear-gradient(135deg, var(--funl-primary), var(--funl-primary-hover));
    --funl-btn-primary-hover: linear-gradient(135deg, var(--funl-primary-hover), var(--funl-primary-dark));
    --funl-btn-success: linear-gradient(135deg, var(--funl-success), var(--funl-success-hover));
    --funl-btn-success-hover: linear-gradient(135deg, var(--funl-success-hover), var(--funl-success-dark));
    --funl-btn-gray: linear-gradient(135deg, var(--funl-gray), var(--funl-gray-hover));
    --funl-btn-gray-hover: linear-gradient(135deg, var(--funl-gray-hover), var(--funl-gray-dark));
    --funl-btn-neutral: linear-gradient(135deg, #f8f9fa, #e9ecef);
    --funl-btn-neutral-hover: linear-gradient(135deg, #e9ecef, #dee2e6);
    --funl-btn-submit: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --funl-btn-submit-hover: linear-gradient(135deg, #5a6fd8 0%, #6941a0 100%);
    
    /* Icon SVGs - Default (gray) variants */
    --funl-icon-submit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23374151'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 19l9 2-9-18-9 18 9-2zm0 0v-8'/%3E%3C/svg%3E");
    --funl-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23374151'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
    --funl-icon-edit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23374151'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z'/%3E%3C/svg%3E");
    --funl-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23374151'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
    --funl-icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23374151'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 19l-7-7m0 0l7-7m-7 7h18'/%3E%3C/svg%3E");
    --funl-icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23374151'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14 5l7 7m0 0l-7 7m7-7H3'/%3E%3C/svg%3E");
    --funl-icon-document: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23374151'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'/%3E%3C/svg%3E");
    --funl-icon-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E");
    --funl-icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23374151'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18L18 6M6 6l12 12'/%3E%3C/svg%3E");
    --funl-icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23374151'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 15a3 3 0 100-6 3 3 0 000 6z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z'/%3E%3C/svg%3E");
    --funl-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2' stroke-width='2'/%3E%3Cline x1='12' y1='8' x2='12' y2='16' stroke-width='2'/%3E%3Cline x1='8' y1='12' x2='16' y2='12' stroke-width='2'/%3E%3C/svg%3E");
    
    /* Icon SVGs - Color variants for specific contexts */
    --funl-icon-edit-gray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23495057'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z'/%3E%3C/svg%3E");
    --funl-icon-edit-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z'/%3E%3C/svg%3E");
    --funl-icon-search-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
    --funl-icon-x-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ef4444'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18L18 6M6 6l12 12'/%3E%3C/svg%3E");
    --funl-icon-x-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18L18 6M6 6l12 12'/%3E%3C/svg%3E");
    --funl-icon-submit-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 19l9 2-9-18-9 18 9-2zm0 0v-8'/%3E%3C/svg%3E");
    --funl-icon-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
    --funl-icon-arrow-left-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 19l-7-7m0 0l7-7m-7 7h18'/%3E%3C/svg%3E");
    --funl-icon-arrow-right-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14 5l7 7m0 0l-7 7m7-7H3'/%3E%3C/svg%3E");
    --funl-icon-settings-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 15a3 3 0 100-6 3 3 0 000 6z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z'/%3E%3C/svg%3E");
    
    /* Additional icons for review page */
    --funl-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f59e0b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.99-.833-2.732 0l-6.928 12c-.77.833.192 2.5 1.732 2.5z'/%3E%3C/svg%3E");
    --funl-icon-warning-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ef4444'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.99-.833-2.732 0l-6.928 12c-.77.833.192 2.5 1.732 2.5z'/%3E%3C/svg%3E");
    
    /* Connection icons for connect/reconnect buttons */
    --funl-icon-connect: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23374151'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1'/%3E%3C/svg%3E");
    --funl-icon-connect-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1'/%3E%3C/svg%3E");
    --funl-icon-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23374151'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15'/%3E%3C/svg%3E");
    --funl-icon-refresh-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15'/%3E%3C/svg%3E");
    --funl-icon-sparkles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23374151'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z'/%3E%3C/svg%3E");
    --funl-icon-sparkles-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z'/%3E%3C/svg%3E");
}


/* ===================================
 * DARK MODE OVERRIDES - CONSOLIDATED
 * =================================== */
.funl-dark-mode {
    /* ===== CORE BRAND COLORS (dark mode adjustments) ===== */
    --funl-edit: #0a4720;
    --funl-edit-hover: #0f5227;
    
    /* ===== BACKGROUND COLORS (Consolidated) ===== */
    /* Surface: dark gray for cards, inputs, main content */
    --funl-bg-surface: #1a1a1a;
    /* Subtle: slightly lighter for sections */
    --funl-bg-subtle: #1f2937;
    /* Muted: medium dark gray */
    --funl-bg-muted: #374151;
    /* Active: for hover/active states */
    --funl-bg-active: #4b5563;
    /* Hover: blue-tinted dark hover state */
    --funl-bg-hover: #1a2332;
    /* Body: page background */
    --funl-bg-body: #000000;
    /* Primary tint: for highlighting primary-colored areas */
    --funl-bg-primary: rgba(59, 130, 246, 0.15);
    /* Delete: red for delete buttons */
    --funl-bg-delete: #dc2626;
    /* Delete hover: darker red for delete buttons on hover */
    --funl-bg-delete-hover: #991b1b;
    
    /* Shorthand */
    --funl-bg: var(--funl-bg-surface);
    
    /* ===== TEXT COLORS (Consolidated) ===== */
    /* Primary: main body text */
    --funl-text-primary: #e0e0e0;
    /* Heading: headings and strong emphasis */
    --funl-text-heading: #f3f4f6;
    /* Muted: secondary/subdued text */
    --funl-text-muted: #b3b3b3;
    /* Light: placeholders, disabled text */
    --funl-text-light: #999;
    /* White: inverse text on dark backgrounds */
    --funl-text-white: #fff;
    
    /* Shorthand */
    --funl-text: var(--funl-text-primary);
    
    /* ===== BORDER COLORS (Consolidated) ===== */
    /* Standard border */
    --funl-border: #404040;
    /* Focus/hover state border */
    --funl-border-focus: #555;
    
    /* ===== INPUT/FORM COLORS (Consolidated) ===== */
    --funl-input-bg: #374151;
    --funl-input-border: #4b5563;
    --funl-input-border-hover: #6b7280;
    --funl-input-border-focus: #3b82f6;
    --funl-input-placeholder: #9ca3af;
    --funl-input-focus-shadow: rgba(59, 130, 246, 0.1);
    
    /* Form validation colors */
    --funl-form-error-bg: #3d0303;
    --funl-form-error-border: var(--funl-danger);
    --funl-form-success-bg: #064e3b;
    --funl-form-success-border: var(--funl-success);
    
    /* ===== UTILITY ALIASES ===== */
    --funl-link: var(--funl-primary);
    --funl-error: var(--funl-danger);
    
    /* ===== RECORD STATUS COLORS ===== */
    --funl-status-pending-bg: #2d1810;
    --funl-status-pending-text: #d97706;
    --funl-status-pending-border: #92400e;
    
    --funl-status-processing-bg: #1e3a8a;
    --funl-status-processing-text: #93c5fd;
    --funl-status-processing-border: #3b82f6;
    
    --funl-status-completed-bg: #064e3b;
    --funl-status-completed-text: #10b981;
    --funl-status-completed-border: #059669;
    
    --funl-status-failed-bg: #7f1d1d;
    --funl-status-failed-text: #f87171;
    --funl-status-failed-border: #dc2626;
    
    /* Ready uses same as completed */
    --funl-status-ready-bg: var(--funl-status-completed-bg);
    --funl-status-ready-text: #ffffff;
    --funl-status-ready-border: var(--funl-status-completed-border);
    
    --funl-status-incomplete-bg: var(--funl-bg-subtle);
    --funl-status-incomplete-text: #9ca3af;
    --funl-status-incomplete-border: #4b5563;
    
    /* Connection Status */
    --funl-status-connected-bg: #064e3b;
    --funl-status-connected-border: #059669;
    --funl-status-not-connected-bg: #7f1d1d;
    --funl-status-not-connected-border: #dc2626;
    
    /* ===== MESSAGE STATUS COLORS ===== */
    --funl-status-success-bg: #064e3b;
    --funl-status-success-text: #6ee7b7;
    --funl-status-warning-bg: #451a03;
    --funl-status-warning-text: #fbbf24;
    --funl-status-error-bg: #7f1d1d;
    --funl-status-error-text: #fca5a5;
    --funl-status-info-bg: #1e3a8a;
    --funl-status-info-text: #93c5fd;
    
    /* ===== STEP INDICATOR COLORS ===== */
    --funl-step-current: var(--funl-primary);
    --funl-step-completed: var(--funl-success);
    --funl-step-incomplete: var(--funl-danger);
    --funl-step-incomplete-text: var(--funl-text-white);
    --funl-step-pending: #404040;
    --funl-step-pending-text: #b3b3b3;
    --funl-step-locked: #666;
    --funl-step-indicator-pending: #404040;
    --funl-step-indicator-pending-text: var(--funl-text-muted);
    
    /* ===== COMPONENT COLORS ===== */
    --funl-connection-bg: var(--funl-bg-subtle);
    --funl-connection-border: var(--funl-bg-muted);
    --funl-theme-toggle-border: var(--funl-border-focus);
    --funl-setup-card-bg: var(--funl-bg-surface);
    --funl-card-border: var(--funl-border);
    --funl-card-meta-label: var(--funl-text-muted);
    --funl-card-meta-value: var(--funl-text-primary);
    
    /* Indicator Colors */
    --funl-indicator-warning: #fbbf24;
    --funl-indicator-error: #f87171;
    
    /* ===== AI CHAT COMPONENT ===== */
    --funl-ai-bubble-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    --funl-ai-bubble-assistant-bg: var(--funl-bg-body);
    --funl-ai-bubble-assistant-border: var(--funl-ai-bubble-assistant-bg);
    --funl-ai-code-bg: rgba(255, 255, 255, 0.1);
    --funl-ai-code-user-bg: rgba(255, 255, 255, 0.15);
    --funl-ai-pre-bg: rgba(0, 0, 0, 0.25);
    --funl-ai-pre-user-bg: rgba(0, 0, 0, 0.2);
    --funl-ai-blockquote-border: rgba(255, 255, 255, 0.25);
    --funl-ai-blockquote-user-border: rgba(255, 255, 255, 0.35);
    --funl-ai-hr-color: rgba(255, 255, 255, 0.15);
    --funl-ai-hr-user-color: rgba(255, 255, 255, 0.25);
    --funl-ai-field-list-bg: rgba(255, 255, 255, 0.05);
    --funl-ai-field-list-border: rgba(255, 255, 255, 0.08);
    --funl-ai-tooltip-bg: rgba(15, 23, 42, 0.95);
    --funl-ai-color-token-bg: rgba(255, 255, 255, 0.06);
    --funl-ai-color-swatch-border: rgba(255, 255, 255, 0.2);
    --funl-ai-typing-dot-color: var(--funl-primary-light, #4da3d9);
    --funl-ai-header-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    
    /* ===== PROGRESS BAR ===== */
    --funl-progress-bg: #404040;
    --funl-progress-fill: linear-gradient(90deg, var(--funl-primary), var(--funl-primary-hover));
    --funl-progress-fill-gradient: linear-gradient(90deg, #0073aa, #005a87);
    --funl-progress-fill-shadow: 0 1px 2px rgba(0, 115, 170, 0.5);
    --funl-progress-bg-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
    
    /* ===== CREATE NEW CARD ===== */
    --funl-create-new-bg: linear-gradient(135deg, #2d2d2d, #404040);
    --funl-create-new-border: var(--funl-border-focus);
    --funl-create-new-hover-bg: linear-gradient(135deg, #1a2332, #2d3748);
    --funl-create-new-hover-border: var(--funl-primary);
    
    /* ===== SHADOWS ===== */
    --funl-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --funl-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --funl-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);
    --funl-shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.4);
    
    /* ===== BUTTON GRADIENTS ===== */
    --funl-btn-primary: linear-gradient(135deg, var(--funl-primary), var(--funl-primary-hover));
    --funl-btn-primary-hover: linear-gradient(135deg, var(--funl-primary-hover), var(--funl-primary-dark));
    --funl-btn-success: linear-gradient(135deg, var(--funl-success), var(--funl-success-hover));
    --funl-btn-success-hover: linear-gradient(135deg, var(--funl-success-hover), var(--funl-success-dark));
    --funl-btn-gray: linear-gradient(135deg, var(--funl-gray), var(--funl-gray-hover));
    --funl-btn-gray-hover: linear-gradient(135deg, var(--funl-gray-hover), var(--funl-gray-dark));
    --funl-btn-neutral: linear-gradient(135deg, #2d2d2d, #404040);
    --funl-btn-neutral-hover: linear-gradient(135deg, #404040, #555);
    --funl-btn-submit: linear-gradient(135deg, #5a6fd8 0%, #6941a0 100%);
    --funl-btn-submit-hover: linear-gradient(135deg, #4f63d2 0%, #5d3a94 100%);
    
    /* ===== DARK MODE ICONS (white variants) ===== */
    --funl-icon-submit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 19l9 2-9-18-9 18 9-2zm0 0v-8'/%3E%3C/svg%3E");
    --funl-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
    --funl-icon-edit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z'/%3E%3C/svg%3E");
    --funl-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
    --funl-icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 19l-7-7m0 0l7-7m-7 7h18'/%3E%3C/svg%3E");
    --funl-icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14 5l7 7m0 0l-7 7m7-7H3'/%3E%3C/svg%3E");
    --funl-icon-document: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'/%3E%3C/svg%3E");
    --funl-icon-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E");
    --funl-icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18L18 6M6 6l12 12'/%3E%3C/svg%3E");
    
    /* Icon color variants for specific contexts */
    --funl-icon-edit-gray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23b3b3b3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z'/%3E%3C/svg%3E");
    --funl-icon-search-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
    --funl-icon-x-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ef4444'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18L18 6M6 6l12 12'/%3E%3C/svg%3E");
    --funl-icon-x-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18L18 6M6 6l12 12'/%3E%3C/svg%3E");
    --funl-icon-submit-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 19l9 2-9-18-9 18 9-2zm0 0v-8'/%3E%3C/svg%3E");
    --funl-icon-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
    --funl-icon-arrow-left-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 19l-7-7m0 0l7-7m-7 7h18'/%3E%3C/svg%3E");
    --funl-icon-arrow-right-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14 5l7 7m0 0l-7 7m7-7H3'/%3E%3C/svg%3E");
    --funl-icon-settings-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 15a3 3 0 100-6 3 3 0 000 6z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z'/%3E%3C/svg%3E");
    
    /* Review page icons */
    --funl-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23fbbf24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.99-.833-2.732 0l-6.928 12c-.77.833.192 2.5 1.732 2.5z'/%3E%3C/svg%3E");
    --funl-icon-warning-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f87171'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.99-.833-2.732 0l-6.928 12c-.77.833.192 2.5 1.732 2.5z'/%3E%3C/svg%3E");
}

/* ===================================
 * PAGE LAYOUT & APP STRUCTURE
 * =================================== */

/* App-like layout with fixed header and footer */
body.funl-app-layout {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100vh;
    color: var(--funl-text-primary);
}

body.funl-app-layout a {
    text-decoration: none;
}

/* ===================================
 * SIDEBAR NAVIGATION
 * =================================== */

.funl-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    background: var(--funl-bg-body);
    border-right: 1px solid var(--funl-border);
    box-shadow: var(--funl-shadow);
    display: flex;
    flex-direction: column;
    z-index: 1100;
    transition: transform 0.3s ease, width 0.3s ease;
}

/* Sidebar Header */
.funl-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.25rem;
    border-bottom: 1px solid var(--funl-border);
}

.funl-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    overflow: hidden;
}

.funl-logo-icon {
    flex-shrink: 0;
    color: var(--funl-primary);
}

.funl-logo-text {
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--funl-text-heading);
    white-space: nowrap;
    transition: opacity 0.3s ease;
}

.funl-sidebar-toggle {
    background: transparent;
    border: none;
    color: var(--funl-text-muted);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--funl-radius-sm);
    transition: all 0.2s ease;
}

.funl-sidebar-toggle:hover {
    background: var(--funl-bg-hover);
    color: var(--funl-text-heading);
}

/* Sidebar User Info */
.funl-sidebar-user {
    padding: 1.5rem 1.25rem;
    border-bottom: 1px solid var(--funl-border);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.funl-sidebar-user .funl-user-avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    transition: all 0.3s ease;
}

.funl-sidebar-user .funl-avatar-img {
    border-radius: 50%;
    border: 2px solid var(--funl-border);
    width: 48px;
    height: 48px;
    transition: all 0.3s ease;
}

.funl-sidebar-user .funl-user-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.funl-sidebar-user .funl-user-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--funl-text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.funl-sidebar-user .funl-user-email {
    font-size: 0.813rem;
    color: var(--funl-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sidebar Navigation */
.funl-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 0.75rem;
    display: flex;
    flex-direction: column;
}

.funl-nav-item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    margin-bottom: 0.5rem;
    color: var(--funl-text-primary);
    text-decoration: none;
    border-radius: var(--funl-radius-md);
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 0.95rem;
    border: none;
    background: transparent;
    width: 100%;
    cursor: pointer;
    text-align: left;
}

.funl-nav-item:hover {
    background: var(--funl-bg-hover);
}

.funl-nav-item.active {
    background: var(--funl-primary);
    color: var(--funl-text-white);
}

.funl-nav-item.active .funl-nav-icon {
    color: var(--funl-text-white);
}

.funl-nav-icon {
    flex-shrink: 0;
    color: var(--funl-text-muted);
    transition: color 0.2s ease;
    width: 20px;
    height: 20px;
}

.funl-nav-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Logout Button (outside nav, at bottom of sidebar) */
.funl-sidebar-logout {
    padding: 1rem 0.75rem;
    border-top: 1px solid var(--funl-border);
}

.funl-nav-item.funl-nav-logout {
    margin-bottom: 0;
}

.funl-nav-item.funl-nav-logout:hover {
    background: var(--funl-danger);
    color: var(--funl-text-white);
}

.funl-nav-item.funl-nav-logout:hover .funl-nav-icon {
    color: var(--funl-text-white);
}

/* Collapsed Sidebar State (Desktop) */
@media screen and (min-width: 769px) {
    body.funl-sidebar-collapsed .funl-sidebar {
        width: 80px;
    }

    body.funl-sidebar-collapsed .funl-logo-text,
    body.funl-sidebar-collapsed .funl-user-details,
    body.funl-sidebar-collapsed .funl-nav-text,
    body.funl-sidebar-collapsed .funl-sidebar-header .funl-logo {
        display: none;
        opacity: 0;
        width: 0;
        overflow: hidden;
    }

    body.funl-sidebar-collapsed .funl-sidebar-header {
        justify-content: center;
    }

    body.funl-sidebar-collapsed .funl-sidebar-user {
        justify-content: center;
        padding: 1rem 0.5rem;
    }

    body.funl-sidebar-collapsed .funl-user-avatar {
        width: 32px;
        height: 32px;
    }

    body.funl-sidebar-collapsed .funl-user-avatar .funl-avatar-img {
        width: 32px;
        height: 32px;
    }

    body.funl-sidebar-collapsed .funl-nav-item {
        justify-content: center;
        padding: 0.875rem 0.5rem;
        gap: 0;
    }

    body.funl-sidebar-collapsed .funl-sidebar-logout {
        padding: 1rem 0.5rem;
    }
}

/* Mobile Header */
.funl-mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--funl-bg-surface);
    border-bottom: 1px solid var(--funl-border);
    box-shadow: var(--funl-shadow);
    z-index: 1050;
    align-items: center;
    padding: 0 1rem;
    gap: 1rem;
}

body.funl-app-layout.admin-bar .funl-mobile-header {
    top: 46px;
}

/* Admin bar adjustment for logged-out users with mobile header */
body.funl-no-sidebar.admin-bar .funl-mobile-header {
    top: 46px;
}

body.funl-no-sidebar.admin-bar .funl-page-wrapper {
    top: 106px; /* 60px mobile header + 46px admin bar */
}

.funl-mobile-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--funl-text-primary);
    margin: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Header Theme Toggle (for logged-out users) */
.funl-header-theme-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    border-radius: var(--funl-radius-sm);
    color: var(--funl-text-muted);
    transition: all 0.2s ease;
}

.funl-header-theme-toggle:hover {
    background: var(--funl-bg-hover);
    color: var(--funl-text-heading);
}

.funl-header-theme-toggle svg {
    width: 24px;
    height: 24px;
}

/* Hamburger Menu */
.funl-hamburger {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 1101;
    position: relative;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    min-height: 40px;
    border-radius: var(--funl-radius-sm);
    transition: background 0.2s ease;
}

.funl-hamburger:hover {
    background: var(--funl-bg-hover);
}

.funl-hamburger:active {
    background: var(--funl-bg-active);
}

.funl-hamburger span {
    width: 24px;
    height: 3px;
    background: var(--funl-text-primary);
    border-radius: 2px;
    transition: all 0.3s ease;
    display: block;
}

.funl-hamburger:hover span {
    background: var(--funl-primary);
}

/* Sidebar Overlay (Mobile) */
.funl-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1090;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.funl-sidebar-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Page Wrapper Adjustments for Sidebar */
.funl-page-wrapper {
    position: fixed;
    top: 0;
    left: 280px;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    background: var(--funl-bg-body);
    transition: left 0.3s ease;
}

/* Full width when sidebar is not present (logged out users) */
body.funl-no-sidebar .funl-page-wrapper {
    left: 0;
}

/* Show mobile header for logged-out users on all screen sizes */
body.funl-no-sidebar .funl-mobile-header {
    display: flex;
}

/* Add top spacing for page wrapper when mobile header is visible for logged-out users */
body.funl-no-sidebar .funl-page-wrapper {
    top: 60px;
}

/* Hide page header for logged-out users since they see mobile header */
body.funl-no-sidebar .funl-page-header {
    display: none;
}

body.funl-sidebar-collapsed .funl-page-wrapper {
    left: 80px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .funl-mobile-header {
        display: flex;
        height: 60px;
        padding: 0 1rem;
        align-items: center;
    }
    
    #funl-mobile-header-progress {
        padding: 0.75rem 1rem;
        background: var(--funl-bg-surface);
        border-bottom: 1px solid var(--funl-border);
    }
    
    #funl-mobile-header-progress:empty {
        display: none;
        padding: 0;
    }
    
    #funl-mobile-header-progress .funl-step-progress {
        margin: 0;
    }
    
    .funl-sidebar {
        transform: translateX(-100%);
        z-index: 1100;
    }
    
    .funl-sidebar.funl-sidebar-open {
        transform: translateX(0);
    }
    
    .funl-sidebar-overlay {
        display: block;
    }
    
    .funl-sidebar-toggle {
        display: none;
    }
    
    .funl-page-wrapper {
        left: 0;
        top: 60px;
    }
    
    body.funl-sidebar-collapsed .funl-page-wrapper {
        left: 0;
    }
    
    /* Hide the main page header on mobile since we have mobile header */
    .funl-page-header {
        display: none;
    }
    
    /* Hide step titles on mobile but keep steps visible */
    .funl-step .step-title {
        display: none;
    }
}

/* Admin Bar Adjustments */
body.funl-app-layout.admin-bar .funl-sidebar {
    top: 32px;
}

body.funl-app-layout.admin-bar .funl-page-wrapper {
    padding-top: 32px;
}

.funl-page-header {
    background: var(--funl-bg-body);
    box-shadow: var(--funl-shadow);
    padding: 1rem 2rem;
    border-bottom: 1px solid var(--funl-border);
    z-index: 1000;
}

.funl-header-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}

.funl-page-header h1 {
    color: var(--funl-text-primary);
    font-size: 1.5rem;
    margin: 0;
    font-weight: 600;
}

#funl-header-progress {
    margin-top: 0;
}

.funl-page-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
    background: var(--funl-bg-body);
}

.funl-page-content .funl-review-page > * {
    width: 650px;
    max-width: calc(100% - 1rem);
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

/* Fixed footer for app layout */
.funl-app-footer {
    background: var(--funl-bg-surface);
    box-shadow: 0 -2px 8px var(--funl-shadow);
    border-top: 1px solid var(--funl-border);
    z-index: 1000;
}

/* ===================================
 * ICONS SYSTEM
 * =================================== */
.funl-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
    margin-right: 0.25em;
    flex-shrink: 0;
}

.funl-icon svg {
    width: 100%;
    height: 100%;
    fill: inherit;
}

/* SVG Icon Color Inheritance */
/* Ensure all SVG icons inherit the text color from their parent element */
button svg,
a svg,
.funl-card-btn svg,
.funl-step-navigation svg,
.button svg,
.btn svg {
    color: inherit;
}

/* Icon elements in buttons should match text color */
button .funl-icon,
a .funl-icon,
.funl-card-btn .funl-icon,
.funl-step-navigation .funl-icon,
.button .funl-icon,
.btn .funl-icon {
    color: inherit;
}

/* Pseudo-element icons should inherit parent color */
button::before,
button::after,
.funl-card-btn::before,
.funl-card-btn::after,
.funl-page-wrapper .button::before,
.funl-page-wrapper .button::after {
    color: inherit;
}

/* Base styling for all icon pseudo-elements */
.funl-icon-submit::before,
.funl-create-new-icon,
.funl-icon-settings::before,
.funl-icon-sparkles::before,
.funl-icon-check::before,
.funl-icon-x::before,
.funl-icon-document::before,
.funl-icon-send::before,
.funl-icon-edit::before,
.funl-icon-search::before,
.funl-icon-arrow-left::before,
.funl-icon-arrow-right::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.25em;
    vertical-align: -0.125em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

/* Icon definitions */
.funl-icon-submit::before {
    background-image: var(--funl-icon-submit);
}
.funl-create-new-icon {
    background-image: var(--funl-icon-plus);
}


/* Icon color inheritance solution using CSS custom properties */
.funl-icon-check::before {
    background-image: var(--funl-icon-check);
}

.funl-icon-edit::before {
    background-image: var(--funl-icon-edit-white);
}

.funl-icon-search::before {
    background-image: var(--funl-icon-search-white);
}

.funl-icon-arrow-left::before {
    background-image: var(--funl-icon-arrow-left);
}

.funl-icon-arrow-right::before {
    background-image: var(--funl-icon-arrow-right);
}

/* Missing icon definitions */
.funl-icon-document::before {
    background-image: var(--funl-icon-document);
}

.funl-icon-send::before {
    background-image: var(--funl-icon-send);
}

.funl-icon-x::before {
    background-image: var(--funl-icon-x);
}

.funl-icon-settings::before {
    background-image: var(--funl-icon-settings);
}

.funl-icon-sparkles::before {
    background-image: var(--funl-icon-sparkles);
}

/* Additional icon definitions for review page */
.funl-icon-warning::before {
    background-image: var(--funl-icon-warning);
}

/* Status indicator styling */
.funl-missing-indicator {
    color: var(--funl-indicator-warning);
    font-size: 1.1em;
    margin-left: 0.5rem;
}

.funl-error-indicator {
    color: var(--funl-indicator-error);
    font-size: 1.1em;
    margin-left: 0.5rem;
}

.funl-missing-indicator .funl-icon-warning::before {
    background-image: var(--funl-icon-warning);
}

.funl-error-indicator .funl-icon-x::before {
    background-image: var(--funl-icon-x-red);
}

/* Color variants for buttons and different contexts */
/* White icons for dark buttons */
.funl-card-btn.review .funl-icon-check::before,
.funl-card-btn.process .funl-icon-check::before,
.funl-page-wrapper .button .funl-icon-check::before,
.funl-page-wrapper .button .funl-icon-arrow-left::before,
.funl-page-wrapper .button .funl-icon-arrow-right::before,
.funl-page-wrapper .button .funl-icon-submit::before,
.funl-page-wrapper .button .funl-icon-settings::before,
.funl-finish-btn .funl-icon-submit::before,
.funl-page-wrapper .funl-finish-btn::after,
.funl-completion-status .funl-icon-check::before {
    --funl-icon-check: var(--funl-icon-check-white);
    --funl-icon-arrow-left: var(--funl-icon-arrow-left-white);
    --funl-icon-arrow-right: var(--funl-icon-arrow-right-white);
    --funl-icon-submit: var(--funl-icon-submit-white);
    --funl-icon-settings: var(--funl-icon-settings-white);
}

/* Red icons for delete buttons */
.funl-card-btn.delete .funl-icon-x::before {
    --funl-icon-x: var(--funl-icon-x-red);
}

/* White icons on delete button hover */
.funl-card-btn.delete:hover .funl-icon-x::before {
    --funl-icon-x: var(--funl-icon-x-white);
}

/* ===================================
 * NAVIGATION & HEADER ELEMENTS
 * =================================== */
.funl-home-link {
    color: var(--funl-text-primary);
    text-decoration: none;
    padding: 0.5rem;
    border-radius: var(--funl-radius);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--funl-bg-subtle);
    border: 1px solid var(--funl-border);
}

.funl-home-link:hover {
    background: var(--funl-bg-subtle);
    color: var(--funl-primary);
    text-decoration: none;
}

.funl-theme-toggle {
    background: none;
    border: 1px solid var(--funl-theme-toggle-border);
    color: var(--funl-text-primary);
    padding: 0.5rem;
    border-radius: var(--funl-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
}

.funl-theme-toggle:hover {
    background: var(--funl-bg-subtle);
    border-color: var(--funl-primary);
    color: var(--funl-primary);
}

.funl-theme-toggle .funl-sun-icon,
.funl-theme-toggle .funl-moon-icon {
    transition: opacity 0.3s ease;
}

/* Dark mode specific icon toggle styles */
body.funl-dark-mode .funl-theme-toggle .funl-sun-icon {
    display: none;
}

body.funl-dark-mode .funl-theme-toggle .funl-moon-icon {
    display: block !important;
}

body:not(.funl-dark-mode) .funl-theme-toggle .funl-moon-icon {
    display: none;
}

body:not(.funl-dark-mode) .funl-theme-toggle .funl-sun-icon {
    display: block;
}

/* Utility class for hiding elements */
.hidden {
    display: none !important;
}

/* ===================================
 * STEP PROGRESS SYSTEM
 * =================================== */

/* Step progress indicator - compact for header */
.funl-step-progress {
    margin: 1rem 0 0 0;
    background: none;
    border: none;
}

.funl-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    align-items: flex-start;
    background: none;
    border: none;
}

.funl-step {
    flex: 1;
    text-align: center;
    padding: 0.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.funl-step .step-number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin: 0 auto 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.75rem;
    transition: all 0.3s ease;
    border: none;
}

.funl-step .step-title {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    background: none;
    border: none;
}

/* Step states */
.funl-step-current .step-number {
    background: var(--funl-step-current);
    color: var(--funl-text-white);
}

.funl-step-completed .step-number {
    background: var(--funl-step-completed);
    color: var(--funl-text-white);
}

.funl-step-pending .step-number {
    background: var(--funl-step-pending);
    color: var(--funl-step-pending-text);
}

.funl-step-incomplete .step-number {
    background: var(--funl-step-incomplete);
    color: var(--funl-step-incomplete-text);
}

.funl-progress-bar {
    background: var(--funl-progress-bg);
    height: 12px;
    border-radius: var(--funl-radius);
    margin-top: 0.5rem;
    overflow: hidden;
    position: relative;
    box-shadow: var(--funl-progress-bg-shadow);
}

.funl-progress-fill {
    background: var(--funl-progress-fill-gradient);
    height: 100%;
    border-radius: var(--funl-radius);
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    box-shadow: var(--funl-progress-fill-shadow);
}

/* Progress bar shine effect */
.funl-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
    border-radius: 6px 6px 0 0;
}

/* Locked step styles */
.funl-step.funl-step-locked {
    opacity: 0.6;
    cursor: not-allowed;
}

.funl-step.funl-step-locked .step-number {
    background: var(--funl-step-locked);
    color: var(--funl-text-white);
}

.funl-step-panel-locked input,
.funl-step-panel-locked textarea,
.funl-step-panel-locked select,
.funl-step-panel-locked button {
    pointer-events: none;
    cursor: not-allowed;
}

.funl-lock-icon {
    font-size: 3rem;
    color: var(--funl-step-locked);
    margin-bottom: 1rem;
}

.funl-lock-icon .dashicons {
    width: 3rem;
    height: 3rem;
    font-size: 3rem;
}

.funl-step-locked h3 {
    color: var(--funl-text-muted);
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

.funl-step-locked p {
    color: var(--funl-text-light);
    margin: 0;
    font-size: 0.95rem;
}

/* ===================================
 * STEP SLIDER & NAVIGATION SYSTEM
 * =================================== */

/* Step slider styles - optimized for app layout */
.funl-form-container {
    max-width: 100%;
    margin: 0;
    overflow: hidden;
}

.funl-steps-slider {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.funl-steps-wrapper {
    display: flex;
    width: 100%;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: transform;
    align-items: flex-start;
}

.funl-step-panel {
    flex: 0 0 100%;
    padding: 2rem;
    box-sizing: border-box;
}

.funl-step-panel.funl-panel-hidden {
    visibility: hidden;
    height: 0;
}

.funl-step-panel.funl-panel-active {
    visibility: visible;
}

.funl-step-panel.funl-panel-sliding {
    visibility: visible;
}

.funl-step-content {
    max-width: 600px;
    margin: 0 auto;
    padding-bottom: 0;
}

.funl-step-description {
    text-align: center;
}

/* Step navigation styling - Fixed at bottom */
.funl-step-navigation {
    display: flex;
    align-items: center;
    padding: 1rem;
    margin: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.funl-nav-left {
    flex: 0 0 auto;
}

.funl-nav-spacer {
    flex: 1;
}

.funl-nav-right {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.funl-page-wrapper .button {
    transition: all 0.3s ease;
    min-width: 120px;
    border: none;
    border-radius: var(--funl-radius-lg);
    font-weight: 600;
    font-size: 15px;
    padding: 14px 24px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: var(--funl-shadow);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.025em;
}

.funl-page-wrapper .button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.funl-page-wrapper .button:hover::before {
    left: 100%;
}

.funl-page-wrapper .button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.funl-page-wrapper .button:disabled::before {
    display: none;
}

/* Previous button - darker style with white text */
.funl-step-navigation .funl-prev-btn {
    background: var(--funl-btn-gray);
    color: var(--funl-text-white);
    border: 2px solid var(--funl-gray);
    padding: 10px 18px;
}

.funl-step-navigation .funl-prev-btn:hover:not(:disabled) {
    background: var(--funl-btn-gray-hover);
    color: var(--funl-text-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(108, 117, 125, 0.4);
    border-color: var(--funl-gray-hover);
}

.funl-step-navigation .funl-prev-btn:active {
    transform: translateY(0);
    box-shadow: var(--funl-shadow);
}

/* Next button - primary style */
.funl-step-navigation .funl-next-btn {
    background: var(--funl-btn-primary);
    color: var(--funl-text-white);
    box-shadow: 0 2px 8px rgba(0, 115, 170, 0.3);
}

.funl-step-navigation .funl-next-btn:hover:not(:disabled) {
    background: var(--funl-btn-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 115, 170, 0.4);
}

.funl-step-navigation .funl-next-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 115, 170, 0.3);
}

/* Finish button - success style */
.funl-page-wrapper .funl-finish-btn {
    background: var(--funl-btn-success);
    color: var(--funl-text-white);
    box-shadow: 0 2px 8px rgba(0, 163, 42, 0.3);
}

.funl-page-wrapper .funl-finish-btn:hover:not(:disabled) {
    background: var(--funl-btn-success-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 163, 42, 0.4);
}

.funl-page-wrapper .funl-finish-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 163, 42, 0.3);
}

/* Finish button icon on the right side */
.funl-page-wrapper .funl-finish-btn::after {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.5em;
    vertical-align: -0.125em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    background-image: var(--funl-icon-submit);
    transform: rotate(45deg) translateY(-3px);
}

/* Loading state styling */
.funl-step-navigation .btn-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.funl-step-navigation .spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid var(--funl-text-white);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Focus states for accessibility */
.funl-page-wrapper .button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.25);
}

.funl-step-navigation .funl-prev-btn:focus {
    box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.25);
}

.funl-page-wrapper .funl-finish-btn:focus {
    box-shadow: 0 0 0 3px rgba(0, 163, 42, 0.25);
}

/* Button size variants */
.button-large {
    font-size: 17px !important;
    padding: 16px 32px !important;
}

/* Button text styling */
.funl-step-navigation .btn-text {
    font-weight: 600;
    letter-spacing: 0.025em;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ===================================
 * FORM STYLES
 * =================================== */
.funl-onboard-form {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.funl-onboard-form h2 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: var(--funl-text-primary);
    font-size: 1.8rem;
    font-weight: 600;
}

.funl-form-group {
    margin-bottom: 1.5rem;
}

.funl-form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--funl-text-primary);
    font-size: 0.95rem;
}

.funl-form-input,
.funl-form-textarea,
.funl-form-select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--funl-input-border);
    border-radius: var(--funl-radius-lg);
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: var(--funl-input-bg);
    box-sizing: border-box;
    font-family: inherit;
    color: var(--funl-text-primary);
}

.funl-form-input:focus,
.funl-form-textarea:focus,
.funl-form-select:focus {
    outline: none;
    border-color: var(--funl-input-border-focus);
    box-shadow: 0 0 0 3px var(--funl-input-focus-shadow);
}

.funl-form-input:hover,
.funl-form-textarea:hover,
.funl-form-select:hover {
    border-color: var(--funl-input-border-hover);
}

/* Input type specific styling */
.funl-form-input[type="email"] {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%236b7280" viewBox="0 0 16 16"><path d="M2 2a2 2 0 0 0-2 2v8.01A2 2 0 0 0 2 14h5.5a.5.5 0 0 0 0-1H2a1 1 0 0 1-.966-.741l5.64-3.471L8 9.583l1.326-.795 5.64 3.47A1 1 0 0 1 14 13h-2.5a.5.5 0 0 0 0 1H14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H2Zm3.708 6.208L1 11.105V5.383l4.708 2.825ZM1 4.217V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v.217l-7 4.2-7-4.2Z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

.funl-form-input[type="tel"] {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%236b7280" viewBox="0 0 16 16"><path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122L9.98 10.64a6.32 6.32 0 0 1-1.976-.892 6.32 6.32 0 0 1-.892-1.976l.431-1.804a.678.678 0 0 0-.122-.58L5.627 3.181a.678.678 0 0 0-.973 0z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

.funl-form-input[type="url"] {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%236b7280" viewBox="0 0 16 16"><path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/><path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

/* Color field wrapper styling */
.funl-color-field-wrapper {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    border: 2px solid var(--funl-input-border);
    border-radius: var(--funl-radius-lg);
    background-color: var(--funl-input-bg);
    transition: all 0.3s ease;
    overflow: hidden;
}

.funl-color-field-wrapper:hover {
    border-color: var(--funl-input-border-hover);
}

.funl-color-field-wrapper:focus-within {
    border-color: var(--funl-input-border-focus);
    box-shadow: 0 0 0 3px var(--funl-input-focus-shadow);
}

.funl-color-text-input {
    flex: 1;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0.75rem 1rem;
    font-family: 'JetBrains Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.9rem;
    color: var(--funl-text-primary);
}

.funl-color-text-input:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.funl-color-picker-trigger {
    width: 60px;
    min-width: 60px;
    height: auto;
    cursor: pointer;
    border-left: 1px solid var(--funl-input-border);
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.funl-color-picker-trigger:hover {
    transform: scale(0.95);
    border-left-color: var(--funl-input-border-hover);
}

.funl-color-picker-trigger:active {
    transform: scale(0.9);
}

/* Add a subtle pattern to show transparency */
.funl-color-picker-trigger::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(45deg, #ccc 25%, transparent 25%), 
        linear-gradient(-45deg, #ccc 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #ccc 75%), 
        linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
    opacity: 0.3;
    z-index: 0;
}

.funl-color-picker-trigger::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: inherit;
    z-index: 1;
}

/* ===================================
 * BUTTONS
 * =================================== */
.funl-submit-btn,
.funl-process-button {
    width: 100%;
    padding: 1rem 2rem;
    background: var(--funl-btn-submit);
    color: white;
    border: none;
    border-radius: var(--funl-radius-lg);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.funl-submit-btn:hover,
.funl-process-button:hover {
    background: var(--funl-btn-submit-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.funl-submit-btn:active,
.funl-process-button:active {
    transform: translateY(0);
}

.funl-submit-btn:disabled,
.funl-process-button:disabled {
    background: var(--funl-bg-surface);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.funl-btn-edit,
.funl-btn-main {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--funl-bg-surface);
    border: 2px solid var(--funl-primary);
    color: var(--funl-primary);
    text-decoration: none;
    border-radius: var(--funl-radius);
    font-weight: 500;
    transition: all 0.2s ease;
}

.funl-btn-edit:hover,
.funl-btn-main:hover {
    background: var(--funl-primary);
    color: #fff;
    text-decoration: none;
}

/* ===================================
 * LOADING & ANIMATIONS
 * =================================== */
.funl-loading {
    position: relative;
}

.funl-loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    margin: auto;
    border: 2px solid transparent;
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: funl-spin 1s linear infinite;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes funl-spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes funl-fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* ===================================
 * MESSAGES & NOTIFICATIONS
 * =================================== */
.funl-message,
.funl-result {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    border-left: 4px solid;
    font-size: 0.95rem;
    line-height: 1.5;
}

.funl-result {
    margin-top: 2rem;
    background: var(--funl-bg-subtle);
    border-left-color: var(--funl-success);
}

.funl-message h3,
.funl-message h4,
.funl-result h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.funl-message p,
.funl-result p {
    margin-bottom: 0.5rem;
    color: #374151;
}

.funl-message p:last-child,
.funl-result p:last-child {
    margin-bottom: 0;
}

.funl-success {
    background: var(--funl-status-success-bg);
    border-left: 4px solid var(--funl-success);
    color: var(--funl-status-success-text);
}

.funl-warning {
    background: var(--funl-status-warning-bg);
    border-left: 4px solid var(--funl-warning);
    color: var(--funl-status-warning-text);
}

/* Error message in page content */
.funl-page-content > .funl-error {
    background: var(--funl-danger);
    color: var(--funl-text-white);
    padding: 2rem 1.5rem;
    margin: 2rem auto;
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
    max-width: 600px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.funl-page-content > .funl-error p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--funl-text-white);
}

.funl-page-content > .funl-error::before {
    content: '⚠';
    display: block;
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.9;
}

/* Legacy error styles for other contexts */
.funl-error {
    background: var(--funl-status-error-bg);
    border-left: 4px solid var(--funl-danger);
    color: var(--funl-status-error-text);
}

.funl-result.error {
    background: var(--funl-status-error-bg) !important;
    border-left: 4px solid var(--funl-danger) !important;
}

.funl-result.error h3,
.funl-result.error p {
    color: var(--funl-status-error-text) !important;
}

/* ===================================
 * CHECKBOX AND RADIO GROUP STYLES
 * =================================== */
.funl-checkbox-group,
.funl-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.funl-checkbox-item,
.funl-radio-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 2px solid var(--funl-input-border);
    border-radius: var(--funl-radius-md);
    background-color: var(--funl-input-bg);
    transition: all 0.2s ease;
    cursor: pointer;
}

.funl-checkbox-item:hover,
.funl-radio-item:hover {
    border-color: var(--funl-input-border-hover);
    background-color: var(--funl-bg-hover);
}

.funl-checkbox-input,
.funl-radio-input {
    width: 20px;
    height: 20px;
    min-width: 20px;
    cursor: pointer;
    margin: 0;
    accent-color: var(--funl-primary);
}

.funl-checkbox-label,
.funl-radio-label {
    flex: 1;
    cursor: pointer;
    margin: 0;
    padding: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--funl-text-primary);
    user-select: none;
}

.funl-checkbox-input:checked + .funl-checkbox-label,
.funl-radio-input:checked + .funl-radio-label {
    color: var(--funl-primary);
}

.funl-checkbox-item:has(.funl-checkbox-input:checked),
.funl-radio-item:has(.funl-radio-input:checked) {
    border-color: var(--funl-primary);
    background-color: rgba(0, 115, 170, 0.05);
}

.funl-checkbox-item:has(.funl-checkbox-input:focus),
.funl-radio-item:has(.funl-radio-input:focus) {
    outline: 2px solid var(--funl-primary);
    outline-offset: 2px;
}

/* Dark mode support */
.funl-dark-mode .funl-checkbox-item,
.funl-dark-mode .funl-radio-item {
    background-color: var(--funl-input-bg);
    border-color: var(--funl-input-border);
}

.funl-dark-mode .funl-checkbox-item:hover,
.funl-dark-mode .funl-radio-item:hover {
    background-color: var(--funl-bg-hover);
    border-color: var(--funl-input-border-hover);
}

.funl-dark-mode .funl-checkbox-item:has(.funl-checkbox-input:checked),
.funl-dark-mode .funl-radio-item:has(.funl-radio-input:checked) {
    border-color: var(--funl-primary);
    background-color: rgba(0, 115, 170, 0.1);
}

/* ===================================
 * FIELD VALIDATION STYLES
 * =================================== */
.funl-field-error .funl-form-input,
.funl-field-error .funl-form-textarea,
.funl-field-error .funl-form-select,
.funl-input-error {
    border-color: var(--funl-form-error-border) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
    background-color: var(--funl-form-error-bg);
}

.funl-field-error .funl-form-label {
    color: var(--funl-danger);
}

.funl-field-error-message {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--funl-status-error-text);
    font-weight: 500;
    animation: funl-fadeIn 0.3s ease-in-out;
}

.funl-field-success .funl-form-input,
.funl-field-success .funl-form-textarea,
.funl-field-success .funl-form-select,
.funl-input-success {
    border-color: var(--funl-form-success-border) !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
    background-color: var(--funl-form-success-bg);
}

.funl-field-success .funl-form-label {
    color: var(--funl-success);
}

@keyframes funl-shake {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 70%, 90% {
        transform: translateX(-4px);
    }
    40%, 60% {
        transform: translateX(4px);
    }
}

.funl-shake {
    animation: funl-shake 0.6s ease-in-out;
}

/* ===================================
 * COLOR PICKER STYLES
 * =================================== */
.funl-color-picker {
    cursor: pointer;
    background-color: var(--funl-bg-subtle);
    border: 1px solid var(--funl-border);
}

.funl-color-picker:focus {
    border-color: var(--funl-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: none;
}

.cp-color-picker {
    z-index: 999999 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
    border: 1px solid var(--funl-border) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    background: var(--funl-bg-surface) !important;
}

.cp-color-picker .cp-xy-slider,
.cp-color-picker .cp-z-slider,
.cp-color-picker .cp-alpha {
    border-radius: 6px !important;
}

.cp-color-picker .cp-xy-cursor,
.cp-color-picker .cp-z-cursor,
.cp-color-picker .cp-alpha-cursor {
    border: 2px solid var(--funl-bg-surface) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* ===================================
 * DROPZONE & IMAGE UPLOAD STYLES
 * =================================== */
.funl-image-field {
    margin-bottom: 1.5rem;
}

.funl-dropzone {
    border: 2px dashed var(--funl-border-focus);
    border-radius: var(--funl-radius-lg);
    padding: 2rem;
    text-align: center;
    background-color: var(--funl-bg-surface);
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
}

.funl-dropzone:hover,
.funl-dropzone.dz-clickable:hover {
    border-color: var(--funl-primary);
    background-color: var(--funl-bg-subtle);
}

.funl-dropzone.dz-drag-hover {
    border-color: var(--funl-primary);
    background-color: var(--funl-bg-hover);
}

.funl-dropzone.dz-started {
    border: none;
    background: transparent;
    padding: 0;
    min-height: auto;
    cursor: default;
    justify-content: flex-start;
    text-align: left;
}

.funl-dropzone.dz-started:hover {
    border: none;
    background: transparent;
}

.funl-dropzone.dz-started .dz-message {
    display: none;
}

.funl-dropzone .dz-message {
    color: var(--funl-text-muted);
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0;
    pointer-events: none;
}

.funl-dropzone .dz-preview {
    margin: 0;
    min-height: auto;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    position: relative;
    overflow: visible;
    width: 100%;
}

.funl-dropzone .dz-preview .dz-image {
    border-radius: var(--funl-radius-lg);
    overflow: hidden;
    flex: 0 0 auto;
    position: relative;
    max-width: 300px;
    box-shadow: var(--funl-shadow);
}

.funl-dropzone .dz-preview .dz-image img {
    width: auto;
    height: auto;
    max-width: 120px;
    object-fit: contain;
    display: block;
}

.funl-dropzone .dz-preview .dz-remove {
    background: var(--funl-danger);
    color: white;
    border: none;
    border-radius: var(--funl-radius);
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: inline-block;
    position: relative;
    z-index: 10;
    align-self: flex-start;
    margin-top: 0.5rem;
}

.funl-dropzone .dz-preview .dz-remove:hover {
    background: var(--funl-danger-hover);
}

/* ===================================
 * CONNECTION STATUS STYLES
 * =================================== */
.funl-connection-container {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--funl-connection-bg);
    border: 1px solid var(--funl-border);
    border-radius: var(--funl-radius-lg);
}

.funl-connection-status {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--funl-radius);
    border: 1px solid;
}

.funl-connection-status.connected {
    background: var(--funl-status-connected-bg);
    border-color: var(--funl-status-connected-border);
}

.funl-connection-status.not-connected {
    background: var(--funl-status-not-connected-bg);
    border-color: var(--funl-status-not-connected-border);
}

.funl-status-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.funl-connection-status.connected .funl-status-icon {
    background: var(--funl-success);
    color: white;
}

.funl-connection-status.not-connected .funl-status-icon {
    background: var(--funl-error);
    color: white;
}

.funl-status-content {
    flex: 1;
}

.funl-status-content p {
    margin: 0 0 0.5rem 0;
}

.funl-status-content p:last-child {
    margin-bottom: 0;
}

.funl-connected-time {
    font-size: 0.85rem;
    color: var(--funl-text-muted);
}

.funl-connect-btn,
.funl-reconnect-btn {
    width: 100%;
    box-sizing: border-box;
    background: var(--funl-btn-submit);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--funl-radius);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 0.5rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

.funl-connect-btn:after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: var(--funl-icon-connect-white);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.funl-reconnect-btn:after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: var(--funl-icon-refresh-white);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.funl-connect-btn:hover,
.funl-reconnect-btn:hover {
    background: var(--funl-btn-submit-hover);
    color: white;
    text-decoration: none;
}

.funl-reconnect-btn {
    background: var(--funl-text-muted);
}

.funl-reconnect-btn:hover {
    background: var(--funl-text-primary);
    color: white;
}

/* ===================================
 * REVIEW PAGE STYLES
 * =================================== */
.funl-review-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.funl-review-page h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--funl-text-heading);
    font-size: 2rem;
    font-weight: 600;
}

.funl-review-notice {
    background: var(--funl-bg-subtle);
    padding: 1rem 1.5rem;
    border-radius: var(--funl-radius);
    margin-bottom: 2rem;
    border-left: 4px solid var(--funl-primary);
}

.funl-completion-status {
    margin-bottom: 2rem;
    padding: 1.5rem;
    border-radius: var(--funl-radius-lg);
    border: 2px solid;
}

.funl-completion-status.ready {
    background: var(--funl-success-dark);
    border-color: var(--funl-success-dark);
    color: var(--funl-text-white);
}

.funl-completion-status.missing {
    background: var(--funl-status-error-bg);
    border-color: var(--funl-danger);
}

.funl-completion-status h3 {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.funl-review-section {
    margin-bottom: 2rem;
    border: 1px solid var(--funl-border);
    border-radius: var(--funl-radius);
    overflow: hidden;
    background: var(--funl-bg-surface)
}

.funl-section-header {
    background: var(--funl-bg-subtle);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--funl-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.funl-section-header h3 {
    margin: 0;
    color: var(--funl-text-heading);
    font-size: 1.1rem;
    font-weight: 600;
}

.funl-section-fields {
    padding: 1.5rem;
}

.funl-review-field {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    border-radius: var(--funl-radius-sm);
    transition: all 0.2s ease;
}

.funl-review-field:last-child {
    margin-bottom: 0;
}

.funl-review-field.missing-field {
    background: var(--funl-status-error-bg);
    border: 1px solid var(--funl-danger);
    border-left: 4px solid var(--funl-danger);
    color: var(--funl-status-error-text);
}

.funl-review-field.validation-error {
    background: var(--funl-status-warning-bg);
    border: 1px solid var(--funl-warning);
    border-left: 4px solid var(--funl-warning);
    color: var(--funl-status-warning-text);
}

.funl-field-label {
    font-weight: 600;
    color: var(--funl-text-heading);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.funl-field-value {
    color: var(--funl-text-heading);
    word-break: break-word;
}

.funl-field-value.empty {
    color: var(--funl-text-muted);
    font-style: italic;
}

.funl-field-value a {
    color: var(--funl-primary);
    text-decoration: none;
}

.funl-field-value a:hover {
    text-decoration: underline;
}

.funl-review-section .funl-connection-status {
    margin: 0;
}

.funl-review-section .funl-connection-status .funl-status-content p {
    margin: 0.25rem 0;
}

.funl-review-section .funl-connection-status .funl-connected-time {
    font-size: 0.9rem;
    color: var(--funl-text-muted);
    margin-top: 0.5rem;
}

.funl-color-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.funl-color-swatch {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: var(--funl-radius-sm);
    border: 1px solid var(--funl-border);
}

/* ========================================
 * CARD LAYOUT FOR APPLICATION REQUESTS
 * ======================================== */

/* User requests container */
.funl-user-requests {
    padding: 2.5rem 2rem;
}

/* Hide the old table layout */
.funl-table-wrapper,
.funl-data-table {
    display: none;
}

/* Account Search and Sort Controls */
.funl-accounts-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 0;
}

.funl-accounts-search {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 400px;
}

.funl-accounts-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    border: 1px solid var(--funl-border);
    border-radius: var(--funl-radius);
    font-size: 0.9rem;
    background: var(--funl-bg-surface);
    color: var(--funl-text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.funl-accounts-search-input:focus {
    outline: none;
    border-color: var(--funl-primary);
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
}

.funl-accounts-search-input::placeholder {
    color: var(--funl-text-muted);
}

.funl-accounts-search-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--funl-text-muted);
    pointer-events: none;
    display: flex;
    align-items: center;
}

.funl-accounts-sort {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.funl-accounts-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.funl-accounts-sort-label,
.funl-accounts-filter-label {
    font-size: 0.875rem;
    color: var(--funl-text-muted);
    white-space: nowrap;
}

.funl-accounts-sort-select,
.funl-accounts-filter-select {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid var(--funl-border);
    border-radius: var(--funl-radius);
    font-size: 0.875rem;
    background: var(--funl-bg-surface);
    color: var(--funl-text-primary);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem;
}

.funl-accounts-sort-select:focus,
.funl-accounts-filter-select:focus {
    outline: none;
    border-color: var(--funl-primary);
}

.funl-accounts-sort-order {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--funl-border);
    border-radius: var(--funl-radius);
    background: var(--funl-bg-surface);
    color: var(--funl-text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.funl-accounts-sort-order:hover {
    border-color: var(--funl-primary);
    color: var(--funl-primary);
}

.funl-accounts-sort-order[data-order="DESC"] svg {
    transform: scaleY(-1);
}

/* View toggle buttons */
.funl-accounts-view-toggle {
    display: none;
    gap: 0.25rem;
    margin-left: auto;
}

.funl-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--funl-border);
    border-radius: var(--funl-radius-md);
    background: var(--funl-bg-surface);
    color: var(--funl-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.funl-view-btn:hover {
    border-color: var(--funl-primary);
    color: var(--funl-primary);
}

.funl-view-btn.active {
    background: var(--funl-primary);
    border-color: var(--funl-primary);
    color: white;
}

/* Show view toggle on desktop only */
@media (min-width: 1201px) {
    .funl-accounts-view-toggle {
        display: flex;
    }
}

.funl-accounts-count {
    font-size: 0.875rem;
    color: var(--funl-text-muted);
    padding: 0;
    margin-bottom: 0.5rem;
}

/* Loading indicator */
.funl-accounts-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: var(--funl-text-muted);
    font-size: 0.9rem;
}

.funl-accounts-loading-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--funl-border);
    border-top-color: var(--funl-primary);
    border-radius: 50%;
    animation: funl-spin 0.8s linear infinite;
}

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

/* No more results */
.funl-accounts-no-more {
    text-align: center;
    padding: 1.5rem;
    color: var(--funl-text-muted);
    font-size: 0.875rem;
}

/* Sentinel for infinite scroll (invisible) */
.funl-accounts-sentinel {
    height: 1px;
    width: 100%;
}

/* No accounts found inline message */
.funl-no-requests-inline {
    width: 100%;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--funl-text-muted);
}

.funl-no-requests-inline p {
    margin: 0;
    font-size: 1rem;
}

/* Card grid layout */
.funl-requests-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin: 0 auto;
    max-width: 100%;
}

.funl-request-card {
    background: var(--funl-bg-surface);
    border-radius: var(--funl-radius-lg);
    box-shadow: var(--funl-shadow-lg);
    padding: 1rem;
    transition: all 0.3s ease;
    border: 1px solid var(--funl-border);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.funl-request-card:hover {
    box-shadow: var(--funl-shadow-xl);
}

.funl-request-card:hover::before {
    height: 6px;
}

/* Card header */
.funl-card-header {
    display: block;
    position: relative;
    margin-bottom: 1rem;
    padding-top: 0;
}

.funl-card-title {
    display: inline;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--funl-text-primary);
    margin: 0;
    line-height: 1.3;
}

.funl-card-status {
    padding: 0.25rem 0.75rem;
    margin-left: 0.5rem;
    border-radius: 15px;
    font-size: 0.65rem;
    font-weight: 600;
    float: right;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Status variations */
.funl-card-status.pending {
    background: var(--funl-status-pending-bg);
    color: var(--funl-status-pending-text);
    border: 1px solid var(--funl-status-pending-border);
}

.funl-card-status.processing {
    background: var(--funl-status-processing-bg);
    color: var(--funl-status-processing-text);
    border: 1px solid var(--funl-status-processing-border);
}

.funl-card-status.completed {
    background: var(--funl-status-completed-bg);
    color: var(--funl-status-completed-text);
    border: 1px solid var(--funl-status-completed-border);
}

.funl-card-status.failed {
    background: var(--funl-status-failed-bg);
    color: var(--funl-status-failed-text);
    border: 1px solid var(--funl-status-failed-border);
}

.funl-card-status.ready {
    background: var(--funl-status-ready-bg);
    color: var(--funl-status-ready-text);
    border: 1px solid var(--funl-status-ready-border);
}

.funl-card-status.incomplete {
    background: var(--funl-status-incomplete-bg);
    color: var(--funl-status-incomplete-text);
    border: 1px solid var(--funl-status-incomplete-border);
}

/* Card content */
.funl-card-content {
    display: none;
}

.funl-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--funl-text-muted);
    font-size: 0.9rem;
}

.funl-card-meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.funl-card-meta-item.funl-request-owner {
    padding: 0.5rem 0.75rem;
    background: var(--funl-bg-subtle);
    border-radius: var(--funl-radius-sm);
    border: 1px solid var(--funl-border);
    margin-bottom: 0.5rem;
}

.funl-card-meta-item.funl-request-owner .funl-card-meta-value {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.funl-author-avatar {
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid var(--funl-border);
}

.funl-card-meta-label {
    font-weight: 600;
    color: var(--funl-text-primary);
    min-width: 80px;
}

.funl-card-meta-value {
    color: var(--funl-text-primary);
}

/* Card actions */
.funl-card-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 0.5rem;
}

.funl-card-btn {
    padding: 0.75rem 1.5rem;
    border-radius: var(--funl-radius);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    line-height: 1;
}

.funl-card-btn.ai {
    background: var(--funl-primary);
    color: var(--funl-text-white);
    border-color: var(--funl-primary);
    order: -1;
    flex: 1 1 100%;
    position: relative;
    overflow: hidden;
}

.funl-card-btn.ai::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
    );
    transition: left 0.6s ease;
}

.funl-card-btn.ai:hover::before {
    left: 100%;
}

.funl-card-btn.ai .funl-icon-sparkles::before {
    background-image: var(--funl-icon-sparkles-white);
}

.funl-card-btn.ai:hover {
    background: var(--funl-primary-hover);
    color: var(--funl-text-white);
    border-color: var(--funl-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 115, 170, 0.5);
    text-decoration: none;
}

/* Edit button */
.funl-card-btn.edit, .funl-edit-section-btn {
    background: var(--funl-edit);
    color: var(--funl-text-white);
    border-color: var(--funl-edit);
}

.funl-card-btn.edit:hover, .funl-edit-section-btn:hover {
    background: var(--funl-edit-hover);
    border-color: var(--funl-edit-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

/* Review button */
.funl-card-btn.review {
    background: var(--funl-btn-primary);
    color: var(--funl-text-white);
    border-color: var(--funl-primary);
}

.funl-card-btn.review:hover {
    background: var(--funl-btn-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 115, 170, 0.4);
    text-decoration: none;
    color: var(--funl-text-white);
}

/* Delete button */
.funl-card-btn.delete {
    background: transparent;
    color: var(--funl-danger);
    border-color: var(--funl-danger);
}

.funl-card-btn.delete:hover {
    background: var(--funl-danger);
    color: var(--funl-text-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}

/* Process button (if applicable) */
.funl-card-btn.process {
    background: var(--funl-btn-success);
    color: var(--funl-text-white);
    border-color: var(--funl-success);
}

.funl-card-btn.process:hover {
    background: var(--funl-btn-success-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 163, 42, 0.4);
    text-decoration: none;
    color: var(--funl-text-white);
}

/* Create new button styling */
.funl-create-new {
    text-align: center;
    margin: 3rem 0;
    padding: 2rem;
    background: var(--funl-btn-neutral);
    border-radius: var(--funl-radius-lg);
    border: 2px dashed var(--funl-border);
    transition: all 0.3s ease;
}

.funl-create-new:hover {
    border-color: var(--funl-primary);
    background: var(--funl-bg-hover);
    transform: translateY(-2px);
}

.funl-create-new-button {
    padding: 1rem 2rem !important;
    font-size: 1.1rem !important;
    border-radius: var(--funl-radius-lg) !important;
    background: var(--funl-btn-primary) !important;
    border: none !important;
    color: var(--funl-text-white) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
    box-shadow: 0 4px 16px rgba(0, 115, 170, 0.3) !important;
    transition: all 0.3s ease !important;
}

.funl-create-new-button:hover {
    background: var(--funl-btn-primary-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(0, 115, 170, 0.4) !important;
    color: white !important;
}

/* Empty state */
.funl-no-requests {
    text-align: center;
    padding: 3rem 2rem;
    color: #666;
}

.funl-no-requests h3 {
    color: #555;
    margin-bottom: 1rem;
}

.funl-no-requests p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

/* ===================================
 * TABLE VIEW (Desktop only)
 * =================================== */

/* Hide table cells in card view */
.funl-table-cell {
    display: none;
}

/* Hide table header by default */
.funl-table-header {
    display: none;
}

@media (min-width: 1201px) {
    /* Table header - only visible in table view */
    .funl-table-header {
        display: none;
        grid-template-columns: 1fr 140px 160px 160px 315px;
        gap: 1rem;
        padding: 0.75rem 1rem;
        background: var(--funl-bg-subtle);
        border-radius: var(--funl-radius-md) var(--funl-radius-md) 0 0;
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--funl-text-muted);
        margin-bottom: 0;
        border: 1px solid var(--funl-border);
        border-bottom: none;
    }
    
    .funl-user-requests.table-view .funl-table-header {
        display: grid;
    }
    
    /* Center align header columns except Company */
    .funl-user-requests.table-view .funl-table-header span:not(:first-child) {
        text-align: center;
    }
    
    /* Switch grid to single column for table rows */
    .funl-user-requests.table-view .funl-requests-grid {
        grid-template-columns: 1fr;
        gap: 0;
        border: 1px solid var(--funl-border);
        border-radius: 0 0 var(--funl-radius-md) var(--funl-radius-md);
        overflow: hidden;
    }
    
    /* Transform cards into table rows */
    .funl-user-requests.table-view .funl-request-card {
        display: grid;
        grid-template-columns: 1fr 140px 160px 160px 315px;
        gap: 1rem;
        align-items: center;
        padding: 0.75rem 1rem;
        border-radius: 0;
        box-shadow: none;
        border: none;
        border-bottom: 1px solid var(--funl-border);
    }
    
    /* Zebra striping */
    .funl-user-requests.table-view .funl-request-card:nth-child(even) {
        background: var(--funl-bg-subtle);
    }
    
    .funl-user-requests.table-view .funl-request-card:last-child {
        border-bottom: none;
    }
    
    .funl-user-requests.table-view .funl-request-card:hover {
        box-shadow: none;
        background: var(--funl-bg-hover);
    }
    
    .funl-user-requests.table-view .funl-request-card::before {
        display: none;
    }
    
    /* Card header becomes first column (Company) - use contents to flatten */
    .funl-user-requests.table-view .funl-card-header {
        display: contents;
    }
    
    .funl-user-requests.table-view .funl-card-title {
        font-size: 0.95rem;
        margin: 0;
        order: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Status becomes second column */
    .funl-user-requests.table-view .funl-card-status {
        order: 2;
        justify-self: center;
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        white-space: nowrap;
    }
    
    /* Hide card content section in table view */
    .funl-user-requests.table-view .funl-card-content {
        display: none;
    }
    
    /* Show table cells in table view */
    .funl-user-requests.table-view .funl-table-cell {
        display: block;
        font-size: 0.875rem;
        color: var(--funl-text-muted);
        text-align: center;
    }
    
    .funl-user-requests.table-view .funl-table-created {
        order: 3;
    }
    
    .funl-user-requests.table-view .funl-table-modified {
        order: 4;
    }
    
    /* Actions column */
    .funl-user-requests.table-view .funl-card-actions {
        order: 5;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 0.5rem;
        margin: 0;
        padding: 0;
    }
    
    .funl-user-requests.table-view .funl-card-btn {
        padding: 0.35rem 0.6rem;
        font-size: 0.75rem;
        white-space: nowrap;
    }
    
    /* Override card view styles for Setup Wizard button in table view */
    .funl-user-requests.table-view .funl-card-btn.ai {
        flex: 0 0 auto;
        order: 0;
    }
    
    .funl-user-requests.table-view .funl-card-btn:hover {
        transform: none;
    }
}

/* ===================================
 * RESPONSIVE DESIGN
 * =================================== */

/* Large desktop - 3 columns */
@media (max-width: 1400px) {
    .funl-requests-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Medium screens - 2 columns */
@media (max-width: 1024px) {
    .funl-requests-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .funl-onboard-form h2 {
        font-size: 1.5rem;
    }
    
    .funl-form-group {
        margin-bottom: 1.25rem;
    }
    
    .funl-review-page {
        padding: 1rem;
    }
    
    .funl-review-field {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .funl-section-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .funl-dropzone .dz-preview {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.75rem;
    }
    
    .funl-dropzone .dz-preview .dz-image {
        max-width: 250px;
    }
    
    .funl-page-header {
        padding: 0.75rem 1rem;
    }
    
    .funl-page-header h1 {
        font-size: 1.25rem;
    }
    
    body.funl-app-layout.admin-bar .funl-page-wrapper {
        padding-top: 46px;
    }
    
    .funl-step .step-number {
        width: 20px;
        height: 20px;
        font-size: 0.7rem;
    }
    
    .funl-page-content {
        padding: 1rem;
    }
    
    /* Mobile responsive adjustments for user requests cards */
    .funl-requests-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .funl-request-card {
        padding: 1rem;
    }
    
    .funl-card-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .funl-card-title {
        margin-right: 0;
    }
    
    /* User requests container */
    .funl-user-requests {
        padding: 0;
    }
    
    /* Mobile accounts controls */
    .funl-accounts-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .funl-accounts-search {
        max-width: none;
    }
    
    .funl-accounts-sort {
        justify-content: space-between;
    }
    
    .funl-accounts-filter {
        justify-content: space-between;
    }
    
    .funl-accounts-sort-select,
    .funl-accounts-filter-select {
        flex: 1;
    }
    
    /* Mobile responsive adjustments for step slider and navigation */
    .funl-step-panel {
        padding: 0 0.5rem;
    }
    
    .funl-step-content {
        padding: 0;
    }
    
    .funl-steps-wrapper {
        transition: transform 0.3s ease;
    }
    
    .funl-step-navigation {
        flex-direction: row;
        gap: 1rem;
        padding: 0.75rem;
    }
    
    .funl-step-navigation .funl-nav-left,
    .funl-step-navigation .funl-nav-right {
        flex: 1;
        white-space: nowrap;
        text-align: center;
    }
    
    .funl-page-wrapper .button {
        width: 100%;
        min-width: auto;
        padding: 16px 24px;
        font-size: 16px;
        border-radius: 10px;
    }
    
    .funl-step-navigation .funl-nav-right {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* Utility Classes */
.funl-hidden {
    display: none !important;
}

.funl-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===================================
 * LOGIN FORM STYLES
 * =================================== */
.funl-login-wrapper {
    max-width: 480px;
    margin: 3rem auto;
    padding: 0 1rem;
}

.funl-login-box {
    background: var(--funl-bg-surface);
    border-radius: var(--funl-radius-xl);
    box-shadow: var(--funl-shadow-lg);
    padding: 2.5rem;
    border: 1px solid var(--funl-border);
}

.funl-login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.funl-login-icon {
    width: 48px;
    height: 48px;
    color: var(--funl-primary);
    margin: 0 auto 1rem;
    display: block;
}

.funl-login-header h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--funl-text-heading);
}

.funl-login-header p {
    margin: 0;
    color: var(--funl-text-muted);
    font-size: 0.95rem;
}

.funl-login-box .funl-form-group {
    margin-bottom: 1.5rem;
}

.funl-login-box .funl-form-group.funl-remember-me {
    margin-bottom: 1.5rem;
}

.funl-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--funl-text-primary);
    user-select: none;
}

.funl-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--funl-primary);
}

.funl-checkbox-label:hover {
    color: var(--funl-text-heading);
}

.funl-form-actions {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.funl-request-new-code {
    text-align: center;
    font-size: 0.875rem;
}

#funl-request-countdown {
    color: var(--funl-text-muted);
}

#funl-request-new-link {
    color: var(--funl-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

#funl-request-new-link:hover {
    color: var(--funl-primary-hover);
    text-decoration: underline;
}

#funl-code-timer {
    font-weight: 600;
}

.funl-btn-login {
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--funl-text-white);
    background: var(--funl-btn-primary);
    border: none;
    border-radius: var(--funl-radius-lg);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 115, 170, 0.3);
}

.funl-btn-login:hover {
    background: var(--funl-btn-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 115, 170, 0.4);
}

.funl-btn-login:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 115, 170, 0.3);
}

.funl-login-links {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--funl-border);
    text-align: center;
    font-size: 0.9rem;
}

.funl-login-links a {
    color: var(--funl-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.funl-login-links a:hover {
    color: var(--funl-primary-hover);
    text-decoration: underline;
}

.funl-login-links .funl-separator {
    margin: 0 0.75rem;
    color: var(--funl-text-muted);
}

/* Login method selection buttons */
.funl-login-method-selection {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.funl-btn-login-method {
    width: 100%;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--funl-text-heading);
    background: var(--funl-bg-subtle);
    border: 2px solid var(--funl-border);
    border-radius: var(--funl-radius-lg);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.funl-btn-login-method:hover {
    background: var(--funl-bg-hover);
    border-color: var(--funl-primary);
    color: var(--funl-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.funl-btn-login-method:active {
    transform: translateY(0);
}

.funl-btn-login-method .funl-btn-icon {
    flex-shrink: 0;
}

.funl-btn-login-method .funl-btn-icon path,
.funl-btn-login-method .funl-btn-icon rect,
.funl-btn-login-method .funl-btn-icon polyline {
    fill: none;
}

/* Login form sections - hidden by default, shown via JS */
.funl-login-form-section {
    animation: funl-fadeIn 0.3s ease;
}

/* Back button */
.funl-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    color: var(--funl-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

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

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

/* Code sent message */
.funl-code-sent-message {
    background: var(--funl-bg-subtle);
    border-left: 4px solid var(--funl-primary);
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: var(--funl-radius-sm);
}

.funl-code-sent-message p {
    margin: 0 0 0.5rem 0;
    color: var(--funl-text-primary);
    font-size: 0.95rem;
}

.funl-code-sent-message p:last-child {
    margin-bottom: 0;
}

.funl-code-sent-message .funl-code-expires {
    font-size: 0.875rem;
    color: var(--funl-text-muted);
    font-style: italic;
}

/* Two-Factor Authentication Section */
.funl-2fa-message {
    text-align: center;
    padding: 1rem 1rem 1.5rem;
    margin-bottom: 1.5rem;
}

.funl-2fa-icon {
    color: var(--funl-primary);
    margin-bottom: 1rem;
    opacity: 0.9;
}

.funl-2fa-message h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--funl-text-heading);
}

.funl-2fa-message p {
    margin: 0;
    color: var(--funl-text-muted);
    font-size: 0.95rem;
}

.funl-field-hint {
    margin: 0.5rem 0 0 0;
    font-size: 0.8rem;
    color: var(--funl-text-muted);
    line-height: 1.4;
}

/* 2FA code input - allow wider for recovery codes */
#funl_2fa_code {
    font-size: 1.25rem;
    letter-spacing: 0.15rem;
    text-align: center;
    font-family: 'Courier New', monospace;
}

/* Code input styling */
.funl-code-input {
    font-size: 1.5rem;
    letter-spacing: 0.5rem;
    text-align: center;
    font-family: 'Courier New', monospace;
}

/* Form messages */
.funl-form-message {
    padding: 0.875rem 1rem;
    border-radius: var(--funl-radius-sm);
    margin-bottom: 1rem;
    font-size: 0.95rem;
    animation: funl-fadeIn 0.3s ease;
}

.funl-form-message.funl-error {
    background: var(--funl-status-error-bg);
    border-left: 4px solid var(--funl-danger);
    color: var(--funl-status-error-text);
}

.funl-form-message.funl-success {
    background: var(--funl-status-success-bg);
    border-left: 4px solid var(--funl-success);
    color: var(--funl-status-success-text);
}

.funl-form-message.funl-warning {
    background: var(--funl-status-warning-bg);
    border-left: 4px solid var(--funl-warning);
    color: var(--funl-status-warning-text);
}

.funl-attempts-remaining {
    padding: 0.75rem 1rem;
    background: var(--funl-status-warning-bg);
    border-left: 4px solid var(--funl-warning);
    color: var(--funl-warning-dark);
    border-radius: var(--funl-radius-sm);
    margin-bottom: 1rem;
    font-size: 0.9rem;
    text-align: center;
    font-weight: 600;
}

/* Button spinner */
.funl-button-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-right: 0.5rem;
}

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

/* Login form responsive adjustments */
@media (max-width: 576px) {
    .funl-login-wrapper {
        margin: 2rem auto;
    }
    
    .funl-login-box {
        padding: 2rem 1.5rem;
    }
    
    .funl-login-header h2 {
        font-size: 1.5rem;
    }
    
    .funl-code-input {
        font-size: 1.25rem;
        letter-spacing: 0.35rem;
    }
}

/* ============================================
   Interim Login Modal Styles
   Applied when login form is shown in WP auth-check modal
   ============================================ */
body.funl-interim-login .funl-mobile-header {
    display: none !important;
}

body.funl-interim-login.funl-no-sidebar .funl-page-wrapper {
    top: 0 !important;
}

body.funl-interim-login .funl-page-content {
    padding: 0 !important;
}

body.funl-interim-login .funl-login-wrapper {
    margin: 1rem auto !important;
}

body.funl-interim-login .funl-app-footer {
    display: none !important;
}