/* ==========================================================================
   NTE Materials
   Design system — White Lab / Indigo Signal
   Pure-white canvas + cool ink + one indigo interaction accent. The deliberately
   restrained geometry keeps the research-workbench character distinct from a
   rounded, teal editorial dashboard.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layer 1 · Primitives — raw values, named for what they ARE
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Neutral ramp — achromatic. In Sharp Geometric, pure gray is the statement. */
  --gray-0:   oklch(100% 0 0);
  --gray-25:  oklch(98.6% 0 0);
  --gray-50:  oklch(97.2% 0 0);
  --gray-100: oklch(94.4% 0 0);
  --gray-150: oklch(91.5% 0 0);
  --gray-200: oklch(88% 0 0);
  --gray-300: oklch(80% 0 0);
  --gray-400: oklch(66% 0 0);
  --gray-500: oklch(53% 0 0);
  --gray-600: oklch(43% 0 0);
  --gray-700: oklch(34% 0 0);
  --gray-800: oklch(25% 0 0);
  --gray-900: oklch(17.5% 0 0);
  --gray-950: oklch(11% 0 0);

  /* Accent — indigo signal. Keep NTE blue / PTE red reserved for data semantics. */
  --accent-50:  oklch(97.5% 0.018 255);
  --accent-100: oklch(94.5% 0.040 255);
  --accent-200: oklch(88.5% 0.085 255);
  --accent-300: oklch(79% 0.135 255);
  --accent-400: oklch(67% 0.175 255);
  --accent-500: oklch(57% 0.185 255);
  --accent-600: oklch(49% 0.175 255);
  --accent-700: oklch(40% 0.145 255);
  --accent-800: oklch(32% 0.110 255);
  --accent-900: oklch(24% 0.075 255);

  /* Semantic bases */
  --green-200: oklch(92% 0.05 155);
  --green-400: oklch(70% 0.13 155);
  --green-500: oklch(56% 0.135 155);
  --green-600: oklch(46% 0.125 155);
  --amber-200: oklch(92% 0.06 58);
  --amber-400: oklch(76% 0.145 58);
  --amber-600: oklch(55% 0.14 58);
  --amber-700: oklch(45% 0.12 58);
  --red-200:   oklch(93% 0.05 25);
  --red-400:   oklch(64% 0.185 25);
  --red-500:   oklch(55% 0.2 25);
  --red-600:   oklch(46% 0.185 25);
  --blue-200:  oklch(92% 0.045 245);
  --blue-400:  oklch(68% 0.11 245);
  --blue-600:  oklch(48% 0.14 245);

  /* Data colors — paper convention (Fig. 1d), never used for UI chrome */
  --data-nte: #4477aa;
  --data-pte: #fd3827;
  --data-nte-soft: rgba(68, 119, 170, 0.78);
  --data-pte-soft: rgba(253, 56, 39, 0.72);

  /* Type */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter,
               "Helvetica Neue", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", "Cascadia Mono",
               Consolas, "Liberation Mono", monospace;

  --text-2xs: 0.6875rem;  /* 11px — instrument micro-labels */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.8125rem;  /* 13px */
  --text-base: 0.875rem;  /* 14px — dense UI body */
  --text-md:  0.9375rem;  /* 15px */
  --text-lg:  1.0625rem;  /* 17px */
  --text-xl:  1.25rem;    /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px — hero metric */

  --leading-none:   1;
  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.022em;
  --tracking-snug:  -0.011em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.09em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Spacing — 4pt base so dense surfaces can use half steps */
  --space-2xs: 0.125rem;  /* 2px  */
  --space-xs:  0.25rem;   /* 4px  */
  --space-sm:  0.5rem;    /* 8px  */
  --space-md:  0.75rem;   /* 12px */
  --space-lg:  1rem;      /* 16px */
  --space-xl:  1.5rem;    /* 24px */
  --space-2xl: 2rem;      /* 32px */
  --space-3xl: 3rem;      /* 48px */

  /* Radii — hard edges. Vary by element; uniform radius is the AI tell. */
  --radius-none: 0;
  --radius-xs:   0.0625rem; /* 1px */
  --radius-sm:   0.125rem;  /* 2px — inputs, buttons */
  --radius-md:   0.1875rem; /* 3px — cards, panels */
  --radius-lg:   0.3125rem; /* 5px — large surfaces */
  --radius-full: 9999px;    /* pills, dots only */

  /* Elevation — hairline-first; shadows reserved for floating layers */
  --shadow-xs: 0 1px 2px oklch(24% 0.035 255 / 0.045);
  --shadow-sm: 0 1px 2px oklch(24% 0.035 255 / 0.055), 0 1px 1px oklch(24% 0.035 255 / 0.025);
  --shadow-md: 0 2px 4px oklch(24% 0.035 255 / 0.065), 0 4px 10px oklch(24% 0.035 255 / 0.045);
  --shadow-lg: 0 8px 18px oklch(24% 0.035 255 / 0.085), 0 2px 6px oklch(24% 0.035 255 / 0.045);
  --shadow-xl: 0 18px 38px oklch(24% 0.035 255 / 0.16), 0 4px 12px oklch(24% 0.035 255 / 0.065);

  /* Motion — restrained. Exit faster than enter. */
  --duration-instant: 80ms;
  --duration-fast:    140ms;
  --duration-normal:  190ms;
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index — semantic layers */
  --z-base:      0;
  --z-raised:    1;
  --z-sticky:    20;
  --z-overlay:   30;
  --z-widget:    40;
  --z-tooltip:   60;

  /* Layout */
  --shell-max: 1560px;
  --nav-height: 47px;
}

/* --------------------------------------------------------------------------
   Layer 2 · Semantics — contextual meaning
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --surface-canvas:  var(--gray-0);
  --surface-raised:  var(--gray-0);
  --surface-sunken:  oklch(96.8% 0.012 255);
  --surface-inset:   oklch(98.7% 0.008 255);
  --surface-inverse: oklch(22% 0.035 255);

  /* Text */
  --text-primary:   oklch(23% 0.035 255);
  --text-secondary: oklch(43% 0.030 255);
  --text-tertiary:  oklch(58% 0.022 255);
  --text-inverse:   oklch(98.7% 0.008 255);
  --text-link:      var(--accent-700);

  /* Borders — hairline system */
  --border-hairline: oklch(30% 0.035 255 / 0.075);
  --border-subtle:   oklch(30% 0.035 255 / 0.125);
  --border-default:  oklch(30% 0.035 255 / 0.19);
  --border-strong:   oklch(30% 0.035 255 / 0.34);
  --border-focus:    var(--accent-500);

  /* Accent */
  --accent-bg:        var(--accent-600);
  --accent-bg-hover:  var(--accent-700);
  --accent-bg-active: var(--accent-800);
  --accent-text:      var(--gray-0);
  --accent-tint:      var(--accent-50);

  /* Status — bg / text / border */
  --success-bg:     oklch(97% 0.03 155);
  --success-text:   var(--green-600);
  --success-border: var(--green-400);
  --warning-bg:     oklch(97.5% 0.035 58);
  --warning-text:   var(--amber-700);
  --warning-border: var(--amber-400);
  --error-bg:       oklch(97.5% 0.03 25);
  --error-text:     var(--red-600);
  --error-border:   var(--red-400);
  --info-bg:        oklch(97.5% 0.025 245);
  --info-text:      var(--blue-600);
  --info-border:    var(--blue-400);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { background: #fff; }

body {
  margin: 0;
  color: var(--text-primary);
  background: var(--surface-canvas);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
h1 { font-size: clamp(1.3rem, 2.4vw, 1.72rem); line-height: var(--leading-tight); }
h2 { margin-bottom: var(--space-md); font-size: var(--text-lg); line-height: var(--leading-snug); }
h3 { font-size: var(--text-md); }
h4 { font-size: var(--text-base); }

p { margin: 0; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Monospace micro-label — the signature instrument detail */
.eyebrow {
  margin: 0 0 var(--space-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.muted, .curve-note { color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-snug); }
.curve-note { margin: var(--space-sm) 0 0; }

/* Numbers and identifiers read as instrument output */
.mono, code, kbd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
code { font-size: 0.92em; }

/* --------------------------------------------------------------------------
   Shell · Header
   -------------------------------------------------------------------------- */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-lg) clamp(16px, 4vw, 40px);
  border-top: 3px solid var(--accent-500);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-raised);
}
header > div { min-width: 0; }
header .eyebrow { color: var(--accent-700); }
.site-brand { display: flex; align-items: center; gap: var(--space-md); }
.site-brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--accent-300);
  border-radius: var(--radius-sm);
  color: var(--accent-800);
  background: var(--accent-50);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: -0.04em;
  text-decoration: none;
}
.site-brand-mark:hover { color: var(--accent-900); background: var(--accent-100); text-decoration: none; }
.site-brand-copy h1 { font-size: clamp(1.18rem, 2.1vw, 1.52rem); }

