/* /Components/Aulas/AulaCard.razor.rz.scp.css */
.aula-card {
    display: flex;

    align-items: center;

    gap:
        var(--spacing-4);

    padding:
        var(--spacing-4) var(--spacing-5);

    background:
        var(--color-surface);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-lg);

    transition:
        border-color var(--transition-fast),
        transform var(--transition-fast);
}


.aula-card:hover {
    border-color:
        var(--color-border-hover);

    transform:
        translateY(-1px);
}


.aula-card__icon {
    display: grid;

    place-items: center;

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    color:
        var(--color-primary);

    background:
        var(--color-primary-soft);

    border-radius:
        var(--radius-md);
}


.aula-card__body {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}


.aula-card__body strong {
    overflow: hidden;

    color:
        var(--color-text);

    font-size: 0.96rem;
    font-weight: 700;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.aula-card__body p {
    overflow: hidden;

    color:
        var(--color-text-muted);

    font-size: 0.84rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.aula-card  .app-icon:last-child {
    flex-shrink: 0;

    color:
        var(--color-text-muted);
}
/* /Components/Aulas/TopicFormModal.razor.rz.scp.css */
.topic-form {
    display: flex;
    flex-direction: column;

    gap:
        var(--spacing-4);
}
/* /Components/Aulas/TopicListItem.razor.rz.scp.css */
.topic-item {
    display: flex;

    align-items: center;

    gap:
        var(--spacing-3);

    padding:
        var(--spacing-3) var(--spacing-4);

    background:
        var(--color-surface);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-md);
}


.topic-item__body {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}


.topic-item__number {
    color:
        var(--color-primary);

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.04em;
    text-transform: uppercase;
}


.topic-item__body strong {
    overflow: hidden;

    color:
        var(--color-text);

    font-size: 0.92rem;
    font-weight: 650;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.topic-item__body p {
    overflow: hidden;

    color:
        var(--color-text-muted);

    font-size: 0.8rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.topic-item__actions {
    display: flex;
    flex-shrink: 0;

    gap: 4px;
}


.topic-item__action {
    display: grid;

    place-items: center;

    width: 30px;
    height: 30px;

    color:
        var(--color-text-secondary);

    background:
        transparent;

    border-radius:
        var(--radius-sm);

    cursor: pointer;

    transition:
        color var(--transition-fast),
        background var(--transition-fast);
}


.topic-item__action:hover:not(:disabled) {
    color:
        var(--color-text);

    background:
        var(--color-surface-secondary);
}


.topic-item__action:disabled {
    opacity: 0.3;

    cursor:
        not-allowed;
}


.topic-item__action--danger:hover:not(:disabled) {
    color:
        var(--color-danger);

    background:
        rgba(239, 98, 108, 0.1);
}


.topic-item__action  .app-icon {
    width: 16px;
    height: 16px;
}
/* /Components/Auth/AuthPageShell.razor.rz.scp.css */
.auth-page {
    min-height: 100vh;

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
        var(--spacing-6);

    background:
        var(--gradient-background),
        var(--color-background);
}


.auth-page__card {
    width: 100%;
    max-width: 420px;

    padding:
        var(--spacing-8);

    background:
        var(--color-surface);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-xl);

    box-shadow:
        var(--shadow-medium);
}


.auth-page__brand {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom:
        var(--spacing-6);

    color:
        var(--color-text);

    font-size: 1.05rem;
    font-weight: 750;

    letter-spacing: -0.03em;
}


.auth-page__brand-icon {
    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    background:
        var(--gradient-primary);

    border-radius:
        var(--radius-sm);

    box-shadow:
        0 8px 24px
        rgba(124, 92, 255, 0.2);
}


.auth-page__brand-icon svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: white;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.auth-page__brand-accent {
    color:
        var(--color-primary);
}


.auth-page__title {
    color:
        var(--color-text);

    font-size: 1.5rem;
    font-weight: 800;

    letter-spacing: -0.02em;
}


.auth-page__subtitle {
    margin-top: 6px;

    color:
        var(--color-text-secondary);

    font-size: 0.9rem;

    line-height: 1.5;
}


.auth-page__card  .auth-form {
    margin-top:
        var(--spacing-6);
}


.auth-page__footer {
    margin-top:
        var(--spacing-6);

    padding-top:
        var(--spacing-5);

    border-top:
        1px solid var(--color-border);

    color:
        var(--color-text-secondary);

    font-size: 0.86rem;
    text-align: center;
}


.auth-page__footer  a {
    color:
        var(--color-primary);

    font-weight: 600;
}
/* /Components/Common/AppBadge.razor.rz.scp.css */
.app-badge {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding:
        4px 11px;

    border-radius:
        var(--radius-pill);

    font-size: 0.76rem;
    font-weight: 650;

    white-space: nowrap;
}


.app-badge--neutral {
    color:
        var(--color-text-secondary);

    background:
        var(--color-surface-secondary);

    border:
        1px solid var(--color-border);
}


.app-badge--primary {
    color:
        var(--color-primary);

    background:
        var(--color-primary-soft);

    border:
        1px solid var(--color-primary-border);
}


.app-badge--success {
    color:
        var(--color-success);

    background:
        rgba(62, 214, 160, 0.12);

    border:
        1px solid rgba(62, 214, 160, 0.28);
}


.app-badge--warning {
    color:
        var(--color-warning);

    background:
        rgba(245, 185, 76, 0.12);

    border:
        1px solid rgba(245, 185, 76, 0.28);
}


.app-badge--danger {
    color:
        var(--color-danger);

    background:
        rgba(239, 98, 108, 0.12);

    border:
        1px solid rgba(239, 98, 108, 0.28);
}
/* /Components/Common/AppButton.razor.rz.scp.css */
.app-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    border:
        1px solid transparent;

    border-radius:
        var(--radius-md);

    font-weight: 650;

    white-space: nowrap;

    cursor: pointer;

    transition:
        color var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}


.app-button:hover {
    transform:
        translateY(-1px);
}


.app-button:active {
    transform:
        translateY(0);
}


.app-button:disabled {
    opacity: 0.45;

    cursor:
        not-allowed;

    transform: none;
}


/* =========================================================
   SIZES
   ========================================================= */

.app-button--small {
    min-height: 36px;

    padding:
        7px 13px;

    font-size:
        0.84rem;
}


.app-button--normal {
    min-height: 43px;

    padding:
        9px 17px;

    font-size:
        0.92rem;
}


.app-button--large {
    min-height: 52px;

    padding:
        13px 22px;

    font-size:
        0.98rem;
}


/* =========================================================
   PRIMARY
   ========================================================= */

.app-button--primary {
    color: white;

    background:
        var(--color-primary);

    box-shadow:
        0 8px 24px
        rgba(124, 92, 255, 0.2);
}


.app-button--primary:hover {
    background:
        var(--color-primary-hover);

    box-shadow:
        0 12px 30px
        rgba(124, 92, 255, 0.28);
}


/* =========================================================
   SECONDARY
   ========================================================= */

.app-button--secondary {
    color:
        var(--color-text);

    background:
        rgba(255, 255, 255, 0.035);

    border-color:
        var(--color-border);
}


.app-button--secondary:hover {
    background:
        var(--color-surface-secondary);

    border-color:
        var(--color-border-hover);
}


/* =========================================================
   GHOST
   ========================================================= */

.app-button--ghost {
    color:
        var(--color-text-secondary);

    background:
        transparent;
}


.app-button--ghost:hover {
    color:
        var(--color-text);

    background:
        rgba(255, 255, 255, 0.04);
}


/* =========================================================
   DANGER
   ========================================================= */

.app-button--danger {
    color: white;

    background:
        var(--color-danger);

    box-shadow:
        0 8px 24px
        rgba(239, 98, 108, 0.2);
}


.app-button--danger:hover {
    background:
        #f37881;

    box-shadow:
        0 12px 30px
        rgba(239, 98, 108, 0.28);
}
/* /Components/Common/AppCard.razor.rz.scp.css */
.app-card {
    background:
        var(--color-surface);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-lg);

    padding:
        var(--spacing-6);

    transition:
        border-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}


