:root {
    --interaction-surface: #fff;
    --interaction-soft: #f7f9fc;
    --interaction-text: #263247;
    --interaction-muted: #5f6d82;
    --interaction-border: #dfe4eb;
    --interaction-accent: var(--edu-orange-logo-deep, #fc7303);
    --interaction-link: #a84000;
    --interaction-selected-surface: #fff1e7;
    --interaction-row-default: #ffffff;
    --interaction-row-hover: #edf3fa;
    --interaction-row-focus: #e4efff;
    --interaction-row-selected: #fff1e7;
    --interaction-row-active: #f8d8c0;
    --interaction-row-disabled: #f3f5f8;
    --interaction-row-text: #263247;
    --interaction-row-muted: #536176;
    --interaction-row-link: #a84000;
    --interaction-row-disabled-text: #59677a;
    --interaction-danger: #c83e46;
    --interaction-danger-text: var(--field-required-color, #b42332);
    --interaction-success: #188553;
    --interaction-warning: #b77611;
    --interaction-warning-text: #a84000;
    --interaction-warning-surface: #fff9ec;
    --interaction-overlay: 45;
    --overlay-popover: calc(var(--interaction-overlay) + 2);
    --interaction-toast: 55;
    --interaction-shadow: 0 18px 50px rgb(22 35 55 / 18%);
}

html.interaction-overlay-open {
    overflow: hidden;
}

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.edu-data-table {
    position: relative;
    min-width: 0;
    border: 1px solid var(--interaction-border);
    border-radius: 17px;
    background: var(--interaction-surface);
    color: var(--interaction-text);
    box-shadow: 0 8px 28px rgb(21 36 56 / 7%);
}

.edu-table-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border-block-end: 1px solid var(--interaction-border);
}

.edu-table-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    max-width: 480px;
    min-height: 44px;
    padding-inline: 12px 4px;
    border: 1px solid var(--interaction-border);
    border-radius: 11px;
    background: var(--interaction-soft);
}

.edu-table-search svg {
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: var(--interaction-muted);
    stroke-width: 1.8;
}

.edu-table-search input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
}

.edu-table-search button,
.edu-action-trigger {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--interaction-muted);
}

.edu-toolbar-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-inline: 13px;
    border: 1px solid var(--interaction-border);
    border-radius: 11px;
    background: var(--interaction-surface);
    color: inherit;
}

.edu-toolbar-button b {
    min-width: 19px;
    padding: 2px 5px;
    border-radius: 20px;
    background: var(--interaction-accent);
    color: #fff;
    font-size: 10px;
}

.edu-column-panel {
    position: absolute;
    z-index: 4;
    inset-block-start: 66px;
    inset-inline-end: 14px;
    width: min(280px, calc(100% - 28px));
    padding: 12px;
    border: 1px solid var(--interaction-border);
    border-radius: 13px;
    background: var(--interaction-surface);
    box-shadow: var(--interaction-shadow);
}

.edu-column-panel label {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.edu-column-panel > button {
    width: 100%;
    min-height: 40px;
    margin-block-start: 8px;
    border: 0;
    border-block-start: 1px solid var(--interaction-border);
    background: transparent;
    color: var(--interaction-link);
}

.edu-bulk-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    min-height: 54px;
    padding: 9px 14px;
    border-block-end: 1px solid #f2c7aa;
    background: #fff5ed;
}

.edu-bulk-bar button {
    min-height: 38px;
    border: 0;
    background: transparent;
    color: #a94814;
}

.edu-bulk-actions {
    margin-inline-start: auto;
}

.edu-table-scroll {
    max-width: 100%;
    overflow: auto;
    overscroll-behavior-inline: contain;
    overscroll-behavior-block: auto;
}

.edu-data-table table {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
    text-align: start;
}

.edu-data-table caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.edu-data-table :is(th, td) {
    padding: 13px 12px;
    border-block-end: 1px solid var(--interaction-border);
    color: var(--interaction-text);
    vertical-align: middle;
    white-space: nowrap;
}

