/* ============================================================
   USTAR ACADEMY — FOUNDATIONS + COMPONENTS
   Maps 1:1 to theme_ustar/scss/components/*
   ============================================================ */
/* ---- VISIBILITY CONTRACT (audit RC): the hidden attribute ALWAYS wins.
   Overlays (.u-scrim/.u-modal/.u-sheet/.u-drawer/.u-popover) set display in
   component rules; without this, hidden scrim blocked all pointer events. ---- */
[hidden]{display:none !important}


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--u-canvas);background-attachment:fixed;
  color:var(--u-text-primary);font-family:var(--u-font-ui);
  font-size:var(--u-fs-body);line-height:var(--u-lh-base);
  font-weight:var(--u-fw-regular);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  min-height:100vh;
}
img,svg{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--u-text-link);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
::selection{background:var(--u-brand);color:var(--u-brand-on)}

:focus{outline:none}
:focus-visible{box-shadow:var(--u-focus-ring);border-radius:var(--u-r-xs);outline:none}

/* ---------- TYPOGRAPHY ---------- */
.u-display{font-family:var(--u-font-disp);font-size:var(--u-fs-display);line-height:var(--u-lh-tight);font-weight:var(--u-fw-strong);letter-spacing:-.02em;margin:0}
.u-h1{font-family:var(--u-font-disp);font-size:var(--u-fs-h1);line-height:1.16;font-weight:var(--u-fw-strong);letter-spacing:-.015em;margin:0}
.u-h2{font-size:var(--u-fs-h2);line-height:1.24;font-weight:var(--u-fw-semi);letter-spacing:-.01em;margin:0}
.u-h3{font-size:var(--u-fs-h3);line-height:1.32;font-weight:var(--u-fw-semi);margin:0}
.u-title{font-size:var(--u-fs-title);line-height:1.4;font-weight:var(--u-fw-semi);margin:0}
.u-body{font-size:var(--u-fs-body);line-height:var(--u-lh-base);max-width:var(--u-measure);margin:0}
.u-body-lg{font-size:var(--u-fs-body-lg);line-height:1.62;max-width:var(--u-measure-lg);margin:0}
.u-small{font-size:var(--u-fs-small);line-height:1.5;margin:0}
.u-caption{font-size:var(--u-fs-caption);line-height:1.45;font-weight:480;color:var(--u-text-secondary);margin:0}
.u-label{font-size:var(--u-fs-label);line-height:1.2;font-weight:var(--u-fw-semi);letter-spacing:.02em}
.u-eyebrow{font-size:var(--u-fs-eyebrow);line-height:1;font-weight:var(--u-fw-bold);letter-spacing:.14em;text-transform:uppercase;color:var(--u-text-secondary);margin:0}
.u-data{font-size:var(--u-fs-body);font-weight:var(--u-fw-medium);font-variant-numeric:tabular-nums}
.u-numeric{font-family:var(--u-font-disp);font-size:var(--u-fs-numeric);line-height:1;font-weight:var(--u-fw-strong);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.u-code{font-family:var(--u-font-mono);font-size:var(--u-fs-small)}
.t-sec{color:var(--u-text-secondary)}
.t-mut{color:var(--u-text-muted)}
.t-brand{color:var(--u-text-brand)}

/* ---------- GLASS (closed list: topbar, rail, bottomnav, overlay, sheet, toast) ---------- */
.u-glass{
  position:relative;
  background:var(--u-surface-glass);
  backdrop-filter:blur(var(--u-glass-blur)) saturate(var(--u-glass-saturate));
  -webkit-backdrop-filter:blur(var(--u-glass-blur)) saturate(var(--u-glass-saturate));
  border:1px solid var(--u-border-glass);
  box-shadow:var(--u-glass-shadow);
}
.u-glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:var(--u-glass-hilite);opacity:.7;
}
.u-glass-strong{background:var(--u-surface-glass-strong)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .u-glass,.u-glass-strong{background:var(--u-surface-raised)}
}

/* ---------- LAYOUT SHELL ---------- */
.u-app{min-height:100vh;display:flex;flex-direction:column}

.u-topbar{
  position:sticky;top:0;z-index:var(--u-z-topbar);
  height:var(--u-topbar-h);display:flex;align-items:center;gap:var(--u-s-4);
  padding:0 var(--u-s-5);border-width:0 0 1px 0;border-radius:0;
  transition:background var(--u-dur-standard) var(--u-ease-out);
}
.u-topbar__brand{display:flex;align-items:center;gap:var(--u-s-3);flex-shrink:0}
.u-topbar__brand img{height:22px;width:auto}
.u-topbar__sub{font-size:var(--u-fs-caption);color:var(--u-text-secondary);
  padding-left:var(--u-s-3);border-left:1px solid var(--u-border);white-space:nowrap}
