/* /Pages/AiPlaylists/Index.razor.rz.scp.css */
.ai-playlist-shell[b-nkt4vtwli6] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(320px, 0.85fr) minmax(520px, 1.5fr);
    gap: 1rem;
    min-height: calc(100vh - 124px);
}

.ai-drop-overlay[b-nkt4vtwli6] {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.75rem;
    border: 2px dashed #0f766e;
    border-radius: 8px;
    color: #0f766e;
    background: rgba(240, 253, 250, 0.9);
    font-weight: 700;
    pointer-events: none;
}

.ai-playlist-shell.is-dragging-files .ai-drop-overlay[b-nkt4vtwli6] {
    display: flex;
}

.ai-chat-panel[b-nkt4vtwli6],
.ai-preview-panel[b-nkt4vtwli6] {
    min-width: 0;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #fff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

.ai-chat-panel[b-nkt4vtwli6] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 124px);
}

.ai-chat-header[b-nkt4vtwli6],
.ai-preview-toolbar[b-nkt4vtwli6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.ai-chat-header h1[b-nkt4vtwli6] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.ai-chat-header p[b-nkt4vtwli6],
.ai-preview-toolbar span[b-nkt4vtwli6] {
    margin: 0.25rem 0 0;
    color: #64748b;
    font-size: 0.875rem;
}

.ai-status[b-nkt4vtwli6] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #0f766e;
    font-size: 0.8rem;
    white-space: nowrap;
}

.ai-chat-messages[b-nkt4vtwli6] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    background: #f8fafc;
}

.ai-message[b-nkt4vtwli6] {
    max-width: 92%;
    margin-bottom: 0.75rem;
    padding: 0.8rem 0.9rem;
    border-radius: 8px;
    line-height: 1.45;
    white-space: pre-wrap;
}

.ai-message.from-ai[b-nkt4vtwli6] {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.ai-message.from-user[b-nkt4vtwli6] {
    margin-left: auto;
    color: #fff;
    background: #0f766e;
}

.ai-message-attachments[b-nkt4vtwli6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.55rem;
}

.ai-message-attachment[b-nkt4vtwli6] {
    width: 92px;
    height: 68px;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.18);
}

