/* ═══════════════════════════════════════════════════════════════
   RegYouLabs — Design System v3  ·  Glassmorphism Enterprise
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Base palette ── */
  --white: #ffffff;
  --black: #080c14;
  --g50:   #f8fafc;
  --g100:  #f1f5f9;
  --g150:  #edf1f7;
  --g200:  #e2e8f0;
  --g300:  #cbd5e1;
  --g400:  #94a3b8;
  --g500:  #64748b;
  --g600:  #475569;
  --g700:  #334155;
  --g800:  #1e293b;
  --g900:  #0f172a;

  /* ── Accent — Indigo ── */
  --accent:      #111827;
  --accent-l:    #1f2937;
  --accent-d:    #0f172a;
  --accent-xl:   #374151;
  --accent-bg:   rgba(17,24,39,.06);
  --accent-bd:   rgba(17,24,39,.24);
  --accent-glow: rgba(17,24,39,.18);

  /* ── Semantic status ── */
  --success:    #16a34a;  --success-bg: rgba(240,253,244,.9);  --success-bd: rgba(22,163,74,.22);
  --warning:    #d97706;  --warning-bg: rgba(255,251,235,.9);  --warning-bd: rgba(217,119,6,.22);
  --danger:     #dc2626;  --danger-bg:  rgba(254,242,242,.9);  --danger-bd:  rgba(220,38,38,.22);
  --info:       #0ea5e9;  --info-bg:    rgba(240,249,255,.9);
  --pending:    #7c3aed;  --pending-bg: rgba(124,58,237,.07);

  /* ── Technique identity colors ── */
  --hplc:  #3b82f6;  --hplc-bg:  rgba(59,130,246,.07);
  --ms:    #8b5cf6;  --ms-bg:    rgba(139,92,246,.07);
  --nmr:   #06b6d4;  --nmr-bg:   rgba(6,182,212,.07);
  --ftir:  #10b981;  --ftir-bg:  rgba(16,185,129,.07);

  /* ── Glass surface tokens ── */
  --glass-strong: rgba(255,255,255,0.92);
  --glass-mid:    rgba(255,255,255,0.78);
  --glass-soft:   rgba(255,255,255,0.58);
  --glass-subtle: rgba(255,255,255,0.38);
  --glass-bd:     rgba(255,255,255,0.70);
  --glass-bd-soft: rgba(255,255,255,0.44);
  --glass-inner:  rgba(255,255,255,0.50);
  --blur-strong:  saturate(200%) blur(22px);
  --blur-mid:     saturate(160%) blur(14px);
  --blur-soft:    saturate(130%) blur(8px);

  /* ── Typography ── */
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Layout ── */
  --bar-h:    58px;
  --sidebar-w: 340px;
  --max-w:    1160px;

  /* ── Radius scale ── */
  --r-xs:  5px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  14px;
  --r-xl:  18px;
  --r-2xl: 24px;

  /* ── Shadow system ── */
  --sh-xs:      0 1px 2px rgba(15,23,42,.05);
  --sh-sm:      0 2px 8px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
  --sh-md:      0 8px 24px rgba(15,23,42,.09), 0 2px 6px rgba(15,23,42,.04);
  --sh-lg:      0 20px 48px rgba(15,23,42,.13), 0 4px 12px rgba(15,23,42,.05);
  --sh-xl:      0 32px 72px rgba(15,23,42,.18), 0 8px 20px rgba(15,23,42,.07);
  --sh-glass:   0 4px 20px rgba(15,23,42,.07), 0 1px 4px rgba(15,23,42,.04), inset 0 1px 0 rgba(255,255,255,.85);
  --sh-glass-md:0 12px 36px rgba(15,23,42,.10), 0 2px 8px rgba(15,23,42,.05), inset 0 1px 0 rgba(255,255,255,.75);
  --sh-glass-lg:0 24px 64px rgba(15,23,42,.14), 0 4px 14px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.70);
  --sh-accent:  0 8px 24px rgba(17,24,39,.22), 0 2px 8px rgba(17,24,39,.12);
  --sh-float:   0 6px 20px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.05);
}