.app-card--hoverable:hover {
    border-color:
        var(--color-border-hover);

    transform:
        translateY(-2px);

    box-shadow:
        var(--shadow-small);
}


@media (max-width: 560px) {

    .app-card {
        padding:
            var(--spacing-5);
    }

}
/* /Components/Common/AppIcon.razor.rz.scp.css */
.app-icon {
    width: 20px;
    height: 20px;

    flex-shrink: 0;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}
/* /Components/Common/AppInput.razor.rz.scp.css */
.app-field {
    display: flex;
    flex-direction: column;

    gap: 7px;

    width: 100%;
}


.app-field__label {
    color:
        var(--color-text-secondary);

    font-size: 0.84rem;
    font-weight: 600;
}


.app-field__required {
    color:
        var(--color-danger);

    margin-left: 2px;
}


.app-field__control {
    width: 100%;

    min-height: 44px;

    padding:
        10px 14px;

    color:
        var(--color-text);

    background:
        var(--color-surface);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-md);

    font-size: 0.92rem;

    transition:
        border-color var(--transition-fast),
        background var(--transition-fast);
}


.app-field__control::placeholder {
    color:
        var(--color-text-muted);
}


.app-field__control:hover {
    border-color:
        var(--color-border-hover);
}


.app-field__control:focus {
    outline: none;

    border-color:
        var(--color-primary);

    background:
        var(--color-surface-secondary);
}


.app-field__control:disabled {
    opacity: 0.5;

    cursor:
        not-allowed;
}


.app-field__control--error {
    border-color:
        var(--color-danger);
}


.app-field__control--textarea {
    min-height: 100px;

    resize: vertical;

    font-family: inherit;
}


.app-field__error {
    color:
        var(--color-danger);

    font-size: 0.8rem;
}
/* /Components/Common/AppModal.razor.rz.scp.css */
.app-modal-overlay {
    position: fixed;
    inset: 0;

    z-index: 1000;

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
        var(--spacing-4);

    background:
        rgba(3, 4, 8, 0.6);

    backdrop-filter:
        blur(4px);

    -webkit-backdrop-filter:
        blur(4px);

    animation:
        app-modal-fade-in-b-92k132w1w0 var(--transition-normal);
}


.app-modal {
    width: 100%;
    max-width: 480px;

    max-height: 90vh;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background:
        var(--color-surface);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-large);

    animation:
        app-modal-scale-in-b-92k132w1w0 var(--transition-normal);
}


.app-modal__header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap:
        var(--spacing-4);

    padding:
        var(--spacing-5) var(--spacing-6);

    border-bottom:
        1px solid var(--color-border);
}


.app-modal__title {
    color:
        var(--color-text);

    font-size: 1.05rem;
    font-weight: 700;
}


.app-modal__close {
    display: grid;

    place-items: center;

    width: 30px;
    height: 30px;

    color:
        var(--color-text-muted);

    background:
        transparent;

    border-radius:
        var(--radius-sm);

    cursor: pointer;

    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}


.app-modal__close:hover {
    color:
        var(--color-text);

    background:
        var(--color-surface-secondary);
}


.app-modal__body {
    padding:
        var(--spacing-6);

    overflow-y: auto;

    color:
        var(--color-text-secondary);

    font-size: 0.92rem;
    line-height: 1.6;
}


.app-modal__footer {
    display: flex;
    flex-wrap: wrap;

    align-items: center;
    justify-content: flex-end;

    gap:
        var(--spacing-3);

    padding:
        var(--spacing-5) var(--spacing-6);

    border-top:
        1px solid var(--color-border);
}


