@layer legacy {
/* Direction Classes — visual harmony and icon alignment */
.direction-classes-v2{
  --dc-radius-page:22px;
  --dc-radius-card:18px;
  --dc-control-height:46px;
  gap:22px;
}

/* Keep every SVG on the same optical grid. Global app styles previously left
   several icons sitting on the text baseline or inheriting uneven margins. */
.direction-classes-v2 svg{
  display:block;
  flex:0 0 auto;
  width:20px;
  height:20px;
  margin:0;
  vertical-align:middle;
  transform:none;
  transform-origin:center;
}
.direction-classes-v2 :where(
  .dc-summary-icon,
  .dc-icon-button,
  .dc-search,
  .dc-class-list-meta,
  .dc-class-large-avatar,
  .dc-hero-metric>span,
  .dc-priority-icon,
  .dc-action-menu summary,
  .dc-subject-tile>span,
  .dc-compact-row>span,
  .dc-empty-detail>span,
  .dc-no-results>span
){line-height:0}
.direction-classes-v2 :where(
  .dc-summary-icon,
  .dc-icon-button,
  .dc-hero-metric>span,
  .dc-priority-icon,
  .dc-action-menu summary,
  .dc-subject-tile>span,
  .dc-compact-row>span,
  .dc-empty-detail>span,
  .dc-no-results>span
){display:inline-flex;align-items:center;justify-content:center}
.direction-classes-v2 :where(button,summary){font:inherit;line-height:1}
.direction-classes-v2 :where(button,summary)>svg{align-self:center}
.direction-classes-v2 :where(button,summary)>span{line-height:1.1}

/* Header actions */
.dc-page-header{align-items:flex-end;gap:32px}
.dc-header-actions{align-items:center;gap:10px}
.direction-classes-v2 .dc-header-actions button{
  height:var(--dc-control-height);
  min-height:var(--dc-control-height);
  padding:0 18px;
  border:1px solid var(--dc-line);
  border-radius:14px;
  box-shadow:none;
  white-space:nowrap;
}
.direction-classes-v2 .dc-report-button{
  color:var(--dc-text);
  background:var(--dc-bg);
}
.direction-classes-v2 .dc-report-button:hover{background:var(--dc-soft)}
.direction-classes-v2 .dc-create-button{padding-inline:20px;box-shadow:0 10px 28px rgba(49,94,232,.22)}
.direction-classes-v2 .dc-header-actions svg{width:19px;height:19px}

/* Summary cards */
.dc-summary-grid{gap:14px}
.dc-summary-card{
  min-height:112px;
  padding:18px 20px;
  grid-template-columns:46px minmax(0,1fr);
  gap:14px;
  border-radius:var(--dc-radius-card);
  box-shadow:0 12px 32px rgba(25,40,75,.08);
}
.dc-summary-card:after{left:20px;right:20px;height:2px}
.dc-summary-icon{width:46px;height:46px;border-radius:14px}
.dc-summary-icon svg{width:21px;height:21px}
.dc-summary-card>div{display:flex;min-height:58px;flex-direction:column;justify-content:center}
.dc-summary-card strong{font-size:24px;line-height:1}
.dc-summary-card span:not(.dc-summary-icon){margin-top:6px;line-height:1.15}
.dc-summary-card small{margin-top:4px;line-height:1.2}

/* Main split workspace */
.dc-workspace{gap:16px}
.dc-navigator,.dc-detail{border-radius:var(--dc-radius-page);box-shadow:0 16px 48px rgba(25,40,75,.10)}
.dc-navigator{padding:16px}
.dc-navigator-head{min-height:46px;padding:0 2px 12px}
.dc-icon-button{width:42px;height:42px;border-radius:13px}
.dc-icon-button svg{width:19px;height:19px}
.dc-search{min-height:46px;padding:0 14px;border-radius:14px;grid-template-columns:20px minmax(0,1fr)}
.dc-search svg{width:19px;height:19px}
.dc-search input{height:44px;line-height:44px}
.dc-filter-tabs{margin:12px 0 10px;padding:4px;border-radius:13px}
.dc-filter-tabs button{min-height:38px;border-radius:10px}
.dc-class-list{gap:7px}
.dc-class-list-item{min-height:76px;padding:12px;border-radius:16px}
.dc-class-list-item.is-selected{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dc-accent) 24%,transparent)}
.dc-class-list-meta svg{width:14px;height:14px;margin-left:3px}