/* A column declares one semantic alignment that is shared by its header and cells. */
.edu-table-cell--align-start, :is(th,td)[data-alignment="start"] { text-align: start; }
.edu-table-cell--align-end, :is(th,td)[data-alignment="end"] { text-align: end; }
.edu-table-cell--align-center, :is(th,td)[data-alignment="center"] { text-align: center; }
.edu-data-table :is(th, td).edu-table-cell--align-start,
.edu-semantic-table :is(th, td).edu-table-cell--align-start { text-align: start; }
.edu-data-table :is(th, td).edu-table-cell--align-end,
.edu-semantic-table :is(th, td).edu-table-cell--align-end { text-align: end; }
.edu-data-table :is(th, td).edu-table-cell--align-center,
.edu-semantic-table :is(th, td).edu-table-cell--align-center { text-align: center; }
.edu-table-cell--align-center > :is(.edu-status-badge, .edu-button, .edu-choice-group),
:is(th,td)[data-alignment="center"] > :is(.edu-status-badge, .edu-button, .edu-choice-group) { margin-inline: auto; }
.edu-data-table :is(th, td).edu-table-cell--align-center > .edu-choice-group,
.edu-semantic-table :is(th, td).edu-table-cell--align-center > .edu-choice-group { margin-inline: auto; }
.edu-table-cell--align-end > :is(.money, .formatted-number, .currency-symbol),
:is(th,td)[data-alignment="end"] > :is(.money, .formatted-number, .currency-symbol) { margin-inline-start: auto; }

.edu-data-table th {
    background: var(--interaction-soft);
    color: var(--interaction-muted);
    font-size: 11px;
    font-weight: 600;
}

/* Semantic tables share the governed data-table surface instead of inheriting
   the low-contrast legacy global th/td rules. */
.edu-semantic-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--interaction-text);
}

.edu-semantic-table :is(th, td) {
    padding: 11px 12px;
    border-block-end: 1px solid var(--interaction-border);
    color: var(--interaction-text);
    text-align: start;
}

.edu-semantic-table th {
    background: var(--interaction-soft);
    color: var(--interaction-muted);
    font-weight: 750;
}

.edu-data-table th button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
}

.edu-data-table th button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.edu-data-table th button[data-direction="asc"] svg path:first-child,
.edu-data-table th button[data-direction="desc"] svg path:last-child {
    stroke: var(--interaction-accent);
    stroke-width: 2.5;
}

.edu-data-table tr:last-child td {
    border-block-end: 0;
}