.ai-message-attachment img[b-nkt4vtwli6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ai-message-attachment-icon[b-nkt4vtwli6] {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(15, 23, 42, 0.22);
    font-size: 1.35rem;
}

.ai-composer[b-nkt4vtwli6] {
    display: grid;
    grid-template-columns: 1fr 44px;
    gap: 0.5rem;
    padding: 1rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.ai-pending-files[b-nkt4vtwli6] {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ai-pending-file[b-nkt4vtwli6] {
    display: inline-grid;
    grid-template-columns: 34px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 0.45rem;
    max-width: 220px;
    min-height: 42px;
    padding: 0.25rem;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 8px;
    background: #f8fafc;
}

.ai-pending-file.is-uploading[b-nkt4vtwli6] {
    opacity: 0.78;
}

.ai-pending-file.is-failed[b-nkt4vtwli6] {
    border-color: rgba(220, 38, 38, 0.38);
    background: #fef2f2;
}

.ai-pending-file small[b-nkt4vtwli6] {
    grid-column: 1 / -1;
    color: #b91c1c;
    font-size: 0.72rem;
}

.ai-pending-file img[b-nkt4vtwli6],
.ai-pending-file-icon[b-nkt4vtwli6] {
    width: 34px;
    height: 34px;
    border-radius: 6px;
}

.ai-pending-file img[b-nkt4vtwli6] {
    object-fit: cover;
}

.ai-pending-file-icon[b-nkt4vtwli6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0f766e;
    background: #ccfbf1;
}

.ai-pending-file-name[b-nkt4vtwli6] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #334155;
    font-size: 0.82rem;
}

.ai-pending-file button[b-nkt4vtwli6] {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 6px;
    color: #64748b;
    background: transparent;
}

.ai-pending-spinner[b-nkt4vtwli6] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(15, 118, 110, 0.22);
    border-top-color: #0f766e;
    border-radius: 999px;
    animation: ai-spin-b-nkt4vtwli6 0.8s linear infinite;
}

@keyframes ai-spin-b-nkt4vtwli6 {
    to {
        transform: rotate(360deg);
    }
}

.ai-composer textarea[b-nkt4vtwli6] {
    min-height: 88px;
    max-height: 180px;
    resize: vertical;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 8px;
    padding: 0.75rem;
    outline: none;
}

.ai-composer textarea:focus[b-nkt4vtwli6] {
    border-color: #0f766e;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.ai-send[b-nkt4vtwli6] {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: #0f766e;
}

.ai-send:disabled[b-nkt4vtwli6] {
    opacity: 0.55;
}

.ai-preview-panel[b-nkt4vtwli6] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ai-screen-frame[b-nkt4vtwli6] {
    padding: 1rem;
    background: #e2e8f0;
}

.ai-html-preview[b-nkt4vtwli6] {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 8px;
    background: #0f172a;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22);
}

@media (max-width: 1100px) {
    .ai-playlist-shell[b-nkt4vtwli6] {
        grid-template-columns: 1fr;
    }

    .ai-chat-panel[b-nkt4vtwli6] {
        height: 50vh;
    }
}
/* /Pages/Install/Install.razor.rz.scp.css */
.install-shell[b-77nowc8bli] {
    --install-primary-teal: #0E0BC7;
    --install-primary-purple: #8011B4;
    --install-gradient: linear-gradient(45deg, #0E0BC7, #8011B4);
    --install-text-dark: #09071A;
    --install-text-muted: #9F9FA9;
    --install-border: #E9EAF0;
    --install-surface: #FFFFFF;
    --install-surface-soft: white;
    min-height: 100vh;
    /*    background: radial-gradient(circle at top right, rgba(128, 17, 180, 0.08), transparent 28%), radial-gradient(circle at top left, rgba(14, 11, 199, 0.06), transparent 24%), #ffffff;*/
    color: var(--install-text-dark);
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.install-page[b-77nowc8bli] {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px 16px 40px;
}

.install-header[b-77nowc8bli] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 24px;
}

.install-back-link[b-77nowc8bli] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    color: #5B6475;
    transition: color 0.2s ease, transform 0.2s ease;
}

    .install-back-link i[b-77nowc8bli] {
        font-size: 1.1rem;
        line-height: 1;
    }

    .install-back-link:hover[b-77nowc8bli],
    .install-back-link:focus-visible[b-77nowc8bli] {
        color: var(--install-primary-purple);
        text-decoration: none;
        outline: none;
    }

    .install-back-link:active[b-77nowc8bli] {
        transform: translateX(-1px);
    }

.install-brand-logo[b-77nowc8bli] {
    display: block;
    width: auto;
    max-width: min(100%, 80px);
    object-fit: contain;
}

.install-loader[b-77nowc8bli] {
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.install-content[b-77nowc8bli] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.install-sidebar[b-77nowc8bli] {
    order: 1;
}

.install-copy[b-77nowc8bli] {
    order: 2;
}

.install-eyebrow[b-77nowc8bli] {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--install-primary-purple);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.install-copy h1[b-77nowc8bli] {
    margin: 0 0 12px;
    color: var(--install-text-dark);
    font-size: clamp(2rem, 8vw, 3rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.install-intro[b-77nowc8bli] {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.6;
    color: #4B5563;
}

.install-label[b-77nowc8bli] {
    display: block;
    margin-bottom: 10px;
    color: var(--install-text-dark);
    font-size: 0.95rem;
    font-weight: 700;
}

.install-step-action[b-77nowc8bli]  .btn {
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
    background: var(--install-gradient);
    box-shadow: 0 12px 24px rgba(66, 16, 174, 0.18);
}

    .install-step-action[b-77nowc8bli]  .btn:hover,
    .install-step-action[b-77nowc8bli]  .btn:focus-visible {
        opacity: 0.96;
    }

.install-step-action[b-77nowc8bli]  .btn-success {
    background: linear-gradient(45deg, #0E0BC7, #8011B4);
}

.install-steps[b-77nowc8bli] {
    display: grid;
    gap: 12px;
}

.install-step[b-77nowc8bli] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--install-border);
    border-radius: 16px;
    background: var(--install-surface-soft);
}

.install-step-number[b-77nowc8bli] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--install-gradient);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
}

.install-step-body[b-77nowc8bli] {
    min-width: 0;
    flex: 1;
    padding-top: 2px;
}

.install-step-text[b-77nowc8bli] {
    color: var(--install-text-dark);
    font-size: 0.94rem;
    line-height: 1.5;
}

.install-language-card[b-77nowc8bli] {
    padding: 18px;
    border: 1px solid var(--install-border);
    border-radius: 20px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFD 100%);
    box-shadow: 0 12px 30px rgba(9, 7, 26, 0.05);
}

