/* ==========================================================================
   Alignment Catalog — Design System (Linear Clinical)
   ========================================================================== */

:root {
  /* Neutrals */
  --ac-bg: #FAFAFA;
  --ac-surface: #FFFFFF;
  --ac-surface-raised: #FAFAFA;
  --ac-surface-muted: #FAFAFA;
  --ac-border: #E5E5E5;
  --ac-border-strong: #E5E5E5;
  --ac-text: #0A0A0A;
  --ac-text-secondary: #737373;
  --ac-muted: #737373;
  --ac-text-upcoming: #A3A3A3;
  --ac-row-hover: #F5F5F5;
  --ac-row-zebra: #FAFAFA;
  --ac-row-alt: #FAFAFA;
  --ac-header-bg: #F5F5F5;
  --ac-col-numeric-bg: #FAFAFA;
  --ac-placeholder: #A3A3A3;

  /* Accent (blue) — from Figma design system */
  --ac-primary: #2E9AFF;          /* blue/400 — primary buttons */
  --ac-primary-hover: #1E8BEF;
  --ac-primary-active: #1479DB;
  --ac-primary-subtle: #E6F3FF;   /* blue/50 */
  --ac-primary-border: #8AC6FF;   /* blue/200 */
  --ac-accent: #47A5FF;           /* blue/300 — active nav, headings */
  --ac-accent-glow: rgba(71, 165, 255, 0.55);

  /* App shell */
  --ac-page-bg: #F3FAFF;
  --ac-sidebar-width: 200px;
  --ac-sidebar-bg: #FFFFFF;
  --ac-sidebar-active-bg: #47A5FF;
  --ac-sidebar-active-text: #FFFFFF;

  /* Semantic */
  --ac-success: #166534;
  --ac-success-subtle: #F0FDF4;
  --ac-success-border: #BBF7D0;
  --ac-success-text: #166534;
  --ac-warning: #854D0E;
  --ac-warning-subtle: #FEFCE8;
  --ac-warning-border: #FEF08A;
  --ac-warning-text: #854D0E;
  --ac-danger: #991B1B;
  --ac-danger-subtle: #FEF2F2;
  --ac-danger-border: #FECACA;
  --ac-danger-text: #991B1B;
  --ac-info: #737373;
  --ac-info-subtle: #F5F5F5;
  --ac-info-text: #737373;

  /* Typography */
  --ac-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ac-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --ac-text-xs: 0.75rem;
  --ac-text-sm: 0.8125rem;
  --ac-text-base: 0.875rem;
  --ac-text-md: 0.875rem;
  --ac-text-lg: 0.9375rem;
  --ac-text-xl: 1.5rem;
  --ac-font-normal: 400;
  --ac-font-medium: 500;
  --ac-font-semibold: 600;

  /* Spacing (4px base) */
  --ac-space-1: 0.25rem;
  --ac-space-2: 0.5rem;
  --ac-space-3: 0.75rem;
  --ac-space-4: 1rem;
  --ac-space-5: 1.25rem;
  --ac-space-6: 1.5rem;
  --ac-space-7: 1.75rem;
  --ac-space-8: 2rem;
  --ac-space-9: 2.25rem;
  --ac-space-10: 2.5rem;
  --ac-space-11: 2.75rem;
  --ac-space-12: 3rem;

  /* Radius */
  --ac-radius-sm: 4px;
  --ac-radius-md: 8px;
  --ac-radius-lg: 8px;
  --ac-radius-full: 9999px;
  --ac-radius: var(--ac-radius-md);

  /* Shadows — none for Linear Clinical */
  --ac-shadow-sm: none;
  --ac-shadow-md: none;
  --ac-shadow-lg: none;
  --ac-shadow: none;

  /* Motion */
  --ac-duration-fast: 120ms;
  --ac-duration-tab: 150ms;
  --ac-duration-normal: 250ms;
  --ac-duration-slow: 400ms;
  --ac-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ac-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

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

  #ac-progress-fill {
    animation: none !important;
    width: 40% !important;
    margin-left: 0 !important;
  }
}

/* ==========================================================================
   Base layout (migrated from base.html)
   ========================================================================== */

body {
  font-family: var(--ac-font-sans);
  font-size: var(--ac-text-base);
  font-weight: var(--ac-font-normal);
  margin: 0;
  background: var(--ac-bg);
  color: var(--ac-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Skip link — visible on keyboard focus */
.skip-link {
  position: absolute;
  left: var(--ac-space-4);
  top: -100px;
  z-index: 200;
  padding: var(--ac-space-2) var(--ac-space-3);
  background: var(--ac-primary);
  color: #fff;
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-font-medium);
  text-decoration: none;
  border-radius: var(--ac-radius-sm);
  transition: top var(--ac-duration-fast) var(--ac-ease-out);
}

.skip-link:focus {
  top: var(--ac-space-4);
  outline: 2px solid var(--ac-text);
  outline-offset: 2px;
}

#main-content:focus {
  outline: none;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--ac-space-6);
}

/* ==========================================================================
   App shell — sidebar layout
   ========================================================================== */

body.has-sidebar {
  background: var(--ac-page-bg);
}

.app-shell {
  display: flex;
  min-height: 100vh;
}

.has-sidebar .app-main {
  background: var(--ac-page-bg);
}

.app-sidebar {
  position: sticky;
  top: 0;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  width: var(--ac-sidebar-width);
  min-width: var(--ac-sidebar-width);
  height: 100vh;
  padding: var(--ac-space-5) var(--ac-space-3);
  background: var(--ac-sidebar-bg);
  border-right: 1px solid var(--ac-border);
  box-sizing: border-box;
}

.app-sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--ac-space-2);
  padding: var(--ac-space-2) var(--ac-space-2) var(--ac-space-5);
  color: var(--ac-text);
  text-decoration: none;
  font-family: 'Istok Web', var(--ac-font-sans);
  font-weight: var(--ac-font-semibold);
  font-size: var(--ac-text-md);
  letter-spacing: -0.01em;
}

.app-sidebar-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--ac-radius-md);
  background: var(--ac-primary-subtle);
  color: var(--ac-primary);
  flex-shrink: 0;
}

.app-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.app-sidebar-footer {
  margin-top: auto;
  padding-top: var(--ac-space-3);
  border-top: 1px solid var(--ac-border);
}

.app-sidebar-user {
  padding: 8px var(--ac-space-3) 10px;
}

.app-sidebar-user-name {
  display: block;
  font-family: 'Istok Web', var(--ac-font-sans);
  font-size: var(--ac-text-sm, 0.875rem);
  font-weight: 600;
  color: var(--ac-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-nav-link {
  display: flex;
  align-items: center;
  gap: var(--ac-space-2);
  padding: 10px var(--ac-space-3);
  border-radius: 12px;
  color: var(--ac-text-secondary);
  text-decoration: none;
  font-family: 'Istok Web', var(--ac-font-sans);
  font-size: var(--ac-text-base);
  font-weight: var(--ac-font-normal);
  transition: background-color var(--ac-duration-fast) var(--ac-ease-out),
              color var(--ac-duration-fast) var(--ac-ease-out);
}

.app-nav-link > span:first-of-type,
.app-nav-link > span:not(.app-nav-badge) {
  flex: 1;
}

.app-nav-icon {
  flex-shrink: 0;
  color: currentColor;
}

.app-nav-chevron {
  flex-shrink: 0;
  color: currentColor;
  opacity: 0.7;
}

.app-nav-link:hover {
  background: var(--ac-primary-subtle);
  color: var(--ac-text);
}

.app-nav-link.active {
  background: var(--ac-sidebar-active-bg);
  color: var(--ac-sidebar-active-text);
  font-weight: var(--ac-font-normal);
}

.app-nav-link.active .app-nav-chevron { opacity: 1; }

.app-nav-link-logout {
  color: var(--ac-danger);
}

.app-nav-link-logout:hover {
  background: var(--ac-danger-subtle);
  color: var(--ac-danger);
}

.app-nav-link:focus-visible {
  outline: 2px solid var(--ac-primary);
  outline-offset: -2px;
}

.app-nav-badge {
  margin-left: auto;
  min-width: 1.25rem;
  padding: 0.05rem var(--ac-space-2);
  font-size: var(--ac-text-xs);
  font-weight: var(--ac-font-semibold);
  text-align: center;
  color: var(--ac-warning-text);
  background: var(--ac-warning-subtle);
  border: 1px solid var(--ac-warning-border);
  border-radius: var(--ac-radius-full);
}

.app-nav-badge.hidden { display: none; }

.app-main {
  flex: 1;
  min-width: 0;
}

.app-main .container {
  margin: 0;
  max-width: 1180px;
}

@media (max-width: 860px) {
  .app-shell { flex-direction: column; }
  .app-sidebar {
    position: static;
    width: 100%;
    min-width: 0;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--ac-space-2);
    padding: var(--ac-space-2) var(--ac-space-3);
    border-right: none;
    border-bottom: 1px solid var(--ac-border);
  }
  .app-sidebar-brand { padding: var(--ac-space-2); }
  .app-sidebar-brand-text { display: none; }
  .app-sidebar-nav { flex-direction: row; flex: 1; }
  .app-sidebar-footer {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
  .app-nav-link span:not(.app-nav-badge) { display: none; }
}

header.app-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 48px;
  padding: 0 var(--ac-space-6);
  background: var(--ac-surface);
  border-bottom: 1px solid var(--ac-border);
}

.app-bar-brand {
  margin: 0;
  color: inherit;
  text-decoration: none;
  font-weight: var(--ac-font-semibold);
  font-size: var(--ac-text-base);
  letter-spacing: -0.01em;
}

header.app-bar nav {
  display: flex;
  align-items: stretch;
  height: 100%;
}

header.app-bar nav a {
  display: inline-flex;
  align-items: center;
  color: var(--ac-text-secondary);
  text-decoration: none;
  margin-left: var(--ac-space-5);
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-font-medium);
  border-bottom: 1px solid transparent;
  transition: color var(--ac-duration-fast) var(--ac-ease-out),
              border-color var(--ac-duration-fast) var(--ac-ease-out);
}

