@keyframes logo-pop {
    0% {
        transform: scale(.85);
        opacity: 0
    }

    70% {
        transform: scale(1.05);
        opacity: 1
    }

    to {
        transform: scale(1)
    }
}

@keyframes fadein {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes icon-pop {
    0% {
        transform: scale(.6);
        opacity: 0
    }

    75% {
        transform: scale(1.08);
        opacity: 1
    }

    to {
        transform: scale(1)
    }
}

:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-glass: rgba(255, 255, 255, 0.8);
    --bg-glass-secondary: rgba(255, 255, 255, 0.6);
    --bg-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-tertiary: #64748b;
    --text-accent: #a5b4fc;
    --text-muted: #94a3b8;
    --text-inverse: #ffffff;
    --border-color: rgba(0, 0, 0, 0.1);
    --border-light: rgba(0, 0, 0, 0.05);
    --border-medium: rgba(0, 0, 0, 0.15);
    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.1);
    --shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.15);
    --accent-primary: #3b82f6;
    --accent-secondary: #60a5fa;
    --accent-gradient: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    --accent-gradient-hover: linear-gradient(120deg, #60a5fa 0%, #3b82f6 100%);
    --accent-shadow: rgba(59, 130, 246, 0.3);
    --success-color: #10b981;
    --success-secondary: #059669;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --link-color: #3b82f6;
    --star-color: #fbbf24;
    --avatar-bg: linear-gradient(135deg, #60a5fa, #8b5cf6);
    --avatar-text: #ffffff;
    --text-link: #60a5fa;
    --text-link-hover: #60a5fa;
    --bg-form-control: #f3f6fb;
    --bg-form-control-focus: #e8eef8;
    --placeholder: #9aa1b9;
    --border: 1px solid rgba(255,255,255,0.07);
    --shadow-light: 0 2px 8px 0 rgba(23,47,107,0.06);
    --uppy-bg: #fff;
    --uppy-btn-bg: #FF5722;
    --uppy-btn-hover: #E64A19;
    --uppy-btn-color: #fff;
    --uppy-dashboard-border: transparent
}

[data-theme=dark] {
    --bg-primary: #0a0a1a;
    --bg-secondary: #1a1a2e;
    --bg-tertiary: #16213e;
    --bg-glass: rgba(255, 255, 255, 0.05);
    --bg-glass-secondary: rgba(255, 255, 255, 0.08);
    --bg-gradient: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 50%, #16213e 100%);
    --text-primary: #f4f6fa;
    --text-secondary: #e2e8f0;
    --text-tertiary: #cbd5e1;
    --text-accent: #6366f1;
    --text-muted: #94a3b8;
    --text-inverse: #1e293b;
    --border-color: rgba(255, 255, 255, 0.1);
    --border-light: rgba(255, 255, 255, 0.05);
    --border-medium: rgba(255, 255, 255, 0.15);
    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.4);
    --accent-primary: #60a5fa;
    --accent-secondary: #3b82f6;
    --accent-gradient: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    --accent-shadow: rgba(96, 165, 250, 0.3);
    --success-color: #10b981;
    --success-secondary: #059669;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --link-color: #60a5fa;
    --star-color: #f59e0b;
    --avatar-bg: linear-gradient(135deg, #3b82f6, #8b5cf6);
    --avatar-text: #ffffff;
    --text-link: #60a5fa;
    --text-link-hover: #3b82f6;
    --bg-form-control: #1e223a;
    --bg-form-control-focus: #282a43;
    --placeholder: #a0a9bf;
    --border: 1px solid rgba(255,255,255,0.07);
    --shadow-light: 0 2px 8px 0 rgba(0,0,0,0.16);
    --uppy-bg: #18192b;
    --uppy-btn-bg: #FF5722;
    --uppy-btn-hover: #E64A19;
    --uppy-btn-color: #fff;
    --uppy-dashboard-border: transparent
}

@media (prefers-color-scheme:dark) {
    :root:not([data-theme=light]) {
        --bg-primary: #0a0a1a;
        --bg-secondary: #1a1a2e;
        --bg-tertiary: #16213e;
        --bg-glass: rgba(255, 255, 255, 0.05);
        --bg-glass-secondary: rgba(255, 255, 255, 0.08);
        --bg-gradient: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 50%, #16213e 100%);
        --text-primary: #ffffff;
        --text-secondary: #e2e8f0;
        --text-tertiary: #cbd5e1;
        --text-muted: #94a3b8;
        --text-inverse: #1e293b;
        --border-color: rgba(255, 255, 255, 0.1);
        --border-light: rgba(255, 255, 255, 0.05);
        --border-medium: rgba(255, 255, 255, 0.15);
        --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.2);
        --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.3);
        --shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.4);
        --accent-primary: #60a5fa;
        --accent-secondary: #3b82f6;
        --accent-gradient: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
        --accent-shadow: rgba(96, 165, 250, 0.3);
        --success-color: #10b981;
        --success-secondary: #059669;
        --warning-color: #f59e0b;
        --error-color: #ef4444;
        --link-color: #2563eb;
        --star-color: #f59e0b;
        --avatar-bg: linear-gradient(135deg, #3b82f6, #8b5cf6);
        --avatar-text: #ffffff;
        --text-link: #2563eb;
        --text-link-hover: #2563eb
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body {
    font-family: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background: var(--bg-gradient);
    color: var(--text-primary);
    overflow-x: hidden;
    transition: background .3s ease,color .3s ease
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    align-items: center;
    margin-top: 32px
}

.btn-primary, .btn-secondary {
    text-decoration: none;
    display: inline-block
}

.btn-secondary {
    border-radius: 999px
}

.btn-primary {
    color: var(--text-inverse)
}

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px var(--accent-shadow)
    }

.btn-secondary {
    background: var(--bg-glass)
}

    .btn-secondary:hover {
        background: var(--bg-glass-secondary)
    }

.appstore-group {
    display: flex;
    align-items: center;
    gap: 12px
}

.appstore-label {
    font-size: .85rem;
    color: var(--text-muted)
}

.cta-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
    margin-top: 32px
}

.cta-column, .mobile-cta {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.mobile-cta {
    gap: 8px;
    align-items: flex-start;
    margin-top: 4px
}

.mobile-label {
    font-size: .85rem;
    color: var(--text-muted);
    font-weight: 500
}

.appstore-badge {
    height: 44px
}

.social-icons {
    display: flex;
    gap: 16px;
    margin-top: 24px
}

    .social-icons a {
        font-size: 24px;
        transition: color .3s ease
    }

        .social-icons a:hover {
            color: var(--accent-primary)
        }

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 6%;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background: var(--bg-glass);
    border-bottom: 1px solid var(--border-color);
    transition: all .3s ease
}

.logo {
    font-size: 24px;
    font-weight: 700;
    color: var(--accent-primary);
    text-decoration: none
}

.auth-buttons, .nav {
    display: flex;
    align-items: center
}

.nav {
    gap: 40px
}

    .footer-section a:hover, .nav a:hover, .sign-in:hover, .social-icons a {
        color: var(--text-primary)
    }

#mainNav [uk-icon] {
    padding-right: 4px;
    vertical-align: middle
}

.auth-buttons {
    gap: 10px
}

.get-started, .nav a, .sign-in {
    text-decoration: none
}

.nav a, .sign-in {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 15px;
    transition: color .3s ease
}

.get-started {
    background: var(--accent-gradient);
    color: var(--text-inverse);
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    transition: all .3s ease;
    box-shadow: 0 4px 15px var(--accent-shadow)
}

.get-started:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--accent-shadow)
}

.main-content {
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px 6% 100px
}

.main-title {
    font-size: clamp(48px,10vw,72px);
    line-height: 1.1
}

.highlight {
    background: linear-gradient(135deg,var(--accent-primary) 0%,#8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.subtitle {
    color: var(--text-tertiary);
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
    max-width: 600px
}

.stats {
    display: flex;
    gap: 32px
}

.right-content, .stat {
    display: flex;
    align-items: center
}

.stat {
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary)
}

    .stat::before {
        content: "●";
        color: var(--success-color);
        font-size: 12px
    }

.right-content {
    flex: 1;
    justify-content: center;
    position: relative
}

.demo-container {
    position: relative;
    width: 480px;
    height: 400px;
    background: var(--bg-glass);
    border-radius: 24px;
    border: 1px solid var(--border-color);
    backdrop-filter: blur(20px);
    padding: 24px;
    box-shadow: var(--shadow-heavy)
}

.xray-display {
    width: 100%;
    height: 300px;
    background: var(--bg-secondary);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    margin-bottom: 16px
}

.xray-image {
    width: 100%;
    height: 100%;
    background-color: var(--bg-tertiary);
    background-size: 20px 20px;
    background-position: 0 0,0 10px,10px -10px,-10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    font-weight: 600
}

.analysis-time {
    position: absolute;
    bottom: 24px;
    right: 24px;
    background: rgba(139,92,246,.9);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 24px;
    color: var(--text-inverse)
}

.time-label {
    font-size: 12px;
    font-weight: 500;
    opacity: .8;
    margin-top: 2px
}

.account-card {
    background: var(--bg-form-control);
    border-radius: 28px;
    box-shadow: var(--shadow-light);
    padding: 40px 32px 32px;
    max-width: 480px;
    margin: 32px auto 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px
}

.account-card-title {
    color: var(--text-primary);
    font-size: 1.28rem;
    font-weight: 700;
    margin-bottom: 18px;
    letter-spacing: -.01em
}

.account-card-action {
    color: var(--accent-primary);
    font-weight: 500;
    text-decoration: underline;
    font-size: 1.08rem;
    transition: color .18s
}

    .account-card-action:hover {
        color: var(--accent-secondary)
    }

.account-card .btn-primary {
    font-size: 1.15rem;
    border-radius: 999px !important;
    padding: 16px 0 !important;
    min-width: 220px;
    align-self: flex-start;
    margin-bottom: 8px
}

.account-btn {
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 16px;
    border-radius: 8px;
    transition: all .2s ease
}

    .account-btn:hover {
        background: var(--bg-glass-secondary);
        border-color: var(--border-medium)
    }

.account-dropdown {
    background: var(--bg-primary) !important;
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    box-shadow: var(--shadow-heavy) !important;
    width: 160px !important;
    padding: 8px 0 !important;
    z-index: 10000 !important;
}

/* Fix for UIKit dropdown z-index issues */
.uk-dropdown {
    z-index: 10000 !important;
}

/* Ensure account and locale dropdowns appear above everything */
.uk-open > .uk-dropdown,
.uk-dropdown.uk-open {
    z-index: 10000 !important;
}

    .account-dropdown .uk-nav {
        margin: 0 !important;
        padding: 0 !important
    }

        .account-dropdown .uk-nav > li > a {
            color: var(--text-secondary) !important;
            background: 0 0 !important;
            padding: 10px 16px !important
        }

            .account-dropdown .uk-nav > li > a:hover {
                background: var(--bg-glass) !important;
                color: var(--text-primary) !important
            }

        .account-dropdown .uk-nav > li:not(:last-child), .locale-dropdown .uk-nav > li:not(:last-child) {
            border-bottom: 1px solid var(--border-light) !important
        }

.locale-btn {
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 16px;
    border-radius: 8px;
    transition: all .2s ease
}

    .locale-btn:hover {
        background: var(--bg-glass-secondary);
        border-color: var(--border-medium);
        text-decoration: none
    }

.locale-dropdown {
    background: var(--bg-primary) !important;
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    box-shadow: var(--shadow-heavy) !important;
    width: 200px !important;
    padding: 8px 0 !important;
    max-height: 300px;
    overflow-y: auto;
    z-index: 10000 !important
}

    .locale-dropdown .uk-nav {
        margin: 0 !important;
        padding: 0 !important
    }

        .locale-dropdown .uk-nav > li > a {
            color: var(--text-secondary) !important;
            background: 0 0 !important;
            padding: 8px 16px !important;
            font-size: 10pt !important;
            font-weight: 700 !important
        }

            .locale-dropdown .uk-nav > li > a:hover {
                background: var(--bg-glass) !important;
                color: var(--text-primary) !important;
                text-decoration: none
            }

.hamburger {
    display: none;
    background: 0 0;
    border: 0;
    font-size: 2rem;
    color: var(--accent-primary);
    cursor: pointer;
    z-index: 1001
}

#faq.section {
    margin: 0 auto;
    padding: 60px 20px;
    max-width: 900px
}

.section {
    margin: 0 auto;
    max-width: 1200px
}

.section {
    padding: 100px 6%;
}

.section-header {
    text-align: center;
    margin-bottom: 80px
}

.section-title {
    font-size: clamp(36px,5vw,48px)
}

.section-subtitle {
    font-size: 18px;
    color: var(--text-tertiary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px
}

.video-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    justify-items: center
}

.feature-card {
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 40px;
    transition: all .3s ease
}

    .feature-card:hover {
        transform: translateY(-10px);
        box-shadow: var(--shadow-heavy)
    }

.feature-icon {
    width: 60px;
    height: 60px;
    background: var(--accent-gradient);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 24px;
    color: var(--text-inverse)
}

.feature-title {
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px
}

.benefit-content p {
    color: var(--text-tertiary);
    font-size: 14px;
    line-height: 1.5
}

.feature-description {
    color: var(--text-tertiary);
    line-height: 1.6
}

.faq-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 40px
}

.faq-card {
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px 28px;
    backdrop-filter: blur(12px);
    transition: transform .2s ease,box-shadow .2s ease
}

    .faq-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-medium)
    }

.faq-question {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary)
}

.faq-answer {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6
}

.steps-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px
}

.step {
    text-align: center;
    position: relative
}

.step-number {
    width: 60px;
    height: 60px;
    background: var(--accent-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 24px;
    font-weight: 700;
    box-shadow: 0 8px 20px var(--accent-shadow);
    color: var(--text-inverse)
}

.benefit-content h3, .step-title {
    font-weight: 600;
    color: var(--text-primary)
}

.benefit-content h3 {
    font-size: 16px;
    margin-bottom: 8px;
    margin-top: 12px
}

.step-title {
    font-size: 20px;
    margin-bottom: 12px
}

.step-description {
    color: var(--text-tertiary);
    line-height: 1.6
}

.plus-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--success-color);
    color: var(--text-inverse);
    font-size: 2rem;
    font-weight: 700;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(34,197,94,.22);
    margin-bottom: 16px;
    margin-right: 0;
    vertical-align: middle
}

.step-addon-text {
    display: block;
    margin-top: 10px;
    font-size: 1.1rem;
    color: var(--text-primary)
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 40px
}

.benefit-item {
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 32px;
    backdrop-filter: blur(16px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 260px;
    transition: all .3s ease
}

.benefit-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg,var(--success-color) 0%,var(--success-secondary) 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-inverse)
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
    align-items: stretch
}

.pricing-card {
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 40px;
    text-align: center;
    position: relative;
    transition: all .3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.pricing-card.featured {
    border: 2px solid var(--accent-primary);
    box-shadow: 0 20px 40px var(--accent-shadow)
}

    .pricing-card:hover {
        transform: translateY(-10px)
    }

.plan-name {
    font-size: 20px
}

.plan-price {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    margin: 0;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    align-items: baseline;
    justify-content: center;
    min-height: 58px
}

.plan-period {
    color: var(--text-tertiary);
    margin: 8px 0 32px 0;
    font-size: 16px;
    line-height: 1.2;
    min-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center
}

.plan-features {
    list-style: none;
    margin-bottom: 32px;
    text-align: left;
    padding-left: 0
}

    .plan-features li {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: start;
        gap: 12px;
        padding: 8px 0;
        color: var(--text-secondary)
    }

        .plan-features li::before {
            content: "✓";
            color: var(--success-color);
            font-weight: 700;
            display: inline-block;
            line-height: 1.4;
            font-size: 16px
        }

.plan-button {
    width: 100%;
    padding: 16px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all .3s ease;
    display: inline-block
}

    .plan-button.primary {
        background: var(--accent-gradient);
        color: var(--text-inverse);
        box-shadow: 0 4px 20px var(--accent-shadow)
    }

    .plan-button.secondary {
        color: var(--text-primary)
    }

.studies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 32px;
    margin-top: 40px
}

.plan-button.secondary, .study-card {
    background: var(--bg-glass);
    border: 1px solid var(--border-color)
}

