:root {
    --ys-primary: var(--mud-palette-primary);
    --ys-secondary: var(--mud-palette-secondary);
    --ys-success: var(--mud-palette-success);
    --ys-info: var(--mud-palette-info);
    --ys-warning: var(--mud-palette-warning);
    --ys-error: var(--mud-palette-error);
    --ys-background: var(--mud-palette-background);
    --ys-surface: var(--mud-palette-surface);
    --ys-text: var(--mud-palette-text-primary);
    --ys-text-muted: var(--mud-palette-text-secondary);
    --ys-border: var(--mud-palette-lines-default);
    --ys-primary-soft: color-mix(in srgb, var(--ys-primary) 13%, transparent);
    --ys-secondary-soft: color-mix(in srgb, var(--ys-secondary) 15%, transparent);
    --ys-success-soft: color-mix(in srgb, var(--ys-success) 13%, transparent);
    --ys-info-soft: color-mix(in srgb, var(--ys-info) 13%, transparent);
    --ys-warning-soft: color-mix(in srgb, var(--ys-warning) 17%, transparent);
    --ys-error-soft: color-mix(in srgb, var(--ys-error) 13%, transparent);
    --ys-yellow: #FFC94A;
    --ys-orange: #F58A3D;
    --ys-gold-text: #3F2B08;
    --ys-gold-text-muted: rgba(63, 43, 8, 0.68);
    --ys-gold-accent: #7A4906;
    --ys-gold-border: rgba(118, 72, 8, 0.18);
    --ys-gold-panel: rgba(255, 255, 255, 0.28);
    --ys-gold-panel-strong: rgba(255, 255, 255, 0.45);
    --ys-gold-gradient:
        radial-gradient(circle at 95% 4%, rgba(255, 255, 255, 0.58), transparent 28%),
        linear-gradient(145deg, #FFE48B, #FFC94A 58%, #FFB24A);
    --ys-gold-shadow: 0 16px 34px rgba(157, 96, 10, 0.18);
    --ys-gold-action-background: #362306;
    --ys-gold-action-text: #FFFFFF;
    --ys-radius-sm: 12px;
    --ys-radius-md: 18px;
    --ys-radius-lg: 26px;
    --ys-shadow-sm: 0 8px 24px rgba(36, 29, 76, 0.07);
    --ys-shadow-md: 0 18px 42px rgba(36, 29, 76, 0.11);
}

.ys-theme-dark {
    --ys-gold-text: #F8E7BE;
    --ys-gold-text-muted: rgba(248, 231, 190, 0.7);
    --ys-gold-accent: #FFD679;
    --ys-gold-border: rgba(255, 208, 112, 0.18);
    --ys-gold-panel: rgba(255, 218, 139, 0.07);
    --ys-gold-panel-strong: rgba(255, 221, 150, 0.11);
    --ys-gold-gradient:
        radial-gradient(circle at 92% 4%, rgba(255, 200, 86, 0.14), transparent 38%),
        linear-gradient(145deg, #4A3518, #302313);
    --ys-gold-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
    --ys-gold-action-background: #E7AD43;
    --ys-gold-action-text: #281A08;
}

html,
body {
    background: var(--ys-background);
    color: var(--ys-text);
}

/* Application shell */
.sidebar {
    background-color: var(--mud-palette-drawer-background) !important;
    border-right: 1px solid var(--ys-border);
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.sidebar .mud-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding-top: 0 !important;
}

.sidebar .mud-divider-fullwidth {
    flex-grow: 0 !important;
}

.sidebar-header {
    min-height: 76px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #7357F6 0%, #8C6DFF 54%, #F58A3D 145%);
    color: #fff;
}

.sidebar-header .mud-avatar {
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.24);
}

.brand-name {
    color: #fff !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
}

.section-label {
    color: var(--ys-text-muted);
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.11em;
}

.ys-sidebar-nav {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.ys-sidebar-settings {
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--ys-border);
}

.ys-settings-grid {
    align-items: stretch;
}

.ys-settings-grid > .mud-grid-item {
    display: flex;
}

.ys-settings-tile {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    aspect-ratio: 4 / 3;
    min-height: 190px;
    overflow: hidden;
    padding: 22px;
    border: 1px solid var(--ys-border);
    border-radius: 24px;
    color: var(--ys-text);
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--ys-primary) 14%, transparent), transparent 44%),
        var(--ys-surface);
    box-shadow: var(--ys-shadow-sm);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.ys-settings-tile:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--ys-primary) 42%, var(--ys-border));
    box-shadow: var(--ys-shadow-md);
}

.ys-settings-tile:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ys-primary) 34%, transparent);
    outline-offset: 3px;
}

.ys-settings-tile__arrow {
    position: absolute;
    top: 18px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    color: var(--ys-primary);
    background: var(--ys-primary-soft);
    transition: transform 180ms ease;
}

.ys-settings-tile:hover .ys-settings-tile__arrow {
    transform: translateX(3px);
}

.ys-settings-tile__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    color: var(--ys-primary);
    opacity: 0.12;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.ys-settings-tile__icon .mud-icon-root {
    font-size: 5rem;
}

.ys-settings-tile__copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 100%;
}

.ys-settings-tile__title {
    font-size: 1.08rem;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.ys-settings-tile__description {
    color: var(--ys-text-muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

.sidebar .mud-nav-link {
    min-height: 44px;
    margin: 3px 4px !important;
    border-radius: 13px !important;
}

.sidebar .mud-nav-link:hover {
    background: var(--ys-primary-soft) !important;
}

.sidebar .mud-nav-link.active {
    background: var(--ys-primary) !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--ys-primary) 24%, transparent);
    color: #fff !important;
}

.sidebar .mud-nav-link.active .mud-nav-link-text,
.sidebar .mud-nav-link.active .mud-icon-root {
    color: #fff !important;
}

.main-content {
    min-height: 100vh;
    padding-top: 0 !important;
    background: var(--ys-background);
}

.content-header {
    position: sticky;
    top: 0;
    z-index: 10;
    min-height: 64px;
    background: color-mix(in srgb, var(--ys-surface) 92%, transparent) !important;
    border-bottom: 1px solid var(--ys-border);
    backdrop-filter: blur(16px);
}

.company-header {
    min-width: 0;
    max-width: min(360px, 45vw);
}

.company-header-name {
    overflow: hidden;
    font-weight: 700 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ys-user-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 5px 8px 5px 6px;
    border: 1px solid color-mix(in srgb, var(--ys-primary) 15%, var(--ys-border));
    border-radius: 15px;
    color: var(--ys-text);
    background: color-mix(in srgb, var(--ys-primary) 5%, var(--ys-surface));
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.ys-user-trigger:hover {
    border-color: color-mix(in srgb, var(--ys-primary) 35%, var(--ys-border));
    background: var(--ys-primary-soft);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--ys-primary) 12%, transparent);
    transform: translateY(-1px);
}

.ys-user-trigger:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ys-primary) 24%, transparent);
    outline-offset: 2px;
}

.ys-user-trigger__avatar {
    flex: 0 0 auto;
    background: linear-gradient(145deg, var(--ys-primary), color-mix(in srgb, var(--ys-primary) 65%, var(--ys-orange))) !important;
    box-shadow: 0 5px 12px color-mix(in srgb, var(--ys-primary) 22%, transparent);
}

.ys-user-trigger__copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
}

.ys-user-trigger__name,
.ys-user-trigger__caption {
    overflow: hidden;
    max-width: 150px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ys-user-trigger__name {
    font-size: 0.82rem;
    font-weight: 800;
}

.ys-user-trigger__caption {
    margin-top: 3px;
    color: var(--ys-text-muted);
    font-size: 0.68rem;
    font-weight: 600;
}

.ys-user-trigger__chevron {
    flex: 0 0 auto;
    color: var(--ys-text-muted) !important;
}

.ys-user-drawer {
    max-width: 100vw;
    border-left: 1px solid color-mix(in srgb, var(--ys-primary) 12%, var(--ys-border)) !important;
    background: var(--ys-surface) !important;
}

.ys-user-drawer .mud-drawer-content {
    overflow: hidden;
    background: var(--ys-surface);
}

.ys-user-panel {
    display: flex;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--ys-warning) 8%, transparent), transparent 30%),
        var(--ys-surface);
}

.ys-user-panel__hero {
    position: relative;
    overflow: hidden;
    padding: 26px 24px 22px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 10%, rgba(255, 214, 108, 0.55), transparent 28%),
        linear-gradient(145deg, #674bdd 0%, #7b5df0 58%, #9b68dc 100%);
}

.ys-user-panel__hero::after {
    position: absolute;
    right: -34px;
    bottom: -56px;
    width: 150px;
    height: 150px;
    border: 24px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    content: "";
}

.ys-user-panel__close {
    position: absolute !important;
    z-index: 2;
    top: 12px;
    right: 12px;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

.ys-user-panel__close:hover {
    background: rgba(255, 255, 255, 0.22) !important;
}

.ys-user-panel__identity {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding-right: 28px;
}

.ys-user-panel__avatar {
    width: 72px !important;
    height: 72px !important;
    flex: 0 0 72px;
    border: 3px solid rgba(255, 255, 255, 0.72);
    color: #fff !important;
    background: rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 12px 28px rgba(41, 24, 102, 0.25);
    font-size: 1.55rem !important;
    font-weight: 800;
}

.ys-user-panel__identity-copy {
    min-width: 0;
}

.ys-user-panel__eyebrow {
    margin-bottom: 4px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
}

.ys-user-panel__name,
.ys-user-panel__email {
    overflow: hidden;
    color: #fff !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ys-user-panel__name {
    font-weight: 850 !important;
    letter-spacing: -0.025em !important;
}

.ys-user-panel__email {
    margin-top: 3px !important;
    color: rgba(255, 255, 255, 0.76) !important;
}

.ys-user-panel__context {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 20px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
}

.ys-user-panel__context > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
}

.ys-user-panel__context > div {
    min-width: 0;
}

.ys-user-panel__context .mud-typography {
    overflow: hidden;
    color: #fff !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ys-user-panel__context .mud-typography-caption {
    color: rgba(255, 255, 255, 0.66) !important;
}

.ys-user-panel__body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 22px 20px;
}

.ys-user-panel__company-selector {
    padding-top: 2px;
}

.ys-user-panel__company-selector .mud-input-control {
    margin-top: 4px;
}

.ys-user-panel__footer {
    flex: 0 0 auto;
    padding: 16px 20px 20px;
    border-top: 1px solid var(--ys-border);
    background: color-mix(in srgb, var(--ys-surface) 94%, var(--ys-primary-soft));
}

.ys-user-panel__logout {
    min-height: 50px;
    border: 1px solid color-mix(in srgb, var(--ys-primary) 24%, var(--ys-border)) !important;
    border-radius: 15px !important;
    color: var(--ys-primary) !important;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--ys-primary) 10%, var(--ys-surface)),
            color-mix(in srgb, var(--ys-primary) 4%, var(--ys-surface))
        ) !important;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--ys-primary) 10%, transparent);
    font-weight: 750 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease !important;
}

.ys-user-panel__logout .mud-button-icon-start {
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    margin-inline-start: -4px;
    margin-inline-end: 10px;
    padding: 5px;
    border-radius: 9px;
    color: var(--ys-primary) !important;
    background: var(--ys-primary-soft);
}

.ys-user-panel__logout:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--ys-primary) 40%, var(--ys-border)) !important;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--ys-primary) 15%, var(--ys-surface)),
            color-mix(in srgb, var(--ys-primary) 7%, var(--ys-surface))
        ) !important;
    box-shadow: 0 11px 24px color-mix(in srgb, var(--ys-primary) 15%, transparent);
}

.ys-user-panel__logout:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ys-primary) 24%, transparent);
    outline-offset: 3px;
}

.ys-user-panel__logout:active {
    transform: translateY(0);
    box-shadow: 0 5px 12px color-mix(in srgb, var(--ys-primary) 12%, transparent);
}

.cursor-pointer {
    cursor: pointer;
}

.justify-start {
    justify-content: flex-start !important;
}

.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

/* Reusable UI Kit primitives */
.ys-module-page {
    width: 100%;
    padding-bottom: 32px;
}

.ys-module-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    min-height: 122px;
    margin-bottom: 24px;
    padding: 24px 28px;
    border: 1px solid color-mix(in srgb, var(--ys-primary) 17%, var(--ys-border));
    border-radius: var(--ys-radius-lg);
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 201, 74, 0.44), transparent 23%),
        linear-gradient(128deg, color-mix(in srgb, var(--ys-primary) 15%, var(--ys-surface)), var(--ys-surface) 64%);
    box-shadow: var(--ys-shadow-sm);
}