.status {
  flex: 0 0 auto;
  padding: 5px 11px;
  border: 1px solid var(--accent-200);
  border-radius: var(--radius-full);
  background: var(--accent-50);
  color: var(--accent-700);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Shell · Navigation
   -------------------------------------------------------------------------- */
.workspace-nav {
  position: sticky;
  z-index: var(--z-sticky);
  top: 0;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-raised);
  box-shadow: 0 1px 0 var(--border-hairline);
}
.workspace-nav-inner {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  overflow-x: auto;
  overflow-y: hidden;
  /* Keep horizontal touch/trackpad scrolling on narrow screens without
     exposing a second, vertical scrollbar beside a single nav row. */
  scrollbar-gutter: auto;
  scrollbar-width: none;
}
.workspace-nav-inner::-webkit-scrollbar { display: none; width: 0; height: 0; }
.workspace-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 0 0 auto;
  padding: 14px 17px 13px;
  border: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}
.workspace-nav a span {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 1px 5px 0;
  border: 1px solid var(--border-hairline);
  border-radius: 4px;
  color: var(--text-tertiary);
  background: var(--surface-inset);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-wide);
  transition: color var(--duration-fast) var(--ease-standard);
}
.workspace-nav a:hover { color: var(--accent-700); background: var(--accent-50); text-decoration: none; }
.workspace-nav a:hover span { color: var(--accent-700); }
.workspace-nav a[aria-current="page"] { color: var(--text-primary); font-weight: var(--weight-semibold); }
.workspace-nav a[aria-current="page"] span {
  color: var(--accent-700);
  border-color: var(--accent-200);
  background: var(--accent-50);
}
.workspace-nav a[aria-current="page"]::after {
  position: absolute;
  right: 15px;
  bottom: -1px;
  left: 15px;
  height: 2px;
  background: var(--accent-500);
  content: "";
}
.workspace-nav a.has-context::before {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 6px;
  height: 6px;
  border: 2px solid var(--gray-0);
  border-radius: 50%;
  background: var(--accent-500);
  content: "";
}

/* --------------------------------------------------------------------------
   Shell · Material context rail
   -------------------------------------------------------------------------- */
.material-context {
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-inset);
}
.material-context[hidden] { display: none; }
.material-context-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg);
}
.material-context-identity { display: flex; align-items: center; gap: var(--space-md); min-width: 0; }
.material-context-identity > div { display: flex; align-items: baseline; gap: var(--space-sm); min-width: 0; }
.material-context-identity strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.material-context-identity div span {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.material-context-source, .material-context-classification {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
}
.material-context-source { color: var(--accent-800); background: var(--accent-100); }
.material-context-classification { color: var(--gray-600); background: var(--gray-150); }
.material-context-classification.nte { color: var(--blue-600); background: var(--blue-200); }
.material-context-classification.pte { color: var(--red-600); background: var(--red-200); }
.material-context-actions { display: flex; align-items: center; gap: var(--space-sm); flex: 0 0 auto; }
.material-context-actions button { padding: 6px 11px; font-size: var(--text-xs); }
.material-context-actions button:disabled { cursor: default; opacity: 0.45; }
.material-context-actions .context-clear {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border-color: transparent;
  color: var(--text-tertiary);
  background: transparent;
  font-size: 1.05rem;
}
.material-context-actions .context-clear:hover { color: var(--red-600); background: var(--error-bg); }

/* --------------------------------------------------------------------------
   Shell · Main / page switching
   -------------------------------------------------------------------------- */
main { max-width: var(--shell-max); margin: 0 auto; padding: var(--space-xl) var(--space-lg); }
.workspace-page[hidden] { display: none !important; }
.workspace-page { animation: page-enter var(--duration-normal) var(--ease-out); }
@keyframes page-enter { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --------------------------------------------------------------------------
   Primitives · Form controls
   -------------------------------------------------------------------------- */
input, textarea, select {
  width: 100%;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  background: var(--surface-raised);
  font: inherit;
  font-size: var(--text-sm);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
textarea { resize: none; line-height: var(--leading-snug); }
input::placeholder, textarea::placeholder { color: var(--text-tertiary); }
input:focus-visible, textarea:focus-visible, select:focus-visible,
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px oklch(57% 0.185 255 / 0.16);
}
input[type="number"] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--accent-600); cursor: pointer; }
input[type="file"] { padding: 7px; font-size: var(--text-xs); }
select { cursor: pointer; }

label {
  display: grid;
  gap: var(--space-xs);
  min-width: 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug);
}

button {
  border: 1px solid var(--accent-600);
  border-radius: var(--radius-sm);
  padding: 7px 13px;
  color: var(--accent-text);
  background: var(--accent-bg);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
button:hover { background: var(--accent-bg-hover); border-color: var(--accent-800); }
button:active { background: var(--accent-bg-active); border-color: var(--accent-900); }
button:disabled { cursor: not-allowed; opacity: 0.42; }

.secondary-button {
  border-color: var(--border-default);
  color: var(--text-primary);
  background: var(--surface-raised);
}
.secondary-button:hover { color: var(--accent-700); background: var(--accent-50); border-color: var(--accent-300); }
.secondary-button:active { background: var(--gray-150); }
.danger-button { border-color: var(--error-border); color: var(--red-600); background: var(--error-bg); }
.danger-button:hover { background: var(--red-200); border-color: var(--red-400); }

form { display: grid; gap: var(--space-sm); }
.row { display: flex; gap: var(--space-sm); align-items: center; }
pre {
  min-height: 56px;
  margin: 0;
  padding: var(--space-md);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

summary {
  cursor: pointer;
  color: var(--accent-700);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
summary:hover { color: var(--accent-800); }

/* --------------------------------------------------------------------------
   Primitives · Panels & surfaces
   -------------------------------------------------------------------------- */
.panel, .stat {
  min-width: 0;
  padding: var(--space-lg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.panel { box-shadow: var(--shadow-xs); }
.stats, .grid { display: grid; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.two { grid-template-columns: 1.1fr 0.9fr; }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat strong {
  display: block;
  margin-top: var(--space-xs);
  color: var(--text-primary);
  font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}
.stat span { color: var(--text-secondary); font-size: var(--text-xs); }

.placeholder { color: var(--text-tertiary); min-height: 180px; font-size: var(--text-sm); }
.detail-loading { min-height: 650px; }
.detail-skeleton { display: grid; gap: var(--space-md); }
.skeleton-line, .skeleton-block, .skeleton-table {
  border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--surface-inset), var(--surface-sunken), var(--surface-inset));
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.35s ease-in-out infinite;
}
.skeleton-line { width: 42%; height: 14px; }
.skeleton-eyebrow { width: 92px; height: 10px; }
.skeleton-title { width: 220px; height: 30px; }
.skeleton-overview { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(220px, .82fr); gap: var(--space-md); }
.skeleton-block { min-height: 420px; }
.skeleton-side { display: grid; align-content: start; gap: var(--space-sm); padding: var(--space-md); }
.skeleton-side .skeleton-line { width: 100%; height: 42px; }
.skeleton-section { width: 180px; height: 20px; margin-top: var(--space-md); }
.skeleton-table { min-height: 180px; }
@keyframes skeleton-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton-line, .skeleton-block, .skeleton-table { animation: none; } }

/* --------------------------------------------------------------------------
   Primitives · Tables
   -------------------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { border-bottom: 1px solid var(--border-hairline); padding: 8px 6px; text-align: left; vertical-align: top; }
th {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug);
  white-space: nowrap;
}
tbody tr { transition: background-color var(--duration-instant) var(--ease-standard); }
tbody tr:hover { background: var(--surface-canvas); }
td { font-variant-numeric: tabular-nums; }
td button { padding: 3px 8px; font-size: var(--text-xs); }
.table-wrap { max-height: 500px; overflow: auto; scrollbar-gutter: stable; margin-top: var(--space-md); }
.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;
}

/* --------------------------------------------------------------------------
   Page · Database
   -------------------------------------------------------------------------- */
.material-workspace {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.catalog-panel { padding-bottom: var(--space-md); }
.detail-panel { scroll-margin-top: calc(var(--nav-height) + var(--space-md)); }
.material-detail-page { display: grid; gap: var(--space-md); }
.material-route-bar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: 34px;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}
.material-back-link {
  color: var(--accent-700);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.material-back-link:hover { color: var(--accent-900); text-decoration: underline; }
.material-route-bar > span { padding-left: var(--space-md); border-left: 1px solid var(--border-default); }
.catalog-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
}
.catalog-title-block { min-width: 0; }
.catalog-title-block h2 { margin-bottom: var(--space-2xs); }
.catalog-title-block p { margin: 0; }
.catalog-heading-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-md);
  min-width: 0;
}
.catalog-stats {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.catalog-stats strong {
  color: var(--text-primary);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}
.catalog-stats-meta { color: var(--text-tertiary); }
.catalog-view-summary {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  color: var(--accent-800);
  background: var(--accent-50);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.catalog-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); }
.search-field {
  position: relative;
  display: block;
  min-width: 0;
}
.search-field-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--text-tertiary);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  pointer-events: none;
}
.search-field input { min-height: 44px; padding-left: 38px; }
.catalog-search-row > button { min-height: 44px; min-width: 76px; }
.catalog-filter-details {
  margin-top: var(--space-sm);
  border-top: 1px solid var(--border-hairline);
}
.catalog-filter-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 9px 2px 8px;
  color: var(--text-secondary);
  list-style: none;
  user-select: none;
}
.catalog-filter-details summary::-webkit-details-marker { display: none; }
.catalog-filter-details summary::after {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  content: "";
  transition: transform var(--duration-fast) var(--ease-standard);
}
.catalog-filter-details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.catalog-filter-summary-title { font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.catalog-filter-summary-hint {
  overflow: hidden;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.catalog-analysis-toolbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); padding: 2px 0 var(--space-sm); }