@keyframes app-modal-fade-in-b-92k132w1w0 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes app-modal-scale-in-b-92k132w1w0 {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(6px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
/* /Components/Common/AppProgress.razor.rz.scp.css */
.app-progress {
    display: flex;
    flex-direction: column;

    gap: 8px;

    width: 100%;
}


.app-progress__header {
    display: flex;

    align-items: center;
    justify-content: space-between;
}


.app-progress__label {
    color:
        var(--color-text-secondary);

    font-size: 0.82rem;
    font-weight: 600;
}


.app-progress__value {
    color:
        var(--color-text);

    font-size: 0.82rem;
    font-weight: 700;
}


.app-progress__track {
    width: 100%;
    height: 8px;

    background:
        var(--color-surface-secondary);

    border-radius:
        var(--radius-pill);

    overflow: hidden;
}


.app-progress__fill {
    height: 100%;

    background:
        var(--gradient-primary);

    border-radius:
        var(--radius-pill);

    transition:
        width var(--transition-normal);
}
/* /Components/Common/AppSelect.razor.rz.scp.css */
.app-field__control {
    appearance: none;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a5adbb' stroke-width='1.6' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: right 14px center;

    padding-right: 36px;

    cursor: pointer;
}
/* /Components/Common/AppSpinner.razor.rz.scp.css */
.app-spinner {
    display: inline-block;

    border-radius: 50%;

    border:
        2px solid var(--color-border);

    border-top-color:
        var(--color-primary);

    animation:
        app-spinner-spin-b-112wi105tw 0.7s linear infinite;
}


.app-spinner--small {
    width: 16px;
    height: 16px;
}


.app-spinner--normal {
    width: 26px;
    height: 26px;

    border-width: 3px;
}


.app-spinner--large {
    width: 40px;
    height: 40px;

    border-width: 3px;
}


@keyframes app-spinner-spin-b-112wi105tw {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Common/EmptyState.razor.rz.scp.css */
.empty-state {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: var(--spacing-2);

    padding:
        var(--spacing-16) var(--spacing-6);

    text-align: center;
}


.empty-state__icon {
    display: grid;

    place-items: center;

    width: 64px;
    height: 64px;

    margin-bottom:
        var(--spacing-2);

    background:
        var(--color-surface-secondary);

    border-radius:
        var(--radius-xl);

    font-size: 1.7rem;
}


.empty-state__title {
    color:
        var(--color-text);

    font-size: 1.05rem;
    font-weight: 700;
}


.empty-state__description {
    max-width: 380px;

    color:
        var(--color-text-muted);

    font-size: 0.88rem;
    line-height: 1.6;
}


.empty-state__actions {
    display: flex;
    flex-wrap: wrap;

    align-items: center;
    justify-content: center;

    gap: var(--spacing-3);

    margin-top:
        var(--spacing-3);
}


@media (max-width: 560px) {

    .empty-state {
        padding:
            var(--spacing-10) var(--spacing-3);
    }


    .empty-state__icon {
        width: 56px;
        height: 56px;

        border-radius:
            var(--radius-lg);

        font-size: 1.5rem;
    }

}
/* /Components/Common/ErrorState.razor.rz.scp.css */
.error-state {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: var(--spacing-2);

    padding:
        var(--spacing-16) var(--spacing-6);

    text-align: center;
}


.error-state__icon {
    display: grid;

    place-items: center;

    width: 64px;
    height: 64px;

    margin-bottom:
        var(--spacing-2);

    color:
        var(--color-danger);

    background:
        rgba(239, 98, 108, 0.1);

    border-radius:
        var(--radius-xl);

    font-size: 1.6rem;
}


.error-state__title {
    color:
        var(--color-text);

    font-size: 1.05rem;
    font-weight: 700;
}


.error-state__description {
    max-width: 380px;

    color:
        var(--color-text-muted);

    font-size: 0.88rem;
    line-height: 1.6;
}


.error-state  .app-button {
    margin-top:
        var(--spacing-3);
}
/* /Components/Common/GlobalErrorView.razor.rz.scp.css */
.global-error {
    min-height: 100vh;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 24px;

    background:
        var(--color-background);
}


.global-error__card {
    width:
        min(100%, 680px);

    padding: 28px;

    background:
        var(--color-surface);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-xl);

    box-shadow:
        var(--shadow-large);
}


.global-error__icon {
    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;

    margin-bottom: 18px;

    color:
        var(--color-danger);

    background:
        rgba(239, 98, 108, 0.12);

    border-radius:
        var(--radius-md);

    font-size: 1.4rem;

    font-weight: 800;
}


h1 {
    margin:
        0 0 10px;

    font-size:
        1.6rem;
}


p {
    margin:
        0 0 20px;

    color:
        var(--color-text-secondary);

    line-height:
        1.65;
}


.global-error__message {
    padding: 13px 15px;

    color:
        #ff9ca4;

    background:
        var(--color-background);

    border:
        1px solid
        rgba(239, 98, 108, 0.25);

    border-radius:
        var(--radius-md);

    font-family:
        monospace;

    font-size:
        0.8rem;

    word-break:
        break-word;
}


.global-error__actions {
    margin-top:
        18px;
}


.global-error__actions button {
    min-height: 44px;

    padding:
        10px 17px;

    color: white;

    background:
        var(--color-primary);

    border: 0;

    border-radius:
        var(--radius-md);

    cursor: pointer;

    font-weight: 650;
}


details {
    margin-top:
        20px;
}


summary {
    color:
        var(--color-text-secondary);

    cursor: pointer;

    font-size:
        0.85rem;

    font-weight: 600;
}


pre {
    overflow-x: auto;

    margin:
        12px 0 0;

    padding: 15px;

    color:
        var(--color-text-secondary);

    background:
        var(--color-background);

    border-radius:
        var(--radius-md);

    white-space: pre-wrap;
    word-break: break-word;

    font-size:
        0.7rem;

    line-height: 1.55;
}
/* /Components/Common/LoadingState.razor.rz.scp.css */
.loading-state {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: var(--spacing-4);

    padding:
        var(--spacing-16) var(--spacing-6);

    text-align: center;
}


.loading-state__message {
    color:
        var(--color-text-muted);

    font-size: 0.9rem;
}
/* /Components/Documents/AulaDocumentsSection.razor.rz.scp.css */
.aula-documents {
    margin-top:
        var(--spacing-10);
}


.aula-documents__header {
    margin-bottom:
        var(--spacing-4);
}


.aula-documents__header h2 {
    color:
        var(--color-text);

    font-size: 1.05rem;
    font-weight: 700;
}


.aula-documents__list {
    display: flex;
    flex-direction: column;

    gap:
        var(--spacing-2);

    margin-top:
        var(--spacing-5);
}
/* /Components/Documents/DocumentListItem.razor.rz.scp.css */
.document-item {
    display: flex;

    align-items: center;

    gap:
        var(--spacing-3);

    padding:
        var(--spacing-3) var(--spacing-4);

    background:
        var(--color-surface);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-md);
}


.document-item__icon {
    display: grid;

    place-items: center;

    width: 36px;
    height: 36px;

    flex-shrink: 0;

    color:
        var(--color-text-secondary);

    background:
        var(--color-surface-secondary);

    border-radius:
        var(--radius-sm);
}


.document-item__body {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}


.document-item__body strong {
    overflow: hidden;

    color:
        var(--color-text);

    font-size: 0.9rem;
    font-weight: 650;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.document-item__body p {
    color:
        var(--color-text-muted);

    font-size: 0.78rem;
}


.document-item__delete {
    display: grid;

    place-items: center;

    width: 30px;
    height: 30px;

    flex-shrink: 0;

    color:
        var(--color-text-secondary);

    background:
        transparent;

    border-radius:
        var(--radius-sm);

    cursor: pointer;

    transition:
        color var(--transition-fast),
        background var(--transition-fast);
}


.document-item__delete:hover {
    color:
        var(--color-danger);

    background:
        rgba(239, 98, 108, 0.1);
}


.document-item__delete  .app-icon {
    width: 16px;
    height: 16px;
}
/* /Components/Documents/DocumentUploader.razor.rz.scp.css */
.document-uploader {
    display: flex;
    flex-direction: column;

    gap:
        var(--spacing-4);
}


.document-uploader__dropzone {
    position: relative;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap:
        var(--spacing-2);

    padding:
        var(--spacing-10) var(--spacing-6);

    background:
        var(--color-surface);

    border:
        2px dashed var(--color-border);

    border-radius:
        var(--radius-lg);

    cursor: pointer;

    text-align: center;

    transition:
        border-color var(--transition-fast),
        background var(--transition-fast);
}


.document-uploader__dropzone:hover {
    border-color:
        var(--color-primary-border);

    background:
        var(--color-surface-hover);
}


.document-uploader__dropzone  .document-uploader__input {
    position: absolute;
    inset: 0;

    z-index: 2;

    width: 100%;
    height: 100%;

    opacity: 0;

    appearance: none;
    color: transparent;

    cursor: pointer;
}


.document-uploader__dropzone > :not(.document-uploader__input) {
    pointer-events: none;
}


.document-uploader__icon {
    display: grid;

    place-items: center;

    width: 48px;
    height: 48px;

    margin-bottom:
        var(--spacing-2);

    color:
        var(--color-primary);

    background:
        var(--color-primary-soft);

    border-radius:
        var(--radius-lg);
}


.document-uploader__title {
    color:
        var(--color-text);

    font-size: 0.98rem;
    font-weight: 700;
}


.document-uploader__hint {
    color:
        var(--color-text-muted);

    font-size: 0.85rem;
}


.document-uploader__privacy {
    color:
        var(--color-text-muted);

    font-size: 0.78rem;
    text-align: center;
}


/* =========================================================
   PROGRESO
   ========================================================= */

.document-uploader__progress {
    display: flex;
    flex-direction: column;

    gap:
        var(--spacing-4);

    padding:
        var(--spacing-8) var(--spacing-6);

    background:
        var(--color-surface);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-lg);
}


.document-uploader__progress-header {
    display: flex;

    align-items: center;

    gap:
        var(--spacing-3);

    color:
        var(--color-text);

    font-size: 0.94rem;
    font-weight: 650;
}


.document-uploader__checklist {
    display: flex;
    flex-direction: column;

    gap: 8px;

    list-style: none;
}


.document-uploader__checklist li {
    color:
        var(--color-text-muted);

    font-size: 0.86rem;
}


.document-uploader__checklist li.is-done {
    color:
        var(--color-success);
}


.document-uploader__checklist li.is-active {
    color:
        var(--color-primary);

    font-weight: 600;
}


.document-uploader__ready {
    color:
        var(--color-text);

    font-size: 0.9rem;
    font-weight: 650;
}


@media (max-width: 560px) {

    .document-uploader__dropzone {
        min-height: 190px;

        padding:
            var(--spacing-8) var(--spacing-4);
    }


    .document-uploader__icon {
        width: 52px;
        height: 52px;
    }


    .document-uploader__hint {
        max-width: 260px;
    }


    .document-uploader__privacy {
        padding-inline:
            var(--spacing-2);

        line-height: 1.55;
    }

}
/* /Components/Landing/FeaturesSection.razor.rz.scp.css */
.features {
    padding:
        var(--spacing-24) 0;
}


.features__intro {
    max-width: 620px;

    margin-inline: auto;

    margin-bottom:
        var(--spacing-16);

    text-align: center;
}


.features__title {
    margin-top:
        var(--spacing-3);

    color:
        var(--color-text);

    font-size:
        clamp(1.7rem, 1.2rem + 2vw, 2.4rem);

    font-weight: 800;

    letter-spacing: -0.02em;

    line-height: 1.2;
}


.features__description {
    margin-top:
        var(--spacing-4);

    color:
        var(--color-text-secondary);

    font-size: 1rem;

    line-height: 1.65;
}


/* =========================================================
   GRID
   ========================================================= */

.features__grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        var(--spacing-5);
}


