/* _content/HomeworkyHelper.Web/Components/Homework/HintRevealPanel.razor.rz.scp.css */
.hint-reveal-panel[b-520nn3vu3j] {
    max-width: 100%;
}

.hint-panel-header[b-520nn3vu3j] {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

/* Hint Card States */
.hint-card-revealed[b-520nn3vu3j] {
    opacity: 1;
    transform: scale(1);
}

.hint-card-available[b-520nn3vu3j] {
    opacity: 1;
    transform: scale(1);
}

.hint-card-locked[b-520nn3vu3j] {
    opacity: 0.6;
    filter: grayscale(0.3);
}

/* Hint Content Alert Styling */
.hint-content-alert[b-520nn3vu3j] {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 1rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    animation: fadeInUp-b-520nn3vu3j 0.4s ease-out;
}

/* Animations */
@keyframes fadeInUp-b-520nn3vu3j {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn-b-520nn3vu3j {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate[b-520nn3vu3j] {
    animation: scaleIn-b-520nn3vu3j 0.3s ease-out;
}

/* Button Loading State */
[b-520nn3vu3j] .mud-button-root {
    transition: all 0.3s ease;
}

[b-520nn3vu3j] .mud-button-root:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(32, 168, 85, 0.3);
}

[b-520nn3vu3j] .mud-button-root:active:not(:disabled) {
    transform: translateY(0);
}

/* Icon Animations */
[b-520nn3vu3j] .mud-icon-root {
    transition: all 0.3s ease;
}

.hint-card-revealed[b-520nn3vu3j]  .mud-icon-root {
    animation: pulse-b-520nn3vu3j 0.6s ease-out;
}

@keyframes pulse-b-520nn3vu3j {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Chip Styling */
[b-520nn3vu3j] .mud-chip {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Alert Customization */
[b-520nn3vu3j] .mud-alert-message {
    font-size: 0.9375rem;
    color: #374151;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .hint-panel-header[b-520nn3vu3j] {
        padding: 0.875rem;
    }

    .hint-content-alert[b-520nn3vu3j] {
        padding: 0.875rem;
        font-size: 0.9375rem;
    }

    [b-520nn3vu3j] .mud-button-root {
        font-size: 0.9375rem;
    }
}

@media (max-width: 375px) {
    .hint-panel-header[b-520nn3vu3j] {
        padding: 0.75rem;
    }

    .hint-content-alert[b-520nn3vu3j] {
        padding: 0.75rem;
        font-size: 0.875rem;
    }

    [b-520nn3vu3j] .mud-button-root {
        font-size: 0.875rem;
    }

    [b-520nn3vu3j] .mud-icon-root {
        width: 20px !important;
        height: 20px !important;
    }
}

/* Smooth transitions for all hint cards */
.hint-card-revealed[b-520nn3vu3j],
.hint-card-available[b-520nn3vu3j],
.hint-card-locked[b-520nn3vu3j] {
    transition: all 0.3s ease;
}

/* Highlight effect when hint is revealed */
.hint-card-revealed[b-520nn3vu3j] {
    position: relative;
    overflow: hidden;
}

.hint-card-revealed[b-520nn3vu3j]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(32, 168, 85, 0.1), transparent);
    animation: shimmer-b-520nn3vu3j 1.5s ease-out;
}

@keyframes shimmer-b-520nn3vu3j {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}
/* _content/HomeworkyHelper.Web/Components/Shared/GlassButton.razor.rz.scp.css */
.glass-button[b-1kn7vafn0g] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: inherit;
    font-weight: 600;
    text-transform: none;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    outline: none;
    user-select: none;
}

.glass-button:focus-visible[b-1kn7vafn0g] {
    outline: 2px solid #20A855;
    outline-offset: 2px;
}

.glass-button:disabled[b-1kn7vafn0g] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.glass-button-content[b-1kn7vafn0g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.glass-button-loading[b-1kn7vafn0g] {
    margin-right: 0.25rem;
}

.glass-button-start-icon[b-1kn7vafn0g] {
    margin-right: -0.25rem;
}

.glass-button-end-icon[b-1kn7vafn0g] {
    margin-left: -0.25rem;
}

/* Sizes */
.glass-button.size-small[b-1kn7vafn0g] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border-radius: 8px;
}

.glass-button.size-medium[b-1kn7vafn0g] {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: 12px;
}

.glass-button.size-large[b-1kn7vafn0g] {
    padding: 1rem 2rem;
    font-size: 1.125rem;
    border-radius: 12px;
}

/* Full Width */
.glass-button.full-width[b-1kn7vafn0g] {
    width: 100%;
}