.catalog-analysis-toolbar label { gap: 5px; color: var(--text-tertiary); font-size: var(--text-2xs); }
.catalog-analysis-toolbar select { padding: 6px 8px; font-size: var(--text-xs); }

.element-filter-details { margin-top: var(--space-sm); }
.element-filter-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 9px 2px 8px;
  border-top: 1px solid var(--border-hairline);
  color: var(--text-secondary);
  list-style: none;
  user-select: none;
}
.element-filter-details > summary::-webkit-details-marker { display: none; }
.element-filter-details > summary::after {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  content: "";
  transition: transform var(--duration-fast) var(--ease-standard);
}
.element-filter-details[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.element-filter-summary {
  overflow: hidden;
  margin-left: auto;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-catalog-table { min-width: 650px; }
.material-catalog-table thead { position: sticky; z-index: var(--z-raised); top: 0; background: var(--surface-raised); }
.material-catalog-table th { border-bottom-color: var(--border-default); }
.material-catalog-table th:nth-child(n + 3),
.material-catalog-table td:nth-child(n + 3) { text-align: right; }
.material-catalog-table th:nth-child(2), .material-catalog-table td:nth-child(2) { text-align: left; }
.material-catalog-table .table-unit {
  display: inline-block;
  color: var(--text-tertiary);
  font-size: 0.82em;
  font-weight: var(--weight-regular);
  letter-spacing: 0;
}
.material-catalog-table .material-formula { color: var(--text-primary); font-weight: var(--weight-medium); white-space: nowrap; }
.material-catalog-table .material-mp-id { font-family: var(--font-mono); font-size: var(--text-xs); white-space: nowrap; }
.material-record-link { color: inherit; text-decoration: none; }
.material-record-link:hover { color: var(--accent-800); text-decoration: underline; text-underline-offset: 3px; }
.material-catalog-table tbody tr:hover { background: var(--accent-50); }

/* Element filter + periodic table */
.element-filter {
  margin-top: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-inset);
}
.element-filter-toolbar { display: flex; align-items: center; gap: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); }
.element-mode { display: inline-flex; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-raised); }
.element-mode button {
  padding: 6px 11px;
  border: 0;
  border-radius: 0;
  color: var(--text-secondary);
  background: transparent;
  font-size: var(--text-xs);
  box-shadow: none;
}
.element-mode button + button { border-left: 1px solid var(--border-subtle); }
.element-mode button:hover { color: var(--text-primary); background: var(--surface-sunken); }
.element-mode button.active { color: var(--accent-text); background: var(--accent-600); }
.element-selection {
  flex: 1 1 auto;
  min-width: 120px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
}
.periodic-table-scroll { overflow-x: auto; scrollbar-gutter: stable; padding: 2px 1px 6px; }
.periodic-table {
  --element-cell: clamp(28px, 2.7vw, 38px);
  display: grid;
  grid-template-columns: repeat(18, var(--element-cell));
  grid-template-rows: repeat(9, var(--element-cell));
  gap: 2px;
  width: max-content;
  min-width: 100%;
  justify-content: center;
}
.periodic-element {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--element-cell);
  height: var(--element-cell);
  padding: 0;
  border: 1px solid oklch(0% 0 0 / 0.1);
  border-radius: var(--radius-xs);
  color: var(--gray-900);
  background: var(--gray-150);
  font-family: var(--font-mono);
  font-size: clamp(0.6rem, 1.2vw, 0.72rem);
  font-weight: var(--weight-semibold);
  box-shadow: none;
  transition: background-color var(--duration-instant) var(--ease-standard),
              border-color var(--duration-instant) var(--ease-standard);
}
.periodic-element:hover { color: var(--gray-950); background: var(--element-color); border-color: var(--gray-700); }
.periodic-element.selected {
  color: var(--accent-text);
  border-color: var(--accent-800);
  background: var(--accent-600);
  box-shadow: 0 0 0 2px oklch(57% 0.185 255 / 0.25);
}
.periodic-element.unavailable { opacity: 0.28; filter: grayscale(0.7); }
.periodic-placeholder, .periodic-series-label {
  display: grid;
  place-items: center;
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-xs);
  color: var(--text-tertiary);
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
}
.periodic-series-label { justify-items: end; padding-right: 6px; border-color: transparent; }

/* Muted instrument-grade element palette */
.element-family-alkali          { --element-color: oklch(88% 0.10 100); background: oklch(93% 0.055 100); }
.element-family-alkaline        { --element-color: oklch(87% 0.09 155); background: oklch(93% 0.05 155); }
.element-family-transition      { --element-color: oklch(82% 0.08 230); background: oklch(91% 0.045 230); }
.element-family-post-transition { --element-color: oklch(84% 0.03 250); background: oklch(92% 0.015 250); }
.element-family-metalloid       { --element-color: oklch(80% 0.10 45);  background: oklch(91% 0.055 45); }
.element-family-nonmetal        { --element-color: oklch(83% 0.06 130); background: oklch(92% 0.03 130); }
.element-family-halogen         { --element-color: oklch(86% 0.10 85);  background: oklch(93% 0.055 85); }
.element-family-noble           { --element-color: oklch(82% 0.09 300); background: oklch(92% 0.05 300); }
.element-family-lanthanide      { --element-color: oklch(90% 0.11 95);  background: oklch(95% 0.06 95); }
.element-family-actinide        { --element-color: oklch(86% 0.10 60);  background: oklch(93% 0.055 60); }

.detail-panel .property-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.property-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--space-md); margin: var(--space-md) 0; }
.property-grid div { padding: var(--space-sm) var(--space-md); border: 1px solid var(--border-hairline); border-radius: var(--radius-xs); background: var(--surface-inset); }
.property-grid dt { color: var(--text-tertiary); font-size: var(--text-2xs); }
.property-grid dd { margin: 3px 0 0; font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); overflow-wrap: anywhere; }

.provenance-card { margin: var(--space-md) 0; padding: var(--space-md); border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); background: var(--surface-inset); }
.provenance-card h3 { margin: 0 0 var(--space-sm); font-size: var(--text-base); }
.provenance-card dl { display: grid; grid-template-columns: minmax(110px, 0.25fr) 1fr; gap: var(--space-sm) var(--space-md); margin: 0; }
.provenance-card dt { color: var(--text-tertiary); font-size: var(--text-2xs); }
.provenance-card dd { margin: 0; color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-snug); overflow-wrap: anywhere; }