/* ── Reset & base ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { font-size:16px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }

/* ── Clean white body ── */
body {
  font-family: var(--font);
  color: var(--g900);
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 50%, #ffffff 100%);
  line-height: 1.6;
  min-height: 100vh;
  letter-spacing: .001em;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none }

/* ─────────────────────────────────────────────
   TOPBAR
───────────────────────────────────────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--bar-h);
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 0 rgba(17,18,23,.04);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; z-index: 1000;
}
.topbar__brand { display: flex; align-items: center; gap: 10px }
.topbar__logo {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.topbar__logo img { width: 30px; height: 30px; display: block; object-fit: contain }
.topbar__name { font-weight: 800; font-size: 14px; letter-spacing: -.025em; color: var(--g900) }
.topbar__right { display: flex; align-items: center; gap: 10px }

/* ── Back pill — all workspaces ── */
.back-pill {
  border: 1px solid rgba(15,23,42,.20);
  border-radius: 999px;
  background: rgba(13,17,26,.90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff !important;
  padding: 7px 18px; font-size: 12px; font-weight: 700;
  text-decoration: none; line-height: 1;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s, box-shadow .15s;
  box-shadow: 0 2px 10px rgba(15,23,42,.18);
}
.back-pill:hover { background: rgba(5,8,16,.96); box-shadow: 0 4px 14px rgba(15,23,42,.26) }

/* ─────────────────────────────────────────────
   LAYOUT
───────────────────────────────────────────── */
.main-content { margin-top: var(--bar-h); min-height: calc(100vh - var(--bar-h)) }
.page-container { max-width: var(--max-w); margin: 0 auto; padding: 26px }
.page-container--narrow  { max-width: 720px }
.page-container--wide    { max-width: 1320px }
.page-container--track   { max-width: 1200px; padding: 16px 24px 20px }

/* ─────────────────────────────────────────────
   TRACK THEME SHELL — neutral hero
───────────────────────────────────────────── */
.track-theme-shell { max-width: 1120px; margin: 0 auto; padding: 4px 0 6px }
.track-theme-hero {
  border-radius: 16px;
  padding: 24px 26px;
  margin-bottom: 18px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(17,18,23,.06);
  position: relative; overflow: hidden;
  border: 1px solid #e5e7eb;
}
.track-theme-hero::before { display: none }
.track-theme-eyebrow {
  display: inline-flex; align-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #f9fafb;
  padding: 5px 12px;
  font-family: var(--font); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: #6b7280;
  font-weight: 700; margin-bottom: 12px;
  position: relative;
}
.track-theme-eyebrow::before { display: none }
.track-theme-title {
  font-size: 32px; line-height: 1.06; letter-spacing: -.032em;
  margin: 0 0 10px; max-width: 720px; font-weight: 800;
  color: #111217; position: relative;
}
.track-theme-sub {
  font-size: 14px; color: #4e5563;
  max-width: 640px; margin: 0; line-height: 1.65; position: relative;
}

/* ─────────────────────────────────────────────
   TYPOGRAPHY
───────────────────────────────────────────── */
.heading-xl { font-size: 42px; font-weight: 800; line-height: 1.06; letter-spacing: -.028em }
.heading-lg { font-size: 32px; font-weight: 800; line-height: 1.12; letter-spacing: -.022em }
.heading-md { font-size: 18px; font-weight: 700; line-height: 1.32; letter-spacing: -.01em }
.heading-sm { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--g500) }
.text-body  { font-size: 14px; line-height: 1.70; color: var(--g600) }
.text-sm    { font-size: 13px; line-height: 1.58; color: var(--g500) }
.text-mono  { font-family: var(--mono); font-size: 12px; color: var(--g400) }