/* Shared record-row states. Pages must not supply their own row-hover colors. */
.edu-data-table tbody > tr[data-row-id] {
    background: var(--interaction-row-default);
    color: var(--interaction-row-text);
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.edu-data-table tbody > tr[data-row-id]:hover {
    background: var(--interaction-row-hover);
    color: var(--interaction-row-text);
}

.edu-data-table tbody > tr[data-row-id]:focus-within {
    background: var(--interaction-row-focus);
    color: var(--interaction-row-text);
    box-shadow: inset 3px 0 0 var(--interaction-accent);
}

.edu-data-table tbody > tr[data-row-id][data-row-selected] {
    background: var(--interaction-row-selected);
    color: var(--interaction-row-text);
}

.edu-data-table tbody > tr[data-row-id]:active {
    background: var(--interaction-row-active);
    color: var(--interaction-row-text);
}

.edu-data-table tbody > tr[data-row-id][data-row-disabled] {
    background: var(--interaction-row-disabled);
    color: var(--interaction-row-disabled-text);
    cursor: not-allowed;
}

.edu-data-table tbody > tr[data-row-id] > td {
    background-color: var(--interaction-row-default);
    color: inherit;
    transition: background-color .18s ease, color .18s ease;
}

.edu-data-table tbody > tr[data-row-id]:hover > td {
    background-color: var(--interaction-row-hover);
}

.edu-data-table tbody > tr[data-row-id]:focus-within > td {
    background-color: var(--interaction-row-focus);
}

.edu-data-table tbody > tr[data-row-id][data-row-selected] > td {
    background-color: var(--interaction-row-selected);
}

.edu-data-table tbody > tr[data-row-id]:active > td {
    background-color: var(--interaction-row-active);
}

.edu-data-table tbody > tr[data-row-id][data-row-disabled] > td {
    background-color: var(--interaction-row-disabled);
}

.edu-data-table tbody > tr[data-row-id] :is(a, .edu-action-trigger) {
    color: var(--interaction-row-link);
}

.edu-data-table tbody > tr[data-row-id] :is(small, .ui-cell-lines > :not(:first-child), .edu-availability-value) {
    color: var(--interaction-row-muted);
}

.edu-data-table tbody > tr[data-row-id][data-row-disabled] :is(td, a, .edu-action-trigger, small, .ui-cell-lines > :not(:first-child), .edu-availability-value) {
    color: var(--interaction-row-disabled-text);
}

.edu-data-table.has-sticky-header thead th {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
}

.edu-data-table a {
    color: var(--interaction-link);
}

.edu-cell-select {
    width: 54px;
    text-align: center !important;
}

.edu-cell-select label {
    min-width: 44px;
    min-height: 44px;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
}

.edu-cell-actions {
    width: 58px;
    text-align: center !important;
}

.edu-action-menu {
    position: fixed;
    z-index: var(--overlay-popover, 46);
    min-width: 180px;
    padding: 6px;
    border: 1px solid var(--interaction-border);
    border-radius: 12px;
    background: var(--interaction-surface);
    box-shadow: var(--interaction-shadow);
}

.edu-action-menu button {
    width: 100%;
    min-height: 42px;
    display: block;
    padding-inline: 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    text-align: start;
}

.edu-action-menu button:hover,
.edu-action-menu button:focus-visible {
    background: var(--interaction-soft);
}

.edu-action-menu .is-destructive {
    margin-block-start: 5px;
    border-block-start: 1px solid var(--interaction-border);
    color: var(--interaction-danger-text);
}

.edu-action-menu button:disabled {
    opacity: .5;
}

.edu-pagination {
    min-inline-size: 0;
    max-inline-size: 100%;
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 10px 14px;
    border-block-start: 1px solid var(--interaction-border);
    color: var(--interaction-muted);
    font-size: 11px;
}

.edu-pagination :is(div, label) {
    display: flex;
    align-items: center;
    gap: 7px;
}

.edu-pagination button,
.edu-pagination b,
.edu-pagination select {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-inline: 10px;
    border: 1px solid var(--interaction-border);
    border-radius: 9px;
    background: var(--interaction-surface);
    color: inherit;
}

.edu-pagination b {
    justify-content: center;
    min-width: 40px;
    background: var(--interaction-selected-surface);
    color: var(--interaction-link);
}

.edu-pagination button:disabled {
    opacity: .45;
}

.edu-pagination__summary { margin: 0; }
.edu-pagination__desktop,
.edu-pagination__mobile { min-inline-size: 0; max-inline-size: 100%; display: flex; align-items: center; gap: 6px; }
.edu-pagination__desktop { flex-wrap: wrap; justify-content: flex-end; }
.edu-pagination .edu-pagination__mobile { display: none; }
.edu-pagination__control,
.edu-pagination__page {
    min-block-size: 44px;
    min-inline-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding-inline: 10px;
    border: 1px solid var(--interaction-border);
    border-radius: 9px;
    background: var(--interaction-surface);
    color: inherit;
    text-decoration: none;
}
.edu-pagination__page.is-current { border-color: var(--interaction-link); background: var(--interaction-selected-surface); color: var(--interaction-link); font-weight: 750; }
.edu-pagination__control.is-disabled { opacity: .45; cursor: not-allowed; }
.edu-pagination__icon { inline-size: 18px !important; block-size: 18px !important; max-inline-size: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.edu-pagination__ellipsis { min-inline-size: 20px; text-align: center; }
.edu-pagination :is(a, .edu-pagination__page):focus-visible { outline: 3px solid color-mix(in srgb, var(--interaction-link) 42%, transparent); outline-offset: 2px; }

@media(max-width: 640px) {
    .edu-pagination { align-items: stretch; flex-direction: column; }
    .edu-pagination__summary { text-align: center; }
    .edu-pagination .edu-pagination__desktop { display: none; }
    .edu-pagination .edu-pagination__mobile { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); width: 100%; }
    .edu-pagination__mobile .edu-pagination__control:last-child { justify-self: stretch; }
    .edu-pagination__mobile-status { padding-inline: 4px; white-space: nowrap; font-weight: 700; }
}

.edu-count-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: 2.25em;
    block-size: 2.25em;
    border-radius: 50%;
    background: var(--interaction-soft);
    color: var(--interaction-text);
    border: 1px solid var(--interaction-border);
    font-size: 11px;
    font-weight: 700;
    vertical-align: middle;
}