.ys-module-hero::after {
    position: absolute;
    right: 18%;
    bottom: -72px;
    width: 132px;
    height: 132px;
    border: 22px solid color-mix(in srgb, var(--ys-primary) 9%, transparent);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.ys-module-hero__main,
.ys-module-hero__actions {
    position: relative;
    z-index: 1;
}

.ys-module-hero__main {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 16px;
}

.ys-module-hero__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 19px;
    color: #fff;
    background: linear-gradient(145deg, #7357F6, #9179FF);
    box-shadow: 0 12px 24px rgba(82, 58, 181, 0.23);
}

.ys-module-hero__icon .mud-icon-root {
    font-size: 1.75rem;
}

.ys-module-hero__copy {
    min-width: 0;
}

.ys-module-hero__eyebrow {
    margin-bottom: 2px !important;
    color: var(--ys-primary) !important;
    font-size: 0.69rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
}

.ys-module-hero__title {
    overflow: hidden;
    color: var(--ys-text) !important;
    font-weight: 850 !important;
    letter-spacing: -0.035em !important;
    text-overflow: ellipsis;
}

.ys-module-hero__subtitle {
    overflow: hidden;
    max-width: 650px;
    margin-top: 2px !important;
    color: var(--ys-text-muted) !important;
    text-overflow: ellipsis;
}

.ys-module-hero__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.ys-module-hero__actions .mud-button-root {
    min-height: 42px;
    border-radius: 13px;
    font-weight: 750;
    letter-spacing: 0;
    text-transform: none;
}

.ys-action-primary {
    color: #fff !important;
    background: var(--ys-primary) !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--ys-primary) 24%, transparent) !important;
}

.ys-action-accent {
    color: #362306 !important;
    background: linear-gradient(135deg, #FFD867, #FFAD45) !important;
    box-shadow: 0 8px 18px rgba(177, 104, 14, 0.18) !important;
}

.ys-action-quiet {
    border-color: color-mix(in srgb, var(--ys-primary) 28%, var(--ys-border)) !important;
    color: var(--ys-text) !important;
    background: color-mix(in srgb, var(--ys-surface) 88%, transparent) !important;
}

.ys-module-surface {
    overflow: hidden;
    border: 1px solid var(--ys-border);
    border-radius: var(--ys-radius-lg) !important;
    background: var(--ys-surface) !important;
    box-shadow: var(--ys-shadow-sm) !important;
}

.ys-module-loading {
    overflow: hidden;
    padding: 28px;
    border: 1px solid var(--ys-border);
    border-radius: var(--ys-radius-md);
    background: var(--ys-surface);
}

.ys-form-card,
.ys-form-guide {
    height: 100%;
    border: 1px solid var(--ys-border);
    border-radius: var(--ys-radius-md) !important;
    background: var(--ys-surface) !important;
    box-shadow: var(--ys-shadow-sm) !important;
}

.ys-form-card {
    overflow: hidden;
}

.ys-form-card__header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 24px;
    border-bottom: 1px solid var(--ys-border);
    background: color-mix(in srgb, var(--ys-primary) 5%, var(--ys-surface));
}

.ys-form-card__body {
    padding: 24px;
}

.ys-department-form .mud-input-outlined-border {
    border-radius: 13px !important;
}

.ys-department-form .mud-input-label {
    font-weight: 650;
}

.ys-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--ys-border);
}

.ys-form-actions__primary,
.ys-form-actions__secondary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.ys-form-actions .mud-button-root {
    min-height: 42px;
    border-radius: 13px;
    font-weight: 750;
    letter-spacing: 0;
    text-transform: none;
}

.ys-form-guide {
    position: sticky;
    top: 88px;
    padding: 24px;
}

.ys-form-guide__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 17px;
    color: #362306;
    background: linear-gradient(145deg, #FFD867, #FFB24A);
    box-shadow: 0 9px 18px rgba(177, 104, 14, 0.17);
}

.ys-guide-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ys-guide-item .mud-icon-root {
    margin-top: 2px;
}

.ys-page {
    width: 100%;
    padding-bottom: 48px;
}

.ys-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(24px, 4vw, 44px);
    border: 1px solid color-mix(in srgb, var(--ys-primary) 16%, var(--ys-border));
    border-radius: var(--ys-radius-lg);
    background:
        radial-gradient(circle at 86% 16%, rgba(255, 201, 74, 0.76) 0 9%, transparent 10%),
        radial-gradient(circle at 94% 80%, rgba(245, 138, 61, 0.25) 0 18%, transparent 19%),
        linear-gradient(135deg, color-mix(in srgb, var(--ys-primary) 16%, var(--ys-surface)), var(--ys-surface) 58%);
    box-shadow: var(--ys-shadow-sm);
}

.ys-hero::after {
    position: absolute;
    right: 12%;
    bottom: -44px;
    width: 130px;
    height: 130px;
    border: 24px solid color-mix(in srgb, var(--ys-primary) 12%, transparent);
    border-radius: 50%;
    content: "";
}

.ys-hero__content {
    position: relative;
    z-index: 1;
    max-width: 700px;
}

.ys-eyebrow {
    color: var(--ys-primary) !important;
    font-size: 0.73rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
}

.ys-page-title {
    margin-top: 6px !important;
    color: var(--ys-text) !important;
    font-weight: 850 !important;
    letter-spacing: -0.035em !important;
}

.ys-lead {
    max-width: 660px;
    color: var(--ys-text-muted) !important;
    line-height: 1.65 !important;
}

.ys-section {
    margin-top: 28px;
}

.ys-section-heading {
    margin-bottom: 14px;
}

.ys-section-title {
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
}

.ys-section-caption {
    color: var(--ys-text-muted) !important;
}

.ys-surface,
.ys-card {
    height: 100%;
    border: 1px solid var(--ys-border);
    border-radius: var(--ys-radius-md) !important;
    background: var(--ys-surface) !important;
    box-shadow: var(--ys-shadow-sm) !important;
}

.ys-surface {
    padding: 22px;
}

.ys-card--interactive {
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.ys-card--interactive:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--ys-primary) 32%, var(--ys-border));
    box-shadow: var(--ys-shadow-md) !important;
}

.ys-card--violet {
    border-color: transparent;
    background: linear-gradient(145deg, #7357F6, #8D73FF) !important;
    color: #fff;
}

.ys-card--sunset {
    border-color: var(--ys-gold-border);
    background: var(--ys-gold-gradient) !important;
    color: var(--ys-gold-text);
    box-shadow: var(--ys-gold-shadow) !important;
}

.ys-card--soft {
    border-color: color-mix(in srgb, var(--ys-primary) 18%, var(--ys-border));
    background: linear-gradient(145deg, var(--ys-primary-soft), var(--ys-surface) 62%) !important;
}

.ys-card--violet .mud-typography,
.ys-card--violet .mud-icon-root {
    color: #fff !important;
}

.ys-card--sunset .mud-typography,
.ys-card--sunset .mud-icon-root {
    color: var(--ys-gold-text) !important;
}

.ys-sunset-chip {
    border-color: var(--ys-gold-border) !important;
    background: var(--ys-gold-panel-strong) !important;
    color: var(--ys-gold-text) !important;
}

.ys-sunset-action {
    background: var(--ys-gold-action-background) !important;
    color: var(--ys-gold-action-text) !important;
}

.ys-sunset-action .mud-icon-root {
    color: var(--ys-gold-action-text) !important;
}

.ys-card--sunset .mud-divider {
    border-color: var(--ys-gold-border) !important;
}

.ys-card--sunset .ys-icon-tile--dark {
    border: 1px solid var(--ys-gold-border);
    background: var(--ys-gold-panel-strong);
    color: var(--ys-gold-accent);
}

.ys-theme-dark .ys-sunset-action {
    box-shadow: 0 8px 18px rgba(12, 8, 2, 0.28) !important;
}

.ys-icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    color: var(--ys-primary);
    background: var(--ys-primary-soft);
}

.ys-icon-tile--light {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
}

.ys-icon-tile--dark {
    color: #3b2606;
    background: rgba(255, 255, 255, 0.4);
}

.ys-metric {
    font-weight: 850 !important;
    letter-spacing: -0.035em !important;
}

.ys-profile-card {
    position: relative;
    overflow: hidden;
}

.ys-profile-card::before {
    position: absolute;
    inset: 0 0 auto;
    height: 78px;
    background: linear-gradient(115deg, #7357F6, #9D85FF 70%, #FFC94A 150%);
    content: "";
}

.ys-profile-card__avatar {
    position: relative;
    width: 72px !important;
    height: 72px !important;
    border: 5px solid var(--ys-surface);
    box-shadow: 0 7px 18px rgba(24, 18, 58, 0.2);
}

.ys-button-row .mud-button-root {
    min-height: 42px;
    border-radius: 13px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.ys-loading-button .mud-progress-circular {
    margin-right: 8px;
}

.ys-toast-preview {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 76px;
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: 15px;
}

.ys-toast-preview--success {
    color: var(--ys-success);
    background: var(--ys-success-soft);
    border-color: color-mix(in srgb, var(--ys-success) 20%, transparent);
}

.ys-toast-preview--info {
    color: var(--ys-info);
    background: var(--ys-info-soft);
    border-color: color-mix(in srgb, var(--ys-info) 20%, transparent);
}

.ys-toast-preview--warning {
    color: color-mix(in srgb, var(--ys-warning) 78%, var(--ys-text));
    background: var(--ys-warning-soft);
    border-color: color-mix(in srgb, var(--ys-warning) 24%, transparent);
}

.ys-toast-preview--error {
    color: var(--ys-error);
    background: var(--ys-error-soft);
    border-color: color-mix(in srgb, var(--ys-error) 20%, transparent);
}

.ys-toast-preview .mud-typography {
    color: var(--ys-text) !important;
}

.ys-data-table {
    overflow: hidden;
    border: 1px solid var(--ys-border);
    border-radius: var(--ys-radius-md) !important;
    background: var(--ys-surface) !important;
    box-shadow: var(--ys-shadow-sm) !important;
}

.ys-data-table .mud-table-head {
    background: color-mix(in srgb, var(--ys-primary) 7%, var(--ys-surface));
}

.ys-data-table .mud-table-cell {
    padding-top: 14px;
    padding-bottom: 14px;
    border-color: var(--ys-border);
}

.ys-list-demo {
    overflow: hidden;
    border: 1px solid var(--ys-border);
    border-radius: var(--ys-radius-lg);
    background: var(--ys-surface);
    box-shadow: var(--ys-shadow-sm);
}

.ys-list-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    border-bottom: 1px solid color-mix(in srgb, var(--ys-primary) 14%, var(--ys-border));
    background:
        radial-gradient(circle at 88% 16%, rgba(255, 201, 74, 0.34), transparent 22%),
        linear-gradient(125deg, color-mix(in srgb, var(--ys-primary) 13%, var(--ys-surface)), var(--ys-surface) 62%);
}

.ys-list-hero__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 17px;
    color: #fff;
    background: linear-gradient(145deg, #7357F6, #9179FF);
    box-shadow: 0 9px 20px rgba(85, 61, 190, 0.22);
}

.ys-list-hero__title {
    font-weight: 850 !important;
    letter-spacing: -0.025em !important;
}

.ys-list-hero__caption {
    color: var(--ys-text-muted) !important;
}

.ys-list-hero__button {
    min-height: 42px;
    flex-shrink: 0;
    border-radius: 13px !important;
    color: #362306 !important;
    background: linear-gradient(135deg, #FFD867, #FFAD45) !important;
    box-shadow: 0 8px 18px rgba(177, 104, 14, 0.18) !important;
    font-weight: 750 !important;
    text-transform: none !important;
}

.ys-directory-table {
    border: 0;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.ys-directory-table .mud-table-toolbar {
    height: auto;
    min-height: 78px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ys-border);
}

.ys-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.ys-search-field {
    width: min(100%, 560px);
}

.ys-search-field .mud-input-outlined-border {
    border-radius: 13px !important;
}

.ys-list-toolbar__result {
    flex-shrink: 0;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 12px;
    background: var(--ys-primary-soft);
}

.ys-directory-table .mud-table-head {
    background: color-mix(in srgb, var(--ys-primary) 6%, var(--ys-surface));
}

.ys-directory-table .mud-table-head .mud-table-cell {
    color: var(--ys-text-muted);
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.ys-directory-table .mud-table-row {
    transition: background-color 150ms ease;
}

.ys-directory-table .mud-table-row:hover {
    background: color-mix(in srgb, var(--ys-warning) 6%, var(--ys-surface)) !important;
}

.ys-department-avatar {
    font-size: 0.74rem !important;
    font-weight: 800 !important;
}

.ys-directory-table .mud-table-pagination {
    border-top: 1px solid var(--ys-border);
    background: color-mix(in srgb, var(--ys-primary) 3%, var(--ys-surface));
}

.ys-directory-table .mud-table-pagination .mud-icon-button {
    margin: 0 2px;
    border-radius: 11px;
}

.ys-directory-table .mud-table-pagination .mud-icon-button:not(.mud-disabled):hover {
    color: #362306;
    background: var(--ys-yellow);
}

.ys-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    padding: 32px;
    text-align: center;
}

.ys-list-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 14px;
    border-radius: 19px;
    color: var(--ys-primary);
    background: var(--ys-primary-soft);
}

.ys-person-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ys-person-row__meta {
    min-width: 0;
}

.ys-person-row__email {
    overflow: hidden;
    color: var(--ys-text-muted) !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Departments module */
.ys-production-table {
    border: 0;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.ys-production-table .mud-table-container {
    overflow-x: auto;
}

.ys-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--ys-primary) 14%, var(--ys-border));
    border-radius: 11px;
    color: var(--ys-primary);
    background: var(--ys-primary-soft);
    font-size: 0.78rem;
    font-weight: 800;
}