/* ─────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 18px; font-family: var(--font); font-size: 13px; font-weight: 600;
  border-radius: 999px; border: none; cursor: pointer;
  transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s, background .15s;
  white-space: nowrap;
}
.btn--primary { background: var(--g900); color: #fff }
.btn--primary:hover { background: #111827; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(17,24,39,.24) }
.btn--accent  { background: var(--accent); color: #fff }
.btn--accent:hover  { background: var(--accent-l); transform: translateY(-1px); box-shadow: var(--sh-accent) }
.btn--outline {
  background: var(--glass-mid);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--g700);
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: var(--sh-glass);
}
.btn--outline:hover { background: rgba(255,255,255,.96); border-color: rgba(15,23,42,.2); transform: translateY(-1px) }
.btn--ghost   { background: transparent; color: var(--g600); padding: 7px 12px }
.btn--ghost:hover   { background: rgba(15,23,42,.05); color: var(--g900) }
.btn--lg  { padding: 13px 32px; font-size: 15px; font-weight: 600; border-radius: var(--r-xl) }
.btn--sm  { padding: 6px 12px; font-size: 12px }
.btn--disabled { opacity: .38; pointer-events: none }

/* ─────────────────────────────────────────────
   BADGES
───────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; font-family: var(--mono);
  font-size: 10.5px; font-weight: 600; border-radius: 20px; white-space: nowrap;
}
.badge--accent  { background: var(--accent-bg); color: var(--accent) }
.badge--dark    { background: rgba(13,17,26,.90); color: #fff; backdrop-filter: blur(4px) }
.badge--outline { background: rgba(255,255,255,.72); color: var(--g500); border: 1px solid rgba(15,23,42,.09); backdrop-filter: blur(4px) }
.badge--success { background: var(--success-bg); color: var(--success) }
.badge--warning { background: var(--warning-bg); color: var(--warning) }
.badge--danger  { background: var(--danger-bg);  color: var(--danger)  }

/* ─────────────────────────────────────────────
   BASE CARD — glass
───────────────────────────────────────────── */
.card {
  background: var(--glass-mid);
  backdrop-filter: var(--blur-soft);
  -webkit-backdrop-filter: var(--blur-soft);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-lg);
  padding: 18px;
  transition: box-shadow .2s, transform .2s;
  box-shadow: var(--sh-glass);
}
.card--hover:hover { box-shadow: var(--sh-glass-md); transform: translateY(-1px) }
.card--flat { background: rgba(255,255,255,.42); border-color: rgba(255,255,255,.38); box-shadow: none; backdrop-filter: none }

/* ─────────────────────────────────────────────
   SELECTION GRID & CARDS
───────────────────────────────────────────── */
.selection-grid     { display: grid; gap: 10px }
.selection-grid--2  { grid-template-columns: repeat(2,1fr) }
.selection-grid--3  { grid-template-columns: repeat(3,1fr) }

.selection-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 20px 16px;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s, border-color .15s;
  text-align: center; position: relative; overflow: hidden;
  box-shadow: 0 1px 3px rgba(17,18,23,.06);
}
.selection-card::after { display: none }
.selection-card:hover {
  border-color: #d1d5db;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(17,18,23,.08);
}
.selection-card--active {
  background: #ffffff;
  border-color: #111217;
  box-shadow: 0 0 0 3px rgba(17,18,23,.08), 0 8px 24px rgba(17,18,23,.08);
}
.selection-card--active .selection-card__title,
.selection-card--active .selection-card__desc { color: var(--g900) }
.selection-card--active:hover { border-color: #000; box-shadow: 0 0 0 3px rgba(17,18,23,.12), 0 8px 24px rgba(17,18,23,.10) }
.selection-card--disabled {
  opacity: 1; pointer-events: none; cursor: not-allowed;
  background: #f9fafb;
  border-color: #e5e7eb;
  box-shadow: none;
}
.selection-card--disabled:hover { transform: none; box-shadow: none }
.selection-card--disabled .selection-card__title { color: var(--g400) }
.selection-card--disabled::after {
  content: "Coming Soon";
  position: absolute;
  top: 10px;
  right: 10px;
  min-width: 92px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.96);
  color: var(--g500);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
}
.selection-card--minimal { padding: 18px 14px; min-height: 86px; display: flex; align-items: center; justify-content: center }
.selection-card--minimal .selection-card__title { margin: 0; font-size: 17px; line-height: 1.25; letter-spacing: -.015em }
.selection-card__icon {
  width: 44px; height: 44px; margin: 0 auto 14px;
  background: rgba(255,255,255,.70); border: 1px solid rgba(15,23,42,.07);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--g700); letter-spacing: .06em; text-transform: uppercase;
}
.selection-card__title { font-size: 15px; font-weight: 700; margin-bottom: 4px; letter-spacing: -.01em }
.selection-card__desc  { font-size: 12.5px; color: var(--g500); line-height: 1.52 }
.selection-card__badge { position: absolute; top: 12px; right: 12px }