.u-topbar__spacer{flex:1}
.u-topbar__actions{display:flex;align-items:center;gap:var(--u-s-2)}

.u-body-wrap{flex:1;display:flex;align-items:flex-start}

.u-rail{
  position:sticky;top:var(--u-topbar-h);flex-shrink:0;
  width:var(--u-rail-w);height:calc(100vh - var(--u-topbar-h));
  padding:var(--u-s-4) var(--u-s-3);z-index:var(--u-z-rail);
  border-width:0 1px 0 0;border-radius:0;
  display:flex;flex-direction:column;gap:var(--u-s-1);
  overflow-y:auto;
}
.u-rail__group{margin-top:var(--u-s-5)}
.u-rail__group:first-child{margin-top:0}
.u-rail__grouplabel{padding:0 var(--u-s-3) var(--u-s-2)}

.u-navitem{
  position:relative;display:flex;align-items:center;gap:var(--u-s-3);
  min-height:42px;padding:0 var(--u-s-3);border-radius:var(--u-r-sm);
  color:var(--u-text-secondary);font-size:var(--u-fs-title);
  font-weight:var(--u-fw-medium);text-decoration:none;
  transition:background var(--u-dur-fast) var(--u-ease-out),color var(--u-dur-fast) var(--u-ease-out);
  cursor:pointer;border:0;background:transparent;width:100%;text-align:left;
}
.u-navitem:hover{background:var(--u-surface-muted);color:var(--u-text-primary);text-decoration:none}
.u-navitem[aria-current="page"]{background:var(--u-surface-muted);color:var(--u-text-primary);font-weight:var(--u-fw-semi)}
.u-navitem[aria-current="page"]::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:0 2px 2px 0;background:var(--u-brand);
}
.u-navitem__icon{width:20px;height:20px;flex-shrink:0;opacity:.85}
.u-navitem__count{margin-left:auto;font-size:var(--u-fs-caption);font-weight:var(--u-fw-semi);
  font-variant-numeric:tabular-nums;color:var(--u-text-muted)}

.u-main{flex:1;min-width:0;padding:var(--u-s-6) var(--u-s-6) var(--u-s-16)}
.u-container{max-width:var(--u-container);margin:0 auto}
.u-container--wide{max-width:var(--u-container-hr)}

/* ---------- BOTTOM NAV (mobile) ---------- */
.u-bottomnav{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:var(--u-z-topbar);
  height:calc(var(--u-bottomnav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  border-width:1px 0 0 0;border-radius:0;
}
.u-bottomnav__inner{display:grid;grid-template-columns:repeat(4,1fr);height:var(--u-bottomnav-h)}
.u-bottomnav a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:10px;font-weight:var(--u-fw-semi);color:var(--u-text-muted);
  text-decoration:none;position:relative;
}
.u-bottomnav a[aria-current="page"]{color:var(--u-text-primary)}
.u-bottomnav a[aria-current="page"]::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:3px;border-radius:0 0 2px 2px;background:var(--u-brand);
}
.u-bottomnav svg{width:22px;height:22px}

/* ---------- BUTTON ---------- */
.u-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--u-s-2);
  min-height:var(--u-btn-h);padding:0 var(--u-btn-px);
  border-radius:var(--u-r-sm);border:1px solid transparent;
  font-size:var(--u-fs-title);font-weight:var(--u-fw-semi);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background var(--u-dur-fast) var(--u-ease-out),
             border-color var(--u-dur-fast) var(--u-ease-out),
             color var(--u-dur-fast) var(--u-ease-out),
             transform var(--u-dur-fast) var(--u-ease-out);
}
.u-btn:hover{text-decoration:none}
.u-btn:active{transform:translateY(1px)}
.u-btn:disabled,.u-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.u-btn svg{width:18px;height:18px;flex-shrink:0}