.feature-card {
    display: flex;
    flex-direction: column;

    gap:
        var(--spacing-3);
}


.feature-card__icon {
    display: grid;

    place-items: center;

    width: 46px;
    height: 46px;

    background:
        var(--color-primary-soft);

    border-radius:
        var(--radius-md);

    font-size: 1.3rem;
}


.feature-card__title {
    color:
        var(--color-text);

    font-size: 1rem;
    font-weight: 700;
}


.feature-card__description {
    color:
        var(--color-text-muted);

    font-size: 0.86rem;
    line-height: 1.55;
}


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

@media (max-width: 980px) {

    .features__grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 560px) {

    .features {
        padding:
            var(--spacing-16) 0;
    }


    .features__grid {
        grid-template-columns: 1fr;
    }

}
/* /Components/Landing/FinalCTASection.razor.rz.scp.css */
.final-cta {
    padding:
        var(--spacing-24) 0;
}


.final-cta__panel {
    position: relative;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap:
        var(--spacing-5);

    padding:
        var(--spacing-20) var(--spacing-8);

    background:
        var(--color-surface);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-2xl);

    text-align: center;
}


.final-cta__panel::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        var(--gradient-background);

    pointer-events: none;
}


.final-cta__title {
    position: relative;

    max-width: 640px;

    color:
        var(--color-text);

    font-size:
        clamp(1.8rem, 1.3rem + 2vw, 2.6rem);

    font-weight: 800;

    letter-spacing: -0.02em;

    line-height: 1.2;
}


.final-cta__description {
    position: relative;

    max-width: 480px;

    color:
        var(--color-text-secondary);

    font-size: 1rem;

    line-height: 1.65;
}


.final-cta__actions {
    position: relative;

    display: flex;
    flex-wrap: wrap;

    align-items: center;
    justify-content: center;

    gap:
        var(--spacing-3);

    margin-top:
        var(--spacing-2);
}


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

@media (max-width: 560px) {

    .final-cta {
        padding:
            var(--spacing-16) 0;
    }


    .final-cta__panel {
        padding:
            var(--spacing-12) var(--spacing-5);
    }


    .final-cta__actions {
        flex-direction: column;

        width: 100%;
    }


    .final-cta__actions  .app-button {
        width: 100%;
    }

}
/* /Components/Landing/HeroSection.razor.rz.scp.css */
.hero {
    position: relative;

    min-height:
        calc(100vh - var(--header-height));

    display: flex;

    align-items: center;

    overflow: hidden;

    padding:
        80px 0 100px;
}


.hero__container {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.06fr)
        minmax(430px, 0.94fr);

    align-items: center;

    gap: 72px;
}


/* =========================================================
   TEXT
   ========================================================= */

.hero__content {
    max-width: 660px;
}


.hero__badge {
    width: fit-content;

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        7px 12px;

    margin-bottom:
        24px;

    color:
        #cbc4ff;

    background:
        var(--color-primary-soft);

    border:
        1px solid var(--color-primary-border);

    border-radius:
        var(--radius-pill);

    font-size:
        0.8rem;

    font-weight:
        600;
}