/* Variant: Filled */
.glass-button.variant-filled[b-1kn7vafn0g] {
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.glass-button.variant-filled:hover:not(:disabled)[b-1kn7vafn0g] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.glass-button.variant-filled:active:not(:disabled)[b-1kn7vafn0g] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Variant: Outlined */
.glass-button.variant-outlined[b-1kn7vafn0g] {
    background: transparent;
    border: 2px solid;
}

.glass-button.variant-outlined:hover:not(:disabled)[b-1kn7vafn0g] {
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
}

/* Variant: Text */
.glass-button.variant-text[b-1kn7vafn0g] {
    background: transparent;
    box-shadow: none;
}

.glass-button.variant-text:hover:not(:disabled)[b-1kn7vafn0g] {
    background: rgba(0, 0, 0, 0.05);
}

/* Colors for Filled Variant */
.glass-button.variant-filled.color-primary[b-1kn7vafn0g] {
    background: linear-gradient(135deg, #20A855, #1a8a47);
    color: white;
}

.glass-button.variant-filled.color-primary:hover:not(:disabled)[b-1kn7vafn0g] {
    background: linear-gradient(135deg, #1a8a47, #157a3e);
}

.glass-button.variant-filled.color-secondary[b-1kn7vafn0g] {
    background: linear-gradient(135deg, #F4A51C, #e09416);
    color: white;
}

.glass-button.variant-filled.color-secondary:hover:not(:disabled)[b-1kn7vafn0g] {
    background: linear-gradient(135deg, #e09416, #cc8412);
}

.glass-button.variant-filled.color-success[b-1kn7vafn0g] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.glass-button.variant-filled.color-success:hover:not(:disabled)[b-1kn7vafn0g] {
    background: linear-gradient(135deg, #059669, #047857);
}

.glass-button.variant-filled.color-error[b-1kn7vafn0g] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.glass-button.variant-filled.color-error:hover:not(:disabled)[b-1kn7vafn0g] {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}

.glass-button.variant-filled.color-warning[b-1kn7vafn0g] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.glass-button.variant-filled.color-warning:hover:not(:disabled)[b-1kn7vafn0g] {
    background: linear-gradient(135deg, #d97706, #b45309);
}

.glass-button.variant-filled.color-default[b-1kn7vafn0g] {
    background: rgba(255, 255, 255, 0.85);
    color: #1a1a1a;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.glass-button.variant-filled.color-default:hover:not(:disabled)[b-1kn7vafn0g] {
    background: rgba(255, 255, 255, 0.95);
}

/* Colors for Outlined Variant */
.glass-button.variant-outlined.color-primary[b-1kn7vafn0g] {
    border-color: #20A855;
    color: #20A855;
}

.glass-button.variant-outlined.color-primary:hover:not(:disabled)[b-1kn7vafn0g] {
    background: rgba(32, 168, 85, 0.1);
}

.glass-button.variant-outlined.color-secondary[b-1kn7vafn0g] {
    border-color: #F4A51C;
    color: #F4A51C;
}

.glass-button.variant-outlined.color-secondary:hover:not(:disabled)[b-1kn7vafn0g] {
    background: rgba(244, 165, 28, 0.1);
}

.glass-button.variant-outlined.color-success[b-1kn7vafn0g] {
    border-color: #10b981;
    color: #10b981;
}

.glass-button.variant-outlined.color-success:hover:not(:disabled)[b-1kn7vafn0g] {
    background: rgba(16, 185, 129, 0.1);
}

.glass-button.variant-outlined.color-error[b-1kn7vafn0g] {
    border-color: #ef4444;
    color: #ef4444;
}

.glass-button.variant-outlined.color-error:hover:not(:disabled)[b-1kn7vafn0g] {
    background: rgba(239, 68, 68, 0.1);
}

.glass-button.variant-outlined.color-warning[b-1kn7vafn0g] {
    border-color: #f59e0b;
    color: #f59e0b;
}

.glass-button.variant-outlined.color-warning:hover:not(:disabled)[b-1kn7vafn0g] {
    background: rgba(245, 158, 11, 0.1);
}

.glass-button.variant-outlined.color-default[b-1kn7vafn0g] {
    border-color: rgba(0, 0, 0, 0.2);
    color: #1a1a1a;
}

.glass-button.variant-outlined.color-default:hover:not(:disabled)[b-1kn7vafn0g] {
    background: rgba(0, 0, 0, 0.05);
}

/* Colors for Text Variant */
.glass-button.variant-text.color-primary[b-1kn7vafn0g] {
    color: #20A855;
}

.glass-button.variant-text.color-secondary[b-1kn7vafn0g] {
    color: #F4A51C;
}

.glass-button.variant-text.color-success[b-1kn7vafn0g] {
    color: #10b981;
}

.glass-button.variant-text.color-error[b-1kn7vafn0g] {
    color: #ef4444;
}

.glass-button.variant-text.color-warning[b-1kn7vafn0g] {
    color: #f59e0b;
}

.glass-button.variant-text.color-default[b-1kn7vafn0g] {
    color: #1a1a1a;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .glass-button.size-large[b-1kn7vafn0g] {
        padding: 0.875rem 1.75rem;
        font-size: 1.0625rem;
    }
}

@media (max-width: 375px) {
    .glass-button.size-small[b-1kn7vafn0g] {
        padding: 0.4rem 0.875rem;
        font-size: 0.8125rem;
    }

    .glass-button.size-medium[b-1kn7vafn0g] {
        padding: 0.625rem 1.25rem;
        font-size: 0.9375rem;
    }

    .glass-button.size-large[b-1kn7vafn0g] {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
}
/* _content/HomeworkyHelper.Web/Components/Shared/GlassCard.razor.rz.scp.css */
.glass-card[b-rgxxtdvzv5] {
    position: relative;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark), [data-theme="dark"] {
    .glass-card[b-rgxxtdvzv5] {
        background: rgba(30, 30, 30, 0.75);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }

    .glass-card-header[b-rgxxtdvzv5] {
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    .glass-card-title[b-rgxxtdvzv5] {
        color: rgba(255, 255, 255, 0.95);
    }

    .glass-card-subtitle[b-rgxxtdvzv5] {
        color: rgba(255, 255, 255, 0.7);
    }

    .glass-card-actions[b-rgxxtdvzv5] {
        border-top-color: rgba(255, 255, 255, 0.08);
    }

    .glass-card.hoverable:hover[b-rgxxtdvzv5] {
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
        border-color: rgba(32, 168, 85, 0.4);
    }
}

.glass-card.hoverable:hover[b-rgxxtdvzv5] {
    transform: translateY(-4px);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
    border-color: rgba(32, 168, 85, 0.3);
}

.glass-card-header[b-rgxxtdvzv5] {
    padding: 1.5rem 2rem 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.glass-card-title[b-rgxxtdvzv5] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.glass-card-subtitle[b-rgxxtdvzv5] {
    font-size: 1rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

.glass-card-content[b-rgxxtdvzv5] {
    padding: 1.5rem 2rem;
}

.glass-card-actions[b-rgxxtdvzv5] {
    padding: 1rem 2rem 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    align-items: center;
}

/* Compact variant */
.glass-card.compact[b-rgxxtdvzv5] {
    border-radius: 16px;
}

.glass-card.compact .glass-card-header[b-rgxxtdvzv5] {
    padding: 1rem 1.5rem 0.5rem;
}

.glass-card.compact .glass-card-content[b-rgxxtdvzv5] {
    padding: 1rem 1.5rem;
}

.glass-card.compact .glass-card-actions[b-rgxxtdvzv5] {
    padding: 0.75rem 1.5rem 1rem;
}

/* Primary variant with green accent */
.glass-card.primary[b-rgxxtdvzv5] {
    background: rgba(32, 168, 85, 0.05);
    border-color: rgba(32, 168, 85, 0.2);
}

.glass-card.primary .glass-card-title[b-rgxxtdvzv5] {
    color: #20A855;
}

/* Success variant */
.glass-card.success[b-rgxxtdvzv5] {
    background: rgba(16, 185, 129, 0.05);
    border-color: rgba(16, 185, 129, 0.2);
}

/* Warning variant */
.glass-card.warning[b-rgxxtdvzv5] {
    background: rgba(245, 158, 11, 0.05);
    border-color: rgba(245, 158, 11, 0.2);
}

/* Error variant */
.glass-card.error[b-rgxxtdvzv5] {
    background: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.2);
}

/* Info variant */
.glass-card.info[b-rgxxtdvzv5] {
    background: rgba(59, 130, 246, 0.05);
    border-color: rgba(59, 130, 246, 0.2);
}

/* Elevated cards */
.glass-card.elevation-0[b-rgxxtdvzv5] {
    box-shadow: none;
}

.glass-card.elevation-1[b-rgxxtdvzv5] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.glass-card.elevation-2[b-rgxxtdvzv5] {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.glass-card.elevation-3[b-rgxxtdvzv5] {
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
}

.glass-card.elevation-4[b-rgxxtdvzv5] {
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.16);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .glass-card[b-rgxxtdvzv5] {
        border-radius: 16px;
    }

    .glass-card-header[b-rgxxtdvzv5] {
        padding: 1.25rem 1.5rem 0.5rem;
    }

    .glass-card-title[b-rgxxtdvzv5] {
        font-size: 1.25rem;
    }

    .glass-card-subtitle[b-rgxxtdvzv5] {
        font-size: 0.9375rem;
    }

    .glass-card-content[b-rgxxtdvzv5] {
        padding: 1.25rem 1.5rem;
    }

    .glass-card-actions[b-rgxxtdvzv5] {
        padding: 1rem 1.5rem 1.25rem;
        flex-direction: column;
        gap: 0.75rem;
    }

    .glass-card-actions > *[b-rgxxtdvzv5] {
        width: 100%;
    }
}

@media (max-width: 375px) {
    .glass-card[b-rgxxtdvzv5] {
        border-radius: 12px;
    }

    .glass-card-header[b-rgxxtdvzv5] {
        padding: 1rem 1.25rem 0.5rem;
    }

    .glass-card-title[b-rgxxtdvzv5] {
        font-size: 1.125rem;
    }

    .glass-card-subtitle[b-rgxxtdvzv5] {
        font-size: 0.875rem;
    }

    .glass-card-content[b-rgxxtdvzv5] {
        padding: 1rem 1.25rem;
    }

    .glass-card-actions[b-rgxxtdvzv5] {
        padding: 0.75rem 1.25rem 1rem;
    }
}

/* Animation for card entrance */
@keyframes slideUpFadeIn-b-rgxxtdvzv5 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.glass-card.animate[b-rgxxtdvzv5] {
    animation: slideUpFadeIn-b-rgxxtdvzv5 0.5s ease-out;
}
/* _content/HomeworkyHelper.Web/Components/Shared/LoadingOverlay.razor.rz.scp.css */
.loading-overlay[b-1ic3c9202t] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    animation: fadeIn-b-1ic3c9202t 0.3s ease-out;
}

.loading-overlay.transparent[b-1ic3c9202t] {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

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

.loading-overlay-content[b-1ic3c9202t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 3rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    min-width: 280px;
    max-width: 400px;
    animation: slideUp-b-1ic3c9202t 0.4s ease-out;
}

@keyframes slideUp-b-1ic3c9202t {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.loading-spinner[b-1ic3c9202t] {
    animation: pulse-b-1ic3c9202t 2s ease-in-out infinite;
}

@keyframes pulse-b-1ic3c9202t {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.loading-message[b-1ic3c9202t] {
    text-align: center;
}

.loading-text[b-1ic3c9202t] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 0.5rem;
    line-height: 1.4;
}

.loading-subtext[b-1ic3c9202t] {
    font-size: 0.9375rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

.loading-progress[b-1ic3c9202t] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.loading-progress-bar[b-1ic3c9202t] {
    border-radius: 8px;
    overflow: hidden;
}

.loading-progress-text[b-1ic3c9202t] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #20A855;
    text-align: center;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .loading-overlay-content[b-1ic3c9202t] {
        padding: 2.5rem 2rem;
        min-width: 240px;
        max-width: 340px;
        border-radius: 20px;
    }

    .loading-text[b-1ic3c9202t] {
        font-size: 1.0625rem;
    }

    .loading-subtext[b-1ic3c9202t] {
        font-size: 0.875rem;
    }
}

@media (max-width: 375px) {
    .loading-overlay-content[b-1ic3c9202t] {
        padding: 2rem 1.5rem;
        min-width: 200px;
        max-width: 300px;
        gap: 1.25rem;
        border-radius: 16px;
    }

    .loading-text[b-1ic3c9202t] {
        font-size: 1rem;
    }

    .loading-subtext[b-1ic3c9202t] {
        font-size: 0.8125rem;
    }
}

/* Dark theme support (optional) */
@media (prefers-color-scheme: dark) {
    .loading-overlay[b-1ic3c9202t] {
        background: rgba(0, 0, 0, 0.85);
    }

    .loading-overlay.transparent[b-1ic3c9202t] {
        background: rgba(0, 0, 0, 0.5);
    }

    .loading-overlay-content[b-1ic3c9202t] {
        background: rgba(26, 26, 26, 0.95);
        border-color: rgba(255, 255, 255, 0.1);
    }

    .loading-text[b-1ic3c9202t] {
        color: #f1f5f9;
    }

    .loading-subtext[b-1ic3c9202t] {
        color: #9ca3af;
    }
}
/* _content/HomeworkyHelper.Web/Components/Shared/PageLoader.razor.rz.scp.css */
/* Page Loader Container - Centered */
.page-loader-container[b-ymtkw2nas3] {
    display: grid;
    place-items: center;
    min-height: 400px;
    padding: 40px 20px;
}

/* Loader Card - Subtle Glassmorphism */
.loader-card[b-ymtkw2nas3] {
    padding: 48px 40px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px) saturate(110%);
    -webkit-backdrop-filter: blur(12px) saturate(110%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.08),
        0 2px 6px rgba(0, 0, 0, 0.04);
    max-width: 400px;
}

/* Loader Icon Animation */
.loader-icon-wrapper[b-ymtkw2nas3] {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(32, 168, 85, 0.15) 0%, rgba(244, 165, 28, 0.15) 100%);
    border-radius: 50%;
    animation: float-b-ymtkw2nas3 3s ease-in-out infinite;
}

.loader-icon[b-ymtkw2nas3] {
    font-size: 40px !important;
    color: #20A855;
    animation: spin-b-ymtkw2nas3 2s linear infinite;
}

@keyframes float-b-ymtkw2nas3 {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes spin-b-ymtkw2nas3 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Loading Spinner */
.loader-spinner[b-ymtkw2nas3] {
    margin: 8px 0;
}

/* Loading Text */
.loader-text[b-ymtkw2nas3] {
    font-weight: 600 !important;
    color: #1f2937;
    margin: 0 !important;
}

/* Loading Subtext */
.loader-subtext[b-ymtkw2nas3] {
    max-width: 320px;
    line-height: 1.5;
    margin: 0 !important;
}

/* Progress Container */
.progress-container[b-ymtkw2nas3] {
    width: 100%;
    max-width: 300px;
    margin-top: 8px;
}

.loader-progress[b-ymtkw2nas3] {
    border-radius: 8px;
}

/* Mobile Optimization */
@media (max-width: 768px) {
    .page-loader-container[b-ymtkw2nas3] {
        min-height: 300px;
        padding: 32px 20px;
    }

    .loader-card[b-ymtkw2nas3] {
        padding: 40px 32px;
        max-width: 100%;
    }

    .loader-icon-wrapper[b-ymtkw2nas3] {
        width: 70px;
        height: 70px;
    }

    .loader-icon[b-ymtkw2nas3] {
        font-size: 36px !important;
    }

    .loader-text[b-ymtkw2nas3] {
        font-size: 1.25rem !important;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .loader-card[b-ymtkw2nas3] {
        padding: 32px 24px;
    }

    .loader-icon-wrapper[b-ymtkw2nas3] {
        width: 60px;
        height: 60px;
    }

    .loader-icon[b-ymtkw2nas3] {
        font-size: 32px !important;
    }
}

/* Overlay Mode (covers full screen) */
:host[b-ymtkw2nas3]  .page-loader-container.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    z-index: 9999;
    min-height: 100vh;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .loader-icon-wrapper[b-ymtkw2nas3],
    .loader-icon[b-ymtkw2nas3] {
        animation: none;
    }

    .loader-spinner[b-ymtkw2nas3] {
        animation-duration: 1.5s;
    }
}
/* _content/HomeworkyHelper.Web/Components/Shared/StatCard.razor.rz.scp.css */
.stat-card[b-0n4mkqxvc6] {
    position: relative;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark), [data-theme="dark"] {
    .stat-card[b-0n4mkqxvc6] {
        background: rgba(30, 30, 30, 0.75);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .stat-card-title[b-0n4mkqxvc6] {
        color: rgba(255, 255, 255, 0.9);
    }

    .stat-card-actions[b-0n4mkqxvc6] {
        border-top-color: rgba(255, 255, 255, 0.08);
    }

    .stat-card-clickable:hover[b-0n4mkqxvc6] {
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
    }

    .stat-card-gradient[b-0n4mkqxvc6] {
        border-color: rgba(255, 255, 255, 0.15);
    }
}

.stat-card-content[b-0n4mkqxvc6] {
    padding: 1.5rem;
}

.stat-card-content.compact[b-0n4mkqxvc6] {
    padding: 1rem;
}

.stat-card-actions[b-0n4mkqxvc6] {
    padding: 0 1.5rem 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* Icon styling */
.stat-card-icon[b-0n4mkqxvc6] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

/* Text elements */
.stat-card-value[b-0n4mkqxvc6] {
    font-weight: 700 !important;
    line-height: 1.2;
}

.stat-card-title[b-0n4mkqxvc6] {
    font-weight: 600;
    color: #374151;
}

.stat-card-subtext[b-0n4mkqxvc6] {
    opacity: 0.8;
}

/* Clickable state */
.stat-card-clickable[b-0n4mkqxvc6] {
    cursor: pointer;
}

.stat-card-clickable:hover[b-0n4mkqxvc6] {
    transform: translateY(-4px);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
    border-color: rgba(32, 168, 85, 0.3);
}

.stat-card-clickable:active[b-0n4mkqxvc6] {
    transform: translateY(-2px);
}

/* Gradient variant */
.stat-card-gradient[b-0n4mkqxvc6] {
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
}

.stat-card-gradient .stat-card-title[b-0n4mkqxvc6],
.stat-card-gradient .stat-card-subtext[b-0n4mkqxvc6] {
    color: rgba(255, 255, 255, 0.95);
}

.stat-card-gradient .stat-card-value[b-0n4mkqxvc6] {
    color: white;
}

/* Elevation levels */
.stat-card-elevation-0[b-0n4mkqxvc6] {
    box-shadow: none;
}

.stat-card-elevation-1[b-0n4mkqxvc6] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.stat-card-elevation-2[b-0n4mkqxvc6] {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.stat-card-elevation-3[b-0n4mkqxvc6] {
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
}

.stat-card-elevation-4[b-0n4mkqxvc6] {
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.16);
}

/* Trend chip */
.stat-card-trend[b-0n4mkqxvc6] {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Animations */
@keyframes slideInUp-b-0n4mkqxvc6 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-card[b-0n4mkqxvc6] {
    animation: slideInUp-b-0n4mkqxvc6 0.4s ease-out;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .stat-card[b-0n4mkqxvc6] {
        border-radius: 12px;
    }

    .stat-card-content[b-0n4mkqxvc6] {
        padding: 1.25rem;
    }

    .stat-card-content.compact[b-0n4mkqxvc6] {
        padding: 0.875rem;
    }

    .stat-card-actions[b-0n4mkqxvc6] {
        padding: 0 1.25rem 0.875rem;
    }
}

@media (max-width: 375px) {
    .stat-card-content[b-0n4mkqxvc6] {
        padding: 1rem;
    }

    .stat-card-content.compact[b-0n4mkqxvc6] {
        padding: 0.75rem;
    }

    .stat-card-value[b-0n4mkqxvc6] {
        font-size: 1.75rem !important;
    }
}
/* _content/HomeworkyHelper.Web/Pages/Auth/ForgotPassword.razor.rz.scp.css */
.forgot-password-container[b-j2xszuzd5s] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    background: linear-gradient(135deg,
        rgba(32, 168, 85, 0.03) 0%,
        rgba(244, 165, 28, 0.03) 50%,
        rgba(32, 168, 85, 0.05) 100%);
}

.forgot-password-card[b-j2xszuzd5s] {
    max-width: 520px;
    width: 100%;
    animation: fadeInUp-b-j2xszuzd5s 0.6s ease-out;
}

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

.forgot-password-button[b-j2xszuzd5s] {
    border-radius: 12px;
    text-transform: none;
    font-weight: 600;
    font-size: 1.0625rem;
    padding: 0.875rem 2rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(32, 168, 85, 0.25);
}

.forgot-password-button:hover:not(:disabled)[b-j2xszuzd5s] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(32, 168, 85, 0.35);
}

.forgot-password-button:active[b-j2xszuzd5s] {
    transform: translateY(0);
}

.forgot-password-links[b-j2xszuzd5s] {
    width: 100%;
}

.forgot-password-link[b-j2xszuzd5s] {
    color: #20A855;
    font-weight: 600;
    text-decoration: none;
}

.forgot-password-link:hover[b-j2xszuzd5s] {
    color: #1a8a47;
    text-decoration: underline;
}

.forgot-password-help[b-j2xszuzd5s] {
    color: #6b7280;
    max-width: 500px;
    padding: 0 1rem;
}

.success-content[b-j2xszuzd5s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.success-icon[b-j2xszuzd5s] {
    margin-bottom: 1.5rem;
    animation: scaleIn-b-j2xszuzd5s 0.5s ease-out;
}

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

.success-message[b-j2xszuzd5s] {
    color: #374151;
    line-height: 1.6;
}

.success-message strong[b-j2xszuzd5s] {
    color: #20A855;
    font-weight: 600;
}

/* Custom input styling for glassmorphic effect */
[b-j2xszuzd5s] .glass-input .mud-input-root {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

[b-j2xszuzd5s] .glass-input .mud-input-root:hover {
    background: rgba(255, 255, 255, 0.85);
}

[b-j2xszuzd5s] .glass-input .mud-input-root.mud-input-root-outlined .mud-input-slot {
    border-color: rgba(0, 0, 0, 0.15);
}

[b-j2xszuzd5s] .glass-input .mud-input-root.mud-input-root-outlined:hover .mud-input-slot {
    border-color: #20A855;
}

[b-j2xszuzd5s] .glass-input .mud-input-root.mud-input-root-outlined.mud-input-focused .mud-input-slot {
    border-color: #20A855;
    border-width: 2px;
}

/* Alert styling */
[b-j2xszuzd5s] .mud-alert {
    border-radius: 12px;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablet Landscape (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .forgot-password-container[b-j2xszuzd5s] {
        padding: 2rem 1.5rem;
    }

    .forgot-password-card[b-j2xszuzd5s] {
        max-width: 500px;
    }
}

/* Tablet Portrait (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .forgot-password-container[b-j2xszuzd5s] {
        padding: 1.75rem 1.25rem;
    }

    .forgot-password-card[b-j2xszuzd5s] {
        max-width: 480px;
    }

    .forgot-password-button[b-j2xszuzd5s] {
        font-size: 1rem;
        padding: 0.8rem 1.75rem;
    }
}

/* Tablet and Below (<=768px) */
@media (max-width: 768px) {
    .forgot-password-container[b-j2xszuzd5s] {
        padding: 1.5rem 1rem;
    }

    .forgot-password-card[b-j2xszuzd5s] {
        max-width: 100%;
    }

    .forgot-password-button[b-j2xszuzd5s] {
        font-size: 1rem;
        padding: 0.75rem 1.5rem;
    }

    .forgot-password-links[b-j2xszuzd5s] {
        flex-direction: column;
        gap: 0.75rem;
        align-items: center !important;
    }
}

/* Mobile (<=480px) */
@media (max-width: 480px) {
    .forgot-password-container[b-j2xszuzd5s] {
        padding: 1rem 0.75rem;
    }

    .forgot-password-button[b-j2xszuzd5s] {
        font-size: 0.9375rem;
        padding: 0.75rem 1rem;
    }

    /* Simplify hover effects on mobile */
    .forgot-password-button:hover[b-j2xszuzd5s] {
        transform: none;
    }
}

/* Small Mobile (<=375px) */
@media (max-width: 375px) {
    .forgot-password-container[b-j2xszuzd5s] {
        padding: 0.875rem 0.5rem;
    }

    .forgot-password-button[b-j2xszuzd5s] {
        font-size: 0.875rem;
        padding: 0.625rem 0.875rem;
    }

    .forgot-password-help[b-j2xszuzd5s] {
        font-size: 0.875rem;
    }

    .success-message[b-j2xszuzd5s] {
        font-size: 0.9375rem;
    }
}

/* ========================================
   DARK MODE SUPPORT
   ======================================== */
@media (prefers-color-scheme: dark) {
    .forgot-password-container[b-j2xszuzd5s] {
        background: linear-gradient(135deg,
            rgba(32, 168, 85, 0.05) 0%,
            rgba(244, 165, 28, 0.05) 50%,
            rgba(32, 168, 85, 0.08) 100%);
    }

    .forgot-password-help[b-j2xszuzd5s] {
        color: #d1d5db;
    }

    .success-message[b-j2xszuzd5s] {
        color: #d1d5db;
    }

    [b-j2xszuzd5s] .glass-input .mud-input-root {
        background: rgba(30, 41, 59, 0.7);
    }

    [b-j2xszuzd5s] .glass-input .mud-input-root:hover {
        background: rgba(30, 41, 59, 0.85);
    }

    /* Improve text visibility in dark mode */
    [b-j2xszuzd5s] .glass-input .mud-input-root input,
    [b-j2xszuzd5s] .glass-input .mud-input-root textarea,
    [b-j2xszuzd5s] .glass-input .mud-input-root .mud-input-slot {
        color: #f1f5f9 !important;
    }

    [b-j2xszuzd5s] .glass-input .mud-input-root input::placeholder,
    [b-j2xszuzd5s] .glass-input .mud-input-root textarea::placeholder {
        color: #94a3b8 !important;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *[b-j2xszuzd5s],
    *[b-j2xszuzd5s]::before,
    *[b-j2xszuzd5s]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    [b-j2xszuzd5s] .glass-input .mud-input-root {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .forgot-password-button:hover[b-j2xszuzd5s] {
        transform: none !important;
    }

    .success-icon[b-j2xszuzd5s] {
        animation: none !important;
    }
}
/* _content/HomeworkyHelper.Web/Pages/Auth/Login.razor.rz.scp.css */
/* ========================================
   LOGIN CONTAINER & BACKGROUND
   ======================================== */
.login-container[b-ls3012pree] {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    overflow: hidden;
    background: linear-gradient(135deg,
        rgba(32, 168, 85, 0.03) 0%,
        rgba(244, 165, 28, 0.03) 50%,
        rgba(32, 168, 85, 0.05) 100%);
}

/* Remove extra padding on mobile */
@media (max-width: 768px) {
    .login-container[b-ls3012pree] {
        padding: 1rem 1rem;
    }
}

.login-background[b-ls3012pree] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Animated Gradient Orbs */
.gradient-orb[b-ls3012pree] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    animation: float-b-ls3012pree 20s ease-in-out infinite;
    will-change: transform;
    /* GPU acceleration for better performance */
    transform: translateZ(0);
}

.orb-1[b-ls3012pree] {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #20A855 0%, #16a34a 100%);
    top: -200px;
    left: -200px;
    animation-delay: 0s;
}

.orb-2[b-ls3012pree] {
    width: 350px;
    height: 350px;
    background: linear-gradient(135deg, #F4A51C 0%, #f59e0b 100%);
    bottom: -150px;
    right: -150px;
    animation-delay: 5s;
}

.orb-3[b-ls3012pree] {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #20A855 0%, #F4A51C 100%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 10s;
}

@keyframes float-b-ls3012pree {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(30px, -30px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

.login-content[b-ls3012pree] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* ========================================
   BRAND SECTION
   ======================================== */
.brand-section[b-ls3012pree] {
    text-align: center;
    animation: fadeInDown-b-ls3012pree 0.6s ease-out;
    margin-bottom: 1rem;
}

.brand-icon[b-ls3012pree] {
    font-size: 4rem !important;
    color: #20A855;
    margin-bottom: 1rem;
    animation: bounceIn-b-ls3012pree 0.8s ease-out;
    filter: drop-shadow(0 4px 12px rgba(32, 168, 85, 0.3));
}

.brand-title[b-ls3012pree] {
    font-weight: 700;
    background: linear-gradient(135deg, #20A855 0%, #16a34a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    letter-spacing: -0.5px;
}

.brand-subtitle[b-ls3012pree] {
    color: #6b7280;
    font-weight: 500;
    opacity: 0.9;
}

/* ========================================
   LOGIN CARD
   ======================================== */
.login-card[b-ls3012pree] {
    max-width: 460px;
    width: 100%;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}

.animate-fade-in[b-ls3012pree] {
    animation-name: fadeInUp-b-ls3012pree;
    animation-delay: 0.2s;
}

/* ========================================
   INPUT FIELDS
   ======================================== */
.input-wrapper[b-ls3012pree] {
    position: relative;
    margin-bottom: 0;
}

.input-animated[b-ls3012pree] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced glass input styling */
[b-ls3012pree] .glass-input .mud-input-root {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[b-ls3012pree] .glass-input .mud-input-root:hover {
    background: rgba(255, 255, 255, 0.85);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

[b-ls3012pree] .glass-input .mud-input-root.mud-input-focused {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(32, 168, 85, 0.12);
}

[b-ls3012pree] .glass-input .mud-input-root.mud-input-root-outlined .mud-input-slot {
    border-color: rgba(0, 0, 0, 0.12);
    border-width: 1.5px;
}

[b-ls3012pree] .glass-input .mud-input-root.mud-input-root-outlined:hover .mud-input-slot {
    border-color: #20A855;
}

[b-ls3012pree] .glass-input .mud-input-root.mud-input-root-outlined.mud-input-focused .mud-input-slot {
    border-color: #20A855;
    border-width: 2px;
}

[b-ls3012pree] .glass-input .mud-input-adornment svg {
    transition: all 0.3s ease;
}

[b-ls3012pree] .glass-input .mud-input-root:hover .mud-input-adornment svg {
    transform: scale(1.1);
}

/* ========================================
   PASSWORD STRENGTH INDICATOR
   ======================================== */
.password-strength-container[b-ls3012pree] {
    margin-top: 8px;
    animation: slideDown-b-ls3012pree 0.3s ease-out;
}

.password-strength-bar[b-ls3012pree] {
    height: 4px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
}

.password-strength-fill[b-ls3012pree] {
    height: 100%;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 4px;
}

.strength-weak[b-ls3012pree] {
    background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

.strength-medium[b-ls3012pree] {
    background: linear-gradient(90deg, #F4A51C 0%, #f59e0b 100%);
    box-shadow: 0 0 8px rgba(244, 165, 28, 0.4);
}

.strength-strong[b-ls3012pree] {
    background: linear-gradient(90deg, #20A855 0%, #16a34a 100%);
    box-shadow: 0 0 8px rgba(32, 168, 85, 0.4);
}

.password-strength-text[b-ls3012pree] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ========================================
   CHECKBOXES & LINKS
   ======================================== */
[b-ls3012pree] .glass-checkbox label {
    color: #374151;
    font-weight: 500;
    font-size: 0.9rem;
}

[b-ls3012pree] .glass-checkbox .mud-checkbox-root {
    transition: all 0.3s ease;
}

[b-ls3012pree] .glass-checkbox:hover .mud-checkbox-root {
    transform: scale(1.05);
}

.login-link-forgot[b-ls3012pree] {
    color: #20A855;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.login-link-forgot[b-ls3012pree]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #20A855;
    transition: width 0.3s ease;
}

.login-link-forgot:hover[b-ls3012pree] {
    color: #1a8a47;
}

.login-link-forgot:hover[b-ls3012pree]::after {
    width: 100%;
}

/* ========================================
   BUTTONS
   ======================================== */
.login-button[b-ls3012pree] {
    border-radius: 12px;
    text-transform: none;
    font-weight: 600;
    font-size: 1.0625rem;
    padding: 0.875rem 2rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(32, 168, 85, 0.25);
    position: relative;
    overflow: hidden;
}

.login-button[b-ls3012pree]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.login-button:hover[b-ls3012pree]::before {
    width: 300px;
    height: 300px;
}

.login-button:hover[b-ls3012pree] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(32, 168, 85, 0.35);
}

.login-button:active[b-ls3012pree] {
    transform: translateY(0);
}

/* ========================================
   DIVIDER
   ======================================== */
.login-divider[b-ls3012pree] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

[b-ls3012pree] .divider-chip {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #64748b;
    padding: 0 8px;
}

/* ========================================
   GOOGLE BUTTON
   ======================================== */
.google-button[b-ls3012pree] {
    border-radius: 12px;
    text-transform: none;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.875rem 2rem;
    border-width: 2px;
    border-color: rgba(0, 0, 0, 0.12);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
}

.google-button:hover[b-ls3012pree] {
    background: rgba(255, 255, 255, 0.9);
    border-color: #20A855;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.google-button-text[b-ls3012pree] {
    margin-left: 8px;
}

/* ========================================
   SOCIAL ICON BUTTONS
   ======================================== */
.alternative-login-section[b-ls3012pree] {
    background: transparent;
    padding: 1rem 0;
}

.social-icon-button[b-ls3012pree] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
}

.social-icon-button:hover:not(:disabled)[b-ls3012pree] {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
    border-color: #20A855;
}

.social-icon-button:disabled[b-ls3012pree] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ========================================
   REGISTER CTA
   ======================================== */
.register-cta[b-ls3012pree] {
    background: transparent;
    padding: 1rem;
    text-align: center;
}

.login-link-register[b-ls3012pree] {
    color: #20A855;
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
    transition: all 0.3s ease;
    position: relative;
}

.login-link-register[b-ls3012pree]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #20A855 0%, #16a34a 100%);
    transition: width 0.3s ease;
}

.login-link-register:hover[b-ls3012pree] {
    color: #1a8a47;
}

.login-link-register:hover[b-ls3012pree]::after {
    width: 100%;
}

/* ========================================
   FOOTER
   ======================================== */
.login-footer[b-ls3012pree] {
    background: transparent;
    padding: 1rem;
    animation: fadeIn-b-ls3012pree 0.8s ease-out 0.4s both;
}

.login-terms[b-ls3012pree] {
    color: #6b7280;
    font-size: 0.8rem;
}

.login-link-footer[b-ls3012pree] {
    color: #20A855;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.login-link-footer:hover[b-ls3012pree] {
    color: #1a8a47;
    text-decoration: underline;
}

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes fadeInDown-b-ls3012pree {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

@keyframes bounceIn-b-ls3012pree {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

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

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Large Desktop (>1440px) - Optimize for large screens */
@media (min-width: 1441px) {
    .login-content[b-ls3012pree] {
        max-width: 560px;
    }

    .login-card[b-ls3012pree] {

        max-width: 460px;
        width: 100%;
        }

    .orb-1[b-ls3012pree],
    .orb-2[b-ls3012pree],
    .orb-3[b-ls3012pree] {
        width: 450px;
        height: 450px;
        filter: blur(100px);
    }
}

/* Tablet Landscape (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .login-container[b-ls3012pree] {
        padding: 2rem 1.5rem;
    }

    .login-content[b-ls3012pree] {
        max-width: 500px;
    }

    .orb-1[b-ls3012pree],
    .orb-2[b-ls3012pree],
    .orb-3[b-ls3012pree] {
        width: 300px;
        height: 300px;
        filter: blur(70px);
    }
}

/* Tablet Portrait (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .login-container[b-ls3012pree] {
        padding: 1.75rem 1.25rem;
    }

    .login-content[b-ls3012pree] {
        max-width: 460px;
        gap: 1.75rem;
    }

    .brand-icon[b-ls3012pree] {
        font-size: 3.25rem !important;
    }

    .brand-title[b-ls3012pree] {
        font-size: 1.875rem;
    }

    .login-button[b-ls3012pree],
    .google-button[b-ls3012pree] {
        font-size: 1rem;
        padding: 0.8rem 1.75rem;
    }

    .orb-1[b-ls3012pree],
    .orb-2[b-ls3012pree],
    .orb-3[b-ls3012pree] {
        width: 275px;
        height: 275px;
        filter: blur(65px);
    }
}

/* Tablet and Below (<=768px) */
@media (max-width: 768px) {
    .login-container[b-ls3012pree] {
        padding: 1.5rem 1rem;
    }

    .login-content[b-ls3012pree] {
        max-width: 100%;
        gap: 1.5rem;
    }

    .login-card[b-ls3012pree] {
        max-width: 460px;
        width: 100%;
    }

    .brand-icon[b-ls3012pree] {
        font-size: 3rem !important;
    }

    .brand-title[b-ls3012pree] {
        font-size: 1.75rem;
    }

    .login-button[b-ls3012pree],
    .google-button[b-ls3012pree] {
        font-size: 1rem;
        padding: 0.75rem 1.5rem;
    }

    .orb-1[b-ls3012pree],
    .orb-2[b-ls3012pree],
    .orb-3[b-ls3012pree] {
        width: 250px;
        height: 250px;
    }

    [b-ls3012pree] .divider-chip {
        font-size: 0.65rem;
    }
}

/* Mobile (<=480px) */
@media (max-width: 480px) {
    .login-container[b-ls3012pree] {
        padding: 1rem 0.75rem;
    }

    .brand-icon[b-ls3012pree] {
        font-size: 2.5rem !important;
    }

    .brand-title[b-ls3012pree] {
        font-size: 1.5rem;
    }

    .brand-subtitle[b-ls3012pree] {
        font-size: 0.875rem;
    }

    .login-button[b-ls3012pree],
    .google-button[b-ls3012pree] {
        font-size: 0.9375rem;
        padding: 0.75rem 1rem;
    }

    .login-terms[b-ls3012pree] {
        font-size: 0.75rem;
    }

    .alternative-login-section[b-ls3012pree] {
        padding: 0.5rem 0;
    }

    /* Optimize orbs for mobile performance */
    .orb-1[b-ls3012pree],
    .orb-2[b-ls3012pree],
    .orb-3[b-ls3012pree] {
        width: 200px;
        height: 200px;
        filter: blur(60px);
        opacity: 0.35;
        /* Slower animation on mobile to reduce GPU load */
        animation-duration: 30s;
    }

    /* Simplify hover effects on mobile */
    .login-button:hover[b-ls3012pree],
    .google-button:hover[b-ls3012pree] {
        transform: none;
    }

    /* Center "Forgot password" on new row for small width */
    [b-ls3012pree] .login-remember-section {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem;
    }

    .login-link-forgot[b-ls3012pree] {
        align-self: center;
        width: 100%;
        text-align: center;
    }
}

/* Small Mobile (<=375px) */
@media (max-width: 375px) {
    .login-container[b-ls3012pree] {
        padding: 0.875rem 0.5rem;
    }

    .brand-icon[b-ls3012pree] {
        font-size: 2.25rem !important;
    }

    .brand-title[b-ls3012pree] {
        font-size: 1.375rem;
    }

    .login-button[b-ls3012pree],
    .google-button[b-ls3012pree] {
        font-size: 0.875rem;
        padding: 0.625rem 0.875rem;
    }

    /* Further optimize for small screens */
    .orb-1[b-ls3012pree],
    .orb-2[b-ls3012pree],
    .orb-3[b-ls3012pree] {
        width: 180px;
        height: 180px;
        filter: blur(50px);
        opacity: 0.3;
        animation-duration: 35s;
    }
}

/* ========================================
   DARK MODE SUPPORT
   ======================================== */
@media (prefers-color-scheme: dark) {
    .login-container[b-ls3012pree] {
        background: linear-gradient(135deg,
            rgba(32, 168, 85, 0.05) 0%,
            rgba(244, 165, 28, 0.05) 50%,
            rgba(32, 168, 85, 0.08) 100%);
    }

    .brand-subtitle[b-ls3012pree] {
        color: #d1d5db; /* Improved contrast for WCAG AA compliance */
    }

    [b-ls3012pree] .glass-input .mud-input-root {
                background: #f1f5f9;

    }

    [b-ls3012pree] .glass-input .mud-input-root:hover {
                background: #f1f5f9;

    }

    [b-ls3012pree] .glass-input .mud-input-root.mud-input-focused {
        background: #f1f5f9;

    }

    /* Improve text visibility in dark mode */
    [b-ls3012pree] .glass-input .mud-input-root input,
    [b-ls3012pree] .glass-input .mud-input-root textarea,
    [b-ls3012pree] .glass-input .mud-input-root .mud-input-slot {
        color: #f1f5f9 !important;
    }

    [b-ls3012pree] .glass-input .mud-input-root input::placeholder,
    [b-ls3012pree] .glass-input .mud-input-root textarea::placeholder {
        color: #94a3b8 !important;
    }

    .google-button[b-ls3012pree] {
        background: rgba(30, 41, 59, 0.6);
    }

    .google-button:hover[b-ls3012pree] {
        background: rgba(30, 41, 59, 0.9);
    }

    .social-icon-button[b-ls3012pree] {
        background: rgba(30, 41, 59, 0.5);
        border-color: rgba(255, 255, 255, 0.08);
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *[b-ls3012pree],
    *[b-ls3012pree]::before,
    *[b-ls3012pree]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Disable blur filters for motion sensitivity */
    .gradient-orb[b-ls3012pree] {
        filter: none !important;
        opacity: 0.15 !important;
        animation: none !important;
    }

    [b-ls3012pree] .glass-input .mud-input-root {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .google-button[b-ls3012pree],
    .social-icon-button[b-ls3012pree] {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Disable transform effects */
    .login-button:hover[b-ls3012pree],
    .google-button:hover[b-ls3012pree],
    [b-ls3012pree] .glass-input .mud-input-root:hover {
        transform: none !important;
    }
}
/* Add a color shift animation on top of float */
.gradient-orb[b-ls3012pree] {
    position: absolute;
    border-radius: 50%;
    opacity: 0.5;
    will-change: transform, filter;
    transform: translateZ(0);

    /* Keep your float, add hueShift */
    animation:
        float-b-ls3012pree 20s ease-in-out infinite,
        hueShift-b-ls3012pree 28s ease-in-out infinite alternate;
}

/* Slight hue change so it still feels like your green/yellow palette */
@keyframes hueShift-b-ls3012pree {
    0% {
        filter: blur(80px) hue-rotate(0deg);
    }
    50% {
        filter: blur(80px) hue-rotate(18deg);
    }
    100% {
        filter: blur(80px) hue-rotate(-12deg);
    }
}

/* Base login card size */
.login-card[b-ls3012pree] {
    max-width: 460px;
    width: 100%;
    margin: 0 auto;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}

/* On very large screens, keep it nice and tight */
@media (min-width: 1440px) {
    .login-card[b-ls3012pree] {
        max-width: 420px;
    }
}
/* Keep your orb sizes, positions and media-query overrides as they are */

/* _content/HomeworkyHelper.Web/Pages/Auth/Register.razor.rz.scp.css */
.register-container[b-vaiet42mtt] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    background: linear-gradient(135deg,
        rgba(32, 168, 85, 0.03) 0%,
        rgba(244, 165, 28, 0.03) 50%,
        rgba(32, 168, 85, 0.05) 100%);
}

.register-card[b-vaiet42mtt] {
    max-width: 600px;
    width: 100%;
    animation: fadeInUp-b-vaiet42mtt 0.6s ease-out;
}

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

.register-button[b-vaiet42mtt] {
    border-radius: 12px;
    text-transform: none;
    font-weight: 600;
    font-size: 1.0625rem;
    padding: 0.875rem 2rem;
    margin-top: 0.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(32, 168, 85, 0.25);
}

.register-button:hover:not(:disabled)[b-vaiet42mtt] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(32, 168, 85, 0.35);
}

.register-button:active[b-vaiet42mtt] {
    transform: translateY(0);
}

.register-footer[b-vaiet42mtt] {
    color: #6b7280;
}

.register-link[b-vaiet42mtt] {
    color: #20A855;
    font-weight: 600;
    text-decoration: none;
}

.register-link:hover[b-vaiet42mtt] {
    color: #1a8a47;
    text-decoration: underline;
}

.register-terms[b-vaiet42mtt] {
    color: #6b7280;
    max-width: 700px;
    padding: 0 1rem;
}

/* Custom input styling for glassmorphic effect */
[b-vaiet42mtt] .glass-input .mud-input-root {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

[b-vaiet42mtt] .glass-input .mud-input-root:hover {
    background: rgba(255, 255, 255, 0.85);
}

[b-vaiet42mtt] .glass-input .mud-input-root.mud-input-root-outlined .mud-input-slot {
    border-color: rgba(0, 0, 0, 0.15);
}

[b-vaiet42mtt] .glass-input .mud-input-root.mud-input-root-outlined:hover .mud-input-slot {
    border-color: #20A855;
}

[b-vaiet42mtt] .glass-input .mud-input-root.mud-input-root-outlined.mud-input-focused .mud-input-slot {
    border-color: #20A855;
    border-width: 2px;
}

[b-vaiet42mtt] .glass-checkbox label {
    color: #374151;
    font-weight: 500;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablet Landscape (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .register-container[b-vaiet42mtt] {
        padding: 2rem 1.5rem;
    }

    .register-card[b-vaiet42mtt] {
        max-width: 580px;
    }
}

/* Tablet Portrait (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .register-container[b-vaiet42mtt] {
        padding: 1.75rem 1.25rem;
    }

    .register-card[b-vaiet42mtt] {
        max-width: 540px;
    }

    .register-button[b-vaiet42mtt] {
        font-size: 1rem;
        padding: 0.8rem 1.75rem;
    }
}

/* Tablet and Below (<=768px) */
@media (max-width: 768px) {
    .register-container[b-vaiet42mtt] {
        padding: 1.5rem 1rem;
    }

    .register-card[b-vaiet42mtt] {
        max-width: 100%;
    }

    .register-button[b-vaiet42mtt] {
        font-size: 1rem;
        padding: 0.75rem 1.5rem;
    }
}

/* Mobile (<=480px) */
@media (max-width: 480px) {
    .register-container[b-vaiet42mtt] {
        padding: 1rem 0.75rem;
    }

    .register-button[b-vaiet42mtt] {
        font-size: 0.9375rem;
        padding: 0.75rem 1rem;
    }

    /* Simplify hover effects on mobile */
    .register-button:hover[b-vaiet42mtt] {
        transform: none;
    }
}

/* Small Mobile (<=375px) */
@media (max-width: 375px) {
    .register-container[b-vaiet42mtt] {
        padding: 0.875rem 0.5rem;
    }

    .register-button[b-vaiet42mtt] {
        font-size: 0.875rem;
        padding: 0.625rem 0.875rem;
    }

    .register-footer[b-vaiet42mtt],
    .register-terms[b-vaiet42mtt] {
        font-size: 0.875rem;
    }
}

/* ========================================
   DARK MODE SUPPORT
   ======================================== */
@media (prefers-color-scheme: dark) {
    .register-container[b-vaiet42mtt] {
        background: linear-gradient(135deg,
            rgba(32, 168, 85, 0.05) 0%,
            rgba(244, 165, 28, 0.05) 50%,
            rgba(32, 168, 85, 0.08) 100%);
    }

    .register-footer[b-vaiet42mtt],
    .register-terms[b-vaiet42mtt] {
        color: #d1d5db;
    }

    [b-vaiet42mtt] .glass-input .mud-input-root {
        background: rgba(30, 41, 59, 0.7);
    }

    [b-vaiet42mtt] .glass-input .mud-input-root:hover {
        background: rgba(30, 41, 59, 0.85);
    }

    /* Improve text visibility in dark mode */
    [b-vaiet42mtt] .glass-input .mud-input-root input,
    [b-vaiet42mtt] .glass-input .mud-input-root textarea,
    [b-vaiet42mtt] .glass-input .mud-input-root .mud-input-slot,
    [b-vaiet42mtt] .glass-input .mud-input-root .mud-select-input {
        color: #f1f5f9 !important;
    }

    [b-vaiet42mtt] .glass-input .mud-input-root input::placeholder,
    [b-vaiet42mtt] .glass-input .mud-input-root textarea::placeholder {
        color: #94a3b8 !important;
    }

    [b-vaiet42mtt] .glass-checkbox label {
        color: #d1d5db;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *[b-vaiet42mtt],
    *[b-vaiet42mtt]::before,
    *[b-vaiet42mtt]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    [b-vaiet42mtt] .glass-input .mud-input-root {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .register-button:hover[b-vaiet42mtt] {
        transform: none !important;
    }
}
/* _content/HomeworkyHelper.Web/Pages/Error/NotFound.razor.rz.scp.css */
/* Error Container - Full Viewport Centering */
.error-container[b-1e76uymwlc] {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: clamp(20px, 4vw, 40px);
    background: radial-gradient(
        ellipse 120% 80% at 50% 0%,
        rgba(32, 168, 85, 0.05) 0%,
        rgba(32, 168, 85, 0.01) 50%,
        transparent 100%
    );
}

/* Error Card - Glassmorphic */
.error-card[b-1e76uymwlc] {
    max-width: 600px;
    width: 100%;
    padding: clamp(32px, 5vw, 60px);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Error Icon Animation */
.error-icon-wrapper[b-1e76uymwlc] {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(32, 168, 85, 0.1) 0%, rgba(244, 165, 28, 0.1) 100%);
    border-radius: 50%;
    animation: pulse-b-1e76uymwlc 2s ease-in-out infinite;
}

.error-icon[b-1e76uymwlc] {
    font-size: 64px !important;
    color: #20A855;
}

@keyframes pulse-b-1e76uymwlc {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(32, 168, 85, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 15px rgba(32, 168, 85, 0);
    }
}

/* Error Code - Large Display */
.error-code[b-1e76uymwlc] {
    font-size: clamp(64px, 15vw, 120px) !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #20A855 0%, #F4A51C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -2px;
    margin: 0 !important;
}

/* Error Title */
.error-title[b-1e76uymwlc] {
    font-weight: 600 !important;
    color: #1f2937;
    margin: 0 !important;
}

/* Error Description */
.error-description[b-1e76uymwlc] {
    max-width: 480px;
    line-height: 1.6;
    margin: 0 !important;
}

/* Suggestions Box */
.suggestions-box[b-1e76uymwlc] {
    width: 100%;
    padding: 24px;
    border-radius: 12px;
    background: rgba(249, 250, 251, 0.9);
    border: 1px solid rgba(229, 231, 235, 0.8);
}

/* Link Buttons - Responsive Stack */
.link-buttons[b-1e76uymwlc] {
    flex-wrap: wrap;
}

/* Mobile Optimization */
@media (max-width: 768px) {
    .error-container[b-1e76uymwlc] {
        padding: 20px;
    }

    .error-card[b-1e76uymwlc] {
        padding: 32px 24px;
    }

    .error-icon-wrapper[b-1e76uymwlc] {
        width: 100px;
        height: 100px;
    }

    .error-icon[b-1e76uymwlc] {
        font-size: 48px !important;
    }

    .error-code[b-1e76uymwlc] {
        font-size: 72px !important;
    }

    .error-title[b-1e76uymwlc] {
        font-size: 1.75rem !important;
    }

    .link-buttons[b-1e76uymwlc] {
        flex-direction: column;
        width: 100%;
    }

    .link-buttons[b-1e76uymwlc]  .mud-button {
        width: 100%;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .error-code[b-1e76uymwlc] {
        font-size: 56px !important;
    }

    .error-title[b-1e76uymwlc] {
        font-size: 1.5rem !important;
    }

    .suggestions-box[b-1e76uymwlc] {
        padding: 20px 16px;
    }
}

/* Hover Effects */
[b-1e76uymwlc] .mud-button:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
}

[b-1e76uymwlc] .mud-button:active {
    transform: translateY(0);
}
/* _content/HomeworkyHelper.Web/Pages/Index.razor.rz.scp.css */
[b-26faeytssp] .mud-container {
    background: linear-gradient(135deg, rgba(32, 168, 85, 0.05) 0%, rgba(244, 165, 28, 0.05) 100%);
    min-height: 100vh;
    padding-top: 1rem;
    padding-bottom: 2rem;
}

.page-header[b-26faeytssp] {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
}

.page-subheader[b-26faeytssp] {
    font-size: 1rem;
    color: #6b7280;
    margin-bottom: 1.5rem;
}

/* Ensure cards have proper spacing */
[b-26faeytssp] .mud-item {
    margin-bottom: 1rem;
}

/* Dashboard premium/upgrade badges - hide text on small widths */
@media (max-width: 768px) {
    .dashboard-premium-text[b-26faeytssp],
    .dashboard-upgrade-text[b-26faeytssp],
    .dashboard-premium-chip[b-26faeytssp],
    .dashboard-upgrade-button[b-26faeytssp] {
        display: none !important;
    }

    .dashboard-premium-badge[b-26faeytssp],
    .dashboard-upgrade-badge[b-26faeytssp] {
        min-width: auto !important;
        padding: 0.75rem !important;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .page-header[b-26faeytssp] {
        font-size: 1.5rem;
    }

    .page-subheader[b-26faeytssp] {
        font-size: 0.9375rem;
    }

    [b-26faeytssp] .mud-container {
        padding-top: 0.5rem;
        padding-bottom: 1.5rem;
    }
}

@media (max-width: 375px) {
    .page-header[b-26faeytssp] {
        font-size: 1.375rem;
    }

    .page-subheader[b-26faeytssp] {
        font-size: 0.875rem;
    }

    [b-26faeytssp] .mud-container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}
/* _content/HomeworkyHelper.Web/Pages/Legal/Privacy.razor.rz.scp.css */
/* Legal Page Container */
[b-m42v2bndu2] .legal-page {
    padding: clamp(24px, 4vw, 60px) clamp(16px, 3vw, 40px);
    min-height: 100vh;
}

/* Glass Header - Enhanced Glassmorphic Design */
[b-m42v2bndu2] .glass-header {
    margin-bottom: 32px;
    padding: clamp(32px, 5vw, 48px) clamp(24px, 4vw, 40px);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.8) 100%
    );
    backdrop-filter: blur(16px) saturate(120%);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow:
        0 8px 32px rgba(32, 168, 85, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

[b-m42v2bndu2] .legal-title {
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

/* Glass Content Card - Enhanced Glassmorphic Design */
[b-m42v2bndu2] .glass-content {
    padding: clamp(32px, 5vw, 56px);
    border-radius: 20px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.85) 100%
    );
    backdrop-filter: blur(20px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.06),
        0 4px 12px rgba(0, 0, 0, 0.03),
        inset 0 1px 2px rgba(255, 255, 255, 0.9);
}

/* Section Spacing & Typography */
[b-m42v2bndu2] .glass-content h5,
[b-m42v2bndu2] .glass-content .mud-typography-h5 {
    margin-top: 40px;
    margin-bottom: 20px;
    color: #20A855;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
}

[b-m42v2bndu2] .glass-content h5:first-child,
[b-m42v2bndu2] .glass-content .mud-typography-h5:first-child {
    margin-top: 0;
}

[b-m42v2bndu2] .glass-content h6,
[b-m42v2bndu2] .glass-content .mud-typography-h6 {
    margin-top: 28px;
    margin-bottom: 16px;
    color: #059669;
    font-weight: 600;
}

[b-m42v2bndu2] .glass-content .mud-typography-body1 {
    line-height: 1.75;
    color: #374151;
}

/* Plan Boxes - Enhanced Glass Effect */
[b-m42v2bndu2] .plan-box {
    padding: 24px;
    border-radius: 16px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.7) 0%,
        rgba(249, 250, 251, 0.9) 100%
    );
    backdrop-filter: blur(10px);
    border: 1px solid rgba(229, 231, 235, 0.6);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    height: 100%;
    transition: all 0.3s ease;
}

[b-m42v2bndu2] .plan-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

[b-m42v2bndu2] .premium-box {
    background: linear-gradient(
        135deg,
        rgba(32, 168, 85, 0.12) 0%,
        rgba(244, 165, 28, 0.10) 100%
    );
    border: 2px solid rgba(32, 168, 85, 0.4);
}

[b-m42v2bndu2] .plan-box strong {
    color: #20A855;
    font-size: 1.15rem;
    font-weight: 700;
}

/* Contact Box - Enhanced Glass Effect */
[b-m42v2bndu2] .contact-box {
    padding: 28px;
    border-radius: 16px;
    background: linear-gradient(
        135deg,
        rgba(249, 250, 251, 0.95) 0%,
        rgba(243, 244, 246, 0.95) 100%
    );
    backdrop-filter: blur(12px);
    border: 1px solid rgba(209, 213, 219, 0.5);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    margin-top: 20px;
}

/* List Styling - Enhanced */
[b-m42v2bndu2] .mud-list-item {
    padding: 10px 0;
    line-height: 1.6;
}

[b-m42v2bndu2] .mud-list-item-icon {
    min-width: 40px;
    color: #20A855;
}

[b-m42v2bndu2] .mud-list-item-text {
    color: #374151;
}

/* Buttons - Glassmorphic */
[b-m42v2bndu2] .mt-6 .mud-button {
    border-radius: 12px;
    font-weight: 600;
    text-transform: none;
    padding: 12px 32px;
    transition: all 0.3s ease;
}

[b-m42v2bndu2] .mt-6 .mud-button-filled {
    box-shadow: 0 4px 16px rgba(32, 168, 85, 0.25);
}

[b-m42v2bndu2] .mt-6 .mud-button-filled:hover {
    box-shadow: 0 8px 24px rgba(32, 168, 85, 0.35);
    transform: translateY(-2px);
}

[b-m42v2bndu2] .mt-6 .mud-button-outlined {
    border: 2px solid #20A855;
}

[b-m42v2bndu2] .mt-6 .mud-button-outlined:hover {
    background: rgba(32, 168, 85, 0.05);
    transform: translateY(-2px);
}

/* Mobile Optimization */
@media (max-width: 768px) {
    [b-m42v2bndu2] .legal-page {
        padding: 20px 16px;
    }

    [b-m42v2bndu2] .glass-header {
        padding: 28px 20px;
        margin-bottom: 24px;
    }

    [b-m42v2bndu2] .glass-content {
        padding: 28px 20px;
    }

    [b-m42v2bndu2] .glass-content h5,
    [b-m42v2bndu2] .glass-content .mud-typography-h5 {
        font-size: 1.25rem;
        margin-top: 32px;
    }

    [b-m42v2bndu2] .glass-content h6,
    [b-m42v2bndu2] .glass-content .mud-typography-h6 {
        font-size: 1.1rem;
        margin-top: 24px;
    }

    [b-m42v2bndu2] .contact-box {
        padding: 20px;
    }

    [b-m42v2bndu2] .mt-6.mud-stack-row {
        flex-direction: column;
        width: 100%;
    }

    [b-m42v2bndu2] .mt-6 .mud-button {
        width: 100%;
        padding: 14px 24px;
    }
}

/* Divider Styling */
[b-m42v2bndu2] .my-4 {
    margin: 32px 0;
    opacity: 0.6;
}

/* Animations */
@keyframes fadeInUp-b-m42v2bndu2 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[b-m42v2bndu2] .glass-header,
[b-m42v2bndu2] .glass-content {
    animation: fadeInUp-b-m42v2bndu2 0.6s ease-out;
}

/* Print Styles */
@media print {
    [b-m42v2bndu2] .legal-page {
        padding: 20px;
    }

    [b-m42v2bndu2] .glass-header,
    [b-m42v2bndu2] .glass-content {
        background: white;
        border: 1px solid #ddd;
        box-shadow: none;
        backdrop-filter: none;
    }

    [b-m42v2bndu2] .mud-button {
        display: none;
    }

    [b-m42v2bndu2] .mud-icon {
        color: #000 !important;
    }
}
/* _content/HomeworkyHelper.Web/Pages/Legal/Terms.razor.rz.scp.css */
/* Legal Page Container */
[b-6t34jblghh] .legal-page {
    padding: clamp(24px, 4vw, 60px) clamp(16px, 3vw, 40px);
    min-height: 100vh;
}

/* Glass Header - Enhanced Glassmorphic Design */
[b-6t34jblghh] .glass-header {
    margin-bottom: 32px;
    padding: clamp(32px, 5vw, 48px) clamp(24px, 4vw, 40px);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.8) 100%
    );
    backdrop-filter: blur(16px) saturate(120%);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow:
        0 8px 32px rgba(32, 168, 85, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

[b-6t34jblghh] .legal-title {
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

/* Glass Content Card - Enhanced Glassmorphic Design */
[b-6t34jblghh] .glass-content {
    padding: clamp(32px, 5vw, 56px);
    border-radius: 20px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.85) 100%
    );
    backdrop-filter: blur(20px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.06),
        0 4px 12px rgba(0, 0, 0, 0.03),
        inset 0 1px 2px rgba(255, 255, 255, 0.9);
}

/* Section Spacing & Typography */
[b-6t34jblghh] .glass-content h5,
[b-6t34jblghh] .glass-content .mud-typography-h5 {
    margin-top: 40px;
    margin-bottom: 20px;
    color: #20A855;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
}

[b-6t34jblghh] .glass-content h5:first-child,
[b-6t34jblghh] .glass-content .mud-typography-h5:first-child {
    margin-top: 0;
}

[b-6t34jblghh] .glass-content h6,
[b-6t34jblghh] .glass-content .mud-typography-h6 {
    margin-top: 28px;
    margin-bottom: 16px;
    color: #059669;
    font-weight: 600;
}

[b-6t34jblghh] .glass-content .mud-typography-body1 {
    line-height: 1.75;
    color: #374151;
}

/* Plan Boxes - Enhanced Glass Effect */
[b-6t34jblghh] .plan-box {
    padding: 24px;
    border-radius: 16px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.7) 0%,
        rgba(249, 250, 251, 0.9) 100%
    );
    backdrop-filter: blur(10px);
    border: 1px solid rgba(229, 231, 235, 0.6);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    height: 100%;
    transition: all 0.3s ease;
}

[b-6t34jblghh] .plan-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

[b-6t34jblghh] .premium-box {
    background: linear-gradient(
        135deg,
        rgba(32, 168, 85, 0.12) 0%,
        rgba(244, 165, 28, 0.10) 100%
    );
    border: 2px solid rgba(32, 168, 85, 0.4);
}

[b-6t34jblghh] .plan-box strong {
    color: #20A855;
    font-size: 1.15rem;
    font-weight: 700;
}

/* Contact Box - Enhanced Glass Effect */
[b-6t34jblghh] .contact-box {
    padding: 28px;
    border-radius: 16px;
    background: linear-gradient(
        135deg,
        rgba(249, 250, 251, 0.95) 0%,
        rgba(243, 244, 246, 0.95) 100%
    );
    backdrop-filter: blur(12px);
    border: 1px solid rgba(209, 213, 219, 0.5);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    margin-top: 20px;
}

/* List Styling - Enhanced */
[b-6t34jblghh] .mud-list-item {
    padding: 10px 0;
    line-height: 1.6;
}

[b-6t34jblghh] .mud-list-item-icon {
    min-width: 40px;
    color: #20A855;
}

[b-6t34jblghh] .mud-list-item-text {
    color: #374151;
}

/* Buttons - Glassmorphic */
[b-6t34jblghh] .mt-6 .mud-button {
    border-radius: 12px;
    font-weight: 600;
    text-transform: none;
    padding: 12px 32px;
    transition: all 0.3s ease;
}

[b-6t34jblghh] .mt-6 .mud-button-filled {
    box-shadow: 0 4px 16px rgba(32, 168, 85, 0.25);
}

[b-6t34jblghh] .mt-6 .mud-button-filled:hover {
    box-shadow: 0 8px 24px rgba(32, 168, 85, 0.35);
    transform: translateY(-2px);
}

[b-6t34jblghh] .mt-6 .mud-button-outlined {
    border: 2px solid #20A855;
}

[b-6t34jblghh] .mt-6 .mud-button-outlined:hover {
    background: rgba(32, 168, 85, 0.05);
    transform: translateY(-2px);
}

/* Mobile Optimization */
@media (max-width: 768px) {
    [b-6t34jblghh] .legal-page {
        padding: 20px 16px;
    }

    [b-6t34jblghh] .glass-header {
        padding: 28px 20px;
        margin-bottom: 24px;
    }

    [b-6t34jblghh] .glass-content {
        padding: 28px 20px;
    }

    [b-6t34jblghh] .glass-content h5,
    [b-6t34jblghh] .glass-content .mud-typography-h5 {
        font-size: 1.25rem;
        margin-top: 32px;
    }

    [b-6t34jblghh] .glass-content h6,
    [b-6t34jblghh] .glass-content .mud-typography-h6 {
        font-size: 1.1rem;
        margin-top: 24px;
    }

    [b-6t34jblghh] .contact-box {
        padding: 20px;
    }

    [b-6t34jblghh] .mt-6.mud-stack-row {
        flex-direction: column;
        width: 100%;
    }

    [b-6t34jblghh] .mt-6 .mud-button {
        width: 100%;
        padding: 14px 24px;
    }
}

/* Divider Styling */
[b-6t34jblghh] .my-4 {
    margin: 32px 0;
    opacity: 0.6;
}

/* Animations */
@keyframes fadeInUp-b-6t34jblghh {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[b-6t34jblghh] .glass-header,
[b-6t34jblghh] .glass-content {
    animation: fadeInUp-b-6t34jblghh 0.6s ease-out;
}

/* Print Styles */
@media print {
    [b-6t34jblghh] .legal-page {
        padding: 20px;
    }

    [b-6t34jblghh] .glass-header,
    [b-6t34jblghh] .glass-content {
        background: white;
        border: 1px solid #ddd;
        box-shadow: none;
        backdrop-filter: none;
    }

    [b-6t34jblghh] .mud-button {
        display: none;
    }

    [b-6t34jblghh] .mud-icon {
        color: #000 !important;
    }
}
/* _content/HomeworkyHelper.Web/Pages/Subscription/Plans.razor.rz.scp.css */
/* Modern SaaS Pricing Page - MudBlazor Theme Colors Only */

/* Popular Badge Positioning */
.popular-badge[b-gpsw9icpi2] {
    position: absolute !important;
    top: 12px;
    right: 12px;
    z-index: 1;
}

/* Popular Card Styling - Enhanced Elevation */
[b-gpsw9icpi2] .plan-card-popular {
    position: relative;
    border: 2px solid var(--mud-palette-primary) !important;
    transition: all 0.3s ease;
}

[b-gpsw9icpi2] .plan-card-popular:hover {
    transform: translateY(-4px);
}

/* Regular Card Hover */
[b-gpsw9icpi2] .plan-card {
    position: relative;
    transition: all 0.3s ease;
}

[b-gpsw9icpi2] .plan-card:hover {
    transform: translateY(-2px);
}

/* Responsive adjustments for mobile */
@media (max-width: 960px) {
    .popular-badge[b-gpsw9icpi2] {
        top: 8px;
        right: 8px;
    }
}
/* _content/HomeworkyHelper.Web/Pages/Subscription/Success.razor.rz.scp.css */
.checkout-container[b-tg8ksh5kjt] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(32, 168, 85, 0.05) 0%, rgba(244, 165, 28, 0.05) 100%);
}

.checkout-card[b-tg8ksh5kjt] {
    max-width: 600px;
    width: 100%;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(120%);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    padding: 3rem;
    text-align: center;
    animation: slideUp-b-tg8ksh5kjt 0.5s ease-out;
}

@keyframes slideUp-b-tg8ksh5kjt {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.icon-container[b-tg8ksh5kjt] {
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
}

.icon-container .mud-icon-root[b-tg8ksh5kjt] {
    font-size: 5rem;
}

.checkout-title[b-tg8ksh5kjt] {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 1rem;
}

.checkout-message[b-tg8ksh5kjt] {
    font-size: 1.125rem;
    color: #6b7280;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.checkout-submessage[b-tg8ksh5kjt] {
    font-size: 0.9375rem;
    color: #9ca3af;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.features-summary[b-tg8ksh5kjt] {
    background: rgba(32, 168, 85, 0.05);
    border-radius: 16px;
    padding: 1.5rem;
    margin: 2rem 0;
    text-align: left;
}

.features-summary h3[b-tg8ksh5kjt] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 1rem;
}

.features-summary ul[b-tg8ksh5kjt] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.features-summary li[b-tg8ksh5kjt] {
    padding: 0.5rem 0;
    color: #374151;
    font-size: 1rem;
    position: relative;
    padding-left: 1.5rem;
}

.features-summary li[b-tg8ksh5kjt]::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #20A855;
    font-weight: 700;
}

.actions[b-tg8ksh5kjt] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}

.action-button[b-tg8ksh5kjt] {
    border-radius: 12px;
    text-transform: none;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.875rem 2rem;
}

.checkout-card.verifying .icon-container[b-tg8ksh5kjt] {
    animation: pulse-b-tg8ksh5kjt 2s ease-in-out infinite;
}

@keyframes pulse-b-tg8ksh5kjt {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

.checkout-card.success[b-tg8ksh5kjt] {
    border-color: rgba(32, 168, 85, 0.3);
}

.checkout-card.error[b-tg8ksh5kjt] {
    border-color: rgba(239, 68, 68, 0.3);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .checkout-container[b-tg8ksh5kjt] {
        padding: 1.5rem;
    }

    .checkout-card[b-tg8ksh5kjt] {
        padding: 2rem 1.5rem;
    }

    .checkout-title[b-tg8ksh5kjt] {
        font-size: 1.75rem;
    }

    .checkout-message[b-tg8ksh5kjt] {
        font-size: 1rem;
    }

    .icon-container .mud-icon-root[b-tg8ksh5kjt] {
        font-size: 4rem;
    }
}

@media (max-width: 375px) {
    .checkout-container[b-tg8ksh5kjt] {
        padding: 1rem;
    }

    .checkout-card[b-tg8ksh5kjt] {
        padding: 1.5rem 1rem;
    }

    .checkout-title[b-tg8ksh5kjt] {
        font-size: 1.5rem;
    }

    .features-summary[b-tg8ksh5kjt] {
        padding: 1rem;
    }
}