header.app-bar nav a:hover {
  color: var(--ac-text);
}

header.app-bar nav a.active {
  color: var(--ac-text);
  border-bottom-color: var(--ac-text);
}

.app-bar-brand:focus-visible,
header.app-bar nav a:focus-visible {
  outline: 1px solid var(--ac-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

input[type="password"],
input[type="file"],
input[type="number"] {
  padding: var(--ac-space-2);
  border: 1px solid var(--ac-border);
  border-radius: 6px;
  font-family: inherit;
  font-size: var(--ac-text-base);
}



/* ==========================================================================
   Login
   ========================================================================== */

.login-page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: calc(100vh - 48px - var(--ac-space-12));
  padding: var(--ac-space-8) var(--ac-space-4);
  background: var(--ac-bg);
}

.login-card {
  width: 100%;
  max-width: 360px;
  padding: var(--ac-space-6);
  margin: 0;
}

.login-wordmark {
  margin: 0 0 var(--ac-space-2);
  font-size: var(--ac-text-lg);
  font-weight: var(--ac-font-semibold);
  letter-spacing: -0.01em;
}

.login-subtitle {
  margin: 0 0 var(--ac-space-5);
  font-size: var(--ac-text-base);
}

.login-error-banner {
  margin: 0 0 var(--ac-space-4);
  padding: 0;
  color: var(--ac-danger);
  font-size: var(--ac-text-sm);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-3);
}

.login-label {
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-font-medium);
  color: var(--ac-text);
}

.login-input {
  width: 100%;
  box-sizing: border-box;
  height: 36px;
  padding: 0 var(--ac-space-3);
  border: 1px solid var(--ac-border);
  border-radius: 6px;
  font-family: inherit;
  font-size: var(--ac-text-base);
  color: var(--ac-text);
  background: var(--ac-surface);
  transition: border-color var(--ac-duration-fast) var(--ac-ease-out),
              outline-color var(--ac-duration-fast) var(--ac-ease-out);
}

.login-input:focus,
.login-input:focus-visible {
  outline: 2px solid var(--ac-primary);
  outline-offset: 0;
  border-color: var(--ac-primary);
}

.login-submit {
  width: 100%;
  margin-top: var(--ac-space-2);
}

/* ==========================================================================
   App shell
   ========================================================================== */

.ac-app { color: var(--ac-text); }
.ac-app .hidden { display: none !important; }

.ac-header {
  margin-bottom: var(--ac-space-5);
}

.ac-header h1 {
  margin: 0 0 var(--ac-space-2);
  font-size: var(--ac-text-xl);
  font-weight: var(--ac-font-semibold);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.ac-subtitle {
  margin: 0;
  color: var(--ac-muted);
  font-size: var(--ac-text-base);
}

.ac-generator-title {
  font-family: 'Istok Web', var(--ac-font-sans);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.1;
  color: var(--ac-accent);
  letter-spacing: -0.01em;
  margin: 0 0 var(--ac-space-3);
}

.ac-header .ac-subtitle {
  font-size: var(--ac-text-md);
}

/* ==========================================================================
   Progress bar stepper
   ========================================================================== */

.ac-stepper {
  margin-top: var(--ac-space-4);
}

.ac-steps {
  display: flex;
  gap: 1px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ac-steps li {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-2);
  min-width: 0;
}

.ac-step-segment {
  display: block;
  height: 2px;
  background: var(--ac-border);
  position: relative;
  overflow: hidden;
}

.ac-step-segment-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ac-primary);
  transition: width var(--ac-duration-fast) var(--ac-ease-out);
}

.ac-steps li.done .ac-step-segment-fill {
  width: 100%;
}

.ac-steps li.active .ac-step-segment-fill {
  width: 100%;
  animation: ac-step-fill var(--ac-duration-fast) var(--ac-ease-out) forwards;
}

@keyframes ac-step-fill {
  from { width: 0; }
  to { width: 100%; }
}

.ac-step-label {
  font-size: var(--ac-text-xs);
  font-weight: var(--ac-font-medium);
  color: var(--ac-text-upcoming);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac-steps li.done .ac-step-label {
  color: var(--ac-muted);
}

.ac-steps li.active .ac-step-label {
  color: var(--ac-text);
  font-weight: var(--ac-font-semibold);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.ac-card {
  background: var(--ac-surface);
  border: 1px solid var(--ac-border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: var(--ac-space-4);
  box-shadow: none;
}

.ac-card h2 {
  margin: 0 0 var(--ac-space-3);
  font-size: var(--ac-text-lg);
  font-weight: var(--ac-font-semibold);
  letter-spacing: -0.01em;
}

.ac-muted { color: var(--ac-muted); font-size: var(--ac-text-base); }
.ac-success { color: var(--ac-success); }
.ac-small, .cs-small, .ac-options-hint { font-size: var(--ac-text-sm); }
.ac-options-hint { margin: 0; }

.ac-success-panel {
  margin: 0 0 var(--ac-space-5);
  padding: var(--ac-space-4);
  background: var(--ac-success-subtle);
  border: 1px solid var(--ac-success-border);
  border-radius: var(--ac-radius-md);
  color: var(--ac-success-text);
  font-size: var(--ac-text-base);
  line-height: 1.5;
}

.ac-instructions summary {
  cursor: pointer;
  font-weight: var(--ac-font-medium);
  font-size: var(--ac-text-sm);
  border-radius: var(--ac-radius-sm);
  padding: var(--ac-space-1) 0;
}

.ac-instructions summary:focus-visible {
  outline: 1px solid var(--ac-primary);
  outline-offset: 2px;
}

.ac-instructions-body {
  margin-top: var(--ac-space-3);
  font-size: var(--ac-text-base);
  color: var(--ac-muted);
}

.ac-instructions-body code {
  background: var(--ac-primary-subtle);
  padding: 0.1rem var(--ac-space-2);
  border-radius: var(--ac-radius-sm);
  font-size: var(--ac-text-sm);
  font-family: var(--ac-font-mono);
}

.ac-upload-row input[type="file"] {
  font-size: var(--ac-text-base);
}

/* Active wizard step card */
.ac-card-active {
  border-color: #D4D4D4;
}

/* Upload expand / collapse */
#ac-step-upload.ac-upload-expanded {
  overflow: hidden;
}

#ac-step-upload.ac-upload-collapsed {
  padding: 0;
  overflow: hidden;
}

.ac-upload-expandable {
  max-height: 200px;
  overflow: hidden;
  transition: max-height var(--ac-duration-fast) var(--ac-ease-out),
              opacity var(--ac-duration-fast) var(--ac-ease-out);
}

#ac-step-upload.ac-upload-collapsed .ac-upload-expandable {
  max-height: 0;
  opacity: 0;
}

#ac-step-upload.ac-upload-collapsed .ac-upload-heading,
#ac-step-upload.ac-upload-collapsed .ac-upload-body {
  visibility: hidden;
}

.ac-upload-heading {
  margin: 0 0 var(--ac-space-3);
}

.ac-upload-status {
  margin: var(--ac-space-2) 0 0;
}

.ac-upload-status.ac-upload-status-error {
  color: var(--ac-danger-text);
  font-size: var(--ac-text-sm);
}

.ac-upload-summary {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--ac-space-4);
  min-height: 56px;
  padding: var(--ac-space-3) 20px;
}

#ac-step-upload.ac-upload-collapsed .ac-upload-summary {
  display: flex !important;
}

.ac-card-compact {
  margin-bottom: var(--ac-space-4);
}

.ac-upload-summary-left {
  display: flex;
  align-items: center;
  gap: var(--ac-space-3);
  min-width: 0;
  flex: 1;
}

.ac-upload-check {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--ac-success-text);
}