.hero__badge-dot {
    width: 7px;
    height: 7px;

    flex-shrink: 0;

    background:
        var(--color-success);

    border-radius:
        50%;

    box-shadow:
        0 0 12px
        rgba(62, 214, 160, 0.7);
}


.hero__title {
    margin: 0;

    font-size:
        clamp(3rem, 5.5vw, 5.25rem);

    line-height:
        0.99;

    font-weight:
        760;

    letter-spacing:
        -0.065em;
}


.hero__title span {
    display: block;

    margin-top:
        9px;
}


.hero__description {
    max-width:
        610px;

    margin:
        30px 0 0;

    color:
        var(--color-text-secondary);

    font-size:
        clamp(1rem, 1.3vw, 1.1rem);

    line-height:
        1.75;
}


.hero__actions {
    display: flex;

    flex-wrap: wrap;

    gap: 11px;

    margin-top:
        34px;
}


.hero__benefits {
    display: flex;

    flex-wrap: wrap;

    gap: 22px;

    margin-top:
        27px;

    color:
        var(--color-text-muted);

    font-size:
        0.8rem;
}


.hero__benefits div {
    display: flex;

    align-items: center;

    gap: 6px;
}


.hero__benefits span {
    color:
        var(--color-success);

    font-weight:
        750;
}


/* =========================================================
   PREVIEW
   ========================================================= */

.hero__preview {
    position: relative;

    perspective:
        1200px;
}


.study-preview {
    overflow: hidden;

    background:
        rgba(16, 20, 29, 0.92);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-xl);

    box-shadow:
        var(--shadow-large);

    transform:
        rotateY(-2.5deg)
        rotateX(1.5deg);
}


.study-preview__header {
    min-height: 53px;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    padding:
        0 17px;

    background:
        rgba(255, 255, 255, 0.02);

    border-bottom:
        1px solid var(--color-border);
}


.window-controls {
    display: flex;

    gap: 6px;
}


.window-controls span {
    width: 8px;
    height: 8px;

    background:
        rgba(255, 255, 255, 0.14);

    border-radius:
        50%;
}


.study-preview__title {
    color:
        var(--color-text-muted);

    font-size:
        0.7rem;
}


.ai-status {
    justify-self: end;

    display: flex;

    align-items: center;

    gap: 6px;

    color:
        var(--color-text-muted);

    font-size:
        0.68rem;
}


.ai-status__dot {
    width: 6px;
    height: 6px;

    background:
        var(--color-success);

    border-radius:
        50%;
}


.study-preview__content {
    padding:
        25px;
}


.session-header {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;
}


.session-header > div {
    display: flex;

    flex-direction: column;
}


.session-type {
    color:
        var(--color-primary);

    font-size:
        0.62rem;

    font-weight:
        750;

    letter-spacing:
        0.1em;
}


.session-header strong {
    margin-top:
        3px;

    font-size:
        0.9rem;
}


.session-count {
    color:
        var(--color-text-muted);

    font-size:
        0.72rem;
}


.progress-bar {
    height: 4px;

    overflow: hidden;

    margin:
        15px 0 21px;

    background:
        rgba(255, 255, 255, 0.06);

    border-radius:
        var(--radius-pill);
}


.progress-bar__value {
    width: 60%;
    height: 100%;

    background:
        var(--gradient-primary);

    border-radius:
        inherit;
}


/* =========================================================
   QUESTION
   ========================================================= */

.question {
    padding:
        21px;

    background:
        rgba(255, 255, 255, 0.022);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-lg);
}


.question__number {
    color:
        var(--color-text-muted);

    font-size:
        0.68rem;
}


.question h2 {
    margin:
        7px 0 19px;

    font-size:
        1.04rem;

    line-height:
        1.45;

    letter-spacing:
        -0.015em;
}


.question__answers {
    display: grid;

    gap: 8px;
}


.answer-option {
    min-height:
        41px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        8px 11px;

    color:
        var(--color-text-secondary);

    background:
        rgba(255, 255, 255, 0.01);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-md);

    font-size:
        0.84rem;
}


.answer-option > span {
    width: 25px;
    height: 25px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    background:
        var(--color-surface-secondary);

    border-radius:
        7px;

    font-size:
        0.67rem;

    font-weight:
        750;
}


.answer-option--selected {
    color:
        var(--color-text);

    background:
        var(--color-primary-soft);

    border-color:
        rgba(124, 92, 255, 0.42);
}


.answer-option--selected > span {
    color: white;

    background:
        var(--color-primary);
}


/* =========================================================
   SOURCE
   ========================================================= */

.source-reference {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top:
        14px;

    padding:
        9px 11px;

    color:
        var(--color-text-muted);

    background:
        rgba(255, 255, 255, 0.018);

    border-radius:
        var(--radius-md);
}


.source-reference__icon {
    width: 30px;
    height: 30px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    color:
        var(--color-primary);

    background:
        var(--color-primary-soft);

    border-radius:
        9px;
}


.source-reference > div:last-child {
    display: flex;

    flex-direction: column;
}


.source-reference span {
    font-size:
        0.62rem;
}


.source-reference strong {
    color:
        var(--color-text-secondary);

    font-size:
        0.7rem;
}


/* =========================================================
   GLOWS
   ========================================================= */

.hero__glow {
    position: absolute;

    pointer-events: none;

    border-radius:
        50%;

    filter:
        blur(120px);

    opacity:
        0.16;
}


.hero__glow--primary {
    width: 500px;
    height: 500px;

    top: -40px;
    right: 6%;

    background:
        var(--color-primary);
}


.hero__glow--secondary {
    width: 380px;
    height: 380px;

    bottom: -180px;
    left: 12%;

    background:
        var(--color-info);
}


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

@media (max-width: 1050px) {

    .hero__container {
        grid-template-columns:
            1fr;

        gap: 65px;
    }


    .hero__content {
        max-width:
            760px;
    }


    .hero__preview {
        width:
            min(100%, 700px);

        margin-inline:
            auto;
    }


    .study-preview {
        transform:
            none;
    }

}


@media (max-width: 600px) {

    .hero {
        min-height: auto;

        padding:
            44px 0 64px;
    }


    .hero__title {
        font-size:
            clamp(2.35rem, 11.5vw, 3.2rem);

        line-height: 1.03;

        letter-spacing: -0.055em;
    }


    .hero__description {
        margin-top:
            22px;
    }


    .hero__actions {
        flex-direction:
            column;
    }


    .hero__actions  .app-button {
        width: 100%;
    }


    .hero__benefits {
        gap:
            8px 16px;
    }


    .study-preview__content {
        padding:
            15px;
    }

}
/* /Components/Landing/HowItWorksSection.razor.rz.scp.css */
.how-it-works {
    padding:
        var(--spacing-24) 0;

    background:
        var(--color-background-soft);

    border-top:
        1px solid var(--color-border);

    border-bottom:
        1px solid var(--color-border);
}