.u-btn--brand{background:var(--u-brand);color:var(--u-brand-on);border-color:var(--u-brand-600)}
.u-btn--brand:hover{background:var(--u-brand-hover)}
.u-btn--primary{background:var(--u-text-primary);color:var(--u-text-inverse);border-color:var(--u-text-primary)}
.u-btn--primary:hover{background:var(--u-ink-700)}
[data-theme="dark"] .u-btn--primary:hover{background:var(--u-white)}
.u-btn--quiet{background:var(--u-surface);color:var(--u-text-primary);border-color:var(--u-border-strong)}
.u-btn--quiet:hover{background:var(--u-surface-muted);border-color:var(--u-ink-400)}
.u-btn--ghost{background:transparent;color:var(--u-text-secondary)}
.u-btn--ghost:hover{background:var(--u-surface-muted);color:var(--u-text-primary)}
.u-btn--danger{background:var(--u-danger-bg);color:var(--u-danger-fg);border-color:transparent}
.u-btn--sm{min-height:var(--u-btn-h-sm);padding:0 var(--u-s-3);font-size:var(--u-fs-small)}
.u-btn--block{width:100%}

.u-iconbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--u-btn-h);height:var(--u-btn-h);flex-shrink:0;
  border-radius:var(--u-r-sm);border:1px solid transparent;background:transparent;
  color:var(--u-text-secondary);cursor:pointer;
  transition:background var(--u-dur-fast) var(--u-ease-out),color var(--u-dur-fast) var(--u-ease-out);
}
.u-iconbtn:hover{background:var(--u-surface-muted);color:var(--u-text-primary)}
.u-iconbtn svg{width:20px;height:20px}

/* ---------- CARD (paper — never glass) ---------- */
.u-card{
  background:var(--u-surface);border:1px solid var(--u-border);
  border-radius:var(--u-r-md);padding:var(--u-card-p);
}
.u-card--flush{padding:0;overflow:hidden}
.u-card--muted{background:var(--u-surface-muted)}
.u-card--interactive{
  cursor:pointer;text-decoration:none;color:inherit;display:block;
  transition:border-color var(--u-dur-fast) var(--u-ease-out),
             box-shadow var(--u-dur-fast) var(--u-ease-out),
             transform var(--u-dur-fast) var(--u-ease-out);
}
.u-card--interactive:hover{border-color:var(--u-border-strong);box-shadow:var(--u-e-1);transform:translateY(-1px);text-decoration:none}
.u-card__head{display:flex;align-items:flex-start;gap:var(--u-s-3);margin-bottom:var(--u-s-4)}
.u-card__head .u-h3{flex:1;min-width:0}

.u-section{margin-bottom:var(--u-s-8)}
.u-section__head{display:flex;align-items:baseline;gap:var(--u-s-3);margin-bottom:var(--u-s-4)}
.u-section__head .u-h2{flex:1;min-width:0}

/* ---------- STACK / GRID ---------- */
.u-stack{display:flex;flex-direction:column}
.u-stack>*+*{margin-top:var(--gap,var(--u-s-4))}
.u-row{display:flex;align-items:center;gap:var(--u-s-3);flex-wrap:wrap}
.u-row--tight{gap:var(--u-s-2)}
.u-row--between{justify-content:space-between}
.u-grid{display:grid;gap:var(--u-s-4)}
.u-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.u-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.u-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.u-grid--main{grid-template-columns:minmax(0,1fr) 320px;gap:var(--u-s-6)}

/* ---------- BADGE / TAG / STATUS ---------- */
.u-badge{
  display:inline-flex;align-items:center;gap:5px;
  height:22px;padding:0 8px;border-radius:var(--u-r-xs);
  font-size:var(--u-fs-eyebrow);font-weight:var(--u-fw-semi);
  letter-spacing:.01em;white-space:nowrap;
  background:var(--u-surface-muted);color:var(--u-text-secondary);
  border:1px solid var(--u-border-subtle);
}
.u-badge svg{width:12px;height:12px}
.u-badge--success{background:var(--u-success-bg);color:var(--u-success-fg);border-color:transparent}
.u-badge--warning{background:var(--u-warning-bg);color:var(--u-warning-fg);border-color:transparent}
.u-badge--danger{background:var(--u-danger-bg);color:var(--u-danger-fg);border-color:transparent}
.u-badge--info{background:var(--u-info-bg);color:var(--u-info-fg);border-color:transparent}
.u-badge--gap{background:var(--u-gap-bg);color:var(--u-gap-fg);border-color:transparent}
.u-badge--brand{background:var(--u-brand-soft);color:var(--u-text-brand);border-color:transparent}

.u-dot{width:7px;height:7px;border-radius:var(--u-r-full);flex-shrink:0;display:inline-block}
.u-dot--success{background:var(--u-state-completed)}
.u-dot--danger{background:var(--u-state-overdue)}
.u-dot--warning{background:var(--u-warning-fg)}
.u-dot--gap{background:var(--u-state-gap)}
.u-dot--brand{background:var(--u-brand)}