.ac-upload-summary-text {
  display: flex;
  align-items: baseline;
  gap: var(--ac-space-2);
  min-width: 0;
  font-size: var(--ac-text-sm);
}

.ac-upload-summary-label {
  font-weight: var(--ac-font-medium);
  color: var(--ac-text);
  white-space: nowrap;
}

.ac-upload-filename {
  color: var(--ac-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.ac-chip {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0.125rem var(--ac-space-2);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-sm);
  background: var(--ac-primary-subtle);
  font-family: var(--ac-font-mono);
  font-size: var(--ac-text-xs);
  font-weight: var(--ac-font-medium);
  color: var(--ac-text-secondary);
  line-height: 1.4;
  white-space: nowrap;
}

.ac-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ac-text-secondary);
  flex-shrink: 0;
}

.ac-btn-ghost:hover:not(:disabled) {
  background: var(--ac-bg);
  border-color: var(--ac-border);
  color: var(--ac-text);
}

/* ==========================================================================
   Latest Progress panel
   ========================================================================== */

.ac-progress-panel {
  padding: 20px;
  border-radius: 16px;
}

.ac-panel-title {
  margin: 0 0 var(--ac-space-5);
  font-size: 20px;
  font-weight: var(--ac-font-semibold);
  letter-spacing: -0.01em;
}

.ac-progress-layout {
  display: grid;
  grid-template-columns: 306px 1fr;
  gap: 24px;
  align-items: stretch;
}

.ac-progress-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ac-space-4);
  border: 1px dashed var(--ac-primary-border);
  border-radius: 16px;
  background: var(--ac-surface);
  min-height: 200px;
}

.ac-progress-illustration img {
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
}

.ac-progress-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.ac-progress-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: #E5E7EB;
  width: 100%;
  border: none;
  text-align: left;
  text-decoration: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: box-shadow var(--ac-duration-fast) var(--ac-ease-out),
              transform var(--ac-duration-fast) var(--ac-ease-out);
}

.ac-progress-card:hover {
  box-shadow: 0 0 0 2px var(--ac-primary-border);
}

.ac-progress-card:focus-visible {
  outline: 2px solid var(--ac-accent);
  outline-offset: 2px;
}

.ac-report-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--ac-space-3);
  margin-bottom: var(--ac-space-4);
}

.ac-report-head-main {
  flex: 1;
  min-width: 12rem;
}

.ac-report-head-main .ac-panel-title {
  margin-bottom: var(--ac-space-1);
}

.ac-report-progress-wrap {
  margin: var(--ac-space-3) 0 var(--ac-space-4);
  padding: var(--ac-space-3);
  border: 1px solid var(--ac-border);
  border-radius: 10px;
  background: var(--ac-bg);
}

.ac-report-progress-wrap.hidden { display: none; }

.ac-report-progress-label {
  display: flex;
  justify-content: space-between;
  gap: var(--ac-space-3);
  margin-bottom: var(--ac-space-2);
  font-size: var(--ac-text-sm);
}

.ac-report-progress-pct {
  font-weight: var(--ac-font-semibold);
  color: var(--ac-accent);
}

.ac-report-track {
  height: 6px;
  background: #fff;
}

.ac-report-view-btn {
  min-width: 3.5rem;
}

#ac-report-table .col-actions {
  width: 1%;
  text-align: right;
  white-space: nowrap;
  padding-right: var(--ac-space-3);
}

.lib-lesson-row.is-highlighted {
  background: rgba(46, 154, 255, 0.08);
  box-shadow: inset 3px 0 0 var(--ac-accent);
}

.lib-content-viewer {
  max-width: min(960px, calc(100vw - var(--ac-space-8)));
  width: 100%;
}

.lib-content-viewer__panel {
  max-width: min(960px, calc(100vw - var(--ac-space-8)));
  max-height: min(90vh, 960px);
  display: flex;
  flex-direction: column;
  padding: var(--ac-space-5);
}

.lib-content-viewer.ac-modal--visible .lib-content-viewer__panel,
.lib-content-viewer[open] .lib-content-viewer__panel {
  opacity: 1;
  transform: scale(1);
}

.lib-content-viewer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ac-space-4);
  margin-bottom: var(--ac-space-3);
  flex-shrink: 0;
}

.lib-content-viewer__head .cs-detail-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: var(--ac-font-semibold);
}

.lib-content-viewer__body {
  overflow: auto;
  flex: 1 1 auto;
  min-height: 12rem;
  padding-right: var(--ac-space-2);
}

/* Content Studio–style viewer (shared with Library content dialog) */
.cs-view-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ac-space-3);
  margin: 0 0 var(--ac-space-3);
  padding: var(--ac-space-3) var(--ac-space-4);
  background: var(--ac-surface-muted);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-md);
  position: sticky;
  top: 0;
  z-index: 2;
}

.cs-view-label {
  font-size: var(--ac-text-xs);
  font-weight: var(--ac-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ac-muted);
}

.cs-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--ac-space-2);
  font-size: var(--ac-text-sm);
  cursor: pointer;
  padding: var(--ac-space-1) var(--ac-space-2);
  border-radius: var(--ac-radius-sm);
}

.cs-view-toggle:hover {
  background: var(--ac-surface);
}

.cs-view-divider {
  width: 1px;
  height: 1.25rem;
  background: var(--ac-border);
  margin: 0 var(--ac-space-1);
}

.cs-view-toggle-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.cs-coverage {
  font-size: var(--ac-text-sm);
  padding: var(--ac-space-3) var(--ac-space-4);
  border-radius: var(--ac-radius-md);
  margin-bottom: var(--ac-space-3);
  line-height: 1.5;
}

.cs-coverage.cs-partial,
.cs-coverage.cs-store-staging-preview {
  background: var(--ac-warning-subtle);
  border: 1px solid var(--ac-warning-border);
  color: var(--ac-warning-text);
}

.cs-coverage.cs-complete {
  background: var(--ac-success-subtle);
  border: 1px solid var(--ac-success-border);
  color: var(--ac-success-text);
}

.cs-section {
  margin: var(--ac-space-4) 0;
  padding: var(--ac-space-5);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-md);
  background: var(--ac-surface);
}

.cs-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ac-space-3);
  margin-bottom: var(--ac-space-3);
}

.cs-section-header h3 {
  margin: 0;
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ac-text-secondary, var(--ac-muted));
}

.cs-section pre,
.cs-raw-panel pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--ac-text-sm);
  font-family: var(--ac-font-mono);
  margin: 0;
  padding: var(--ac-space-4);
  background: var(--ac-surface-muted);
  border-radius: var(--ac-radius-md);
  border: 1px solid var(--ac-border);
  line-height: 1.55;
  max-height: min(50vh, 1800px);
  overflow: auto;
}

.cs-section.cs-collapsed pre {
  max-height: 14rem;
}

.cs-raw-panel .cs-raw-meta {
  font-size: var(--ac-text-xs);
  color: var(--ac-muted);
  margin-bottom: var(--ac-space-2);
}

.cs-empty {
  padding: var(--ac-space-4);
}

.cs-small {
  font-size: var(--ac-text-xs);
}

#lib-store-lessons-table .ac-actions-cell {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ac-space-2);
  align-items: center;
}

#lib-store-lessons-table .ac-actions-cell .ac-btn {
  margin-right: 0;
}

.ac-progress-card--active {
  box-shadow: 0 0 6px 0 var(--ac-accent-glow);
}

.ac-progress-card-file {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--ac-accent);
}

.ac-progress-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ac-progress-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ac-progress-card-info { min-width: 0; }