/* Material detail — MP-style split view: the selected structure stays in the
   first viewport beside the metrics, while the tensor-aware curves follow
   below as the only thermal-expansion plot on this surface. */
.material-detail-identity {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}
.material-detail-identity h3 { margin: 0; color: var(--text-primary); font-size: var(--text-xl); letter-spacing: var(--tracking-tight); }
.material-detail-eyebrow, .detail-card-kicker {
  margin: 0 0 3px;
  color: var(--text-tertiary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.material-detail-id { margin: 4px 0 0; color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--text-xs); }
.material-detail-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(220px, 0.82fr);
  gap: var(--space-md);
  align-items: start;
  margin-top: var(--space-md);
}
.material-detail-overview .structure-panel { margin: 0; }
.material-detail-overview .structure-heading h3 { white-space: nowrap; }
.material-properties-card {
  min-width: 0;
  padding: var(--space-md);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-inset);
}
.detail-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.detail-card-heading h3 { margin: 0; font-size: var(--text-base); }
.elastic-status {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  background: var(--surface-raised);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  white-space: nowrap;
}
.elastic-status.available { color: var(--success-text); border-color: var(--success-border); background: var(--success-bg); }
.elastic-status.missing { color: var(--text-tertiary); }
.detail-panel .detail-property-grid { grid-template-columns: 1fr; margin: 0; }
.detail-property-grid div { padding: 8px 9px; }
.detail-property-grid .featured {
  grid-column: 1 / -1;
  border-color: var(--accent-300);
  background: var(--accent-50);
}
.detail-property-grid .featured dd { color: var(--accent-800); font-size: var(--text-lg); }
.detail-download-actions { margin: var(--space-md) 0 0; padding-top: var(--space-md); border-top: 1px solid var(--border-hairline); }
.detail-download-actions a { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.material-detail-anisotropic { margin-top: var(--space-lg); }
.material-detail-anisotropic .thermal-panel { margin: 0; }
.material-detail-overview .structure-viewer { height: 420px; }

/* Properties — a compact MP-style section with the tensor as the primary
   artifact and derived mechanical values kept beside it.  The surface stays
   intentionally quiet so the matrix reads as data rather than another hero. */
.material-properties {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-subtle);
}
.properties-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}
.properties-heading h2 { margin: 0; font-size: var(--text-xl); }
.properties-count {
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  line-height: var(--leading-snug);
  text-align: right;
}
.properties-tabs {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-default);
}
.properties-tab {
  position: relative;
  min-height: 36px;
  padding: 7px 12px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--text-secondary);
  background: transparent;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}
.properties-tab:hover:not(:disabled) { color: var(--accent-800); background: var(--accent-50); }
.properties-tab.active { color: var(--accent-800); border-bottom-color: var(--accent-600); }
.properties-tab:disabled { color: var(--text-tertiary); cursor: not-allowed; opacity: 0.68; }
.properties-tab span { margin-left: 4px; color: var(--text-tertiary); font-size: var(--text-2xs); font-weight: var(--weight-regular); }
.properties-panel { min-width: 0; }
.mechanical-property-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(280px, 0.84fr);
  gap: var(--space-md);
  align-items: start;
}
.mechanical-tensor-card,
.detail-descriptors-card {
  min-width: 0;
  padding: var(--space-md);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-inset);
}
.property-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.property-section-heading h3 { margin: 0; font-size: var(--text-base); }
.property-section-heading .curve-note { margin: 3px 0 0; }
.descriptor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  margin: 0;
}
.descriptor-metric {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-xs);
  background: var(--surface-raised);
}
.descriptor-metric dt { color: var(--text-tertiary); font-size: var(--text-2xs); line-height: var(--leading-snug); }
.descriptor-metric dd {
  margin: 4px 0 0;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}
.elastic-tensor-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.elastic-tensor-table {
  min-width: 410px;
  margin: 0;
  border-collapse: collapse;
  background: var(--surface-raised);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
.elastic-tensor-table th,
.elastic-tensor-table td {
  min-width: 51px;
  padding: 7px 8px;
  border: 1px solid var(--border-hairline);
  text-align: right;
  white-space: nowrap;
}
.elastic-tensor-table thead th,
.elastic-tensor-table tbody th {
  color: var(--text-secondary);
  background: var(--surface-sunken);
  font-weight: var(--weight-semibold);
}
.elastic-tensor-table thead th:first-child,
.elastic-tensor-table tbody th { text-align: center; }
.elastic-tensor-table tbody tr:hover td { background: var(--accent-50); }
.property-footnote { margin: var(--space-sm) 0 0; color: var(--text-tertiary); font-size: var(--text-2xs); line-height: var(--leading-snug); }
.property-empty { padding: var(--space-md) 0; color: var(--text-tertiary); font-size: var(--text-xs); }
.properties-panel-placeholder {
  padding: var(--space-lg);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-inset);
}
.properties-panel-placeholder h3 { margin: 0 0 var(--space-xs); font-size: var(--text-base); }
.properties-panel-placeholder p { margin: 0; }
.phonon-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
}
.phonon-panel-heading strong { color: var(--text-primary); font-size: var(--text-md); }
.phonon-panel-heading p { margin: 4px 0 0; }
.phonon-figures {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(220px, 0.8fr);
  max-width: 980px;
  margin-inline: auto;
  gap: var(--space-md);
  align-items: start;
}
.phonon-figure,
.phonon-combined-figure {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-xs);
  background: #fff;
  overflow: hidden;
}
.phonon-combined-figure {
  max-width: 920px;
  margin-inline: auto;
}
.phonon-figure figcaption {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-hairline);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
.phonon-figure img,
.phonon-combined-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 180px;
  object-fit: contain;
}
.phonon-combined-figure img { min-height: 0; }
.phonon-combined-figure figcaption {
  padding: 7px 10px 9px;
  color: var(--text-tertiary);
  font-size: var(--text-2xs);
}
.phonon-empty {
  padding: var(--space-lg) 0;
  color: var(--text-secondary);
}
.phonon-empty strong { color: var(--text-primary); }
.phonon-empty p { margin: 6px 0 0; }

/* Material table rows */
.material-download-actions { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.material-download-actions a {
  padding: 6px 11px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  background: var(--surface-raised);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.material-download-actions a:hover {
  color: var(--accent-800);
  background: var(--accent-50);
  border-color: var(--accent-400);
  text-decoration: none;
}
.material-download-actions { margin: var(--space-sm) 0 var(--space-md); }
.material-download-actions a.secondary-download { color: var(--text-secondary); background: var(--surface-inset); }
.material-download-actions a.secondary-download:hover { color: var(--accent-800); background: var(--accent-50); }

/* --------------------------------------------------------------------------
   Page · Prediction workbench
   -------------------------------------------------------------------------- */
.prediction-workbench { margin-bottom: var(--space-lg); }
.structure-summary { margin: var(--space-sm) 0 var(--space-md); min-height: 22px; }
.method-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-sm);
  margin: calc(-1 * var(--space-xs)) 0 var(--space-md);
  padding: 10px 12px;
  border: 1px solid var(--accent-200);
  border-radius: var(--radius-sm);
  background: var(--accent-50);
  color: var(--text-secondary);
  font-size: var(--text-xs);
}
.method-route[hidden] { display: none; }
.method-route strong { color: var(--accent-700); font-size: var(--text-sm); }
.method-route-arrow { color: var(--accent-500); font-family: var(--font-mono); }
.method-route-reason { color: var(--text-tertiary); text-align: right; }
.method-route.unresolved { border-color: var(--border-strong); background: var(--surface-inset); }
.method-route.unresolved strong { color: var(--text-primary); }
.prediction-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.prediction-actions button {
  min-height: 78px;
  display: grid;
  place-content: center;
  gap: 5px;
  border-color: var(--border-default);
  color: var(--text-primary);
  background: var(--surface-raised);
  text-align: center;
}
.prediction-actions button:hover { border-color: var(--accent-400); background: var(--accent-50); }
.prediction-actions button strong { font-size: var(--text-md); }
.prediction-actions button span { color: var(--text-tertiary); font-family: var(--font-mono); font-size: var(--text-2xs); opacity: 1; }
.prediction-actions button:disabled { cursor: wait; opacity: 0.55; }
.prediction-result {
  min-height: 74px;
  margin-top: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-inset);
}
.prediction-result h3 { margin: 0 0 var(--space-sm); }
.prediction-progress-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.prediction-progress-heading h3 { margin: 0; }
.prediction-status {
  flex: 0 0 auto;
  padding: 3px 8px;
  border: 1px solid var(--accent-200);
  border-radius: var(--radius-full);
  color: var(--accent-800);
  background: var(--accent-50);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}