.study-card {
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 24px
}

.study-meta {
    font-size: .85rem;
    color: var(--text-muted);
    margin-bottom: 8px
}

.study-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary)
}

.study-excerpt {
    font-size: .95rem;
    color: var(--text-secondary);
    margin-bottom: 16px
}

.study-link {
    font-size: .9rem;
    color: var(--accent-primary);
    text-decoration: underline
}

.cta-section {
    background: var(--bg-glass);
    border-radius: 32px;
    padding: 80px 60px;
    text-align: center;
    margin: 100px 0;
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color)
}

.cta-title, .footer-section h3 {
    color: var(--text-primary);
    margin-bottom: 16px
}

.cta-title {
    font-size: clamp(32px,4vw,42px);
    font-weight: 700
}

.cta-description {
    font-size: 18px;
    color: var(--text-tertiary);
    margin-bottom: 32px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto
}

.footer {
    padding: 60px 6% 40px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-glass)
}

.footer-content {
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: 40px
}

.footer-section h3 {
    font-size: 18px;
    font-weight: 600
}

.footer-section a, .footer-section p {
    color: var(--text-tertiary);
    text-decoration: none;
    display: block;
    margin-bottom: 8px;
    transition: color .3s ease
}

.footer-bottom {
    text-align: center;
    padding-top: 40px;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    margin-top: 40px
}

.video-container {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    position: relative;
    padding-top: 56.25%;
    height: 0
}

    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

.form-control {
    width: 100%;
    background: var(--bg-form-control);
    border: var(--border);
    color: var(--text-primary);
    margin-bottom: 4px;
    transition: background .2s,color .2s,border .2s
}

    .form-control:focus {
        background: var(--bg-form-control-focus);
        border: 1.5px solid #49a3fa
    }

    .form-control::placeholder {
        color: var(--placeholder);
        opacity: 1
    }

    .form-control[disabled], .form-control[readonly], .signin-card .form-control[disabled], .signin-card .form-control[readonly] {
        color: var(--text-secondary) !important;
        opacity: 1 !important;
        background: var(--bg-form-control);
        font-style: normal;
        font-weight: 500
    }

.form-group label {
    font-weight: 600;
    display: block;
    width: 100%;
    margin-bottom: 6px;
    color: var(--text-primary)
}

.form-text {
    color: var(--text-muted) !important;
    font-size: .95rem
}

/* Enhanced dark theme form readability */
[data-theme=dark] .form-control {
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    color: var(--text-primary) !important;
}

[data-theme=dark] .form-control:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2), inset 0 1px 3px rgba(0, 0, 0, 0.2);
    color: var(--text-primary) !important;
}

/* Ensure text is visible while typing */
[data-theme=dark] input[type="text"],
[data-theme=dark] input[type="email"],
[data-theme=dark] input[type="password"],
[data-theme=dark] textarea {
    color: var(--text-primary) !important;
    background-color: var(--bg-form-control) !important;
}

[data-theme=dark] input[type="text"]:focus,
[data-theme=dark] input[type="email"]:focus,
[data-theme=dark] input[type="password"]:focus,
[data-theme=dark] textarea:focus {
    color: var(--text-primary) !important;
    background-color: var(--bg-form-control-focus) !important;
}

[data-theme=dark] .form-control::placeholder {
    color: #a0a9bf;
    opacity: 0.8;
}

/* Ensure form labels are visible in dark mode */
[data-theme=dark] .form-group label,
[data-theme=dark] .signin-card .form-group label {
    color: var(--text-secondary) !important;
}

/* Dark theme checkbox and link improvements for AuthN pages */
[data-theme=dark] .signin-card input[type=checkbox] {
    accent-color: var(--accent-primary);
    background-color: var(--bg-form-control);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

[data-theme=dark] .signin-card .signin-links a,
[data-theme=dark] .signin-card .uk-text-small a {
    color: var(--text-link) !important;
    text-decoration: none;
}

[data-theme=dark] .signin-card .signin-links a:hover,
[data-theme=dark] .signin-card .uk-text-small a:hover {
    color: var(--text-link-hover) !important;
    text-decoration: underline;
}

/* Improve error text visibility */
[data-theme=dark] .invalid-feedback,
[data-theme=dark] .uk-text-danger {
    color: var(--error-color) !important;
}

/* Success button styling */
[data-theme=dark] .btn-danger {
    background-color: var(--error-color);
    border-color: var(--error-color);
    color: white;
}

/* Hide "AI-Powered Cephalometric Analysis" title on mobile for signin page */
@media (max-width: 768px) {
    .main-content .signin-card .plan-name,
    .main-content .signin-card h3.plan-name,
    .signin-card .plan-name,
    .signin-card h3.plan-name {
        display: none !important;
        visibility: hidden !important;
    }
}

/* Additional mobile breakpoint for smaller screens */
@media (max-width: 480px) {
    .main-content .signin-card .plan-name,
    .main-content .signin-card h3.plan-name,
    .signin-card .plan-name,
    .signin-card h3.plan-name {
        display: none !important;
        visibility: hidden !important;
    }
}

.main-title, .plan-name, .section-title, .uk-card-title, h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary) !important;
    font-weight: 700;
    margin-bottom: 18px;
    background: 0 0 !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    background-clip: initial !important
}

.signin-card {
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-medium);
    border-radius: 24px;
    padding: 40px;
    position: relative;
    transition: all .3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 420px;
    color: var(--text-primary)
}

    .signin-card:hover {
        transform: none !important;
        box-shadow: var(--shadow-medium) !important
    }

    .signin-card, .signin-card * {
        text-align: left !important
    }

        .signin-card .signin-row, .signin-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px
        }

        .signin-card .signin-action {
            text-align: right !important
        }

        .form-group label, .signin-card .form-group label {
            text-align: left !important;
            color: var(--text-form-label)
        }

        .signin-card .form-group label, .signin-card .form-group.uk-text-small, .signin-card .uk-text-small {
            display: block;
            width: 100%;
            margin-bottom: 10px;
            white-space: normal !important;
            word-break: break-word;
            overflow-wrap: anywhere
        }

        .signin-card input[type=checkbox] {
            margin-right: 8px;
            vertical-align: middle
        }

.signin-row {
    margin-top: 18px;
    margin-bottom: 12px
}

.signin-links {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px
}

    .signin-links a {
        color: var(--link-color);
        text-decoration: none;
        font-weight: 500;
        font-size: 1rem;
        margin-bottom: 0;
        transition: color .2s
    }

        .signin-links a:hover {
            color: var(--text-link-hover);
            text-decoration: underline
        }

.signin-action {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

#image-crop, .logo-badge {
    justify-content: center;
    display: flex;
    align-items: center
}

.logo-badge {
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    box-shadow: 0 0 0 6px rgba(96,165,250,.09),0 8px 32px rgba(96,165,250,.14);
    backdrop-filter: blur(7px);
    margin: 0 auto 18px;
    border: 2px solid transparent;
    background-image: linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)),linear-gradient(135deg,#60a5fa 0,#8b5cf6 100%);
    background-origin: border-box;
    background-clip: content-box,border-box;
    animation: logo-pop .7s cubic-bezier(.18,.89,.32,1.28);
    overflow:hidden;
}

.signin-logo {
    width: 54px;
    margin: 0;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.08))
}

.btn-primary, .uk-button-primary {
    background: var(--accent-gradient) !important;
    border: 0 !important;
    border-radius: 1.5rem !important;
    box-shadow: var(--shadow-light) !important;
    padding: 12px 36px !important;
    min-width: 90px
}

.uk-button-primary {
    transition: background .15s;
    color: #fff !important;
    font-weight: 600;
    font-size: 1.1rem
}

    .btn-primary:hover, .uk-button-primary:hover {
        background: var(--accent-gradient-hover) !important;
        color: #fff !important
    }

.btn-default, .uk-button-default {
    background: var(--bg-form-control) !important;
    color: var(--text-primary) !important;
    border-radius: 1.5rem !important;
    font-weight: 500;
    border: 0 !important
}


#image-crop {
    margin: 24px 0 12px;
    border-radius: 24px;
    box-shadow: 0 2px 16px 0 rgba(59,130,246,.05);
    background: var(--bg-tertiary, #f8fafc);
    flex-direction: column
}


.uk-button {
    border-radius: 999px !important;
    transition: background .15s,color .15s,box-shadow .15s;
    box-shadow: 0 2px 12px 0 rgba(59,130,246,.07);
    letter-spacing: .01em
}

.uk-button-primary:hover {
    background: var(--accent-gradient-hover) !important;
    box-shadow: 0 8px 24px var(--accent-shadow)
}

.uk-button-default {
    box-shadow: none !important
}

.uk-button-default:hover {
    background: var(--bg-form-control-focus) !important
}

.modal-content .btn-close:hover, .modal-content .close:hover {
    opacity: 1 !important
}

[data-theme=dark] {
    background: rgba(22,24,42,.96) !important
}

.modal-content {
    background: var(--bg-modal) !important;
    color: var(--text-primary) !important;
    border-radius: 20px !important;
    border: 1px solid var(--border-glass) !important;
    box-shadow: var(--shadow-strong) !important;
    backdrop-filter: blur(12px) !important
}

.modal-body, .modal-footer, .modal-header {
    background: 0 0 !important;
    border: 0 !important
}

.modal-body {
    color: var(--text-primary) !important
}

.modal-content .btn-close, .modal-content .close {
    filter: none !important;
    color: var(--text-primary) !important;
    opacity: .82;
    background: 0 0 !important;
    border-radius: 50%;
    font-size: 2rem;
    transition: opacity .2s
}

.uk-spinner > svg {
    stroke: var(--accent-primary) !important
}

.segmented-control {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    background: var(--bg-segmented);
    border-radius: 1.8rem;
    overflow: hidden;
    box-shadow: var(--shadow-light);
    margin-bottom: 18px
}

.segment-btn {
    flex: 1 1 0;
    background: 0 0;
    border: 0;
    outline: 0;
    padding: 14px 0;
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background .18s,color .18s;
    border-radius: 0;
    box-shadow: none;
    min-width: 120px;
    letter-spacing: .01em
}

    .segment-btn.active, .segment-btn:focus {
        background: var(--accent-gradient);
        color: #fff;
        border-radius: 1.8rem;
        z-index: 2
    }

    .segment-btn:not(:last-child) {
        border-right: 1px solid var(--border-segmented)
    }

    .segment-btn:hover:not(.active) {
        background: var(--bg-form-control-focus);
        color: var(--text-primary)
    }

.tab-content {
    min-height: 800px;
    transition: min-height .2s;
    box-sizing: border-box
}

.tab-pane {
    min-width: 800px;
    width: 100%;
    box-sizing: border-box
}

@media (max-width:900px) {
    .main-content {
        padding-top: 100px !important
    }
}

@media (max-width:700px) {
    .main-content {
        padding: 50px 2%
    }
}

@media (max-width:600px) {
    .main-content {
        padding-top: 120px !important
    }
}

@media (max-width:520px) {
    .segment-btn {
        min-width: 0;
        font-size: 1rem;
        padding: 10px 0
    }
}

@media (max-width:480px) {
    .signin-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px
    }

    .signin-action {
        justify-content: flex-start
    }
}

/* Responsive grid layouts */
@media (max-width: 768px) {
    .features-grid,
    .benefits-grid,
    .steps-container {
        grid-template-columns: 1fr;
        gap: 30px
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .features-grid,
    .benefits-grid,
    .steps-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px
    }
}

.founder-grid {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 48px
}

.founder-card {
    background: var(--bg-glass, rgba(255,255,255,0.05));
    border-radius: 24px;
    padding: 28px 24px;
    max-width: 340px;
    flex: 1 1 300px;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center
}

.founder-card img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 16px
}