.ac-progress-card-name {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--ac-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ac-progress-card-meta {
  display: flex;
  gap: var(--ac-space-2);
  font-size: 10px;
  line-height: 1.2;
}

.ac-progress-card-meta .ac-progress-size { color: #9CA3AF; }
.ac-progress-card-meta .ac-progress-author { color: #4B5563; }
.ac-progress-card-meta .ac-progress-time { color: #374151; }

.ac-progress-card-tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 4px var(--ac-space-2);
  border-radius: 8px;
  font-size: 10px;
  font-weight: var(--ac-font-normal);
  white-space: nowrap;
  border: 1px solid;
}

.ac-progress-card-tag--active {
  color: var(--ac-accent);
  border-color: var(--ac-accent);
  background: var(--ac-primary-subtle);
}

.ac-progress-card-tag--queued {
  color: #64748b;
  border-color: #94a3b8;
  background: rgba(100, 116, 139, 0.12);
}

.ac-progress-card-tag--success {
  color: #00A13D;
  border-color: #00A13D;
  background: rgba(0, 161, 61, 0.15);
}

.ac-progress-card-tag--error {
  color: #DC2626;
  border-color: #DC2626;
  background: rgba(220, 38, 38, 0.15);
}

.ac-progress-track {
  height: 4px;
  border-radius: var(--ac-radius-full);
  background: #FFFFFF;
  overflow: hidden;
}

.ac-progress-track-fill {
  height: 100%;
  width: 6%;
  border-radius: inherit;
  background: var(--ac-accent);
  transition: width var(--ac-duration-normal) var(--ac-ease-out);
}

.ac-progress-card--active .ac-progress-track-fill {
  background: var(--ac-accent);
}

.ac-progress-card--success .ac-progress-track-fill {
  width: 100%;
  background: var(--ac-accent);
}

.ac-progress-card--error .ac-progress-track-fill {
  width: 100%;
  background: #DC2626;
}

.ac-progress-card-status {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ac-progress-card--success .ac-progress-card-status { color: #00A13D; }
.ac-progress-card--error .ac-progress-card-status { color: #DC2626; }
.ac-progress-card--active .ac-progress-card-status { color: var(--ac-accent); }

.ac-progress-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ac-space-6);
  color: var(--ac-text-secondary);
  font-size: var(--ac-text-sm);
  border: 1px dashed var(--ac-border);
  border-radius: 12px;
  background: var(--ac-bg);
}

.ac-progress-live {
  margin-top: var(--ac-space-5);
  padding-top: var(--ac-space-5);
  border-top: 1px solid var(--ac-border);
}

.ac-progress-live.hidden { display: none; }

.ac-progress-live-title {
  margin: 0 0 var(--ac-space-2);
  font-size: var(--ac-text-md);
  font-weight: var(--ac-font-semibold);
}

@media (max-width: 720px) {
  .ac-progress-layout { grid-template-columns: 1fr; }
  .ac-progress-illustration { min-height: 140px; }
}

/* ==========================================================================
   Upload workbook card (redesigned)
   ========================================================================== */

.ac-upload-heading {
  font-family: 'Istok Web', var(--ac-font-sans);
  font-size: 20px;
  font-weight: var(--ac-font-semibold);
}

.ac-entry-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 var(--ac-space-4);
  padding: 4px;
  border-radius: 10px;
  background: var(--ac-bg);
  border: 1px solid var(--ac-border);
  width: fit-content;
  max-width: 100%;
}

.ac-entry-tab {
  appearance: none;
  border: none;
  background: transparent;
  padding: 8px 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-font-medium);
  color: var(--ac-text-secondary);
  cursor: pointer;
}

.ac-entry-tab.active {
  background: var(--ac-accent);
  color: #fff;
}

.ac-entry-panel.hidden { display: none; }

.ac-manual-sheet-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ac-space-3);
  margin: var(--ac-space-3) 0 var(--ac-space-4);
}

.ac-manual-sheet-fields label,
.ac-manual-lesson-fields label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--ac-text-xs);
  font-weight: var(--ac-font-medium);
  color: var(--ac-text-secondary);
}

.ac-manual-sheet-fields input,
.ac-manual-lesson-fields input,
.ac-manual-lesson-fields textarea {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--ac-border);
  border-radius: 6px;
  font-family: inherit;
  font-size: var(--ac-text-sm);
  color: var(--ac-text);
  background: var(--ac-surface);
}

.ac-manual-lesson-fields textarea {
  height: auto;
  min-height: 56px;
  padding: 8px 10px;
  resize: vertical;
}

.ac-manual-sheet-fields input:focus,
.ac-manual-lesson-fields input:focus,
.ac-manual-lesson-fields textarea:focus {
  outline: none;
  border-color: var(--ac-accent);
  box-shadow: 0 0 0 2px rgba(71, 165, 255, 0.2);
}

.ac-manual-lessons-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ac-space-3);
  margin-bottom: var(--ac-space-2);
}

.ac-manual-lessons {
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-3);
}

.ac-manual-lesson {
  padding: var(--ac-space-3);
  border: 1px solid var(--ac-border);
  border-radius: 10px;
  background: var(--ac-bg);
}

.ac-manual-lesson-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ac-space-2);
  margin-bottom: var(--ac-space-2);
}

.ac-manual-lesson-title {
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-font-semibold);
  color: var(--ac-text);
}

.ac-manual-lesson-fields {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--ac-space-3);
}

.ac-manual-lesson-fields .ac-manual-span-2 {
  grid-column: 1 / -1;
}

@media (max-width: 720px) {
  .ac-manual-sheet-fields,
  .ac-manual-lesson-fields { grid-template-columns: 1fr; }
}

.ac-upload-dropzone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ac-space-3);
  padding: var(--ac-space-4);
  border: 1px solid #374151;
  border-radius: 12px;
  background: var(--ac-surface);
  transition: border-color var(--ac-duration-fast) var(--ac-ease-out),
              background-color var(--ac-duration-fast) var(--ac-ease-out);
}

.ac-upload-dropzone.has-error {
  border-color: var(--ac-danger-border);
  background: var(--ac-danger-subtle);
}

.ac-upload-filename-display {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--ac-space-2);
  font-size: var(--ac-text-base);
  color: var(--ac-text-secondary);
}

.ac-upload-filename-display .ac-upload-filename {
  color: var(--ac-text);
  font-weight: var(--ac-font-medium);
}

.ac-upload-warn-icon {
  margin-left: auto;
  display: none;
  flex-shrink: 0;
  color: var(--ac-danger);
}

.ac-upload-dropzone.has-error .ac-upload-warn-icon {
  display: inline-flex;
}

.ac-file-btn {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.ac-file-btn input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}

.ac-upload-dropzone.is-locked {
  opacity: 0.65;
}

.ac-upload-dropzone.is-locked .ac-file-btn {
  cursor: not-allowed;
}

.ac-upload-dropzone.is-locked .ac-file-btn input[type="file"]:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.ac-upload-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ac-space-5);
  margin-top: var(--ac-space-4);
}

.ac-session-field {
  display: inline-flex;
  align-items: center;
  gap: var(--ac-space-2);
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-font-medium);
  color: var(--ac-text);
}

.ac-session-field .ac-input-num {
  width: 5.5rem;
  text-align: center;
  border: 1px solid var(--ac-accent);
  border-radius: 4px;
}

.ac-session-field .ac-input-select {
  min-width: 9.5rem;
  height: 32px;
  box-sizing: border-box;
  padding: 0 8px;
  border: 1px solid var(--ac-accent);
  border-radius: 4px;
  font-family: inherit;
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-font-medium);
  color: var(--ac-text);
  background: var(--ac-surface);
  cursor: pointer;
}

.ac-session-field .ac-input-select:focus {
  outline: none;
  border-color: var(--ac-primary);
  box-shadow: 0 0 0 2px rgba(23, 23, 23, 0.12);
}

.ac-upload-error-msg,
.ac-upload-supported-msg {
  display: flex;
  align-items: center;
  gap: var(--ac-space-2);
  margin-top: var(--ac-space-3);
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-font-medium);
}

.ac-upload-error-msg { color: var(--ac-danger-text); }
.ac-upload-supported-msg { color: var(--ac-success-text); }

.ac-sheet-picker {
  margin-top: var(--ac-space-4);
  padding: var(--ac-space-4);
  border: 1px solid var(--ac-border);
  border-radius: 12px;
  background: var(--ac-bg);
}

.ac-sheet-picker.hidden { display: none; }

.ac-sheet-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ac-space-3);
  margin-bottom: var(--ac-space-2);
}

.ac-sheet-picker-list {
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-3);
  margin-top: var(--ac-space-3);
}

.ac-sheet-picker-item {
  padding: var(--ac-space-3);
  border: 1px solid var(--ac-border);
  border-radius: 10px;
  background: var(--ac-surface);
}

.ac-sheet-picker-item.is-unsupported {
  opacity: 0.75;
  background: var(--ac-danger-subtle);
  border-color: var(--ac-danger-border);
}

.ac-sheet-picker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ac-space-2) var(--ac-space-3);
}

.ac-sheet-picker-name {
  font-weight: var(--ac-font-semibold);
  color: var(--ac-text);
}

.ac-sheet-picker-meta {
  margin-left: auto;
  font-size: var(--ac-text-xs);
  color: var(--ac-text-secondary);
}

.ac-sheet-picker-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ac-space-3);
  margin-top: var(--ac-space-3);
}

.ac-sheet-picker-fields label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--ac-text-xs);
  font-weight: var(--ac-font-medium);
  color: var(--ac-text-secondary);
}

.ac-sheet-picker-fields input[type="text"] {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--ac-border);
  border-radius: 6px;
  font-family: inherit;
  font-size: var(--ac-text-sm);
  color: var(--ac-text);
  background: var(--ac-surface);
}

.ac-sheet-picker-fields input[type="text"]:focus {
  outline: none;
  border-color: var(--ac-accent);
  box-shadow: 0 0 0 2px rgba(71, 165, 255, 0.2);
}

@media (max-width: 720px) {
  .ac-sheet-picker-fields { grid-template-columns: 1fr; }
  .ac-sheet-picker-meta { margin-left: 0; width: 100%; }
}

.ac-upload-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ac-space-2);
  margin-top: var(--ac-space-5);
}