.how-it-works__intro {
    max-width: 620px;

    margin-inline: auto;

    margin-bottom:
        var(--spacing-16);

    text-align: center;
}


.how-it-works__title {
    margin-top:
        var(--spacing-3);

    color:
        var(--color-text);

    font-size:
        clamp(1.7rem, 1.2rem + 2vw, 2.4rem);

    font-weight: 800;

    letter-spacing: -0.02em;

    line-height: 1.2;
}


/* =========================================================
   STEPS
   ========================================================= */

.how-it-works__steps {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        var(--spacing-6);
}


.step {
    position: relative;

    padding:
        var(--spacing-6);

    background:
        var(--color-surface);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-lg);
}


.step__number {
    display: grid;

    place-items: center;

    width: 38px;
    height: 38px;

    margin-bottom:
        var(--spacing-4);

    color: white;

    background:
        var(--gradient-primary);

    border-radius:
        var(--radius-md);

    font-size: 0.95rem;
    font-weight: 800;
}


.step__title {
    color:
        var(--color-text);

    font-size: 1rem;
    font-weight: 700;
}


.step__description {
    margin-top:
        var(--spacing-2);

    color:
        var(--color-text-muted);

    font-size: 0.86rem;
    line-height: 1.55;
}


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

@media (max-width: 980px) {

    .how-it-works__steps {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 560px) {

    .how-it-works {
        padding:
            var(--spacing-16) 0;
    }


    .how-it-works__steps {
        grid-template-columns: 1fr;
    }

}
/* /Components/Landing/LandingFooter.razor.rz.scp.css */
.landing-footer {
    padding:
        var(--spacing-16) 0 var(--spacing-8);

    border-top:
        1px solid var(--color-border);
}


.landing-footer__container {
    display: grid;

    grid-template-columns: 1.2fr 1fr;

    gap:
        var(--spacing-10);
}


.footer-brand__name {
    color:
        var(--color-text);

    font-size: 1.1rem;
    font-weight: 750;

    letter-spacing: -0.03em;
}


.footer-brand__name span {
    color:
        var(--color-primary);
}


.footer-brand__tagline {
    max-width: 320px;

    margin-top:
        var(--spacing-3);

    color:
        var(--color-text-muted);

    font-size: 0.86rem;
    line-height: 1.6;
}


.footer-links {
    display: flex;
    flex-wrap: wrap;

    align-content: flex-start;

    gap:
        var(--spacing-2) var(--spacing-8);

    justify-self: end;
}


.footer-links a {
    color:
        var(--color-text-secondary);

    font-size: 0.88rem;
    font-weight: 500;

    transition:
        color var(--transition-fast);
}


.footer-links a:hover {
    color:
        var(--color-text);
}


.landing-footer__bottom {
    grid-column: 1 / -1;

    margin-top:
        var(--spacing-10);

    padding-top:
        var(--spacing-6);

    border-top:
        1px solid var(--color-border);

    color:
        var(--color-text-muted);

    font-size: 0.8rem;
}


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

@media (max-width: 640px) {

    .landing-footer__container {
        grid-template-columns: 1fr;

        gap:
            var(--spacing-6);
    }


    .footer-links {
        justify-self: start;
    }

}
/* /Components/Landing/LandingHeader.razor.rz.scp.css */
.landing-header {
    position: sticky;

    top: 0;

    z-index: 100;

    height:
        var(--header-height);

    background:
        rgba(8, 10, 15, 0.76);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid var(--color-border);
}


.landing-header__container {
    height: 100%;

    display: flex;

    align-items: center;

    gap: 32px;
}


/* =========================================================
   BRAND
   ========================================================= */

.brand {
    display: flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;
}


.brand__icon {
    width: 36px;
    height: 36px;

    display: grid;

    place-items: center;

    background:
        var(--gradient-primary);

    border-radius:
        11px;

    box-shadow:
        0 8px 24px
        rgba(124, 92, 255, 0.2);
}


.brand__icon svg {
    width: 21px;
    height: 21px;

    fill: none;

    stroke: white;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.brand__name {
    color:
        var(--color-text);

    font-size:
        1.14rem;

    font-weight:
        750;

    letter-spacing:
        -0.035em;
}


.brand__name span {
    color:
        var(--color-primary);
}


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

.landing-header__navigation {
    display: flex;

    align-items: center;

    gap: 28px;

    margin-left: auto;
}


.landing-header__navigation a {
    color:
        var(--color-text-secondary);

    font-size:
        0.88rem;

    font-weight:
        500;

    transition:
        color var(--transition-fast);
}


.landing-header__navigation a:hover {
    color:
        var(--color-text);
}


/* =========================================================
   ACTIONS
   ========================================================= */

.landing-header__actions {
    display: flex;

    align-items: center;

    gap: 5px;

    margin-left: 10px;
}


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

@media (max-width: 850px) {

    .landing-header__navigation {
        display: none;
    }


    .landing-header__actions {
        margin-left: auto;
    }

}


@media (max-width: 520px) {

    .landing-header {
        height: 64px;
    }


    .landing-header__container {
        gap: 8px;
    }


    .brand {
        gap: 8px;
    }


    .brand__icon {
        width: 32px;
        height: 32px;

        border-radius: 10px;
    }


    .brand__name {
        font-size: 1rem;
    }


    .landing-header__actions {
        gap: 2px;

        margin-left: auto;
    }


    .landing-header__actions  .app-button {
        min-height: 36px;

        padding:
            6px 10px;

        border-radius:
            var(--radius-sm);

        font-size: 0.8rem;
    }

}
/* /Components/Landing/PrivacySection.razor.rz.scp.css */
.privacy {
    padding:
        var(--spacing-24) 0;
}


.privacy__container {
    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    align-items: center;

    gap:
        var(--spacing-16);
}


.privacy__title {
    margin-top:
        var(--spacing-3);

    color:
        var(--color-text);

    font-size:
        clamp(1.7rem, 1.2rem + 2vw, 2.4rem);

    font-weight: 800;

    letter-spacing: -0.02em;

    line-height: 1.2;
}


.privacy__description {
    margin-top:
        var(--spacing-4);

    color:
        var(--color-text-secondary);

    font-size: 1rem;

    line-height: 1.65;
}


.privacy__list {
    display: flex;
    flex-direction: column;

    gap:
        var(--spacing-3);

    margin-top:
        var(--spacing-6);

    list-style: none;
}


.privacy__list li {
    display: flex;

    align-items: flex-start;

    gap:
        var(--spacing-3);

    color:
        var(--color-text-secondary);

    font-size: 0.9rem;
    line-height: 1.55;
}


.privacy__list-icon {
    flex-shrink: 0;

    font-size: 1.1rem;
}


/* =========================================================
   DIAGRAM
   ========================================================= */

.privacy__diagram {
    display: flex;
    flex-direction: column;

    align-items: center;

    gap:
        var(--spacing-3);

    padding:
        var(--spacing-8);

    background:
        var(--color-surface);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-xl);
}


.privacy-card {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 6px;

    padding:
        var(--spacing-5);

    border-radius:
        var(--radius-md);

    text-align: center;
}


.privacy-card--device {
    background:
        var(--color-primary-soft);

    border:
        1px solid var(--color-primary-border);
}

.privacy-card--device strong {
    color:
        var(--color-primary);
}


.privacy-card--server {
    background:
        var(--color-surface-secondary);

    border:
        1px solid var(--color-border);
}

.privacy-card--server strong {
    color:
        var(--color-text);
}


.privacy-card__label {
    color:
        var(--color-text-muted);

    font-size: 0.76rem;
    font-weight: 700;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}


.privacy-card__arrow {
    color:
        var(--color-text-muted);

    font-size: 1.2rem;
}


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

@media (max-width: 900px) {

    .privacy__container {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 560px) {

    .privacy {
        padding:
            var(--spacing-16) 0;
    }

}
/* /Layout/AppLayout.razor.rz.scp.css */
.app-shell {
    display: flex;

    min-height: 100vh;
}


/* =========================================================
   SIDEBAR (desktop)
   ========================================================= */

.app-shell__sidebar {
    position: sticky;

    top: 0;

    flex-shrink: 0;

    width: 260px;
    height: 100vh;

    display: flex;
    flex-direction: column;

    padding:
        var(--spacing-5);

    background:
        var(--color-background-soft);

    border-right:
        1px solid var(--color-border);
}


.app-shell__brand {
    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        var(--spacing-2) var(--spacing-2) var(--spacing-6);

    color:
        var(--color-text);

    font-size: 1.05rem;
    font-weight: 750;

    letter-spacing: -0.03em;
}


.app-shell__brand-icon {
    width: 32px;
    height: 32px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    background:
        var(--gradient-primary);

    border-radius:
        10px;

    box-shadow:
        0 8px 24px
        rgba(124, 92, 255, 0.2);
}


.app-shell__brand-icon svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke: white;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.app-shell__brand-accent {
    color:
        var(--color-primary);
}


.app-shell__sidebar  .app-nav {
    flex: 1;
}


/* =========================================================
   USER BLOCK
   ========================================================= */

.app-shell__user {
    display: flex;

    align-items: center;

    gap:
        var(--spacing-3);

    padding:
        var(--spacing-3);

    margin-top:
        var(--spacing-4);

    background:
        var(--color-surface);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-md);
}


.app-shell__user-info {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}


.app-shell__user-info strong {
    overflow: hidden;

    color:
        var(--color-text);

    font-size: 0.85rem;
    font-weight: 650;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.app-shell__user-info span {
    overflow: hidden;

    color:
        var(--color-text-muted);

    font-size: 0.76rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.app-shell__logout {
    display: grid;

    place-items: center;

    width: 34px;
    height: 34px;

    flex-shrink: 0;

    color:
        var(--color-text-secondary);

    background:
        transparent;

    border-radius:
        var(--radius-sm);

    cursor: pointer;

    transition:
        color var(--transition-fast),
        background var(--transition-fast);
}


.app-shell__logout:hover {
    color:
        var(--color-danger);

    background:
        rgba(239, 98, 108, 0.1);
}


.app-shell__logout--mobile {
    display: none;
}


/* =========================================================
   MAIN / TOPBAR
   ========================================================= */

.app-shell__main {
    flex: 1;
    min-width: 0;
}


.app-shell__topbar {
    display: none;

    align-items: center;
    justify-content: space-between;

    height: 60px;

    padding-inline:
        var(--spacing-4);

    background:
        rgba(8, 10, 15, 0.86);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid var(--color-border);

    position: sticky;

    top: 0;

    z-index: 50;
}


.app-shell__brand--mobile {
    padding: 0;
}


.app-shell__content {
    width: 100%;
    max-width: 1120px;

    margin-inline: auto;

    padding:
        var(--spacing-8) var(--spacing-8) var(--spacing-16);
}


/* =========================================================
   BOTTOM NAV (mobile)
   ========================================================= */

.app-shell__bottom-nav {
    display: none;
}


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

@media (max-width: 900px) {

    .app-shell {
        flex-direction: column;
    }


    .app-shell__sidebar {
        display: none;
    }


    .app-shell__topbar {
        display: flex;

        height: 64px;
    }


    .app-shell__logout--mobile {
        display: grid;
    }


    .app-shell__content {
        padding:
            var(--spacing-5) var(--spacing-4)
            calc(82px + env(safe-area-inset-bottom));
    }


    .app-shell__bottom-nav {
        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        z-index: 50;

        display: block;

        padding:
            0
            max(4px, env(safe-area-inset-left))
            env(safe-area-inset-bottom)
            max(4px, env(safe-area-inset-right));

        background:
            rgba(11, 14, 20, 0.92);

        backdrop-filter:
            blur(18px);

        -webkit-backdrop-filter:
            blur(18px);

        border-top:
            1px solid var(--color-border);
    }

}


@media (max-width: 560px) {

    .app-shell__content {
        padding:
            var(--spacing-5) var(--spacing-4)
            calc(78px + env(safe-area-inset-bottom));
    }

}
/* /Layout/AppNavMenu.razor.rz.scp.css */
.app-nav {
    display: flex;
}


.app-nav__item {
    display: flex;

    align-items: center;

    gap: 12px;

    color:
        var(--color-text-secondary);

    border-radius:
        var(--radius-md);

    font-size: 0.88rem;
    font-weight: 600;

    transition:
        color var(--transition-fast),
        background var(--transition-fast);
}


.app-nav__item:hover {
    color:
        var(--color-text);

    background:
        var(--color-surface-hover);
}


.app-nav__item.active {
    color:
        var(--color-primary);

    background:
        var(--color-primary-soft);
}


/* =========================================================
   SIDEBAR VARIANT (desktop)
   ========================================================= */

.app-nav--sidebar {
    flex-direction: column;

    gap: 4px;
}


.app-nav--sidebar .app-nav__item {
    padding:
        10px 12px;
}


/* =========================================================
   BOTTOM VARIANT (mobile)
   ========================================================= */

.app-nav--bottom {
    flex-direction: row;

    align-items: center;
    justify-content: space-around;

    width: 100%;
    max-width: 520px;

    min-height: 58px;

    margin-inline: auto;
}


.app-nav--bottom .app-nav__item {
    position: relative;

    flex: 1;

    justify-content: center;

    min-width: 0;
    min-height: 54px;

    padding: 0;

    color:
        var(--color-text-muted);

    background: transparent;

    border-radius: 0;

    text-align: center;
}


.app-nav--bottom .app-nav__item:hover {
    color:
        var(--color-text-secondary);

    background: transparent;
}


.app-nav--bottom .app-nav__item.active {
    color:
        var(--color-text);

    background: transparent;
}


.app-nav--bottom .app-nav__item.active::after {
    content: "";

    position: absolute;

    bottom: 3px;

    width: 4px;
    height: 4px;

    background:
        var(--color-primary);

    border-radius: 50%;
}


.app-nav--bottom .app-nav__item span {
    /* Solo iconos en la barra inferior: con tres destinos y un
       margen táctil grande, el texto no aporta y sobra espacio. */
    display: none;
}


.app-nav--bottom .app-nav__item  .app-icon {
    width: 27px;
    height: 27px;

    stroke-width: 1.85;
}


.app-nav--bottom .app-nav__item.active  .app-icon {
    stroke-width: 2.25;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.main-layout {
    width: 100%;
    min-height: 100vh;
}


.main-layout__content {
    width: 100%;
    min-height: 100vh;
}
/* /Pages/Aulas/AulaDetail.razor.rz.scp.css */
.aula-detail__header {
    display: flex;
    flex-wrap: wrap;

    align-items: flex-start;
    justify-content: space-between;

    gap:
        var(--spacing-4);

    padding-bottom:
        var(--spacing-6);

    margin-bottom:
        var(--spacing-8);

    border-bottom:
        1px solid var(--color-border);
}


.aula-detail__header h1 {
    color:
        var(--color-text);

    font-size: 1.4rem;
    font-weight: 800;

    letter-spacing: -0.02em;
}


.aula-detail__header p {
    margin-top: 4px;

    color:
        var(--color-text-secondary);

    font-size: 0.9rem;
}


.aula-detail__header-actions {
    display: flex;

    gap:
        var(--spacing-3);
}


.aula-detail__edit-form {
    display: flex;
    flex-direction: column;

    gap:
        var(--spacing-4);

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


.aula-detail__edit-actions {
    display: flex;

    gap:
        var(--spacing-3);
}


/* =========================================================
   TOPICS
   ========================================================= */

.aula-detail__topics-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom:
        var(--spacing-4);
}


.aula-detail__topics-header h2 {
    color:
        var(--color-text);

    font-size: 1.05rem;
    font-weight: 700;
}


.aula-detail__topics-header  .app-button {
    display: inline-flex;

    align-items: center;

    gap: 6px;
}


.aula-detail__topics-header  .app-icon {
    width: 16px;
    height: 16px;
}


.aula-detail__topics-list {
    display: flex;
    flex-direction: column;

    gap:
        var(--spacing-2);
}


@media (max-width: 560px) {

    .aula-detail__header {
        padding-bottom:
            var(--spacing-5);

        margin-bottom:
            var(--spacing-6);
    }


    .aula-detail__header-actions {
        width: 100%;
    }


    .aula-detail__header-actions  .app-button,
    .aula-detail__edit-actions  .app-button {
        flex: 1;
    }


    .aula-detail__topics-header {
        gap:
            var(--spacing-3);
    }

}
/* /Pages/Aulas/AulaForm.razor.rz.scp.css */
.aula-form-page {
    max-width: 520px;
}


.aula-form-page h1 {
    color:
        var(--color-text);

    font-size: 1.4rem;
    font-weight: 800;

    letter-spacing: -0.02em;
}


.aula-form-page > p {
    margin-top: 4px;
    margin-bottom:
        var(--spacing-6);

    color:
        var(--color-text-secondary);

    font-size: 0.9rem;
}


.aula-form-page__actions {
    display: flex;

    gap:
        var(--spacing-3);

    margin-top:
        var(--spacing-2);
}


.aula-form-page__actions  .app-button {
    flex: 1;
}
/* /Pages/Aulas/AulasList.razor.rz.scp.css */
.aulas-page__header {
    display: flex;
    flex-wrap: wrap;

    align-items: center;
    justify-content: space-between;

    gap:
        var(--spacing-4);

    margin-bottom:
        var(--spacing-8);
}


.aulas-page__header h1 {
    color:
        var(--color-text);

    font-size: 1.4rem;
    font-weight: 800;

    letter-spacing: -0.02em;
}


.aulas-page__header p {
    margin-top: 4px;

    color:
        var(--color-text-secondary);

    font-size: 0.9rem;
}


.aulas-page__list {
    display: flex;
    flex-direction: column;

    gap:
        var(--spacing-3);
}


@media (max-width: 560px) {

    .aulas-page__header {
        align-items: flex-start;

        margin-bottom:
            var(--spacing-6);
    }


    .aulas-page__header  .app-button {
        min-height: 40px;
    }

}
/* /Pages/Settings.razor.rz.scp.css */
.settings-page {
    max-width: 560px;
}


.settings-page h1 {
    color:
        var(--color-text);

    font-size: 1.4rem;
    font-weight: 800;

    letter-spacing: -0.02em;
}


.settings-page > p {
    margin-top: 4px;
    margin-bottom:
        var(--spacing-8);

    color:
        var(--color-text-secondary);

    font-size: 0.9rem;
}


.settings-page__card {
    margin-bottom:
        var(--spacing-5);
}


.settings-page__card h2 {
    margin-bottom:
        var(--spacing-4);

    color:
        var(--color-text);

    font-size: 1rem;
    font-weight: 700;
}


.settings-page__account {
    display: flex;
    flex-direction: column;

    gap:
        var(--spacing-3);

    margin-bottom:
        var(--spacing-6);
}


.settings-page__account dt {
    color:
        var(--color-text-muted);

    font-size: 0.76rem;
    font-weight: 700;

    letter-spacing: 0.04em;
    text-transform: uppercase;
}


.settings-page__account dd {
    margin: 0;

    color:
        var(--color-text);

    font-size: 0.94rem;
}


.settings-page__note {
    color:
        var(--color-text-muted);

    font-size: 0.86rem;
    line-height: 1.6;
}


@media (max-width: 560px) {

    .settings-page > p {
        margin-bottom:
            var(--spacing-6);
    }


    .settings-page__card {
        margin-bottom:
            var(--spacing-4);
    }


    .settings-page__card  .app-button {
        width: 100%;
    }

}