.ys-row-action {
    border: 1px solid color-mix(in srgb, var(--ys-primary) 17%, var(--ys-border));
    border-radius: 11px !important;
    background: var(--ys-primary-soft) !important;
    transition: transform 150ms ease, background-color 150ms ease;
}

.ys-row-action:hover {
    color: #362306 !important;
    background: var(--ys-yellow) !important;
    transform: translateX(2px);
}

.ys-department-tabs .mud-tabs-tabbar {
    padding: 0 20px;
}

.ys-department-tabs .mud-tabs-panels {
    padding: 0;
}

.ys-tab-content {
    padding: 24px;
    background: color-mix(in srgb, var(--ys-primary) 2%, var(--ys-surface));
}

.ys-department-identity,
.ys-detail-metric,
.ys-detail-section {
    height: 100%;
}

.ys-department-identity,
.ys-detail-metric {
    min-height: 210px;
}

.ys-department-identity {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ys-detail-name {
    color: inherit !important;
    font-weight: 850 !important;
    letter-spacing: -0.04em !important;
}

.ys-detail-metric {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.ys-detail-title {
    color: var(--ys-text) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

.ys-detail-section {
    padding: 22px;
}

.ys-related-item,
.ys-inline-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 76px;
    padding: 14px;
    border: 1px solid var(--ys-border);
    border-radius: 15px;
    background: color-mix(in srgb, var(--ys-primary) 4%, var(--ys-surface));
}

.ys-related-item__copy {
    min-width: 0;
    flex: 1;
}

.ys-inline-empty {
    color: var(--ys-text-muted);
    border-style: dashed;
}

.ys-list-empty.ys-inline-empty {
    min-height: 230px;
    padding: 28px;
}

.ys-compact-table {
    overflow: hidden;
    border: 1px solid var(--ys-border);
    border-radius: 15px !important;
    background: var(--ys-surface) !important;
}

.ys-compact-table .mud-table-head {
    background: color-mix(in srgb, var(--ys-primary) 6%, var(--ys-surface));
}

.ys-compact-table .mud-table-cell {
    border-color: var(--ys-border);
}

.ys-error-state {
    border-radius: var(--ys-radius-md) !important;
}

.ys-list-toolbar__tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: min(100%, 520px);
}

.ys-staff-toolbar .ys-search-field {
    width: min(100%, 360px);
}

.ys-staff-toolbar .ys-list-toolbar__result {
    display: inline-flex;
    align-items: center;
    color: var(--ys-primary);
    font-size: 0.78rem;
    font-weight: 750;
    white-space: nowrap;
}

.ys-person-avatar {
    font-size: 0.72rem !important;
    font-weight: 850 !important;
}

.ys-cell-title {
    color: var(--ys-text) !important;
    font-weight: 750 !important;
}

.ys-email-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    color: var(--ys-text-muted);
    text-decoration: none;
}

.ys-email-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ys-email-link:hover {
    color: var(--ys-primary);
}

.ys-table-number {
    width: 62px;
    color: var(--ys-text-muted) !important;
}

.ys-table-actions {
    width: 76px;
    text-align: right !important;
}

/* Staff module */
.ys-staff-tabs .mud-tabs-tabbar {
    padding: 0 20px;
}

.ys-staff-tabs .mud-tabs-panels {
    padding: 0;
}

.ys-staff-identity {
    display: flex;
    min-height: 280px;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
}

.ys-staff-profile-avatar {
    width: 64px !important;
    height: 64px !important;
    border: 2px solid rgba(255, 255, 255, 0.48);
    color: #fff !important;
    background: rgba(255, 255, 255, 0.17) !important;
    font-size: 1rem !important;
    font-weight: 850 !important;
}

.ys-staff-facts {
    display: grid;
    gap: 10px;
}

.ys-staff-fact {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 12px 14px;
    border: 1px solid var(--ys-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--ys-primary) 3%, var(--ys-surface));
}

.ys-staff-fact > .mud-icon-root {
    flex: 0 0 auto;
}

.ys-staff-fact > div {
    min-width: 0;
}

.ys-staff-form .mud-input-outlined-border,
.ys-staff-assignment__input .mud-input-outlined-border,
.ys-schedule-filters .mud-input-outlined-border,
.ys-teacher-log .mud-input-outlined-border {
    border-radius: 13px !important;
}

.ys-staff-form .mud-input-label {
    font-weight: 650;
}

.ys-staff-tab__heading,
.ys-staff-subsection-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ys-staff-tab__heading {
    margin-bottom: 20px;
}

.ys-staff-subsection-heading {
    margin: 28px 0 16px;
    padding-top: 26px;
    border-top: 1px solid var(--ys-border);
}

.ys-inline-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 180px;
    border: 1px dashed var(--ys-border);
    border-radius: 17px;
    color: var(--ys-text-muted);
    background: color-mix(in srgb, var(--ys-primary) 2%, var(--ys-surface));
}

.ys-staff-department-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 108px;
    height: 100%;
    padding: 16px;
    border: 1px solid var(--ys-border);
    border-radius: 17px !important;
    background: var(--ys-surface) !important;
    box-shadow: var(--ys-shadow-sm) !important;
}

.ys-staff-department-card__copy {
    min-width: 0;
    flex: 1;
}

.ys-staff-department-card__copy .mud-button-root {
    min-width: 0;
    margin: 3px 0 0 -8px;
    padding-inline: 8px;
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.ys-danger-icon-button {
    border: 1px solid color-mix(in srgb, var(--ys-error) 20%, var(--ys-border));
    border-radius: 11px !important;
    background: var(--ys-error-soft) !important;
}

.ys-staff-assignment {
    display: grid;
    grid-template-columns: minmax(220px, 0.72fr) minmax(300px, 1.28fr);
    align-items: center;
    gap: 24px;
    margin-top: 24px;
    padding: 20px;
    border: 1px solid color-mix(in srgb, var(--ys-warning) 28%, var(--ys-border));
    border-radius: 18px !important;
    background: linear-gradient(135deg, var(--ys-warning-soft), var(--ys-surface) 68%) !important;
}

.ys-staff-assignment__heading,
.ys-staff-assignment__controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ys-staff-assignment__controls {
    justify-content: flex-end;
}

.ys-staff-assignment__input {
    min-width: 0;
    flex: 1;
}

.ys-staff-assignment__controls .mud-button-root,
.ys-staff-sticky-actions .mud-button-root,
.ys-schedule-filters .mud-button-root,
.ys-teacher-log .ys-action-primary {
    min-height: 42px;
    border-radius: 13px;
    font-weight: 750;
    letter-spacing: 0;
    text-transform: none;
}

.ys-permission-card {
    overflow: hidden;
    border: 1px solid var(--ys-border);
    border-radius: 18px !important;
    background: var(--ys-surface) !important;
    box-shadow: var(--ys-shadow-sm) !important;
}

.ys-permission-card__header {
    min-height: 76px;
    border-bottom: 1px solid var(--ys-border);
    background:
        radial-gradient(circle at 92% 0, rgba(255, 201, 74, 0.34), transparent 34%),
        color-mix(in srgb, var(--ys-primary) 7%, var(--ys-surface));
}

.ys-permission-card__avatar {
    color: #fff !important;
    background: linear-gradient(145deg, #7357F6, #9179FF) !important;
    box-shadow: 0 7px 15px rgba(82, 58, 181, 0.18);
}

.ys-permission-card__title {
    color: var(--ys-text) !important;
    font-weight: 800 !important;
}

.ys-permission-card .mud-list-item {
    border-radius: 11px;
}

.ys-permission-card .mud-list-item:hover {
    background: var(--ys-primary-soft);
}

.ys-staff-sticky-actions {
    position: sticky;
    bottom: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
    padding: 12px;
    border: 1px solid var(--ys-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--ys-surface) 92%, transparent);
    box-shadow: var(--ys-shadow-md);
    backdrop-filter: blur(14px);
}

.ys-view-toggle {
    padding: 4px;
    border: 1px solid color-mix(in srgb, var(--ys-primary) 13%, var(--ys-border));
    border-radius: 14px !important;
    background: var(--ys-primary-soft);
}

.ys-view-toggle .mud-toggle-item {
    border: 0 !important;
    border-radius: 10px !important;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.ys-schedule-panel,
.ys-teacher-log {
    background: transparent !important;
}

.ys-period-navigation {
    min-height: 48px;
    margin-bottom: 18px;
    padding: 5px 8px;
    border: 1px solid var(--ys-border);
    border-radius: 15px;
    background: color-mix(in srgb, var(--ys-primary) 4%, var(--ys-surface));
}

.ys-period-navigation__button {
    border-radius: 11px !important;
}

.ys-period-navigation__label {
    min-width: 150px;
    margin-inline: 10px !important;
    text-align: center;
    font-weight: 800 !important;
}

.ys-schedule-calendar {
    overflow: hidden;
    border: 1px solid var(--ys-border);
    border-radius: 16px !important;
    background: var(--ys-surface) !important;
}

.ys-schedule-calendar thead {
    background: color-mix(in srgb, var(--ys-primary) 6%, var(--ys-surface));
}

.ys-schedule-calendar th {
    color: var(--ys-text-muted) !important;
    font-size: 0.72rem;
    font-weight: 800 !important;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.ys-schedule-calendar th,
.ys-schedule-calendar td {
    border-color: var(--ys-border) !important;
}

.ys-schedule-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--ys-warning) 28%, var(--ys-border));
    border-radius: 16px !important;
    background: linear-gradient(135deg, var(--ys-warning-soft), var(--ys-surface) 72%) !important;
}

.ys-schedule-filters {
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid var(--ys-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--ys-primary) 3%, var(--ys-surface));
}

.ys-schedule-day {
    margin-bottom: 14px;
    padding: 16px;
    border: 1px solid var(--ys-border);
    border-radius: 17px !important;
    background: var(--ys-surface) !important;
    box-shadow: var(--ys-shadow-sm) !important;
}

.ys-schedule-event {
    margin-bottom: 9px;
    padding: 12px 14px;
    border: 1px solid var(--ys-border);
    border-radius: 13px !important;
    background: color-mix(in srgb, var(--ys-primary) 2%, var(--ys-surface)) !important;
}

.ys-work-schedule-card {
    padding: 20px;
    border: 1px solid var(--ys-border);
    border-radius: 18px !important;
    background: var(--ys-surface) !important;
    box-shadow: var(--ys-shadow-sm) !important;
}

.ys-work-schedule-card__heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.ys-work-schedule-card__heading > div:first-child {
    flex: 1;
}

.ys-work-schedule-metrics {
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.ys-work-schedule-metric {
    min-width: 160px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--ys-primary) 18%, var(--ys-border));
    border-radius: 15px !important;
    background: var(--ys-primary-soft) !important;
}

.ys-work-schedule-metric--accent {
    border-color: color-mix(in srgb, var(--ys-warning) 30%, var(--ys-border));
    background: var(--ys-warning-soft) !important;
}

.ys-work-schedule-table {
    overflow-x: auto;
}

.ys-teacher-log__filter,
.ys-teacher-log__summary {
    padding: 16px;
    border: 1px solid var(--ys-border);
    border-radius: 16px !important;
    background: color-mix(in srgb, var(--ys-primary) 3%, var(--ys-surface)) !important;
}

.ys-teacher-log__summary {
    border-color: color-mix(in srgb, var(--ys-warning) 26%, var(--ys-border));
    background: linear-gradient(135deg, var(--ys-warning-soft), var(--ys-surface) 75%) !important;
}

/* Students module */
.ys-student-tabs .mud-tabs-tabbar {
    padding: 0 20px;
}

.ys-student-tabs .mud-tabs-panels {
    padding: 0;
}

.ys-student-identity {
    display: flex;
    min-height: 280px;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
}

.ys-student-profile-avatar {
    width: 64px !important;
    height: 64px !important;
    border: 2px solid rgba(255, 255, 255, 0.48);
    color: #fff !important;
    background: rgba(255, 255, 255, 0.17) !important;
    font-size: 1rem !important;
    font-weight: 850 !important;
}

.ys-student-facts {
    display: grid;
    gap: 10px;
}

.ys-student-fact {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 12px 14px;
    border: 1px solid var(--ys-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--ys-primary) 3%, var(--ys-surface));
}

.ys-student-fact > .mud-icon-root {
    flex: 0 0 auto;
}

.ys-student-fact > div {
    min-width: 0;
}

.ys-student-fact--invitation {
    border-color: color-mix(in srgb, var(--ys-warning) 24%, var(--ys-border));
    background: linear-gradient(135deg, var(--ys-warning-soft), var(--ys-surface) 78%);
}

.ys-student-form .mud-input-outlined-border {
    border-radius: 13px !important;
}

.ys-student-form .mud-input-label {
    font-weight: 650;
}

.ys-invitation-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--ys-warning) 28%, var(--ys-border));
    border-radius: 15px;
    background: linear-gradient(135deg, var(--ys-warning-soft), var(--ys-surface) 76%);
}

.ys-assessment-browser__heading,
.ys-assessment-level-heading {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ys-assessment-browser__heading {
    justify-content: space-between;
    margin-bottom: 20px;
}

.ys-assessment-level-heading {
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid var(--ys-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--ys-primary) 4%, var(--ys-surface));
}

.ys-assessment-timeline {
    padding-top: 4px;
}