.ac-btn-lg {
  height: 40px;
  min-height: 40px;
  padding: 0 var(--ac-space-5);
  font-size: var(--ac-text-md);
  gap: var(--ac-space-2);
  border-radius: 12px;
}

.ac-upload-actions .ac-btn-primary {
  font-family: 'Istok Web', var(--ac-font-sans);
  box-shadow: 0 0 6px 0 var(--ac-accent-glow);
}

.ac-upload-actions .ac-btn-primary:hover:not(:disabled) {
  box-shadow: 0 0 8px 1px var(--ac-accent-glow);
}

/* ==========================================================================
   Section composition — Configure & Preview
   ========================================================================== */

.ac-section-lead {
  margin: 0 0 var(--ac-space-5);
}

.ac-section-label-row {
  margin-bottom: var(--ac-space-3);
}

.ac-section-label {
  display: block;
  font-size: 11px;
  font-weight: var(--ac-font-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ac-text-secondary);
}

.ac-config-section {
  margin-bottom: var(--ac-space-6);
}

.ac-config-footer {
  margin-top: var(--ac-space-5);
  padding-top: var(--ac-space-5);
  border-top: 1px solid var(--ac-border);
}

.ac-btn-generate {
  min-width: 10rem;
}

.ac-options-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ac-space-3) var(--ac-space-4);
  margin: 0;
  padding: var(--ac-space-3) var(--ac-space-4);
  align-items: center;
  justify-content: space-between;
  font-size: var(--ac-text-sm);
  background: var(--ac-surface);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-md);
}

.ac-options-bar-label {
  font-size: 11px;
  font-weight: var(--ac-font-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ac-text-secondary);
  flex-shrink: 0;
}

.ac-options-bar-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ac-space-4) var(--ac-space-6);
  align-items: center;
  margin-left: auto;
}

.ac-preview-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--ac-space-2) var(--ac-space-4);
  margin-bottom: var(--ac-space-4);
}

.ac-preview-head h2 {
  margin: 0;
}

.ac-preview-library-link {
  margin: 0;
  font-size: var(--ac-text-sm);
}

.ac-preview-library-link a {
  color: var(--ac-text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--ac-duration-fast) var(--ac-ease-out);
}

.ac-preview-library-link a:hover {
  color: var(--ac-text);
}

.ac-preview-library-link a:focus-visible {
  outline: 1px solid var(--ac-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

.ac-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ac-space-2);
  margin-bottom: var(--ac-space-4);
}

.ac-stat-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--ac-space-2);
  padding: var(--ac-space-2) var(--ac-space-3);
  background: var(--ac-surface);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-sm);
  font-size: var(--ac-text-sm);
  line-height: 1.3;
}

.ac-stat-value {
  font-family: var(--ac-font-mono);
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-font-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--ac-text);
  letter-spacing: -0.02em;
}

.ac-stat-label {
  color: var(--ac-text-secondary);
  font-size: var(--ac-text-xs);
  font-weight: var(--ac-font-medium);
}

.ac-stat-chip-tokens .ac-stat-label {
  font-family: var(--ac-font-mono);
  font-size: 10px;
  letter-spacing: -0.01em;
}

.ac-stat-chip-empty {
  color: var(--ac-muted);
}

.ac-stat-chip-error {
  border-color: var(--ac-danger-border);
  background: var(--ac-danger-subtle);
  color: var(--ac-danger-text);
}

.ac-stat-chip-error .ac-stat-value,
.ac-stat-chip-error .ac-stat-label {
  color: inherit;
  font-family: inherit;
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-font-medium);
}

.ac-preview-tabs-panel {
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-md);
  background: var(--ac-surface);
  overflow: hidden;
  margin-bottom: var(--ac-space-5);
}

.ac-preview-empty {
  padding: var(--ac-space-8) var(--ac-space-4);
  margin: 0;
  text-align: center;
  border-top: 1px solid var(--ac-border);
  background: var(--ac-bg);
}

.ac-preview-empty-title {
  margin: 0 0 var(--ac-space-2);
  font-size: var(--ac-text-base);
  font-weight: var(--ac-font-semibold);
  color: var(--ac-text);
}

.ac-preview-empty-desc {
  margin: 0;
  font-size: var(--ac-text-sm);
  color: var(--ac-text-secondary);
}

.ac-preview-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ac-space-3);
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 0;
  padding-top: var(--ac-space-5);
  border-top: 1px solid var(--ac-border);
}

.ac-preview-toolbar-group {
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-2);
}

.ac-toolbar-group-label {
  font-size: 10px;
  font-weight: var(--ac-font-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ac-text-upcoming);
}

/* ==========================================================================
   Tables
   ========================================================================== */

.ac-table-wrap {
  overflow-x: auto;
  margin: 0;
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-md);
  background: var(--ac-surface);
}

.ac-table-elevated {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}

.ac-config-table-wrap {
  max-height: 480px;
  overflow: auto;
}

.ac-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ac-text-sm);
  table-layout: auto;
}

.ac-table th,
.ac-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--ac-border);
  border-left: none;
  border-right: none;
  vertical-align: middle;
  box-sizing: border-box;
}

.ac-config-table th,
.ac-config-table td {
  min-height: 44px;
  height: 44px;
}

.ac-preview-table th,
.ac-preview-table td {
  min-height: 44px;
  height: auto;
  vertical-align: top;
  padding-top: 14px;
  padding-bottom: 14px;
}

.ac-preview-table thead th {
  vertical-align: middle;
  height: 44px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.ac-preview-table .col-check,
.ac-preview-table .col-num,
.ac-preview-table .col-status,
.ac-preview-table .col-session,
.ac-preview-table .ac-col-tokens {
  vertical-align: middle;
}

.ac-table thead th {
  background: var(--ac-header-bg);
  font-weight: var(--ac-font-semibold);
  font-size: var(--ac-text-sm);
  letter-spacing: 0.01em;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
  height: 44px;
  min-height: 44px;
  border-bottom: 1px solid #D4D4D4;
}

.ac-config-table thead th:not(.col-check):not(.col-sheet):not(.col-status),
.ac-preview-table thead th:not(.col-check):not(.col-lesson):not(.col-num) {
  font-size: 11px;
  font-weight: var(--ac-font-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ac-text-secondary);
}

.ac-table tbody tr {
  background: var(--ac-surface);
  transition: background-color var(--ac-duration-fast) var(--ac-ease-out);
}

.ac-table tbody tr:nth-child(even) {
  background: var(--ac-row-alt);
}

.ac-table tbody tr:hover {
  background: var(--ac-row-hover);
}

.ac-table tbody tr.row-skipped {
  opacity: 0.6;
}

.ac-table tbody tr.row-skipped:hover {
  background: var(--ac-row-alt);
}

/* Column group dividers */
.ac-table .col-group-divider {
  border-right: 1px solid var(--ac-border);
}

.ac-table thead .col-group-divider {
  border-right-color: #D4D4D4;
}

.ac-table .col-check {
  width: 2.75rem;
  min-width: 2.75rem;
  text-align: center;
  padding-left: 16px;
  padding-right: 8px;
}

.ac-config-table .col-check,
.ac-preview-table .col-check {
  position: sticky;
  left: 0;
  z-index: 1;
  background: inherit;
  box-shadow: inset -1px 0 0 var(--ac-border);
}

.ac-config-table thead .col-check,
.ac-preview-table thead .col-check {
  z-index: 3;
  background: var(--ac-header-bg);
  box-shadow: inset -1px 0 0 #D4D4D4;
}

.ac-config-table tbody tr:nth-child(even) .col-check {
  background: var(--ac-row-alt);
}

.ac-config-table tbody tr:nth-child(odd) .col-check {
  background: var(--ac-surface);
}

.ac-preview-table tbody tr:nth-child(even) .col-check {
  background: var(--ac-row-alt);
}

.ac-preview-table tbody tr:nth-child(odd) .col-check {
  background: var(--ac-surface);
}

.ac-config-table tbody tr:hover .col-check,
.ac-preview-table tbody tr:hover .col-check {
  background: var(--ac-row-hover);
}

.ac-config-table tbody tr.row-skipped .col-check,
.ac-preview-table tbody tr.row-skipped .col-check {
  background: inherit;
}

.ac-sheet-name,
.ac-lesson-title {
  font-weight: var(--ac-font-semibold);
  color: var(--ac-text);
  letter-spacing: -0.01em;
}

a.ac-lesson-title-link {
  font-weight: var(--ac-font-semibold);
  color: #0054a3;
  text-decoration: none;
  letter-spacing: -0.01em;
}

a.ac-lesson-title-link:hover {
  text-decoration: underline;
  color: var(--ac-primary-hover, var(--ac-primary));
}

.ac-table .col-num {
  width: 4rem;
  text-align: right;
  white-space: nowrap;
}

.ac-col-numeric,
.ac-table thead .ac-col-numeric {
  background: var(--ac-col-numeric-bg);
}

.ac-preview-table tbody tr:nth-child(even) .ac-col-numeric {
  background: #F5F5F5;
}

.ac-preview-table tbody tr:nth-child(odd) .ac-col-numeric {
  background: var(--ac-col-numeric-bg);
}

.ac-preview-table tbody tr:hover .ac-col-numeric {
  background: var(--ac-row-hover);
}

.ac-col-tokens {
  font-family: var(--ac-font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.ac-table input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--ac-primary);
  cursor: pointer;
  vertical-align: middle;
}

.ac-options-bar input[type="checkbox"],
.ac-preview-toolbar-opt input[type="checkbox"],
.ac-check input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--ac-primary);
  cursor: pointer;
  vertical-align: middle;
}