/* ─────────────────────────────────────────────
   STEP FLOW CARDS
───────────────────────────────────────────── */
.step-options          { max-width: 1080px; margin: 0 auto }
.step-options--narrow  { max-width: 980px }
.step-card {
  min-height: 96px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(17,18,23,.06);
}
.step-card:hover {
  border-color: #d1d5db;
  box-shadow: 0 8px 24px rgba(17,18,23,.08);
}
.step-card.selection-card--active   { background: #ffffff; border-color: #111217; box-shadow: 0 0 0 3px rgba(17,18,23,.08) }
.step-card.selection-card--disabled { background: #f9fafb; border-color: #e5e7eb; box-shadow: none; opacity: .65 }
.step-card--detail { min-height: 126px; padding: 14px 16px; text-align: left }
.step-card--detail .selection-card__title { font-size: 21px; line-height: 1.1; letter-spacing: -.02em; margin-bottom: 6px }
.step-card__meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px }
.step-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid rgba(15,23,42,.09); border-radius: 999px; padding: 2px 8px;
  background: rgba(255,255,255,.72); color: var(--g600); font-size: 10px; font-weight: 600; letter-spacing: .02em;
}
.step-chip b { color: var(--g900); font-weight: 700 }

/* ─────────────────────────────────────────────
   MODULE FLOW
───────────────────────────────────────────── */
.module-flow { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0 16px; scrollbar-width: thin }
.module-flow::-webkit-scrollbar       { height: 4px }
.module-flow::-webkit-scrollbar-thumb { background: rgba(148,163,184,.38); border-radius: 2px }
.module-card {
  min-width: 210px; max-width: 210px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px; padding: 13px;
  flex-shrink: 0; cursor: pointer;
  transition: all .18s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 1px 3px rgba(17,18,23,.06);
}
.module-card:hover {
  border-color: #d1d5db;
  box-shadow: 0 8px 24px rgba(17,18,23,.08);
  transform: translateY(-1px);
}
.module-card--active {
  background: #ffffff;
  border-color: #111217;
  box-shadow: 0 0 0 3px rgba(17,18,23,.08), 0 8px 24px rgba(17,18,23,.08);
}
.module-card--completed {
  border-color: var(--success-bd);
  background: rgba(240,253,244,.7);
  box-shadow: 0 1px 3px rgba(17,18,23,.04);
}
.module-card--locked { opacity: .44; cursor: default }
.module-card__number  { font-family: var(--mono); font-size: 10.5px; color: var(--g400); margin-bottom: 6px; letter-spacing: .04em }
.module-card__title   { font-weight: 600; font-size: 14px; margin-bottom: 4px; line-height: 1.3; letter-spacing: -.01em }
.module-card__desc    { font-size: 12px; color: var(--g500); margin-bottom: 12px; line-height: 1.4 }
.module-card__progress { height: 3px; background: rgba(15,23,42,.08); border-radius: 2px; overflow: hidden; margin-bottom: 6px }
.module-card__progress-bar { height: 100%; background: var(--accent); border-radius: 2px; transition: width .3s }
.module-card__stats { display: flex; justify-content: space-between; align-items: center }
.connector { display: flex; align-items: center; color: var(--g300); flex-shrink: 0; font-size: 16px; padding: 0 2px }