/* ---------- PROGRESS ---------- */
.u-progress{height:6px;border-radius:var(--u-r-full);background:var(--u-progress-track);overflow:hidden}
.u-progress__fill{height:100%;border-radius:inherit;background:var(--u-progress-fill);
  transition:width var(--u-dur-slow) var(--u-ease-out)}
.u-progress--thin{height:4px}
.u-progress--success .u-progress__fill{background:var(--u-state-completed)}

.u-ring{--v:0;--sz:52px;width:var(--sz);height:var(--sz);flex-shrink:0;position:relative;
  border-radius:var(--u-r-full);
  background:conic-gradient(var(--u-brand) calc(var(--v)*1%),var(--u-progress-track) 0)}
.u-ring::after{content:"";position:absolute;inset:5px;border-radius:inherit;background:var(--u-surface)}
.u-ring__val{position:absolute;inset:0;display:grid;place-items:center;z-index:1;
  font-size:var(--u-fs-caption);font-weight:var(--u-fw-strong);font-variant-numeric:tabular-nums}
.u-ring--lg{--sz:96px}
.u-ring--lg .u-ring__val{font-size:var(--u-fs-h3)}

/* ---------- LEARNING PATH (core USTAR component) ---------- */
.u-path{position:relative;list-style:none;margin:0;padding:0}
.u-path__item{position:relative;display:flex;gap:var(--u-s-4);padding:var(--u-s-3) 0;
  min-height:calc(var(--u-step-h) * var(--u-density))}
.u-path__rail{position:relative;width:var(--u-step-dot);flex-shrink:0;display:flex;justify-content:center}
.u-path__rail::before{content:"";position:absolute;top:calc(var(--u-step-dot) + 4px);bottom:-16px;
  width:var(--u-step-line-w);background:var(--u-border);left:50%;transform:translateX(-50%)}
.u-path__item:last-child .u-path__rail::before{display:none}
.u-path__item--done .u-path__rail::before{background:var(--u-state-completed);opacity:.45}