.ac-table input[type="checkbox"]:focus-visible,
.ac-options-bar input[type="checkbox"]:focus-visible,
.ac-preview-toolbar-opt input[type="checkbox"]:focus-visible,
.ac-check input[type="checkbox"]:focus-visible {
  outline: 1px solid var(--ac-primary);
  outline-offset: 2px;
}

.ac-table input[type="checkbox"]:disabled,
.ac-check input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/* Editable cell inputs */
.ac-config-table input[type="text"] {
  width: 100%;
  min-width: 5rem;
  height: 30px;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px inset var(--ac-border);
  border-radius: 4px;
  font-size: var(--ac-text-sm);
  font-family: inherit;
  color: var(--ac-text);
  background: var(--ac-surface);
  transition: background-color var(--ac-duration-fast) var(--ac-ease-out),
              border-color var(--ac-duration-fast) var(--ac-ease-out),
              box-shadow var(--ac-duration-fast) var(--ac-ease-out);
}

.ac-config-table input[type="text"]::placeholder {
  color: var(--ac-placeholder);
}

.ac-config-table tbody tr:hover input[type="text"]:not(:disabled):not(:focus) {
  background: var(--ac-surface);
}

.ac-config-table input[type="text"]:focus {
  outline: none;
  border-color: var(--ac-primary);
  background: var(--ac-surface);
  box-shadow: 0 0 0 2px rgba(23, 23, 23, 0.12);
}

.ac-config-table input[type="text"]:disabled {
  background: transparent;
  border-color: transparent;
  color: var(--ac-muted);
  cursor: not-allowed;
}

.ac-table input[type="text"] {
  width: 100%;
  min-width: 5rem;
  height: 32px;
  box-sizing: border-box;
  padding: 0 var(--ac-space-2);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-sm);
  font-size: var(--ac-text-sm);
  font-family: inherit;
  color: var(--ac-text);
  background: var(--ac-surface);
  transition: border-color var(--ac-duration-fast) var(--ac-ease-out),
              outline-color var(--ac-duration-fast) var(--ac-ease-out);
}

.ac-table input[type="text"]:focus {
  outline: 1px solid var(--ac-primary);
  outline-offset: 0;
  border-color: var(--ac-primary);
}

.ac-table input[type="text"]:disabled {
  background: var(--ac-bg);
  color: var(--ac-muted);
  cursor: not-allowed;
}

/* ==========================================================================
   Badges
   ========================================================================== */

.ac-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--ac-radius-full);
  font-size: var(--ac-text-xs);
  font-weight: var(--ac-font-medium);
  line-height: 1.4;
  border: 1px solid var(--ac-border);
  background: var(--ac-surface);
  white-space: nowrap;
}

.ac-badge-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}

.ac-badge-ok {
  color: var(--ac-success-text);
  border-color: rgba(187, 247, 208, 0.8);
  background: rgba(240, 253, 244, 0.5);
}

.ac-badge-skip {
  color: var(--ac-text-secondary);
  border-color: rgba(229, 229, 229, 0.9);
  background: rgba(245, 245, 245, 0.5);
}

.ac-badge-bad {
  color: var(--ac-danger);
  border-color: rgba(254, 202, 202, 0.8);
  background: rgba(254, 242, 242, 0.5);
}

.ac-badge-content-pending {
  color: var(--ac-text-secondary);
  border-color: rgba(229, 229, 229, 0.9);
  background: rgba(245, 245, 245, 0.5);
}

.ac-badge-content-queued {
  color: #92400e;
  border-color: rgba(253, 230, 138, 0.8);
  background: rgba(255, 251, 235, 0.6);
}

.ac-badge-content-running {
  color: #1d4ed8;
  border-color: rgba(191, 219, 254, 0.8);
  background: rgba(239, 246, 255, 0.6);
}

.ac-badge-content-done {
  color: var(--ac-success-text);
  border-color: rgba(187, 247, 208, 0.8);
  background: rgba(240, 253, 244, 0.5);
}

.ac-badge-content-error {
  color: var(--ac-danger);
  border-color: rgba(254, 202, 202, 0.8);
  background: rgba(254, 242, 242, 0.5);
}

.ac-content-error {
  margin: var(--ac-space-1) 0 0;
  font-size: var(--ac-text-xs);
  max-width: 14rem;
}

.ac-toolbar-hint {
  margin: 0;
  flex: 1 1 100%;
  font-size: var(--ac-text-sm);
}

.ac-preview-table .col-lesson {
  min-width: 22rem;
  width: 36%;
  max-width: 40rem;
}

.ac-lesson-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 2px 0;
}

.ac-lesson-cell .ac-lesson-title {
  display: block;
  font-size: var(--ac-text-base);
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
}

.ac-objective {
  margin: 0;
  max-width: none;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  word-break: break-word;
  color: var(--ac-text-secondary);
  font-size: var(--ac-text-sm);
  line-height: 1.5;
}

.ac-objective--empty {
  font-style: italic;
  color: var(--ac-muted);
}

.ac-preview-table .ac-meta-cell {
  min-width: 7.5rem;
  max-width: 12rem;
  white-space: normal;
  word-break: break-word;
  font-size: var(--ac-text-sm);
  line-height: 1.4;
  color: var(--ac-text-secondary);
}

/* ==========================================================================
   Form controls & options
   ========================================================================== */

.ac-options-field {
  display: inline-flex;
  align-items: center;
  gap: var(--ac-space-2);
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-font-medium);
  color: var(--ac-text);
}


.ac-check {
  display: inline-flex;
  align-items: center;
  gap: var(--ac-space-2);
  cursor: pointer;
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-font-medium);
}

.ac-input-num {
  width: 4rem;
  height: 32px;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px inset var(--ac-border);
  border-radius: 4px;
  font-family: var(--ac-font-mono);
  font-size: var(--ac-text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ac-text);
  background: var(--ac-surface);
  transition: background-color var(--ac-duration-fast) var(--ac-ease-out),
              border-color var(--ac-duration-fast) var(--ac-ease-out),
              box-shadow var(--ac-duration-fast) var(--ac-ease-out);
}

.ac-input-num:focus {
  outline: none;
  border-color: var(--ac-primary);
  box-shadow: 0 0 0 2px rgba(23, 23, 23, 0.12);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.ac-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-height: 32px;
  padding: 0 var(--ac-space-4);
  border-radius: 6px;
  font-size: var(--ac-text-base);
  font-weight: var(--ac-font-medium);
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--ac-border);
  background: var(--ac-surface);
  color: var(--ac-text);
  text-decoration: none;
  box-shadow: none;
  transition: background-color var(--ac-duration-fast) var(--ac-ease-out),
              border-color var(--ac-duration-fast) var(--ac-ease-out),
              color var(--ac-duration-fast) var(--ac-ease-out);
}

.ac-btn:focus-visible {
  outline: 1px solid var(--ac-primary);
  outline-offset: 1px;
}

.ac-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ac-btn-primary {
  background: var(--ac-primary);
  border-color: var(--ac-primary);
  color: #fff;
}

.ac-btn-primary:hover:not(:disabled) {
  background: var(--ac-primary-hover);
  border-color: var(--ac-primary-hover);
}

.ac-btn-primary:active:not(:disabled) {
  background: var(--ac-primary-active);
  border-color: var(--ac-primary-active);
}

.ac-btn-secondary {
  background: var(--ac-surface);
  border-color: var(--ac-border);
  color: var(--ac-text);
}

.ac-btn-secondary:hover:not(:disabled) {
  background: var(--ac-bg);
}

.ac-btn-danger {
  background: var(--ac-surface);
  border-color: var(--ac-danger-border);
  color: var(--ac-danger);
}

.ac-btn-danger:hover:not(:disabled) {
  background: var(--ac-danger-subtle);
}

.ac-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ac-space-2);
  align-items: center;
  margin-top: var(--ac-space-4);
}

.ac-toolbar-split {
  justify-content: space-between;
}

.ac-toolbar-left {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ac-space-2);
}

/* ==========================================================================
   Alerts & progress
   ========================================================================== */

.ac-alert {
  margin-top: var(--ac-space-3);
  padding: var(--ac-space-3) var(--ac-space-4);
  background: var(--ac-danger-subtle);
  border: 1px solid var(--ac-danger-border);
  border-radius: var(--ac-radius-md);
  color: var(--ac-danger-text);
  font-size: var(--ac-text-sm);
}