/* ─────────────────────────────────────────────
   DOC LIST (sidebar navigation)
───────────────────────────────────────────── */
.doc-list { display: flex; flex-direction: column; gap: 2px }
.doc-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px;
  transition: all .15s; cursor: pointer;
  font-size: 13px; color: var(--g700);
  border: 1px solid transparent;
}
.doc-item:hover { background: rgba(255,255,255,.58); border-color: rgba(255,255,255,.75) }
.doc-item--active { background: var(--accent-bg); color: var(--accent); font-weight: 600; border-color: var(--accent-bd) }
.doc-item--locked { opacity: .4; pointer-events: none }
.doc-item__status {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--g300);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 10px;
}
.doc-item__status--done   { background: var(--success); border-color: var(--success); color: #fff }
.doc-item__status--active { border-color: var(--accent); background: var(--accent-bg) }

/* ─────────────────────────────────────────────
   BREADCRUMBS
───────────────────────────────────────────── */
.breadcrumbs {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--g400); margin-bottom: 14px;
  flex-wrap: wrap; font-family: var(--mono);
}
.breadcrumbs a { color: var(--g500); transition: color .12s }
.breadcrumbs a:hover { color: var(--g900) }
.breadcrumbs__sep { color: var(--g300) }

/* ─────────────────────────────────────────────
   PAGE HEADER
───────────────────────────────────────────── */
.page-header { margin-bottom: 18px }
.page-header__eyebrow {
  font-family: var(--mono); font-size: 11px; color: var(--accent);
  letter-spacing: .09em; text-transform: uppercase; margin-bottom: 10px; font-weight: 600;
}
.page-header__title    { font-size: 32px; font-weight: 800; line-height: 1.08; margin-bottom: 8px; letter-spacing: -.025em }
.page-header__subtitle { font-size: 14px; color: var(--g500); max-width: 680px; line-height: 1.58 }
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7) 20%, rgba(255,255,255,.7) 80%, transparent);
  box-shadow: 0 1px 0 rgba(15,23,42,.05);
  margin: 20px 0;
}

/* ─────────────────────────────────────────────
   LAYOUT WITH SIDEBAR
───────────────────────────────────────────── */
.layout-with-sidebar { display: flex; min-height: calc(100vh - var(--bar-h)) }
.sidebar {
  width: var(--sidebar-w);
  border-right: 1px solid rgba(255,255,255,.52);
  background: linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(248,250,252,.72) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow-y: auto; flex-shrink: 0; padding: 20px 0;
}
.sidebar__section { padding: 0 16px; margin-bottom: 20px }
.sidebar__section-title {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--g400); margin-bottom: 10px;
  padding: 0 4px; font-family: var(--mono);
}
.content-area { flex: 1; overflow-y: auto; padding: 18px 24px; background: transparent }

/* ── Dataset sidebar items ── */
.ds-nav__item { padding: 7px 10px; font-size: 13px; border-radius: var(--r-sm); cursor: pointer; transition: all .15s; color: var(--g600) }
.ds-nav__item:hover { background: rgba(255,255,255,.62); color: var(--g900) }
.ds-nav__item--active { background: rgba(255,255,255,.88); color: var(--g900); font-weight: 600; box-shadow: var(--sh-xs) }
.ds-row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 4px; border-bottom: 1px solid rgba(15,23,42,.06); font-size: 12px }
.ds-row__k { color: var(--g500); min-width: 90px; flex-shrink: 0 }
.ds-row__v { color: var(--g900); text-align: right; word-break: break-word }

/* ─────────────────────────────────────────────
   DOCUMENT PAPER
───────────────────────────────────────────── */
.doc-paper {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: var(--r-lg);
  max-width: 860px; margin: 0 auto;
  box-shadow: var(--sh-glass-md); overflow: hidden;
}
.doc-paper__header {
  padding: 20px 24px 14px;
  border-bottom: 1px solid rgba(15,23,42,.06);
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(250,251,252,.88) 100%);
}
.doc-paper__body { padding: 20px 24px 26px; min-height: 360px }