.founder-card h3 {
    margin-bottom: 4px;
    color: var(--text-primary, #ffffff)
}

.founder-card .role {
    color: var(--text-accent, #a5b4fc);
    margin-bottom: 0;
    font-size: .98rem
}

.founder-card .bio {
    margin-top: 18px;
    color: var(--text-secondary, #d4d4d8);
    font-size: .97rem
}

.founder-card .linkedin {
    font-size: .95rem;
    margin-top: 12px
}

.footer-text a:hover, .founder-card .linkedin:hover {
    text-decoration: underline
}

.footer-text {
    text-align: center;
    color: var(--text-accent, #a5b4fc);
    margin-top: 40px;
    font-size: 1rem
}

    .footer-text a, .founder-card .linkedin {
        color: var(--link-color, #60a5fa);
        text-decoration: none
    }

.testimonial-text {
    font-style: italic;
    color: var(--text-primary, rgba(255, 255, 255, 0.8))
}

.testimonial-content, .testimonial-text {
    margin-bottom: 20px
}

.star-rating {
    display: flex;
    gap: 4px;
    margin-bottom: 16px
}

    .star-rating span {
        color: var(--star-color, #fbbf24)
    }

.testimonial-quote {
    font-style: italic;
    margin-bottom: 20px;
    color: var(--text-secondary, rgba(255, 255, 255, 0.8));
    line-height: 1.6
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px
}

.author-avatar {
    width: 40px;
    height: 40px;
    background: var(--avatar-bg, linear-gradient(135deg, #60a5fa, #8b5cf6));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--avatar-text, #ffffff);
    flex-shrink: 0
}

.author-info .author-name {
    font-weight: 600;
    color: var(--text-primary, #ffffff);
    margin-bottom: 2px
}

.author-info .author-location, .author-info .author-title {
    font-size: 14px;
    color: var(--text-muted, rgba(255, 255, 255, 0.6));
    line-height: 1.4
}

.theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-primary);
    border-radius: 50px;
    padding: 8px 16px;
    box-shadow: var(--shadow-light);
    transition: all .3s ease;
    cursor: pointer;
    user-select: none
}

    .theme-toggle:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 20px rgba(0,0,0,.12)
    }

.theme-icon {
    width: 20px;
    height: 20px;
    transition: all .3s ease;
    opacity: .6
}

    .theme-icon.active {
        opacity: 1;
        transform: scale(1.1)
    }

.switch-track {
    position: relative;
    width: 50px;
    height: 26px;
    background: rgba(107,114,128,.3);
    border-radius: 50px;
    transition: all .3s ease;
    margin: 0 4px
}

.switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg,#3b82f6 0,#60a5fa 100%);
    border-radius: 50%;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 2px 8px rgba(0,0,0,.2)
}

[data-theme=dark] .switch-thumb {
    transform: translateX(24px);
    background: linear-gradient(135deg,#60a5fa 0,#8b5cf6 100%)
}

[data-theme=dark] .switch-track {
    background: rgba(96,165,250,.2)
}

.sun-icon {
    color: #f59e0b
}

.moon-icon {
    color: #60a5fa
}

[data-theme=dark] .sun-icon {
    opacity: .4
}

[data-theme=dark] .moon-icon {
    opacity: 1;
    transform: scale(1.1)
}

:not([data-theme=dark]) .sun-icon {
    opacity: 1;
    transform: scale(1.1)
}

:not([data-theme=dark]) .moon-icon {
    opacity: .4
}

.aboutme-container {
    max-width: 480px;
    margin: 40px auto;
    padding: 0 12px
}

.aboutme-card {
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    box-shadow: var(--shadow-light);
    padding: 40px 28px 32px
}

.aboutme-title {
    color: var(--text-primary);
    font-weight: 700;
    margin-bottom: 22px;
    font-size: 1.6rem;
    text-align: left
}

.aboutme-profile, .aboutme-profilepic-centered {
    display: flex;
    align-items: center;
    margin-bottom: 28px
}

.aboutme-profile {
    gap: 18px
}

.aboutme-profilepic-centered {
    justify-content: center
}

.aboutme-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 10px var(--shadow-light);
    border: 3px solid var(--bg-primary);
    background: var(--avatar-bg, linear-gradient(135deg, #60a5fa, #8b5cf6));
    transition: box-shadow .2s;
    cursor: pointer
}

    .aboutme-avatar:hover {
        box-shadow: 0 4px 20px var(--accent-shadow)
    }

.aboutme-profilename {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center
}

.aboutme-name {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
    text-transform: capitalize;
    word-break: break-word
}

.aboutme-row {
    display: flex;
    gap: 18px;
    margin-bottom: 18px
}

.aboutme-salutation {
    flex: 0 0 120px;
    min-width: 100px
}

.aboutme-salutation-sm {
    flex: 0 0 80px;
    min-width: 80px;
    max-width: 120px
}

.aboutme-fname-lg, .aboutme-lname-lg {
    flex: 1 1 0;
    min-width: 0
}

@media (max-width:600px) {
    .aboutme-profile {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px
    }

    .aboutme-fname, .aboutme-lname, .aboutme-salutation {
        width: 100%;
        min-width: 0
    }

    .aboutme-profilename {
        align-items: flex-start
    }

    .aboutme-card {
        padding: 24px 6px
    }

    .aboutme-container {
        max-width: 99vw
    }

    .aboutme-row {
        flex-direction: column;
        gap: 6px
    }

    .aboutme-fname-lg, .aboutme-lname-lg, .aboutme-salutation-sm {
        width: 100%;
        min-width: 0;
        max-width: 100%
    }
}

.aboutme-success-msg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(34,197,94,.09);
    color: #15803d;
    border-radius: 16px;
    padding: 14px 22px;
    margin: 22px 0 0;
    font-weight: 500;
    font-size: 1.05rem;
    box-shadow: 0 2px 8px rgba(34,197,94,.08);
    border: 0;
    min-height: 44px;
    transition: all .18s
}

.aboutme-success-icon {
    font-size: 1.3em;
    margin-right: 2px
}

.aboutme-toast {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(16,185,129,.08);
    color: #16935b;
    border-radius: 14px;
    padding: 10px 20px;
    font-size: 1.01rem;
    font-weight: 500;
    box-shadow: 0 1.5px 12px 0 rgba(16,185,129,.05);
    min-height: 38px;
    transition: all .18s;
    max-width: 90%;
    margin: 24px auto 0
}

.aboutme-toast-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: block
}

input[type=range] {
    accent-color: var(--accent-primary)
}

[data-theme=dark] input[type=range]::-webkit-slider-thumb {
    background: var(--accent-primary);
    border: 2px solid #22223b
}

[data-theme=dark] input[type=range]::-webkit-slider-runnable-track {
    background: #33364b
}

[data-theme=dark] input[type=range]::-moz-range-thumb {
    background: var(--accent-primary);
    border: 2px solid #22223b
}

[data-theme=dark] input[type=range]::-moz-range-track {
    background: #33364b
}

[data-theme=dark] input[type=range]::-ms-fill-lower, [data-theme=dark] input[type=range]::-ms-fill-upper {
    background: #33364b
}

input[type=range]::-webkit-slider-thumb {
    border-radius: 50%;
    border: 2px solid var(--bg-primary, #fff);
    width: 20px;
    height: 20px;
    background: var(--accent-primary);
    cursor: pointer;
    transition: background .2s
}

input[type=range]:focus::-webkit-slider-thumb {
    outline: 2px solid var(--accent-primary)
}

#image-crop input[type=range] {
    margin-top: 28px;
    width: 85%;
    max-width: 320px
}

.preferences-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 30px
}

.preferences-list {
    display: flex;
    flex-direction: column;
    gap: 28px
}

.preference-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-form-control);
    padding: 18px 22px;
    border-radius: 16px;
    box-shadow: var(--shadow-light)
}

.preference-label {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 1.05rem;
    display: flex;
    flex-direction: column;
    gap: 2px
}

.preference-note {
    color: var(--text-muted);
    font-size: .92em;
    margin-left: 4px
}

    .dataprivacy-note a, .preference-note a, .subscription-license a {
        color: var(--accent-primary);
        text-decoration: underline
    }

.preference-switch {
    width: 28px;
    height: 28px;
    accent-color: var(--accent-primary)
}

.profile-title, .security-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 30px
}

.dataprivacy-section {
    max-width: 500px
}

.folders-section, .preferences-section, .profile-section, .security-section, .subscription-section {
    background: var(--bg-form-control);
    padding: 24px 22px;
    border-radius: 16px;
    box-shadow: var(--shadow-light);
    margin-bottom: 30px
}

.preferences-section, .profile-section, .security-section, .subscription-section {
    max-width: 500px
}

.folders-section {
    max-width: 100%
}

.security-section-title {
    color: var(--text-primary);
    font-size: 1.13rem;
    font-weight: 600;
    margin-bottom: 14px
}

.security-fields {
    display: flex;
    flex-direction: column;
    gap: 16px
}

    .security-fields .btn-primary {
        align-self: flex-end;
        margin-top: 12px
    }

.security-2fa, .security-activity {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 8px
}

.security-status-disabled, .security-status-enabled {
    font-weight: 600;
    margin-left: 4px
}

.security-status-enabled {
    color: #10b981
}

.security-status-disabled {
    color: #f59e0b
}

.btn-secondary {
    background: var(--bg-form-control) !important;
    color: var(--accent-primary) !important;
    border-radius: 1.5rem !important;
    border: 1.5px solid var(--accent-primary) !important;
    font-weight: 500;
    font-size: 1rem;
    padding: 10px 26px !important;
    transition: background .18s,color .18s,border .18s;
    margin-right: 8px
}

    .btn-secondary:hover {
        background: var(--bg-form-control-focus) !important;
        color: var(--accent-secondary) !important;
        border-color: var(--accent-secondary) !important
    }

.dataprivacy-container {
    max-width: 440px;
    margin: 40px auto;
    padding: 0 12px
}

.dataprivacy-section {
    background: var(--bg-form-control);
    padding: 18px 22px;
    border-radius: 16px;
    box-shadow: var(--shadow-light);
    margin-bottom: 30px
}

.dataprivacy-label {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 1.07rem;
    margin-bottom: 6px
}

.dataprivacy-value {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 6px
}

.dataprivacy-note {
    color: var(--text-muted);
    font-size: .97em;
    margin-top: 3px
}

    .dataprivacy-note a:hover, .subscription-license a:hover {
        color: var(--accent-secondary)
    }

.datamodal-body {
    padding: 38px 36px 28px !important
}

.datamodal-title {
    font-size: 1.32rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: left;
    margin-bottom: 20px
}

.datamodal-content p {
    line-height: 1.65;
    margin-bottom: 12px
}

.datamodal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 18px;
    margin-top: 32px
}

[data-theme=dark] .datamodal-content p, [data-theme=dark] .datamodal-title {
    color: var(--text-primary) !important
}

[data-theme=dark] .datamodal-body {
    background: 0 0 !important
}

.subscription-card {
    background: var(--bg-form-control);
    border-radius: 12px;
    box-shadow: var(--shadow-light);
    padding: 38px 32px 28px;
    max-width: 480px;
    margin: 40px auto 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start
}

.subscription-title {
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 14px
}

.subscription-status {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #10b981;
    margin-bottom: 18px
}

.subscription-status-icon {
    vertical-align: middle
}

.subscription-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 36px;
    width: 100%
}

@media (max-width:600px) {
    .subscription-card {
        padding: 24px 10px;
        max-width: 99vw
    }

    .subscription-fields {
        grid-template-columns: 1fr
    }
}

.form-label {
    color: var(--text-tertiary);
    font-weight: 500;
    margin-bottom: 2px;
    font-size: .97rem
}

.subscription-value {
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 500;
    padding-bottom: 2px;
    word-break: break-all
}

.subscription-actions {
    margin-top: 16px;
    display: flex;
    gap: 18px;
    align-items: center
}

.subscription-license {
    font-size: .98rem;
    color: var(--text-muted);
    margin-top: 16px
}

    .subscription-license a {
        margin-left: 6px
    }

.license-card {
    background: var(--bg-form-control);
    border-radius: 18px;
    box-shadow: var(--shadow-light);
    padding: 26px 28px;
    margin: 32px auto 0;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px
}

.license-card-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.08rem;
    margin-bottom: 2px
}

.license-card-action {
    color: var(--accent-primary);
    font-weight: 500;
    text-decoration: underline;
    font-size: 1.04rem;
    transition: color .18s
}

    .license-card-action:hover {
        color: var(--accent-secondary)
    }

.license-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 16px
}

.license-input {
    font-size: 1.09rem;
    font-weight: 500
}

.license-btn {
    align-self: flex-start;
    margin-top: 2px
}

.license-input-long {
    width: 350px;
    max-width: 100%
}

@media (max-width:600px) {
    .license-input-long {
        width: 100%
    }
}

.custom-analyses-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 700px;
    margin: 40px auto
}

.custom-analysis-card {
    background: var(--bg-form-control);
    border-radius: 24px;
    box-shadow: var(--shadow-light);
    padding: 30px 24px 20px;
    transition: box-shadow .18s,transform .16s;
    position: relative
}

    .custom-analysis-card:hover {
        box-shadow: var(--shadow-medium);
        transform: translateY(-2px) scale(1.01)
    }

.custom-analysis-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    gap: 14px
}

.custom-analysis-title {
    font-size: 1.19rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -.01em
}

.custom-analysis-actions {
    display: flex;
    gap: 10px
}

.icon-btn {
    background: var(--bg-glass);
    border: 0;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: background .18s,color .18s,box-shadow .18s;
    cursor: pointer;
    box-shadow: none;
    font-size: 1.15rem
}

    .icon-btn:hover {
        background: var(--bg-form-control-focus);
        box-shadow: 0 2px 8px var(--shadow-light)
    }

    .icon-btn-danger:hover, .icon-btn:hover {
        color: var(--error-color)
    }

.custom-accordion {
    margin-top: 8px
}

.custom-accordion-title {
    color: var(--accent-primary);
    font-weight: 600;
    font-size: 1.05rem;
    border: 0
}

.custom-accordion-content {
    background: var(--bg-glass-secondary, rgba(255,255,255,0.23));
    border-radius: 18px;
    margin-top: 10px;
    padding: 18px 16px
}

.custom-analysis-analyses, .custom-analysis-headings, .custom-analysis-inferences {
    list-style: none;
    padding-left: 0;
    margin-left: 0
}

    .custom-analysis-analyses > li + li {
        margin-top: 10px
    }

.custom-analysis-name {
    font-size: 1.06rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 3px;
    margin-top: 6px
}

.custom-analysis-heading {
    color: var(--accent-secondary);
    font-size: 1.02rem;
    font-weight: 500;
    margin-top: 4px
}

.custom-analysis-inference {
    color: var(--text-secondary);
    font-size: .98rem;
    margin-left: 14px;
    margin-bottom: 1px
}

.deletemodal-body {
    padding: 36px 34px 26px !important;
    display: flex;
    flex-direction: column;
    gap: 22px
}

.deletemodal-title {
    font-size: 1.22rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: left;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px
}

.deletemodal-done-icon {
    display: inline-flex;
    vertical-align: middle
}

.account-nav li a, .datamodal-content p, .deletemodal-content p {
    color: var(--text-secondary);
    font-size: .9rem
}

.deletemodal-content p {
    line-height: 1.65;
    margin-bottom: 8px
}

.deletemodal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 18px;
    margin-top: 16px
}

    .deletemodal-actions .uk-button {
        font-size: 1.06rem;
        border-radius: 999px !important;
        font-weight: 600;
        min-width: 100px;
        padding: 12px 0 !important;
        letter-spacing: .01em;
        box-shadow: 0 2px 12px 0 rgba(59,130,246,.07)
    }

.uk-button-danger {
    background: #ef4444 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-weight: 600;
    transition: background .15s
}

.uk-button-danger:hover {
    background: #dc2626 !important
}

[data-theme=dark] .deletemodal-body, [data-theme=dark] .deletemodal-title {
    color: var(--text-primary) !important;
    background: 0 0 !important
}

.custom-analyses-header {
    max-width: 700px;
    margin: 0 auto 36px;
    text-align: left
}

.custom-analyses-description {
    color: var(--text-secondary);
    font-size: 1.07rem;
    line-height: 1.6
}

.custom-analyses-desc-muted {
    color: var(--text-muted);
    font-size: .99em
}

.customedit-modal-body {
    padding: 36px 32px 26px !important;
    display: flex;
    flex-direction: column;
    gap: 18px
}

.customedit-modal-title {
    font-size: 1.28rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px
}

.customedit-input {
    margin-bottom: 8px;
    border-radius: 16px;
    font-size: 1.07rem
}

.customedit-select-list {
    background: var(--bg-form-control);
    border-radius: 18px;
    padding: 16px 10px;
    max-height: 40vh;
    overflow-y: auto;
    box-shadow: var(--shadow-light)
}

.account-nav ul, .customedit-analysis-list {
    list-style: none;
    padding-left: 0;
    margin-left: 0
}

.customedit-analysis-list {
    font-size: 1rem
}

.customedit-parent {
    margin-bottom: 10px
}

.customedit-checkbox {
    accent-color: var(--accent-primary);
    margin-right: 7px;
    vertical-align: middle;
    width: 18px;
    height: 18px
}

.customedit-label {
    cursor: pointer;
    font-size: 1.06rem;
    font-weight: 500;
    color: var(--text-primary);
    vertical-align: middle;
    margin-right: 8px
}

.customedit-chevron {
    margin-left: 6px;
    color: var(--accent-primary);
    opacity: .65;
    vertical-align: middle
}

.customedit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 18px;
    margin-top: 16px
}



[data-theme=dark] .customedit-label, [data-theme=dark] .customedit-modal-body, [data-theme=dark] .customedit-modal-title {
    color: var(--text-primary) !important;
    background: 0 0 !important
}

.customAnalysesContainer {
    max-width: 480px;
    margin: 40px auto;
    padding: 0 12px
}

.customAnalysesTitle {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 30px
}

.customedit-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 2px
}

.customedit-label {
    flex: 1 1 auto;
    min-width: 0
}

.customedit-chevron-btn {
    background: 0 0;
    border: 0;
    cursor: pointer;
    padding: 2px 6px;
    display: flex;
    align-items: center;
    color: var(--accent-primary);
    opacity: .7;
    transition: opacity .17s,background .17s;
    margin-left: 4px;
    border-radius: 50%
}

    .customedit-chevron-btn:hover {
        opacity: 1;
        background: var(--bg-form-control-focus)
    }

    .customedit-chevron-btn[aria-expanded=true] span svg {
        transform: rotate(180deg)
    }

.customedit-inference-list {
    margin-left: 36px;
    margin-top: 7px;
    list-style: none;
    padding-left: 0;
    font-size: .98em
}

.account-layout {
    display: flex;
    min-height: 100vh;
    background: var(--bg-gradient);
    padding: 2rem;
    gap: 2rem;
}

