html,
body,
#app {
    background: var(--agora-color-bg);
    color: var(--agora-color-text);
}

body {
    font-family: "Source Sans 3", "Source Sans Pro", -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a,
.btn-link,
.mud-link {
    color: var(--agora-color-link);
}

a:hover,
.btn-link:hover,
.mud-link:hover {
    color: var(--agora-color-link-hover);
}

:focus-visible {
    outline: none;
    box-shadow: var(--agora-shadow-focus);
}

.agora-back-link.mud-button {
    color: var(--agora-color-text);
    font-weight: 600;
}

.agora-page-shell {
    padding-block-start: var(--agora-space-3);
    padding-block-end: var(--agora-space-8);
}

.agora-page-shell > * + * {
    margin-top: var(--agora-space-4);
}

.agora-page-shell > .mud-button.agora-back-link + * {
    margin-top: var(--agora-space-2);
}

.agora-page-section {
    margin: 0 !important;
}

.agora-page-stack-8 {
    display: flex;
    flex-direction: column;
    gap: var(--agora-space-1);
}

.agora-page-stack-16 {
    display: flex;
    flex-direction: column;
    gap: var(--agora-space-2);
}

.agora-page-stack-24 {
    display: flex;
    flex-direction: column;
    gap: var(--agora-space-3);
}

.agora-page-heading {
    margin: 0;
}

.agora-page-heading + .agora-page-subtitle {
    margin-top: var(--agora-space-1);
}

.agora-page-subtitle {
    margin: 0;
}

.agora-section-title {
    margin: var(--agora-space-4) 0 var(--agora-space-2);
}

.agora-button-block.mud-button {
    min-height: 48px;
    font-size: 1rem;
}

.agora-card-content-md {
    padding: var(--agora-space-3);
}

.agora-card-content-lg {
    padding: var(--agora-space-4);
}

.agora-card-actions-md {
    padding: var(--agora-space-2) var(--agora-space-3) var(--agora-space-3);
}

.agora-inline-note {
    margin-top: var(--agora-space-1);
}

.agora-sticky-panel {
    min-height: 400px;
}

.agora-qr-preview {
    width: 240px;
    height: 240px;
    image-rendering: pixelated;
    display: block;
}

.agora-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agora-text-truncate--md {
    max-width: 300px;
}

.agora-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--agora-space-3);
    border-radius: var(--agora-radius-lg);
    border: 1px solid var(--agora-hero-border, rgba(255, 255, 255, 0.14));
    background: var(--agora-hero-bg, var(--agora-hero-tools));
    color: var(--agora-hero-foreground);
    box-shadow: var(--agora-shadow-sm);
}

.agora-hero--tools {
    --agora-hero-bg: var(--agora-hero-tools);
    --agora-hero-panel-bg: var(--agora-web-burgundy-7);
    --agora-hero-card-bg: var(--agora-web-burgundy-5);
    --agora-hero-chip-bg: var(--agora-web-burgundy-5);
    --agora-hero-chip-border: rgba(255, 255, 255, 0.16);
}

.agora-hero--files,
.agora-hero--info {
    --agora-hero-bg: var(--agora-hero-files);
    --agora-hero-panel-bg: var(--agora-web-blue-7);
    --agora-hero-card-bg: var(--agora-web-blue-7);
    --agora-hero-chip-bg: var(--agora-web-blue-7);
    --agora-hero-chip-border: rgba(255, 255, 255, 0.16);
}

.agora-hero--success {
    --agora-hero-bg: var(--agora-hero-success);
    --agora-hero-panel-bg: var(--agora-web-green-7);
    --agora-hero-card-bg: var(--agora-web-green-7);
    --agora-hero-chip-bg: var(--agora-web-green-7);
    --agora-hero-chip-border: rgba(255, 255, 255, 0.16);
}

.agora-hero--warning {
    --agora-hero-bg: var(--agora-hero-warning);
    --agora-hero-panel-bg: var(--agora-web-orange-7);
    --agora-hero-card-bg: var(--agora-web-orange-7);
    --agora-hero-chip-bg: var(--agora-web-gray-8);
    --agora-hero-chip-border: rgba(255, 255, 255, 0.18);
}

.agora-hero--admin {
    --agora-hero-bg: var(--agora-hero-admin);
    --agora-hero-panel-bg: var(--agora-web-burgundy-7);
    --agora-hero-card-bg: var(--agora-web-burgundy-5);
    --agora-hero-chip-bg: var(--agora-web-burgundy-5);
    --agora-hero-chip-border: rgba(255, 255, 255, 0.16);
}

.agora-hero--secondary {
    --agora-hero-bg: var(--agora-hero-secondary);
    --agora-hero-panel-bg: var(--agora-web-burgundy-5);
    --agora-hero-card-bg: var(--agora-web-burgundy-5);
    --agora-hero-chip-bg: var(--agora-web-burgundy-5);
    --agora-hero-chip-border: rgba(255, 255, 255, 0.16);
}