.prediction-status.error {
  border-color: var(--error-border);
  color: var(--red-600);
  background: var(--error-bg);
}
.prediction-progress-meta, .prediction-progress-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
}
.prediction-progress-meta { margin: 2px 0 var(--space-sm); }
.prediction-progress-meta span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prediction-progress-track {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--gray-150);
}
.prediction-progress-track span {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--accent-500);
  transition: width 220ms var(--ease-standard);
}
.prediction-progress-track.indeterminate span {
  width: 38%;
  animation: prediction-progress-indeterminate 1.25s ease-in-out infinite;
}
@keyframes prediction-progress-indeterminate {
  0% { transform: translateX(-110%); }
  55%, 100% { transform: translateX(290%); }
}
.prediction-progress-foot { margin-top: var(--space-xs); }
.prediction-progress-foot strong { color: var(--text-primary); font-weight: var(--weight-semibold); }
.prediction-error-message { margin: 0 0 var(--space-md); color: var(--red-600); overflow-wrap: anywhere; }
.prediction-result #prediction-retry-button { margin-top: var(--space-md); }
.directional-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin: var(--space-sm) 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
}
.directional-summary strong { color: var(--text-primary); font-family: var(--font-mono); font-weight: 600; }
.context-jump-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin: var(--space-sm) 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-hairline);
  border-left: 2px solid var(--accent-500);
  border-radius: var(--radius-sm);
  background: var(--surface-inset);
}
.context-jump-action span { color: var(--text-secondary); font-size: var(--text-xs); }
.context-jump-action button { flex: 0 0 auto; padding: 6px 11px; font-size: var(--text-xs); }
.prediction-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); }
.prediction-metrics div { padding: var(--space-sm) var(--space-md); border: 1px solid var(--border-hairline); border-radius: var(--radius-xs); background: var(--surface-raised); }
.prediction-metrics span { display: block; color: var(--text-tertiary); font-size: var(--text-2xs); }
.prediction-metrics strong {
  display: block;
  margin-top: 3px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.tensor-table { margin-top: var(--space-md); font-variant-numeric: tabular-nums; }
.prediction-thermal-curve, .thermal-curve {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: var(--space-md);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}

/* --------------------------------------------------------------------------
   Page · Landscape (Fig. 1d)
   -------------------------------------------------------------------------- */
.landscape-wrap { position: relative; }
.landscape-wrap.context-focus { animation: landscape-context-focus 1.1s var(--ease-out); }
@keyframes landscape-context-focus {
  0%   { box-shadow: 0 0 0 0 oklch(57% 0.185 255 / 0.42); }
  35%  { box-shadow: 0 0 0 6px oklch(57% 0.185 255 / 0.16); }
  100% { box-shadow: 0 0 0 0 oklch(57% 0.185 255 / 0); }
}
#landscape {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 11 / 6;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.landscape-tooltip {
  position: absolute;
  z-index: var(--z-tooltip);
  max-width: 268px;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  pointer-events: none;
  box-shadow: var(--shadow-lg);
}
.landscape-tooltip strong { font-family: var(--font-mono); }

/* --------------------------------------------------------------------------
   Page · ZTE composite design
   -------------------------------------------------------------------------- */
.composite-pickers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.composite-pickers > div { min-width: 0; }
.material-select { width: 100%; margin-top: var(--space-sm); }
.composite-window { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: var(--space-md); align-items: end; margin-top: var(--space-md); }
.composite-window button { min-height: 36px; }
.zte-curve {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--space-md);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.zte-fraction-control { margin-top: var(--space-md); padding: var(--space-md); border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); background: var(--surface-inset); }
.zte-fraction-heading { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.zte-fraction-heading strong { color: var(--text-primary); }
.zte-fraction-heading span { color: var(--success-text); font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }
.zte-fraction-heading button { margin-left: auto; padding: 5px 10px; font-size: var(--text-xs); }
.zte-slider-wrap { position: relative; margin: var(--space-md) 2px var(--space-xs); }
.zte-slider-wrap input[type='range'] { display: block; width: 100%; padding: 0; accent-color: var(--accent-600); cursor: ew-resize; }
.zte-best-marker {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 22px;
  border-radius: var(--radius-xs);
  background: var(--accent-600);
  transform: translateX(-50%);
  pointer-events: none;
}
.zte-slider-scale { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); color: var(--text-tertiary); font-family: var(--font-mono); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.zte-slider-scale strong { color: var(--text-primary); }

.zte-mode-tabs {
  display: inline-flex;
  gap: 3px;
  margin: var(--space-md) 0 var(--space-lg);
  padding: 3px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}
.zte-mode-tabs button {
  min-width: 150px;
  border: 0;
  color: var(--text-secondary);
  background: transparent;
  box-shadow: none;
}
.zte-mode-tabs button:hover { color: var(--text-primary); }
.zte-mode-tabs button.active { color: var(--text-primary); background: var(--surface-raised); box-shadow: var(--shadow-xs); }
.zte-mode-panel[hidden], #zte-screen-results[hidden], #zte-screen-matrix-control[hidden],
#zte-screen-majority-control[hidden], #zte-matrix-control[hidden],
.composite-window label[hidden], .zte-target-curve-panel[hidden] { display: none !important; }

.zte-screen-intro {
  display: flex;
  gap: var(--space-sm);
  align-items: baseline;
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--border-hairline);
  border-left: 2px solid var(--success-border);
  border-radius: var(--radius-sm);
  background: var(--success-bg);
  color: var(--text-secondary);
  font-size: var(--text-xs);
}
.zte-screen-intro strong { color: var(--success-text); }
.zte-screen-controls { grid-template-columns: repeat(4, minmax(150px, 1fr)); }
.zte-target-curve-panel {
  margin-top: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-inset);
}
.zte-target-curve-panel > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-sm); color: var(--text-secondary); font-size: var(--text-xs); }
.zte-target-curve-panel strong { color: var(--text-primary); font-size: var(--text-sm); }
.zte-target-curve-panel textarea { width: 100%; min-height: 94px; resize: vertical; font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-snug); }
.zte-target-actions { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-sm); }
.zte-target-actions button, .zte-target-actions .file-button { padding: 5px 11px; font-size: var(--text-xs); }
.file-button {
  display: inline-flex !important;
  align-items: center;
  width: auto;
  min-height: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-primary);
  cursor: pointer;
  font-weight: var(--weight-medium);
}
.file-button:hover { background: var(--surface-sunken); }
.file-button input { display: none; }

.zte-robustness-controls, .zte-engineering-constraints {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-inset);
}
.zte-engineering-constraints summary { color: var(--accent-700); font-weight: var(--weight-semibold); }
.zte-robustness-workspace { margin-top: var(--space-lg); }
.zte-robustness-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-top: var(--space-md); }
.zte-robustness-card { min-width: 0; padding: var(--space-md); border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); background: var(--surface-raised); }
.zte-robustness-card h4 { margin: 0 0 var(--space-xs); }
.zte-robustness-card canvas { display: block; width: 100%; height: 330px; margin-top: var(--space-sm); border: 1px solid var(--border-hairline); border-radius: var(--radius-xs); background: var(--surface-raised); }
.zte-formulation-card {
  margin-top: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--border-hairline);
  border-left: 2px solid var(--success-border);
  border-radius: var(--radius-sm);
  background: var(--success-bg);
}
.zte-formulation-card h4 { margin: 0 0 var(--space-sm); color: var(--success-text); }
.zte-formulation-table { width: 100%; margin: 0; }
.zte-formulation-table th { width: 38%; color: var(--text-secondary); text-align: left; }
.zte-engineering-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: var(--space-md); align-items: end; margin-top: var(--space-md); }
.zte-engineering-grid label { min-width: 0; }
.zte-engineering-summary {
  margin: var(--space-sm) 0 0;
  padding: var(--space-sm) var(--space-md);
  border-left: 2px solid var(--success-border);
  background: var(--success-bg);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}