.account-nav {
    width: 280px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
    min-height: fit-content;
    position: sticky;
    top: 2rem;
    backdrop-filter: blur(20px);
}

    .account-nav ul {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        padding: 1rem;
        margin: 0;
        list-style: none;
    }

    .account-nav li a {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.5rem 1rem;
        text-decoration: none;
        border-radius: 8px;
        font-weight: 500;
        color: var(--text-secondary);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .account-nav li a:hover, 
    .account-nav li.active a {
        color: var(--text-primary);
        font-weight: 600;
    }

.account-content {
    flex: 1;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    backdrop-filter: blur(20px);
    min-height: fit-content;
    position: relative;
    overflow: hidden;
}

@media (max-width:800px) {
    .account-layout {
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
    }

    .account-nav {
        width: 100%;
        border-radius: 12px;
        min-height: auto;
        position: static;
        top: auto;
    }

    .account-content {
        width: 100%;
        border-radius: 0;
        min-height: auto;
        padding: 0;
    }
}

.account-nav-separator {
    border: 0;
    border-top: .25px solid var(--border-color, #e5e7eb);
    margin: 18px 0 10px 32px;
    width: 80%;
    opacity: .3
}

.note-outer-container {
    max-width: 980px;
    margin: 18px auto 0;
    padding: 8px 10px 22px;
    height: 80vh
}

.note-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px
}

.note-header-title {
    font-size: 1.75rem;
    font-weight: 400;
    margin-bottom: 0
}

.note-header-save {
    font-size: 1.08rem;
    padding: 10px 30px;
    border-radius: 999px;
    box-shadow: var(--shadow-light);
    margin-left: 32px
}

.note-main-layout {
    display: flex;
    gap: 28px;
    align-items: flex-start
}

.note-main {
    flex: 1 1 0;
    min-width: 50%
}

.note-textarea {
    width: 100%;
    min-height: 200px;
    height: 320px;
    font-size: 1.09rem;
    border-radius: 12px;
    margin-bottom: 10px;
    padding: 10px 13px;
    background: var(--bg-form-control) !important;
    color: var(--accent-primary) !important;
    border: 1px solid var(--border-color) !important;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.note-textarea:focus {
    background: var(--bg-form-control-focus) !important;
    border-color: var(--accent-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    color: var(--accent-primary) !important;
}

.note-textarea::placeholder {
    color: var(--placeholder) !important;
}

/* Extra specificity for dark mode */
[data-theme="dark"] .note-textarea,
[data-theme="dark"] .note-textarea:focus {
    color: #60a5fa !important;
    background: #1e223a !important;
}

[data-theme="dark"] .note-textarea:focus {
    background: #282a43 !important;
}

.note-quick-panel {
    flex: 0 0 240px;
    max-width: 560px;
    min-width: 40%;
    background: var(--bg-glass);
    border-radius: 14px;
    box-shadow: var(--shadow-light);
    padding: 14px 10px 10px;
    min-height: 400px
}

.note-quick-tabs {
    gap: 8px;
    margin-bottom: 10px
}

.note-quick-tab {
    padding: 6px 14px;
    font-size: 1rem;
    border-radius: 999px;
    transition: background .16s,color .16s;
    font-weight: 600;
    background: var(--bg-form-control);
    color: var(--text-primary);
    border: 0
}

    .note-quick-tab.active, .note-quick-tab:hover {
        background: var(--accent-gradient);
        color: #fff
    }

.note-quick-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 380px;
    overflow-y: auto
}

.note-quick-btn {
    background: var(--bg-form-control);
    color: var(--text-primary);
    border-radius: 12px;
    padding: 7px 13px;
    border: 0;
    font-size: .99rem;
    box-shadow: 0 1px 3px var(--shadow-light);
    cursor: pointer;
    transition: background .14s,color .14s
}

    .note-quick-btn:focus, .note-quick-btn:hover {
        background: var(--accent-gradient);
        color: #fff
    }

.note-actions-row {
    display: flex;
    gap: 8px;
    margin-top: 2px
}

.note-action-btn {
    font-size: .98rem;
    padding: 6px 16px !important;
    border-radius: 999px !important
}

@media (max-width:950px) {
    .note-main-layout {
        flex-direction: column;
        gap: 18px
    }

    .note-main, .note-quick-panel {
        max-width: 100%;
        min-width: 0
    }

    .note-quick-panel {
        margin-top: 12px
    }

    .note-textarea {
        min-height: 130px;
        height: 180px
    }
}

.modal-card,  {
    width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: auto
}

.modal-card {
    max-height: 94vh
}

.modal-stage-group {
    display: flex;
    gap: 9px;
    margin-bottom: 8px;
    justify-content: flex-start
}

.btn-pill {
    min-width: 98px;
    max-width: 100%;
    margin-bottom: 7px;
    white-space: nowrap
}

.modal-input {
    min-width: 0;
    box-sizing: border-box
}

@media (max-width:600px) {
    .modal-card {
        max-width: 98vw !important;
        min-width: 0 !important;
        border-radius: 12px !important;
        padding: 0 !important
    }

    .modal-card-body {
        padding: 12px 17px !important
    }

    .btn-pill {
        min-width: 80px;
        font-size: .98rem;
        padding: 7px 8px !important
    }

    te .modal-stage-group {
        gap: 6px
    }
}

.pill-toggle {
    border-radius: 999px;
    padding: 10px 10px;
    margin-bottom: 7px;
    background: var(--bg-form-control, #f4f6fa);
    color: var(--accent-primary, #2563eb);
    border: 2px solid var(--accent-primary, #3b82f6);
    font-weight: 600;
    font-size: 1rem;
    outline: 0;
    cursor: pointer;
    transition: background .13s,color .13s,border .13s;
    box-shadow: none
}

    .pill-toggle:not(.pill-toggle-selected):hover {
        background: var(--bg-form-control-focus, #e5e7eb);
        color: var(--accent-secondary, #60a5fa)
    }

    .pill-toggle-selected, .pill-toggle:active.pill-toggle-selected {
        background: var(--accent-gradient, #3b82f6);
        color: #fff;
        border: 2px solid var(--accent-primary, #3b82f6)
    }

.add-photos-center, .add-photos-layout {
    display: flex;
    flex-direction: column;
    align-items: center
}

.add-photos-layout {
    max-width: 700px;
    margin: 40px auto 0
}

.add-photos-center {
    width: 100%;
    background: var(--bg-glass, #f7fafd);
    border-radius: 22px;
    box-shadow: var(--shadow-light);
    padding: 38px 32px 32px
}

#uppy-dashboard {
    width: 100%;
    max-width: 650px;
    min-height: 240px;
    margin: 0 auto
}

.add-photos-actions {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 16px
}

.btn-outline-primary {
    border: 2px solid var(--accent-primary, #3b82f6);
    color: var(--accent-primary, #2563eb);
    background: 0 0;
    cursor: pointer
}

    .btn-outline-primary:hover {
        background: var(--accent-primary, #2563eb)
    }

.btn-primary {
    cursor: pointer
}

    .btn-primary:disabled {
        opacity: .6;
        cursor: not-allowed
    }

.add-photos-modern-layout {
    max-width: 800px;
    margin: 8px auto 0;
    padding: 20px 16px 24px;
    display: flex;
    flex-direction: column;
    align-items: stretch
}

.add-photos-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px
}

.add-photos-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0;
    letter-spacing: -.01em
}

.add-photos-upload-btn {
    font-size: 1.08rem;
    padding: 10px 32px;
    border-radius: 999px;
    box-shadow: var(--shadow-light);
    margin-left: 32px;
    white-space: nowrap
}

.add-photos-uppy-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: var(--shadow-light);
    min-height: 280px;
    padding: 24px 20px 24px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center
}

@media (max-width:900px) {
    .add-photos-modern-layout {
        max-width: 99vw;
        padding: 12px 4px 18px
    }

    .add-photos-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px
    }

    .add-photos-title {
        font-size: 1.35rem
    }

    .add-photos-upload-btn {
        margin-left: 0;
        font-size: 1rem;
        padding: 9px 22px
    }

    .add-photos-uppy-card {
        padding: 16px 8px 16px;
        border-radius: 12px;
        min-height: 220px;
    }

    #uppy-dashboard {
        max-width: 99vw
    }
}

.uppy-Dashboard-inner {
    background-color: var(--uppy-bg) !important;
    border: var(--uppy-dashboard-border) !important
}

.uppy-Dashboard-actions .uppy-u-reset.uppy-c-btn {
    background-color: var(--uppy-btn-bg) !important;
    color: var(--uppy-btn-color) !important;
    font-size: 12px;
    border-radius: 5px;
    border: 0 !important
}

    .uppy-Dashboard-actions .uppy-u-reset.uppy-c-btn:hover {
        background-color: var(--uppy-btn-hover) !important;
        color: var(--uppy-btn-color) !important
    }

.folders-tabs-row {
    margin-top: 18px;
    flex-wrap: wrap
}

.new-folder-btn {
    border-radius: 999px !important
}

.folders-tab-pane {
    animation: fadein .27s
}

.folders-grid {
    max-width: 1000px;
    margin: 0 auto
}

.folder-card {
    width: 100%
}

.folder-card-avatar-leftnav {
    display: flex;
    align-items: center; /* Vertically centers children */
    gap: 7px; 
    padding: 0px 0;
}

.folder-card-avatar-leftnav img {
    width: 32px;
    height: 32px;
    border-radius: 50%; /* Makes the avatar circular */
    object-fit: cover;
}

.folder-card-name-leftNav {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: .9rem;
    cursor: pointer;
    text-align: left;
}

.folder-card-avatar img {
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(100,110,170,.06);
    margin-bottom: 10px;
    width: 62px;
    height: 62px;
    border-radius: 50%
}

@media (max-width:900px) {
    .folders-grid {
        grid-template-columns: 1fr;
        gap: 18px
    }
}

.saved-folders-container {
    max-width: 1100px;
    margin: 40px auto 0;
    padding: 40px 30px 50px;
    background: var(--bg-glass, #f7fafd);
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(60,100,200,.1),0 1.5px 10px rgba(96,165,250,.06);
    min-height: 540px;
    display: flex;
    flex-direction: column;
    gap: 28px
}

@media (max-width:900px) {
    .saved-folders-container {
        max-width: 99vw;
        padding: 16px 3vw 24px;
        border-radius: 14px
    }
}

.saved-folders-outer {
    max-width: 1100px;
    margin: 44px auto 0;
    padding: 0 0 48px
}

.saved-folders-title-row {
    margin-left: 38px;
    margin-bottom: 14px
}

.saved-folders-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -.01em
}

.saved-folders-card {
    background: var(--bg-glass, #fff);
    border-radius: 26px;
    box-shadow: 0 8px 32px rgba(60,100,200,.08),0 1.5px 10px rgba(96,165,250,.06);
    min-height: 420px;
    padding: 34px 42px 48px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: stretch
}

.folders-tabs-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    margin-left: 6px
}

.folder-tab-btn {
    background: var(--bg-form-control, #f4f6fa);
    color: var(--text-primary);
    border: 0;
    border-radius: 9px;
    padding: 10px 25px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    margin-right: 2px;
    transition: background .17s,color .17s
}

    .folder-tab-btn:hover {
        background: var(--accent-gradient, #3b82f6);
        color: #fff
    }

.new-folder-btn {
    margin-left: auto
}

.folders-grid {
    justify-items: center
}

.folder-card:hover {
    box-shadow: 0 8px 32px rgba(60,100,200,.13),0 1.5px 10px rgba(96,165,250,.09)
}

.faves-heading {
    margin-bottom: 4px; /* Reduce spacing under heading */
    font-weight: 600;
    font-size: .9rem;
}

.faves-list {
    margin-top: 0; /* Remove spacing above the list */
    padding-left: 0; /* Optional: Remove indent */
}

.folder-card-delete {
    position: absolute;
    top: 18px;
    right: 16px;
    background: 0 0;
    border: 0;
    color: var(--accent-primary, #2563eb);
    cursor: pointer;
    font-size: 1.14rem;
    opacity: .75;
    transition: color .15s,opacity .15s
}

    .folder-card-delete:hover {
        color: #ef4444;
        opacity: 1
    }

.folder-card-favorite {
    position: absolute;
    top: 18px;
    left: 16px;
    background: 0 0;
    border: 0;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    font-size: 1.14rem;
    opacity: .75;
    transition: color .15s, opacity .15s
}

.folder-card-favorite2 {
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    font-size: 1.14rem;
    opacity: .75;
    transition: color .15s, opacity .15s;
    padding:3px;
}

.folder-card-favorite:hover {
    color: var(--accent-primary, #2563eb);
    opacity: 1
}

.folder-card-favorite.favorite-active {
    color: #fbbf24;
    opacity: 1
}

.folder-card-favorite2.favorite-active {
    color: #fbbf24;
    opacity: 1
}

.folder-card-favorite.favorite-active:hover {
    color: #f59e0b
}

.folder-card-favorite2.favorite-active:hover {
    color: #f59e0b
}

.folder-card-name {
    background: 0 0;
    border: 0;
    color: var(--text-primary);
    font-size: 1.19rem;
    font-weight: 600;
    margin-top: 2px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    text-transform: capitalize;
    transition: color .16s
}

.folder-card-name:hover {
    color: var(--accent-primary, #2563eb)
}

@media (max-width:900px) {
    .saved-folders-card {
        padding: 14px 3vw 22px
    }

    .folders-grid {
        grid-template-columns: 1fr;
        gap: 16px
    }

    .saved-folders-title-row {
        margin-left: 8px
    }
}

.folder-tab-btn.folder-tab-active {
    background: var(--accent-gradient, #3b82f6);
    color: #fff
}

.folders-layout {
    max-width: 1100px;
    margin: 44px auto 0;
    display: flex;
    min-height: 600px;
    gap: 0;
    border-radius: 30px;
    background: var(--bg-glass, #fff);
    box-shadow: 0 8px 32px rgba(60,100,200,.1),0 1.5px 10px rgba(96,165,250,.06)
}

.folders-content-pane {
    flex: 1 1 0;
    padding: 38px 38px 44px;
    display: flex;
    flex-direction: column;
    min-width: 0
}

.folders-content-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 22px
}

.new-folder-btn {
    font-size: 1.09rem;
    padding: 11px 34px;
    font-weight: 700
}

.folders-tab-content {
    width: 100%
}

.folders-tab-pane {
    display: none
}

    .folders-tab-pane.folders-tab-pane-active {
        display: block
    }

.folders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 34px;
    justify-content: start;
    align-items: start;
    width: 100%;
    padding-top: 8px
}

.folder-card {
    background: var(--bg-glass, #fff);
    border-radius: 12px;
    box-shadow: var(--shadow-light);
    position: relative;
    padding: 32px 14px 24px;
    min-width: 170px;
    max-width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 170px;
    transition: box-shadow .17s
}

@media (max-width:900px) {
    .folders-layout {
        flex-direction: column;
        max-width: 99vw
    }

    .folders-index-nav {
        flex-direction: row;
        gap: 3px;
        justify-content: center;
        align-items: flex-start;
        padding: 12px 6px;
        min-width: 0
    }

    .folders-content-pane {
        padding: 20px 4vw
    }

    .folders-grid {
        gap: 12px
    }
}

.aside-right {
    width: 220px;
    background: var(--bg-form-control);
    box-shadow: var(--shadow-light);
    padding: 36px;
    margin-right: 31px
}

.folders-index-nav {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 9px;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 38px 20px 0;
    min-width: 0;
    max-width: 100%;
    background: 0 0
}

.folder-index-btn {
    background: var(--bg-form-control, #f4f6fa);
    color: var(--text-primary);
    border: 0;
    border-radius: 12px;
    padding: 12px 22px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s,color .18s;
    margin-bottom: 0;
    width: auto;
    text-align: center;
    min-width: 32px;
    margin-right: 0
}

.folder-index-btn.folder-index-active, .folder-index-btn:hover {
    color:var(--text-link-hover);
    background:var(--bg-glass-secondary)
}

.modal-input {
    width: 100%;
    border-radius: 8px;
    font-size: 1.05rem;
    margin-bottom: 18px;
    padding: 10px 13px;
    box-shadow: var(--shadow-light);
    border: 1.5px solid var(--border-color, #e5e7eb);
    background: var(--bg-form-control, #f7fafd)
}

.modal-title {
    margin-bottom: 0
}

.modal-success-icon {
    margin-bottom: 6px;
    color: #23c16b;
    display: flex;
    justify-content: center
}

.modal-success-message {
    font-size: 1.05rem;
    color: var(--text-primary);
    text-align: center
}

.modal-warning-message {
    font-size: 1.05rem;
    color: var(--accent-primary, #f59e42);
    text-align: center
}

.btn-primary {
    background: var(--accent-gradient, #3b82f6)
}

    .btn-primary:hover {
        background: var(--accent-gradient-hover, #2563eb)
    }

[data-theme=dark] .modal-card {
    box-shadow: 0 8px 40px 0 rgba(30,34,70,.39),0 1.5px 10px 0 rgba(59,130,246,.13)
}

.profile-avatar {
    background: #eee
}

.profile-main-info {
    display: flex;
    flex-direction: column;
    gap: 7px
}

.profile-name {
    font-size: 2rem;
    color: var(--text-primary)
}

.profile-meta {
    font-size: 1.01rem;
    display: flex;
    gap: 26px;
    flex-wrap: wrap
}

.profile-meta-label {
    color: #a5adc4;
    font-weight: 600;
    margin-right: 4px
}

.profile-meta-value {
    font-weight: 500
}

.profile-save-btn {
    margin-top: 12px
}

@media (max-width:900px) {
    .profile-details-card, .profile-header-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 8px;
        gap: 20px
    }

    .profile-details-row {
        flex-direction: column;
        gap: 10px
    }
}

[data-theme=dark] .flatpickr-calendar {
    background: #23242d
}

[data-theme=dark] .flatpickr-months, [data-theme=dark] .flatpickr-weekdays {
    background: #1a1b22
}

[data-theme=dark] .flatpickr-day.today {
    background: #3b82f6
}

[data-theme=dark] .flatpickr-calendar {
    background: rgba(36,38,58,.98);
    background: rgba(38,40,57,.95) !important;
    box-shadow: 0 8px 32px rgba(30,40,80,.21),0 1.5px 10px rgba(59,130,246,.1) !important;
    border-radius: 18px !important;
    color: #e2e8f0 !important;
    border: 0 !important
}

[data-theme=dark] .flatpickr-months, [data-theme=dark] .flatpickr-weekdays {
    background: 0 0 !important;
    color: #fff !important;
    font-weight: 700 !important
}

[data-theme=dark] .flatpickr-day {
    background: 0 0 !important;
    color: #e2e8f0 !important;
    border-radius: 10px !important
}

    [data-theme=dark] .flatpickr-day:focus, [data-theme=dark] .flatpickr-day:hover {
        background: #3b82f6 !important;
        color: #fff !important
    }

    [data-theme=dark] .flatpickr-day.selected, [data-theme=dark] .flatpickr-day.today {
        background: linear-gradient(135deg,#3b82f6 0,#60a5fa 100%) !important;
        color: #fff !important;
        box-shadow: 0 0 0 2px #60a5fa40
    }

[data-theme=dark] .flatpickr-current-month input.cur-year, [data-theme=dark] .flatpickr-monthDropdown-months {
    background: #232436 !important;
    color: #fff !important;
    border-radius: 8px !important;
    border: 0 !important
}

[data-theme=dark] .flatpickr-next-month, [data-theme=dark] .flatpickr-prev-month {
    color: #90cdf4 !important
}

[data-theme=dark] .flatpickr-calendar {
    backdrop-filter: blur(14px) saturate(120%)
}

.profile-header-card {
    justify-content: space-between;
    gap: 32px
}

.profile-avatar-block {
    flex-shrink: 0
}

.profile-main-info {
    flex: 1 1 0;
    min-width: 0
}

.profile-action-btns {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.profile-details-card {
    background: var(--bg-form-control, #f7fafd);
    border-radius: 12px;
    box-shadow: var(--shadow-light);
    padding: 28px 32px;
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px
}

.profile-details-columns {
    display: flex;
    gap: 38px
}

.profile-details-left, .profile-details-right {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    gap: 16px
}

.profile-details-right {
    gap: 12px;
    min-width: 240px
}

.profile-save-btn {
    margin-left: auto;
    font-size: 1.11rem;
    border-radius: 999px;
    padding: 12px 38px;
    font-weight: 700
}

@media (max-width:900px) {
    .profile-details-columns {
        flex-direction: column;
        gap: 20px
    }

    .profile-details-left, .profile-details-right {
        min-width: 0
    }

    .profile-details-row {
        flex-direction: column;
        gap: 10px
    }

        .profile-details-row > div {
            max-width: 100%
        }
}

.profile-details-row {
    display: flex;
    gap: 20px;
    margin-bottom: 0;
    flex-wrap: wrap
}

    .profile-details-row > div {
        flex: 1 1 220px;
        max-width: 300px;
        min-width: 130px
    }

.case-history-tabs-content {
    background: var(--bg-glass, #fff);
    border-radius: 0 0 18px 18px;
    box-shadow: var(--shadow-light);
    min-height: 60vh
}

.case-placeholder {
    color: #a6adc8;
    font-style: italic;
    margin-top: 18px
}

.case-history-form {
    background: var(--bg-glass, #fff);
    border-radius: 22px;
    box-shadow: 0 8px 32px rgba(60,100,200,.1),0 1.5px 10px rgba(96,165,250,.06);
    padding: 38px 38px 24px;
    margin: 0 auto 30px;
    max-width: 1240px;
    display: flex;
    flex-direction: column;
    gap: 18px
}

.case-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0
}

.case-history-title {
    font-size: 1.48rem;
    font-weight: 800;
    margin-bottom: 0;
    color: var(--text-primary)
}

.case-save-btn {
    font-size: 1.06rem;
    border-radius: 999px;
    padding: 10px 32px;
    font-weight: 700;
    margin-left: auto
}

.case-history-tabs-row {
    display: flex;
    gap: 12px;
    margin-bottom: 0;
    margin-top: 20px
}

.case-history-tab {
    background: var(--bg-form-control, #f4f6fa);
    color: var(--text-primary);
    border: 0;
    border-radius: 12px 12px 0 0;
    padding: 11px 32px;
    font-size: 1.08rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s,color .18s
}

    .case-history-tab.active, .case-history-tab:hover {
        background: var(--accent-gradient, #3b82f6);
        color: #fff
    }

.case-history-tabs-content {
    background: 0 0;
    padding: 0
}

.case-tab-pane {
    display: none
}

    .case-tab-pane.active, .slideshow-button svg {
        display: block
    }

.case-section-card {
    padding: 38px 38px 24px;
    margin: 0 auto 30px;
    max-width: 1240px;
    display: flex;
    flex-direction: column;
    gap: 18px
}

.case-section-title-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 18px
}

.case-section-title {
    font-size: 1.38rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -.02em
}

.case-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
    gap: 32px 24px;
    margin-bottom: 24px
}

.form-control, .form-select {
    background: var(--bg-form-control, #f7fafd);
    border-radius: 12px;
    font-size: 1rem;
    border: 1.5px solid var(--border-color, #e5e7eb);
    box-shadow: var(--shadow-light);
    color: var(--text-primary);
    padding: 11px 14px;
    margin-top: 7px
}

    .form-control:focus, .form-select:focus {
        outline: 0;
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px #60a5fa40
    }

.case-section-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px
}

.case-section-save-btn {
    font-size: 1.04rem;
    border-radius: 999px;
    padding: 10px 32px;
    font-weight: 700
}

.input-group {
    width: 100%
}

    .input-group .form-control {
        width: 60px;
        min-width: 0;
        height: 44px;
        font-size: 1.18rem;
        padding-top: 0;
        padding-bottom: 0
    }

.input-group-text {
    border-radius: 0 10px 10px 0;
    min-width: 44px;
    padding-left: 16px;
    padding-right: 16px;
    background: #eceff4;
    color: #7b849b;
    font-weight: 600;
    border-left: none
}

.input-group {
    display: flex;
    align-items: center;
    max-width: 150px
}

    .input-group .form-control, .input-group .input-group-text {
        min-height: 44px;
        box-sizing: border-box;
        line-height: 1.3
    }

    .input-group .form-control {
        border-radius: 10px 0 0 10px;
        text-align: right
    }

    .input-group .input-group-text {
        display: flex;
        align-items: center;
        border-radius: 0 10px 10px 0;
        background: #eceff4;
        color: #7b849b;
        font-weight: 700;
        border-left: none;
        min-width: 46px;
        padding: 0 .85em;
        font-size: 1.18rem;
        height: 44px;
        margin-left: -3px
    }

.case-grid-2 {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 32px 28px;
    margin-bottom: 24px
}

@media (max-width:900px) {
    .case-grid-2 {
        grid-template-columns: 1fr
    }
}

.notes-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 12px
}

.note-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: var(--bg-glass, #fff);
    border-radius: 12px;
    box-shadow: var(--shadow-light);
    padding: 22px 28px 18px;
    gap: 16px;
    position: relative;
    transition: box-shadow .16s
}

    .note-card:hover {
        box-shadow: 0 8px 32px rgba(60,100,200,.14),0 1.5px 10px rgba(96,165,250,.1)
    }

.note-card-content {
    flex: 1 1 0;
    min-width: 0
}

.note-meta {
    font-size: .97rem;
    color: #8b98b7;
    margin-bottom: 7px;
    font-weight: 600
}

.note-text {
    font-size: 1.09rem;
    color: var(--text-primary);
    white-space: pre-line;
    word-break: break-word
}

.note-delete-btn {
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 12px;
    margin-top: 2px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    color: var(--text-tertiary);
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: 0.875rem;
}

    .note-delete-btn:hover {
        background: var(--error-color);
        color: white;
        border-color: var(--error-color);
        transform: scale(1.05);
        box-shadow: var(--shadow-light);
    }

    .note-delete-btn [uk-icon] {
        width: 18px !important;
        height: 18px !important;
    }

    .note-delete-btn:active {
        transform: scale(0.95);
    }

.notes-empty-msg {
    color: #a0aac3;
    text-align: center;
    margin-top: 28px;
    font-size: 1.11rem
}

.note-collapsible {
    max-height: 6.4em;
    overflow: hidden;
    position: relative;
    transition: max-height .25s;
    mask-image: linear-gradient(to bottom,#fff 80%,transparent 100%)
}

.note-card.expanded .note-collapsible {
    max-height: 100em;
    mask-image: none
}

.note-toggle-btn {
    background: 0 0;
    color: #3b82f6;
    font-weight: 700;
    border: 0;
    padding: 0;
    margin-top: 10px;
    cursor: pointer;
    transition: color .14s;
    font-size: 1.02rem
}

.note-card:not(.expandable) .note-toggle-btn {
    display: none
}

.modal-card {
    background: var(--bg-glass, #fff);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(60,100,200,.12),0 1.5px 10px rgba(96,165,250,.08);
    max-width: 390px;
    min-width: 260px;
    padding: 0;
    overflow: hidden;
    position: relative;
    border: 0
}

.modal-card-body {
    padding: 34px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center
}

.modal-title {
    font-size: 1.17rem;
    font-weight: 800;
    color: var(--text-primary);
    text-align: center
}

.modal-divider {
    border-top: 1.5px solid var(--border-color, #e5e7eb);
    margin: 12px 0 6px;
    width:100%;
}

.modal-section p {
    color: #43495a;
    font-size: 1.04rem;
    text-align: center
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    width: 100%;
    margin-top: 22px
}

.btn-pill {
    border-radius: 999px !important;
    font-size: 1rem;
    font-weight: 600;
    padding: 8px 32px !important;
    border: 0;
    outline: 0;
    transition: background .15s,color .15s;
    box-shadow: 0 2px 8px rgba(100,110,170,.03);
    cursor: pointer
}

.btn-secondary {
    background: var(--bg-form-control, #f4f6fa)
}

    .btn-secondary:hover {
        background: var(--bg-form-control-focus, #e5e7eb);
        color: var(--accent-primary, #3b82f6)
    }

.btn-danger {
    background: #ff445c;
    color: #fff
}

.btn-danger:hover {
    background: #d71a40;
    color: #fff
}


[data-theme=dark] .modal-card {
    background: rgba(30,32,56,.97) !important;
    color: var(--text-primary) !important
}

.photos-gallery-grouped {
    display: flex;
    flex-direction: column;
    gap: 34px;
    margin-top: 20px
}

.photo-group-card {
    background: var(--bg-glass, #fff);
    border-radius: 12px;
    box-shadow: var(--shadow-light);
    padding: 30px 32px 16px;
    margin-bottom: 10px
}

.photo-group-title {
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--accent-primary, #3b82f6);
    margin-bottom: 18px;
    letter-spacing: .01em
}

.photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(132px,1fr));
    gap: 24px 18px
}

.photo-thumb-card {
    background: #f7fafd;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(130,140,180,.06);
    transition: box-shadow .14s
}

    .photo-thumb-card:hover {
        box-shadow: 0 6px 28px rgba(59,130,246,.1),0 1.5px 10px rgba(96,165,250,.13)
    }

.photo-thumb-card, .photo-thumb-img-wrap {
    position: relative;
    overflow: hidden
}

.photo-thumb-img {
    width: 100%;
    height: 112px;
    object-fit: cover;
    display: block;
    border-radius: 12px 12px 0 0;
    transition: transform .16s
}

.photo-thumb-card:hover .photo-thumb-img {
    transform: scale(1.04)
}

.photo-thumb-delete {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(243,78,91,.14);
    color: #f34e5b;
    border: 0;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .78;
    transition: background .12s,opacity .12s;
    cursor: pointer;
    z-index: 1
}

    .photo-thumb-delete:hover {
        background: #f34e5b;
        color: #fff;
        opacity: 1
    }

.photos-empty-msg {
    margin-top: 32px
}

.modal-photo-dialog {
    background: rgba(255,255,255,.98)
}

[data-theme=dark] .modal-photo-dialog {
    background: rgba(20,22,34,.98)
}

.modal-photo-close {
    background: rgba(255,255,255,.6)
}

.slideshow-button {
    color: #3b82f6;
    background: rgba(255,255,255,.8);
    font-size: 2.2rem
}

    .slideshow-button:hover {
        color: #fff;
        background: #3b82f6;
        box-shadow: 0 4px 24px #3b82f655
    }

.slideshow-caption {
    background: rgba(30,32,50,.64);
    transition: background .16s
}

@media (max-width:900px) {
    .modal-photo-dialog {
        width: 97vw;
        height: 96vh
    }

    .slideshow-item {
        max-height: 54vh;
        max-width: 94vw
    }

    .slideshow-caption {
        padding: 10px 8px;
        font-size: 1rem
    }
}

.modal-photo-container, .modal-photo-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.modal-photo-dialog {
    height: 92vh;
    width: 86vw;
    background: rgba(30,32,54,.97);
    border-radius: 18px;
    box-shadow: 0 12px 60px rgba(40,50,90,.19);
    padding: 0;
    overflow: visible
}

.modal-photo-container {
    width: 100%;
    height: 100%;
    gap: 0
}

.modal-photo-inner {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    flex-direction: column
}

.slideshow-item {
    max-width: 74vw;
    border-radius: 14px;
    box-shadow: 0 2px 28px rgba(80,120,180,.18);
    background: #14192b;
    transition: box-shadow .14s
}

.slideshow-caption {
    background: rgba(34,38,64,.88);
    color: #fff;
    padding: 14px 32px;
    border-radius: 0 0 14px 14px;
    font-size: 1.11rem;
    min-height: 36px;
    width: 100%;
    margin-top: -18px;
    box-shadow: 0 6px 18px rgba(40,50,70,.13);
    text-align: center;
    letter-spacing: .01em;
    display: flex;
    align-items: center;
    justify-content: center
}

.modal-photo-close, .slideshow-button {
    border-radius: 50%;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.slideshow-button {
    background: rgba(30,40,80,.16);
    box-shadow: 0 2px 12px rgba(59,130,246,.17);
    width: 54px;
    height: 54px;
    min-width: 54px;
    min-height: 54px;
    margin: 0 18px;
    padding: 0;
    cursor: pointer;
    position: relative;
    z-index: 4;
    transition: background .14s,box-shadow .14s
}

.modal-photo-close {
    position: absolute;
    top: 26px;
    right: 34px;
    background: rgba(255,255,255,.13);
    width: 48px;
    height: 48px;
    color: #fff;
    font-size: 2.2rem;
    box-shadow: 0 2px 10px rgba(60,70,100,.14);
    opacity: .82;
    z-index: 10;
    transition: background .16s,color .14s,opacity .16s
}

    .modal-photo-close:hover {
        background: #ff445c;
        color: #fff;
        opacity: 1
    }

@media (max-width:900px) {
    .modal-photo-dialog {
        width: 99vw;
        height: 99vh
    }

    .slideshow-item {
        max-height: 56vh;
        max-width: 96vw
    }

    .slideshow-caption {
        padding: 8px 5px;
        font-size: 1rem
    }

    .modal-photo-close {
        top: 10px;
        right: 12px
    }
}

.modal-photo-inner{
    display: flex;
    align-items: center;
    justify-content: center
}

.modal-photo-inner {
    width: 100%;
    height: 100%
}

.slideshow-item {
    max-width: 100%;
    max-height: 96vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto
}

.analyses-gallery-grouped {
    display: flex;
    flex-direction: column;
    gap: 38px;
    margin-top: 12px
}

.analysis-group-card {
    background: var(--bg-glass, #fff);
    border-radius: 12px;
    box-shadow: var(--shadow-light);
    padding: 30px 32px 20px;
    margin-bottom: 10px
}

.analysis-group-title {
    font-size: 1.14rem;
    font-weight: 700;
    color: var(--accent-primary, #3b82f6);
    margin-bottom: 20px;
    letter-spacing: .01em
}

.analyses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
    gap: 24px 18px
}

.analysis-thumb-card {
    background: #f7fafd;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(130,140,180,.08);
    overflow: hidden;
    transition: box-shadow .15s,transform .13s;
    position: relative;
    max-width: 250px
}

    .analysis-thumb-card:hover, .super-thumb-card:hover {
        box-shadow: 0 6px 28px #3b82f655;
        transform: translateY(-4px) scale(1.03)
    }

.analysis-thumb-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit
}

.analysis-thumb-img {
    width: 100%;
    height: 108px;
    object-fit: cover;
    display: block;
    border-radius: 12px 12px 0 0;
    transition: filter .15s
}

.analysis-thumb-card:hover .analysis-thumb-img {
    filter: brightness(.92) saturate(1.11)
}

.analysis-thumb-body {
    padding: 10px 7px 9px;
    text-align: center;
    background: 0 0
}

.analysis-type {
    font-weight: 700;
    font-size: 1.03rem;
    color: #346
}

.analysis-stage {
    font-size: .98rem;
    color: #8792ad;
    margin-left: 6px;
    font-weight: 500
}

.analyses-empty-msg {
    margin-top: 34px
}

.super-gallery-grouped {
    display: flex;
    flex-direction: column;
    gap: 38px;
    margin-top: 10px
}

.super-group-card {
    background: var(--bg-glass, #fff);
    border-radius: 12px;
    box-shadow: var(--shadow-light);
    padding: 30px 32px 20px;
    margin-bottom: 12px
}

.super-group-title {
    font-size: 1.14rem;
    font-weight: 700;
    color: var(--accent-primary, #3b82f6);
    margin-bottom: 20px;
    letter-spacing: .01em
}

.super-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
    gap: 24px 18px
}

.super-thumb-card {
    background: #f7fafd;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(130,140,180,.08);
    overflow: hidden;
    transition: box-shadow .15s,transform .13s;
    position: relative
}

.super-thumb-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit
}

.super-thumb-img {
    width: 100%;
    height: 108px;
    object-fit: cover;
    display: block;
    border-radius: 12px 12px 0 0;
    transition: filter .15s
}

.super-thumb-card:hover .super-thumb-img {
    filter: brightness(.92) saturate(1.09)
}

.super-thumb-body {
    padding: 10px 7px 9px;
    text-align: center;
    background: 0 0
}

.super-type {
    font-weight: 700;
    font-size: 1.04rem;
    color: #354366
}

.super-empty-msg {
    color: #a0aac3;
    text-align: center;
    margin-top: 32px;
    font-size: 1.12rem
}

.profile-header-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px;
    text-align: center;
    margin-bottom: 16px;
    border-radius: 0
}

.profile-avatar-block {
    margin-bottom: 0
}

.profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #f3f4f6;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    transition: transform .2s ease,box-shadow .2s ease
}

    .profile-avatar:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(0,0,0,.15)
    }

.profile-main-info {
    width: 100%
}

.profile-name {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    word-wrap: break-word
}

@media (max-width:768px) {
    .profile-header-card {
        padding: 16px 12px
    }

    .profile-avatar {
        width: 56px;
        height: 56px
    }

    .profile-name {
        font-size: 15px
    }
}

.case-summary-row-focus {
    background: #f6fafd;
    font-weight: 600;
    border-radius: 12px 12px 0 0
}

.case-summary-edit-inline {
    margin-left: 10px;
    color: #3b82f6;
    opacity: .7;
    transition: opacity .15s
}

.case-summary-row-focus .case-summary-edit-inline {
    opacity: 1
}

.case-summary-edit-inline:hover {
    opacity: 1;
    color: #2563eb
}

@media (max-width:600px) {
    .case-summary-card {
        max-width: 99vw
    }

    .case-summary-divider, .case-summary-header, .case-summary-row {
        padding-left: 13px;
        padding-right: 13px
    }
}

.case-summary-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: var(--shadow-light);
    margin: 0 auto 2rem;
    padding: 0 0 1rem;
    transition: all 0.3s ease;
    position: relative;
    backdrop-filter: blur(20px);
}

.case-summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--accent-gradient);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.case-summary-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
    border-color: var(--accent-primary);
}

.case-summary-card:hover::before {
    opacity: 0.02;
}

.case-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px 8px
}

.case-summary-title {
    font-size: 1.38rem;
    font-weight: 800;
    color: #232b3a
}

.case-summary-edit {
    border: 2.5px dashed #3b82f6;
    border-radius: 12px;
    background: rgba(59,130,246,.06);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    transition: border-color .14s,background .14s
}

    .case-summary-edit:hover {
        background: #3b82f6;
        color: #fff;
        border-color: #2563eb
    }

.case-summary-divider {
    border-top: 2px solid #f2f4fa;
    margin: 0 28px
}

.case-summary-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 9px 14px;
    font-size: .93rem;
    border-bottom: 1.6px solid #f2f4fa;
    background: 0 0;
    transition: background .11s
}

.case-summary-label {
    color: #5d667a;
    font-weight: 500;
    flex: 1 1 0;
    margin-right: 16px;
    white-space: nowrap
}

.case-summary-value {
    color: #212e3e;
    margin-left: auto;
    text-align: right
}

@media (max-width:1200px) {
    .dashboard-cards-grid {
        grid-template-areas: "photos      casehistory""superimpose casehistory""analyses    notes";
        grid-template-columns: 1.5fr 1fr;
        grid-template-rows: 220px 180px auto
    }
}

@media (max-width:900px) {
    .dashboard-cards-grid {
        display: flex;
        flex-direction: column;
        gap: 24px
    }

        .dashboard-cards-grid > div {
            width: 100%
        }
}

.photos-card-header {
    padding: 22px 28px 8px;
    display: flex;
    align-items: center
}

.photos-title {
    font-size: 1.32rem;
    font-weight: 800;
    color: #232b3a
}

.photos-divider {
    border-top: 2px solid #f2f4fa;
    margin: 0 28px
}

.photos-carousel {
    height: 240px
}

.photos-dot, .slideshow-dots span {
    background: #e1e6f4;
    border-radius: 50%;
    cursor: pointer
}

.photos-dot {
    display: block;
    width: 10px;
    height: 10px;
    transition: background .16s,box-shadow .16s;
    border: 2px solid #e1e6f4
}

    .photos-dot.active {
        background: #3b82f6;
        border-color: #3b82f6;
        box-shadow: 0 2px 10px #3b82f655
    }

.photos-empty-msg {
    width: 100%;
    text-align: center;
    color: #a0aac3;
    padding-top: 65px;
    font-size: 1.1rem
}

[data-theme=dark] .case-summary-card, [data-theme=dark] .photos-card {
    background: rgba(24,26,36,.98) !important
}

[data-theme=dark] .case-summary-divider, [data-theme=dark] .photos-divider {
    border-top: 2px solid #31334a
}

[data-theme=dark] .case-summary-title, [data-theme=dark] .photos-title {
    color: #f3f6fa
}

[data-theme=dark] .case-summary-label {
    color: #aeb3c6
}

[data-theme=dark] .case-summary-value {
    color: #fff
}

[data-theme=dark] .case-summary-row {
    border-bottom: 1.4px solid #23253b;
    background: 0 0
}

[data-theme=dark] .photos-card-header {
    color: #fafbff
}

[data-theme=dark] .photos-dot {
    background: #394059;
    border-color: #394059
}

    [data-theme=dark] .photos-dot.active {
        background: #3b82f6;
        border-color: #3b82f6
    }

[data-theme=dark] .case-summary-row, [data-theme=dark] .photos-empty-msg {
    color: #aeb3c6
}

.analyses-card, .slideshow-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: var(--shadow-light);
    overflow: hidden;
    min-height: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    position: relative;
    backdrop-filter: blur(20px);
}

.analyses-card::before, .slideshow-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--accent-gradient);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.analyses-card:hover, .slideshow-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
    border-color: var(--accent-primary);
}

.analyses-card:hover::before, .slideshow-card:hover::before {
    opacity: 0.02;
}

.slideshow-title {
    font-size: 1.32rem;
    font-weight: 800;
    color: #232b3a
}

.slideshow-divider {
    border-top: 2px solid #f2f4fa
}

.slideshow-body {
    position: relative;
    padding: 0 0 16px;
    width: 100%;
    min-height: 280px
}

.slideshow-track {
    display: flex;
    flex-direction: row;
    overflow-x: hidden;
    scroll-behavior: smooth;
    min-height: 250px;
    position: relative
}

.slideshow-slide {
    min-width: 100%;
    max-width: 100%;
    transition: opacity .3s;
    opacity: 0;
    pointer-events: none;
    display: none
}

    .slideshow-slide.active {
        opacity: 1;
        pointer-events: auto;
        display: block
    }

.slide-grid {
    gap: 24px
}

.slide-ceph {
    padding: 10px 30px
}

.slide-type {
    font-size: 1.08rem;
    font-weight: 700;
    text-transform: capitalize;
    color: #37508e;
    margin-bottom: 4px
}

.slide-date {
    font-size: .98rem;
    color: #8e9cb7;
    margin-bottom: 7px
}

.slide-stage {
    color: #8ab5f6;
    font-weight: 600
}

.slide-ceph-img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    border-radius: 12px;
    margin-top: 7px;
    box-shadow: 0 2px 10px #6b79af24;
    background: #f5f7fa;
    transition: box-shadow .16s
}

.slide-ceph-link:hover .slide-ceph-img {
    box-shadow: 0 4px 24px #3b82f655
}

.slide-table-container {
    flex: 1 1 0;
    overflow-x: auto;
    max-width: 420px;
    min-width: 180px
}

.slide-table {
    width: 100%;
    font-size: .98rem;
    border-collapse: separate;
    border-spacing: 0
}

.slide-section {
    font-size: 1.06rem;
    font-weight: 700;
    color: #346;
    background: 0 0;
    padding: 6px 0;
    text-align: left
}

.slide-row-label {
    color: #606984;
    padding-right: 18px;
    min-width: 80px
}

.slide-inference {
    font-weight: 700
}

.slide-inference-normal {
    color: #23ce85
}

.slide-inference-warning {
    color: #e7b22a
}

.slideshow-arrows {
    position: absolute;
    top: 46%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    pointer-events: none
}

.slideshow-arrow, .slideshow-dots {
    display: flex;
    justify-content: center
}

.slideshow-arrow {
    background: #e5eaf8dd;
    border-radius: 50%;
    border: 0;
    color: #3b82f6;
    font-size: 1.8rem;
    width: 38px;
    height: 38px;
    align-items: center;
    margin: 0 10px;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 8px #3b82f618;
    transition: background .14s,color .14s;
    opacity: .88
}

    .slideshow-arrow:hover {
        background: #3b82f6;
        color: #fff
    }

.slideshow-dots {
    position: absolute;
    left: 0;
    right: 0;
    gap: 6px;
    z-index: 3
}

    .slideshow-dots span {
        width: 9px;
        height: 9px;
        display: inline-block;
        margin: 0 2px
    }

    .slideshow-dots .active {
        background: #3b82f6;
        box-shadow: 0 1.5px 6px #3b82f655
    }

.analyses-empty-msg {
    padding: 44px 0;
    text-align: center;
    color: #aeb3c6;
    font-size: 1.05rem
}

@media (max-width:800px) {
    .slide-grid {
        flex-direction: column;
        align-items: stretch
    }

    .slide-ceph, .slide-table-container {
        padding: 0;
        min-width: 0
    }
}

.dashboard-cards-grid {
    grid-template-areas: "photos      superimpose   casehistory""analyses    analyses      casehistory""notes       notes         casehistory";
    z-index: 1
}

.card-photos {
    grid-area: photos;
    min-height: 320px
}

.card-superimpose {
    grid-area: superimpose
}

.card-analyses {
    grid-area: analyses
}

.card-notes {
    grid-area: notes
}

.card-casehistory {
    grid-area: casehistory
}

@media (max-width:1200px) {
    .dashboard-cards-grid {
        grid-template-areas: "photos      casehistory""superimpose casehistory""analyses    notes";
        grid-template-columns: 1.5fr 1fr;
        grid-template-rows: 220px 180px auto;
        gap: 24px 18px
    }
}

@media (max-width:900px) {
    .dashboard-cards-grid {
        display: flex;
        flex-direction: column;
        gap: 24px
    }

        .dashboard-cards-grid > div {
            width: 100%;
            min-width: 0
        }
}

.analyses-card, .case-summary-card, .photos-card, .slideshow-card {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box
}

@media (max-width:1200px) {
    .card-analyses {
        grid-column: auto
    }
}

.case-summary-body {
    padding: 0;
    width: 100%;
    scrollbar-width: thin
}

    .case-summary-body::-webkit-scrollbar {
        width: 6px;
        background: #f3f5f9
    }

    .case-summary-body::-webkit-scrollbar-thumb {
        background: #e4e8f4;
        border-radius: 8px
    }

.photos-card, .photos-carousel {
    display: flex;
    position: relative;
    overflow: hidden
}

.photos-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: var(--shadow-light);
    padding: 0 0 1.5rem;
    flex-direction: column;
    min-height: 320px;
    transition: all 0.3s ease;
    position: relative;
    backdrop-filter: blur(20px);
}

.photos-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--accent-gradient);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.photos-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
    border-color: var(--accent-primary);
}

.photos-card:hover::before {
    opacity: 0.02;
}

.photos-carousel {
    width: 100%;
    min-height: 240px;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 20px 20px
}

.photos-dots, .photos-slide {
    position: absolute;
    left: 0;
    right: 0
}

.photos-slide {
    top: 0;
    bottom: 0;
    margin: auto;
    width: auto;
    height: auto;
    max-width: 90%;
    max-height: 94%;
    object-fit: contain;
    opacity: 0;
    transition: opacity .6s;
    z-index: 1;
    box-shadow: 0 2px 14px rgba(80,120,180,.13);
    border-radius: 14px;
    background: #e5e8ef;
    pointer-events: none
}

    .photos-slide.active {
        opacity: 1;
        pointer-events: auto;
        z-index: 2
    }

.photos-dots {
    bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    z-index: 3
}

.case-summary-card {
    min-height: 600px;
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.case-summary-body {
    overflow-y: auto;
    min-height: 240px
}

[data-theme=dark] .case-summary-card, [data-theme=dark] .photos-card {
    background: rgba(24,26,36,.99) !important;
    box-shadow: 0 6px 36px rgba(40,70,120,.23);
    border: 1px solid #23243a
}

[data-theme=dark] .photos-slide {
    background: #23253b;
    border: 1.5px solid #292b3f
}

[data-theme=dark] .case-summary-body {
    background: 0 0
}

.dashboard-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 2rem;
    align-items: stretch;
    width: 100%;
    margin: 0 auto;
    animation: fadeInUp 0.6s ease-out;
}

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

.card-photos, .card-superimpose {
    grid-column: 1;
    grid-row: 1;
    min-width: 0
}

.card-superimpose {
    grid-column: 2
}

.card-analyses, .card-notes {
    grid-column: 1/span 2;
    grid-row: 2;
    min-width: 0
}

.card-notes {
    grid-row: 3
}

.card-casehistory {
    grid-column: 3;
    grid-row: 1/span 3;
    min-width: 0
}

@media (max-width:1200px) {
    .dashboard-cards-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto;
        gap: 1.5rem 1rem;
    }

    .card-photos {
        grid-column: 1;
        grid-row: 1
    }

    .card-superimpose {
        grid-column: 2;
        grid-row: 1
    }

    .card-analyses {
        grid-row: 2
    }

    .card-analyses, .card-casehistory, .card-notes {
        grid-column: 1/span 2
    }

    .card-notes {
        grid-row: 3
    }

    .card-casehistory {
        grid-row: 4
    }
}

@media (max-width:900px) {
    .dashboard-cards-grid {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

        .dashboard-cards-grid > div {
            width: 100%;
            min-width: 0
        }
}

.ceph-info-card, .ceph-info-grid {
    display: flex;
    flex-direction: column
}

.ceph-info-grid {
    gap: 18px
}

.ceph-info-card {
    background: #f7fafd;
    border-radius: 12px;
    margin-left: 60px;
    margin-right: 60px;
    padding: 22px 26px 18px 20px;
    border-left: 4px solid #3b82f6;
    justify-content: flex-start
}

.ceph-info-title {
    font-size: .9rem;
    font-weight: 800;
    color: #1a2340;
    margin-bottom: 10px;
    letter-spacing: -.01em
}

.ceph-value-normal {
    color: #23ce85
}

.ceph-value-warning {
    color: #faad3f
}

.ceph-value-normal, .ceph-value-warning {
    text-align: left;
    white-space: normal
}

.ceph-info-row {
    display: grid;
    grid-template-columns: 1fr max-content;
    align-items: start;
    gap: 16px;
    font-size: .83rem;
    padding: 8px 0;
    color: #6e7c95;
    font-weight: 500
}

    .ceph-info-row > span:last-child {
        text-align: left;
        white-space: normal;
        justify-self: start;
        align-self: start;
        min-width: 150px
    }

[data-theme=dark] .analyses-card {
    color: #e6eaf3
}

[data-theme=dark] .analyses-card, [data-theme=dark] .slideshow-card {
    background: #171822 !important;
    border-radius: 28px;
    box-shadow: 0 8px 36px #15264222
}

[data-theme=dark] .slideshow-header {
    color: #fff
}

[data-theme=dark] .slideshow-title {
    color: #f6f8fa
}

[data-theme=dark] .slideshow-divider {
    border-top: 2.5px solid #23253b
}

[data-theme=dark] .slide-date {
    color: #bed2fc
}

[data-theme=dark] .slide-type {
    color: #8ebeff
}

[data-theme=dark] .slide-stage {
    color: #69a6ff
}

[data-theme=dark] .slideshow-arrow {
    background: #24314a;
    color: #6af;
    border: 0
}

    [data-theme=dark] .slideshow-arrow:hover {
        background: #69a6ff;
        color: #fff
    }

[data-theme=dark] .slideshow-dots span {
    background: #33405b
}

[data-theme=dark] .slideshow-dots .active {
    background: #69a6ff;
    box-shadow: 0 2px 10px #69a6ff99
}

[data-theme=dark] .slide-ceph-link {
    color: #bed2fc
}

[data-theme=dark] .ceph-info-grid {
    background: 0 0
}

[data-theme=dark] .ceph-info-card {
    background: #202233;
    border-radius: 12px;
    border-left: 4px solid #2973e3;
    color: #d2d8e7;
    box-shadow: 0 2px 10px #090f1d44
}

[data-theme=dark] .ceph-info-title {
    color: #fff
}

[data-theme=dark] .ceph-info-row {
    color: #b2badc
}

[data-theme=dark] .ceph-value-normal {
    color: #1dd289
}

[data-theme=dark] .ceph-value-warning {
    color: #ffbe6b
}

[data-theme=dark] .analyses-empty-msg {
    color: #aeb3c6
}

[data-theme=dark] table {
    background: 0 0 !important;
    color: inherit
}

[data-theme=dark] .slide-ceph {
    color: #e6eaf3
}

.notes-card, .notes-card-slideshow-body, .slideshow-notes-card {
    max-height: 320px;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.notes-card, .slideshow-notes-card {
    min-height: 320px;
    padding: 0 0 1rem;
    border-radius: 8px;
    box-shadow: var(--shadow-light);
    position: relative;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    transition: all 0.3s ease;
    backdrop-filter: blur(20px);
}

.notes-card::before, .slideshow-notes-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--accent-gradient);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.notes-card:hover, .slideshow-notes-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
    border-color: var(--accent-primary);
}

.notes-card:hover::before, .slideshow-notes-card:hover::before {
    opacity: 0.02;
}

.notes-card-slideshow-body {
    flex: 1 1 0;
    min-height: 325px;
    padding: 0
}

.notes-slide-content {
    padding: 16px 24px 8px;
    min-height: 60px;
    max-height: 300px;
    overflow-y: auto;
    font-size: 1.09rem;
    line-height: 1.6;
    word-break: break-word;
    gap: 4px
}

.notes-date {
    font-size: .97rem;
    color: #6e7c95;
    font-weight: 600;
    margin-bottom: 4px
}

.notes-text {
    font-size: .92rem;
    color: #232b3a
}

.notes-card-slideshow-track {
    display: flex;
    flex-direction: row;
    overflow-x: hidden;
    scroll-behavior: smooth;
    min-height: 300px;
    position: relative
}

.slideshow-header {
    padding: 18px 22px 0
}

.slideshow-divider {
    margin: 8px 18px 0
}

.slideshow-dots {
    bottom: 7px
}

@media (max-width:600px) {
    .notes-card, .slideshow-card {
        min-height: 110px;
        max-height: 150px;
        padding: 0
    }

    .slideshow-body {
        max-height: 90px
    }

    .notes-slide-content {
        padding: 7px 6px;
        max-height: 50px
    }
}

[data-theme=dark] .notes-card {
    background: #171822;
    color: #e6eaf3
}

[data-theme=dark] .notes-text, [data-theme=dark] .slideshow-card {
    color: #e6eaf3
}

[data-theme=dark] .notes-date {
    color: #8ba3e0
}

.analysis-empty-state {
    padding: 48px 48px 38px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 440px;
    margin: 0 auto;
    min-width: 320px;
    text-align: center;
    transition: background .22s,box-shadow .22s,border .18s;
    position: relative;
    z-index: 3;
    backdrop-filter: blur(2.5px) saturate(1.06)
}

.analysis-empty-state::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 32px;
    pointer-events: none;
    z-index: -1
}

.analysis-empty-icon {
    margin-bottom: 12px;
    background: linear-gradient(135deg,#e8f0fe 60%,#e0ecfc 100%);
    border-radius: 50%;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 14px #3b82f61c;
    animation: icon-pop 1.1s cubic-bezier(.23,1.1,.32,1.03)
}

.analysis-empty-title {
    font-size: 1.94rem;
    font-weight: 400;
    color: #183076;
    margin-bottom: 10px;
    letter-spacing: -.01em;
    line-height: 1.16;
    text-shadow: 0 1px 0#f6f9fe
}

.analysis-empty-desc {
    font-size: 1.19rem;
    color: #5371ad;
    line-height: 1.62;
    margin-bottom: 18px;
    font-weight: 300;
    max-width: 98%
}

.analysis-empty-btn, .btn.btn-primary {
    font-size: 1.16rem;
    font-weight: 700;
    padding: 14px 34px;
    background: linear-gradient(90deg,#3b82f6 0,#2563eb 100%);
    color: #fff !important;
    border-radius: 14px;
    border: 0;
    box-shadow: 0 4px 18px #3b82f622;
    margin-top: 10px;
    cursor: pointer;
    transition: background .17s,box-shadow .12s,transform .09s;
    display: flex;
    align-items: center;
    gap: 9px;
    letter-spacing: .01em;
    outline: 0
}

    .analysis-empty-btn:hover, .btn.btn-primary:hover {
        background: linear-gradient(90deg,#2563eb 0,#60a5fa 100%);
        box-shadow: 0 3px 18px #2563eb66;
        transform: translateY(-2px) scale(1.035)
    }

@media (max-width:600px) {
    .analysis-empty-state {
        padding: 16px 6px;
        min-width: 0
    }

    .analysis-empty-title {
        font-size: 1.22rem
    }

    .analysis-empty-btn {
        padding: 9px 15px;
        font-size: .98rem
    }
}

[data-theme=dark] .analysis-empty-state {
    color: #e3ebfc;
    backdrop-filter: blur(3px) saturate(1.03)
}

    [data-theme=dark] .analysis-empty-state::after {
        box-shadow: 0 14px 56px #3b82f611
    }

[data-theme=dark] .analysis-empty-icon {
    background: linear-gradient(135deg,#213a5a 58%,#1c223c 100%);
    box-shadow: 0 2px 14px #28346227
}

[data-theme=dark] .analysis-empty-title {
    color: #e7edfe;
    text-shadow: 0 1px 0#141824
}

[data-theme=dark] .analysis-empty-desc {
    color: #a7c6ef
}

[data-theme=dark] .analysis-empty-btn, [data-theme=dark] .btn.btn-primary {
    background: linear-gradient(90deg,#2563eb 0,#3b82f6 100%);
    color: #f2f6ff !important;
    box-shadow: 0 4px 20px #2563eb2a
}

    [data-theme=dark] .analysis-empty-btn:hover, [data-theme=dark] .btn.btn-primary:hover {
        background: linear-gradient(90deg,#60a5fa 0,#2563eb 100%);
        color: #fff !important;
        box-shadow: 0 2px 16px #2563eb66
    }

.ceph-instruction-icon {
    font-size: 1.3em;
    opacity: .68
}

.ceph-xray-glass {
    background: rgba(255,255,255,.6);
    border-radius: 2px;
    box-shadow: 0 10px 48px 0#26448816,0 1.5px 14px 0#bcd6f840;
    backdrop-filter: blur(7px) saturate(1.08);
    border: 1.5px solid #dde8fb;
}

.ceph-tip-bar {
    background: #f0f6ff;
    color: #2368d9;
    border-radius: 12px;
    padding: 10px 20px;
    max-width: 90%;
    font-size: 1.18rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 1px 4px #0001;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 22px;
    z-index: 9;
    pointer-events: none
}

@media (max-width:1000px) {
    .ceph-xray-glass {
        padding: 10px 4vw;
        border-radius: 16px
    }
}

@media (max-width:600px) {
    .ceph-xray-glass {
        padding: 2px 1vw;
        min-width: 0
    }
}

[data-theme=dark] .ceph-xray-glass {
    background: rgba(32,36,60,.66);
    border-radius: 2px;
    box-shadow: 0 10px 44px 0#0d142f29,0 1.5px 14px 0#2c355760;
    border: 1.5px solid #1c243b;
    backdrop-filter: blur(9px) saturate(1.05)
}

.uk-offcanvas-bar.uk-background-default {
    background: rgba(255,255,255,.99);
    box-shadow: 0 0 48px #3b82f622;
    border-radius: 20px 0 0 20px;
    padding: 40px 36px 28px 32px;
    backdrop-filter: blur(9px) saturate(1.05);
    min-height: 100vh;
    border-right: 2px solid #e6ecf9;
    transition: background .18s,box-shadow .21s;
    color: #222b3a
}

#ocresultsheading {
    color: #16336e;
    font-weight: 800;
    font-size: 2rem;
    margin: 0 0 12px;
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    gap: 8px
}

.dropdown-menu {
    background: #f7fafd;
    border-radius: 14px;
    box-shadow: 0 4px 20px #3b82f618;
    border: 1.5px solid #e7eefd;
    padding: 7px 0
}

.dropdown-item {
    color: #2d3b5f;
    font-size: 1.12rem;
    padding: 8px 26px 8px 22px;
    border-radius: 9px;
    transition: background .13s,color .13s;
    font-weight: 500
}

    .dropdown-item:focus, .dropdown-item:hover {
        background: #3b82f6;
        color: #fff !important
    }

.btn-primary, .uk-nowrap {
    background: linear-gradient(90deg,#3b82f6 0,#60a5fa 100%);
    color: #fff !important;
    font-weight: 700;
    font-size: 1.09rem;
    border-radius: 10px;
    box-shadow: 0 2px 12px #3b82f622;
    transition: background .13s,color .13s,box-shadow .13s
}

.uk-nowrap {
    border: 0;
    padding: 9px 22px
}

    .btn-primary:hover, .uk-nowrap:hover {
        background: linear-gradient(90deg,#2563eb 0,#3b82f6 100%)
    }

    .uk-nowrap:hover {
        color: #fff
    }

.btn-outline-primary, .dropdown-toggle {
    border: 1.5px solid #3b82f6;
    background: #f8fbff;
    color: #3b82f6;
    border-radius: 9px;
    font-size: 1.09rem;
    padding: 9px 18px;
    font-weight: 600;
    transition: background .12s,color .12s,border .12s
}

    .btn-outline-primary:hover, .dropdown-toggle:hover {
        background: #3b82f6;
        color: #fff;
        border-color: #2563eb
    }

#ocresults {
    color: #1a2340;
    font-size: 1.11rem;
    margin-top: 18px
}

.uk-offcanvas-bar table {
    width: 100%;
    margin-bottom: 8px;
    border-collapse: separate
}

.uk-offcanvas-bar td {
    vertical-align: middle;
    border: 0;
    padding: 0
}

.uk-offcanvas-bar .dropdown {
    display: inline-block
}

[data-theme=dark] .uk-offcanvas-bar.uk-background-default {
    background: rgba(24,28,40,.98);
    color: #e6eaf3;
    border-right: 2px solid #223059;
    box-shadow: 0 0 68px #3b82f633
}

[data-theme=dark] #ocresultsheading {
    color: #d3e5fd;
    text-shadow: 0 2px 14px #2563eb13
}

[data-theme=dark] .dropdown-menu {
    background: #20263b;
    border: 1.5px solid #2a345a;
    box-shadow: 0 4px 20px #2563eb23
}

[data-theme=dark] .dropdown-item {
    color: #c6d6ee
}

    [data-theme=dark] .dropdown-item:focus, [data-theme=dark] .dropdown-item:hover {
        background: #2563eb;
        color: #fff !important
    }

[data-theme=dark] .btn-primary, [data-theme=dark] .uk-nowrap {
    background: linear-gradient(90deg,#2563eb 0,#3b82f6 100%);
    color: #e8f4fd !important
}

    [data-theme=dark] .btn-primary:hover, [data-theme=dark] .uk-nowrap:hover {
        background: linear-gradient(90deg,#60a5fa 0,#2563eb 100%);
        color: #fff !important
    }

[data-theme=dark] .btn-outline-primary, [data-theme=dark] .dropdown-toggle {
    background: #1d2234;
    color: #69a6ff;
    border: 1.5px solid #69a6ff
}

    [data-theme=dark] .btn-outline-primary:hover, [data-theme=dark] .dropdown-toggle:hover {
        background: #69a6ff;
        color: #fff;
        border-color: #2563eb
    }

[data-theme=dark] #ocresults {
    color: #e6eaf3
}

.card.h-100 {
    border: 0;
    border-radius: 26px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 8px 38px #3463be13,0 1.5px 9px #a0d0ff24;
    backdrop-filter: blur(4.5px) saturate(1.04);
    transition: background .19s,box-shadow .21s;
    color: #162043;
    min-height: 320px
}

.card-header {
    border-radius: 22px 22px 0 0;
    background: linear-gradient(92deg,#eaf2fc 60%,#f6fafd 100%);
    border-bottom: 1.5px solid #e3eefa;
    font-size: 1.29rem;
    color: #204383;
    padding: 20px 32px 10px;
    box-shadow: 0 1.5px 5px #4b90f61a
}

    .card-header, .card-header h5, .table thead th {
        font-weight: 800;
        letter-spacing: -.01em
    }

        .card-header h5 {
            color: inherit !important;
            font-size: 1.28rem;
            margin-bottom: 0
        }

.card-body {
    padding: 28px 32px 18px;
    font-size: 1.13rem;
    color: #223051;
    background: 0 0
}

.card .mb-3 strong {
    color: #2563eb;
    font-weight: 800;
    font-size: 1.09em;
    letter-spacing: .01em;
    margin-bottom: .3em;
    display: block
}

.card ul {
    padding-left: 24px;
    margin-bottom: 0
}

.card li {
    margin-bottom: 6px;
    color: #26437a;
    font-weight: 500;
    font-size: 1.06rem;
    letter-spacing: .02em
}

.card .alert {
    border-radius: 12px;
    font-size: 1.01rem;
    color: #e97c15;
    background: #fff9ee;
    border: 0;
    box-shadow: 0 2px 8px #e97c1533;
    margin-bottom: 0;
    padding: 10px 16px
}

[data-theme=dark] .card.h-100 {
    background: rgba(20,25,40,.97);
    color: #e0eafe;
    box-shadow: 0 6px 32px #2563eb1d,0 1.5px 7px #223e6a33
}

[data-theme=dark] .card-header {
    background: linear-gradient(92deg,#2b3456 60%,#22293c 100%);
    color: #b4cfff;
    border-bottom: 1.5px solid #27305e
}

[data-theme=dark] .card .mb-3 strong {
    color: #6cb5ff
}

[data-theme=dark] .card li {
    color: #c3d8f5
}

[data-theme=dark] .card .alert {
    background: #3b2109;
    color: #ffce7e;
    box-shadow: 0 2px 8px #ffb74433
}

.card .clinical-summary-text {
    color: #1b2946;
    font-weight: 600;
    font-size: 1.11rem;
    letter-spacing: .01em
}

[data-theme=dark] .card .clinical-summary-text {
    color: #b6d8ff;
    font-weight: 600;
    font-size: 1.13rem;
    letter-spacing: .01em
}

.table-responsive {
    background: rgba(255,255,255,.88);
    border-radius: 22px;
    box-shadow: 0 4px 22px #2368d911,0 1.5px 7px #b6e0ff22;
    overflow: hidden;
    margin-bottom: 0
}

.table {
    background: 0 0;
    margin-bottom: 0;
    border-radius: 19px;
    font-size: 1.08rem
}

    .table thead th {
        font-size: 1.17rem;
        background: #eaf2fc;
        color: #204383;
        border: 0;
        text-align: left;
        padding: 16px 7px 10px
    }

    .table tbody tr {
        border-top: 1.5px solid #e3eefa
    }

.table-striped tbody tr:nth-of-type(odd) {
    background: rgba(232,246,255,.38)
}

.table-striped tbody tr:nth-of-type(even) {
    background: rgba(244,249,255,.23)
}

.table td {
    border: 0;
    color: #273153;
    background: 0 0;
    font-size: 1.07rem;
    vertical-align: middle;
    padding: 11px 6px 11px 0
}

.uk-text-success {
    color: #19bd73 !important;
    font-weight: 600
}

.uk-text-warning {
    color: #fca943 !important;
    font-weight: 600
}

.uk-text-normal {
    color: #2a345a !important
}

.uk-text-small {
    font-size: .98rem !important
}

.table td, .table th {
    white-space: normal;
    word-break: break-word
}

[data-theme=dark] .table-responsive {
    background: rgba(18,21,36,.96);
    box-shadow: 0 6px 22px #3b82f633,0 1.5px 7px #19346929
}

[data-theme=dark] .table thead th {
    background: #232b45;
    color: #d3e5fd
}

[data-theme=dark] .table-striped tbody tr:nth-of-type(odd) {
    background: rgba(38,48,85,.35)
}

[data-theme=dark] .table-striped tbody tr:nth-of-type(even) {
    background: rgba(26,33,56,.23)
}

[data-theme=dark] .table td, [data-theme=dark] .uk-text-normal, [data-theme=dark] .uk-text-small {
    color: #d0e3ff !important
}

[data-theme=dark] .uk-text-success {
    color: #51e9a3 !important
}

[data-theme=dark] .uk-text-warning {
    color: #ffd57b !important
}

.modal-content {
    background: rgba(255,255,255,.89);
    box-shadow: 0 12px 40px #3b82f630,0 2px 12px #5aa0f610;
    border: 0;
    backdrop-filter: blur(6px) saturate(1.05);
    transition: background .15s,box-shadow .15s;
    padding: 0
}

.modal-body {
    padding: 38px 34px 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 300px;
    font-size: 1.19rem;
    color: #223153;
    font-weight: 600;
    letter-spacing: .01em
}

#divSignOut .uk-spinner, #divSignOut [uk-spinner]::after {
    border-color: #3b82f6 #dbeafe #dbeafe;
    border-width: 4px;
    width: 38px;
    height: 38px;
    box-shadow: 0 0 22px #3b82f633;
    margin-right: 0 !important;
    margin-left: 0 !important
}

#divSignOut {
    filter: drop-shadow(0 0 10px #3b82f6cc)
}

@media (max-width:500px) {
    .modal-body {
        padding: 26px 6px;
        min-width: 0;
        font-size: 1.02rem
    }

    .modal-content {
        border-radius: 12px
    }
}

[data-theme=dark] .modal-content {
    background: rgba(23,28,40,.98);
    box-shadow: 0 8px 32px #2563eb44,0 1.5px 7px #3b82f61c;
    color: #d2e7ff
}

[data-theme=dark] .modal-body {
    color: #cde4ff
}

[data-theme=dark] #divSignOut .uk-spinner, [data-theme=dark] #divSignOut [uk-spinner]::after {
    border-color: #60a5fa #38487c #38487c;
    box-shadow: 0 0 18px #60a5fa88
}

.modal-content {
    background: rgba(255,255,255,0.89);
    border-radius: 20px;
    box-shadow: 0 12px 40px #3b82f630, 0 2px 12px #5aa0f610;
    border: none;
    backdrop-filter: blur(7px) saturate(1.09);
    /* ...rest... */
}

[data-theme="dark"] .modal-content {
    background: rgba(23,28,40,0.98);
    color: #e9f0fa;
}

#modal-customComposite {
    background: var(--bg-glass,rgba(255, 255, 255, 0.8)) !important;
    background-color: var(--bg-primary) !important;
    border-radius: 22px;
    box-shadow: var(--shadow-heavy), var(--shadow-light);
    border: 1.5px solid var(--border-color);
    padding: 28px 24px 16px;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden;
    max-width: 540px !important;
    width: 98vw !important;
    min-width: 0 !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    margin: 0 auto !important;
}

/* Input fields */
#modal-customComposite .uk-input {
    width: 100%;
    border-radius: 12px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-form-control);
    font-size: 1.08rem;
    padding: 12px 14px;
    margin-bottom: 7px;
    color: var(--text-primary);
}

    #modal-customComposite .uk-input:focus {
        background: var(--bg-form-control-focus);
        border-color: var(--accent-primary);
    }

/* Navigation container */
#modal-customComposite .uk-nav {
    width: 100%;
    border-radius: 10px;
    background: var(--bg-secondary);
    padding: 8px 0 12px 0;
    min-height: 120px;
    max-height: 32vh;
    overflow-y: auto;
    margin: 0;
}

/* Parent list items (main headings) */
#modal-customComposite li.uk-parent {
    display: block !important;
    padding: 6px 8px;
    margin-bottom: 2px;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

    #modal-customComposite li.uk-parent:hover {
        background-color: var(--bg-glass-secondary);
    }

    #modal-customComposite li.uk-parent > .heading-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    #modal-customComposite li.uk-parent .checkbox-label-wrapper {
        display: flex;
        align-items: center;
        flex: 1;
    }

    #modal-customComposite li.uk-parent input[type=checkbox] {
        accent-color: var(--accent-primary);
        width: 17px;
        height: 17px;
        margin-right: 8px;
        margin-left: 2px;
        vertical-align: middle;
        border-radius: 4px;
        cursor: pointer;
    }

    #modal-customComposite li.uk-parent label {
        flex: 1;
        font-size: 1.06rem;
        font-weight: 500;
        color: var(--text-primary);
        cursor: pointer;
        margin: 0;
        padding: 0;
    }

/* Chevron icon */
#modal-customComposite .uk-nav-header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--text-muted);
    opacity: 0.8;
    font-size: 1.1em;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

    #modal-customComposite .uk-nav-header:hover {
        background-color: var(--bg-glass-secondary);
        opacity: 1;
    }

    /* Chevron rotation animation */
    #modal-customComposite .uk-nav-header span[uk-icon] {
        color: inherit;
        opacity: 1;
        transition: transform 0.2s ease;
    }

    #modal-customComposite .uk-nav-header.expanded span[uk-icon] {
        transform: rotate(180deg);
    }

/* Sublist items */
#modal-customComposite .uk-nav-sub li {
    display: flex;
    align-items: center;
    padding: 4px 0;
    margin-bottom: 2px;
}

    #modal-customComposite .uk-nav-sub li input[type=checkbox] {
        accent-color: var(--accent-primary);
        width: 15px;
        height: 15px;
        margin-right: 8px;
        vertical-align: middle;
        border-radius: 3px;
        cursor: pointer;
    }

    #modal-customComposite .uk-nav-sub li label {
        font-size: 0.98rem;
        font-weight: 400;
        color: var(--text-secondary);
        cursor: pointer;
        margin: 0;
        flex: 1;
    }

/* Dividers */
#modal-customComposite .uk-nav-divider {
    border-top: 1px solid var(--border-light);
    margin: 8px 16px;
    height: 0;
}

/* Button container */
#modal-customComposite .uk-text-right {
    display: flex;
    gap: 14px;
    justify-content: flex-end;
    margin-top: 20px;
    margin-bottom: 0;
}