.agora-hero::before {
    content: "";
    position: absolute;
    top: 50%;
    right: clamp(16px, 3vw, 40px);
    width: var(--agora-hero-watermark-size);
    height: var(--agora-hero-watermark-size);
    transform: translateY(-50%);
    background: url("/img/Agora_Logo.png") center / contain no-repeat;
    opacity: var(--agora-hero-watermark-opacity);
    filter: brightness(1.08);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.agora-hero > * {
    position: relative;
    z-index: 1;
}

.agora-hero__icon {
    font-size: 2rem;
    vertical-align: middle;
    color: inherit;
}

.agora-hero__eyebrow {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.9;
}

.agora-hero__title {
    color: var(--agora-hero-foreground);
    font-weight: 700;
}

.agora-hero__text {
    color: var(--agora-hero-foreground-muted);
    max-width: 52rem;
}

.agora-hero__text--compact {
    max-width: 500px;
}

.agora-hero__text--center {
    text-align: center;
}

.agora-hero__chip.mud-chip {
    background: var(--agora-hero-chip-bg, rgba(255, 255, 255, 0.12));
    border: 1px solid var(--agora-hero-chip-border, rgba(255, 255, 255, 0.16));
    color: var(--agora-hero-foreground);
}

.agora-surface {
    background: var(--agora-color-surface);
    border: 1px solid var(--agora-color-card-border);
    border-radius: var(--agora-radius-md);
    box-shadow: var(--agora-shadow-xs);
}

.agora-surface--muted {
    background: var(--agora-color-surface-alt);
}

.agora-surface--sticky {
    position: sticky;
    top: 80px;
}

.agora-table-shell {
    overflow: hidden;
}

.agora-table-header {
    background: var(--agora-color-surface-alt);
    border-bottom: 1px solid var(--agora-color-card-border);
}

.agora-interactive-card {
    height: 100%;
    cursor: pointer;
    box-shadow: inset 0 4px 0 var(--agora-card-accent, transparent);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.agora-interactive-card:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 4px 0 var(--agora-card-accent, transparent), var(--agora-shadow-sm);
    border-color: var(--agora-color-primary-light);
}

.agora-interactive-card--disabled {
    cursor: not-allowed;
    pointer-events: auto;
}

.agora-interactive-card--disabled:hover {
    transform: none;
    box-shadow: inset 0 4px 0 var(--agora-card-accent, transparent), var(--agora-shadow-xs);
    border-color: var(--agora-color-card-border);
}

.agora-interactive-card--primary {
    --agora-card-accent: var(--agora-color-primary);
}

.agora-interactive-card--secondary {
    --agora-card-accent: var(--agora-color-secondary);
}

.agora-interactive-card--success {
    --agora-card-accent: var(--agora-color-success);
}

.agora-interactive-card--warning {
    --agora-card-accent: var(--agora-color-warning);
}

.agora-interactive-card--danger {
    --agora-card-accent: var(--agora-color-danger);
}

.agora-interactive-card--neutral {
    --agora-card-accent: var(--agora-web-gray-3);
}

.agora-interactive-card--disabled .agora-card-title,
.agora-interactive-card--disabled .agora-card-text {
    color: var(--agora-color-text-muted);
}

.agora-interactive-card .mud-card-content {
    min-height: 220px;
}

.agora-card-title {
    font-weight: 700;
    color: var(--agora-color-heading);
}

.agora-card-text {
    color: var(--agora-color-text-muted);
}

.agora-icon-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--agora-color-inverse-text);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.agora-icon-circle--sm {
    width: 64px;
    height: 64px;
}

.agora-icon-circle--primary {
    background: var(--agora-color-primary);
}

.agora-icon-circle--secondary {
    background: var(--agora-color-secondary);
}

.agora-icon-circle--success {
    background: var(--agora-color-success);
}

.agora-icon-circle--warning {
    background: var(--agora-color-warning);
}

.agora-icon-circle--danger {
    background: var(--agora-color-danger);
}

.agora-icon-circle--info {
    background: var(--agora-color-info);
}

.agora-icon-circle--neutral {
    background: var(--agora-web-gray-5);
}

.agora-stat-card {
    min-height: 150px;
}

.agora-stat-card .mud-icon-root {
    font-size: 2rem;
}

.agora-chip-soft {
    border-radius: var(--agora-radius-pill);
}

.agora-chip-soft--primary.mud-chip {
    background: var(--agora-web-blue-0);
    color: var(--agora-web-blue-9);
}

.agora-chip-soft--success.mud-chip {
    background: var(--agora-web-green-0);
    color: var(--agora-web-green-9);
}

.agora-chip-soft--warning.mud-chip {
    background: var(--agora-web-orange-0);
    color: var(--agora-web-orange-9);
}