.install-language-header h2[b-77nowc8bli] {
    margin: 0 0 6px;
    color: var(--install-text-dark);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.install-language-header p[b-77nowc8bli] {
    margin: 0 0 16px;
    color: var(--install-text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.install-flag-grid[b-77nowc8bli] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.install-flag-chip[b-77nowc8bli] {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 8px;
    border: 1px solid var(--install-border);
    border-radius: 14px;
    background: #fff;
    color: var(--install-text-dark);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

    .install-flag-chip:hover[b-77nowc8bli],
    .install-flag-chip:focus-visible[b-77nowc8bli] {
        border-color: rgba(128, 17, 180, 0.45);
        box-shadow: 0 10px 22px rgba(9, 7, 26, 0.06);
        transform: translateY(-1px);
        outline: none;
    }

    .install-flag-chip.is-selected[b-77nowc8bli] {
        border-color: #8011B4;
        background: rgba(128, 17, 180, 0.06);
        box-shadow: inset 0 0 0 1px rgba(128, 17, 180, 0.08);
    }

.install-flag-chip-flag[b-77nowc8bli] {
    font-size: 1.35rem;
    line-height: 1;
    flex: 0 0 auto;
}

.install-flag-chip-label[b-77nowc8bli] {
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .install-page[b-77nowc8bli] {
        padding: 28px 22px 48px;
    }

    .install-brand-logo[b-77nowc8bli] {
        max-width: 80px;
    }

    .install-header[b-77nowc8bli] {
        margin-bottom: 32px;
    }

    .install-flag-grid[b-77nowc8bli] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .install-page[b-77nowc8bli] {
        padding: 32px 24px 56px;
    }

    .install-content[b-77nowc8bli] {
        grid-template-columns: minmax(0, 1.35fr) minmax(280px, 360px);
        gap: 48px;
        align-items: start;
    }

    .install-copy[b-77nowc8bli] {
        order: 1;
    }

    .install-sidebar[b-77nowc8bli] {
        order: 2;
        position: sticky;
        top: 24px;
    }

    .install-copy h1[b-77nowc8bli] {
        max-width: 10ch;
    }

    .install-language-card[b-77nowc8bli] {
        padding: 22px;
        border-radius: 24px;
    }

    .install-flag-grid[b-77nowc8bli] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .install-flag-chip[b-77nowc8bli] {
        min-height: 74px;
        gap: 10px;
        padding: 12px 10px;
        border-radius: 16px;
    }

    .install-flag-chip-flag[b-77nowc8bli] {
        font-size: 1.5rem;
    }

    .install-flag-chip-label[b-77nowc8bli] {
        font-size: 0.92rem;
    }
}


.install-section-title[b-77nowc8bli] {
    margin-top: 28px;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 12px;
}
/* /Pages/Screens/Index.razor.rz.scp.css */
.setup-hint-target[b-5jugv1x46c] {
    position: relative;
    display: inline-flex;
}

.setup-hint-active[b-5jugv1x46c] {
    border-radius: var(--bs-border-radius, .375rem);
}

.setup-hint-active[b-5jugv1x46c]::before {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: calc(var(--bs-border-radius, .375rem) + 5px);
    border: 2px solid rgba(128, 17, 180, 0.45);
    box-shadow: 0 0 0 6px rgba(14, 11, 199, 0.08);
    pointer-events: none;
    animation: setupHintPulse-b-5jugv1x46c 1.8s ease-in-out infinite;
}

.setup-coachmark[b-5jugv1x46c] {
    position: absolute;
    z-index: 20;
    top: calc(100% + 12px);
    right: 0;
    width: min(280px, 80vw);
    padding: 12px 34px 12px 14px;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, #9b10c8 0%, #8011B4 48%, #5b0bc7 100%);
    box-shadow: 0 18px 38px rgba(128, 17, 180, 0.24);
    color: #fff;
    font-size: 0.92rem;
    line-height: 1.4;
    text-align: left;
}

.setup-coachmark[b-5jugv1x46c]::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 24px;
    width: 14px;
    height: 14px;
    background: #8011B4;
    transform: rotate(45deg);
}

.setup-coachmark .btn-link[b-5jugv1x46c] {
    color: #fff;
    font-weight: 700;
    text-decoration-color: rgba(255, 255, 255, 0.55);
}

.setup-coachmark .btn-link:hover[b-5jugv1x46c],
.setup-coachmark .btn-link:focus-visible[b-5jugv1x46c] {
    color: #fff;
    text-decoration-color: #fff;
}

.setup-coachmark-close[b-5jugv1x46c] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 0.7rem;
    height: 0.7rem;
    padding: 0;
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.85;
}

@keyframes setupHintPulse-b-5jugv1x46c {
    0%, 100% {
        opacity: 0.72;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.03);
    }
}

@media (max-width: 767.98px) {
    .setup-hint-target[b-5jugv1x46c] {
        position: relative;
    }

    .setup-coachmark[b-5jugv1x46c] {
        left: 50%;
        right: auto;
        top: calc(100% + 12px);
        width: min(280px, calc(100vw - 32px));
        transform: translateX(-50%);
    }

    .setup-coachmark[b-5jugv1x46c]::before {
        display: block;
        left: 50%;
        right: auto;
        transform: translateX(-50%) rotate(45deg);
    }
}
/* /Pages/Screens/ProvisioningUrlModal.razor.rz.scp.css */
.provisioning-url-modal[b-cudolrss9a] {
    --provisioning-url-gradient: linear-gradient(45deg, #0E0BC7, #8011B4);
    --provisioning-url-text-dark: #09071A;
    --provisioning-url-border: #E9EAF0;
    --provisioning-url-surface-soft: #FFFFFF;
}

.provisioning-url-section-title[b-cudolrss9a] {
    margin-top: 0;
    margin-bottom: 12px;
    color: var(--provisioning-url-text-dark);
    font-size: 1rem;
    font-weight: 700;
}

.provisioning-url-steps[b-cudolrss9a] {
    display: grid;
    gap: 12px;
}

.provisioning-url-step[b-cudolrss9a] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--provisioning-url-border);
    border-radius: 16px;
    background: var(--provisioning-url-surface-soft);
}

.provisioning-url-step-number[b-cudolrss9a] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--provisioning-url-gradient);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
}

.provisioning-url-step-body[b-cudolrss9a] {
    min-width: 0;
    padding-top: 2px;
}

.provisioning-url-step-text[b-cudolrss9a] {
    color: var(--provisioning-url-text-dark);
    font-size: 0.94rem;
    line-height: 1.5;
}
/* /Shared/UpdateAvailableDetector.razor.rz.scp.css */

.floating-update-button[b-akdir131ki] {
    position: fixed;
    bottom: 2rem;
    right: 0rem;
    margin-left: 15px;
    margin-right: 15px;
    padding: 1rem 1.5rem;
    animation: fadein-b-akdir131ki 2s ease-out;
    z-index: 100000;
}

@keyframes fadein-b-akdir131ki {
    from {
        right: -100%;
    }

    to {
        right: 0rem;
    }
}