/* Buttons */
#modal-customComposite .uk-button {
    font-weight: 600;
    font-size: 1.07rem;
    border-radius: 10px;
    padding: 10px 28px;
    min-width: 100px;
    transition: all 0.2s ease;
}

#modal-customComposite .uk-button-primary {
    background: var(--accent-gradient);
    color: var(--text-inverse);
    border: 0;
    box-shadow: 0 2px 12px var(--accent-shadow);
}

    #modal-customComposite .uk-button-primary:hover {
        background: var(--accent-gradient-hover);
        box-shadow: 0 4px 20px var(--accent-shadow);
        transform: translateY(-1px);
    }

#modal-customComposite .uk-button-default {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

    #modal-customComposite .uk-button-default:hover {
        background: var(--bg-glass-secondary);
        color: var(--text-primary);
    }

/* Scrollbar styling */
#modal-customComposite .uk-nav::-webkit-scrollbar {
    width: 6px;
}

#modal-customComposite .uk-nav::-webkit-scrollbar-track {
    background: transparent;
}

#modal-customComposite .uk-nav::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

    #modal-customComposite .uk-nav::-webkit-scrollbar-thumb:hover {
        background: var(--border-medium);
    }

/* Animation for accordion */
@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        margin-top: 0;
    }

    to {
        opacity: 1;
        max-height: 500px;
        margin-top: 8px;
    }
}