.zte-engineering-summary strong { color: var(--success-text); }
.zte-checkbox-control { display: flex !important; flex-direction: row !important; align-items: center; gap: var(--space-sm); align-self: end; min-height: 42px; }
.zte-checkbox-control input { width: auto; margin: 0; }

.zte-model-comparison { margin-top: var(--space-md); overflow-x: auto; scrollbar-gutter: stable; }
.zte-model-comparison table { min-width: 850px; }
.zte-model-comparison tr.selected-model td { background: var(--accent-50); font-weight: var(--weight-semibold); }
.zte-screen-results { margin-top: var(--space-lg); overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.zte-screen-results table { min-width: 1480px; margin: 0; }
.zte-screen-results th { position: sticky; top: 0; background: var(--surface-sunken); white-space: nowrap; }
.zte-screen-results td { vertical-align: top; }
.zte-screen-results td strong, .zte-screen-results td small { display: block; }
.zte-screen-results td small { max-width: 230px; margin-top: 3px; color: var(--text-tertiary); overflow-wrap: anywhere; }
.zte-screen-results tr.selected-pair td { background: var(--accent-50); }
.zte-screen-results tr.hovered-pair td { background: var(--surface-canvas); }
.zte-screen-results tr.focused-pair td { box-shadow: inset 0 2px 0 var(--accent-500), inset 0 -2px 0 var(--accent-500); }
.zte-screen-results tr.focused-pair td:first-child { box-shadow: inset 2px 0 0 var(--accent-500), inset 0 2px 0 var(--accent-500), inset 0 -2px 0 var(--accent-500); }
.zte-screen-results tr.focused-pair td:last-child { box-shadow: inset -2px 0 0 var(--accent-500), inset 0 2px 0 var(--accent-500), inset 0 -2px 0 var(--accent-500); }
.zte-pair-checkbox { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent-600); cursor: pointer; }
.zte-open-candidate { white-space: nowrap; }
.zte-row-actions { display: flex; gap: 6px; white-space: nowrap; }
.zte-row-actions button { padding: 5px 10px; font-size: var(--text-2xs); }
.zte-detail-candidate { border-color: var(--border-default); color: var(--text-primary); background: var(--surface-raised); }
.zte-detail-candidate:hover { color: var(--accent-800); background: var(--accent-50); border-color: var(--accent-400); }
.zte-valid { color: var(--success-text); font-weight: var(--weight-semibold); }
.zte-warning { color: var(--amber-700); font-weight: var(--weight-semibold); }

.zte-screen-workspace { display: grid; gap: var(--space-md); margin-top: var(--space-md); }
.zte-screen-workspace[hidden] { display: none !important; }
.zte-screen-toolbar, .zte-project-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-inset);
}
.zte-project-toolbar { margin-top: var(--space-md); }
.zte-screen-toolbar strong { margin-right: auto; font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.zte-screen-toolbar button, .zte-project-toolbar button { padding: 6px 11px; font-size: var(--text-xs); }
.zte-project-toolbar input { flex: 1 1 220px; min-width: 170px; }
.zte-project-toolbar select { flex: 1 1 260px; min-width: 210px; }
.zte-analysis-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.zte-analysis-card { min-width: 0; padding: var(--space-md); border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); background: var(--surface-raised); }
.zte-analysis-card h3 { margin: 0; }
.zte-analysis-card canvas { display: block; width: 100%; height: 360px; margin-top: var(--space-sm); border: 1px solid var(--border-hairline); border-radius: var(--radius-xs); background: var(--surface-raised); }
.zte-pareto-tooltip {
  position: fixed;
  z-index: var(--z-tooltip);
  width: max-content;
  max-width: min(330px, calc(100vw - 16px));
  padding: var(--space-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: oklch(100% 0 0 / 0.97);
  color: var(--text-secondary);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  backdrop-filter: blur(8px);
}
.zte-pareto-tooltip[hidden] { display: none !important; }
.zte-pareto-tooltip > strong { display: block; color: var(--text-primary); font-size: var(--text-sm); line-height: var(--leading-snug); }
.zte-pareto-tooltip > strong span { color: var(--accent-700); }
.zte-pareto-tooltip > small { display: block; margin-top: 3px; color: var(--text-tertiary); font-size: var(--text-2xs); overflow-wrap: anywhere; }
.zte-pareto-tooltip dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs) var(--space-md); margin: var(--space-sm) 0 0; }
.zte-pareto-tooltip dl div { min-width: 0; }
.zte-pareto-tooltip dt { color: var(--text-tertiary); font-size: var(--text-2xs); }
.zte-pareto-tooltip dd { margin: 2px 0 0; color: var(--text-primary); font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); white-space: nowrap; }
.zte-pareto-tooltip p { margin: var(--space-sm) 0 0; padding-top: var(--space-sm); border-top: 1px solid var(--border-hairline); color: var(--text-tertiary); font-size: var(--text-2xs); line-height: var(--leading-snug); }
.zte-selected-comparison { padding: var(--space-md); border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); background: var(--surface-raised); }
.zte-selected-comparison h3 { margin: 0 0 var(--space-sm); }
.zte-comparison-table { overflow-x: auto; scrollbar-gutter: stable; }
.zte-comparison-table table { min-width: 920px; margin: 0; }
.zte-curve-swatch { display: inline-block; width: 18px; height: 3px; margin: 0 7px 2px 0; border-radius: var(--radius-full); vertical-align: middle; }
.zte-project-status { margin: var(--space-sm) 0 0; color: var(--success-text); font-size: var(--text-xs); font-weight: var(--weight-semibold); }

.zte-candidate-detail[hidden], #zte-design-workspace[hidden] { display: none !important; }
.zte-candidate-detail { display: grid; gap: var(--space-lg); margin-top: var(--space-lg); }
.zte-candidate-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-lg);
  align-items: start;
  padding: var(--space-lg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-inset);
}
.zte-candidate-header > button { margin-top: 2px; }
.zte-candidate-header h2 { margin: 3px 0 5px; }
.zte-candidate-header .eyebrow { margin: 0; color: var(--accent-700); }
.zte-candidate-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; justify-content: flex-end; }
.zte-candidate-actions button { padding: 6px 11px; font-size: var(--text-xs); }
.zte-candidate-content { display: grid; gap: var(--space-lg); }
.zte-candidate-content > .prediction-metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.zte-phase-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.zte-phase-card, .zte-candidate-curve-card, .zte-candidate-model-card {
  min-width: 0;
  padding: var(--space-md);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.zte-phase-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-md); margin-bottom: var(--space-md); }
.zte-phase-heading span { color: var(--accent-700); font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); }
.zte-phase-heading h3 { margin: 3px 0 1px; }
.zte-phase-heading small { color: var(--text-tertiary); overflow-wrap: anywhere; }
.zte-phase-downloads { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.zte-phase-downloads a {
  padding: 5px 9px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  background: var(--surface-raised);
  font-size: var(--text-2xs);
  text-decoration: none;
}
.zte-phase-downloads a:hover { color: var(--accent-800); background: var(--accent-50); border-color: var(--accent-400); text-decoration: none; }
.zte-phase-structure { position: relative; width: 100%; height: 330px; overflow: hidden; border: 1px solid var(--border-hairline); border-radius: var(--radius-xs); background: var(--surface-raised); cursor: grab; }
.zte-phase-structure:active { cursor: grabbing; }
.zte-phase-structure canvas { outline: none; }
.zte-phase-card .prediction-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-md); }
.zte-candidate-curve-card h3, .zte-candidate-model-card h3 { margin: 0; }
.zte-candidate-curve-card canvas { display: block; width: 100%; height: 480px; margin-top: var(--space-md); border: 1px solid var(--border-hairline); border-radius: var(--radius-xs); background: var(--surface-raised); }
.zte-candidate-legend { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-sm); color: var(--text-secondary); font-size: var(--text-2xs); }
.zte-candidate-legend span::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 3px;
  margin: 0 6px 2px 0;
  border-radius: var(--radius-full);
  background: var(--legend-color);
  vertical-align: middle;
}
.zte-candidate-legend span.pte { --legend-color: var(--data-pte); }
.zte-candidate-legend span.nte { --legend-color: var(--data-nte); }
.zte-candidate-model-table { margin-top: var(--space-md); overflow-x: auto; scrollbar-gutter: stable; }
.zte-candidate-model-table table { min-width: 1120px; margin: 0; }
.zte-candidate-model-table tr.selected-model td { background: var(--accent-50); font-weight: var(--weight-semibold); }
.zte-model-basis-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-md); }
.zte-model-basis-grid article { min-width: 0; padding: var(--space-sm) var(--space-md); border: 1px solid var(--border-hairline); border-radius: var(--radius-xs); background: var(--surface-inset); }
.zte-model-basis-grid strong { color: var(--text-primary); font-size: var(--text-xs); }
.zte-model-basis-grid p { margin: 5px 0; color: var(--text-tertiary); font-size: var(--text-2xs); }
.zte-model-basis-grid code { display: block; color: var(--text-secondary); font-size: var(--text-2xs); line-height: var(--leading-snug); white-space: normal; overflow-wrap: anywhere; }
.zte-candidate-warning {
  padding: var(--space-md);
  border: 1px solid var(--warning-border);
  border-left: 2px solid var(--amber-400);
  border-radius: var(--radius-sm);
  background: var(--warning-bg);
  color: var(--amber-700);
}
.zte-candidate-warning p { margin: 5px 0 0; font-size: var(--text-xs); line-height: var(--leading-snug); }
.zte-model-note {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-left: 2px solid var(--success-border);
  background: var(--success-bg);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}