.u-path__dot{
  width:var(--u-step-dot);height:var(--u-step-dot);border-radius:var(--u-r-full);
  display:grid;place-items:center;flex-shrink:0;z-index:1;
  background:var(--u-surface);border:2px solid var(--u-border-strong);
  font-size:10px;font-weight:var(--u-fw-bold);color:var(--u-text-muted);
}
.u-path__dot svg{width:12px;height:12px}
.u-path__item--done .u-path__dot{background:var(--u-state-completed);border-color:var(--u-state-completed);color:#fff}
.u-path__item--current .u-path__dot{
  background:var(--u-brand);border-color:var(--u-brand);color:var(--u-brand-on);
  box-shadow:0 0 0 4px var(--u-brand-soft);
}
.u-path__item--locked .u-path__dot{background:var(--u-surface-muted);border-color:var(--u-border);color:var(--u-state-locked)}
.u-path__item--gap .u-path__dot{background:var(--u-gap-bg);border-color:var(--u-state-gap);color:var(--u-state-gap)}

.u-path__body{flex:1;min-width:0;padding-bottom:var(--u-s-2)}
.u-path__title{font-size:var(--u-fs-title);font-weight:var(--u-fw-semi);margin:0 0 3px}
.u-path__item--done .u-path__title{color:var(--u-text-secondary)}
.u-path__item--locked .u-path__title{color:var(--u-state-locked)}
.u-path__meta{display:flex;align-items:center;gap:var(--u-s-2);flex-wrap:wrap;
  font-size:var(--u-fs-caption);color:var(--u-text-secondary)}
.u-path__action{margin-top:var(--u-s-3)}
.u-path__item--current .u-path__body{
  background:var(--u-brand-soft);margin:calc(var(--u-s-2) * -1) calc(var(--u-s-3) * -1);
  padding:var(--u-s-3);border-radius:var(--u-r-md);
}

/* ---------- ACTIVITY ROW ---------- */
.u-actrow{display:flex;align-items:center;gap:var(--u-s-3);padding:var(--u-s-3) var(--u-s-4);
  border-bottom:1px solid var(--u-border-subtle);text-decoration:none;color:inherit;
  transition:background var(--u-dur-fast) var(--u-ease-out)}
.u-actrow:last-child{border-bottom:0}
.u-actrow:hover{background:var(--u-surface-muted);text-decoration:none}

/* ---------- INPUT ---------- */
.u-field{display:block}
.u-field__label{display:block;margin-bottom:6px;font-size:var(--u-fs-label);
  font-weight:var(--u-fw-semi);color:var(--u-text-secondary)}
.u-input,.u-select,.u-textarea{
  width:100%;min-height:var(--u-input-h);padding:10px 12px;
  background:var(--u-surface);color:var(--u-text-primary);
  border:1px solid var(--u-border-strong);border-radius:var(--u-r-sm);
  transition:border-color var(--u-dur-fast) var(--u-ease-out),box-shadow var(--u-dur-fast) var(--u-ease-out);
}
.u-textarea{min-height:96px;resize:vertical;line-height:var(--u-lh-base)}
.u-input::placeholder,.u-textarea::placeholder{color:var(--u-text-muted)}
.u-input:focus-visible,.u-select:focus-visible,.u-textarea:focus-visible{
  border-color:var(--u-border-focus);box-shadow:var(--u-focus-ring)}
.u-field__hint{margin-top:5px;font-size:var(--u-fs-caption);color:var(--u-text-secondary)}
.u-field__err{margin-top:5px;font-size:var(--u-fs-caption);color:var(--u-danger-fg);font-weight:var(--u-fw-medium)}
.u-input[aria-invalid="true"]{border-color:var(--u-danger-fg)}

.u-search{position:relative;display:flex;align-items:center}
.u-search svg{position:absolute;left:12px;width:18px;height:18px;color:var(--u-text-muted);pointer-events:none}
.u-search .u-input{padding-left:38px}

/* ---------- SEGMENTED / TABS ---------- */
.u-seg{display:inline-flex;padding:3px;gap:2px;background:var(--u-surface-muted);
  border:1px solid var(--u-border-subtle);border-radius:var(--u-r-sm)}
.u-seg button{
  min-height:32px;padding:0 12px;border:0;border-radius:6px;background:transparent;
  font-size:var(--u-fs-small);font-weight:var(--u-fw-semi);color:var(--u-text-secondary);cursor:pointer;
  transition:background var(--u-dur-fast) var(--u-ease-out),color var(--u-dur-fast) var(--u-ease-out);
}
.u-seg button:hover{color:var(--u-text-primary)}
.u-seg button[aria-selected="true"]{background:var(--u-surface);color:var(--u-text-primary);box-shadow:var(--u-e-1)}

.u-tabs{display:flex;gap:var(--u-s-5);border-bottom:1px solid var(--u-border);margin-bottom:var(--u-s-5)}
.u-tabs button{
  position:relative;padding:0 0 10px;border:0;background:transparent;cursor:pointer;
  font-size:var(--u-fs-title);font-weight:var(--u-fw-medium);color:var(--u-text-secondary);
}
.u-tabs button:hover{color:var(--u-text-primary)}
.u-tabs button[aria-selected="true"]{color:var(--u-text-primary);font-weight:var(--u-fw-semi)}
.u-tabs button[aria-selected="true"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--u-text-primary)}

/* ---------- TABLE ---------- */
.u-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--u-fs-small)}
.u-table th{
  text-align:left;padding:10px var(--u-s-4);font-size:var(--u-fs-label);
  font-weight:var(--u-fw-semi);color:var(--u-text-secondary);
  border-bottom:1px solid var(--u-border);white-space:nowrap;
  position:sticky;top:0;background:var(--u-surface);z-index:1;
}
.u-table td{padding:calc(11px * var(--u-density) + 3px) var(--u-s-4);
  border-bottom:1px solid var(--u-border-subtle);vertical-align:middle}