/* Responsive adjustments */
@media (max-width: 650px) {
    #modal-customComposite {
        padding: 16px 12px 16px 12px !important;
        max-width: 95vw;
        margin-top: 5vh !important;
        margin-bottom: 5vh !important;
        border-radius: 16px !important;
    }

    #modal-customComposite .uk-button {
        min-width: 80px;
        padding: 8px 16px;
        font-size: 1rem;
    }

    #modal-customComposite li.uk-parent {
        padding: 4px 6px;
    }

    #modal-customComposite .uk-nav-sub {
        margin-left: 20px;
        padding-left: 8px;
    }
}

/* Modal card glass look */
/* Modal glass & layout */
.modal-card {
    background: rgba(255,255,255,0.93) !important;
    border-radius: 32px !important;
    box-shadow: 0 12px 42px 0 #5184c626, 0 2.5px 12px 0 #b6d6f8a5;
    backdrop-filter: blur(9px) saturate(1.13);
    padding: 36px 34px 30px 34px !important;
    margin: 0 auto;
    color: #222b3a;
    animation: modalPopIn 0.36s cubic-bezier(.65,.05,.36,1.13);
    position: relative;
    min-width: 500px;
}

.modal-pricing {
    background: rgba(255,255,255,0.99) !important;
    border-radius: 32px !important;
    box-shadow: 0 12px 42px 0 #5184c626, 0 2.5px 12px 0 #b6d6f8a5;
    backdrop-filter: blur(9px) saturate(1.13);
    margin: 0 auto;
    color: #222b3a;
    animation: modalPopIn 0.36s cubic-bezier(.65,.05,.36,1.13);
    position: relative;
    min-width: 300px;
}