.zte-model-note code { white-space: normal; word-break: break-word; }

/* --------------------------------------------------------------------------
   Structure viewer (Crystal Toolkit) + thermal panel
   -------------------------------------------------------------------------- */
.material-visual-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); align-items: stretch; margin: var(--space-lg) 0; }
.material-visual-grid .structure-panel { margin: 0; }
.thermal-panel, .structure-panel {
  min-width: 0;
  padding: var(--space-md);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.thermal-panel { display: flex; flex-direction: column; }
.structure-panel { margin: var(--space-lg) 0; }
.thermal-heading { min-height: 52px; margin-bottom: var(--space-sm); }
.thermal-heading h3 { margin: 0; }
.thermal-heading .curve-note { margin-top: 6px; }
.thermal-panel .thermal-curve { height: 520px; flex: none; margin-top: 0; }
/* Anisotropic variant — full-width, distinguished by an accent rule */
.anisotropic-thermal-panel { border-top: 2px solid var(--accent-500); }
.anisotropic-thermal-panel .thermal-curve { height: 420px; }
.thermal-empty {
  min-height: 520px;
  display: grid;
  place-content: center;
  gap: var(--space-sm);
  padding: var(--space-xl);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-xs);
  background: var(--surface-inset);
  text-align: center;
}
.thermal-empty p { margin: 0; }
.thermal-empty span { max-width: 360px; color: var(--text-tertiary); font-size: var(--text-xs); line-height: var(--leading-snug); }
.structure-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-md); margin-bottom: var(--space-sm); }
.structure-heading h3 { margin: 0; }
.structure-summary-badge {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: var(--radius-full);
  background: var(--accent-100);
  color: var(--accent-800);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}
.structure-stage { position: relative; }
.structure-ctk-stage {
  height: 520px;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xs);
  background: #fff;
}
.structure-ctk-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.structure-open-link {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xs);
  color: var(--accent-800);
  background: var(--surface-inset);
  font-size: var(--text-2xs);
  text-decoration: none;
  white-space: nowrap;
}
.structure-open-link:hover { border-color: var(--accent-400); background: var(--accent-50); }
.structure-viewer {
  position: relative;
  width: 100%;
  height: 520px;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xs);
  background: var(--surface-raised);
  cursor: grab;
}
.structure-viewer:active { cursor: grabbing; }
.structure-viewer canvas { outline: none; }
.structure-viewer-tools {
  position: absolute;
  z-index: 4;
  top: var(--space-md);
  right: var(--space-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: oklch(100% 0 0 / 0.94);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(8px);
}
.structure-viewer-tools button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--border-hairline);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  box-shadow: none;
}
.structure-viewer-tools button:last-child { border-bottom: 0; }
.structure-viewer-tools button:hover { background: var(--accent-50); color: var(--accent-700); }
.structure-viewer-tools svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.structure-settings {
  position: absolute;
  z-index: 5;
  top: 58px;
  right: 62px;
  width: 260px;
  padding: var(--space-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: oklch(100% 0 0 / 0.97);
  box-shadow: var(--shadow-lg);
}
.structure-settings strong { display: block; margin-bottom: var(--space-sm); color: var(--text-primary); font-size: var(--text-sm); }
.structure-settings label { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: var(--space-sm); margin-top: var(--space-sm); color: var(--text-secondary); font-size: var(--text-2xs); }
.structure-settings select { width: 100%; min-height: 30px; padding: 4px 6px; font-size: var(--text-2xs); }
.structure-checkbox { grid-template-columns: 20px minmax(0, 1fr) !important; white-space: nowrap; }
.structure-checkbox input { margin: 0; }
.structure-axis-viewer { position: absolute; z-index: 3; left: var(--space-lg); bottom: var(--space-md); width: 112px; height: 112px; overflow: hidden; border-radius: var(--radius-sm); background: oklch(100% 0 0 / 0.56); pointer-events: none; }
.structure-axis-viewer canvas { outline: none; pointer-events: none; }
.structure-axis-label {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--axis-label-color);
  font: var(--weight-bold) 15px/1 var(--font-mono);
  text-align: center;
  text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.98), 1px -1px 0 rgba(255, 255, 255, 0.98),
               -1px 1px 0 rgba(255, 255, 255, 0.98), 1px 1px 0 rgba(255, 255, 255, 0.98),
               0 1px 4px rgba(36, 48, 64, 0.28);
  transform: translate(-50%, -50%);
}
.structure-axis-label-x { --axis-label-color: #c0392b; }
.structure-axis-label-y { --axis-label-color: #1e8449; }
.structure-axis-label-z { --axis-label-color: #21618c; }
.structure-element-legend { position: absolute; z-index: 3; right: var(--space-xl); bottom: var(--space-lg); display: flex; gap: var(--space-sm); flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 110px); pointer-events: none; }
.structure-element-legend span {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 10px;
  border: 1px solid oklch(0% 0 0 / 0.14);
  border-radius: var(--radius-full);
  background: var(--element-color);
  color: var(--gray-950);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-xs);
}
.structure-atom-info { min-height: 20px; margin: var(--space-sm) 2px 0; color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--text-2xs); }
.structure-error { display: grid; place-items: center; height: 100%; margin: 0; padding: var(--space-xl); color: var(--red-600); text-align: center; }
.structure-panel:fullscreen { padding: var(--space-xl); background: var(--surface-canvas); }
.structure-panel:fullscreen .structure-viewer { height: calc(100vh - 125px); }
.structure-panel:fullscreen .structure-ctk-stage { height: calc(100vh - 125px); }

/* --------------------------------------------------------------------------
   Agent widget
   -------------------------------------------------------------------------- */
.agent-widget {
  position: fixed;
  z-index: var(--z-widget);
  right: var(--space-xl);
  bottom: var(--space-xl);
  width: min(408px, calc(100vw - 28px));
  height: min(570px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-xl);
  transition: height var(--duration-normal) var(--ease-standard);
}
.agent-widget.agent-unconfigured { display: none; }
.agent-widget.collapsed { height: 60px; }
.agent-header {
  min-height: 60px;
  padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  border-top: 3px solid var(--accent-500);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-raised);
  color: var(--text-primary);
}
.agent-identity { min-width: 0; display: flex; align-items: center; gap: var(--space-sm); }
.agent-identity > div { min-width: 0; display: grid; gap: 2px; }
.agent-identity strong { font-size: var(--text-md); letter-spacing: var(--tracking-snug); }
.agent-identity span:last-child { overflow: hidden; color: var(--text-tertiary); font-size: var(--text-2xs); text-overflow: ellipsis; white-space: nowrap; }
.agent-status-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--amber-400); box-shadow: 0 0 0 3px oklch(100% 0 0 / 0.14); }
.agent-status-dot.online { background: var(--green-400); }
.agent-status-dot.offline { background: var(--red-400); }
.agent-toggle {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--accent-200);
  border-radius: var(--radius-sm);
  color: var(--accent-700);
  background: var(--accent-50);
  font-size: 1.15rem;
}
.agent-toggle:hover { color: var(--accent-800); background: var(--accent-100); }
.agent-body { min-height: 0; flex: 1; display: flex; flex-direction: column; background: var(--surface-inset); }
.agent-widget.collapsed .agent-body { display: none; }
.agent-widget.agent-unconfigured .agent-body { background: var(--surface-raised); }
.agent-widget.agent-unconfigured .agent-composer { opacity: .62; }
.agent-widget.agent-unconfigured .agent-composer textarea:disabled { cursor: not-allowed; }
.agent-messages { min-height: 0; flex: 1; display: flex; flex-direction: column; gap: var(--space-sm); overflow-y: auto; padding: var(--space-lg); scrollbar-gutter: stable; }
.agent-bubble {
  max-width: 88%;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.agent-bubble.assistant { align-self: flex-start; border: 1px solid var(--border-subtle); border-bottom-left-radius: var(--radius-xs); background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-xs); }