.ys-assessment-item-card {
    padding: 18px;
    border: 1px solid var(--ys-border);
    border-radius: 17px !important;
    background: var(--ys-surface) !important;
    box-shadow: var(--ys-shadow-sm) !important;
}

.ys-assessment-item-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.ys-assessment-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 11px;
    color: #362306;
    background: linear-gradient(135deg, #FFD867, #FFAD45);
    font-size: 0.76rem;
    font-weight: 850;
}

.ys-assessment-grade {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--ys-border);
    border-radius: 14px;
    color: var(--ys-text-muted);
    background: color-mix(in srgb, var(--ys-primary) 3%, var(--ys-surface));
}

.ys-assessment-grade > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    color: var(--ys-primary);
    background: var(--ys-primary-soft);
}

.ys-assessment-grade--success {
    border-color: color-mix(in srgb, var(--ys-success) 24%, var(--ys-border));
    color: var(--ys-text);
    background: var(--ys-success-soft);
}

.ys-assessment-grade--success > span {
    color: var(--ys-success);
    background: color-mix(in srgb, var(--ys-success) 17%, transparent);
}

.ys-assessment-subject-card,
.ys-assessment-plan-card {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 112px;
    height: 100%;
    padding: 16px;
    border: 1px solid var(--ys-border);
    border-radius: 17px !important;
    background: var(--ys-surface) !important;
    box-shadow: var(--ys-shadow-sm) !important;
}

.ys-assessment-subject-card__copy,
.ys-assessment-plan-card__copy {
    min-width: 0;
    flex: 1;
}

.ys-assessment-plan-card {
    min-height: 136px;
    align-items: flex-start;
    background:
        radial-gradient(circle at 95% 0, rgba(255, 201, 74, 0.25), transparent 32%),
        var(--ys-surface) !important;
}

.ys-assessment-plan-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(145deg, #7357F6, #9179FF);
    box-shadow: 0 9px 18px rgba(82, 58, 181, 0.2);
}

.ys-assessment-plan-card__copy .mud-button-root {
    min-width: 0;
    max-width: 100%;
    margin: 8px 0 0 -8px;
    padding-inline: 8px;
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

/* Subjects module */
.ys-subject-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 14px;
}

.ys-subject-avatar--orange {
    color: #8c4b08;
    background: var(--ys-warning-soft);
}

.ys-subject-avatar--violet {
    color: var(--ys-primary);
    background: var(--ys-primary-soft);
}

.ys-subject-avatar--blue {
    color: var(--ys-info);
    background: var(--ys-info-soft);
}

.ys-subject-avatar--green {
    color: var(--ys-success);
    background: var(--ys-success-soft);
}

.ys-subjects-table .ys-table-actions {
    width: 104px;
    padding-right: 28px !important;
}

.ys-subject-identity {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 210px;
    height: 100%;
}

.ys-subject-notes {
    padding: 18px;
    border-left: 4px solid var(--ys-yellow);
    border-radius: 0 14px 14px 0;
    background: color-mix(in srgb, var(--ys-warning) 6%, var(--ys-surface));
    line-height: 1.65 !important;
    white-space: pre-wrap;
}

.ys-subject-tab-heading,
.ys-subject-content-section__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.ys-subject-content-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ys-subject-content-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--ys-border);
    border-radius: 15px;
    background: var(--ys-surface);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--ys-primary) 5%, transparent);
}

.ys-subject-content-item--topic {
    border-left: 4px solid var(--ys-orange);
}

.ys-subject-content-item--question {
    border-left: 4px solid var(--ys-primary);
}

.ys-subject-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 11px;
    color: #362306;
    background: linear-gradient(135deg, #FFD867, #FFAD45);
    font-size: 0.76rem;
    font-weight: 850;
}

.ys-subject-content-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 230px;
    padding: 28px;
    border: 1px dashed var(--ys-border);
    border-radius: 17px;
    background: color-mix(in srgb, var(--ys-primary) 3%, var(--ys-surface));
    text-align: center;
}

.ys-subject-content-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 12px;
    border-radius: 18px;
    color: var(--ys-primary);
    background: var(--ys-primary-soft);
}

.ys-subject-content-empty__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: min(100%, 440px);
}

.ys-subject-content-empty__title,
.ys-subject-content-empty__text {
    width: 100%;
    margin: 0 !important;
    text-align: center;
}

.ys-subject-content-empty__title {
    line-height: 1.35 !important;
}

.ys-subject-content-empty__text {
    line-height: 1.5 !important;
}

.ys-subject-content-section {
    margin-top: 28px;
    padding-top: 26px;
    border-top: 1px solid var(--ys-border);
}

.ys-subject-editor {
    overflow: hidden;
    height: 100%;
    border: 1px solid var(--ys-border);
    border-radius: var(--ys-radius-md) !important;
    background: var(--ys-surface) !important;
    box-shadow: var(--ys-shadow-sm) !important;
}

.ys-subject-editor--topic {
    border-top: 4px solid var(--ys-orange);
}

.ys-subject-editor--question {
    border-top: 4px solid var(--ys-primary);
}

.ys-subject-editor__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px;
    border-bottom: 1px solid var(--ys-border);
    background: color-mix(in srgb, var(--ys-primary) 4%, var(--ys-surface));
}

.ys-subject-editor__header .mud-button-root {
    min-height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    font-weight: 750;
    letter-spacing: 0;
    text-transform: none;
}

.ys-subject-editor__heading {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ys-subject-editor__composer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 20px;
    border-bottom: 1px solid var(--ys-border);
}

.ys-subject-editor__input,
.ys-subject-content-edit-item__field {
    flex: 1;
}

.ys-subject-editor__input .mud-input-outlined-border,
.ys-subject-content-edit-item__field .mud-input-outlined-border {
    border-radius: 13px !important;
}

.ys-subject-editor__add {
    width: 46px;
    height: 46px;
    margin-top: 5px;
    border-radius: 14px !important;
    color: #362306 !important;
    background: linear-gradient(135deg, #FFD867, #FFAD45) !important;
    box-shadow: 0 7px 15px rgba(177, 104, 14, 0.18);
}

.ys-subject-editor > .ys-subject-content-list,
.ys-subject-editor > .ys-subject-content-empty {
    margin: 20px;
}

.ys-subject-content-edit-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--ys-border);
    border-radius: 15px;
    background: color-mix(in srgb, var(--ys-primary) 2%, var(--ys-surface));
}

.ys-subject-content-edit-item__actions {
    display: grid;
    grid-template-columns: repeat(2, 36px);
    gap: 4px;
}

.ys-subject-content-edit-item__actions .mud-icon-button {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

/* Public entry */
.ys-public-layout,
.ys-public-layout__content {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
}

.ys-public-layout__content {
    display: block;
}

.ys-public-login {
    position: relative;
    display: flex;
    overflow: hidden;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 48px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    background:
        radial-gradient(circle at 15% 18%, rgba(255, 255, 255, 0.16), transparent 24%),
        radial-gradient(circle at 78% 76%, rgba(255, 227, 145, 0.34), transparent 28%),
        linear-gradient(128deg, #5133B7 0%, #7656E7 44%, #AD75C9 67%, #F2AF3D 100%);
    isolation: isolate;
}

.ys-public-login::before,
.ys-public-login::after {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.ys-public-login::before {
    top: -210px;
    right: -120px;
    width: 560px;
    height: 560px;
    border: 86px solid rgba(255, 255, 255, 0.08);
}

.ys-public-login::after {
    bottom: -250px;
    left: -150px;
    width: 610px;
    height: 610px;
    background: radial-gradient(circle, rgba(255, 205, 77, 0.26), transparent 66%);
}

.ys-public-login__orb,
.ys-public-login__ring {
    position: absolute;
    z-index: -1;
    display: block;
    border-radius: 50%;
    pointer-events: none;
}

.ys-public-login__orb--one {
    top: 12%;
    left: 6%;
    width: 84px;
    height: 84px;
    background: linear-gradient(145deg, rgba(255, 216, 103, 0.92), rgba(255, 174, 69, 0.68));
    box-shadow: 0 22px 60px rgba(63, 34, 6, 0.18);
}

.ys-public-login__orb--two {
    right: 8%;
    bottom: 13%;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.64);
    box-shadow: 0 14px 34px rgba(73, 47, 6, 0.18);
}

.ys-public-login__ring {
    top: 17%;
    right: 32%;
    width: 116px;
    height: 116px;
    border: 22px solid rgba(255, 255, 255, 0.08);
}

.ys-public-login__shell {
    display: grid;
    z-index: 1;
    grid-template-columns: minmax(0, 1.2fr) minmax(390px, 0.8fr);
    align-items: center;
    gap: clamp(42px, 7vw, 112px);
    width: min(100%, 1240px);
}

.ys-public-login__brand {
    max-width: 690px;
}

.ys-public-login__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    margin-bottom: 28px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 21px;
    color: #422805;
    background: linear-gradient(145deg, #FFE38A, #FFB33F);
    box-shadow: 0 18px 38px rgba(61, 33, 6, 0.2);
}

.ys-public-login__logo .mud-icon-root {
    font-size: 2rem;
}

.ys-public-login__eyebrow,
.ys-public-login__card-eyebrow {
    font-size: 0.72rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
}

.ys-public-login__eyebrow {
    color: #FFE186 !important;
}

.ys-public-login__title {
    max-width: 680px;
    margin-top: 8px !important;
    color: #fff !important;
    font-weight: 900 !important;
    letter-spacing: -0.05em !important;
    line-height: 1.05 !important;
}

.ys-public-login__title span {
    color: #FFE083;
}

.ys-public-login__lead {
    max-width: 620px;
    margin-top: 20px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 1rem !important;
    line-height: 1.68 !important;
}

.ys-public-login__features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 34px;
}

.ys-public-login__features > div {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(10px);
}

.ys-public-login__features > div > div {
    min-width: 0;
    overflow: hidden;
}

.ys-public-login__features > div > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    color: #FFE083;
    background: rgba(255, 255, 255, 0.12);
}

.ys-public-login__features .mud-typography {
    display: block;
    overflow: hidden;
    color: #fff !important;
    overflow-wrap: anywhere;
}

.ys-public-login__features .mud-typography-caption {
    color: rgba(255, 255, 255, 0.64) !important;
    font-size: 0.64rem !important;
    line-height: 1.35 !important;
    white-space: normal;
}

.ys-public-login__card {
    position: relative;
    overflow: hidden;
    padding: 36px;
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 28px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 28px 72px rgba(39, 20, 85, 0.26) !important;
    backdrop-filter: blur(22px);
}