/* Selected class header */
.dc-detail{padding:20px}
.dc-class-hero{align-items:center;gap:20px;padding:4px 2px 20px}
.dc-class-identity{align-items:center}
.dc-class-large-avatar{width:60px;height:60px;border-radius:18px}
.dc-class-title-line{align-items:center;gap:10px}
.dc-class-title-line h2{line-height:1}
.dc-hero-actions{align-items:center;gap:10px}
.direction-classes-v2 .dc-hero-actions>button{
  min-height:44px;
  padding:0 16px;
  border:1px solid var(--dc-line);
  border-radius:13px;
  color:var(--dc-text);
  background:var(--dc-bg);
}
.direction-classes-v2 .dc-hero-actions>button:hover{background:var(--dc-soft)}
.dc-action-menu summary{width:44px;height:44px;border-radius:13px}
.dc-action-menu summary svg{width:20px;height:20px}

/* Metrics and tabs */
.dc-hero-metrics{gap:10px}
.dc-hero-metric{min-height:76px;padding:12px 14px;border-radius:15px;grid-template-columns:40px minmax(0,1fr);gap:11px}
.dc-hero-metric>span{width:40px;height:40px;border-radius:12px}
.dc-hero-metric>span svg{width:20px;height:20px}
.dc-hero-metric strong{font-size:18px;line-height:1}
.dc-hero-metric small{margin-top:5px;line-height:1.15}
.dc-detail-tabs{gap:6px;padding:7px 0;border-top:1px solid var(--dc-line);border-bottom:1px solid var(--dc-line)}
.dc-detail-tabs button{min-height:42px;padding:0 16px;border-radius:11px}
.dc-detail-tabs button.is-active{box-shadow:inset 0 0 0 1px var(--dc-line)}
.dc-tab-content{padding-top:18px}

/* Content panels */
.dc-overview-grid{gap:14px}
.dc-panel{padding:20px;border-radius:var(--dc-radius-card);background:color-mix(in srgb,var(--dc-soft) 78%,transparent)}
.dc-panel-head{align-items:center}
.dc-panel-head h3{margin-top:5px;line-height:1.2}
.dc-priority-panel,.dc-learning-health{min-height:260px}
.dc-priority-icon{width:48px;height:48px;border-radius:14px}
.dc-priority-icon svg{width:22px;height:22px}
.dc-priority-panel p{margin:16px 0 20px;line-height:1.6}
.dc-priority-actions{align-items:center;gap:10px}
.dc-priority-actions button{min-height:44px;padding:0 16px;border-radius:12px}
.dc-health-score{line-height:1}
.dc-health-bars{gap:13px;margin-top:18px}
.dc-health-row>div:first-child{align-items:center;margin-bottom:7px}
.dc-health-track{height:8px}

/* Optical corrections for icons whose paths are intentionally asymmetric. */
.dc-summary-card:nth-child(2) .dc-summary-icon svg{transform:translateX(-.4px)}
.dc-summary-card:nth-child(3) .dc-summary-icon svg,
.dc-report-button svg{transform:translateY(.5px)}
.dc-summary-card:nth-child(4) .dc-summary-icon svg{transform:translateY(-.25px)}
.dc-hero-metric:nth-child(2)>span svg{transform:translateY(.5px)}
.dc-class-list-meta svg{transform:translateX(.5px)}

body[data-theme="light"] .dc-summary-card,
body[data-theme="light"] .dc-navigator,
body[data-theme="light"] .dc-detail{box-shadow:0 14px 38px rgba(31,51,92,.08)}
body[data-theme="light"] .dc-panel{background:rgba(247,249,253,.86)}
body[data-theme="light"] .dc-priority-panel.is-ok{background:rgba(232,247,242,.92)}
body[data-theme="light"] .dc-priority-panel.is-warn{background:rgba(255,247,230,.94)}

@media(max-width:1180px){
  .dc-summary-card{min-height:104px}
  .dc-detail{padding:17px}
}
@media(max-width:880px){
  .dc-page-header{align-items:flex-start}
  .dc-header-actions{align-self:stretch}
}
@media(max-width:640px){
  .direction-classes-v2{gap:16px}
  .dc-page-header{gap:18px}
  .direction-classes-v2 .dc-header-actions button{height:46px;min-height:46px;padding-inline:14px}
  .dc-summary-card{min-height:94px;padding:14px;grid-template-columns:40px minmax(0,1fr);gap:10px}
  .dc-summary-icon{width:40px;height:40px;border-radius:12px}
  .dc-summary-icon svg{width:19px;height:19px}
  .dc-summary-card strong{font-size:20px}
  .dc-detail{padding:13px}
  .dc-class-hero{gap:14px}
  .dc-hero-metric{min-height:68px;padding:10px;grid-template-columns:36px minmax(0,1fr)}
  .dc-hero-metric>span{width:36px;height:36px}
  .dc-panel{padding:15px}
  .dc-priority-panel,.dc-learning-health{min-height:0}
}
}