.edu-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 20px;
    background: #edf1f5;
    color: #526074;
    font-size: 10px;
    font-weight: 600;
}

.edu-status-badge--large { font-size: calc(10px + 1pt); }
.edu-table-cell--align-end > .edu-action-group { justify-content: end; flex-wrap: nowrap; }

.edu-status-badge__mark {
    width: 7px;
    height: 7px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.edu-status-badge:is(.is-active,.is-approved,.is-completed,.is-success) { background: #e5f7ed; color: #17744b; }
.edu-status-badge:is(.is-pending,.is-warning) { background: #fff4d9; color: #95600a; }
.edu-status-badge:is(.is-rejected,.is-critical) { background: #fde9eb; color: #b4333c; }
.edu-status-badge.is-draft { background: #eef0f4; color: #596579; }

.edu-overlay-backdrop {
    position: fixed;
    z-index: var(--interaction-overlay);
    inset: 0;
    background: rgb(13 23 39 / 55%);
    backdrop-filter: blur(3px);
}

.edu-overlay {
    position: fixed;
    z-index: calc(var(--interaction-overlay) + 1);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid var(--interaction-border);
    background: var(--interaction-surface);
    color: var(--interaction-text);
    box-shadow: var(--interaction-shadow);
    outline: 0;
}

.edu-overlay[hidden],
.edu-overlay-backdrop[hidden] {
    display: none;
}

.edu-overlay > header,
.edu-overlay > footer {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-block-end: 1px solid var(--interaction-border);
}

.edu-overlay > footer {
    justify-content: flex-end;
    border-block-start: 1px solid var(--interaction-border);
    border-block-end: 0;
}

.edu-overlay h2 {
    margin: 0;
    font-size: 18px;
}

.edu-icon-button {
    flex: 0 0 44px;
    inline-size: 44px;
    block-size: 44px;
    display: inline-grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 11px;
    background: var(--interaction-soft);
    color: var(--interaction-text);
}
.edu-icon-button svg { inline-size:20px; block-size:20px; fill:none; stroke:currentColor; stroke-width:1.9; }
.edu-icon-button:hover { background: var(--interaction-selected-surface); color: var(--interaction-link); }
.edu-icon-button:active { background: var(--interaction-row-active); }
.edu-icon-button:focus-visible { outline:3px solid color-mix(in srgb,var(--interaction-accent) 40%,transparent); outline-offset:2px; }
.edu-icon-button:disabled { opacity:.55; cursor:not-allowed; }

.edu-overlay__body {
    overflow: auto;
    padding: 20px;
    overscroll-behavior: contain;
}

.edu-overlay__body > :is(.edu-control, .edu-choice-group, .edu-form-grid, .edu-alert)
    + :is(.edu-control, .edu-choice-group, .edu-form-grid, .edu-alert) {
    margin-block-start: var(--field-group-gap, 26px);
}

.edu-modal {
    inset: 50% auto auto 50%;
    width: min(calc(100vw - 32px), 600px);
    max-height: min(82dvh, 820px);
    border-radius: 18px;
    transform: translate(-50%, -50%);
}

.edu-modal.size-small { width: min(calc(100vw - 32px), 420px); }
.edu-modal.size-xlarge { width: min(calc(100vw - 32px), 960px); max-height:85dvh; }
.edu-modal.size-large { width: min(calc(100vw - 32px), 840px); }
/* Workspace dialogs fit below the persistent shell header. Mobile keeps the
   shared bottom sheet; other dialogs retain their existing window placement. */
@media (min-width: 621px) {
    .edu-modal[data-overlay-viewport="workspace"] {
        inset-block-start: calc(50dvh + (var(--shell-header-height, 0px) + var(--shell-breadcrumb-height, 0px)) / 2);
        max-height: min(82dvh, 820px, calc(100dvh - var(--shell-header-height, 0px) - var(--shell-breadcrumb-height, 0px) - 32px));
    }
}
.edu-modal.size-extra-large { width: min(calc(100vw - 32px), 1120px); }

.edu-drawer {
    inset-block: 0;
    inset-inline-end: 0;
    width: min(440px, 100vw);
    border-inline-start: 1px solid var(--interaction-border);
}

.edu-sheet {
    inset: auto max(12px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    max-height: min(78dvh, 700px);
    border-radius: 22px;
}

.edu-sheet-handle {
    display:none;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 4px;
    margin: 0;
    border-radius: 10px;
    background: var(--interaction-border);
}

.edu-toast-region {
    position: fixed;
    z-index: var(--interaction-toast);
    inset-block-start: calc(var(--toast-header-bottom, 0px) + 16px + env(safe-area-inset-top));
    inset-inline-end: 18px;
    width: min(360px, calc(100vw - 32px));
    display: grid;
    gap: 9px;
    pointer-events: none;
}

.edu-toast {
    pointer-events: auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 10px;
    padding: 13px;
    border: 1px solid var(--interaction-border);
    border-inline-start: 4px solid var(--interaction-accent);
    border-radius: 13px;
    background: color-mix(in srgb, var(--interaction-surface) 94%, transparent);
    color: var(--interaction-text);
    box-shadow: var(--interaction-shadow);
    backdrop-filter: blur(16px);
}

.edu-toast button {
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: inherit;
}

.edu-alert {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 11px;
    padding: 14px;
    border: 1px solid var(--interaction-border);
    border-inline-start: 4px solid #4b78b4;
    border-radius: 13px;
    background: var(--interaction-soft);
    color: var(--interaction-text);
}

.edu-alert__icon {
    width: 25px;
    height: 25px;
    display: block;
    flex: 0 0 25px;
}

.edu-alert__icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.edu-alert.is-success { border-inline-start-color: var(--interaction-success); }
.edu-alert.is-warning {
    border-color: color-mix(in srgb, var(--interaction-warning) 38%, var(--interaction-border));
    border-inline-start-color: var(--interaction-warning);
    background: var(--interaction-warning-surface);
    color: var(--interaction-warning-text);
}
.edu-alert.is-warning .edu-alert__icon { color: var(--interaction-warning); }
.edu-alert.is-critical { border-inline-start-color: var(--interaction-danger); }

.edu-form-summary {
    margin-block-end: 16px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--interaction-danger) 45%, var(--interaction-border));
    border-inline-start: 4px solid var(--interaction-danger);
    border-radius: 11px;
    background: color-mix(in srgb, var(--interaction-danger) 8%, var(--interaction-surface));
    color: var(--interaction-danger-text);
    font-weight: 600;
}

.application-field-error {
    display: block;
    margin-block-start: 7px;
}

[aria-invalid="true"] {
    border-color: var(--interaction-danger) !important;
}

.edu-feedback-state {
    min-height: 210px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    padding: 24px;
    border: 1px solid var(--interaction-border);
    border-radius: 15px;
    background: var(--interaction-surface);
    color: var(--interaction-text);
    text-align: center;
}

.edu-feedback-state.edu-feedback-state--compact {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    place-items: start;
    gap: 12px;
    text-align: start;
}

.edu-feedback-state__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #fff1e7;
    color: var(--interaction-accent);
    font-size: 21px;
}

.edu-feedback-state h3,
.edu-feedback-state p {
    margin: 0;
}

.edu-feedback-state p {
    color: var(--interaction-muted);
    font-size: 12px;
}

.edu-feedback-state.is-loading .edu-feedback-state__icon {
    animation: edu-interaction-spin 1s linear infinite;
}

.button[aria-busy="true"] {
    position: relative;
    pointer-events: none;
    opacity: .72;
}

.button:not(.edu-button)[aria-busy="true"]::after {
    content: "";
    width: 15px;
    height: 15px;
    margin-inline-start: 8px;
    display: inline-block;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    vertical-align: -3px;
    animation: edu-interaction-spin .8s linear infinite;
}

.edu-data-table[aria-busy="true"] .edu-table-scroll {
    opacity: .62;
}

.edu-skeleton {
    display: grid;
    gap: 11px;
    padding: 18px;
}

.edu-skeleton span {
    height: 42px;
    border-radius: 9px;
    background: linear-gradient(90deg, var(--interaction-soft), #edf1f6, var(--interaction-soft));
    background-size: 220% 100%;
    animation: edu-skeleton 1.4s ease-in-out infinite;
}

.edu-activity-timeline {
    margin: 0;
    padding: 0;
    list-style: none;
}

.edu-activity-timeline li {
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 11px;
    padding-block-end: 22px;
}

.edu-activity-timeline li::before {
    content: "";
    position: absolute;
    inset-block: 15px -2px;
    inset-inline-start: 10px;
    width: 2px;
    background: var(--interaction-border);
}

.edu-activity-timeline li:last-child::before {
    display: none;
}

.edu-activity-timeline__marker {
    z-index: 1;
    width: 20px;
    height: 20px;
    border: 5px solid #fff1e7;
    border-radius: 50%;
    background: var(--interaction-accent);
}

.edu-activity-timeline header,
.edu-activity-timeline footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.edu-activity-timeline header {
    justify-content: space-between;
}

.edu-activity-timeline p {
    margin: 7px 0;
    color: var(--interaction-muted);
    font-size: 12px;
}

.edu-activity-timeline footer {
    color: var(--interaction-muted);
    font-size: 10px;
}

.data-interaction-review {
    display: grid;
    gap: 20px;
}

.interaction-demo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.interaction-demo-card {
    min-width: 0;
    padding: 19px;
    border: 1px solid var(--interaction-border);
    border-radius: 16px;
    background: var(--interaction-surface);
}

.interaction-demo-card.is-wide {
    grid-column: 1 / -1;
}

.interaction-demo-card h2 {
    margin-block-start: 0;
}

.interaction-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

@keyframes edu-interaction-spin { to { transform: rotate(1turn); } }
@keyframes edu-skeleton { to { background-position: -220% 0; } }

html[data-theme="dark"] {
    --interaction-surface: #182438;
    --interaction-soft: #121d2f;
    --interaction-text: #eef3f8;
    --interaction-muted: #a7b3c4;
    --interaction-link: #ffa65c;
    --interaction-selected-surface: #492d21;
    --interaction-row-default: #182438;
    --interaction-row-hover: #283a54;
    --interaction-row-focus: #304563;
    --interaction-row-selected: #493327;
    --interaction-row-active: #5b3d2d;
    --interaction-row-disabled: #151e2d;
    --interaction-row-text: #eef3f8;
    --interaction-row-muted: #c0cad8;
    --interaction-row-link: #ffb575;
    --interaction-row-disabled-text: #b7c1cf;
    --interaction-border: #3b4960;
    --interaction-warning-text: #ffad6b;
    --interaction-warning-surface: #3a261c;
    --interaction-shadow: 0 20px 56px rgb(0 0 0 / 42%);
}

html[data-theme="dark"] .edu-bulk-bar {
    background: #492d21;
    border-color: #70442e;
}

html[data-theme="dark"] .edu-status-badge:is(.is-active,.is-approved,.is-completed,.is-success) { background: #173f31; color: #83deb4; }
html[data-theme="dark"] .edu-status-badge:is(.is-pending,.is-warning) { background: #453818; color: #f4cf72; }
html[data-theme="dark"] .edu-status-badge:is(.is-rejected,.is-critical) { background: #48242b; color: #f4a1a8; }
html[data-theme="dark"] .edu-status-badge.is-draft { background: #28364b; color: #c3ccda; }

@media (max-width: 1024px) {
    .edu-data-table.strategy-priority [data-priority="4"] { display: none; }
}

@media (max-width: 768px) {
    .interaction-demo-grid { grid-template-columns: 1fr; }
    .interaction-demo-card.is-wide { grid-column: auto; }
    .edu-data-table.strategy-priority [data-priority="3"] { display: none; }
    .edu-pagination > span,
    .edu-pagination label span { display: none; }
}

@media (max-width: 620px) {
    .edu-table-toolbar { padding: 10px; }
    .edu-table-search { max-width: none; }
    .edu-toolbar-button span:not(:first-child) { display: none; }
    .edu-column-panel { inset-block-start: 62px; }
    .edu-data-table.strategy-cards .edu-table-scroll { overflow: visible; }
    .edu-data-table.strategy-cards table,
    .edu-data-table.strategy-cards :is(thead, tbody, tr, td) { display: block; min-width: 0; }
    .edu-data-table.strategy-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .edu-data-table.strategy-cards tbody { display: grid; gap: 10px; padding: 10px; }
    .edu-data-table.strategy-cards tr { position: relative; padding: 12px; border: 1px solid var(--interaction-border); border-radius: 13px; background: var(--interaction-soft); }
    .edu-data-table.strategy-cards td { display: grid; grid-template-columns: minmax(90px, .7fr) 1fr; gap: 10px; padding: 7px 0; border: 0; white-space: normal; text-align: start !important; }
    .edu-data-table.strategy-cards td::before { content: attr(data-label); color: var(--interaction-muted); font-size: 10px; font-weight: 600; }
    .edu-data-table.strategy-cards .edu-cell-select { position: absolute; inset-block-start: 5px; inset-inline-end: 48px; width: 44px; display: block; }
    .edu-data-table.strategy-cards .edu-cell-select::before,
    .edu-data-table.strategy-cards .edu-cell-actions::before { display: none; }
    .edu-data-table.strategy-cards .edu-cell-actions { position: absolute; inset-block-start: 5px; inset-inline-end: 5px; width: 44px; display: block; }
    .edu-data-table.strategy-scroll table { min-width: 760px; }
    .edu-pagination { min-height: 56px; }
    .edu-overlay.edu-modal,
    .edu-overlay.edu-drawer,
    .edu-overlay.edu-sheet {
        inset: auto max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
        width: auto;
        max-height: min(88dvh, 700px);
        border-radius: 22px;
        transform: none;
    }
    .edu-overlay.has-mobile-sheet .edu-sheet-handle,.edu-overlay.edu-sheet .edu-sheet-handle{display:block}
    .edu-toast-region {
        inset-block: auto calc(92px + env(safe-area-inset-bottom));
        inset-inline: 12px;
        width: auto;
    }
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        --interaction-surface: #182438;
        --interaction-soft: #121d2f;
        --interaction-text: #eef3f8;
        --interaction-muted: #a7b3c4;
        --interaction-link: #ffa65c;
        --interaction-selected-surface: #492d21;
        --interaction-row-default: #182438;
        --interaction-row-hover: #283a54;
        --interaction-row-focus: #304563;
        --interaction-row-selected: #493327;
        --interaction-row-active: #5b3d2d;
        --interaction-row-disabled: #151e2d;
        --interaction-row-text: #eef3f8;
        --interaction-row-muted: #c0cad8;
        --interaction-row-link: #ffb575;
        --interaction-row-disabled-text: #b7c1cf;
        --interaction-border: #3b4960;
        --interaction-shadow: 0 20px 56px rgb(0 0 0 / 42%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .edu-feedback-state__icon,
    .edu-skeleton span,
    .button:not(.edu-button)[aria-busy="true"]::after {
        animation: none !important;
    }
}

/* Header action menus keep their trigger and status in normal flow; only the menu floats. */
.edu-action-dropdown{display:inline-flex;flex:none;min-inline-size:0}
.edu-action-dropdown:not(:has([role=menuitem]:not([hidden]):not(:disabled))){display:none}
.edu-action-dropdown>.edu-action-menu{box-sizing:border-box;inline-size:max-content;max-inline-size:min(18rem,calc(100vw - 20px));overflow:auto;overscroll-behavior:contain;color:var(--interaction-text)}
.edu-action-dropdown>.edu-action-menu .button{display:flex;justify-content:flex-start;inline-size:100%;min-block-size:44px;padding:8px 12px;text-align:start;white-space:normal;box-shadow:none}
.edu-action-dropdown>.edu-action-menu [data-action-intent=destructive]{color:var(--action-destructive-text)}
.edu-action-dropdown>.edu-action-menu [role=separator]{border:0;border-block-start:1px solid var(--interaction-border);margin:4px 0}
.edu-action-dropdown>.edu-action-menu [hidden]{display:none!important}