.ys-public-login__card::after {
    position: absolute;
    top: -72px;
    right: -68px;
    width: 180px;
    height: 180px;
    border: 34px solid rgba(115, 82, 232, 0.07);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.ys-public-login__card-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 26px;
    border-radius: 17px;
    color: #432805;
    background: linear-gradient(145deg, #FFE38A, #FFB33F);
    box-shadow: 0 12px 26px rgba(183, 111, 11, 0.2);
}

.ys-public-login__card-eyebrow {
    color: #7352E8 !important;
}

.ys-public-login__card-title {
    margin-top: 6px !important;
    color: #181329 !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
}

.ys-public-login__card-copy {
    margin-top: 12px !important;
    color: #6F687E !important;
    line-height: 1.6 !important;
}

.ys-public-login__button {
    min-height: 52px;
    margin-top: 28px !important;
    border-radius: 15px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #6847DC, #8466F2) !important;
    box-shadow: 0 12px 26px rgba(91, 61, 202, 0.28) !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.ys-public-login__button:hover {
    background: linear-gradient(135deg, #5C3BCF, #7658EA) !important;
    box-shadow: 0 15px 30px rgba(91, 61, 202, 0.34) !important;
}

.ys-public-login__security {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 12px;
    border: 1px solid rgba(41, 158, 104, 0.18);
    border-radius: 13px;
    color: #1B8C5A;
    background: rgba(49, 190, 126, 0.09);
}

.ys-public-login__security > span {
    display: inline-flex;
}

.ys-public-login__security .mud-typography {
    color: #205F46 !important;
    font-size: 0.72rem !important;
}

.ys-public-login__help {
    display: block;
    margin-top: 18px !important;
    color: #8A8395 !important;
    text-align: center;
}

.ys-public-login__footer {
    position: absolute;
    bottom: 24px;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.72rem;
    transform: translateX(-50%);
}

@media (max-width: 1000px) {
    .ys-public-login {
        justify-content: flex-start;
        padding: 38px 28px 78px;
    }

    .ys-public-login__shell {
        grid-template-columns: 1fr;
        gap: 36px;
        max-width: 680px;
    }

    .ys-public-login__brand {
        text-align: center;
    }

    .ys-public-login__logo {
        margin-bottom: 20px;
    }

    .ys-public-login__lead {
        margin-right: auto !important;
        margin-left: auto !important;
    }
}

@media (max-width: 600px) {
    .ys-public-login {
        padding: 26px 16px 72px;
    }

    .ys-public-login__title {
        font-size: 2.25rem !important;
    }

    .ys-public-login__features {
        grid-template-columns: 1fr;
        margin-top: 26px;
        text-align: left;
    }

    .ys-public-login__card {
        padding: 28px 22px;
        border-radius: 22px !important;
    }

    .ys-public-login__footer {
        width: calc(100% - 32px);
        justify-content: center;
        text-align: center;
    }

    .ys-public-login__orb--one {
        top: 4%;
        left: -24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ys-public-login__button {
        transition: none;
    }
}

/* Authentication transition */
.ys-auth-transition {
    position: relative;
    display: grid;
    overflow: hidden;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    place-items: center;
    background:
        radial-gradient(circle at 15% 18%, rgba(255, 255, 255, 0.16), transparent 24%),
        radial-gradient(circle at 78% 76%, rgba(255, 227, 145, 0.34), transparent 28%),
        linear-gradient(128deg, #5133B7 0%, #7656E7 44%, #AD75C9 67%, #F2AF3D 100%);
    isolation: isolate;
}

.ys-auth-transition::before,
.ys-auth-transition::after {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.ys-auth-transition::before {
    top: -220px;
    right: -130px;
    width: 560px;
    height: 560px;
    border: 86px solid rgba(255, 255, 255, 0.08);
}

.ys-auth-transition::after {
    bottom: -260px;
    left: -160px;
    width: 610px;
    height: 610px;
    background: radial-gradient(circle, rgba(255, 205, 77, 0.28), transparent 66%);
}

.ys-auth-transition__orb {
    position: absolute;
    z-index: -1;
    display: block;
    border-radius: 50%;
    pointer-events: none;
}

.ys-auth-transition__orb--one {
    top: 14%;
    left: 8%;
    width: 76px;
    height: 76px;
    background: linear-gradient(145deg, rgba(255, 216, 103, 0.92), rgba(255, 174, 69, 0.68));
    box-shadow: 0 22px 60px rgba(63, 34, 6, 0.18);
}

.ys-auth-transition__orb--two {
    right: 9%;
    bottom: 12%;
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.66);
    box-shadow: 0 14px 34px rgba(73, 47, 6, 0.18);
}

.ys-auth-transition__content {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 22px;
}

.ys-auth-transition__loader {
    position: relative;
    display: grid;
    width: 156px;
    height: 156px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 42px;
    place-items: center;
    background: rgba(255, 255, 255, 0.14);
    box-shadow:
        0 30px 70px rgba(48, 25, 99, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
    backdrop-filter: blur(20px);
}

.ys-auth-transition__loader::before {
    position: absolute;
    inset: 17px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    content: "";
}

.ys-auth-transition__loader::after {
    position: absolute;
    top: 17px;
    right: 17px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(145deg, #FFE38A, #FFB33F);
    box-shadow: 0 8px 20px rgba(91, 52, 7, 0.24);
    content: "";
}

.ys-auth-transition__spinner {
    position: absolute !important;
    width: 106px !important;
    height: 106px !important;
    color: #FFE083 !important;
}

.ys-auth-transition__mark {
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 20px;
    color: #6544D8;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 32px rgba(41, 22, 88, 0.22);
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: -0.06em;
}

.ys-auth-transition__mark .mud-icon-root {
    font-size: 1.9rem;
}

.ys-auth-transition__label {
    color: #fff !important;
    font-weight: 750 !important;
    letter-spacing: 0.01em !important;
    text-shadow: 0 8px 24px rgba(45, 23, 92, 0.34);
}

.ys-auth-transition__message {
    margin-top: -16px !important;
    color: rgba(255, 240, 166, 0.94) !important;
    font-weight: 750 !important;
    letter-spacing: 0.02em !important;
    text-align: center;
}

.ys-auth-logged-out {
    padding: 28px;
}

.ys-auth-logged-out__card {
    width: min(100%, 450px);
}

.ys-auth-logged-out__actions {
    margin-top: 28px;
}

.ys-auth-logged-out__actions .ys-public-login__button {
    margin-top: 0 !important;
}

.ys-auth-logged-out__secondary {
    min-height: 50px;
    margin-top: 12px !important;
    border-color: #D8D0EE !important;
    border-radius: 15px !important;
    color: #5E40D0 !important;
    background: rgba(111, 80, 226, 0.035) !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.ys-auth-logged-out__secondary:hover {
    border-color: #BCAEEC !important;
    background: rgba(111, 80, 226, 0.08) !important;
}

@media (max-width: 600px) {
    .ys-auth-transition__loader {
        width: 138px;
        height: 138px;
        border-radius: 36px;
    }

    .ys-auth-transition__spinner {
        width: 94px !important;
        height: 94px !important;
    }

    .ys-auth-transition__mark {
        width: 56px;
        height: 56px;
        border-radius: 18px;
    }

    .ys-auth-logged-out {
        padding: 18px;
    }
}

/* Dashboard */
.ys-dashboard .ys-module-hero {
    min-height: 142px;
    background:
        radial-gradient(circle at 88% 8%, rgba(255, 201, 74, 0.52), transparent 24%),
        radial-gradient(circle at 58% 130%, color-mix(in srgb, var(--ys-primary) 12%, transparent), transparent 34%),
        linear-gradient(128deg, color-mix(in srgb, var(--ys-primary) 16%, var(--ys-surface)), var(--ys-surface) 66%);
}

.ys-dashboard-date-chip {
    border-color: color-mix(in srgb, var(--ys-primary) 24%, var(--ys-border)) !important;
    color: var(--ys-text) !important;
    background: color-mix(in srgb, var(--ys-surface) 80%, transparent) !important;
    font-weight: 700;
    text-transform: capitalize;
    backdrop-filter: blur(8px);
}

.ys-dashboard-section {
    margin-top: 28px;
}

.ys-dashboard-section:first-of-type {
    margin-top: 28px;
}

.ys-dashboard-section--permissions {
    margin-top: 24px;
}

.ys-dashboard-section__heading,
.ys-dashboard-panel__header,
.ys-dashboard-panel__heading,
.ys-dashboard-metric__top,
.ys-dashboard-empty {
    display: flex;
    align-items: center;
}

.ys-dashboard-section__heading {
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.ys-dashboard-metrics .mud-grid-item,
.ys-dashboard-main-grid .mud-grid-item,
.ys-dashboard-top-grid .mud-grid-item {
    display: flex;
    align-items: flex-start;
}

.ys-dashboard-top-grid .ys-dashboard-profile,
.ys-dashboard-top-grid .ys-dashboard-permissions {
    height: auto;
}

.ys-dashboard-metric {
    position: relative;
    display: flex;
    overflow: hidden;
    width: 100%;
    min-height: 252px;
    padding: 20px;
    flex-direction: column;
    border: 1px solid var(--ys-border);
    border-radius: var(--ys-radius-md) !important;
    background: var(--ys-surface) !important;
    box-shadow: var(--ys-shadow-sm) !important;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.ys-dashboard-metric::after {
    position: absolute;
    top: -46px;
    right: -42px;
    width: 132px;
    height: 132px;
    border: 26px solid currentColor;
    border-radius: 50%;
    content: "";
    opacity: 0.055;
    pointer-events: none;
}

.ys-dashboard-metric:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, currentColor 28%, var(--ys-border));
    box-shadow: var(--ys-shadow-md) !important;
}

.ys-dashboard-metric--violet {
    color: var(--ys-primary);
    background: linear-gradient(155deg, var(--ys-primary-soft), var(--ys-surface) 58%) !important;
}

.ys-dashboard-metric--green {
    color: var(--ys-success);
    background: linear-gradient(155deg, var(--ys-success-soft), var(--ys-surface) 58%) !important;
}

.ys-dashboard-metric--orange {
    color: #9a5808;
    background: linear-gradient(155deg, var(--ys-warning-soft), var(--ys-surface) 58%) !important;
}

.ys-dashboard-metric--blue {
    color: var(--ys-info);
    background: linear-gradient(155deg, var(--ys-info-soft), var(--ys-surface) 58%) !important;
}

.ys-dashboard-metric__top {
    position: relative;
    z-index: 1;
    justify-content: space-between;
    min-height: 48px;
}

.ys-dashboard-metric__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    color: currentColor;
    background: color-mix(in srgb, currentColor 12%, var(--ys-surface));
}

.ys-dashboard-metric__pending {
    padding: 4px 8px;
    border: 1px solid color-mix(in srgb, currentColor 24%, var(--ys-border));
    border-radius: 8px;
    color: currentColor;
    background: color-mix(in srgb, currentColor 6%, var(--ys-surface));
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.1em;
}

.ys-dashboard-metric__value {
    display: flex;
    align-items: center;
    min-height: 66px;
    margin-top: 10px;
}

.ys-dashboard-metric__value .mud-typography {
    color: var(--ys-text) !important;
    font-weight: 900 !important;
    letter-spacing: -0.055em !important;
}

.ys-dashboard-metric__title {
    color: var(--ys-text) !important;
    font-weight: 800 !important;
}

.ys-dashboard-metric__caption {
    min-height: 38px;
    margin-top: 2px !important;
    color: var(--ys-text-muted) !important;
    font-size: 0.72rem !important;
    line-height: 1.45 !important;
}

.ys-dashboard-metric__link {
    align-self: flex-start;
    min-width: 0 !important;
    margin-top: auto !important;
    padding: 7px 0 0 !important;
    color: currentColor !important;
    font-weight: 750 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.ys-dashboard-main-grid {
    margin-top: 18px !important;
}

.ys-dashboard-profile,
.ys-dashboard-panel {
    overflow: hidden;
    width: 100%;
    border: 1px solid var(--ys-border);
    border-radius: var(--ys-radius-lg) !important;
    background: var(--ys-surface) !important;
    box-shadow: var(--ys-shadow-sm) !important;
}

.ys-dashboard-profile__cover {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 132px;
    padding: 24px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 18%, rgba(255, 213, 94, 0.7), transparent 24%),
        linear-gradient(135deg, #6648D9, #8468F2 68%, #B28AF8);
}

.ys-dashboard-profile__cover::after {
    position: absolute;
    right: 20%;
    bottom: -58px;
    width: 112px;
    height: 112px;
    border: 20px solid rgba(255, 255, 255, 0.09);
    border-radius: 50%;
    content: "";
}

.ys-dashboard-profile__cover > .mud-icon-root,
.ys-dashboard-profile__cover-actions > .mud-icon-root {
    position: relative;
    z-index: 1;
    padding: 10px;
    box-sizing: content-box;
    border-radius: 14px;
    color: #3b2606;
    background: linear-gradient(135deg, #FFD867, #FFB24A);
}

.ys-dashboard-profile__cover-actions {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.ys-dashboard-profile__cover-actions .ys-dashboard-date-chip {
    border-color: rgba(255, 255, 255, 0.32) !important;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.14) !important;
}

.ys-dashboard-profile__cover-actions .ys-dashboard-date-chip .mud-icon-root {
    color: #FFD867 !important;
}

.ys-dashboard-profile__cover .mud-typography {
    position: relative;
    z-index: 1;
    color: #fff !important;
}

.ys-dashboard-profile__eyebrow {
    margin-bottom: 5px !important;
    font-size: 0.7rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.13em !important;
    text-transform: uppercase;
}

.ys-dashboard-profile__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 320px;
}

.ys-dashboard-profile__body {
    position: relative;
    padding: 0 24px 24px;
}

.ys-dashboard-profile--top .ys-dashboard-profile__body {
    display: block;
}

.ys-dashboard-profile--top .ys-dashboard-profile__identity {
    margin-top: 13px;
}

.ys-dashboard-profile--top .ys-dashboard-profile__details {
    margin-top: 20px;
}

.ys-dashboard-profile__permissions,
.ys-dashboard-profile--top .ys-dashboard-profile__status {
    grid-column: 1 / -1;
}

.ys-dashboard-profile__permissions {
    min-width: 0;
    margin-top: 14px;
}

.ys-dashboard-profile__avatar {
    width: 82px !important;
    height: 82px !important;
    margin-top: -42px;
    border: 6px solid var(--ys-surface);
    color: #fff !important;
    background: linear-gradient(145deg, #7357F6, #9179FF) !important;
    box-shadow: 0 9px 22px rgba(49, 35, 116, 0.24);
    font-size: 1.35rem !important;
    font-weight: 850 !important;
}

.ys-dashboard-profile__identity {
    margin-top: 13px;
}

.ys-dashboard-profile__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px;
}

.ys-dashboard-profile__details > div {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--ys-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--ys-primary) 3%, var(--ys-surface));
}

.ys-dashboard-profile__details > div > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 11px;
    color: var(--ys-primary);
    background: var(--ys-primary-soft);
}

.ys-dashboard-profile__details > div > div {
    overflow: hidden;
    min-width: 0;
}

.ys-dashboard-profile__details .mud-typography {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ys-dashboard-profile__status {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    padding: 11px 13px;
    border: 1px solid color-mix(in srgb, var(--ys-success) 22%, var(--ys-border));
    border-radius: 13px;
    background: var(--ys-success-soft);
}

.ys-dashboard-profile__status .mud-typography {
    color: var(--ys-text) !important;
    font-size: 0.72rem !important;
}

.ys-dashboard-panel__header {
    justify-content: space-between;
    gap: 18px;
    min-height: 92px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--ys-border);
    background: color-mix(in srgb, var(--ys-primary) 4%, var(--ys-surface));
}

.ys-dashboard-panel__heading {
    gap: 13px;
    min-width: 0;
}

.ys-dashboard-panel__body {
    padding: 20px 22px 22px;
}

.ys-dashboard-inline-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 190px;
}

.ys-dashboard-manager-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.ys-dashboard-manager {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--ys-border);
    border-radius: 15px;
    background: color-mix(in srgb, var(--ys-primary) 2%, var(--ys-surface));
    transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.ys-dashboard-manager:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--ys-primary) 28%, var(--ys-border));
    box-shadow: var(--ys-shadow-sm);
}

.ys-dashboard-manager__copy {
    overflow: hidden;
    min-width: 0;
    flex: 1;
}

.ys-dashboard-manager__copy .ys-email-link {
    margin-top: 3px;
    font-size: 0.71rem;
}

.ys-dashboard-empty {
    gap: 14px;
    min-height: 190px;
    justify-content: center;
    padding: 24px;
    border: 1px dashed var(--ys-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--ys-primary) 2%, var(--ys-surface));
}