.agora-chip-soft--secondary.mud-chip {
    background: var(--agora-web-burgundy-0);
    color: var(--agora-web-burgundy-7);
}

.agora-chip-soft--neutral.mud-chip {
    background: var(--agora-web-gray-0);
    color: var(--agora-web-gray-8);
}

.agora-stepper {
    background: var(--agora-color-surface);
}

.agora-step-avatar {
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
    background: var(--agora-web-gray-1);
    color: var(--agora-web-gray-7);
}

.agora-step-avatar--active {
    background: var(--agora-color-primary);
    color: var(--agora-color-inverse-text);
}

.agora-upload-zone {
    border: 2px dashed var(--agora-color-primary);
    background: var(--agora-web-blue-0);
    border-radius: var(--agora-radius-md);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.agora-upload-zone:hover {
    border-color: var(--agora-color-primary-hover);
    background: var(--agora-web-blue-1);
}

.agora-upload-zone--drag-over {
    border-color: var(--agora-color-primary);
    background: var(--agora-web-blue-1);
    border-width: 3px;
}

.agora-kiosk-panel {
    overflow: hidden;
    border-radius: 16px;
}

.agora-kiosk-banner {
    padding: var(--agora-space-4);
    text-align: center;
}

.agora-kiosk-banner__text {
    margin-inline: auto;
}

.agora-empty-state {
    color: var(--agora-color-text-muted);
    opacity: 0.8;
}

.agora-muted-card {
    opacity: 0.62;
    border: 2px dashed var(--agora-color-border);
    background: var(--agora-color-surface-alt);
}

.agora-email-link {
    color: var(--agora-color-secondary);
}

.mud-button-filled.mud-button-filled-primary {
    background-color: var(--agora-color-primary);
}

.mud-button-filled.mud-button-filled-primary:hover {
    background-color: var(--agora-color-primary-hover);
}

.mud-button-filled.mud-button-filled-secondary {
    background-color: var(--agora-color-secondary);
}

.mud-button-filled.mud-button-filled-secondary:hover {
    background-color: var(--agora-color-secondary-hover);
}

.mud-paper,
.mud-card {
    border-radius: var(--agora-radius-md);
}

.mud-input-control .mud-input-slot,
.mud-input > input,
.mud-input > textarea {
    background: var(--agora-color-input-bg);
}

.mud-input-root-outlined {
    border-radius: var(--agora-radius-sm);
}

.mud-input-outlined-border {
    border-color: var(--agora-color-input-border) !important;
}

.mud-input-root:hover .mud-input-outlined-border {
    border-color: var(--agora-color-input-hover) !important;
}

.mud-input-root.mud-input-focused .mud-input-outlined-border {
    border-color: var(--agora-color-primary) !important;
    border-width: 2px;
}

.mud-alert-filled-success {
    background-color: var(--agora-color-success);
}

.mud-alert-filled-warning {
    background-color: var(--agora-color-warning);
    color: var(--agora-web-gray-9);
}

.mud-alert-filled-error {
    background-color: var(--agora-color-danger);
}

.mud-alert-filled-info {
    background-color: var(--agora-color-primary);
}

.mud-snackbar {
    border-radius: var(--agora-radius-md);
}

.mud-tabs-toolbar {
    border-bottom: 1px solid var(--agora-color-card-border);
}

.mud-tab.mud-tab-active {
    color: var(--agora-color-primary);
}

.mud-tab-slider {
    background: var(--agora-color-primary);
}

.mud-table-root .mud-table-head {
    background: var(--agora-color-surface-alt);
}

.mud-table-root .mud-table-head .mud-table-cell {
    color: var(--agora-color-heading);
    font-weight: 700;
}

.mud-table-row:hover {
    background: rgba(0, 153, 255, 0.035);
}

.mud-dialog .mud-paper {
    border: 1px solid var(--agora-color-card-border);
    box-shadow: var(--agora-shadow-md);
}

.mud-badge .mud-badge-badge {
    font-weight: 700;
}

.mud-switch.mud-input-control-boolean .mud-switch-base.mud-checked {
    color: var(--agora-color-primary);
}

.mud-switch.mud-input-control-boolean .mud-switch-base.mud-checked + .mud-switch-track {
    background-color: rgba(0, 153, 255, 0.35);
}

.mud-theme-dark,
.mud-theme-dark body,
.mud-theme-dark html {
    color-scheme: dark;
}

@media (max-width: 960px) {
    .agora-page-shell {
        padding-block-start: var(--agora-space-2);
        padding-block-end: var(--agora-space-6);
    }

    .agora-page-shell > * + * {
        margin-top: var(--agora-space-3);
    }

    .agora-card-content-lg,
    .agora-card-content-md,
    .agora-hero {
        padding: var(--agora-space-3);
    }
}