/* /Components/Intro/IntroWizard.razor.rz.scp.css */
.intro-overlay[b-t8ox8ezdgc] {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    background: var(--surface-base, #fff);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    animation: intro-fade-in-b-t8ox8ezdgc 200ms ease-out;
}

@keyframes intro-fade-in-b-t8ox8ezdgc {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.intro-top[b-t8ox8ezdgc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4rem;
    padding: 0 2rem;
    border-bottom: 1px solid var(--border-subtle, #e5e7eb);
    background: var(--surface-elevated, #fff);
    flex-shrink: 0;
}

.intro-top-logo[b-t8ox8ezdgc] {
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--text-primary, #111827);
}
.intro-top-logo .mark[b-t8ox8ezdgc] { color: var(--accent, #4f46e5); }

.intro-top-steps[b-t8ox8ezdgc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.intro-top-counter[b-t8ox8ezdgc] {
    font-size: 0.875rem;
    color: var(--text-tertiary, #6b7280);
}
.intro-top-dots[b-t8ox8ezdgc] {
    display: flex;
    gap: 0.375rem;
}
.intro-dot[b-t8ox8ezdgc] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--border-strong, #d1d5db);
    transition: background 200ms;
}
.intro-dot.active[b-t8ox8ezdgc] { background: var(--accent, #4f46e5); }

.intro-skip-btn[b-t8ox8ezdgc] {
    background: transparent;
    border: none;
    color: var(--text-tertiary, #6b7280);
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    transition: background 150ms, color 150ms;
}
.intro-skip-btn:hover[b-t8ox8ezdgc] {
    background: var(--surface-hover, #f3f4f6);
    color: var(--text-primary, #111827);
}

.intro-body[b-t8ox8ezdgc] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    padding: 2rem 1.5rem 3rem;
}

.intro-panel[b-t8ox8ezdgc] {
    width: 100%;
    max-width: 42rem;
}

.intro-confirm-overlay[b-t8ox8ezdgc] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.intro-confirm-card[b-t8ox8ezdgc] {
    background: var(--surface-elevated, #fff);
    border-radius: 0.75rem;
    padding: 1.5rem;
    max-width: 26rem;
    width: 100%;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}
.intro-confirm-card h3[b-t8ox8ezdgc] { margin: 0 0 0.5rem; font-size: 1.125rem; }
.intro-confirm-card p[b-t8ox8ezdgc] { margin: 0 0 1.25rem; color: var(--text-secondary, #374151); font-size: 0.9375rem; }
.intro-confirm-actions[b-t8ox8ezdgc] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

@media (max-width: 48rem) {
    .intro-top[b-t8ox8ezdgc] {
        height: 3.5rem;
        padding: 0 1rem;
        position: relative;
    }
    .intro-top-logo[b-t8ox8ezdgc] { font-size: 1rem; }
    .intro-top-dots[b-t8ox8ezdgc] { display: none; }
    .intro-top-counter[b-t8ox8ezdgc] { font-size: 0.75rem; }

    .intro-body[b-t8ox8ezdgc] { padding: 1.25rem 1.25rem 2.5rem; }
    .intro-skip-btn[b-t8ox8ezdgc] { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
}

/* ========== Step wspólne ========== */
[b-t8ox8ezdgc] .step-header {
    text-align: center;
    margin-bottom: 2rem;
}
[b-t8ox8ezdgc] .step-icon {
    font-size: 3rem !important;
    color: var(--accent, #4f46e5);
    margin-bottom: 0.75rem;
}
[b-t8ox8ezdgc] .step-title {
    margin: 0 0 0.5rem;
    font-family: 'Sora', sans-serif;
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--text-primary, #111827);
}
[b-t8ox8ezdgc] .step-subtitle {
    margin: 0;
    color: var(--text-secondary, #4b5563);
    font-size: 1rem;
}

[b-t8ox8ezdgc] .step-body { margin-bottom: 2rem; }

[b-t8ox8ezdgc] .step-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-subtle, #e5e7eb);
}
[b-t8ox8ezdgc] .step-footer .seed-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

[b-t8ox8ezdgc] .form-group { margin-bottom: 1rem; }
[b-t8ox8ezdgc] .form-label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    color: var(--text-secondary, #4b5563);
}
[b-t8ox8ezdgc] .form-input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-strong, #d1d5db);
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    background: var(--surface-elevated, #fff);
    font-family: inherit;
}
[b-t8ox8ezdgc] .form-input:focus {
    outline: none;
    border-color: var(--accent, #4f46e5);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

[b-t8ox8ezdgc] .upload-zone {
    position: relative;
    border: 2px dashed var(--border-strong, #d1d5db);
    border-radius: 0.75rem;
    padding: 1.5rem;
    text-align: center;
    color: var(--text-tertiary, #6b7280);
    cursor: pointer;
}
[b-t8ox8ezdgc] .upload-zone:hover { border-color: var(--accent, #4f46e5); background: var(--surface-hover, #f9fafb); }
[b-t8ox8ezdgc] .upload-zone .material-icons-round { font-size: 2rem; color: var(--accent, #4f46e5); }
[b-t8ox8ezdgc] .upload-hint { font-size: 0.75rem; margin-top: 0.25rem; }
[b-t8ox8ezdgc] .logo-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: 0.5rem;
}
[b-t8ox8ezdgc] .logo-preview img { max-height: 4rem; max-width: 8rem; }
[b-t8ox8ezdgc] .field-error {
    color: var(--danger, #dc2626);
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

/* Step 2 — visibility */
[b-t8ox8ezdgc] .step-visibility {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
[b-t8ox8ezdgc] .check-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    cursor: pointer;
    border-radius: 0.375rem;
}
[b-t8ox8ezdgc] .check-row:hover { background: var(--surface-hover, #f3f4f6); }
[b-t8ox8ezdgc] .preview-card {
    background: var(--surface-elevated, #fff);
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    position: sticky;
    top: 1rem;
}
[b-t8ox8ezdgc] .preview-card-head {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-tertiary, #6b7280);
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
}
[b-t8ox8ezdgc] .preview-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    padding: 0.25rem 0;
    color: var(--text-secondary, #374151);
}
[b-t8ox8ezdgc] .preview-line .material-icons-round { font-size: 1rem !important; color: var(--text-tertiary, #6b7280); }
[b-t8ox8ezdgc] .preview-line.strong { font-weight: 600; font-size: 1rem; color: var(--text-primary, #111827); }

@media (max-width: 48rem) {
    [b-t8ox8ezdgc] .step-visibility { grid-template-columns: 1fr; gap: 1rem; }
    [b-t8ox8ezdgc] .preview-card { position: static; }
}

/* Step 3 — PDF */
[b-t8ox8ezdgc] .pdf-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}
[b-t8ox8ezdgc] .pdf-card-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
[b-t8ox8ezdgc] .pdf-preview-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    background: transparent;
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: 0.375rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary, #4b5563);
    cursor: pointer;
    font-family: inherit;
    transition: border-color 150ms, color 150ms;
}
[b-t8ox8ezdgc] .pdf-preview-btn:hover { border-color: var(--accent, #4f46e5); color: var(--accent, #4f46e5); }
[b-t8ox8ezdgc] .pdf-preview-btn .material-icons-round { font-size: 0.9375rem !important; }
[b-t8ox8ezdgc] .pdf-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    background: var(--surface-elevated, #fff);
    border: 2px solid var(--border-subtle, #e5e7eb);
    border-radius: 0.75rem;
    padding: 0.5rem;
    cursor: pointer;
    transition: border-color 150ms;
}
[b-t8ox8ezdgc] .pdf-card.selected { border-color: var(--accent, #4f46e5); }
[b-t8ox8ezdgc] .pdf-thumb { width: 100%; aspect-ratio: 0.707; object-fit: contain; border-radius: 0.375rem; background: #fff; }
[b-t8ox8ezdgc] .pdf-card-label { font-size: 0.8125rem; text-align: center; }
[b-t8ox8ezdgc] .pdf-card-check { position: absolute; top: 0.5rem; right: 0.5rem; color: var(--accent, #4f46e5); }
[b-t8ox8ezdgc] .pdf-single { text-align: center; }
[b-t8ox8ezdgc] .pdf-thumb-big { width: 100%; max-width: 20rem; border-radius: 0.5rem; margin-bottom: 0.75rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); }
[b-t8ox8ezdgc] .pdf-single-label { font-size: 0.9375rem; margin-bottom: 0.75rem; }
[b-t8ox8ezdgc] .pdf-pro-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: rgba(251, 191, 36, 0.15);
    color: #92400e;
    border-radius: 999px;
    font-size: 0.875rem;
    text-decoration: none;
}
[b-t8ox8ezdgc] .pdf-pro-hint .material-icons-round { font-size: 1rem !important; }
[b-t8ox8ezdgc] .pdf-color-row {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle, #e5e7eb);
}
[b-t8ox8ezdgc] .pdf-color-label {
    font-size: 0.875rem;
    color: var(--text-secondary, #4b5563);
    margin-bottom: 0.5rem;
}
[b-t8ox8ezdgc] .pdf-color-swatches {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
[b-t8ox8ezdgc] .pdf-swatch {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 150ms, border-color 150ms;
}
[b-t8ox8ezdgc] .pdf-swatch.selected { border-color: var(--text-primary, #111827); transform: scale(1.1); }
[b-t8ox8ezdgc] .pdf-swatch-custom-group {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
}
[b-t8ox8ezdgc] .pdf-swatch-custom-group input[type="color"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
}
[b-t8ox8ezdgc] .pdf-swatch-custom {
    position: relative;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid transparent;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 150ms, border-color 150ms;
}
[b-t8ox8ezdgc] .pdf-swatch-custom.selected { border-color: var(--text-primary, #111827); transform: scale(1.1); }
[b-t8ox8ezdgc] .pdf-swatch-custom-plus {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
[b-t8ox8ezdgc] .pdf-swatch-custom.selected .pdf-swatch-custom-plus { display: none; }
[b-t8ox8ezdgc] .pdf-color-custom-label {
    font-size: 0.8125rem;
    color: var(--text-secondary, #4b5563);
}

/* fullscreen preview overlay */
[b-t8ox8ezdgc] .pdf-preview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    backdrop-filter: blur(4px);
    cursor: pointer;
}
[b-t8ox8ezdgc] .pdf-preview-overlay img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 0.75rem;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
    background: #fff;
    cursor: default;
}
[b-t8ox8ezdgc] .pdf-preview-close {
    position: fixed;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    z-index: 1201;
}
[b-t8ox8ezdgc] .pdf-preview-close .material-icons-round { font-size: 1.5rem !important; }

@media (max-width: 48rem) {
    [b-t8ox8ezdgc] .pdf-grid { grid-template-columns: 1fr; }
}

/* Step 4 — how it works */
[b-t8ox8ezdgc] .how-section {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: var(--surface-elevated, #fff);
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: 0.75rem;
}
[b-t8ox8ezdgc] .how-heading {
    margin: 0 0 1rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
}
[b-t8ox8ezdgc] .how-illustration svg { width: 100%; max-width: 30rem; margin: 0 auto; display: block; }
[b-t8ox8ezdgc] .how-copy {
    margin: 1rem 0 0;
    color: var(--text-secondary, #4b5563);
    line-height: 1.6;
    font-size: 0.9375rem;
}

/* Step 5 — bot */
[b-t8ox8ezdgc] .bot-illustration svg { width: 100%; max-width: 28rem; margin: 0 auto 1rem; display: block; }
[b-t8ox8ezdgc] .bot-copy {
    color: var(--text-secondary, #4b5563);
    line-height: 1.6;
    text-align: center;
    margin: 0 0 1rem;
}
[b-t8ox8ezdgc] .bot-terms-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-tertiary, #6b7280);
    font-size: 0.8125rem;
    text-decoration: none;
}
[b-t8ox8ezdgc] .bot-terms-link:hover { color: var(--accent, #4f46e5); }

/* Step 6 — clients */
[b-t8ox8ezdgc] .clients-illustration svg { width: 100%; max-width: 30rem; margin: 0 auto 1rem; display: block; }
[b-t8ox8ezdgc] .clients-copy {
    color: var(--text-secondary, #4b5563);
    line-height: 1.6;
    margin: 0 0 1rem;
}
[b-t8ox8ezdgc] .clients-tip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: rgba(251, 191, 36, 0.12);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #92400e;
}
[b-t8ox8ezdgc] .clients-tip .material-icons-round { font-size: 1.125rem !important; color: #f59e0b; }

/* Step 7 — seed */
[b-t8ox8ezdgc] .seed-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}
[b-t8ox8ezdgc] .seed-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 0.75rem;
    background: var(--surface-elevated, #fff);
    border: 2px solid var(--border-subtle, #e5e7eb);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: border-color 150ms, background 150ms;
    font-family: inherit;
}
[b-t8ox8ezdgc] .seed-card:hover { border-color: var(--accent, #4f46e5); }
[b-t8ox8ezdgc] .seed-card.selected { border-color: var(--accent, #4f46e5); background: rgba(79, 70, 229, 0.06); }
[b-t8ox8ezdgc] .seed-card .material-icons-round { font-size: 1.75rem !important; color: var(--accent, #4f46e5); }
[b-t8ox8ezdgc] .seed-card-label { font-size: 0.8125rem; text-align: center; }

[b-t8ox8ezdgc] .seed-preview {
    margin-top: 1.25rem;
    padding: 1rem;
    background: rgba(79, 70, 229, 0.06);
    border-radius: 0.5rem;
}
[b-t8ox8ezdgc] .seed-preview-head { font-weight: 600; margin-bottom: 0.5rem; }
[b-t8ox8ezdgc] .seed-preview-list { margin: 0; padding-left: 1.25rem; font-size: 0.875rem; color: var(--text-secondary, #4b5563); }
[b-t8ox8ezdgc] .seed-preview-list li { margin-bottom: 0.25rem; }

@media (max-width: 48rem) {
    [b-t8ox8ezdgc] .seed-grid { grid-template-columns: repeat(2, 1fr); }
    [b-t8ox8ezdgc] .step-footer { flex-direction: column; align-items: stretch; }
    [b-t8ox8ezdgc] .step-footer .seed-actions { flex-direction: column; }
    [b-t8ox8ezdgc] .step-footer .btn { width: 100%; justify-content: center; }
}
/* /Components/Layout/LatwoBotBottombarButton.razor.rz.scp.css */
.bottombar-item[b-4xfc7eol11] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: #94A3B8;
    font-size: 0.625rem;
    font-weight: 500;
    transition: color 150ms ease;
    -webkit-tap-highlight-color: transparent;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}
.bottombar-item:hover[b-4xfc7eol11],
.bottombar-item:active[b-4xfc7eol11] { color: #4F46E5; }
.bottombar-item .material-icons-round[b-4xfc7eol11] { font-size: 1.375rem; }

@media (max-width: 420px) {
    .bottombar-item[b-4xfc7eol11] { padding: 0.375rem 0.5rem; font-size: 0.5625rem; }
}
@media (max-width: 359px) {
    .bottombar-item[b-4xfc7eol11] { padding: 0.25rem 0.375rem; }
}
/* /Components/Layout/LatwoBotFab.razor.rz.scp.css */
/* ═══ FAB (desktop tylko) ═══ */
.lb-fab[b-nxv6xr38hf] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.125rem;
    background: var(--accent, #4F46E5);
    color: #fff;
    border: none;
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.35);
    transition: all 150ms ease;
    white-space: nowrap;
}
.lb-fab:hover[b-nxv6xr38hf] { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(79, 70, 229, 0.45); }
.lb-fab:active[b-nxv6xr38hf] { transform: translateY(0); }
.lb-fab .material-icons-round[b-nxv6xr38hf] { font-size: 1.375rem; }
.lb-fab-label[b-nxv6xr38hf] { font-family: var(--font-heading, inherit); }

/* ═══ OVERLAY + PANEL (desktop popover) ═══ */
.lb-overlay[b-nxv6xr38hf] {
    position: fixed;
    inset: 0;
    z-index: 1600;
    background: transparent;
    pointer-events: none;
}
.lb-overlay-panel[b-nxv6xr38hf] {
    position: absolute;
    bottom: 5.5rem;
    right: 1.5rem;
    width: 27.5rem;
    height: min(40rem, calc(100vh - 8rem));
    background: #fff;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 1rem;
    box-shadow: 0 1.25rem 3rem rgba(15, 23, 42, 0.18);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
}

/* Ciaśniejszy ekran — zmniejsz panel */
@media (max-width: 62rem) and (min-width: 48rem) {
    .lb-overlay-panel[b-nxv6xr38hf] { width: 24rem; height: min(36rem, calc(100vh - 7rem)); }
}

/* ═══ MOBILE: fullscreen + FAB ukryty (wywołanie z bottombara) ═══ */
@media (max-width: 48rem) {
    .lb-fab[b-nxv6xr38hf] { display: none !important; }

    .lb-overlay[b-nxv6xr38hf] {
        background: rgba(15, 23, 42, 0.4);
        pointer-events: auto;
        z-index: 2000;
    }
    .lb-overlay-panel[b-nxv6xr38hf] {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ═══ APP SHELL ═══ */
.app-shell[b-cizz8moipp] {
    display: flex;
    height: 100vh;
    height: 100dvh;
}

.sheet-checkbox[b-cizz8moipp] { display: none; }

/* ═══ SIDEBAR (desktop only) ═══ */
.sidebar[b-cizz8moipp] {
    --sidebar-w: 15rem;
    width: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background: linear-gradient(180deg, #0A0F1E 0%, #0F1629 100%);
    color: #CBD5E1;
    position: sticky;
    top: 0;
    height: 100dvh;
}

.sidebar-logo[b-cizz8moipp] {
    padding: 0 1.5rem;
    font-family: 'Sora', 'DM Sans', system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    display: flex;
    align-items: center;
    height: 4rem;
    color: #F8FAFC;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-logo .mark[b-cizz8moipp] { color: #818CF8; }

.sidebar-new-quote[b-cizz8moipp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0.625rem 0;
    padding: 0.625rem 1rem;
    background: #818CF8;
    color: #fff;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 150ms;
}
.sidebar-new-quote:hover[b-cizz8moipp] { background: #6366F1; }
.sidebar-new-quote .material-icons-round[b-cizz8moipp] { font-size: 1.125rem; }

.sidebar-nav[b-cizz8moipp] {
    flex: 1;
    padding: 0.75rem 0.625rem;
    overflow-y: auto;
}

[b-cizz8moipp] .nav-section {
    padding: 1.25rem 0.75rem 0.375rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #64748B;
}

[b-cizz8moipp] .nav-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: #94A3B8;
    transition: all 150ms ease;
    width: 100%;
    text-align: left;
    text-decoration: none;
    position: relative;
}

[b-cizz8moipp] .nav-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #E2E8F0;
    text-decoration: none;
}

[b-cizz8moipp] .nav-btn.active {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: inset 3px 0 0 #4F46E5;
}

[b-cizz8moipp] .nav-btn .material-icons-round {
    font-size: 1.25rem;
    color: #64748B;
    transition: color 150ms ease;
}

[b-cizz8moipp] .nav-btn:hover .material-icons-round { color: #94A3B8; }
[b-cizz8moipp] .nav-btn.active .material-icons-round { color: #818CF8; }

.sidebar-secondary[b-cizz8moipp] {
    padding: 0.25rem 0.625rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-upgrade[b-cizz8moipp] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    margin: 0.25rem 0.625rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #818CF8;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.2), rgba(129, 140, 248, 0.1));
    text-decoration: none;
    flex-shrink: 0;
    transition: all 150ms ease;
    border: 1px solid rgba(129, 140, 248, 0.15);
}

.sidebar-upgrade .material-icons-round[b-cizz8moipp] {
    font-size: 1.125rem;
    transition: transform 200ms ease;
}

.sidebar-upgrade:hover[b-cizz8moipp] {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.3), rgba(129, 140, 248, 0.18));
    text-decoration: none;
    border-color: rgba(129, 140, 248, 0.3);
    box-shadow: 0 2px 12px rgba(79, 70, 229, 0.15);
}
.sidebar-upgrade:hover .material-icons-round[b-cizz8moipp] { transform: scale(1.15) rotate(-5deg); }

.sidebar-footer[b-cizz8moipp] {
    padding: 0.875rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.6875rem;
    color: #64748B;
}

.sidebar-footer-links[b-cizz8moipp] {
    margin-top: 0.375rem;
    display: flex;
    gap: 0.75rem;
}

.sidebar-footer-links a[b-cizz8moipp] {
    color: #64748B;
    text-decoration: none;
    font-size: 0.6875rem;
}
.sidebar-footer-links a:hover[b-cizz8moipp] { color: #818CF8; }

[b-cizz8moipp] .nav-logout-form { margin-top: 0.25rem; }
[b-cizz8moipp] .nav-btn-logout { color: #EF4444 !important; }
[b-cizz8moipp] .nav-btn-logout .material-icons-round { color: #EF4444 !important; }
[b-cizz8moipp] .nav-btn-logout:hover { background: rgba(239, 68, 68, 0.1) !important; }

/* ═══ BOTTOM SHEET (mobile nav) ═══ */
.sheet-overlay[b-cizz8moipp] {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.bottom-sheet[b-cizz8moipp] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: #FFFFFF;
    border-radius: 1rem 1rem 0 0;
    max-height: 80vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1001;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.sheet-handle[b-cizz8moipp] {
    width: 2.5rem;
    height: 0.25rem;
    background: #CBD5E1;
    border-radius: 0.125rem;
    margin: 0.75rem auto 0;
}

.sheet-subscription[b-cizz8moipp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0.75rem 0;
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, #4F46E5, #6366F1);
    border-radius: 0.875rem;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 0.25rem 0.75rem rgba(79, 70, 229, 0.25);
}

.sheet-subscription-icon[b-cizz8moipp] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sheet-subscription-icon .material-icons-round[b-cizz8moipp] {
    color: #fff;
    font-size: 1.375rem;
}

.sheet-subscription-body[b-cizz8moipp] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    line-height: 1.25;
}

.sheet-subscription-primary[b-cizz8moipp] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
}

.sheet-subscription-secondary[b-cizz8moipp] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.sheet-subscription-chevron[b-cizz8moipp] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.25rem !important;
}

.sheet-nav[b-cizz8moipp] {
    padding: 1rem 0.75rem;
}

.sheet-nav[b-cizz8moipp]  .nav-btn {
    color: #334155;
    font-size: 0.9375rem;
}

.sheet-nav[b-cizz8moipp]  .nav-btn:hover {
    background: rgba(79, 70, 229, 0.06);
    color: #1E293B;
}

.sheet-nav[b-cizz8moipp]  .nav-btn.active {
    background: rgba(79, 70, 229, 0.08);
    color: #4F46E5;
    box-shadow: inset 3px 0 0 #4F46E5;
}

.sheet-nav[b-cizz8moipp]  .nav-btn .material-icons-round {
    color: #94A3B8;
}

.sheet-nav[b-cizz8moipp]  .nav-btn.active .material-icons-round {
    color: #4F46E5;
}

.sheet-section[b-cizz8moipp] {
    border-top: 1px solid #E2E8F0;
    padding: 0.75rem;
}

.sheet-checkbox:checked ~ .sheet-overlay[b-cizz8moipp] {
    display: block;
    animation: sheetFadeIn-b-cizz8moipp 200ms ease;
}

.sheet-checkbox:checked ~ .bottom-sheet[b-cizz8moipp] {
    transform: translateY(0);
}

@keyframes sheetFadeIn-b-cizz8moipp { from { opacity: 0; } to { opacity: 1; } }

/* ═══ CONTENT HEADER (replaces topbar) ═══ */
.content-header[b-cizz8moipp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 2rem;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-white);
}

.page-title[b-cizz8moipp] {
    font-family: 'Sora', 'DM Sans', system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0F172A;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.3;
}

.content-header-right[b-cizz8moipp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.subscription-pill[b-cizz8moipp] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem 0.375rem 0.625rem;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(129, 140, 248, 0.08));
    border: 1px solid rgba(79, 70, 229, 0.18);
    border-radius: 0.625rem;
    text-decoration: none;
    transition: all 0.15s ease;
    line-height: 1.15;
}

.subscription-pill:hover[b-cizz8moipp] {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.14), rgba(129, 140, 248, 0.14));
    border-color: rgba(79, 70, 229, 0.32);
    transform: translateY(-1px);
}

.subscription-pill .material-icons-round[b-cizz8moipp] {
    color: #4F46E5;
    font-size: 1.125rem;
}

.subscription-pill-text[b-cizz8moipp] {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
}

.subscription-pill-primary[b-cizz8moipp] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1E293B;
}

.subscription-pill-secondary[b-cizz8moipp] {
    font-size: 0.6875rem;
    color: #4F46E5;
    font-weight: 500;
}

@media (max-width: 900px) {
    .subscription-pill[b-cizz8moipp] { display: none; }
}

.avatar-wrapper[b-cizz8moipp] {
    position: relative;
}

.avatar[b-cizz8moipp] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #4F46E5, #818CF8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #FFFFFF;
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 150ms ease;
    border: none;
}

.avatar:hover[b-cizz8moipp] {
    text-decoration: none;
    box-shadow: 0 2px 12px rgba(79, 70, 229, 0.3);
    transform: scale(1.05);
}

.avatar-dropdown[b-cizz8moipp] {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 12rem;
    background: #FFFFFF;
    border-radius: 0.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    border: 1px solid #E2E8F0;
    z-index: 1100;
    overflow: hidden;
    padding: 0.375rem 0;
}

.avatar-wrapper.open .avatar-dropdown[b-cizz8moipp] {
    display: block;
}

.avatar-dropdown-item[b-cizz8moipp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #334155;
    text-decoration: none;
    cursor: pointer;
    transition: background 150ms ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.avatar-dropdown-item:hover[b-cizz8moipp] {
    background: #F1F5F9;
    text-decoration: none;
}

.avatar-dropdown-item .material-icons-round[b-cizz8moipp] {
    font-size: 1.125rem;
    color: #64748B;
}

.avatar-dropdown-item.danger[b-cizz8moipp] {
    color: #EF4444;
}

.avatar-dropdown-item.danger .material-icons-round[b-cizz8moipp] {
    color: #EF4444;
}

.avatar-dropdown-item.danger:hover[b-cizz8moipp] {
    background: rgba(239, 68, 68, 0.06);
}

/* ═══ MAIN AREA ═══ */
.main-area[b-cizz8moipp] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    background: #F5F6FA;
}

/* ═══ PAGE CONTENT ═══ */
.page-content[b-cizz8moipp] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: 1.5rem 2rem 4rem;
    scroll-behavior: smooth;
}
/* Pages with a sticky header shell handle their own top padding so the bar can sit flush */
.page-content:has(.stepper-bar-shell)[b-cizz8moipp] { padding-top: 0; }

.page-content > :first-child[b-cizz8moipp] { max-width: 75rem; }

/* ═══ NOTIFICATION BELL ═══ */
.notif-wrapper[b-cizz8moipp] {
    position: relative;
}

.notif-bell[b-cizz8moipp] {
    border: none;
    cursor: pointer;
    position: relative;
}

.notif-badge[b-cizz8moipp] {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--danger, #EF4444);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

.notif-dropdown[b-cizz8moipp] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-height: 400px;
    background: var(--bg-white, #fff);
    border: 1px solid var(--border, #E5E7EB);
    border-radius: var(--radius, 12px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.notif-header[b-cizz8moipp] {
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px solid var(--border, #E5E7EB);
    flex-shrink: 0;
}

.notif-empty[b-cizz8moipp] {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-tertiary, #9CA3AF);
    font-size: 13px;
}

.notif-list[b-cizz8moipp] {
    overflow-y: auto;
    flex: 1;
}

.notif-item[b-cizz8moipp] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--text, #111827);
    transition: background var(--transition, 150ms ease);
    cursor: pointer;
    border-bottom: 1px solid var(--border-light, #F3F4F6);
}

.notif-item:hover[b-cizz8moipp] {
    background: var(--accent-bg, #EFF6FF);
    text-decoration: none;
}

.notif-unread[b-cizz8moipp] {
    background: rgba(37, 99, 235, 0.04);
}

.notif-dot[b-cizz8moipp] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}

.dot-green[b-cizz8moipp] { background: #10B981; }
.dot-red[b-cizz8moipp] { background: #EF4444; }
.dot-orange[b-cizz8moipp] { background: #F59E0B; }
.dot-gray[b-cizz8moipp] { background: #9CA3AF; }

.notif-content[b-cizz8moipp] {
    flex: 1;
    min-width: 0;
}

.notif-msg[b-cizz8moipp] {
    font-size: 13px;
    line-height: 1.4;
}

.notif-time[b-cizz8moipp] {
    font-size: 11px;
    color: var(--text-tertiary, #9CA3AF);
    margin-top: 2px;
}

.notif-footer[b-cizz8moipp] {
    display: block;
    width: 100%;
    padding: 12px 16px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent, #4F46E5);
    background: none;
    border: none;
    border-top: 1px solid var(--border, #E5E7EB);
    cursor: pointer;
    transition: background var(--transition, 150ms ease);
    flex-shrink: 0;
}

.notif-footer:hover[b-cizz8moipp] {
    background: var(--accent-bg, #EFF6FF);
}

/* ═══ PLAN BADGES ═══ */
.plan-badge-free[b-cizz8moipp], .plan-badge-pro[b-cizz8moipp] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.1875rem 0.5rem;
    border-radius: 6.25rem;
}

.plan-badge-free[b-cizz8moipp] {
    background: #F1F5F9;
    color: #94A3B8;
}

.plan-badge-pro[b-cizz8moipp] {
    background: linear-gradient(135deg, #E0E7FF, #C7D2FE);
    color: #4F46E5;
    box-shadow: 0 1px 3px rgba(79, 70, 229, 0.15);
}

.plan-badge-proai[b-cizz8moipp] {
    background: linear-gradient(135deg, #4F46E5 0%, #818CF8 100%);
    color: white;
    padding: 0.125rem 0.625rem;
    border-radius: 0.75rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* ═══ MOBILE BOTTOM BAR ═══ */
.mobile-bottombar[b-cizz8moipp] {
    display: none;
}

/* ═══ ERROR UI ═══ */
#blazor-error-ui[b-cizz8moipp] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none; left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss[b-cizz8moipp] {
    cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */

/* ─── >= 768px: desktop layout ─── */
@media (min-width: 768px) {
    .sidebar[b-cizz8moipp] { display: flex; }
    .mobile-bottombar[b-cizz8moipp] { display: none !important; }
    .bottom-sheet[b-cizz8moipp] { display: none !important; }
    .sheet-overlay[b-cizz8moipp] { display: none !important; }
}

/* ─── < 768px: mobile layout ─── */
@media (max-width: 767px) {
    .sidebar[b-cizz8moipp] { display: none; }

    .content-header[b-cizz8moipp] {
        padding: 1rem 1rem 0.5rem;
    }

    .page-title[b-cizz8moipp] {
        font-size: 1.25rem;
    }

    .page-content[b-cizz8moipp] {
        padding: 1rem;
    }

    /* Show bottom bar */
    .mobile-bottombar[b-cizz8moipp] {
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 3.5rem;
        border-top: 1px solid #E2E8F0;
        background: #FFFFFF;
        flex-shrink: 0;
        padding: 0 0.25rem;
        margin-bottom: env(safe-area-inset-bottom, 0px);
        position: relative;
        z-index: 50;
    }

    .bottombar-item[b-cizz8moipp] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.125rem;
        padding: 0.375rem 0.75rem;
        border-radius: 0.5rem;
        text-decoration: none;
        color: #94A3B8;
        font-size: 0.625rem;
        font-weight: 500;
        transition: color 150ms ease;
        -webkit-tap-highlight-color: transparent;
        border: none;
        background: none;
        cursor: pointer;
    }

    .bottombar-item:hover[b-cizz8moipp],
    .bottombar-item:active[b-cizz8moipp] {
        color: #4F46E5;
        text-decoration: none;
    }

    .bottombar-item.active[b-cizz8moipp] {
        color: #4F46E5;
    }

    .bottombar-item .material-icons-round[b-cizz8moipp] { font-size: 1.375rem; }

    .bottombar-cta[b-cizz8moipp] {
        color: #4F46E5;
        font-weight: 700;
    }

    .bottombar-cta .material-icons-round[b-cizz8moipp] {
        font-size: 1.5rem;
        color: #4F46E5;
    }

    .bottombar-notif[b-cizz8moipp] { position: relative; }
}

/* ─── < 480px: compact ─── */
@media (max-width: 479px) {
    .content-header[b-cizz8moipp] {
        padding: 0.75rem 0.75rem 0.5rem;
    }

    .page-title[b-cizz8moipp] {
        font-size: 1.125rem;
    }

    .page-content[b-cizz8moipp] {
        padding: 0.75rem 0.625rem;
    }

    .bottombar-item[b-cizz8moipp] {
        padding: 0.375rem 0.5rem;
        font-size: 0.5625rem;
    }

    .sheet-nav[b-cizz8moipp]  .nav-btn {
        padding: 0.75rem 0.875rem;
        font-size: 1rem;
    }
}

/* ─── < 360px: minimal ─── */
@media (max-width: 359px) {
    .content-header[b-cizz8moipp] {
        padding: 0.5rem 0.5rem 0.375rem;
    }

    .page-title[b-cizz8moipp] {
        font-size: 1rem;
    }

    .page-content[b-cizz8moipp] {
        padding: 0.625rem 0.5rem;
    }

    .bottombar-item[b-cizz8moipp] {
        padding: 0.25rem 0.375rem;
    }

    .sheet-nav[b-cizz8moipp]  .nav-btn {
        padding: 0.625rem 0.75rem;
        font-size: 0.9375rem;
        gap: 0.625rem;
    }
}
/* /Components/Layout/NotificationBell.razor.rz.scp.css */
.notif-wrapper[b-nmfkt1qvl8] {
    position: relative;
}

.topbar-icon[b-nmfkt1qvl8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: var(--text-secondary, #6B7280);
    text-decoration: none;
    transition: all 150ms ease;
    background: none;
    border: none;
    cursor: pointer;
}
.topbar-icon:hover[b-nmfkt1qvl8] {
    background: var(--bg-hover, #F3F4F6);
    color: var(--text, #111827);
}
.topbar-icon .material-icons-round[b-nmfkt1qvl8] {
    font-size: 22px;
}

.notif-bell[b-nmfkt1qvl8] {
    position: relative;
}

.notif-badge[b-nmfkt1qvl8] {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--danger, #EF4444);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

.notif-overlay[b-nmfkt1qvl8] {
    position: fixed;
    inset: 0;
    z-index: 1099;
}

.notif-dropdown[b-nmfkt1qvl8] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-height: 400px;
    background: #fff;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.notif-header[b-nmfkt1qvl8] {
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px solid var(--border, #E5E7EB);
    flex-shrink: 0;
    color: var(--text, #111827);
}

.notif-empty[b-nmfkt1qvl8] {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-tertiary, #9CA3AF);
    font-size: 13px;
}

.notif-list[b-nmfkt1qvl8] {
    overflow-y: auto;
    flex: 1;
}

.notif-item[b-nmfkt1qvl8] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--text, #111827);
    transition: background 150ms ease;
    cursor: pointer;
    border-bottom: 1px solid #F3F4F6;
}

.notif-item:hover[b-nmfkt1qvl8] {
    background: #EFF6FF;
}

.notif-unread[b-nmfkt1qvl8] {
    background: rgba(37, 99, 235, 0.04);
}

.notif-dot[b-nmfkt1qvl8] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}

.dot-green[b-nmfkt1qvl8] { background: #10B981; }
.dot-red[b-nmfkt1qvl8] { background: #EF4444; }
.dot-orange[b-nmfkt1qvl8] { background: #F59E0B; }
.dot-blue[b-nmfkt1qvl8] { background: #2563EB; }
.dot-gray[b-nmfkt1qvl8] { background: #9CA3AF; }

.notif-pulse[b-nmfkt1qvl8] {
    animation: notif-ring-b-nmfkt1qvl8 0.6s ease-in-out 0s 2;
    background: #FEF3C7;
    color: #D97706;
}

@keyframes notif-ring-b-nmfkt1qvl8 {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-12deg); }
    40% { transform: rotate(10deg); }
    60% { transform: rotate(-6deg); }
    80% { transform: rotate(4deg); }
}

.notif-content[b-nmfkt1qvl8] {
    flex: 1;
    min-width: 0;
}

.notif-msg[b-nmfkt1qvl8] {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text, #111827);
}

.notif-time[b-nmfkt1qvl8] {
    font-size: 11px;
    color: var(--text-tertiary, #9CA3AF);
    margin-top: 2px;
}

.notif-footer[b-nmfkt1qvl8] {
    display: block;
    width: 100%;
    padding: 12px 16px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent, #4F46E5);
    background: none;
    border: none;
    border-top: 1px solid var(--border, #E5E7EB);
    cursor: pointer;
    transition: background 150ms ease;
    flex-shrink: 0;
}

.notif-footer:hover[b-nmfkt1qvl8] {
    background: #EFF6FF;
}

/* Mobile: dropdown becomes centered modal */
@media (max-width: 768px) {
    .notif-dropdown[b-nmfkt1qvl8] {
        position: fixed;
        top: 50%;
        left: 12px;
        right: 12px;
        transform: translateY(-50%);
        width: auto;
        max-height: 70vh;
        border-radius: 16px;
        box-shadow: 0 12px 48px rgba(0,0,0,0.2);
    }

    .notif-overlay[b-nmfkt1qvl8] {
        background: rgba(0,0,0,0.3);
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-57dvu6exwe],
.components-reconnect-repeated-attempt-visible[b-57dvu6exwe],
.components-reconnect-failed-visible[b-57dvu6exwe],
.components-pause-visible[b-57dvu6exwe],
.components-resume-failed-visible[b-57dvu6exwe],
.components-rejoining-animation[b-57dvu6exwe] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-57dvu6exwe],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-57dvu6exwe],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-57dvu6exwe],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-57dvu6exwe],
#components-reconnect-modal.components-reconnect-retrying[b-57dvu6exwe],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-57dvu6exwe],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-57dvu6exwe],
#components-reconnect-modal.components-reconnect-failed[b-57dvu6exwe],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-57dvu6exwe] {
    display: block;
}


#components-reconnect-modal[b-57dvu6exwe] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-57dvu6exwe 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-57dvu6exwe 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-57dvu6exwe 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-57dvu6exwe]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-57dvu6exwe 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-57dvu6exwe {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-57dvu6exwe {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-57dvu6exwe {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-57dvu6exwe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-57dvu6exwe] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-57dvu6exwe] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-57dvu6exwe] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-57dvu6exwe] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-57dvu6exwe] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-57dvu6exwe] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-57dvu6exwe 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-57dvu6exwe] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-57dvu6exwe {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/ToastContainer.razor.rz.scp.css */
.toast-container[b-7yf925r5op] {
    position: fixed;
    bottom: 4.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 90%;
    max-width: 28rem;
    pointer-events: none;
}

.toast[b-7yf925r5op] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    pointer-events: auto;
    animation: toastIn-b-7yf925r5op 250ms ease-out forwards;
    line-height: 1.4;
    backdrop-filter: blur(8px);
}

.toast-out[b-7yf925r5op] {
    animation: toastOut-b-7yf925r5op 200ms ease-in forwards;
}

@keyframes toastIn-b-7yf925r5op {
    from { opacity: 0; transform: translateY(0.75rem) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut-b-7yf925r5op {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(0.5rem) scale(0.96); }
}

.toast-icon[b-7yf925r5op] {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.toast-body[b-7yf925r5op] {
    flex: 1;
    min-width: 0;
}

.toast-msg[b-7yf925r5op] {
    display: block;
}

.toast-list[b-7yf925r5op] {
    margin: 0;
    padding-left: 1.125rem;
    list-style: disc;
}

.toast-list li[b-7yf925r5op] {
    padding: 0.125rem 0;
    font-size: 0.8125rem;
}

.toast-close[b-7yf925r5op] {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 150ms;
    margin-top: -0.125rem;
}

.toast-close:hover[b-7yf925r5op] { opacity: 1; }
.toast-close .material-icons-round[b-7yf925r5op] { font-size: 1rem; }

/* ═══ Types ═══ */
.toast-error[b-7yf925r5op] {
    background: rgba(28, 16, 23, 0.95);
    color: #FCA5A5;
    border: 1px solid rgba(239, 68, 68, 0.25);
}
.toast-error .toast-icon[b-7yf925r5op] { color: #EF4444; }
.toast-error .toast-close[b-7yf925r5op] { color: #FCA5A5; }

.toast-success[b-7yf925r5op] {
    background: rgba(12, 26, 20, 0.95);
    color: #6EE7B7;
    border: 1px solid rgba(16, 185, 129, 0.25);
}
.toast-success .toast-icon[b-7yf925r5op] { color: #10B981; }
.toast-success .toast-close[b-7yf925r5op] { color: #6EE7B7; }

.toast-warning[b-7yf925r5op] {
    background: rgba(26, 21, 8, 0.95);
    color: #FCD34D;
    border: 1px solid rgba(245, 158, 11, 0.25);
}
.toast-warning .toast-icon[b-7yf925r5op] { color: #F59E0B; }
.toast-warning .toast-close[b-7yf925r5op] { color: #FCD34D; }

.toast-info[b-7yf925r5op] {
    background: rgba(12, 18, 36, 0.95);
    color: #C4B5FD;
    border: 1px solid rgba(79, 70, 229, 0.25);
}
.toast-info .toast-icon[b-7yf925r5op] { color: #818CF8; }
.toast-info .toast-close[b-7yf925r5op] { color: #C4B5FD; }

@media (max-width: 768px) {
    .toast-container[b-7yf925r5op] {
        bottom: 4rem;
        width: 94%;
    }

    .toast[b-7yf925r5op] {
        font-size: 0.8125rem;
        padding: 0.625rem 0.875rem;
    }
}
/* /Components/Pages/AiClientImportPage.razor.rz.scp.css */
/* ═══ PAGE ═══ */
.ai-import-page[b-wwgbc0ffuq] {
    max-width: 52rem;
    margin: 0 auto;
}

.ai-import-header[b-wwgbc0ffuq] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.back-link[b-wwgbc0ffuq] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    text-decoration: none;
    flex-shrink: 0;
}
.back-link:hover[b-wwgbc0ffuq] { color: var(--accent); }
.back-link .material-icons-round[b-wwgbc0ffuq] { font-size: 1rem; }

.ai-import-title[b-wwgbc0ffuq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--text);
    margin: 0;
}
.ai-import-title .material-icons-round[b-wwgbc0ffuq] { color: var(--accent); font-size: 1.25rem; }

/* ═══ LIMIT BAR ═══ */
.ai-limit-bar[b-wwgbc0ffuq] {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}
.ai-limit-info[b-wwgbc0ffuq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}
.ai-limit-plan[b-wwgbc0ffuq] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
    background: var(--primary-50);
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
}
.ai-limit-progress[b-wwgbc0ffuq] {
    height: 0.375rem;
    background: var(--border-light);
    border-radius: 1rem;
    overflow: hidden;
}
.ai-limit-fill[b-wwgbc0ffuq] {
    height: 100%;
    background: var(--accent);
    border-radius: 1rem;
    transition: width 300ms ease;
}

/* ═══ LIMIT REACHED ═══ */
.ai-limit-reached[b-wwgbc0ffuq] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin-bottom: 1rem;
    color: #991B1B;
}
.ai-limit-reached .material-icons-round[b-wwgbc0ffuq] { font-size: 1.5rem; flex-shrink: 0; margin-top: 0.125rem; }
.ai-limit-reached p[b-wwgbc0ffuq] { margin: 0.25rem 0 0; font-size: 0.8125rem; color: #7F1D1D; }

/* ═══ INPUT SECTION ═══ */
.ai-input-section[b-wwgbc0ffuq] {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 1.25rem;
}
.ai-instructions[b-wwgbc0ffuq] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    background: var(--primary-50);
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
}
.ai-instructions .material-icons-round[b-wwgbc0ffuq] { font-size: 1.125rem; color: var(--accent); flex-shrink: 0; margin-top: 0.0625rem; }

.ai-input-group[b-wwgbc0ffuq] { margin-bottom: 1rem; }
.ai-label[b-wwgbc0ffuq] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.375rem;
}
.ai-label-opt[b-wwgbc0ffuq] { font-weight: 400; text-transform: none; color: var(--text-tertiary); }
.ai-textarea[b-wwgbc0ffuq] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text);
    background: #fff;
    resize: vertical;
    outline: none;
    transition: border-color 150ms ease;
}
.ai-textarea:focus[b-wwgbc0ffuq] { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(79,70,229,0.1); }
.ai-textarea-sm[b-wwgbc0ffuq] { font-family: inherit; }
.ai-char-count[b-wwgbc0ffuq] {
    text-align: right;
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    margin-top: 0.25rem;
}

/* ═══ MODEL TOGGLE ═══ */
.ai-model-row[b-wwgbc0ffuq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.ai-model-toggle[b-wwgbc0ffuq] {
    display: flex;
    gap: 0.375rem;
    background: var(--primary-50);
    padding: 0.1875rem;
    border-radius: var(--radius-sm);
}
.ai-model-btn[b-wwgbc0ffuq] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    border: none;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: none;
    cursor: pointer;
    transition: all 150ms ease;
}
.ai-model-btn .material-icons-round[b-wwgbc0ffuq] { font-size: 0.875rem; }
.ai-model-active[b-wwgbc0ffuq] {
    background: #fff;
    color: var(--accent);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    font-weight: 600;
}

.ai-import-btn[b-wwgbc0ffuq] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    justify-content: center;
    padding: 0.625rem;
    font-size: 0.875rem;
}

/* ═══ EXAMPLES ═══ */
.ai-examples[b-wwgbc0ffuq] {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}
.ai-examples-title[b-wwgbc0ffuq] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
}
.ai-examples-btns[b-wwgbc0ffuq] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.ai-example-btn[b-wwgbc0ffuq] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 150ms ease;
}
.ai-example-btn:hover[b-wwgbc0ffuq] { border-color: var(--accent); color: var(--accent); }
.ai-example-btn .material-icons-round[b-wwgbc0ffuq] { font-size: 0.875rem; }

/* ═══ WARNING ═══ */
.ai-warning[b-wwgbc0ffuq] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: var(--radius-sm);
    padding: 0.625rem 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    color: #92400E;
}
.ai-warning .material-icons-round[b-wwgbc0ffuq] { font-size: 1.125rem; flex-shrink: 0; }

/* ═══ RESULTS HEADER ═══ */
.ai-results-header[b-wwgbc0ffuq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    color: var(--text);
}

/* ═══ REFINE ═══ */
.ai-refine[b-wwgbc0ffuq] {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    margin-bottom: 1rem;
}
.ai-refine-row[b-wwgbc0ffuq] {
    display: flex;
    gap: 0.5rem;
}
.ai-refine-input[b-wwgbc0ffuq] {
    flex: 1;
    padding: 0.4375rem 0.625rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    color: var(--text);
    outline: none;
}
.ai-refine-input:focus[b-wwgbc0ffuq] { border-color: var(--accent); }

/* ═══ CLIENT CARDS ═══ */
.ai-client-list[b-wwgbc0ffuq] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 4.5rem;
}
.ai-client-card[b-wwgbc0ffuq] {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 1rem;
    transition: opacity 200ms ease;
}
.ai-client-deselected[b-wwgbc0ffuq] { opacity: 0.45; }
.ai-client-card-header[b-wwgbc0ffuq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.ai-checkbox-label[b-wwgbc0ffuq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}
.ai-checkbox-label input[type="checkbox"][b-wwgbc0ffuq] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--accent);
}
.ai-client-num[b-wwgbc0ffuq] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-tertiary);
}
.ai-client-fields[b-wwgbc0ffuq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.75rem;
}
.ai-field[b-wwgbc0ffuq] { display: flex; flex-direction: column; gap: 0.125rem; }
.ai-field-full[b-wwgbc0ffuq] { grid-column: 1 / -1; }
.ai-field label[b-wwgbc0ffuq] {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ai-field input[b-wwgbc0ffuq] {
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    color: var(--text);
    outline: none;
    width: 100%;
}
.ai-field input:focus[b-wwgbc0ffuq] { border-color: var(--accent); }

/* ═══ CONTACT PERSONS ═══ */
.ai-cp-section[b-wwgbc0ffuq] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border-light);
}
.ai-cp-title[b-wwgbc0ffuq] {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
}
.ai-cp-row[b-wwgbc0ffuq] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}
.ai-cp-fields[b-wwgbc0ffuq] {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.375rem 0.5rem;
}
.ai-cp-row .btn-icon-sm[b-wwgbc0ffuq] { margin-top: 1rem; }

.ai-add-cp-btn[b-wwgbc0ffuq] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0;
    border: none;
    background: none;
    font-size: 0.75rem;
    color: var(--accent);
    cursor: pointer;
    margin-top: 0.5rem;
}
.ai-add-cp-btn:hover[b-wwgbc0ffuq] { text-decoration: underline; }
.ai-add-cp-btn .material-icons-round[b-wwgbc0ffuq] { font-size: 0.875rem; }

/* ═══ SAVE BAR ═══ */
.ai-save-bar[b-wwgbc0ffuq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    position: sticky;
    bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
    z-index: 10;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}
.ai-save-actions[b-wwgbc0ffuq] {
    display: flex;
    gap: 0.5rem;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
    .ai-import-page[b-wwgbc0ffuq] { padding: 0 0.25rem; }
    .ai-client-fields[b-wwgbc0ffuq] { grid-template-columns: 1fr; }
    .ai-cp-fields[b-wwgbc0ffuq] { grid-template-columns: 1fr; }
    .ai-refine-row[b-wwgbc0ffuq] { flex-direction: column; }
    .ai-save-bar[b-wwgbc0ffuq] { flex-direction: column; gap: 0.5rem; text-align: center; }
    .ai-model-row[b-wwgbc0ffuq] { flex-direction: column; align-items: flex-start; }
    .ai-results-header[b-wwgbc0ffuq] { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
}

@media (max-width: 480px) {
    .ai-import-header[b-wwgbc0ffuq] { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .ai-input-section[b-wwgbc0ffuq] { padding: 0.875rem; }
    .ai-client-card[b-wwgbc0ffuq] { padding: 0.75rem; }
}
/* /Components/Pages/BlogArticlePage.razor.rz.scp.css */
/* ═══ BLOG ARTICLE PAGE ═══ */
.blog-page[b-t8k3bup7nm] { font-family: 'Inter', system-ui, sans-serif; color: #111827; background: #fafafa; min-height: 100vh; }

/* NAV */
.landing-nav[b-t8k3bup7nm] { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; max-width: 1100px; margin: 0 auto; }
.landing-logo[b-t8k3bup7nm] { font-size: 20px; font-weight: 700; text-decoration: none; color: #111827; }
.landing-logo .mark[b-t8k3bup7nm] { color: #2563EB; }
.landing-nav-links[b-t8k3bup7nm] { display: flex; align-items: center; gap: 16px; }
.landing-nav-links a[b-t8k3bup7nm] { text-decoration: none; color: #4B5563; font-size: 14px; font-weight: 500; }
.landing-nav-links a:hover[b-t8k3bup7nm] { color: #2563EB; }
.btn[b-t8k3bup7nm] { padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; text-decoration: none; border: 1px solid #D1D5DB; cursor: pointer; display: inline-block; }
.btn-primary[b-t8k3bup7nm] { background: #2563EB; color: #fff !important; border-color: #2563EB; }
.btn-sm[b-t8k3bup7nm] { padding: 6px 14px; font-size: 13px; }

/* ARTICLE WRAP */
.blog-article-wrap[b-t8k3bup7nm] { max-width: 720px; margin: 0 auto; padding: 24px 24px 64px; }

.blog-back[b-t8k3bup7nm] { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: #6B7280; text-decoration: none; margin-bottom: 24px; }
.blog-back:hover[b-t8k3bup7nm] { color: #2563EB; }

/* ARTICLE */
.blog-article[b-t8k3bup7nm] { background: #fff; border-radius: 12px; border: 1px solid #E5E7EB; overflow: hidden; }
.blog-article-meta[b-t8k3bup7nm] { display: flex; align-items: center; gap: 12px; padding: 24px 32px 0; font-size: 13px; color: #9CA3AF; }
.blog-card-cat[b-t8k3bup7nm] { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #2563EB; }
.blog-article h1[b-t8k3bup7nm] { font-size: 28px; font-weight: 700; line-height: 1.3; margin: 12px 32px 20px; }
.blog-article-hero[b-t8k3bup7nm] { max-height: 400px; overflow: hidden; }
.blog-article-hero img[b-t8k3bup7nm] { width: 100%; height: 100%; object-fit: cover; }

/* CONTENT */
.blog-article-content[b-t8k3bup7nm] { padding: 32px; line-height: 1.75; font-size: 16px; color: #374151; }
.blog-article-content h2[b-t8k3bup7nm] { font-size: 20px; font-weight: 600; margin: 32px 0 12px; color: #111827; }
.blog-article-content p[b-t8k3bup7nm] { margin: 0 0 16px; }
.blog-article-content ul[b-t8k3bup7nm], .blog-article-content ol[b-t8k3bup7nm] { margin: 0 0 16px; padding-left: 24px; }
.blog-article-content li[b-t8k3bup7nm] { margin-bottom: 8px; }
.blog-article-content strong[b-t8k3bup7nm] { color: #111827; }

/* TAGS */
.blog-article-tags[b-t8k3bup7nm] { padding: 0 32px 24px; display: flex; gap: 8px; flex-wrap: wrap; }
.blog-tag[b-t8k3bup7nm] { font-size: 12px; color: #6B7280; background: #F3F4F6; padding: 4px 10px; border-radius: 20px; }

/* CTA */
.blog-cta[b-t8k3bup7nm] { background: linear-gradient(135deg, #EEF2FF, #DBEAFE); border-radius: 12px; padding: 32px; text-align: center; margin: 32px 0; }
.blog-cta h3[b-t8k3bup7nm] { font-size: 20px; font-weight: 600; margin: 0 0 8px; }
.blog-cta p[b-t8k3bup7nm] { color: #4B5563; margin: 0 0 16px; font-size: 15px; }

/* RELATED */
.blog-related[b-t8k3bup7nm] { margin-top: 40px; }
.blog-related h3[b-t8k3bup7nm] { font-size: 18px; font-weight: 600; margin: 0 0 16px; }
.blog-related-grid[b-t8k3bup7nm] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.blog-related-card[b-t8k3bup7nm] { background: #fff; border: 1px solid #E5E7EB; border-radius: 10px; padding: 16px; text-decoration: none; color: inherit; transition: box-shadow 0.2s; }
.blog-related-card:hover[b-t8k3bup7nm] { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.blog-related-card h4[b-t8k3bup7nm] { font-size: 14px; font-weight: 600; margin: 8px 0 0; line-height: 1.4; }

/* FOOTER */
.landing-footer[b-t8k3bup7nm] { background: #111827; color: #9CA3AF; padding: 32px 24px; }
.footer-content[b-t8k3bup7nm] { max-width: 1100px; margin: 0 auto; text-align: center; }
.footer-brand[b-t8k3bup7nm] { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.footer-brand .mark[b-t8k3bup7nm] { color: #60A5FA; }
.footer-links[b-t8k3bup7nm] { display: flex; justify-content: center; gap: 20px; margin-bottom: 16px; flex-wrap: wrap; }
.footer-links a[b-t8k3bup7nm] { color: #9CA3AF; text-decoration: none; font-size: 13px; }
.footer-links a:hover[b-t8k3bup7nm] { color: #fff; }
.footer-copy[b-t8k3bup7nm] { font-size: 12px; }

@media (max-width: 640px) {
    .blog-article h1[b-t8k3bup7nm] { font-size: 22px; margin: 12px 20px 16px; }
    .blog-article-meta[b-t8k3bup7nm] { padding: 20px 20px 0; }
    .blog-article-content[b-t8k3bup7nm] { padding: 20px; font-size: 15px; }
    .blog-article-tags[b-t8k3bup7nm] { padding: 0 20px 20px; }
    .blog-related-grid[b-t8k3bup7nm] { grid-template-columns: 1fr; }
    .landing-nav[b-t8k3bup7nm] { padding: 12px 16px; }
}
/* /Components/Pages/BlogPage.razor.rz.scp.css */
/* ═══ BLOG PAGE ═══ */
.blog-page[b-8pl2f7v0h8] { font-family: 'Inter', system-ui, sans-serif; color: #111827; background: #fafafa; min-height: 100vh; }

/* NAV */
.landing-nav[b-8pl2f7v0h8] { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; max-width: 1100px; margin: 0 auto; }
.landing-logo[b-8pl2f7v0h8] { font-size: 20px; font-weight: 700; text-decoration: none; color: #111827; }
.landing-logo .mark[b-8pl2f7v0h8] { color: #2563EB; }
.landing-nav-links[b-8pl2f7v0h8] { display: flex; align-items: center; gap: 16px; }
.landing-nav-links a[b-8pl2f7v0h8] { text-decoration: none; color: #4B5563; font-size: 14px; font-weight: 500; }
.landing-nav-links a.active[b-8pl2f7v0h8] { color: #2563EB; }
.landing-nav-links a:hover[b-8pl2f7v0h8] { color: #2563EB; }
.btn[b-8pl2f7v0h8] { padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; text-decoration: none; border: 1px solid #D1D5DB; cursor: pointer; }
.btn-primary[b-8pl2f7v0h8] { background: #2563EB; color: #fff !important; border-color: #2563EB; }
.btn-sm[b-8pl2f7v0h8] { padding: 6px 14px; font-size: 13px; }

/* HEADER */
.blog-header[b-8pl2f7v0h8] { text-align: center; padding: 48px 24px 32px; max-width: 700px; margin: 0 auto; }
.blog-header h1[b-8pl2f7v0h8] { font-size: 32px; font-weight: 700; margin: 0 0 8px; }
.blog-header p[b-8pl2f7v0h8] { color: #6B7280; font-size: 16px; margin: 0; }

/* GRID */
.blog-grid[b-8pl2f7v0h8] { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; padding: 0 24px 64px; }

/* CARD */
.blog-card[b-8pl2f7v0h8] { background: #fff; border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; border: 1px solid #E5E7EB; transition: box-shadow 0.2s, transform 0.2s; display: flex; flex-direction: column; }
.blog-card:hover[b-8pl2f7v0h8] { box-shadow: 0 8px 24px rgba(0,0,0,0.08); transform: translateY(-2px); }
.blog-card-img[b-8pl2f7v0h8] { height: 200px; overflow: hidden; background: linear-gradient(135deg, #EEF2FF, #DBEAFE); display: flex; align-items: center; justify-content: center; }
.blog-card-img img[b-8pl2f7v0h8] { width: 100%; height: 100%; object-fit: cover; }
.blog-card-body[b-8pl2f7v0h8] { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.blog-card-cat[b-8pl2f7v0h8] { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #2563EB; margin-bottom: 8px; }
.blog-card-body h2[b-8pl2f7v0h8] { font-size: 17px; font-weight: 600; margin: 0 0 8px; line-height: 1.4; }
.blog-card-body p[b-8pl2f7v0h8] { font-size: 14px; color: #6B7280; line-height: 1.5; margin: 0 0 12px; flex: 1; }
.blog-card-meta[b-8pl2f7v0h8] { font-size: 12px; color: #9CA3AF; }

/* FOOTER */
.landing-footer[b-8pl2f7v0h8] { background: #111827; color: #9CA3AF; padding: 32px 24px; margin-top: 0; }
.footer-content[b-8pl2f7v0h8] { max-width: 1100px; margin: 0 auto; text-align: center; }
.footer-brand[b-8pl2f7v0h8] { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.footer-brand .mark[b-8pl2f7v0h8] { color: #60A5FA; }
.footer-links[b-8pl2f7v0h8] { display: flex; justify-content: center; gap: 20px; margin-bottom: 16px; flex-wrap: wrap; }
.footer-links a[b-8pl2f7v0h8] { color: #9CA3AF; text-decoration: none; font-size: 13px; }
.footer-links a:hover[b-8pl2f7v0h8] { color: #fff; }
.footer-copy[b-8pl2f7v0h8] { font-size: 12px; }

@media (max-width: 640px) {
    .blog-header h1[b-8pl2f7v0h8] { font-size: 24px; }
    .blog-grid[b-8pl2f7v0h8] { grid-template-columns: 1fr; padding: 0 16px 48px; }
    .landing-nav[b-8pl2f7v0h8] { padding: 12px 16px; }
}
/* /Components/Pages/CatalogPage.razor.rz.scp.css */
/* ═══ TOOLBAR ═══ */
.catalog-toolbar[b-ftq2l7o75z] { display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.75rem; }
.catalog-toolbar .search-bar[b-ftq2l7o75z] { flex: 1; margin-bottom: 0; }

/* ═══ COMPACT FORM ═══ */
.svc-form[b-ftq2l7o75z] { background: #fff; border: 2px solid var(--accent); border-radius: var(--radius-sm); margin-bottom: 1rem; overflow: hidden; }
.svc-form-header[b-ftq2l7o75z] { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-light); background: var(--primary-50); }
.svc-form-title[b-ftq2l7o75z] { font-size: 0.875rem; font-weight: 700; font-family: var(--font-heading); }
.btn-icon-action[b-ftq2l7o75z] {
    display: flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: 0.5rem;
    border: 1px solid var(--border); background: #fff;
    color: var(--text-secondary); cursor: pointer;
    transition: all 150ms ease;
}
.btn-icon-action:hover[b-ftq2l7o75z] { border-color: var(--primary-300); color: var(--accent); background: var(--primary-50); }
.btn-icon-action .material-icons-round[b-ftq2l7o75z] { font-size: 1.125rem; }
.svc-form-body[b-ftq2l7o75z] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.625rem 0.75rem; padding: 0.875rem 1rem; }
.sf-full[b-ftq2l7o75z] { grid-column: 1 / -1; }
.sf-group[b-ftq2l7o75z] { display: flex; flex-direction: column; gap: 0.1875rem; }
.sf-label[b-ftq2l7o75z] { font-size: 0.6875rem; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.03em; }
.sf-input[b-ftq2l7o75z], [b-ftq2l7o75z] .sf-input { width: 100%; padding: 0.4375rem 0.625rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.8125rem; color: var(--text); background: #fff; outline: none; transition: border-color 150ms; font-family: inherit; box-sizing: border-box; }
.sf-input:focus[b-ftq2l7o75z], [b-ftq2l7o75z] .sf-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(79,70,229,0.1); }
.sf-disabled[b-ftq2l7o75z] { background: var(--primary-50); color: var(--text-secondary); }
.svc-form-footer[b-ftq2l7o75z] { display: flex; gap: 0.5rem; padding: 0.625rem 1rem; border-top: 1px solid var(--border-light); background: var(--primary-50); align-items: center; flex-wrap: wrap; }
.btn-delete[b-ftq2l7o75z] { color: var(--danger); border-color: var(--danger); }
.btn-delete:hover[b-ftq2l7o75z] { background: var(--danger-bg); }
.delete-confirm[b-ftq2l7o75z] { display: inline-flex; align-items: center; gap: 0.375rem; margin-left: auto; }
.delete-confirm-text[b-ftq2l7o75z] { font-size: 0.8125rem; font-weight: 600; color: var(--danger); }

/* ═══ OPTIONS SECTION (inside form) ═══ */
.options-section[b-ftq2l7o75z] { border-top: 1px solid var(--border-light); padding: 0.875rem 1rem; }
.section-title[b-ftq2l7o75z] { font-size: 0.6875rem; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; }
.options-desc[b-ftq2l7o75z] { font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: 0.75rem; }
.option-group-card[b-ftq2l7o75z] { border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 0.625rem 0.75rem; margin-bottom: 0.5rem; }
.option-group-header[b-ftq2l7o75z] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.375rem; }
.option-group-name[b-ftq2l7o75z] { font-weight: 600; font-size: 0.875rem; }
.option-group-actions[b-ftq2l7o75z] { display: flex; gap: 0.125rem; }
.option-chips[b-ftq2l7o75z] { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.option-chip[b-ftq2l7o75z] { padding: 0.3125rem 0.75rem; border-radius: 1.25rem; font-size: 0.75rem; font-weight: 500; border: 1px solid var(--border); background: var(--bg); }
.option-chip.selected[b-ftq2l7o75z] { background: var(--primary-900); color: #fff; border-color: var(--primary-900); }
.option-form[b-ftq2l7o75z] { margin-top: 0.5rem; border: 2px dashed var(--accent); border-radius: var(--radius-sm); padding: 0.75rem; background: var(--primary-50); }
.option-form-title[b-ftq2l7o75z] { font-weight: 600; margin-bottom: 0.5rem; font-size: 0.8125rem; font-family: var(--font-heading); }
.variant-header[b-ftq2l7o75z] { display: flex; gap: 0.375rem; align-items: center; margin-bottom: 0.375rem; font-size: 0.6875rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; }
.variant-header-default[b-ftq2l7o75z] { width: 4.5rem; text-align: center; }
.variant-row[b-ftq2l7o75z] { display: flex; gap: 0.375rem; align-items: center; margin-bottom: 0.25rem; }
.variant-default[b-ftq2l7o75z] { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; cursor: pointer; width: 4.5rem; justify-content: center; }
.variant-default input[b-ftq2l7o75z] { accent-color: var(--accent); width: 1rem; height: 1rem; cursor: pointer; }
.form-actions[b-ftq2l7o75z] { display: flex; gap: 0.5rem; margin-top: 0.5rem; }

/* ═══ INHERITED OPTIONS ═══ */
.inherited-options-label[b-ftq2l7o75z] { font-size: 0.6875rem; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 0.75rem; margin-bottom: 0.375rem; }
.option-inherited[b-ftq2l7o75z] { background: var(--primary-50); border-style: dashed; }
.scope-badge-sm[b-ftq2l7o75z] { font-size: 0.5625rem; font-weight: 600; padding: 0.125rem 0.375rem; border-radius: 0.625rem; background: var(--primary-100); color: var(--text-secondary); }

/* ═══ ATTACH ═══ */
.attach-section[b-ftq2l7o75z] { margin-top: 0.75rem; }
.attach-label[b-ftq2l7o75z] { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.375rem; }
.attach-variants[b-ftq2l7o75z] { font-size: 0.75rem; color: var(--text-tertiary); }
.add-variant-spacer[b-ftq2l7o75z] { height: 0.5rem; }
.scope-checkboxes[b-ftq2l7o75z] { display: flex; flex-direction: column; gap: 0.25rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; max-height: 12rem; overflow-y: auto; }
.scope-check[b-ftq2l7o75z] { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; }
.scope-check:hover[b-ftq2l7o75z] { background: var(--primary-50); }
.scope-check input[b-ftq2l7o75z] { accent-color: var(--accent); width: 1rem; height: 1rem; flex-shrink: 0; }

/* ═══ SORT SELECT ═══ */
.sort-select[b-ftq2l7o75z] { padding: 0.4375rem 0.625rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.8125rem; color: var(--text); background: #fff; cursor: pointer; outline: none; flex-shrink: 0; }
.sort-select:focus[b-ftq2l7o75z] { border-color: var(--accent); }
.results-count[b-ftq2l7o75z] { font-size: 0.75rem; color: var(--text-tertiary); margin-bottom: 0.5rem; }

/* ═══ CATEGORY PILLS ═══ */
.cat-pills[b-ftq2l7o75z] { display: flex; gap: 0.375rem; margin-bottom: 0.75rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cat-pills[b-ftq2l7o75z]::-webkit-scrollbar { display: none; }
.pill[b-ftq2l7o75z] { padding: 0.375rem 0.875rem; border-radius: 6.25rem; border: 1px solid var(--border); background: #fff; font-size: 0.8125rem; font-weight: 500; cursor: pointer; color: var(--text-secondary); transition: all 150ms; white-space: nowrap; flex-shrink: 0; }
.pill:hover[b-ftq2l7o75z] { border-color: var(--primary-300); color: var(--text); }
.pill.active[b-ftq2l7o75z] { background: var(--primary-900); color: #fff; border-color: var(--primary-900); }
.pill-icon[b-ftq2l7o75z] { padding: 0.375rem 0.625rem; }

/* ═══ CATEGORY MANAGER ═══ */
.category-manager[b-ftq2l7o75z] { margin-bottom: 1rem; border-color: var(--accent); border-width: 2px; }
.category-row[b-ftq2l7o75z] { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border-light); }
.category-row:last-child[b-ftq2l7o75z] { border-bottom: none; }
.category-name[b-ftq2l7o75z] { font-weight: 500; flex: 1; font-size: 0.875rem; }
.category-count[b-ftq2l7o75z] { font-size: 0.75rem; color: var(--text-tertiary); }
.category-rename-input[b-ftq2l7o75z] { flex: 1; padding: 0.375rem 0.625rem; font-size: 0.8125rem; }

/* ═══ SERVICE TABLE (desktop) — base styles in .data-table-wrap (app.css) ═══ */
.svc-row[b-ftq2l7o75z] { cursor: pointer; }

/* ═══ MARGIN BADGE (compact) ═══ */
.margin-badge[b-ftq2l7o75z] { display: inline-flex; padding: 0.25rem 0.625rem; border-radius: 1.25rem; font-size: 0.75rem; font-weight: 600; }
.margin-badge-sm[b-ftq2l7o75z] { display: inline-flex; padding: 0.125rem 0.5rem; border-radius: 1rem; font-size: 0.6875rem; font-weight: 600; }
.margin-badge.good[b-ftq2l7o75z], .margin-badge-sm.good[b-ftq2l7o75z] { background: var(--success-bg); color: var(--success); }
.margin-badge.ok[b-ftq2l7o75z], .margin-badge-sm.ok[b-ftq2l7o75z] { background: var(--warning-bg); color: var(--warning); }
.margin-badge.bad[b-ftq2l7o75z], .margin-badge-sm.bad[b-ftq2l7o75z] { background: var(--danger-bg); color: var(--danger); }

/* ═══ MOBILE SERVICE LIST ═══ */
.svc-mobile[b-ftq2l7o75z] { display: none; background: #fff; border-radius: var(--radius-sm); border: 1px solid var(--border-light); padding: 0 0.875rem; }
.sm-row[b-ftq2l7o75z] { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border-light); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sm-row:last-child[b-ftq2l7o75z] { border-bottom: none; }
.sm-row:active[b-ftq2l7o75z] { background: var(--primary-50); margin: 0 -0.875rem; padding-left: 0.875rem; padding-right: 0.875rem; }
.sm-left[b-ftq2l7o75z] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.sm-name[b-ftq2l7o75z] { font-size: 0.9375rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-meta[b-ftq2l7o75z] { font-size: 0.75rem; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 0.25rem; }
.sm-right[b-ftq2l7o75z] { flex-shrink: 0; }
.sm-price[b-ftq2l7o75z] { font-size: 0.9375rem; font-weight: 700; color: var(--text); white-space: nowrap; }

/* ═══ LOAD MORE ═══ */
.load-more[b-ftq2l7o75z] { text-align: center; margin-top: 1rem; }

/* ═══ SCOPE CHANGE MODAL ═══ */
.scope-modal-overlay[b-ftq2l7o75z] { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; }
.scope-modal[b-ftq2l7o75z] { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; max-width: 28rem; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
.scope-modal-icon[b-ftq2l7o75z] { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; background: var(--warning-bg); color: var(--warning); display: flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; }
.scope-modal-icon .material-icons-round[b-ftq2l7o75z] { font-size: 1.25rem; }
.scope-modal-title[b-ftq2l7o75z] { font-size: 1rem; font-weight: 700; font-family: var(--font-heading); margin: 0 0 0.375rem; }
.scope-modal-desc[b-ftq2l7o75z] { font-size: 0.8125rem; color: var(--text-secondary); margin: 0 0 0.75rem; }
.scope-changes[b-ftq2l7o75z] { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.scope-change-row[b-ftq2l7o75z] { display: flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.75rem; background: var(--bg); border: 1px solid var(--border-light); border-radius: var(--radius-sm); font-size: 0.75rem; flex-wrap: wrap; }
.scope-change-name[b-ftq2l7o75z] { font-weight: 600; margin-right: auto; width: 100%; margin-bottom: 0.25rem; }
.scope-change-from[b-ftq2l7o75z] { padding: 0.125rem 0.5rem; border-radius: 1rem; background: var(--danger-bg); color: var(--danger); font-size: 0.6875rem; font-weight: 600; }
.scope-change-arrow[b-ftq2l7o75z] { font-size: 0.875rem; color: var(--text-tertiary); }
.scope-change-to[b-ftq2l7o75z] { padding: 0.125rem 0.5rem; border-radius: 1rem; background: var(--success-bg); color: var(--success); font-size: 0.6875rem; font-weight: 600; }
.scope-modal-actions[b-ftq2l7o75z] { display: flex; gap: 0.5rem; }

/* ═══ CSV IMPORT (keep existing modal styles) ═══ */
.import-overlay[b-ftq2l7o75z] { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1.5rem; overflow-y: auto; }
.import-card[b-ftq2l7o75z] { position: relative; max-width: 48.75rem; width: 100%; max-height: calc(100vh - 3rem); overflow-y: auto; margin: auto; }
.import-close[b-ftq2l7o75z] { position: absolute; top: 1rem; right: 1rem; border: none; background: none; cursor: pointer; color: var(--text-tertiary); padding: 0.25rem; border-radius: 0.25rem; z-index: 1; }
.import-close:hover[b-ftq2l7o75z] { color: var(--text); background: var(--primary-50); }
.import-close .material-icons-round[b-ftq2l7o75z] { font-size: 1.375rem; }
.import-plan-badge[b-ftq2l7o75z] { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); font-size: 0.8125rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.import-plan-badge .material-icons-round[b-ftq2l7o75z] { font-size: 1rem; flex-shrink: 0; }
.import-plan-badge a[b-ftq2l7o75z] { font-weight: 600; margin-left: 0.25rem; }
.import-plan-free[b-ftq2l7o75z] { background: var(--warning-bg); border: 1px solid var(--warning); color: var(--warning); }
.import-plan-free a[b-ftq2l7o75z] { color: var(--accent); }
.import-plan-pro[b-ftq2l7o75z] { background: var(--success-bg); border: 1px solid var(--success); color: var(--success); }
.import-intro[b-ftq2l7o75z] { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 0.75rem; }
.import-intro p[b-ftq2l7o75z] { margin: 0 0 0.5rem; }
.import-actions-row[b-ftq2l7o75z] { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.import-dropzone[b-ftq2l7o75z] { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.375rem; padding: 1.5rem 1rem; border: 2px dashed var(--border); border-radius: var(--radius-sm); background: var(--bg); cursor: pointer; transition: all 150ms; text-align: center; margin-bottom: 0.75rem; }
.import-dropzone:hover[b-ftq2l7o75z], .import-dropzone:focus-within[b-ftq2l7o75z] { border-color: var(--accent); background: var(--accent-bg); }
.import-dropzone-icon[b-ftq2l7o75z] { font-size: 2rem; color: var(--text-tertiary); }
.import-dropzone:hover .import-dropzone-icon[b-ftq2l7o75z] { color: var(--accent); }
.import-dropzone-text[b-ftq2l7o75z] { font-size: 0.8125rem; color: var(--text-secondary); }
.import-dropzone-text strong[b-ftq2l7o75z] { color: var(--accent); }
.import-dropzone-hint[b-ftq2l7o75z] { font-size: 0.6875rem; color: var(--text-tertiary); }
.import-dropzone-pro[b-ftq2l7o75z] { color: var(--accent); font-weight: 600; }
.import-error-msg[b-ftq2l7o75z] { display: flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.75rem; margin-bottom: 0.75rem; border-radius: var(--radius-sm); background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger); font-size: 0.8125rem; }
.import-error-msg .material-icons-round[b-ftq2l7o75z] { font-size: 1rem; flex-shrink: 0; }
.import-dropzone[b-ftq2l7o75z]  input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.import-errors[b-ftq2l7o75z] { background: var(--danger-bg); border: 1px solid var(--danger); border-radius: var(--radius-sm); padding: 0.75rem; margin-bottom: 0.75rem; }
.import-errors-title[b-ftq2l7o75z] { display: flex; align-items: center; gap: 0.375rem; font-weight: 600; font-size: 0.8125rem; color: var(--danger); margin-bottom: 0.375rem; }
.import-errors-title .material-icons-round[b-ftq2l7o75z] { font-size: 1rem; }
.import-error-general[b-ftq2l7o75z] { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--danger); padding: 0.25rem 0; }
.import-error-general .material-icons-round[b-ftq2l7o75z] { font-size: 0.875rem; flex-shrink: 0; }
.import-errors-table[b-ftq2l7o75z] { width: 100%; border-collapse: collapse; font-size: 0.75rem; margin-top: 0.5rem; }
.import-errors-table th[b-ftq2l7o75z] { text-align: left; padding: 0.25rem 0.5rem; font-size: 0.625rem; font-weight: 600; text-transform: uppercase; color: var(--danger); border-bottom: 1px solid var(--danger); opacity: 0.7; }
.import-errors-table td[b-ftq2l7o75z] { padding: 0.25rem 0.5rem; border-bottom: 1px solid rgba(220,38,38,0.15); color: var(--text); }
.import-error-row-num[b-ftq2l7o75z] { font-family: monospace; font-weight: 700; color: var(--danger); white-space: nowrap; width: 4rem; }
.import-errors-more[b-ftq2l7o75z] { font-size: 0.6875rem; color: var(--danger); padding-top: 0.375rem; opacity: 0.7; }
.import-summary[b-ftq2l7o75z] { display: flex; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.import-stat[b-ftq2l7o75z] { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--text-secondary); }
.import-stat .material-icons-round[b-ftq2l7o75z] { font-size: 1.125rem; color: var(--accent); }
.import-stat strong[b-ftq2l7o75z] { color: var(--text); }
.import-preview-table[b-ftq2l7o75z] { overflow-x: auto; margin-bottom: 0.75rem; }
.import-preview-table table[b-ftq2l7o75z] { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.import-preview-table th[b-ftq2l7o75z] { text-align: left; padding: 0.375rem 0.625rem; border-bottom: 2px solid var(--border); font-weight: 600; font-size: 0.625rem; text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; }
.import-preview-table td[b-ftq2l7o75z] { padding: 0.5rem 0.625rem; border-bottom: 1px solid var(--border-light); }
.import-id[b-ftq2l7o75z] { font-family: monospace; font-size: 0.6875rem; color: var(--text-tertiary); }
.import-none[b-ftq2l7o75z] { color: var(--text-tertiary); }
.import-badge-link[b-ftq2l7o75z] { background: var(--primary-100) !important; color: var(--primary-900) !important; }
.badge-cat[b-ftq2l7o75z] { font-size: 0.5625rem; padding: 0.125rem 0.5rem; background: var(--accent-bg); color: var(--accent); border-radius: 1.25rem; font-weight: 600; white-space: nowrap; }

/* ═══ IMPORT HELP ═══ */
.import-help[b-ftq2l7o75z] { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem; margin-bottom: 1rem; font-size: 0.75rem; line-height: 1.7; color: var(--text-secondary); }
.import-help h4[b-ftq2l7o75z] { font-size: 0.8125rem; font-weight: 700; font-family: var(--font-heading); color: var(--text); margin: 1rem 0 0.375rem; }
.import-help h4:first-child[b-ftq2l7o75z] { margin-top: 0; }
.import-help p[b-ftq2l7o75z] { margin: 0 0 0.375rem; }
.import-help a[b-ftq2l7o75z] { color: var(--accent); font-weight: 600; }
.import-help-table[b-ftq2l7o75z] { width: 100%; border-collapse: collapse; font-size: 0.6875rem; }
.import-help-table th[b-ftq2l7o75z] { text-align: left; padding: 0.25rem 0.5rem; border-bottom: 2px solid var(--border); font-weight: 600; color: var(--text); font-size: 0.625rem; text-transform: uppercase; }
.import-help-table td[b-ftq2l7o75z] { padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--border-light); vertical-align: top; }
.import-help-table td:first-child[b-ftq2l7o75z] { font-family: monospace; white-space: nowrap; }
.import-help-table td:nth-child(2)[b-ftq2l7o75z] { white-space: nowrap; text-align: center; }
.import-help-rules[b-ftq2l7o75z] { display: flex; flex-direction: column; gap: 0.5rem; }
.import-help-rule[b-ftq2l7o75z] { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.5rem 0.75rem; background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-sm); font-size: 0.75rem; }
.import-help-rule .material-icons-round[b-ftq2l7o75z] { font-size: 1.125rem; color: var(--accent); margin-top: 0.125rem; flex-shrink: 0; }
.import-help-rule a[b-ftq2l7o75z] { color: var(--accent); font-weight: 600; }
.import-help-example[b-ftq2l7o75z] { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.625rem 0.75rem; font-family: monospace; font-size: 0.625rem; overflow-x: auto; line-height: 1.8; }
.import-help-example-header[b-ftq2l7o75z] { font-weight: 700; color: var(--text); border-bottom: 1px solid var(--border-light); padding-bottom: 0.25rem; margin-bottom: 0.125rem; }
.import-help-example-row[b-ftq2l7o75z] { white-space: nowrap; }
.import-help-comment[b-ftq2l7o75z] { color: var(--text-tertiary); font-style: italic; }

/* ═══ EMPTY STATE ═══ */
.options-empty[b-ftq2l7o75z] { color: var(--text-tertiary); font-size: 0.8125rem; padding: 0.75rem 0; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
    .svc-desktop[b-ftq2l7o75z] { display: none; }
    .svc-mobile[b-ftq2l7o75z] { display: block; }

    .svc-form-body[b-ftq2l7o75z] { grid-template-columns: 1fr 1fr; }

    .catalog-toolbar[b-ftq2l7o75z] { flex-wrap: wrap; }
    .catalog-toolbar .search-bar[b-ftq2l7o75z] { flex: 1 1 100%; order: -1; }

    .cat-pills[b-ftq2l7o75z] { margin-bottom: 0.5rem; }
    .pill[b-ftq2l7o75z] { padding: 0.3125rem 0.75rem; font-size: 0.75rem; }
}

@media (max-width: 480px) {
    .svc-form-body[b-ftq2l7o75z] { grid-template-columns: 1fr; }
    .sm-name[b-ftq2l7o75z] { font-size: 0.875rem; }
    .sm-price[b-ftq2l7o75z] { font-size: 0.875rem; }
    .sm-meta[b-ftq2l7o75z] { font-size: 0.6875rem; }
    .pill[b-ftq2l7o75z] { padding: 0.25rem 0.625rem; font-size: 0.6875rem; }
    .btn-icon-action[b-ftq2l7o75z] { width: 2rem; height: 2rem; }
    .btn-icon-action .material-icons-round[b-ftq2l7o75z] { font-size: 1rem; }
    .variant-row[b-ftq2l7o75z] { flex-wrap: wrap; }
    .variant-header[b-ftq2l7o75z] { display: none; }
    .variant-default[b-ftq2l7o75z] { width: auto; }
}

@media (max-width: 360px) {
    .sm-row[b-ftq2l7o75z] { padding: 0.5rem 0; gap: 0.5rem; }
    .sm-name[b-ftq2l7o75z] { font-size: 0.8125rem; }
    .sm-price[b-ftq2l7o75z] { font-size: 0.8125rem; }
}

/* ═══ AI CATALOG MODAL ═══ */
.modal-overlay[b-ftq2l7o75z] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-content[b-ftq2l7o75z] { background: var(--bg); border-radius: var(--radius); width: 94%; max-height: 85vh; display: flex; flex-direction: column; box-shadow: var(--shadow-md); }
.modal-ai[b-ftq2l7o75z] { max-width: 40rem; }
.modal-ai-catalog[b-ftq2l7o75z] { max-width: 48rem; }
.modal-header[b-ftq2l7o75z] { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem 1rem; border-bottom: 1px solid var(--border-light); flex-shrink: 0; }
.modal-header h3[b-ftq2l7o75z] { display: flex; align-items: center; gap: 0.5rem; font-size: 1.125rem; font-weight: 700; color: var(--text); margin: 0; font-family: var(--font-heading); }
.modal-close[b-ftq2l7o75z] { background: none; border: none; cursor: pointer; color: var(--text-secondary); display: flex; align-items: center; padding: 0.25rem; border-radius: 0.25rem; }
.modal-close:hover[b-ftq2l7o75z] { color: var(--text); background: var(--primary-50); }
.modal-body[b-ftq2l7o75z] { padding: 1.25rem 1.5rem; overflow-y: auto; flex: 1; }
.modal-footer[b-ftq2l7o75z] { padding: 1rem 1.5rem; border-top: 1px solid var(--border-light); display: flex; justify-content: flex-end; gap: 0.5rem; flex-shrink: 0; }

.btn-ai-toolbar[b-ftq2l7o75z] { gap: 0.25rem; }

.ai-model-switch[b-ftq2l7o75z] { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.ai-model-btn[b-ftq2l7o75z] {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.375rem;
    padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 0.5rem;
    background: var(--bg-card); font-size: 0.8125rem; font-weight: 500;
    color: var(--text-secondary); cursor: pointer; transition: all 0.15s;
}
.ai-model-btn:hover[b-ftq2l7o75z] { border-color: var(--primary); color: var(--text-primary); }
.ai-model-btn.ai-model-active[b-ftq2l7o75z] { border-color: var(--primary); background: rgba(99,102,241,0.08); color: var(--primary); font-weight: 600; }
.ai-model-btn .material-icons-round[b-ftq2l7o75z] { font-size: 1rem; }

.ai-textarea[b-ftq2l7o75z] {
    width: 100%; border: 1px solid var(--border); border-radius: 0.5rem;
    padding: 0.75rem; font-size: 0.875rem; font-family: inherit;
    resize: vertical; min-height: 5rem; box-sizing: border-box;
}
.ai-textarea:focus[b-ftq2l7o75z] { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }

.ai-meta[b-ftq2l7o75z] { display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 0.75rem; color: var(--text-tertiary); }
.ai-quota[b-ftq2l7o75z] { font-weight: 600; }
.ai-reset[b-ftq2l7o75z] { font-weight: 400; color: var(--text-tertiary); }
.ai-desc[b-ftq2l7o75z] { font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: 0.75rem; line-height: 1.5; }

.ai-info-note[b-ftq2l7o75z] {
    display: flex; align-items: center; gap: 0.375rem; margin-top: 0.5rem;
    font-size: 0.75rem; color: var(--text-tertiary);
}
.ai-info-note .material-icons-round[b-ftq2l7o75z] { font-size: 0.875rem; }

.ai-catalog-header[b-ftq2l7o75z] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.ai-catalog-count[b-ftq2l7o75z] { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); }
.ai-catalog-actions[b-ftq2l7o75z] { display: flex; gap: 0.375rem; }

.ai-cat-group[b-ftq2l7o75z] { margin-bottom: 1rem; }
.ai-cat-header[b-ftq2l7o75z] { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; padding-bottom: 0.375rem; border-bottom: 1px solid var(--border-light); }
.ai-cat-name[b-ftq2l7o75z] { font-size: 0.8125rem; font-weight: 700; color: var(--text-primary); }
.ai-cat-count[b-ftq2l7o75z] { font-size: 0.6875rem; color: var(--text-tertiary); margin-left: auto; }

.ai-svc-card[b-ftq2l7o75z] {
    border: 1px solid var(--border-light); border-radius: 0.5rem;
    padding: 0.625rem 0.75rem; margin-bottom: 0.375rem; transition: opacity 0.15s;
}
.ai-svc-deselected[b-ftq2l7o75z] { opacity: 0.4; }
.ai-svc-top[b-ftq2l7o75z] { display: flex; gap: 0.5rem; align-items: flex-start; }
.ai-svc-check[b-ftq2l7o75z] { flex-shrink: 0; margin-top: 0.25rem; cursor: pointer; }
.ai-svc-info[b-ftq2l7o75z] { flex: 1; min-width: 0; }
.ai-svc-name[b-ftq2l7o75z] { margin-bottom: 0.25rem; }
.ai-svc-name-input[b-ftq2l7o75z] {
    width: 100%; border: none; background: transparent; font-size: 0.8125rem;
    font-weight: 600; color: var(--text-primary); padding: 0; font-family: inherit;
}
.ai-svc-name-input:focus[b-ftq2l7o75z] { outline: none; border-bottom: 1px solid var(--primary); }
.ai-svc-details[b-ftq2l7o75z] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-bottom: 0.25rem; }
.ai-svc-select[b-ftq2l7o75z] {
    padding: 0.1875rem 0.375rem; border: 1px solid var(--border); border-radius: 0.25rem;
    font-size: 0.75rem; background: #fff; color: var(--text-secondary);
}
.ai-svc-vat[b-ftq2l7o75z] { width: 3.5rem; }
.ai-svc-num[b-ftq2l7o75z] {
    width: 5rem; padding: 0.1875rem 0.375rem; border: 1px solid var(--border);
    border-radius: 0.25rem; font-size: 0.75rem; text-align: right;
}
.ai-svc-price-label[b-ftq2l7o75z] { font-size: 0.6875rem; color: var(--text-tertiary); font-weight: 500; }
.ai-svc-summary[b-ftq2l7o75z] { display: flex; gap: 0.75rem; font-size: 0.75rem; color: var(--text-secondary); }
.ai-svc-margin[b-ftq2l7o75z] { font-weight: 600; }
.ai-svc-margin.good[b-ftq2l7o75z] { color: var(--success); }
.ai-svc-margin.ok[b-ftq2l7o75z] { color: var(--warning); }
.ai-svc-margin.bad[b-ftq2l7o75z] { color: var(--danger); }

.ai-svc-variants[b-ftq2l7o75z] { margin-top: 0.375rem; padding-top: 0.375rem; border-top: 1px dashed var(--border-light); }
.ai-variant-group[b-ftq2l7o75z] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin-bottom: 0.25rem; }
.ai-variant-label[b-ftq2l7o75z] { font-size: 0.6875rem; font-weight: 600; color: var(--text-tertiary); }
.ai-variant-chip[b-ftq2l7o75z] {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.125rem 0.5rem; border-radius: 1rem;
    font-size: 0.6875rem; background: var(--primary-50); color: var(--text-secondary);
}
.ai-variant-default[b-ftq2l7o75z] { background: rgba(99,102,241,0.12); color: var(--primary); font-weight: 600; }
.ai-variant-mod[b-ftq2l7o75z] { font-size: 0.625rem; color: var(--text-tertiary); }

.ai-section[b-ftq2l7o75z] { margin-bottom: 1rem; }
.ai-section-title[b-ftq2l7o75z] { font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.375rem; }

.badge-cat[b-ftq2l7o75z] { background: rgba(34,197,94,0.1); color: #16a34a; font-size: 0.625rem; padding: 0.0625rem 0.375rem; border-radius: 1rem; font-weight: 600; }

@media (max-width: 600px) {
    .modal-overlay[b-ftq2l7o75z] { padding: 0; align-items: stretch; }
    .modal-content[b-ftq2l7o75z] { max-height: 100vh; max-height: 100dvh; width: 100%; border-radius: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
    .modal-header[b-ftq2l7o75z] { padding: 0.875rem 1rem 0.75rem; }
    .modal-header h3[b-ftq2l7o75z] { font-size: 1rem; }
    .modal-body[b-ftq2l7o75z] { padding: 0.875rem 1rem; }
    .modal-footer[b-ftq2l7o75z] { padding: 0.75rem 1rem; flex-wrap: wrap; }
    .modal-footer .btn[b-ftq2l7o75z] { flex: 1; min-width: 0; font-size: 0.8125rem; }

    .ai-model-switch[b-ftq2l7o75z] { gap: 0.375rem; }
    .ai-model-btn[b-ftq2l7o75z] { padding: 0.4375rem 0.5rem; font-size: 0.75rem; }
    .ai-model-btn .material-icons-round[b-ftq2l7o75z] { font-size: 0.875rem; }

    .ai-textarea[b-ftq2l7o75z] { min-height: 4rem; font-size: 0.8125rem; padding: 0.625rem; }
    .ai-meta[b-ftq2l7o75z] { flex-direction: column; gap: 0.25rem; }
    .ai-desc[b-ftq2l7o75z] { font-size: 0.75rem; }

    .ai-catalog-header[b-ftq2l7o75z] { flex-direction: column; align-items: flex-start; gap: 0.375rem; }
    .ai-catalog-actions[b-ftq2l7o75z] { width: 100%; }
    .ai-catalog-actions .btn[b-ftq2l7o75z] { flex: 1; font-size: 0.75rem; }

    .ai-svc-card[b-ftq2l7o75z] { padding: 0.5rem 0.625rem; }
    .ai-svc-details[b-ftq2l7o75z] { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
    .ai-svc-num[b-ftq2l7o75z] { width: 100%; }
    .ai-svc-select[b-ftq2l7o75z] { width: 100%; }
    .ai-svc-name-input[b-ftq2l7o75z] { font-size: 0.75rem; }
    .ai-svc-summary[b-ftq2l7o75z] { flex-wrap: wrap; gap: 0.375rem; }

    .ai-variant-group[b-ftq2l7o75z] { gap: 0.1875rem; }
    .ai-variant-chip[b-ftq2l7o75z] { font-size: 0.625rem; padding: 0.0625rem 0.375rem; }
}
/* /Components/Pages/ClientDetailPage.razor.rz.scp.css */
/* ═══ BACK LINK ═══ */
.back-link[b-lt5ogzo4fg] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-secondary, #6B7280);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color var(--transition, 150ms ease);
}
.back-link:hover[b-lt5ogzo4fg] { color: var(--accent, #4F46E5); text-decoration: none; }
.back-link .material-icons-round[b-lt5ogzo4fg] { font-size: 1.125rem; }

/* ═══ CLIENT HEADER ═══ */
.client-header-card[b-lt5ogzo4fg] { margin-bottom: 1.25rem; }
.client-header-top[b-lt5ogzo4fg] { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.625rem; }
.client-name[b-lt5ogzo4fg] { font-size: 1.375rem; font-weight: 700; margin: 0; color: var(--text, #111827); font-family: var(--font-heading); }
.client-details[b-lt5ogzo4fg] { display: flex; flex-wrap: wrap; gap: 1rem; }
.client-detail[b-lt5ogzo4fg] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: var(--text-secondary, #6B7280);
}
.client-detail .material-icons-round[b-lt5ogzo4fg] { font-size: 1rem; color: var(--text-tertiary, #9CA3AF); }

/* ═══ INLINE EDIT FORM ═══ */
.edit-form-row[b-lt5ogzo4fg] { display: flex; gap: 0.75rem; margin-bottom: 0.625rem; }
.edit-field[b-lt5ogzo4fg] { flex: 1; display: flex; flex-direction: column; gap: 0.1875rem; }
.edit-full[b-lt5ogzo4fg] { flex: 1 1 100%; }
.edit-label[b-lt5ogzo4fg] { font-size: 0.6875rem; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.03em; }
.edit-input[b-lt5ogzo4fg] {
    width: 100%; padding: 0.4375rem 0.625rem;
    border: 1px solid var(--border); border-radius: 0.375rem;
    font-size: 0.8125rem; color: var(--text); background: #fff;
    outline: none; transition: border-color 150ms ease; font-family: inherit;
}
.edit-input:focus[b-lt5ogzo4fg] { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(79,70,229,0.1); }
.edit-actions[b-lt5ogzo4fg] { display: flex; gap: 0.5rem; margin-top: 0.25rem; }

/* ═══ KPI GRID ═══ */
.kpi-grid[b-lt5ogzo4fg] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.kpi-card[b-lt5ogzo4fg] {
    text-align: center;
    padding: 1.25rem 1rem;
}

.kpi-value[b-lt5ogzo4fg] {
    font-size: 1.625rem;
    font-weight: 800;
    color: var(--text, #111827);
    letter-spacing: -0.02em;
}

.kpi-pct[b-lt5ogzo4fg] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-tertiary, #9CA3AF);
}

.kpi-label[b-lt5ogzo4fg] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-tertiary, #9CA3AF);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}

/* ═══ TABLE — base styles in .data-table-wrap (app.css) ═══ */
.clickable-row[b-lt5ogzo4fg] { cursor: pointer; transition: background var(--transition, 150ms ease); }
.clickable-row:hover[b-lt5ogzo4fg] { background: var(--accent-bg, #EFF6FF); }

.empty-msg[b-lt5ogzo4fg] {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-tertiary, #9CA3AF);
    font-size: 0.875rem;
}

/* ═══ SECTION TITLE ═══ */
.section-title[b-lt5ogzo4fg] {
    font-size: 0.9375rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text, #111827);
    font-family: var(--font-heading);
}

/* ═══ ACTION BAR ═══ */
.action-bar[b-lt5ogzo4fg] {
    margin-top: 1.25rem;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
    .kpi-grid[b-lt5ogzo4fg] { grid-template-columns: 1fr; gap: 0.625rem; }
    .kpi-card[b-lt5ogzo4fg] { padding: 0.875rem 0.75rem; }
    .kpi-value[b-lt5ogzo4fg] { font-size: 1.375rem; }
    .client-details[b-lt5ogzo4fg] { flex-direction: column; gap: 0.5rem; }
    .edit-form-row[b-lt5ogzo4fg] { flex-direction: column; gap: 0.625rem; }
}

/* ═══ CONTACT PERSONS ═══ */
.section-card[b-lt5ogzo4fg] { margin-bottom: 1.25rem; }
.section-title-row[b-lt5ogzo4fg] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.contact-person-card[b-lt5ogzo4fg] { border: 1px solid var(--border, #E5E7EB); border-radius: 0.5rem; padding: 0.75rem; margin-bottom: 0.5rem; }
.contact-person-header[b-lt5ogzo4fg] { display: flex; align-items: center; justify-content: space-between; }
.contact-person-name[b-lt5ogzo4fg] { font-weight: 600; font-size: 0.875rem; }
.contact-person-actions[b-lt5ogzo4fg] { display: flex; align-items: center; gap: 0.25rem; }
.contact-person-details[b-lt5ogzo4fg] { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.375rem; }
.contact-detail[b-lt5ogzo4fg] { display: flex; align-items: center; gap: 0.25rem; font-size: 0.8125rem; color: var(--text-secondary, #6B7280); }
.contact-detail .material-icons-round[b-lt5ogzo4fg] { font-size: 1rem; }
.contact-form[b-lt5ogzo4fg] { background: var(--bg-subtle, #F9FAFB); border-radius: 0.5rem; padding: 0.75rem; }
.btn-icon-sm[b-lt5ogzo4fg] { background: none; border: none; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; color: var(--text-tertiary, #9CA3AF); transition: color 150ms; }
.btn-icon-sm:hover[b-lt5ogzo4fg] { color: var(--text, #111827); }
.btn-icon-sm .material-icons-round[b-lt5ogzo4fg] { font-size: 1.125rem; }

@media (max-width: 640px) {
    .contact-person-details[b-lt5ogzo4fg] { flex-direction: column; gap: 0.375rem; }
}

/* ═══ NIP + GUS (shared look with ClientsPage) ═══ */
.cf-nip-row[b-lt5ogzo4fg] {
    display: flex;
    gap: 0.375rem;
    align-items: stretch;
}
.cf-nip-row .edit-input[b-lt5ogzo4fg] { flex: 1; min-width: 0; }

.btn-gus[b-lt5ogzo4fg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.4375rem 0.625rem;
    border: 1px solid var(--accent);
    background: var(--primary-50, #EEF2FF);
    color: var(--accent);
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 150ms ease, color 150ms ease;
}
.btn-gus:hover:not(:disabled)[b-lt5ogzo4fg] { background: var(--accent); color: #fff; }
.btn-gus:disabled[b-lt5ogzo4fg] { cursor: wait; opacity: 0.65; }
.btn-gus .material-icons-round[b-lt5ogzo4fg] { font-size: 1rem; }
.btn-gus .spinner-sm[b-lt5ogzo4fg] {
    width: 0.875rem; height: 0.875rem;
    border: 2px solid var(--accent);
    border-top-color: transparent;
    border-radius: 50%;
    animation: cd-spin-b-lt5ogzo4fg 0.6s linear infinite;
    display: inline-block;
}
@keyframes cd-spin-b-lt5ogzo4fg { to { transform: rotate(360deg); } }

/* ═══ CONTACTS INLINE IN EDIT MODE ═══ */
.cf-contacts[b-lt5ogzo4fg] {
    border-top: 1px dashed var(--border-light);
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.cf-contacts-header[b-lt5ogzo4fg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cf-contacts-title[b-lt5ogzo4fg] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.cf-contact-draft[b-lt5ogzo4fg] {
    background: var(--bg-subtle, #F9FAFB);
    border: 1px solid var(--border-light);
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
}
.cf-contact-draft-header[b-lt5ogzo4fg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.375rem;
}
.cf-contact-draft-num[b-lt5ogzo4fg] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent);
}

@media (max-width: 480px) {
    .btn-gus-label[b-lt5ogzo4fg] { display: none; }
}
/* /Components/Pages/ClientsPage.razor.rz.scp.css */
/* ═══ TOOLBAR ═══ */
.clients-toolbar[b-0v7ea9hxau] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.clients-toolbar .search-bar[b-0v7ea9hxau] { flex: 1; margin-bottom: 0; }

/* ═══ CLIENT FORM (compact inline) ═══ */
.client-form[b-0v7ea9hxau] {
    background: #fff;
    border: 2px solid var(--accent);
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    overflow: hidden;
}
.client-form-header[b-0v7ea9hxau] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-light);
    background: var(--primary-50);
}
.client-form-title[b-0v7ea9hxau] {
    font-size: 0.875rem;
    font-weight: 700;
    font-family: var(--font-heading);
}
.btn-icon-action[b-0v7ea9hxau] {
    display: flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 0.375rem;
    border: none; background: none;
    color: var(--text-tertiary); cursor: pointer;
}
.btn-icon-action:hover[b-0v7ea9hxau] { color: var(--text); background: rgba(0,0,0,0.04); }
.btn-icon-action .material-icons-round[b-0v7ea9hxau] { font-size: 1.125rem; }

.client-form-body[b-0v7ea9hxau] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem 0.75rem;
    padding: 0.875rem 1rem;
}
.cf-full[b-0v7ea9hxau] { grid-column: 1 / -1; }
.cf-group[b-0v7ea9hxau] { display: flex; flex-direction: column; gap: 0.1875rem; }
.cf-label[b-0v7ea9hxau] { font-size: 0.6875rem; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.03em; }
.cf-input[b-0v7ea9hxau] {
    width: 100%;
    padding: 0.4375rem 0.625rem;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    color: var(--text);
    background: #fff;
    outline: none;
    transition: border-color 150ms ease;
}
.cf-input:focus[b-0v7ea9hxau] { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(79,70,229,0.1); }
.cf-input[b-0v7ea9hxau]::placeholder { color: var(--text-tertiary); }
.cf-textarea[b-0v7ea9hxau] { resize: vertical; min-height: 2.5rem; font-family: inherit; }

.client-form-footer[b-0v7ea9hxau] {
    display: flex;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--border-light);
    background: var(--primary-50);
}

/* ═══ TABLE (desktop) — base styles in .data-table-wrap (app.css) ═══ */
.client-row[b-0v7ea9hxau] { cursor: pointer; }

/* ═══ IMPORT AI BUTTON ═══ */
.btn-ai-import[b-0v7ea9hxau] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    background: linear-gradient(135deg, #8B5CF6, var(--accent));
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.4375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: transform 150ms ease, box-shadow 150ms ease;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}
.btn-ai-import:hover[b-0v7ea9hxau] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}
.btn-ai-import .material-icons-round[b-0v7ea9hxau] {
    font-size: 1.125rem;
}

/* ═══ MOBILE LIST ═══ */
.clients-mobile[b-0v7ea9hxau] {
    display: none;
    background: #fff;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    padding: 0 0.875rem;
}

.cm-row[b-0v7ea9hxau] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.cm-row:last-child[b-0v7ea9hxau] { border-bottom: none; }
.cm-row:active[b-0v7ea9hxau] {
    background: var(--primary-50);
    margin: 0 -0.875rem;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
}

.cm-left[b-0v7ea9hxau] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.cm-name[b-0v7ea9hxau] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cm-meta[b-0v7ea9hxau] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cm-right[b-0v7ea9hxau] {
    flex-shrink: 0;
}
.cm-amount[b-0v7ea9hxau] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
    .clients-desktop[b-0v7ea9hxau] { display: none; }
    .clients-mobile[b-0v7ea9hxau] { display: block; }
    .client-form-body[b-0v7ea9hxau] { grid-template-columns: 1fr; }
    .add-label[b-0v7ea9hxau] { display: none; }
}

@media (max-width: 480px) {
    .cm-name[b-0v7ea9hxau] { font-size: 0.875rem; }
    .cm-amount[b-0v7ea9hxau] { font-size: 0.875rem; }
    .cm-meta[b-0v7ea9hxau] { font-size: 0.6875rem; }
    .client-form-body[b-0v7ea9hxau] { padding: 0.75rem; gap: 0.5rem; }
    .cf-input[b-0v7ea9hxau] { padding: 0.375rem 0.5rem; font-size: 0.8125rem; }
}

@media (max-width: 360px) {
    .cm-row[b-0v7ea9hxau] { padding: 0.5rem 0; gap: 0.5rem; }
    .cm-name[b-0v7ea9hxau] { font-size: 0.8125rem; }
    .cm-amount[b-0v7ea9hxau] { font-size: 0.8125rem; }
}

/* ═══ NIP + GUS ROW ═══ */
.cf-nip-row[b-0v7ea9hxau] {
    display: flex;
    gap: 0.375rem;
    align-items: stretch;
}
.cf-nip-row .cf-input[b-0v7ea9hxau] { flex: 1; min-width: 0; }

.btn-gus[b-0v7ea9hxau] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.4375rem 0.625rem;
    border: 1px solid var(--accent);
    background: var(--primary-50, #EEF2FF);
    color: var(--accent);
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 150ms ease, color 150ms ease;
}
.btn-gus:hover:not(:disabled)[b-0v7ea9hxau] { background: var(--accent); color: #fff; }
.btn-gus:disabled[b-0v7ea9hxau] { cursor: wait; opacity: 0.65; }
.btn-gus .material-icons-round[b-0v7ea9hxau] { font-size: 1rem; }
.btn-gus .spinner-sm[b-0v7ea9hxau] {
    width: 0.875rem; height: 0.875rem;
    border: 2px solid var(--accent);
    border-top-color: transparent;
    border-radius: 50%;
    animation: cf-spin-b-0v7ea9hxau 0.6s linear infinite;
    display: inline-block;
}
@keyframes cf-spin-b-0v7ea9hxau { to { transform: rotate(360deg); } }

/* ═══ CONTACT PERSONS DRAFTS ═══ */
.cf-contacts[b-0v7ea9hxau] {
    border-top: 1px dashed var(--border-light);
    padding-top: 0.75rem;
    margin-top: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.cf-contacts-header[b-0v7ea9hxau] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cf-contacts-title[b-0v7ea9hxau] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.cf-contact-draft[b-0v7ea9hxau] {
    background: var(--bg-subtle, #F9FAFB);
    border: 1px solid var(--border-light);
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
}
.cf-contact-draft-header[b-0v7ea9hxau] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.375rem;
}
.cf-contact-draft-num[b-0v7ea9hxau] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent);
}
.cf-contact-grid[b-0v7ea9hxau] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.625rem;
}

@media (max-width: 480px) {
    .cf-contact-grid[b-0v7ea9hxau] { grid-template-columns: 1fr; }
    .btn-gus-label[b-0v7ea9hxau] { display: none; }
}
/* /Components/Pages/CommunicationPage.razor.rz.scp.css */
.comm-timeline[b-gamrlqwts9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.comm-item[b-gamrlqwts9] {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    position: relative;
}

.comm-item--new[b-gamrlqwts9] {
    border-left: 3px solid var(--accent);
}

.comm-badge[b-gamrlqwts9] {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.1875rem 0.625rem;
    border-radius: 99px;
    background: var(--accent);
    color: #fff;
    margin-bottom: 0.5rem;
}

.comm-badge--fix[b-gamrlqwts9] {
    background: var(--success, #16a34a);
}

.comm-badge--info[b-gamrlqwts9] {
    background: var(--muted, #6b7280);
}

.comm-date[b-gamrlqwts9] {
    font-size: 0.75rem;
    color: var(--muted);
    margin-bottom: 0.375rem;
}

.comm-item-title[b-gamrlqwts9] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.375rem;
    font-family: var(--font-heading);
}

.comm-item-body[b-gamrlqwts9] {
    font-size: 0.875rem;
    color: var(--text);
    line-height: 1.6;
    margin: 0;
    opacity: 0.85;
}

.comm-item-list[b-gamrlqwts9] {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    color: var(--text);
    line-height: 1.8;
    opacity: 0.85;
}

@media (max-width: 640px) {
    .comm-item[b-gamrlqwts9] { padding: 1rem; }
}
/* /Components/Pages/CompanyProfilePage.razor.rz.scp.css */
/* ═══ COMPACT FORM OVERRIDES ═══ */
[b-i6jmwmyevf] .section-card { margin-bottom: 1.5rem; padding: 1rem; }
[b-i6jmwmyevf] .section-title { font-size: 0.75rem; margin-bottom: 0.75rem; }
[b-i6jmwmyevf] .form-group { margin-bottom: 0.75rem; }
[b-i6jmwmyevf] .form-label { font-size: 0.6875rem; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.1875rem; }
[b-i6jmwmyevf] .form-input { padding: 0.4375rem 0.625rem; font-size: 0.8125rem; }
[b-i6jmwmyevf] .form-hint { font-size: 0.6875rem; }

/* ═══ UPLOAD ═══ */
.upload-zone[b-i6jmwmyevf] { position: relative; border: 2px dashed var(--border); border-radius: var(--radius-sm); padding: 1.5rem; text-align: center; color: var(--text-secondary); cursor: pointer; transition: all 150ms; font-size: 0.8125rem; }
.upload-zone:hover[b-i6jmwmyevf] { border-color: var(--accent); background: var(--accent-bg); }
.upload-zone .material-icons-round[b-i6jmwmyevf] { font-size: 2rem; color: var(--text-tertiary); margin-bottom: 0.375rem; display: block; }
.upload-hint[b-i6jmwmyevf] { font-size: 0.6875rem; color: var(--text-tertiary); margin-top: 0.375rem; }
.logo-preview[b-i6jmwmyevf] { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.logo-preview img[b-i6jmwmyevf] { width: 5rem; height: 5rem; object-fit: contain; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.375rem; background: var(--bg); }
.logo-remove[b-i6jmwmyevf] { color: var(--danger); border-color: var(--danger); }
.logo-remove:hover[b-i6jmwmyevf] { background: var(--danger-bg); }
.logo-error[b-i6jmwmyevf] { font-size: 0.8125rem; color: var(--danger); background: var(--danger-bg); border: 1px solid #FECACA; border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; margin-bottom: 0.75rem; }

/* ═══ RADIO GROUP (document naming) ═══ */
.radio-group[b-i6jmwmyevf] { display: flex; gap: 1rem; margin-top: 0.25rem; }
.radio-option[b-i6jmwmyevf] { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 500; cursor: pointer; color: var(--text); }
.radio-option input[type="radio"][b-i6jmwmyevf] { accent-color: var(--accent); }

/* ═══ VISIBILITY ═══ */
.visibility-desc[b-i6jmwmyevf] { color: var(--text-secondary); font-size: 0.75rem; margin-bottom: 0.75rem; }
.visibility-list[b-i6jmwmyevf] { display: flex; flex-direction: column; gap: 0.5rem; }
.visibility-item[b-i6jmwmyevf] { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.8125rem; }
.visibility-item input[b-i6jmwmyevf] { width: 1rem; height: 1rem; accent-color: var(--accent); cursor: pointer; }

/* ═══ SUCCESS / ERROR ═══ */
.success-msg[b-i6jmwmyevf] { display: flex; align-items: center; gap: 0.5rem; background: var(--success-bg); border: 1px solid #A7F3D0; border-radius: var(--radius-sm); padding: 0.625rem 0.875rem; margin-bottom: 1rem; font-size: 0.8125rem; color: var(--success); }
.success-msg .material-icons-round[b-i6jmwmyevf] { font-size: 1.125rem; }
.error-msg[b-i6jmwmyevf] { display: flex; align-items: center; gap: 0.5rem; background: var(--danger-bg); border: 1px solid #FECACA; border-radius: var(--radius-sm); padding: 0.625rem 0.875rem; margin-bottom: 1rem; font-size: 0.8125rem; color: var(--danger); }
.error-msg .material-icons-round[b-i6jmwmyevf] { font-size: 1.125rem; }

/* ═══ PRO ═══ */
[b-i6jmwmyevf] .pro-tag { display: inline-block; background: linear-gradient(135deg, rgba(79,70,229,0.08), #ede9fe); color: #4338ca; font-size: 0.5625rem; font-weight: 700; padding: 0.0625rem 0.3125rem; border-radius: 4px; vertical-align: middle; margin-left: 0.1875rem; }
.pro-field-hint[b-i6jmwmyevf] { font-size: 0.6875rem; color: var(--text-tertiary); margin-top: 0.1875rem; }
.section-locked[b-i6jmwmyevf] { opacity: 0.6; }
.field-locked[b-i6jmwmyevf] { opacity: 0.5; }
.field-locked .form-input[b-i6jmwmyevf] { background: var(--bg-subtle); }
.visibility-disabled[b-i6jmwmyevf] { opacity: 0.5; }

/* ═══ COLOR PICKER ═══ */
.color-picker-row[b-i6jmwmyevf] { display: flex; align-items: center; gap: 0.5rem; }
.color-picker-input[b-i6jmwmyevf] { width: 2.25rem; height: 2.25rem; border: 2px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; padding: 2px; background: none; }
.color-picker-input:disabled[b-i6jmwmyevf] { opacity: 0.5; cursor: not-allowed; }

/* ═══ FOLLOW-UP ═══ */
.section-desc[b-i6jmwmyevf] { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.5; margin: 0 0 0.75rem; }
.follow-up-toggle[b-i6jmwmyevf] { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.8125rem; font-weight: 500; }
.follow-up-toggle input[b-i6jmwmyevf] { width: 1rem; height: 1rem; accent-color: var(--accent); cursor: pointer; }
.follow-up-fields[b-i6jmwmyevf] { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.75rem; }

/* ═══ PDF TEMPLATES ═══ */
.tpl-grid[b-i6jmwmyevf] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.tpl-card[b-i6jmwmyevf] { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0.375rem; border: 2px solid var(--border); border-radius: 0.5rem; background: #fff; cursor: pointer; transition: all 150ms; min-width: 0; overflow: hidden; }
.tpl-card:hover[b-i6jmwmyevf] { border-color: var(--accent); background: #F8FAFF; }
.tpl-selected[b-i6jmwmyevf] { border-color: var(--accent); background: #EFF6FF; }
.tpl-locked[b-i6jmwmyevf] { opacity: 0.6; cursor: default; }
.tpl-locked:hover[b-i6jmwmyevf] { border-color: var(--border); background: #fff; }
.tpl-thumb[b-i6jmwmyevf] { width: 100%; max-height: 12rem; border: 1px solid #E5E7EB; border-radius: 4px; margin-bottom: 0.375rem; object-fit: contain; }
.tpl-label[b-i6jmwmyevf] { font-size: 0.6875rem; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 0.25rem; }
.tpl-check[b-i6jmwmyevf] { position: absolute; top: 4px; right: 4px; color: var(--accent); }
.tpl-check .material-icons-round[b-i6jmwmyevf] { font-size: 1rem; }

/* ═══ TEMPLATE PREVIEW ═══ */
.tpl-preview-btn[b-i6jmwmyevf] { display:flex;align-items:center;justify-content:center;gap:0.25rem;padding:0.25rem 0.5rem;font-size:0.6875rem;font-weight:600;color:var(--text-secondary);background:var(--bg-subtle,#F3F4F6);border:1px solid var(--border);border-radius:0.375rem;cursor:pointer;transition:all 150ms; }
.tpl-preview-btn:hover[b-i6jmwmyevf] { color:var(--accent);border-color:var(--accent); }

/* ═══ EDIT FORM (shared pattern) ═══ */
.edit-form-row[b-i6jmwmyevf] { display: flex; gap: 0.75rem; margin-bottom: 0.625rem; }
.edit-field[b-i6jmwmyevf] { flex: 1; display: flex; flex-direction: column; gap: 0.1875rem; }
.edit-full[b-i6jmwmyevf] { flex: 1 1 100%; }
.edit-label[b-i6jmwmyevf] { font-size: 0.6875rem; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.03em; }
.edit-input[b-i6jmwmyevf] {
    width: 100%; padding: 0.4375rem 0.625rem;
    border: 1px solid var(--border); border-radius: 0.375rem;
    font-size: 0.8125rem; color: var(--text); background: #fff;
    outline: none; transition: border-color 150ms ease; font-family: inherit;
}
.edit-input:focus[b-i6jmwmyevf] { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(79,70,229,0.1); }
.edit-actions[b-i6jmwmyevf] { display: flex; gap: 0.5rem; margin-top: 0.25rem; }

/* ═══ NUMBER SERIES ═══ */
.series-card[b-i6jmwmyevf] { border: 1px solid var(--border, #E5E7EB); border-radius: 0.5rem; padding: 0.75rem; margin-bottom: 0.5rem; }
.series-header[b-i6jmwmyevf] { display: flex; align-items: center; justify-content: space-between; }
.series-name[b-i6jmwmyevf] { font-weight: 600; font-size: 0.875rem; }
.series-default-badge[b-i6jmwmyevf] { display: inline-block; background: linear-gradient(135deg, rgba(79,70,229,0.08), #ede9fe); color: #4338ca; font-size: 0.625rem; font-weight: 700; padding: 0.125rem 0.375rem; border-radius: 4px; margin-left: 0.375rem; vertical-align: middle; }
.series-actions[b-i6jmwmyevf] { display: flex; align-items: center; gap: 0.25rem; }
.series-next[b-i6jmwmyevf] { font-size: 0.8125rem; color: var(--text-secondary, #6B7280); margin-top: 0.25rem; }
.series-form[b-i6jmwmyevf] { background: var(--bg-subtle, #F9FAFB); border-radius: 0.5rem; padding: 0.75rem; }
.series-preview[b-i6jmwmyevf] { font-size: 0.875rem; color: var(--text); padding: 0.5rem 0.75rem; background: #fff; border: 1px solid var(--border, #E5E7EB); border-radius: 0.375rem; margin-bottom: 0.75rem; }
.btn-icon-sm[b-i6jmwmyevf] { background: none; border: none; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; color: var(--text-tertiary, #9CA3AF); transition: color 150ms; }
.btn-icon-sm:hover[b-i6jmwmyevf] { color: var(--text, #111827); }
.btn-icon-sm .material-icons-round[b-i6jmwmyevf] { font-size: 1.125rem; }

@media (max-width: 640px) {
    .edit-form-row[b-i6jmwmyevf] { flex-direction: column; gap: 0.5rem; }
    .series-header[b-i6jmwmyevf] { flex-wrap: wrap; gap: 0.5rem; }
}

@media (max-width: 480px) {
    .tpl-grid[b-i6jmwmyevf] { gap: 0.375rem; }
    .tpl-card[b-i6jmwmyevf] { padding: 0.25rem; }
    .tpl-thumb[b-i6jmwmyevf] { max-height: 8rem; }
    .tpl-label[b-i6jmwmyevf] { font-size: 0.5625rem; }
}

/* Pola ignorowane gdy ustawiony wlasny format numeracji */
.field-ignored[b-i6jmwmyevf] { opacity: 0.45; pointer-events: none; }
.field-ignored input[b-i6jmwmyevf], .field-ignored select[b-i6jmwmyevf] { cursor: not-allowed; }
.field-ignored-hint[b-i6jmwmyevf] {
    margin-left: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 400;
    font-style: italic;
    color: var(--text-tertiary);
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */

/* ═══ HEADER ═══ */
.dash-header[b-uuaci4ymsh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dash-greeting[b-uuaci4ymsh] {
    font-size: 1.75rem;
    font-weight: 700;
    font-family: var(--font-heading);
    margin: 0;
}

.dash-date[b-uuaci4ymsh] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* ═══ PILL TOGGLE ═══ */
.pill-toggle[b-uuaci4ymsh] {
    display: inline-flex;
    background: var(--primary-50);
    border-radius: var(--radius-sm);
    padding: 0.1875rem;
    gap: 0.125rem;
}

.pill-btn[b-uuaci4ymsh] {
    padding: 0.375rem 0.875rem;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    background: transparent;
    color: var(--text-tertiary);
    transition: all 150ms ease;
}

.pill-btn:hover[b-uuaci4ymsh] {
    color: var(--text-secondary);
}

.pill-btn.active[b-uuaci4ymsh] {
    background: #fff;
    color: var(--accent);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.pill-sm .pill-btn[b-uuaci4ymsh] {
    padding: 0.3125rem 0.75rem;
    font-size: 0.75rem;
}

/* ═══ KPI ═══ */
.kpi-grid[b-uuaci4ymsh] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.kpi-card[b-uuaci4ymsh] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    transition: all 200ms ease;
    position: relative;
    overflow: hidden;
}

.kpi-card[b-uuaci4ymsh]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0.1875rem;
    background: var(--primary-200);
    transition: background 200ms ease;
}

.kpi-card:first-child[b-uuaci4ymsh]::before { background: var(--accent); }
.kpi-card:nth-child(2)[b-uuaci4ymsh]::before { background: var(--success); }
.kpi-card:nth-child(3)[b-uuaci4ymsh]::before { background: #8B5CF6; }
.kpi-card:nth-child(4)[b-uuaci4ymsh]::before { background: var(--warning); }

.kpi-card:hover[b-uuaci4ymsh] {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-200);
}

.kpi-label[b-uuaci4ymsh] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.kpi-value[b-uuaci4ymsh] {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
}

.kpi-pct[b-uuaci4ymsh] {
    font-size: 0.875rem;
    color: var(--success);
    font-weight: 600;
}

.kpi-locked[b-uuaci4ymsh] { opacity: 0.5; }
.kpi-blur[b-uuaci4ymsh] { filter: blur(0.25rem); user-select: none; }

[b-uuaci4ymsh] .pro-tag {
    display: inline-block;
    background: linear-gradient(135deg, rgba(79,70,229,0.08), #ede9fe);
    color: #4338ca;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    vertical-align: middle;
    margin-left: 0.25rem;
}

.chart-locked[b-uuaci4ymsh] { position: relative; min-height: 7.5rem; }
.pro-overlay[b-uuaci4ymsh] { display: flex; align-items: center; justify-content: center; padding: 2.5rem 0; }

.activity-more[b-uuaci4ymsh] { padding: 0.75rem 0 0.25rem; text-align: center; font-size: 0.8125rem; }
.activity-more a[b-uuaci4ymsh] { color: var(--accent); font-weight: 500; }

.kpi-change[b-uuaci4ymsh] {
    font-size: 0.8125rem;
    margin-top: 0.375rem;
}

.kpi-change.up[b-uuaci4ymsh] {
    color: var(--success);
}

.kpi-change.down[b-uuaci4ymsh] {
    color: var(--danger);
}

/* ═══ CHART ═══ */
.chart-card[b-uuaci4ymsh] {
    margin-bottom: 1.5rem;
}

.chart-header[b-uuaci4ymsh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.section-title[b-uuaci4ymsh] {
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: var(--font-heading);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03125rem;
    margin-bottom: 1rem;
}

.chart-header .section-title[b-uuaci4ymsh] {
    margin-bottom: 0;
}

.chart-bar-group[b-uuaci4ymsh] {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    height: 13.75rem;
    margin-top: 1.25rem;
    padding-top: 1.75rem;
}

.chart-bar-group.many-bars[b-uuaci4ymsh] {
    gap: 0.125rem;
}

.chart-bar-group.many-bars .chart-col[b-uuaci4ymsh] {
    min-width: 0;
}



.chart-col[b-uuaci4ymsh] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    height: 100%;
    justify-content: flex-end;
}

.chart-bar[b-uuaci4ymsh] {
    width: 100%;
    border-radius: 0.375rem 0.375rem 0.125rem 0.125rem;
    background: var(--primary-800);
    transition: all 0.3s ease;
    min-height: 0.125rem;
    position: relative;
}

.chart-bar:hover[b-uuaci4ymsh] {
    background: var(--accent);
    transform: scaleY(1.03);
    transform-origin: bottom;
}

.chart-val[b-uuaci4ymsh] {
    position: absolute;
    top: -1.375rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.chart-label[b-uuaci4ymsh] {
    font-size: 0.75rem;
    line-height: 1;
    color: var(--text-tertiary);
    height: 0.875rem;
}

/* ═══ ACTIVITY ═══ */
.activity-item[b-uuaci4ymsh] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.875rem 0.5rem;
    margin: 0 -0.5rem;
    border-bottom: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    transition: background 150ms ease;
}

.activity-item:hover[b-uuaci4ymsh] {
    background: var(--primary-50);
}

.activity-item:last-child[b-uuaci4ymsh] {
    border-bottom: none;
}

.activity-dot[b-uuaci4ymsh] {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    margin-top: 0.375rem;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px var(--bg);
}

.activity-dot.green[b-uuaci4ymsh] { background: var(--success); }
.activity-dot.blue[b-uuaci4ymsh] { background: var(--accent); }
.activity-dot.yellow[b-uuaci4ymsh] { background: var(--warning); }
.activity-dot.gray[b-uuaci4ymsh] { background: var(--primary-300); }
.activity-dot.red[b-uuaci4ymsh] { background: var(--danger); }

.activity-text[b-uuaci4ymsh] {
    font-size: 0.9375rem;
}

.activity-time[b-uuaci4ymsh] {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
    .kpi-grid[b-uuaci4ymsh] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .chart-bar-group[b-uuaci4ymsh] {
        gap: 0.25rem;
        height: 9.375rem;
    }

    .chart-bar-group.many-bars[b-uuaci4ymsh] {
        gap: 1px;
    }

    .chart-bar-group.many-bars .chart-label[b-uuaci4ymsh] {
        font-size: 0.5625rem;
    }

    .chart-val[b-uuaci4ymsh] {
        font-size: 0.625rem;
    }

    .dash-greeting[b-uuaci4ymsh] {
        font-size: 1.375rem;
    }

    .kpi-value[b-uuaci4ymsh] {
        font-size: 1.25rem;
    }

    .kpi-card[b-uuaci4ymsh] {
        padding: 0.75rem 1rem;
    }
}

@media (max-width: 480px) {
    .kpi-grid[b-uuaci4ymsh] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .kpi-card[b-uuaci4ymsh] {
        padding: 0.625rem 0.75rem;
    }

    .kpi-value[b-uuaci4ymsh] {
        font-size: 1.125rem;
    }

    .dash-greeting[b-uuaci4ymsh] {
        font-size: 1.25rem;
    }

    .chart-bar-group[b-uuaci4ymsh] {
        height: 7.5rem;
        gap: 0.125rem;
        padding-top: 1.375rem;
    }

    .chart-bar-group.many-bars[b-uuaci4ymsh] {
        gap: 1px;
    }

    .chart-val[b-uuaci4ymsh] {
        font-size: 0.5625rem;
        top: -1.125rem;
    }

    .activity-text[b-uuaci4ymsh] {
        font-size: 0.875rem;
    }
}

@media (max-width: 360px) {
    .dash-greeting[b-uuaci4ymsh] {
        font-size: 1.125rem;
    }

    .kpi-value[b-uuaci4ymsh] {
        font-size: 1rem;
    }

    .kpi-label[b-uuaci4ymsh] {
        font-size: 0.6875rem;
    }

    .pill-btn[b-uuaci4ymsh] {
        padding: 0.25rem 0.5rem;
        font-size: 0.6875rem;
    }
}

/* ═══ EMPTY STATE HERO ═══ */
.empty-hero[b-uuaci4ymsh] {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}

.empty-hero-icon[b-uuaci4ymsh] {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: var(--accent-bg, rgba(79, 70, 229, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

.empty-hero-icon .material-icons-round[b-uuaci4ymsh] {
    font-size: 2.25rem;
    color: var(--accent, #4F46E5);
}

.empty-hero-title[b-uuaci4ymsh] {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--text);
    margin-bottom: 0.5rem;
}

.empty-hero-desc[b-uuaci4ymsh] {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 26.25rem;
    margin: 0 auto 1.75rem;
}

.empty-hero-actions[b-uuaci4ymsh] {
    margin-bottom: 2rem;
}

.empty-hero-actions .btn[b-uuaci4ymsh] {
    font-size: 1rem;
    padding: 0.875rem 2rem;
    gap: 0.5rem;
}

.empty-hero-features[b-uuaci4ymsh] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.empty-feature[b-uuaci4ymsh] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}

.empty-feature .material-icons-round[b-uuaci4ymsh] {
    font-size: 1.125rem;
    color: var(--text-tertiary);
}

/* ═══ PROGRESS CHECKLIST ═══ */
.progress-checklist[b-uuaci4ymsh] {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.progress-title[b-uuaci4ymsh] {
    font-size: 0.875rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03125rem;
    margin-bottom: 1rem;
}

.progress-items[b-uuaci4ymsh] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.progress-item[b-uuaci4ymsh] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-sm, 0.375rem);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    transition: background 0.15s;
    flex-wrap: wrap;
}

a.progress-item:hover[b-uuaci4ymsh] {
    background: var(--bg-hover, rgba(0,0,0,0.05));
    text-decoration: none;
}

.progress-item .material-icons-round[b-uuaci4ymsh] {
    font-size: 1.375rem;
    flex-shrink: 0;
}

.progress-item.done[b-uuaci4ymsh] {
    color: var(--text-tertiary);
}

.progress-item.done .material-icons-round[b-uuaci4ymsh] {
    color: var(--success, #22c55e);
}

.progress-item.todo .material-icons-round[b-uuaci4ymsh] {
    color: var(--text-tertiary);
}

.progress-hint[b-uuaci4ymsh] {
    width: 100%;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-weight: 400;
    margin-left: 2rem;
    margin-top: -0.25rem;
}

/* ═══ FEEDBACK CTA ═══ */
.feedback-cta[b-uuaci4ymsh] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    background: var(--bg, #f9fafb);
}

.feedback-cta-icon[b-uuaci4ymsh] {
    font-size: 1.75rem;
    color: var(--accent);
    flex-shrink: 0;
}

.feedback-cta-text[b-uuaci4ymsh] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.feedback-cta-sub[b-uuaci4ymsh] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin: 0.125rem 0 0;
}

.feedback-cta .btn[b-uuaci4ymsh] {
    flex-shrink: 0;
    margin-left: auto;
}

@media (max-width: 640px) {
    .feedback-cta[b-uuaci4ymsh] { flex-wrap: wrap; gap: 0.625rem; padding: 0.75rem 0.875rem; }
    .feedback-cta .btn[b-uuaci4ymsh] { width: 100%; justify-content: center; }
    .empty-hero[b-uuaci4ymsh] { padding: 2rem 1rem; }
    .empty-hero-title[b-uuaci4ymsh] { font-size: 1.25rem; }
    .empty-hero-features[b-uuaci4ymsh] { gap: 0.75rem; }
    .empty-feature[b-uuaci4ymsh] { font-size: 0.75rem; }
}

/* ═══ DEMO PDF PREVIEW (Feature 1.1) ═══ */
.demo-pdf-section[b-uuaci4ymsh] {
    margin: 1.75rem auto 1.5rem;
    max-width: 26.25rem;
}

.demo-pdf-heading[b-uuaci4ymsh] {
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--text);
    margin: 0 0 1rem;
    text-align: center;
}

.demo-pdf-card[b-uuaci4ymsh] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
}

.demo-pdf-header[b-uuaci4ymsh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-light);
}

.demo-pdf-number[b-uuaci4ymsh] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--accent);
    font-family: monospace;
}

.demo-pdf-company[b-uuaci4ymsh] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

.demo-pdf-client[b-uuaci4ymsh] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.demo-pdf-items[b-uuaci4ymsh] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.demo-pdf-line[b-uuaci4ymsh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: var(--primary-50);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
}

.demo-pdf-line-name[b-uuaci4ymsh] {
    color: var(--text);
    font-weight: 500;
}

.demo-pdf-line-price[b-uuaci4ymsh] {
    color: var(--text-secondary);
    font-weight: 600;
}

.demo-pdf-total[b-uuaci4ymsh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 2px solid var(--border);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

.demo-pdf-total-value[b-uuaci4ymsh] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--accent);
}

.demo-pdf-actions[b-uuaci4ymsh] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

@media (max-width: 480px) {
    .demo-pdf-section[b-uuaci4ymsh] { max-width: 100%; }
    .demo-pdf-card[b-uuaci4ymsh] { padding: 1rem; }
    .demo-pdf-actions[b-uuaci4ymsh] { flex-direction: column; }
    .demo-pdf-actions .btn[b-uuaci4ymsh] { width: 100%; justify-content: center; }
}

/* ═══ SECTION CARD (shared) ═══ */
.section-card[b-uuaci4ymsh] {
    margin-bottom: 1.5rem;
}

/* ═══ ACTIONABLE QUOTES (Feature 5.1) ═══ */
.actionable-item[b-uuaci4ymsh] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 0.5rem;
    margin: 0 -0.5rem;
    border-bottom: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    transition: background 150ms ease;
}

.actionable-item:hover[b-uuaci4ymsh] {
    background: var(--primary-50);
}

.actionable-item:last-child[b-uuaci4ymsh] {
    border-bottom: none;
}

.actionable-dot[b-uuaci4ymsh] {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px var(--bg);
}

.actionable-dot.yellow[b-uuaci4ymsh] { background: var(--warning); }
.actionable-dot.blue[b-uuaci4ymsh] { background: var(--accent); }
.actionable-dot.orange[b-uuaci4ymsh] { background: #f97316; }

.actionable-info[b-uuaci4ymsh] {
    flex: 1;
    min-width: 0;
}

.actionable-main[b-uuaci4ymsh] {
    font-size: 0.875rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.actionable-hint[b-uuaci4ymsh] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 0.125rem;
}

.actionable-actions[b-uuaci4ymsh] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .actionable-item[b-uuaci4ymsh] { flex-wrap: wrap; gap: 0.5rem; }
    .actionable-actions[b-uuaci4ymsh] { width: 100%; margin-left: 1.5rem; }
}

.actionable-no-email[b-uuaci4ymsh] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-style: italic;
}

/* ═══ EXPIRING QUOTES (Feature 2.2) ═══ */
.expiring-item[b-uuaci4ymsh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
    padding: 0.75rem 0.5rem;
    margin: 0 -0.5rem;
    border-bottom: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    transition: background 150ms ease;
}

.expiring-item:hover[b-uuaci4ymsh] {
    background: var(--primary-50);
}

.expiring-item:last-child[b-uuaci4ymsh] {
    border-bottom: none;
}

.expiring-info[b-uuaci4ymsh] {
    flex: 1;
    min-width: 0;
}

.expiring-main[b-uuaci4ymsh] {
    font-size: 0.875rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.expiring-hint[b-uuaci4ymsh] {
    font-size: 0.75rem;
    color: var(--warning);
    margin-top: 0.125rem;
    font-weight: 500;
}

@media (max-width: 640px) {
    .expiring-item[b-uuaci4ymsh] { flex-wrap: wrap; gap: 0.5rem; }
    .expiring-item .btn[b-uuaci4ymsh] { width: 100%; justify-content: center; }
}

/* ═══ TEMPLATES GRID (Feature 3.2) ═══ */
.templates-grid[b-uuaci4ymsh] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.template-card[b-uuaci4ymsh] {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 1rem;
    transition: all 150ms ease;
}

.template-card:hover[b-uuaci4ymsh] {
    border-color: var(--accent);
    background: var(--accent-bg);
}

.template-name[b-uuaci4ymsh] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.template-meta[b-uuaci4ymsh] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

@media (max-width: 768px) {
    .templates-grid[b-uuaci4ymsh] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .templates-grid[b-uuaci4ymsh] { grid-template-columns: 1fr; }
}

/* ═══ INACTIVE CLIENTS (Feature 6.2) ═══ */
.inactive-client-item[b-uuaci4ymsh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
    padding: 0.75rem 0.5rem;
    margin: 0 -0.5rem;
    border-bottom: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    transition: background 150ms ease;
}

.inactive-client-item:hover[b-uuaci4ymsh] {
    background: var(--primary-50);
}

.inactive-client-item:last-child[b-uuaci4ymsh] {
    border-bottom: none;
}

.inactive-client-info[b-uuaci4ymsh] {
    flex: 1;
    min-width: 0;
}

.inactive-client-name[b-uuaci4ymsh] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

.inactive-client-meta[b-uuaci4ymsh] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 0.125rem;
}

@media (max-width: 640px) {
    .inactive-client-item[b-uuaci4ymsh] { flex-wrap: wrap; gap: 0.5rem; }
    .inactive-client-item .btn[b-uuaci4ymsh] { width: 100%; justify-content: center; }
}

/* ═══ COMMENTS WIDGET ═══ */
.qc-widget[b-uuaci4ymsh] {
    border-left: 0.1875rem solid var(--accent, #4F46E5);
}
.qc-widget-count[b-uuaci4ymsh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.4375rem;
    margin-left: 0.375rem;
    border-radius: 100px;
    background: var(--accent, #4F46E5);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    vertical-align: middle;
}
.qc-widget-item[b-uuaci4ymsh] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: var(--text, #0F172A);
    transition: background 150ms ease;
    border: 1px solid transparent;
}
.qc-widget-item + .qc-widget-item[b-uuaci4ymsh] { margin-top: 0.25rem; }
.qc-widget-item:hover[b-uuaci4ymsh] {
    background: var(--primary-50, #EEF2FF);
    border-color: var(--primary-200, #C7D2FE);
}
.qc-widget-main[b-uuaci4ymsh] {
    flex: 1;
    min-width: 0;
}
.qc-widget-title[b-uuaci4ymsh] {
    font-size: 0.8125rem;
    margin-bottom: 0.125rem;
    color: var(--text, #0F172A);
}
.qc-widget-title strong[b-uuaci4ymsh] { font-weight: 600; }
.qc-widget-sep[b-uuaci4ymsh] {
    margin: 0 0.375rem;
    color: var(--text-tertiary, #64748B);
}
.qc-widget-quote[b-uuaci4ymsh] {
    color: var(--text-secondary, #475569);
    font-size: 0.75rem;
}
.qc-widget-snippet[b-uuaci4ymsh] {
    font-size: 0.8125rem;
    color: var(--text-secondary, #475569);
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}
.qc-widget-time[b-uuaci4ymsh] {
    font-size: 0.6875rem;
    color: var(--text-tertiary, #64748B);
    white-space: nowrap;
    flex-shrink: 0;
}
.qc-widget-more[b-uuaci4ymsh] {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    color: var(--text-tertiary, #64748B);
    font-style: italic;
}
/* /Components/Pages/Demo.razor.rz.scp.css */
.demo[b-cl5ej21g2g] { background: var(--bg); min-height: 100vh; }

/* ═══ NAV ═══ */
.demo-nav[b-cl5ej21g2g] { display: flex; align-items: center; gap: 12px; padding: 14px 40px; border-bottom: 1px solid var(--border); }
.demo-logo[b-cl5ej21g2g] { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; color: var(--text); text-decoration: none; }
.demo-logo:hover[b-cl5ej21g2g] { text-decoration: none; }
.demo-logo .mark[b-cl5ej21g2g] { color: var(--accent); }
.demo-badge[b-cl5ej21g2g] { background: var(--warning-bg); color: var(--warning); font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 100px; text-transform: uppercase; letter-spacing: 0.5px; }

/* ═══ TABS ═══ */
.demo-tabs[b-cl5ej21g2g] { display: flex; gap: 4px; padding: 12px 40px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.demo-tab[b-cl5ej21g2g] { display: flex; align-items: center; gap: 6px; padding: 10px 18px; border: none; background: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; font-weight: 500; color: var(--text-secondary); transition: all 0.15s; white-space: nowrap; }
.demo-tab .material-icons-round[b-cl5ej21g2g] { font-size: 20px; }
.demo-tab:hover[b-cl5ej21g2g] { background: var(--primary-50); color: var(--text); }
.demo-tab.active[b-cl5ej21g2g] { background: var(--accent); color: #fff; }
.demo-tab.active .material-icons-round[b-cl5ej21g2g] { color: #fff; }

/* ═══ SECTION ═══ */
.demo-section[b-cl5ej21g2g] { max-width: 960px; margin: 0 auto; padding: 32px 40px; }
.demo-title[b-cl5ej21g2g] { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.demo-desc[b-cl5ej21g2g] { font-size: 15px; color: var(--text-secondary); margin-bottom: 24px; line-height: 1.5; }

/* ═══ KPI ═══ */
.demo-kpi-grid[b-cl5ej21g2g] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.demo-kpi[b-cl5ej21g2g] { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 20px; }
.demo-kpi-label[b-cl5ej21g2g] { font-size: 12px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.demo-kpi-value[b-cl5ej21g2g] { font-size: 24px; font-weight: 800; }
.demo-kpi-pct[b-cl5ej21g2g] { font-size: 14px; color: var(--success); font-weight: 600; }

/* ═══ CARD ═══ */
.demo-card[b-cl5ej21g2g] { border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
.demo-card-title[b-cl5ej21g2g] { font-size: 14px; font-weight: 600; color: var(--text-secondary); margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.5px; }

/* ═══ ACTIVITY ═══ */
.demo-activity[b-cl5ej21g2g] { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-light, #f3f4f6); }
.demo-activity:last-child[b-cl5ej21g2g] { border-bottom: none; }
.demo-dot[b-cl5ej21g2g] { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.demo-dot.green[b-cl5ej21g2g] { background: var(--success); }
.demo-dot.blue[b-cl5ej21g2g] { background: var(--accent); }
.demo-dot.yellow[b-cl5ej21g2g] { background: var(--warning); }
.demo-dot.gray[b-cl5ej21g2g] { background: var(--primary-300); }
.demo-activity-text[b-cl5ej21g2g] { font-size: 14px; }
.demo-activity-time[b-cl5ej21g2g] { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }

/* ═══ FILTERS ═══ */
.demo-filters[b-cl5ej21g2g] { display: flex; gap: 8px; margin-bottom: 16px; }
.demo-filter[b-cl5ej21g2g] { padding: 8px 18px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg); font-size: 13px; font-weight: 500; cursor: default; color: var(--text-secondary); }
.demo-filter.active[b-cl5ej21g2g] { background: var(--primary-900); color: #fff; border-color: var(--primary-900); }

/* ═══ TABLE ═══ */
.demo-table[b-cl5ej21g2g] { width: 100%; border-collapse: collapse; font-size: 14px; }
.demo-table th[b-cl5ej21g2g] { text-align: left; font-size: 12px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 12px; border-bottom: 2px solid var(--border); }
.demo-table td[b-cl5ej21g2g] { padding: 12px; border-bottom: 1px solid var(--border-light, #f3f4f6); }
.demo-mono[b-cl5ej21g2g] { font-family: monospace; font-size: 13px; }
.demo-right[b-cl5ej21g2g] { text-align: right; }
.demo-muted[b-cl5ej21g2g] { color: var(--text-tertiary); font-size: 13px; }

/* ═══ STEPPER ═══ */
.demo-stepper[b-cl5ej21g2g] { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 24px; }
.demo-step[b-cl5ej21g2g] { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.demo-step-circle[b-cl5ej21g2g] { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: var(--text-tertiary); }
.demo-step.active .demo-step-circle[b-cl5ej21g2g] { background: var(--accent); color: #fff; border-color: var(--accent); }
.demo-step.done .demo-step-circle[b-cl5ej21g2g] { background: var(--success); color: #fff; border-color: var(--success); }
.demo-step-label[b-cl5ej21g2g] { font-size: 12px; color: var(--text-tertiary); }
.demo-step.active .demo-step-label[b-cl5ej21g2g] { color: var(--accent); font-weight: 600; }
.demo-step-line[b-cl5ej21g2g] { width: 60px; height: 2px; background: var(--border); margin: 0 8px; margin-bottom: 22px; }

/* ═══ LINE ITEMS ═══ */
.demo-line-items[b-cl5ej21g2g] { display: flex; flex-direction: column; gap: 0; }
.demo-line-item[b-cl5ej21g2g] { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border-light, #f3f4f6); }
.demo-line-item:last-child[b-cl5ej21g2g] { border-bottom: none; }
.demo-li-name[b-cl5ej21g2g] { font-size: 14px; font-weight: 500; }
.demo-li-details[b-cl5ej21g2g] { font-size: 13px; color: var(--text-secondary); }
.demo-summary[b-cl5ej21g2g] { border-top: 2px solid var(--border); margin-top: 16px; padding-top: 12px; max-width: 280px; margin-left: auto; }
.demo-summary-row[b-cl5ej21g2g] { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-secondary); padding: 4px 0; }
.demo-summary-total[b-cl5ej21g2g] { display: flex; justify-content: space-between; font-size: 16px; font-weight: 700; padding-top: 8px; border-top: 2px solid var(--accent); margin-top: 8px; color: var(--accent); }

/* ═══ PDF PREVIEW ═══ */
.demo-pdf[b-cl5ej21g2g] { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; box-shadow: 0 4px 24px rgba(0,0,0,0.06); max-width: 640px; margin: 0 auto; }
.demo-pdf-header[b-cl5ej21g2g] { display: flex; justify-content: space-between; margin-bottom: 16px; }
.demo-pdf-company[b-cl5ej21g2g] { font-size: 16px; font-weight: 700; }
.demo-pdf-meta[b-cl5ej21g2g] { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.demo-pdf-right[b-cl5ej21g2g] { text-align: right; }
.demo-pdf-title[b-cl5ej21g2g] { font-size: 24px; font-weight: 800; color: var(--accent); }
.demo-pdf-number[b-cl5ej21g2g] { font-size: 12px; color: var(--text-tertiary); }
.demo-pdf-accent[b-cl5ej21g2g] { height: 3px; background: var(--accent); border-radius: 2px; margin-bottom: 16px; }
.demo-pdf-client[b-cl5ej21g2g] { font-size: 13px; margin-bottom: 16px; }
.demo-pdf-table[b-cl5ej21g2g] { font-size: 13px; }
.demo-pdf-row[b-cl5ej21g2g] { display: grid; grid-template-columns: 30px 3fr 1fr 1fr 1fr; gap: 8px; padding: 8px 4px; border-bottom: 1px solid #f3f4f6; }
.demo-pdf-header-row[b-cl5ej21g2g] { font-weight: 600; font-size: 11px; color: #fff; background: var(--accent); border-radius: 4px; padding: 8px; border-bottom: none; }
.demo-pdf-alt[b-cl5ej21g2g] { background: #f9fafb; }
.demo-pdf-total[b-cl5ej21g2g] { display: flex; justify-content: flex-end; gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 2px solid var(--accent); font-size: 16px; color: var(--accent); }

/* ═══ CLIENTS ═══ */
.demo-clients-grid[b-cl5ej21g2g] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.demo-client-card[b-cl5ej21g2g] { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; }
.demo-client-name[b-cl5ej21g2g] { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.demo-client-info[b-cl5ej21g2g] { font-size: 13px; color: var(--text-secondary); }
.demo-client-quotes[b-cl5ej21g2g] { font-size: 12px; color: var(--text-tertiary); margin-top: 8px; }

/* ═══ QUOTE CARDS ═══ */
.demo-quotes-list[b-cl5ej21g2g] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.demo-quote-card[b-cl5ej21g2g] {
    border: 1px solid var(--border, #d1d5db);
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--bg, #fff);
}
.demo-quote-card-top[b-cl5ej21g2g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.demo-quote-card-client[b-cl5ej21g2g] {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
}
.demo-quote-card-bottom[b-cl5ej21g2g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

/* ═══ PHOTOS ═══ */
.demo-photo-zone[b-cl5ej21g2g] {
    border: 2px dashed var(--border, #d1d5db);
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    margin-bottom: 16px;
}
.demo-photo-grid[b-cl5ej21g2g] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.demo-photo-card[b-cl5ej21g2g] {
    border: 1px solid var(--border, #d1d5db);
    border-radius: 8px;
    overflow: hidden;
}
.demo-photo-thumb[b-cl5ej21g2g] {
    aspect-ratio: 4/3;
    background: var(--primary-50, #f0f5ff);
    display: flex;
    align-items: center;
    justify-content: center;
}
.demo-photo-desc[b-cl5ej21g2g] {
    padding: 6px 8px;
    font-size: 11px;
    color: var(--text-secondary, #6b7280);
    border-top: 1px solid var(--border-light, #e5e7eb);
}

[b-cl5ej21g2g] .pro-tag {
    display: inline-block;
    background: linear-gradient(135deg, #dbeafe, #ede9fe);
    color: #4338ca;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 4px;
}

/* ═══ EMAIL FLOW ═══ */
.demo-email-flow[b-cl5ej21g2g] {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 500px;
}
.demo-email-card[b-cl5ej21g2g] {
    border-radius: 12px;
    padding: 18px 20px;
    border: 1px solid var(--border, #d1d5db);
}
.demo-email-out[b-cl5ej21g2g] {
    background: var(--primary-50, #f0f5ff);
    border-color: var(--accent, #2563EB);
    border-left: 3px solid var(--accent, #2563EB);
}
.demo-email-in[b-cl5ej21g2g] {
    background: #ecfdf5;
    border-color: #a7f3d0;
    border-left: 3px solid #16a34a;
}
.demo-email-badge[b-cl5ej21g2g] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.demo-email-badge.out[b-cl5ej21g2g] { color: var(--accent, #2563EB); }
.demo-email-badge.in[b-cl5ej21g2g] { color: #16a34a; }
.demo-email-subject[b-cl5ej21g2g] {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
}
.demo-email-body[b-cl5ej21g2g] {
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
    line-height: 1.5;
}
.demo-email-btn[b-cl5ej21g2g] {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 20px;
    background: var(--primary-900, #111827);
    color: #fff;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}
.demo-email-attach[b-cl5ej21g2g] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-tertiary, #9ca3af);
}
.demo-email-arrow[b-cl5ej21g2g] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 0 12px 20px;
    font-size: 12px;
    color: var(--text-tertiary, #9ca3af);
    font-weight: 500;
}
.demo-email-arrow .material-icons-round[b-cl5ej21g2g] { font-size: 18px; }

/* ═══ CTA ═══ */
.demo-cta[b-cl5ej21g2g] { text-align: center; padding: 56px 40px; background: linear-gradient(180deg, transparent, #f0f5ff); }
.demo-cta h3[b-cl5ej21g2g] { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.demo-cta p[b-cl5ej21g2g] { font-size: 16px; color: var(--text-secondary); margin-bottom: 24px; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
    .demo-nav[b-cl5ej21g2g] { padding: 12px 16px; }
    .demo-tabs[b-cl5ej21g2g] { padding: 10px 16px; }
    .demo-section[b-cl5ej21g2g] { padding: 24px 16px; }
    .demo-kpi-grid[b-cl5ej21g2g] { grid-template-columns: repeat(2, 1fr); }
    .demo-clients-grid[b-cl5ej21g2g] { grid-template-columns: 1fr; }
    .demo-tab-label[b-cl5ej21g2g] { display: none; }
    .demo-tab[b-cl5ej21g2g] { padding: 10px 14px; }
    .demo-pdf[b-cl5ej21g2g] { padding: 20px; }
    .demo-cta[b-cl5ej21g2g] { padding: 40px 16px; }
    .demo-table[b-cl5ej21g2g] { font-size: 13px; }
    .demo-table th[b-cl5ej21g2g], .demo-table td[b-cl5ej21g2g] { padding: 8px 6px; }
    .demo-step-label[b-cl5ej21g2g] { display: none; }
    .demo-step-line[b-cl5ej21g2g] { width: 20px; }
    .demo-photo-zone[b-cl5ej21g2g] { padding: 24px 16px; }
    .demo-photo-zone p[b-cl5ej21g2g] { font-size: 13px; }
}

@media (max-width: 480px) {
    .demo-kpi-grid[b-cl5ej21g2g] { grid-template-columns: 1fr 1fr; gap: 8px; }
    .demo-kpi[b-cl5ej21g2g] { padding: 14px; }
    .demo-kpi-value[b-cl5ej21g2g] { font-size: 20px; }
    .demo-stepper[b-cl5ej21g2g] { gap: 0; }
    .demo-step-line[b-cl5ej21g2g] { width: 16px; }
    .demo-step-circle[b-cl5ej21g2g] { width: 28px; height: 28px; font-size: 12px; }
    .demo-pdf-row[b-cl5ej21g2g] { grid-template-columns: 20px 2fr 1fr 1fr; font-size: 11px; }
    .demo-pdf-row span:nth-child(4)[b-cl5ej21g2g] { display: none; }
    .demo-clients-grid[b-cl5ej21g2g] { grid-template-columns: 1fr; }
    .demo-photo-grid[b-cl5ej21g2g] { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .demo-photo-desc[b-cl5ej21g2g] { font-size: 10px; padding: 4px 6px; }
    .demo-li-name[b-cl5ej21g2g] { font-size: 14px; }
    .demo-li-details[b-cl5ej21g2g] { font-size: 12px; }
    .demo-title[b-cl5ej21g2g] { font-size: 20px; }
    .demo-desc[b-cl5ej21g2g] { font-size: 14px; }
}
/* /Components/Pages/ForgotPassword.razor.rz.scp.css */
/* ═══ AUTH SCREEN — dark themed ═══ */
.auth-screen[b-s6mitv7epb] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(175deg, #0A0F1E 0%, #0F1629 60%, #111936 100%);
    padding: 2.5rem 1rem;
    position: relative;
    overflow: hidden;
}

.auth-screen[b-s6mitv7epb]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 1.75rem 1.75rem;
    pointer-events: none;
}

.auth-screen[b-s6mitv7epb]::after {
    content: '';
    position: absolute;
    width: 30rem;
    height: 30rem;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.15) 0%, transparent 65%);
    top: -10rem;
    right: -5rem;
    pointer-events: none;
}

.auth-box[b-s6mitv7epb] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    padding: 2.5rem 2.75rem;
    width: 100%;
    max-width: 28rem;
    backdrop-filter: blur(12px);
    position: relative;
    z-index: 1;
    animation: authFadeUp-b-s6mitv7epb 0.5s ease-out both;
}

@keyframes authFadeUp-b-s6mitv7epb {
    from { opacity: 0; transform: translateY(1.5rem); }
    to { opacity: 1; transform: translateY(0); }
}

.auth-logo[b-s6mitv7epb] {
    font-family: 'Sora', 'DM Sans', system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    text-align: center;
    margin-bottom: 2rem;
    color: #fff;
    text-decoration: none;
    display: block;
}

.auth-logo:hover[b-s6mitv7epb] { text-decoration: none; }
.auth-logo .mark[b-s6mitv7epb] { color: #818CF8; }

.auth-title[b-s6mitv7epb] {
    font-family: 'Sora', 'DM Sans', system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.5rem;
    color: #fff;
    letter-spacing: -0.02em;
}

.auth-subtitle[b-s6mitv7epb] {
    font-size: 0.9375rem;
    color: #8892A8;
    text-align: center;
    margin-bottom: 2rem;
    line-height: 1.5;
}

.auth-errors[b-s6mitv7epb] {
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.2);
    border-radius: 0.5rem;
    padding: 0.875rem 1.125rem;
    margin-bottom: 1.5rem;
}

.auth-error[b-s6mitv7epb] {
    font-size: 0.875rem;
    color: #FCA5A5;
}

.auth-box :deep(.form-label)[b-s6mitv7epb] { color: #C8CED8; font-size: 0.8125rem; }
.auth-box :deep(.form-input)[b-s6mitv7epb] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #E2E8F0;
    border-radius: 0.5rem;
}
.auth-box :deep(.form-input):focus[b-s6mitv7epb] {
    border-color: #4F46E5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}
.auth-box :deep(.form-input)[b-s6mitv7epb]::placeholder { color: #4A5568; }

.auth-btn[b-s6mitv7epb] {
    justify-content: center;
    background: linear-gradient(135deg, #4F46E5, #4338CA) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.25) !important;
    border-radius: 0.625rem !important;
    transition: all 0.3s !important;
}

.auth-btn:hover[b-s6mitv7epb] {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.35) !important;
}

.auth-footer[b-s6mitv7epb] {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: #8892A8;
}

.auth-footer a[b-s6mitv7epb] { color: #818CF8 !important; font-weight: 500; }

@media (max-width: 480px) {
    .auth-box[b-s6mitv7epb] { padding: 2rem 1.5rem; }
    .auth-logo[b-s6mitv7epb] { font-size: 1.625rem; margin-bottom: 1.5rem; }
    .auth-title[b-s6mitv7epb] { font-size: 1.25rem; }
    .auth-subtitle[b-s6mitv7epb] { font-size: 0.875rem; }
}

@media (max-width: 360px) {
    .auth-screen[b-s6mitv7epb] { padding: 1.25rem 0.5rem; }
    .auth-box[b-s6mitv7epb] { padding: 1.5rem 1rem; }
    .auth-logo[b-s6mitv7epb] { font-size: 1.5rem; margin-bottom: 1.25rem; }
    .auth-title[b-s6mitv7epb] { font-size: 1.125rem; }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   ŁatwaWycena Landing — "Precision Craft" v2
   rem base: 16px · Sora headings · full-bleed sections
   ═══════════════════════════════════════════ */

/* ═══ LANDING TOKENS ═══ */
.landing[b-hktd0zoyju] {
    --l-dark: #0A0F1E;
    --l-dark-2: #0F1629;
    --l-dark-surface: #151C32;
    --l-light: #F5F6FA;
    --l-light-2: #ECEEF5;
    --l-accent: #4F46E5;
    --l-accent-hover: #4338CA;
    --l-accent-light: #818CF8;
    --l-accent-glow: rgba(79, 70, 229, 0.2);
    --l-warm: #F59E0B;
    --l-warm-bg: rgba(245, 158, 11, 0.1);
    --l-text-dark: #E2E8F0;
    --l-text-dark-muted: #8892A8;
    --l-heading: 'Sora', 'DM Sans', system-ui, sans-serif;
    --l-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--l-dark);
    overflow-x: hidden;
}

/* ═══ ANIMATIONS ═══ */
@keyframes fadeUp-b-hktd0zoyju {
    from { opacity: 0; transform: translateY(1.75rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn-b-hktd0zoyju {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInRight-b-hktd0zoyju {
    from { opacity: 0; transform: translateX(2.5rem) rotate(2deg); }
    to { opacity: 1; transform: translateX(0) rotate(1deg); }
}

@keyframes pulse-b-hktd0zoyju {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.5); }
}

@keyframes float-b-hktd0zoyju {
    0%, 100% { transform: translateY(0) rotate(1deg); }
    50% { transform: translateY(-0.5rem) rotate(1.5deg); }
}

@keyframes scaleIn-b-hktd0zoyju {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes slideUp-b-hktd0zoyju {
    from { opacity: 0; transform: translateY(2rem); }
    to { opacity: 1; transform: translateY(0); }
}

/* ═══ CONTAINER ═══ */
.section-inner[b-hktd0zoyju] {
    max-width: 82.5rem;
    margin: 0 auto;
    padding: 0 3.5rem;
}

.section-inner-narrow[b-hktd0zoyju] {
    max-width: 52rem;
}

/* ═══ NAVBAR ═══ */
.landing-nav[b-hktd0zoyju] {
    display: flex;
    align-items: center;
    padding: 1.125rem 3.5rem;
    max-width: 90rem;
    margin: 0 auto;
    position: relative;
    z-index: 100;
}

.landing-logo[b-hktd0zoyju] {
    font-family: var(--l-heading);
    font-size: 1.5rem;
    font-weight: 800;
    flex: 1;
    letter-spacing: -0.03em;
    color: #fff;
}

.landing-logo .mark[b-hktd0zoyju] {
    color: var(--l-accent-light);
}

.landing-nav-links[b-hktd0zoyju] {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.nav-link-login[b-hktd0zoyju] {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--l-text-dark-muted) !important;
    text-decoration: none;
    transition: color 0.2s;
}

.nav-link-login:hover[b-hktd0zoyju] {
    color: #fff !important;
    text-decoration: none !important;
}

.btn-nav-cta[b-hktd0zoyju] {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    padding: 0.5625rem 1.375rem !important;
    border-radius: 0.5rem !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    backdrop-filter: blur(8px);
    transition: all 0.25s !important;
    box-shadow: none !important;
    white-space: nowrap;
}

.btn-nav-cta:hover[b-hktd0zoyju] {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}

/* ═══ HERO ═══ */
.landing-hero[b-hktd0zoyju] {
    position: relative;
    background: linear-gradient(175deg, var(--l-dark) 0%, var(--l-dark-2) 60%, #111936 100%);
    padding: 2.5rem 3.5rem 5rem;
    overflow: hidden;
    margin-top: -4.75rem;
    padding-top: 7.25rem;
}

.hero-bg-pattern[b-hktd0zoyju] {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 1.75rem 1.75rem;
    pointer-events: none;
}

.hero-glow[b-hktd0zoyju] {
    position: absolute;
    width: 43.75rem;
    height: 43.75rem;
    background: radial-gradient(circle, var(--l-accent-glow) 0%, transparent 65%);
    top: -11.25rem;
    right: -6.25rem;
    pointer-events: none;
}

.hero-content[b-hktd0zoyju] {
    max-width: 82.5rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 4rem;
}

.hero-text[b-hktd0zoyju] {
    flex: 1;
    min-width: 0;
    animation: fadeUp-b-hktd0zoyju 0.7s ease-out both;
}

.hero-badge[b-hktd0zoyju] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    background: var(--l-warm-bg);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: var(--l-warm);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.5rem 1.125rem;
    border-radius: 6.25rem;
    margin-bottom: 1.75rem;
    animation: scaleIn-b-hktd0zoyju 0.5s ease-out 0.3s both;
}

.badge-pulse[b-hktd0zoyju] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--l-warm);
    flex-shrink: 0;
    animation: pulse-b-hktd0zoyju 2s ease-in-out infinite;
}

.landing-hero h1[b-hktd0zoyju] {
    font-family: var(--l-heading);
    font-size: 3.75rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin-bottom: 1.5rem;
    color: #fff;
}

.hero-accent[b-hktd0zoyju] {
    background: linear-gradient(135deg, var(--l-accent-light), #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-desc[b-hktd0zoyju] {
    font-size: 1.125rem;
    color: var(--l-text-dark-muted);
    line-height: 1.7;
    margin-bottom: 2.25rem;
    max-width: 32.5rem;
    animation: fadeUp-b-hktd0zoyju 0.7s ease-out 0.15s both;
}

.landing-cta[b-hktd0zoyju] {
    display: flex;
    gap: 0.875rem;
    margin-bottom: 2.5rem;
    animation: fadeUp-b-hktd0zoyju 0.7s ease-out 0.25s both;
}

.btn-hero-primary[b-hktd0zoyju] {
    font-size: 1rem !important;
    font-weight: 700 !important;
    padding: 0.875rem 1.75rem !important;
    border-radius: 0.625rem !important;
    background: linear-gradient(135deg, var(--l-accent), var(--l-accent-hover)) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 20px var(--l-accent-glow), 0 1px 3px rgba(0,0,0,0.2) !important;
    transition: all 0.3s !important;
    text-decoration: none !important;
}

.btn-hero-primary:hover[b-hktd0zoyju] {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 32px rgba(79, 70, 229, 0.35), 0 2px 6px rgba(0,0,0,0.2) !important;
    text-decoration: none !important;
}

.btn-hero-primary .material-icons-round[b-hktd0zoyju] {
    font-size: 1.25rem;
    transition: transform 0.25s;
}

.btn-hero-primary:hover .material-icons-round[b-hktd0zoyju] {
    transform: translateX(3px);
}

.btn-hero-ghost[b-hktd0zoyju] {
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 0.875rem 1.75rem !important;
    border-radius: 0.625rem !important;
    background: transparent !important;
    color: var(--l-text-dark-muted) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
    transition: all 0.25s !important;
    text-decoration: none !important;
}

.btn-hero-ghost:hover[b-hktd0zoyju] {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    text-decoration: none !important;
}

.landing-trust[b-hktd0zoyju] {
    display: flex;
    gap: 1.75rem;
    flex-wrap: wrap;
    animation: fadeUp-b-hktd0zoyju 0.7s ease-out 0.35s both;
}

.trust-item[b-hktd0zoyju] {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.8125rem;
    color: var(--l-text-dark-muted);
}

.trust-item .material-icons-round[b-hktd0zoyju] {
    font-size: 1rem;
    color: #34D399;
}

.hero-visual[b-hktd0zoyju] {
    flex-shrink: 0;
    width: 32.5rem;
    animation: slideInRight-b-hktd0zoyju 0.8s ease-out 0.2s both;
}

.hero-img-frame[b-hktd0zoyju] {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    animation: float-b-hktd0zoyju 6s ease-in-out infinite;
}

.hero-img[b-hktd0zoyju] {
    display: block;
    width: 100%;
    height: auto;
}

/* ═══ SECTION HEADERS ═══ */
.section-header[b-hktd0zoyju] {
    text-align: center;
    margin-bottom: 3.25rem;
    animation: slideUp-b-hktd0zoyju 0.6s ease-out both;
}

.section-tag[b-hktd0zoyju] {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--l-accent);
    background: rgba(79, 70, 229, 0.08);
    padding: 0.375rem 1rem;
    border-radius: 6.25rem;
    margin-bottom: 1.25rem;
}

.section-header h2[b-hktd0zoyju] {
    font-family: var(--l-heading);
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.15;
    margin-bottom: 1rem;
    color: var(--text);
}

.section-sub[b-hktd0zoyju] {
    font-size: 1.125rem;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 35rem;
    margin: 0 auto;
}

/* ═══ FEATURES ═══ */
.landing-features[b-hktd0zoyju] {
    background: var(--l-light);
    padding: 5.5rem 0;
}

.features-grid[b-hktd0zoyju] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.feature-card[b-hktd0zoyju] {
    background: #fff;
    border-radius: 0.875rem;
    padding: 1.75rem;
    border: 1px solid var(--l-light-2);
    border-left: 3px solid transparent;
    position: relative;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    animation: slideUp-b-hktd0zoyju 0.5s ease-out both;
}

/* stagger */
.feature-card:nth-child(1)[b-hktd0zoyju] { animation-delay: 0.05s; }
.feature-card:nth-child(2)[b-hktd0zoyju] { animation-delay: 0.1s; }
.feature-card:nth-child(3)[b-hktd0zoyju] { animation-delay: 0.15s; }
.feature-card:nth-child(4)[b-hktd0zoyju] { animation-delay: 0.2s; }
.feature-card:nth-child(5)[b-hktd0zoyju] { animation-delay: 0.25s; }
.feature-card:nth-child(6)[b-hktd0zoyju] { animation-delay: 0.3s; }
.feature-card:nth-child(7)[b-hktd0zoyju] { animation-delay: 0.35s; }
.feature-card:nth-child(8)[b-hktd0zoyju] { animation-delay: 0.4s; }
.feature-card:nth-child(9)[b-hktd0zoyju] { animation-delay: 0.45s; }

/* cycling left border colors */
.feature-card:nth-child(3n+1)[b-hktd0zoyju] { border-left-color: var(--l-accent); }
.feature-card:nth-child(3n+2)[b-hktd0zoyju] { border-left-color: #7C3AED; }
.feature-card:nth-child(3n)[b-hktd0zoyju]   { border-left-color: #0EA5E9; }

.feature-card:hover[b-hktd0zoyju] {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
}

.feature-icon[b-hktd0zoyju] {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(129, 140, 248, 0.06));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    flex-shrink: 0;
    transition: transform 0.3s;
}

.feature-card:hover .feature-icon[b-hktd0zoyju] {
    transform: scale(1.08);
}

.feature-icon .material-icons-round[b-hktd0zoyju] {
    font-size: 1.375rem;
    color: var(--l-accent);
}

.feature-card h3[b-hktd0zoyju] {
    font-family: var(--l-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.feature-card p[b-hktd0zoyju] {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ═══ HOW IT WORKS ═══ */
.landing-steps[b-hktd0zoyju] {
    padding: 5.5rem 0;
    background: #fff;
}

.steps-grid[b-hktd0zoyju] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    position: relative;
}

.step-card[b-hktd0zoyju] {
    text-align: center;
    padding: 2.5rem 1.75rem;
    position: relative;
    animation: slideUp-b-hktd0zoyju 0.5s ease-out both;
}

.step-card:nth-child(1)[b-hktd0zoyju] { animation-delay: 0.1s; }
.step-card:nth-child(2)[b-hktd0zoyju] { animation-delay: 0.2s; }
.step-card:nth-child(3)[b-hktd0zoyju] { animation-delay: 0.3s; }

.step-number[b-hktd0zoyju] {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--l-dark), var(--l-dark-2));
    color: #fff;
    font-family: var(--l-heading);
    font-size: 1.375rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    box-shadow: 0 4px 16px rgba(10, 15, 30, 0.15);
    transition: transform 0.3s, box-shadow 0.3s;
}

.step-card:hover .step-number[b-hktd0zoyju] {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(10, 15, 30, 0.2);
}

.step-connector[b-hktd0zoyju] {
    position: absolute;
    top: 4.25rem;
    right: -1rem;
    width: 2rem;
    height: 2px;
    background: linear-gradient(90deg, var(--l-light-2), transparent);
}

.step-card h3[b-hktd0zoyju] {
    font-family: var(--l-heading);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.step-card p[b-hktd0zoyju] {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.65;
}

/* ═══ PRICING ═══ */
.landing-pricing[b-hktd0zoyju] {
    background: var(--l-light);
    padding: 5.5rem 0;
}

.pricing-grid[b-hktd0zoyju] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 47.5rem;
    margin: 0 auto;
}

.pricing-grid-3[b-hktd0zoyju] {
    grid-template-columns: repeat(3, 1fr);
    max-width: 68.75rem;
    align-items: start;
}

.pricing-card[b-hktd0zoyju] {
    background: #fff;
    border: 1px solid var(--l-light-2);
    border-radius: 1rem;
    padding: 2.25rem;
    transition: all 0.35s;
    animation: slideUp-b-hktd0zoyju 0.5s ease-out both;
}

.pricing-card:nth-child(1)[b-hktd0zoyju] { animation-delay: 0.1s; }
.pricing-card:nth-child(2)[b-hktd0zoyju] { animation-delay: 0.2s; }
.pricing-card:nth-child(3)[b-hktd0zoyju] { animation-delay: 0.3s; }

.pricing-card:hover[b-hktd0zoyju] {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.07);
}

.pricing-card.featured[b-hktd0zoyju] {
    position: relative;
    border: 2px solid var(--l-accent);
    box-shadow: 0 0 0 1px var(--l-accent), 0 8px 24px var(--l-accent-glow);
    transform: scale(1.02);
}

.pricing-card.featured:hover[b-hktd0zoyju] {
    box-shadow: 0 0 0 1px var(--l-accent), 0 16px 40px rgba(79, 70, 229, 0.2);
    transform: scale(1.02) translateY(-3px);
}

.plan-badge-featured[b-hktd0zoyju] {
    position: absolute;
    top: -0.8125rem;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--l-accent), #7C3AED);
    color: white;
    padding: 0.3125rem 1.25rem;
    border-radius: 6.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.pricing-card .plan-name[b-hktd0zoyju] {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

.pricing-card .plan-price[b-hktd0zoyju] {
    font-family: var(--l-heading);
    font-size: 2.75rem;
    font-weight: 800;
    margin: 0.75rem 0 0.5rem;
    letter-spacing: -0.04em;
}

.pricing-card .plan-price span[b-hktd0zoyju] {
    font-family: var(--l-body);
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--text-tertiary);
}

.pricing-card .plan-desc[b-hktd0zoyju] {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    margin-bottom: 1.75rem;
}

.pricing-card ul[b-hktd0zoyju] {
    list-style: none;
    margin-bottom: 1.75rem;
}

.pricing-card li[b-hktd0zoyju] {
    font-size: 0.9375rem;
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--text-secondary);
}

.pricing-card li[b-hktd0zoyju]::before {
    content: '\2713';
    color: var(--l-accent);
    font-weight: 700;
    font-size: 0.8125rem;
    flex-shrink: 0;
}

/* compact two-column feature list for Pro / Pro+AI */
.plan-features-compact[b-hktd0zoyju] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}

.plan-features-compact li[b-hktd0zoyju] {
    font-size: 0.8125rem;
    padding: 0.375rem 0;
}

.plan-save[b-hktd0zoyju] {
    color: var(--l-accent);
    font-weight: 600;
}

.pro-promo[b-hktd0zoyju] {
    text-align: center;
    margin-bottom: 1rem;
    background: rgba(79, 70, 229, 0.06);
    border: 1px solid rgba(79, 70, 229, 0.15);
    border-radius: 0.625rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--l-accent);
    line-height: 1.5;
}

.btn-pricing[b-hktd0zoyju] {
    width: 100%;
    justify-content: center !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 0.625rem !important;
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    transition: all 0.25s !important;
}

.btn-pricing-primary[b-hktd0zoyju] {
    width: 100%;
    justify-content: center !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 0.625rem !important;
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    background: linear-gradient(135deg, var(--l-dark), var(--l-dark-2)) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(10, 15, 30, 0.12) !important;
    transition: all 0.25s !important;
    text-decoration: none !important;
}

.btn-pricing-primary:hover[b-hktd0zoyju] {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(10, 15, 30, 0.2) !important;
    text-decoration: none !important;
}

.btn-pricing-featured[b-hktd0zoyju] {
    width: 100%;
    justify-content: center !important;
    padding: 0.875rem 1.5rem !important;
    border-radius: 0.625rem !important;
    font-weight: 700 !important;
    font-size: 0.9375rem !important;
    background: linear-gradient(135deg, var(--l-accent), #7C3AED) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 16px var(--l-accent-glow) !important;
    transition: all 0.25s !important;
    text-decoration: none !important;
}

.btn-pricing-featured:hover[b-hktd0zoyju] {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(79, 70, 229, 0.3) !important;
    text-decoration: none !important;
}

/* ═══ AUDIENCE ═══ */
.landing-audience[b-hktd0zoyju] {
    background: linear-gradient(175deg, var(--l-dark) 0%, var(--l-dark-2) 100%);
    padding: 5.5rem 0;
    position: relative;
    overflow: hidden;
}

.section-header-light h2[b-hktd0zoyju] {
    color: #fff !important;
}

.section-tag-light[b-hktd0zoyju] {
    color: var(--l-accent-light) !important;
    background: rgba(129, 140, 248, 0.1) !important;
}

.audience-grid[b-hktd0zoyju] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.audience-card[b-hktd0zoyju] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.875rem;
    transition: all 0.35s;
    animation: slideUp-b-hktd0zoyju 0.5s ease-out both;
}

/* stagger audience cards */
.audience-card:nth-child(1)[b-hktd0zoyju] { animation-delay: 0.05s; }
.audience-card:nth-child(2)[b-hktd0zoyju] { animation-delay: 0.1s; }
.audience-card:nth-child(3)[b-hktd0zoyju] { animation-delay: 0.15s; }
.audience-card:nth-child(4)[b-hktd0zoyju] { animation-delay: 0.2s; }
.audience-card:nth-child(5)[b-hktd0zoyju] { animation-delay: 0.25s; }
.audience-card:nth-child(6)[b-hktd0zoyju] { animation-delay: 0.3s; }
.audience-card:nth-child(7)[b-hktd0zoyju] { animation-delay: 0.35s; }
.audience-card:nth-child(8)[b-hktd0zoyju] { animation-delay: 0.4s; }

.audience-card:hover[b-hktd0zoyju] {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-3px);
}

.audience-icon-wrap[b-hktd0zoyju] {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s;
}

.audience-card:hover .audience-icon-wrap[b-hktd0zoyju] {
    transform: scale(1.1);
}

/* unique icon colors per card */
.audience-card-1 .audience-icon-wrap[b-hktd0zoyju] { background: rgba(59, 130, 246, 0.12); }
.audience-card-1 .material-icons-round[b-hktd0zoyju] { color: #60A5FA; }
.audience-card-2 .audience-icon-wrap[b-hktd0zoyju] { background: rgba(245, 158, 11, 0.12); }
.audience-card-2 .material-icons-round[b-hktd0zoyju] { color: #FBBF24; }
.audience-card-3 .audience-icon-wrap[b-hktd0zoyju] { background: rgba(236, 72, 153, 0.12); }
.audience-card-3 .material-icons-round[b-hktd0zoyju] { color: #F472B6; }
.audience-card-4 .audience-icon-wrap[b-hktd0zoyju] { background: rgba(16, 185, 129, 0.12); }
.audience-card-4 .material-icons-round[b-hktd0zoyju] { color: #34D399; }
.audience-card-5 .audience-icon-wrap[b-hktd0zoyju] { background: rgba(251, 191, 36, 0.12); }
.audience-card-5 .material-icons-round[b-hktd0zoyju] { color: #FCD34D; }
.audience-card-6 .audience-icon-wrap[b-hktd0zoyju] { background: rgba(167, 139, 250, 0.12); }
.audience-card-6 .material-icons-round[b-hktd0zoyju] { color: #A78BFA; }
.audience-card-7 .audience-icon-wrap[b-hktd0zoyju] { background: rgba(6, 182, 212, 0.12); }
.audience-card-7 .material-icons-round[b-hktd0zoyju] { color: #22D3EE; }
.audience-card-8 .audience-icon-wrap[b-hktd0zoyju] { background: rgba(52, 211, 153, 0.12); }
.audience-card-8 .material-icons-round[b-hktd0zoyju] { color: #6EE7B7; }

.audience-icon-wrap .material-icons-round[b-hktd0zoyju] {
    font-size: 1.375rem;
}

.audience-body[b-hktd0zoyju] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.audience-body strong[b-hktd0zoyju] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
}

.audience-body span[b-hktd0zoyju] {
    font-size: 0.8125rem;
    color: var(--l-text-dark-muted);
    line-height: 1.4;
}

/* ═══ FAQ ═══ */
.landing-faq[b-hktd0zoyju] {
    padding: 5.5rem 0;
    background: #fff;
}

.faq-list[b-hktd0zoyju] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq-item[b-hktd0zoyju] {
    border-bottom: 1px solid var(--l-light-2);
    overflow: hidden;
    transition: all 0.25s;
}

.faq-item:first-child[b-hktd0zoyju] {
    border-top: 1px solid var(--l-light-2);
}

.faq-item[open][b-hktd0zoyju] {
    background: rgba(79, 70, 229, 0.02);
}

.faq-item summary[b-hktd0zoyju] {
    padding: 1.25rem 0.5rem 1.25rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: color 0.2s;
    position: relative;
    padding-left: 1.75rem;
}

.faq-item summary[b-hktd0zoyju]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.25rem;
    border-radius: 2px;
    background: var(--l-accent);
    opacity: 0.3;
    transition: opacity 0.25s, height 0.25s;
}

.faq-item[open] summary[b-hktd0zoyju]::before {
    opacity: 1;
    height: 1.75rem;
}

.faq-item summary[b-hktd0zoyju]::after {
    content: '';
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--text-tertiary);
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translateY(-0.25rem);
    transition: all 0.3s;
    flex-shrink: 0;
}

.faq-item[open] summary[b-hktd0zoyju]::after {
    border-color: var(--l-accent);
    transform: rotate(-135deg) translateY(-0.25rem);
}

.faq-item summary[b-hktd0zoyju]::-webkit-details-marker {
    display: none;
}

.faq-item p[b-hktd0zoyju] {
    padding: 0 1rem 1.25rem 1.75rem;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.7;
    animation: fadeIn-b-hktd0zoyju 0.25s ease-out;
}

/* ═══ PWA SECTION ═══ */
.landing-pwa[b-hktd0zoyju] {
    background: var(--l-light);
    padding: 5.5rem 0;
}

.pwa-grid[b-hktd0zoyju] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* phone frame */
.pwa-phone-col[b-hktd0zoyju] { display: flex; justify-content: center; }

.phone-frame[b-hktd0zoyju] {
    width: 17.5rem;
    position: relative;
    background: #1e293b;
    border-radius: 3rem;
    padding: 0.75rem;
    box-shadow: 0 25px 60px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.1);
    border: 4px solid #334155;
}
.phone-notch[b-hktd0zoyju] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 6rem;
    height: 1.5rem;
    background: #1e293b;
    border-radius: 0 0 1rem 1rem;
    z-index: 10;
}
.phone-btn-l1[b-hktd0zoyju] { position: absolute; left: -0.375rem; top: 6rem; width: 0.375rem; height: 2rem; background: #334155; border-radius: 0.125rem 0 0 0.125rem; }
.phone-btn-l2[b-hktd0zoyju] { position: absolute; left: -0.375rem; top: 9rem; width: 0.375rem; height: 2rem; background: #334155; border-radius: 0.125rem 0 0 0.125rem; }
.phone-btn-r[b-hktd0zoyju]  { position: absolute; right: -0.375rem; top: 8rem; width: 0.375rem; height: 3rem; background: #334155; border-radius: 0 0.125rem 0.125rem 0; }

.phone-notification[b-hktd0zoyju] {
    position: absolute;
    top: -1rem;
    right: -1rem;
    z-index: 20;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    border: 1px solid #e2e8f0;
    padding: 0.375rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    animation: gentleBounce-b-hktd0zoyju 2.4s ease-in-out infinite;
}
.phone-notif-text[b-hktd0zoyju] { font-size: 0.6875rem; font-weight: 600; color: #1e293b; white-space: nowrap; }

@keyframes gentleBounce-b-hktd0zoyju {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.phone-screen[b-hktd0zoyju] {
    background: #fff;
    border-radius: 2.4rem;
    overflow: hidden;
    height: 35rem;
    position: relative;
    display: flex;
    flex-direction: column;
}

.phone-status-bar[b-hktd0zoyju] {
    height: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 1.5rem 0;
    font-size: 0.625rem;
    color: #94a3b8;
}

.phone-topbar[b-hktd0zoyju] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem 0.625rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.875rem;
    color: #1e293b;
}
.phone-topbar-title[b-hktd0zoyju] { font-weight: 400; }
.phone-topbar-title strong[b-hktd0zoyju] { font-weight: 700; }

.phone-scroll-area[b-hktd0zoyju] {
    flex: 1;
    overflow: hidden;
}

.phone-scroll-content[b-hktd0zoyju] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem 1rem;
    animation: phoneScroll-b-hktd0zoyju 16s linear infinite;
}

@keyframes phoneScroll-b-hktd0zoyju {
    0% { transform: translateY(0); }
    45% { transform: translateY(0); }
    50% { transform: translateY(-50%); }
    95% { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}

.phone-day-label[b-hktd0zoyju] {
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    padding: 0.25rem 0.25rem 0;
}

.phone-card[b-hktd0zoyju] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 0.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.phone-card-row[b-hktd0zoyju] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}
.phone-card-badge[b-hktd0zoyju] {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
}
.phone-badge-accepted[b-hktd0zoyju] { background: #DCFCE7; color: #16a34a; }
.phone-badge-pending[b-hktd0zoyju]  { background: #FEF3C7; color: #D97706; }
.phone-badge-draft[b-hktd0zoyju]    { background: #F1F5F9; color: #64748b; }
.phone-badge-rejected[b-hktd0zoyju] { background: #FEE2E2; color: #DC2626; }
.phone-card-amount[b-hktd0zoyju] { font-size: 0.75rem; font-weight: 700; color: #1e293b; }
.phone-card-name[b-hktd0zoyju] { font-size: 0.75rem; font-weight: 600; color: #1e293b; }
.phone-card-desc[b-hktd0zoyju] { font-size: 0.625rem; color: #94a3b8; margin-top: 0.125rem; }

.phone-alert[b-hktd0zoyju] {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 1rem;
    padding: 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.phone-alert-title[b-hktd0zoyju] { font-size: 0.6875rem; font-weight: 600; color: #92400E; }
.phone-alert-sub[b-hktd0zoyju] { font-size: 0.625rem; color: #B45309; margin-top: 0.125rem; }

.phone-tab-bar[b-hktd0zoyju] {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.5rem 0.25rem;
    border-top: 1px solid #f1f5f9;
    height: 3.5rem;
    flex-shrink: 0;
}
.phone-tab[b-hktd0zoyju] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    font-size: 0.5625rem;
    color: #94a3b8;
}
.phone-tab .material-icons-round[b-hktd0zoyju] { font-size: 1.125rem; }
.phone-tab-active[b-hktd0zoyju] { color: var(--l-accent); }
.phone-tab-active .material-icons-round[b-hktd0zoyju] { color: var(--l-accent); }

/* info column */
.pwa-features[b-hktd0zoyju] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}
.pwa-feat[b-hktd0zoyju] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--l-light-2);
    border-radius: 1rem;
    padding: 1.25rem;
}
.pwa-feat-icon[b-hktd0zoyju] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    background: rgba(79,70,229,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pwa-feat-icon .material-icons-round[b-hktd0zoyju] { font-size: 1rem; color: var(--l-accent); }
.pwa-feat-title[b-hktd0zoyju] { font-size: 0.875rem; font-weight: 600; color: var(--text); }
.pwa-feat-desc[b-hktd0zoyju] { font-size: 0.8125rem; color: var(--text-secondary); margin-top: 0.25rem; line-height: 1.5; }

/* install instructions */
.pwa-install[b-hktd0zoyju] { }
.pwa-install-label[b-hktd0zoyju] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.pwa-tabs[b-hktd0zoyju] { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.pwa-tab[b-hktd0zoyju] {
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid var(--l-light-2);
    background: #fff;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}
.pwa-tab:hover[b-hktd0zoyju] { border-color: #cbd5e1; }
.pwa-tab-active[b-hktd0zoyju] {
    background: #1e293b;
    color: #fff;
    border-color: #1e293b;
}

.pwa-steps[b-hktd0zoyju] {
    background: #fff;
    border: 1px solid var(--l-light-2);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
}
.pwa-step[b-hktd0zoyju] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.625rem 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.pwa-step:last-child[b-hktd0zoyju] { border-bottom: none; }
.pwa-step-done span[b-hktd0zoyju] { color: #16a34a; font-weight: 500; }
.pwa-step-num[b-hktd0zoyju] {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--l-accent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.125rem;
}
.pwa-step-done .pwa-step-num[b-hktd0zoyju] {
    background: #16a34a;
}

/* ═══ FINAL CTA ═══ */
.landing-final-cta[b-hktd0zoyju] {
    text-align: center;
    padding: 6.25rem 3.5rem;
    background: linear-gradient(175deg, var(--l-dark) 0%, #111936 100%);
    position: relative;
    overflow: hidden;
}

.cta-glow[b-hktd0zoyju] {
    position: absolute;
    width: 37.5rem;
    height: 25rem;
    background: radial-gradient(ellipse, var(--l-accent-glow) 0%, transparent 65%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.landing-final-cta h2[b-hktd0zoyju] {
    font-family: var(--l-heading);
    font-size: 2.75rem;
    font-weight: 800;
    margin-bottom: 1rem;
    letter-spacing: -0.04em;
    color: #fff;
    position: relative;
    animation: slideUp-b-hktd0zoyju 0.6s ease-out both;
}

.landing-final-cta p[b-hktd0zoyju] {
    font-size: 1.125rem;
    color: var(--l-text-dark-muted);
    margin-bottom: 2.25rem;
    position: relative;
    animation: slideUp-b-hktd0zoyju 0.6s ease-out 0.1s both;
}

.btn-cta-final[b-hktd0zoyju] {
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    padding: 1rem 2.25rem !important;
    border-radius: 0.75rem !important;
    background: linear-gradient(135deg, var(--l-accent), var(--l-accent-hover)) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 24px var(--l-accent-glow), 0 1px 4px rgba(0,0,0,0.2) !important;
    transition: all 0.3s !important;
    position: relative;
    text-decoration: none !important;
    animation: slideUp-b-hktd0zoyju 0.6s ease-out 0.2s both;
}

.btn-cta-final:hover[b-hktd0zoyju] {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 40px rgba(79, 70, 229, 0.4), 0 2px 8px rgba(0,0,0,0.2) !important;
    text-decoration: none !important;
}

.btn-cta-final .material-icons-round[b-hktd0zoyju] {
    font-size: 1.25rem;
    transition: transform 0.25s;
}

.btn-cta-final:hover .material-icons-round[b-hktd0zoyju] {
    transform: translateX(3px);
}

.final-cta-note[b-hktd0zoyju] {
    margin-top: 1.25rem;
    font-size: 0.875rem;
    color: var(--l-text-dark-muted);
    position: relative;
    animation: fadeIn-b-hktd0zoyju 0.6s ease-out 0.4s both;
}

/* ═══ FOOTER ═══ */
.landing-footer[b-hktd0zoyju] {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 2.25rem 3.5rem;
    background: var(--l-dark);
}

.footer-content[b-hktd0zoyju] {
    max-width: 82.5rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-brand[b-hktd0zoyju] {
    font-family: var(--l-heading);
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--l-text-dark);
}

.footer-brand .mark[b-hktd0zoyju] {
    color: var(--l-accent-light);
}

.footer-links[b-hktd0zoyju] {
    display: flex;
    gap: 1.5rem;
}

.footer-links a[b-hktd0zoyju] {
    font-size: 0.8125rem;
    color: var(--l-text-dark-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-links a:hover[b-hktd0zoyju] {
    color: #fff;
}

.footer-copy[b-hktd0zoyju] {
    font-size: 0.8125rem;
    color: var(--l-text-dark-muted);
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */

@media (max-width: 1024px) {
    .section-inner[b-hktd0zoyju] {
        padding: 0 1.5rem;
    }

    .landing-nav[b-hktd0zoyju] {
        padding: 1rem 1.5rem;
    }

    .landing-hero[b-hktd0zoyju] {
        padding: 6.25rem 1.5rem 3.75rem;
    }

    .hero-content[b-hktd0zoyju] {
        flex-direction: column;
        gap: 3rem;
    }

    .hero-text[b-hktd0zoyju] {
        text-align: center;
    }

    .hero-desc[b-hktd0zoyju] {
        max-width: 100%;
    }

    .landing-cta[b-hktd0zoyju] {
        justify-content: center;
    }

    .landing-trust[b-hktd0zoyju] {
        justify-content: center;
    }

    .hero-visual[b-hktd0zoyju] {
        width: 100%;
        max-width: 35rem;
        margin: 0 auto;
    }

    .landing-hero h1[b-hktd0zoyju] {
        font-size: 3rem;
    }

    .landing-features[b-hktd0zoyju],
    .landing-steps[b-hktd0zoyju],
    .landing-pricing[b-hktd0zoyju],
    .landing-audience[b-hktd0zoyju],
    .landing-faq[b-hktd0zoyju] {
        padding: 4rem 0;
    }

    .landing-final-cta[b-hktd0zoyju] {
        padding: 4.5rem 1.5rem;
    }

    .landing-footer[b-hktd0zoyju] {
        padding: 2rem 1.5rem;
    }

    .features-grid[b-hktd0zoyju] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .pricing-grid-3[b-hktd0zoyju] {
        grid-template-columns: 1fr;
        max-width: 26.25rem;
    }

    .plan-features-compact[b-hktd0zoyju] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .section-inner[b-hktd0zoyju] {
        padding: 0 1rem;
    }

    .landing-nav[b-hktd0zoyju] {
        padding: 0.875rem 1rem;
    }

    .landing-nav-links[b-hktd0zoyju] {
        gap: 0.625rem;
    }

    .landing-hero[b-hktd0zoyju] {
        padding: 5.5rem 1rem 3rem;
        margin-top: -3.75rem;
        padding-top: 5.75rem;
    }

    .landing-hero h1[b-hktd0zoyju] {
        font-size: 2.125rem;
        letter-spacing: -0.03em;
    }

    .hero-desc[b-hktd0zoyju] {
        font-size: 0.9375rem;
        margin-bottom: 1.75rem;
    }

    .landing-cta[b-hktd0zoyju] {
        flex-direction: column;
        align-items: center;
    }

    .hero-visual[b-hktd0zoyju] {
        max-width: 100%;
    }

    .hero-img-frame[b-hktd0zoyju] {
        animation: none;
    }

    .section-header h2[b-hktd0zoyju] {
        font-size: 1.875rem;
        letter-spacing: -0.03em;
    }

    .section-header-light h2[b-hktd0zoyju] {
        font-size: 1.75rem;
    }

    .features-grid[b-hktd0zoyju] {
        grid-template-columns: 1fr;
    }

    .landing-features[b-hktd0zoyju],
    .landing-steps[b-hktd0zoyju],
    .landing-pricing[b-hktd0zoyju],
    .landing-audience[b-hktd0zoyju],
    .landing-faq[b-hktd0zoyju],
    .landing-pwa[b-hktd0zoyju] {
        padding: 3rem 0;
    }

    .pwa-grid[b-hktd0zoyju] {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .pwa-phone-col[b-hktd0zoyju] { order: -1; }

    .phone-frame[b-hktd0zoyju] { width: 15rem; }
    .phone-screen[b-hktd0zoyju] { height: 30rem; }

    .feature-card[b-hktd0zoyju] {
        padding: 1.5rem;
    }

    .steps-grid[b-hktd0zoyju] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .step-connector[b-hktd0zoyju] {
        display: none;
    }

    .step-card[b-hktd0zoyju] {
        padding: 1.5rem;
    }

    .pricing-card[b-hktd0zoyju] {
        padding: 1.75rem;
    }

    .audience-grid[b-hktd0zoyju] {
        grid-template-columns: repeat(2, 1fr);
    }

    .landing-final-cta[b-hktd0zoyju] {
        padding: 3.5rem 1rem;
    }

    .landing-final-cta h2[b-hktd0zoyju] {
        font-size: 1.875rem;
    }

    .landing-final-cta p[b-hktd0zoyju] {
        font-size: 0.9375rem;
    }

    .trust-item[b-hktd0zoyju] {
        font-size: 0.75rem;
    }

    .landing-footer[b-hktd0zoyju] {
        padding: 1.5rem 1rem;
    }

    .footer-content[b-hktd0zoyju] {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .landing-logo[b-hktd0zoyju] {
        font-size: 1.25rem;
    }

    .landing-nav-links[b-hktd0zoyju] {
        gap: 0.5rem;
    }

    .nav-link-login[b-hktd0zoyju] {
        font-size: 0.8125rem !important;
    }

    .btn-nav-cta[b-hktd0zoyju] {
        font-size: 0.8125rem !important;
        padding: 0.4375rem 0.875rem !important;
    }

    .landing-hero h1[b-hktd0zoyju] {
        font-size: 1.75rem;
        letter-spacing: -0.03em;
    }

    .hero-desc[b-hktd0zoyju] {
        font-size: 0.875rem;
    }

    .landing-cta .btn[b-hktd0zoyju] {
        width: 100%;
        justify-content: center;
    }

    .landing-features[b-hktd0zoyju],
    .landing-steps[b-hktd0zoyju],
    .landing-pricing[b-hktd0zoyju],
    .landing-audience[b-hktd0zoyju],
    .landing-faq[b-hktd0zoyju] {
        padding: 2.25rem 0;
    }

    .section-inner[b-hktd0zoyju] {
        padding: 0 0.75rem;
    }

    .features-grid[b-hktd0zoyju] {
        gap: 0.75rem;
    }

    .feature-card[b-hktd0zoyju] {
        padding: 1.25rem;
    }

    .feature-card h3[b-hktd0zoyju] {
        font-size: 1rem;
    }

    .feature-card p[b-hktd0zoyju] {
        font-size: 0.875rem;
    }

    .section-header h2[b-hktd0zoyju] {
        font-size: 1.625rem;
    }

    .pricing-card .plan-price[b-hktd0zoyju] {
        font-size: 2.25rem;
    }

    .step-card[b-hktd0zoyju] {
        padding: 1.25rem;
    }

    .faq-item summary[b-hktd0zoyju] {
        padding: 1rem 1.125rem;
        font-size: 0.9375rem;
    }

    .faq-item p[b-hktd0zoyju] {
        padding: 0 1.125rem 1rem;
        font-size: 0.875rem;
    }

    .audience-grid[b-hktd0zoyju] {
        gap: 0.5rem;
    }

    .audience-card[b-hktd0zoyju] {
        padding: 0.875rem;
        gap: 0.75rem;
    }

    .audience-icon-wrap[b-hktd0zoyju] {
        width: 2.25rem;
        height: 2.25rem;
    }

    .audience-body strong[b-hktd0zoyju] {
        font-size: 0.875rem;
    }

    .audience-body span[b-hktd0zoyju] {
        font-size: 0.75rem;
    }

    .landing-final-cta[b-hktd0zoyju] {
        padding: 2.5rem 0.75rem;
    }

    .landing-final-cta h2[b-hktd0zoyju] {
        font-size: 1.625rem;
    }

    .hero-badge[b-hktd0zoyju] {
        font-size: 0.75rem;
        padding: 0.375rem 0.875rem;
    }

    .footer-links[b-hktd0zoyju] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .hero-glow[b-hktd0zoyju] {
        width: 25rem;
        height: 25rem;
        top: -9.375rem;
        right: -9.375rem;
    }
}

@media (max-width: 360px) {
    .landing-hero[b-hktd0zoyju] {
        padding: 4.75rem 0.625rem 2rem;
        padding-top: 5rem;
    }

    .landing-hero h1[b-hktd0zoyju] {
        font-size: 1.5rem;
    }

    .landing-nav[b-hktd0zoyju] {
        padding: 0.75rem 0.625rem;
    }

    .landing-logo[b-hktd0zoyju] {
        font-size: 1rem;
    }

    .landing-nav-links[b-hktd0zoyju] {
        gap: 0.25rem;
    }

    .nav-link-login[b-hktd0zoyju] {
        font-size: 0.6875rem !important;
    }

    .btn-nav-cta[b-hktd0zoyju] {
        font-size: 0.6875rem !important;
        padding: 0.3125rem 0.5rem !important;
    }

    .section-inner[b-hktd0zoyju] {
        padding: 0 0.625rem;
    }

    .landing-features[b-hktd0zoyju],
    .landing-steps[b-hktd0zoyju],
    .landing-pricing[b-hktd0zoyju],
    .landing-audience[b-hktd0zoyju],
    .landing-faq[b-hktd0zoyju] {
        padding: 1.75rem 0;
    }

    .landing-final-cta[b-hktd0zoyju] {
        padding: 2rem 0.625rem;
    }

    .landing-footer[b-hktd0zoyju] {
        padding: 1.25rem 0.625rem;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* ═══ AUTH SCREEN — dark themed ═══ */
.auth-screen[b-ml0me9puu6] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(175deg, #0A0F1E 0%, #0F1629 60%, #111936 100%);
    padding: 2.5rem 1rem;
    position: relative;
    overflow: hidden;
}

/* dot grid pattern */
.auth-screen[b-ml0me9puu6]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 1.75rem 1.75rem;
    pointer-events: none;
}

/* glow */
.auth-screen[b-ml0me9puu6]::after {
    content: '';
    position: absolute;
    width: 30rem;
    height: 30rem;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.15) 0%, transparent 65%);
    top: -10rem;
    right: -5rem;
    pointer-events: none;
}

.auth-box[b-ml0me9puu6] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    padding: 2.5rem 2.75rem;
    width: 100%;
    max-width: 28rem;
    backdrop-filter: blur(12px);
    position: relative;
    z-index: 1;
    animation: authFadeUp-b-ml0me9puu6 0.5s ease-out both;
}

@keyframes authFadeUp-b-ml0me9puu6 {
    from { opacity: 0; transform: translateY(1.5rem); }
    to { opacity: 1; transform: translateY(0); }
}

.auth-logo[b-ml0me9puu6] {
    font-family: 'Sora', 'DM Sans', system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    text-align: center;
    margin-bottom: 2rem;
    color: #fff;
    text-decoration: none;
    display: block;
}

.auth-logo:hover[b-ml0me9puu6] {
    text-decoration: none;
}

.auth-logo .mark[b-ml0me9puu6] {
    color: #818CF8;
}

.auth-title[b-ml0me9puu6] {
    font-family: 'Sora', 'DM Sans', system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.5rem;
    color: #fff;
    letter-spacing: -0.02em;
}

.auth-subtitle[b-ml0me9puu6] {
    font-size: 0.9375rem;
    color: #8892A8;
    text-align: center;
    margin-bottom: 2rem;
}

.auth-errors[b-ml0me9puu6] {
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.2);
    border-radius: 0.5rem;
    padding: 0.875rem 1.125rem;
    margin-bottom: 1.5rem;
}

.auth-error[b-ml0me9puu6] {
    font-size: 0.875rem;
    color: #FCA5A5;
}

/* override global form styles for dark theme */
.auth-box :deep(.form-label)[b-ml0me9puu6] {
    color: #C8CED8;
    font-size: 0.8125rem;
}

.auth-box :deep(.form-input)[b-ml0me9puu6] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #E2E8F0;
    border-radius: 0.5rem;
}

.auth-box :deep(.form-input):focus[b-ml0me9puu6] {
    border-color: #4F46E5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.auth-box :deep(.form-input)[b-ml0me9puu6]::placeholder {
    color: #4A5568;
}

.auth-row[b-ml0me9puu6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.auth-remember[b-ml0me9puu6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: #8892A8;
}

.auth-remember input[b-ml0me9puu6] {
    width: 1rem;
    height: 1rem;
    accent-color: #4F46E5;
    cursor: pointer;
}

.auth-forgot-link[b-ml0me9puu6] {
    font-size: 0.8125rem;
    color: #818CF8 !important;
}

.auth-btn[b-ml0me9puu6] {
    justify-content: center;
    background: linear-gradient(135deg, #4F46E5, #4338CA) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.25) !important;
    border-radius: 0.625rem !important;
    transition: all 0.3s !important;
}

.auth-btn:hover[b-ml0me9puu6] {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.35) !important;
}

.auth-footer[b-ml0me9puu6] {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: #8892A8;
}

.auth-footer a[b-ml0me9puu6] {
    color: #818CF8 !important;
    font-weight: 500;
}

@media (max-width: 480px) {
    .auth-box[b-ml0me9puu6] {
        padding: 2rem 1.5rem;
    }

    .auth-logo[b-ml0me9puu6] {
        font-size: 1.625rem;
        margin-bottom: 1.5rem;
    }

    .auth-title[b-ml0me9puu6] {
        font-size: 1.25rem;
    }

    .auth-subtitle[b-ml0me9puu6] {
        font-size: 0.875rem;
    }
}

@media (max-width: 360px) {
    .auth-screen[b-ml0me9puu6] {
        padding: 1.25rem 0.5rem;
    }

    .auth-box[b-ml0me9puu6] {
        padding: 1.5rem 1rem;
    }

    .auth-logo[b-ml0me9puu6] {
        font-size: 1.5rem;
        margin-bottom: 1.25rem;
    }

    .auth-title[b-ml0me9puu6] {
        font-size: 1.125rem;
    }

    .auth-row[b-ml0me9puu6] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}
/* /Components/Pages/MyProfile.razor.rz.scp.css */
/* ═══ COMPACT FORM OVERRIDES ═══ */
[b-sif4r9plsy] .section-card { margin-bottom: 0.75rem; padding: 1rem; }
[b-sif4r9plsy] .section-title { font-size: 0.75rem; margin-bottom: 0.75rem; }
[b-sif4r9plsy] .form-group { margin-bottom: 0.75rem; }
[b-sif4r9plsy] .form-label { font-size: 0.6875rem; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.1875rem; }
[b-sif4r9plsy] .form-input { padding: 0.4375rem 0.625rem; font-size: 0.8125rem; }
[b-sif4r9plsy] .form-hint { font-size: 0.6875rem; }
.form-row[b-sif4r9plsy] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

/* ═══ SUCCESS / ERROR / INFO ═══ */
.success-msg[b-sif4r9plsy] { display: flex; align-items: center; gap: 0.5rem; background: var(--success-bg); border: 1px solid #A7F3D0; border-radius: var(--radius-sm); padding: 0.625rem 0.875rem; margin-bottom: 1rem; font-size: 0.8125rem; color: var(--success); }
.success-msg .material-icons-round[b-sif4r9plsy] { font-size: 1.125rem; }
.error-msg[b-sif4r9plsy] { display: flex; align-items: center; gap: 0.5rem; background: var(--danger-bg); border: 1px solid #FECACA; border-radius: var(--radius-sm); padding: 0.625rem 0.875rem; margin-bottom: 1rem; font-size: 0.8125rem; color: var(--danger); }
.error-msg .material-icons-round[b-sif4r9plsy] { font-size: 1.125rem; }
.error-msg-list .error-msg[b-sif4r9plsy] { margin-bottom: 0.375rem; }
.error-msg-list .error-msg:last-child[b-sif4r9plsy] { margin-bottom: 0; }
.info-msg[b-sif4r9plsy] { display: flex; align-items: center; gap: 0.5rem; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: var(--radius-sm); padding: 0.625rem 0.875rem; font-size: 0.8125rem; color: #1e40af; line-height: 1.5; }
.info-msg .material-icons-round[b-sif4r9plsy] { font-size: 1.125rem; flex-shrink: 0; }
.pending-actions[b-sif4r9plsy] { display: flex; gap: 0.5rem; margin-top: 0.625rem; }

/* ═══ SUBSCRIPTION STATUS ═══ */
.sub-status[b-sif4r9plsy] { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.875rem 1rem; border-radius: var(--radius-sm); margin-bottom: 0.75rem; }
.sub-status .material-icons-round[b-sif4r9plsy] { font-size: 1.25rem; margin-top: 0.125rem; }
.sub-free[b-sif4r9plsy] { background: var(--primary-50); }
.sub-free .material-icons-round[b-sif4r9plsy] { color: var(--text-tertiary); }
.sub-pro[b-sif4r9plsy] { background: linear-gradient(135deg, #eef2ff, #f5f3ff); }
.sub-pro .material-icons-round[b-sif4r9plsy] { color: #4338ca; }
.sub-plan[b-sif4r9plsy] { font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.125rem; font-family: var(--font-heading); }
.sub-detail[b-sif4r9plsy] { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.4; }

/* ═══ PRO BENEFITS ═══ */
.pro-benefits[b-sif4r9plsy] { margin-top: 0.375rem; }
.pro-benefits-title[b-sif4r9plsy] { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.5rem; font-family: var(--font-heading); }
.pro-benefits-grid[b-sif4r9plsy] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.375rem; }
.pro-benefit[b-sif4r9plsy] { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--text-secondary); padding: 0.5rem 0.625rem; background: var(--primary-50); border-radius: var(--radius-sm); }
.pro-benefit .material-icons-round[b-sif4r9plsy] { font-size: 1rem; color: #4338ca; }

/* ═══ UPGRADE BOX ═══ */
.upgrade-box[b-sif4r9plsy] { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-top: 0.75rem; }
.upgrade-header[b-sif4r9plsy] { margin-bottom: 1rem; }
.upgrade-title[b-sif4r9plsy] { font-size: 1rem; font-weight: 700; font-family: var(--font-heading); }
.upgrade-features[b-sif4r9plsy] { list-style: none; margin-bottom: 1rem; }
.upgrade-features li[b-sif4r9plsy] { font-size: 0.8125rem; padding: 0.25rem 0; display: flex; align-items: center; gap: 0.375rem; }
.upgrade-features li[b-sif4r9plsy]::before { content: '\2713'; color: var(--success); font-weight: 700; font-size: 0.75rem; }

/* ═══ PLAN OPTIONS ═══ */
.plan-options[b-sif4r9plsy] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; margin-bottom: 1rem; }
.plan-option[b-sif4r9plsy] { position: relative; border: 2px solid var(--border); border-radius: var(--radius); padding: 1rem; cursor: pointer; transition: all 0.15s; }
.plan-option:hover[b-sif4r9plsy] { border-color: var(--primary-300); }
.plan-option-selected[b-sif4r9plsy] { border-color: var(--accent); background: #f8faff; }
.plan-option-featured[b-sif4r9plsy] { border-color: var(--accent); }
.plan-option-badge[b-sif4r9plsy] { position: absolute; top: -8px; right: 10px; background: #059669; color: #fff; font-size: 0.625rem; font-weight: 700; padding: 0.0625rem 0.5rem; border-radius: 100px; }
.plan-option-name[b-sif4r9plsy] { font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.375rem; }
.plan-option-price[b-sif4r9plsy] { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.5px; }
.plan-option-price span[b-sif4r9plsy] { font-size: 0.75rem; font-weight: 400; color: var(--text-tertiary); }
.plan-option-gross[b-sif4r9plsy] { font-size: 0.6875rem; color: var(--text-tertiary); margin-top: 0.125rem; }
.plan-option-permonth[b-sif4r9plsy] { font-size: 0.6875rem; color: #059669; font-weight: 600; margin-top: 0.25rem; }
.upgrade-note[b-sif4r9plsy] { text-align: center; font-size: 0.6875rem; color: var(--text-tertiary); margin-top: 0.625rem; }

/* ═══ BILLING ═══ */
.billing-hint[b-sif4r9plsy] { font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 0.75rem; }
.billing-toggle[b-sif4r9plsy] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 500; cursor: pointer; margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.billing-toggle input[b-sif4r9plsy] { accent-color: var(--accent); width: 1rem; height: 1rem; }
.billing-info-msg[b-sif4r9plsy] { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--text-secondary); padding: 0.5rem 0.625rem; background: var(--primary-50); border-radius: var(--radius-sm); margin-bottom: 0.75rem; }
.billing-info-msg .material-icons-round[b-sif4r9plsy] { font-size: 1rem; color: var(--accent); flex-shrink: 0; }

/* ═══ DELETE ACCOUNT ═══ */
.delete-section[b-sif4r9plsy] { border-color: #FECACA; }
.delete-title[b-sif4r9plsy] { display: flex; align-items: center; gap: 0.375rem; color: var(--danger); font-family: var(--font-heading); font-size: 0.875rem; }
.delete-title .material-icons-round[b-sif4r9plsy] { font-size: 1.125rem; }
.delete-warning[b-sif4r9plsy] { display: flex; align-items: flex-start; gap: 0.5rem; background: #FFF7ED; border: 1px solid #FED7AA; border-radius: var(--radius-sm); padding: 0.625rem 0.875rem; margin-bottom: 0.75rem; font-size: 0.8125rem; color: #9A3412; line-height: 1.5; }
.delete-warning .material-icons-round[b-sif4r9plsy] { font-size: 1.125rem; flex-shrink: 0; color: #EA580C; margin-top: 1px; }
.delete-desc[b-sif4r9plsy] { font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: 0.375rem; line-height: 1.5; }
.delete-list[b-sif4r9plsy] { margin: 0 0 0.75rem; padding-left: 1rem; }
.delete-list li[b-sif4r9plsy] { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.7; }
.delete-confirm-box[b-sif4r9plsy] { background: var(--danger-bg); border: 1px solid #FECACA; border-radius: var(--radius-sm); padding: 0.875rem; }
.delete-confirm-text[b-sif4r9plsy] { font-size: 0.8125rem; color: var(--text); margin-bottom: 0.5rem; line-height: 1.5; }
.delete-confirm-actions[b-sif4r9plsy] { display: flex; gap: 0.5rem; margin-top: 0.625rem; }

/* ═══ UPGRADE TO PRO+AI CARD ═══ */
.upgrade-card[b-sif4r9plsy] { border: 2px solid #8B5CF6; background: linear-gradient(135deg, rgba(99,102,241,0.03), rgba(139,92,246,0.06)); padding: 1rem; margin-top: 0.75rem; }
.upgrade-card-header[b-sif4r9plsy] { display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.5rem; }
.upgrade-card-header h3[b-sif4r9plsy] { margin: 0; font-size: 0.9375rem; font-family: var(--font-heading); }
.upgrade-card-features[b-sif4r9plsy] { margin: 0 0 0.75rem 1rem; font-size: 0.8125rem; line-height: 1.7; }
.upgrade-card-features li[b-sif4r9plsy]::marker { content: "\2713 "; color: #8B5CF6; }
.upgrade-pricing[b-sif4r9plsy] { margin-bottom: 0.75rem; font-size: 0.8125rem; }
.upgrade-detail[b-sif4r9plsy] { color: var(--text-secondary); font-size: 0.75rem; margin-top: 0.1875rem; }
.btn-ai[b-sif4r9plsy] { background: linear-gradient(135deg, #6366F1, #8B5CF6); color: white; border: none; }

/* ═══ TIER TABS ═══ */
.tier-tabs[b-sif4r9plsy] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem; margin-bottom: 0.75rem; }
.tier-tab[b-sif4r9plsy] { display: flex; flex-direction: column; align-items: center; gap: 0.0625rem; padding: 0.625rem 0.375rem; border: 2px solid var(--border); border-radius: 0.625rem; background: var(--bg); cursor: pointer; transition: all 0.15s; position: relative; }
.tier-tab:hover[b-sif4r9plsy] { border-color: var(--primary); }
.tier-tab-active[b-sif4r9plsy] { border-color: var(--primary); background: var(--primary-50); }
.tier-tab-ai.tier-tab-active[b-sif4r9plsy] { border-color: #8B5CF6; background: rgba(139,92,246,0.06); }
.tier-tab-name[b-sif4r9plsy] { font-weight: 700; font-size: 0.875rem; }
.tier-tab-price[b-sif4r9plsy] { font-size: 0.6875rem; color: var(--text-secondary); }
.tier-tab-badge[b-sif4r9plsy] { position: absolute; top: -7px; right: 6px; background: linear-gradient(135deg, #6366F1, #8B5CF6); color: white; font-size: 0.5625rem; font-weight: 700; padding: 0.0625rem 0.375rem; border-radius: 6px; }

@media (max-width: 600px) {
    .plan-options[b-sif4r9plsy] { grid-template-columns: 1fr; }
    .pro-benefits-grid[b-sif4r9plsy] { grid-template-columns: repeat(2, 1fr); }
    .form-row[b-sif4r9plsy] { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 400px) {
    .pro-benefits-grid[b-sif4r9plsy] { grid-template-columns: 1fr; }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.notfound[b-ha1tb16rlt] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
    background: var(--bg-subtle);
}

.notfound-code[b-ha1tb16rlt] {
    font-size: 140px;
    font-weight: 800;
    letter-spacing: -6px;
    color: var(--primary-100);
    line-height: 1;
    margin-bottom: -10px;
}

.notfound-icon[b-ha1tb16rlt] {
    margin-bottom: 24px;
}

.notfound-icon .material-icons-round[b-ha1tb16rlt] {
    font-size: 64px;
    color: var(--accent);
}

.notfound-title[b-ha1tb16rlt] {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text);
}

.notfound-subtitle[b-ha1tb16rlt] {
    font-size: 18px;
    color: var(--text-secondary);
    max-width: 500px;
    line-height: 1.6;
    margin-bottom: 16px;
}

.notfound-hint[b-ha1tb16rlt] {
    font-size: 14px;
    color: var(--text-tertiary);
    font-style: italic;
    max-width: 450px;
    margin-bottom: 40px;
}

.notfound-btn[b-ha1tb16rlt] {
    justify-content: center;
}

@media (max-width: 480px) {
    .notfound-code[b-ha1tb16rlt] {
        font-size: 100px;
    }

    .notfound-title[b-ha1tb16rlt] {
        font-size: 24px;
    }

    .notfound-subtitle[b-ha1tb16rlt] {
        font-size: 15px;
    }
}
/* /Components/Pages/Privacy.razor.rz.scp.css */
.legal-page[b-p2bzwet0zc] { max-width: 860px; margin: 0 auto; padding: 0 24px 60px; }
.legal-nav[b-p2bzwet0zc] { padding: 20px 0; margin-bottom: 20px; }
.legal-logo[b-p2bzwet0zc] { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; color: var(--text); text-decoration: none; display: inline-block; }
.legal-logo:hover[b-p2bzwet0zc] { text-decoration: none; }
.legal-logo .mark[b-p2bzwet0zc] { color: var(--accent); }

.legal-content h1[b-p2bzwet0zc] { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.legal-updated[b-p2bzwet0zc] { font-size: 13px; color: var(--text-tertiary); margin-bottom: 32px; }
.legal-content h2[b-p2bzwet0zc] { font-size: 18px; font-weight: 600; margin-top: 32px; margin-bottom: 12px; color: var(--text); }
.legal-content p[b-p2bzwet0zc] { font-size: 15px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 12px; }
.legal-content ol[b-p2bzwet0zc], .legal-content ul[b-p2bzwet0zc] { font-size: 15px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 12px; padding-left: 24px; }
.legal-content li[b-p2bzwet0zc] { margin-bottom: 8px; }
.legal-content li ul[b-p2bzwet0zc] { margin-top: 8px; }
.legal-content blockquote[b-p2bzwet0zc] { background: var(--primary-50); border-left: 3px solid var(--accent); padding: 16px 20px; margin: 12px 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 14px; font-style: italic; color: var(--text-secondary); }
.legal-content a[b-p2bzwet0zc] { color: var(--accent); }
.legal-company[b-p2bzwet0zc] { background: var(--primary-50); border-radius: var(--radius-sm); padding: 20px; margin: 12px 0 24px; }
.legal-company p[b-p2bzwet0zc] { margin-bottom: 4px; color: var(--text); }
.legal-table[b-p2bzwet0zc] { width: 100%; border-collapse: collapse; margin: 12px 0 24px; font-size: 14px; }
.legal-table th[b-p2bzwet0zc] { text-align: left; padding: 12px 16px; background: var(--primary-50); font-weight: 600; color: var(--text-secondary); font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; border-bottom: 1px solid var(--border); }
.legal-table td[b-p2bzwet0zc] { padding: 12px 16px; border-bottom: 1px solid var(--border-light); color: var(--text-secondary); line-height: 1.5; }
/* /Components/Pages/PublicQuotePage.razor.rz.scp.css */
.public-quote-container[b-5m9m56kn9e] {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px 16px;
}

.pq-card[b-5m9m56kn9e] {
    background: var(--bg, #fff);
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;
}

.pq-centered[b-5m9m56kn9e] {
    text-align: center;
    padding: 48px 24px;
}

/* Company Header */
.pq-company-header[b-5m9m56kn9e] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pq-logo[b-5m9m56kn9e] {
    max-height: 56px;
    max-width: 160px;
    object-fit: contain;
}

.pq-company-name[b-5m9m56kn9e] {
    font-size: 16px;
    font-weight: 700;
}

.pq-company-detail[b-5m9m56kn9e] {
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
}

/* Title & Meta */
.pq-title-label[b-5m9m56kn9e] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.pq-title[b-5m9m56kn9e] {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
}

.pq-meta[b-5m9m56kn9e] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
}

/* Section */
.pq-section-title[b-5m9m56kn9e] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

/* Table */
.pq-table-wrap[b-5m9m56kn9e] {
    overflow-x: auto;
}

.pq-table[b-5m9m56kn9e] {
    width: 100%;
    border-collapse: collapse;
}

.pq-table th[b-5m9m56kn9e] {
    text-align: left;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border, #d1d5db);
    background: var(--primary-50, #f9fafb);
}

.pq-table td[b-5m9m56kn9e] {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-light, #e5e7eb);
    font-size: 14px;
    vertical-align: middle;
}

.pq-right[b-5m9m56kn9e] {
    text-align: right;
}

/* Summary */
.pq-summary[b-5m9m56kn9e] {
    border: 1px solid var(--border, #d1d5db);
    border-radius: 8px;
    padding: 20px 24px;
    background: var(--primary-50, #f9fafb);
    margin-top: 16px;
    max-width: 360px;
    margin-left: auto;
}

.pq-summary-row[b-5m9m56kn9e] {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 14px;
}

.pq-summary-total[b-5m9m56kn9e] {
    font-size: 17px;
    font-weight: 700;
    border-top: 2px solid var(--primary-900, #111827);
    padding-top: 8px;
    margin-top: 4px;
}

/* Notes */
.pq-notes[b-5m9m56kn9e] {
    font-size: 14px;
    color: var(--text-secondary, #6b7280);
    line-height: 1.6;
    margin: 0;
}

/* Actions */
.pq-actions[b-5m9m56kn9e] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 8px 0 32px;
}

.pq-btn[b-5m9m56kn9e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s;
}

.pq-btn:hover[b-5m9m56kn9e] {
    opacity: 0.85;
}

.pq-btn-accept[b-5m9m56kn9e] {
    background: var(--success, #16a34a);
    color: #fff;
}

.pq-btn-reject[b-5m9m56kn9e] {
    background: none;
    color: var(--danger, #dc2626);
    border: 1px solid var(--danger, #dc2626);
}

.pq-btn-reject:hover[b-5m9m56kn9e] {
    background: var(--danger-bg, #fef2f2);
}

.pq-btn-pdf[b-5m9m56kn9e] {
    background: var(--primary-900, #111827);
    color: #fff;
}

.pq-accepted-msg[b-5m9m56kn9e] {
    background: var(--success-bg, #dcfce7);
    border: 1px solid #a7f3d0;
    color: var(--success, #16a34a);
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
}

.pq-rejected-msg[b-5m9m56kn9e] {
    background: var(--danger-bg, #fee2e2);
    border: 1px solid #fecaca;
    color: var(--danger, #dc2626);
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
}

/* Reject form */
.pq-reject-form[b-5m9m56kn9e] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pq-reject-input[b-5m9m56kn9e] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}
.pq-reject-input:focus[b-5m9m56kn9e] {
    outline: none;
    border-color: var(--danger, #dc2626);
}
.pq-reject-actions[b-5m9m56kn9e] {
    display: flex;
    gap: 8px;
    justify-content: center;
}

/* Photos */
.pq-btn-photos[b-5m9m56kn9e] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid var(--primary-900, #111827);
    background: none;
    color: var(--primary-900, #111827);
    transition: all 150ms;
}
.pq-btn-photos:hover[b-5m9m56kn9e] {
    background: var(--primary-50, #f9fafb);
}
.pq-photo-grid[b-5m9m56kn9e] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.pq-photo-item[b-5m9m56kn9e] {
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--border-light, #e5e7eb);
}
.pq-photo-item img[b-5m9m56kn9e] {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    transition: opacity 150ms;
}
.pq-photo-item:hover img[b-5m9m56kn9e] { opacity: 0.85; }
.pq-photo-desc[b-5m9m56kn9e] {
    padding: 8px 10px;
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    border-top: 1px solid var(--border-light, #e5e7eb);
}

.pq-lightbox[b-5m9m56kn9e] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.pq-lightbox img[b-5m9m56kn9e] {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
}
.pq-lightbox-close[b-5m9m56kn9e] {
    position: absolute;
    top: 16px;
    right: 16px;
    border: none;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.pq-lightbox-close:hover[b-5m9m56kn9e] { background: rgba(255,255,255,0.3); }

/* ═══ GROUP ROWS ═══ */
.group-header-row td[b-5m9m56kn9e] {
    font-weight: 700; font-size: 0.9375rem; font-family: var(--font-heading);
    padding: 1rem 0.75rem 0.5rem; color: var(--text);
    border-bottom: 2px solid var(--accent); background: none;
}
.group-subtotal-row td[b-5m9m56kn9e] {
    font-weight: 600; font-size: 0.8125rem; color: var(--text-secondary);
    border-top: 1px dashed var(--border); padding: 0.5rem 0.75rem;
}

/* ═══ GROUP MOBILE ═══ */
.pq-group-header[b-5m9m56kn9e] {
    font-weight: 700; font-size: 0.9375rem; font-family: var(--font-heading);
    padding: 0.75rem 0 0.375rem; color: var(--text);
    border-bottom: 2px solid var(--accent); margin-bottom: 0.5rem;
}
.pq-group-subtotal[b-5m9m56kn9e] {
    font-weight: 600; font-size: 0.8125rem; color: var(--text-secondary);
    border-top: 1px dashed var(--border); padding: 0.5rem 0 0.75rem;
    text-align: right;
}

/* ═══ MOBILE LINE ITEM CARDS ═══ */
.pq-mobile[b-5m9m56kn9e] { display: none; }

.pq-li-card[b-5m9m56kn9e] {
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 8px;
    background: #fff;
}

.pq-li-header[b-5m9m56kn9e] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
}

.pq-li-lp[b-5m9m56kn9e] {
    font-size: 12px;
    color: var(--text-tertiary, #9ca3af);
    font-weight: 600;
    flex-shrink: 0;
}

.pq-li-name[b-5m9m56kn9e] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text, #111827);
}

.pq-li-details[b-5m9m56kn9e] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-light, #f3f4f6);
}

.pq-li-sep[b-5m9m56kn9e] { color: var(--text-tertiary, #9ca3af); }

.pq-li-totals[b-5m9m56kn9e] {
    display: flex;
    justify-content: space-between;
}

.pq-li-netto[b-5m9m56kn9e], .pq-li-brutto[b-5m9m56kn9e] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pq-li-label[b-5m9m56kn9e] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary, #9ca3af);
}

.pq-li-netto .pq-li-value[b-5m9m56kn9e] {
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
}

.pq-li-brutto .pq-li-value[b-5m9m56kn9e] {
    font-size: 14px;
    font-weight: 700;
    color: var(--text, #111827);
}

.pq-li-brutto[b-5m9m56kn9e] {
    text-align: right;
}

@media (max-width: 768px) {
    .pq-desktop[b-5m9m56kn9e] { display: none; }
    .pq-mobile[b-5m9m56kn9e] { display: block; }

    .pq-company-header[b-5m9m56kn9e] {
        flex-direction: column;
        align-items: flex-start;
    }

    .pq-meta[b-5m9m56kn9e] {
        flex-direction: column;
        gap: 4px;
    }

    .pq-summary[b-5m9m56kn9e] {
        max-width: 100%;
        padding: 14px 16px;
    }

    .pq-summary-row[b-5m9m56kn9e] {
        padding: 2px 0;
        font-size: 13px;
    }

    .pq-summary-total[b-5m9m56kn9e] {
        font-size: 15px;
        padding-top: 6px;
        margin-top: 4px;
    }

    .pq-card[b-5m9m56kn9e] {
        padding: 16px;
    }

    .pq-title[b-5m9m56kn9e] {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .public-quote-container[b-5m9m56kn9e] {
        padding: 16px 8px;
    }

    .pq-card[b-5m9m56kn9e] {
        padding: 14px;
        border-radius: 8px;
    }

    .pq-table th[b-5m9m56kn9e], .pq-table td[b-5m9m56kn9e] {
        padding: 8px;
        font-size: 12px;
    }

    .pq-summary[b-5m9m56kn9e] {
        padding: 14px 16px;
    }

    .pq-summary-total[b-5m9m56kn9e] {
        font-size: 16px;
    }

    .pq-btn[b-5m9m56kn9e] {
        padding: 10px 20px;
        font-size: 14px;
        flex: 1;
    }

    .pq-actions[b-5m9m56kn9e] {
        flex-direction: column;
    }

    .pq-title[b-5m9m56kn9e] {
        font-size: 16px;
    }
}

@media (max-width: 360px) {
    .public-quote-container[b-5m9m56kn9e] {
        padding: 10px 4px;
    }

    .pq-card[b-5m9m56kn9e] {
        padding: 10px;
    }

    .pq-table th[b-5m9m56kn9e], .pq-table td[b-5m9m56kn9e] {
        padding: 6px;
        font-size: 11px;
    }
}

/* ═══ COUNTDOWN BANNER ═══ */
.pq-countdown[b-5m9m56kn9e] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.875rem;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    font-weight: 600;
    background: #EFF6FF;
    color: #1D4ED8;
    border: 1px solid #BFDBFE;
}
.pq-countdown .material-icons-round[b-5m9m56kn9e] { font-size: 1.125rem; }

.pq-countdown-warn[b-5m9m56kn9e] {
    background: #FFFBEB;
    color: #B45309;
    border-color: #FDE68A;
}

.pq-countdown-critical[b-5m9m56kn9e] {
    background: #FEF2F2;
    color: #B91C1C;
    border-color: #FECACA;
    animation: pq-countdown-pulse-b-5m9m56kn9e 1.4s ease-in-out infinite;
}

.pq-countdown-expired[b-5m9m56kn9e] {
    background: #F1F5F9;
    color: #475569;
    border-color: #E2E8F0;
}

@keyframes pq-countdown-pulse-b-5m9m56kn9e {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.25); }
    50% { box-shadow: 0 0 0 0.4rem rgba(220, 38, 38, 0); }
}

/* ═══ COMMENTS SECTION (public) ═══ */
.pq-comments-empty[b-5m9m56kn9e] {
    font-size: 0.875rem;
    color: var(--text-secondary, #475569);
    line-height: 1.5;
    margin: 0 0 1rem;
}

.pq-thread[b-5m9m56kn9e] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: 1rem;
}

.pq-msg[b-5m9m56kn9e] {
    max-width: 88%;
    padding: 0.625rem 0.875rem;
    border-radius: 0.875rem;
    font-size: 0.875rem;
    line-height: 1.5;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.pq-msg-client[b-5m9m56kn9e] {
    align-self: flex-end;
    background: #1D4ED8;
    color: #fff;
    border-top-right-radius: 0.25rem;
}

.pq-msg-owner[b-5m9m56kn9e] {
    align-self: flex-start;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-top-left-radius: 0.25rem;
}

.pq-msg-head[b-5m9m56kn9e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    font-size: 0.6875rem;
}

.pq-msg-client .pq-msg-head[b-5m9m56kn9e] { color: rgba(255,255,255,0.85); }
.pq-msg-owner .pq-msg-head[b-5m9m56kn9e] { color: var(--text-secondary, #475569); }

.pq-msg-author[b-5m9m56kn9e] { font-weight: 600; }
.pq-msg-body[b-5m9m56kn9e] { white-space: pre-wrap; word-break: break-word; }

.pq-comment-form[b-5m9m56kn9e] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pq-comment-input[b-5m9m56kn9e] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1.5px solid #E2E8F0;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}
.pq-comment-input:focus[b-5m9m56kn9e] { border-color: #4F46E5; box-shadow: 0 0 0 0.1875rem rgba(79,70,229,0.12); }

.pq-comment-textarea[b-5m9m56kn9e] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1.5px solid #E2E8F0;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-family: inherit;
    outline: none;
    resize: vertical;
    min-height: 4.5rem;
    box-sizing: border-box;
}
.pq-comment-textarea:focus[b-5m9m56kn9e] { border-color: #4F46E5; box-shadow: 0 0 0 0.1875rem rgba(79,70,229,0.12); }

.pq-comment-actions[b-5m9m56kn9e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.pq-comment-counter[b-5m9m56kn9e] {
    font-size: 0.75rem;
    color: #64748B;
}

.pq-btn-comment[b-5m9m56kn9e] {
    background: #4F46E5;
    color: #fff;
    border: none;
    padding: 0.5rem 1.25rem;
}
.pq-btn-comment:hover:not(:disabled)[b-5m9m56kn9e] { background: #4338CA; }
.pq-btn-comment:disabled[b-5m9m56kn9e] { opacity: 0.55; cursor: not-allowed; }

.pq-comment-sent[b-5m9m56kn9e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    border-radius: 0.5rem;
    color: #065F46;
    font-size: 0.875rem;
    line-height: 1.5;
    flex-wrap: wrap;
}
.pq-comment-sent span:first-of-type[b-5m9m56kn9e],
.pq-comment-sent span.material-icons-round[b-5m9m56kn9e] { flex-shrink: 0; }
.pq-comment-reset[b-5m9m56kn9e] {
    margin-left: auto;
    background: none;
    border: 1px solid #059669;
    color: #065F46;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3125rem 0.625rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 150ms ease;
}
.pq-comment-reset:hover[b-5m9m56kn9e] { background: #059669; color: #fff; }

.pq-comment-error[b-5m9m56kn9e] {
    padding: 0.5rem 0.75rem;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 0.375rem;
    color: #991B1B;
    font-size: 0.8125rem;
}

@media (max-width: 48rem) {
    .pq-msg[b-5m9m56kn9e] { max-width: 94%; }
}
/* /Components/Pages/QuoteDetailPage.razor.rz.scp.css */
.section-card[b-fv37b06hc4] { margin-bottom: 1rem; }
.section-title[b-fv37b06hc4] { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 1rem; font-family: var(--font-heading); }
.divider[b-fv37b06hc4] { height: 1px; background: var(--border-light); margin: 1.25rem 0; }
.btn-group[b-fv37b06hc4] { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ═══ QUOTE HEADER ═══ */
.quote-header[b-fv37b06hc4] { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; gap: 0.75rem; }
.quote-number[b-fv37b06hc4] { font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: 0.8125rem; color: var(--text-tertiary); }
.quote-title[b-fv37b06hc4] { font-size: 1.125rem; font-weight: 700; margin-top: 0.125rem; font-family: var(--font-heading); }
.quote-meta[b-fv37b06hc4] { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.8125rem; color: var(--text-secondary); }

/* ═══ TABLE — base styles in .data-table-wrap (app.css) ═══ */

/* ═══ SUMMARY ═══ */
.summary-box[b-fv37b06hc4] { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; background: var(--primary-50); margin-top: 0.75rem; }
.summary-row[b-fv37b06hc4] { display: flex; justify-content: space-between; padding: 0.25rem 0; font-size: 0.875rem; }
.summary-row.total[b-fv37b06hc4] { font-size: 1.125rem; font-weight: 700; border-top: 2px solid var(--primary-900); padding-top: 0.625rem; margin-top: 0.375rem; }
.summary-row.margin[b-fv37b06hc4] { color: var(--success); font-weight: 600; }
.margin-badge[b-fv37b06hc4] { display: inline-flex; padding: 0.3125rem 0.75rem; border-radius: 1.25rem; font-size: 0.8125rem; font-weight: 600; }
.margin-badge.good[b-fv37b06hc4] { background: var(--success-bg); color: var(--success); }
.margin-badge.ok[b-fv37b06hc4] { background: var(--warning-bg); color: var(--warning); }
.margin-badge.bad[b-fv37b06hc4] { background: var(--danger-bg); color: var(--danger); }

/* ═══ NOTES ═══ */
.notes-text[b-fv37b06hc4] { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; }
.notes-internal[b-fv37b06hc4] { color: var(--warning); }

/* ═══ TIMELINE ═══ */
.timeline[b-fv37b06hc4] { padding-left: 0.25rem; }
.timeline-item[b-fv37b06hc4] { padding: 0 0 1.5rem 1.5rem; position: relative; border-left: 2px solid var(--border-light); }
.timeline-item:last-child[b-fv37b06hc4] { border-left: 2px solid transparent; padding-bottom: 0; }
.timeline-item[b-fv37b06hc4]::before { content: ''; position: absolute; left: -6px; top: 2px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--border); background: var(--bg); }
.timeline-item.done[b-fv37b06hc4]::before { border-color: var(--success); background: var(--success); }
.timeline-item.rejected[b-fv37b06hc4]::before { border-color: var(--danger); background: var(--danger); }
.timeline-title[b-fv37b06hc4] { font-size: 0.875rem; font-weight: 500; font-family: var(--font-heading); }
.timeline-date[b-fv37b06hc4] { font-size: 0.75rem; color: var(--text-tertiary); margin-top: 0.125rem; }

.btn-timeline-toggle[b-fv37b06hc4] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.75rem;
    padding: 0.375rem 0;
    border: none;
    background: none;
    color: var(--accent);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
}
.btn-timeline-toggle:hover[b-fv37b06hc4] { text-decoration: underline; }

/* ═══ STATUS ACTIONS ═══ */
.status-actions[b-fv37b06hc4] { display: flex; gap: 0.75rem; margin-top: 1rem; flex-wrap: wrap; }
.status-info[b-fv37b06hc4] { display: flex; align-items: center; gap: 0.625rem; font-size: 0.875rem; color: var(--text-secondary); }

/* ═══ REJECTION REASON ═══ */
.rejection-reason-box[b-fv37b06hc4] {
    background: var(--danger-bg);
    border: 1px solid #FECACA;
    border-radius: var(--radius-sm);
    padding: 1rem 1.125rem;
    margin-bottom: 1rem;
}
.rejection-reason-title[b-fv37b06hc4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--danger);
    margin-bottom: 0.5rem;
    font-family: var(--font-heading);
}
.rejection-reason-text[b-fv37b06hc4] {
    font-size: 0.875rem;
    color: var(--text);
    line-height: 1.6;
    margin: 0;
}

/* ═══ SUCCESS ═══ */
.success-msg[b-fv37b06hc4] { display: flex; align-items: center; gap: 0.625rem; background: var(--success-bg); border: 1px solid #A7F3D0; border-radius: var(--radius-sm); padding: 0.875rem 1.125rem; margin-bottom: 1rem; font-size: 0.875rem; color: var(--success); }
.success-msg .material-icons-round[b-fv37b06hc4] { font-size: 1.25rem; }

/* ═══ GROUP ROWS ═══ */
.group-header-row td[b-fv37b06hc4] {
    font-weight: 700; font-size: 0.875rem; font-family: var(--font-heading);
    padding: 0.875rem 0.75rem 0.375rem; color: var(--text);
    border-bottom: 2px solid var(--accent); background: none;
}
.group-subtotal-row td[b-fv37b06hc4] {
    font-weight: 600; font-size: 0.8125rem; color: var(--text-secondary);
    border-top: 1px dashed var(--border); padding: 0.375rem 0.75rem;
}
.group-margin-row td[b-fv37b06hc4] {
    font-size: 0.75rem; color: var(--text-tertiary); padding: 0.25rem 0.75rem 0.625rem;
}

/* ═══ GROUP MOBILE ═══ */
.group-header-mobile[b-fv37b06hc4] {
    font-weight: 700; font-size: 0.875rem; font-family: var(--font-heading);
    padding: 0.75rem 0 0.25rem; color: var(--text);
    border-bottom: 2px solid var(--accent); margin-bottom: 0.375rem;
}
.group-subtotal-mobile[b-fv37b06hc4] {
    display: flex; justify-content: space-between;
    font-weight: 600; font-size: 0.8125rem; color: var(--text-secondary);
    border-top: 1px dashed var(--border); padding: 0.375rem 0 0.75rem;
    margin-bottom: 0.25rem;
}

/* ═══ LINE ITEMS MOBILE ═══ */
.line-items-mobile[b-fv37b06hc4] { display: none; }

.li-card[b-fv37b06hc4] { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.625rem 0.75rem; margin-bottom: 0.375rem; background: #FFFFFF; }
.li-card:last-child[b-fv37b06hc4] { margin-bottom: 0; }
.li-card-top[b-fv37b06hc4] { display: flex; align-items: baseline; gap: 0.25rem; margin-bottom: 0.25rem; }
.li-card-lp[b-fv37b06hc4] { font-size: 0.8125rem; color: var(--text-tertiary); font-weight: 600; flex-shrink: 0; }
.li-card-lp[b-fv37b06hc4]::after { content: '.'; }
.li-card-name[b-fv37b06hc4] { font-size: 0.8125rem; font-weight: 600; }
.li-card-details[b-fv37b06hc4] { display: flex; gap: 0.625rem; font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 0.25rem; }
.li-card-bottom[b-fv37b06hc4] { display: flex; justify-content: space-between; align-items: center; font-size: 0.8125rem; }
.li-card-label[b-fv37b06hc4] { color: var(--text-secondary); }

@media (max-width: 768px) {
    .line-items-desktop[b-fv37b06hc4] { display: none; }
    .line-items-mobile[b-fv37b06hc4] { display: block; }
    .quote-header[b-fv37b06hc4] { flex-direction: column; }
    .btn-group[b-fv37b06hc4] { gap: 0.375rem; }
    .summary-box[b-fv37b06hc4] { padding: 0.75rem; }
    .summary-row[b-fv37b06hc4] { font-size: 0.8125rem; padding: 0.1875rem 0; }
    .summary-row.total[b-fv37b06hc4] { font-size: 1rem; }
    .margin-badge[b-fv37b06hc4] { font-size: 0.6875rem; padding: 0.1875rem 0.5rem; }
}

@media (max-width: 480px) {
    .quote-title[b-fv37b06hc4] { font-size: 1rem; }
    .quote-meta[b-fv37b06hc4] { gap: 0.5rem; font-size: 0.75rem; }
    .btn-group .btn[b-fv37b06hc4] { padding: 0.375rem 0.625rem; font-size: 0.6875rem; }
    .summary-box[b-fv37b06hc4] { padding: 0.625rem; }
    .summary-row[b-fv37b06hc4] { font-size: 0.75rem; }
    .summary-row.total[b-fv37b06hc4] { font-size: 0.875rem; }
    .li-card[b-fv37b06hc4] { padding: 0.5rem 0.625rem; }
    .li-card-name[b-fv37b06hc4] { font-size: 0.75rem; }
    .li-card-details[b-fv37b06hc4] { font-size: 0.6875rem; }
    .li-card-bottom[b-fv37b06hc4] { font-size: 0.75rem; }
    .status-actions[b-fv37b06hc4] { gap: 0.5rem; }
    .timeline-title[b-fv37b06hc4] { font-size: 0.8125rem; }
}

@media (max-width: 360px) {
    .summary-box[b-fv37b06hc4] { padding: 0.5rem; }
    .li-card[b-fv37b06hc4] { padding: 0.375rem 0.5rem; margin-bottom: 0.25rem; }
}

/* ═══ PHOTO GALLERY ═══ */
.gallery-grid[b-fv37b06hc4] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
}
.gallery-item[b-fv37b06hc4] {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg);
}
.gallery-thumb[b-fv37b06hc4] {
    aspect-ratio: 4/3;
    cursor: pointer;
    background: var(--primary-50);
}
.gallery-thumb img[b-fv37b06hc4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 150ms;
}
.gallery-thumb[b-fv37b06hc4] { position: relative; }
.gallery-thumb:hover img[b-fv37b06hc4] { opacity: 0.85; }
.gallery-del[b-fv37b06hc4] {
    position: absolute;
    top: 4px;
    right: 4px;
    border: none;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border-radius: 50%;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.gallery-del .material-icons-round[b-fv37b06hc4] { font-size: 1rem; }
.gallery-del:hover[b-fv37b06hc4] { background: var(--danger); }
.gallery-desc[b-fv37b06hc4] {
    border: none;
    border-top: 1px solid var(--border-light);
    border-radius: 0;
    padding: 0.5rem 0.625rem;
    font-size: 0.75rem;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .gallery-grid[b-fv37b06hc4] { grid-template-columns: repeat(2, 1fr); gap: 0.625rem; }
}
@media (max-width: 360px) {
    .gallery-grid[b-fv37b06hc4] { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
    .gallery-desc[b-fv37b06hc4] { font-size: 0.6875rem; padding: 0.375rem 0.5rem; }
}

/* ═══ LIGHTBOX ═══ */
.lightbox[b-fv37b06hc4] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.lightbox img[b-fv37b06hc4] {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
}
.lightbox-close[b-fv37b06hc4] {
    position: absolute;
    top: 12px;
    right: 12px;
    border: none;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
    font-size: 0;
}
.lightbox-close .material-icons-round[b-fv37b06hc4] { font-size: 1.75rem; }
.lightbox-close:hover[b-fv37b06hc4] { background: rgba(0,0,0,0.8); }

@media (max-width: 768px) {
    .lightbox[b-fv37b06hc4] { padding: 0.75rem; }
    .lightbox-close[b-fv37b06hc4] { top: 8px; right: 8px; width: 3.25rem; height: 3.25rem; }
    .lightbox-close .material-icons-round[b-fv37b06hc4] { font-size: 2rem; }
}

/* ═══ COMPANY HINT BANNER ═══ */
.company-hint-banner[b-fv37b06hc4] {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.company-hint-banner .material-icons-round[b-fv37b06hc4] {
    font-size: 1.25rem;
    color: #4F46E5;
    flex-shrink: 0;
}
.company-hint-banner div[b-fv37b06hc4] {
    flex: 1;
    font-size: 0.875rem;
    color: #1E40AF;
    line-height: 1.5;
}
.company-hint-banner .btn[b-fv37b06hc4] {
    white-space: nowrap;
    flex-shrink: 0;
}

/* ═══ BADGE EXPIRED ═══ */
[b-fv37b06hc4] .badge-expired {
    background: #F3F4F6;
    color: #6B7280;
}

/* ═══ TEXT MUTED ═══ */
.text-muted[b-fv37b06hc4] { color: var(--text-secondary); }

/* ═══ PRO HINT BUTTON ═══ */
.btn-pro-hint[b-fv37b06hc4] {
    border-style: dashed;
    color: var(--text-tertiary);
}
.btn-pro-hint:hover[b-fv37b06hc4] {
    border-color: #4338ca;
    color: #4338ca;
}

[b-fv37b06hc4] .pro-tag {
    display: inline-block;
    background: linear-gradient(135deg, rgba(79,70,229,0.08), #ede9fe);
    color: #4338ca;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 0.25rem;
}

/* ─── Template Picker ─── */
.template-picker[b-fv37b06hc4] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.template-card[b-fv37b06hc4] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.375rem;
    border: 2px solid var(--border, #E5E7EB);
    border-radius: 0.5rem;
    background: #fff;
    cursor: pointer;
    transition: all 150ms ease;
    min-width: 0;
    overflow: hidden;
}

.template-card:hover[b-fv37b06hc4] {
    border-color: var(--accent, #4F46E5);
    background: #F8FAFF;
}

.template-active[b-fv37b06hc4] {
    border-color: var(--accent, #4F46E5);
    background: #EFF6FF;
}

.template-locked[b-fv37b06hc4] {
    opacity: 0.6;
    cursor: default;
}

.template-locked:hover[b-fv37b06hc4] {
    border-color: var(--border, #E5E7EB);
    background: #fff;
}

img.template-preview[b-fv37b06hc4] {
    width: 100%;
    max-height: 12rem;
    border: 1px solid #E5E7EB;
    border-radius: 4px;
    margin-bottom: 0.375rem;
    object-fit: contain;
}

.template-name[b-fv37b06hc4] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text, #111827);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.template-check[b-fv37b06hc4] {
    position: absolute;
    top: 8px;
    right: 8px;
    color: var(--accent, #4F46E5);
    font-size: 1.125rem;
    line-height: 1;
}

.template-check .material-icons-round[b-fv37b06hc4] { font-size: 1.125rem; }

.template-actions[b-fv37b06hc4] {
    display: flex;
    gap: 0.5rem;
}

@media (max-width: 480px) {
    .template-picker[b-fv37b06hc4] { gap: 0.375rem; }
    .template-card[b-fv37b06hc4] { padding: 0.25rem; }
    img.template-preview[b-fv37b06hc4] { max-height: 8rem; }
    .template-name[b-fv37b06hc4] { font-size: 0.5625rem; }
}

/* ═══ CLIENT MODAL ═══ */
.client-name-link[b-fv37b06hc4] { background: none; border: none; cursor: pointer; color: inherit; padding: 0; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.client-name-link:hover[b-fv37b06hc4] { color: var(--accent, #4F46E5); }
.client-modal-details[b-fv37b06hc4] { display: flex; flex-direction: column; gap: 0.5rem; }
.client-modal-row[b-fv37b06hc4] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--text-secondary, #6B7280); }
.client-modal-row .material-icons-round[b-fv37b06hc4] { font-size: 1.125rem; color: var(--text-tertiary, #9CA3AF); }
.client-modal-contact[b-fv37b06hc4] { border: 1px solid var(--border, #E5E7EB); border-radius: 0.5rem; padding: 0.625rem; margin-bottom: 0.375rem; }
.client-modal-contact-details[b-fv37b06hc4] { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.25rem; font-size: 0.8125rem; color: var(--text-secondary, #6B7280); }
.client-modal-contact-details .material-icons-round[b-fv37b06hc4] { font-size: 0.875rem; vertical-align: middle; }
.btn-icon-sm[b-fv37b06hc4] { background: none; border: none; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; color: var(--text-tertiary, #9CA3AF); transition: color 150ms; }
.btn-icon-sm:hover[b-fv37b06hc4] { color: var(--text, #111827); }
.btn-icon-sm .material-icons-round[b-fv37b06hc4] { font-size: 1.25rem; }
.modal-overlay[b-fv37b06hc4] { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal-box[b-fv37b06hc4] { background: var(--card-bg, #fff); border-radius: 0.75rem; padding: 1.5rem; width: 100%; box-shadow: 0 8px 32px rgba(0,0,0,0.2); max-height: 90vh; overflow-y: auto; }

/* ═══ COMMENTS BUTTON ═══ */
.qd-comments-btn[b-fv37b06hc4] { position: relative; gap: 0.375rem; }
.qd-comments-btn-active[b-fv37b06hc4] {
    border-color: var(--accent, #4F46E5);
    color: var(--accent, #4F46E5);
    background: var(--primary-50, #EEF2FF);
}
.qd-comments-count[b-fv37b06hc4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.375rem;
    border-radius: 100px;
    background: var(--danger, #EF4444);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    animation: qd-pulse-dot-b-fv37b06hc4 1.4s ease-in-out infinite;
}
@keyframes qd-pulse-dot-b-fv37b06hc4 {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); }
    50% { transform: scale(1.08); box-shadow: 0 0 0 0.25rem rgba(239, 68, 68, 0); }
}
/* /Components/Pages/QuotesPage.razor.rz.scp.css */
/* ═══ QUOTA ═══ */
.quota-bar[b-7ysnvzl0z7] { display: flex; align-items: center; gap: 0.5rem; background: rgba(79,70,229,0.06); border: 1px solid #bfdbfe; border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; margin-bottom: 0.75rem; font-size: 0.8125rem; color: #1e40af; }
.quota-bar .material-icons-round[b-7ysnvzl0z7] { font-size: 1.125rem; }
.quota-bar a[b-7ysnvzl0z7] { color: #4338ca; font-weight: 600; margin-left: 0.25rem; }

/* ═══ TOOLBAR ROW (view tabs + action icons) ═══ */
.toolbar-row[b-7ysnvzl0z7] { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.toolbar-actions[b-7ysnvzl0z7] { display: flex; gap: 0.25rem; flex-shrink: 0; }
.btn-icon-action[b-7ysnvzl0z7] {
    display: flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: 0.5rem;
    border: 1px solid var(--border); background: #fff;
    color: var(--text-secondary); cursor: pointer;
    transition: all 150ms ease;
}
.btn-icon-action:hover[b-7ysnvzl0z7] { border-color: var(--primary-300); color: var(--accent); background: var(--primary-50); }
.btn-icon-action .material-icons-round[b-7ysnvzl0z7] { font-size: 1.125rem; }

/* ═══ VIEW TABS ═══ */
.view-tabs[b-7ysnvzl0z7] { display: flex; gap: 0.25rem; background: var(--primary-50); border-radius: var(--radius-sm); padding: 0.1875rem; flex: 1; min-width: 0; }
.view-tab[b-7ysnvzl0z7] { display: flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; border-radius: var(--radius-sm); border: none; background: transparent; font-size: 0.875rem; font-weight: 500; cursor: pointer; color: var(--text-secondary); transition: all var(--transition); flex: 1; justify-content: center; white-space: nowrap; }
.view-tab .material-icons-round[b-7ysnvzl0z7] { font-size: 1.125rem; }
.view-tab:hover[b-7ysnvzl0z7] { color: var(--text); }
.view-tab.active[b-7ysnvzl0z7] { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.08); font-weight: 600; }
.view-tab-badge[b-7ysnvzl0z7] { font-size: 0.6875rem; background: var(--primary-100); color: var(--primary-900); padding: 0.125rem 0.4375rem; border-radius: 0.625rem; font-weight: 600; }

/* ═══ SEARCH + FILTER BAR ═══ */
.search-filter-bar[b-7ysnvzl0z7] { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.search-filter-bar .search-bar[b-7ysnvzl0z7] { flex: 0 0 auto; width: 14rem; margin-bottom: 0; }
.filter-pills[b-7ysnvzl0z7] { display: flex; gap: 0.375rem; flex: 1; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.filter-pills[b-7ysnvzl0z7]::-webkit-scrollbar { display: none; }
.pill[b-7ysnvzl0z7] {
    padding: 0.375rem 0.875rem; border-radius: 6.25rem;
    border: 1px solid var(--border); background: #fff;
    font-size: 0.8125rem; font-weight: 500; cursor: pointer;
    color: var(--text-secondary); transition: all 150ms ease;
    white-space: nowrap; flex-shrink: 0;
}
.pill:hover[b-7ysnvzl0z7] { border-color: var(--primary-300); color: var(--text); }
.pill.active[b-7ysnvzl0z7] { background: var(--primary-900); color: #fff; border-color: var(--primary-900); }

/* ═══ TABLE (desktop) — base styles in .data-table-wrap (app.css) ═══ */
.quote-row[b-7ysnvzl0z7] { cursor: pointer; }

/* ═══ MOBILE LIST — hidden by default ═══ */
.quotes-mobile[b-7ysnvzl0z7] {
    display: none;
    background: #fff;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    padding: 0 0.875rem;
}

/* ═══ MOBILE LIST ROW ═══ */
.qm-row[b-7ysnvzl0z7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.qm-row:last-child[b-7ysnvzl0z7] {
    border-bottom: none;
}

.qm-row:active[b-7ysnvzl0z7] {
    background: var(--primary-50);
    margin: 0 -0.875rem;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
}

.qm-left[b-7ysnvzl0z7] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.qm-client[b-7ysnvzl0z7] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qm-meta[b-7ysnvzl0z7] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qm-right[b-7ysnvzl0z7] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.qm-amount[b-7ysnvzl0z7] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}

/* ═══ BADGE EXPIRED ═══ */
[b-7ysnvzl0z7] .badge-expired {
    background: #F3F4F6;
    color: #6B7280;
}

/* ═══ TEMPLATE GRID ═══ */
.template-actions[b-7ysnvzl0z7] { margin-bottom: 1rem; }
.template-grid[b-7ysnvzl0z7] { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 0.75rem; }
.template-card[b-7ysnvzl0z7] { border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 1.25rem; background: #fff; transition: all var(--transition); box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.template-card:hover[b-7ysnvzl0z7] { border-color: var(--primary-300); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.template-card-header[b-7ysnvzl0z7] { margin-bottom: 0.75rem; }
.template-card-name[b-7ysnvzl0z7] { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: 0.25rem; }
.template-card-meta[b-7ysnvzl0z7] { font-size: 0.8125rem; color: var(--text-secondary); }
.template-card-items[b-7ysnvzl0z7] { padding: 0.75rem 0; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
.template-card-item[b-7ysnvzl0z7] { display: flex; justify-content: space-between; align-items: center; font-size: 0.8125rem; padding: 0.1875rem 0; color: var(--text-secondary); }
.template-card-item span:first-child[b-7ysnvzl0z7] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 80%; }
.template-card-footer[b-7ysnvzl0z7] { display: flex; align-items: center; justify-content: space-between; margin-top: 0.75rem; }
.template-card-actions[b-7ysnvzl0z7] { display: flex; gap: 0.25rem; }


/* ═══ GUIDE MODAL ═══ */
.modal-overlay[b-7ysnvzl0z7] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.guide-box[b-7ysnvzl0z7] { background: var(--bg); border-radius: var(--radius); max-width: 42.5rem; width: 94%; max-height: 85vh; display: flex; flex-direction: column; box-shadow: var(--shadow-md); }
.guide-header[b-7ysnvzl0z7] { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 1.75rem 1rem; border-bottom: 1px solid var(--border-light); flex-shrink: 0; }
.guide-title[b-7ysnvzl0z7] { font-size: 1.25rem; font-weight: 700; color: var(--text); font-family: var(--font-heading); }
.guide-content[b-7ysnvzl0z7] { overflow-y: auto; padding: 0.5rem 1.75rem 1.75rem; }
.guide-section[b-7ysnvzl0z7] { padding: 1.25rem 0; border-bottom: 1px solid var(--border-light); }
.guide-section:last-child[b-7ysnvzl0z7] { border-bottom: none; padding-bottom: 0; }
.guide-section-title[b-7ysnvzl0z7] { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.625rem; font-family: var(--font-heading); }
.guide-section-title .material-icons-round[b-7ysnvzl0z7] { font-size: 1.25rem; color: var(--accent); }
.guide-section p[b-7ysnvzl0z7] { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.7; margin: 0.375rem 0; }
.guide-section ul[b-7ysnvzl0z7], .guide-section ol[b-7ysnvzl0z7] { margin: 0.5rem 0; padding-left: 1.25rem; }
.guide-section li[b-7ysnvzl0z7] { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.7; margin: 0.25rem 0; }
.guide-section strong[b-7ysnvzl0z7] { color: var(--text); }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
    .quotes-desktop[b-7ysnvzl0z7] { display: none; }
    .quotes-mobile[b-7ysnvzl0z7] { display: block; }
    .template-grid[b-7ysnvzl0z7] { grid-template-columns: 1fr; }

    /* toolbar */
    .toolbar-row[b-7ysnvzl0z7] { gap: 0.375rem; margin-bottom: 0.5rem; }
    .view-tab[b-7ysnvzl0z7] { padding: 0.4375rem 0.625rem; font-size: 0.8125rem; gap: 0.25rem; }

    /* search + pills stack vertically */
    .search-filter-bar[b-7ysnvzl0z7] { flex-direction: column; gap: 0.375rem; margin-bottom: 0.5rem; }
    .search-filter-bar .search-bar[b-7ysnvzl0z7] { width: 100%; }
    .filter-pills[b-7ysnvzl0z7] { width: 100%; }
    .pill[b-7ysnvzl0z7] { padding: 0.3125rem 0.75rem; font-size: 0.75rem; }

    .guide-box[b-7ysnvzl0z7] { width: 98%; max-height: 90vh; }
    .guide-header[b-7ysnvzl0z7] { padding: 1.125rem 1.25rem 0.875rem; }
    .guide-content[b-7ysnvzl0z7] { padding: 0.25rem 1.25rem 1.25rem; }
}

@media (max-width: 480px) {
    .view-tab[b-7ysnvzl0z7] { padding: 0.375rem 0.5rem; font-size: 0.75rem; }
    .view-tab .material-icons-round[b-7ysnvzl0z7] { font-size: 1rem; }
    .btn-icon-action[b-7ysnvzl0z7] { width: 2rem; height: 2rem; }
    .btn-icon-action .material-icons-round[b-7ysnvzl0z7] { font-size: 1rem; }
    .pill[b-7ysnvzl0z7] { padding: 0.25rem 0.625rem; font-size: 0.6875rem; }

    .qm-client[b-7ysnvzl0z7] { font-size: 0.875rem; }
    .qm-amount[b-7ysnvzl0z7] { font-size: 0.875rem; }
    .qm-meta[b-7ysnvzl0z7] { font-size: 0.6875rem; }
}

@media (max-width: 360px) {
    .qm-row[b-7ysnvzl0z7] { padding: 0.5rem 0; gap: 0.5rem; }
    .qm-client[b-7ysnvzl0z7] { font-size: 0.8125rem; }
    .qm-amount[b-7ysnvzl0z7] { font-size: 0.8125rem; }
}

/* ═══ AI MODAL ═══ */
.btn-ai[b-7ysnvzl0z7] {
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    color: white;
    border: none;
}
.btn-ai:hover[b-7ysnvzl0z7] { opacity: 0.9; }

.modal-content[b-7ysnvzl0z7] { background: var(--bg); border-radius: var(--radius); width: 94%; max-height: 85vh; display: flex; flex-direction: column; box-shadow: var(--shadow-md); }
.modal-ai[b-7ysnvzl0z7] { max-width: 40rem; }

@media (max-width: 600px) {
    .modal-overlay[b-7ysnvzl0z7] { padding: 0; align-items: stretch; }
    .modal-content[b-7ysnvzl0z7] { max-height: 100vh; max-height: 100dvh; width: 100%; border-radius: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
    .modal-header[b-7ysnvzl0z7] { padding: 0.875rem 1rem 0.75rem; }
    .modal-header h3[b-7ysnvzl0z7] { font-size: 1rem; }
    .modal-body[b-7ysnvzl0z7] { padding: 0.875rem 1rem; }
    .modal-footer[b-7ysnvzl0z7] { padding: 0.75rem 1rem; flex-wrap: wrap; }
    .modal-footer .btn[b-7ysnvzl0z7] { flex: 1; min-width: 0; font-size: 0.8125rem; }

    .ai-model-btn[b-7ysnvzl0z7] { padding: 0.4375rem 0.5rem; font-size: 0.75rem; }
    .ai-model-btn .material-icons-round[b-7ysnvzl0z7] { font-size: 0.875rem; }
    .ai-textarea[b-7ysnvzl0z7] { min-height: 4rem; font-size: 0.8125rem; padding: 0.625rem; }
    .ai-meta[b-7ysnvzl0z7] { flex-direction: column; gap: 0.25rem; }
    .ai-desc[b-7ysnvzl0z7] { font-size: 0.75rem; }
}

.modal-header[b-7ysnvzl0z7] { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem 1rem; border-bottom: 1px solid var(--border-light); flex-shrink: 0; }
.modal-header h3[b-7ysnvzl0z7] { display: flex; align-items: center; gap: 0.5rem; font-size: 1.125rem; font-weight: 700; color: var(--text); margin: 0; font-family: var(--font-heading); }
.modal-close[b-7ysnvzl0z7] { background: none; border: none; cursor: pointer; color: var(--text-secondary); display: flex; align-items: center; padding: 0.25rem; border-radius: 0.25rem; }
.modal-close:hover[b-7ysnvzl0z7] { color: var(--text); background: var(--primary-50); }

.modal-body[b-7ysnvzl0z7] { padding: 1.25rem 1.5rem; overflow-y: auto; flex: 1; }
.modal-footer[b-7ysnvzl0z7] { padding: 1rem 1.5rem; border-top: 1px solid var(--border-light); display: flex; justify-content: flex-end; gap: 0.5rem; flex-shrink: 0; }

.ai-desc[b-7ysnvzl0z7] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.btn-icon-ai[b-7ysnvzl0z7] {
    width: auto !important;
    padding: 0 0.625rem;
    gap: 0.25rem;
    background: linear-gradient(135deg, #8B5CF6, var(--accent)) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
    transition: transform 150ms ease, box-shadow 150ms ease !important;
}
.btn-icon-ai:hover[b-7ysnvzl0z7] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
    background: linear-gradient(135deg, #8B5CF6, var(--accent)) !important;
    color: #fff !important;
}
.btn-icon-ai .material-icons-round[b-7ysnvzl0z7] { color: #fff; }
.btn-ai-label[b-7ysnvzl0z7] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #fff;
}

.ai-model-switch[b-7ysnvzl0z7] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.ai-model-btn[b-7ysnvzl0z7] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--bg-card);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}
.ai-model-btn:hover[b-7ysnvzl0z7] { border-color: var(--primary); color: var(--text-primary); }
.ai-model-btn.ai-model-active[b-7ysnvzl0z7] {
    border-color: var(--primary);
    background: rgba(99,102,241,0.08);
    color: var(--primary);
    font-weight: 600;
}
.ai-model-btn .material-icons-round[b-7ysnvzl0z7] { font-size: 1rem; }

.ai-textarea[b-7ysnvzl0z7] {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.75rem;
    font-size: 0.875rem;
    font-family: inherit;
    resize: vertical;
    min-height: 5rem;
    box-sizing: border-box;
}
.ai-textarea:focus[b-7ysnvzl0z7] { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }

.ai-meta[b-7ysnvzl0z7] {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.ai-quota[b-7ysnvzl0z7] { font-weight: 600; }
.ai-reset[b-7ysnvzl0z7] { font-weight: 400; color: var(--text-tertiary); }

.ai-preview[b-7ysnvzl0z7] { max-height: 60vh; overflow-y: auto; }

.ai-section[b-7ysnvzl0z7] { margin-bottom: 1rem; }
.ai-section-title[b-7ysnvzl0z7] { font-size: 0.75rem; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.03125rem; margin-bottom: 0.5rem; font-family: var(--font-heading); }

.ai-client[b-7ysnvzl0z7] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ai-client-detail[b-7ysnvzl0z7] { font-size: 0.8125rem; color: var(--text-secondary); }

.ai-title[b-7ysnvzl0z7] { font-size: 1.0625rem; font-weight: 700; margin-bottom: 1rem; color: var(--text); font-family: var(--font-heading); }

.ai-items-list[b-7ysnvzl0z7] { display: flex; flex-direction: column; gap: 0.5rem; }
.ai-item-card[b-7ysnvzl0z7] { border: 1px solid var(--border-light, #e5e7eb); border-radius: 0.5rem; padding: 0.625rem 0.75rem; }
.ai-item-top[b-7ysnvzl0z7] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.25rem; flex-wrap: wrap; }
.ai-item-name[b-7ysnvzl0z7] { font-weight: 600; font-size: 0.8125rem; min-width: 0; word-break: break-word; }
.ai-item-details[b-7ysnvzl0z7] { font-size: 0.75rem; color: var(--text-secondary); display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.ai-item-vat[b-7ysnvzl0z7] { color: var(--text-tertiary); white-space: nowrap; }
.ai-item-totals[b-7ysnvzl0z7] { font-size: 0.75rem; display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.25rem; flex-wrap: wrap; }
.ai-item-brutto[b-7ysnvzl0z7] { font-weight: 600; white-space: nowrap; }

.ai-group-header[b-7ysnvzl0z7] { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); padding: 0.5rem 0 0.25rem; border-bottom: 1px solid var(--border-light, #e5e7eb); margin-top: 0.25rem; }
.ai-group-subtotal[b-7ysnvzl0z7] { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-secondary); padding: 0.25rem 0.75rem; font-weight: 600; }
.ai-refine-hint[b-7ysnvzl0z7] { font-size: 0.6875rem; color: var(--text-tertiary); margin-top: 0.25rem; }
.ai-refine-hint--active[b-7ysnvzl0z7] { color: var(--accent); font-weight: 500; }

.ai-totals[b-7ysnvzl0z7] { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 2px solid var(--border); }
.ai-total-row[b-7ysnvzl0z7] { display: flex; justify-content: space-between; font-size: 0.8125rem; padding: 0.125rem 0; }
.ai-total-brutto[b-7ysnvzl0z7] { font-weight: 700; font-size: 0.875rem; }

[b-7ysnvzl0z7] .badge-ai { background: linear-gradient(135deg, #6366F1, #8B5CF6); color: white; font-size: 0.625rem; padding: 1px 0.375rem; border-radius: 0.25rem; }
[b-7ysnvzl0z7] .badge-new { background: #F59E0B; color: white; font-size: 0.625rem; padding: 1px 0.375rem; border-radius: 0.25rem; }

.ai-notes[b-7ysnvzl0z7] { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.6; background: var(--bg-muted, #f9fafb); padding: 0.75rem; border-radius: 0.5rem; }

.spinner-sm[b-7ysnvzl0z7] {
    display: inline-block;
    width: 0.875rem; height: 0.875rem;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-ai 0.6s linear infinite;
    vertical-align: middle;
}

[b-7ysnvzl0z7] .alert-error { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; border-radius: 0.5rem; padding: 0.625rem 0.875rem; font-size: 0.8125rem; margin-top: 0.75rem; }

[b-7ysnvzl0z7] .ai-spin { animation: spin-ai 0.6s linear infinite; }
/* /Components/Pages/QuoteTemplatePage.razor.rz.scp.css */
/* ═══ TEMPLATE NAME ═══ */
.template-name-section[b-dl6qqvpoub] { margin-bottom: 1rem; }

/* ═══ STICKY NAV BAR ═══ */
.stepper-bar[b-dl6qqvpoub] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg-app);
    padding: 0.625rem 0;
    margin: -0.625rem 0 0.75rem;
}

/* ═══ TABS ═══ */
.tabs[b-dl6qqvpoub] { display: flex; gap: 0.375rem; margin-bottom: 1rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs[b-dl6qqvpoub]::-webkit-scrollbar { display: none; }
.tab[b-dl6qqvpoub] { padding: 0.375rem 0.875rem; border-radius: 6.25rem; border: 1px solid var(--border); background: #fff; font-size: 0.8125rem; font-weight: 500; cursor: pointer; color: var(--text-secondary); transition: all 150ms ease; white-space: nowrap; flex-shrink: 0; }
.tab:hover[b-dl6qqvpoub] { border-color: var(--primary-300); color: var(--text); }
.tab.active[b-dl6qqvpoub] { background: var(--primary-900); color: #fff; border-color: var(--primary-900); }

/* ═══ CATALOG HEADER ═══ */
.catalog-header[b-dl6qqvpoub] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.catalog-header-label[b-dl6qqvpoub] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
}

/* ═══ SERVICE LIST (compact rows — matches QuoteWizard) ═══ */
.service-list[b-dl6qqvpoub] { margin-bottom: 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.service-row[b-dl6qqvpoub] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    cursor: pointer;
    transition: background 150ms;
    border-bottom: 1px solid var(--border-light);
}
.service-row:last-child[b-dl6qqvpoub] { border-bottom: none; }
.service-row:hover[b-dl6qqvpoub] { background: var(--accent-bg); }
.service-row-active[b-dl6qqvpoub] { background: var(--accent-bg); }
.service-row-body[b-dl6qqvpoub] { flex: 1; min-width: 0; }
.service-row-name[b-dl6qqvpoub] { font-size: 0.875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.service-row-meta[b-dl6qqvpoub] { font-size: 0.75rem; color: var(--text-secondary); }
.service-row-price[b-dl6qqvpoub] { font-size: 0.875rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.service-row-add[b-dl6qqvpoub] { font-size: 1.25rem; color: var(--accent); flex-shrink: 0; opacity: 0.5; transition: opacity 150ms; }
.service-row:hover .service-row-add[b-dl6qqvpoub] { opacity: 1; }

/* ═══ VARIANT PICKER ═══ */
.variant-picker[b-dl6qqvpoub] { margin-bottom: 1.5rem; border: 2px solid var(--accent); border-radius: var(--radius-sm); padding: 1.25rem; background: #fff; }
.variant-picker-title[b-dl6qqvpoub] { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; font-family: var(--font-heading); }
.variant-picker-group[b-dl6qqvpoub] { margin-bottom: 0.875rem; }
.variant-picker-label[b-dl6qqvpoub] { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.5rem; }
.variant-picker-summary[b-dl6qqvpoub] { display: flex; align-items: flex-end; gap: 1.25rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-light); flex-wrap: wrap; }
.variant-picker-field[b-dl6qqvpoub] { display: flex; flex-direction: column; gap: 0.25rem; }
.variant-picker-field-label[b-dl6qqvpoub] { font-size: 0.75rem; color: var(--text-tertiary); font-weight: 500; }
.variant-picker-price-value[b-dl6qqvpoub] { font-size: 1rem; font-weight: 700; }
.option-chips[b-dl6qqvpoub] { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.option-chip[b-dl6qqvpoub] { padding: 0.5rem 1rem; border-radius: 1.25rem; border: 1px solid var(--border); background: var(--bg); font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: all 150ms ease; }
.option-chip:hover[b-dl6qqvpoub] { border-color: var(--primary-300); }
.option-chip.selected[b-dl6qqvpoub] { background: var(--primary-900); color: #fff; border-color: var(--primary-900); }
.form-actions[b-dl6qqvpoub] { display: flex; gap: 0.5rem; margin-top: 1rem; }

/* ═══ DETACH BUTTON ═══ */
.btn-detach[b-dl6qqvpoub] { border: none; background: none; cursor: pointer; color: var(--text-tertiary); padding: 0.125rem; border-radius: 4px; vertical-align: middle; margin-left: 0.25rem; }
.btn-detach:hover[b-dl6qqvpoub] { color: var(--danger); background: var(--danger-bg); }
.btn-detach .material-icons-round[b-dl6qqvpoub] { font-size: 1rem; }

/* ═══ SECTION TITLE ═══ */
.section-title[b-dl6qqvpoub] { font-size: 0.6875rem; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; }

/* ═══ LINE ITEMS ═══ */
.line-item[b-dl6qqvpoub] { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; border: 1px solid var(--border-light); border-radius: var(--radius-sm); margin-bottom: 0.5rem; background: var(--bg, #F9FAFB); flex-wrap: wrap; }
.line-item-adhoc[b-dl6qqvpoub] { border-style: dashed; }
.line-item-name[b-dl6qqvpoub] { flex: 2; font-weight: 500; font-size: 0.9375rem; min-width: 7.5rem; display: flex; align-items: center; }
.line-item-field[b-dl6qqvpoub] { display: flex; flex-direction: column; gap: 0.125rem; }
.line-item-field-name[b-dl6qqvpoub] { flex: 2; min-width: 7.5rem; }
.line-item-field-label[b-dl6qqvpoub] { font-size: 0.625rem; color: var(--text-tertiary); font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1; }
.line-item-field-value[b-dl6qqvpoub] { font-size: 0.875rem; color: var(--text); }
.line-item-input[b-dl6qqvpoub] { width: 4.5rem; padding: 0.5rem 0.625rem; border: 1px solid var(--border); border-radius: 6px; text-align: center; font-size: 0.9375rem; }
.line-item-input:focus[b-dl6qqvpoub] { border-color: var(--accent); outline: none; }
.line-item-name-input[b-dl6qqvpoub] { width: 100% !important; text-align: left !important; min-width: 0; flex: 1 1 100%; padding: 0.5rem 0.75rem; }
.line-item-price-input[b-dl6qqvpoub] { width: 5rem; }
.line-item-cost-input[b-dl6qqvpoub] { width: 5rem; }
.line-item-vat-select[b-dl6qqvpoub] { padding: 0.5rem 0.375rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.8125rem; background: var(--bg); cursor: pointer; width: 4rem; }
.line-item-vat-select:focus[b-dl6qqvpoub] { border-color: var(--accent); outline: none; }
.line-item-unit-label[b-dl6qqvpoub] { font-size: 0.75rem; color: var(--text-tertiary); min-width: 2rem; }
.line-item-totals[b-dl6qqvpoub] { display: flex; flex-direction: column; gap: 1px; min-width: 6.25rem; text-align: right; margin-left: auto; }
.line-item-total-net[b-dl6qqvpoub] { font-size: 0.9375rem; font-weight: 600; white-space: nowrap; }
.line-item-total-gross[b-dl6qqvpoub] { font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; }
.line-item-label[b-dl6qqvpoub] { font-size: 0.625rem; color: var(--text-tertiary); }
.line-item-del[b-dl6qqvpoub] { border: none; background: none; cursor: pointer; color: var(--text-tertiary); padding: 0.375rem; border-radius: 6px; }
.line-item-del:hover[b-dl6qqvpoub] { color: var(--danger); background: var(--danger-bg); }

/* ═══ SUMMARY ═══ */
.summary-box[b-dl6qqvpoub] { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; background: var(--primary-50); margin-top: 1rem; }
.summary-row[b-dl6qqvpoub] { display: flex; justify-content: space-between; padding: 0.625rem 0; font-size: 0.9375rem; }
.summary-row.total[b-dl6qqvpoub] { font-size: 1.25rem; font-weight: 700; border-top: 2px solid var(--primary-900); padding-top: 0.875rem; margin-top: 0.625rem; }
.summary-row.margin[b-dl6qqvpoub] { color: var(--success); font-weight: 600; }
.margin-badge[b-dl6qqvpoub] { display: inline-flex; padding: 0.3125rem 0.75rem; border-radius: 1.25rem; font-size: 0.8125rem; font-weight: 600; }
.margin-badge.good[b-dl6qqvpoub] { background: var(--success-bg); color: var(--success); }
.margin-badge.ok[b-dl6qqvpoub] { background: var(--warning-bg); color: var(--warning); }
.margin-badge.bad[b-dl6qqvpoub] { background: var(--danger-bg); color: var(--danger); }

/* ═══ LINE GROUPS ═══ */
.wizard-group-toolbar[b-dl6qqvpoub] { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.show-groups-toggle[b-dl6qqvpoub] { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--text-secondary); cursor: pointer; margin-left: auto; }

.line-group[b-dl6qqvpoub] { border: 1px solid var(--border-light); border-radius: var(--radius-sm); margin-bottom: 0.75rem; background: #fff; }
.line-group-header[b-dl6qqvpoub] {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.625rem 0.75rem; background: var(--primary-50);
    border-bottom: 1px solid var(--border-light); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.group-icon[b-dl6qqvpoub] { font-size: 1.125rem; color: var(--accent); }
.group-name-input[b-dl6qqvpoub] {
    flex: 1; border: none; background: transparent; font-size: 0.875rem;
    font-weight: 600; font-family: var(--font-heading); color: var(--text);
    outline: none; min-width: 0;
}
.group-name-input[b-dl6qqvpoub]::placeholder { color: var(--text-tertiary); font-weight: 400; }
.group-name-input:focus[b-dl6qqvpoub] { border-bottom: 2px solid var(--accent); }

.drag-handle[b-dl6qqvpoub] { font-size: 1.125rem; color: var(--text-tertiary); cursor: grab; flex-shrink: 0; }
.drag-handle:active[b-dl6qqvpoub] { cursor: grabbing; }

.group-delete-btn[b-dl6qqvpoub] {
    display: flex; align-items: center; justify-content: center;
    border: none; background: none; cursor: pointer; flex-shrink: 0;
    color: var(--text-tertiary); padding: 0.25rem; border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
}
.group-delete-btn:hover[b-dl6qqvpoub] { color: var(--danger, #dc2626); background: rgba(220, 38, 38, 0.08); }
.group-delete-btn .material-icons-round[b-dl6qqvpoub] { font-size: 1.125rem; }

.line-group-empty[b-dl6qqvpoub] {
    padding: 1rem; text-align: center; font-size: 0.8125rem;
    color: var(--text-tertiary); font-style: italic;
}

.line-group-subtotal[b-dl6qqvpoub] {
    padding: 0.5rem 0.75rem; font-size: 0.8125rem; font-weight: 600;
    color: var(--text-secondary); text-align: right;
    border-top: 1px dashed var(--border-light); background: var(--primary-50);
}

.line-group-add-wrap[b-dl6qqvpoub] { padding: 0.375rem 0.75rem 0.625rem; }
.line-group-add[b-dl6qqvpoub] { font-size: 0.75rem; }

.dragging[b-dl6qqvpoub] { opacity: 0.4; }
.drag-over[b-dl6qqvpoub] { outline: 2px dashed var(--accent); outline-offset: -2px; }

/* ═══ WIZARD NAV ═══ */
.wizard-nav[b-dl6qqvpoub] { display: flex; justify-content: space-between; margin-top: 1.5rem; flex-wrap: wrap; gap: 1rem; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
    .line-item[b-dl6qqvpoub] { flex-wrap: wrap; gap: 0.625rem; padding: 0.75rem; }
    .variant-picker-summary[b-dl6qqvpoub] { flex-direction: column; gap: 0.75rem; }
    .wizard-nav[b-dl6qqvpoub] { gap: 0.75rem; }
    .summary-row.total[b-dl6qqvpoub] { font-size: 1.0625rem; }
    .line-group-header[b-dl6qqvpoub] { padding: 0.5rem 0.625rem; }
    .group-name-input[b-dl6qqvpoub] { font-size: 0.8125rem; }
    .line-group-subtotal[b-dl6qqvpoub] { font-size: 0.75rem; padding: 0.375rem 0.625rem; }
    .wizard-group-toolbar[b-dl6qqvpoub] { gap: 0.5rem; }
}

@media (max-width: 480px) {
    .stepper-bar[b-dl6qqvpoub] { padding: 0.5rem 0; }
    .line-item[b-dl6qqvpoub] { padding: 0.625rem; gap: 0.5rem; position: relative; padding-right: 2.25rem; }
    .line-item-name[b-dl6qqvpoub] { flex: 1 1 100%; font-size: 0.875rem; }
    .line-item-input[b-dl6qqvpoub] { width: 3.75rem; padding: 0.375rem 0.5rem; font-size: 0.875rem; }
    .line-item-name-input[b-dl6qqvpoub] { min-width: 0; flex: 1 1 100%; }
    .line-item-price-input[b-dl6qqvpoub] { width: 4.375rem; }
    .line-item-cost-input[b-dl6qqvpoub] { width: 4.375rem; }
    .line-item-vat-select[b-dl6qqvpoub] { width: 3.5rem; font-size: 0.75rem; }
    .line-item-del[b-dl6qqvpoub] { position: absolute; top: 8px; right: 4px; }
    .line-item-totals[b-dl6qqvpoub] { flex: 1 1 100%; flex-direction: row; justify-content: space-between; text-align: left; min-width: 0; margin-left: 0; padding-top: 0.375rem; border-top: 1px solid var(--border-light); }
    .variant-picker[b-dl6qqvpoub] { padding: 1rem; }
    .line-group-header[b-dl6qqvpoub] { gap: 0.375rem; padding: 0.4375rem 0.5rem; }
    .group-name-input[b-dl6qqvpoub] { font-size: 0.75rem; }
}
/* /Components/Pages/QuoteWizardPage.razor.rz.scp.css */
/* ═══ STICKY NAV BAR — flush to top of page-content ═══ */
/* Parent .page-content drops its padding-top via :has(.stepper-bar-shell) in MainLayout. */
.stepper-bar-shell[b-nnn26m0d5k] {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #F5F6FA;
    /* Extend bar background across page-content's horizontal padding */
    margin: 0 -2rem 0.75rem;
    max-width: none;
    box-shadow: 0 1px 0 0 transparent;
    transition: box-shadow 150ms;
}
.stepper-bar[b-nnn26m0d5k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 2rem;
    max-width: none;
}
.stepper-bar-shell.stuck[b-nnn26m0d5k] { box-shadow: 0 1px 0 0 var(--border-light); }

@media (max-width: 767px) {
    .stepper-bar-shell[b-nnn26m0d5k] { margin: 0 -1rem 0.75rem; }
    .stepper-bar[b-nnn26m0d5k] { padding: 0.75rem 1rem; }
}
@media (max-width: 479px) {
    .stepper-bar-shell[b-nnn26m0d5k] { margin: 0 -0.625rem 0.75rem; }
    .stepper-bar[b-nnn26m0d5k] { padding: 0.625rem 0.625rem; }
}
@media (max-width: 359px) {
    .stepper-bar-shell[b-nnn26m0d5k] { margin: 0 -0.5rem 0.75rem; }
    .stepper-bar[b-nnn26m0d5k] { padding: 0.5rem 0.5rem; }
}
.stepper-bar-left[b-nnn26m0d5k] { flex: 1; min-width: 0; }
.stepper-bar-title[b-nnn26m0d5k] { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); }
.stepper-next[b-nnn26m0d5k], .stepper-back[b-nnn26m0d5k] { white-space: nowrap; flex-shrink: 0; }
.cta-count[b-nnn26m0d5k] { opacity: 0.85; font-weight: 500; font-size: 0.8125rem; margin-left: 0.375rem; }
.cta-count-sep[b-nnn26m0d5k] { opacity: 0.6; margin: 0 0.1875rem; }

/* ═══ STEP 0 — TWO-COLUMN LAYOUT (≥1200px only, below = single column stack) ═══ */
.wizard-step0-layout[b-nnn26m0d5k] {
    display: block;
    padding-top: 1rem;
    scroll-margin-top: 4rem;
}
/* Hint banner above the layout also gets breathing room from sticky bar */
.wizard-hint[b-nnn26m0d5k] { scroll-margin-top: 4rem; }
@media (min-width: 1200px) {
    .wizard-step0-layout[b-nnn26m0d5k] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 32rem;
        gap: 1.5rem;
        align-items: start;
    }
    .wizard-step0-left[b-nnn26m0d5k] { min-width: 0; }
    .wizard-step0-right[b-nnn26m0d5k] {
        position: sticky;
        top: 3.25rem;
        min-width: 0;
        max-height: calc(100vh - 4rem);
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0;
        margin: 0;
        /* Let scroll chain to the page when column hits top/bottom of its own scroll,
           so the whole column stays reachable even when page is scrolled. */
        overscroll-behavior: auto;
    }
    /* Thin scrollbar for the right column */
    .wizard-step0-right[b-nnn26m0d5k]::-webkit-scrollbar { width: 0.5rem; }
    .wizard-step0-right[b-nnn26m0d5k]::-webkit-scrollbar-track { background: transparent; }
    .wizard-step0-right[b-nnn26m0d5k]::-webkit-scrollbar-thumb { background: var(--border); border-radius: 0.25rem; }
    .wizard-step0-right[b-nnn26m0d5k]::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

    /* Line items inside right column use a wrapped card layout so delete is always visible */
    .wizard-step0-right .line-item[b-nnn26m0d5k] {
        flex-wrap: wrap;
        position: relative;
        padding: 0.875rem 3rem 0.875rem 0.875rem;
        gap: 0.5rem 0.75rem;
    }
    .wizard-step0-right .line-item .drag-handle[b-nnn26m0d5k] { display: none; }
    .wizard-step0-right .line-item-name[b-nnn26m0d5k] {
        flex: 1 1 100%;
        padding-right: 2.25rem;
        font-size: 0.875rem;
        font-weight: 600;
        line-height: 1.35;
    }
    .wizard-step0-right .line-item-field-name[b-nnn26m0d5k] { flex: 1 1 100%; min-width: 0; }
    .wizard-step0-right .line-item-name-input[b-nnn26m0d5k] { font-size: 0.875rem; }
    .wizard-step0-right .line-item-unit[b-nnn26m0d5k] { flex: 0 1 auto; font-size: 0.75rem; }
    .wizard-step0-right .line-item-total-net[b-nnn26m0d5k] { font-size: 0.875rem; }
    .wizard-step0-right .line-item-total-gross[b-nnn26m0d5k] { font-size: 0.75rem; }

    /* Smaller, more proportional inputs in right column */
    .wizard-step0-right .line-item-input[b-nnn26m0d5k] {
        width: 3.25rem;
        padding: 0.3125rem 0.375rem;
        font-size: 0.8125rem;
    }
    .wizard-step0-right .line-item-price-input[b-nnn26m0d5k],
    .wizard-step0-right .line-item-cost-input[b-nnn26m0d5k] { width: 4rem; }
    .wizard-step0-right .line-item-qty-group[b-nnn26m0d5k] { gap: 0.25rem; }
    .wizard-step0-right .line-item-unit-suffix[b-nnn26m0d5k] { font-size: 0.6875rem; }
    .wizard-step0-right .line-item-totals[b-nnn26m0d5k] {
        flex: 1 1 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
        padding-top: 0.375rem;
        border-top: 1px solid var(--border-light);
        min-width: 0;
    }
    .wizard-step0-right .line-item-del[b-nnn26m0d5k] {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border-radius: 50%;
    }
    .wizard-step0-right .line-item-del:hover[b-nnn26m0d5k],
    .wizard-step0-right .line-item-del:focus-visible[b-nnn26m0d5k] {
        background: var(--danger-bg);
        color: var(--danger);
    }
    .wizard-step0-right .line-item-reorder[b-nnn26m0d5k] { display: none; }
}

/* ═══ SERVICE SEARCH ═══ */
.service-search[b-nnn26m0d5k] {
    position: relative;
    margin-bottom: 0.75rem;
}
.service-search-icon[b-nnn26m0d5k] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 1.125rem;
    pointer-events: none;
}
.service-search-input[b-nnn26m0d5k] {
    width: 100%;
    padding: 0.625rem 2.5rem 0.625rem 2.375rem;
    font-size: 0.875rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    transition: border-color var(--transition);
}
.service-search-input:focus[b-nnn26m0d5k] { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(79,70,229,0.08); }
.service-search-clear[b-nnn26m0d5k] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-tertiary);
    padding: 0.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.service-search-clear:hover[b-nnn26m0d5k] { color: var(--danger); background: var(--danger-bg); }
.service-search-clear .material-icons-round[b-nnn26m0d5k] { font-size: 1rem; }
.service-search-empty[b-nnn26m0d5k] {
    text-align: center;
    padding: 1.25rem;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
}

/* ═══ WIZARD NAV ═══ */
.wizard-nav[b-nnn26m0d5k] { display: flex; justify-content: space-between; margin-top: 1rem; flex-wrap: wrap; gap: 1rem; }
/* ═══ COMPACT FORM OVERRIDES ═══ */
[b-nnn26m0d5k] .section-card { margin-bottom: 0.75rem; padding: 1rem; }
[b-nnn26m0d5k] .section-title { font-size: 0.75rem; margin-bottom: 0.5rem; }
[b-nnn26m0d5k] .form-group { margin-bottom: 0.625rem; }
[b-nnn26m0d5k] .form-label { font-size: 0.6875rem; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.125rem; }
[b-nnn26m0d5k] .form-input { padding: 0.4375rem 0.625rem; font-size: 0.8125rem; }
.section-card[b-nnn26m0d5k] { margin-bottom: 0.75rem; }

/* ═══ CLIENT SELECT ═══ */
.client-row[b-nnn26m0d5k] { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.75rem 1rem; margin-bottom: 0.5rem; cursor: pointer; transition: all var(--transition); }
.client-row:hover[b-nnn26m0d5k] { border-color: var(--primary-300); }
.client-row.selected[b-nnn26m0d5k] { border-color: var(--accent); background: var(--accent-bg); position: relative; padding-right: 2.75rem; }
.client-deselect[b-nnn26m0d5k] { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); border: none; background: none; cursor: pointer; color: var(--text-tertiary); padding: 0.25rem; border-radius: 4px; }
.client-deselect:hover[b-nnn26m0d5k] { color: var(--danger); background: var(--danger-bg); }
.client-deselect .material-icons-round[b-nnn26m0d5k] { font-size: 1.125rem; }
.client-row-name[b-nnn26m0d5k] { font-weight: 600; }
.client-row-info[b-nnn26m0d5k] { font-size: 0.8125rem; color: var(--text-secondary); }
.divider[b-nnn26m0d5k] { height: 1px; background: var(--border-light); margin: 1.5rem 0; }

/* ═══ TABS (horizontal scroll with edge mask) ═══ */
.tabs-wrap[b-nnn26m0d5k] {
    position: relative;
    margin-bottom: 1rem;
}
.tabs-wrap[b-nnn26m0d5k]::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2rem;
    background: linear-gradient(to right, rgba(245,246,250,0), #F5F6FA);
    pointer-events: none;
    opacity: 0.8;
}
.tabs[b-nnn26m0d5k] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-right: 2rem;
    scroll-padding: 0.5rem;
}
.tabs[b-nnn26m0d5k]::-webkit-scrollbar { display: none; }
.tab[b-nnn26m0d5k] { padding: 0.5rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg); font-size: 0.875rem; font-weight: 500; cursor: pointer; color: var(--text-secondary); transition: all var(--transition); white-space: nowrap; flex-shrink: 0; }
.tab:hover[b-nnn26m0d5k] { border-color: var(--primary-300); color: var(--text); }
.tab.active[b-nnn26m0d5k] { background: var(--primary-900); color: #fff; border-color: var(--primary-900); }

/* ═══ CATALOG HEADER ═══ */
.catalog-header[b-nnn26m0d5k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.catalog-header-label[b-nnn26m0d5k] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
}
.catalog-header-link[b-nnn26m0d5k] {
    font-size: 0.75rem;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
}
.catalog-header-link:hover[b-nnn26m0d5k] { text-decoration: underline; }

/* ═══ SERVICE LIST (compact rows) ═══ */
.service-list[b-nnn26m0d5k] { margin-bottom: 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.service-row-wrap[b-nnn26m0d5k] { border-bottom: 1px solid var(--border-light); }
.service-row-wrap:last-child[b-nnn26m0d5k] { border-bottom: none; }
.service-row[b-nnn26m0d5k] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    cursor: pointer;
    transition: background 150ms;
    min-height: 2.75rem;
}
.service-row:hover[b-nnn26m0d5k] { background: var(--accent-bg); }
.service-row:hover .service-row-name[b-nnn26m0d5k] { color: var(--accent); }
.service-row-active[b-nnn26m0d5k] { background: var(--accent-bg); }
.service-row-active .service-row-add[b-nnn26m0d5k] { color: var(--accent); transform: rotate(45deg); }
.service-row-body[b-nnn26m0d5k] { flex: 1; min-width: 0; }
.service-row-name[b-nnn26m0d5k] { font-size: 0.875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 150ms; }
.service-row-meta[b-nnn26m0d5k] { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.125rem; }
.service-row-variants-badge[b-nnn26m0d5k] {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
    margin-left: 0.375rem;
    padding: 0.0625rem 0.375rem;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-bg);
    border-radius: 1rem;
}
.service-row-add[b-nnn26m0d5k] { font-size: 1.375rem; color: var(--accent); flex-shrink: 0; opacity: 0.85; transition: opacity 150ms, transform 200ms; }
.service-row:hover .service-row-add[b-nnn26m0d5k] { opacity: 1; }

/* ═══ SERVICE VARIANTS ═══ */
.service-card-active[b-nnn26m0d5k] { border-color: var(--accent); background: var(--accent-bg); }
.service-card-variants[b-nnn26m0d5k] { font-size: 0.6875rem; color: var(--text-tertiary); margin-top: 0.375rem; display: flex; align-items: center; gap: 0.1875rem; }
.variant-picker-inline[b-nnn26m0d5k] {
    padding: 0.875rem 0.875rem 1rem;
    background: linear-gradient(180deg, var(--accent-bg) 0%, #fff 100%);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}
.variant-picker[b-nnn26m0d5k] { margin-bottom: 1rem; border: 2px solid var(--accent); border-radius: var(--radius-sm); padding: 0.875rem; background: #fff; }
.variant-picker-title[b-nnn26m0d5k] { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.625rem; font-family: var(--font-heading); }
.variant-picker-group[b-nnn26m0d5k] { margin-bottom: 0.5rem; }
.variant-picker-label[b-nnn26m0d5k] { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.375rem; }
.variant-picker-summary[b-nnn26m0d5k] { display: flex; align-items: flex-end; gap: 0.875rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border-light); flex-wrap: wrap; }
.variant-picker-field[b-nnn26m0d5k] { display: flex; flex-direction: column; gap: 0.125rem; }
.variant-picker-field-label[b-nnn26m0d5k] { font-size: 0.625rem; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.03em; }
.variant-picker-field-value[b-nnn26m0d5k] { font-size: 0.875rem; font-weight: 500; }
.variant-picker-price-value[b-nnn26m0d5k] { font-size: 1rem; font-weight: 700; }
.variant-picker-totals[b-nnn26m0d5k] { display: flex; gap: 0.875rem; margin-left: 1.5rem; padding-left: 0.875rem; border-left: 2px solid var(--border); }
.variant-picker-totals .variant-picker-price-value[b-nnn26m0d5k] { color: var(--accent); }
.option-chips[b-nnn26m0d5k] { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.option-chip[b-nnn26m0d5k] { padding: 0.5rem 1rem; border-radius: 1.25rem; font-size: 0.8125rem; font-weight: 500; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; transition: all var(--transition); }
.option-chip:hover[b-nnn26m0d5k] { border-color: var(--primary-300); }
.option-chip.selected[b-nnn26m0d5k] { background: var(--primary-900); color: #fff; border-color: var(--primary-900); }

/* ═══ CART EMPTY STATE ═══ */
.cart-empty[b-nnn26m0d5k] {
    padding: 1.5rem 1rem;
    text-align: center;
    border: 2px dashed var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text-tertiary);
    margin-top: 0.5rem;
}
.cart-empty-icon[b-nnn26m0d5k] {
    font-size: 2.5rem;
    color: var(--primary-300, #a5b4fc);
    margin-bottom: 0.5rem;
    display: block;
}
.cart-empty-title[b-nnn26m0d5k] { font-size: 0.9375rem; font-weight: 600; color: var(--text); margin-bottom: 0.25rem; }
.cart-empty-sub[b-nnn26m0d5k] { font-size: 0.8125rem; line-height: 1.4; }

/* ═══ UNDO BAR (recently deleted items) ═══ */
.undo-bar[b-nnn26m0d5k] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: #1F2937;
    color: #fff;
    border-radius: var(--radius-sm);
    margin: 0.5rem 0;
    font-size: 0.8125rem;
    animation: undoSlideIn-b-nnn26m0d5k 200ms ease-out;
}
@keyframes undoSlideIn-b-nnn26m0d5k {
    from { opacity: 0; transform: translateY(0.5rem); }
    to { opacity: 1; transform: translateY(0); }
}
.undo-bar-icon[b-nnn26m0d5k] { font-size: 1.125rem; color: #a5b4fc; flex-shrink: 0; }
.undo-bar-text[b-nnn26m0d5k] { flex: 1; min-width: 0; }
.undo-bar-btn[b-nnn26m0d5k] {
    border: none;
    background: transparent;
    color: #a5b4fc;
    font-weight: 700;
    font-size: 0.8125rem;
    cursor: pointer;
    padding: 0.375rem 0.625rem;
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.undo-bar-btn:hover[b-nnn26m0d5k] { background: rgba(165,180,252,0.15); color: #c7d2fe; }
.undo-bar-close[b-nnn26m0d5k] {
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    display: flex;
    flex-shrink: 0;
}
.undo-bar-close:hover[b-nnn26m0d5k] { color: #fff; }
.undo-bar-close .material-icons-round[b-nnn26m0d5k] { font-size: 1rem; }

/* ═══ LINE ITEMS ═══ */
.line-item[b-nnn26m0d5k] { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; border: 1px solid var(--border-light); border-radius: var(--radius-sm); margin-bottom: 0.5rem; background: var(--bg, #F9FAFB); }
.line-item-name[b-nnn26m0d5k] { flex: 2; font-weight: 500; font-size: 0.9375rem; }
.line-item-input[b-nnn26m0d5k] { width: 4.5rem; padding: 0.5rem 0.625rem; border: 1px solid var(--border); border-radius: 6px; text-align: center; font-size: 0.9375rem; }
.line-item-input:focus[b-nnn26m0d5k] { border-color: var(--accent); outline: none; }
.line-item-unit[b-nnn26m0d5k] { font-size: 0.8125rem; color: var(--text-secondary); }
.line-item-unit-label[b-nnn26m0d5k] { font-size: 0.75rem; color: var(--text-tertiary); min-width: 2rem; }
.line-item-netto[b-nnn26m0d5k] { font-size: 0.6875rem; color: var(--text-tertiary); }
.line-item-price[b-nnn26m0d5k] { flex: 1; text-align: right; font-weight: 600; font-size: 0.9375rem; }
.line-item-del[b-nnn26m0d5k] { border: none; background: none; cursor: pointer; color: var(--text-tertiary); padding: 0.375rem; border-radius: 6px; }
.line-item-del:hover[b-nnn26m0d5k] { color: var(--danger); background: var(--danger-bg); }

/* ═══ LINE ITEM TOTALS ═══ */
.line-item-totals[b-nnn26m0d5k] { display: flex; flex-direction: column; gap: 1px; min-width: 6.25rem; }
.line-item-total-net[b-nnn26m0d5k] { font-size: 0.9375rem; font-weight: 600; }
.line-item-total-gross[b-nnn26m0d5k] { font-size: 0.75rem; color: var(--text-secondary); }
.line-item-label[b-nnn26m0d5k] { font-size: 0.625rem; color: var(--text-tertiary); }

/* ═══ AD-HOC LINE ITEM ═══ */
.line-item-name-input[b-nnn26m0d5k] { flex: 2; min-width: 7.5rem; padding: 0.5rem 0.75rem; }
.line-item-field[b-nnn26m0d5k] { display: flex; flex-direction: column; gap: 0.125rem; }
.line-item-field-name[b-nnn26m0d5k] { flex: 2; min-width: 7.5rem; }
.line-item-field-label[b-nnn26m0d5k] { font-size: 0.625rem; color: var(--text-tertiary); font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1; }
.line-item-adhoc .line-item-unit-label[b-nnn26m0d5k] { padding-top: 0; margin-top: auto; }
.line-item-price-input[b-nnn26m0d5k] { width: 5rem; }
.line-item-cost-input[b-nnn26m0d5k] { width: 5rem; }
.line-item-vat-select[b-nnn26m0d5k] { padding: 0.5rem 0.375rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.8125rem; background: var(--bg); cursor: pointer; width: 4rem; }
.line-item-vat-select:focus[b-nnn26m0d5k] { border-color: var(--accent); outline: none; }
/* ═══ QUANTITY + UNIT (merged) ═══ */
.line-item-qty-group[b-nnn26m0d5k] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.line-item-unit-suffix[b-nnn26m0d5k] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-weight: 500;
    white-space: nowrap;
    line-height: 1;
}

.line-item-outdated[b-nnn26m0d5k] { border-color: var(--warning); background: var(--warning-bg); }
.btn-sync[b-nnn26m0d5k] { border: none; background: none; cursor: pointer; color: var(--warning); padding: 0.125rem; vertical-align: middle; margin-left: 0.25rem; }
.btn-sync:hover[b-nnn26m0d5k] { color: var(--accent); }
.btn-sync .material-icons-round[b-nnn26m0d5k] { font-size: 1rem; }

/* ═══ LINE ITEM ADVANCED (collapsible koszt/VAT) ═══ */
.line-item-wrap[b-nnn26m0d5k] { margin-bottom: 0.5rem; }
.line-item-wrap .line-item[b-nnn26m0d5k] { margin-bottom: 0; }
.line-item-advanced-toggle[b-nnn26m0d5k] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 4px;
    transition: color 150ms, background 150ms;
}
.line-item-advanced-toggle:hover[b-nnn26m0d5k] { color: var(--accent); background: var(--accent-bg); }
.line-item-advanced-toggle .material-icons-round[b-nnn26m0d5k] { font-size: 0.875rem; transition: transform 200ms; }
.line-item-advanced-toggle.expanded .material-icons-round[b-nnn26m0d5k] { transform: rotate(180deg); }
.line-item-advanced-toggle.has-override[b-nnn26m0d5k] { color: var(--accent); }
.line-item-advanced-toggle.has-override[b-nnn26m0d5k]::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    margin-left: 0.125rem;
}
.line-item-advanced[b-nnn26m0d5k] {
    display: flex;
    gap: 0.75rem;
    padding: 0.625rem 1rem 0.75rem;
    border: 1px solid var(--border-light);
    background: #fff;
    border-radius: var(--radius-sm);
    margin-top: 0.25rem;
    animation: advSlideIn-b-nnn26m0d5k 180ms ease-out;
    flex-wrap: wrap;
}
@keyframes advSlideIn-b-nnn26m0d5k {
    from { opacity: 0; transform: translateY(-0.25rem); }
    to { opacity: 1; transform: translateY(0); }
}
.line-item-advanced-hint[b-nnn26m0d5k] {
    flex: 1 1 100%;
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    line-height: 1.4;
}
.line-item-advanced-row[b-nnn26m0d5k] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    width: 100%;
}

/* ═══ REORDER ARROWS (mobile fallback) ═══ */
.line-item-reorder[b-nnn26m0d5k] {
    display: none;
    flex-direction: column;
    gap: 0.125rem;
    flex-shrink: 0;
    margin-left: auto;
}
.line-item-reorder-btn[b-nnn26m0d5k] {
    width: 1.75rem;
    height: 1.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 4px;
    padding: 0;
}
.line-item-reorder-btn:hover:not(:disabled)[b-nnn26m0d5k] { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
.line-item-reorder-btn:disabled[b-nnn26m0d5k] { opacity: 0.3; cursor: not-allowed; }
.line-item-reorder-btn .material-icons-round[b-nnn26m0d5k] { font-size: 1rem; }

/* ═══ SUMMARY ═══ */
.summary-box[b-nnn26m0d5k] { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; background: var(--primary-50); margin-top: 1rem; }
.summary-row[b-nnn26m0d5k] { display: flex; justify-content: space-between; padding: 0.625rem 0; font-size: 0.9375rem; }
.summary-row.total[b-nnn26m0d5k] { font-size: 1.25rem; font-weight: 700; border-top: 2px solid var(--primary-900); padding-top: 0.875rem; margin-top: 0.625rem; }
.summary-row.margin[b-nnn26m0d5k] { color: var(--success); font-weight: 600; }
.summary-header[b-nnn26m0d5k] { margin-bottom: 0.5rem; }
.summary-title[b-nnn26m0d5k] { font-weight: 600; font-size: 1rem; font-family: var(--font-heading); }
.summary-subtitle[b-nnn26m0d5k] { font-size: 0.8125rem; color: var(--text-secondary); }
.summary-line[b-nnn26m0d5k] { display: flex; justify-content: space-between; padding: 0.375rem 0; font-size: 0.8125rem; }

/* ═══ MARGIN BADGE ═══ */
.margin-badge[b-nnn26m0d5k] { display: inline-flex; padding: 0.3125rem 0.75rem; border-radius: 1.25rem; font-size: 0.8125rem; font-weight: 600; }
.margin-badge.good[b-nnn26m0d5k] { background: var(--success-bg); color: var(--success); }
.margin-badge.ok[b-nnn26m0d5k] { background: var(--warning-bg); color: var(--warning); }
.margin-badge.bad[b-nnn26m0d5k] { background: var(--danger-bg); color: var(--danger); }

/* ═══ DATE INPUT ═══ */
.date-input-wrap[b-nnn26m0d5k] { position: relative; }
.date-input-wrap .form-input[b-nnn26m0d5k] { padding-right: 2.25rem; }
.date-clear[b-nnn26m0d5k] { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); border: none; background: none; cursor: pointer; color: var(--text-tertiary); padding: 0.125rem; border-radius: 4px; }
.date-clear:hover[b-nnn26m0d5k] { color: var(--danger); background: var(--danger-bg); }
.date-clear .material-icons-round[b-nnn26m0d5k] { font-size: 1.125rem; }

.wizard-info[b-nnn26m0d5k] { font-size: 0.8125rem; color: var(--text-tertiary); display: flex; align-items: center; gap: 0.375rem; margin-bottom: 1rem; }

/* ═══ MODALS ═══ */
.modal-overlay[b-nnn26m0d5k] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-box[b-nnn26m0d5k] { background: var(--bg); border-radius: var(--radius); padding: 2rem; max-width: 520px; width: 90%; box-shadow: var(--shadow-md); }

/* ═══ TEMPLATE PICKER ═══ */
.template-pick-row[b-nnn26m0d5k] { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 0.5rem; cursor: pointer; transition: all var(--transition); background: #fff; }
.template-pick-row:hover[b-nnn26m0d5k] { border-color: var(--accent); background: var(--accent-bg); }

/* ═══ SAVE ACTIONS ═══ */
.wizard-save-actions[b-nnn26m0d5k] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
    .modal-box[b-nnn26m0d5k] { padding: 1.25rem; width: 95%; }
    .wizard-save-actions[b-nnn26m0d5k] { flex-direction: column; gap: 0.625rem; align-items: stretch; }
    .stepper-bar-title[b-nnn26m0d5k] { font-size: 0.75rem; }
    .line-item[b-nnn26m0d5k] { flex-wrap: wrap; gap: 0.625rem; padding: 0.75rem; }
    .summary-row.total[b-nnn26m0d5k] { font-size: 1.0625rem; }
    .variant-picker-summary[b-nnn26m0d5k] { flex-direction: column; gap: 0.75rem; }
    .variant-picker-totals[b-nnn26m0d5k] { margin-left: 0; padding-left: 0; border-left: none; padding-top: 0.75rem; border-top: 2px solid var(--border); }
    .wizard-nav[b-nnn26m0d5k] { gap: 0.75rem; }
    .tabs[b-nnn26m0d5k] { gap: 0.25rem; }
    .tab[b-nnn26m0d5k] { padding: 0.5rem 0.875rem; font-size: 0.8125rem; }
}

@media (max-width: 480px) {
    /* ═══════════════════════════════════════════════════
       MOBILE LINE-ITEM — compact 2-row flex layout
       ═══════════════════════════════════════════════════
       Row 1: [ name (ellipsis / input) ]  [ total ]  [ ✕ ]
       Row 2: [ qty input · unit · × price ]
       Each row is forced by a full-width pseudo-element
       with flex-basis: 100%. No overlap, clean hierarchy.
       ═══════════════════════════════════════════════════ */
    .line-item[b-nnn26m0d5k] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 0.625rem;
        row-gap: 0.375rem;
        padding: 0.625rem 0.75rem;
        position: relative;
    }
    .line-item .drag-handle[b-nnn26m0d5k],
    .line-item .line-item-reorder[b-nnn26m0d5k] { display: none; }

    /* Force a line break between order=3 and order=5 children */
    .line-item[b-nnn26m0d5k]::after {
        content: '';
        flex-basis: 100%;
        height: 0;
        order: 4;
    }

    /* ─── ROW 1 ─── */
    /* Name (read-only, catalog items) */
    .line-item > .line-item-name[b-nnn26m0d5k] {
        order: 1;
        flex: 1 1 0;
        min-width: 0;
        font-size: 0.9375rem;
        font-weight: 600;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0;
    }
    /* Name (editable, ad-hoc items) */
    .line-item > .line-item-field-name[b-nnn26m0d5k] {
        order: 1;
        flex: 1 1 0;
        min-width: 0;
        flex-direction: column;
        gap: 0;
    }
    .line-item > .line-item-field-name .line-item-field-label[b-nnn26m0d5k] { display: none; }
    .line-item-name-input[b-nnn26m0d5k] {
        width: 100%;
        min-width: 0;
        padding: 0.375rem 0.5rem;
        font-size: 0.875rem;
        font-weight: 600;
        box-sizing: border-box;
    }

    /* Total (net primary, gross secondary) — right-aligned, column-stacked */
    .line-item > .line-item-totals[b-nnn26m0d5k] {
        order: 2;
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0;
        min-width: 0;
        padding-top: 0;
        border-top: none;
        line-height: 1.15;
    }
    .line-item-total-net[b-nnn26m0d5k] {
        font-size: 0.9375rem;
        font-weight: 700;
        color: var(--text);
        white-space: nowrap;
    }
    .line-item-total-gross[b-nnn26m0d5k] {
        font-size: 0.6875rem;
        font-weight: 500;
        color: var(--text-tertiary);
        white-space: nowrap;
    }
    .line-item-total-net .line-item-label[b-nnn26m0d5k],
    .line-item-total-gross .line-item-label[b-nnn26m0d5k] {
        font-size: inherit;
        font-weight: inherit;
        color: inherit;
    }

    /* Delete — round, subtle, after totals */
    .line-item > .line-item-del[b-nnn26m0d5k] {
        order: 3;
        position: static;
        flex: 0 0 auto;
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border-radius: 50%;
        color: var(--text-tertiary);
    }
    .line-item > .line-item-del:hover[b-nnn26m0d5k],
    .line-item > .line-item-del:focus-visible[b-nnn26m0d5k] {
        background: var(--danger-bg);
        color: var(--danger);
    }

    /* ─── ROW 2 ─── */
    /* Quantity: input + unit suffix inline, no label */
    .line-item > .line-item-qty-field[b-nnn26m0d5k] {
        order: 5;
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        gap: 0;
    }
    .line-item > .line-item-qty-field > .line-item-field-label[b-nnn26m0d5k] { display: none; }
    .line-item-qty-group[b-nnn26m0d5k] { gap: 0.25rem; }

    /* Price field (ad-hoc only) — input prefixed by "×" via pseudo */
    .line-item > .line-item-field:not(.line-item-field-name):not(.line-item-qty-field)[b-nnn26m0d5k] {
        order: 6;
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        gap: 0.25rem;
    }
    .line-item > .line-item-field:not(.line-item-field-name):not(.line-item-qty-field) > .line-item-field-label[b-nnn26m0d5k] {
        display: none;
    }
    .line-item > .line-item-field:not(.line-item-field-name):not(.line-item-qty-field)[b-nnn26m0d5k]::before {
        content: "×";
        font-size: 0.8125rem;
        color: var(--text-tertiary);
    }

    /* Unit-price readonly (catalog items) — "× 50,00 zł" */
    .line-item > .line-item-unit[b-nnn26m0d5k] {
        order: 6;
        flex: 0 0 auto;
        font-size: 0.8125rem;
        color: var(--text-tertiary);
        white-space: nowrap;
    }

    /* Input sizing */
    .line-item-input[b-nnn26m0d5k] {
        width: 3.25rem;
        padding: 0.3125rem 0.375rem;
        font-size: 0.875rem;
        -webkit-appearance: none;
    }
    .line-item-price-input[b-nnn26m0d5k] { width: 4rem; }
    .line-item-cost-input[b-nnn26m0d5k] { width: 100%; }
    .line-item-unit-label[b-nnn26m0d5k] { display: none; }
    .line-item-unit-suffix[b-nnn26m0d5k] {
        font-size: 0.75rem;
        color: var(--text-tertiary);
        font-weight: 500;
    }

    /* ─── ADVANCED TOGGLE — small footer link below the card ─── */
    .line-item-wrap .line-item-advanced-toggle[b-nnn26m0d5k] {
        padding: 0.25rem 0.75rem 0.375rem;
        font-size: 0.625rem;
        opacity: 0.7;
    }
    .line-item-wrap .line-item-advanced-toggle:hover[b-nnn26m0d5k] { opacity: 1; }
    .line-item-wrap .line-item-advanced-toggle .material-icons-round[b-nnn26m0d5k] { font-size: 0.75rem; }

    .line-item-advanced[b-nnn26m0d5k] { padding: 0.5rem 0.75rem; }
    .line-item-advanced .line-item-field[b-nnn26m0d5k] { flex: 1 1 100%; gap: 0.1875rem; }
    .line-item-advanced .line-item-field > .line-item-field-label[b-nnn26m0d5k] {
        display: block;
        font-size: 0.625rem;
    }
    .line-item-advanced .line-item-cost-input[b-nnn26m0d5k] {
        width: 100%;
        padding: 0.375rem 0.5rem;
        font-size: 0.875rem;
    }

    /* ─── OPTION CHIPS ─── */
    .option-chips[b-nnn26m0d5k] { gap: 0.375rem; }
    .option-chip[b-nnn26m0d5k] { padding: 0.375rem 0.75rem; font-size: 0.75rem; }

    /* ─── CATALOG SERVICE ROWS ─── */
    .service-row[b-nnn26m0d5k] { padding: 0.75rem; min-height: 3rem; }
    .service-row-name[b-nnn26m0d5k] { font-size: 0.875rem; }

    /* ─── SUMMARY ─── */
    .summary-box[b-nnn26m0d5k] {
        position: sticky;
        bottom: 0;
        z-index: 10;
        padding: 0.875rem 1rem;
        margin-bottom: 0;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
    }
    .summary-row[b-nnn26m0d5k] { font-size: 0.875rem; }
    .summary-row.total[b-nnn26m0d5k] { font-size: 1rem; }

    /* ─── NAV BUTTONS ─── */
    .wizard-nav .btn[b-nnn26m0d5k] { width: 100%; justify-content: center; }
    .wizard-save-actions[b-nnn26m0d5k] { width: 100%; }
    .wizard-save-actions .btn[b-nnn26m0d5k] { width: 100%; justify-content: center; }

    /* ─── OTHER ─── */
    .company-hint[b-nnn26m0d5k] { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .company-hint .btn[b-nnn26m0d5k] { margin-left: 0; width: 100%; text-align: center; }
    .client-mode-toggle[b-nnn26m0d5k] { flex-direction: column; gap: 0.625rem; }
    .recent-clients-section[b-nnn26m0d5k] { margin-bottom: 0.75rem; }
}

@media (max-width: 360px) {
    .line-item[b-nnn26m0d5k] { padding: 0.5rem; }
    .line-item-input[b-nnn26m0d5k] { width: 3.25rem; font-size: 0.8125rem; }
    .summary-box[b-nnn26m0d5k] { padding: 0.75rem; }
    .tab[b-nnn26m0d5k] { padding: 0.4375rem 0.625rem; font-size: 0.75rem; }
}

/* ═══ PHOTOS ═══ */
.photo-dropzone[b-nnn26m0d5k] {
    position: relative;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 2.5rem 1.5rem;
    text-align: center;
    transition: all 150ms ease;
    color: var(--text-secondary);
}
.photo-dropzone.dragging[b-nnn26m0d5k] { border-color: var(--accent); background: var(--accent-bg); }
.photo-dropzone p[b-nnn26m0d5k] { margin: 0.5rem 0 0; font-size: 0.875rem; }

.photo-grid[b-nnn26m0d5k] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
}
.photo-card[b-nnn26m0d5k] {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.photo-card-img[b-nnn26m0d5k] {
    position: relative;
    aspect-ratio: 4/3;
    background: var(--primary-50);
}
.photo-card-img img[b-nnn26m0d5k] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.photo-card-del[b-nnn26m0d5k] {
    position: absolute;
    top: 4px;
    right: 4px;
    border: none;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border-radius: 50%;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.photo-card-del .material-icons-round[b-nnn26m0d5k] { font-size: 1rem; }
.photo-card-del:hover[b-nnn26m0d5k] { background: var(--danger); }
.photo-card-desc[b-nnn26m0d5k] {
    border: none;
    border-top: 1px solid var(--border-light);
    border-radius: 0;
    padding: 0.5rem 0.625rem;
    font-size: 0.75rem;
}

.photo-upgrade[b-nnn26m0d5k] {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
}
.photo-upgrade p[b-nnn26m0d5k] { margin: 0.75rem 0 1rem; font-size: 0.875rem; }

[b-nnn26m0d5k] .pro-tag {
    display: inline-block;
    background: linear-gradient(135deg, rgba(79,70,229,0.08), #ede9fe);
    color: #4338ca;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 0.25rem;
}

.section-toggle[b-nnn26m0d5k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--text);
}

.section-toggle .material-icons-round[b-nnn26m0d5k] {
    color: var(--text-tertiary);
    font-size: 1.5rem;
}

/* ═══ RADIO GROUP (document naming) ═══ */
.radio-group[b-nnn26m0d5k] {
    display: flex;
    gap: 1rem;
    margin-top: 0.25rem;
}
.radio-option[b-nnn26m0d5k] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--text);
}
.radio-option input[type="radio"][b-nnn26m0d5k] {
    accent-color: var(--accent);
}

/* ═══ TEMPLATE PREVIEW ═══ */
.tpl-pick-wrapper[b-nnn26m0d5k] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}
.tpl-preview-btn[b-nnn26m0d5k] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-subtle, #F3F4F6);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 150ms;
}
.tpl-preview-btn:hover[b-nnn26m0d5k] { color: var(--accent); border-color: var(--accent); }
.tpl-preview-btn .material-icons-round[b-nnn26m0d5k] { font-size: 0.875rem; }
/* ═══ FEATURE 1.2: CLIENT MODE TOGGLE ═══ */
.client-mode-toggle[b-nnn26m0d5k] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.client-mode-option[b-nnn26m0d5k] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--text);
}
.client-mode-option input[type="radio"][b-nnn26m0d5k] {
    accent-color: var(--accent);
}
.client-skip-note[b-nnn26m0d5k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--primary-50);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* ═══ FEATURE 1.3: COMPANY PROFILE HINT ═══ */
.company-hint[b-nnn26m0d5k] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: var(--radius);
    margin-bottom: 1rem;
}
.company-hint .material-icons-round[b-nnn26m0d5k] {
    font-size: 1.25rem;
    color: #4F46E5;
    flex-shrink: 0;
}
.company-hint div[b-nnn26m0d5k] {
    flex: 1;
    font-size: 0.875rem;
    color: #1E40AF;
    line-height: 1.5;
}
.company-hint .btn[b-nnn26m0d5k] {
    white-space: nowrap;
    margin-left: auto;
    flex-shrink: 0;
}

/* ═══ FEATURE 1.4: WIZARD HINTS ═══ */
.wizard-hint[b-nnn26m0d5k] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
}
.wizard-hint.hint-blue[b-nnn26m0d5k] {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

/* ═══ FEATURE 3.3: RECENT CLIENTS ═══ */
.recent-clients-section[b-nnn26m0d5k] {
    margin-bottom: 1rem;
}
.recent-client-chips[b-nnn26m0d5k] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.recent-client-chip[b-nnn26m0d5k] {
    padding: 0.5rem 0.875rem;
    border-radius: 1.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    transition: all var(--transition);
}
.recent-client-chip:hover[b-nnn26m0d5k] {
    border-color: var(--accent);
    background: var(--accent-bg);
}

/* ═══ FEATURE 4.1: AUTO FOLLOW-UP ═══ */
.follow-up-section[b-nnn26m0d5k] {
    padding: 0.25rem 0;
}
.follow-up-toggle[b-nnn26m0d5k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    flex-wrap: wrap;
    color: var(--text);
}
.follow-up-toggle input[type="checkbox"][b-nnn26m0d5k] {
    accent-color: var(--accent);
    width: 1.125rem;
    height: 1.125rem;
}
.follow-up-days[b-nnn26m0d5k] {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.875rem;
    background: var(--bg);
    cursor: pointer;
    width: 3.5rem;
}
.follow-up-days:focus[b-nnn26m0d5k] {
    border-color: var(--accent);
    outline: none;
}
.follow-up-hint[b-nnn26m0d5k] {
    margin: 0.375rem 0 0 1.625rem;
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* ═══ TEMPLATE PICKER ═══ */
.tpl-picker[b-nnn26m0d5k] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.tpl-pick[b-nnn26m0d5k] { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0.375rem; border: 2px solid var(--border); border-radius: 0.5rem; background: #fff; cursor: pointer; transition: all 150ms; min-width: 0; overflow: hidden; }
.tpl-pick:hover[b-nnn26m0d5k] { border-color: var(--accent); background: #F8FAFF; }
.tpl-pick-active[b-nnn26m0d5k] { border-color: var(--accent); background: #EFF6FF; }
.tpl-pick-locked[b-nnn26m0d5k] { opacity: 0.6; cursor: default; }
.tpl-pick-locked:hover[b-nnn26m0d5k] { border-color: var(--border); background: #fff; }
.tpl-pick-img[b-nnn26m0d5k] { width: 100%; max-height: 12rem; border: 1px solid #E5E7EB; border-radius: 4px; margin-bottom: 0.375rem; object-fit: contain; }
.tpl-pick-name[b-nnn26m0d5k] { font-size: 0.6875rem; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 0.25rem; text-align: center; }
.tpl-pick-check[b-nnn26m0d5k] { position: absolute; top: 4px; right: 4px; color: var(--accent); }
.tpl-pick-check .material-icons-round[b-nnn26m0d5k] { font-size: 1rem; }

@media (max-width: 480px) {
    .tpl-picker[b-nnn26m0d5k] { gap: 0.375rem; }
    .tpl-pick[b-nnn26m0d5k] { padding: 0.25rem; }
    .tpl-pick-img[b-nnn26m0d5k] { max-height: 8rem; }
    .tpl-pick-name[b-nnn26m0d5k] { font-size: 0.5625rem; }
    .tpl-preview-btn[b-nnn26m0d5k] { font-size: 0.625rem; padding: 0.1875rem 0.375rem; }
    .tpl-preview-btn .material-icons-round[b-nnn26m0d5k] { font-size: 0.75rem; }
}

/* ═══ FEATURE 1.4: FIRST QUOTE MODAL ═══ */
.modal-actions .btn[b-nnn26m0d5k] {
    min-width: 11.25rem;
}

/* ═══ LINE GROUPS ═══ */
.wizard-group-toolbar[b-nnn26m0d5k] { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.show-groups-toggle[b-nnn26m0d5k] { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--text-secondary); cursor: pointer; margin-left: auto; margin-right: 0.5rem; }

.line-group[b-nnn26m0d5k] { border: 1px solid var(--border-light); border-radius: var(--radius-sm); margin-bottom: 0.75rem; background: #fff; }
.line-group-header[b-nnn26m0d5k] {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.625rem 0.75rem; background: var(--primary-50);
    border-bottom: 1px solid var(--border-light); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.group-icon[b-nnn26m0d5k] { font-size: 1.125rem; color: var(--accent); }
.group-name-input[b-nnn26m0d5k] {
    flex: 1; border: none; background: transparent; font-size: 0.875rem;
    font-weight: 600; font-family: var(--font-heading); color: var(--text);
    outline: none; min-width: 0;
}
.group-name-input[b-nnn26m0d5k]::placeholder { color: var(--text-tertiary); font-weight: 400; }
.group-name-input:focus[b-nnn26m0d5k] { border-bottom: 2px solid var(--accent); }

.drag-handle[b-nnn26m0d5k] { font-size: 1.125rem; color: var(--text-tertiary); cursor: grab; flex-shrink: 0; }
.drag-handle:active[b-nnn26m0d5k] { cursor: grabbing; }

.group-delete-btn[b-nnn26m0d5k] {
    display: flex; align-items: center; justify-content: center;
    border: none; background: none; cursor: pointer; flex-shrink: 0;
    color: var(--text-tertiary); padding: 0.25rem; border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
}
.group-delete-btn:hover[b-nnn26m0d5k] { color: var(--danger, #dc2626); background: rgba(220, 38, 38, 0.08); }
.group-delete-btn .material-icons-round[b-nnn26m0d5k] { font-size: 1.125rem; }

.line-group-empty[b-nnn26m0d5k] {
    padding: 1rem; text-align: center; font-size: 0.8125rem;
    color: var(--text-tertiary); font-style: italic;
}

.line-group-subtotal[b-nnn26m0d5k] {
    padding: 0.5rem 0.75rem; font-size: 0.8125rem; font-weight: 600;
    color: var(--text-secondary); text-align: right;
    border-top: 1px dashed var(--border-light); background: var(--primary-50);
}

.line-group-add-wrap[b-nnn26m0d5k] { padding: 0.375rem 0.75rem 0.625rem; }
.line-group-add[b-nnn26m0d5k] { font-size: 0.75rem; }

.dragging[b-nnn26m0d5k] { opacity: 0.4; }
.drag-over[b-nnn26m0d5k] { outline: 2px dashed var(--accent); outline-offset: -2px; }

@media (max-width: 768px) {
    .line-group-header[b-nnn26m0d5k] { padding: 0.5rem 0.625rem; }
    .group-name-input[b-nnn26m0d5k] { font-size: 0.8125rem; }
    .line-group-subtotal[b-nnn26m0d5k] { font-size: 0.75rem; padding: 0.375rem 0.625rem; }
    .wizard-group-toolbar[b-nnn26m0d5k] { gap: 0.5rem; }
}

@media (max-width: 480px) {
    .line-group-header[b-nnn26m0d5k] { gap: 0.375rem; padding: 0.4375rem 0.5rem; }
    .group-name-input[b-nnn26m0d5k] { font-size: 0.75rem; }
}

/* ═══ CLIENT SECTION — "why fill in" hint ═══ */
.client-why-hint[b-nnn26m0d5k] {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    margin-bottom: 0.875rem;
    background: var(--primary-50, #EEF2FF);
    border: 1px solid var(--primary-200, #C7D2FE);
    border-radius: 0.5rem;
}
.client-why-hint-icon[b-nnn26m0d5k] {
    color: var(--accent, #4F46E5);
    font-size: 1.125rem;
    flex-shrink: 0;
    margin-top: 0.0625rem;
}
.client-why-hint-text[b-nnn26m0d5k] {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-secondary, #475569);
}
.client-why-hint-text strong[b-nnn26m0d5k] {
    display: block;
    color: var(--text, #0F172A);
    font-weight: 600;
    margin-bottom: 0.125rem;
}

/* ═══ CLIENT LIST PAGINATION ═══ */
.client-empty[b-nnn26m0d5k] {
    text-align: center;
    padding: 1.25rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-tertiary, #64748B);
}
.client-pager[b-nnn26m0d5k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-light, #EDF1F7);
    flex-wrap: wrap;
}
.client-pager-btn[b-nnn26m0d5k] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary, #475569);
    background: #fff;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 150ms ease;
}
.client-pager-btn:hover:not(:disabled)[b-nnn26m0d5k] {
    border-color: var(--primary-300, #A5B4FC);
    color: var(--accent, #4F46E5);
    background: var(--primary-50, #EEF2FF);
}
.client-pager-btn:disabled[b-nnn26m0d5k] { opacity: 0.4; cursor: not-allowed; }
.client-pager-btn .material-icons-round[b-nnn26m0d5k] { font-size: 1rem; }
.client-pager-info[b-nnn26m0d5k] {
    font-size: 0.75rem;
    color: var(--text-tertiary, #64748B);
    text-align: center;
    flex: 1;
    min-width: 0;
}
@media (max-width: 30rem) {
    .client-pager[b-nnn26m0d5k] { gap: 0.375rem; }
    .client-pager-info[b-nnn26m0d5k] { font-size: 0.6875rem; flex-basis: 100%; order: -1; }
}
/* /Components/Pages/Register.razor.rz.scp.css */
/* ═══ AUTH SCREEN — dark themed ═══ */
.auth-screen[b-hdr5o015mh] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(175deg, #0A0F1E 0%, #0F1629 60%, #111936 100%);
    padding: 2.5rem 1rem;
    position: relative;
    overflow: hidden;
}

/* dot grid pattern */
.auth-screen[b-hdr5o015mh]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 1.75rem 1.75rem;
    pointer-events: none;
}

/* glow */
.auth-screen[b-hdr5o015mh]::after {
    content: '';
    position: absolute;
    width: 30rem;
    height: 30rem;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.15) 0%, transparent 65%);
    top: -10rem;
    right: -5rem;
    pointer-events: none;
}

.auth-box[b-hdr5o015mh] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    padding: 2.5rem 2.75rem;
    width: 100%;
    max-width: 34rem;
    backdrop-filter: blur(12px);
    position: relative;
    z-index: 1;
    animation: authFadeUp-b-hdr5o015mh 0.5s ease-out both;
}

@keyframes authFadeUp-b-hdr5o015mh {
    from { opacity: 0; transform: translateY(1.5rem); }
    to { opacity: 1; transform: translateY(0); }
}

.auth-logo[b-hdr5o015mh] {
    font-family: 'Sora', 'DM Sans', system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    text-align: center;
    margin-bottom: 2rem;
    color: #fff;
    text-decoration: none;
    display: block;
}

.auth-logo:hover[b-hdr5o015mh] {
    text-decoration: none;
}

.auth-logo .mark[b-hdr5o015mh] {
    color: #818CF8;
}

.auth-title[b-hdr5o015mh] {
    font-family: 'Sora', 'DM Sans', system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.5rem;
    color: #fff;
    letter-spacing: -0.02em;
}

.auth-subtitle[b-hdr5o015mh] {
    font-size: 0.9375rem;
    color: #8892A8;
    text-align: center;
    margin-bottom: 1rem;
}

.auth-promo[b-hdr5o015mh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(52, 211, 153, 0.2);
    border-radius: 0.5rem;
    padding: 0.625rem 1rem;
    margin-bottom: 1.75rem;
    font-size: 0.8125rem;
    color: #6EE7B7;
    line-height: 1.4;
}

.auth-promo .material-icons-round[b-hdr5o015mh] {
    font-size: 1.125rem;
    color: #34D399;
    flex-shrink: 0;
}

.form-row[b-hdr5o015mh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.auth-errors[b-hdr5o015mh] {
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.2);
    border-radius: 0.5rem;
    padding: 0.875rem 1.125rem;
    margin-bottom: 1.5rem;
}

.auth-error[b-hdr5o015mh] {
    font-size: 0.875rem;
    color: #FCA5A5;
    padding: 0.125rem 0;
}

/* override global form styles for dark theme */
.auth-box :deep(.form-label)[b-hdr5o015mh] {
    color: #C8CED8;
    font-size: 0.8125rem;
}

.auth-box :deep(.form-input)[b-hdr5o015mh] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #E2E8F0;
    border-radius: 0.5rem;
}

.auth-box :deep(.form-input):focus[b-hdr5o015mh] {
    border-color: #4F46E5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.auth-box :deep(.form-input)[b-hdr5o015mh]::placeholder {
    color: #4A5568;
}

.auth-checkbox[b-hdr5o015mh] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.8125rem;
    color: #8892A8;
    margin-bottom: 0.5rem;
}

.auth-checkbox:last-of-type[b-hdr5o015mh] {
    margin-bottom: 1.5rem;
}

.auth-checkbox input[b-hdr5o015mh] {
    width: 1rem;
    height: 1rem;
    accent-color: #4F46E5;
    cursor: pointer;
    margin-top: 2px;
    flex-shrink: 0;
}

.auth-checkbox a[b-hdr5o015mh] {
    color: #818CF8 !important;
    text-decoration: underline;
}

.auth-btn[b-hdr5o015mh] {
    justify-content: center;
    background: linear-gradient(135deg, #4F46E5, #4338CA) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.25) !important;
    border-radius: 0.625rem !important;
    transition: all 0.3s !important;
}

.auth-btn:hover[b-hdr5o015mh] {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.35) !important;
}

.auth-footer[b-hdr5o015mh] {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: #8892A8;
}

.auth-footer a[b-hdr5o015mh] {
    color: #818CF8 !important;
    font-weight: 500;
}

.auth-back[b-hdr5o015mh] {
    display: block;
    text-align: center;
    margin-top: 1rem;
    font-size: 0.8125rem;
    color: #4A5568 !important;
    text-decoration: none;
    transition: color 0.2s;
}

.auth-back:hover[b-hdr5o015mh] {
    color: #8892A8 !important;
}

@media (max-width: 500px) {
    .form-row[b-hdr5o015mh] { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 480px) {
    .auth-box[b-hdr5o015mh] {
        padding: 2rem 1.5rem;
    }

    .auth-logo[b-hdr5o015mh] {
        font-size: 1.625rem;
        margin-bottom: 1.5rem;
    }

    .auth-title[b-hdr5o015mh] {
        font-size: 1.25rem;
    }

    .auth-subtitle[b-hdr5o015mh] {
        font-size: 0.875rem;
    }
}

@media (max-width: 360px) {
    .auth-screen[b-hdr5o015mh] {
        padding: 1.25rem 0.5rem;
    }

    .auth-box[b-hdr5o015mh] {
        padding: 1.5rem 1rem;
    }

    .auth-logo[b-hdr5o015mh] {
        font-size: 1.5rem;
        margin-bottom: 1.25rem;
    }

    .auth-title[b-hdr5o015mh] {
        font-size: 1.125rem;
    }
}
/* /Components/Pages/ResetPassword.razor.rz.scp.css */
/* ═══ AUTH SCREEN — dark themed ═══ */
.auth-screen[b-k2typrg104] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(175deg, #0A0F1E 0%, #0F1629 60%, #111936 100%);
    padding: 2.5rem 1rem;
    position: relative;
    overflow: hidden;
}

.auth-screen[b-k2typrg104]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 1.75rem 1.75rem;
    pointer-events: none;
}

.auth-screen[b-k2typrg104]::after {
    content: '';
    position: absolute;
    width: 30rem;
    height: 30rem;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.15) 0%, transparent 65%);
    top: -10rem;
    right: -5rem;
    pointer-events: none;
}

.auth-box[b-k2typrg104] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    padding: 2.5rem 2.75rem;
    width: 100%;
    max-width: 28rem;
    backdrop-filter: blur(12px);
    position: relative;
    z-index: 1;
    animation: authFadeUp-b-k2typrg104 0.5s ease-out both;
}

@keyframes authFadeUp-b-k2typrg104 {
    from { opacity: 0; transform: translateY(1.5rem); }
    to { opacity: 1; transform: translateY(0); }
}

.auth-logo[b-k2typrg104] {
    font-family: 'Sora', 'DM Sans', system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    text-align: center;
    margin-bottom: 2rem;
    color: #fff;
    text-decoration: none;
    display: block;
}

.auth-logo:hover[b-k2typrg104] { text-decoration: none; }
.auth-logo .mark[b-k2typrg104] { color: #818CF8; }

.auth-title[b-k2typrg104] {
    font-family: 'Sora', 'DM Sans', system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.5rem;
    color: #fff;
    letter-spacing: -0.02em;
}

.auth-subtitle[b-k2typrg104] {
    font-size: 0.9375rem;
    color: #8892A8;
    text-align: center;
    margin-bottom: 2rem;
    line-height: 1.5;
}

.auth-errors[b-k2typrg104] {
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.2);
    border-radius: 0.5rem;
    padding: 0.875rem 1.125rem;
    margin-bottom: 1.5rem;
}

.auth-error[b-k2typrg104] {
    font-size: 0.875rem;
    color: #FCA5A5;
}

.auth-box :deep(.form-label)[b-k2typrg104] { color: #C8CED8; font-size: 0.8125rem; }
.auth-box :deep(.form-input)[b-k2typrg104] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #E2E8F0;
    border-radius: 0.5rem;
}
.auth-box :deep(.form-input):focus[b-k2typrg104] {
    border-color: #4F46E5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}
.auth-box :deep(.form-input)[b-k2typrg104]::placeholder { color: #4A5568; }

.auth-btn[b-k2typrg104] {
    justify-content: center;
    background: linear-gradient(135deg, #4F46E5, #4338CA) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.25) !important;
    border-radius: 0.625rem !important;
    transition: all 0.3s !important;
}

.auth-btn:hover[b-k2typrg104] {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.35) !important;
}

.auth-footer[b-k2typrg104] {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: #8892A8;
}

.auth-footer a[b-k2typrg104] { color: #818CF8 !important; font-weight: 500; }

@media (max-width: 480px) {
    .auth-box[b-k2typrg104] { padding: 2rem 1.5rem; }
    .auth-logo[b-k2typrg104] { font-size: 1.625rem; margin-bottom: 1.5rem; }
    .auth-title[b-k2typrg104] { font-size: 1.25rem; }
    .auth-subtitle[b-k2typrg104] { font-size: 0.875rem; }
}

@media (max-width: 360px) {
    .auth-screen[b-k2typrg104] { padding: 1.25rem 0.5rem; }
    .auth-box[b-k2typrg104] { padding: 1.5rem 1rem; }
    .auth-logo[b-k2typrg104] { font-size: 1.5rem; margin-bottom: 1.25rem; }
    .auth-title[b-k2typrg104] { font-size: 1.125rem; }
}
/* /Components/Pages/ServiceOptionsPage.razor.rz.scp.css */
/* ═══ OPTIONS LIST ═══ */
.options-list[b-26seml3oep] { display: flex; flex-direction: column; gap: 0.75rem; }
.option-card[b-26seml3oep] { margin-bottom: 0; }
.option-card-header[b-26seml3oep] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.625rem; }
.option-card-header-left[b-26seml3oep] { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
.option-card-name[b-26seml3oep] { font-size: 1rem; font-weight: 600; }
.option-card-actions[b-26seml3oep] { display: flex; gap: 0.25rem; }
.option-scope-info[b-26seml3oep] { font-size: 0.75rem; color: var(--text-tertiary); margin-top: 0.625rem; }

/* ═══ SCOPE BADGES ═══ */
.scope-badge[b-26seml3oep] { font-size: 0.6875rem; font-weight: 600; padding: 0.1875rem 0.625rem; border-radius: 0.75rem; }
.scope-all[b-26seml3oep] { background: var(--primary-900); color: #fff; }
.scope-single[b-26seml3oep] { background: var(--accent-bg); color: var(--accent); }
.scope-multi[b-26seml3oep] { background: #F0FDF4; color: #16A34A; }
.scope-services[b-26seml3oep] { background: var(--warning-bg); color: var(--warning); }

/* ═══ ID BADGE ═══ */
.option-id-badge[b-26seml3oep] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.1875rem 0.625rem;
    border-radius: 0.75rem;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all var(--transition);
    font-family: monospace;
}

.option-id-badge:hover[b-26seml3oep] {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-bg);
}

.option-id-badge .material-icons-round[b-26seml3oep] { font-size: 0.8125rem; }

/* ═══ CHIPS ═══ */
.option-chips[b-26seml3oep] { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.option-chip[b-26seml3oep] { padding: 0.375rem 0.875rem; border-radius: 1.25rem; font-size: 0.8125rem; font-weight: 500; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.option-chip.selected[b-26seml3oep] { background: var(--primary-900); color: #fff; border-color: var(--primary-900); }

/* ═══ SCOPE CHECKBOXES ═══ */
.scope-checkboxes[b-26seml3oep] { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.375rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.75rem 1rem; max-height: 15rem; overflow-y: auto; }
.scope-check[b-26seml3oep] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; cursor: pointer; padding: 0.375rem 0.25rem; border-radius: 4px; transition: background var(--transition); }
.scope-check:hover[b-26seml3oep] { background: var(--primary-50); }
.scope-check input[b-26seml3oep] { accent-color: var(--accent); width: 1rem; height: 1rem; flex-shrink: 0; }
.scope-check-cat[b-26seml3oep] { font-size: 0.75rem; color: var(--text-tertiary); margin-left: 0.25rem; }

/* ═══ VARIANTS ═══ */
.variant-header[b-26seml3oep] { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.3px; }
.variant-header-default[b-26seml3oep] { width: 5rem; text-align: center; }
.variant-row[b-26seml3oep] { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.375rem; }
.variant-default[b-26seml3oep] { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--text-secondary); white-space: nowrap; cursor: pointer; width: 5rem; justify-content: center; }
.variant-default input[b-26seml3oep] { accent-color: var(--accent); width: 1.125rem; height: 1.125rem; cursor: pointer; }

/* ═══ MODAL ═══ */
.modal-overlay[b-26seml3oep] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-box[b-26seml3oep] { background: var(--bg); border-radius: var(--radius); padding: 2rem; max-width: 520px; width: 90%; box-shadow: var(--shadow-md); }
.modal-title[b-26seml3oep] { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.75rem; font-family: var(--font-heading); }
.modal-desc[b-26seml3oep] { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 1.25rem; line-height: 1.6; }
.modal-affected[b-26seml3oep] { background: var(--warning-bg); border: 1px solid #FDE68A; border-radius: var(--radius-sm); padding: 0.875rem 1.125rem; margin-bottom: 1.25rem; }
.modal-affected-title[b-26seml3oep] { font-size: 0.8125rem; font-weight: 600; color: var(--warning); margin-bottom: 0.5rem; font-family: var(--font-heading); }
.modal-affected-item[b-26seml3oep] { font-size: 0.875rem; color: var(--text); padding: 0.25rem 0; display: flex; align-items: center; gap: 0.375rem; }
.modal-affected-item .material-icons-round[b-26seml3oep] { font-size: 1rem; color: var(--warning); }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
    .options-list[b-26seml3oep] { gap: 0.5rem; }
    .option-card-name[b-26seml3oep] { font-size: 0.875rem; }
    .option-card-header[b-26seml3oep] { margin-bottom: 0.375rem; }
    .option-card-header-left[b-26seml3oep] { gap: 0.375rem; }
    .scope-badge[b-26seml3oep] { font-size: 0.625rem; padding: 0.125rem 0.4375rem; }
    .option-chips[b-26seml3oep] { gap: 0.25rem; }
    .option-chip[b-26seml3oep] { padding: 0.25rem 0.625rem; font-size: 0.6875rem; }
    .option-scope-info[b-26seml3oep] { font-size: 0.6875rem; margin-top: 0.375rem; }
    .variant-row[b-26seml3oep] { gap: 0.375rem; }
    .modal-box[b-26seml3oep] { padding: 1.25rem; }
    .modal-title[b-26seml3oep] { font-size: 1rem; }
}

@media (max-width: 480px) {
    .option-card-name[b-26seml3oep] { font-size: 0.8125rem; }
    .option-chip[b-26seml3oep] { padding: 0.1875rem 0.5rem; font-size: 0.625rem; }
    .scope-badge[b-26seml3oep] { font-size: 0.5625rem; padding: 0.125rem 0.375rem; }
    .option-id-badge[b-26seml3oep] { font-size: 0.625rem; padding: 0.125rem 0.4375rem; }
    .variant-header[b-26seml3oep] { font-size: 0.625rem; }
    .variant-default[b-26seml3oep] { font-size: 0.6875rem; width: 3.75rem; }
    .variant-default input[b-26seml3oep] { width: 0.875rem; height: 0.875rem; }
}
/* /Components/Pages/Suggestions.razor.rz.scp.css */

.suggestions-thanks[b-nwpq7tyv2e] {
    text-align: center;
    padding: 3rem 1.5rem;
    max-width: 480px;
    margin: 0 auto;
}

.suggestions-thanks h3[b-nwpq7tyv2e] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 1rem 0 0.5rem;
    font-family: var(--font-heading);
}

.suggestions-thanks p[b-nwpq7tyv2e] {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
}

.char-count[b-nwpq7tyv2e] {
    text-align: right;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 0.25rem;
}

.char-warn[b-nwpq7tyv2e] {
    color: var(--warning);
    font-weight: 600;
}

.error-msg[b-nwpq7tyv2e] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    background: var(--danger-bg);
    border: 1px solid #FECACA;
    border-radius: var(--radius-sm);
    padding: 0.875rem 1.125rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: var(--danger);
}

.error-msg .material-icons-round[b-nwpq7tyv2e] { font-size: 1.25rem; }
/* /Components/Pages/TasksPage.razor.rz.scp.css */
.tasks-toolbar[b-zk9rmo38pp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.toolbar-search[b-zk9rmo38pp] {
    margin-bottom: 0 !important;
    padding: 0.375rem 0.75rem !important;
    min-width: 10rem;
    max-width: 13.75rem;
    box-shadow: none !important;
    border-width: 1px !important;
}
.toolbar-search input[b-zk9rmo38pp] {
    font-size: 0.8125rem !important;
}
.toolbar-search .material-icons-round[b-zk9rmo38pp] {
    font-size: 1.125rem !important;
}

.date-label[b-zk9rmo38pp] {
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    transition: background 0.15s;
}
.date-label:hover[b-zk9rmo38pp] {
    background: var(--bg-secondary, #f1f5f9);
}
.date-picker-jump[b-zk9rmo38pp] {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.8125rem !important;
    width: 9.375rem;
}

.view-switcher[b-zk9rmo38pp] {
    display: flex;
    gap: 0.25rem;
}

.view-btn[b-zk9rmo38pp] {
    padding: 0.375rem 0.875rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    border: none;
    cursor: pointer;
    background: var(--bg-secondary, #f1f5f9);
    color: var(--text-secondary);
    transition: all 0.15s;
}

.view-btn.active[b-zk9rmo38pp] {
    background: var(--accent);
    color: white;
}

.view-btn:hover:not(.active)[b-zk9rmo38pp] {
    background: var(--bg-tertiary, #e2e8f0);
}

.date-nav[b-zk9rmo38pp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-nav button[b-zk9rmo38pp] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    padding: 0.25rem;
    border-radius: 0.25rem;
}

.date-nav button:hover[b-zk9rmo38pp] {
    background: var(--bg-secondary, #f1f5f9);
}

/* Agenda view */
.day-header[b-zk9rmo38pp] {
    font-weight: 700;
    padding: 0.75rem 0 0.5rem;
    font-size: 0.875rem;
    font-family: var(--font-heading);
    color: var(--text-secondary);
    text-transform: capitalize;
}

.day-header.today[b-zk9rmo38pp] {
    color: var(--accent);
}

.task-row[b-zk9rmo38pp] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem;
    background: var(--bg-secondary, #f8fafc);
    border-radius: 0.5rem;
    margin-bottom: 0.375rem;
    cursor: pointer;
    transition: background 0.15s;
    border: 2px solid transparent;
}

.task-row:hover[b-zk9rmo38pp] {
    background: var(--bg-tertiary, #f0f4f8);
}

.task-row.selected[b-zk9rmo38pp] {
    border-color: var(--accent);
    background: #eff6ff;
}

.task-checkbox[b-zk9rmo38pp] {
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid #d1d5db;
    border-radius: 0.25rem;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s;
}

.task-checkbox:hover[b-zk9rmo38pp] {
    border-color: #22c55e;
    background: #f0fdf4;
}
.task-checkbox.checked[b-zk9rmo38pp] {
    border-color: #22c55e;
    background: #f0fdf4;
}
.checkbox-hover-icon[b-zk9rmo38pp] {
    font-size: 0.875rem;
    color: #22c55e;
    opacity: 0;
    transition: opacity 0.15s;
}
.task-checkbox:hover .checkbox-hover-icon[b-zk9rmo38pp] {
    opacity: 0.6;
}

.task-color-bar[b-zk9rmo38pp] {
    width: 0.25rem;
    height: 2rem;
    border-radius: 0.125rem;
    flex-shrink: 0;
}

.task-time[b-zk9rmo38pp] {
    min-width: 2.875rem;
    color: var(--text-tertiary);
    font-size: 0.8125rem;
}

.task-title[b-zk9rmo38pp] {
    font-weight: 600;
    font-size: 0.875rem;
    font-family: var(--font-heading);
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

/* Task status styles */
.task-completed .task-title[b-zk9rmo38pp],
.task-cancelled .task-title[b-zk9rmo38pp] {
    text-decoration: line-through;
    opacity: 0.5;
}
.task-completed .task-checkbox[b-zk9rmo38pp] {
    border-color: #22c55e;
    background: #f0fdf4;
}
.task-cancelled[b-zk9rmo38pp] {
    opacity: 0.5;
}
.task-overdue[b-zk9rmo38pp] {
    background: #fef2f2 !important;
}
.task-overdue .task-time[b-zk9rmo38pp] {
    color: #ef4444;
    font-weight: 600;
}
.task-inprogress[b-zk9rmo38pp] {
    border-left: 3px solid var(--accent) !important;
}

/* Week/month task status overrides */
.week-task.task-completed[b-zk9rmo38pp],
.month-task-pill.task-completed[b-zk9rmo38pp] {
    opacity: 0.45;
    text-decoration: line-through;
}
.week-task.task-cancelled[b-zk9rmo38pp],
.month-task-pill.task-cancelled[b-zk9rmo38pp] {
    opacity: 0.35;
    text-decoration: line-through;
}
.week-task.task-overdue[b-zk9rmo38pp],
.month-task-pill.task-overdue[b-zk9rmo38pp] {
    background: #fee2e2 !important;
}

/* Status badges */
.btn-delete-task[b-zk9rmo38pp] {
    width: 100%;
    margin-top: 0.375rem;
    color: var(--danger, #ef4444) !important;
    border: 1px solid #fecaca !important;
    background: transparent !important;
}
.btn-delete-task:hover[b-zk9rmo38pp] {
    background: #fef2f2 !important;
}

.task-badge-overdue[b-zk9rmo38pp] { background: #fee2e2; color: #dc2626; }
.task-badge-done[b-zk9rmo38pp] { background: #dcfce7; color: #16a34a; }
.task-badge-cancelled[b-zk9rmo38pp] { background: #f1f5f9; color: #64748b; }
.task-badge-inprogress[b-zk9rmo38pp] { background: #dbeafe; color: #4F46E5; }

.task-badge[b-zk9rmo38pp] {
    padding: 0.125rem 0.5rem;
    border-radius: 0.625rem;
    font-size: 0.625rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Detail panel */
.tasks-content[b-zk9rmo38pp] {
    min-height: 25rem;
}

.detail-panel[b-zk9rmo38pp] {
    width: 20rem;
    border-left: 1px solid var(--border-color, #e2e8f0);
    padding: 1.25rem;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    max-height: calc(100vh - 7.5rem);
    overflow-y: auto;
}

.detail-title[b-zk9rmo38pp] {
    font-weight: 700;
    font-size: 1rem;
    font-family: var(--font-heading);
    flex: 1;
    margin-right: 0.5rem;
    word-break: break-word;
    min-width: 0;
}

.detail-field[b-zk9rmo38pp] {
    margin-bottom: 0.875rem;
}

.detail-label[b-zk9rmo38pp] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    color: var(--text-tertiary);
    letter-spacing: 0.03125rem;
    margin-bottom: 0.25rem;
}

.detail-modal[b-zk9rmo38pp] {
    position: fixed;
    inset: 0;
    background: var(--bg-primary, white);
    z-index: 150;
    padding: 1.25rem;
    overflow-y: auto;
    display: none;
}

/* New task drawer (modal style) */
.task-drawer-overlay[b-zk9rmo38pp] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(2px);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.task-drawer[b-zk9rmo38pp] {
    width: 28rem;
    max-width: calc(100vw - 2rem);
    max-height: calc(100dvh - 3rem);
    background: var(--bg-white, #fff);
    border: 1px solid var(--border, #DAE1EC);
    border-radius: var(--radius-lg, 1rem);
    overflow: hidden;
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(15,23,42,0.1));
    display: flex;
    flex-direction: column;
}

.task-drawer-header[b-zk9rmo38pp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--border-light, #EDF1F7);
}

.task-drawer-title[b-zk9rmo38pp] {
    margin: 0;
    font-family: var(--font-heading, 'Sora', system-ui, sans-serif);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text, #0F172A);
}

.task-drawer-body[b-zk9rmo38pp] {
    padding: 1.25rem 1.5rem 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.task-drawer-body .form-group[b-zk9rmo38pp] {
    margin-bottom: 0.875rem;
}

.task-drawer-body .form-row[b-zk9rmo38pp] {
    display: flex;
    gap: 0.75rem;
}

.task-drawer-body .form-row .form-group[b-zk9rmo38pp] {
    flex: 1 1 0;
    min-width: 0;
}

.task-drawer-body .form-input[type="date"][b-zk9rmo38pp],
.task-drawer-body .form-input[type="time"][b-zk9rmo38pp] {
    min-width: 0;
    overflow: hidden;
    height: auto;
    -webkit-appearance: none;
    appearance: none;
}

/* Rules modal */
.rules-modal-overlay[b-zk9rmo38pp] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rules-modal[b-zk9rmo38pp] {
    background: var(--bg-primary, white);
    border-radius: 0.75rem;
    padding: 1.5rem;
    max-width: 35rem;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.rule-row[b-zk9rmo38pp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.rule-row:last-child[b-zk9rmo38pp] {
    border-bottom: none;
}

.rule-toggle[b-zk9rmo38pp] {
    width: 2.5rem;
    height: 1.375rem;
    border-radius: 0.6875rem;
    cursor: pointer;
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}

.rule-toggle.on[b-zk9rmo38pp] {
    background: var(--accent);
}

.rule-toggle.off[b-zk9rmo38pp] {
    background: #d1d5db;
}

/* Weekly view */
.week-grid[b-zk9rmo38pp] {
    display: grid;
    grid-template-columns: 3.75rem repeat(7, 1fr);
    font-size: 0.8125rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 0.5rem;
    overflow: hidden;
}

.week-header[b-zk9rmo38pp] {
    padding: 0.5rem 0.25rem;
    text-align: center;
    font-weight: 600;
    background: var(--bg-secondary, #f8fafc);
    border-bottom: 2px solid var(--border-color, #e2e8f0);
    font-size: 0.75rem;
}

.week-header.today[b-zk9rmo38pp] {
    color: var(--accent);
}

.week-time[b-zk9rmo38pp] {
    padding: 0.125rem 0.375rem;
    color: var(--text-tertiary);
    text-align: right;
    border-right: 1px solid var(--border-color, #e2e8f0);
    border-bottom: 1px solid #e8ecf1;
    font-size: 0.6875rem;
    background: var(--bg-secondary, #f8fafc);
}

.week-slot[b-zk9rmo38pp] {
    border-right: 1px solid #e8ecf1;
    border-bottom: 1px solid #e8ecf1;
    min-height: 2rem;
    padding: 0.125rem;
    cursor: pointer;
    position: relative;
    transition: background 0.1s;
}

.week-slot:hover[b-zk9rmo38pp] {
    background: var(--bg-secondary, #f8fafc);
}

.week-slot.weekend[b-zk9rmo38pp] {
    background: #fafafa;
}

.week-slot.weekend:hover[b-zk9rmo38pp] {
    background: #f3f4f6;
}

.week-task[b-zk9rmo38pp] {
    padding: 0.25rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.6875rem;
    margin-bottom: 0.125rem;
    word-break: break-word;
    cursor: pointer;
}

.week-task:hover[b-zk9rmo38pp] {
    opacity: 0.85;
}

/* Monthly view */
.month-grid[b-zk9rmo38pp] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 0.5rem;
    overflow: hidden;
}

.month-day[b-zk9rmo38pp] {
    padding: 0.25rem;
    min-height: 5rem;
    border-bottom: 1px solid #e8ecf1;
    border-right: 1px solid #e8ecf1;
    cursor: pointer;
    transition: background 0.1s;
    overflow: hidden;
}

.month-day:hover[b-zk9rmo38pp] {
    background: var(--bg-secondary, #f8fafc);
}

.month-day.other-month[b-zk9rmo38pp] {
    opacity: 0.4;
}

.month-day-number[b-zk9rmo38pp] {
    font-weight: 600;
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
}

.month-day-number.today[b-zk9rmo38pp] {
    color: white;
    background: var(--accent);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.month-task-pill[b-zk9rmo38pp] {
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.6875rem;
    margin-bottom: 0.125rem;
    word-break: break-word;
    cursor: pointer;
    transition: opacity 0.1s;
}

.month-task-pill:hover[b-zk9rmo38pp] {
    opacity: 0.8;
}

/* Responsive visibility */
.desktop-only[b-zk9rmo38pp] {
    display: block;
}

.mobile-only[b-zk9rmo38pp] {
    display: none;
}

@media (max-width: 768px) {
    .desktop-only[b-zk9rmo38pp] {
        display: none !important;
    }

    .mobile-only[b-zk9rmo38pp] {
        display: block !important;
    }

    .detail-modal[b-zk9rmo38pp] {
        display: block;
    }

    .task-drawer-overlay[b-zk9rmo38pp] {
        align-items: stretch;
        justify-content: stretch;
        padding: 0;
    }

    .task-drawer[b-zk9rmo38pp] {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    .task-drawer-header[b-zk9rmo38pp] {
        padding: 0.75rem 1rem;
        flex-shrink: 0;
    }

    .task-drawer-title[b-zk9rmo38pp] {
        font-size: 1rem;
    }

    .task-drawer-body[b-zk9rmo38pp] {
        padding: 0.625rem 0.875rem 0.875rem;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        width: 100%;
        box-sizing: border-box;
    }

    .task-drawer-body .form-group[b-zk9rmo38pp] {
        margin-bottom: 0.5rem;
        max-width: 100%;
        overflow: hidden;
    }

    .task-drawer-body .form-label[b-zk9rmo38pp] {
        font-size: 0.6875rem;
        margin-bottom: 0.125rem;
    }

    .task-drawer-body .form-input[b-zk9rmo38pp] {
        padding: 0.375rem 0.5rem;
        font-size: 0.8125rem;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .task-drawer-body textarea.form-input[b-zk9rmo38pp] {
        padding: 0.375rem 0.5rem;
    }

    .task-drawer-body .form-row[b-zk9rmo38pp] {
        flex-direction: row !important;
        gap: 0.5rem !important;
        overflow: hidden;
        width: 100%;
    }

    .task-drawer-body .form-row .form-group[b-zk9rmo38pp] {
        min-width: 0 !important;
        flex: 1 1 0 !important;
        overflow: hidden;
    }

    .task-drawer-body .form-input[type="date"][b-zk9rmo38pp],
    .task-drawer-body .form-input[type="time"][b-zk9rmo38pp],
    .task-drawer-body select.form-input[b-zk9rmo38pp] {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tasks-toolbar[b-zk9rmo38pp] {
        flex-direction: column;
        align-items: stretch;
    }

    .tasks-toolbar > div[b-zk9rmo38pp] {
        width: 100%;
    }

    .view-switcher[b-zk9rmo38pp] {
        width: 100%;
    }

    .view-btn[b-zk9rmo38pp] {
        flex: 1;
        text-align: center;
    }

    .week-grid[b-zk9rmo38pp] {
        font-size: 0.6875rem;
        grid-template-columns: 2.25rem repeat(7, 1fr);
    }

    .week-time[b-zk9rmo38pp] {
        font-size: 0.5625rem;
        padding: 1px 0.1875rem;
    }

    .month-day[b-zk9rmo38pp] {
        min-height: 3.125rem;
        padding: 0.125rem;
    }

    .month-day-number[b-zk9rmo38pp] {
        font-size: 0.75rem;
    }

    .month-task-pill[b-zk9rmo38pp] {
        font-size: 0.625rem;
    }

    .task-title[b-zk9rmo38pp] {
        font-size: 0.8125rem;
    }
}
/* /Components/Pages/Terms.razor.rz.scp.css */
.legal-page[b-ymc50rxiy6] { max-width: 860px; margin: 0 auto; padding: 0 24px 60px; }
.legal-nav[b-ymc50rxiy6] { padding: 20px 0; margin-bottom: 20px; }
.legal-logo[b-ymc50rxiy6] { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; color: var(--text); text-decoration: none; display: inline-block; }
.legal-logo:hover[b-ymc50rxiy6] { text-decoration: none; }
.legal-logo .mark[b-ymc50rxiy6] { color: var(--accent); }

.legal-content h1[b-ymc50rxiy6] { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.legal-updated[b-ymc50rxiy6] { font-size: 13px; color: var(--text-tertiary); margin-bottom: 32px; }
.legal-content h2[b-ymc50rxiy6] { font-size: 18px; font-weight: 600; margin-top: 32px; margin-bottom: 12px; color: var(--text); }
.legal-content p[b-ymc50rxiy6] { font-size: 15px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 12px; }
.legal-content ol[b-ymc50rxiy6], .legal-content ul[b-ymc50rxiy6] { font-size: 15px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 12px; padding-left: 24px; }
.legal-content li[b-ymc50rxiy6] { margin-bottom: 8px; }
.legal-content li ul[b-ymc50rxiy6] { margin-top: 8px; }
.legal-content blockquote[b-ymc50rxiy6] { background: var(--primary-50); border-left: 3px solid var(--accent); padding: 16px 20px; margin: 12px 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 14px; font-style: italic; color: var(--text-secondary); }
.legal-content a[b-ymc50rxiy6] { color: var(--accent); }
.legal-company[b-ymc50rxiy6] { background: var(--primary-50); border-radius: var(--radius-sm); padding: 20px; margin: 12px 0 24px; }
.legal-company p[b-ymc50rxiy6] { margin-bottom: 4px; color: var(--text); }
.legal-table[b-ymc50rxiy6] { width: 100%; border-collapse: collapse; margin: 12px 0 24px; font-size: 14px; }
.legal-table th[b-ymc50rxiy6] { text-align: left; padding: 12px 16px; background: var(--primary-50); font-weight: 600; color: var(--text-secondary); font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; border-bottom: 1px solid var(--border); }
.legal-table td[b-ymc50rxiy6] { padding: 12px 16px; border-bottom: 1px solid var(--border-light); color: var(--text-secondary); line-height: 1.5; }
/* /Components/Shared/LatwoBotPanel.razor.rz.scp.css */
/* ═══ PANEL KONTENER ═══ */
.lb-panel[b-3151gno5sm] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #fff;
    overflow: hidden;
}

/* ═══ HEADER ═══ */
.lb-header[b-3151gno5sm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid var(--border, #E5E7EB);
    background: var(--primary-50, #EEF2FF);
    flex-shrink: 0;
}
.lb-title[b-3151gno5sm] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text, #0F172A);
    flex: 1;
}
.lb-title-icon[b-3151gno5sm] {
    color: var(--accent, #4F46E5);
    font-size: 1.375rem;
}
.lb-header-actions[b-3151gno5sm] {
    display: flex;
    gap: 0.25rem;
}
.lb-header-btn[b-3151gno5sm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    border: none;
    background: transparent;
    color: var(--text-secondary, #475569);
    cursor: pointer;
    transition: background 120ms;
}
.lb-header-btn:hover[b-3151gno5sm] { background: rgba(79, 70, 229, 0.1); color: var(--accent); }
.lb-header-btn .material-icons-round[b-3151gno5sm] { font-size: 1.125rem; }

/* ═══ QUOTA BAR ═══ */
.lb-quota[b-3151gno5sm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.75rem;
    color: var(--text-secondary, #475569);
    background: var(--bg-app, #F5F6FA);
    border-bottom: 1px solid var(--border-light, #EDF1F7);
    flex-shrink: 0;
}
.lb-quota-empty[b-3151gno5sm] {
    background: #FEF3C7;
    color: #92400E;
}
.lb-quota .material-icons-round[b-3151gno5sm] { font-size: 1rem; }
.lb-upgrade[b-3151gno5sm] {
    margin-left: auto;
    font-weight: 600;
    color: var(--accent, #4F46E5);
    text-decoration: none;
}
.lb-upgrade:hover[b-3151gno5sm] { text-decoration: underline; }

/* ═══ SESSIONS LIST ═══ */
.lb-sessions[b-3151gno5sm] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}
.lb-new-chat[b-3151gno5sm] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    margin-bottom: 0.5rem;
    border: 1px dashed var(--accent, #4F46E5);
    border-radius: 0.5rem;
    background: transparent;
    color: var(--accent, #4F46E5);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 120ms;
}
.lb-new-chat:hover[b-3151gno5sm] {
    background: var(--primary-50, #EEF2FF);
    border-style: solid;
}
.lb-new-chat .material-icons-round[b-3151gno5sm] { font-size: 1.125rem; }
.lb-session[b-3151gno5sm] {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: left;
    padding: 0.625rem 0.75rem;
    margin-bottom: 0.25rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background: #fff;
    cursor: pointer;
    transition: all 120ms;
}
.lb-session:hover[b-3151gno5sm] {
    background: var(--primary-50, #EEF2FF);
    border-color: var(--primary-200, #C7D2FE);
}
.lb-session-active[b-3151gno5sm] {
    background: var(--primary-50, #EEF2FF);
    border-color: var(--accent, #4F46E5);
}
.lb-session-title[b-3151gno5sm] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text, #0F172A);
    margin-bottom: 0.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lb-session-meta[b-3151gno5sm] {
    font-size: 0.6875rem;
    color: var(--text-tertiary, #64748B);
}

/* ═══ THREAD ═══ */
.lb-thread[b-3151gno5sm] {
    flex: 1;
    overflow-y: auto;
    padding: 0.875rem;
    background: var(--bg-app, #F5F6FA);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* ═══ WELCOME (onboarding) ═══ */
.lb-welcome[b-3151gno5sm] {
    background: #fff;
    border: 1px solid var(--border-light, #EDF1F7);
    border-radius: 0.75rem;
    padding: 1.25rem;
    max-width: 34rem;
    margin: 0 auto;
}
.lb-welcome-icon[b-3151gno5sm] { font-size: 2rem; margin-bottom: 0.5rem; }
.lb-welcome-title[b-3151gno5sm] {
    margin: 0 0 0.75rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text, #0F172A);
}
.lb-welcome-body p[b-3151gno5sm] {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-secondary, #475569);
    margin: 0 0 0.625rem;
}
.lb-welcome-warn[b-3151gno5sm] { color: var(--text, #0F172A); font-weight: 600; }
.lb-welcome-list[b-3151gno5sm] {
    margin: 0 0 0.875rem;
    padding-left: 1.125rem;
    font-size: 0.8125rem;
    color: var(--text-secondary, #475569);
    line-height: 1.55;
}
.lb-welcome-list li[b-3151gno5sm] { margin-bottom: 0.25rem; }
.lb-welcome-industry[b-3151gno5sm] {
    font-weight: 600;
    color: var(--text, #0F172A);
    margin-top: 0.875rem !important;
}
.lb-welcome-input[b-3151gno5sm] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1.5px solid var(--border, #E5E7EB);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-family: inherit;
    margin-bottom: 0.75rem;
    box-sizing: border-box;
}
.lb-welcome-input:focus[b-3151gno5sm] {
    outline: none;
    border-color: var(--accent, #4F46E5);
    box-shadow: 0 0 0 0.1875rem rgba(79, 70, 229, 0.12);
}
.lb-welcome-actions[b-3151gno5sm] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

/* ═══ MESSAGES ═══ */
.lb-msg[b-3151gno5sm] {
    max-width: 88%;
    padding: 0.625rem 0.875rem;
    border-radius: 0.875rem;
    font-size: 0.875rem;
    line-height: 1.5;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.lb-msg-user[b-3151gno5sm] {
    align-self: flex-end;
    background: var(--accent, #4F46E5);
    color: #fff;
    border-top-right-radius: 0.25rem;
}
.lb-msg-bot[b-3151gno5sm] {
    align-self: flex-start;
    background: #fff;
    border: 1px solid var(--border, #E5E7EB);
    border-top-left-radius: 0.25rem;
}
.lb-msg-body[b-3151gno5sm] { white-space: pre-wrap; word-break: break-word; }
.lb-msg-footer[b-3151gno5sm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border-light, #EDF1F7);
}
.lb-disclaimer[b-3151gno5sm] {
    font-size: 0.6875rem;
    color: var(--text-tertiary, #64748B);
    flex: 1;
    line-height: 1.4;
}
.lb-feedback[b-3151gno5sm] { display: flex; gap: 0.25rem; }
.lb-fb-btn[b-3151gno5sm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background: none;
    color: var(--text-tertiary, #64748B);
    cursor: pointer;
    border-radius: 0.25rem;
    transition: all 120ms;
}
.lb-fb-btn:hover[b-3151gno5sm] { background: rgba(79, 70, 229, 0.1); color: var(--accent); }
.lb-fb-active[b-3151gno5sm] { background: rgba(79, 70, 229, 0.15); color: var(--accent); }
.lb-fb-btn .material-icons-round[b-3151gno5sm] { font-size: 1rem; }

/* ═══ TYPING INDICATOR ═══ */
.lb-msg-typing[b-3151gno5sm] {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
    padding: 0.75rem 1rem;
}
.lb-msg-typing span[b-3151gno5sm] {
    width: 0.375rem;
    height: 0.375rem;
    background: var(--text-tertiary, #64748B);
    border-radius: 50%;
    animation: lb-typing-b-3151gno5sm 1.4s infinite;
}
.lb-msg-typing span:nth-child(2)[b-3151gno5sm] { animation-delay: 0.2s; }
.lb-msg-typing span:nth-child(3)[b-3151gno5sm] { animation-delay: 0.4s; }
@keyframes lb-typing-b-3151gno5sm {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-0.125rem); }
}

/* ═══ INDUSTRY INPUT (per sesja, new chat) ═══ */
.lb-new-industry[b-3151gno5sm] {
    margin-top: 1rem;
    max-width: 22rem;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
.lb-new-industry-label[b-3151gno5sm] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text, #0F172A);
    margin-bottom: 0.375rem;
}
.lb-new-industry-input[b-3151gno5sm] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1.5px solid var(--border, #E5E7EB);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-family: inherit;
    box-sizing: border-box;
}
.lb-new-industry-input:focus[b-3151gno5sm] {
    outline: none;
    border-color: var(--accent, #4F46E5);
    box-shadow: 0 0 0 0.1875rem rgba(79, 70, 229, 0.12);
}

/* ═══ EMPTY / ERROR ═══ */
.lb-empty[b-3151gno5sm] {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary, #475569);
}
.lb-empty-icon[b-3151gno5sm] { font-size: 2.25rem; margin-bottom: 0.5rem; }
.lb-empty-title[b-3151gno5sm] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text, #0F172A);
    margin-bottom: 0.25rem;
}
.lb-empty-sub[b-3151gno5sm] { font-size: 0.8125rem; line-height: 1.5; }
.lb-error[b-3151gno5sm] {
    padding: 0.625rem 0.75rem;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 0.5rem;
    color: #991B1B;
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* ═══ COMPOSE ═══ */
.lb-compose[b-3151gno5sm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border, #E5E7EB);
    background: #fff;
    flex-shrink: 0;
}
.lb-input[b-3151gno5sm] {
    flex: 1;
    padding: 0.625rem 0.875rem;
    border: 1.5px solid var(--border, #E5E7EB);
    border-radius: 0.75rem;
    font-size: 0.9375rem;
    font-family: inherit;
    resize: none;
    outline: none;
    min-height: 2.75rem;
    max-height: 8rem;
    line-height: 1.4;
}
.lb-input:focus[b-3151gno5sm] {
    border-color: var(--accent, #4F46E5);
    box-shadow: 0 0 0 0.1875rem rgba(79, 70, 229, 0.12);
}
.lb-input:disabled[b-3151gno5sm] { background: var(--bg-app, #F5F6FA); }
.lb-send[b-3151gno5sm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: none;
    background: var(--accent, #4F46E5);
    color: #fff;
    border-radius: 0.75rem;
    cursor: pointer;
    flex-shrink: 0;
    align-self: center;
    transition: background 120ms;
}
.lb-send:hover:not(:disabled)[b-3151gno5sm] { background: var(--accent-hover, #4338CA); }
.lb-send:disabled[b-3151gno5sm] { opacity: 0.4; cursor: not-allowed; }
.lb-send .material-icons-round[b-3151gno5sm] { font-size: 1.25rem; }

/* ═══ BUTTONS ═══ */
.lb-btn[b-3151gno5sm] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border, #E5E7EB);
    background: #fff;
    color: var(--text, #0F172A);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 120ms;
}
.lb-btn-primary[b-3151gno5sm] {
    background: var(--accent, #4F46E5);
    color: #fff;
    border-color: var(--accent, #4F46E5);
}
.lb-btn-primary:hover:not(:disabled)[b-3151gno5sm] { background: var(--accent-hover, #4338CA); }
.lb-btn:disabled[b-3151gno5sm] { opacity: 0.5; cursor: not-allowed; }
.lb-btn-link[b-3151gno5sm] {
    font-size: 0.8125rem;
    color: var(--text-secondary, #475569);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.lb-btn-link:hover[b-3151gno5sm] { color: var(--accent, #4F46E5); }
/* /Components/Shared/QuoteCommentsModal.razor.rz.scp.css */
.qcm-overlay[b-ou5be28fk0] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1200;
}

.qcm-dialog[b-ou5be28fk0] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(36rem, calc(100vw - 1.5rem));
    max-height: min(40rem, calc(100vh - 2rem));
    background: var(--bg-white, #fff);
    border-radius: 1rem;
    box-shadow: 0 1.5rem 3.5rem rgba(15, 23, 42, 0.25);
    z-index: 1201;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.qcm-header[b-ou5be28fk0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border, #E5E7EB);
    background: var(--primary-50, #EEF2FF);
}

.qcm-title[b-ou5be28fk0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text, #0F172A);
    font-family: var(--font-heading, inherit);
}

.qcm-title-icon[b-ou5be28fk0] {
    color: var(--accent, #4F46E5);
    font-size: 1.25rem;
}

.qcm-close[b-ou5be28fk0] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border, #E5E7EB);
    background: #fff;
    color: var(--text-secondary, #475569);
    cursor: pointer;
    transition: all 150ms ease;
}
.qcm-close:hover[b-ou5be28fk0] {
    border-color: var(--primary-300, #A5B4FC);
    color: var(--accent, #4F46E5);
    background: var(--primary-50, #EEF2FF);
}
.qcm-close .material-icons-round[b-ou5be28fk0] { font-size: 1.125rem; }

.qcm-body[b-ou5be28fk0] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    background: var(--bg-app, #F5F6FA);
}

.qcm-loading[b-ou5be28fk0] {
    text-align: center;
    color: var(--text-secondary, #475569);
    padding: 2rem;
    font-size: 0.875rem;
}

.qcm-empty[b-ou5be28fk0] {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary, #475569);
}
.qcm-empty .material-icons-round[b-ou5be28fk0] {
    font-size: 2.5rem;
    color: var(--text-tertiary, #64748B);
    margin-bottom: 0.5rem;
}
.qcm-empty-title[b-ou5be28fk0] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text, #0F172A);
    margin-bottom: 0.25rem;
}
.qcm-empty-sub[b-ou5be28fk0] {
    font-size: 0.8125rem;
    line-height: 1.5;
}

.qcm-thread[b-ou5be28fk0] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.qcm-msg[b-ou5be28fk0] {
    max-width: 85%;
    padding: 0.625rem 0.875rem;
    border-radius: 0.875rem;
    font-size: 0.875rem;
    line-height: 1.5;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.qcm-msg-client[b-ou5be28fk0] {
    align-self: flex-start;
    background: #fff;
    border: 1px solid var(--border, #E5E7EB);
    border-top-left-radius: 0.25rem;
}

.qcm-msg-owner[b-ou5be28fk0] {
    align-self: flex-end;
    background: var(--accent, #4F46E5);
    color: #fff;
    border-top-right-radius: 0.25rem;
}

.qcm-msg-head[b-ou5be28fk0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    font-size: 0.6875rem;
    opacity: 0.8;
}

.qcm-msg-owner .qcm-msg-head[b-ou5be28fk0] { color: rgba(255, 255, 255, 0.85); }
.qcm-msg-client .qcm-msg-head[b-ou5be28fk0] { color: var(--text-secondary, #475569); }

.qcm-msg-author[b-ou5be28fk0] { font-weight: 600; }

.qcm-msg-body[b-ou5be28fk0] {
    white-space: pre-wrap;
    word-break: break-word;
}

.qcm-compose[b-ou5be28fk0] {
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--border, #E5E7EB);
    background: #fff;
}

.qcm-warn[b-ou5be28fk0] {
    display: flex;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    margin-bottom: 0.625rem;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #92400E;
}
.qcm-warn .material-icons-round[b-ou5be28fk0] {
    font-size: 1rem;
    color: #D97706;
    flex-shrink: 0;
}

.qcm-textarea[b-ou5be28fk0] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1.5px solid var(--border, #E5E7EB);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--text, #0F172A);
    background: #fff;
    resize: vertical;
    outline: none;
    min-height: 4rem;
    box-sizing: border-box;
}
.qcm-textarea:focus[b-ou5be28fk0] {
    border-color: var(--accent, #4F46E5);
    box-shadow: 0 0 0 0.1875rem rgba(79, 70, 229, 0.12);
}

.qcm-compose-actions[b-ou5be28fk0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.qcm-counter[b-ou5be28fk0] {
    font-size: 0.6875rem;
    color: var(--text-tertiary, #64748B);
}

.qcm-btn[b-ou5be28fk0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: none;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
}

.qcm-btn-send[b-ou5be28fk0] {
    background: var(--accent, #4F46E5);
    color: #fff;
}
.qcm-btn-send:hover:not(:disabled)[b-ou5be28fk0] { background: var(--accent-hover, #4338CA); }
.qcm-btn-send:disabled[b-ou5be28fk0] { opacity: 0.55; cursor: not-allowed; }
.qcm-btn-send .material-icons-round[b-ou5be28fk0] { font-size: 1rem; }

.qcm-status[b-ou5be28fk0] {
    margin-top: 0.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
}
.qcm-status-ok[b-ou5be28fk0] {
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    color: #065F46;
}
.qcm-status-error[b-ou5be28fk0] {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #991B1B;
}

@media (max-width: 48rem) {
    .qcm-dialog[b-ou5be28fk0] {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        top: 0;
        left: 0;
        transform: none;
        border-radius: 0;
    }
    .qcm-msg[b-ou5be28fk0] { max-width: 92%; font-size: 0.9375rem; }
    .qcm-btn-send[b-ou5be28fk0] { padding: 0.625rem 1rem; font-size: 0.875rem; }
}