.ys-dashboard-empty > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border-radius: 16px;
    color: var(--ys-primary);
    background: var(--ys-primary-soft);
}

.ys-dashboard-access-summary {
    display: grid;
    grid-template-columns: 140px 140px minmax(0, 1fr);
    gap: 12px;
}

.ys-dashboard-access-summary > div:not(.ys-dashboard-access-summary__roles) {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px;
    border: 1px solid var(--ys-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--ys-primary) 3%, var(--ys-surface));
}

.ys-dashboard-access-summary > div > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    color: var(--ys-primary);
    background: var(--ys-primary-soft);
}

.ys-dashboard-access-summary__roles {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.ys-dashboard-permissions__expansion {
    margin-top: 16px;
    border: 1px solid var(--ys-border);
    border-radius: 15px;
    background: var(--ys-surface);
    box-shadow: none;
}

.ys-dashboard-permissions__expansion .mud-expand-panel {
    border-radius: inherit !important;
    background: var(--ys-surface) !important;
}

.ys-dashboard-permissions__expansion .mud-expand-panel-header {
    min-height: 54px;
    font-weight: 750;
}

.ys-dashboard-permissions__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 2px 0 10px;
}

.ys-dashboard-permissions__chips .mud-chip {
    border-radius: 9px;
    font-size: 0.68rem;
}

.ys-dashboard-permissions--compact {
    border-radius: 15px !important;
    box-shadow: none !important;
}

.ys-dashboard-permissions--compact .ys-dashboard-panel__header {
    min-height: 64px;
    padding: 11px 14px;
}

.ys-dashboard-permissions--compact .ys-dashboard-panel__heading {
    gap: 10px;
}

.ys-dashboard-permissions--compact .ys-icon-tile {
    width: 38px;
    height: 38px;
    border-radius: 12px;
}

.ys-dashboard-permissions--compact .ys-dashboard-panel__body {
    padding: 12px 14px 14px;
}

.ys-dashboard-permissions--compact .ys-dashboard-inline-loading {
    min-height: 86px;
}

.ys-dashboard-permissions--compact .ys-dashboard-access-summary {
    grid-template-columns: 108px 108px minmax(0, 1fr);
    gap: 8px;
}

.ys-dashboard-permissions--compact .ys-dashboard-access-summary > div:not(.ys-dashboard-access-summary__roles) {
    padding: 9px 10px;
}

.ys-dashboard-permissions--compact .ys-dashboard-access-summary > div > span {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border-radius: 10px;
}

.ys-dashboard-permissions--compact .ys-dashboard-permissions__expansion {
    margin-top: 10px;
}

.ys-dashboard-permissions--compact .ys-dashboard-permissions__expansion .mud-expand-panel-header {
    min-height: 46px;
}

.ys-dashboard-permissions--gold {
    color: var(--ys-gold-text);
    border-color: var(--ys-gold-border) !important;
    background: var(--ys-gold-gradient) !important;
    box-shadow: var(--ys-gold-shadow) !important;
}

.ys-dashboard-permissions--gold .ys-dashboard-panel__header {
    border-color: var(--ys-gold-border);
    background: var(--ys-gold-panel);
}

.ys-dashboard-permissions--gold .ys-dashboard-panel__body {
    background: transparent;
}

.ys-dashboard-permissions--gold .ys-icon-tile,
.ys-dashboard-permissions--gold .ys-dashboard-access-summary > div > span {
    color: var(--ys-gold-accent);
    background: var(--ys-gold-panel-strong);
}

.ys-dashboard-permissions--gold .ys-detail-title,
.ys-dashboard-permissions--gold .mud-typography {
    color: var(--ys-gold-text) !important;
}

.ys-dashboard-permissions--gold .ys-section-caption {
    color: var(--ys-gold-text-muted) !important;
}

.ys-dashboard-permissions--gold .ys-row-action {
    border-color: var(--ys-gold-border) !important;
    color: var(--ys-gold-accent) !important;
    background: var(--ys-gold-panel-strong) !important;
}

.ys-dashboard-permissions--gold .ys-dashboard-access-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ys-dashboard-permissions--gold .ys-dashboard-access-summary > div:not(.ys-dashboard-access-summary__roles) {
    border-color: var(--ys-gold-border);
    background: var(--ys-gold-panel-strong);
}

.ys-dashboard-permissions--gold .ys-dashboard-access-summary__roles {
    grid-column: 1 / -1;
    justify-content: flex-start;
}

.ys-dashboard-permissions--gold .mud-chip {
    border-color: var(--ys-gold-border) !important;
    color: var(--ys-gold-accent) !important;
    background: var(--ys-gold-panel) !important;
}

.ys-dashboard-permissions--gold .mud-chip .mud-icon-root {
    color: var(--ys-gold-accent) !important;
}

.ys-dashboard-permissions--gold .ys-dashboard-permissions__expansion {
    border-color: var(--ys-gold-border);
    background: var(--ys-gold-panel);
}

.ys-dashboard-permissions--gold .ys-dashboard-permissions__expansion .mud-expand-panel {
    background: transparent !important;
}

@media (max-width: 1200px) {
    .ys-dashboard-manager-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .ys-dashboard-profile--top .ys-dashboard-profile__body {
        display: block;
    }

    .ys-dashboard-access-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ys-dashboard-access-summary__roles {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .ys-dashboard-section__heading,
    .ys-dashboard-panel__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .ys-dashboard-metric {
        min-height: 232px;
    }

    .ys-dashboard-profile__details,
    .ys-dashboard-access-summary {
        grid-template-columns: 1fr;
    }

    .ys-dashboard-access-summary__roles {
        grid-column: auto;
    }

    .ys-dashboard-profile__cover,
    .ys-dashboard-profile__body,
    .ys-dashboard-panel__header,
    .ys-dashboard-panel__body {
        padding-right: 18px;
        padding-left: 18px;
    }

    .ys-dashboard-empty {
        align-items: flex-start;
        flex-direction: column;
    }

    .ys-dashboard-profile__cover-actions {
        align-items: flex-end;
        flex-direction: column-reverse;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ys-dashboard-metric,
    .ys-dashboard-manager {
        transition: none;
    }
}

/* Study groups module */
.ys-study-group-overview {
    display: grid;
    grid-template-columns: minmax(280px, 1.15fr) minmax(440px, 1.85fr);
    gap: 20px;
    margin-bottom: 24px;
    padding: 20px;
    border: 1px solid var(--ys-border);
    border-radius: var(--ys-radius-md) !important;
    background: var(--ys-surface) !important;
    box-shadow: var(--ys-shadow-sm) !important;
}

.ys-study-group-overview__intro,
.ys-study-group-section-heading,
.ys-study-group-section-heading__copy,
.ys-study-group-summary__identity {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.ys-study-group-overview__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.ys-study-group-overview__facts > div {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 11px;
    border: 1px solid var(--ys-border);
    border-radius: 13px;
    color: var(--ys-primary);
    background: var(--ys-primary-soft);
}

.ys-study-group-overview__facts span {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.ys-study-group-overview__facts b {
    color: var(--ys-text);
    font-size: 0.8rem;
}

.ys-study-group-overview__facts small {
    overflow: hidden;
    color: var(--ys-text-muted);
    font-size: 0.64rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ys-study-group-toolbar .ys-list-toolbar__tools {
    justify-content: flex-start;
    min-width: min(100%, 660px);
    flex: 1;
}

.ys-study-group-toolbar .ys-search-field {
    width: min(100%, 390px);
}

.ys-study-group-filter {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--ys-border);
    border-radius: 13px;
    background: color-mix(in srgb, var(--ys-primary) 3%, var(--ys-surface));
}

.ys-study-group-filter .mud-switch-label {
    color: var(--ys-text-muted);
    font-size: 0.75rem;
    font-weight: 650;
}

.ys-study-group-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 14px;
}

.ys-study-group-avatar--orange { color: #8c4b08; background: var(--ys-warning-soft); }
.ys-study-group-avatar--violet { color: var(--ys-primary); background: var(--ys-primary-soft); }
.ys-study-group-avatar--blue { color: var(--ys-info); background: var(--ys-info-soft); }
.ys-study-group-avatar--green { color: var(--ys-success); background: var(--ys-success-soft); }

.ys-study-groups-table .ys-table-actions {
    width: 82px;
    padding-right: 28px !important;
}

.ys-study-group-form .mud-input-outlined-border,
.ys-study-group-dialog .mud-input-outlined-border,
.ys-session-editor .mud-input-outlined-border {
    border-radius: 13px !important;
}

.ys-study-group-form .mud-input-label,
.ys-study-group-dialog .mud-input-label,
.ys-session-editor .mud-input-label {
    font-weight: 650;
}

.ys-study-group-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 18px 20px;
    border: 1px solid var(--ys-border);
    border-radius: var(--ys-radius-md) !important;
    background: linear-gradient(128deg, color-mix(in srgb, var(--ys-primary) 7%, var(--ys-surface)), var(--ys-surface) 70%) !important;
    box-shadow: var(--ys-shadow-sm) !important;
}

.ys-study-group-summary__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 17px;
    color: #fff;
    background: linear-gradient(145deg, #7357F6, #9179FF);
    box-shadow: 0 10px 20px rgba(82, 58, 181, 0.2);
}

.ys-loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 220px;
    padding: 30px;
}

.ys-study-group-workspace {
    overflow: visible;
}

.ys-study-group-tabs .mud-tabs-tabbar {
    padding: 0 14px;
}

.ys-study-group-tabs .mud-tab {
    min-width: 126px;
}

.ys-study-group-tabs .mud-tabs-panels {
    padding: 24px !important;
}

.ys-study-group-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.ys-study-group-feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-height: 118px;
    padding: 18px;
    border: 1px solid var(--ys-border);
    border-radius: 17px;
    background: color-mix(in srgb, var(--ys-primary) 3%, var(--ys-surface));
}

.ys-study-group-feature > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 14px;
    color: var(--ys-primary);
    background: var(--ys-primary-soft);
}

.ys-study-group-section {
    width: 100%;
}

.ys-study-group-section-heading {
    margin-bottom: 20px;
}

.ys-study-group-section-heading--actions {
    justify-content: space-between;
    gap: 18px;
}

.ys-study-group-section-heading--actions > .mud-button-root,
.ys-study-group-section-heading--actions > * > .mud-button-root {
    min-height: 42px;
    border-radius: 13px;
    font-weight: 750;
    letter-spacing: 0;
    text-transform: none;
}

.ys-study-group-subsection {
    overflow: hidden;
    padding: 20px;
    border: 1px solid var(--ys-border);
    border-radius: var(--ys-radius-md) !important;
    background: var(--ys-surface) !important;
    box-shadow: var(--ys-shadow-sm) !important;
}

.ys-study-group-section .mud-expand-panels,
.ys-session-editor .mud-expand-panels {
    border: 1px solid var(--ys-border);
    border-radius: 16px;
    background: var(--ys-surface);
    box-shadow: none;
}

.ys-study-group-section .mud-expand-panel,
.ys-session-editor .mud-expand-panel {
    border-bottom: 1px solid var(--ys-border);
    background: var(--ys-surface) !important;
}

.ys-study-group-section .mud-expand-panel:last-child,
.ys-session-editor .mud-expand-panel:last-child {
    border-bottom: 0;
}

.ys-study-group-section .mud-expand-panel-header,
.ys-session-editor .mud-expand-panel-header {
    min-height: 58px;
    font-weight: 750;
}

.ys-study-group-students > .mud-table-root,
.ys-study-group-students > .mud-paper-root > .mud-table-root {
    box-shadow: none !important;
}

.ys-study-group-students-table {
    border-radius: 16px !important;
    box-shadow: none !important;
}

.ys-study-group-students-table .mud-toolbar {
    min-height: 72px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ys-border);
}

.ys-study-group-students-table .ys-search-field {
    width: min(100%, 380px);
}

.ys-add-student-panel {
    border-style: dashed;
    background: color-mix(in srgb, var(--ys-primary) 3%, var(--ys-surface)) !important;
}

.ys-add-student-panel .mud-button-root,
.ys-study-group-invite .mud-button-root,
.ys-study-group-curricula .mud-button-root,
.ys-study-group-assessment .mud-button-root {
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.ys-study-group-invite {
    background:
        radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--ys-warning) 18%, transparent), transparent 25%),
        var(--ys-surface) !important;
}

.ys-study-group-invite .mud-image {
    border-radius: 12px;
}