.ac-progress-bar {
  height: 2px;
  background: var(--ac-border);
  border-radius: 0;
  overflow: hidden;
  margin-top: var(--ac-space-3);
}

#ac-progress-fill {
  height: 100%;
  width: 30%;
  background: var(--ac-primary);
  animation: ac-pulse 1.2s var(--ac-ease-in-out) infinite;
}

@keyframes ac-pulse {
  0%, 100% { width: 25%; margin-left: 0; }
  50% { width: 55%; margin-left: 20%; }
}

/* ==========================================================================
   Preview panel
   ========================================================================== */

.ac-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ac-space-2);
  font-size: var(--ac-text-sm);
  color: var(--ac-muted);
}

.ac-summary span strong {
  color: var(--ac-text);
  font-weight: var(--ac-font-semibold);
}

.ac-preview-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ac-space-4);
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--ac-space-4);
  padding: var(--ac-space-4);
  background: var(--ac-surface);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-md);
}

.ac-preview-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ac-space-2);
  align-items: center;
}

.ac-preview-toolbar-opt {
  margin-left: auto;
  padding-left: var(--ac-space-4);
  border-left: 1px solid var(--ac-border);
  font-size: var(--ac-text-sm);
  white-space: nowrap;
  align-self: center;
}

.ac-regen-opt { margin-left: auto; font-size: var(--ac-text-sm); }

.ac-sheet-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 0;
  border-bottom: 1px solid var(--ac-border);
  padding: 0 var(--ac-space-2);
  background: var(--ac-header-bg);
}

.ac-tab {
  position: relative;
  padding: 12px 16px;
  margin-bottom: -1px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  font-size: var(--ac-text-sm);
  font-family: inherit;
  cursor: pointer;
  color: var(--ac-muted);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--ac-duration-tab) var(--ac-ease-out),
              border-color var(--ac-duration-tab) var(--ac-ease-out);
}

.ac-tab::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -1px;
  height: 2px;
  background: var(--ac-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--ac-duration-tab) var(--ac-ease-out);
}

.ac-tab:hover {
  color: var(--ac-text);
}

.ac-tab.active {
  color: var(--ac-text);
  font-weight: var(--ac-font-semibold);
  border-bottom-color: transparent;
  background: transparent;
  box-shadow: none;
}

.ac-tab.active::after {
  transform: scaleX(1);
}

.ac-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  margin-left: var(--ac-space-2);
  padding: 1px 6px;
  font-family: var(--ac-font-mono);
  font-size: 10px;
  font-weight: var(--ac-font-medium);
  font-variant-numeric: tabular-nums;
  color: var(--ac-text-secondary);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-full);
  line-height: 1.4;
  vertical-align: middle;
}

.ac-tab.active .ac-tab-count {
  color: var(--ac-text);
  background: var(--ac-surface);
  border-color: #D4D4D4;
}

.ac-tab:focus-visible {
  outline: none;
  color: var(--ac-text);
}

.ac-tab:focus-visible::after {
  transform: scaleX(1);
  background: var(--ac-primary);
}

.ac-preview-table-wrap {
  border: none;
  border-radius: 0;
  max-height: min(70vh, 720px);
  overflow: auto;
  margin-top: 0;
}

.ac-runs { margin-top: var(--ac-space-4); font-size: var(--ac-text-base); }
.ac-runs summary {
  cursor: pointer;
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-font-medium);
  color: var(--ac-text-secondary);
  padding: var(--ac-space-1) 0;
}

.ac-runs summary:focus-visible {
  outline: 1px solid var(--ac-primary);
  outline-offset: 2px;
  border-radius: var(--ac-radius-sm);
}

.ac-runs ul { margin: var(--ac-space-2) 0 0; padding-left: var(--ac-space-5); }

.ac-select {
  margin-left: var(--ac-space-2);
  padding: var(--ac-space-1) var(--ac-space-3);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-md);
  font-size: var(--ac-text-sm);
  font-family: inherit;
  height: 32px;
  background: var(--ac-surface);
  color: var(--ac-text);
  transition: border-color var(--ac-duration-fast) var(--ac-ease-out),
              box-shadow var(--ac-duration-fast) var(--ac-ease-out);
}

.ac-select:focus-visible {
  outline: none;
  border-color: var(--ac-primary);
  box-shadow: 0 0 0 2px rgba(23, 23, 23, 0.12);
}

.ac-btn-sm {
  height: 28px;
  min-height: 28px;
  padding: 0 var(--ac-space-3);
  font-size: var(--ac-text-sm);
}

.ac-table .col-expand { width: 2rem; text-align: center; }

.ac-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-sm);
  background: var(--ac-surface);
  cursor: pointer;
  color: var(--ac-muted);
  padding: 0;
  transition: color var(--ac-duration-fast) var(--ac-ease-out),
    border-color var(--ac-duration-fast) var(--ac-ease-out),
    background-color var(--ac-duration-fast) var(--ac-ease-out);
}

.ac-expand-icon {
  display: block;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  margin-left: 2px;
  transition: transform var(--ac-duration-tab) var(--ac-ease-out);
}

.ac-expand-btn--open .ac-expand-icon {
  transform: rotate(90deg);
}

.ac-expand-btn:hover {
  color: var(--ac-text);
  border-color: var(--ac-border-strong);
  background: var(--ac-bg);
}

.ac-expand-btn:focus-visible {
  outline: 1px solid var(--ac-primary);
  outline-offset: 2px;
}

.lib-detail-row td {
  background: var(--ac-bg);
  padding: var(--ac-space-4) var(--ac-space-5) !important;
  border-bottom: 1px solid var(--ac-border);
}

.ac-nested-table {
  margin-top: var(--ac-space-2);
  font-size: var(--ac-text-sm);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-sm);
  overflow: hidden;
}

.ac-nested-table th,
.ac-nested-table td {
  padding: var(--ac-space-2) var(--ac-space-3);
}

.ac-token-detail { font-size: var(--ac-text-sm); }

.ac-token-detail-summary {
  margin-bottom: var(--ac-space-4);
}

.ac-token-detail-label {
  display: block;
  margin: 0 0 var(--ac-space-3);
}

.ac-actions-cell { white-space: nowrap; }
.ac-actions-cell .ac-btn { margin-right: var(--ac-space-2); }
.ac-actions-cell .ac-btn:last-child { margin-right: 0; }

.ac-table .col-actions {
  width: 1%;
  white-space: nowrap;
}

/* ==========================================================================
   Library
   ========================================================================== */

.ac-lib-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--ac-space-4) var(--ac-space-6);
}

.ac-lib-header-main {
  flex: 1 1 16rem;
  min-width: 0;
}

.ac-lib-stats {
  flex: 1 1 auto;
  justify-content: flex-end;
  margin: 0;
}

.ac-lib-filter-card {
  padding: 0;
  overflow: hidden;
}

.ac-lib-filter-card .ac-options-bar {
  margin: 0;
  border: none;
  border-radius: 0;
}

.ac-lib-filter-label {
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-1);
  margin: 0;
}

.ac-lib-select {
  margin-left: 0;
  min-width: 14rem;
}

.ac-lib-table-wrap {
  margin-top: var(--ac-space-3);
  max-height: min(70vh, 900px);
  overflow: auto;
}

.ac-lib-toolbar-footer {
  margin-top: 0;
  margin-bottom: var(--ac-space-5);
  padding-top: 0;
  padding-bottom: var(--ac-space-5);
  border-top: none;
  border-bottom: 1px solid var(--ac-border);
}

.ac-lib-lessons-head {
  margin-bottom: var(--ac-space-5);
}

.ac-lib-breadcrumb {
  margin: 0 0 var(--ac-space-1);
}

.ac-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--ac-space-10) var(--ac-space-6);
  margin-top: var(--ac-space-3);
  border: 1px dashed var(--ac-border);
  border-radius: var(--ac-radius-md);
  background: var(--ac-bg);
}

.ac-empty-state-title {
  margin: 0 0 var(--ac-space-2);
  font-size: var(--ac-text-lg);
  font-weight: var(--ac-font-semibold);
  color: var(--ac-text);
}

.ac-empty-state-desc {
  margin: 0 0 var(--ac-space-5);
  max-width: 24rem;
  font-size: var(--ac-text-sm);
  color: var(--ac-text-secondary);
  line-height: 1.5;
}

/* ==========================================================================
   Modals (Linear Clinical)
   ========================================================================== */

.ac-modal {
  margin: auto;
  padding: 0;
  border: none;
  background: transparent;
  max-width: calc(100vw - var(--ac-space-8));
  overflow: visible;
  color: var(--ac-text);
  font-family: var(--ac-font-sans);
  font-size: var(--ac-text-base);
}

