/**
 * Ecademis UI components — DESIGN-SYSTEM-001B
 * Scoped, token-driven and progressively adoptable.
 */
.ec-design-system .ec-ui-stack{display:flex;flex-direction:column;gap:var(--ec-space-3)}
.ec-design-system .ec-ui-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ec-space-2)}
.ec-design-system .ec-ui-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--ec-space-3)}
.ec-design-system .ec-ui-visually-hidden{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}
.ec-design-system .ec-ui-section{padding:var(--ec-space-4);border:1px solid var(--ec-color-border);border-radius:var(--ec-radius-card);background:var(--ec-color-surface);box-shadow:var(--ec-shadow-sm)}
.ec-design-system .ec-ui-section__title{margin:0 0 var(--ec-space-3);font:var(--ec-font-weight-medium) var(--ec-text-h2-size)/var(--ec-text-h2-line) var(--ec-font-functional);color:var(--ec-color-text)}
.ec-design-system .ec-ui-subtitle{margin:0;color:var(--ec-color-text-muted);font:var(--ec-font-weight-regular) var(--ec-text-secondary-size)/var(--ec-text-secondary-line) var(--ec-font-functional)}
.ec-design-system .ec-ui-button{--ec-ui-button-bg:var(--ec-color-brand-primary);--ec-ui-button-color:var(--ec-color-brand-primary-contrast);display:inline-flex;position:relative;align-items:center;justify-content:center;gap:var(--ec-space-2);min-width:44px;min-height:44px;padding:0 var(--ec-space-3);border:1px solid transparent;border-radius:var(--ec-radius-control);background:var(--ec-ui-button-bg);color:var(--ec-ui-button-color);font:var(--ec-font-weight-medium) var(--ec-text-body-size)/var(--ec-text-body-line) var(--ec-font-functional);text-decoration:none;cursor:pointer;transition:filter var(--ec-motion-fast) var(--ec-motion-easing),transform var(--ec-motion-fast) var(--ec-motion-easing),box-shadow var(--ec-motion-fast) var(--ec-motion-easing)}
.ec-design-system .ec-ui-button:hover:not(:disabled):not([aria-disabled=true]){filter:brightness(.92)}
.ec-design-system .ec-ui-button:active:not(:disabled):not([aria-disabled=true]){transform:translateY(1px);filter:brightness(.84)}
.ec-design-system .ec-ui-button:focus-visible{outline:3px solid var(--ec-color-focus);outline-offset:3px;box-shadow:0 0 0 2px var(--ec-color-surface)}
.ec-design-system .ec-ui-button:disabled,.ec-design-system .ec-ui-button[aria-disabled=true]{opacity:.52;cursor:not-allowed}
.ec-design-system .ec-ui-button--secondary{--ec-ui-button-bg:var(--ec-color-brand-secondary);--ec-ui-button-color:var(--ec-color-brand-secondary-contrast)}
.ec-design-system .ec-ui-button--ghost{--ec-ui-button-bg:transparent;--ec-ui-button-color:var(--ec-color-brand-primary);border-color:var(--ec-color-border)}
.ec-design-system .ec-ui-button--destructive{--ec-ui-button-bg:var(--ec-color-error);--ec-ui-button-color:var(--ec-color-error-contrast)}
.ec-design-system .ec-ui-button--sm{min-height:36px;padding-inline:var(--ec-space-2);font-size:var(--ec-text-secondary-size);line-height:var(--ec-text-secondary-line)}
.ec-design-system .ec-ui-button--lg{min-height:52px;padding-inline:var(--ec-space-4);font-size:var(--ec-text-h3-size);line-height:var(--ec-text-h3-line)}
.ec-design-system .ec-ui-button--icon{width:44px;padding:0}
.ec-design-system .ec-ui-button__content{display:inline-flex;align-items:center;gap:var(--ec-space-2);visibility:visible}
.ec-design-system .ec-ui-button__spinner{display:none;position:absolute;width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ec-ui-spin var(--ec-motion-confirmation) linear infinite}
.ec-design-system .ec-ui-button[aria-busy=true] .ec-ui-button__content{visibility:hidden}
.ec-design-system .ec-ui-button[aria-busy=true] .ec-ui-button__spinner{display:block}
.ec-design-system .ec-ui-field{display:flex;flex-direction:column;gap:var(--ec-space-1)}
.ec-design-system .ec-ui-label{font:var(--ec-font-weight-medium) var(--ec-text-secondary-size)/var(--ec-text-secondary-line) var(--ec-font-functional);color:var(--ec-color-text)}
.ec-design-system .ec-ui-required{color:var(--ec-color-error)}
.ec-design-system .ec-ui-control{box-sizing:border-box;width:100%;min-height:44px;padding:9px var(--ec-space-3);border:1px solid var(--ec-color-border);border-radius:var(--ec-radius-control);background:var(--ec-color-surface);color:var(--ec-color-text);font:var(--ec-font-weight-regular) var(--ec-text-body-size)/var(--ec-text-body-line) var(--ec-font-functional);transition:border-color var(--ec-motion-fast) var(--ec-motion-easing),box-shadow var(--ec-motion-fast) var(--ec-motion-easing)}
.ec-design-system textarea.ec-ui-control{min-height:112px;resize:vertical}
.ec-design-system select.ec-ui-control{appearance:auto}
.ec-design-system .ec-ui-control:hover:not(:disabled):not([readonly]){border-color:var(--ec-color-text-muted)}
.ec-design-system .ec-ui-control:focus-visible{outline:3px solid var(--ec-color-focus);outline-offset:1px;border-color:var(--ec-color-brand-primary)}
.ec-design-system .ec-ui-control:disabled{opacity:.55;cursor:not-allowed;background:var(--ec-color-surface-subtle)}
.ec-design-system .ec-ui-control[readonly]{background:var(--ec-color-surface-subtle)}
.ec-design-system .ec-ui-control[aria-invalid=true]{border-color:var(--ec-color-error);box-shadow:inset 4px 0 0 var(--ec-color-error)}
.ec-design-system .ec-ui-control[aria-invalid=false][data-valid=true]{border-color:var(--ec-color-success);box-shadow:inset 4px 0 0 var(--ec-color-success)}
.ec-design-system .ec-ui-help,.ec-design-system .ec-ui-message{margin:0;font:var(--ec-font-weight-regular) var(--ec-text-label-size)/var(--ec-text-label-line) var(--ec-font-functional);color:var(--ec-color-text-muted)}
.ec-design-system .ec-ui-message--error{color:var(--ec-color-error)}
.ec-design-system .ec-ui-message--success{color:var(--ec-color-success)}
.ec-design-system .ec-ui-choice{display:inline-flex;align-items:center;gap:var(--ec-space-2);min-height:44px;color:var(--ec-color-text);cursor:pointer}
.ec-design-system .ec-ui-choice input{width:20px;height:20px;accent-color:var(--ec-color-brand-primary)}
.ec-design-system .ec-ui-choice input:focus-visible{outline:3px solid var(--ec-color-focus);outline-offset:3px}
.ec-design-system .ec-ui-switch{display:inline-flex;align-items:center;gap:var(--ec-space-2);min-height:44px;cursor:pointer}
.ec-design-system .ec-ui-switch__control{position:relative;width:48px;height:28px;flex:none;border:1px solid var(--ec-color-border);border-radius:var(--ec-radius-card);background:var(--ec-color-surface-subtle);transition:background var(--ec-motion-fast) var(--ec-motion-easing)}
.ec-design-system .ec-ui-switch__control::after{content:"";position:absolute;inset:3px auto auto 3px;width:20px;height:20px;border-radius:50%;background:var(--ec-color-surface);box-shadow:var(--ec-shadow-sm);transition:transform var(--ec-motion-fast) var(--ec-motion-easing)}
.ec-design-system .ec-ui-switch input:checked + .ec-ui-switch__control{background:var(--ec-color-brand-primary)}
.ec-design-system .ec-ui-switch input:checked + .ec-ui-switch__control::after{transform:translateX(20px)}
.ec-design-system .ec-ui-switch input:focus-visible + .ec-ui-switch__control{outline:3px solid var(--ec-color-focus);outline-offset:3px}
.ec-design-system .ec-ui-card{display:flex;flex-direction:column;gap:var(--ec-space-2);padding:var(--ec-space-3);border:1px solid var(--ec-color-border);border-radius:var(--ec-radius-card);background:var(--ec-color-surface);color:var(--ec-color-text);box-shadow:var(--ec-shadow-sm)}
.ec-design-system .ec-ui-card--interactive{cursor:pointer;transition:border-color var(--ec-motion-fast) var(--ec-motion-easing),box-shadow var(--ec-motion-fast) var(--ec-motion-easing),transform var(--ec-motion-fast) var(--ec-motion-easing)}
.ec-design-system .ec-ui-card--interactive:hover{border-color:var(--ec-color-brand-primary);box-shadow:var(--ec-shadow-md)}
.ec-design-system .ec-ui-card--interactive:focus-visible{outline:3px solid var(--ec-color-focus);outline-offset:3px}
.ec-design-system .ec-ui-card--selected{border-color:var(--ec-color-brand-primary);box-shadow:inset 0 0 0 2px var(--ec-color-brand-primary)}
.ec-design-system .ec-ui-card--disabled{opacity:.52;pointer-events:none}
.ec-design-system .ec-ui-card--informational{border-left:4px solid var(--ec-color-info)}
.ec-design-system .ec-ui-card__title{margin:0;font:var(--ec-font-weight-medium) var(--ec-text-h3-size)/var(--ec-text-h3-line) var(--ec-font-functional)}
.ec-design-system .ec-ui-card__description{margin:0;color:var(--ec-color-text-muted)}
.ec-design-system .ec-ui-card__footer{display:flex;flex-wrap:wrap;gap:var(--ec-space-2);padding-top:var(--ec-space-2);border-top:1px solid var(--ec-color-border)}
.ec-design-system .ec-ui-badge{display:inline-flex;align-items:center;gap:var(--ec-space-1);min-height:24px;padding:2px var(--ec-space-2);border:1px solid var(--ec-color-border);border-radius:var(--ec-radius-card);background:var(--ec-color-surface-subtle);color:var(--ec-color-text);font:var(--ec-font-weight-medium) var(--ec-text-label-size)/var(--ec-text-label-line) var(--ec-font-functional)}
.ec-design-system .ec-ui-badge--info{border-color:var(--ec-color-info);color:var(--ec-color-info)}
.ec-design-system .ec-ui-badge--success{border-color:var(--ec-color-success);color:var(--ec-color-success)}
.ec-design-system .ec-ui-badge--warning{border-color:var(--ec-color-warning);color:var(--ec-color-warning)}
.ec-design-system .ec-ui-badge--error{border-color:var(--ec-color-error);color:var(--ec-color-error)}
.ec-design-system .ec-ui-alert{display:grid;grid-template-columns:auto 1fr auto;gap:var(--ec-space-2);align-items:start;padding:var(--ec-space-3);border:1px solid var(--ec-color-border);border-left:4px solid var(--ec-color-info);border-radius:var(--ec-radius-control);background:var(--ec-color-surface-subtle);color:var(--ec-color-text)}
.ec-design-system .ec-ui-alert--success{border-left-color:var(--ec-color-success)}
.ec-design-system .ec-ui-alert--warning{border-left-color:var(--ec-color-warning)}
.ec-design-system .ec-ui-alert--error{border-left-color:var(--ec-color-error)}
.ec-design-system .ec-ui-alert__title{display:block;margin-bottom:var(--ec-space-1);font-weight:var(--ec-font-weight-medium)}
.ec-design-system .ec-ui-alert__close{min-width:44px;min-height:44px;border:0;background:transparent;color:var(--ec-color-text);font-size:var(--ec-text-h3-size);cursor:pointer}
.ec-design-system .ec-ui-alert__close:focus-visible{outline:3px solid var(--ec-color-focus);outline-offset:2px}
.ec-design-system .ec-ui-tabs__list{display:flex;gap:var(--ec-space-1);overflow-x:auto;border-bottom:1px solid var(--ec-color-border)}
.ec-design-system .ec-ui-tab{min-height:44px;padding:var(--ec-space-2) var(--ec-space-3);border:0;border-bottom:3px solid transparent;background:transparent;color:var(--ec-color-text-muted);font:var(--ec-font-weight-medium) var(--ec-text-body-size)/var(--ec-text-body-line) var(--ec-font-functional);white-space:nowrap;cursor:pointer}
.ec-design-system .ec-ui-tab[aria-selected=true]{border-bottom-color:var(--ec-color-brand-primary);color:var(--ec-color-brand-primary)}
.ec-design-system .ec-ui-tab:focus-visible{outline:3px solid var(--ec-color-focus);outline-offset:-3px}
.ec-design-system .ec-ui-tab:disabled{opacity:.5;cursor:not-allowed}
.ec-design-system .ec-ui-tabpanel{padding:var(--ec-space-3) 0}
.ec-design-system .ec-ui-menu-wrap{position:relative;display:inline-block}
.ec-design-system .ec-ui-menu{position:absolute;z-index:30;inset:calc(100% + var(--ec-space-1)) 0 auto auto;width:max-content;min-width:220px;max-width:min(320px,calc(100vw - var(--ec-space-4)));padding:var(--ec-space-1);border:1px solid var(--ec-color-border);border-radius:var(--ec-radius-control);background:var(--ec-color-surface);box-shadow:var(--ec-shadow-lg)}
.ec-design-system .ec-ui-menu[hidden]{display:none}
.ec-design-system .ec-ui-menu__item{display:flex;width:100%;min-height:44px;align-items:center;padding:var(--ec-space-2);border:0;border-radius:var(--ec-radius-control);background:transparent;color:var(--ec-color-text);text-align:left;cursor:pointer}
.ec-design-system .ec-ui-menu__item:hover,.ec-design-system .ec-ui-menu__item:focus-visible{background:var(--ec-color-surface-subtle);outline:2px solid var(--ec-color-focus);outline-offset:-2px}
.ec-design-system .ec-ui-menu__item--destructive{color:var(--ec-color-error)}
.ec-design-system .ec-ui-menu__item:disabled{opacity:.5;cursor:not-allowed}
.ec-design-system .ec-ui-menu__separator{height:1px;margin:var(--ec-space-1);background:var(--ec-color-border)}
.ec-design-system .ec-ui-dialog{width:min(560px,calc(100% - var(--ec-space-4)));max-height:calc(100vh - var(--ec-space-4));padding:0;border:1px solid var(--ec-color-border);border-radius:var(--ec-radius-card);background:var(--ec-color-surface);color:var(--ec-color-text);box-shadow:var(--ec-shadow-lg);overflow:auto}
.ec-design-system .ec-ui-dialog::backdrop{background:color-mix(in srgb,var(--ec-color-text) 62%,transparent)}
.ec-design-system .ec-ui-dialog__header,.ec-design-system .ec-ui-dialog__body,.ec-design-system .ec-ui-dialog__footer{padding:var(--ec-space-3)}
.ec-design-system .ec-ui-dialog__header{display:flex;justify-content:space-between;gap:var(--ec-space-2);border-bottom:1px solid var(--ec-color-border)}
.ec-design-system .ec-ui-dialog__footer{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:var(--ec-space-2);border-top:1px solid var(--ec-color-border)}
.ec-design-system .ec-ui-tooltip-wrap{position:relative;display:inline-flex}
.ec-design-system .ec-ui-tooltip{position:absolute;z-index:40;inset:auto auto calc(100% + var(--ec-space-2)) 50%;transform:translateX(-50%);width:max-content;max-width:min(240px,calc(100vw - var(--ec-space-4)));padding:var(--ec-space-2);border-radius:var(--ec-radius-control);background:var(--ec-color-text);color:var(--ec-color-surface);font-size:var(--ec-text-label-size);line-height:var(--ec-text-label-line);box-shadow:var(--ec-shadow-md)}
.ec-design-system .ec-ui-tooltip[hidden]{display:none}
.ec-design-system .ec-ui-spinner{width:28px;height:28px;border:3px solid var(--ec-color-border);border-top-color:var(--ec-color-brand-primary);border-radius:50%;animation:ec-ui-spin var(--ec-motion-confirmation) linear infinite}
.ec-design-system .ec-ui-skeleton{display:flex;flex-direction:column;gap:var(--ec-space-2)}
.ec-design-system .ec-ui-skeleton__line{height:16px;border-radius:var(--ec-radius-control);background:linear-gradient(90deg,var(--ec-color-surface-subtle),var(--ec-color-border),var(--ec-color-surface-subtle));background-size:200% 100%;animation:ec-ui-skeleton 1.6s var(--ec-motion-easing) infinite}
.ec-design-system .ec-ui-skeleton__line--short{width:58%}
.ec-design-system .ec-ui-state{text-align:center;padding:var(--ec-space-5);border:1px dashed var(--ec-color-border);border-radius:var(--ec-radius-card);background:var(--ec-color-surface-subtle)}
.ec-design-system .ec-ui-state__icon{display:block;margin-bottom:var(--ec-space-2);font-size:var(--ec-text-display-size);line-height:var(--ec-text-display-line)}
.ec-design-system .ec-ui-state--error{border-color:var(--ec-color-error)}
@keyframes ec-ui-spin{to{transform:rotate(360deg)}}
@keyframes ec-ui-skeleton{to{background-position:-200% 0}}
@media(max-width:480px){
 .ec-design-system .ec-ui-section{padding:var(--ec-space-3)}
 .ec-design-system .ec-ui-button:not(.ec-ui-button--icon){width:100%}
 .ec-design-system .ec-ui-dialog{width:calc(100% - var(--ec-space-2));max-height:calc(100vh - var(--ec-space-2))}
 .ec-design-system .ec-ui-dialog__footer{flex-direction:column-reverse}
 .ec-design-system .ec-ui-dialog__footer .ec-ui-button{width:100%}
 .ec-design-system .ec-ui-control{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
 .ec-design-system .ec-ui-button,.ec-design-system .ec-ui-card--interactive,.ec-design-system .ec-ui-control,.ec-design-system .ec-ui-switch__control,.ec-design-system .ec-ui-switch__control::after{transition:none}
 .ec-design-system .ec-ui-button:active:not(:disabled){transform:none}
 .ec-design-system .ec-ui-spinner,.ec-design-system .ec-ui-button__spinner{animation-duration:1.6s}
 .ec-design-system .ec-ui-skeleton__line{animation:none;background:var(--ec-color-surface-subtle);border:1px solid var(--ec-color-border)}
}
.ec-design-system.ec-reduced-motion-active .ec-ui-button,.ec-design-system.ec-reduced-motion-active .ec-ui-card--interactive,.ec-design-system.ec-reduced-motion-active .ec-ui-control,.ec-design-system.ec-reduced-motion-active .ec-ui-switch__control,.ec-design-system.ec-reduced-motion-active .ec-ui-switch__control::after{transition:none}
.ec-design-system.ec-reduced-motion-active .ec-ui-spinner,.ec-design-system.ec-reduced-motion-active .ec-ui-button__spinner{animation-duration:1.6s}
.ec-design-system.ec-reduced-motion-active .ec-ui-skeleton__line{animation:none;background:var(--ec-color-surface-subtle);border:1px solid var(--ec-color-border)}