.ys-study-group-curricula .mud-card,
.ys-study-group-curricula .mud-paper:not(.ys-study-group-subsection),
.ys-study-group-assessment .mud-card {
    border: 1px solid var(--ys-border);
    border-radius: 15px !important;
    background: color-mix(in srgb, var(--ys-primary) 2%, var(--ys-surface)) !important;
    box-shadow: none !important;
}

.ys-study-group-assessment .subject-card,
.ys-study-group-assessment .subject-card-readonly {
    border-color: var(--ys-border);
    border-radius: 15px !important;
    background: color-mix(in srgb, var(--ys-primary) 2%, var(--ys-surface)) !important;
}

.ys-study-group-assessment .subject-card:hover,
.ys-study-group-assessment .subject-card-readonly:hover {
    border-color: var(--ys-primary);
    box-shadow: var(--ys-shadow-sm) !important;
}

.ys-study-group-week-nav {
    margin-bottom: 18px;
    padding: 10px 12px;
    border: 1px solid var(--ys-border);
    border-radius: 15px;
    background: color-mix(in srgb, var(--ys-primary) 4%, var(--ys-surface));
}

.ys-study-group-week-nav .mud-icon-button {
    border: 1px solid var(--ys-border);
    border-radius: 11px;
    background: var(--ys-surface);
}

.ys-study-group-week-nav .mud-typography {
    color: var(--ys-text);
    font-weight: 750;
}

.ys-study-group-schedule .schedule-day-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.ys-study-group-schedule .schedule-day-card {
    min-height: 285px;
    padding: 14px;
    border-color: var(--ys-border) !important;
    border-radius: 17px !important;
    background: var(--ys-surface) !important;
    box-shadow: var(--ys-shadow-sm);
}

.ys-study-group-schedule .schedule-day-card.is-today {
    border-color: var(--ys-primary) !important;
    background: linear-gradient(180deg, var(--ys-primary-soft), var(--ys-surface) 34%) !important;
    box-shadow: inset 0 0 0 1px var(--ys-primary), var(--ys-shadow-sm);
}

.ys-study-group-schedule .schedule-empty-day {
    border-color: var(--ys-border);
    border-radius: 13px;
    background: color-mix(in srgb, var(--ys-primary) 3%, var(--ys-surface));
}

.ys-study-group-schedule .schedule-event-card {
    border-color: var(--ys-border);
    border-radius: 13px;
    background: var(--ys-surface);
}

.ys-study-group-schedule .schedule-add-button {
    min-height: 38px;
    border-radius: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.ys-session-editor {
    max-width: 1180px !important;
    padding-top: 0 !important;
}

.ys-session-editor__header {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 118px;
    margin-bottom: 22px !important;
    padding: 22px 26px;
    border: 1px solid color-mix(in srgb, var(--ys-primary) 17%, var(--ys-border));
    border-radius: var(--ys-radius-lg);
    background:
        radial-gradient(circle at 90% 10%, rgba(255, 201, 74, 0.4), transparent 23%),
        linear-gradient(128deg, color-mix(in srgb, var(--ys-primary) 15%, var(--ys-surface)), var(--ys-surface) 64%);
    box-shadow: var(--ys-shadow-sm);
}

.ys-session-editor__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(145deg, #7357F6, #9179FF);
    box-shadow: 0 11px 22px rgba(82, 58, 181, 0.22);
}

.ys-session-editor__surface {
    padding: 18px;
    border: 1px solid var(--ys-border);
    border-radius: var(--ys-radius-lg) !important;
    background: var(--ys-surface) !important;
    box-shadow: var(--ys-shadow-sm) !important;
}

.ys-session-editor__surface .mud-paper:not(.mud-picker):not(.mud-popover) {
    border-color: var(--ys-border) !important;
    border-radius: 14px !important;
}

.ys-session-editor__surface .mud-table-root {
    overflow: hidden;
    border: 1px solid var(--ys-border);
    border-radius: 14px !important;
    box-shadow: none !important;
}

.ys-session-editor__surface .mud-table-head {
    background: color-mix(in srgb, var(--ys-primary) 6%, var(--ys-surface));
}

.ys-session-editor__actions {
    margin-top: 20px !important;
    padding: 16px;
    border: 1px solid var(--ys-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--ys-surface) 94%, transparent);
    box-shadow: var(--ys-shadow-sm);
}

.ys-session-editor__actions .mud-button-root {
    min-height: 42px;
    border-radius: 12px;
    font-weight: 750;
    letter-spacing: 0;
    text-transform: none;
}

.ys-study-group-dialog .mud-dialog-title {
    padding: 22px 24px 12px;
}

.ys-study-group-dialog .mud-dialog-content {
    padding: 12px 24px 22px;
}

.ys-study-group-dialog .mud-dialog-actions {
    gap: 9px;
    padding: 14px 24px 20px;
    border-top: 1px solid var(--ys-border);
    background: color-mix(in srgb, var(--ys-primary) 3%, var(--ys-surface));
}

.ys-study-group-dialog .mud-dialog-actions .mud-button-root {
    min-height: 40px;
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.ys-study-group-dialog .mud-list {
    overflow: auto;
    border: 1px solid var(--ys-border);
    border-radius: 14px;
    background: var(--ys-surface);
}

.ys-study-group-dialog .mud-list-item {
    border-bottom: 1px solid var(--ys-border);
}

.ys-study-group-dialog .mud-list-item:last-child {
    border-bottom: 0;
}

.ys-study-group-dialog .mud-timeline-item-content {
    border: 1px solid var(--ys-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--ys-primary) 3%, var(--ys-surface));
}

@media (max-width: 960px) {
    .ys-study-group-overview {
        grid-template-columns: 1fr;
    }

    .ys-study-group-overview-grid {
        grid-template-columns: 1fr;
    }

    .ys-study-group-toolbar .ys-list-toolbar__tools {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .ys-study-group-overview {
        padding: 16px;
    }

    .ys-study-group-overview__facts {
        grid-template-columns: 1fr;
    }

    .ys-study-group-toolbar .ys-list-toolbar__tools,
    .ys-study-group-summary,
    .ys-study-group-section-heading--actions,
    .ys-session-editor__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .ys-study-group-toolbar .ys-search-field,
    .ys-study-group-section-heading--actions .mud-button-root,
    .ys-session-editor__actions .mud-button-root {
        width: 100%;
    }

    .ys-study-group-filter {
        width: 100%;
    }

    .ys-study-groups-table .ys-table-actions {
        width: auto;
        padding-right: 16px !important;
    }

    .ys-study-group-tabs .mud-tabs-panels {
        padding: 18px !important;
    }

    .ys-study-group-tabs .mud-tabs-tabbar {
        padding: 0 8px;
    }

    .ys-study-group-tabs .mud-tab {
        min-width: 108px;
    }

    .ys-study-group-week-nav {
        gap: 5px;
    }

    .ys-study-group-week-nav .mud-typography {
        font-size: 0.75rem;
    }

    .ys-session-editor__header {
        align-items: flex-start;
        min-height: auto;
        padding: 20px;
    }

    .ys-session-editor__header .mud-icon-button:first-child {
        align-self: center;
    }

    .ys-session-editor__surface {
        padding: 12px;
    }

    .ys-study-group-dialog .mud-dialog-title,
    .ys-study-group-dialog .mud-dialog-content,
    .ys-study-group-dialog .mud-dialog-actions {
        padding-right: 18px;
        padding-left: 18px;
    }

    .ys-study-group-dialog [style*="min-width: 500px"] {
        min-width: 0 !important;
        width: 100%;
    }
}

/* Curricula module */
.ys-curriculum-overview {
    display: grid;
    grid-template-columns: minmax(260px, 1.1fr) minmax(420px, 1.9fr);
    gap: 20px;
    margin-bottom: 24px;
    padding: 20px;
    border: 1px solid var(--ys-border);
    border-radius: var(--ys-radius-md) !important;
    background: var(--ys-surface) !important;
    box-shadow: var(--ys-shadow-sm) !important;
}

.ys-curriculum-overview__intro,
.ys-detail-section-heading,
.ys-dialog-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.ys-curriculum-overview__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.ys-curriculum-overview__facts > div {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 11px;
    border: 1px solid var(--ys-border);
    border-radius: 13px;
    color: var(--ys-primary);
    background: var(--ys-primary-soft);
}

.ys-curriculum-overview__facts span {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.ys-curriculum-overview__facts b {
    color: var(--ys-text);
    font-size: 0.8rem;
}

.ys-curriculum-overview__facts small {
    overflow: hidden;
    color: var(--ys-text-muted);
    font-size: 0.64rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ys-curriculum-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 14px;
}

.ys-curriculum-avatar--orange { color: #8c4b08; background: var(--ys-warning-soft); }
.ys-curriculum-avatar--violet { color: var(--ys-primary); background: var(--ys-primary-soft); }
.ys-curriculum-avatar--blue { color: var(--ys-info); background: var(--ys-info-soft); }
.ys-curriculum-avatar--green { color: var(--ys-success); background: var(--ys-success-soft); }

.ys-curricula-table .ys-table-actions,
.ys-curriculum-groups-table .ys-table-actions {
    width: 104px;
    padding-right: 28px !important;
}

.ys-curriculum-form .mud-input-outlined-border,
.ys-curriculum-dialog .mud-input-outlined-border {
    border-radius: 13px !important;
}

.ys-curriculum-form .mud-input-label,
.ys-curriculum-dialog .mud-input-label {
    font-weight: 650;
}

.ys-curriculum-identity {
    display: flex;
    min-height: 218px;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
}

.ys-chip-on-color {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.17) !important;
}

.ys-curriculum-hours-card {
    border-color: color-mix(in srgb, var(--ys-success) 22%, var(--ys-border)) !important;
    background: linear-gradient(145deg, color-mix(in srgb, var(--ys-success) 9%, var(--ys-surface)), var(--ys-surface)) !important;
}

.ys-curriculum-chart-card,
.ys-curriculum-segment-summary {
    height: 100%;
}

.ys-curriculum-chart {
    overflow: hidden;
    width: 100%;
    margin-top: 10px;
}

.ys-curriculum-chart .mud-chart {
    max-width: 100%;
}

.ys-donut-total,
.ys-donut-caption {
    pointer-events: none;
}

.ys-donut-total {
    font-size: 2.25rem;
    font-weight: 850;
}

.ys-donut-caption {
    font-size: 0.78rem;
    fill: var(--ys-text-muted);
}

.ys-curriculum-segment-summary {
    padding: 22px !important;
}

.ys-curriculum-summary-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.ys-curriculum-summary-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px;
    border: 1px solid var(--ys-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--ys-primary) 3%, var(--ys-surface));
}

.ys-curriculum-summary-item > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    color: var(--ys-primary);
    background: var(--ys-primary-soft);
}

.ys-curriculum-summary-item strong {
    color: var(--ys-primary);
    font-size: 0.76rem;
    white-space: nowrap;
}

.ys-curriculum-empty {
    display: flex;
    min-height: 290px;
    padding: 34px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--ys-border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--ys-primary) 3%, var(--ys-surface));
    text-align: center;
}

.ys-curriculum-empty > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 14px;
    border-radius: 20px;
    color: var(--ys-primary);
    background: var(--ys-primary-soft);
}

.ys-curriculum-segments {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ys-curriculum-segment-card {
    overflow: hidden;
    border: 1px solid var(--ys-border);
    border-radius: var(--ys-radius-md);
    background: var(--ys-surface);
    box-shadow: var(--ys-shadow-sm);
}

.ys-curriculum-segment-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--ys-border);
    background: color-mix(in srgb, var(--ys-primary) 4%, var(--ys-surface));
}

.ys-curriculum-segment-card__title,
.ys-curriculum-subject-card__header,
.ys-curriculum-dialog__selected-subject {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ys-curriculum-subject-grid {
    padding: 16px;
}

.ys-curriculum-subject-card {
    height: 100%;
    padding: 16px;
    border: 1px solid var(--ys-border);
    border-radius: 15px;
    background: color-mix(in srgb, var(--ys-primary) 2%, var(--ys-surface));
}

.ys-curriculum-hours-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--ys-border);
}

.ys-curriculum-hours-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--ys-text-muted);
    font-size: 0.75rem;
}

.ys-curriculum-hours-list strong {
    color: var(--ys-text);
}

.ys-curriculum-form-header,
.ys-curriculum-editor-section__heading,
.ys-curriculum-subjects-heading,
.ys-danger-zone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ys-curriculum-editor-section {
    margin-top: 28px;
}

.ys-curriculum-editor-section__heading {
    margin-bottom: 18px;
}

.ys-curriculum-editor-section__heading .mud-button-root,
.ys-curriculum-save-bar .mud-button-root,
.ys-danger-zone .mud-button-root {
    min-height: 42px;
    border-radius: 13px;
    font-weight: 750;
    letter-spacing: 0;
    text-transform: none;
}

.ys-curriculum-segment-editor-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ys-curriculum-expansion,
.ys-curriculum-subject-panels {
    border: 1px solid var(--ys-border);
    border-radius: var(--ys-radius-md);
    background: var(--ys-surface);
    box-shadow: var(--ys-shadow-sm);
}

.ys-curriculum-expansion .mud-expand-panel,
.ys-curriculum-subject-panels .mud-expand-panel {
    border-radius: inherit !important;
    background: var(--ys-surface) !important;
}