.agent-bubble.user { align-self: flex-end; border-bottom-right-radius: var(--radius-xs); background: var(--accent-600); color: var(--accent-text); }
.agent-bubble.wide { max-width: 100%; width: 100%; }
.agent-bubble.pending { color: var(--text-tertiary); font-style: italic; }
.agent-tool-summary { display: block; margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--border-hairline); color: var(--text-tertiary); font-family: var(--font-mono); font-size: var(--text-2xs); }
.agent-attachment {
  margin: 0 var(--space-md) var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: var(--surface-raised);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
}
.agent-attachment[hidden] { display: none; }
.agent-attachment span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-attachment button { width: 22px; height: 22px; padding: 0; flex: 0 0 auto; border: 0; color: var(--text-tertiary); background: transparent; font-size: 1rem; }
.agent-attachment button:hover { color: var(--red-600); }
.agent-composer { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-sm); padding: var(--space-md) var(--space-md) var(--space-sm); border-top: 1px solid var(--border-subtle); background: var(--surface-raised); }
.agent-attach-button {
  min-width: 58px;
  display: grid;
  place-items: center;
  align-self: stretch;
  padding: 6px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: var(--surface-raised);
  cursor: pointer;
  font-size: var(--text-2xs);
}
.agent-attach-button:hover { color: var(--accent-800); background: var(--accent-50); border-color: var(--accent-400); }
.agent-attach-button input { display: none; }
.agent-composer textarea { min-height: 42px; max-height: 96px; }
.agent-composer button { align-self: stretch; min-width: 62px; }
.agent-composer button:disabled { cursor: wait; opacity: 0.55; }
.agent-scope { margin: 0; padding: 0 var(--space-md) var(--space-sm); color: var(--text-tertiary); background: var(--surface-raised); font-family: var(--font-mono); font-size: var(--text-2xs); text-align: center; }
.agent-approval-card {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-sm);
  background: var(--warning-bg);
  color: var(--amber-700);
}
.agent-approval-card strong { display: block; margin-bottom: var(--space-xs); color: var(--amber-700); }
.agent-approval-actions { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); }
.agent-approval-actions button { padding: 5px 10px; font-size: var(--text-xs); }
.agent-approval-actions .reject { border-color: var(--border-default); color: var(--text-secondary); background: var(--surface-raised); }
.agent-approval-actions .reject:hover { background: var(--surface-sunken); }
.agent-job-curve { display: block; width: 100%; height: auto; margin-top: var(--space-sm); border: 1px solid var(--border-hairline); border-radius: var(--radius-xs); background: var(--surface-raised); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zte-candidate-content > .prediction-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .material-detail-overview { grid-template-columns: 1fr; }
}

@media (max-width: 1050px) {
  .material-workspace { grid-template-columns: 1fr; }
  .detail-panel { align-self: stretch; }
}

@media (max-width: 950px) {
  .stats, .grid.two, .grid.three, .prediction-actions, .prediction-metrics,
  .composite-pickers, .composite-window, .material-visual-grid,
  .zte-analysis-grid, .zte-phase-grid, .zte-robustness-grid { grid-template-columns: 1fr; }
  .mechanical-property-grid { grid-template-columns: 1fr; }
  .zte-engineering-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .method-route { grid-template-columns: 1fr; }
  .method-route-arrow { display: none; }
  .method-route-reason { text-align: left; }
  .zte-candidate-header { grid-template-columns: 1fr; }
  .zte-candidate-actions { justify-content: flex-start; }
  .zte-candidate-content > .prediction-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zte-model-basis-grid { grid-template-columns: 1fr; }
  .catalog-analysis-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-panel .property-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  header { align-items: flex-start; gap: var(--space-md); flex-direction: column; }
  .catalog-panel-heading { align-items: flex-start; }
  .catalog-heading-meta { flex-wrap: wrap; justify-content: flex-start; }
  .phonon-figures { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .material-context-inner { align-items: stretch; flex-direction: column; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); }
  .material-context-identity { flex-wrap: wrap; }
  .material-context-identity > div { align-items: flex-start; flex: 1 1 220px; flex-direction: column; gap: 2px; }
  .material-context-identity div span { white-space: normal; }
  .material-context-actions { justify-content: flex-end; }
}

@media (max-width: 560px) {
  main { padding: var(--space-md) var(--space-md) 92px; }
  header { padding: var(--space-lg); }
  .workspace-nav-inner { padding: 0 var(--space-sm); }
  .workspace-nav a { padding: 11px 12px 10px; }
  .workspace-nav a[aria-current="page"]::after { right: 10px; left: 10px; }
  .material-context-actions { display: grid; grid-template-columns: 1fr 1fr auto; }
  .material-context-actions button { min-width: 0; }
  .panel, .stat { padding: var(--space-md); }
  .row { align-items: stretch; flex-direction: column; }
  .catalog-panel-heading { flex-direction: column; gap: var(--space-sm); }
  .catalog-heading-meta { width: 100%; justify-content: space-between; }
  .catalog-stats-meta { overflow: hidden; text-overflow: ellipsis; }
  .catalog-analysis-toolbar { grid-template-columns: 1fr; }
  .catalog-filter-details summary { align-items: flex-start; }
  .catalog-filter-summary-hint { max-width: 62%; text-align: right; white-space: normal; }
  .element-filter-toolbar { align-items: stretch; flex-direction: column; }
  .element-mode { width: 100%; }
  .element-mode button { flex: 1; }
  .element-selection { min-width: 0; }
  .periodic-table { justify-content: start; }
  .property-grid, .detail-panel .property-grid { grid-template-columns: 1fr; }
  .properties-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
  .properties-count { text-align: left; }
  .descriptor-grid { grid-template-columns: 1fr; }
  .provenance-card dl { grid-template-columns: 1fr; gap: 3px; }
  .structure-heading { align-items: stretch; flex-direction: column; }
  .structure-viewer, .structure-ctk-stage { height: 360px; }
  .thermal-empty { min-height: 300px; }
  .structure-viewer-tools { top: var(--space-sm); right: var(--space-sm); }
  .structure-viewer-tools button { width: 36px; height: 36px; }
  .structure-settings { top: 48px; right: 52px; width: min(240px, calc(100% - 62px)); }
  .structure-axis-viewer { left: var(--space-sm); bottom: var(--space-sm); width: 88px; height: 88px; }
  .structure-element-legend span { min-width: 36px; height: 36px; }
  .agent-widget { right: var(--space-sm); bottom: var(--space-sm); width: calc(100vw - 20px); height: min(620px, calc(100vh - 20px)); }
  .agent-widget.collapsed { height: 60px; }
  .zte-target-curve-panel > div:first-child { align-items: flex-start; flex-direction: column; }
  .zte-target-actions { align-items: stretch; flex-direction: column; }
  .zte-target-actions button, .zte-target-actions .file-button { justify-content: center; width: 100%; }
  .zte-engineering-grid, .zte-candidate-content > .prediction-metrics,
  .zte-phase-card .prediction-metrics { grid-template-columns: 1fr; }
  .zte-phase-heading { flex-direction: column; }
  .zte-phase-downloads { justify-content: flex-start; }
  .zte-phase-structure { height: 280px; }
  .zte-candidate-curve-card canvas { height: 360px; }
}