.u-table tbody tr:hover{background:var(--u-surface-muted)}
.u-table tbody tr:last-child td{border-bottom:0}
.u-table .num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- AVATAR / PERSON ---------- */
.u-avatar{
  width:36px;height:36px;border-radius:var(--u-r-full);flex-shrink:0;
  display:grid;place-items:center;background:var(--u-surface-muted);
  color:var(--u-text-secondary);font-size:var(--u-fs-caption);
  font-weight:var(--u-fw-semi);overflow:hidden;border:1px solid var(--u-border-subtle);
}
.u-avatar--sm{width:28px;height:28px;font-size:10px}
.u-avatar--lg{width:56px;height:56px;font-size:var(--u-fs-title)}
.u-person{display:flex;align-items:center;gap:var(--u-s-3);min-width:0}
.u-person__name{font-size:var(--u-fs-title);font-weight:var(--u-fw-semi);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-person__meta{font-size:var(--u-fs-caption);color:var(--u-text-secondary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- STAT ---------- */
.u-stat{display:flex;flex-direction:column;gap:3px}
.u-stat__val{font-family:var(--u-font-disp);font-size:var(--u-fs-numeric);line-height:1;
  font-weight:var(--u-fw-strong);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.u-stat__label{font-size:var(--u-fs-caption);color:var(--u-text-secondary)}
.u-stat__sub{font-size:var(--u-fs-caption);color:var(--u-text-muted)}

/* ---------- ALERT / INLINE FEEDBACK ---------- */
.u-alert{display:flex;gap:var(--u-s-3);padding:var(--u-s-4);border-radius:var(--u-r-md);
  background:var(--u-surface);border:1px solid var(--u-border);border-left:3px solid var(--u-text-muted)}
.u-alert svg{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.u-alert__body{flex:1;min-width:0}
.u-alert__title{font-size:var(--u-fs-title);font-weight:var(--u-fw-semi);margin:0 0 2px}
.u-alert__text{font-size:var(--u-fs-small);color:var(--u-text-secondary);margin:0}
.u-alert--danger{border-left-color:var(--u-danger-fg)}
.u-alert--danger svg{color:var(--u-danger-fg)}
.u-alert--warning{border-left-color:var(--u-warning-fg)}
.u-alert--warning svg{color:var(--u-warning-fg)}
.u-alert--success{border-left-color:var(--u-state-completed)}
.u-alert--success svg{color:var(--u-state-completed)}
.u-alert--gap{border-left-color:var(--u-state-gap)}
.u-alert--gap svg{color:var(--u-state-gap)}
.u-alert--info{border-left-color:var(--u-info-fg)}
.u-alert--info svg{color:var(--u-info-fg)}

/* ---------- EMPTY STATE ---------- */
.u-empty{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:var(--u-s-12) var(--u-s-5);max-width:420px;margin:0 auto;gap:var(--u-s-3)}
.u-empty svg{width:44px;height:44px;color:var(--u-ink-300);margin-bottom:var(--u-s-1)}
.u-empty img{width:88px;height:88px;object-fit:contain;opacity:.9}

/* ---------- SKELETON ---------- */
.u-skel{border-radius:var(--u-r-sm);
  background:linear-gradient(90deg,var(--u-skeleton-a) 25%,var(--u-skeleton-b) 37%,var(--u-skeleton-a) 63%);
  background-size:400% 100%;animation:u-shimmer 1.4s ease infinite}
@keyframes u-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.u-skel--text{height:12px;margin:6px 0}
.u-skel--title{height:20px;width:60%}
.u-skel--card{height:112px}

/* ---------- OVERLAY / SEARCH ---------- */
.u-scrim{position:fixed;inset:0;z-index:var(--u-z-overlay);
  background:rgba(27,26,25,.32);backdrop-filter:blur(2px);
  display:flex;align-items:flex-start;justify-content:center;padding:10vh var(--u-s-4) var(--u-s-4);
  animation:u-fade var(--u-dur-standard) var(--u-ease-out)}
[data-theme="dark"] .u-scrim{background:rgba(0,0,0,.55)}
.u-overlay{
  width:100%;max-width:640px;border-radius:var(--u-r-xl);overflow:hidden;
  animation:u-rise var(--u-dur-standard) var(--u-ease-out);
}
.u-overlay__input{display:flex;align-items:center;gap:var(--u-s-3);
  padding:var(--u-s-4) var(--u-s-5);border-bottom:1px solid var(--u-border-glass)}
.u-overlay__input input{flex:1;border:0;background:transparent;font-size:var(--u-fs-h3);
  font-weight:var(--u-fw-medium);outline:none}
.u-overlay__results{max-height:52vh;overflow-y:auto;padding:var(--u-s-2)}
.u-overlay__group{padding:var(--u-s-3) var(--u-s-3) var(--u-s-1)}
.u-overlay__item{display:flex;align-items:center;gap:var(--u-s-3);padding:10px var(--u-s-3);
  border-radius:var(--u-r-sm);cursor:pointer;text-decoration:none;color:inherit}
.u-overlay__item:hover,.u-overlay__item[data-active="true"]{background:var(--u-surface-muted);text-decoration:none}
.u-overlay__foot{display:flex;gap:var(--u-s-4);padding:10px var(--u-s-5);
  border-top:1px solid var(--u-border-glass);font-size:var(--u-fs-caption);color:var(--u-text-secondary)}
mark{background:var(--u-brand-soft);color:inherit;border-radius:3px;padding:0 2px}
kbd{font-family:var(--u-font-mono);font-size:10px;padding:2px 5px;border-radius:4px;
  background:var(--u-surface-muted);border:1px solid var(--u-border);color:var(--u-text-secondary)}

/* ---------- SHEET (mobile) ---------- */
.u-sheet{position:fixed;left:0;right:0;bottom:0;z-index:var(--u-z-drawer);
  border-radius:var(--u-r-xl) var(--u-r-xl) 0 0;border-width:1px 0 0 0;
  padding:var(--u-s-3) var(--u-s-5) calc(var(--u-s-5) + env(safe-area-inset-bottom));
  animation:u-sheet-up var(--u-dur-slow) var(--u-ease-out);max-height:82vh;overflow-y:auto}
.u-sheet__grab{width:36px;height:4px;border-radius:2px;background:var(--u-border-strong);
  margin:0 auto var(--u-s-4)}

/* ---------- TOAST ---------- */
.u-toasts{position:fixed;bottom:var(--u-s-5);right:var(--u-s-5);z-index:var(--u-z-toast);
  display:flex;flex-direction:column;gap:var(--u-s-2);max-width:360px}
.u-toast{display:flex;align-items:center;gap:var(--u-s-3);padding:var(--u-s-3) var(--u-s-4);
  border-radius:var(--u-r-md);font-size:var(--u-fs-small);font-weight:var(--u-fw-medium);
  animation:u-toast-in var(--u-dur-standard) var(--u-ease-out)}
.u-toast svg{width:18px;height:18px;flex-shrink:0;color:var(--u-state-completed)}

/* ---------- MODAL ---------- */
.u-modal{background:var(--u-surface);border:1px solid var(--u-border);border-radius:var(--u-r-lg);
  box-shadow:var(--u-e-3);width:100%;max-width:520px;animation:u-rise var(--u-dur-standard) var(--u-ease-out)}
.u-modal__head{padding:var(--u-s-5) var(--u-s-5) 0}
.u-modal__body{padding:var(--u-s-4) var(--u-s-5)}
.u-modal__foot{display:flex;gap:var(--u-s-2);justify-content:flex-end;
  padding:var(--u-s-4) var(--u-s-5);border-top:1px solid var(--u-border-subtle)}

/* ---------- ACTIVITY SHELL ---------- */
.u-actshell{max-width:820px;margin:0 auto}
.u-actshell__bar{display:flex;align-items:center;gap:var(--u-s-3);
  padding-bottom:var(--u-s-3);border-bottom:1px solid var(--u-border);margin-bottom:var(--u-s-5)}
.u-actshell__dots{display:flex;gap:5px;margin-left:auto}
.u-actshell__dots i{width:7px;height:7px;border-radius:var(--u-r-full);background:var(--u-progress-track);display:block}
.u-actshell__dots i.done{background:var(--u-state-completed)}
.u-actshell__dots i.cur{background:var(--u-brand);box-shadow:0 0 0 3px var(--u-brand-soft)}
.u-actshell__content{padding:var(--u-s-2) 0 var(--u-s-8)}
.u-actshell__foot{display:flex;align-items:center;gap:var(--u-s-3);
  padding-top:var(--u-s-4);border-top:1px solid var(--u-border)}

/* ---------- ANIMATIONS ---------- */
@keyframes u-fade{from{opacity:0}to{opacity:1}}
@keyframes u-rise{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
@keyframes u-sheet-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes u-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes u-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.u-enter{animation:u-rise var(--u-dur-standard) var(--u-ease-out) both}
.u-pop{animation:u-pop var(--u-dur-slow) var(--u-ease-out) both}

/* ---------- UTIL ---------- */
.u-hide{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.u-skiplink{position:absolute;left:-9999px;top:0;z-index:var(--u-z-tooltip);
  background:var(--u-surface);padding:10px 16px;border-radius:0 0 var(--u-r-sm) 0;
  border:1px solid var(--u-border);font-weight:var(--u-fw-semi)}
.u-skiplink:focus{left:0}
.u-divider{height:1px;background:var(--u-border-subtle);margin:var(--u-s-5) 0;border:0}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1023px){
  .u-grid--main{grid-template-columns:minmax(0,1fr)}
  .u-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .u-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .u-rail{display:none}
  .u-bottomnav{display:block}
  .u-main{padding:var(--u-s-4) var(--u-s-4) calc(var(--u-bottomnav-h) + var(--u-s-12))}
  .u-grid--2,.u-grid--3,.u-grid--4{grid-template-columns:minmax(0,1fr)}
  .u-topbar{padding:0 var(--u-s-4)}
  .u-topbar__sub{display:none}
  .u-scrim{padding:0}
  .u-overlay{max-width:none;border-radius:0;min-height:100vh}
  .u-toasts{left:var(--u-s-4);right:var(--u-s-4);bottom:calc(var(--u-bottomnav-h) + var(--u-s-3));max-width:none}
  .u-card{padding:var(--u-s-4)}
  .u-table--stack thead{display:none}
  .u-table--stack tr{display:block;padding:var(--u-s-3) 0;border-bottom:1px solid var(--u-border-subtle)}
  .u-table--stack td{display:flex;justify-content:space-between;gap:var(--u-s-3);
    padding:3px 0;border:0}
  .u-table--stack td::before{content:attr(data-l);font-size:var(--u-fs-caption);
    color:var(--u-text-secondary);font-weight:var(--u-fw-semi)}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ---------- PRINT ---------- */
@media print{
  .u-topbar,.u-rail,.u-bottomnav,.u-toasts{display:none !important}
  body{background:#fff}
  .u-card{border:1px solid #ccc;break-inside:avoid}
}

/* ---- BRANDMARK (real brand asset, see assets/brand/BRAND_MANIFEST.md) ---- */
.u-brandmark{display:inline-flex;align-items:center;gap:var(--u-s-3);text-decoration:none;min-height:44px}
.u-brandmark__img{height:22px;width:auto;display:none}
[data-theme="light"] .u-brandmark__img--onlight{display:block}
[data-theme="dark"] .u-brandmark__img--ondark{display:block}
.u-brandmark__sep{width:1px;height:18px;background:var(--u-border-strong)}
.u-brandmark__product{font-family:var(--u-font-disp);font-weight:var(--u-fw-strong);
  letter-spacing:-.01em;color:var(--u-text-primary);font-size:var(--u-fs-title)}
.u-bnavitem{display:grid;place-items:center;font-size:11px;font-weight:600;text-decoration:none;
  color:var(--u-text-secondary);min-height:44px}
.u-bnavitem[aria-current="page"]{color:var(--u-text-primary)}

/* ---- PAGEHEAD (page title block: title, sub, aside action zone) ---- */
.u-pagehead__t{font-family:var(--u-font-disp);font-weight:var(--u-fw-strong);font-size:var(--u-fs-h1);
  line-height:var(--u-lh-tight);letter-spacing:-.01em;color:var(--u-text-primary);margin:0}
.u-pagehead__sub{color:var(--u-text-secondary);font-size:var(--u-fs-body);margin:var(--u-s-2) 0 0;max-width:64ch}
.u-pagehead__aside{margin-left:auto;display:flex;gap:var(--u-s-3);align-items:center}

/* ---- PANEL (grouped content surface: head/meta/body/foot) ---- */
.u-panel{background:var(--u-surface);border:1px solid var(--u-border);border-radius:var(--u-r-md);overflow:hidden}
.u-panel__head{display:flex;align-items:baseline;gap:var(--u-s-3);padding:var(--u-s-5) var(--u-s-6);
  border-bottom:1px solid var(--u-border)}
.u-panel__title{font-weight:var(--u-fw-strong);font-size:var(--u-fs-title);color:var(--u-text-primary);margin:0}
.u-panel__meta{margin-left:auto;color:var(--u-text-muted);font-size:var(--u-fs-small)}
.u-panel__body{padding:var(--u-s-5) var(--u-s-6)}
.u-panel__body--flush{padding:0}
.u-panel__foot{padding:var(--u-s-4) var(--u-s-6);border-top:1px solid var(--u-border);
  color:var(--u-text-secondary);font-size:var(--u-fs-small)}

/* ---- NUM (data typography for tabular figures) ---- */
.u-num{font-variant-numeric:tabular-nums;font-weight:var(--u-fw-strong);color:var(--u-text-primary)}

/* ---- SEARCH OVERLAY internals used by shell.js ---- */
.u-overlay__t{font-weight:var(--u-fw-strong);font-size:var(--u-fs-small);color:var(--u-text-secondary);
  margin:var(--u-s-4) 0 var(--u-s-2)}
.u-overlay__k{display:inline-block;min-width:20px;padding:1px 5px;border:1px solid var(--u-border-strong);
  border-radius:var(--u-r-xs);font:500 11px/1.5 var(--u-font-mono);color:var(--u-text-secondary);text-align:center}
.u-overlay__hint{color:var(--u-text-muted);font-size:var(--u-fs-caption);margin-top:var(--u-s-3)}

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

.u-icon{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;flex:none}