.ys-curriculum-expansion-title,
.ys-curriculum-subject-title {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.ys-curriculum-expansion-title__copy,
.ys-curriculum-subject-title > div {
    min-width: 0;
    flex: 1;
}

.ys-segment-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 12px;
    color: #362306;
    background: linear-gradient(135deg, #FFD867, #FFAD45);
    font-size: 0.78rem;
    font-weight: 850;
}

.ys-curriculum-segment-editor {
    padding: 20px;
    border-top: 1px solid var(--ys-border);
}

.ys-curriculum-date-range > label {
    display: block;
    margin-bottom: 5px;
    color: var(--ys-text-muted);
    font-size: 0.68rem;
    font-weight: 650;
}

.ys-curriculum-date-range > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ys-date-input {
    min-width: 0;
    width: 100%;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid var(--ys-border);
    border-radius: 13px;
    color: var(--ys-text);
    background: var(--ys-surface);
    font: inherit;
}

.ys-date-input:focus {
    border-color: var(--ys-primary);
    outline: 2px solid color-mix(in srgb, var(--ys-primary) 14%, transparent);
}

.ys-curriculum-subject-search,
.ys-curriculum-subjects-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
}

.ys-curriculum-subject-search .ys-search-field {
    width: min(100%, 430px);
}

.ys-curriculum-search-results {
    overflow: hidden;
    margin-top: 8px;
    border: 1px solid var(--ys-border);
    border-radius: 14px;
    background: var(--ys-surface);
}

.ys-curriculum-search-result {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.ys-curriculum-search-result .ys-cell-title {
    min-width: 0;
    flex: 1;
}

.ys-curriculum-subject-panels {
    margin-top: 12px;
    box-shadow: none;
}

.ys-curriculum-subject-panels .mud-expand-panel {
    isolation: isolate;
    overflow: hidden;
}

.ys-curriculum-subject-panels .mud-expand-panel::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    content: "";
    pointer-events: none;
    background: var(--ys-gold-gradient);
    opacity: 0;
    transition: opacity 3.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.ys-curriculum-subject-panels .mud-expand-panel > * {
    position: relative;
    z-index: 1;
}

.ys-curriculum-subject-panels .mud-expand-panel.mud-panel-expanded::before {
    opacity: 1;
}

.ys-curriculum-subject-settings {
    padding: 16px 18px 20px;
    border-top: 1px solid var(--ys-border);
}

.ys-curriculum-hours-editor {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.ys-hours-input {
    min-width: 0;
}

.ys-curriculum-save-bar {
    position: sticky;
    bottom: 14px;
    z-index: 5;
    margin-top: 20px;
    padding: 14px;
    border: 1px solid var(--ys-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--ys-surface) 94%, transparent);
    box-shadow: var(--ys-shadow-md);
    backdrop-filter: blur(14px);
}

.ys-danger-zone {
    margin-top: 28px;
    padding: 18px 20px;
    border: 1px solid color-mix(in srgb, var(--ys-error) 28%, var(--ys-border));
    border-radius: var(--ys-radius-md) !important;
    background: color-mix(in srgb, var(--ys-error) 4%, var(--ys-surface)) !important;
}

.ys-dialog-heading {
    margin-bottom: 20px;
}

.ys-curriculum-dialog__search {
    width: 100%;
}

.ys-curriculum-dialog__results {
    overflow: hidden;
    max-height: 280px;
    margin-top: 10px;
    border: 1px solid var(--ys-border);
    border-radius: 14px;
}

.ys-curriculum-dialog__empty {
    margin-top: 12px;
}

.ys-curriculum-dialog__selection {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--ys-border);
    border-radius: 16px !important;
    background: color-mix(in srgb, var(--ys-primary) 3%, var(--ys-surface)) !important;
}

.ys-curriculum-dialog__selected-subject > div {
    min-width: 0;
    flex: 1;
}

.ys-curriculum-dialog__types {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.ys-form-grid .mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    font-weight: 600;
}

.ys-form-grid .mud-input-outlined-border {
    border-radius: 13px !important;
}

.ys-progress-card {
    padding: 18px;
    border: 1px solid var(--ys-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--ys-primary) 4%, var(--ys-surface));
}

.ys-calendar-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    min-height: 62px;
    border: 1px solid var(--ys-border);
    border-radius: 15px;
    background: var(--ys-surface);
}

.ys-calendar-day--active {
    border-color: var(--ys-primary);
    color: #fff;
    background: var(--ys-primary);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--ys-primary) 25%, transparent);
}

.ys-calendar-day--accent {
    border-color: color-mix(in srgb, var(--ys-warning) 40%, var(--ys-border));
    background: var(--ys-warning-soft);
}

/* Tab variants */
.ys-tab-demo {
    height: 100%;
    padding: 18px;
    border: 1px solid var(--ys-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--ys-primary) 2.5%, var(--ys-surface));
}

.ys-tabs .mud-tabs-tabbar {
    background: transparent;
}

.ys-tabs .mud-tab {
    width: auto;
    min-width: 116px;
    color: var(--ys-text-muted);
    font-weight: 750;
    letter-spacing: 0;
    text-transform: none;
}

.ys-tabs .mud-tabs-panels {
    padding: 16px 4px 2px;
}

.ys-tabs--sunline .mud-tabs-tabbar {
    border-bottom: 1px solid var(--ys-border);
}

.ys-tabs--sunline .mud-tab:hover {
    background: var(--ys-warning-soft);
}

.ys-tabs--sunline .mud-tab.mud-tab-active {
    color: var(--ys-text) !important;
}

.ys-tabs--sunline .mud-tab.mud-tab-active .mud-icon-root {
    color: var(--ys-orange) !important;
}

.ys-tabs--sunline .mud-tab-slider {
    height: 4px !important;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(90deg, var(--ys-yellow), var(--ys-orange)) !important;
    box-shadow: 0 -2px 10px color-mix(in srgb, var(--ys-orange) 28%, transparent);
}

.ys-tabs--pills .mud-tabs-tabbar {
    padding: 6px;
    border: 1px solid color-mix(in srgb, var(--ys-primary) 12%, var(--ys-border));
    border-radius: 16px !important;
    background: var(--ys-primary-soft);
}

.ys-tabs--pills .mud-tab {
    min-height: 42px;
    border-radius: 11px;
}

.ys-tabs--pills .mud-tab:hover {
    background: color-mix(in srgb, var(--ys-surface) 60%, transparent);
}

.ys-tabs--pills .mud-tab.mud-tab-active {
    color: #362306 !important;
    background: linear-gradient(135deg, #FFD867, #FFAD45) !important;
    box-shadow: 0 6px 14px rgba(177, 104, 14, 0.17);
}

.ys-tabs--pills .mud-tab-slider {
    display: none;
}

.ys-tabs--contrast .mud-tabs-tabbar {
    padding: 6px;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #674BDD, #8166F4);
    box-shadow: 0 10px 22px rgba(82, 58, 181, 0.18);
}

.ys-tabs--contrast .mud-tab {
    min-height: 42px;
    border-radius: 11px;
    color: rgba(255, 255, 255, 0.76);
}

.ys-tabs--contrast .mud-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.ys-tabs--contrast .mud-tab.mud-tab-active {
    color: #362306 !important;
    background: #FFC94A !important;
    box-shadow: 0 6px 14px rgba(55, 31, 4, 0.2);
}

.ys-tabs--contrast .mud-tab.mud-tab-active .mud-icon-root {
    color: #362306 !important;
}

.ys-tabs--contrast .mud-tab-slider {
    display: none;
}

.ys-component-index {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ys-component-index .mud-chip {
    border-radius: 10px;
}

@media (max-width: 600px) {
    .company-header {
        max-width: 42vw;
    }

    .ys-user-trigger {
        gap: 0;
        padding: 5px;
        border-radius: 50%;
    }

    .ys-user-trigger__copy,
    .ys-user-trigger__chevron {
        display: none !important;
    }

    .ys-user-panel__hero {
        padding: 24px 20px 20px;
    }

    .ys-user-panel__body {
        padding: 20px 16px;
    }

    .ys-user-panel__footer {
        padding: 14px 16px 18px;
    }

    .ys-hero {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .ys-surface {
        padding: 18px;
    }

    .ys-list-hero,
    .ys-list-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .ys-list-hero__button,
    .ys-search-field {
        width: 100%;
    }

    .ys-list-toolbar__result {
        align-self: flex-start;
    }

    .ys-module-page {
        padding-bottom: 20px;
    }

    .ys-module-hero {
        align-items: stretch;
        flex-direction: column;
        min-height: auto;
        padding: 20px;
        border-radius: 20px;
    }

    .ys-module-hero__icon {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
        border-radius: 16px;
    }

    .ys-module-hero__actions {
        justify-content: stretch;
    }

    .ys-module-hero__actions .mud-button-root {
        flex: 1 1 150px;
    }

    .ys-form-card__header,
    .ys-form-card__body,
    .ys-form-guide,
    .ys-tab-content {
        padding: 18px;
    }

    .ys-form-guide {
        position: static;
    }

    .ys-form-actions,
    .ys-form-actions__primary,
    .ys-form-actions__secondary {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .ys-form-actions .mud-button-root {
        width: 100%;
    }

    .ys-department-tabs .mud-tabs-tabbar {
        padding: 0 8px;
    }

    .ys-department-tabs .mud-tab {
        min-width: 104px;
    }

    .ys-list-toolbar__tools {
        align-items: stretch;
        flex-direction: column;
        min-width: 100%;
        width: 100%;
    }

    .ys-staff-toolbar .ys-search-field {
        width: 100%;
    }

    .ys-staff-tabs .mud-tabs-tabbar {
        padding: 0 8px;
    }

    .ys-staff-tabs .mud-tab {
        min-width: 104px;
    }

    .ys-student-tabs .mud-tabs-tabbar {
        padding: 0 8px;
    }

    .ys-student-tabs .mud-tab {
        min-width: 104px;
    }

    .ys-assessment-browser__heading {
        align-items: flex-start;
    }

    .ys-assessment-item-card {
        padding: 15px;
    }

    .ys-assessment-plan-card {
        flex-wrap: wrap;
    }

    .ys-assessment-plan-card > .ys-row-action {
        margin-left: auto;
    }

    .ys-staff-tab__heading,
    .ys-staff-subsection-heading,
    .ys-work-schedule-card__heading {
        align-items: stretch;
        flex-direction: column;
    }

    .ys-staff-assignment {
        grid-template-columns: 1fr;
    }

    .ys-staff-assignment__controls,
    .ys-schedule-filters,
    .ys-staff-sticky-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .ys-staff-assignment__controls .mud-button-root,
    .ys-schedule-filters .mud-button-root,
    .ys-staff-sticky-actions .mud-button-root {
        width: 100%;
    }

    .ys-staff-sticky-actions {
        position: static;
    }

    .ys-period-navigation {
        align-self: stretch;
    }

    .ys-period-navigation__label {
        min-width: 0;
        flex: 1;
    }

    .ys-detail-section {
        padding: 18px;
    }

    .ys-table-number {
        width: auto;
    }

    .ys-table-actions {
        width: auto;
    }

    .ys-subjects-table .ys-table-actions {
        width: auto;
        padding-right: 16px !important;
    }

    .ys-subject-tab-heading,
    .ys-subject-content-section__heading,
    .ys-subject-editor__header {
        align-items: stretch;
        flex-direction: column;
    }

    .ys-subject-editor__header .mud-button-root {
        width: 100%;
    }

    .ys-subject-editor__composer,
    .ys-subject-content-edit-item {
        flex-wrap: wrap;
    }

    .ys-subject-editor__input,
    .ys-subject-content-edit-item__field {
        min-width: calc(100% - 60px);
    }

    .ys-subject-content-edit-item__actions {
        width: 100%;
        grid-template-columns: repeat(3, 40px);
        justify-content: flex-end;
    }

}

@media (max-width: 960px) {
    .ys-curriculum-overview {
        grid-template-columns: 1fr;
    }

    .ys-curriculum-form-header {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .ys-curriculum-overview {
        padding: 16px;
    }

    .ys-curriculum-overview__facts,
    .ys-curriculum-dialog__types {
        grid-template-columns: 1fr;
    }

    .ys-curricula-table .ys-table-actions,
    .ys-curriculum-groups-table .ys-table-actions {
        width: auto;
        padding-right: 16px !important;
    }

    .ys-curriculum-segment-card__header,
    .ys-curriculum-editor-section__heading,
    .ys-curriculum-subject-search,
    .ys-curriculum-subjects-heading,
    .ys-danger-zone {
        align-items: stretch;
        flex-direction: column;
    }

    .ys-curriculum-editor-section__heading .mud-button-root,
    .ys-curriculum-subject-search .ys-search-field,
    .ys-danger-zone .mud-button-root {
        width: 100%;
    }

    .ys-curriculum-expansion-title,
    .ys-curriculum-subject-title {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .ys-curriculum-expansion-title__copy,
    .ys-curriculum-subject-title > div {
        min-width: calc(100% - 58px);
    }

    .ys-curriculum-date-range > div {
        align-items: stretch;
        flex-direction: column;
    }

    .ys-curriculum-save-bar {
        position: static;
    }

    .ys-curriculum-segment-editor {
        padding: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ys-card--interactive {
        transition: none;
    }

    .ys-curriculum-subject-panels .mud-expand-panel::before {
        transition-duration: 1ms;
    }
}