@keyframes modalPopIn {
    from {
        opacity: 0;
        transform: scale(0.98) translateY(60px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

[data-theme="dark"] .modal-card {
    background: rgba(23,28,40,0.99) !important;
    color: #e7f0ff;
    border: 1.5px solid #263750;
    box-shadow: 0 14px 48px #17213b61, 0 2.5px 12px #5db9f711;
}

[data-theme="dark"] .modal-pricing {
    background: rgba(23,28,40,0.99) !important;
    color: #e7f0ff;
    border: 1.5px solid #263750;
    box-shadow: 0 14px 48px #17213b61, 0 2.5px 12px #5db9f711;
}


/* Header icon & title */
.modal-header-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

    .modal-header-icon svg {
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, #60a5fa22, #f1f8fe 70%);
        border-radius: 16px;
        padding: 8px;
        box-shadow: 0 3px 17px #60a5fa33;
    }

[data-theme="dark"] .modal-header-icon svg {
    background: linear-gradient(135deg, #2563eb22, #23335a 80%);
    box-shadow: 0 3px 14px #60a5fa27;
}

.modal-card-title {
    text-align: center;
    font-size: 1.37rem;
    font-weight: 800;
    color: #1d3768;
    letter-spacing: -0.01em;
    margin-bottom: 22px;
}

[data-theme="dark"] .modal-card-title {
    color: #b7d2ff;
}

/* Form label */
.modal-label {
    font-size: 1.08rem;
    font-weight: 700;
    color: #2563eb;
    margin-bottom: 7px;
    margin-top: 16px;
    letter-spacing: 0.01em;
    display: block;
}

[data-theme="dark"] .modal-label {
    color: #60a5fa;
}

/* Toggle buttons */
.modal-segment-toggle {
    display: flex;
    gap: 11px;
}

.modal-segment-btn {
    flex: 1 1 0;
    border: 1.5px solid #bcd6fa;
    background: #f6f8fc;
    color: #204383;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 12px 0;
    min-width: 80px;
    cursor: pointer;
    box-shadow: 0 1.5px 9px #bddcfa16;
    transition: background 0.13s, color 0.13s, border-color 0.13s, transform 0.11s;
    outline: none;
}

    .modal-segment-btn.selected,
    .modal-segment-btn:active {
        background: linear-gradient(92deg, #2563eb 0%, #3b82f6 100%);
        color: #fff !important;
        border-color: #2563eb;
        transform: scale(1.045);
        box-shadow: 0 2px 13px #3b82f661;
    }

    .modal-segment-btn:focus {
        box-shadow: 0 0 0 2px #3b82f6cc;
    }

    .modal-segment-btn:hover:not(.selected) {
        background: #e3eefa;
        color: #2563eb;
        border-color: #3b82f6;
    }

[data-theme="dark"] .modal-segment-btn {
    background: #232b45;
    color: #8bbdfa;
    border-color: #273040;
}

    [data-theme="dark"] .modal-segment-btn.selected,
    [data-theme="dark"] .modal-segment-btn:active {
        background: linear-gradient(92deg, #2563eb 0%, #60a5fa 100%);
        color: #fff !important;
        border-color: #60a5fa;
        box-shadow: 0 2px 13px #60a5fa51;
    }

    [data-theme="dark"] .modal-segment-btn:focus {
        box-shadow: 0 0 0 2px #60a5fa90;
    }

    [data-theme="dark"] .modal-segment-btn:hover:not(.selected) {
        background: #233253;
        color: #62aaff;
        border-color: #60a5fa;
    }

/* Input style */
.modal-input {
    width: 100%;
    border-radius: 10px;
    border: 1.5px solid #e0eaf7;
    background: #f7fafc;
    font-size: 1.12rem;
    padding: 12px 13px;
    margin-bottom: 8px;
    margin-top: 7px;
    box-shadow: 0 1px 4px #bddcfa18;
}

[data-theme="dark"] .modal-input {
    background: #20273a;
    border: 1.5px solid #344165;
    color: #eaf6ff;
}

/* Done button in own row */
.modal-action-row {
    margin-top: 28px;
    text-align: center;
}

.modal-btn-primary {
    border-radius: 16px;
    background: linear-gradient(92deg, #2563eb 0%, #3b82f6 100%);
    color: #fff !important;
    font-weight: 700;
    font-size: 1.11rem;
    padding: 15px 38px;
    border: none;
    transition: background 0.16s, box-shadow 0.12s, transform 0.09s;
    box-shadow: 0 2px 16px #3b82f626;
    outline: none;
}

    .modal-btn-primary:hover, .modal-btn-primary:focus {
        background: linear-gradient(91deg, #155bd2 0%, #439cfb 100%);
        box-shadow: 0 3px 20px #2563eb44;
        transform: scale(1.047);
    }

[data-theme="dark"] .modal-btn-primary {
    background: linear-gradient(92deg, #2563eb 0%, #60a5fa 100%);
    color: #fff !important;
}

/* Anim for mobile */
@media (max-width: 600px) {
    .modal-card {
        padding: 10px 2vw 15px 2vw !important;
    }
}

.spinner-glass-modal {
    border-radius: 18px;
    background: var(--bg-glass);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: var(--shadow-heavy);
    border: var(--border);
    color: var(--text-primary);
    margin: auto;
    transition: background 0.2s, color 0.2s;
    max-height:100px;
}

[data-theme="dark"] .spinner-glass-modal {
    background: var(--bg-glass-secondary);
    color: var(--text-primary);
}