/* ─────────────────────────────────────────────
   FORM FIELDS
───────────────────────────────────────────── */
.doc-section { margin-bottom: 20px }
.doc-section__title {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--g900);
  padding-bottom: 8px; border-bottom: 1px solid rgba(15,23,42,.07); margin-bottom: 16px;
}
.doc-field { margin-bottom: 12px }
.doc-field__row { display: grid; grid-template-columns: 200px 1fr; gap: 12px; align-items: start }
.doc-field__label { font-size: 12px; font-weight: 500; color: var(--g700); padding-top: 10px; display: flex; gap: 4px; align-items: baseline }
.doc-field__label em { font-style: normal; color: var(--danger); font-size: 10px }
.doc-field__ref { font-family: var(--mono); font-size: 10px; color: var(--g400); font-weight: 400; display: block; margin-top: 2px }
.doc-field__input {
  width: 100%; padding: 8px 10px;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: var(--r-sm);
  font-family: var(--font); font-size: 13px; color: var(--g900);
  transition: all .18s;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(4px);
}
.doc-field__input:focus {
  outline: none; border-color: var(--accent);
  background: rgba(255,255,255,.98);
  box-shadow: 0 0 0 3px rgba(17,24,39,.10);
}
.doc-field__input--ta      { min-height: 80px; resize: vertical; line-height: 1.5 }
.doc-field__input--valid   { border-color: var(--success); background: rgba(240,253,244,.85) }
.doc-field__input--invalid { border-color: var(--danger);  background: rgba(254,242,242,.85) }
.doc-field__hint { font-size: 11px; color: var(--g400); margin-top: 3px; font-style: italic }
select.doc-field__input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23a1a1aa' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; cursor: pointer;
}

/* ─────────────────────────────────────────────
   CHECKBOX
───────────────────────────────────────────── */
.check-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--r-sm);
  cursor: pointer; transition: all .15s; border: 1px solid transparent;
}
.check-row:hover { background: rgba(255,255,255,.58); border-color: rgba(255,255,255,.75) }
.check-row--checked { background: var(--accent-bg); border-color: var(--accent-bd) }
.check-box {
  width: 18px; height: 18px; border: 2px solid var(--g300);
  border-radius: 4px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .15s;
}
.check-box--on { background: var(--accent); border-color: var(--accent) }

/* ─────────────────────────────────────────────
   ANIMATIONS
───────────────────────────────────────────── */
@keyframes fadeUp  { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: translateY(0) } }
@keyframes fadeIn  { from { opacity: 0 }                              to { opacity: 1 }                           }
@keyframes scaleIn { from { opacity: 0; transform: scale(.96) }       to { opacity: 1; transform: scale(1) }      }

.anim-up { animation: fadeUp .30s cubic-bezier(.16,1,.3,1) both }
.anim-stagger > * { opacity: 0; animation: fadeUp .26s cubic-bezier(.16,1,.3,1) both }
.anim-stagger > *:nth-child(1) { animation-delay: .04s }
.anim-stagger > *:nth-child(2) { animation-delay: .08s }
.anim-stagger > *:nth-child(3) { animation-delay: .12s }
.anim-stagger > *:nth-child(4) { animation-delay: .16s }
.anim-stagger > *:nth-child(5) { animation-delay: .20s }
.anim-stagger > *:nth-child(6) { animation-delay: .24s }

/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */
@media (max-width: 768px) {
  .selection-grid--2, .selection-grid--3 { grid-template-columns: 1fr }
  .page-header__title  { font-size: 26px }
  .heading-xl          { font-size: 34px }
  .track-theme-title   { font-size: 22px }
  .sidebar             { display: none }
  .page-container      { padding: 14px }
  .doc-field__row      { grid-template-columns: 1fr }
}