.ac-modal::backdrop {
  background: rgba(10, 10, 10, 0.45);
  opacity: 0;
  transition: opacity var(--ac-duration-tab) var(--ac-ease-out);
}

.ac-modal.ac-modal--visible::backdrop {
  opacity: 1;
}

.ac-modal__panel {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: var(--ac-space-6);
  background: var(--ac-surface);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  opacity: 0;
  transform: scale(0.98);
  transition: opacity var(--ac-duration-tab) var(--ac-ease-out),
              transform var(--ac-duration-tab) var(--ac-ease-out);
}

.ac-modal.ac-modal--visible .ac-modal__panel {
  opacity: 1;
  transform: scale(1);
}

.ac-modal--alert .ac-modal__panel {
  max-width: 420px;
}

.ac-modal--confirm .ac-modal__panel,
.ac-modal--prompt .ac-modal__panel {
  max-width: 480px;
}

.ac-modal__body {
  margin-bottom: var(--ac-space-6);
}

.ac-modal__message {
  margin: 0;
  font-size: var(--ac-text-base);
  line-height: 1.5;
  color: var(--ac-text);
  white-space: pre-line;
}

.ac-modal__input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 80px;
  margin-top: var(--ac-space-4);
  padding: var(--ac-space-3);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-md);
  font-family: inherit;
  font-size: var(--ac-text-base);
  line-height: 1.5;
  color: var(--ac-text);
  background: var(--ac-surface);
  resize: vertical;
  transition: border-color var(--ac-duration-fast) var(--ac-ease-out);
}

.ac-modal__input:focus {
  outline: none;
  border-color: var(--ac-primary);
}

.ac-modal__input.hidden {
  display: none;
}

.ac-modal__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ac-space-2);
}

@media (prefers-reduced-motion: reduce) {
  .ac-modal::backdrop,
  .ac-modal__panel {
    transition: none;
  }

  .ac-modal .ac-modal__panel {
    opacity: 1;
    transform: none;
  }

  .ac-modal::backdrop {
    opacity: 1;
  }
}

/* ==========================================================================
   Content step & viewer modal
   ========================================================================== */

.ac-preview-head-actions {
  margin-top: var(--ac-space-3);
}

.ac-content-modal {
  max-width: min(960px, calc(100vw - var(--ac-space-8)));
}

.ac-content-modal.hidden {
  display: none;
}

.ac-content-modal__panel {
  max-height: calc(100vh - var(--ac-space-8));
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.ac-content-modal__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ac-space-3);
  padding: var(--ac-space-5) var(--ac-space-6);
  border-bottom: 1px solid var(--ac-border);
}

.ac-content-modal__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ac-space-2);
  margin-left: auto;
}

.ac-content-modal__actions .ac-btn--disabled,
.ac-content-modal__actions .ac-btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

.ac-content-modal__title {
  margin: 0;
  flex: 1 1 12rem;
  font-size: var(--ac-text-lg);
  font-weight: var(--ac-font-semibold);
  line-height: 1.3;
}

.ac-content-modal__body {
  padding: var(--ac-space-5) var(--ac-space-6);
  overflow: auto;
}

.ac-content-modal__summary section {
  margin-bottom: var(--ac-space-4);
}

.ac-content-modal__summary h4 {
  margin: 0 0 var(--ac-space-2);
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-font-semibold);
  color: var(--ac-text);
}

.ac-content-modal__summary p {
  margin: 0;
  font-size: var(--ac-text-sm);
  color: var(--ac-text-secondary);
  line-height: 1.5;
}

.ac-content-modal__details {
  margin-top: var(--ac-space-4);
  font-size: var(--ac-text-sm);
}

.ac-content-modal__json {
  margin: var(--ac-space-3) 0 0;
  padding: var(--ac-space-4);
  max-height: 360px;
  overflow: auto;
  background: var(--ac-header-bg);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-sm);
  font-size: var(--ac-text-xs);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.col-actions {
  width: 1%;
  min-width: 88px;
  text-align: right;
  white-space: nowrap;
}

#lib-store-lessons-table .ac-actions-cell {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ac-space-2);
  align-items: center;
}

#lib-store-lessons-table .ac-actions-cell .ac-btn {
  margin-right: 0;
}

.lib-tabs {
  margin-bottom: var(--ac-space-4);
}

.lib-store-health {
  margin-bottom: var(--ac-space-4);
  padding: var(--ac-space-3) var(--ac-space-4);
  font-size: var(--ac-text-sm);
  border-left: 3px solid #d97706;
}

.lib-store-filters {
  flex-wrap: wrap;
}

.lib-store-health-actions {
  margin: calc(-1 * var(--ac-space-3)) 0 var(--ac-space-4);
  font-size: var(--ac-text-sm);
}

.cs-layout--store .cs-detail-panel {
  grid-column: 1 / -1;
}

/* Loading indicators (library + shared) */
.ac-loading-bar {
  display: flex;
  align-items: center;
  gap: var(--ac-space-3);
  padding: var(--ac-space-3) var(--ac-space-4);
  margin-bottom: var(--ac-space-4);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-md);
  background: var(--ac-bg-subtle);
  color: var(--ac-muted);
  font-size: var(--ac-text-sm);
}

.ac-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--ac-border);
  border-top-color: var(--ac-primary);
  border-radius: 50%;
  animation: ac-spin 0.8s linear infinite;
  flex-shrink: 0;
}

.ac-spinner-lg {
  width: 1.75rem;
  height: 1.75rem;
  border-width: 3px;
}

.ac-btn .ac-spinner {
  width: 0.9rem;
  height: 0.9rem;
  vertical-align: -0.15em;
  margin-right: 0.4rem;
}

.ac-spinner-on-primary {
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
}

.ac-btn[aria-busy="true"] {
  cursor: wait;
  pointer-events: none;
}

@keyframes ac-spin {
  to { transform: rotate(360deg); }
}

.ac-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.82);
  border-radius: inherit;
}

.ac-loading-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ac-space-3);
  color: var(--ac-muted);
  font-size: var(--ac-text-sm);
}

#lib-store-lessons-panel,
#lib-lessons-panel {
  position: relative;
}

.lib-store-info {
  margin-bottom: var(--ac-space-4);
  font-size: var(--ac-text-sm);
  line-height: 1.5;
}

.lib-store-info p {
  margin: 0 0 var(--ac-space-2);
}

.lib-store-info p:last-child {
  margin-bottom: 0;
}

.lib-store-info-warn {
  color: var(--ac-warning-text, var(--ac-text));
}

.lib-store-plan-pre {
  margin: var(--ac-space-2) 0 0;
  padding: var(--ac-space-3);
  background: var(--ac-bg);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-sm);
  font-size: var(--ac-text-xs);
  white-space: pre-wrap;
  max-height: 12rem;
  overflow: auto;
}

/* Toast notifications */
.ac-toast-stack {
  position: fixed;
  top: var(--ac-space-4);
  right: var(--ac-space-4);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-2);
  max-width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}

.ac-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--ac-space-3);
  padding: var(--ac-space-3) var(--ac-space-4);
  background: var(--ac-surface);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  font-size: var(--ac-text-sm);
  line-height: 1.45;
  pointer-events: auto;
  animation: ac-toast-in 0.2s ease-out;
}

.ac-toast--leaving {
  animation: ac-toast-out 0.2s ease-in forwards;
}

@keyframes ac-toast-in {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ac-toast-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-0.5rem); }
}

.ac-toast--success { border-left: 3px solid var(--ac-success); }
.ac-toast--warning { border-left: 3px solid var(--ac-warning); }
.ac-toast--error { border-left: 3px solid var(--ac-danger); }
.ac-toast--info { border-left: 3px solid var(--ac-info); }

.ac-toast__message {
  flex: 1;
  margin: 0;
  color: var(--ac-text);
}

.ac-toast__action {
  display: block;
  margin-top: var(--ac-space-2);
  font-size: var(--ac-text-xs);
  font-weight: var(--ac-font-medium);
  color: var(--ac-text);
  text-decoration: underline;
}

.ac-toast__action:hover {
  color: var(--ac-primary-hover);
}

.ac-toast__close {
  flex-shrink: 0;
  margin: -0.125rem -0.25rem 0 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ac-muted);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}

.ac-toast__close:hover {
  color: var(--ac-text);
}

/* App bar job badge */
.app-bar-jobs-badge {
  display: inline-flex;
  align-items: center;
  margin-left: var(--ac-space-4);
  padding: 0.125rem var(--ac-space-2);
  font-size: var(--ac-text-xs);
  font-weight: var(--ac-font-medium);
  color: var(--ac-warning-text);
  background: var(--ac-warning-subtle);
  border: 1px solid var(--ac-warning-border);
  border-radius: var(--ac-radius-full);
  text-decoration: none;
  white-space: nowrap;
}

.app-bar-jobs-badge:hover {
  color: var(--ac-warning-text);
  background: var(--ac-warning-border);
}

.app-bar-jobs-badge.hidden {
  display: none;
}