:root {
  /* ─── ACM-Lab Dark Scientific Design System ─────────── */
  --ink:    #daeeff;
  --muted:  #7aacbf;
  --line:   rgba(0, 200, 255, 0.14);
  --paper:  #030b14;
  --white:  rgba(7, 17, 30, 0.9);
  --green:  #00c8f0;
  --blue:   #0099ff;
  --amber:  #00f0c8;
  --coral:  #00b4d8;
  --os-cyan:  #00d4ff;
  --os-teal:  #00ffcc;
  --os-navy:  #020b14;
  --shadow: 0 24px 64px rgba(0, 0, 0, 0.72), 0 0 48px rgba(0, 212, 255, 0.06);
  --sidebar-width: 246px;

  /* Extended dark tokens */
  --surface-0:   #020b14;
  --surface-1:   rgba(6, 16, 28, 0.92);
  --surface-2:   rgba(10, 24, 42, 0.85);
  --glass-border: rgba(0, 200, 255, 0.14);
  --glass-border-bright: rgba(0, 212, 255, 0.32);
  --glow-cyan: 0 0 32px rgba(0, 212, 255, 0.22);
  --glow-teal: 0 0 32px rgba(0, 255, 200, 0.16);
  --glow-sm:   0 0 18px rgba(0, 212, 255, 0.13);
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(0, 180, 255, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 180, 255, 0.024) 1px, transparent 1px);
  background-size: 64px 64px;
  background-attachment: fixed;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Display', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.locked {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.site-header {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: flex;
  width: var(--sidebar-width);
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  gap: 18px;
  min-height: 100vh;
  padding: 22px 16px;
  background: rgba(2, 8, 16, 0.97);
  border-right: 1px solid rgba(0, 200, 255, 0.09);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  overflow-y: auto;
  box-shadow: 4px 0 32px rgba(0, 0, 0, 0.5);
}

.login-gate {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--sidebar-width);
  z-index: 100;
  display: none;
  place-items: center;
  overflow: auto;
  padding: 18px;
  background:
    radial-gradient(ellipse at 38% 28%, rgba(0, 212, 255, 0.09), transparent 52%),
    radial-gradient(ellipse at 72% 72%, rgba(0, 255, 200, 0.07), transparent 50%),
    #020b14;
}

.login-gate[hidden] {
  display: none !important;
}

body.locked .login-gate {
  display: grid;
}

body.locked main,
body.locked .footer {
  pointer-events: none;
  user-select: none;
  filter: blur(8px);
}

.app-main,
.footer {
  margin-left: var(--sidebar-width);
}

.app-screen {
  display: none;
}

.app-screen.active-app {
  display: block;
}

.app-screen:not(.active-app) {
  display: none !important;
}

.hero.app-screen.active-app,
.intro.app-screen.active-app,
.results-layout {
  display: grid;
}

.login-card {
  width: min(100%, 520px);
  margin: auto 0;
  padding: 36px;
  background: rgba(5, 14, 26, 0.92);
  border: 1px solid rgba(0, 200, 255, 0.18);
  border-radius: 16px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.8), 0 0 60px rgba(0, 212, 255, 0.08);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
}

.login-card h2 {
  font-size: clamp(28px, 5vw, 38px);
  line-height: 1.05;
}

.login-card p {
  color: var(--muted);
}

.full-button {
  justify-content: center;
  width: 100%;
  margin-top: 10px;
}

.guest-login-button {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 70;
  min-height: 42px;
  padding: 0 16px;
  color: var(--white);
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  box-shadow: var(--shadow);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

body.guest-mode .user-chip {
  display: none;
}

.code-box {
  margin: 8px 0 12px;
  padding: 14px 16px;
  color: #ffd700;
  background: rgba(255, 200, 0, 0.08);
  border: 1px solid rgba(255, 200, 0, 0.28);
  border-radius: 8px;
  font-size: 22px;
  font-weight: 900;
  text-align: center;
  box-shadow: 0 0 20px rgba(255, 200, 0, 0.1);
}

.user-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: rgba(0, 212, 255, 0.06);
  border: 1px solid rgba(0, 200, 255, 0.16);
  border-radius: 10px;
  color: var(--muted);
  font-size: 12px;
}

.user-chip button {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(8, 20, 36, 0.65);
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}

.avatar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 12px;
}

.avatar-preview,
.chip-avatar,
.mini-avatar,
.comment-avatar {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--white);
  background: var(--green);
  background-position: center;
  background-size: cover;
  border: 1px solid rgba(24, 33, 31, 0.16);
  border-radius: 50%;
  font-weight: 800;
}

.avatar-preview {
  width: 68px;
  height: 68px;
  font-size: 15px;
}

.avatar-preview.large {
  width: 96px;
  height: 96px;
  font-size: 22px;
}

.chip-avatar,
.mini-avatar {
  width: 34px;
  height: 34px;
  font-size: 12px;
}

.comment-avatar {
  width: 28px;
  height: 28px;
  font-size: 10px;
}

.profile-avatar-button,
.profile-text-button {
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.profile-avatar-button {
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
}

.profile-avatar-button:focus-visible,
.profile-text-button:focus-visible {
  outline: 3px solid rgba(32, 122, 90, 0.28);
  outline-offset: 3px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  width: 100%;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #020b14;
  background: linear-gradient(135deg, #00d4ff 0%, #00ffcc 100%);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 28px rgba(0, 212, 255, 0.55),
    0 4px 16px rgba(0, 0, 0, 0.5);
  font-size: 13px;
  font-weight: 900;
}

.nav {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 3px;
  width: 100%;
  color: var(--muted);
  font-size: 13px;
}

.nav a {
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 600;
  color: rgba(140, 190, 218, 0.65);
  letter-spacing: 0.005em;
  transition: color 0.18s var(--ease), background 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.nav a:hover {
  color: var(--green);
  background: rgba(0, 212, 255, 0.06);
  border-color: rgba(0, 212, 255, 0.14);
}

.nav a.active-link {
  color: var(--os-cyan);
  background: rgba(0, 212, 255, 0.08);
  border-color: rgba(0, 212, 255, 0.22);
  box-shadow: 0 0 22px rgba(0, 212, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  font-weight: 700;
}


.edit-link {
  color: var(--ink);
  font-weight: 800;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(360px, 0.9fr);
  align-items: center;
  min-height: calc(100vh - 74px);
  gap: clamp(28px, 6vw, 72px);
  padding: clamp(46px, 8vw, 96px) clamp(18px, 5vw, 72px);
  border-bottom: 1px solid rgba(121, 207, 240, 0.2);
  background:
    radial-gradient(ellipse at 76% 28%, rgba(96, 232, 255, 0.16), transparent 44%),
    radial-gradient(ellipse at 22% 72%, rgba(68, 214, 189, 0.13), transparent 42%),
    linear-gradient(120deg, rgba(3, 8, 12, 0.99), rgba(7, 20, 25, 0.98) 38%, rgba(9, 42, 50, 0.96) 72%, rgba(8, 28, 32, 0.94)),
    repeating-linear-gradient(90deg, rgba(137, 217, 255, 0.06) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, rgba(68, 214, 189, 0.04) 0 1px, transparent 1px 42px),
    #070b10;
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(115deg, transparent 0 28%, rgba(91, 218, 255, 0.18) 42%, transparent 56%),
    linear-gradient(72deg, transparent 0 18%, rgba(68, 214, 189, 0.13) 38%, transparent 62%),
    radial-gradient(ellipse at 76% 18%, rgba(103, 225, 218, 0.14), transparent 42%);
  background-size: 160% 160%, 180% 180%, auto;
  animation: holoDrift 12s ease-in-out infinite alternate;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 24%, transparent 76%, rgba(0, 0, 0, 0.22)),
    repeating-linear-gradient(0deg, transparent 0 12px, rgba(160, 223, 255, 0.035) 12px 13px);
  pointer-events: none;
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.hero-backdrop span {
  position: absolute;
  left: -12%;
  width: 124%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(140, 231, 255, 0.72), rgba(68, 214, 189, 0.54), transparent);
  box-shadow: 0 0 28px rgba(126, 225, 255, 0.26);
  transform: translateX(-16%);
  animation: dataSweep 7s linear infinite;
}

.hero-backdrop span:nth-child(1) { top: 18%; }
.hero-backdrop span:nth-child(2) { top: 39%; animation-delay: 1.4s; opacity: 0.72; }
.hero-backdrop span:nth-child(3) { top: 62%; animation-delay: 2.8s; opacity: 0.56; }
.hero-backdrop span:nth-child(4) { top: 84%; animation-delay: 4.2s; opacity: 0.44; }

.hero-copy,
.hero-media,
.home-mission,
.os-flow-panel {
  position: relative;
  z-index: 1;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.92;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1 {
  margin: 0;
  font-size: clamp(58px, 12vw, 132px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: var(--ink);
}

.os-logo {
  position: relative;
  width: fit-content;
  max-width: 100%;
  padding: 10px 18px 14px 0;
  isolation: isolate;
}

.os-logo h1 {
  position: relative;
  z-index: 2;
  color: #f7fdff;
  text-shadow:
    0 0 20px rgba(120, 230, 255, 0.32),
    0 0 58px rgba(68, 214, 189, 0.22);
}

.os-logo::before {
  content: "";
  position: absolute;
  inset: 6px -14px 0 -8px;
  z-index: 0;
  background:
    linear-gradient(100deg, rgba(120, 230, 255, 0.18), rgba(68, 214, 189, 0.08), transparent),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(120, 230, 255, 0.18);
  border-radius: 8px;
  box-shadow: 0 0 58px rgba(120, 230, 255, 0.12), inset 0 0 40px rgba(68, 214, 189, 0.08);
  backdrop-filter: blur(12px);
}

.os-logo-dna {
  position: absolute;
  right: -38px;
  top: 10px;
  bottom: 10px;
  z-index: 3;
  width: 34px;
  opacity: 0.86;
}

.os-logo-dna span {
  position: absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--os-cyan);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(120, 230, 255, 0.7);
  animation: dnaFloat 3.8s ease-in-out infinite;
}

.os-logo-dna span:nth-child(1) { top: 4%; transform: translateX(-14px); }
.os-logo-dna span:nth-child(2) { top: 25%; transform: translateX(8px); animation-delay: 0.35s; }
.os-logo-dna span:nth-child(3) { top: 48%; transform: translateX(-13px); animation-delay: 0.7s; }
.os-logo-dna span:nth-child(4) { top: 68%; transform: translateX(9px); animation-delay: 1.05s; }
.os-logo-dna span:nth-child(5) { top: 88%; transform: translateX(-8px); animation-delay: 1.4s; }

h2 {
  margin: 0;
  max-width: 980px;
  font-size: clamp(28px, 4.5vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--ink);
}

h3 {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.hero-subtitle {
  max-width: 720px;
  margin: 24px 0 0;
  color: rgba(234, 244, 255, 0.78);
  font-size: clamp(18px, 2vw, 24px);
}

.brand-position {
  width: fit-content;
  max-width: 100%;
  margin: 14px 0 0;
  padding: 8px 12px;
  color: #d8fbff;
  background: rgba(9, 17, 26, 0.52);
  border: 1px solid rgba(148, 229, 255, 0.34);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 32px rgba(95, 209, 255, 0.1);
  font-weight: 900;
}

.lab-status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.lab-status-strip span {
  min-height: 38px;
  padding: 9px 12px;
  color: rgba(238, 248, 255, 0.9);
  background: linear-gradient(135deg, rgba(120, 230, 255, 0.11), rgba(68, 214, 189, 0.07));
  border: 1px solid rgba(147, 222, 255, 0.2);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  font-size: 13px;
  font-weight: 900;
}

.hero-live-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 760px;
  margin-top: 20px;
}

.hero-live-metrics span {
  min-height: 58px;
  padding: 12px 14px;
  color: rgba(230, 249, 255, 0.86);
  background:
    linear-gradient(145deg, rgba(120, 230, 255, 0.12), rgba(68, 214, 189, 0.07)),
    rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(150, 225, 255, 0.18);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  font-size: 13px;
  font-weight: 850;
}

.hero-live-metrics b {
  display: block;
  color: #eaffff;
  font-size: 24px;
  line-height: 1;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.button {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid rgba(0, 200, 255, 0.2);
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--os-cyan);
  letter-spacing: 0.01em;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s var(--ease);
  background: rgba(0, 212, 255, 0.06);
}

.button:hover {
  background: rgba(0, 212, 255, 0.1);
  border-color: rgba(0, 212, 255, 0.32);
  box-shadow: 0 0 22px rgba(0, 212, 255, 0.14);
}

.button.primary {
  color: #020b14;
  background: linear-gradient(135deg, var(--os-cyan) 0%, var(--os-teal) 100%);
  border-color: transparent;
  box-shadow: 0 8px 32px rgba(0, 212, 255, 0.3), 0 2px 8px rgba(0, 0, 0, 0.4);
  font-weight: 800;
}

.button.primary:hover {
  box-shadow: 0 12px 42px rgba(0, 212, 255, 0.45), 0 4px 14px rgba(0, 0, 0, 0.5);
  transform: translateY(-1px);
}

.button.secondary {
  background: rgba(0, 212, 255, 0.05);
  border-color: rgba(0, 212, 255, 0.22);
  color: var(--os-cyan);
}

.button.secondary:hover {
  background: rgba(0, 212, 255, 0.1);
  border-color: rgba(0, 212, 255, 0.38);
  box-shadow: 0 0 26px rgba(0, 212, 255, 0.15);
}

.button:disabled,
.small-button:disabled {
  cursor: wait;
  opacity: 0.58;
}

body.guest-mode form:not(#loginForm) button:disabled,
body.guest-mode form:not(#loginForm) input:disabled,
body.guest-mode form:not(#loginForm) textarea:disabled,
body.guest-mode form:not(#loginForm) select:disabled,
body.guest-mode .like-button:disabled,
body.guest-mode .comment-like-button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.hero-media {
  margin: 0;
  padding: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.045)),
    rgba(6, 12, 20, 0.44);
  border: 1px solid rgba(150, 225, 255, 0.28);
  border-radius: 8px;
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.34), 0 0 70px rgba(78, 203, 255, 0.12);
  backdrop-filter: blur(18px);
}

.hero-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
}

.hero-media figcaption {
  margin-top: 12px;
  color: rgba(234, 244, 255, 0.72);
  font-size: 14px;
}

.future-core {
  display: grid;
  gap: 16px;
  min-height: 520px;
}

.core-hud-title {
  display: grid;
  gap: 4px;
  padding: 6px 2px 0;
}

.core-hud-title strong {
  color: rgba(238, 251, 255, 0.94);
  font-size: 18px;
}

.core-orbit {
  position: relative;
  overflow: hidden;
  min-height: 330px;
  background:
    linear-gradient(90deg, rgba(144, 223, 255, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(68, 214, 189, 0.06) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 46%, rgba(91, 218, 255, 0.22), transparent 44%),
    linear-gradient(135deg, rgba(5, 10, 19, 0.72), rgba(21, 18, 39, 0.74));
  background-size: 32px 32px, 32px 32px, auto, auto;
  border: 1px solid rgba(150, 225, 255, 0.2);
  border-radius: 8px;
}

.core-scanline {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0 42%, rgba(120, 230, 255, 0.2) 49%, transparent 56%);
  animation: microscopeScan 4.8s ease-in-out infinite;
}

.core-cell {
  position: absolute;
  top: 22%;
  width: 98px;
  height: 190px;
  border: 2px solid rgba(166, 233, 255, 0.72);
  border-radius: 8px;
  box-shadow: inset 0 0 24px rgba(91, 218, 255, 0.24), 0 0 30px rgba(134, 112, 255, 0.2);
  animation: corePulse 3.8s ease-in-out infinite;
}

.core-cell::before,
.core-cell::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 2px solid currentColor;
  color: rgba(68, 214, 189, 0.72);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 100% 100%, 100% 0, 0 100%);
}

.core-cell::after {
  inset: 74px 14px 14px;
  color: rgba(120, 230, 255, 0.76);
}

.core-cell-a { left: 12%; }
.core-cell-b { left: 39%; animation-delay: 0.55s; }
.core-cell-c { right: 12%; animation-delay: 1.1s; }

.particle-stream {
  position: absolute;
  left: -18%;
  right: -18%;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(122, 219, 255, 0.78), rgba(68, 214, 189, 0.56), transparent);
  opacity: 0.72;
  animation: streamMove 4.8s linear infinite;
}

.composite-nucleus {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 126px;
  height: 126px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.86), rgba(120, 230, 255, 0.38) 17%, transparent 18%),
    repeating-radial-gradient(circle, rgba(120, 230, 255, 0.22) 0 4px, transparent 4px 12px),
    radial-gradient(circle, rgba(68, 214, 189, 0.28), rgba(3, 12, 18, 0.08) 68%);
  border: 1px solid rgba(120, 230, 255, 0.45);
  border-radius: 50%;
  box-shadow: 0 0 46px rgba(120, 230, 255, 0.28), inset 0 0 36px rgba(68, 214, 189, 0.22);
  animation: nucleusMorph 6s ease-in-out infinite;
}

.microscope-lens {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 126px;
  height: 96px;
  overflow: hidden;
  border: 1px solid rgba(120, 230, 255, 0.22);
  border-radius: 8px;
  background:
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(120, 230, 255, 0.06) 7px 8px),
    radial-gradient(circle at 50% 50%, rgba(120, 230, 255, 0.16), transparent 62%),
    rgba(3, 9, 14, 0.7);
  box-shadow: inset 0 0 36px rgba(120, 230, 255, 0.08);
}

.microscope-lens i {
  position: absolute;
  width: 22px;
  height: 14px;
  border: 1px solid rgba(120, 230, 255, 0.35);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(68, 214, 189, 0.22);
  animation: porePulse 4s ease-in-out infinite;
}

.microscope-lens i:nth-child(1) { left: 18px; top: 20px; }
.microscope-lens i:nth-child(2) { left: 58px; top: 38px; animation-delay: 0.45s; }
.microscope-lens i:nth-child(3) { right: 16px; top: 18px; animation-delay: 0.9s; }
.microscope-lens i:nth-child(4) { left: 38px; bottom: 18px; animation-delay: 1.35s; }

.stream-a { top: 31%; }
.stream-b { top: 48%; animation-delay: 1.2s; }
.stream-c { top: 65%; animation-delay: 2.3s; }

.adsorption-particles span {
  position: absolute;
  width: 11px;
  height: 11px;
  background: var(--os-teal);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(68, 214, 189, 0.8);
  animation: particleBind 4.6s ease-in-out infinite;
}

.adsorption-particles span:nth-child(1) { left: 13%; top: 30%; }
.adsorption-particles span:nth-child(2) { left: 28%; top: 62%; animation-delay: 0.5s; }
.adsorption-particles span:nth-child(3) { left: 47%; top: 44%; animation-delay: 1s; }
.adsorption-particles span:nth-child(4) { left: 63%; top: 56%; animation-delay: 1.5s; }
.adsorption-particles span:nth-child(5) { left: 78%; top: 34%; animation-delay: 2s; }
.adsorption-particles span:nth-child(6) { left: 86%; top: 68%; animation-delay: 2.5s; }

.core-readouts,
.metric-ticker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.core-readouts span,
.metric-ticker span,
.module-tabs span {
  min-height: 42px;
  padding: 10px 12px;
  color: rgba(238, 248, 255, 0.92);
  background: linear-gradient(145deg, rgba(120, 230, 255, 0.1), rgba(68, 214, 189, 0.06));
  border: 1px solid rgba(150, 225, 255, 0.18);
  border-radius: 8px;
  font-weight: 800;
}

.os-flow-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  background:
    linear-gradient(145deg, rgba(120, 230, 255, 0.12), rgba(68, 214, 189, 0.06)),
    rgba(3, 9, 14, 0.42);
  border: 1px solid rgba(120, 230, 255, 0.2);
  border-radius: 8px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.os-flow-panel article {
  min-height: 72px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(120, 230, 255, 0.16);
  border-radius: 8px;
}

.os-flow-panel span {
  display: block;
  color: rgba(120, 230, 255, 0.84);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.os-flow-panel b {
  display: block;
  margin-top: 6px;
  color: rgba(245, 253, 255, 0.94);
}

.os-flow-panel i {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--os-cyan), var(--os-teal), transparent);
  box-shadow: 0 0 18px rgba(120, 230, 255, 0.32);
  animation: flowArrow 2.6s linear infinite;
}

@keyframes corePulse {
  0%, 100% { transform: translateY(0); opacity: 0.82; }
  50% { transform: translateY(-8px); opacity: 1; }
}

@keyframes streamMove {
  from { transform: translateX(-8%); }
  to { transform: translateX(8%); }
}

@keyframes particleBind {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.78); opacity: 0.48; }
  50% { transform: translate3d(16px, -14px, 0) scale(1.25); opacity: 1; }
}

@keyframes dnaFloat {
  0%, 100% { opacity: 0.5; filter: hue-rotate(0deg); }
  50% { opacity: 1; filter: hue-rotate(25deg); }
}

@keyframes microscopeScan {
  0%, 100% { transform: translateY(-52%); opacity: 0.16; }
  50% { transform: translateY(52%); opacity: 0.8; }
}

@keyframes nucleusMorph {
  0%, 100% { border-radius: 50% 44% 58% 48%; transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  50% { border-radius: 44% 58% 42% 60%; transform: translate(-50%, -50%) rotate(12deg) scale(1.06); }
}

@keyframes porePulse {
  0%, 100% { transform: scale(0.82); opacity: 0.54; }
  50% { transform: scale(1.25); opacity: 1; }
}

@keyframes flowArrow {
  from { background-position: -80px 0; }
  to { background-position: 80px 0; }
}

@keyframes holoDrift {
  from {
    background-position: 0% 0%, 0% 100%, center;
    filter: saturate(0.92);
  }

  to {
    background-position: 100% 18%, 80% 0%, center;
    filter: saturate(1.16);
  }
}

@keyframes dataSweep {
  from { transform: translateX(-20%) skewX(-16deg); }
  to { transform: translateX(20%) skewX(-16deg); }
}

.home-mission {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 26px;
  align-items: start;
  padding-top: 36px;
  border-top: 1px solid rgba(120, 230, 255, 0.22);
}

.team-card {
  min-height: 148px;
}

.home-team-section {
  display: none;
  border-bottom: 1px solid var(--line);
}

.home-intelligence-section {
  display: none;
  color: #f4fbff;
  background:
    linear-gradient(145deg, #080c13, #151528 46%, #0b2432 76%, #211b18),
    repeating-linear-gradient(90deg, rgba(130, 223, 255, 0.05) 0 1px, transparent 1px 50px),
    repeating-linear-gradient(0deg, rgba(255, 194, 122, 0.04) 0 1px, transparent 1px 46px);
  border-bottom: 1px solid rgba(150, 225, 255, 0.16);
}

.home-team-section.home-visible {
  display: block;
}

.home-intelligence-section.home-visible {
  display: block;
}

.hero .large-copy {
  color: rgba(234, 244, 255, 0.76);
}

#mission {
  display: none !important;
}

.section {
  padding: clamp(58px, 8vw, 98px) clamp(18px, 5vw, 72px);
}

.muted {
  background: #050d1a;
}

.intro {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 6vw, 80px);
  align-items: start;
}

.large-copy {
  margin: 0;
  color: var(--muted);
  font-size: clamp(18px, 2.2vw, 26px);
}

.section-heading {
  margin-bottom: 40px;
}

.section-heading h2 {
  color: var(--ink);
}

.section-heading > p:not(.eyebrow) {
  margin-top: 12px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
  max-width: 680px;
}

.future-dashboard-grid,
.research-database-grid,
.publish-suite,
.community-console,
.research-feed-strip,
.game-intel-grid,
.physics-feature-grid,
.collab-grid,
.chat-feature-grid,
.settings-console,
.verify-grid,
.goal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 30px;
}

.home-intelligence-section .future-dashboard-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.publish-suite,
.community-console,
.game-intel-grid,
.physics-feature-grid,
.settings-console,
.verify-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.collab-grid,
.chat-feature-grid,
.research-feed-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.future-panel {
  position: relative;
  overflow: hidden;
  min-height: 156px;
  padding: 24px;
  color: var(--ink);
  background: rgba(6, 16, 28, 0.84);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease), transform 0.22s var(--ease);
}

.future-panel:hover {
  border-color: rgba(0, 212, 255, 0.26);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6), 0 0 36px rgba(0, 212, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transform: translateY(-2px);
}

.home-intelligence-section .future-panel {
  color: rgba(244, 251, 255, 0.92);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.045)),
    rgba(5, 9, 16, 0.18);
  border-color: rgba(150, 225, 255, 0.22);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px);
}

.home-intelligence-section .future-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 28%, rgba(120, 230, 255, 0.12) 44%, transparent 62%),
    repeating-linear-gradient(0deg, transparent 0 12px, rgba(120, 230, 255, 0.03) 12px 13px);
  opacity: 0.8;
}

.home-intelligence-section .future-panel > * {
  position: relative;
  z-index: 1;
}

.composite-viewer-panel,
.world-network,
.featured-panel {
  grid-column: span 2;
}

.mini-structure-viewer {
  position: relative;
  height: 180px;
  margin: 10px 0 14px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(120, 230, 255, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(68, 214, 189, 0.07) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 50%, rgba(120, 230, 255, 0.16), transparent 58%),
    rgba(2, 8, 12, 0.68);
  background-size: 26px 26px, 26px 26px, auto, auto;
  border: 1px solid rgba(120, 230, 255, 0.18);
  border-radius: 8px;
  perspective: 700px;
}

.mini-structure-viewer span {
  position: absolute;
  top: 34px;
  width: 62px;
  height: 112px;
  border: 2px solid rgba(120, 230, 255, 0.5);
  border-radius: 8px;
  transform: rotateY(48deg) rotateX(8deg);
  box-shadow: inset 0 0 18px rgba(68, 214, 189, 0.2), 0 0 22px rgba(120, 230, 255, 0.14);
  animation: viewerRotate 5s ease-in-out infinite;
}

.mini-structure-viewer span::before {
  content: "";
  position: absolute;
  inset: 10px;
  background:
    repeating-linear-gradient(60deg, transparent 0 8px, rgba(120, 230, 255, 0.28) 8px 10px),
    repeating-linear-gradient(120deg, transparent 0 8px, rgba(68, 214, 189, 0.2) 8px 10px);
}

.mini-structure-viewer span:nth-child(1) { left: 18%; }
.mini-structure-viewer span:nth-child(2) { left: 36%; animation-delay: 0.35s; }
.mini-structure-viewer span:nth-child(3) { left: 54%; animation-delay: 0.7s; }
.mini-structure-viewer span:nth-child(4) { left: 72%; animation-delay: 1.05s; }

.generation-stack,
.prestige-ladder {
  display: grid;
  gap: 9px;
}

.generation-stack span,
.prestige-ladder span {
  display: grid;
  gap: 3px;
  padding: 10px 11px;
  color: rgba(234, 250, 255, 0.9);
  background: linear-gradient(135deg, rgba(120, 230, 255, 0.1), rgba(68, 214, 189, 0.07));
  border: 1px solid rgba(120, 230, 255, 0.16);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
  animation: generationGlow 4.2s ease-in-out infinite;
}

.generation-stack span:nth-child(2),
.prestige-ladder span:nth-child(2) { animation-delay: 0.5s; }
.generation-stack span:nth-child(3),
.prestige-ladder span:nth-child(3) { animation-delay: 1s; }

.generation-stack b {
  color: #eaffff;
  font-size: 15px;
}

.material-feed-panel b {
  color: #d9fdff;
}

.prestige-ladder span::before {
  content: "";
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, var(--os-cyan), var(--os-teal));
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(120, 230, 255, 0.25);
}

.timeline-panel-home p {
  padding-left: 12px;
  border-left: 2px solid rgba(120, 230, 255, 0.34);
}

.scientist-os-panel .scientist-grid {
  display: grid;
  gap: 8px;
}

@keyframes viewerRotate {
  0%, 100% { transform: rotateY(48deg) rotateX(8deg) translateY(0); }
  50% { transform: rotateY(28deg) rotateX(14deg) translateY(-8px); }
}

@keyframes generationGlow {
  0%, 100% { box-shadow: inset 0 0 0 rgba(120, 230, 255, 0); opacity: 0.78; }
  50% { box-shadow: inset 0 0 22px rgba(120, 230, 255, 0.08), 0 0 24px rgba(68, 214, 189, 0.08); opacity: 1; }
}

.future-panel h3 {
  margin-bottom: 10px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
}

.future-panel p {
  margin: 0 0 10px;
  color: var(--muted);
  opacity: 1;
  font-size: 14px;
  line-height: 1.55;
}

.future-panel .button {
  margin-top: 8px;
}

.module-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.module-tabs span {
  color: var(--green);
  background: var(--white);
  border-color: var(--line);
}

.data-table-wrap.compact {
  margin: 0;
  overflow-x: auto;
}

.data-table-wrap.compact .data-table {
  min-width: 620px;
}

.metric-console {
  grid-column: span 2;
}

.metric-ticker {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.metric-ticker span b {
  display: block;
  color: #bcebd9;
  font-size: 28px;
  line-height: 1;
}

.dna-radar {
  position: relative;
  display: grid;
  min-height: 230px;
  place-items: center;
  color: rgba(233, 244, 240, 0.84);
}

.dna-radar::before,
.dna-radar::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(188, 235, 217, 0.32);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}

.dna-radar::after {
  inset: 48px;
  background: rgba(84, 220, 173, 0.12);
  border-color: rgba(216, 148, 56, 0.46);
  animation: corePulse 4.2s ease-in-out infinite;
}

.dna-radar span {
  position: absolute;
  font-size: 12px;
  font-weight: 800;
}

.dna-radar span:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); }
.dna-radar span:nth-child(2) { top: 28%; right: 0; }
.dna-radar span:nth-child(3) { bottom: 26%; right: 0; }
.dna-radar span:nth-child(4) { bottom: 0; left: 50%; transform: translateX(-50%); }
.dna-radar span:nth-child(5) { bottom: 26%; left: 0; }
.dna-radar span:nth-child(6) { top: 28%; left: 0; }

.network-map {
  position: relative;
  min-height: 160px;
  margin-bottom: 12px;
  border: 1px solid rgba(188, 235, 217, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(188, 235, 217, 0.1), transparent 42%, rgba(216, 148, 56, 0.14)),
    rgba(5, 12, 11, 0.34);
}

.network-map::before,
.network-map::after {
  content: "";
  position: absolute;
  inset: 26px 32px;
  border-top: 1px dashed rgba(188, 235, 217, 0.42);
  transform: rotate(-12deg);
}

.network-map::after {
  transform: rotate(16deg);
  border-color: rgba(216, 148, 56, 0.42);
}

.network-map i {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #bcebd9;
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(188, 235, 217, 0.9);
}

.network-map i:nth-child(1) { top: 28px; left: 38px; }
.network-map i:nth-child(2) { top: 72px; left: 42%; background: #d89438; }
.network-map i:nth-child(3) { top: 42px; right: 46px; background: #c75f4b; }
.network-map i:nth-child(4) { bottom: 32px; left: 28%; }
.network-map i:nth-child(5) { bottom: 38px; right: 24%; background: #326b9a; }

.stage-timeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}

.stage-timeline article {
  min-height: 190px;
  padding: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.stage-timeline span {
  color: var(--green);
  font-size: 13px;
  font-weight: 900;
}

.stage-timeline p {
  margin: 0;
  color: var(--muted);
}

.card-grid,
.experiment-grid,
.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.research-tracks {
  display: grid;
  gap: 42px;
}

.research-track {
  display: grid;
  gap: 18px;
}

.research-track + .research-track {
  padding-top: 34px;
  border-top: 1px solid var(--line);
}

.research-track-header {
  max-width: 980px;
}

.research-track-header h3 {
  max-width: 980px;
  margin: 0 0 10px;
  font-size: clamp(28px, 4.4vw, 56px);
  line-height: 1.02;
}

.research-track-header p {
  max-width: 840px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(16px, 1.5vw, 22px);
}

.research-track-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.info-card,
.experiment-card,
.metric,
.chart-panel {
  background: rgba(6, 16, 28, 0.88);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}

.info-card:hover,
.experiment-card:hover {
  border-color: rgba(0, 212, 255, 0.24);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55), 0 0 30px rgba(0, 212, 255, 0.07);
  transform: translateY(-2px);
}

.info-card,
.experiment-card,
.metric {
  padding: 22px;
}

.info-card p,
.experiment-card p,
.metric p,
.timeline-item p {
  margin: 0;
  color: var(--muted);
}

.tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 10px;
  color: var(--os-cyan);
  background: rgba(0, 212, 255, 0.07);
  border: 1px solid rgba(0, 212, 255, 0.18);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.experiment-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.experiment-card {
  display: grid;
  gap: 12px;
}

.experiment-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 14px;
}

.experiment-topline strong {
  min-width: fit-content;
  padding: 4px 8px;
  color: var(--white);
  background: var(--green);
  border-radius: 8px;
  font-size: 12px;
}

.results-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 18px;
  align-items: stretch;
}

.chart-panel {
  min-height: 380px;
  padding: 24px;
}

.bar-chart {
  display: grid;
  grid-template-columns: repeat(4, minmax(60px, 1fr));
  align-items: end;
  gap: 14px;
  min-height: 330px;
}

.bar-wrap {
  display: grid;
  align-items: end;
  gap: 10px;
  height: 100%;
}

.bar {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 24px;
  color: var(--white);
  background: linear-gradient(180deg, var(--green), var(--blue));
  border-radius: 8px 8px 0 0;
  font-weight: 800;
}

.bar span {
  padding-top: 8px;
  font-size: 13px;
}

.bar-wrap p {
  min-height: 42px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.metric-grid {
  grid-template-columns: 1fr;
}

.metric strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 30px;
  line-height: 1;
}

.timeline {
  display: grid;
  gap: 12px;
}

.timeline-item {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 18px;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.timeline-item span {
  color: var(--coral);
  font-weight: 800;
}

.footer {
  padding: 28px clamp(18px, 5vw, 72px);
  color: var(--muted);
  border-top: 1px solid var(--line);
}

.editor-body {
  background: #eef4f1;
}

.editor-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 18px 72px;
}

.editor-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.editor-panel {
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.field {
  display: grid;
  gap: 6px;
}

.field.full {
  grid-column: 1 / -1;
}

.field label {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 42px;
  padding: 10px 14px;
  color: var(--ink);
  background: rgba(2, 8, 18, 0.85);
  border: 1px solid rgba(0, 200, 255, 0.14);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
  outline: none;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: rgba(0, 212, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1), 0 0 20px rgba(0, 212, 255, 0.08);
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(122, 172, 191, 0.4);
}

.field textarea {
  min-height: 92px;
  resize: vertical;
}

.repeater {
  display: grid;
  gap: 12px;
}

.repeater-item {
  padding: 16px;
  background: rgba(8, 20, 36, 0.65);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.repeater-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.small-button {
  min-height: 36px;
  padding: 0 14px;
  color: var(--os-cyan);
  background: rgba(0, 212, 255, 0.06);
  border: 1px solid rgba(0, 212, 255, 0.18);
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.18s var(--ease);
}

.small-button:hover {
  background: rgba(0, 212, 255, 0.1);
  border-color: rgba(0, 212, 255, 0.3);
}

.small-button.danger {
  color: var(--coral);
}

.notice {
  margin: 12px 0 0;
  color: rgba(122, 172, 191, 0.7);
  font-size: 13px;
  line-height: 1.5;
}

.publish-form,
.sim-panel,
.post-card,
.moment-card {
  background: rgba(6, 16, 28, 0.88);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 24px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45);
}

.publish-media-field {
  gap: 8px;
}

.publish-media-field input[type="file"] {
  padding: 12px;
  border-style: dashed;
  cursor: pointer;
}

.publish-media-field span {
  color: rgba(156, 193, 210, 0.72);
  font-size: 12px;
  line-height: 1.45;
}

/* Multi-file upload zone */
.multi-upload-zone {
  border: 2px dashed rgba(0, 212, 255, 0.35);
  border-radius: 12px;
  background: rgba(0, 20, 40, 0.55);
  transition: border-color 0.18s, background 0.18s;
  overflow: hidden;
}

.multi-upload-zone.drag-over {
  border-color: var(--os-cyan);
  background: rgba(0, 212, 255, 0.08);
}

.muz-body {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
}

.muz-icon {
  font-size: 26px;
  flex-shrink: 0;
  line-height: 1;
}

.muz-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.muz-text strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.muz-text span {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}

.muz-browse-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--os-cyan);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
}

.muz-browse-btn:hover {
  color: #fff;
}

.muz-file-list {
  border-top: 1px solid rgba(0, 212, 255, 0.15);
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.muz-file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(0, 212, 255, 0.05);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--ink);
}

.muz-file-row .muz-fname {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.muz-file-row .muz-fsize {
  color: var(--muted);
  font-size: 11px;
  font-family: 'SF Mono', 'JetBrains Mono', monospace;
  flex-shrink: 0;
}

.muz-file-row .muz-fstatus {
  font-size: 11px;
  flex-shrink: 0;
  color: var(--muted);
}

.muz-file-row .muz-fstatus.done {
  color: #2fffe0;
}

.muz-file-row .muz-fstatus.uploading {
  color: var(--os-cyan);
}

.muz-remove-btn {
  background: none;
  border: none;
  color: rgba(156, 193, 210, 0.5);
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
}

.muz-remove-btn:hover {
  color: #ff6b6b;
}

.muz-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 12px;
  gap: 10px;
}

.muz-add-btn {
  background: none;
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 7px;
  padding: 5px 12px;
  color: var(--os-cyan);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}

.muz-add-btn:hover {
  background: rgba(0, 212, 255, 0.1);
}

.muz-count {
  font-size: 11.5px;
  color: var(--muted);
}

.media-preview {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding: 14px;
  background:
    radial-gradient(circle at top left, rgba(92, 200, 255, 0.12), transparent 38%),
    rgba(3, 10, 20, 0.88);
  border: 1px solid rgba(92, 200, 255, 0.2);
  border-radius: 12px;
}

.media-preview[hidden] {
  display: none;
}

.media-preview-topline {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  font-weight: 800;
  font-size: 13px;
}

.media-preview-topline small {
  color: var(--muted);
  font-family: 'SF Mono', 'JetBrains Mono', monospace;
}

.embedded-media {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(92, 200, 255, 0.16);
  background: rgba(3, 9, 18, 0.9);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.34);
}

.embedded-video {
  object-fit: contain;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.post-card,
.moment-card {
  display: grid;
  gap: 14px;
}

.post-card p,
.moment-card p {
  margin: 0;
  color: var(--muted);
}

.moments-layout,
.profile-form {
  display: grid;
  gap: 18px;
}

.moments-shell {
  display: grid;
  gap: 0;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 26px 70px rgba(24, 33, 31, 0.12);
}

.moments-cover {
  position: relative;
  min-height: clamp(320px, 42vw, 560px);
  background-position: center;
  background-size: cover;
  isolation: isolate;
}

.moments-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.36)),
    repeating-linear-gradient(0deg, transparent 0 10px, rgba(255, 255, 255, 0.035) 10px 11px);
}

.window-dots {
  position: absolute;
  top: 22px;
  left: 24px;
  display: flex;
  gap: 12px;
}

.window-dots span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

.window-dots span:nth-child(1) {
  background: #ff5d57;
}

.window-dots span:nth-child(2) {
  background: #ffc247;
}

.window-dots span:nth-child(3) {
  background: #34c96b;
}

.moments-cover-actions {
  position: absolute;
  top: 18px;
  right: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.moment-icon-button {
  position: relative;
  min-height: 40px;
  padding: 8px 12px;
  color: var(--white);
  background: rgba(24, 33, 31, 0.36);
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 8px;
  backdrop-filter: blur(12px);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.notice-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  background: #d93f2f;
  border: 2px solid var(--white);
  border-radius: 50%;
}

.moments-self-avatar {
  position: absolute;
  right: 28px;
  bottom: -34px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.moments-self-avatar .avatar-preview {
  width: 112px;
  height: 112px;
  border: 5px solid var(--white);
  box-shadow: 0 18px 42px rgba(24, 33, 31, 0.24);
}

.moments-profile-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: end;
  padding: 42px 154px 24px 28px;
}

.moments-profile-bar h3 {
  margin: 0 0 6px;
  font-size: clamp(28px, 4.6vw, 54px);
}

.moments-profile-bar p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.moment-owner-strip {
  display: none;
  justify-content: flex-end;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.moment-owner-button {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 76px;
  padding: 8px;
  color: var(--muted);
  background: rgba(8, 20, 36, 0.65);
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.moment-owner-button.active {
  color: var(--green);
  border-color: var(--green);
  box-shadow: 0 10px 24px rgba(32, 122, 90, 0.12);
}

.moment-owner-avatar {
  width: 46px;
  height: 46px;
}

.moment-toolbar {
  display: grid;
  grid-template-columns: minmax(200px, 0.55fr) minmax(260px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin: 0 28px 22px;
}

.moment-composer {
  margin: 0 28px 22px;
}

.moment-composer[hidden] {
  display: none;
}

.moment-feed {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  padding: 0 28px 32px;
}

.moment-story-card {
  border-radius: 8px;
  box-shadow: 0 16px 42px rgba(24, 33, 31, 0.07);
}

.moment-story-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.moment-story-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.moment-story-avatar {
  width: 52px;
  height: 52px;
}

.moment-media {
  width: 100%;
  max-height: 680px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.moment-time {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.moment-comments {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.moment-comments h4 {
  margin: 0;
}

.moment-comment-list {
  display: grid;
  gap: 8px;
}

.moment-comment-list p {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(8, 20, 36, 0.65);
  border-radius: 8px;
}

.moment-comment-list p > span {
  flex: 1 1 220px;
  min-width: 0;
}

.moment-comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.moment-comment-form input {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
}

.profile-top {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.profile-top h3 {
  margin: 0;
  font-size: 26px;
}

.post-topline,
.post-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}

/* Combined like/comment action buttons */
.post-action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid rgba(98,255,230,.14);
  background: rgba(7,20,36,.72);
  color: rgba(232,247,255,.72); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: .18s ease;
}
.post-action-btn:hover:not(:disabled) {
  border-color: rgba(47,255,224,.4);
  background: rgba(8,30,50,.9);
  color: #e8f7ff;
}
.post-action-btn:disabled { opacity:.7; cursor:default; }
.post-action-btn .pa-icon { font-size:15px; line-height:1; }
.post-action-btn .pa-count { color: rgba(232,247,255,.5); font-size:12px; }
.post-action-btn.like-button:disabled .pa-icon { color:#ff6b8a; }

/* Delete button on own posts */
.post-delete-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  border: 1px solid rgba(255,80,80,.22);
  background: rgba(255,60,60,.07); color:rgba(255,100,100,.7);
  font-size:12px; cursor:pointer; transition:.15s ease;
  flex-shrink:0;
}
.post-delete-btn:hover { background:rgba(255,60,60,.18); color:#ff6b6b; border-color:rgba(255,80,80,.5); }

/* Media in posts */
.post-media-wrap { border-radius:12px; overflow:hidden; margin:4px 0 2px; }
.post-media-wrap .embedded-media { display:block; width:100%; max-height:520px; object-fit:cover; border-radius:12px; }
.post-media-wrap .embedded-video { width:100%; max-height:420px; border-radius:12px; background:#000; }

/* Comment panel */
.post-comments-panel { display:grid; gap:10px; padding-top:12px; border-top:1px solid var(--line); }
.comment-row {
  display:flex; align-items:flex-start; gap:9px;
  padding:9px 12px; background:rgba(8,20,36,.65);
  border-radius:10px; border:1px solid rgba(98,255,230,.07);
}
.comment-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.comment-name { font-size:12px; font-weight:800; color:rgba(232,247,255,.8); }
.comment-text { font-size:13px; color:rgba(232,247,255,.65); line-height:1.55; word-break:break-word; }

.post-topline span:first-child {
  padding: 4px 10px;
  color: #020b14;
  background: linear-gradient(135deg, var(--os-cyan), var(--os-teal));
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.post-author {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}

.verified-badge {
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  margin-left: 6px;
  color: #5d4300;
  background: #f4c542;
  border: 1px solid #bd8f13;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
  vertical-align: text-bottom;
}

.post-data {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.post-data div {
  padding: 12px;
  background: rgba(8, 20, 36, 0.65);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.post-data dt {
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.post-data dd {
  margin: 4px 0 0;
  color: var(--muted);
}

.video-link {
  width: fit-content;
  color: var(--blue);
  font-weight: 800;
}

/* Upload progress bar */
.media-upload-progress {
  height: 4px; border-radius: 999px;
  background: rgba(98,255,230,.12); overflow: hidden; margin-top: 8px;
}
.media-upload-bar {
  height: 100%; width: 60%; border-radius: inherit;
  background: linear-gradient(90deg, #2fffe0, #51a8ff);
  animation: mediaUploadPulse 1.2s ease-in-out infinite alternate;
}
@keyframes mediaUploadPulse { from { opacity:.4; width:20%; } to { opacity:1; width:90%; } }

/* File download card for non-image/video attachments */
.file-download-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 12px;
  border: 1px solid rgba(98,255,230,.15);
  background: rgba(5,18,32,.72);
  text-decoration: none; color: inherit;
  transition: border-color .18s, background .18s;
}
.file-download-card:hover { border-color: rgba(47,255,224,.4); background: rgba(8,30,50,.9); }
.fdc-icon { font-size: 28px; flex-shrink: 0; line-height: 1; }
.fdc-info { flex: 1; min-width: 0; }
.fdc-info b { display: block; font-size: 13px; color: #e8f7ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fdc-info small { color: rgba(232,247,255,.45); font-size: 11px; }
.fdc-dl {
  flex-shrink: 0; padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(47,255,224,.25); background: rgba(47,255,224,.07);
  color: #2fffe0; font-size: 12px; font-weight: 700;
}

.comments {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.comments h4 {
  margin: 0;
}

.comment-list {
  display: grid;
  gap: 8px;
}

.comment-list p {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(8, 20, 36, 0.65);
  border-radius: 8px;
}

.comment-list p > span {
  flex: 1 1 220px;
  min-width: 0;
}

.comment-form {
  display: grid;
  grid-template-columns: minmax(100px, 0.6fr) minmax(160px, 1fr) auto;
  gap: 8px;
}

.comment-form input {
  min-height: 38px;
  padding: 8px 10px;
  color: var(--ink);
  background: rgba(2, 8, 18, 0.84);
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
}

.compact-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 18px;
}

.social-grid,
.chat-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.chat-layout {
  grid-template-columns: minmax(230px, 0.35fr) minmax(0, 1fr);
}

.social-card,
.chat-panel {
  padding: 24px;
  background: rgba(6, 16, 28, 0.88);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45);
}

.social-card h3,
.chat-panel h3 {
  margin: 0 0 14px;
}

.people-list {
  display: grid;
  gap: 10px;
}

.person-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(6, 16, 28, 0.75);
  border: 1px solid rgba(0, 200, 255, 0.1);
  border-radius: 10px;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}

.person-row:hover {
  background: rgba(0, 212, 255, 0.05);
  border-color: rgba(0, 212, 255, 0.2);
}

.person-row p,
.empty-state,
.cert-preview p {
  margin: 0;
  color: var(--muted);
}

.person-main {
  display: grid;
  min-width: 0;
}

.status-pill {
  padding: 5px 10px;
  color: var(--os-cyan);
  background: rgba(0, 212, 255, 0.07);
  border: 1px solid rgba(0, 212, 255, 0.18);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.chat-panel {
  display: grid;
  grid-template-rows: minmax(280px, 1fr) auto auto;
  gap: 12px;
}

.chat-friend-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.chat-friend-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(6, 16, 28, 0.75);
  border: 1px solid rgba(0, 200, 255, 0.1);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}

.chat-friend-row:hover {
  background: rgba(0, 212, 255, 0.05);
  border-color: rgba(0, 212, 255, 0.18);
}

.chat-friend-row.active {
  border-color: rgba(0, 212, 255, 0.35);
  background: rgba(0, 212, 255, 0.07);
  box-shadow: inset 3px 0 0 var(--os-cyan);
}

.chat-friend-main {
  display: grid;
  min-width: 0;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.chat-friend-main p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.chat-messages {
  display: grid;
  align-content: start;
  gap: 10px;
  max-height: 520px;
  overflow: auto;
  padding: 16px;
  background: rgba(2, 8, 18, 0.8);
  border: 1px solid rgba(0, 200, 255, 0.1);
  border-radius: 12px;
}

.message-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.message-row.mine {
  justify-content: flex-end;
}

.message-bubble {
  max-width: min(76%, 620px);
  padding: 10px 14px;
  background: rgba(10, 24, 42, 0.9);
  border: 1px solid rgba(0, 200, 255, 0.14);
  border-radius: 12px;
  border-bottom-left-radius: 4px;
}

.message-avatar {
  width: 32px;
  height: 32px;
  font-size: 11px;
}

.message-author {
  display: inline-block;
  margin-bottom: 2px;
  color: var(--ink);
  font-weight: 900;
}

.message-row.mine .message-bubble {
  color: #020b14;
  background: linear-gradient(135deg, #00d4ff, #00ffcc);
  border-color: transparent;
  border-radius: 12px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.25);
}

.message-row.mine .message-author {
  color: #020b14;
}

.message-bubble p {
  margin: 4px 0 0;
}

.chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.chat-form input,
.social-card select {
  width: 100%;
  min-height: 42px;
  padding: 10px 14px;
  color: var(--ink);
  background: rgba(2, 8, 18, 0.85);
  border: 1px solid rgba(0, 200, 255, 0.14);
  border-radius: 8px;
  font: inherit;
}

.profile-overlay[hidden] {
  display: none;
}

.profile-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(24, 33, 31, 0.38);
  backdrop-filter: blur(12px);
}

.profile-card {
  position: relative;
  display: grid;
  gap: 22px;
  width: min(640px, 100%);
  max-height: min(820px, 92vh);
  overflow: auto;
  padding: 34px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(216, 227, 223, 0.9);
  border-radius: 8px;
  box-shadow: 0 32px 96px rgba(24, 33, 31, 0.28);
}

.profile-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: var(--ink);
  background: rgba(8, 20, 36, 0.65);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.profile-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding-right: 36px;
}

.profile-hero h2 {
  font-size: clamp(30px, 5vw, 46px);
}

.profile-hero p {
  margin: 5px 0 0;
  color: var(--muted);
  font-weight: 800;
}

.profile-detail-list {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.profile-detail-list div {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.profile-detail-list div:last-child {
  border-bottom: 0;
}

.profile-detail-list dt {
  color: var(--muted);
  font-weight: 800;
}

.profile-detail-list dd {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-weight: 800;
}

.profile-moment-preview {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  color: var(--ink);
  background: rgba(8, 20, 36, 0.65);
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.profile-actions {
  position: sticky;
  bottom: -34px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.98) 36%);
}

.profile-action-button {
  min-height: 52px;
  padding: 8px 10px;
  color: var(--white);
  background: var(--green);
  border: 1px solid var(--green);
  border-radius: 8px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.profile-action-button.secondary {
  color: var(--ink);
  background: var(--white);
  border-color: var(--line);
}

.profile-action-button:disabled {
  color: var(--muted);
  background: #eef4f1;
  border-color: var(--line);
  cursor: not-allowed;
}

.profile-action-button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.design-game-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}

.game-stage {
  position: relative;
  min-height: clamp(360px, 46vw, 620px);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(237, 246, 244, 0.86)),
    repeating-linear-gradient(90deg, rgba(24, 33, 31, 0.035) 0 1px, transparent 1px 46px),
    var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(24, 33, 31, 0.12);
  isolation: isolate;
}

.game-stage::before {
  content: "";
  position: absolute;
  inset: -35% -15%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 18%, rgba(255, 255, 255, 0.28) 44%, transparent 68%);
  transform: translateX(-42%);
  animation: stage-sheen 9s ease-in-out infinite;
}

.game-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 24%, transparent 74%, rgba(24, 33, 31, 0.04)),
    repeating-linear-gradient(0deg, transparent 0 13px, rgba(50, 107, 154, 0.035) 13px 14px);
  opacity: 0.82;
}

#simCanvas {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  min-height: clamp(360px, 46vw, 620px);
  aspect-ratio: 1120 / 620;
}

.game-start-card {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: min(86%, 520px);
  transform: translate(-50%, -50%);
  padding: 28px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  box-shadow: 0 30px 90px rgba(24, 33, 31, 0.22);
  backdrop-filter: blur(18px);
}

.game-start-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: -1;
  border: 1px solid rgba(32, 122, 90, 0.16);
  border-radius: 6px;
}

.game-start-card h3 {
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 48px);
}

.game-start-card p {
  color: var(--muted);
}

.start-sim-button {
  min-height: 56px;
  margin-top: 10px;
  padding: 0 24px;
  color: var(--white);
  background: rgba(24, 33, 31, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(24, 33, 31, 0.24);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.start-sim-button:hover {
  transform: translateY(-3px) scale(1.02);
  background: var(--green);
  box-shadow: 0 24px 56px rgba(32, 122, 90, 0.32);
}

.game-workbench,
.leaderboard-panel,
.physics-output {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 248, 0.94)),
    var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(24, 33, 31, 0.08);
}

.leaderboard-panel {
  margin-top: 18px;
}

.step-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.step-pill,
.structure-button {
  min-height: 44px;
  padding: 10px 12px;
  color: var(--ink);
  background: rgba(8, 20, 36, 0.65);
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.step-pill:hover,
.structure-button:hover {
  transform: translateY(-1px);
  border-color: rgba(32, 122, 90, 0.38);
  box-shadow: 0 12px 26px rgba(24, 33, 31, 0.08);
}

.step-pill.active,
.structure-button.active {
  color: var(--white);
  background: var(--ink);
  border-color: var(--ink);
}

.game-step-panel {
  display: none;
  gap: 14px;
}

.game-step-panel.active {
  display: grid;
}

.material-grid,
.structure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.challenge-panel {
  display: grid;
  grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
  gap: 16px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(247, 250, 248, 0.98), rgba(239, 247, 252, 0.86));
  border: 1px solid var(--line);
  border-radius: 8px;
}

.challenge-panel p {
  margin: 0;
  color: var(--muted);
}

.challenge-stats,
.trial-history {
  display: grid;
  gap: 8px;
}

.challenge-stats {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.challenge-stats span,
.trial-row {
  padding: 9px 10px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
}

.material-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  background: rgba(8, 20, 36, 0.65);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.material-card.selected {
  border-color: var(--green);
  box-shadow: 0 10px 24px rgba(32, 122, 90, 0.12);
}

.material-card p,
.structure-button small,
.mix-summary {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.material-card input[type="range"] {
  width: 100%;
  margin-top: 8px;
  accent-color: var(--green);
}

.grams-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px auto;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.grams-field input {
  width: 100%;
  min-height: 36px;
  padding: 6px 8px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
}

.grams-field b {
  color: var(--muted);
}

.material-swatch,
.structure-button span {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(24, 33, 31, 0.2);
  border-radius: 50%;
}

.structure-button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  text-align: left;
}

.structure-button small {
  grid-column: 1 / -1;
}

.compact-controls {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

.leaderboard-list {
  display: grid;
  gap: 8px;
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 92px minmax(170px, 0.38fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: rgba(247, 250, 248, 0.92);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.leaderboard-row small {
  color: var(--muted);
}

.trial-panel {
  display: grid;
  gap: 12px;
}

.trial-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 58px minmax(120px, 0.8fr);
  gap: 8px;
  align-items: center;
}

.trial-row small {
  color: var(--muted);
}

.evolution-lab-section {
  position: relative;
  overflow: hidden;
  color: #f5fbff;
  background:
    linear-gradient(135deg, #05080f 0%, #111326 34%, #092333 68%, #261c18 100%),
    repeating-linear-gradient(90deg, rgba(126, 225, 255, 0.045) 0 1px, transparent 1px 54px);
  border-bottom: 1px solid rgba(143, 225, 255, 0.2);
  isolation: isolate;
}

.evolution-lab-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(115deg, transparent 0 28%, rgba(96, 223, 255, 0.14) 44%, transparent 62%),
    linear-gradient(65deg, transparent 0 20%, rgba(255, 184, 98, 0.12) 38%, transparent 58%),
    radial-gradient(ellipse at 72% 22%, rgba(158, 122, 255, 0.18), transparent 46%);
  background-size: 180% 180%, 190% 190%, auto;
  animation: holoDrift 14s ease-in-out infinite alternate;
}

.evolution-lab-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 13px, rgba(160, 228, 255, 0.035) 13px 14px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.2));
}

.evolution-lab-section .section-heading h2,
.evolution-lab-section h3 {
  color: #f6fbff;
}

.evolution-lab-section .future-panel,
.lab-console,
.ai-generator-card,
.aux-lab-panel,
.evolution-lab-section .ai-panel,
.evolution-lab-section .leaderboard-panel {
  color: #f5fbff;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.045)),
    rgba(7, 12, 20, 0.58);
  border: 1px solid rgba(155, 229, 255, 0.22);
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px);
}

.evolution-lab-section .future-panel p,
.evolution-lab-section .ai-panel p,
.evolution-lab-section .notice {
  color: rgba(228, 241, 247, 0.74);
}

.lab-cinematic {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--sidebar-width);
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
  min-height: 100vh;
  padding: clamp(42px, 7vw, 92px);
  background:
    linear-gradient(120deg, rgba(3, 6, 12, 0.98), rgba(12, 18, 38, 0.98) 48%, rgba(5, 32, 43, 0.97)),
    repeating-linear-gradient(90deg, rgba(126, 225, 255, 0.08) 0 1px, transparent 1px 52px);
  overflow: hidden;
}

.lab-cinematic[hidden] {
  display: none;
}

.cinematic-data-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, transparent, rgba(126, 225, 255, 0.18), transparent),
    repeating-linear-gradient(0deg, transparent 0 14px, rgba(255, 255, 255, 0.04) 14px 15px);
  transform: skewY(-7deg);
  opacity: 0.46;
  animation: cinematicScan 6s linear infinite;
}

.cinematic-copy {
  position: relative;
  z-index: 3;
  max-width: 620px;
  padding: 20px 24px;
  background: rgba(4, 8, 16, 0.56);
  border: 1px solid rgba(155, 229, 255, 0.22);
  border-radius: 8px;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
}

.cinematic-copy h2 {
  font-size: clamp(52px, 8vw, 96px);
  line-height: 0.86;
  text-shadow: 0 0 34px rgba(126, 225, 255, 0.24);
}

.cinematic-copy p {
  margin: 8px 0;
  color: rgba(245, 251, 255, 0.88);
  font-size: clamp(16px, 1.7vw, 22px);
  font-weight: 800;
}

.cinematic-copy b {
  color: #ffbf78;
}

.cinematic-reactor {
  position: relative;
  z-index: 2;
  min-height: 520px;
  border: 1px solid rgba(150, 225, 255, 0.24);
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(99, 229, 255, 0.22), transparent 43%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    rgba(255, 255, 255, 0.05);
  background-size: auto, 42px 42px, 42px 42px, auto;
  box-shadow: inset 0 0 80px rgba(117, 226, 255, 0.12), 0 30px 100px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.cinematic-reactor span {
  position: absolute;
  inset: 18%;
  border: 2px solid rgba(145, 229, 255, 0.42);
  border-radius: 50%;
  transform: rotate(0deg);
  animation: reactorOrbit 8s linear infinite;
}

.cinematic-reactor span:nth-child(2) {
  inset: 28%;
  border-color: rgba(255, 190, 102, 0.46);
  animation-duration: 6.8s;
  animation-direction: reverse;
}

.cinematic-reactor span:nth-child(3) {
  inset: 38%;
  border-color: rgba(255, 122, 128, 0.42);
  animation-duration: 5.4s;
}

.cinematic-reactor span:nth-child(4) {
  inset: 47%;
  background: rgba(173, 247, 255, 0.7);
  border-color: transparent;
  box-shadow: 0 0 48px rgba(126, 225, 255, 0.76), 0 0 96px rgba(255, 190, 102, 0.3);
}

.evolution-lab-shell {
  display: grid;
  grid-template-columns: minmax(290px, 0.44fr) minmax(520px, 1fr);
  gap: 20px;
  align-items: start;
}

.lab-console {
  display: grid;
  gap: 18px;
  min-width: 0;
  padding: 22px 20px;
  background: rgba(5, 13, 24, 0.72);
  border: 1px solid rgba(0, 200, 255, 0.1);
  border-radius: 14px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.console-heading {
  display: grid;
  gap: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0, 200, 255, 0.08);
}

.console-heading .eyebrow {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.16em;
}

.console-heading h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.evolution-lab-section .field,
.evolution-lab-section .range-field {
  color: rgba(220, 238, 255, 0.88);
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.evolution-lab-section .range-field input[type="range"] {
  accent-color: #00d4ff;
  height: 4px;
  cursor: pointer;
}

.evolution-lab-section .range-field span {
  color: var(--os-cyan);
  font-family: 'SF Mono', 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
}

.evolution-lab-section input,
.evolution-lab-section select,
.evolution-lab-section textarea {
  color: #f7fbff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(155, 229, 255, 0.22);
}

.material-core-panel .material-grid {
  grid-template-columns: 1fr;
  max-height: 660px;
  overflow: auto;
  padding-right: 4px;
}

.material-core-panel .challenge-panel {
  grid-template-columns: 1fr;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(155, 229, 255, 0.18);
}

.evolution-lab-section .material-card {
  grid-template-columns: 48px minmax(0, 1fr);
  color: #f7fbff;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(155, 229, 255, 0.16);
}

.evolution-lab-section .material-card.selected {
  border-color: rgba(255, 190, 102, 0.68);
  box-shadow: 0 0 30px rgba(255, 190, 102, 0.12), inset 0 0 26px rgba(126, 225, 255, 0.08);
}

.material-structure-preview {
  position: relative;
  width: 42px;
  height: 42px;
  overflow: hidden;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 0 2px, transparent 2px 7px),
    rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}

.material-structure-preview::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
  box-shadow: 0 0 16px currentColor;
  animation: corePulse 3s ease-in-out infinite;
}

.dna-mini {
  display: grid;
  gap: 5px;
  margin-top: 10px;
}

.dna-mini span,
.dna-row {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: center;
  color: rgba(231, 244, 250, 0.82);
  font-size: 12px;
  font-weight: 800;
}

.dna-mini em,
.dna-row em {
  color: rgba(255, 190, 102, 0.9);
  font-style: normal;
  text-align: right;
}

.dna-mini i,
.dna-row i {
  height: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.09);
  border-radius: 999px;
}

.dna-mini i::before,
.dna-row i::before {
  content: "";
  display: block;
  width: calc(var(--value) * 1%);
  height: 100%;
  background: linear-gradient(90deg, #7ee1ff, #ffbf78, #ff7e88);
  border-radius: inherit;
}

.ai-generator-card {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.ai-generator-card label {
  display: flex;
  gap: 8px;
  align-items: center;
  color: rgba(236, 248, 255, 0.82);
  font-weight: 800;
}

.ai-generator-card input[type="file"] {
  width: 100%;
  min-height: 48px;
  padding: 11px;
  color: rgba(245, 251, 255, 0.88);
  background: rgba(126, 225, 255, 0.08);
  border: 1px dashed rgba(155, 229, 255, 0.32);
  border-radius: 8px;
}

.reactor-panel {
  gap: 18px;
}

.reactor-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0, 200, 255, 0.08);
}

.evolution-lab-section .game-stage {
  min-height: clamp(420px, 42vw, 640px);
  background:
    linear-gradient(135deg, rgba(3, 8, 14, 0.88), rgba(12, 24, 42, 0.82)),
    rgba(255, 255, 255, 0.05);
  border-color: rgba(155, 229, 255, 0.22);
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.32), inset 0 0 70px rgba(126, 225, 255, 0.08);
}

.evolution-lab-section .game-stage::before {
  background: linear-gradient(115deg, transparent 18%, rgba(126, 225, 255, 0.2) 44%, transparent 68%);
}

.evolution-lab-section .game-stage::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 24%, transparent 74%, rgba(0, 0, 0, 0.18)),
    repeating-linear-gradient(0deg, transparent 0 13px, rgba(126, 225, 255, 0.04) 13px 14px);
}

.evolution-lab-section #simCanvas {
  min-height: clamp(420px, 42vw, 640px);
}

.evolution-lab-section .game-start-card {
  color: #f7fbff;
  background: rgba(3, 8, 18, 0.82);
  border-color: rgba(0, 200, 255, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.evolution-lab-section .game-start-card .eyebrow {
  font-size: 10px;
  letter-spacing: 0.16em;
  margin-bottom: 8px;
}

.evolution-lab-section .game-start-card h3 {
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 10px;
}

.evolution-lab-section .game-start-card p {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(180, 210, 230, 0.72);
  max-width: 46ch;
  margin-bottom: 18px;
}

.evolution-lab-section .start-sim-button {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0 20px;
  min-height: 42px;
}

.rare-discovery {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: min(88%, 540px);
  padding: 24px;
  text-align: center;
  transform: translate(-50%, -50%);
  color: #fff8e8;
  background:
    linear-gradient(145deg, rgba(255, 190, 102, 0.18), rgba(126, 225, 255, 0.12)),
    rgba(6, 10, 18, 0.88);
  border: 1px solid rgba(255, 190, 102, 0.48);
  border-radius: 8px;
  box-shadow: 0 0 90px rgba(255, 190, 102, 0.28), 0 30px 100px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(18px);
}

.structure-console {
  display: grid;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 200, 255, 0.08);
  margin-top: 4px;
}

.evolution-lab-section .structure-button {
  color: #f7fbff;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(155, 229, 255, 0.18);
}

.evolution-lab-section .structure-button.active {
  color: #071019;
  background: linear-gradient(135deg, #7ee1ff, #ffbf78);
  border-color: transparent;
}

.ai-intelligence-panel {
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
}

.ai-intelligence-panel .console-heading,
.ai-intelligence-panel .scientist-panel,
.ai-intelligence-panel .trial-panel,
.ai-intelligence-panel > .game-controls {
  grid-column: 1 / -1;
}

.aux-lab-panel {
  display: grid;
  gap: 10px;
  padding: 16px;
  background: rgba(4, 12, 22, 0.55);
  border: 1px solid rgba(0, 200, 255, 0.09);
  border-radius: 10px;
  transition: border-color 0.2s ease;
}

.aux-lab-panel:hover {
  border-color: rgba(0, 200, 255, 0.18);
}

.aux-lab-panel h3 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.evolution-lab-section .sim-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.evolution-lab-section .sim-metrics .metric,
.evolution-lab-section .model-summary span,
.evolution-lab-section .challenge-stats span,
.evolution-lab-section .trial-row,
.evolution-lab-section .leaderboard-row {
  color: #f7fbff;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(155, 229, 255, 0.18);
}

.prestige-meter {
  height: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
}

.prestige-meter span {
  display: block;
  width: var(--prestige);
  height: 100%;
  background: linear-gradient(90deg, #7ee1ff, #ffbf78, #ff7e88);
}

.rival-row,
.evolution-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.065);
  border: 1px solid rgba(155, 229, 255, 0.14);
  border-radius: 8px;
  color: rgba(236, 248, 255, 0.86);
  font-weight: 800;
}

.failure-warning {
  border-color: rgba(255, 126, 136, 0.46);
  box-shadow: inset 0 0 34px rgba(255, 126, 136, 0.08);
}

.failure-ok {
  border-color: rgba(126, 225, 255, 0.28);
}

.cic-loop,
.scientist-grid {
  display: grid;
  gap: 8px;
}

.cic-loop {
  counter-reset: cic;
}

.cic-loop span,
.scientist-grid span {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  color: rgba(244, 251, 255, 0.9);
  background:
    linear-gradient(135deg, rgba(126, 225, 255, 0.1), rgba(255, 190, 102, 0.08)),
    rgba(255, 255, 255, 0.065);
  border: 1px solid rgba(155, 229, 255, 0.16);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-size: 13px;
  font-weight: 850;
}

.cic-loop span {
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
}

.cic-loop span::before {
  counter-increment: cic;
  content: counter(cic);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: #061018;
  background: linear-gradient(135deg, #7ee1ff, #ffbf78);
  border-radius: 50%;
  font-size: 12px;
}

.scientist-grid b {
  color: #ffffff;
  font-size: 14px;
}

.scientist-grid small {
  color: rgba(226, 244, 250, 0.72);
  font-size: 12px;
  line-height: 1.35;
}

.evolution-lab-section .leaderboard-panel {
  margin-top: 18px;
}

@keyframes cinematicScan {
  from { background-position: -60% 0, 0 0; }
  to { background-position: 60% 0, 0 40px; }
}

@keyframes reactorOrbit {
  from { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.05); }
  to { transform: rotate(360deg) scale(1); }
}

.simulator-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
  gap: 18px;
}

.physics-lab-section {
  position: relative;
  overflow: hidden;
  color: #f5fbff;
  background:
    linear-gradient(135deg, #05080f 0%, #121425 34%, #082436 66%, #24191e 100%),
    repeating-linear-gradient(90deg, rgba(126, 225, 255, 0.045) 0 1px, transparent 1px 52px);
  isolation: isolate;
}

.physics-lab-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(116deg, transparent 0 26%, rgba(126, 225, 255, 0.14) 42%, transparent 60%),
    linear-gradient(64deg, transparent 0 24%, rgba(255, 191, 120, 0.12) 40%, transparent 62%),
    radial-gradient(ellipse at 78% 18%, rgba(182, 146, 255, 0.18), transparent 46%);
  background-size: 180% 180%, 180% 180%, auto;
  animation: holoDrift 14s ease-in-out infinite alternate;
}

.physics-lab-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 13px, rgba(160, 228, 255, 0.035) 13px 14px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 20%, transparent 82%, rgba(0, 0, 0, 0.22));
}

.physics-lab-section .section-heading h2,
.physics-lab-section h3 {
  color: #f6fbff;
}

.physics-lab-section .future-panel {
  color: #f5fbff;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.045)),
    rgba(7, 12, 20, 0.58);
  border: 1px solid rgba(155, 229, 255, 0.22);
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px);
}

.physics-lab-section .future-panel p,
.physics-lab-section .notice {
  color: rgba(228, 241, 247, 0.76);
}


.physics-lab-section .field,
.physics-lab-section .range-field {
  color: rgba(245, 251, 255, 0.92);
}

.physics-lab-section input,
.physics-lab-section select,
.physics-lab-section textarea {
  color: #f7fbff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(155, 229, 255, 0.22);
}

.physics-lab-section input[type="file"] {
  padding: 10px;
}

.physics-lab-section .button.primary {
  color: #061019;
  background: linear-gradient(135deg, #7ee1ff, #ffbf78);
  border-color: transparent;
}

.physics-lab-section .button.secondary {
  color: rgba(245, 251, 255, 0.92);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(155, 229, 255, 0.24);
}

.physics-lab-section .range-field input {
  accent-color: #7ee1ff;
}



.sim-panel {
  display: grid;
  gap: 18px;
}

.range-field {
  display: grid;
  gap: 10px;
  color: var(--ink);
  font-weight: 800;
}

.range-field span {
  color: var(--blue);
}

.range-field input {
  width: 100%;
  accent-color: var(--green);
}

.sim-output {
  display: grid;
  gap: 14px;
}

.game-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.game-controls .button {
  min-height: 38px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 8px;
}

.sim-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.sim-metrics .metric {
  min-width: 0;
  padding: 16px;
}

.sim-metrics .metric strong {
  font-size: clamp(24px, 1.9vw, 30px);
  white-space: nowrap;
}

.sim-metrics .metric p {
  line-height: 1.25;
  word-break: normal;
  overflow-wrap: normal;
}

.model-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.model-summary span {
  padding: 9px 10px;
  color: var(--ink);
  background: rgba(8, 20, 36, 0.65);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
}

.model-caption {
  margin-top: 12px !important;
  font-size: 12px;
}


.data-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  font-size: 14px;
}

.data-table th,
.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.data-table th {
  color: var(--blue);
  background: rgba(8, 20, 36, 0.65);
}

.ai-panel {
  padding: 22px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.ai-panel h3 {
  margin-bottom: 12px;
}

.ai-panel p {
  margin: 0;
  color: var(--muted);
}

@keyframes stage-sheen {
  0%,
  25% {
    transform: translateX(-42%);
  }

  65%,
  100% {
    transform: translateX(42%);
  }
}

@media (max-width: 940px) {
  :root {
    --sidebar-width: 0px;
  }

  .site-header,
  .editor-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-header {
    position: sticky;
    top: 0;
    bottom: auto;
    width: auto;
    min-height: auto;
    padding: 14px 18px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .nav {
    flex-direction: row;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .hero,
  .intro,
  .home-mission,
  .os-flow-panel,
  .hero-live-metrics,
  .future-dashboard-grid,
  .research-database-grid,
  .publish-suite,
  .community-console,
  .research-feed-strip,
  .game-intel-grid,
  .physics-feature-grid,
  .collab-grid,
  .chat-feature-grid,
  .settings-console,
  .verify-grid,
  .goal-grid,
  .stage-timeline,
  .metric-ticker,
  .core-readouts,
  .challenge-panel,
  .results-layout,
  .simulator-layout,
  .design-game-shell,
  .evolution-lab-shell,
  .ai-intelligence-panel,
  .reactor-topbar,
  .lab-cinematic,
  .social-grid,
  .chat-layout,
  .compact-form,
  .moments-profile-bar,
  .moment-toolbar {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
  }

  .home-intelligence-section .future-dashboard-grid,
  .composite-viewer-panel,
  .world-network,
  .featured-panel {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .os-flow-panel i {
    min-height: 2px;
  }

  .metric-console {
    grid-column: auto;
  }

  .profile-card {
    padding: 24px;
  }

  .moments-profile-bar {
    padding-right: 28px;
  }

  .profile-hero,
  .profile-detail-list div,
  .profile-actions {
    grid-template-columns: 1fr;
  }

  .profile-hero {
    padding-right: 0;
  }

  .card-grid,
  .experiment-grid,
  .field-grid,
  .material-grid,
  .structure-grid,
  .challenge-stats,
  .leaderboard-row,
  .trial-row,
  .moment-feed,
  .post-grid,
  .post-data,
  .sim-metrics {
    grid-template-columns: 1fr;
  }

  .material-core-panel .material-grid {
    max-height: none;
  }
}

@media (max-width: 600px) {
  .bar-chart {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .timeline-item,
  .comment-form,
  .moment-comment-form {
    grid-template-columns: 1fr;
  }
}

.physics-os {
  --physics-bg: #020617;
  --physics-panel: rgba(15, 23, 42, 0.72);
  --physics-panel-strong: rgba(8, 18, 32, 0.88);
  --physics-cyan: #22d3ee;
  --physics-green: #34d399;
  --physics-amber: #fbbf24;
  --physics-red: #fb7185;
  --physics-text: #e5f4ff;
  --physics-muted: #94a3b8;
  --physics-border: rgba(34, 211, 238, 0.18);
  position: relative;
  overflow: hidden;
  color: var(--physics-text);
  background:
    radial-gradient(circle at top left, rgba(34, 211, 238, 0.16), transparent 32%),
    radial-gradient(circle at bottom right, rgba(52, 211, 153, 0.12), transparent 34%),
    linear-gradient(135deg, #020617 0%, #020b10 45%, #061316 100%);
  isolation: isolate;
}

.physics-os::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(rgba(34, 211, 238, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 88%);
}

.physics-os::after {
  content: "";
  position: absolute;
  inset: -20% -10% auto;
  z-index: -1;
  height: 460px;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 20%, rgba(34, 211, 238, 0.18), transparent 24%),
    radial-gradient(circle at 76% 8%, rgba(52, 211, 153, 0.16), transparent 28%);
  filter: blur(42px);
  opacity: 0.74;
}

.physics-os .lab-card {
  background: var(--physics-panel);
  border: 1px solid var(--physics-border);
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(229, 244, 255, 0.08);
  backdrop-filter: blur(18px);
}

.physics-os .eyebrow {
  color: var(--physics-green);
}

.physics-os h2,
.physics-os h3,
.physics-os h4 {
  color: var(--physics-text);
}

.physics-os p,
.physics-os small,
.physics-os em {
  color: var(--physics-muted);
}

.physics-hero {
  display: grid;
  grid-template-columns: minmax(430px, 0.95fr) minmax(430px, 1fr);
  gap: clamp(22px, 4vw, 52px);
  align-items: center;
  min-height: min(720px, calc(100vh - 42px));
  padding: clamp(28px, 5vw, 64px);
}

.physics-hero-copy {
  display: grid;
  gap: 22px;
}

.physics-hero-copy h2 {
  max-width: 820px;
  font-size: clamp(52px, 5.2vw, 86px);
  line-height: 0.94;
  letter-spacing: 0;
  word-break: normal;
  overflow-wrap: normal;
  text-wrap: balance;
}

.physics-subtitle {
  max-width: 760px;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.45;
}

.physics-tags,
.flow-legend,
.physics-action-row,
.panel-heading-row,
.metric-card-top,
.trial-card-head,
.trial-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.physics-tags span,
.flow-legend span,
.simulation-status {
  padding: 9px 11px;
  color: rgba(229, 244, 255, 0.88);
  background: rgba(34, 211, 238, 0.07);
  border: 1px solid rgba(34, 211, 238, 0.16);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.physics-action-row {
  margin-top: 4px;
}

.physics-os .button.primary {
  color: #021015;
  background: linear-gradient(135deg, var(--physics-cyan), var(--physics-green));
  border-color: transparent;
  box-shadow: 0 18px 48px rgba(34, 211, 238, 0.2);
}

.physics-os .button.secondary {
  color: var(--physics-text);
  background: rgba(15, 23, 42, 0.68);
  border-color: rgba(34, 211, 238, 0.22);
}

.filter-preview-shell {
  position: relative;
  min-width: 0;
  padding: 16px;
  background: rgba(2, 6, 23, 0.52);
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: 24px;
  box-shadow: inset 0 0 80px rgba(34, 211, 238, 0.08);
}

.filter-preview-shell canvas,
.live-twin-panel canvas {
  display: block;
  width: 100%;
  border: 1px solid rgba(34, 211, 238, 0.18);
  border-radius: 18px;
  background: #020617;
}

.preview-hud {
  position: absolute;
  right: 32px;
  bottom: 30px;
  left: 32px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  pointer-events: none;
}

.preview-hud span {
  padding: 9px 10px;
  color: rgba(229, 244, 255, 0.9);
  background: rgba(2, 6, 23, 0.56);
  border: 1px solid rgba(34, 211, 238, 0.16);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.physics-main-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(420px, 1.36fr) minmax(270px, 0.78fr);
  gap: 18px;
  margin-top: 18px;
  align-items: start;
}

.experiment-console,
.live-twin-panel,
.metrics-panel,
.graph-analysis-panel,
.trial-notebook-panel,
.interpretation-panel,
.compare-trials-panel {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.panel-heading-row {
  justify-content: space-between;
}

.panel-heading-row p {
  max-width: 620px;
}

.instrument-slider,
.instrument-select {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: rgba(2, 6, 23, 0.34);
  border: 1px solid rgba(34, 211, 238, 0.14);
  border-radius: 16px;
}

.instrument-slider span,
.instrument-select span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--physics-text);
  font-weight: 900;
}

.instrument-slider em,
.instrument-select em {
  color: var(--physics-cyan);
  font-family: "JetBrains Mono", "SF Mono", monospace;
  font-style: normal;
}

.instrument-slider input {
  width: 100%;
  accent-color: var(--physics-cyan);
}

.instrument-select select {
  width: 100%;
  color: var(--physics-text);
  background: rgba(15, 23, 42, 0.84);
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: 12px;
}

.instrument-slider small {
  line-height: 1.4;
}

.live-twin-panel {
  position: relative;
  overflow: hidden;
}

.live-twin-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.06), transparent);
  transform: translateX(-100%);
  animation: physicsPanelScan 7s ease-in-out infinite;
}

.live-twin-panel canvas {
  min-height: clamp(360px, 42vw, 640px);
  aspect-ratio: 1120 / 640;
  box-shadow: inset 0 0 80px rgba(34, 211, 238, 0.08);
}

.flow-legend {
  justify-content: flex-start;
}

.flow-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  border-radius: 999px;
}

.legend-orange {
  background: var(--physics-red);
}

.legend-green {
  background: var(--physics-green);
}

.legend-cyan {
  background: var(--physics-cyan);
}

.legend-amber {
  background: var(--physics-amber);
}

.metrics-dashboard {
  display: grid;
  gap: 12px;
}

.metric-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 16px;
  background: rgba(2, 6, 23, 0.4);
  border: 1px solid rgba(34, 211, 238, 0.15);
  border-radius: 18px;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.metric-card:hover,
.chart-card:hover,
.trial-card:hover {
  transform: translateY(-2px);
  border-color: rgba(34, 211, 238, 0.34);
  box-shadow: 0 18px 40px rgba(34, 211, 238, 0.08);
}

.metric-card-top {
  justify-content: space-between;
}

.metric-card-top span {
  color: var(--physics-text);
  font-size: 13px;
  font-weight: 900;
}

.metric-card-top em {
  color: var(--physics-green);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.metric-value {
  color: var(--physics-text);
  font-family: "JetBrains Mono", "SF Mono", monospace;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.metric-card small {
  font-weight: 900;
}

.metric-card p {
  font-size: 13px;
  line-height: 1.4;
}

.sparkline {
  width: 100%;
  height: 42px;
  opacity: 0.95;
}

.graph-analysis-panel,
.compare-trials-panel {
  margin-top: 18px;
}

.scientific-chart-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.chart-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 16px;
  background: rgba(2, 6, 23, 0.34);
  border: 1px solid rgba(34, 211, 238, 0.14);
  border-radius: 18px;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.chart-card h4 {
  font-size: 16px;
}

.chart-card svg {
  width: 100%;
  height: auto;
}

.chart-grid-line {
  stroke: rgba(148, 163, 184, 0.16);
  stroke-width: 1;
}

.chart-label {
  fill: rgba(229, 244, 255, 0.66);
  font-size: 11px;
  font-weight: 800;
}

.physics-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
  gap: 18px;
  margin-top: 18px;
  align-items: start;
}

.trial-notebook,
.interpretation-grid {
  display: grid;
  gap: 12px;
}

.trial-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  background: rgba(2, 6, 23, 0.36);
  border: 1px solid rgba(34, 211, 238, 0.14);
  border-radius: 18px;
  animation: physicsCardIn 320ms ease both;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.trial-card.best-trial {
  border-color: rgba(52, 211, 153, 0.48);
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.12), 0 18px 46px rgba(52, 211, 153, 0.08);
}

.trial-card-head {
  justify-content: space-between;
}

.trial-card-head label {
  color: var(--physics-text);
  font-weight: 900;
}

.trial-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.trial-summary-grid span {
  padding: 10px;
  color: var(--physics-muted);
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(34, 211, 238, 0.1);
  border-radius: 12px;
  font-size: 12px;
}

.trial-summary-grid b {
  display: block;
  color: var(--physics-text);
  margin-top: 4px;
}

.trial-actions {
  justify-content: space-between;
}

.trial-actions strong {
  color: var(--physics-green);
}

.trial-actions button {
  color: var(--physics-text);
  background: rgba(251, 113, 133, 0.08);
  border: 1px solid rgba(251, 113, 133, 0.24);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
  cursor: pointer;
}

.interpretation-grid article {
  padding: 16px;
  background: rgba(2, 6, 23, 0.34);
  border: 1px solid rgba(34, 211, 238, 0.14);
  border-radius: 18px;
}

.interpretation-grid span {
  display: block;
  margin-bottom: 8px;
  color: var(--physics-green);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.compare-table-wrap {
  overflow: auto;
  border: 1px solid rgba(34, 211, 238, 0.14);
  border-radius: 18px;
}

.compare-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
}

.compare-table th,
.compare-table td {
  padding: 13px 14px;
  color: var(--physics-text);
  border-bottom: 1px solid rgba(34, 211, 238, 0.1);
  text-align: left;
}

.compare-table th {
  color: var(--physics-cyan);
  background: rgba(2, 6, 23, 0.42);
  font-size: 12px;
}

.compare-table tr.best-compare-row td {
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.13), rgba(52, 211, 153, 0.1));
}

.best-balance-card {
  margin-top: 14px;
  padding: 18px;
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(52, 211, 153, 0.22);
  border-radius: 18px;
}

.physics-os .empty-state {
  color: var(--physics-muted);
  background: rgba(2, 6, 23, 0.34);
  border: 1px dashed rgba(34, 211, 238, 0.24);
  border-radius: 18px;
  padding: 18px;
}

@keyframes physicsPanelScan {
  0%, 38% { transform: translateX(-100%); opacity: 0; }
  52% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

@keyframes physicsCardIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1280px) {
  .physics-main-layout,
  .scientific-chart-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .live-twin-panel {
    grid-column: 1 / -1;
    order: -1;
  }
}

@media (max-width: 900px) {
  .physics-hero,
  .physics-main-layout,
  .physics-bottom-grid,
  .scientific-chart-grid,
  .preview-hud,
  .trial-summary-grid {
    grid-template-columns: 1fr;
  }

  .physics-hero {
    min-height: auto;
  }
}

@media (max-width: 560px) {
  .physics-hero,
  .experiment-console,
  .live-twin-panel,
  .metrics-panel,
  .graph-analysis-panel,
  .trial-notebook-panel,
  .interpretation-panel,
  .compare-trials-panel {
    padding: 16px;
    border-radius: 18px;
  }

  .physics-hero-copy h2 {
    font-size: clamp(42px, 17vw, 66px);
  }

  .physics-action-row .button,
  .panel-heading-row .button {
    width: 100%;
  }
}

/* Unified research OS polish: restrained, admissions-facing, and consistent across tools. */
.site-header {
  background:
    radial-gradient(circle at 16% 4%, rgba(34, 211, 238, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(244, 252, 251, 0.96), rgba(231, 246, 245, 0.92));
  border-right-color: rgba(34, 211, 238, 0.18);
}

.brand-mark {
  border-radius: 10px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.72), transparent 30%),
    linear-gradient(145deg, #35c8b1, #0b1718 78%);
  box-shadow: 0 0 28px rgba(34, 211, 238, 0.18), 0 10px 24px rgba(11, 23, 24, 0.12);
}

.nav a {
  min-height: 46px;
  border-radius: 10px;
}

.nav a:hover,
.nav a.active-link {
  color: #0d8f83;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(238, 252, 250, 0.74));
  border-color: rgba(34, 211, 238, 0.24);
  box-shadow: 0 14px 34px rgba(22, 143, 130, 0.1);
}

.evolution-lab-section {
  background:
    radial-gradient(circle at top left, rgba(34, 211, 238, 0.15), transparent 32%),
    radial-gradient(circle at bottom right, rgba(52, 211, 153, 0.1), transparent 34%),
    linear-gradient(135deg, #020617 0%, #020b10 46%, #061316 100%);
}

.evolution-lab-section::before {
  background:
    linear-gradient(rgba(34, 211, 238, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.035) 1px, transparent 1px);
  background-size: 46px 46px;
  animation: none;
}

.evolution-lab-section::after {
  background:
    linear-gradient(180deg, rgba(229, 244, 255, 0.045), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.2));
}

.evolution-heading {
  max-width: 1180px;
}

.evolution-heading h2 {
  max-width: 1120px;
  font-size: clamp(34px, 3.9vw, 58px);
  line-height: 1.04;
  text-wrap: balance;
}

.evolution-lab-section .section-inner {
  padding-top: clamp(44px, 5vw, 78px);
}

.evolution-intel-grid {
  margin-top: 28px;
}

.evolution-lab-shell {
  margin-top: 28px;
}

.evolution-intel-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1180px;
}

.evolution-lab-section .future-panel,
.lab-console,
.ai-generator-card,
.aux-lab-panel,
.evolution-lab-section .ai-panel {
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(34, 211, 238, 0.18);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(229, 244, 255, 0.08);
}

.evolution-lab-section .future-panel {
  min-height: 126px;
}

.evolution-lab-shell {
  grid-template-columns: minmax(290px, 0.68fr) minmax(520px, 1.2fr) minmax(300px, 0.72fr);
  gap: 18px;
}

.lab-console {
  padding: 20px;
}

.material-core-panel .material-grid {
  max-height: 470px;
}

.evolution-lab-section .material-card {
  grid-template-columns: 40px minmax(0, 1fr);
  background: rgba(2, 6, 23, 0.32);
  border-color: rgba(34, 211, 238, 0.13);
  border-radius: 14px;
}

.evolution-lab-section .material-card.selected {
  border-color: rgba(52, 211, 153, 0.5);
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.12), 0 16px 38px rgba(52, 211, 153, 0.08);
}

.material-structure-preview {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.dna-mini {
  display: none;
}

.grams-field {
  margin-top: 8px;
}

.ai-generator-card {
  background: rgba(2, 6, 23, 0.34);
}

.reactor-panel {
  min-width: 0;
}

.reactor-topbar {
  grid-template-columns: minmax(0, 1fr);
}

.reactor-topbar .game-controls {
  gap: 8px;
}

.evolution-lab-section .game-stage,
.evolution-lab-section #simCanvas {
  min-height: clamp(360px, 34vw, 540px);
}

.evolution-lab-section .game-stage {
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(3, 10, 18, 0.94), rgba(6, 22, 27, 0.84)),
    rgba(2, 6, 23, 0.56);
}

.evolution-lab-section .game-start-card {
  width: min(86%, 520px);
  border-radius: 18px;
  background: rgba(8, 18, 32, 0.76);
}

.structure-console {
  padding-top: 4px;
}

.evolution-lab-section .structure-button {
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.32);
}

.evolution-lab-section .structure-button.active {
  color: #021015;
  background: linear-gradient(135deg, #22d3ee, #34d399);
}

.evolution-lab-section .button.secondary:disabled,
.physics-os .button.secondary:disabled {
  color: rgba(229, 244, 255, 0.52);
  border-color: rgba(34, 211, 238, 0.14);
  background: rgba(15, 23, 42, 0.36);
}

.compact-controls {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.evolution-lab-section .range-field,
.instrument-slider {
  background: rgba(2, 6, 23, 0.34);
  border: 1px solid rgba(34, 211, 238, 0.13);
  border-radius: 14px;
  padding: 12px;
}

.evolution-lab-section .range-field span,
.range-field span {
  color: #22d3ee;
}

.ai-intelligence-panel {
  grid-column: auto;
  grid-template-columns: 1fr;
}

.ai-intelligence-panel .console-heading,
.ai-intelligence-panel .scientist-panel,
.ai-intelligence-panel .trial-panel,
.ai-intelligence-panel > .game-controls {
  grid-column: auto;
}

.evolution-lab-section .sim-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.evolution-lab-section .sim-metrics .metric {
  padding: 14px;
  background: rgba(2, 6, 23, 0.36);
  border-radius: 14px;
}

.evolution-lab-section .sim-metrics .metric strong {
  color: #e5f4ff;
  font-family: "JetBrains Mono", "SF Mono", monospace;
  letter-spacing: -0.04em;
}

.aux-lab-panel,
.evolution-lab-section .ai-panel {
  padding: 16px;
  background: rgba(2, 6, 23, 0.34);
}

.model-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.model-summary span,
.evolution-row,
.cic-loop span,
.scientist-grid span,
.evolution-lab-section .trial-row {
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.64);
  border-color: rgba(34, 211, 238, 0.12);
}

.cic-loop span::before {
  background: linear-gradient(135deg, #22d3ee, #34d399);
}

.rare-discovery {
  border-radius: 18px;
}

.physics-os .lab-card,
.physics-os .metric-card,
.physics-os .chart-card,
.physics-os .trial-card,
.physics-os .interpretation-grid article {
  border-radius: 18px;
}

.physics-hero {
  min-height: min(620px, calc(100vh - 42px));
}

.physics-hero-copy h2 {
  font-size: clamp(46px, 4.8vw, 78px);
}

.physics-main-layout {
  grid-template-columns: minmax(280px, 0.7fr) minmax(460px, 1.2fr) minmax(280px, 0.72fr);
}

@media (max-width: 1280px) {
  .evolution-lab-shell,
  .physics-main-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reactor-panel,
  .live-twin-panel {
    grid-column: 1 / -1;
    order: -1;
  }

  .ai-intelligence-panel {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .evolution-intel-grid,
  .evolution-lab-shell,
  .ai-intelligence-panel,
  .compact-controls,
  .physics-main-layout {
    grid-template-columns: 1fr;
  }
}

/* ACM-Lab premium home redesign */
:root {
  --bg-main: #050b14;
  --bg-secondary: #07111f;
  --card-bg: rgba(255, 255, 255, 0.06);
  --card-border: rgba(120, 220, 255, 0.22);
  --accent-cyan: #5cc8ff;
  --accent-green: #7cffb2;
  --text-main: #f4f8fb;
  --text-muted: #9baec2;
}

.home-lab-hero {
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
  min-height: 100vh;
  padding: clamp(64px, 8vw, 112px) clamp(20px, 6vw, 86px);
  background:
    radial-gradient(circle at 75% 26%, rgba(92, 200, 255, 0.18), transparent 32%),
    radial-gradient(circle at 24% 72%, rgba(124, 255, 178, 0.12), transparent 34%),
    linear-gradient(rgba(92, 200, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 200, 255, 0.03) 1px, transparent 1px),
    linear-gradient(135deg, #050b14 0%, #06101d 46%, #071923 100%);
  background-size: auto, auto, 48px 48px, 48px 48px, auto;
  color: var(--text-main);
}

.home-lab-hero::before {
  background:
    linear-gradient(110deg, transparent 0 28%, rgba(92, 200, 255, 0.12) 44%, transparent 62%),
    radial-gradient(ellipse at 78% 18%, rgba(124, 255, 178, 0.1), transparent 40%);
  background-size: 180% 180%, auto;
  animation: labGridDrift 18s ease-in-out infinite alternate;
}

.home-lab-hero::after {
  background:
    linear-gradient(180deg, rgba(244, 248, 251, 0.055), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.28)),
    repeating-linear-gradient(0deg, transparent 0 13px, rgba(92, 200, 255, 0.03) 13px 14px);
}

.home-lab-hero .hero-copy {
  max-width: 760px;
}

.home-lab-hero .eyebrow,
.home-lab-section .eyebrow,
.home-cta-panel .eyebrow {
  color: var(--accent-green);
}

.home-lab-hero .os-logo {
  padding: 0;
}

.home-lab-hero .os-logo::before {
  inset: 10% -5% 0 -4%;
  border-color: rgba(92, 200, 255, 0.14);
  background: linear-gradient(120deg, rgba(92, 200, 255, 0.1), rgba(124, 255, 178, 0.055), transparent);
}

.home-lab-hero h1 {
  font-size: clamp(64px, 10vw, 134px);
  line-height: 0.92;
  letter-spacing: 0;
}

.home-lab-hero .brand-position {
  margin: 18px 0 18px;
  color: rgba(244, 248, 251, 0.84);
  font-size: clamp(18px, 2.1vw, 28px);
  font-weight: 800;
}

.home-lab-hero .hero-subtitle {
  max-width: 720px;
  margin: 0 0 10px;
  color: #f8fbff;
  font-size: clamp(28px, 4vw, 54px);
  font-weight: 900;
  line-height: 1.04;
}

.hero-subtitle-cn {
  margin: 0 0 22px;
  color: rgba(124, 255, 178, 0.82);
  font-size: clamp(17px, 1.7vw, 23px);
  font-weight: 800;
}

.hero-description {
  max-width: 720px;
  margin: 0 0 12px;
  color: rgba(215, 229, 241, 0.82);
  font-size: clamp(16px, 1.35vw, 19px);
}

.hero-description-cn {
  color: rgba(155, 174, 194, 0.94);
}

.home-lab-hero .hero-actions,
.home-cta-panel .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.home-lab-hero .button,
.home-cta-panel .button {
  border-radius: 14px;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.home-lab-hero .button:hover,
.home-cta-panel .button:hover {
  transform: translateY(-2px);
}

.home-lab-hero .button.primary,
.home-cta-panel .button.primary {
  color: #04111a;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-green));
  border-color: rgba(150, 235, 255, 0.58);
  box-shadow: 0 0 26px rgba(92, 200, 255, 0.26), 0 18px 42px rgba(0, 0, 0, 0.28);
}

.home-lab-hero .button.secondary,
.home-cta-panel .button.secondary {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(120, 220, 255, 0.26);
  box-shadow: inset 0 1px 0 rgba(244, 248, 251, 0.08);
  backdrop-filter: blur(16px);
}

.home-lab-hero .button.secondary:hover,
.home-cta-panel .button.secondary:hover {
  border-color: rgba(92, 200, 255, 0.58);
  box-shadow: 0 0 24px rgba(92, 200, 255, 0.18), inset 0 1px 0 rgba(244, 248, 251, 0.1);
}

.material-system-visual {
  --mx: 0px;
  --my: 0px;
  position: relative;
  min-height: min(680px, 72vh);
  margin: 0;
  overflow: hidden;
  padding: 26px;
  border: 1px solid rgba(120, 220, 255, 0.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 42%, rgba(92, 200, 255, 0.16), transparent 36%),
    radial-gradient(circle at 76% 54%, rgba(124, 255, 178, 0.11), transparent 38%),
    rgba(255, 255, 255, 0.055);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.36), inset 0 0 60px rgba(92, 200, 255, 0.06);
  backdrop-filter: blur(22px);
  transform: translate3d(var(--mx), var(--my), 0);
  transition: transform 260ms ease;
}

.material-system-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 0 34%, rgba(92, 200, 255, 0.12) 48%, transparent 62%),
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.08), transparent 18%);
  animation: labSweep 9s linear infinite;
}

.visual-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(92, 200, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 200, 255, 0.055) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.6;
  animation: visualGridMove 24s linear infinite;
}

.visual-title {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 2px;
}

.visual-title .eyebrow {
  margin-bottom: 2px;
}

.visual-title strong {
  color: rgba(244, 248, 251, 0.82);
  font-size: 15px;
}

.system-stage {
  position: absolute;
  inset: 88px 38px 82px;
  z-index: 1;
  animation: stageFloat 7.5s ease-in-out infinite;
}

.lattice-structure {
  position: absolute;
  left: 3%;
  top: 28%;
  width: 58%;
  height: 42%;
  transform: perspective(760px) rotateX(58deg) rotateZ(-12deg);
  transform-style: preserve-3d;
}

.member,
.node {
  position: absolute;
  display: block;
}

.member {
  height: 3px;
  transform-origin: left center;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(92, 200, 255, 0.16), rgba(92, 200, 255, 0.82), rgba(124, 255, 178, 0.24));
  box-shadow: 0 0 16px rgba(92, 200, 255, 0.36);
  overflow: hidden;
}

.member::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(244, 248, 251, 0.9), transparent);
  transform: translateX(-110%);
  animation: memberScan 4.6s ease-in-out infinite;
}

.m1 { left: 6%; top: 22%; width: 34%; transform: rotate(0deg); }
.m2 { left: 39%; top: 22%; width: 34%; transform: rotate(0deg); }
.m3 { left: 6%; top: 68%; width: 34%; transform: rotate(0deg); }
.m4 { left: 39%; top: 68%; width: 34%; transform: rotate(0deg); }
.m5 { left: 9%; top: 24%; width: 39%; transform: rotate(39deg); }
.m6 { left: 38%; top: 66%; width: 42%; transform: rotate(-39deg); }
.m7 { left: 40%; top: 24%; width: 38%; transform: rotate(39deg); }
.m8 { left: 9%; top: 66%; width: 42%; transform: rotate(-39deg); }

.node {
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 14px rgba(92, 200, 255, 0.9), 0 0 30px rgba(92, 200, 255, 0.38);
  animation: nodePulse 3.5s ease-in-out infinite;
}

.n1 { left: 6%; top: 22%; }
.n2 { left: 39%; top: 22%; animation-delay: 0.25s; }
.n3 { left: 72%; top: 22%; animation-delay: 0.5s; }
.n4 { left: 6%; top: 68%; animation-delay: 0.75s; }
.n5 { left: 39%; top: 68%; animation-delay: 1s; }
.n6 { left: 72%; top: 68%; animation-delay: 1.25s; }
.n7 { left: 22%; top: 45%; animation-delay: 1.5s; }
.n8 { left: 55%; top: 45%; animation-delay: 1.75s; }
.n9 { left: 16%; top: 8%; animation-delay: 2s; }
.n10 { left: 50%; top: 8%; animation-delay: 2.25s; }
.n11 { left: 16%; top: 84%; animation-delay: 2.5s; }
.n12 { left: 50%; top: 84%; animation-delay: 2.75s; }

.bio-coating {
  position: absolute;
  left: 1%;
  top: 32%;
  width: 58%;
  height: 31%;
  border: 1px solid rgba(124, 255, 178, 0.24);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(124, 255, 178, 0.12), rgba(124, 255, 178, 0.26), rgba(124, 255, 178, 0.08));
  box-shadow: 0 0 36px rgba(124, 255, 178, 0.18);
  filter: blur(0.2px);
  transform: perspective(760px) rotateX(58deg) rotateZ(-12deg);
  clip-path: inset(0 100% 0 0);
  animation: coatingSweep 9s ease-in-out infinite;
}

.stress-lines {
  position: absolute;
  inset: 0;
}

.stress-lines span {
  position: absolute;
  left: 12%;
  width: 46%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(92, 200, 255, 0.85), transparent);
  box-shadow: 0 0 18px rgba(92, 200, 255, 0.42);
  transform: rotate(15deg);
  animation: stressFlow 3.8s linear infinite;
}

.stress-lines span:nth-child(1) { top: 38%; }
.stress-lines span:nth-child(2) { top: 48%; animation-delay: 0.6s; }
.stress-lines span:nth-child(3) { top: 58%; animation-delay: 1.2s; }

.load-arrows span {
  position: absolute;
  top: 8%;
  width: 2px;
  height: 68px;
  background: linear-gradient(180deg, rgba(92, 200, 255, 0), rgba(92, 200, 255, 0.88));
  box-shadow: 0 0 18px rgba(92, 200, 255, 0.34);
  animation: loadPulse 3.2s ease-in-out infinite;
}

.load-arrows span::after {
  content: "";
  position: absolute;
  left: -5px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  border-right: 2px solid rgba(92, 200, 255, 0.88);
  border-bottom: 2px solid rgba(92, 200, 255, 0.88);
  transform: rotate(45deg);
}

.load-arrows span:nth-child(1) { left: 18%; }
.load-arrows span:nth-child(2) { left: 34%; animation-delay: 0.4s; }
.load-arrows span:nth-child(3) { left: 49%; animation-delay: 0.8s; }

.support-points span {
  position: absolute;
  bottom: 19%;
  width: 52px;
  height: 8px;
  border-radius: 999px;
  background: rgba(92, 200, 255, 0.32);
  box-shadow: 0 0 20px rgba(92, 200, 255, 0.22);
}

.support-points span:first-child { left: 8%; }
.support-points span:last-child { left: 45%; }

.filter-core {
  position: absolute;
  right: 9%;
  top: 31%;
  width: 23%;
  height: 42%;
  border: 1px solid rgba(120, 220, 255, 0.28);
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(92, 200, 255, 0.16) 0 4px, transparent 4px 12px),
    linear-gradient(90deg, rgba(124, 255, 178, 0.1), rgba(92, 200, 255, 0.08));
  box-shadow: inset 0 0 28px rgba(92, 200, 255, 0.12), 0 0 34px rgba(124, 255, 178, 0.1);
}

.filter-core span {
  position: absolute;
  left: 12%;
  right: 12%;
  height: 1px;
  background: rgba(124, 255, 178, 0.4);
}

.filter-core span:nth-child(1) { top: 28%; }
.filter-core span:nth-child(2) { top: 50%; }
.filter-core span:nth-child(3) { top: 72%; }

.adsorption-flow i {
  position: absolute;
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.pollutant {
  left: 62%;
  background: var(--accent-green);
  box-shadow: 0 0 16px rgba(124, 255, 178, 0.62);
  animation: pollutantMove 5.8s linear infinite;
}

.p1 { top: 38%; animation-delay: 0s; }
.p2 { top: 48%; animation-delay: 0.9s; }
.p3 { top: 58%; animation-delay: 1.8s; }
.p4 { top: 68%; animation-delay: 2.7s; }

.clean {
  right: 2%;
  background: var(--accent-cyan);
  box-shadow: 0 0 16px rgba(92, 200, 255, 0.62);
  animation: cleanMove 4.8s linear infinite;
}

.c1 { top: 41%; animation-delay: 1s; }
.c2 { top: 50%; animation-delay: 1.9s; }
.c3 { top: 59%; animation-delay: 2.8s; }
.c4 { top: 68%; animation-delay: 3.7s; }

.captured {
  background: rgba(124, 255, 178, 0.9);
  box-shadow: 0 0 14px rgba(124, 255, 178, 0.55);
  animation: capturedPulse 2.8s ease-in-out infinite;
}

.a1 { right: 24%; top: 43%; }
.a2 { right: 18%; top: 53%; animation-delay: 0.5s; }
.a3 { right: 26%; top: 65%; animation-delay: 1s; }

.visual-labels {
  position: absolute;
  inset: auto 24px 24px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.visual-labels span {
  padding: 8px 10px;
  color: rgba(244, 248, 251, 0.88);
  background: rgba(5, 11, 20, 0.54);
  border: 1px solid rgba(120, 220, 255, 0.25);
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(92, 200, 255, 0.08);
  backdrop-filter: blur(14px);
  font-size: 12px;
  font-weight: 800;
  animation: labelFloat 6s ease-in-out infinite;
}

.visual-labels span:nth-child(2) { animation-delay: 0.4s; }
.visual-labels span:nth-child(3) { animation-delay: 0.8s; }
.visual-labels span:nth-child(4) { animation-delay: 1.2s; }
.visual-labels span:nth-child(5) { animation-delay: 1.6s; }

.home-lab-section {
  display: none;
  position: relative;
  overflow: hidden;
  color: var(--text-main);
  background:
    radial-gradient(circle at 14% 8%, rgba(92, 200, 255, 0.12), transparent 28%),
    radial-gradient(circle at 84% 60%, rgba(124, 255, 178, 0.08), transparent 30%),
    linear-gradient(rgba(92, 200, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 200, 255, 0.025) 1px, transparent 1px),
    linear-gradient(180deg, #050b14, #07111f);
  background-size: auto, auto, 52px 52px, 52px 52px, auto;
  border-bottom: 1px solid rgba(120, 220, 255, 0.16);
}

.home-lab-section.home-visible {
  display: block;
}

.home-lab-section .section-heading {
  max-width: 1040px;
  margin: 0 auto 34px;
  text-align: center;
}

.home-lab-section .section-heading h2 {
  margin: 0 auto 12px;
  max-width: 980px;
  color: var(--text-main);
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.08;
}

.home-lab-section .section-heading p:not(.eyebrow) {
  max-width: 860px;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: clamp(16px, 1.4vw, 19px);
}

.mission-card-grid,
.core-module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
}

.core-module-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lab-glass-card {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  padding: 24px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(244, 248, 251, 0.07);
  backdrop-filter: blur(18px);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.lab-glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0 34%, rgba(92, 200, 255, 0.1) 48%, transparent 62%),
    repeating-linear-gradient(0deg, transparent 0 13px, rgba(92, 200, 255, 0.025) 13px 14px);
  opacity: 0.76;
}

.lab-glass-card > * {
  position: relative;
  z-index: 1;
}

.lab-glass-card:hover {
  transform: translateY(-4px);
  border-color: rgba(92, 200, 255, 0.44);
  box-shadow: 0 28px 88px rgba(0, 0, 0, 0.28), 0 0 30px rgba(92, 200, 255, 0.12);
}

.mission-material-card:hover {
  border-color: rgba(124, 255, 178, 0.42);
  box-shadow: 0 28px 88px rgba(0, 0, 0, 0.28), 0 0 30px rgba(124, 255, 178, 0.12);
}

.lab-glass-card h3 {
  margin: 16px 0 4px;
  color: var(--text-main);
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.12;
}

.lab-glass-card strong {
  display: block;
  margin-bottom: 14px;
  color: rgba(124, 255, 178, 0.86);
  font-size: 15px;
}

.lab-glass-card p {
  margin: 0 0 10px;
  color: rgba(215, 229, 241, 0.82);
  font-size: 15px;
}

.lab-glass-card .cn-copy {
  color: var(--text-muted);
}

.mission-visual {
  position: relative;
  width: 100%;
  height: 112px;
  overflow: hidden;
  border: 1px solid rgba(120, 220, 255, 0.14);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 50%, rgba(92, 200, 255, 0.12), transparent 52%),
    rgba(5, 11, 20, 0.48);
}

.molecular-visual span,
.molecular-visual i {
  position: absolute;
  display: block;
}

.molecular-visual span {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 18px rgba(124, 255, 178, 0.55);
  animation: nodePulse 3.4s ease-in-out infinite;
}

.molecular-visual span:nth-child(1) { left: 18%; top: 48%; }
.molecular-visual span:nth-child(2) { left: 48%; top: 28%; animation-delay: 0.5s; }
.molecular-visual span:nth-child(3) { left: 72%; top: 60%; animation-delay: 1s; }

.molecular-visual i {
  left: 22%;
  top: 52%;
  width: 58%;
  height: 2px;
  background: linear-gradient(90deg, rgba(124, 255, 178, 0.68), rgba(92, 200, 255, 0.48));
  transform-origin: left center;
}

.molecular-visual i:nth-of-type(1) { transform: rotate(-20deg); }
.molecular-visual i:nth-of-type(2) { transform: rotate(14deg); }

.truss-visual span,
.truss-visual i {
  position: absolute;
  display: block;
  background: rgba(92, 200, 255, 0.72);
  box-shadow: 0 0 16px rgba(92, 200, 255, 0.32);
}

.truss-visual span {
  left: 14%;
  width: 72%;
  height: 3px;
  border-radius: 999px;
}

.truss-visual span:nth-child(1) { top: 36%; }
.truss-visual span:nth-child(2) { top: 66%; }

.truss-visual i {
  top: 36%;
  width: 3px;
  height: 48px;
  transform: rotate(32deg);
  transform-origin: top;
  animation: stressFlow 3.6s linear infinite;
}

.truss-visual i:nth-of-type(1) { left: 32%; }
.truss-visual i:nth-of-type(2) { left: 62%; transform: rotate(-32deg); animation-delay: 0.8s; }

.filter-visual span,
.filter-visual i {
  position: absolute;
  display: block;
}

.filter-visual span {
  top: 22%;
  bottom: 22%;
  width: 12px;
  border-radius: 999px;
  background: rgba(92, 200, 255, 0.24);
  border: 1px solid rgba(120, 220, 255, 0.22);
}

.filter-visual span:nth-child(1) { left: 40%; }
.filter-visual span:nth-child(2) { left: 50%; background: rgba(124, 255, 178, 0.2); }
.filter-visual span:nth-child(3) { left: 60%; }

.filter-visual i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: pollutantMove 4.8s linear infinite;
}

.filter-visual i:nth-of-type(1) {
  left: 14%;
  top: 42%;
  background: var(--accent-green);
  box-shadow: 0 0 14px rgba(124, 255, 178, 0.5);
}

.filter-visual i:nth-of-type(2) {
  left: 72%;
  top: 58%;
  background: var(--accent-cyan);
  box-shadow: 0 0 14px rgba(92, 200, 255, 0.5);
  animation-name: cleanMove;
}

.research-system-section {
  background:
    radial-gradient(circle at 50% 16%, rgba(92, 200, 255, 0.12), transparent 30%),
    linear-gradient(rgba(92, 200, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 200, 255, 0.025) 1px, transparent 1px),
    linear-gradient(180deg, #07111f, #050b14);
  background-size: auto, 54px 54px, 54px 54px, auto;
}

.research-framework {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(190px, 1fr));
  gap: 18px;
  max-width: 1440px;
  margin: 0 auto;
}

.research-framework::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, rgba(92, 200, 255, 0), rgba(92, 200, 255, 0.7), rgba(124, 255, 178, 0.56), rgba(92, 200, 255, 0));
  box-shadow: 0 0 18px rgba(92, 200, 255, 0.32);
}

.research-framework::after {
  content: "";
  position: absolute;
  left: 6%;
  top: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 18px rgba(124, 255, 178, 0.8);
  animation: frameworkParticle 9s linear infinite;
}

.framework-card {
  min-height: 330px;
}

.framework-card::after {
  content: "";
  position: absolute;
  right: -15px;
  top: calc(50% - 8px);
  z-index: 2;
  width: 16px;
  height: 16px;
  border-top: 2px solid rgba(92, 200, 255, 0.7);
  border-right: 2px solid rgba(92, 200, 255, 0.7);
  transform: rotate(45deg);
}

.framework-card:last-child::after {
  display: none;
}

.framework-index {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #04111a;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-green));
  border-radius: 50%;
  font-weight: 900;
  box-shadow: 0 0 20px rgba(92, 200, 255, 0.22);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}

.tag-row span {
  padding: 6px 8px;
  color: rgba(244, 248, 251, 0.84);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(120, 220, 255, 0.16);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.core-module-card {
  min-height: 316px;
}

.module-icon {
  position: relative;
  display: block;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(120, 220, 255, 0.2);
  border-radius: 8px;
  background: rgba(5, 11, 20, 0.46);
  box-shadow: inset 0 0 22px rgba(92, 200, 255, 0.08);
}

.module-icon::before,
.module-icon::after {
  content: "";
  position: absolute;
  display: block;
}

.material-icon::before {
  inset: 16px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: -16px 10px 0 rgba(92, 200, 255, 0.7), 16px 8px 0 rgba(124, 255, 178, 0.55), 0 0 18px rgba(124, 255, 178, 0.42);
}

.structure-icon::before {
  left: 12px;
  right: 12px;
  top: 22px;
  height: 3px;
  background: var(--accent-cyan);
  box-shadow: 0 18px 0 rgba(92, 200, 255, 0.6);
}

.structure-icon::after {
  left: 18px;
  top: 22px;
  width: 28px;
  height: 28px;
  border-top: 3px solid rgba(92, 200, 255, 0.72);
  border-right: 3px solid rgba(92, 200, 255, 0.72);
  transform: rotate(45deg);
}

.environment-icon::before {
  left: 22px;
  top: 12px;
  width: 20px;
  height: 30px;
  border-radius: 50% 50% 60% 60%;
  background: linear-gradient(180deg, var(--accent-cyan), rgba(124, 255, 178, 0.72));
  transform: rotate(45deg);
  box-shadow: 0 0 18px rgba(92, 200, 255, 0.38);
}

.environment-icon::after {
  left: 14px;
  right: 14px;
  bottom: 12px;
  height: 3px;
  background: rgba(124, 255, 178, 0.7);
  box-shadow: 0 -8px 0 rgba(92, 200, 255, 0.4);
}

.data-icon::before {
  left: 13px;
  bottom: 14px;
  width: 8px;
  height: 18px;
  background: rgba(92, 200, 255, 0.72);
  box-shadow: 14px -10px 0 rgba(124, 255, 178, 0.74), 28px -2px 0 rgba(92, 200, 255, 0.52);
}

.data-icon::after {
  left: 12px;
  right: 12px;
  top: 18px;
  height: 20px;
  border-top: 2px solid rgba(124, 255, 178, 0.68);
  border-right: 2px solid rgba(124, 255, 178, 0.68);
  border-radius: 50%;
  transform: rotate(-18deg);
}

.home-cta-section {
  padding-top: clamp(52px, 7vw, 86px);
  padding-bottom: clamp(64px, 8vw, 104px);
}

.home-cta-panel {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 54px);
  color: var(--text-main);
  background:
    radial-gradient(circle at 78% 20%, rgba(92, 200, 255, 0.16), transparent 32%),
    radial-gradient(circle at 18% 82%, rgba(124, 255, 178, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(120, 220, 255, 0.24);
  border-radius: 8px;
  box-shadow: 0 28px 88px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(244, 248, 251, 0.08);
  backdrop-filter: blur(18px);
}

.home-cta-panel h2 {
  max-width: 900px;
  margin: 0 0 16px;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.08;
}

.home-cta-panel p:not(.eyebrow) {
  max-width: 820px;
  margin: 0;
  color: var(--text-muted);
  font-size: clamp(16px, 1.4vw, 19px);
}

@keyframes labGridDrift {
  from { background-position: 0% 0%, center; }
  to { background-position: 100% 18%, center; }
}

@keyframes labSweep {
  from { transform: translateX(-80%); }
  to { transform: translateX(80%); }
}

@keyframes visualGridMove {
  from { background-position: 0 0, 0 0; }
  to { background-position: 64px 64px, 64px 64px; }
}

@keyframes stageFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes memberScan {
  0%, 35% { transform: translateX(-110%); opacity: 0; }
  52% { opacity: 1; }
  80%, 100% { transform: translateX(110%); opacity: 0; }
}

@keyframes nodePulse {
  0%, 100% { transform: scale(0.84); opacity: 0.68; }
  50% { transform: scale(1.18); opacity: 1; }
}

@keyframes coatingSweep {
  0%, 16% { clip-path: inset(0 100% 0 0); opacity: 0.56; }
  48%, 74% { clip-path: inset(0 0 0 0); opacity: 0.9; }
  100% { clip-path: inset(0 0 0 0); opacity: 0.58; }
}

@keyframes stressFlow {
  from { background-position: -130px 0; transform: translateX(-5px) rotate(15deg); }
  to { background-position: 130px 0; transform: translateX(18px) rotate(15deg); }
}

@keyframes loadPulse {
  0%, 100% { transform: translateY(-8px); opacity: 0.48; }
  50% { transform: translateY(8px); opacity: 1; }
}

@keyframes pollutantMove {
  0% { transform: translateX(-56px); opacity: 0; }
  18% { opacity: 1; }
  72% { opacity: 0.88; }
  100% { transform: translateX(76px); opacity: 0; }
}

@keyframes cleanMove {
  0% { transform: translateX(-38px); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateX(58px); opacity: 0; }
}

@keyframes capturedPulse {
  0%, 100% { transform: scale(0.85); opacity: 0.56; }
  50% { transform: scale(1.16); opacity: 1; }
}

@keyframes labelFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes frameworkParticle {
  from { transform: translateX(0); }
  to { transform: translateX(min(1180px, 82vw)); }
}

@media (max-width: 1480px) {
  .home-lab-hero,
  .research-framework {
    grid-template-columns: 1fr;
  }

  .material-system-visual {
    min-height: 560px;
  }

  .research-framework::before {
    left: 34px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, rgba(92, 200, 255, 0), rgba(92, 200, 255, 0.7), rgba(124, 255, 178, 0.56), rgba(92, 200, 255, 0));
  }

  .research-framework::after {
    left: 30px;
    top: 24px;
    animation: frameworkParticleVertical 9s linear infinite;
  }

  .framework-card {
    min-height: auto;
    padding-left: 78px;
  }

  .framework-card::after {
    left: 28px;
    right: auto;
    top: auto;
    bottom: -15px;
    transform: rotate(135deg);
  }

  .framework-index {
    position: absolute;
    left: 20px;
    top: 24px;
  }

  .core-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@keyframes frameworkParticleVertical {
  from { transform: translateY(0); }
  to { transform: translateY(calc(100vh - 160px)); }
}

@media (max-width: 940px) {
  .home-lab-hero {
    min-height: auto;
    padding-top: 44px;
  }

  .material-system-visual {
    min-height: 480px;
  }

  .mission-card-grid,
  .core-module-grid {
    grid-template-columns: 1fr;
  }

  .home-lab-section .section-heading {
    text-align: left;
  }

  .home-lab-section .section-heading h2,
  .home-lab-section .section-heading p:not(.eyebrow) {
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 620px) {
  .home-lab-hero h1 {
    font-size: clamp(52px, 18vw, 82px);
  }

  .home-lab-hero .hero-subtitle,
  .home-lab-section .section-heading h2,
  .home-cta-panel h2 {
    font-size: clamp(28px, 10vw, 40px);
  }

  .material-system-visual {
    min-height: 440px;
    padding: 18px;
  }

  .system-stage {
    inset: 76px 16px 112px;
  }

  .visual-labels {
    inset: auto 14px 14px;
  }

  .visual-labels span {
    font-size: 11px;
  }

  .home-lab-hero .hero-actions,
  .home-cta-panel .hero-actions {
    flex-direction: column;
  }

  .home-lab-hero .button,
  .home-cta-panel .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-lab-hero::before,
  .material-system-visual::before,
  .visual-grid,
  .system-stage,
  .member::after,
  .node,
  .bio-coating,
  .stress-lines span,
  .load-arrows span,
  .pollutant,
  .clean,
  .captured,
  .visual-labels span,
  .research-framework::after {
    animation: none;
  }
}

/* ACM-Lab UCB-facing single-screen redesign */
.rebuild-hidden,
.footer {
  display: none !important;
}

body:not(.locked) {
  background: #050505;
}

body:not(.locked) .site-header {
  width: 100%;
  min-height: auto;
  bottom: auto;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  gap: 22px;
  padding: 18px clamp(18px, 5vw, 70px);
  color: #f7f1e4;
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.74), rgba(5, 5, 5, 0.28)),
    rgba(9, 9, 10, 0.34);
  border-right: 0;
  border-bottom: 1px solid rgba(220, 183, 97, 0.22);
  backdrop-filter: blur(24px);
}

body:not(.locked) .app-main,
body:not(.locked) .footer {
  margin-left: 0;
}

body:not(.locked) .brand {
  color: #fff8e9;
}

body:not(.locked) .brand-mark {
  border-radius: 8px;
  color: #090909;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.72), transparent 28%),
    linear-gradient(135deg, #f4d47b, #c9a24a 58%, #f8eee0);
  box-shadow: 0 0 34px rgba(220, 183, 97, 0.28), 0 14px 32px rgba(0, 0, 0, 0.32);
}

body:not(.locked) .nav {
  flex: 0 0 auto;
  width: auto;
  flex-direction: row;
  overflow: visible;
}

body:not(.locked) .nav a {
  min-height: auto;
  padding: 9px 16px;
  color: rgba(255, 248, 233, 0.84);
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(220, 183, 97, 0.18);
  border-radius: 999px;
}

body:not(.locked) .nav a:hover,
body:not(.locked) .nav a.active-link {
  color: #0b0a08;
  background: linear-gradient(135deg, #f4d47b, #fff4d1);
  border-color: rgba(255, 238, 180, 0.66);
  box-shadow: 0 16px 38px rgba(220, 183, 97, 0.18);
}

body:not(.locked) .guest-login-button {
  top: 18px;
  right: clamp(18px, 5vw, 70px);
  color: #f8f1df;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(220, 183, 97, 0.28);
  backdrop-filter: blur(18px);
}

.admissions-home {
  position: relative;
  display: grid;
  grid-template-columns: minmax(340px, 0.82fr) minmax(480px, 1.18fr);
  gap: clamp(32px, 5vw, 72px);
  min-height: 100vh;
  padding: clamp(118px, 12vw, 164px) clamp(20px, 5vw, 82px) clamp(44px, 6vw, 76px);
  overflow: hidden;
  color: #fff8e9;
  background:
    radial-gradient(circle at 18% 18%, rgba(244, 212, 123, 0.18), transparent 28%),
    radial-gradient(circle at 76% 24%, rgba(204, 226, 255, 0.12), transparent 30%),
    radial-gradient(circle at 68% 84%, rgba(189, 154, 86, 0.16), transparent 34%),
    linear-gradient(135deg, #050505 0%, #0a0a0c 42%, #14110b 100%);
  isolation: isolate;
}

.admissions-home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(rgba(244, 212, 123, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(204, 226, 255, 0.028) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(circle at 64% 45%, black 0 52%, transparent 78%);
}

.admissions-home::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.72), transparent 34%, rgba(5, 5, 5, 0.12)),
    linear-gradient(180deg, rgba(255, 248, 233, 0.08), transparent 22%, rgba(0, 0, 0, 0.32));
}

.admissions-flow {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  filter: saturate(1.06);
}

.flow-ribbon {
  position: absolute;
  width: 88vw;
  height: 34vh;
  min-height: 260px;
  border-radius: 999px;
  opacity: 0.72;
  filter: blur(28px);
  transform-origin: center;
  mix-blend-mode: screen;
}

.ribbon-a {
  right: -26vw;
  top: 14vh;
  background: linear-gradient(90deg, transparent, rgba(244, 212, 123, 0.72), rgba(255, 248, 233, 0.26), transparent);
  animation: admissionsRibbonA 18s ease-in-out infinite alternate;
}

.ribbon-b {
  right: -18vw;
  bottom: 8vh;
  background: linear-gradient(90deg, transparent, rgba(140, 171, 210, 0.34), rgba(244, 212, 123, 0.46), transparent);
  animation: admissionsRibbonB 22s ease-in-out infinite alternate;
}

.ribbon-c {
  left: 18vw;
  top: 36vh;
  width: 52vw;
  height: 20vh;
  min-height: 180px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), rgba(220, 183, 97, 0.36), transparent);
  animation: admissionsRibbonC 15s ease-in-out infinite alternate;
}

.flow-grain {
  position: absolute;
  inset: -20%;
  opacity: 0.22;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(244, 212, 123, 0.2) 0 1px, transparent 1px);
  background-size: 31px 31px, 47px 47px;
  animation: grainDrift 32s linear infinite;
}

.admissions-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  max-width: 760px;
}

.admissions-home .eyebrow {
  color: #f4d47b;
}

.admissions-copy h1 {
  margin: 0 0 14px;
  color: #fffdf6;
  font-size: clamp(72px, 11vw, 168px);
  line-height: 0.84;
  text-shadow: 0 0 42px rgba(244, 212, 123, 0.18), 0 18px 60px rgba(0, 0, 0, 0.42);
}

.admissions-copy .brand-position {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 24px;
  padding: 10px 13px;
  color: rgba(255, 248, 233, 0.86);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(220, 183, 97, 0.22);
  border-radius: 8px;
  backdrop-filter: blur(18px);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 800;
}

.admissions-thesis {
  max-width: 760px;
  margin: 0 0 22px;
  color: #fff8e9;
  font-size: clamp(34px, 4.8vw, 76px);
  font-weight: 900;
  line-height: 0.98;
}

.admissions-summary {
  max-width: 680px;
  margin: 0;
  color: rgba(232, 224, 208, 0.82);
  font-size: clamp(16px, 1.35vw, 20px);
}

.admissions-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.admissions-actions .button {
  border-radius: 999px;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.admissions-actions .button:hover {
  transform: translateY(-2px);
}

.admissions-actions .button.primary {
  color: #090806;
  background: linear-gradient(135deg, #f4d47b, #fff3cf 48%, #d6ad52);
  border-color: rgba(255, 239, 188, 0.7);
  box-shadow: 0 18px 48px rgba(220, 183, 97, 0.24), 0 0 36px rgba(244, 212, 123, 0.2);
}

.admissions-actions .button.secondary {
  color: #fff8e9;
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(220, 183, 97, 0.28);
  backdrop-filter: blur(18px);
}

.admissions-stage {
  position: relative;
  z-index: 1;
  align-self: stretch;
  min-height: 660px;
  overflow: hidden;
  border: 1px solid rgba(220, 183, 97, 0.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 48% 42%, rgba(244, 212, 123, 0.18), transparent 28%),
    radial-gradient(circle at 62% 56%, rgba(204, 226, 255, 0.1), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.026)),
    rgba(8, 8, 9, 0.48);
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 248, 233, 0.08);
  backdrop-filter: blur(24px);
}

.admissions-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(244, 212, 123, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 212, 123, 0.035) 1px, transparent 1px);
  background-size: 38px 38px;
  animation: stageGridFlow 26s linear infinite;
}

.stage-orbit {
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(244, 212, 123, 0.22);
  border-radius: 50%;
  transform: rotate(-18deg);
  box-shadow: inset 0 0 64px rgba(244, 212, 123, 0.08), 0 0 54px rgba(244, 212, 123, 0.08);
  animation: orbitBreath 9s ease-in-out infinite;
}

.material-field span {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f4d47b;
  box-shadow: 0 0 26px rgba(244, 212, 123, 0.72);
  animation: materialParticle 8s ease-in-out infinite;
}

.material-field span:nth-child(1) { left: 18%; top: 28%; }
.material-field span:nth-child(2) { left: 42%; top: 18%; animation-delay: 0.7s; }
.material-field span:nth-child(3) { left: 68%; top: 26%; animation-delay: 1.4s; }
.material-field span:nth-child(4) { left: 24%; top: 62%; animation-delay: 2.1s; }
.material-field span:nth-child(5) { left: 55%; top: 70%; animation-delay: 2.8s; }
.material-field span:nth-child(6) { left: 78%; top: 58%; animation-delay: 3.5s; }

.lattice-mesh {
  position: absolute;
  left: 12%;
  top: 24%;
  width: 54%;
  height: 36%;
  transform: perspective(900px) rotateX(62deg) rotateZ(-14deg);
  animation: latticeLift 8s ease-in-out infinite;
}

.lattice-mesh i {
  position: absolute;
  display: block;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 248, 233, 0.12), rgba(244, 212, 123, 0.86), rgba(204, 226, 255, 0.34));
  box-shadow: 0 0 22px rgba(244, 212, 123, 0.28);
  transform-origin: left center;
}

.lattice-mesh i:nth-child(1) { left: 8%; top: 18%; width: 62%; }
.lattice-mesh i:nth-child(2) { left: 8%; top: 72%; width: 62%; }
.lattice-mesh i:nth-child(3) { left: 8%; top: 18%; width: 74%; transform: rotate(34deg); }
.lattice-mesh i:nth-child(4) { left: 36%; top: 18%; width: 55%; transform: rotate(34deg); }
.lattice-mesh i:nth-child(5) { left: 8%; top: 72%; width: 74%; transform: rotate(-34deg); }
.lattice-mesh i:nth-child(6) { left: 36%; top: 72%; width: 55%; transform: rotate(-34deg); }
.lattice-mesh i:nth-child(7) { left: 18%; top: 0; width: 44%; transform: rotate(90deg); }
.lattice-mesh i:nth-child(8) { left: 52%; top: 0; width: 44%; transform: rotate(90deg); }

.flow-channel {
  position: absolute;
  right: 9%;
  top: 21%;
  width: 22%;
  height: 52%;
  border: 1px solid rgba(244, 212, 123, 0.22);
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 248, 233, 0.16) 0 3px, transparent 3px 14px),
    linear-gradient(180deg, rgba(244, 212, 123, 0.12), rgba(204, 226, 255, 0.06));
  box-shadow: inset 0 0 34px rgba(244, 212, 123, 0.1), 0 0 38px rgba(220, 183, 97, 0.12);
}

.flow-channel span {
  position: absolute;
  left: -42%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff8e9;
  box-shadow: 0 0 18px rgba(255, 248, 233, 0.6);
  animation: channelFlow 5.6s linear infinite;
}

.flow-channel span:nth-child(1) { top: 23%; }
.flow-channel span:nth-child(2) { top: 39%; animation-delay: 0.8s; }
.flow-channel span:nth-child(3) { top: 56%; animation-delay: 1.6s; }
.flow-channel span:nth-child(4) { top: 73%; animation-delay: 2.4s; }

.signal-panel {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 180px;
  padding: 22px;
  background: rgba(5, 5, 5, 0.48);
  border: 1px solid rgba(220, 183, 97, 0.2);
  border-radius: 8px;
  backdrop-filter: blur(18px);
}

.signal-panel h2 {
  margin: 0 0 16px;
  color: #fff8e9;
  font-size: clamp(30px, 3.6vw, 54px);
  line-height: 1;
}

.signal-chain {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.signal-chain span {
  padding: 8px 10px;
  color: rgba(255, 248, 233, 0.88);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(244, 212, 123, 0.18);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.proof-grid {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 32px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.proof-grid article {
  min-height: 126px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(220, 183, 97, 0.18);
  border-radius: 8px;
  backdrop-filter: blur(18px);
}

.proof-grid span {
  color: #f4d47b;
  font-weight: 900;
}

.proof-grid strong {
  display: block;
  margin: 4px 0 7px;
  color: #fff8e9;
  font-size: 16px;
}

.proof-grid p {
  margin: 0;
  color: rgba(232, 224, 208, 0.75);
  font-size: 13px;
}

@keyframes admissionsRibbonA {
  from { transform: translate3d(0, -5%, 0) rotate(-12deg) scale(1); }
  to { transform: translate3d(-18%, 18%, 0) rotate(-5deg) scale(1.12); }
}

@keyframes admissionsRibbonB {
  from { transform: translate3d(12%, 8%, 0) rotate(10deg) scale(1.08); }
  to { transform: translate3d(-22%, -12%, 0) rotate(18deg) scale(0.96); }
}

@keyframes admissionsRibbonC {
  from { transform: translate3d(-10%, 12%, 0) rotate(22deg); }
  to { transform: translate3d(26%, -18%, 0) rotate(8deg); }
}

@keyframes grainDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(90px, -70px, 0); }
}

@keyframes stageGridFlow {
  from { background-position: 0 0, 0 0; }
  to { background-position: 76px 76px, 76px 76px; }
}

@keyframes orbitBreath {
  0%, 100% { transform: rotate(-18deg) scale(0.96); opacity: 0.62; }
  50% { transform: rotate(-12deg) scale(1.04); opacity: 1; }
}

@keyframes materialParticle {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.82); opacity: 0.58; }
  50% { transform: translate3d(18px, -24px, 0) scale(1.18); opacity: 1; }
}

@keyframes latticeLift {
  0%, 100% { transform: perspective(900px) rotateX(62deg) rotateZ(-14deg) translateY(0); }
  50% { transform: perspective(900px) rotateX(58deg) rotateZ(-10deg) translateY(-12px); }
}

@keyframes channelFlow {
  0% { transform: translateX(0); opacity: 0; }
  16% { opacity: 1; }
  74% { opacity: 0.92; }
  100% { transform: translateX(170px); opacity: 0; }
}

@media (max-width: 1100px) {
  body:not(.locked) .site-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .admissions-home {
    grid-template-columns: 1fr;
    padding-top: 170px;
  }

  .admissions-stage {
    min-height: 620px;
  }
}

@media (max-width: 680px) {
  body:not(.locked) .site-header {
    padding: 14px 18px;
  }

  body:not(.locked) .guest-login-button {
    top: 14px;
    right: 18px;
  }

  .admissions-home {
    padding: 190px 18px 34px;
  }

  .admissions-copy h1 {
    font-size: clamp(58px, 19vw, 92px);
  }

  .admissions-thesis {
    font-size: clamp(32px, 10vw, 48px);
  }

  .admissions-actions {
    flex-direction: column;
  }

  .admissions-actions .button {
    width: 100%;
  }

  .admissions-stage {
    min-height: 760px;
  }

  .lattice-mesh {
    left: 8%;
    width: 70%;
  }

  .flow-channel {
    right: 7%;
    width: 26%;
  }

  .signal-panel {
    left: 16px;
    right: 16px;
    bottom: 310px;
  }

  .proof-grid {
    left: 16px;
    right: 16px;
    bottom: 16px;
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-ribbon,
  .flow-grain,
  .admissions-stage::before,
  .stage-orbit,
  .material-field span,
  .lattice-mesh,
  .flow-channel span {
    animation: none;
  }
}

/* ACM-Lab Home v3: premium material-science laboratory landing page */
:root {
  --bg-main: #050b14;
  --bg-secondary: #07111f;
  --card-bg: rgba(255, 255, 255, 0.06);
  --card-border: rgba(120, 220, 255, 0.22);
  --accent-cyan: #5cc8ff;
  --accent-green: #7cffb2;
  --text-main: #f4f8fb;
  --text-muted: #9baec2;
}

body:not(.locked) {
  color: var(--text-main);
  background:
    radial-gradient(circle at 12% 8%, rgba(92, 200, 255, 0.16), transparent 34%),
    radial-gradient(circle at 90% 72%, rgba(124, 255, 178, 0.12), transparent 34%),
    linear-gradient(135deg, #050b14 0%, #07111f 46%, #041014 100%);
}

body:not(.locked) .site-header {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: flex;
  width: var(--sidebar-width);
  min-height: 100vh;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  gap: 18px;
  padding: 22px 16px;
  color: var(--text-main);
  background:
    radial-gradient(circle at top left, rgba(92, 200, 255, 0.16), transparent 44%),
    linear-gradient(180deg, rgba(5, 11, 20, 0.96), rgba(7, 17, 31, 0.92));
  border-right: 1px solid rgba(92, 200, 255, 0.18);
  border-bottom: 0;
  box-shadow: 18px 0 80px rgba(0, 0, 0, 0.28);
  overflow-y: auto;
  backdrop-filter: blur(20px);
}

body:not(.locked) .app-main,
body:not(.locked) .footer {
  margin-left: var(--sidebar-width);
}

body:not(.locked) .app-main {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 8%, rgba(92, 200, 255, 0.11), transparent 34%),
    radial-gradient(circle at 88% 72%, rgba(124, 255, 178, 0.08), transparent 34%),
    linear-gradient(135deg, #050b14 0%, #07111f 52%, #041014 100%);
}

body:not(.locked) .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-main);
}

body:not(.locked) .brand-mark {
  color: #021016;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.86), transparent 28%),
    linear-gradient(135deg, var(--accent-cyan), var(--accent-green));
  border-radius: 12px;
  box-shadow: 0 0 34px rgba(92, 200, 255, 0.26), 0 18px 42px rgba(0, 0, 0, 0.36);
}

body:not(.locked) .nav {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  flex-direction: column;
  gap: 7px;
  overflow: visible;
}

body:not(.locked) .nav a {
  width: 100%;
  min-height: 42px;
  padding: 10px 14px;
  color: rgba(244, 248, 251, 0.72);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 850;
}

body:not(.locked) .nav a:hover,
body:not(.locked) .nav a.active-link {
  color: #dffcff;
  background: linear-gradient(135deg, rgba(92, 200, 255, 0.14), rgba(124, 255, 178, 0.08));
  border-color: rgba(92, 200, 255, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 34px rgba(7, 204, 255, 0.08);
}

body:not(.locked) .guest-login-button {
  top: 18px;
  right: 22px;
  color: var(--text-main);
  background: rgba(5, 11, 20, 0.72);
  border-color: rgba(92, 200, 255, 0.28);
  backdrop-filter: blur(18px);
}

.admissions-home.active-app {
  display: grid !important;
}

.admissions-home {
  position: relative;
  grid-template-columns: minmax(430px, 0.88fr) minmax(500px, 1.12fr);
  gap: clamp(28px, 4vw, 58px);
  min-height: min(88vh, 940px);
  padding: clamp(42px, 5vw, 68px) clamp(22px, 5vw, 78px) clamp(36px, 4vw, 56px);
  overflow: hidden;
  color: var(--text-main);
  background:
    radial-gradient(circle at 18% 20%, rgba(92, 200, 255, 0.16), transparent 30%),
    radial-gradient(circle at 72% 20%, rgba(124, 255, 178, 0.12), transparent 28%),
    radial-gradient(circle at 72% 84%, rgba(92, 200, 255, 0.1), transparent 34%),
    linear-gradient(135deg, #050b14 0%, #07111f 48%, #041014 100%);
  isolation: isolate;
}

.admissions-home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(rgba(92, 200, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 200, 255, 0.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.7), black 32%, black 84%, transparent);
  animation: homeGridDrift 34s linear infinite;
}

.admissions-home::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 11, 20, 0.7), transparent 42%, rgba(5, 11, 20, 0.2)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 28%, rgba(0, 0, 0, 0.22));
}

.admissions-flow {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.flow-ribbon {
  position: absolute;
  width: 72vw;
  height: 30vh;
  min-height: 210px;
  border-radius: 999px;
  opacity: 0.58;
  filter: blur(36px);
  mix-blend-mode: screen;
}

.ribbon-a {
  right: -22vw;
  top: 12vh;
  background: linear-gradient(90deg, transparent, rgba(92, 200, 255, 0.62), rgba(124, 255, 178, 0.22), transparent);
  animation: admissionsRibbonA 19s ease-in-out infinite alternate;
}

.ribbon-b {
  right: -16vw;
  bottom: 10vh;
  background: linear-gradient(90deg, transparent, rgba(124, 255, 178, 0.38), rgba(92, 200, 255, 0.3), transparent);
  animation: admissionsRibbonB 23s ease-in-out infinite alternate;
}

.ribbon-c {
  left: 14vw;
  top: 42vh;
  width: 46vw;
  height: 18vh;
  min-height: 150px;
  background: linear-gradient(90deg, transparent, rgba(244, 248, 251, 0.12), rgba(92, 200, 255, 0.28), transparent);
  animation: admissionsRibbonC 17s ease-in-out infinite alternate;
}

.flow-grain {
  position: absolute;
  inset: -20%;
  opacity: 0.2;
  background:
    radial-gradient(circle at 20% 30%, rgba(92, 200, 255, 0.24) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(124, 255, 178, 0.18) 0 1px, transparent 1px);
  background-size: 29px 29px, 43px 43px;
  animation: grainDrift 36s linear infinite;
}

.admissions-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  max-width: 720px;
}

.admissions-home .eyebrow,
.home-lab-section .eyebrow,
.home-cta-panel .eyebrow,
.home-team-section .eyebrow {
  color: var(--accent-green);
  letter-spacing: 0.08em;
}

.admissions-copy h1 {
  margin: 0 0 12px;
  color: var(--text-main);
  font-size: clamp(62px, 6.9vw, 104px);
  line-height: 0.94;
  white-space: nowrap;
  text-shadow: 0 0 42px rgba(92, 200, 255, 0.16), 0 18px 60px rgba(0, 0, 0, 0.42);
}

.admissions-copy .brand-position {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 18px;
  padding: 9px 13px;
  color: rgba(244, 248, 251, 0.86);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(92, 200, 255, 0.22);
  border-radius: 999px;
  backdrop-filter: blur(18px);
  font-size: clamp(14px, 1.08vw, 17px);
  font-weight: 850;
}

.admissions-thesis {
  max-width: 660px;
  margin: 0 0 10px;
  color: var(--text-main);
  font-size: clamp(31px, 3.6vw, 54px);
  font-weight: 900;
  line-height: 1.04;
  text-wrap: balance;
}

.admissions-thesis-cn {
  max-width: 680px;
  margin: 0 0 18px;
  color: rgba(124, 255, 178, 0.82);
  font-size: clamp(17px, 1.35vw, 22px);
  font-weight: 800;
}

.admissions-summary {
  max-width: 690px;
  margin: 0 0 10px;
  color: rgba(214, 226, 238, 0.82);
  font-size: clamp(15px, 1.2vw, 18px);
}

.admissions-summary.cn-copy {
  color: rgba(155, 174, 194, 0.92);
}

.admissions-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}

.admissions-actions .button,
.home-cta-panel .button {
  min-height: 48px;
  border-radius: 14px;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

.admissions-actions .button:hover,
.home-cta-panel .button:hover {
  transform: translateY(-2px);
}

.admissions-actions .button.primary,
.home-cta-panel .button.primary {
  color: #021016;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-green));
  border-color: rgba(124, 255, 178, 0.52);
  box-shadow: 0 18px 48px rgba(92, 200, 255, 0.18), 0 0 36px rgba(124, 255, 178, 0.14);
}

.admissions-actions .button.secondary,
.home-cta-panel .button.secondary {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(92, 200, 255, 0.3);
  backdrop-filter: blur(18px);
}

.material-system-visual {
  position: relative;
  z-index: 1;
  align-self: center;
  min-height: 545px;
  overflow: hidden;
  border: 1px solid rgba(92, 200, 255, 0.22);
  border-radius: 24px;
  background:
    radial-gradient(circle at 36% 36%, rgba(92, 200, 255, 0.18), transparent 28%),
    radial-gradient(circle at 72% 56%, rgba(124, 255, 178, 0.13), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.026)),
    rgba(7, 17, 31, 0.54);
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(244, 248, 251, 0.08);
  backdrop-filter: blur(24px);
  transform: translate3d(var(--mx, 0), var(--my, 0), 0);
  transition: transform 180ms ease;
}

.material-system-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(92, 200, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 200, 255, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  animation: stageGridFlow 28s linear infinite;
}

.visual-header {
  position: absolute;
  left: 24px;
  top: 22px;
  z-index: 4;
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  color: var(--text-main);
  background: rgba(5, 11, 20, 0.48);
  border: 1px solid rgba(92, 200, 255, 0.18);
  border-radius: 14px;
  backdrop-filter: blur(16px);
}

.visual-header span {
  color: var(--accent-green);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.visual-header strong {
  color: rgba(244, 248, 251, 0.78);
  font-size: 13px;
}

.system-visual-core {
  position: absolute;
  inset: 74px 28px 168px;
}

.stage-orbit {
  position: absolute;
  inset: 11%;
  border: 1px solid rgba(92, 200, 255, 0.2);
  border-radius: 50%;
  transform: rotate(-18deg);
  box-shadow: inset 0 0 64px rgba(92, 200, 255, 0.08), 0 0 54px rgba(124, 255, 178, 0.08);
  animation: orbitBreath 9s ease-in-out infinite;
}

.lattice-truss {
  position: absolute;
  left: 5%;
  top: 22%;
  width: 46%;
  height: 44%;
  transform: perspective(900px) rotateX(58deg) rotateZ(-12deg);
  animation: latticeLift 8s ease-in-out infinite;
}

.lattice-truss i {
  position: absolute;
  display: block;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(92, 200, 255, 0.18), rgba(92, 200, 255, 0.9), rgba(124, 255, 178, 0.42));
  box-shadow: 0 0 22px rgba(92, 200, 255, 0.36);
  transform-origin: left center;
}

.lattice-truss i:nth-child(1) { left: 5%; top: 18%; width: 76%; }
.lattice-truss i:nth-child(2) { left: 5%; top: 72%; width: 76%; }
.lattice-truss i:nth-child(3) { left: 5%; top: 18%; width: 84%; transform: rotate(32deg); }
.lattice-truss i:nth-child(4) { left: 36%; top: 18%; width: 62%; transform: rotate(32deg); }
.lattice-truss i:nth-child(5) { left: 5%; top: 72%; width: 84%; transform: rotate(-32deg); }
.lattice-truss i:nth-child(6) { left: 36%; top: 72%; width: 62%; transform: rotate(-32deg); }
.lattice-truss i:nth-child(7) { left: 20%; top: 0; width: 48%; transform: rotate(90deg); }
.lattice-truss i:nth-child(8) { left: 56%; top: 0; width: 48%; transform: rotate(90deg); }

.lattice-truss b {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 24px rgba(92, 200, 255, 0.72);
  animation: nodePulse 2.8s ease-in-out infinite;
}

.lattice-truss b:nth-of-type(1) { left: 2%; top: 14%; }
.lattice-truss b:nth-of-type(2) { left: 38%; top: 14%; animation-delay: 0.3s; }
.lattice-truss b:nth-of-type(3) { left: 82%; top: 14%; animation-delay: 0.6s; }
.lattice-truss b:nth-of-type(4) { left: 2%; top: 68%; animation-delay: 0.9s; }
.lattice-truss b:nth-of-type(5) { left: 38%; top: 68%; animation-delay: 1.2s; }
.lattice-truss b:nth-of-type(6) { left: 82%; top: 68%; animation-delay: 1.5s; }

.bio-coating-layer {
  position: absolute;
  left: 7%;
  top: 30%;
  width: 42%;
  height: 18%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(124, 255, 178, 0.02), rgba(124, 255, 178, 0.28), rgba(124, 255, 178, 0.08));
  filter: blur(5px);
  box-shadow: 0 0 42px rgba(124, 255, 178, 0.24);
  animation: coatingSweep 6.5s ease-in-out infinite;
}

.visual-stress {
  position: absolute;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
  box-shadow: 0 0 20px rgba(92, 200, 255, 0.38);
  animation: stressFlow 3.8s linear infinite;
}

.stress-a { left: 12%; top: 21%; width: 34%; transform: rotate(18deg); }
.stress-b { left: 16%; top: 49%; width: 38%; transform: rotate(-20deg); animation-delay: 1.2s; }

.load-arrow {
  position: absolute;
  top: 9%;
  width: 2px;
  height: 58px;
  background: linear-gradient(var(--accent-cyan), transparent);
  box-shadow: 0 0 18px rgba(92, 200, 255, 0.38);
  animation: loadPulse 2.8s ease-in-out infinite;
}

.arrow-a { left: 23%; }
.arrow-b { left: 39%; animation-delay: 0.8s; }

.load-arrow::after {
  content: "";
  position: absolute;
  left: -5px;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--accent-cyan);
  border-bottom: 2px solid var(--accent-cyan);
  transform: rotate(45deg);
}

.filter-cartridge {
  position: absolute;
  right: 9%;
  top: 20%;
  width: 25%;
  height: 56%;
  border: 1px solid rgba(124, 255, 178, 0.32);
  border-radius: 18px;
  background:
    repeating-linear-gradient(90deg, rgba(124, 255, 178, 0.15) 0 3px, transparent 3px 14px),
    linear-gradient(180deg, rgba(92, 200, 255, 0.08), rgba(124, 255, 178, 0.12));
  box-shadow: inset 0 0 38px rgba(124, 255, 178, 0.1), 0 0 44px rgba(92, 200, 255, 0.12);
}

.filter-cartridge span {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(124, 255, 178, 0.75);
  box-shadow: 0 0 20px rgba(124, 255, 178, 0.5);
  animation: adsorptionPulse 3.4s ease-in-out infinite;
}

.filter-cartridge span:nth-child(1) { left: 24%; top: 18%; }
.filter-cartridge span:nth-child(2) { left: 62%; top: 24%; animation-delay: 0.5s; }
.filter-cartridge span:nth-child(3) { left: 40%; top: 42%; animation-delay: 1s; }
.filter-cartridge span:nth-child(4) { left: 72%; top: 56%; animation-delay: 1.5s; }
.filter-cartridge span:nth-child(5) { left: 28%; top: 70%; animation-delay: 2s; }
.filter-cartridge span:nth-child(6) { left: 56%; top: 78%; animation-delay: 2.5s; }

.particle-stream em {
  position: absolute;
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  animation: particleMove 5.2s linear infinite;
}

.contaminant-stream em {
  left: 53%;
  background: var(--accent-green);
  box-shadow: 0 0 18px rgba(124, 255, 178, 0.62);
}

.contaminant-stream em:nth-child(1) { top: 30%; }
.contaminant-stream em:nth-child(2) { top: 39%; animation-delay: 0.7s; }
.contaminant-stream em:nth-child(3) { top: 50%; animation-delay: 1.4s; }
.contaminant-stream em:nth-child(4) { top: 61%; animation-delay: 2.1s; }
.contaminant-stream em:nth-child(5) { top: 72%; animation-delay: 2.8s; }

.clean-stream em {
  left: 86%;
  background: var(--accent-cyan);
  box-shadow: 0 0 18px rgba(92, 200, 255, 0.62);
  animation-name: cleanParticleMove;
}

.clean-stream em:nth-child(1) { top: 34%; }
.clean-stream em:nth-child(2) { top: 46%; animation-delay: 0.9s; }
.clean-stream em:nth-child(3) { top: 59%; animation-delay: 1.8s; }
.clean-stream em:nth-child(4) { top: 70%; animation-delay: 2.7s; }

.visual-labels {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 150px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.visual-labels span {
  padding: 8px 10px;
  color: rgba(244, 248, 251, 0.88);
  background: rgba(5, 11, 20, 0.58);
  border: 1px solid rgba(92, 200, 255, 0.2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  backdrop-filter: blur(16px);
  animation: labelFloat 5s ease-in-out infinite;
}

.visual-labels span:nth-child(2) { animation-delay: 0.5s; }
.visual-labels span:nth-child(3) { animation-delay: 1s; }
.visual-labels span:nth-child(4) { animation-delay: 1.5s; }
.visual-labels span:nth-child(5) { animation-delay: 2s; }

.compact-proof-grid {
  bottom: 24px;
}

.compact-proof-grid article {
  background: rgba(5, 11, 20, 0.62);
  border-color: rgba(92, 200, 255, 0.17);
}

.compact-proof-grid span {
  color: var(--accent-green);
}

.compact-proof-grid strong {
  color: var(--text-main);
}

.compact-proof-grid p {
  color: rgba(155, 174, 194, 0.86);
}

.home-lab-section {
  display: none;
  position: relative;
  padding: clamp(62px, 7vw, 98px) clamp(22px, 5vw, 78px);
  color: var(--text-main);
  background-color: #050b14 !important;
  background-image:
    radial-gradient(circle at top left, rgba(92, 200, 255, 0.1), transparent 30%),
    radial-gradient(circle at bottom right, rgba(124, 255, 178, 0.08), transparent 32%),
    linear-gradient(135deg, #050b14 0%, #07111f 52%, #041014 100%) !important;
  border-top: 1px solid rgba(92, 200, 255, 0.12);
}

.home-lab-section.home-visible {
  display: block;
}

.home-lab-section .section-heading,
.home-team-section .section-heading {
  max-width: 980px;
  margin: 0 0 34px;
}

.home-lab-section .section-heading h2,
.home-cta-panel h2,
.home-team-section .section-heading h2 {
  margin: 0;
  color: var(--text-main);
  font-size: clamp(32px, 3.8vw, 56px);
  line-height: 1.02;
  text-wrap: balance;
}

.home-lab-section .section-heading p:not(.eyebrow),
.home-cta-panel p:not(.eyebrow) {
  max-width: 780px;
  color: var(--text-muted);
  font-size: clamp(16px, 1.25vw, 19px);
}

.lab-glass-card,
.home-team-section .info-card {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(92, 200, 255, 0.18);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
}

.mission-card-grid,
.core-module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.core-module-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mission-card,
.core-module-card,
.framework-card {
  position: relative;
  min-height: 260px;
  padding: 24px;
  overflow: hidden;
}

.mission-card h3,
.core-module-card h3,
.framework-card h3 {
  margin: 0 0 7px;
  color: var(--text-main);
  font-size: 24px;
  line-height: 1.1;
}

.mission-card strong,
.core-module-card strong,
.framework-card strong {
  display: block;
  margin-bottom: 14px;
  color: var(--accent-green);
}

.mission-card p,
.core-module-card p,
.framework-card p {
  margin: 0 0 10px;
  color: rgba(214, 226, 238, 0.82);
}

.cn-copy {
  color: rgba(155, 174, 194, 0.9) !important;
}

.mission-visual {
  position: relative;
  width: 100%;
  height: 86px;
  margin-bottom: 20px;
  border-radius: 16px;
  background:
    linear-gradient(rgba(92, 200, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 200, 255, 0.035) 1px, transparent 1px),
    rgba(5, 11, 20, 0.34);
  background-size: 22px 22px;
  border: 1px solid rgba(92, 200, 255, 0.14);
  overflow: hidden;
}

.mission-visual span,
.mission-visual i {
  position: absolute;
  display: block;
}

.molecular-visual span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 18px rgba(124, 255, 178, 0.42);
  animation: nodePulse 3s ease-in-out infinite;
}

.molecular-visual span:nth-child(1) { left: 18%; top: 42%; }
.molecular-visual span:nth-child(2) { left: 48%; top: 26%; animation-delay: 0.6s; }
.molecular-visual span:nth-child(3) { left: 76%; top: 56%; animation-delay: 1.2s; }
.molecular-visual i {
  height: 2px;
  width: 44%;
  left: 25%;
  top: 45%;
  background: linear-gradient(90deg, var(--accent-green), var(--accent-cyan));
  opacity: 0.52;
}

.truss-visual span {
  left: 12%;
  width: 76%;
  height: 2px;
  background: var(--accent-cyan);
  box-shadow: 0 0 18px rgba(92, 200, 255, 0.3);
}

.truss-visual span:nth-child(1) { top: 30%; }
.truss-visual span:nth-child(2) { top: 68%; }
.truss-visual i {
  left: 18%;
  top: 33%;
  width: 52%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-cyan), transparent);
  transform: rotate(24deg);
}

.truss-visual i:nth-of-type(2) {
  top: 66%;
  transform: rotate(-24deg);
}

.filter-visual span {
  top: 20%;
  width: 12%;
  height: 60%;
  border-radius: 9px;
  background: rgba(124, 255, 178, 0.18);
  border: 1px solid rgba(124, 255, 178, 0.32);
}

.filter-visual span:nth-child(1) { left: 38%; }
.filter-visual span:nth-child(2) { left: 52%; }
.filter-visual span:nth-child(3) { left: 66%; }
.filter-visual i {
  top: 42%;
  left: 12%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 18px rgba(124, 255, 178, 0.48);
  animation: particleMove 4.8s linear infinite;
}

.filter-visual i:nth-of-type(2) {
  top: 62%;
  animation-delay: 1.2s;
}

.research-framework {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.research-framework::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(92, 200, 255, 0.5), rgba(124, 255, 178, 0.45), transparent);
  box-shadow: 0 0 28px rgba(92, 200, 255, 0.24);
}

.research-framework::after {
  content: "";
  position: absolute;
  left: 9%;
  top: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 22px rgba(124, 255, 178, 0.64);
  animation: frameworkParticle 8s linear infinite;
}

.framework-card {
  z-index: 1;
  min-height: 330px;
}

.framework-index {
  display: inline-flex;
  margin-bottom: 16px;
  color: var(--accent-cyan);
  font-family: "JetBrains Mono", "SF Mono", monospace;
  font-weight: 900;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}

.tag-row span {
  padding: 6px 8px;
  color: rgba(244, 248, 251, 0.78);
  background: rgba(92, 200, 255, 0.08);
  border: 1px solid rgba(92, 200, 255, 0.15);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
}

.module-icon {
  display: block;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 30% 30%, rgba(244, 248, 251, 0.44), transparent 24%),
    linear-gradient(135deg, rgba(92, 200, 255, 0.26), rgba(124, 255, 178, 0.18));
  border: 1px solid rgba(92, 200, 255, 0.2);
  box-shadow: 0 0 32px rgba(92, 200, 255, 0.14);
}

.home-cta-section {
  padding-bottom: clamp(84px, 10vw, 130px);
}

.home-cta-panel {
  max-width: 1180px;
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid rgba(92, 200, 255, 0.2);
  border-radius: 24px;
  background:
    radial-gradient(circle at 15% 20%, rgba(92, 200, 255, 0.13), transparent 34%),
    radial-gradient(circle at 86% 70%, rgba(124, 255, 178, 0.1), transparent 34%),
    rgba(255, 255, 255, 0.055);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(20px);
}

.home-team-section.app-screen.active-app {
  display: block !important;
}

.home-team-section {
  min-height: 100vh;
  padding: clamp(82px, 8vw, 122px) clamp(22px, 5vw, 78px);
  color: var(--text-main);
  background-color: #050b14 !important;
  background-image:
    radial-gradient(circle at top left, rgba(92, 200, 255, 0.12), transparent 30%),
    radial-gradient(circle at bottom right, rgba(124, 255, 178, 0.09), transparent 32%),
    linear-gradient(135deg, #050b14 0%, #07111f 52%, #041014 100%) !important;
}

.home-team-section .card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.home-team-section .team-card {
  min-height: 190px;
  padding: 24px;
  color: var(--text-main);
}

.home-team-section .team-card .tag {
  color: var(--accent-cyan);
}

.home-team-section .team-card p {
  color: rgba(155, 174, 194, 0.92);
}

@keyframes homeGridDrift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 92px 92px, 92px 92px; }
}

@keyframes nodePulse {
  0%, 100% { opacity: 0.62; transform: scale(0.88); }
  50% { opacity: 1; transform: scale(1.18); }
}

@keyframes coatingSweep {
  0%, 100% { clip-path: inset(0 88% 0 0); opacity: 0.45; }
  52% { clip-path: inset(0 8% 0 0); opacity: 1; }
}

@keyframes stressFlow {
  from { background-position: -220px 0; opacity: 0.45; }
  to { background-position: 220px 0; opacity: 1; }
}

@keyframes loadPulse {
  0%, 100% { transform: translateY(-8px); opacity: 0.35; }
  50% { transform: translateY(8px); opacity: 0.9; }
}

@keyframes adsorptionPulse {
  0%, 100% { opacity: 0.5; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1.2); }
}

@keyframes particleMove {
  0% { transform: translateX(0); opacity: 0; }
  18% { opacity: 1; }
  76% { opacity: 0.85; }
  100% { transform: translateX(118px); opacity: 0; }
}

@keyframes cleanParticleMove {
  0% { transform: translateX(0); opacity: 0; }
  20% { opacity: 0.92; }
  100% { transform: translateX(80px); opacity: 0; }
}

@keyframes labelFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes frameworkParticle {
  from { transform: translateX(0); }
  to { transform: translateX(74vw); }
}

@media (max-width: 1280px) {
  .admissions-home {
    grid-template-columns: 1fr;
  }

  .material-system-visual {
    min-height: 620px;
  }

  .research-framework,
  .core-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .research-framework::before,
  .research-framework::after {
    display: none;
  }
}

@media (max-width: 900px) {
  body:not(.locked) .site-header {
    position: relative;
    width: 100%;
    min-height: auto;
  }

  body:not(.locked) .app-main,
  body:not(.locked) .footer {
    margin-left: 0;
  }

  .mission-card-grid,
  .core-module-grid,
  .research-framework,
  .home-team-section .card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .admissions-home,
  .home-lab-section,
  .home-team-section {
    padding-inline: 18px;
  }

  .admissions-copy h1 {
    font-size: clamp(58px, 18vw, 92px);
  }

  .admissions-thesis {
    font-size: clamp(32px, 9vw, 48px);
  }

  .admissions-actions {
    flex-direction: column;
  }

  .admissions-actions .button,
  .home-cta-panel .button {
    width: 100%;
    justify-content: center;
  }

  .material-system-visual {
    min-height: 760px;
  }

  .system-visual-core {
    inset: 82px 18px 260px;
  }

  .lattice-truss {
    left: 4%;
    width: 58%;
  }

  .filter-cartridge {
    right: 4%;
    width: 30%;
  }

  .visual-labels {
    bottom: 198px;
  }

  .compact-proof-grid {
    grid-template-columns: 1fr;
    bottom: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admissions-home::before,
  .flow-ribbon,
  .flow-grain,
  .stage-orbit,
  .lattice-truss,
  .lattice-truss b,
  .bio-coating-layer,
  .visual-stress,
  .load-arrow,
  .filter-cartridge span,
  .particle-stream em,
  .visual-labels span,
  .research-framework::after {
    animation: none !important;
  }
}

/* ACM-Lab Team portraits: dark research-lab identity system */
.home-team-section {
  position: relative;
  overflow: hidden;
}

.home-team-section::before,
.home-team-section::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.home-team-section::before {
  inset: 0;
  background:
    linear-gradient(rgba(92, 200, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 200, 255, 0.032) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.78;
  animation: homeGridDrift 36s linear infinite;
}

.home-team-section::after {
  width: 58vw;
  height: 58vw;
  right: -16vw;
  top: -18vw;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(92, 200, 255, 0.16), transparent 62%),
    radial-gradient(circle at 70% 64%, rgba(124, 255, 178, 0.12), transparent 46%);
  filter: blur(12px);
  opacity: 0.72;
}

.home-team-section .section-heading,
.home-team-section .card-grid {
  position: relative;
  z-index: 1;
}

.home-team-section .section-heading {
  max-width: 1080px;
  margin-bottom: 34px;
}

.home-team-section .section-heading h2 {
  max-width: 920px;
  font-size: clamp(54px, 6vw, 92px);
  line-height: 0.92;
  letter-spacing: -0.04em;
}

.home-team-section .card-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
  max-width: 1220px;
}

.home-team-section .team-card {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 500px;
  padding: 18px 16px 20px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(92, 200, 255, 0.14), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
    rgba(7, 17, 31, 0.78);
  border: 1px solid rgba(92, 200, 255, 0.2);
  border-radius: 24px;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(244, 248, 251, 0.08);
  backdrop-filter: blur(20px);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.home-team-section .team-card:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 255, 178, 0.38);
  box-shadow: 0 30px 88px rgba(0, 0, 0, 0.34), 0 0 36px rgba(92, 200, 255, 0.12);
}

.home-team-section .featured-team-card {
  grid-column: span 4;
  min-height: 620px;
  padding: 22px 22px 26px;
}

.team-photo-wrap {
  position: relative;
  width: min(100%, 190px);
  aspect-ratio: 1;
  margin-bottom: 18px;
  border-radius: 28px;
  padding: 4px;
  background:
    linear-gradient(135deg, rgba(92, 200, 255, 0.8), rgba(124, 255, 178, 0.55)),
    rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34), 0 0 34px rgba(92, 200, 255, 0.18);
  overflow: hidden;
}

.featured-team-card .team-photo-wrap {
  width: min(100%, 220px);
  border-radius: 32px;
}

.team-photo-wrap::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  border: 1px solid rgba(244, 248, 251, 0.16);
  box-shadow: inset 0 0 24px rgba(5, 11, 20, 0.2);
  pointer-events: none;
}

.team-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: calc(28px - 4px);
  filter: saturate(0.96) contrast(1.02);
}

.featured-team-card .team-photo {
  border-radius: calc(32px - 4px);
}

.home-team-section .team-card .tag {
  display: inline-flex;
  justify-content: center;
  width: fit-content;
  margin-bottom: 10px;
  padding: 7px 10px;
  color: var(--accent-green);
  background: rgba(124, 255, 178, 0.08);
  border: 1px solid rgba(124, 255, 178, 0.18);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-team-section .team-card h3 {
  margin: 0;
  color: var(--text-main);
  font-size: clamp(19px, 1.8vw, 27px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.home-team-section .featured-team-card h3 {
  font-size: clamp(24px, 2.2vw, 34px);
}

.home-team-section .team-card p {
  width: 100%;
  max-width: 330px;
  margin: 16px auto 0;
  padding: 14px 15px;
  color: rgba(202, 216, 229, 0.92);
  background:
    linear-gradient(180deg, rgba(92, 200, 255, 0.055), rgba(124, 255, 178, 0.035)),
    rgba(5, 11, 20, 0.28);
  border: 1px solid rgba(92, 200, 255, 0.12);
  border-radius: 16px;
  text-align: left;
  font-size: 13.5px;
  line-height: 1.55;
}

@media (max-width: 1180px) {
  .home-team-section .featured-team-card,
  .home-team-section .team-card {
    grid-column: span 4;
  }
}

@media (max-width: 860px) {
  .home-team-section .featured-team-card,
  .home-team-section .team-card {
    grid-column: span 6;
  }
}

@media (max-width: 620px) {
  .home-team-section .featured-team-card,
  .home-team-section .team-card {
    grid-column: span 12;
  }

  .home-team-section .section-heading h2 {
    font-size: clamp(42px, 12vw, 64px);
  }
}

/* ACM-Lab Research page: structure-performance-application framework */
.research-lab-page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: clamp(64px, 7vw, 112px) clamp(22px, 5vw, 78px);
  color: var(--text-main);
  background-color: #050b14 !important;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(92, 200, 255, 0.14), transparent 32%),
    radial-gradient(circle at 78% 24%, rgba(124, 255, 178, 0.09), transparent 30%),
    radial-gradient(circle at 70% 92%, rgba(92, 200, 255, 0.1), transparent 38%),
    linear-gradient(135deg, #050b14 0%, #07111f 52%, #041014 100%) !important;
}

.research-lab-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(92, 200, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 200, 255, 0.034) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.72;
  animation: homeGridDrift 38s linear infinite;
}

.research-lab-page > * {
  position: relative;
  z-index: 1;
}

.research-hero {
  display: grid;
  grid-template-columns: minmax(430px, 1fr) minmax(480px, 0.95fr);
  gap: clamp(26px, 4vw, 58px);
  align-items: center;
  max-width: 1240px;
  margin: 0 auto clamp(64px, 8vw, 110px);
}

.research-hero-copy h2,
.research-section-heading h3 {
  margin: 0;
  color: var(--text-main);
  font-size: clamp(40px, 4.4vw, 72px);
  line-height: 1;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.research-lede,
.research-section-heading p,
.research-hero-copy .cn-copy {
  max-width: 820px;
  color: rgba(202, 216, 229, 0.88);
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.62;
}

.research-question-strip {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  padding: 15px 16px;
  max-width: 780px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(92, 200, 255, 0.16);
  border-radius: 16px;
  backdrop-filter: blur(18px);
}

.research-question-strip span {
  color: var(--accent-green);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.research-question-strip b {
  color: var(--text-main);
  line-height: 1.32;
}

.research-system-visual {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  border-radius: 26px;
  background:
    radial-gradient(circle at 35% 34%, rgba(92, 200, 255, 0.22), transparent 31%),
    radial-gradient(circle at 73% 58%, rgba(124, 255, 178, 0.15), transparent 34%),
    linear-gradient(rgba(92, 200, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 200, 255, 0.04) 1px, transparent 1px),
    rgba(7, 17, 31, 0.72);
  background-size: auto, auto, 34px 34px, 34px 34px, auto;
  border: 1px solid rgba(92, 200, 255, 0.24);
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(244, 248, 251, 0.08);
  backdrop-filter: blur(22px);
}

.research-hud {
  position: absolute;
  left: 26px;
  top: 24px;
  z-index: 3;
  display: grid;
  gap: 5px;
  padding: 13px 15px;
  background: rgba(5, 11, 20, 0.58);
  border: 1px solid rgba(92, 200, 255, 0.18);
  border-radius: 15px;
}

.research-hud span {
  color: var(--accent-green);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.research-hud strong {
  color: rgba(244, 248, 251, 0.82);
}

.research-lattice {
  position: absolute;
  left: 9%;
  top: 34%;
  width: 43%;
  height: 23%;
  transform: perspective(700px) rotateX(58deg) rotateZ(-12deg);
  animation: labelFloat 5.2s ease-in-out infinite;
}

.research-lattice i,
.research-lattice span {
  position: absolute;
  display: block;
}

.research-lattice i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 24px rgba(92, 200, 255, 0.66);
  animation: nodePulse 3.2s ease-in-out infinite;
}

.research-lattice i:nth-child(1) { left: 3%; top: 20%; }
.research-lattice i:nth-child(2) { left: 24%; top: 4%; animation-delay: 0.2s; }
.research-lattice i:nth-child(3) { left: 46%; top: 36%; animation-delay: 0.4s; }
.research-lattice i:nth-child(4) { left: 68%; top: 12%; animation-delay: 0.6s; }
.research-lattice i:nth-child(5) { left: 88%; top: 48%; animation-delay: 0.8s; }
.research-lattice i:nth-child(6) { left: 30%; top: 72%; animation-delay: 1s; }

.research-lattice span {
  left: 8%;
  top: 48%;
  width: 84%;
  height: 2px;
  background: linear-gradient(90deg, rgba(92, 200, 255, 0), rgba(92, 200, 255, 0.9), rgba(124, 255, 178, 0.6), rgba(92, 200, 255, 0));
  box-shadow: 0 0 18px rgba(92, 200, 255, 0.34);
}

.research-lattice span:nth-of-type(2) { transform: rotate(24deg); }
.research-lattice span:nth-of-type(3) { transform: rotate(-21deg); }
.research-lattice span:nth-of-type(4) { transform: rotate(48deg); }

.research-coating {
  position: absolute;
  left: 10%;
  top: 39%;
  width: 41%;
  height: 13%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(124, 255, 178, 0.08), rgba(124, 255, 178, 0.36), rgba(124, 255, 178, 0.12));
  filter: blur(8px);
  animation: coatingSweep 6s ease-in-out infinite;
}

.research-filter {
  position: absolute;
  right: 12%;
  top: 26%;
  width: 24%;
  height: 50%;
  border-radius: 26px;
  background:
    repeating-linear-gradient(90deg, rgba(124, 255, 178, 0.16) 0 9px, rgba(92, 200, 255, 0.08) 9px 17px),
    rgba(124, 255, 178, 0.08);
  border: 1px solid rgba(124, 255, 178, 0.38);
  box-shadow: 0 0 48px rgba(124, 255, 178, 0.12);
}

.research-filter span {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 20px rgba(124, 255, 178, 0.7);
  animation: adsorptionPulse 3s ease-in-out infinite;
}

.research-filter span:nth-child(1) { left: 24%; top: 22%; }
.research-filter span:nth-child(2) { left: 58%; top: 38%; animation-delay: 0.5s; }
.research-filter span:nth-child(3) { left: 38%; top: 62%; animation-delay: 1s; }
.research-filter span:nth-child(4) { left: 72%; top: 72%; animation-delay: 1.5s; }

.research-flow-particles em {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.58);
  animation: particleMove 5s linear infinite;
}

.research-flow-particles em:nth-child(2) { top: 36%; animation-delay: 0.8s; }
.research-flow-particles em:nth-child(3) { top: 56%; animation-delay: 1.6s; }
.research-flow-particles em:nth-child(4) { top: 48%; background: var(--accent-cyan); animation-delay: 2.4s; }
.research-flow-particles em:nth-child(5) { top: 66%; background: var(--accent-cyan); animation-delay: 3.2s; }
.research-flow-particles em:nth-child(6) { top: 30%; background: var(--accent-cyan); animation-delay: 4s; }

.research-section-block,
.research-program-card {
  max-width: 1240px;
  margin: 0 auto clamp(42px, 6vw, 78px);
}

.research-section-heading {
  max-width: 980px;
  margin-bottom: 24px;
}

.research-section-heading h3 {
  font-size: clamp(34px, 4.4vw, 64px);
}

.architecture-flow,
.matrix-grid,
.research-metric-grid,
.prototype-gallery,
.impact-grid,
.research-program-grid {
  display: grid;
  gap: 16px;
}

.architecture-flow {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.architecture-flow article,
.matrix-grid article,
.research-metric-grid article,
.prototype-gallery article,
.impact-grid article,
.research-program-card {
  background:
    radial-gradient(circle at 20% 0%, rgba(92, 200, 255, 0.1), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.032)),
    rgba(7, 17, 31, 0.76);
  border: 1px solid rgba(92, 200, 255, 0.18);
  border-radius: 22px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(244, 248, 251, 0.07);
  backdrop-filter: blur(20px);
}

.architecture-flow article {
  min-height: 190px;
  padding: 22px;
}

.architecture-flow span {
  display: inline-flex;
  margin-bottom: 16px;
  color: var(--accent-green);
  font-family: "JetBrains Mono", "SF Mono", monospace;
  font-weight: 900;
}

.architecture-flow b,
.research-metric-grid b,
.impact-grid b {
  display: block;
  color: var(--text-main);
  font-size: 20px;
  line-height: 1.15;
}

.architecture-flow p,
.matrix-grid li,
.prototype-gallery p,
.impact-grid p {
  color: rgba(155, 174, 194, 0.92);
  line-height: 1.5;
}

.research-program-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1240px;
  margin: 0 auto clamp(42px, 6vw, 78px);
}

.research-program-card {
  min-height: 430px;
  padding: clamp(24px, 3.2vw, 38px);
}

.research-program-card h3 {
  margin: 0 0 14px;
  color: var(--text-main);
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.program-focus-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0;
}

.program-focus-grid span {
  padding: 8px 10px;
  color: rgba(244, 248, 251, 0.86);
  background: rgba(92, 200, 255, 0.08);
  border: 1px solid rgba(92, 200, 255, 0.14);
  border-radius: 999px;
  font-weight: 850;
  font-size: 12px;
}

.research-problem {
  padding: 16px;
  background: rgba(5, 11, 20, 0.3);
  border: 1px solid rgba(124, 255, 178, 0.16);
  border-radius: 16px;
}

.research-problem b {
  color: var(--accent-green);
}

.research-problem p {
  margin: 8px 0 0;
  color: rgba(202, 216, 229, 0.9);
}

.matrix-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.matrix-grid article,
.prototype-gallery article,
.impact-grid article {
  padding: 22px;
}

.matrix-grid h4,
.prototype-gallery h4 {
  margin: 0 0 14px;
  color: var(--text-main);
  font-size: 23px;
}

.matrix-grid ul {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.matrix-grid b {
  color: var(--accent-cyan);
}

.research-metric-grid,
.prototype-gallery,
.impact-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.research-metric-grid article {
  min-height: 170px;
  padding: 22px;
}

.research-metric-grid span {
  display: block;
  margin-bottom: 14px;
  color: var(--accent-green);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gallery-icon {
  display: block;
  width: 100%;
  height: 82px;
  margin-bottom: 18px;
  border-radius: 16px;
  background:
    linear-gradient(rgba(92, 200, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 200, 255, 0.055) 1px, transparent 1px),
    radial-gradient(circle at 35% 45%, rgba(92, 200, 255, 0.22), transparent 32%),
    rgba(5, 11, 20, 0.34);
  background-size: 20px 20px, 20px 20px, auto, auto;
  border: 1px solid rgba(92, 200, 255, 0.14);
}

.impact-block {
  margin-bottom: 0;
}

@media (max-width: 1180px) {
  .research-hero,
  .research-program-grid {
    grid-template-columns: 1fr;
  }

  .architecture-flow,
  .research-metric-grid,
  .prototype-gallery,
  .impact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .architecture-flow,
  .matrix-grid,
  .research-metric-grid,
  .prototype-gallery,
  .impact-grid {
    grid-template-columns: 1fr;
  }

  .research-system-visual {
    min-height: 420px;
  }
}

/* ACM-Lab Experiments page: premium controlled timeline */
.experiments-lab-page {
  --exp-bg: #030812;
  --exp-bg-soft: #07111f;
  --exp-card: rgba(255, 255, 255, 0.055);
  --exp-border: rgba(120, 220, 255, 0.22);
  --cyan: #5cc8ff;
  --green: #7cffb2;
  --text-main: #f5faff;
  --text-muted: #a8b8c7;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: clamp(64px, 7vw, 112px) clamp(22px, 5vw, 78px);
  color: var(--text-main);
  background-color: #050b14 !important;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(92, 200, 255, 0.14), transparent 32%),
    radial-gradient(circle at 78% 24%, rgba(124, 255, 178, 0.1), transparent 30%),
    radial-gradient(circle at 72% 88%, rgba(92, 200, 255, 0.09), transparent 38%),
    linear-gradient(135deg, #050b14 0%, #07111f 52%, #041014 100%) !important;
}

.experiments-lab-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(92, 200, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 200, 255, 0.034) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.72;
  animation: homeGridDrift 38s linear infinite;
}

.experiments-lab-page::after {
  content: "";
  position: absolute;
  inset: auto 10% 0 22%;
  height: 28%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(92, 200, 255, 0.08), transparent 68%);
  filter: blur(28px);
}

.experiments-lab-page > * {
  position: relative;
  z-index: 1;
}

.experiments-hero {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(480px, 0.94fr);
  gap: clamp(28px, 4vw, 62px);
  align-items: center;
  max-width: 1240px;
  margin: 0 auto clamp(60px, 7vw, 96px);
}

.experiments-hero-copy h2,
.experiments-section-heading h3 {
  margin: 0;
  color: var(--text-main);
  font-size: clamp(42px, 5.2vw, 82px);
  line-height: 0.98;
  letter-spacing: -0.048em;
  text-wrap: balance;
}

.experiments-cn {
  margin: 16px 0 0;
  color: rgba(124, 255, 178, 0.9);
  font-weight: 900;
  font-size: clamp(18px, 1.6vw, 24px);
}

.experiments-lede,
.experiments-hero-copy .cn-copy,
.experiments-section-heading p {
  max-width: 820px;
  color: rgba(202, 216, 229, 0.88);
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.62;
}

.experiment-hero-tags,
.data-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 24px;
}

.experiment-hero-tags span,
.data-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 11px;
  color: rgba(245, 250, 255, 0.9);
  background: rgba(92, 200, 255, 0.08);
  border: 1px solid rgba(92, 200, 255, 0.18);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.lab-console-visual {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(circle at 32% 28%, rgba(92, 200, 255, 0.22), transparent 30%),
    radial-gradient(circle at 72% 62%, rgba(124, 255, 178, 0.16), transparent 32%),
    linear-gradient(rgba(92, 200, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 200, 255, 0.045) 1px, transparent 1px),
    rgba(7, 17, 31, 0.76);
  background-size: auto, auto, 32px 32px, 32px 32px, auto;
  border: 1px solid rgba(92, 200, 255, 0.24);
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(245, 250, 255, 0.08);
  backdrop-filter: blur(22px);
}

.printer-nozzle {
  position: absolute;
  top: 62px;
  left: 24%;
  width: 70px;
  height: 70px;
  border-radius: 16px 16px 26px 26px;
  background: linear-gradient(180deg, rgba(245, 250, 255, 0.14), rgba(92, 200, 255, 0.12));
  border: 1px solid rgba(92, 200, 255, 0.26);
  box-shadow: 0 0 40px rgba(92, 200, 255, 0.12);
  animation: printerTrace 6s ease-in-out infinite;
}

.printer-nozzle::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -28px;
  width: 14px;
  height: 34px;
  background: linear-gradient(180deg, var(--cyan), rgba(92, 200, 255, 0));
  border-radius: 999px;
  filter: blur(1px);
}

.printed-bridge {
  position: absolute;
  left: 10%;
  top: 43%;
  width: 48%;
  height: 22%;
  transform: perspective(760px) rotateX(56deg) rotateZ(-10deg);
  animation: labelFloat 5.8s ease-in-out infinite;
}

.printed-bridge i,
.printed-bridge .stress-flow {
  position: absolute;
  display: block;
}

.printed-bridge i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 24px rgba(92, 200, 255, 0.66);
  animation: nodePulse 3.2s ease-in-out infinite;
}

.printed-bridge i:nth-child(1) { left: 3%; top: 24%; }
.printed-bridge i:nth-child(2) { left: 21%; top: 4%; animation-delay: 0.2s; }
.printed-bridge i:nth-child(3) { left: 43%; top: 38%; animation-delay: 0.4s; }
.printed-bridge i:nth-child(4) { left: 66%; top: 12%; animation-delay: 0.6s; }
.printed-bridge i:nth-child(5) { left: 88%; top: 48%; animation-delay: 0.8s; }
.printed-bridge i:nth-child(6) { left: 30%; top: 76%; animation-delay: 1s; }

.printed-bridge .stress-flow {
  left: 7%;
  top: 49%;
  width: 86%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(92, 200, 255, 0.9), rgba(124, 255, 178, 0.7), transparent);
  box-shadow: 0 0 18px rgba(92, 200, 255, 0.36);
}

.printed-bridge .stress-flow.two {
  transform: rotate(25deg);
}

.printed-bridge .bio-coat {
  position: absolute;
  left: 6%;
  top: 35%;
  width: 88%;
  height: 34%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(124, 255, 178, 0.04), rgba(124, 255, 178, 0.34), rgba(124, 255, 178, 0.1));
  filter: blur(8px);
  animation: coatingSweep 6s ease-in-out infinite;
}

.filter-cartridge {
  position: absolute;
  right: 13%;
  top: 26%;
  width: 25%;
  height: 45%;
  border-radius: 26px;
  background:
    repeating-linear-gradient(90deg, rgba(124, 255, 178, 0.15) 0 9px, rgba(92, 200, 255, 0.08) 9px 17px),
    rgba(124, 255, 178, 0.07);
  border: 1px solid rgba(124, 255, 178, 0.38);
  box-shadow: 0 0 50px rgba(124, 255, 178, 0.13);
}

.filter-cartridge b {
  position: absolute;
  left: -150%;
  width: 260%;
  height: 2px;
  background: linear-gradient(90deg, rgba(92, 200, 255, 0), rgba(92, 200, 255, 0.52), rgba(92, 200, 255, 0));
  animation: flowLine 5s linear infinite;
}

.filter-cartridge b:nth-child(1) { top: 25%; }
.filter-cartridge b:nth-child(2) { top: 49%; animation-delay: 0.9s; }
.filter-cartridge b:nth-child(3) { top: 73%; animation-delay: 1.8s; }

.pollutant,
.clean {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 18px currentColor;
  animation: filterParticle 5.2s linear infinite;
}

.pollutant { color: #fbbf24; background: #fbbf24; left: -52%; }
.clean { color: var(--cyan); background: var(--cyan); left: 78%; opacity: 0.8; }
.p1 { top: 30%; }
.p2 { top: 48%; animation-delay: 1.1s; }
.p3 { top: 64%; animation-delay: 2.2s; }
.c1 { top: 38%; animation-delay: 1.4s; }
.c2 { top: 62%; animation-delay: 2.8s; }

.console-dashboard {
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: 38px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 16px;
  background: rgba(5, 11, 20, 0.52);
  border: 1px solid rgba(92, 200, 255, 0.18);
  border-radius: 18px;
}

.console-dashboard span {
  height: 52px;
  border-radius: 14px;
  background:
    linear-gradient(90deg, transparent, rgba(92, 200, 255, 0.22), transparent),
    repeating-linear-gradient(90deg, rgba(92, 200, 255, 0.3) 0 7px, transparent 7px 18px);
  opacity: 0.72;
  animation: dataSweep 4s linear infinite;
}

.floating-lab-labels span {
  position: absolute;
  padding: 7px 10px;
  color: rgba(245, 250, 255, 0.9);
  background: rgba(5, 11, 20, 0.52);
  border: 1px solid rgba(92, 200, 255, 0.18);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  animation: labelFloat 5s ease-in-out infinite;
}

.floating-lab-labels span:nth-child(1) { left: 9%; top: 19%; }
.floating-lab-labels span:nth-child(2) { left: 38%; top: 28%; animation-delay: 0.4s; }
.floating-lab-labels span:nth-child(3) { left: 16%; top: 68%; animation-delay: 0.8s; }
.floating-lab-labels span:nth-child(4) { right: 13%; top: 18%; animation-delay: 1.2s; }
.floating-lab-labels span:nth-child(5) { right: 10%; top: 74%; animation-delay: 1.6s; }
.floating-lab-labels span:nth-child(6) { left: 42%; bottom: 25%; animation-delay: 2s; }

.experiments-block {
  max-width: 1240px;
  margin: 0 auto clamp(48px, 6vw, 84px);
}

.experiments-section-heading {
  max-width: 980px;
  margin-bottom: 24px;
}

.experiments-section-heading h3 {
  font-size: clamp(34px, 4.4vw, 64px);
}

.workflow-chain {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 12px;
}

.workflow-chain::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, rgba(92, 200, 255, 0), rgba(92, 200, 255, 0.68), rgba(124, 255, 178, 0.58), rgba(92, 200, 255, 0));
  box-shadow: 0 0 22px rgba(92, 200, 255, 0.32);
}

.workflow-chain article,
.timeline-card-body,
.matrix-card,
.measurement-dashboard article {
  background:
    radial-gradient(circle at 20% 0%, rgba(92, 200, 255, 0.1), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.032)),
    rgba(7, 17, 31, 0.78);
  border: 1px solid rgba(92, 200, 255, 0.18);
  border-radius: 22px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(245, 250, 255, 0.07);
  backdrop-filter: blur(20px);
}

.workflow-chain article {
  position: relative;
  z-index: 1;
  min-height: 172px;
  padding: 20px;
}

.workflow-chain span {
  color: var(--green);
  font-family: "JetBrains Mono", "SF Mono", monospace;
  font-weight: 900;
}

.workflow-chain b,
.measurement-dashboard h4,
.matrix-card h4 {
  display: block;
  margin: 10px 0 8px;
  color: var(--text-main);
  font-size: 20px;
}

.workflow-chain small,
.measurement-dashboard p,
.matrix-table span,
.matrix-table em {
  color: rgba(168, 184, 199, 0.9);
  line-height: 1.5;
}

.experiment-timeline {
  position: relative;
  display: grid;
  gap: 26px;
  padding: 8px 0 8px 34px;
}

.experiment-timeline::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(92, 200, 255, 0), rgba(92, 200, 255, 0.82), rgba(124, 255, 178, 0.72), rgba(92, 200, 255, 0));
  box-shadow: 0 0 24px rgba(92, 200, 255, 0.38);
}

.experiment-timeline::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 22px rgba(124, 255, 178, 0.9);
  animation: timelineParticle 8s linear infinite;
}

.experiment-timeline-card {
  position: relative;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.timeline-node {
  position: sticky;
  top: 28px;
  display: grid;
  gap: 9px;
  padding-top: 4px;
}

.timeline-node::before {
  content: "";
  position: absolute;
  left: -40px;
  top: 13px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cyan);
  border: 3px solid rgba(5, 11, 20, 0.92);
  box-shadow: 0 0 25px rgba(92, 200, 255, 0.85);
}

.experiment-timeline-card.active .timeline-node::before {
  background: var(--green);
  box-shadow: 0 0 34px rgba(124, 255, 178, 0.96);
  animation: nodePulse 2.4s ease-in-out infinite;
}

.timeline-node span {
  color: var(--text-main);
  font-family: "JetBrains Mono", "SF Mono", monospace;
  font-size: 19px;
  font-weight: 950;
}

.timeline-node b {
  width: fit-content;
  padding: 7px 10px;
  color: rgba(5, 11, 20, 0.9);
  background: linear-gradient(135deg, rgba(92, 200, 255, 0.95), rgba(124, 255, 178, 0.9));
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.experiment-timeline-card.planned .timeline-node b {
  color: rgba(245, 250, 255, 0.78);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(92, 200, 255, 0.16);
}

.timeline-card-body {
  padding: clamp(20px, 2.5vw, 30px);
}

.experiment-timeline-card.active .timeline-card-body,
.experiment-timeline-card.next .timeline-card-body {
  border-color: rgba(124, 255, 178, 0.28);
  box-shadow: 0 26px 86px rgba(0, 0, 0, 0.35), 0 0 34px rgba(124, 255, 178, 0.08);
}

.timeline-card-body h4 {
  margin: 0 0 8px;
  color: var(--text-main);
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.timeline-card-body > strong {
  display: block;
  margin-bottom: 18px;
  color: rgba(124, 255, 178, 0.9);
  font-size: 18px;
}

.timeline-card-body p {
  margin: 10px 0;
  color: rgba(202, 216, 229, 0.9);
  line-height: 1.58;
}

.timeline-card-body p b {
  color: var(--cyan);
}

.timeline-card-body .cn-copy {
  color: rgba(168, 184, 199, 0.86);
}

.control-matrix-grid,
.measurement-dashboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.matrix-card,
.measurement-dashboard article {
  padding: clamp(20px, 2.4vw, 28px);
}

.matrix-table {
  display: grid;
  gap: 10px;
}

.matrix-table div {
  display: grid;
  grid-template-columns: 46px 1.1fr 1fr 0.9fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px;
  background: rgba(5, 11, 20, 0.38);
  border: 1px solid rgba(92, 200, 255, 0.12);
  border-radius: 14px;
}

.matrix-table b {
  color: var(--green);
  font-family: "JetBrains Mono", "SF Mono", monospace;
}

.matrix-table .optimized {
  border-color: rgba(124, 255, 178, 0.34);
  background: linear-gradient(90deg, rgba(124, 255, 178, 0.08), rgba(92, 200, 255, 0.05));
}

.measurement-dashboard {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.measurement-dashboard article > span {
  color: var(--green);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.measurement-dashboard b {
  display: inline-flex;
  margin-top: 16px;
  padding: 7px 10px;
  color: rgba(245, 250, 255, 0.78);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(92, 200, 255, 0.14);
  border-radius: 999px;
}

.mini-chart {
  display: flex;
  align-items: end;
  gap: 8px;
  height: 58px;
  margin: 16px 0;
}

.mini-chart i {
  flex: 1;
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(180deg, rgba(92, 200, 255, 0.88), rgba(92, 200, 255, 0.08));
}

.mini-chart.green i {
  background: linear-gradient(180deg, rgba(124, 255, 178, 0.86), rgba(124, 255, 178, 0.08));
}

.mini-chart i:nth-child(1) { height: 45%; }
.mini-chart i:nth-child(2) { height: 78%; }
.mini-chart i:nth-child(3) { height: 58%; }

/* Keep legacy Research dynamic cards readable when old content appears. */
.research-lab-page #researchCards[hidden] {
  display: none !important;
}

.research-lab-page .info-card,
.research-lab-page .future-panel,
.research-lab-page .experiment-card,
.research-lab-page .metric,
.research-lab-page .chart-panel {
  color: var(--text-main);
  background:
    radial-gradient(circle at 20% 0%, rgba(92, 200, 255, 0.1), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.032)),
    rgba(7, 17, 31, 0.78) !important;
  border: 1px solid rgba(92, 200, 255, 0.2) !important;
  border-radius: 22px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(245, 250, 255, 0.07);
  backdrop-filter: blur(20px);
}

.research-lab-page .info-card h3,
.research-lab-page .future-panel h3,
.research-lab-page .experiment-card h3,
.research-lab-page .metric strong {
  color: var(--text-main) !important;
}

.research-lab-page .info-card p,
.research-lab-page .future-panel p,
.research-lab-page .experiment-card p,
.research-lab-page .metric p {
  color: rgba(202, 216, 229, 0.9) !important;
}

@keyframes printerTrace {
  0%, 100% { transform: translateX(-20px); }
  50% { transform: translateX(130px); }
}

@keyframes flowLine {
  0% { transform: translateX(-12%); opacity: 0.25; }
  50% { opacity: 0.85; }
  100% { transform: translateX(28%); opacity: 0.25; }
}

@keyframes filterParticle {
  0% { transform: translateX(0); opacity: 0; }
  15% { opacity: 1; }
  63% { opacity: 1; }
  100% { transform: translateX(220px); opacity: 0; }
}

@keyframes dataSweep {
  0% { background-position: -80px 0, 0 0; }
  100% { background-position: 120px 0, 0 0; }
}

@keyframes timelineParticle {
  0% { transform: translateY(0); opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateY(1000px); opacity: 0; }
}

@media (max-width: 1180px) {
  .experiments-hero,
  .control-matrix-grid {
    grid-template-columns: 1fr;
  }

  .workflow-chain,
  .measurement-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .experiments-lab-page {
    padding-inline: 18px;
  }

  .lab-console-visual {
    min-height: 430px;
  }

  .workflow-chain,
  .measurement-dashboard {
    grid-template-columns: 1fr;
  }

  .workflow-chain::before {
    left: 28px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
  }

  .experiment-timeline-card {
    grid-template-columns: 1fr;
  }

  .timeline-node {
    position: relative;
    top: auto;
  }

  .timeline-node::before {
    left: -40px;
  }

  .matrix-table div {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   READABILITY — dark-theme colour guarantees
   ============================================================ */
.community-page .section-heading h2,
.community-page .section-heading p,
.moments-page .section-heading h2,
.moments-page .section-heading p,
.publish-page .section-heading h2,
.publish-page .section-heading p {
  color: var(--ink);
}

#feed .comment-form input,
#feed .post-card .comment-form input {
  color: var(--ink) !important;
  background: rgba(2, 8, 18, 0.84) !important;
  background-color: rgba(2, 8, 18, 0.84) !important;
  border-color: var(--line) !important;
}

/* ============================================================
   GROUP PHOTO PLACEHOLDER (Home page)
   ============================================================ */
.home-photo-section {
  background: transparent;
  border-bottom: 1px solid var(--line);
}

.group-photo-placeholder {
  display: grid;
  place-items: center;
  min-height: 340px;
  border: 2px dashed rgba(0, 200, 255, 0.18);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(0, 212, 255, 0.04), rgba(0, 255, 200, 0.03)),
    rgba(5, 14, 26, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.22s var(--ease);
}

.group-photo-placeholder:hover {
  border-color: rgba(0, 212, 255, 0.32);
}

.photo-placeholder-inner {
  display: grid;
  place-items: center;
  gap: 14px;
  text-align: center;
  padding: 40px;
  color: var(--muted);
}

.photo-placeholder-figure {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}

.photo-placeholder-figure span {
  width: 48px;
  height: 48px;
  background: var(--line);
  border-radius: 50%;
  border: 2px solid rgba(22, 143, 130, 0.2);
}

.photo-placeholder-label {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
}

.photo-placeholder-inner small {
  color: var(--muted);
  font-size: 14px;
}

/* ============================================================
   RESEARCH A/B/C/D BLOCKS
   ============================================================ */
.research-abcd-block {
  padding: 48px 32px;
  border-top: 1px solid rgba(0, 200, 255, 0.1);
  border-radius: 16px;
  margin-bottom: 16px;
  background: rgba(5, 13, 24, 0.55);
  transition: border-color 0.22s var(--ease);
}

.research-abcd-block:first-of-type {
  border-top: 1px solid rgba(0, 200, 255, 0.1);
}

.research-abcd-block:hover {
  border-color: rgba(0, 200, 255, 0.2);
}

.research-block-header {
  margin-bottom: 32px;
  padding-left: 18px;
  border-left: 3px solid currentColor;
}

.research-block-a .research-block-header { border-color: #00d4ff; }
.research-block-b .research-block-header { border-color: #5cc8ff; }
.research-block-c .research-block-header { border-color: #00ffcc; }
.research-block-d .research-block-header { border-color: #7cffb2; }

.research-block-header h3 {
  margin: 8px 0 6px;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.research-block-header > p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.research-block-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.research-block-a .research-block-label { color: #00d4ff; }
.research-block-b .research-block-label { color: #5cc8ff; }
.research-block-c .research-block-label { color: #00ffcc; }
.research-block-d .research-block-label { color: #7cffb2; }

.research-block-body {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  gap: 36px;
  align-items: start;
}

.research-block-image-placeholder {
  display: grid;
  place-items: center;
  min-height: 260px;
  background:
    radial-gradient(ellipse at 40% 30%, rgba(0, 212, 255, 0.07), transparent 55%),
    linear-gradient(145deg, rgba(0, 212, 255, 0.05), rgba(0, 255, 200, 0.03)),
    rgba(4, 12, 22, 0.8);
  border: 1px dashed rgba(0, 200, 255, 0.22);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

.research-block-image-placeholder:hover {
  border-color: rgba(0, 212, 255, 0.4);
  box-shadow: 0 0 32px rgba(0, 212, 255, 0.08);
}

.research-block-media {
  display: grid;
  gap: 12px;
  margin: 0;
  min-height: 260px;
  padding: 10px;
  background:
    radial-gradient(ellipse at 28% 16%, rgba(92, 200, 255, 0.16), transparent 46%),
    linear-gradient(145deg, rgba(8, 20, 36, 0.86), rgba(4, 12, 22, 0.92));
  border: 1px solid rgba(92, 200, 255, 0.24);
  border-radius: 16px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.34);
  overflow: hidden;
}

.research-block-media img {
  width: 100%;
  min-height: 245px;
  max-height: 420px;
  object-fit: cover;
  border-radius: 12px;
  filter: saturate(0.9) contrast(1.06);
}

.research-block-media figcaption {
  margin: 0;
  padding: 0 4px 4px;
  color: rgba(184, 224, 236, 0.78);
  font-size: 12px;
  line-height: 1.5;
}

.img-placeholder-inner {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 28px;
  text-align: center;
  color: var(--muted);
}

.img-placeholder-inner.small {
  padding: 18px;
  gap: 6px;
}

.img-placeholder-frame {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

.img-placeholder-frame i {
  width: 38px;
  height: 52px;
  background: var(--line);
  border-radius: 4px;
}

.img-placeholder-frame.coating-frame i {
  width: 52px;
  height: 38px;
  border-radius: 8px;
}

.img-placeholder-frame.bead-frame i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.img-placeholder-frame.filter-frame i {
  width: 44px;
  height: 60px;
  border-radius: 6px;
}

.img-placeholder-inner p {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.img-placeholder-inner small {
  font-size: 13px;
}

.research-block-detail {
  display: grid;
  gap: 22px;
}

.research-detail-row {
  display: grid;
  gap: 8px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.research-detail-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.research-detail-row > b {
  color: var(--ink);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.research-detail-row > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.research-var-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.research-var-grid span {
  padding: 5px 12px;
  background: rgba(0, 212, 255, 0.07);
  border: 1px solid rgba(0, 200, 255, 0.18);
  border-radius: 999px;
  color: rgba(180, 230, 255, 0.9);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.research-controls-list {
  margin: 0;
  padding: 0 0 0 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.research-controls-list li {
  display: flex;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(8, 20, 36, 0.65);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
  color: var(--muted);
}

.research-controls-list li b {
  color: var(--green);
  min-width: 24px;
}

/* ============================================================
   FAILURE PAGE
   ============================================================ */
.failure-lab-page {
  background: var(--paper);
}

.failure-hero {
  margin-bottom: 48px;
}

.failure-hero-copy {
  max-width: 760px;
}

.failure-lede {
  margin: 18px 0 0;
  font-size: clamp(16px, 1.5vw, 20px);
  color: var(--muted);
  line-height: 1.55;
}

.failure-timeline {
  display: grid;
  gap: 32px;
  margin-bottom: 48px;
}

.failure-card {
  background: rgba(6, 15, 27, 0.88);
  border: 1px solid rgba(0, 200, 255, 0.13);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

.failure-card:hover {
  border-color: rgba(220, 80, 60, 0.32);
  box-shadow: 0 16px 56px rgba(0, 0, 0, 0.6), 0 0 32px rgba(220, 80, 60, 0.08);
}

.failure-card-header {
  padding: 28px 28px 20px;
  border-bottom: 1px solid rgba(0, 200, 255, 0.1);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(255, 80, 60, 0.07), transparent 50%),
    rgba(6, 14, 26, 0.8);
}

.failure-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.failure-date {
  padding: 4px 12px;
  background: rgba(0, 212, 255, 0.1);
  color: #00d4ff;
  border: 1px solid rgba(0, 212, 255, 0.25);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-family: 'SF Mono', 'JetBrains Mono', monospace;
}

.failure-tag {
  padding: 4px 12px;
  background: rgba(255, 80, 60, 0.1);
  color: #ff7060;
  border: 1px solid rgba(255, 80, 60, 0.22);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.failure-card-header h3 {
  margin: 0 0 6px;
  color: var(--ink);
}

.failure-card-header strong {
  color: var(--muted);
  font-size: 14px;
}

.failure-image-placeholder {
  display: grid;
  place-items: center;
  min-height: 140px;
  background:
    linear-gradient(145deg, rgba(255, 80, 60, 0.06), rgba(0, 212, 255, 0.03)),
    rgba(5, 12, 22, 0.8);
  border-bottom: 1px solid rgba(0, 200, 255, 0.1);
}

.failure-body {
  padding: 24px 28px;
  display: grid;
  gap: 18px;
}

.failure-row {
  display: grid;
  gap: 6px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.failure-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.failure-row b {
  color: var(--ink);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.failure-row p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.failure-note {
  padding: 24px 28px;
  background: rgba(0, 212, 255, 0.04);
  border: 1px solid rgba(0, 212, 255, 0.14);
  border-radius: 12px;
}

.failure-note p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

/* ============================================================
   GAME ONBOARDING BANNERS
   ============================================================ */
.game-onboarding-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  padding: 32px 36px;
  margin-bottom: 32px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(24, 33, 31, 0.07);
}

.onboarding-intro {
  display: grid;
  gap: 12px;
}

.onboarding-intro h3 {
  margin: 0;
  color: var(--ink);
}

.onboarding-intro p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.onboarding-steps {
  margin: 0;
  padding: 0 0 0 20px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.onboarding-steps li {
  color: var(--muted);
  line-height: 1.5;
  font-size: 14px;
}

.onboarding-steps li b {
  color: var(--ink);
}

/* ============================================================
   TEAM CARD — See detail link
   ============================================================ */
.see-detail-link {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 12px;
  color: var(--green);
  background: rgba(22, 143, 130, 0.07);
  border: 1px solid rgba(22, 143, 130, 0.22);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.18s;
}

.see-detail-link:hover {
  background: rgba(22, 143, 130, 0.14);
}

/* ============================================================
   PUBLISH PAGE
   ============================================================ */
.publish-page {
  background: var(--paper);
}

.publish-page .section-heading {
  max-width: 820px;
}

.publish-page .publish-suite {
  margin-bottom: 28px;
}

.publish-page .publish-form {
  max-width: 820px;
}

/* ============================================================
   COMMUNITY / POST CARD POLISH
   ============================================================ */
.post-card h3 {
  margin: 0 0 4px;
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink);
}

.post-card p,
.moment-card p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.post-card h3 + p {
  margin-top: 4px;
}

.like-button,
.comment-like-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  color: var(--muted);
  background: rgba(0, 212, 255, 0.04);
  border: 1px solid rgba(0, 200, 255, 0.12);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s var(--ease);
}

.like-button:hover,
.comment-like-button:hover {
  color: var(--os-cyan);
  background: rgba(0, 212, 255, 0.08);
  border-color: rgba(0, 212, 255, 0.22);
}

.comment-form input {
  background: rgba(2, 8, 18, 0.85);
  border: 1px solid rgba(0, 200, 255, 0.14);
  color: var(--ink);
  border-radius: 8px;
}

.comment-form input:focus {
  border-color: rgba(0, 212, 255, 0.4);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.08);
}

/* ============================================================
   FRIENDS — SOCIAL GRID POLISH
   ============================================================ */
.social-card h3,
.chat-panel h3 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.people-list {
  display: grid;
  gap: 8px;
}

/* ============================================================
   CHAT — FULL POLISH
   ============================================================ */
.chat-form {
  gap: 8px;
}

.chat-form input:focus {
  border-color: rgba(0, 212, 255, 0.4);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.08);
}

.message-author {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.message-bubble p {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}

.message-row.mine .message-bubble p {
  color: #020b14;
}

/* ============================================================
   MOBILE RESPONSIVENESS — COMPREHENSIVE
   ============================================================ */

/* ── 1100px breakpoint ── */
@media (max-width: 1100px) {
  .research-block-body {
    grid-template-columns: 1fr;
  }

  .research-block-image-placeholder {
    min-height: 180px;
    order: -1;
  }

  .game-onboarding-banner {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .failure-timeline {
    gap: 24px;
  }
}

/* ── 860px breakpoint ── */
@media (max-width: 860px) {
  .research-abcd-block {
    padding: 32px 20px;
  }

  .research-block-header {
    padding-left: 14px;
  }

  .failure-card-header,
  .failure-body {
    padding: 20px 20px;
  }

  .social-grid {
    grid-template-columns: 1fr;
  }

  .chat-layout {
    grid-template-columns: 1fr;
  }
}

/* ── 640px breakpoint (mobile) ── */
@media (max-width: 640px) {
  /* Research blocks */
  .research-abcd-block {
    padding: 24px 16px;
    border-radius: 12px;
    margin-bottom: 12px;
  }

  .research-block-header {
    padding-left: 12px;
    margin-bottom: 20px;
  }

  .research-block-header h3 {
    font-size: 18px;
  }

  .research-block-body {
    gap: 20px;
  }

  .research-var-grid span {
    font-size: 11px;
    padding: 4px 9px;
  }

  .research-controls-list li {
    font-size: 13px;
    padding: 7px 10px;
  }

  /* Experiments */
  .experiment-timeline {
    padding-left: 0;
  }

  .experiment-timeline-card {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .timeline-node {
    position: relative;
    top: auto;
    flex-direction: row;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .timeline-node::before {
    display: none;
  }

  .timeline-node span {
    font-size: 15px;
  }

  .timeline-card-body {
    padding: 18px;
    border-radius: 14px;
  }

  .timeline-card-body h4 {
    font-size: 20px;
  }

  /* Failure log */
  .failure-card {
    border-radius: 12px;
  }

  .failure-card-header {
    padding: 18px 16px 14px;
  }

  .failure-body {
    padding: 16px;
    gap: 14px;
  }

  .failure-image-placeholder {
    min-height: 110px;
  }

  .failure-note {
    padding: 18px 16px;
  }

  /* Game onboarding */
  .game-onboarding-banner {
    padding: 20px;
  }

  .onboarding-steps {
    padding-left: 16px;
    gap: 8px;
  }

  .onboarding-steps li {
    font-size: 13px;
  }

  /* Community */
  .post-grid {
    grid-template-columns: 1fr;
  }

  .community-console,
  .publish-suite {
    grid-template-columns: 1fr;
  }

  .post-data {
    grid-template-columns: 1fr;
  }

  /* Friends / Chat / Social */
  .social-grid {
    grid-template-columns: 1fr;
  }

  .chat-layout {
    grid-template-columns: 1fr;
  }

  .chat-messages {
    max-height: 300px;
  }

  /* Settings form */
  .field-grid {
    grid-template-columns: 1fr;
  }

  /* General section spacing */
  .section {
    padding: clamp(36px, 6vw, 72px) clamp(16px, 4vw, 36px);
  }

  .section-heading {
    margin-bottom: 28px;
  }

  .section-heading > p:not(.eyebrow) {
    font-size: 15px;
  }

  /* Future panels grid */
  .future-dashboard-grid,
  .research-database-grid,
  .publish-suite,
  .community-console,
  .research-feed-strip,
  .game-intel-grid,
  .physics-feature-grid,
  .collab-grid,
  .chat-feature-grid,
  .settings-console,
  .verify-grid {
    grid-template-columns: 1fr;
  }

  /* Nav mobile tightening */
  .nav {
    gap: 2px;
  }

  .nav a {
    padding: 9px 12px;
    font-size: 13px;
  }

  /* Buttons */
  .button {
    min-height: 42px;
    padding: 0 16px;
    font-size: 13px;
  }
}

/* ── 400px breakpoint (small phones) ── */
@media (max-width: 400px) {
  .research-abcd-block {
    padding: 18px 12px;
  }

  .failure-card-header {
    padding: 14px 12px;
  }

  .failure-body {
    padding: 14px 12px;
  }

  .section {
    padding: 28px 14px;
  }
}

/* ============================================================
   TYPOGRAPHY SYSTEM — Premium Scientific Hierarchy
   ============================================================ */

/* Base prose improvements */
p {
  margin: 0 0 1em;
}

.research-lede,
.experiments-lede,
.failure-lede {
  max-width: 58ch;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.68;
  color: rgba(220, 236, 255, 0.82);
  letter-spacing: 0.005em;
}

.admissions-thesis {
  max-width: 52ch;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(230, 245, 255, 0.92);
}

.admissions-summary {
  max-width: 54ch;
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.7;
  color: rgba(200, 220, 240, 0.74);
}

.section-heading h2 {
  max-width: 820px;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.section-heading > p:not(.eyebrow) {
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
  margin-top: 10px;
}

/* Research block body prose */
.research-detail-row > p,
.failure-row p,
.onboarding-intro p {
  max-width: 62ch;
  line-height: 1.65;
}

/* Timeline card body prose */
.timeline-card-body p:not(.cn-copy) {
  max-width: 60ch;
  line-height: 1.6;
  font-size: 14px;
}

/* ============================================================
   TEXT REVEAL ANIMATIONS
   ============================================================ */

@keyframes acmFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes acmFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Hero copy — staggered reveal */
.admissions-home.active-app .admissions-copy .eyebrow {
  animation: acmFadeIn 0.4s 0.0s ease both;
}
.admissions-home.active-app .admissions-copy h1 {
  animation: acmFadeUp 0.55s 0.06s ease both;
}
.admissions-home.active-app .admissions-copy .brand-position {
  animation: acmFadeUp 0.5s 0.12s ease both;
}
.admissions-home.active-app .admissions-copy .admissions-thesis {
  animation: acmFadeUp 0.5s 0.18s ease both;
}
.admissions-home.active-app .admissions-copy .admissions-summary:not(.cn-copy) {
  animation: acmFadeUp 0.5s 0.24s ease both;
}
.admissions-home.active-app .admissions-copy .admissions-actions {
  animation: acmFadeUp 0.5s 0.30s ease both;
}

/* Section heading — reveal on activation */
.app-screen.active-app .section-heading .eyebrow {
  animation: acmFadeIn 0.35s ease both;
}
.app-screen.active-app .section-heading h2 {
  animation: acmFadeUp 0.5s 0.06s ease both;
}
.app-screen.active-app .section-heading > p:not(.eyebrow) {
  animation: acmFadeUp 0.5s 0.13s ease both;
}

/* Research blocks — stagger by block order */
.research-block-a { animation: acmFadeUp 0.5s 0.05s ease both; }
.research-block-b { animation: acmFadeUp 0.5s 0.12s ease both; }
.research-block-c { animation: acmFadeUp 0.5s 0.19s ease both; }
.research-block-d { animation: acmFadeUp 0.5s 0.26s ease both; }

/* Experiments: timeline cards stagger */
.app-screen.active-app .experiment-timeline-card:nth-child(1) { animation: acmFadeUp 0.45s 0.05s ease both; }
.app-screen.active-app .experiment-timeline-card:nth-child(2) { animation: acmFadeUp 0.45s 0.1s ease both; }
.app-screen.active-app .experiment-timeline-card:nth-child(3) { animation: acmFadeUp 0.45s 0.15s ease both; }
.app-screen.active-app .experiment-timeline-card:nth-child(4) { animation: acmFadeUp 0.45s 0.2s ease both; }
.app-screen.active-app .experiment-timeline-card:nth-child(5) { animation: acmFadeUp 0.45s 0.25s ease both; }

/* Failure cards stagger */
.app-screen.active-app .failure-card:nth-child(1) { animation: acmFadeUp 0.45s 0.05s ease both; }
.app-screen.active-app .failure-card:nth-child(2) { animation: acmFadeUp 0.45s 0.12s ease both; }
.app-screen.active-app .failure-card:nth-child(3) { animation: acmFadeUp 0.45s 0.19s ease both; }

/* Mission / framework cards stagger */
.app-screen.active-app .lab-glass-card:nth-child(1) { animation: acmFadeUp 0.45s 0.05s ease both; }
.app-screen.active-app .lab-glass-card:nth-child(2) { animation: acmFadeUp 0.45s 0.1s ease both; }
.app-screen.active-app .lab-glass-card:nth-child(3) { animation: acmFadeUp 0.45s 0.15s ease both; }
.app-screen.active-app .lab-glass-card:nth-child(4) { animation: acmFadeUp 0.45s 0.2s ease both; }
.app-screen.active-app .lab-glass-card:nth-child(5) { animation: acmFadeUp 0.45s 0.25s ease both; }

/* ============================================================
   HOVER MICRO-INTERACTIONS
   ============================================================ */

/* Eyebrow letter-spacing bloom */
.eyebrow {
  transition: letter-spacing 0.35s var(--ease), color 0.2s ease;
  will-change: letter-spacing;
}

/* Research block label expands on hover */
.research-abcd-block:hover .research-block-label {
  letter-spacing: 0.18em;
}

/* h3 subtle glow on hover */
h3 {
  transition: color 0.22s ease;
}
.lab-glass-card:hover h3,
.future-panel:hover h3,
.failure-card:hover .failure-card-header h3 {
  color: #e8f6ff;
}

/* Timeline card title glow */
.experiment-timeline-card:hover .timeline-card-body h4 {
  color: #e8f6ff;
}

/* Research question strip hover */
.research-question-strip {
  transition: border-color 0.22s ease, background 0.22s ease;
}
.research-question-strip:hover {
  background: rgba(0, 212, 255, 0.07);
  border-color: rgba(0, 212, 255, 0.28);
}

/* Tag chips hover */
.data-tags span {
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.data-tags span:hover {
  background: rgba(0, 212, 255, 0.14);
  border-color: rgba(0, 212, 255, 0.35);
  color: #e8f6ff;
}

.research-var-grid span {
  transition: background 0.18s ease, border-color 0.18s ease;
  cursor: default;
}
.research-var-grid span:hover {
  background: rgba(0, 212, 255, 0.12);
  border-color: rgba(0, 212, 255, 0.3);
}

/* ============================================================
   ACM-X MATERIALS LAB — PREMIUM SIMULATOR UPGRADE
   ============================================================ */

/* ── Hero ── */
.acmx-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.7fr);
  gap: 48px;
  align-items: center;
  padding: 40px 0 48px;
  border-bottom: 1px solid rgba(0, 200, 255, 0.1);
  margin-bottom: 48px;
}

.acmx-hero-copy .eyebrow {
  margin-bottom: 12px;
}

.acmx-hero-copy h2 {
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 16px;
}

.acmx-subtitle {
  margin: 0 0 12px;
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 500;
  line-height: 1.5;
  color: rgba(200, 228, 248, 0.86);
  letter-spacing: -0.005em;
  max-width: 50ch;
}

.acmx-desc {
  margin: 0 0 22px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(122, 172, 191, 0.72);
  max-width: 54ch;
}

.acmx-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.acmx-hero-tags span {
  padding: 5px 12px;
  background: rgba(0, 212, 255, 0.07);
  border: 1px solid rgba(0, 200, 255, 0.18);
  border-radius: 999px;
  color: rgba(180, 230, 255, 0.9);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ── Filter cross-section diagram ── */
.acmx-hero-diagram {
  background: rgba(4, 12, 24, 0.82);
  border: 1px solid rgba(0, 200, 255, 0.16);
  border-radius: 16px;
  padding: 20px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.acmx-diagram-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 200, 255, 0.1);
}

.acmx-diagram-header span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--os-cyan);
}

.acmx-diagram-header strong {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.acmx-filter-visual {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  gap: 8px;
  align-items: center;
  min-height: 200px;
}

/* Inflow / outflow particle streams */
.acmx-flow-in,
.acmx-flow-out {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  justify-content: center;
  height: 100%;
}

.acmx-flow-in em {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.8);
  animation: acmxParticleIn 2.4s linear infinite;
}

.acmx-flow-in em:nth-child(1) { animation-delay: 0s; }
.acmx-flow-in em:nth-child(2) { animation-delay: 0.48s; }
.acmx-flow-in em:nth-child(3) { animation-delay: 0.96s; }
.acmx-flow-in em:nth-child(4) { animation-delay: 1.44s; }
.acmx-flow-in em:nth-child(5) { animation-delay: 1.92s; }

.acmx-flow-out em {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--os-teal);
  box-shadow: 0 0 10px rgba(0, 255, 200, 0.7);
  animation: acmxParticleOut 2.4s linear infinite;
}

.acmx-flow-out em:nth-child(1) { animation-delay: 1.2s; }
.acmx-flow-out em:nth-child(2) { animation-delay: 2.2s; }
.acmx-flow-out em:nth-child(3) { animation-delay: 0.2s; }

@keyframes acmxParticleIn {
  0%   { transform: translateY(-24px); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(24px); opacity: 0; }
}

@keyframes acmxParticleOut {
  0%   { transform: translateY(-16px); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 0.9; }
  100% { transform: translateY(16px); opacity: 0; }
}

/* Filter body layers */
.acmx-filter-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.acmx-flayer {
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 6px;
  min-height: 34px;
  position: relative;
  overflow: hidden;
}

.acmx-flayer span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
}

.fl-lattice {
  background: rgba(0, 150, 255, 0.1);
  border: 1px solid rgba(0, 150, 255, 0.24);
}
.fl-lattice span { color: rgba(100, 180, 255, 0.9); }

.fl-coat {
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.2);
}
.fl-coat span { color: rgba(0, 212, 255, 0.9); }

.fl-core {
  background: rgba(0, 255, 200, 0.07);
  border: 1px solid rgba(0, 255, 200, 0.22);
  min-height: 56px;
  justify-content: space-between;
  padding: 10px 14px;
}
.fl-core span { color: rgba(0, 255, 200, 0.9); }

/* Adsorption sites */
.acmx-adsorb-sites {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  max-width: 80px;
  justify-content: flex-end;
}

.acmx-adsorb-sites i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0, 255, 200, 0.7);
  box-shadow: 0 0 6px rgba(0, 255, 200, 0.5);
  animation: acmxSitePulse 3s ease-in-out infinite;
}

.acmx-adsorb-sites i:nth-child(1) { animation-delay: 0s; }
.acmx-adsorb-sites i:nth-child(2) { animation-delay: 0.38s; }
.acmx-adsorb-sites i:nth-child(3) { animation-delay: 0.76s; }
.acmx-adsorb-sites i:nth-child(4) { animation-delay: 1.14s; }
.acmx-adsorb-sites i:nth-child(5) { animation-delay: 1.52s; }
.acmx-adsorb-sites i:nth-child(6) { animation-delay: 1.9s; }
.acmx-adsorb-sites i:nth-child(7) { animation-delay: 2.28s; }
.acmx-adsorb-sites i:nth-child(8) { animation-delay: 0.19s; }

@keyframes acmxSitePulse {
  0%, 100% { transform: scale(0.7); opacity: 0.45; }
  50%       { transform: scale(1.3); opacity: 1; }
}

/* Legend */
.acmx-diagram-legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 200, 255, 0.08);
}

.acmx-diagram-legend span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.leg-contam::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fbbf24;
  margin-right: 5px;
  vertical-align: middle;
}

.leg-clean::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--os-teal);
  margin-right: 5px;
  vertical-align: middle;
}

.leg-site::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(0, 255, 200, 0.7);
  margin-right: 5px;
  vertical-align: middle;
}

/* ── Workflow ── */
.acmx-workflow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 32px 0;
  margin-bottom: 40px;
  border-bottom: 1px solid rgba(0, 200, 255, 0.1);
}

.acmx-wf-step {
  background: rgba(5, 13, 24, 0.78);
  border: 1px solid rgba(0, 200, 255, 0.1);
  border-radius: 12px;
  padding: 22px 20px;
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
  position: relative;
  overflow: hidden;
}

.acmx-wf-step::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.3), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.acmx-wf-step:hover::before {
  opacity: 1;
}

.acmx-wf-step:hover {
  border-color: rgba(0, 212, 255, 0.24);
  transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.4), 0 0 28px rgba(0, 212, 255, 0.07);
}

.acmx-wf-num {
  display: block;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  color: var(--os-cyan);
  margin-bottom: 12px;
  font-family: 'SF Mono', 'JetBrains Mono', monospace;
  opacity: 0.65;
  letter-spacing: -0.02em;
}

.acmx-wf-step h4 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.acmx-wf-step p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(122, 172, 191, 0.75);
}

.acmx-wf-arrow {
  display: block;
  align-self: center;
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, rgba(0, 212, 255, 0.3), rgba(0, 212, 255, 0.6));
  position: relative;
  margin-top: 30px;
}

.acmx-wf-arrow::after {
  content: '';
  position: absolute;
  right: -5px;
  top: -4px;
  border: 5px solid transparent;
  border-left-color: rgba(0, 212, 255, 0.6);
}

/* ── Performance Metrics Dashboard ── */
.acmx-perf-bar {
  background: rgba(4, 12, 24, 0.85);
  border: 1px solid rgba(0, 200, 255, 0.14);
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 40px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
  transition: border-color 0.3s ease;
}

.acmx-perf-bar-active {
  border-color: rgba(0, 212, 255, 0.25);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 212, 255, 0.07);
}

.acmx-perf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
}

.acmx-perf-header .eyebrow {
  margin: 0;
}

.acmx-perf-status {
  font-size: 12px;
  font-weight: 600;
  color: rgba(122, 172, 191, 0.65);
  font-family: 'SF Mono', 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
}

.acmx-perf-bar-active .acmx-perf-status {
  color: var(--os-teal);
}

.acmx-metrics-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.acmx-metric {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  background: rgba(5, 14, 26, 0.7);
  border: 1px solid rgba(0, 200, 255, 0.09);
  border-radius: 10px;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  cursor: default;
}

.acmx-metric:hover {
  border-color: rgba(0, 212, 255, 0.22);
  background: rgba(0, 212, 255, 0.04);
  transform: translateY(-1px);
}

.acmx-metric-score {
  background: rgba(0, 212, 255, 0.05);
  border: 1px solid rgba(0, 212, 255, 0.14);
}

.acmx-metric-score:hover {
  border-color: rgba(0, 212, 255, 0.3);
  background: rgba(0, 212, 255, 0.08);
}

.acmx-metric-name {
  font-size: 10px;
  font-weight: 700;
  color: rgba(122, 172, 191, 0.72);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
}

.acmx-metric-val {
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 800;
  color: var(--ink);
  font-family: 'SF Mono', 'JetBrains Mono', monospace;
  letter-spacing: -0.02em;
  line-height: 1;
  transition: color 0.35s ease;
}

.acmx-perf-bar-active .acmx-metric-val {
  color: rgba(220, 245, 255, 0.95);
}

.acmx-perf-bar-active .acmx-metric-score .acmx-metric-val {
  color: var(--os-cyan);
  text-shadow: 0 0 20px rgba(0, 212, 255, 0.35);
}

.acmx-metric-track {
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
}

.acmx-metric-fill {
  height: 100%;
  border-radius: 999px;
  width: 0%;
  transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.acmx-fill-cyan  { background: linear-gradient(90deg, rgba(0, 212, 255, 0.6), #00d4ff); }
.acmx-fill-teal  { background: linear-gradient(90deg, rgba(0, 255, 200, 0.6), #00ffcc); }
.acmx-fill-green { background: linear-gradient(90deg, rgba(52, 211, 153, 0.6), #34d399); }
.acmx-fill-amber { background: linear-gradient(90deg, rgba(251, 191, 36, 0.6), #fbbf24); }

/* Section reveal animations */
.evolution-lab-section.active-app .acmx-hero       { animation: acmFadeUp 0.5s 0.00s ease both; }
.evolution-lab-section.active-app .acmx-workflow   { animation: acmFadeUp 0.5s 0.08s ease both; }
.evolution-lab-section.active-app .acmx-perf-bar   { animation: acmFadeUp 0.5s 0.14s ease both; }
.evolution-lab-section.active-app .evolution-lab-shell { animation: acmFadeUp 0.5s 0.20s ease both; }

/* Metric cards stagger in */
.evolution-lab-section.active-app .acmx-metric:nth-child(1) { animation: acmFadeUp 0.4s 0.22s ease both; }
.evolution-lab-section.active-app .acmx-metric:nth-child(2) { animation: acmFadeUp 0.4s 0.27s ease both; }
.evolution-lab-section.active-app .acmx-metric:nth-child(3) { animation: acmFadeUp 0.4s 0.32s ease both; }
.evolution-lab-section.active-app .acmx-metric:nth-child(4) { animation: acmFadeUp 0.4s 0.37s ease both; }
.evolution-lab-section.active-app .acmx-metric:nth-child(5) { animation: acmFadeUp 0.4s 0.42s ease both; }
.evolution-lab-section.active-app .acmx-metric:nth-child(6) { animation: acmFadeUp 0.4s 0.47s ease both; }

/* Workflow steps stagger */
.evolution-lab-section.active-app .acmx-wf-step:nth-child(1) { animation: acmFadeUp 0.4s 0.10s ease both; }
.evolution-lab-section.active-app .acmx-wf-step:nth-child(3) { animation: acmFadeUp 0.4s 0.16s ease both; }
.evolution-lab-section.active-app .acmx-wf-step:nth-child(5) { animation: acmFadeUp 0.4s 0.22s ease both; }
.evolution-lab-section.active-app .acmx-wf-step:nth-child(7) { animation: acmFadeUp 0.4s 0.28s ease both; }

/* Filter layer shimmer on hover */
.acmx-flayer {
  transition: background 0.22s ease, border-color 0.22s ease;
}
.acmx-flayer:hover {
  filter: brightness(1.15);
}

/* ── Mobile responsive ── */
@media (max-width: 1300px) {
  .acmx-metrics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .acmx-workflow {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .acmx-wf-arrow { display: none; }

  .evolution-lab-shell {
    grid-template-columns: 1fr;
  }

  .reactor-topbar {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (max-width: 900px) {
  .acmx-hero {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 24px 0 32px;
  }
  .acmx-hero-diagram {
    order: -1;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
  }
  .acmx-metrics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .acmx-hero {
    padding: 18px 0 24px;
    gap: 20px;
  }
  .acmx-hero-copy h2 {
    font-size: clamp(22px, 6vw, 28px);
  }
  .acmx-subtitle { font-size: 14px; }
  .acmx-desc { font-size: 13px; }

  .acmx-workflow {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 0;
    margin-bottom: 20px;
  }
  .acmx-wf-step { padding: 16px; }
  .acmx-wf-num { font-size: 20px; }

  .acmx-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .acmx-metric { padding: 12px; }
  .acmx-metric-val { font-size: 17px; }
  .acmx-metric-name { font-size: 9px; letter-spacing: 0.06em; }

  .acmx-perf-bar {
    padding: 16px 14px;
    margin-bottom: 20px;
  }
  .acmx-perf-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 14px;
  }

  .acmx-filter-visual {
    grid-template-columns: 22px 1fr 22px;
    min-height: 150px;
  }
  .acmx-flayer { min-height: 28px; padding: 0 10px; }
  .fl-core { min-height: 48px; }
  .acmx-flayer span { font-size: 10px; }

  .game-controls {
    gap: 6px;
  }
  .game-controls .button {
    min-height: 34px;
    padding: 0 10px;
    font-size: 11px;
  }
}

/* ============================================================
   SCIENTIST ADVICE PANEL — Structured Research Output
   ============================================================ */

/* Override the old ai-panel white bg in evolution context */
.evolution-lab-section .ai-panel {
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
}

.sci-section {
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 200, 255, 0.08);
}

.sci-section:last-of-type {
  border-bottom: none;
}

.sci-label {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--os-cyan);
  opacity: 0.8;
}

.sci-body {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(200, 225, 245, 0.78);
}

.sci-body:last-child { margin-bottom: 0; }

/* KPI row — 4 key numbers across the top */
.sci-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.sci-kpi-row span {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 6px;
  background: rgba(0, 212, 255, 0.05);
  border: 1px solid rgba(0, 200, 255, 0.12);
  border-radius: 8px;
  gap: 4px;
  text-align: center;
  transition: border-color 0.2s ease;
}

.sci-kpi-row span:hover {
  border-color: rgba(0, 212, 255, 0.22);
}

.sci-kpi-row b {
  display: block;
  font-size: 16px;
  font-weight: 800;
  font-family: 'SF Mono', 'JetBrains Mono', monospace;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
}

.sci-kpi-row em {
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.75;
}

/* Genome parameters grid */
.sci-genome-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.sci-genome-grid span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: rgba(5, 14, 24, 0.6);
  border: 1px solid rgba(0, 200, 255, 0.08);
  border-radius: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(122, 172, 191, 0.7);
}

.sci-genome-grid b {
  display: block;
  font-size: 13px;
  font-weight: 800;
  font-family: 'SF Mono', 'JetBrains Mono', monospace;
  color: rgba(210, 238, 255, 0.9);
  letter-spacing: -0.01em;
  text-transform: none;
}

/* Improvement bullet list */
.sci-improve-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.sci-improve-list li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 9px 12px;
  background: rgba(0, 212, 255, 0.04);
  border: 1px solid rgba(0, 200, 255, 0.1);
  border-left: 2px solid rgba(0, 212, 255, 0.35);
  border-radius: 0 6px 6px 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(180, 215, 240, 0.82);
  transition: border-left-color 0.2s ease, background 0.2s ease;
}

.sci-improve-list li:hover {
  border-left-color: rgba(0, 212, 255, 0.7);
  background: rgba(0, 212, 255, 0.07);
}

/* Positive / strong-design note */
.sci-positive {
  background: rgba(0, 255, 200, 0.04);
  border: 1px solid rgba(0, 255, 200, 0.12);
  border-radius: 6px;
  padding: 10px 14px !important;
}

.sci-positive .sci-body {
  color: rgba(0, 255, 200, 0.82);
  font-size: 12px;
}

/* Caption / disclaimer */
.sci-caption {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.55;
  color: rgba(122, 172, 191, 0.45);
  padding-top: 10px;
  border-top: 1px solid rgba(0, 200, 255, 0.06);
}

/* Responsive: collapse KPI + genome to 2-col on narrow panels */
@media (max-width: 480px) {
  .sci-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .sci-genome-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   BRIDGE CONSTRUCTOR LAB  v2 — standalone section styles
   All bl-* prefixed — zero collision with existing CSS
   ============================================================ */

/* ── Section base ── */
.bl-section {
  background: #020c18;
}

/* ── Hero ── */
.bl-hero {
  margin-bottom: 18px;
}

.bl-hero h2 {
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -0.02em;
  margin: 8px 0 12px;
  color: var(--ink);
}

.bl-hero-sub {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 66ch;
  margin: 0;
}

/* ── Quick guide strip ── */
.bl-guide-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: rgba(0,212,255,0.04);
  border: 1px solid rgba(0,200,255,0.12);
  border-radius: 10px;
}

.bl-guide-strip span {
  font-size: 12px;
  color: rgba(180,225,248,0.7);
}

.bl-guide-strip b {
  color: var(--os-cyan);
}

/* ── Shell layout ── */
.bl-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 220px;
  gap: 16px;
  align-items: start;
  margin-bottom: 14px;
}

/* ── Panels ── */
.bl-panel {
  display: grid;
  gap: 14px;
}

.bl-panel-block {
  background: rgba(5,13,24,0.82);
  border: 1px solid rgba(0,200,255,0.11);
  border-radius: 12px;
  padding: 14px 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.bl-panel-label {
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--os-cyan);
  opacity: 0.8;
}

/* ── Option buttons (materials, coatings) ── */
.bl-option-list {
  display: grid;
  gap: 6px;
}

.bl-opt {
  display: grid;
  grid-template-columns: 10px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  background: rgba(3,9,18,0.7);
  border: 1px solid rgba(0,200,255,0.1);
  border-radius: 7px;
  color: rgba(200,230,248,0.8);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}

.bl-opt:hover {
  border-color: rgba(0,212,255,0.25);
  background: rgba(0,212,255,0.05);
}

.bl-opt-active {
  border-color: rgba(0,212,255,0.38) !important;
  background: rgba(0,212,255,0.08) !important;
  color: #d4f0ff;
}

.bl-opt em {
  grid-column: 2;
  font-style: normal;
  font-size: 10px;
  color: rgba(122,172,191,0.65);
  letter-spacing: 0.02em;
  margin-top: 1px;
}

.bl-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Coating buttons (no dot) */
.bl-opt[data-bl-coat] {
  grid-template-columns: minmax(0,1fr);
}

.bl-opt[data-bl-coat] em {
  grid-column: 1;
}

/* ── Slider fields ── */
.bl-range-field {
  display: grid;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(200,230,248,0.85);
  margin-bottom: 6px;
}

.bl-range-field:last-child { margin-bottom: 0; }

.bl-range-field span {
  color: var(--os-cyan);
  font-family: 'SF Mono','JetBrains Mono',monospace;
  font-size: 11px;
  float: right;
}

.bl-range-field input[type="range"] {
  width: 100%;
  accent-color: #00d4ff;
  height: 3px;
  cursor: pointer;
}

/* ── Canvas ── */
.bl-canvas-wrap {
  position: relative;
  border: 1px solid rgba(0,200,255,0.18);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 48px rgba(0,0,0,0.55), 0 0 40px rgba(0,212,255,0.06);
}

#bridgeCanvas {
  display: block;
  width: 100%;
  height: auto;
  cursor: crosshair;
}

.bl-canvas-hint {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  background: rgba(3,9,18,0.72);
  border: 1px solid rgba(0,212,255,0.2);
  border-radius: 999px;
  color: rgba(0,212,255,0.8);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  pointer-events: none;
  white-space: nowrap;
}

/* ── Stats grid ── */
.bl-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.bl-stat {
  display: grid;
  gap: 3px;
  padding: 10px;
  background: rgba(3,9,18,0.6);
  border: 1px solid rgba(0,200,255,0.08);
  border-radius: 7px;
}

.bl-stat span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(122,172,191,0.65);
}

.bl-stat b {
  font-size: 15px;
  font-weight: 800;
  font-family: 'SF Mono','JetBrains Mono',monospace;
  color: rgba(210,240,255,0.92);
  letter-spacing: -0.02em;
}

/* ── Testing indicator ── */
.bl-testing-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--os-teal);
  font-size: 13px;
  font-weight: 600;
}

.bl-testing-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--os-teal);
  box-shadow: 0 0 12px rgba(0,255,200,0.6);
  animation: blPulse 1s ease-in-out infinite;
}

@keyframes blPulse {
  0%,100% { opacity: 0.5; transform: scale(0.8); }
  50%     { opacity: 1;   transform: scale(1.2); }
}

/* ── Result panel ── */
.bl-result-badge {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
  text-align: center;
}

.bl-pass {
  background: rgba(0,255,200,0.08);
  border: 1px solid rgba(0,255,200,0.28);
  color: rgba(0,255,200,0.9);
}

.bl-fail {
  background: rgba(255,60,60,0.08);
  border: 1px solid rgba(255,60,60,0.28);
  color: rgba(255,120,100,0.9);
}

.bl-result-grid {
  display: grid;
  gap: 5px;
  margin-bottom: 10px;
}

.bl-rrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 8px;
  background: rgba(3,9,18,0.5);
  border-radius: 5px;
  font-size: 11px;
}

.bl-rrow span { color: rgba(122,172,191,0.7); }
.bl-rrow b { font-family: 'SF Mono','JetBrains Mono',monospace; color: rgba(210,240,255,0.9); font-size: 12px; }

.bl-final-score {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: rgba(0,212,255,0.05);
  border: 1px solid rgba(0,212,255,0.15);
  border-radius: 8px;
  margin: 10px 0 6px;
}

.bl-final-score span { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.bl-final-score b { font-size: 20px; font-weight: 900; font-family: 'SF Mono','JetBrains Mono',monospace; letter-spacing: -0.02em; }
.bl-score-good { color: var(--os-teal); text-shadow: 0 0 18px rgba(0,255,200,0.4); }
.bl-score-ok   { color: #fbbf24; }
.bl-score-bad  { color: #ff6060; }

/* ── Stress legend ── */
.bl-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  padding: 8px 12px;
  background: rgba(3,9,18,0.5);
  border: 1px solid rgba(0,200,255,0.08);
  border-radius: 8px;
  margin-top: 4px;
}

.bl-leg-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(180,220,240,0.65);
  font-weight: 600;
}

.bl-leg-item i {
  display: block;
  width: 22px;
  height: 3px;
  border-radius: 2px;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .bl-shell { grid-template-columns: 190px minmax(0,1fr) 190px; gap: 12px; }
}

@media (max-width: 860px) {
  .bl-shell { grid-template-columns: 1fr; }
  .bl-panel { grid-template-columns: 1fr 1fr; }
  .bl-panel-block { padding: 12px; }
}

@media (max-width: 580px) {
  .bl-panel { grid-template-columns: 1fr; }
  .bl-metric-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Hero ── */
.bl-hero { margin-bottom: 14px; }
.bl-hero h2 { font-size: clamp(22px, 2.8vw, 34px); letter-spacing: -0.022em; margin: 8px 0 10px; color: var(--ink); }
.bl-hero-sub { font-size: 14px; line-height: 1.65; color: var(--muted); max-width: 70ch; margin: 0; }

/* ── Workflow pipeline ── */
.bl-workflow-bar {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 18px;
  padding: 10px 16px;
  background: rgba(3, 10, 22, 0.7);
  border: 1px solid rgba(0, 200, 255, 0.1);
  border-radius: 10px;
  overflow-x: auto;
}
.bl-wf-step {
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(122, 172, 191, 0.5);
  white-space: nowrap;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}
.bl-wf-step.bl-wf-active {
  color: var(--os-cyan);
  background: rgba(0, 212, 255, 0.08);
}
.bl-wf-arrow {
  display: block;
  width: 20px;
  height: 1px;
  background: rgba(0, 200, 255, 0.2);
  flex-shrink: 0;
}

/* ── Shell grid ── */
.bl-shell {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 210px;
  gap: 14px;
  align-items: start;
  margin-bottom: 12px;
}
.bl-panel { display: grid; gap: 12px; }

/* ── Panel blocks (glassmorphism) ── */
.bl-panel-block {
  background: rgba(4, 12, 24, 0.86);
  border: 1px solid rgba(0, 200, 255, 0.1);
  border-radius: 12px;
  padding: 14px 15px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color 0.2s;
}
.bl-panel-block:hover { border-color: rgba(0, 200, 255, 0.16); }
.bl-panel-label {
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--os-cyan);
  opacity: 0.78;
}

/* ── Tool row ── */
.bl-tool-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.bl-tool-btn {
  padding: 7px 4px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  color: rgba(180, 220, 248, 0.7);
  background: rgba(3, 9, 18, 0.7);
  border: 1px solid rgba(0, 200, 255, 0.1);
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.18s var(--ease);
  text-align: center;
}
.bl-tool-btn:hover { border-color: rgba(0, 212, 255, 0.26); color: #c0e8ff; }
.bl-tool-active {
  color: #d4f4ff !important;
  background: rgba(0, 212, 255, 0.1) !important;
  border-color: rgba(0, 212, 255, 0.35) !important;
  box-shadow: 0 0 14px rgba(0, 212, 255, 0.1);
}
.bl-tool-hint {
  font-size: 11px;
  line-height: 1.5;
  color: rgba(122, 172, 191, 0.6);
  margin: 0;
  min-height: 32px;
}

/* ── Option buttons ── */
.bl-option-list { display: grid; gap: 5px; }
.bl-opt {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  background: rgba(3, 9, 18, 0.72);
  border: 1px solid rgba(0, 200, 255, 0.09);
  border-radius: 7px;
  color: rgba(190, 225, 248, 0.82);
  font: inherit; font-size: 12px; font-weight: 600;
  text-align: left; cursor: pointer;
  transition: border-color 0.16s, background 0.16s;
}
.bl-opt:hover { border-color: rgba(0, 212, 255, 0.24); background: rgba(0, 212, 255, 0.05); }
.bl-opt-active {
  border-color: rgba(0, 212, 255, 0.40) !important;
  background: rgba(0, 212, 255, 0.09) !important;
  color: #d4f0ff;
}
.bl-opt em {
  grid-column: 2; font-style: normal; font-size: 10px;
  color: rgba(122, 172, 191, 0.58); letter-spacing: 0.01em; margin-top: 1px;
}
.bl-opt[data-bl-coat] { grid-template-columns: minmax(0, 1fr); }
.bl-opt[data-bl-coat] em { grid-column: 1; }
.bl-dot { display: block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.bl-opt > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ── Sliders ── */
.bl-range-field {
  display: grid; gap: 5px;
  font-size: 12px; font-weight: 600;
  color: rgba(200, 230, 248, 0.88);
  margin-bottom: 6px;
}
.bl-range-field:last-child { margin-bottom: 0; }
.bl-range-field span {
  color: var(--os-cyan);
  font-family: 'SF Mono', 'JetBrains Mono', monospace; font-size: 11px; float: right;
}
.bl-range-field input[type="range"] { width: 100%; accent-color: #00d4ff; cursor: pointer; }
.bl-route-label {
  margin-top: 12px;
  margin-bottom: 7px;
}
.bl-route-standard {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(124,255,178,0.28);
  background: linear-gradient(135deg, rgba(92,200,255,0.12), rgba(124,255,178,0.09));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 24px rgba(92,200,255,0.08);
}
.bl-route-standard strong {
  color: rgba(230,255,248,0.94);
  font-size: 12px;
  font-weight: 900;
}
.bl-route-standard em {
  font-style: normal;
  font-size: 9px;
  color: rgba(160, 210, 225, 0.54);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* ── Canvas ── */
.bl-canvas-wrap {
  position: relative;
  border: 1px solid rgba(0, 200, 255, 0.2);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 52px rgba(0, 0, 0, 0.6), 0 0 44px rgba(0, 212, 255, 0.07);
  background: #020c18;
}
#bridgeCanvas { display: block; width: 100%; height: auto; cursor: crosshair; }
.bl-canvas-hint {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  padding: 6px 14px;
  background: rgba(2, 8, 18, 0.78);
  border: 1px solid rgba(0, 212, 255, 0.22); border-radius: 999px;
  color: rgba(0, 212, 255, 0.82); font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  pointer-events: none; white-space: nowrap;
  transition: opacity 0.4s;
}

/* ── Beam tooltip ── */
.bl-beam-tooltip {
  position: absolute;
  padding: 8px 12px;
  background: rgba(2, 8, 18, 0.92);
  border: 1px solid rgba(0, 200, 255, 0.24);
  border-radius: 8px;
  font-size: 11px; line-height: 1.6;
  color: rgba(190, 225, 248, 0.9);
  pointer-events: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  z-index: 10;
}
.bl-beam-tooltip b { color: var(--os-cyan); display: block; margin-bottom: 3px; font-size: 12px; }

/* ── Metrics ── */
.bl-metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.bl-metric {
  display: grid; gap: 3px;
  padding: 9px 10px;
  background: rgba(3, 9, 18, 0.65);
  border: 1px solid rgba(0, 200, 255, 0.08);
  border-radius: 7px;
  transition: border-color 0.2s;
}
.bl-metric:hover { border-color: rgba(0, 200, 255, 0.16); }
.bl-metric-wide { grid-column: 1 / -1; }
.bl-metric span {
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(122, 172, 191, 0.65);
}
.bl-metric b {
  font-size: 15px; font-weight: 800;
  font-family: 'SF Mono', 'JetBrains Mono', monospace;
  color: rgba(210, 240, 255, 0.95); letter-spacing: -0.02em;
  transition: color 0.35s ease;
}
@keyframes blFlash {
  0%   { color: #00ffcc; }
  100% { color: rgba(210,240,255,0.95); }
}
.bl-metric-flash { animation: blFlash 0.55s ease both; }
/* Stress bar inside metric */
.bl-stress-bar-track {
  height: 3px; background: rgba(255,255,255,0.06); border-radius: 999px; overflow: hidden; margin-top: 3px;
}
.bl-stress-bar-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, #00d4ff, #fbbf24, #ff4444);
  transition: width 0.5s ease, background 0.5s ease;
}

/* ── Testing indicator ── */
.bl-testing-indicator {
  display: flex; align-items: center; gap: 8px;
  color: var(--os-teal); font-size: 13px; font-weight: 600;
}
.bl-testing-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--os-teal);
  box-shadow: 0 0 12px rgba(0,255,200,0.6);
  animation: blPulse 0.9s ease-in-out infinite;
}
@keyframes blPulse {
  0%,100% { opacity: 0.45; transform: scale(0.75); }
  50%     { opacity: 1;    transform: scale(1.25); }
}

/* ── Result panel ── */
.bl-result-badge {
  padding: 9px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 700; margin-bottom: 10px; text-align: center;
}
.bl-pass {
  background: rgba(0, 255, 200, 0.07);
  border: 1px solid rgba(0, 255, 200, 0.26); color: rgba(0,255,200,0.9);
}
.bl-fail {
  background: rgba(255, 60, 60, 0.07);
  border: 1px solid rgba(255, 60, 60, 0.26); color: rgba(255,120,100,0.95);
}
.bl-result-grid { display: grid; gap: 4px; margin-bottom: 10px; }
.bl-rrow {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 8px; background: rgba(3,9,18,0.55); border-radius: 5px; font-size: 11px;
}
.bl-rrow span { color: rgba(122,172,191,0.68); }
.bl-rrow b { font-family: 'SF Mono','JetBrains Mono',monospace; color: rgba(210,240,255,0.9); font-size: 12px; }
.bl-suggestion {
  margin: 8px 0 0;
  padding: 8px 12px;
  background: rgba(0,212,255,0.04);
  border: 1px solid rgba(0,212,255,0.12);
  border-left: 2px solid rgba(0,212,255,0.4);
  border-radius: 0 6px 6px 0;
  font-size: 11px; line-height: 1.55; color: rgba(180,220,248,0.75);
}
.bl-final-score {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px;
  background: rgba(0,212,255,0.05);
  border: 1px solid rgba(0,212,255,0.14);
  border-radius: 8px; margin: 10px 0 6px;
}
.bl-final-score span { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.bl-final-score b { font-size: 19px; font-weight: 900; font-family: 'SF Mono','JetBrains Mono',monospace; letter-spacing: -0.02em; }
.bl-score-good { color: var(--os-teal); text-shadow: 0 0 18px rgba(0,255,200,0.4); }
.bl-score-ok   { color: #fbbf24; }
.bl-score-bad  { color: #ff6060; }

/* ── Canvas column (wraps canvas + status bar) ── */
.bl-canvas-col {
  display: grid;
  gap: 0;
  min-width: 0;
}

/* ── Status bar ── */
.bl-status-bar {
  padding: 8px 14px;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(140, 190, 220, 0.6);
  background: rgba(2, 8, 18, 0.55);
  border: 1px solid rgba(0, 200, 255, 0.08);
  border-top: none;
  border-radius: 0 0 10px 10px;
  min-height: 34px;
  transition: color 0.2s;
}

/* ── Score breakdown table ── */
.bl-rrow-head {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0, 200, 255, 0.55);
  margin: 10px 0 4px;
  padding-left: 2px;
}
.bl-score-table {
  display: grid;
  gap: 3px;
  margin-bottom: 6px;
}
.bl-score-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 36px 36px 28px;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(3,9,18,0.5);
  border-radius: 5px;
  font-size: 11px;
}
.bl-score-row span { color: rgba(160,210,240,0.7); font-size:10px; }
.bl-score-row span:nth-child(2) { color: rgba(122,172,191,0.5); font-size:9px; text-align:right; }
.bl-score-row b { font-family: 'SF Mono','JetBrains Mono',monospace; color: rgba(210,240,255,0.9); text-align:right; }
.bl-score-row em { font-style:normal; font-family:'SF Mono','JetBrains Mono',monospace; color: var(--os-cyan); text-align:right; font-size:11px; font-weight:700; }

/* ── Result grid small-text ── */
.bl-result-grid small {
  display: block;
  font-size: 9px;
  color: rgba(255,100,80,0.7);
  margin-top: 1px;
  font-family: 'SF Mono','JetBrains Mono',monospace;
}

/* ── Legend ── */
.bl-legend {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 5px 16px; padding: 8px 12px;
  background: rgba(3,9,18,0.55);
  border: 1px solid rgba(0,200,255,0.08); border-radius: 8px; margin-top: 4px;
}
.bl-leg-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(180,220,240,0.6); font-weight: 600; }
.bl-leg-item i { display: block; width: 22px; height: 3px; border-radius: 2px; }
.bl-leg-sep { width: 1px; height: 14px; background: rgba(0,200,255,0.1); margin: 0 2px; }
.bl-leg-hint { font-weight: 400; font-size: 11px; color: rgba(122,172,191,0.5); }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .bl-shell { grid-template-columns: 185px minmax(0,1fr) 185px; gap: 12px; }
}
@media (max-width: 860px) {
  .bl-shell { grid-template-columns: 1fr; }
  .bl-panel { grid-template-columns: 1fr 1fr; }
  .bl-panel-block { padding: 11px 13px; }
  .bl-tool-row { grid-template-columns: repeat(3,1fr); }
  /* 2-col material grid on tablet */
  .bl-option-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 580px) {
  .bl-shell { gap: 8px; }
  .bl-panel { grid-template-columns: 1fr; }
  .bl-panel-block { padding: 10px 11px; }
  .bl-panel-label { margin-bottom: 7px; font-size: 9.5px; }
  .bl-option-list { grid-template-columns: 1fr 1fr; gap: 4px; }
  .bl-opt { padding: 6px 8px; gap: 6px; font-size: 11px; border-radius: 6px; }
  .bl-opt em { font-size: 9px; }
  .bl-metric-grid { grid-template-columns: repeat(2,1fr); gap: 5px; }
  .bl-metric { padding: 7px 8px; }
  .bl-metric b { font-size: 13px; }
  .bl-metric span { font-size: 8.5px; }
  .bl-tool-row { gap: 4px; }
  .bl-tool-btn { font-size: 10px; padding: 6px 3px; }
  .bl-result-grid { gap: 3px; }
  .bl-rrow { padding: 4px 6px; font-size: 10px; }
  .bl-rrow b { font-size: 11px; }
  .bl-workflow-bar { padding: 7px 8px; gap: 0; }
  .bl-wf-step { padding: 3px 7px; font-size: 9.5px; }
  .bl-wf-arrow { width: 10px; }
  .bl-final-score { padding: 8px 10px; }
  .bl-final-score b { font-size: 18px; }
}

/* ── Polish overrides ── */

/* Wider canvas by trimming panels slightly */
.bl-shell {
  grid-template-columns: 200px minmax(0, 1fr) 200px;
}

/* Tighter panel blocks */
.bl-panel-block {
  padding: 12px 14px;
}
.bl-panel {
  gap: 10px;
}

/* Compact material / coating options */
.bl-opt {
  padding: 7px 10px;
  gap: 7px;
  font-size: 11.5px;
  line-height: 1.3;
}
.bl-opt em {
  font-size: 9.5px;
  margin-top: 0;
}

/* Coating buttons: name left, bonus right on one line */
.bl-opt[data-bl-coat] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
}
.bl-opt[data-bl-coat] em {
  font-size: 9.5px;
  flex-shrink: 0;
  margin-left: 6px;
}

/* Tighter result rows */
.bl-rrow {
  padding: 5px 8px;
  font-size: 11px;
}
.bl-result-grid {
  gap: 4px;
}

/* Metric values: sharper monospace */
.bl-metric b {
  font-size: 14px;
  letter-spacing: -0.025em;
}
.bl-metric span {
  font-size: 9px;
}
.bl-metric-grid {
  gap: 6px;
}

/* Hero: tighter */
.bl-hero {
  margin-bottom: 10px;
}
.bl-workflow-bar {
  margin-bottom: 14px;
}

/* Canvas wrap: extra border glow */
.bl-canvas-wrap {
  border-radius: 10px 10px 0 0;
  border-bottom: none;
  box-shadow:
    0 0 0 1px rgba(0,200,255,0.14),
    0 12px 56px rgba(0,0,0,0.65),
    0 0 60px rgba(0,212,255,0.06);
}

/* Legend: tighter */
.bl-legend {
  gap: 4px 14px;
  padding: 6px 10px;
  margin-top: 6px;
}

/* ============================================================
   COMPOSITE GENOME PROJECT — scoped cg-* styles
   ============================================================ */
.cg-section {
  background: #020b14;
  min-height: 100vh;
}

/* ── Hero ── */
.cg-hero {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(300px,0.7fr);
  gap: 48px;
  align-items: start;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(0,200,255,0.1);
  margin-bottom: 28px;
}
.cg-hero-copy h2 {
  font-size: clamp(22px, 2.8vw, 36px);
  letter-spacing: -0.025em;
  font-weight: 800;
  margin: 8px 0 14px;
  color: var(--ink);
  line-height: 1.1;
}
.cg-hero-desc {
  font-size: 14px;
  line-height: 1.68;
  color: var(--muted);
  max-width: 56ch;
  margin: 0 0 22px;
}
.cg-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cg-hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.cg-metric-card {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  background: rgba(5,14,26,0.82);
  border: 1px solid rgba(0,200,255,0.12);
  border-radius: 10px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color 0.2s, transform 0.2s;
}
.cg-metric-card:hover {
  border-color: rgba(0,212,255,0.26);
  transform: translateY(-1px);
}
.cg-metric-card b {
  font-size: 22px;
  font-weight: 900;
  font-family: 'SF Mono','JetBrains Mono',monospace;
  color: var(--os-cyan);
  letter-spacing: -0.02em;
  line-height: 1;
}
.cg-metric-card span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Tabs ── */
.cg-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 20px;
  padding: 6px;
  background: rgba(3,9,18,0.65);
  border: 1px solid rgba(0,200,255,0.1);
  border-radius: 10px;
}
.cg-tab {
  padding: 7px 16px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(140,190,220,0.65);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.18s var(--ease);
}
.cg-tab:hover { color: var(--os-cyan); background: rgba(0,212,255,0.05); }
.cg-tab-active {
  color: #d4f0ff !important;
  background: rgba(0,212,255,0.1) !important;
  border-color: rgba(0,212,255,0.28) !important;
}

/* ── Panel container ── */
.cg-panel { display: block; }
.cg-panel[hidden] { display: none !important; }
.cg-panel-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.cg-panel-sub {
  font-size: 13px;
  color: rgba(122,172,191,0.65);
  margin: 0 0 16px;
  line-height: 1.6;
  max-width: 72ch;
}
.cg-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--os-cyan);
  opacity: 0.75;
  margin: 0 0 14px;
  display: block;
}

/* ── Database panel ── */
.cg-db-layout {
  display: grid;
  grid-template-columns: 220px minmax(0,1fr);
  gap: 20px;
  align-items: start;
}
.cg-filters {
  background: rgba(4,12,24,0.85);
  border: 1px solid rgba(0,200,255,0.1);
  border-radius: 12px;
  padding: 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: sticky;
  top: 20px;
}
.cg-filter-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--os-cyan);
  opacity: 0.8;
  margin: 0 0 10px;
}
.cg-filter-row {
  display: grid;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(190,225,248,0.82);
  margin-bottom: 14px;
  letter-spacing: 0.01em;
}
.cg-filter-row input[type="range"] { width:100%; accent-color:#00d4ff; cursor:pointer; }
.cg-filter-row select, .cg-filter-row select option {
  background: rgba(3,9,18,0.9);
  color: var(--ink);
  border: 1px solid rgba(0,200,255,0.18);
  border-radius: 6px;
  padding: 6px 8px;
  font: inherit;
  font-size: 11px;
  width: 100%;
}
.cg-cards-count {
  font-size: 11px;
  color: var(--muted);
  margin: 0 0 12px;
}
.cg-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
/* ── Material card polish ── */
.cg-mat-card {
  background: rgba(5,14,26,0.88);
  border: 1px solid rgba(0,200,255,0.1);
  border-radius: 14px;
  padding: 20px;
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
  cursor: default;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.cg-mat-card:hover {
  border-color: rgba(0,212,255,0.3);
  transform: translateY(-2px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.45), 0 0 28px rgba(0,212,255,0.08);
}
.cg-mat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.cg-mat-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 10px currentColor;
}
.cg-mat-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.cg-mat-family {
  font-size: 10px;
  font-weight: 600;
  color: rgba(122,172,191,0.55);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 14px;
  padding-left: 20px;
}
.cg-mat-bars { display: grid; gap: 7px; margin-bottom: 14px; }
.cg-bar-row {
  display: grid;
  grid-template-columns: 68px minmax(0,1fr) 30px;
  align-items: center;
  gap: 8px;
}
.cg-bar-label {
  font-size: 9px;
  font-weight: 700;
  color: rgba(140,190,220,0.55);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cg-bar-track {
  height: 5px;
  background: rgba(255,255,255,0.07);
  border-radius: 999px;
  overflow: hidden;
}
.cg-bar-fill  { height: 100%; border-radius: 999px; transition: width 0.55s cubic-bezier(.34,1.56,.64,1); }
.cg-bar-val   {
  font-size: 11px;
  font-weight: 800;
  font-family: 'SF Mono','JetBrains Mono',monospace;
  color: rgba(210,240,255,0.9);
  text-align: right;
  letter-spacing: -0.01em;
}
.cg-mat-use {
  font-size: 11px;
  line-height: 1.55;
  color: rgba(122,172,191,0.65);
  margin-bottom: 10px;
}
.cg-mat-tags  { display: flex; flex-wrap: wrap; gap: 5px; }
.cg-mat-tag   {
  padding: 3px 8px;
  background: rgba(0,212,255,0.06);
  border: 1px solid rgba(0,200,255,0.14);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(140,210,240,0.72);
  text-transform: lowercase;
}
.cg-best-match-wrap {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,200,255,0.09);
}
.cg-best-match {
  padding: 12px 14px;
  background: rgba(0,212,255,0.04);
  border: 1px solid rgba(0,212,255,0.16);
  border-radius: 9px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
}
.cg-best-match b { display:block; color: var(--os-cyan); font-size:13px; margin-bottom:4px; font-weight:700; }
.cg-best-match b { display: block; color: var(--os-cyan); font-size: 12px; margin-bottom: 3px; }

/* ── Comparison panel ── */
.cg-compare-header { margin-bottom: 20px; }
.cg-compare-selectors { display: flex; align-items: center; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.cg-field { display: grid; gap: 4px; font-size: 11px; font-weight: 600; color: var(--muted); }
.cg-field select { background: rgba(3,9,18,0.9); color: var(--ink); border: 1px solid rgba(0,200,255,0.18); border-radius: 6px; padding: 6px 10px; font: inherit; font-size: 12px; min-width: 180px; }
.cg-vs { font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 18px; }
.cg-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.cg-compare-col {
  background: rgba(5,14,26,0.85);
  border: 1px solid rgba(0,200,255,0.1);
  border-radius: 14px;
  padding: 22px 24px;
}
.cg-compare-col h4 {
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0,200,255,0.09);
}
.cg-compare-radar-wrap {
  background: rgba(5,14,26,0.85);
  border: 1px solid rgba(0,200,255,0.1);
  border-radius: 14px;
  padding: 22px;
  margin-top: 2px;
}
.cg-compare-radar-wrap > .cg-panel-sub { margin-bottom: 0; }
.cg-radar-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
  min-height: 280px;
}

/* ── Recommender panel ── */
.cg-rec-layout { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 20px; align-items: start; }
.cg-goal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 16px; }
.cg-goal-btn { padding: 8px 10px; font: inherit; font-size: 11px; font-weight: 700; color: rgba(140,190,220,0.7); background: rgba(3,9,18,0.7); border: 1px solid rgba(0,200,255,0.1); border-radius: 7px; cursor: pointer; transition: all 0.18s; text-align: center; }
.cg-goal-btn:hover { border-color: rgba(0,212,255,0.24); background: rgba(0,212,255,0.05); }
.cg-goal-active { color: #d4f0ff !important; background: rgba(0,212,255,0.1) !important; border-color: rgba(0,212,255,0.3) !important; }
.cg-rec-result {
  background: rgba(5,14,26,0.85);
  border: 1px solid rgba(0,200,255,0.1);
  border-radius: 14px;
  padding: 26px 28px;
  min-height: 320px;
}
.cg-rec-recommended {
  border-color: rgba(0,212,255,0.26);
  box-shadow: 0 0 40px rgba(0,212,255,0.06);
}
.cg-rec-mat-name {
  font-size: 26px;
  font-weight: 800;
  color: var(--os-cyan);
  margin: 0 0 6px;
  letter-spacing: -0.025em;
  line-height: 1;
}
.cg-rec-score {
  font-size: 11px;
  color: rgba(122,172,191,0.6);
  margin-bottom: 18px;
  font-family: 'SF Mono','JetBrains Mono',monospace;
  letter-spacing: 0.02em;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0,200,255,0.09);
}
.cg-rec-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,200,255,0.08);
}
.cg-rec-section:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.cg-rec-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--os-cyan);
  opacity: 0.65;
  margin-bottom: 6px;
  display: block;
}
.cg-rec-text {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(190,225,248,0.82);
  margin: 0;
}
.cg-ranking-list {
  display: grid;
  gap: 5px;
  margin-top: 14px;
}
.cg-rank-row {
  display: grid;
  grid-template-columns: 22px minmax(0,1fr) 52px;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background: rgba(3,9,18,0.55);
  border: 1px solid rgba(0,200,255,0.07);
  border-radius: 7px;
  font-size: 11px;
  transition: background 0.18s, border-color 0.18s;
}
.cg-rank-row:hover {
  background: rgba(0,212,255,0.04);
  border-color: rgba(0,212,255,0.14);
}
.cg-rank-row:first-child {
  background: rgba(0,212,255,0.07);
  border-color: rgba(0,212,255,0.18);
}
.cg-rank-row span:first-child { color: rgba(122,172,191,0.55); font-size: 10px; font-weight: 700; font-family:'SF Mono',monospace; }
.cg-rank-row span:nth-child(2) { color: rgba(210,240,255,0.88); font-weight: 600; font-size: 12px; }
.cg-rank-row b { font-family: 'SF Mono','JetBrains Mono',monospace; color: var(--os-teal); font-size: 11px; text-align: right; font-weight: 800; }

/* ── Digital Twin panel ── */
.cg-twin-layout { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 24px; align-items: start; }
.cg-twin-inputs { background: rgba(4,12,24,0.85); border: 1px solid rgba(0,200,255,0.1); border-radius: 12px; padding: 18px; }
.cg-twin-outputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cg-output-card {
  display: grid;
  gap: 9px;
  padding: 18px 20px;
  background: rgba(5,14,26,0.85);
  border: 1px solid rgba(0,200,255,0.1);
  border-radius: 12px;
  transition: border-color 0.22s, transform 0.22s;
}
.cg-output-card:hover {
  border-color: rgba(0,212,255,0.24);
  transform: translateY(-1px);
}
.cg-output-label { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(122,172,191,0.65); }
.cg-output-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(122,172,191,0.6);
}
.cg-output-val {
  font-size: 26px;
  font-weight: 800;
  font-family: 'SF Mono','JetBrains Mono',monospace;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1;
  transition: color 0.35s;
}
.cg-output-track { height: 4px; background: rgba(255,255,255,0.06); border-radius: 999px; overflow: hidden; }
.cg-output-fill { height: 100%; border-radius: 999px; transition: width 0.6s cubic-bezier(.34,1.56,.64,1); }
.cg-output-note { font-size: 10px; color: rgba(122,172,191,0.55); line-height: 1.4; }

/* ── Insights panel ── */
.cg-insights-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 32px; }
.cg-insight-card { background: rgba(5,14,26,0.85); border: 1px solid rgba(0,200,255,0.1); border-radius: 12px; padding: 20px; transition: border-color 0.2s, transform 0.2s; }
.cg-insight-card:hover { border-color: rgba(0,212,255,0.24); transform: translateY(-2px); }
.cg-insight-num { font-size: 28px; font-weight: 900; font-family: 'SF Mono','JetBrains Mono',monospace; color: var(--os-cyan); opacity: 0.55; display: block; margin-bottom: 8px; line-height: 1; }
.cg-insight-card h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; line-height: 1.3; }
.cg-insight-card p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted); }

/* ── Sustainability Matrix ── */
.cg-sus-matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 640px; }
.cg-sus-cell { background: rgba(5,14,26,0.8); border: 1px solid rgba(0,200,255,0.1); border-radius: 10px; padding: 14px 16px; }
.cg-sus-cell-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.cg-sus-mat-list { display: grid; gap: 3px; }
.cg-sus-mat-item { font-size: 11px; color: rgba(180,220,248,0.8); display: flex; align-items: center; gap: 6px; }
.cg-sus-mat-item::before { content:''; display:block; width:6px; height:6px; border-radius:50%; flex-shrink:0; }

/* ── Section reveal animation ── */
.cg-section.active-app .cg-hero       { animation: acmFadeUp 0.5s 0.0s ease both; }
.cg-section.active-app .cg-tabs       { animation: acmFadeUp 0.5s 0.07s ease both; }
.cg-section.active-app .cg-panel      { animation: acmFadeUp 0.5s 0.12s ease both; }
.cg-section.active-app .cg-metric-card:nth-child(1) { animation: acmFadeUp 0.4s 0.1s ease both; }
.cg-section.active-app .cg-metric-card:nth-child(2) { animation: acmFadeUp 0.4s 0.16s ease both; }
.cg-section.active-app .cg-metric-card:nth-child(3) { animation: acmFadeUp 0.4s 0.22s ease both; }
.cg-section.active-app .cg-metric-card:nth-child(4) { animation: acmFadeUp 0.4s 0.28s ease both; }
.cg-section.active-app .cg-metric-card:nth-child(5) { animation: acmFadeUp 0.4s 0.34s ease both; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .cg-hero    { grid-template-columns: 1fr; gap: 28px; }
  .cg-hero-metrics { grid-template-columns: repeat(3,1fr); order: -1; }
  .cg-db-layout { grid-template-columns: 1fr; }
  .cg-filters { position: static; }
  .cg-rec-layout, .cg-twin-layout { grid-template-columns: 1fr; }
  .cg-twin-outputs { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 720px) {
  .cg-compare-grid { grid-template-columns: 1fr; }
  .cg-hero-metrics { grid-template-columns: repeat(2,1fr); }
  .cg-twin-outputs { grid-template-columns: repeat(2,1fr); }
  .cg-goal-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .cg-tabs { flex-direction: column; gap: 3px; }
  .cg-hero-metrics { grid-template-columns: 1fr 1fr; }
  .cg-cards-grid { grid-template-columns: 1fr; }
  .cg-twin-outputs { grid-template-columns: 1fr; }
  .cg-sus-matrix { grid-template-columns: 1fr; }
  .cg-compare-selectors { flex-direction: column; gap: 8px; }
}


/* ============================================================
   RESEARCH INTELLIGENCE CENTER — scoped ri-* styles
   ============================================================ */
.ri-section { background: #020b14; min-height: 100vh; }

/* Hero */
.ri-hero {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(280px,0.65fr);
  gap: 44px; align-items: start;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(0,200,255,.1);
  margin-bottom: 24px;
}
.ri-hero-copy h2 { font-size: clamp(22px,2.6vw,34px); letter-spacing:-0.022em; font-weight:800; margin:8px 0 12px; color:var(--ink); line-height:1.1; }
.ri-hero-desc { font-size:14px; line-height:1.68; color:var(--muted); max-width:56ch; margin:0 0 10px; }
.ri-proto-label { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(0,212,255,.45); margin:0; }

/* Hero metrics */
.ri-metrics-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.ri-metric { display:grid; gap:4px; padding:14px 16px; background:rgba(5,14,26,.85); border:1px solid rgba(0,200,255,.11); border-radius:10px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:border-color .2s,transform .2s; }
.ri-metric:hover { border-color:rgba(0,212,255,.26); transform:translateY(-1px); }
.ri-metric b { font-size:22px; font-weight:900; font-family:'SF Mono','JetBrains Mono',monospace; color:var(--os-cyan); letter-spacing:-.02em; line-height:1; }
.ri-metric span { font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }

/* Tabs */
.ri-tabs { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:20px; padding:6px; background:rgba(3,9,18,.65); border:1px solid rgba(0,200,255,.1); border-radius:10px; }
.ri-tab { padding:7px 14px; font:inherit; font-size:11.5px; font-weight:700; letter-spacing:.02em; color:rgba(140,190,220,.62); background:transparent; border:1px solid transparent; border-radius:7px; cursor:pointer; transition:all .18s var(--ease); }
.ri-tab:hover { color:var(--os-cyan); background:rgba(0,212,255,.05); }
.ri-tab-active { color:#d4f0ff !important; background:rgba(0,212,255,.1) !important; border-color:rgba(0,212,255,.28) !important; }

/* Panel */
.ri-panel { display:block; }
.ri-panel[hidden] { display:none !important; }
.ri-panel-hd { margin-bottom:14px; }
.ri-panel-title { font-size:15px; font-weight:700; color:var(--ink); margin:0 0 6px; letter-spacing:-.015em; }
.ri-panel-sub { font-size:13px; color:rgba(122,172,191,.65); margin:0 0 16px; line-height:1.6; max-width:72ch; }

/* Filter bar */
.ri-filter-bar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:16px; }
.ri-select { background:rgba(3,9,18,.88); color:var(--ink); border:1px solid rgba(0,200,255,.18); border-radius:7px; padding:7px 12px; font:inherit; font-size:12px; cursor:pointer; transition:border-color .18s; }
.ri-select:focus { outline:none; border-color:rgba(0,212,255,.4); }
.ri-record-count { font-size:11px; color:rgba(122,172,191,.55); margin-left:auto; font-family:'SF Mono','JetBrains Mono',monospace; }

/* Dataset grid */
.ri-dataset-grid { display:grid; gap:10px; }
.ri-record { display:grid; grid-template-columns:80px 90px minmax(130px,1fr) minmax(120px,1fr) 90px 80px 110px auto; gap:12px; align-items:center; padding:12px 16px; background:rgba(5,14,26,.85); border:1px solid rgba(0,200,255,.09); border-radius:10px; font-size:12px; transition:border-color .2s,background .2s; }
.ri-record:hover { border-color:rgba(0,212,255,.22); background:rgba(0,212,255,.03); }
.ri-record-id { font-family:'SF Mono','JetBrains Mono',monospace; font-weight:800; font-size:11px; color:var(--os-cyan); letter-spacing:.04em; }
.ri-record-mat { font-weight:600; color:rgba(200,230,248,.88); }
.ri-record-var { color:rgba(160,210,235,.7); font-size:11px; }
.ri-record-res { font-family:'SF Mono','JetBrains Mono',monospace; font-weight:800; color:rgba(0,255,200,.9); font-size:12px; }
.ri-record-proj { font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:rgba(122,172,191,.6); }
.ri-badge { display:inline-flex; align-items:center; padding:3px 9px; border-radius:999px; font-size:10px; font-weight:700; letter-spacing:.04em; white-space:nowrap; }
.ri-badge-completed { background:rgba(0,255,200,.08); border:1px solid rgba(0,255,200,.22); color:rgba(0,255,200,.9); }
.ri-badge-progress  { background:rgba(0,212,255,.08); border:1px solid rgba(0,212,255,.22); color:rgba(0,212,255,.9); }
.ri-badge-failed    { background:rgba(255,60,60,.08);  border:1px solid rgba(255,60,60,.22);  color:rgba(255,100,80,.9); }
.ri-badge-validate  { background:rgba(251,191,36,.08); border:1px solid rgba(251,191,36,.22); color:rgba(251,191,36,.9); }
.ri-record-insight { font-size:11px; color:rgba(122,172,191,.6); font-style:italic; }

/* Charts */
.ri-charts-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.ri-chart-card { background:rgba(5,14,26,.85); border:1px solid rgba(0,200,255,.1); border-radius:14px; padding:20px 22px; }
.ri-chart-title { font-size:12px; font-weight:700; color:var(--ink); margin:0 0 16px; letter-spacing:-.01em; }
.ri-bar-chart-wrap { display:grid; gap:8px; }
.ri-chart-bar-row { display:grid; grid-template-columns:minmax(140px,.6fr) minmax(0,1fr) 44px; align-items:center; gap:10px; }
.ri-chart-bar-label { font-size:11px; font-weight:600; color:rgba(190,225,248,.8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ri-chart-track { height:6px; background:rgba(255,255,255,.07); border-radius:999px; overflow:hidden; }
.ri-chart-fill { height:100%; border-radius:999px; transition:width .7s cubic-bezier(.34,1.56,.64,1); }
.ri-chart-val { font-size:11px; font-weight:800; font-family:'SF Mono','JetBrains Mono',monospace; color:rgba(210,240,255,.9); text-align:right; }

/* Donut chart (SVG) */
.ri-donut-wrap { display:flex; justify-content:center; }

/* Insight card */
.ri-insight-card { display:flex; gap:14px; align-items:flex-start; padding:16px 18px; background:rgba(0,212,255,.04); border:1px solid rgba(0,212,255,.14); border-radius:12px; }
.ri-insight-icon { font-size:18px; flex-shrink:0; margin-top:1px; }
.ri-insight-card b { display:block; font-size:12px; font-weight:700; color:var(--os-cyan); margin-bottom:5px; letter-spacing:.01em; }
.ri-insight-card p { margin:0; font-size:12px; line-height:1.65; color:rgba(180,220,248,.78); }

/* Cost-performance matrix */
.ri-matrix-layout { display:grid; grid-template-columns:1fr 280px; gap:20px; align-items:start; margin-bottom:16px; }
.ri-cp-matrix { position:relative; background:rgba(5,14,26,.85); border:1px solid rgba(0,200,255,.1); border-radius:14px; overflow:hidden; min-height:340px; }
.ri-matrix-legend { display:grid; gap:8px; }
.ri-legend-item { display:flex; align-items:center; gap:10px; padding:10px 12px; background:rgba(5,14,26,.85); border:1px solid rgba(0,200,255,.09); border-radius:8px; font-size:12px; color:rgba(190,225,248,.85); }
.ri-legend-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* Failure grid */
.ri-failure-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; }
.ri-fail-card { background:rgba(5,14,26,.88); border:1px solid rgba(255,80,60,.14); border-radius:14px; overflow:hidden; }
.ri-fail-header { padding:14px 18px; background:rgba(255,60,40,.06); border-bottom:1px solid rgba(255,80,60,.1); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ri-fail-id { font-family:'SF Mono','JetBrains Mono',monospace; font-size:12px; font-weight:800; color:rgba(255,100,80,.9); letter-spacing:.04em; }
.ri-fail-proj { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(122,172,191,.55); }
.ri-fail-body { padding:14px 18px; display:grid; gap:10px; }
.ri-fail-row { display:grid; gap:3px; }
.ri-fail-label { font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(0,200,255,.55); }
.ri-fail-val { font-size:12px; line-height:1.5; color:rgba(190,225,248,.82); }
.ri-fail-correction { background:rgba(0,255,200,.04); border:1px solid rgba(0,255,200,.12); border-radius:6px; padding:8px 10px; font-size:11px; line-height:1.55; color:rgba(0,255,200,.8); }

/* Timeline */
.ri-timeline { position:relative; padding-left:32px; display:grid; gap:0; }
.ri-timeline::before { content:''; position:absolute; left:10px; top:12px; bottom:12px; width:2px; background:rgba(0,200,255,.15); border-radius:999px; }
.ri-timeline-node { position:relative; padding:0 0 28px 24px; }
.ri-timeline-node::before { content:''; position:absolute; left:-24px; top:6px; width:12px; height:12px; background:var(--os-cyan); border-radius:50%; border:2.5px solid #020b14; box-shadow:0 0 14px rgba(0,212,255,.6); }
.ri-timeline-node.ri-tl-done::before { background:var(--os-teal); box-shadow:0 0 14px rgba(0,255,200,.5); }
.ri-timeline-node.ri-tl-next::before { background:rgba(0,212,255,.3); border-color:rgba(0,212,255,.4); box-shadow:none; }
.ri-tl-date { font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--os-cyan); font-family:'SF Mono','JetBrains Mono',monospace; margin-bottom:4px; }
.ri-tl-title { font-size:14px; font-weight:700; color:var(--ink); margin:0 0 6px; letter-spacing:-.01em; }
.ri-tl-card { background:rgba(5,14,26,.82); border:1px solid rgba(0,200,255,.1); border-radius:10px; padding:12px 14px; display:grid; gap:6px; }
.ri-tl-row { display:grid; grid-template-columns:90px 1fr; gap:8px; font-size:11px; }
.ri-tl-row-lbl { font-weight:700; color:rgba(122,172,191,.55); letter-spacing:.04em; text-transform:uppercase; font-size:9px; padding-top:1px; }
.ri-tl-row-val { color:rgba(190,225,248,.8); line-height:1.5; }

/* Targets */
.ri-targets-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.ri-target-card { background:rgba(5,14,26,.85); border:1px solid rgba(0,200,255,.1); border-radius:12px; padding:18px 20px; transition:border-color .2s,transform .2s; }
.ri-target-card:hover { border-color:rgba(0,212,255,.26); transform:translateY(-2px); }
.ri-target-num { font-size:26px; font-weight:900; font-family:'SF Mono','JetBrains Mono',monospace; color:var(--os-cyan); opacity:.5; display:block; margin-bottom:8px; line-height:1; letter-spacing:-.02em; }
.ri-target-card h4 { margin:0 0 8px; font-size:13px; font-weight:700; color:var(--ink); letter-spacing:-.01em; line-height:1.3; }
.ri-target-card p { margin:0; font-size:12px; line-height:1.6; color:var(--muted); }
.ri-target-tag { display:inline-block; margin-top:10px; padding:3px 9px; background:rgba(0,212,255,.06); border:1px solid rgba(0,200,255,.15); border-radius:999px; font-size:9px; font-weight:700; letter-spacing:.05em; color:rgba(140,210,240,.7); text-transform:uppercase; }

/* Reveal animations */
.ri-section.active-app .ri-hero    { animation:acmFadeUp .5s .00s ease both; }
.ri-section.active-app .ri-tabs    { animation:acmFadeUp .5s .07s ease both; }
.ri-section.active-app .ri-panel   { animation:acmFadeUp .5s .12s ease both; }
.ri-section.active-app .ri-metric:nth-child(1) { animation:acmFadeUp .4s .10s ease both; }
.ri-section.active-app .ri-metric:nth-child(2) { animation:acmFadeUp .4s .16s ease both; }
.ri-section.active-app .ri-metric:nth-child(3) { animation:acmFadeUp .4s .22s ease both; }
.ri-section.active-app .ri-metric:nth-child(4) { animation:acmFadeUp .4s .28s ease both; }
.ri-section.active-app .ri-metric:nth-child(5) { animation:acmFadeUp .4s .34s ease both; }
.ri-section.active-app .ri-metric:nth-child(6) { animation:acmFadeUp .4s .40s ease both; }

/* Responsive */
@media (max-width:1100px) {
  .ri-hero { grid-template-columns:1fr; gap:28px; }
  .ri-metrics-grid { grid-template-columns:repeat(3,1fr); order:-1; }
  .ri-record { grid-template-columns:80px 90px 1fr 1fr 80px 1fr; }
  .ri-matrix-layout { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .ri-charts-grid { grid-template-columns:1fr; }
  .ri-metrics-grid { grid-template-columns:repeat(2,1fr); }
  .ri-record { grid-template-columns:1fr 1fr; row-gap:4px; }
}
@media (max-width:480px) {
  .ri-tabs { flex-direction:column; gap:3px; }
  .ri-metrics-grid { grid-template-columns:1fr 1fr; }
  .ri-filter-bar { flex-direction:column; align-items:stretch; }
  .ri-record-count { margin-left:0; }
  .ri-failure-grid { grid-template-columns:1fr; }
  .ri-targets-grid { grid-template-columns:1fr; }
  .ri-record { grid-template-columns:1fr; }
}

/* ── Research Intelligence disclaimer ── */
.ri-disclaimer {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 18px;
  background: rgba(251,191,36,.06);
  border: 1px solid rgba(251,191,36,.22);
  border-radius: 10px;
  margin-bottom: 20px;
}
.ri-disclaimer-icon { font-size:16px; flex-shrink:0; margin-top:1px; }
.ri-disclaimer p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(251,191,36,.82);
}

/* Prototype label stronger contrast */
.ri-proto-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(251,191,36,.65);
  margin: 0;
  padding: 5px 10px;
  background: rgba(251,191,36,.06);
  border: 1px solid rgba(251,191,36,.18);
  border-radius: 6px;
  display: inline-block;
  margin-top: 6px;
}

/* ── RI additional polish ── */
.ri-subtitle {
  font-size: clamp(15px,1.5vw,18px);
  font-weight: 500;
  color: rgba(200,228,248,.85);
  line-height: 1.5;
  margin: 0 0 12px;
  letter-spacing: -.005em;
  max-width: 52ch;
}
.ri-hero-copy h2 {
  font-size: clamp(22px,2.6vw,34px);
  letter-spacing: -.022em;
  font-weight: 800;
  margin: 8px 0 10px;
  color: var(--ink);
  line-height: 1.1;
}

/* ============================================================
   FAILURE LOG v2 — fl-* scoped, zero global changes
   ============================================================ */
.failure-log-section {
  background:
    radial-gradient(circle at 18% 14%, rgba(0,255,220,.11), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(0,120,255,.13), transparent 35%),
    linear-gradient(135deg,#020711 0%,#06101d 46%,#031510 100%);
  position: relative; overflow: hidden;
}
.failure-log-section::before {
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(80,255,235,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80,255,235,.04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 90%);
  pointer-events: none;
}
.failure-log-section .section { padding: 48px; }

/* Hero */
.fl-hero {
  display: flex; justify-content:space-between;
  gap:32px; align-items:flex-start;
  margin-bottom:28px; position:relative; z-index:1;
}
.fl-kicker {
  color:#2fffe0; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; margin-bottom:10px; font-weight:800;
}
.fl-h2 {
  font-size: clamp(36px,5.5vw,68px);
  line-height:.94; margin:0 0 14px;
  letter-spacing:-.05em; color:#e8f7ff; font-weight:900;
}
.fl-subtitle {
  max-width:600px; color:rgba(232,247,255,.72);
  font-size:15px; line-height:1.65; margin:0;
}
.fl-note-banner {
  margin-top:16px; display:inline-flex;
  padding:9px 14px;
  border:1px solid rgba(255,210,90,.28);
  background:rgba(255,183,60,.07);
  border-radius:999px; color:#ffd98a; font-size:12px;
}
.fl-hero-metrics {
  display:grid; grid-template-columns:repeat(3,minmax(110px,1fr));
  gap:12px; min-width:380px;
}
.fl-metric-card {
  padding:18px; border-radius:18px;
  border:1px solid rgba(98,255,230,.13);
  background:rgba(5,18,32,.72);
  box-shadow:0 20px 60px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.fl-metric-card span { display:block; font-size:26px; font-weight:900; color:#35ffe1; line-height:1; }
.fl-metric-card small { display:block; margin-top:5px; color:rgba(232,247,255,.52); text-transform:uppercase; letter-spacing:.08em; font-size:9px; }

/* Controls */
.fl-controls {
  display:flex; flex-wrap:wrap; gap:9px;
  margin-bottom:22px; position:relative; z-index:1;
}
.fl-filter {
  border:1px solid rgba(98,255,230,.14);
  background:rgba(7,20,36,.78);
  color:rgba(232,247,255,.72);
  border-radius:999px; padding:8px 14px;
  font:inherit; font-size:12px; font-weight:700;
  cursor:pointer; transition:.18s ease;
}
.fl-filter:hover,.fl-filter-active {
  color:#021210 !important;
  background:linear-gradient(135deg,#20ffe0,#51a8ff) !important;
  box-shadow:0 0 22px rgba(32,255,224,.22);
  border-color:transparent !important;
}

/* Layout */
.fl-layout {
  display:grid; grid-template-columns:minmax(240px,340px) 1fr;
  gap:22px; position:relative; z-index:1;
}

/* Timeline */
.fl-timeline {
  display:flex; flex-direction:column; gap:13px;
  position:relative;
}
.fl-timeline::before {
  content:""; position:absolute;
  left:17px; top:10px; bottom:10px; width:1px;
  background:linear-gradient(to bottom,rgba(47,255,224,.85),rgba(47,255,224,.05));
}
.fl-tl-item {
  position:relative; padding:15px 15px 15px 50px;
  border-radius:16px; border:1px solid rgba(98,255,230,.11);
  background:rgba(5,18,32,.62);
  cursor:pointer; transition:.22s ease;
  animation:flFadeUp .5s ease both;
}
.fl-tl-item::before {
  content:""; position:absolute;
  left:11px; top:19px;
  width:12px; height:12px; border-radius:50%;
  background:#2fffe0; box-shadow:0 0 18px rgba(47,255,224,.65);
}
.fl-tl-item:hover,.fl-tl-item.fl-active {
  transform:translateY(-2px);
  border-color:rgba(47,255,224,.42);
  background:rgba(8,30,50,.84);
}
.fl-tl-date { color:#35ffe1; font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-family:'SF Mono','JetBrains Mono',monospace; }
.fl-tl-title { margin-top:5px; font-size:14px; font-weight:700; color:#e8f7ff; line-height:1.3; }
.fl-tl-mode { margin-top:7px; display:inline-flex; padding:4px 9px; border-radius:999px; background:rgba(255,80,80,.1); color:#ff8a8a; font-size:10px; font-weight:700; }
.fl-tl-resolved { display:inline-flex; margin-left:7px; padding:3px 8px; border-radius:999px; background:rgba(47,255,180,.09); color:#4dffc8; font-size:10px; font-weight:700; border:1px solid rgba(47,255,180,.2); vertical-align:middle; }

/* Detail panel */
.fl-detail-panel {
  border:1px solid rgba(98,255,230,.13);
  background:rgba(3,12,24,.74);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-radius:24px; padding:22px;
  box-shadow:0 20px 70px rgba(0,0,0,.34);
}
.fl-detail-header {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:16px; margin-bottom:18px;
}
.fl-detail-title {
  font-size:clamp(22px,3.2vw,40px);
  line-height:1.05; margin:4px 0 0;
  letter-spacing:-.04em; color:#e8f7ff; font-weight:800;
}
.fl-status-badge {
  height:fit-content; white-space:nowrap;
  border:1px solid rgba(255,210,90,.28);
  background:rgba(255,183,60,.07); color:#ffd98a;
  border-radius:999px; padding:6px 12px; font-size:10px; font-weight:700; letter-spacing:.05em;
}

/* Visual grid */
.fl-visual-grid {
  display:grid; grid-template-columns:1.3fr .9fr;
  gap:16px; margin-bottom:16px;
}
.fl-sim-card,.fl-analysis-card,.fl-data-card,.fl-lessons > div {
  border:1px solid rgba(98,255,230,.12);
  background:rgba(5,18,32,.68);
  box-shadow:0 16px 50px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-radius:18px;
}
.fl-sim-card,.fl-analysis-card { padding:16px; }

/* Bridge preview */
.fl-bridge-preview {
  position:relative; height:260px; overflow:hidden;
  border-radius:14px;
  background:
    radial-gradient(circle at 50% 16%,rgba(47,255,224,.12),transparent 32%),
    linear-gradient(180deg,rgba(7,24,45,.95),rgba(2,8,18,.98));
  border:1px solid rgba(98,255,230,.11);
}
.fl-bridge-preview::before {
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(70,255,235,.04) 1px, transparent 1px),
    linear-gradient(90deg,rgba(70,255,235,.04) 1px, transparent 1px);
  background-size:34px 34px;
}
.fl-cliff {
  position:absolute; bottom:0;
  width:110px; height:140px;
  background:
    linear-gradient(135deg,rgba(100,160,190,.18),rgba(8,18,32,.94)),
    repeating-linear-gradient(0deg,transparent 0 18px,rgba(255,255,255,.03) 19px);
  border-top:2px solid rgba(47,255,224,.26);
}
.fl-cliff-left{left:0;} .fl-cliff-right{right:0;}
.fl-svg { position:absolute; inset:0; width:100%; height:100%; }
.fl-evidence-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.86) contrast(1.08);
  z-index: 2;
}

.fl-bridge-preview.has-evidence-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 8, 18, 0.08), rgba(3, 8, 18, 0.3)),
    radial-gradient(circle at 18% 20%, rgba(92, 200, 255, 0.16), transparent 34%);
}

.fl-bridge-preview.has-evidence-image .fl-cliff,
.fl-bridge-preview.has-evidence-image .fl-svg,
.fl-bridge-preview.has-evidence-image .fl-car {
  display: none;
}
.fl-beam { stroke-width:7; stroke-linecap:round; filter:drop-shadow(0 0 7px rgba(47,255,224,.3)); transition:stroke .3s; }
.fl-beam-safe    { stroke:#2fffe0; }
.fl-beam-warning { stroke:#ffd45c; }
.fl-beam-critical{ stroke:#ff5c5c; animation:flCritPulse 1.1s ease-in-out infinite; }
.fl-beam-failed  { stroke:#ff2e2e; stroke-dasharray:16 10; animation:flCrack .8s linear infinite; }
.fl-node { fill:#dffffa; stroke:#2fffe0; stroke-width:2.5; filter:drop-shadow(0 0 9px rgba(47,255,224,.75)); }
.fl-node-crit { fill:#ff6b6b; stroke:#ffd45c; animation:flNodeWarn 1s ease infinite; }
.fl-car {
  position:absolute; width:40px; height:20px;
  border-radius:7px 7px 4px 4px;
  left:66px; top:114px;
  background:linear-gradient(135deg,#65fff0,#4a9dff);
  box-shadow:0 0 20px rgba(47,255,224,.5);
  animation:flCarRun 5s ease-in-out infinite;
}
.fl-car::before,.fl-car::after {
  content:""; position:absolute; bottom:-7px;
  width:9px; height:9px; border-radius:50%;
  background:#07111e; border:2px solid #9fffee;
}
.fl-car::before{left:5px;} .fl-car::after{right:5px;}
.fl-vis-caption { color:rgba(232,247,255,.5); font-size:11px; margin:10px 0 0; line-height:1.5; }

/* Analysis */
.fl-analysis-card h4,.fl-lessons h4 { margin:0 0 13px; font-size:14px; font-weight:700; color:#e8f7ff; letter-spacing:-.01em; }
.fl-analysis-list { display:grid; gap:11px; }
.fl-analysis-list div { padding-bottom:11px; border-bottom:1px solid rgba(98,255,230,.09); }
.fl-analysis-list div:last-child { border-bottom:none; padding-bottom:0; }
.fl-analysis-list span { display:block; color:rgba(232,247,255,.45); font-size:10px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:3px; }
.fl-analysis-list strong { color:#e8f7ff; font-size:12px; line-height:1.5; font-weight:600; }

/* Metrics row */
.fl-metrics-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px; }
.fl-data-card { padding:15px; }
.fl-data-card span { display:block; color:rgba(232,247,255,.48); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.fl-data-card strong { display:block; margin:7px 0 9px; font-size:22px; color:#e8f7ff; font-family:'SF Mono','JetBrains Mono',monospace; letter-spacing:-.02em; }
.fl-bar { height:6px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; }
.fl-bar i { display:block; height:100%; width:0%; border-radius:inherit; background:linear-gradient(90deg,#2fffe0,#ffd45c,#ff5c5c); transition:width .85s ease; }

/* Lessons */
.fl-lessons { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fl-lessons > div { padding:16px; }
.fl-lessons p { margin:0; color:rgba(232,247,255,.7); line-height:1.62; font-size:13px; }

/* Keyframes */
@keyframes flFadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes flCritPulse { 0%,100%{filter:drop-shadow(0 0 7px rgba(255,80,80,.4))} 50%{filter:drop-shadow(0 0 20px rgba(255,80,80,.9))} }
@keyframes flCrack { to{stroke-dashoffset:-26} }
@keyframes flNodeWarn { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }
@keyframes flCarRun {
  0%   { transform:translate(0,0) rotate(0deg); opacity:1; }
  44%  { transform:translate(215px,16px) rotate(2deg); }
  60%  { transform:translate(280px,58px) rotate(15deg); }
  77%  { transform:translate(325px,148px) rotate(42deg); opacity:.7; }
  100% { transform:translate(0,0) rotate(0deg); opacity:1; }
}

/* Stage label */
.fl-stage-label {
  margin:6px 0 0; color:rgba(47,255,224,.62); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase;
  font-family:'SF Mono','JetBrains Mono',monospace;
}

/* Status badge variants */
.fl-status-badge[data-resolved="true"] {
  border-color:rgba(47,255,200,.32);
  background:rgba(47,255,180,.08); color:#4dffc8;
}

/* Category-aware timeline dot + tag */
.fl-tl-item[data-category="bending"]::before  { background:#ff6b6b; box-shadow:0 0 18px rgba(255,107,107,.7); }
.fl-tl-item[data-category="joint"]::before    { background:#ffaa78; box-shadow:0 0 18px rgba(255,170,120,.7); }
.fl-tl-item[data-category="coating"]::before  { background:#2fffe0; box-shadow:0 0 18px rgba(47,255,224,.7); }
.fl-tl-item[data-category="buckling"]::before { background:#ffd45c; box-shadow:0 0 18px rgba(255,212,92,.7); }
.fl-tl-item[data-category="print"]::before    { background:#a0aaff; box-shadow:0 0 18px rgba(160,170,255,.7); }
.fl-tl-item[data-category="bending"] .fl-tl-mode  { background:rgba(255,80,80,.12);  color:#ff8a8a; }
.fl-tl-item[data-category="joint"] .fl-tl-mode    { background:rgba(255,140,60,.12); color:#ffaa78; }
.fl-tl-item[data-category="coating"] .fl-tl-mode  { background:rgba(0,255,200,.09);  color:#62ffd5; }
.fl-tl-item[data-category="buckling"] .fl-tl-mode { background:rgba(255,212,60,.12); color:#ffd45c; }
.fl-tl-item[data-category="print"] .fl-tl-mode    { background:rgba(140,150,255,.13);color:#a0aaff; }

/* Active timeline glow */
.fl-tl-item.fl-active { box-shadow:0 0 0 1px rgba(47,255,224,.28), 0 8px 32px rgba(0,0,0,.3); }

/* Detail panel fresh-render animation */
.fl-detail-panel.fl-detail-fresh { animation:flFadeUp .28s ease both; }

/* Image gallery */
.fl-gallery[hidden] { display:none !important; }
.fl-gallery {
  display:flex; flex-direction:column; gap:10px;
}
.fl-gallery-primary {
  position:relative; height:260px;
  border-radius:14px; overflow:hidden;
  cursor:pointer;
  border:1px solid rgba(98,255,230,.14);
  background:rgba(3,10,20,.9);
}
.fl-gallery-primary img {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.88) contrast(1.06);
  transition:transform .4s ease, filter .3s ease;
}
.fl-gallery-primary:hover img {
  transform:scale(1.035);
  filter:saturate(.95) contrast(1.08);
}
.fl-gallery-expand-hint {
  position:absolute; bottom:10px; right:12px;
  padding:5px 10px; border-radius:999px;
  background:rgba(3,10,20,.72); backdrop-filter:blur(8px);
  color:rgba(232,247,255,.7); font-size:10px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  border:1px solid rgba(98,255,230,.18);
  opacity:0; transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.fl-gallery-primary:hover .fl-gallery-expand-hint {
  opacity:1; transform:translateY(0);
}
.fl-gallery-thumbs {
  display:flex; gap:8px; overflow-x:auto;
  padding-bottom:2px;
  scrollbar-width:thin;
  scrollbar-color:rgba(47,255,224,.2) transparent;
}
.fl-gallery-thumb {
  flex-shrink:0; width:72px; height:52px;
  border-radius:9px; overflow:hidden;
  border:2px solid rgba(98,255,230,.1);
  cursor:pointer; padding:0;
  background:rgba(3,10,20,.9);
  transition:border-color .2s ease, transform .2s ease;
}
.fl-gallery-thumb img {
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.7);
  transition:filter .2s ease;
}
.fl-gallery-thumb:hover,
.fl-gallery-thumb.fl-thumb-active {
  border-color:rgba(47,255,224,.65);
  transform:translateY(-2px);
}
.fl-gallery-thumb.fl-thumb-active img,
.fl-gallery-thumb:hover img { filter:saturate(1); }

/* Modal / lightbox */
.fl-modal {
  position:fixed; inset:0; z-index:9100;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation:flModalIn .22s ease both;
}
.fl-modal[hidden] { display:none; }
.fl-modal-overlay {
  position:absolute; inset:0;
  background:rgba(0,4,14,.88);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  cursor:pointer;
}
.fl-modal-content {
  position:relative; z-index:1;
  max-width:min(90vw,1100px); max-height:90vh;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.fl-modal-img {
  display:block; max-width:100%; max-height:80vh;
  border-radius:16px;
  border:1px solid rgba(98,255,230,.18);
  box-shadow:0 40px 120px rgba(0,0,0,.7);
  filter:saturate(.92) contrast(1.06);
}
.fl-modal-close {
  position:absolute; top:-44px; right:0;
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(98,255,230,.22);
  background:rgba(5,15,30,.8); color:#e8f7ff;
  font-size:18px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s, border-color .18s;
}
.fl-modal-close:hover {
  background:rgba(255,80,80,.18); border-color:rgba(255,80,80,.4);
}
.fl-modal-caption {
  margin:0; color:rgba(232,247,255,.6); font-size:12px;
  line-height:1.6; text-align:center; max-width:700px;
}
@keyframes flModalIn {
  from { opacity:0; transform:scale(.96); }
  to   { opacity:1; transform:scale(1); }
}

/* Responsive */
@media (max-width:1100px) {
  .fl-hero { flex-direction:column; }
  .fl-hero-metrics { min-width:0; width:100%; }
  .fl-layout { grid-template-columns:1fr; }
  .fl-visual-grid { grid-template-columns:1fr; }
  .fl-lessons { grid-template-columns:1fr; }
  .fl-metrics-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .fl-hero-metrics { grid-template-columns:1fr 1fr; }
  .fl-metrics-grid { grid-template-columns:1fr 1fr; }
  .fl-bridge-preview { height:220px; }
  .fl-detail-header { flex-direction:column; }
  .fl-h2 { font-size:clamp(30px,8vw,46px); }
  .fl-gallery-primary { min-height:180px; }
  .fl-gallery-thumb { width:58px; height:44px; }
}

/* Final Bridge Lab override: cinematic bridge-constructor UI. */
.bl-game-section {
  --bridge-bg: #050b0d;
  --bridge-panel: rgba(8, 16, 20, 0.78);
  --bridge-panel-strong: rgba(12, 22, 27, 0.9);
  --bridge-line: rgba(139, 232, 255, 0.2);
  --bridge-cyan: #8ee8ff;
  --bridge-green: #a8ffcc;
  --bridge-gold: #f8c767;
  min-height: 100vh;
  padding-top: clamp(40px, 5vw, 76px);
  background:
    radial-gradient(circle at 18% 8%, rgba(142,232,255,0.16), transparent 26%),
    radial-gradient(circle at 86% 16%, rgba(168,255,204,0.12), transparent 30%),
    linear-gradient(135deg, #05090b 0%, #0a1517 46%, #14211d 100%);
  color: #f2fbff;
  overflow: hidden;
}
.bl-game-section::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(142,232,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(142,232,255,0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 90%, transparent 100%);
  opacity: 0.34;
}
.bl-game-section .bl-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  margin-bottom: 22px;
}
.bl-game-section .bl-hero h2 {
  max-width: 900px;
  font-size: clamp(40px, 6vw, 86px);
  line-height: 0.94;
  letter-spacing: -0.05em;
  color: #f5fbff;
  text-shadow: 0 12px 38px rgba(0,0,0,0.55);
}
.bl-game-section .bl-hero-sub {
  max-width: 740px;
  color: rgba(212,233,238,0.78);
  font-size: clamp(15px, 1.4vw, 19px);
}
.bl-hero-kpis {
  display: grid;
  gap: 10px;
  min-width: 270px;
}
.bl-hero-kpis span {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid rgba(142,232,255,0.17);
  border-radius: 14px;
  background: rgba(255,255,255,0.055);
  box-shadow: inset 0 1px rgba(255,255,255,0.08), 0 18px 40px rgba(0,0,0,0.24);
  backdrop-filter: blur(18px);
  color: rgba(235,250,255,0.86);
}
.bl-hero-kpis b {
  color: var(--bridge-green);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.bl-game-section .bl-workflow-bar,
.bl-game-section .bl-panel-block,
.bl-game-section .bl-status-bar {
  border-color: rgba(142,232,255,0.18);
  background: linear-gradient(180deg, rgba(19,33,39,0.84), rgba(7,14,18,0.78));
  box-shadow: 0 24px 60px rgba(0,0,0,0.34), inset 0 1px rgba(255,255,255,0.06);
}
.bl-game-section .bl-shell {
  grid-template-columns: minmax(230px, 0.72fr) minmax(560px, 2.4fr) minmax(230px, 0.82fr);
  gap: 18px;
  align-items: stretch;
}
.bl-game-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  min-height: 44px;
}
.bl-game-topbar button {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(142,232,255,0.18);
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  color: rgba(245,255,255,0.86);
  font-size: 28px;
  line-height: 1;
}
.bl-search-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: min(420px, 70%);
  padding: 11px 16px;
  border-radius: 17px;
  border: 1px solid rgba(230,255,247,0.18);
  background: rgba(3,8,10,0.64);
  color: rgba(236,248,246,0.64);
  box-shadow: inset 0 1px rgba(255,255,255,0.08);
}
.bl-search-pill input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(236,248,246,0.9);
  font: inherit;
  font-size: 14px;
}
.bl-search-pill input::placeholder {
  color: rgba(236,248,246,0.48);
}
.bl-search-pill:focus-within {
  border-color: rgba(124,255,178,0.48);
  box-shadow: inset 0 1px rgba(255,255,255,0.08), 0 0 0 3px rgba(92,200,255,0.08);
}
.bl-window-status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: rgba(168,255,204,0.78);
  letter-spacing: 0.14em;
  font-weight: 900;
}
.bl-window-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bridge-green);
  box-shadow: 0 0 16px rgba(168,255,204,0.8);
}
.bl-game-section .bl-canvas-wrap {
  border-radius: 18px;
  border: 1px solid rgba(142,232,255,0.22);
  background: #05090b;
  box-shadow: 0 30px 90px rgba(0,0,0,0.55), 0 0 70px rgba(142,232,255,0.09);
}
.bl-game-section #bridgeCanvas {
  min-height: 430px;
  object-fit: cover;
}
.bl-game-section .bl-tool-btn,
.bl-game-section .bl-opt,
.bl-game-section .button.secondary {
  border-color: rgba(142,232,255,0.15);
  background: rgba(255,255,255,0.045);
}
.bl-game-section .button.primary,
.bl-game-section .bl-tool-active,
.bl-game-section .bl-opt-active {
  background: linear-gradient(135deg, rgba(142,232,255,0.92), rgba(110,247,201,0.9)) !important;
  border-color: rgba(217,255,244,0.55) !important;
  color: #041013 !important;
  box-shadow: 0 18px 45px rgba(88,226,226,0.22) !important;
}
@media (max-width: 1180px) {
  .bl-game-section .bl-shell { grid-template-columns: 1fr; }
  .bl-game-section .bl-panel { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .bl-game-section .bl-hero { grid-template-columns: 1fr; }
  .bl-hero-kpis { min-width: 0; }
  .bl-game-section .bl-panel { grid-template-columns: 1fr; }
  .bl-search-pill { min-width: 0; flex: 1; }
  .bl-window-status { display: none; }
}

/* Bridge Lab precision fix: keep canvas coordinate system and visual pixels aligned. */
.bl-game-section #bridgeCanvas {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 820 / 460;
  object-fit: contain !important;
}
.bl-game-section .bl-canvas-wrap {
  line-height: 0;
}
.bl-game-section .bl-canvas-hint,
.bl-game-section .bl-beam-tooltip {
  line-height: normal;
}

/* =====================================================================
   RESEARCH PHOTO SHOWCASE — asymmetric cinematic grid
   ===================================================================== */

.research-photo-showcase {
  display: grid;
  grid-template-columns: 1.32fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  max-width: 1240px;
  margin: 0 auto clamp(56px, 7vw, 90px);
  height: clamp(380px, 40vw, 560px);
}

.rph-hero  { grid-column: 1; grid-row: 1 / 3; }
.rph-sm-a  { grid-column: 2; grid-row: 1; }
.rph-sm-b  { grid-column: 3; grid-row: 1; }
.rph-sm-c  { grid-column: 2; grid-row: 2; }
.rph-sm-d  { grid-column: 3; grid-row: 2; }

/* ── Base card ─────────────────────────────────────────────────────── */

.rph-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #050b14;
  border: 1px solid rgba(92, 200, 255, 0.13);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.36s ease, box-shadow 0.36s ease;
}

.rph-card:hover {
  border-color: rgba(92, 200, 255, 0.3);
  box-shadow:
    0 34px 100px rgba(0, 0, 0, 0.56),
    0 0 60px rgba(92, 200, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.rph-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.5s ease;
  filter: saturate(0.78) contrast(1.08) brightness(0.88);
  will-change: transform;
}

.rph-card:hover img {
  transform: scale(1.048);
  filter: saturate(0.9) contrast(1.05) brightness(0.94);
}

/* ── Gradient overlay ──────────────────────────────────────────────── */

.rph-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(4,12,22,0.9) 0%, rgba(4,12,22,0.42) 36%, rgba(4,12,22,0.08) 62%, transparent 100%),
    linear-gradient(135deg, rgba(92,200,255,0.055) 0%, transparent 54%);
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.rph-card:hover .rph-overlay {
  background:
    linear-gradient(to top, rgba(4,12,22,0.95) 0%, rgba(4,12,22,0.58) 40%, rgba(4,12,22,0.12) 66%, transparent 100%),
    linear-gradient(135deg, rgba(92,200,255,0.08) 0%, transparent 54%);
}

/* ── Caption block ─────────────────────────────────────────────────── */

.rph-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: clamp(14px, 1.8vw, 22px) clamp(16px, 2vw, 26px);
  transform: translateY(5px);
  transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

.rph-card:hover .rph-caption {
  transform: translateY(0);
}

/* ── Phase badge ───────────────────────────────────────────────────── */

.rph-phase-badge {
  display: inline-block;
  margin-bottom: 7px;
  padding: 3px 10px;
  background: rgba(5,11,20,0.62);
  border: 1px solid rgba(92,200,255,0.36);
  border-radius: 999px;
  color: #5cc8ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ── Title ─────────────────────────────────────────────────────────── */

.rph-title {
  display: block;
  margin: 0 0 5px;
  color: #f4f8fb;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.022em;
  font-size: clamp(12px, 1.1vw, 15px);
}

.rph-hero .rph-title {
  font-size: clamp(15px, 1.5vw, 20px);
  margin-bottom: 7px;
}

/* ── Description (hero only) ───────────────────────────────────────── */

.rph-desc {
  display: none;
  margin: 0 0 10px;
  color: rgba(180,220,240,0.76);
  font-size: clamp(11px, 0.88vw, 13px);
  line-height: 1.54;
}

.rph-hero .rph-desc {
  display: block;
}

/* ── Material tags ─────────────────────────────────────────────────── */

.rph-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.rph-tags span {
  padding: 3px 8px;
  background: rgba(124,255,178,0.08);
  border: 1px solid rgba(124,255,178,0.24);
  border-radius: 999px;
  color: rgba(124,255,178,0.88);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* ── Stagger animation on section activation ───────────────────────── */

.app-screen.active-app .rph-card {
  animation: rphReveal 0.62s ease both;
}

.app-screen.active-app .rph-hero  { animation-delay: 0.04s; }
.app-screen.active-app .rph-sm-a  { animation-delay: 0.14s; }
.app-screen.active-app .rph-sm-b  { animation-delay: 0.22s; }
.app-screen.active-app .rph-sm-c  { animation-delay: 0.30s; }
.app-screen.active-app .rph-sm-d  { animation-delay: 0.38s; }

@keyframes rphReveal {
  from { opacity: 0; transform: translateY(22px) scale(0.975); }
  to   { opacity: 1; transform: translateY(0)    scale(1);     }
}

/* ── Mobile responsive ─────────────────────────────────────────────── */

@media (max-width: 900px) {
  .research-photo-showcase {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    height: auto;
    gap: 10px;
  }

  .rph-hero  { grid-column: 1 / 3; grid-row: 1; min-height: 260px; }
  .rph-sm-a  { grid-column: 1; grid-row: 2; min-height: 170px; }
  .rph-sm-b  { grid-column: 2; grid-row: 2; min-height: 170px; }
  .rph-sm-c  { grid-column: 1; grid-row: 3; min-height: 170px; }
  .rph-sm-d  { grid-column: 2; grid-row: 3; min-height: 170px; }
}

@media (max-width: 580px) {
  .research-photo-showcase {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .rph-hero,
  .rph-sm-a,
  .rph-sm-b,
  .rph-sm-c,
  .rph-sm-d {
    grid-column: 1;
    grid-row: auto;
    min-height: 210px;
  }
}

/* =====================================================================
   RESEARCH BLOCK PHOTO CARDS — cinematic upgrade for block media
   ===================================================================== */

.rph-block-card {
  position: relative;
  overflow: hidden;
  padding: 0;
  cursor: default;
}

.rph-block-card img {
  width: 100%;
  min-height: 280px;
  max-height: 460px;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.5s ease;
  filter: saturate(0.8) contrast(1.07) brightness(0.86);
  will-change: transform;
}

.rph-block-card:hover img {
  transform: scale(1.04);
  filter: saturate(0.9) contrast(1.04) brightness(0.92);
}

.rph-block-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(4,12,22,0.94) 0%, rgba(4,12,22,0.46) 42%, rgba(4,12,22,0.1) 66%, transparent 100%);
  pointer-events: none;
  transition: background 0.4s ease;
}

.rph-block-card:hover .rph-block-overlay {
  background:
    linear-gradient(to top, rgba(4,12,22,0.97) 0%, rgba(4,12,22,0.62) 45%, rgba(4,12,22,0.16) 68%, transparent 100%);
}

.rph-block-meta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 20px 20px;
  transform: translateY(4px);
  transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
  display: grid;
  gap: 5px;
}

.rph-block-card:hover .rph-block-meta {
  transform: translateY(0);
}

.rph-block-title {
  display: block;
  color: #f4f8fb;
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.rph-block-desc {
  display: block;
  color: rgba(175,215,235,0.74);
  font-size: 12px;
  line-height: 1.52;
  max-width: 340px;
}

.rph-block-card .rph-tags {
  margin-top: 6px;
}

/* =====================================================================
   AI ANIMATION CARDS — Block C (Adsorption) & Block D (Filtration)
   ===================================================================== */

.rph-anim-card {
  display: block !important;
  position: relative !important;
  overflow: hidden;
  padding: 0 !important;
  min-height: 360px;
  height: 380px;
  cursor: default;
}

/* ── Block C: Adsorption ─────────────────────────────────────────────── */

.anim-ads {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 15%, rgba(52,211,153,0.09) 0%, transparent 52%),
    linear-gradient(180deg, #07101f 0%, #050e17 55%, #04100e 100%);
  overflow: hidden;
}

.anim-zone {
  position: absolute;
  left: 14px;
  margin: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 3;
}

.anim-zone-top { top: 13px; color: rgba(245,158,11,0.52); }
.anim-zone-bot { top: 52%; color: rgba(52,211,153,0.52); }
.anim-zone-amber { color: rgba(251,191,36,0.52) !important; }
.anim-zone-cyan  { color: rgba(92,200,255,0.52) !important; }

.anim-ads-divider {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(52,211,153,0.3) 25%, rgba(52,211,153,0.3) 75%, transparent);
  z-index: 2;
}

/* Falling dye molecules */
.anim-mol {
  position: absolute;
  top: 4px;
  left: var(--x);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 10px rgba(245,158,11,0.8), 0 0 22px rgba(245,158,11,0.25);
  animation: molFall 3.8s var(--d) ease-in infinite;
  z-index: 4;
}

@keyframes molFall {
  0%   { transform: translateY(0);      opacity: 0; }
  6%   { opacity: 1; }
  64%  { opacity: 1;  transform: translateY(185px); }
  76%  { opacity: 0;  transform: translateY(200px) scale(0.15); }
  100% { opacity: 0;  transform: translateY(200px) scale(0.15); }
}

/* Adsorbent bead bed — sits just below divider, inside animation zone */
.anim-ads-bed {
  position: absolute;
  top: 54%;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 0 18px;
  z-index: 2;
}

.anim-ads-bed b {
  flex: 0 0 auto;
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #6ee7b7 0%, #059669 72%);
  box-shadow: 0 0 14px rgba(52,211,153,0.4), inset 0 -4px 8px rgba(0,0,0,0.22);
  animation: beadPulse 2.8s ease-in-out infinite;
}

.anim-ads-bed b:nth-child(2) { animation-delay: 0.55s; width: 32px; height: 32px; }
.anim-ads-bed b:nth-child(3) { animation-delay: 1.1s; }
.anim-ads-bed b:nth-child(4) { animation-delay: 1.65s; width: 34px; height: 34px; }
.anim-ads-bed b:nth-child(5) { animation-delay: 0.9s; }
.anim-ads-bed b:nth-child(6) { animation-delay: 1.45s; width: 30px; height: 30px; }

@keyframes beadPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(52,211,153,0.4); }
  50%       { box-shadow: 0 0 26px rgba(52,211,153,0.68), 0 0 44px rgba(52,211,153,0.18); }
}

/* Block C HUD — z-index above overlay so it's always readable */
.anim-ads-hud {
  position: absolute;
  top: 28%;
  right: 14px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  padding: 10px 13px;
  background: rgba(4,10,20,0.6);
  border: 1px solid rgba(52,211,153,0.24);
  border-radius: 12px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 10;
}

.anim-ads-hud strong {
  color: #34d399;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
}

.anim-ads-hud span {
  color: rgba(52,211,153,0.78);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.anim-ads-hud small {
  color: rgba(175,215,235,0.5);
  font-size: 9px;
  white-space: nowrap;
}

/* ── Block D: Filtration ─────────────────────────────────────────────── */

.anim-filt {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 45%, rgba(92,200,255,0.07) 0%, transparent 55%),
    linear-gradient(180deg, #0a1828 0%, #060f1e 50%, #040b18 100%);
  overflow: hidden;
}

/* Input flow streaks (orange = contaminated) — pinned to top */
.anim-filt-in {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 18px;
}

/* Output flow streaks (cyan = clean) — above overlay zone */
.anim-filt-out {
  position: absolute;
  bottom: 118px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 18px;
}

.anim-filt-in i {
  display: block;
  width: 7px;
  height: 22px;
  border-radius: 4px;
  background: linear-gradient(180deg, #fbbf24, #d97706);
  box-shadow: 0 0 10px rgba(251,191,36,0.65);
  animation: flowStreak 1.3s var(--d) linear infinite;
}

/* Output flow streaks (cyan = clean) */
.anim-filt-out i {
  display: block;
  width: 7px;
  height: 22px;
  border-radius: 4px;
  background: linear-gradient(180deg, #67e8f9, #0891b2);
  box-shadow: 0 0 10px rgba(103,232,249,0.65);
  animation: flowStreak 1.3s var(--d) linear infinite;
}

@keyframes flowStreak {
  0%   { opacity: 0; transform: translateY(-8px); }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(8px); }
}

/* Honeycomb hex grid — filter cross-section, centered in card */
.anim-hex-grid {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  display: grid;
  grid-template-columns: repeat(4, 48px);
  gap: 7px;
}

.anim-hex-grid s {
  display: block;
  width: 48px;
  height: 48px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: rgba(92,200,255,0.1);
  animation: hexPulse 3.2s ease-in-out infinite;
}

.anim-hex-grid s:nth-child(2)  { animation-delay: 0.27s; }
.anim-hex-grid s:nth-child(3)  { animation-delay: 0.54s; }
.anim-hex-grid s:nth-child(4)  { animation-delay: 0.81s; }
.anim-hex-grid s:nth-child(5)  { animation-delay: 0.41s; }
.anim-hex-grid s:nth-child(6)  { animation-delay: 0.68s; }
.anim-hex-grid s:nth-child(7)  { animation-delay: 0.95s; }
.anim-hex-grid s:nth-child(8)  { animation-delay: 1.22s; }
.anim-hex-grid s:nth-child(9)  { animation-delay: 0.14s; }
.anim-hex-grid s:nth-child(10) { animation-delay: 0.47s; }
.anim-hex-grid s:nth-child(11) { animation-delay: 0.8s; }
.anim-hex-grid s:nth-child(12) { animation-delay: 1.13s; }

@keyframes hexPulse {
  0%, 100% { background: rgba(92,200,255,0.08); }
  50%       { background: rgba(92,200,255,0.24); box-shadow: inset 0 0 10px rgba(92,200,255,0.14); }
}

/* Block D HUD — upper right, above overlay */
.anim-filt-hud {
  position: absolute;
  top: 28%;
  right: 14px;
  transform: translateY(-50%);
  padding: 10px 13px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  background: rgba(4,10,20,0.6);
  border: 1px solid rgba(92,200,255,0.22);
  border-radius: 12px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 10;
}

.anim-filt-hud strong {
  color: #5cc8ff;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
}

.anim-filt-hud span {
  color: rgba(92,200,255,0.78);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.anim-filt-hud small {
  color: rgba(175,215,235,0.5);
  font-size: 9px;
  white-space: nowrap;
}

/* "CLEAN OUTPUT" label — just above the overlay zone */
.anim-filt .anim-zone-bot {
  top: auto;
  bottom: 144px;
}

/* Overlay sits above all animation elements */
.rph-anim-card .rph-block-overlay {
  z-index: 8;
  background:
    linear-gradient(to top,
      rgba(4,12,22,0.92) 0%,
      rgba(4,12,22,0.38) 36%,
      rgba(4,12,22,0.06) 56%,
      transparent 100%
    );
}

/* ── Home v2 redesign — aligned with site color system ────── */

/* Override grid (beats .admissions-home.active-app specificity) */
#home.admissions-home.active-app {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  grid-template-columns: none;
  gap: 0;
  min-height: 100vh;
  padding: clamp(118px, 13vw, 172px) clamp(40px, 8vw, 112px) clamp(72px, 8vw, 100px);
}

/* Hero copy block */
.home-v2-hero {
  position: relative;
  z-index: 2;
  max-width: 820px;
  animation: homeHeroUp 0.72s var(--ease) both;
}

@keyframes homeHeroUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Eyebrow — matches site cyan */
.admissions-home .eyebrow {
  display: block;
  margin-bottom: 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--os-cyan);
  opacity: 0.78;
}

/* Main title */
.home-v2-hero h1 {
  margin: 0 0 20px;
  font-size: clamp(80px, 12vw, 168px);
  line-height: 0.88;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-shadow:
    0 0 80px rgba(0, 212, 255, 0.22),
    0 0 200px rgba(0, 212, 255, 0.08);
}

/* Subtitle badge */
.home-v2-lab-name {
  display: inline-block;
  margin: 0 0 28px;
  padding: 8px 14px;
  background: rgba(0, 212, 255, 0.06);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  backdrop-filter: blur(16px);
  color: var(--ink);
  font-size: clamp(13px, 1.05vw, 16px);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Positioning statement */
.home-v2-position {
  max-width: 600px;
  margin: 0 0 40px;
  color: rgba(202, 216, 229, 0.88);
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.64;
}

/* CTA row — uses global .button.primary / .button.secondary */
.home-v2-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.home-v2-ctas .button {
  padding: 0 26px;
  min-height: 48px;
  border-radius: 10px;
}

/* Research focus section */
.home-v2-focus-section.home-visible {
  display: flex !important;
  justify-content: center;
}

.home-v2-focus-inner {
  width: 100%;
  max-width: 1100px;
  padding: clamp(48px, 6vw, 80px) clamp(40px, 8vw, 112px);
}

.home-v2-focus-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 24px);
}

/* Cards — glass surface matching rest of site */
.home-v2-card {
  padding: clamp(28px, 3vw, 40px);
  background: var(--surface-2);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  transition: border-color 240ms var(--ease), background 240ms var(--ease),
              box-shadow 240ms var(--ease), transform 240ms var(--ease);
  animation: homeCardUp 0.64s var(--ease) both;
}

.home-v2-card:nth-child(1) { animation-delay: 0.08s; }
.home-v2-card:nth-child(2) { animation-delay: 0.18s; }

@keyframes homeCardUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.home-v2-card:hover {
  background: rgba(0, 212, 255, 0.06);
  border-color: var(--glass-border-bright);
  box-shadow: var(--glow-sm);
  transform: translateY(-3px);
}

.home-v2-card-num {
  display: block;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--os-cyan);
  opacity: 0.62;
}

.home-v2-card-area {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.home-v2-card h3 {
  margin: 0 0 12px;
  font-size: clamp(17px, 1.45vw, 22px);
  font-weight: 700;
  line-height: 1.22;
  color: var(--ink);
}

.home-v2-card > p {
  margin: 0;
  font-size: 14px;
  line-height: 1.68;
  color: var(--muted);
}

/* Evidence strip */
.home-v2-evidence-section.home-visible {
  display: flex !important;
  justify-content: center;
}

.home-v2-evidence-inner {
  width: 100%;
  max-width: 1100px;
  padding: 0 clamp(40px, 8vw, 112px) clamp(48px, 6vw, 80px);
}

.home-v2-strip {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 18px 28px;
  background: rgba(0, 212, 255, 0.025);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
}

/* Sweep shimmer */
.home-v2-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 212, 255, 0.06) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: homeStripSweep 3.6s ease-in-out infinite;
}

@keyframes homeStripSweep {
  0%        { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}

.home-v2-strip-item {
  flex: 1;
  position: relative;
  z-index: 1;
  padding: 2px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  transition: color 220ms var(--ease);
}

.home-v2-strip:hover .home-v2-strip-item {
  color: var(--ink);
}

.home-v2-strip-sep {
  flex-shrink: 0;
  width: 1px;
  height: 18px;
  background: var(--glass-border);
}

/* Mobile */
@media (max-width: 860px) {
  #home.admissions-home.active-app {
    padding: clamp(80px, 10vw, 118px) clamp(20px, 5vw, 36px) 52px;
  }
  .home-v2-focus-grid { grid-template-columns: 1fr; }
  .home-v2-focus-inner,
  .home-v2-evidence-inner {
    padding-left: clamp(20px, 5vw, 36px);
    padding-right: clamp(20px, 5vw, 36px);
  }
  .home-v2-strip {
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 18px;
    justify-content: center;
  }
  .home-v2-strip-sep { display: none; }
  .home-v2-strip-item { flex: none; min-width: 130px; }
}

/* ── Research Program v2 additions ──────────────────────────── */

.research-track-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 24px);
  max-width: 1100px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  padding: 0 clamp(22px, 5vw, 78px);
}

.research-track-card {
  padding: clamp(22px, 2.4vw, 34px);
  background: rgba(0, 212, 255, 0.03);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  transition: border-color 220ms var(--ease), background 220ms var(--ease);
}

.research-track-card:hover {
  background: rgba(0, 212, 255, 0.065);
  border-color: rgba(0, 212, 255, 0.28);
}

.research-track-num {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--os-cyan);
  opacity: 0.7;
}

.research-track-area {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.research-track-card h3 {
  margin: 0 0 10px;
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.research-track-card > p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted);
}

.research-track-modules {
  margin-top: 14px !important;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(0, 212, 255, 0.5) !important;
}

/* Current Status badge */
.research-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  background: rgba(0, 212, 255, 0.06);
  border: 1px solid rgba(0, 212, 255, 0.22);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--os-cyan);
  letter-spacing: 0.02em;
}

.research-status-badge::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--os-cyan);
  animation: resStatusPulse 2.2s ease-in-out infinite;
}

@keyframes resStatusPulse {
  0%, 100% { opacity: 0.45; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Research workflow strip */
.research-workflow-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  max-width: 100%;
  margin: clamp(48px, 5vw, 72px) 0 0;
  padding: 18px clamp(22px, 5vw, 78px);
  background: rgba(0, 212, 255, 0.018);
  border-top: 1px solid var(--glass-border);
}

.research-workflow-strip span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 200ms var(--ease);
  white-space: nowrap;
}

.research-workflow-strip span:hover {
  color: var(--ink);
}

.research-workflow-strip em {
  font-style: normal;
  font-size: 13px;
  color: rgba(0, 212, 255, 0.35);
  line-height: 1;
}

@media (max-width: 900px) {
  .research-track-cards {
    grid-template-columns: 1fr;
    padding: 0 clamp(16px, 4vw, 32px);
  }
  .research-workflow-strip {
    padding: 14px clamp(16px, 4vw, 32px);
  }
}

/* ── Research section v2 additions ─────────────────────────── */

.ra-will-reveal,
.rp-will-reveal {
  opacity: 0;
  transform: translateY(26px);
}

.research-hero-heading {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-size: clamp(38px, 4.4vw, 68px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0 0 16px;
}

.research-track-question {
  margin: 8px 0 16px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(202, 216, 229, 0.78);
  font-style: italic;
}

.research-track-meta-row {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 4px 10px;
  align-items: baseline;
  margin-bottom: 8px;
}

.research-track-meta-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--os-cyan);
  opacity: 0.65;
  white-space: nowrap;
  padding-top: 1px;
}

.research-track-meta-val {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

/* ── Research Program Redesign (rp-*) ──────────────────────── */

.rp-opening {
  max-width: 800px;
  margin: 0 auto clamp(60px, 7vw, 96px);
  text-align: center;
}

.rp-eyebrow {
  display: block;
  margin-bottom: 18px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--os-cyan);
  opacity: 0.7;
}

.rp-title {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-size: clamp(38px, 4.8vw, 72px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 0 0 24px;
  color: var(--ink);
}

.rp-thesis {
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.72;
  color: rgba(202, 216, 229, 0.84);
  max-width: 700px;
  margin: 0 auto;
}

.rp-section-hd {
  margin-bottom: clamp(24px, 3vw, 40px);
}

.rp-section-hd .rp-eyebrow {
  text-align: left;
  margin-bottom: 10px;
}

.rp-section-title {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}

/* Two-Track Research Map */
.rp-tracks {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  gap: 0 clamp(10px, 2vw, 24px);
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto clamp(60px, 7vw, 96px);
}

.rp-track {
  padding: clamp(22px, 2.6vw, 36px);
  background: rgba(5, 13, 24, 0.7);
  border: 1px solid rgba(0, 212, 255, 0.11);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: border-color 240ms var(--ease);
}

.rp-track:hover { border-color: rgba(0, 212, 255, 0.25); }
.rp-track-a { border-top: 3px solid #00d4ff; }
.rp-track-b { border-top: 3px solid #00ffcc; }

.rp-track-hd { margin-bottom: 18px; }

.rp-track-pill-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.rp-track-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00d4ff;
  border: 1px solid rgba(0, 212, 255, 0.28);
  background: rgba(0, 212, 255, 0.07);
}

.rp-pill-b {
  color: #00ffcc;
  border-color: rgba(0, 255, 204, 0.28);
  background: rgba(0, 255, 204, 0.07);
}

.rp-track-sdot {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.rp-track-sdot::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rp-sdot-active::before { background: #00d4ff; box-shadow: 0 0 5px rgba(0,212,255,0.65); }
.rp-sdot-planned::before { background: rgba(0,212,255,0.32); }

.rp-track-name {
  font-size: clamp(16px, 1.65vw, 22px);
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.rp-track-q {
  font-size: clamp(12px, 0.92vw, 13.5px);
  line-height: 1.65;
  color: rgba(202, 216, 229, 0.7);
  font-style: italic;
  margin: 0;
}

.rp-track-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: grid;
  gap: 7px;
}

.rp-track-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: clamp(11.5px, 0.9vw, 13px);
  line-height: 1.5;
  color: var(--muted);
}

.rp-track-list li::before {
  content: '—';
  color: rgba(0, 212, 255, 0.38);
  flex-shrink: 0;
  font-size: 10px;
}

.rp-track-b .rp-track-list li::before { color: rgba(0, 255, 204, 0.38); }

.rp-track-ft {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 16px;
}

.rp-mod-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(0, 212, 255, 0.5);
  border: 1px solid rgba(0, 212, 255, 0.16);
  background: rgba(0, 212, 255, 0.04);
}

.rp-tracks-conn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 0;
}

.rp-conn-line {
  flex: 1;
  width: 1px;
  min-height: 32px;
  background: linear-gradient(180deg, transparent, rgba(0,212,255,0.28) 40%, rgba(0,212,255,0.28) 60%, transparent);
}

.rp-conn-node { flex-shrink: 0; }

.rp-conn-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0, 212, 255, 0.38);
  text-align: center;
  line-height: 1.6;
}

/* Research Logic Matrix */
.rp-matrix {
  max-width: 1100px;
  margin: 0 auto clamp(60px, 7vw, 96px);
}

.rp-matrix-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(0, 212, 255, 0.1);
  border-radius: 14px;
  background: rgba(4, 11, 22, 0.6);
}

.rp-mrow {
  display: grid;
  grid-template-columns: 80px repeat(4, 1fr) 160px 120px;
  min-width: 800px;
}

.rp-mrow + .rp-mrow { border-top: 1px solid rgba(0, 212, 255, 0.07); }
.rp-mhead { background: rgba(0, 212, 255, 0.04); }

.rp-mhead > div,
.rp-mrow-a > div,
.rp-mrow-b > div {
  padding: 11px 13px;
  border-right: 1px solid rgba(0, 212, 255, 0.07);
}

.rp-mhead > div:last-child,
.rp-mrow-a > div:last-child,
.rp-mrow-b > div:last-child { border-right: none; }

.rp-mhead > div {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 212, 255, 0.5);
}

.rp-mrow-a > div,
.rp-mrow-b > div {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted);
}

.rp-mlabel {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  letter-spacing: 0.02em !important;
}

.rp-mrow-a .rp-mlabel { color: #00d4ff !important; }
.rp-mrow-b .rp-mlabel { color: #00ffcc !important; }

.rp-mlabel small {
  display: block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0;
  color: rgba(202,216,229,0.45) !important;
  margin-top: 2px;
}

/* Status Pills */
.rp-sp {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.rp-sp-active {
  background: rgba(0, 212, 255, 0.1);
  color: #00d4ff;
  border: 1px solid rgba(0, 212, 255, 0.26);
}

.rp-sp-planned {
  background: rgba(0, 212, 255, 0.04);
  color: rgba(0, 212, 255, 0.48);
  border: 1px solid rgba(0, 212, 255, 0.13);
}

.rp-sp-progress {
  background: rgba(0, 255, 204, 0.07);
  color: #00ffcc;
  border: 1px solid rgba(0, 255, 204, 0.22);
}

/* Variable → Outcome Flow */
.rp-flow {
  max-width: 1100px;
  margin: 0 auto clamp(60px, 7vw, 96px);
}

.rp-flow-chain {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  gap: 0;
}

.rp-flow-node {
  flex: 1;
  min-width: 140px;
  padding: clamp(14px, 1.6vw, 22px);
  background: rgba(5, 13, 24, 0.7);
  border: 1px solid rgba(0, 212, 255, 0.1);
  border-radius: 14px;
  transition: border-color 220ms var(--ease), transform 220ms var(--ease);
}

.rp-flow-node:hover {
  border-color: rgba(0, 212, 255, 0.22);
  transform: translateY(-2px);
}

.rp-flow-node-last {
  background: rgba(0, 212, 255, 0.05);
  border-color: rgba(0, 212, 255, 0.18);
}

.rp-flow-n {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(0, 212, 255, 0.48);
  margin-bottom: 9px;
}

.rp-flow-node h4 {
  font-size: clamp(11.5px, 0.95vw, 13.5px);
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 6px;
  line-height: 1.2;
}

.rp-flow-node p {
  font-size: 11px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

.rp-flow-arr {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 6px;
}

/* Evidence Grid */
.rp-evidence {
  max-width: 1100px;
  margin: 0 auto clamp(60px, 7vw, 96px);
}

.rp-ev-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.3vw, 16px);
}

.rp-ev-card {
  border-radius: 13px;
  overflow: hidden;
  background: rgba(5, 13, 24, 0.65);
  border: 1px solid rgba(0, 212, 255, 0.09);
  display: flex;
  flex-direction: column;
  transition: transform 240ms var(--ease), border-color 240ms var(--ease);
}

.rp-ev-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 212, 255, 0.22);
}

.rp-ev-real .rp-ev-img {
  aspect-ratio: 4/3;
  overflow: hidden;
}

.rp-ev-real .rp-ev-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.05);
  transition: transform 0.5s var(--ease);
  display: block;
}

.rp-ev-card:hover .rp-ev-img img { transform: scale(1.04); }

.rp-ev-body {
  padding: 13px 15px 15px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.rp-ev-phase {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  width: fit-content;
}

.rp-ph-done {
  color: #00d4ff;
  background: rgba(0, 212, 255, 0.09);
}

.rp-ph-planned {
  color: rgba(0, 212, 255, 0.48);
  background: rgba(0, 212, 255, 0.04);
  border: 1px solid rgba(0, 212, 255, 0.11);
}

.rp-ev-body h4 {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}

.rp-ev-body p {
  font-size: 11px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

.rp-ev-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
  padding-top: 6px;
}

.rp-ev-tags span {
  font-size: 9.5px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}

.rp-ev-ph {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 22px 14px 12px;
  background: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(0,212,255,0.018) 5px, rgba(0,212,255,0.018) 10px);
}

.rp-ev-card.rp-ev-ph {
  border-style: dashed;
  border-color: rgba(0, 212, 255, 0.13);
  background: rgba(4, 11, 22, 0.55);
  justify-content: space-between;
}

.rp-ev-card.rp-ev-ph .rp-ev-phase {
  margin: 0 13px 13px;
  align-self: flex-start;
}

.rp-ev-ph-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.rp-ev-ph h4 {
  font-size: 12px;
  font-weight: 800;
  color: rgba(202,216,229,0.5);
  margin: 0;
}

.rp-ev-ph p {
  font-size: 10.5px;
  line-height: 1.55;
  color: rgba(202,216,229,0.36);
  margin: 0;
}

.rp-ph-note {
  font-size: 9px !important;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0,212,255,0.32) !important;
}

/* Module Cards */
.rp-modules {
  max-width: 1100px;
  margin: 0 auto clamp(60px, 7vw, 96px);
}

.rp-mod-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.3vw, 16px);
}

.rp-mod-card {
  padding: clamp(16px, 1.8vw, 24px);
  background: rgba(5, 13, 24, 0.65);
  border: 1px solid rgba(0, 212, 255, 0.09);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 220ms var(--ease), transform 220ms var(--ease);
}

.rp-mod-card:hover {
  border-color: rgba(0, 212, 255, 0.2);
  transform: translateY(-2px);
}

.rp-mod-a { border-top: 3px solid #00d4ff; }
.rp-mod-b { border-top: 3px solid #5cc8ff; }
.rp-mod-c { border-top: 3px solid #00ffcc; }
.rp-mod-d { border-top: 3px solid #7cffb2; }

.rp-mod-num-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.rp-mod-num {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(0, 212, 255, 0.16);
}

.rp-mod-b .rp-mod-num { color: rgba(92,200,255,0.16); }
.rp-mod-c .rp-mod-num { color: rgba(0,255,204,0.16); }
.rp-mod-d .rp-mod-num { color: rgba(124,255,178,0.16); }

.rp-mod-area {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(202,216,229,0.45);
}

.rp-mod-title {
  font-size: clamp(12.5px, 1vw, 14.5px);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.3;
  margin: 0;
}

.rp-mod-q {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--muted);
  font-style: italic;
  margin: 0;
}

.rp-mod-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.rp-mod-tags span {
  font-size: 9.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  color: var(--muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}

.rp-mod-ft {
  margin-top: auto;
  padding-top: 2px;
}

/* Status Panel */
.rp-status-panel {
  max-width: 1100px;
  margin: 0 auto clamp(48px, 5vw, 72px);
  padding: clamp(26px, 3vw, 44px);
  background: rgba(4, 11, 22, 0.72);
  border: 1px solid rgba(0, 212, 255, 0.1);
  border-radius: 18px;
}

.rp-status-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3vw, 36px);
  margin-bottom: 22px;
}

.rp-status-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.rp-status-col li {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  padding-left: 14px;
  position: relative;
}

.rp-status-col li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: rgba(0,212,255,0.38);
  font-weight: 700;
}

.rp-status-cat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin: 0 0 12px;
}

.rp-sdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rp-sdot-done    { background: #00d4ff; box-shadow: 0 0 5px rgba(0,212,255,0.55); }
.rp-sdot-progress { background: #00ffcc; box-shadow: 0 0 5px rgba(0,255,204,0.45); }
.rp-sdot-planned  { background: rgba(0,212,255,0.28); }

.rp-status-note {
  font-size: 11.5px;
  line-height: 1.65;
  color: rgba(202,216,229,0.42);
  font-style: italic;
  border-top: 1px solid rgba(0,212,255,0.07);
  padding-top: 16px;
  margin: 0;
}

/* Workflow Strip */
.rp-workflow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 0 0;
  border-top: 1px solid rgba(0,212,255,0.07);
}

.rp-workflow span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  transition: color 200ms var(--ease);
}

.rp-workflow span:hover { color: var(--ink); }

.rp-workflow em {
  font-style: normal;
  font-size: 12px;
  color: rgba(0,212,255,0.28);
}

/* Responsive */
@media (max-width: 1024px) {
  .rp-ev-grid { grid-template-columns: repeat(3, 1fr); }
  .rp-mod-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .rp-tracks {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .rp-tracks-conn {
    flex-direction: row;
    height: 36px;
    padding: 0;
    gap: 4px;
  }
  .rp-conn-line {
    flex: 1;
    width: auto;
    height: 1px;
    min-height: unset;
    background: linear-gradient(90deg, transparent, rgba(0,212,255,0.28) 40%, rgba(0,212,255,0.28) 60%, transparent);
  }
  .rp-conn-label { display: none; }
  .rp-ev-grid { grid-template-columns: repeat(2, 1fr); }
  .rp-status-cols { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 620px) {
  .rp-opening { text-align: left; }
  .rp-ev-grid { grid-template-columns: repeat(2, 1fr); }
  .rp-mod-grid { grid-template-columns: 1fr; }
  .rp-flow-node { min-width: 120px; }
}

/* ── Experiments Log v2 additions ──────────────────────────── */

.exp-entry-num {
  margin: 0 0 3px !important;
  font-size: 10px !important;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(92, 200, 255, 0.38) !important;
  line-height: 1 !important;
}

.exp-track-label {
  margin: 0 0 12px !important;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(202, 216, 229, 0.5) !important;
  line-height: 1 !important;
}

.exp-next-step {
  margin-top: 16px !important;
  padding-top: 12px;
  border-top: 1px solid rgba(92, 200, 255, 0.1);
  font-size: 13px !important;
  color: rgba(202, 216, 229, 0.72) !important;
  line-height: 1.5 !important;
}

.exp-next-step b {
  color: rgba(92, 200, 255, 0.65) !important;
  font-weight: 700;
}

/* Workflow chain responsive — collapse to 4 cols on tablet, 2 on mobile */
@media (max-width: 1100px) {
  .workflow-chain {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .workflow-chain {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ═══════════════════════════════════════════════════════════════
   Home — Apple-style cinematic scroll intro  (ha-* namespace)
   ─────────────────────────────────────────────────────────────── */

/* Section: block, no padding, no grid, full height auto */
#home.admissions-home.active-app {
  display: block !important;
  position: relative;
  min-height: auto;
  padding: 0;
  /* clear old flex overrides */
  flex-direction: unset;
  justify-content: unset;
  align-items: unset;
}

/* ── Sticky photo layer ─────────────────────────────── */
.ha-sticky {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
  /* dark fallback while image loads */
  background: #020810;
}

.ha-photo {
  position: absolute;
  inset: 0;
  transform: scale(1.08);
  transform-origin: center center;
  will-change: transform, filter;
}

.ha-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

/* Gradient overlay: gentle top vignette, heavy bottom for text */
.ha-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(2,  8, 16, 0.52) 0%,
      rgba(2,  8, 16, 0.10) 26%,
      rgba(2,  8, 16, 0.20) 55%,
      rgba(2,  8, 16, 0.90) 100%
    ),
    radial-gradient(ellipse at 50% 65%, transparent 38%, rgba(2, 8, 16, 0.30) 100%);
}

/* Title — bottom-left, shifts up on scroll */
.ha-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 clamp(40px, 8vw, 112px) clamp(56px, 6vw, 82px);
  z-index: 2;
  will-change: transform;
}

.ha-label {
  display: block;
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--os-cyan);
  opacity: 0.84;
}

.ha-heading {
  margin: 0 0 10px;
  font-size: clamp(72px, 11vw, 152px);
  line-height: 0.88;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-shadow:
    0 0 80px rgba(0, 212, 255, 0.18),
    0 2px 40px rgba(0, 0, 0, 0.6);
}

.ha-sublab {
  margin: 0 0 12px;
  font-size: clamp(14px, 1.3vw, 20px);
  font-weight: 700;
  color: rgba(218, 238, 255, 0.9);
  letter-spacing: 0.005em;
}

.ha-tagline {
  max-width: 540px;
  margin: 0;
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.66;
  color: rgba(202, 216, 229, 0.82);
  letter-spacing: 0.01em;
}

/* Scroll cue — bottom right, bobs and fades on scroll */
.ha-scroll-cue {
  position: absolute;
  bottom: 28px;
  right: clamp(40px, 8vw, 112px);
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(122, 172, 191, 0.75);
  pointer-events: none;
  animation: haScrollBob 2.6s ease-in-out infinite;
}

@keyframes haScrollBob {
  0%, 100% { transform: translateY(0);   opacity: 0.65; }
  50%       { transform: translateY(6px); opacity: 1;    }
}

/* ── Content sheet — slides over photo ─────────────── */
.ha-content {
  position: relative;
  z-index: 2;
  background: #020810;
  border-radius: 22px 22px 0 0;
  /* peek: show the content's rounded top edge before user scrolls */
  margin-top: -22px;
  padding: clamp(60px, 7vw, 96px) clamp(40px, 8vw, 112px) clamp(72px, 8vw, 96px);
}

/* ── Intro block ────────────────────────────────────── */
.ha-intro {
  max-width: 720px;
  margin: 0 auto clamp(64px, 7vw, 88px);
  text-align: center;
}

.ha-intro-label {
  display: block;
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--os-cyan);
  opacity: 0.7;
}

.ha-intro-heading {
  margin: 0 0 18px;
  font-size: clamp(24px, 3.2vw, 44px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.ha-intro-text {
  margin: 0 0 34px;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.7;
  color: var(--muted);
}

.ha-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.ha-ctas .button {
  padding: 0 28px;
  min-height: 48px;
  border-radius: 10px;
}

/* ── Material-to-System Visual ──────────────────────── */
.ha-material {
  max-width: 880px;
  margin: 0 auto clamp(64px, 7vw, 88px);
  text-align: center;
}

.ha-material-label {
  display: block;
  margin: 0 0 24px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.ha-material-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 22px;
}

.ha-mat-node {
  padding: 10px 22px;
  background: rgba(0, 212, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  font-size: clamp(13px, 1.1vw, 17px);
  font-weight: 700;
  color: var(--ink);
  text-transform: capitalize;
  letter-spacing: 0.02em;
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}

.ha-mat-node:hover {
  background: rgba(0, 212, 255, 0.10);
  border-color: rgba(0, 212, 255, 0.32);
}

.ha-mat-arrow {
  padding: 0 10px;
  font-size: 16px;
  color: rgba(0, 212, 255, 0.30);
  line-height: 1;
}

.ha-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.ha-tags span {
  padding: 5px 14px;
  background: rgba(0, 212, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}

.ha-tags span:hover {
  color: var(--ink);
  border-color: rgba(0, 212, 255, 0.26);
}

/* ── Two-track research overview ───────────────────── */
.ha-tracks {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: start;
  gap: 0 clamp(36px, 4.5vw, 72px);
  max-width: 1100px;
  margin: 0 auto clamp(64px, 7vw, 96px);
}

.ha-track-divider {
  align-self: stretch;
  min-height: 200px;
  background: var(--glass-border);
  margin-top: 28px;
}

.ha-track-eyebrow {
  display: block;
  margin: 0 0 11px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--os-cyan);
  opacity: 0.68;
}

.ha-track-name {
  margin: 0 0 13px;
  font-size: clamp(19px, 1.9vw, 26px);
  font-weight: 800;
  line-height: 1.16;
  color: var(--ink);
}

.ha-track-desc {
  margin: 0 0 18px;
  font-size: clamp(13px, 0.98vw, 15px);
  line-height: 1.74;
  color: var(--muted);
}

.ha-track-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ha-track-pills span {
  padding: 4px 12px;
  background: rgba(0, 212, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}

.ha-track-pills span:hover {
  color: var(--ink);
  border-color: rgba(0, 212, 255, 0.30);
}

/* ── Concept cards: Structure / Interface / System ─── */
.ha-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 24px);
  max-width: 1100px;
  margin: 0 auto clamp(64px, 7vw, 88px);
}

.ha-card {
  padding: clamp(24px, 2.5vw, 38px);
  background: rgba(0, 212, 255, 0.03);
  border: 1px solid var(--glass-border);
  border-top: 2px solid rgba(0, 212, 255, 0.22);
  border-radius: 12px;
  transition: background 220ms var(--ease), border-color 220ms var(--ease),
              transform 220ms var(--ease), box-shadow 220ms var(--ease);
}

.ha-card:hover {
  background: rgba(0, 212, 255, 0.07);
  border-color: rgba(0, 212, 255, 0.26);
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
}

.ha-card-num {
  display: block;
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--os-cyan);
  opacity: 0.58;
}

.ha-card h3 {
  margin: 0 0 11px;
  font-size: clamp(18px, 1.75vw, 26px);
  font-weight: 800;
  line-height: 1.14;
  color: var(--ink);
}

.ha-card p {
  margin: 0;
  font-size: clamp(13.5px, 1vw, 15px);
  line-height: 1.70;
  color: var(--muted);
}

/* ── Evidence strip ─────────────────────────────────── */
.ha-evidence {
  max-width: 1100px;
  margin: 0 auto;
}

.ha-evidence-strip {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 18px 28px;
  background: rgba(0, 212, 255, 0.022);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
}

.ha-evidence-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(0,212,255,0.055) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: haStripSweep 3.8s ease-in-out infinite;
}

@keyframes haStripSweep {
  0%        { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}

.ha-evidence-strip span:not(.ha-sep) {
  flex: 1;
  position: relative;
  z-index: 1;
  padding: 2px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  transition: color 200ms var(--ease);
}

.ha-evidence-strip:hover span:not(.ha-sep) { color: var(--ink); }

.ha-sep {
  flex-shrink: 0;
  width: 1px;
  height: 18px;
  background: var(--glass-border);
}

/* ── Mobile ─────────────────────────────────────────── */
@media (max-width: 860px) {
  .ha-title {
    padding-left: clamp(20px, 5vw, 36px);
    padding-right: clamp(20px, 5vw, 36px);
    padding-bottom: clamp(36px, 5vw, 52px);
  }

  .ha-heading { font-size: clamp(56px, 15vw, 96px); }
  .ha-tagline { display: none; }

  .ha-content {
    padding: clamp(40px, 6vw, 64px) clamp(20px, 5vw, 36px) clamp(56px, 7vw, 80px);
    border-radius: 16px 16px 0 0;
  }

  .ha-scroll-cue {
    right: clamp(20px, 5vw, 36px);
    bottom: 20px;
  }

  .ha-cards { grid-template-columns: 1fr; }

  .ha-tracks {
    grid-template-columns: 1fr;
    gap: clamp(36px, 6vw, 52px) 0;
  }
  .ha-track-divider { display: none; }

  .ha-material-flow { gap: 4px; }

  .ha-evidence-strip {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 14px 18px;
  }
  .ha-sep { display: none; }
  .ha-evidence-strip span:not(.ha-sep) { flex: none; min-width: 120px; }
}

/* ── Reduced motion: disable all scroll-driven effects ── */
@media (prefers-reduced-motion: reduce) {
  .ha-photo {
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .ha-title {
    transform: none !important;
    transition: none !important;
  }
  .ha-scroll-cue { animation: none !important; opacity: 0.65; }
  .ha-content { margin-top: 0; }
}

/* Member Login button — align with site palette */
body:not(.locked) .guest-login-button {
  top: 18px;
  right: clamp(18px, 4vw, 60px);
  min-height: 38px;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink);
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}

body:not(.locked) .guest-login-button:hover {
  background: rgba(0, 212, 255, 0.16);
  border-color: rgba(0, 212, 255, 0.40);
}

/* ══════════════════════════════════════════════════════════════
   HOME  —  Premium Scientific Editorial additions
   IBM Plex Serif only on metric values; everything else inherits
   the dark scientific system already in place.
   ══════════════════════════════════════════════════════════════ */

/* ── Thesis block ────────────────────────────────────────────── */
.ha-thesis {
  max-width: 760px;
  margin: 0 auto clamp(56px, 6vw, 80px);
  text-align: center;
}

.ha-thesis-heading {
  margin: 0 0 22px;
  font-family: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  font-size: clamp(28px, 4vw, 54px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.ha-thesis-sub {
  margin: 0 auto 40px;
  max-width: 600px;
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 1.74;
  color: var(--muted);
}

/* ── Metrics grid ────────────────────────────────────────────── */
.ha-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--glass-border);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  overflow: hidden;
  max-width: 1100px;
  margin: 0 auto clamp(64px, 7vw, 88px);
}

.ha-metric {
  background: rgba(0, 212, 255, 0.025);
  padding: clamp(26px, 3.2vw, 42px) clamp(18px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background 0.2s var(--ease);
}

.ha-metric:hover {
  background: rgba(0, 212, 255, 0.06);
}

/* Serif numbers signal measured data, not marketing copy */
.ha-metric-val {
  display: block;
  font-family: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  font-size: clamp(34px, 3.8vw, 50px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}

.ha-metric-val small {
  font-family: inherit;
  font-size: 0.52em;
  font-weight: 400;
  letter-spacing: 0;
  vertical-align: 0.18em;
  opacity: 0.8;
}

.ha-metric-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--muted);
  line-height: 1.45;
}

.ha-metric-label em {
  display: block;
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.6;
  margin-top: 4px;
}

/* ── Card data footnote ──────────────────────────────────────── */
.ha-card-data {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--glass-border);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--os-cyan);
  opacity: 0.6;
  line-height: 1.5;
}

/* ── Scroll-reveal (Apple-style staggered fade+rise) ─────────── */
/*
  Elements get .ha-will-reveal via JS only when reduced-motion
  is NOT preferred. The default state (no JS) is fully visible.
*/
.ha-will-reveal {
  opacity: 0;
  transform: translateY(26px);
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .ha-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .ha-metric-val {
    font-size: clamp(28px, 9vw, 38px);
  }
}

/* ══════════════════════════════════════════════════════════════
   FAILURE ANALYSIS SYSTEM v3 — fas-* scoped, zero global changes
   ══════════════════════════════════════════════════════════════ */

/* Hero */
.fas-hero {
  position:relative; z-index:1;
  display:flex; gap:40px; align-items:flex-start;
  margin-bottom:52px;
}
.fas-hero-copy { flex:1 1 0; min-width:0; }
.fas-hero-sub {
  max-width:560px; color:rgba(232,247,255,.7);
  font-size:15px; line-height:1.72; margin:16px 0 0;
}

/* Principle card */
.fas-principle {
  flex:0 0 min(420px,46%);
  border:1px solid rgba(98,255,230,.18);
  background:rgba(5,18,32,.72);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-radius:20px; padding:26px 26px 26px 30px;
  box-shadow:0 20px 60px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.04);
  position:relative; overflow:hidden;
}
.fas-principle::before {
  content:""; position:absolute;
  left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(to bottom,#2fffe0,rgba(47,255,224,.06));
  border-radius:3px 0 0 3px;
}
.fas-principle-h {
  font-size:clamp(15px,1.6vw,19px); font-weight:800;
  color:#e8f7ff; letter-spacing:-.03em; margin:0 0 13px; line-height:1.2;
}
.fas-principle-p {
  margin:0; color:rgba(232,247,255,.68); font-size:13.5px; line-height:1.74;
}

/* Section blocks */
.fas-section-block { margin-bottom:52px; position:relative; z-index:1; }
.fas-eyebrow {
  color:#2fffe0; font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; margin:0 0 20px;
  font-weight:800; font-family:'SF Mono','JetBrains Mono',monospace;
}

/* Taxonomy grid */
.fas-tax-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
.fas-tax-card {
  border:1px solid rgba(98,255,230,.12);
  background:rgba(5,18,32,.62);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-radius:18px; padding:22px 18px;
  box-shadow:0 12px 40px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.03);
  transition:border-color .22s ease,transform .22s ease;
  position:relative; overflow:hidden;
}
.fas-tax-card::before {
  content:""; position:absolute;
  top:0; left:0; right:0; height:2px; border-radius:18px 18px 0 0;
}
.fas-tax-card:hover { border-color:rgba(98,255,230,.28); transform:translateY(-3px); }
.fas-tax-label {
  display:inline-flex; padding:4px 10px; border-radius:999px;
  font-size:9px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:12px;
}
.fas-tax-card h3 {
  font-size:14px; font-weight:800; color:#e8f7ff;
  letter-spacing:-.025em; margin:0 0 9px; line-height:1.25;
}
.fas-tax-card p { margin:0; color:rgba(232,247,255,.6); font-size:12.5px; line-height:1.65; }

/* Taxonomy category theming */
.fas-tax-material::before { background:linear-gradient(90deg,#2fffe0,transparent); }
.fas-tax-material .fas-tax-label { background:rgba(47,255,224,.1); color:#2fffe0; }
.fas-tax-coating::before { background:linear-gradient(90deg,#a8b4ff,transparent); }
.fas-tax-coating .fas-tax-label { background:rgba(168,180,255,.1); color:#a8b4ff; }
.fas-tax-structural::before { background:linear-gradient(90deg,#ff7a7a,transparent); }
.fas-tax-structural .fas-tax-label { background:rgba(255,122,122,.1); color:#ff7a7a; }
.fas-tax-testing::before { background:linear-gradient(90deg,#ffd45c,transparent); }
.fas-tax-testing .fas-tax-label { background:rgba(255,212,92,.1); color:#ffd45c; }

/* Failure analysis cards grid */
.fas-cards-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.fas-fa-card {
  border:1px solid rgba(98,255,230,.13);
  background:rgba(3,12,24,.74);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-radius:20px; overflow:hidden;
  box-shadow:0 16px 50px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .22s ease,box-shadow .22s ease;
}
.fas-fa-card:hover {
  border-color:rgba(98,255,230,.26);
  box-shadow:0 22px 72px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.05);
}
.fas-fa-head {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px; border-bottom:1px solid rgba(98,255,230,.09);
  background:rgba(5,18,32,.52); gap:12px; flex-wrap:wrap;
}
.fas-fa-head-left { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fas-fid {
  font-family:'SF Mono','JetBrains Mono',monospace;
  font-size:12px; font-weight:800; color:#2fffe0;
  background:rgba(47,255,224,.09); border:1px solid rgba(47,255,224,.22);
  border-radius:6px; padding:3px 9px; letter-spacing:.06em;
}
.fas-cat-tag {
  border-radius:999px; padding:3px 10px;
  font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}
/* Category pill colors */
.fas-cat-material  { background:rgba(47,255,224,.1);  color:#2fffe0; }
.fas-cat-coating   { background:rgba(168,180,255,.1); color:#a8b4ff; }
.fas-cat-structural{ background:rgba(255,122,122,.1); color:#ff7a7a; }
.fas-cat-testing   { background:rgba(255,212,92,.1);  color:#ffd45c; }
.fas-cat-filtration{ background:rgba(120,229,255,.1); color:#78e5ff; }

/* Status badges */
.fas-sbadge {
  border-radius:999px; padding:4px 10px;
  font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid transparent; white-space:nowrap; flex-shrink:0;
}
.fas-sbadge-observed  { background:rgba(255,183,60,.09); color:#ffd98a; border-color:rgba(255,183,60,.22); }
.fas-sbadge-analysis  { background:rgba(100,160,255,.09);color:#a0c4ff; border-color:rgba(100,160,255,.22); }
.fas-sbadge-protocol  { background:rgba(47,255,180,.09); color:#4dffc8; border-color:rgba(47,255,180,.22); }
.fas-sbadge-retesting { background:rgba(255,140,60,.09); color:#ffaa78; border-color:rgba(255,140,60,.22); }
.fas-sbadge-validated { background:rgba(80,255,100,.09); color:#82ff9e; border-color:rgba(80,255,100,.22); }
.fas-sbadge-archived  { background:rgba(140,150,175,.09);color:#909ab0; border-color:rgba(140,150,175,.22); }

/* Card fields */
.fas-fa-body { padding:18px; display:flex; flex-direction:column; gap:13px; }
.fas-field   { display:flex; flex-direction:column; gap:5px; }
.fas-fl {
  color:rgba(232,247,255,.38); font-size:9px;
  text-transform:uppercase; letter-spacing:.15em; font-weight:800;
  font-family:'SF Mono','JetBrains Mono',monospace;
}
.fas-field p { margin:0; color:rgba(232,247,255,.8); font-size:12.5px; line-height:1.68; }
.fas-field-2col {
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  padding:13px; border-radius:12px;
  background:rgba(47,255,224,.02); border:1px solid rgba(98,255,230,.07);
}
.fas-vars { display:flex; flex-wrap:wrap; gap:5px; }
.fas-vars span {
  background:rgba(98,255,230,.07); border:1px solid rgba(98,255,230,.14);
  color:rgba(232,247,255,.7); border-radius:999px;
  padding:3px 9px; font-size:10px; font-weight:600;
}
.fas-evp {
  margin-top:2px; padding:8px 14px; border-radius:8px;
  border:1px dashed rgba(98,255,230,.14); color:rgba(232,247,255,.28);
  font-size:10px; letter-spacing:.03em; text-align:center;
}

/* Matrix table */
.fas-matrix-wrap {
  border:1px solid rgba(98,255,230,.13); border-radius:18px; overflow:auto;
  background:rgba(3,10,22,.74);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 16px 50px rgba(0,0,0,.24);
  scrollbar-width:thin; scrollbar-color:rgba(47,255,224,.18) transparent;
}
.fas-matrix { width:100%; border-collapse:collapse; font-size:12.5px; min-width:780px; }
.fas-matrix thead th {
  padding:12px 16px; text-align:left;
  color:rgba(232,247,255,.38); font-size:9px; text-transform:uppercase;
  letter-spacing:.15em; font-weight:800;
  font-family:'SF Mono','JetBrains Mono',monospace;
  border-bottom:1px solid rgba(98,255,230,.1);
  background:rgba(5,18,32,.6); white-space:nowrap;
}
.fas-matrix tbody tr { border-bottom:1px solid rgba(98,255,230,.06); transition:background .15s; }
.fas-matrix tbody tr:last-child { border-bottom:none; }
.fas-matrix tbody tr:hover { background:rgba(47,255,224,.04); }
.fas-matrix tbody td { padding:12px 16px; vertical-align:top; color:rgba(232,247,255,.75); line-height:1.5; }
.fas-matrix tbody td:first-child { white-space:nowrap; }
.fas-matrix tbody td code {
  font-family:'SF Mono','JetBrains Mono',monospace;
  color:#2fffe0; font-size:11px; font-weight:700;
}

/* Process timeline */
.fas-timeline-process { display:flex; align-items:flex-start; }
.fas-tl-step {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:13px;
  position:relative; z-index:1;
}
.fas-tl-node {
  width:38px; height:38px; border-radius:50%;
  border:2px solid rgba(47,255,224,.38);
  background:rgba(4,14,28,.9);
  box-shadow:0 0 22px rgba(47,255,224,.16),inset 0 1px 0 rgba(47,255,224,.1);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.fas-tl-node span {
  font-size:12px; font-weight:800; color:#2fffe0;
  font-family:'SF Mono','JetBrains Mono',monospace;
}
.fas-tl-connector {
  flex:0 0 auto; width:40px; height:1px; margin-top:18px; align-self:flex-start;
  background:linear-gradient(90deg,rgba(47,255,224,.28),rgba(47,255,224,.06));
}
.fas-tl-content { text-align:center; padding:0 6px; }
.fas-tl-content h4 {
  font-size:13px; font-weight:800; color:#e8f7ff;
  letter-spacing:-.025em; margin:0 0 6px; line-height:1.25;
}
.fas-tl-content p { margin:0; color:rgba(232,247,255,.58); font-size:11.5px; line-height:1.62; }

/* Summary block */
.fas-summary-block {
  position:relative; z-index:1;
  border:1px solid rgba(98,255,230,.18);
  background:rgba(5,18,32,.72);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-radius:22px; padding:34px 40px;
  box-shadow:0 20px 60px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.04);
}
.fas-summary-title {
  font-size:clamp(20px,2.8vw,28px); font-weight:800;
  color:#e8f7ff; letter-spacing:-.04em; margin:0 0 14px;
}
.fas-summary-body {
  max-width:740px; color:rgba(232,247,255,.76);
  font-size:14.5px; line-height:1.74; margin:0 0 12px;
}
.fas-summary-note {
  margin:0; color:rgba(232,247,255,.34); font-size:11.5px;
  font-style:italic; letter-spacing:.02em;
}

/* Responsive */
@media (max-width:1200px) {
  .fas-tax-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:960px) {
  .fas-hero { flex-direction:column; }
  .fas-principle { flex:none; width:100%; }
  .fas-cards-grid { grid-template-columns:1fr; }
  .fas-timeline-process { flex-direction:column; gap:0; }
  .fas-tl-step { flex-direction:row; align-items:flex-start; text-align:left; gap:14px; width:100%; }
  .fas-tl-connector {
    width:1px; height:24px; margin:0 0 0 18px; align-self:auto;
    background:linear-gradient(to bottom,rgba(47,255,224,.28),rgba(47,255,224,.06));
  }
  .fas-tl-content { text-align:left; padding:0 0 18px; }
  .fas-tl-node { flex-shrink:0; }
}
@media (max-width:640px) {
  .fas-tax-grid { grid-template-columns:1fr; }
  .fas-field-2col { grid-template-columns:1fr; }
  .fas-summary-block { padding:22px 18px; }
}

/* ── Evidence Record panels ──────────────────────────────── */
.fas-evp-section {
  margin-top:4px;
  border-top:1px solid rgba(98,255,230,.1);
  padding-top:14px;
}
.fas-evp-label {
  color:rgba(47,255,224,.4); font-size:8.5px; letter-spacing:.2em;
  text-transform:uppercase; font-family:'SF Mono','JetBrains Mono',monospace;
  font-weight:800; margin:0 0 10px; display:block;
}
.fas-evp-inner {
  display:grid; grid-template-columns:160px 1fr; gap:14px; align-items:start;
}
.fas-evp-img-wrap {
  width:100%; aspect-ratio:4/3; border-radius:10px; overflow:hidden;
  border:1px solid rgba(98,255,230,.13); background:rgba(4,12,24,.85);
  flex-shrink:0;
}
.fas-evp-img-wrap img {
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.86) contrast(1.07);
  transition:transform .4s ease, filter .3s ease;
}
.fas-evp-img-wrap img:hover {
  transform:scale(1.05); filter:saturate(.94) contrast(1.09);
}
.fas-evp-ph {
  width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px;
  color:rgba(232,247,255,.17); font-size:10px; text-align:center;
  padding:12px; box-sizing:border-box; line-height:1.5;
}
.fas-evp-ph svg { width:26px; height:26px; opacity:.22; }
.fas-evp-details { display:flex; flex-direction:column; gap:8px; }
.fas-evp-cap {
  margin:0; color:rgba(232,247,255,.62); font-size:11px;
  line-height:1.55; font-style:italic;
}
.fas-evp-tags { display:flex; flex-wrap:wrap; gap:4px; }
.fas-evp-tags span {
  background:rgba(47,255,224,.07); border:1px solid rgba(47,255,224,.14);
  color:rgba(232,247,255,.56); border-radius:999px;
  padding:2px 7px; font-size:9px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
}
.fas-evp-meta {
  margin:0; color:rgba(232,247,255,.26); font-size:9.5px;
  font-family:'SF Mono','JetBrains Mono',monospace; line-height:1.6;
}
.fas-evp-note {
  margin:0; color:rgba(232,247,255,.48); font-size:11px; line-height:1.58;
}
@media (max-width:640px) {
  .fas-evp-inner { grid-template-columns:1fr; }
}

/* ── De-neonification overrides — scoped to .failure-log-section ── */
.failure-log-section {
  background: radial-gradient(ellipse 80% 60% at 50% 10%, rgba(14,30,36,.95) 0%, #060d10 100%);
}
.failure-log-section::before {
  opacity: .016;
}
.failure-log-section .fas-principle {
  border-color: rgba(180,210,220,.14);
  background: rgba(10,22,28,.55);
}
.failure-log-section .fas-tax-card {
  border-color: rgba(180,210,220,.12);
  background: rgba(10,22,28,.5);
}
.failure-log-section .fas-fa-card {
  border-color: rgba(180,210,220,.11);
  background: rgba(8,18,24,.55);
}
.failure-log-section .fas-fid {
  color: rgba(140,210,200,.82);
  background: rgba(140,210,200,.07);
  border-color: rgba(140,210,200,.14);
}
.failure-log-section .fas-cat-tag {
  border-radius: 3px;
}
.failure-log-section .fas-sbadge {
  border-radius: 4px;
  font-size: 9.5px;
  letter-spacing: .04em;
}
.failure-log-section .fas-sbadge-protocol {
  background: rgba(100,190,160,.1);
  color: rgba(140,210,185,.8);
  border-color: rgba(100,190,160,.2);
}
.failure-log-section .fas-sbadge-retesting {
  background: rgba(160,170,100,.09);
  color: rgba(195,205,130,.75);
  border-color: rgba(160,170,100,.18);
}
.failure-log-section .fas-sbadge-analysis {
  background: rgba(100,140,180,.1);
  color: rgba(140,175,210,.75);
  border-color: rgba(100,140,180,.2);
}
.failure-log-section .fas-sbadge-observed {
  background: rgba(150,130,100,.09);
  color: rgba(195,180,140,.72);
  border-color: rgba(150,130,100,.18);
}
.failure-log-section .fas-tl-node {
  box-shadow: none;
  border-color: rgba(140,210,200,.22);
  background: rgba(10,22,28,.9);
  color: rgba(140,210,200,.75);
}
.failure-log-section .fas-evp-section {
  border-top-color: rgba(180,210,220,.08);
}
.failure-log-section .fas-evp-tags span {
  border-radius: 3px;
  background: rgba(140,200,190,.06);
  border-color: rgba(140,200,190,.12);
  color: rgba(232,247,255,.48);
}
.failure-log-section .fas-matrix th {
  color: rgba(140,210,200,.7);
  border-bottom-color: rgba(140,210,200,.12);
}
.failure-log-section .fas-matrix td code {
  color: rgba(140,210,200,.75);
}
.failure-log-section .fas-eyebrow {
  color: rgba(140,210,200,.55);
}
.failure-log-section .fas-section-sub {
  margin: -8px 0 18px;
  font-size: 13px;
  color: rgba(232,247,255,.4);
  line-height: 1.55;
}
.failure-log-section .fas-summary-block {
  border-color: rgba(180,210,220,.1);
  background: rgba(8,18,24,.55);
}

/* ── ACM-Lab Member Filter Bar ── */
.member-filter-section {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 28px;
  padding: 20px 24px 16px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}

.mfs-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.mfs-title-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mfs-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(232,247,255,.45);
}

.mfs-sub {
  font-size: 12px;
  color: rgba(232,247,255,.3);
}

.mfs-mode-toggle {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.mfs-mode-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.1);
  background: transparent;
  color: rgba(232,247,255,.4);
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
  letter-spacing: .03em;
}

.mfs-mode-btn:hover {
  color: rgba(232,247,255,.7);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
}

.mfs-mode-btn.active {
  background: rgba(62,205,180,.12);
  border-color: rgba(62,205,180,.3);
  color: rgba(62,205,180,.9);
}

.mfs-modes-inactive .mfs-mode-btn {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

.member-scroll-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
  -webkit-overflow-scrolling: touch;
  /* prevent row from collapsing */
  min-width: 0;
  width: 100%;
}

.member-scroll-row::-webkit-scrollbar {
  height: 3px;
}

.member-scroll-row::-webkit-scrollbar-track {
  background: transparent;
}

.member-scroll-row::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12);
  border-radius: 2px;
}

.member-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: border-color .15s, background .15s;
  color: inherit;
  font-family: inherit;
}

.member-chip:hover {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}

.member-chip.active {
  border-color: rgba(62,205,180,.35);
  background: rgba(62,205,180,.1);
}

.member-chip.active .member-avatar {
  background: rgba(62,205,180,.2);
  color: rgba(62,205,180,.95);
  border-color: rgba(62,205,180,.3);
}

.member-chip.active .member-chip-name {
  color: rgba(232,247,255,.92);
}

.member-avatar {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(232,247,255,.5);
  flex-shrink: 0;
}

/* "All Posts" chip — wider avatar area */
.member-chip[data-member-id="all"] {
  padding: 6px 14px;
}

.member-chip[data-member-id="all"] .member-avatar {
  font-size: 13px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
}

.member-chip-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.member-chip-name {
  font-size: 12px;
  font-weight: 600;
  color: rgba(232,247,255,.7);
  line-height: 1.2;
}

.member-chip-role {
  font-size: 10px;
  color: rgba(232,247,255,.32);
  line-height: 1.2;
}

.mfs-status {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: rgba(232,247,255,.35);
  min-height: 16px;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .member-filter-section {
    padding: 14px 14px 12px;
    border-radius: 10px;
  }
  .mfs-header {
    flex-direction: column;
    gap: 10px;
  }
  .mfs-mode-toggle {
    width: 100%;
  }
  .mfs-mode-btn {
    flex: 1;
    text-align: center;
  }
  .member-chip-role {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   Experiments Log — redesign  (el-* namespace)
   ══════════════════════════════════════════════════════════════ */

/* ── Section-level tokens (scoped to .experiments-lab-page) ── */
.experiments-lab-page {
  --el-a:    #00d4ff;
  --el-b:    #00ffcc;
  --el-coat: #5cc8ff;
  --el-filt: #7cffb2;
  --el-ab:   #a8d8ff;
  --el-muted: rgba(168, 184, 199, 0.82);
  --el-card:  rgba(255,255,255,0.046);
  --el-bord:  rgba(0,212,255,0.13);
  --el-ease:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Reveal animation ─────────────────────────────────────── */
.el-will-reveal {
  opacity: 0;
  transform: translateY(26px);
}

/* ── Opening ───────────────────────────────────────────────── */
.el-opening {
  max-width: 860px;
  margin: 0 auto clamp(56px,6.5vw,88px);
  text-align: center;
}

.el-eyebrow {
  display: block;
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--el-a);
  opacity: 0.72;
}

.el-title {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-size: clamp(40px, 5vw, 76px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.97;
  margin: 0 0 20px;
  color: #f5faff;
}

.el-thesis {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.62;
  color: var(--el-muted);
  margin: 0 0 40px;
}

/* Summary strip */
.el-summary-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 0;
  padding: 18px 24px;
  background: rgba(0,212,255,0.045);
  border: 1px solid var(--el-bord);
  border-radius: 12px;
}

.el-sum-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0 20px;
}

.el-sum-n {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  color: #f5faff;
  line-height: 1;
}

.el-sum-l {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--el-muted);
}

.el-sum-div {
  display: block;
  width: 1px;
  height: 28px;
  background: rgba(0,212,255,0.16);
}

.el-sum-track {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 18px;
  font-size: 12px;
  font-weight: 600;
  color: var(--el-muted);
}

.el-track-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.el-sum-a .el-track-dot { background: var(--el-a); box-shadow: 0 0 6px rgba(0,212,255,0.6); }
.el-sum-b .el-track-dot { background: var(--el-b); box-shadow: 0 0 6px rgba(0,255,204,0.5); }

/* ── Section heading ────────────────────────────────────────── */
.el-section-hd {
  max-width: 900px;
  margin-bottom: clamp(24px, 3vw, 36px);
}

.el-section-hd .el-eyebrow {
  text-align: left;
}

.el-section-h3 {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.22;
  color: #f5faff;
  margin: 0;
}

/* ── Timeline wrapper ───────────────────────────────────────── */
.el-timeline-wrap {
  max-width: 1200px;
  margin: 0 auto clamp(64px, 7vw, 100px);
}

/* ── Timeline spine ─────────────────────────────────────────── */
.el-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-left: 32px;
}

.el-timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg,
    rgba(0,212,255,0) 0%,
    rgba(0,212,255,0.55) 15%,
    rgba(0,255,204,0.5) 55%,
    rgba(0,212,255,0.18) 85%,
    rgba(0,212,255,0) 100%
  );
}

/* ── Entry card ─────────────────────────────────────────────── */
.el-entry {
  position: relative;
  display: grid;
  grid-template-columns: 148px 1fr 220px;
  gap: 0;
  background: var(--el-card);
  border: 1px solid var(--el-bord);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.el-entry:hover {
  border-color: rgba(0,212,255,0.28);
  box-shadow: 0 12px 48px rgba(0,0,0,0.28);
}

/* Spine connector node */
.el-entry::before {
  content: '';
  position: absolute;
  left: -39px;
  top: 28px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--el-a);
  border: 3px solid #050b14;
  box-shadow: 0 0 14px rgba(0,212,255,0.6);
  z-index: 1;
}

.el-entry-active::before {
  background: var(--el-b);
  box-shadow: 0 0 18px rgba(0,255,204,0.7);
  animation: elNodePulse 2.4s ease-in-out infinite;
}

.el-entry-planned::before {
  background: rgba(0,212,255,0.28);
  box-shadow: none;
}

@keyframes elNodePulse {
  0%, 100% { box-shadow: 0 0 10px rgba(0,255,204,0.55); }
  50%       { box-shadow: 0 0 26px rgba(0,255,204,0.9); }
}

/* Active entry border accent */
.el-entry-active {
  border-color: rgba(0,255,204,0.22);
}

.el-entry-done {
  border-color: rgba(0,212,255,0.18);
}

.el-entry-planned {
  opacity: 0.82;
}

/* ── Entry rail (left metadata column) ─────────────────────── */
.el-entry-rail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 16px 22px 20px;
  border-right: 1px solid var(--el-bord);
  background: rgba(0,0,0,0.18);
}

.el-entry-num {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 700;
  color: rgba(0,212,255,0.35);
  line-height: 1;
  letter-spacing: -0.02em;
}

.el-entry-date {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #f5faff;
  line-height: 1;
}

/* Track badges */
.el-track-badge {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.2;
  width: fit-content;
}

.el-track-a    { background: rgba(0,212,255,0.12); color: var(--el-a);    border: 1px solid rgba(0,212,255,0.22); }
.el-track-b    { background: rgba(0,255,204,0.1);  color: var(--el-b);    border: 1px solid rgba(0,255,204,0.2);  }
.el-track-coat { background: rgba(92,200,255,0.1); color: var(--el-coat); border: 1px solid rgba(92,200,255,0.2); }
.el-track-filt { background: rgba(124,255,178,0.1);color: var(--el-filt); border: 1px solid rgba(124,255,178,0.2);}
.el-track-ab   { background: rgba(168,216,255,0.08);color: var(--el-ab);  border: 1px solid rgba(168,216,255,0.18);}

/* Status pills */
.el-status-pill {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  width: fit-content;
}

.el-pill-done     { background: rgba(0,212,255,0.14); color: var(--el-a); border: 1px solid rgba(0,212,255,0.26); }
.el-pill-progress { background: rgba(0,255,204,0.12); color: var(--el-b); border: 1px solid rgba(0,255,204,0.24); }
.el-pill-planned  { background: rgba(255,255,255,0.05); color: rgba(168,184,199,0.6); border: 1px solid rgba(255,255,255,0.08); }

/* ── Entry body (structured fields) ────────────────────────── */
.el-entry-body {
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2vw, 28px);
  border-right: 1px solid var(--el-bord);
  min-width: 0;
}

.el-entry-title {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.22;
  color: #f5faff;
  margin: 0 0 16px;
}

/* Definition list — field labels + values */
.el-fields {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 4px 12px;
  margin: 0 0 14px;
}

.el-fields dt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0,212,255,0.52);
  padding-top: 3px;
  line-height: 1.4;
  align-self: start;
}

.el-fields dd {
  font-size: clamp(12.5px, 1.1vw, 14px);
  line-height: 1.58;
  color: rgba(202,216,229,0.88);
  margin: 0;
}

/* Data status pills (inline) */
.el-ds-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.el-ds-done    { background: rgba(0,212,255,0.12); color: var(--el-a);  border: 1px solid rgba(0,212,255,0.2); }
.el-ds-eval    { background: rgba(0,255,204,0.1);  color: var(--el-b);  border: 1px solid rgba(0,255,204,0.2); }
.el-ds-pending { background: rgba(92,200,255,0.08); color: var(--el-coat); border: 1px solid rgba(92,200,255,0.18); }
.el-ds-planned { background: rgba(255,255,255,0.04); color: rgba(168,184,199,0.55); border: 1px solid rgba(255,255,255,0.07); }

/* Parameter tags */
.el-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,212,255,0.08);
}

.el-tags span {
  padding: 3px 9px;
  background: rgba(0,212,255,0.06);
  border: 1px solid rgba(0,212,255,0.12);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(168,184,199,0.7);
}

/* ── Evidence slot (right column) ──────────────────────────── */
.el-evidence {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px;
  background: rgba(0,0,0,0.14);
  min-width: 0;
}

.el-ev-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(0,212,255,0.14);
  display: block;
}

.el-ev-caption {
  font-size: 11px;
  line-height: 1.45;
  color: rgba(168,184,199,0.55);
  margin: 0;
}

/* Placeholder slot */
.el-ev-ph {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 14px;
  background: rgba(0,212,255,0.03);
  border: 1.5px dashed rgba(0,212,255,0.14);
  border-radius: 10px;
  min-height: 100px;
}

.el-ev-ph-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0,212,255,0.4);
  margin: 0;
}

.el-ev-ph p:not(.el-ev-ph-label) {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(168,184,199,0.42);
  margin: 0;
}

/* ── Control Matrix ─────────────────────────────────────────── */
.el-matrix-wrap {
  max-width: 1200px;
  margin: 0 auto clamp(56px, 6vw, 80px);
}

.el-matrix-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.6vw, 20px);
}

.el-matrix-card {
  background: var(--el-card);
  border-radius: 14px;
  overflow: hidden;
}

.el-mc-a { border: 1px solid rgba(0,212,255,0.16); }
.el-mc-b { border: 1px solid rgba(0,255,204,0.14); }

.el-mc-hd {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--el-bord);
}

.el-mc-track-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--el-muted);
  display: block;
  margin-bottom: 5px;
}

.el-mc-a .el-mc-track-label { color: var(--el-a); opacity: 0.7; }
.el-mc-b .el-mc-track-label { color: var(--el-b); opacity: 0.7; }

.el-mc-hd h4 {
  font-size: 17px;
  font-weight: 600;
  color: #f5faff;
  margin: 0;
  letter-spacing: -0.02em;
}

.el-mc-table {
  padding: 0 4px 8px;
}

.el-mc-row {
  display: grid;
  grid-template-columns: 32px 1fr 1fr 1fr 1fr;
  gap: 0;
  padding: 9px 16px;
  font-size: 12.5px;
  color: rgba(202,216,229,0.8);
  border-bottom: 1px solid rgba(0,212,255,0.06);
  align-items: baseline;
}

.el-mc-row:last-child { border-bottom: none; }

.el-mc-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0,212,255,0.38);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,212,255,0.1);
}

.el-mc-row b {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  font-weight: 700;
  color: rgba(0,212,255,0.7);
}

.el-mc-b .el-mc-row b { color: rgba(0,255,204,0.7); }

.el-mc-row em {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: rgba(168,184,199,0.5);
  letter-spacing: 0.02em;
}

.el-mc-target {
  background: rgba(0,212,255,0.04);
}

.el-mc-b .el-mc-target {
  background: rgba(0,255,204,0.04);
}

/* ── Metrics Overview ───────────────────────────────────────── */
.el-metrics-wrap {
  max-width: 1200px;
  margin: 0 auto clamp(56px, 6vw, 80px);
}

.el-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.4vw, 16px);
}

.el-metric-card {
  background: var(--el-card);
  border: 1px solid var(--el-bord);
  border-radius: 14px;
  padding: clamp(18px, 2vw, 24px) clamp(16px, 1.8vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.el-met-a    { border-top: 3px solid var(--el-a); }
.el-met-coat { border-top: 3px solid var(--el-coat); }
.el-met-b    { border-top: 3px solid var(--el-b); }
.el-met-eng  { border-top: 3px solid var(--el-filt); }

.el-met-track {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0,212,255,0.5);
}

.el-met-a .el-met-track { color: rgba(0,212,255,0.55); }
.el-met-coat .el-met-track { color: rgba(92,200,255,0.55); }
.el-met-b .el-met-track { color: rgba(0,255,204,0.55); }
.el-met-eng .el-met-track { color: rgba(124,255,178,0.5); }

.el-metric-card h4 {
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 600;
  color: #f5faff;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.28;
}

.el-met-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.el-met-list li {
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(168,184,199,0.75);
  padding-left: 14px;
  position: relative;
}

.el-met-list li::before {
  content: '·';
  position: absolute;
  left: 4px;
  color: rgba(0,212,255,0.4);
}

.el-met-status {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(168,184,199,0.42);
  padding-top: 8px;
  border-top: 1px solid rgba(0,212,255,0.08);
}

/* ── Workflow ───────────────────────────────────────────────── */
.el-workflow-wrap {
  max-width: 1200px;
  margin: 0 auto clamp(40px, 4vw, 56px);
}

.el-workflow {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.el-wf-step {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--el-card);
  border: 1px solid var(--el-bord);
  border-radius: 10px;
  min-width: 96px;
  flex: 1 1 90px;
}

.el-wf-n {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 700;
  color: rgba(0,212,255,0.32);
  line-height: 1;
}

.el-wf-step b {
  font-size: 13px;
  font-weight: 700;
  color: #f5faff;
  display: block;
}

.el-wf-step small {
  font-size: 11px;
  line-height: 1.4;
  color: var(--el-muted);
  opacity: 0.65;
}

.el-wf-arr {
  font-size: 18px;
  color: rgba(0,212,255,0.3);
  align-self: center;
  padding: 0 2px;
  flex-shrink: 0;
}

/* ── Responsive breakpoints ─────────────────────────────────── */

/* 1080px: 3-column metrics, evidence slot goes narrower */
@media (max-width: 1080px) {
  .el-metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .el-entry { grid-template-columns: 130px 1fr 180px; }
}

/* 860px: stack matrix, collapse entry to 2-col (no evidence rail) */
@media (max-width: 860px) {
  .el-matrix-grid { grid-template-columns: 1fr; }
  .el-entry { grid-template-columns: 110px 1fr; }
  .el-evidence { display: none; }
  .el-entry-body { border-right: none; }
}

/* 640px: single-column metrics, smaller timeline rail */
@media (max-width: 640px) {
  .el-metrics-grid { grid-template-columns: 1fr; }
  .el-fields { grid-template-columns: 100px 1fr; }
  .el-timeline { padding-left: 22px; }
  .el-entry::before { left: -29px; width: 12px; height: 12px; top: 22px; }
  .el-summary-strip { flex-direction: column; gap: 8px; }
  .el-sum-div { width: 40px; height: 1px; }
  .el-wf-arr { display: none; }
  .el-workflow { gap: 6px; }
  .el-wf-step { min-width: 80px; }
}

/* 480px: stacked entry layout */
@media (max-width: 480px) {
  .el-entry { grid-template-columns: 1fr; }
  .el-entry-rail {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 14px;
    border-right: none;
    border-bottom: 1px solid var(--el-bord);
  }
  .el-entry-num { font-size: 16px; }
  .el-entry::before { display: none; }
  .el-mc-row { grid-template-columns: 28px 1fr 1fr; font-size: 11.5px; }
  .el-mc-row span:nth-child(3),
  .el-mc-row span:nth-child(4) { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FAILURE LOG — flog-* (redesign)
   Track color tokens:
     Material      #2fffe0   Coating       #a8b4ff   Structural  #ff7a7a
     Testing       #ffd45c   Filtration    #78e5ff   Adsorbent   #7cffb2
     Documentation #a8d8ff
   ═══════════════════════════════════════════════════════════════════════════ */

.flog-will-reveal {
  opacity: 0;
  transform: translateY(26px);
}

/* ── Opening ── */
.flog-opening {
  padding: 72px 48px 48px;
  max-width: 900px;
  margin: 0 auto;
}
.flog-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--os-cyan);
  margin: 0 0 14px;
}
.flog-h2 {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.12;
  margin: 0 0 20px;
}
.flog-thesis {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 640px;
  margin: 0;
}
.flog-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 44px;
  border-top: 1px solid var(--glass-border);
}
.flog-strip-item {
  flex: 1 1 120px;
  padding: 20px 24px;
  border-right: 1px solid var(--glass-border);
}
.flog-strip-item:last-child { border-right: none; }
.flog-strip-num {
  display: block;
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 4px;
}
.flog-strip-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Principle ── */
.flog-principle {
  padding: 0 48px 52px;
  max-width: 900px;
  margin: 0 auto;
  border-bottom: 1px solid var(--glass-border);
}
.flog-quote {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink);
  border-left: 3px solid var(--os-cyan);
  padding-left: 22px;
  margin: 0 0 24px;
}
.flog-ocan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.flog-ocan-step {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--os-cyan);
  background: rgba(0, 255, 210, 0.07);
  padding: 4px 10px;
  border-radius: 3px;
}
.flog-ocan-arrow {
  color: var(--muted);
  font-size: 13px;
}

/* ── Cases ── */
.flog-cases-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.flog-case {
  display: grid;
  grid-template-columns: 140px 1fr 210px;
  gap: 0;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  overflow: hidden;
  border-left: 3px solid transparent;
}
.flog-case--material      { border-left-color: #2fffe0; }
.flog-case--coating       { border-left-color: #a8b4ff; }
.flog-case--structural    { border-left-color: #ff7a7a; }
.flog-case--testing       { border-left-color: #ffd45c; }
.flog-case--filtration    { border-left-color: #78e5ff; }
.flog-case--adsorbent     { border-left-color: #7cffb2; }
.flog-case--documentation { border-left-color: #a8d8ff; }

.flog-case-rail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 18px;
  background: rgba(255, 255, 255, 0.02);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.flog-case-id {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-style: italic;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}
.flog-case-phase {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.flog-track-badge {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  font-weight: 600;
  width: fit-content;
}
.flog-track--material      { background: rgba(47,  255, 224, 0.12); color: #2fffe0; }
.flog-track--coating       { background: rgba(168, 180, 255, 0.12); color: #a8b4ff; }
.flog-track--structural    { background: rgba(255, 122, 122, 0.12); color: #ff7a7a; }
.flog-track--testing       { background: rgba(255, 212, 92,  0.12); color: #ffd45c; }
.flog-track--filtration    { background: rgba(120, 229, 255, 0.12); color: #78e5ff; }
.flog-track--adsorbent     { background: rgba(124, 255, 178, 0.12); color: #7cffb2; }
.flog-track--documentation { background: rgba(168, 216, 255, 0.12); color: #a8d8ff; }

.flog-status {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 12px;
  width: fit-content;
  font-weight: 500;
}
.flog-status--updated    { background: rgba(47,  255, 224, 0.1);  color: #2fffe0; border: 1px solid rgba(47,  255, 224, 0.3); }
.flog-status--evaluation { background: rgba(255, 212, 92,  0.1);  color: #ffd45c; border: 1px solid rgba(255, 212, 92,  0.3); }
.flog-status--analysis   { background: rgba(168, 180, 255, 0.1);  color: #a8b4ff; border: 1px solid rgba(168, 180, 255, 0.3); }
.flog-status--planned    { background: rgba(160, 160, 160, 0.1);  color: #a0a0a0; border: 1px solid rgba(160, 160, 160, 0.3); }
.flog-status--sm         { font-size: 9px; padding: 2px 6px; }

.flog-case-body {
  padding: 24px 28px;
}
.flog-case-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 16px;
  line-height: 1.4;
}
.flog-dl {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.flog-dl-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 8px;
}
.flog-dl-row dt {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 2px;
  font-weight: 500;
}
.flog-dl-row dd {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}
.flog-pending {
  color: var(--muted);
  font-style: italic;
  font-size: 11px;
}

.flog-case-ev {
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.flog-ev-img {
  width: 100%;
  flex: 1;
  object-fit: cover;
  display: block;
  min-height: 0;
}
.flog-ev-label {
  font-size: 10px;
  color: var(--muted);
  padding: 6px 12px;
  letter-spacing: 0.08em;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}
.flog-ev-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 120px;
  border: 1.5px dashed rgba(255, 255, 255, 0.12);
  margin: 16px;
  border-radius: 4px;
  gap: 8px;
}
.flog-ev-ph-icon {
  font-size: 22px;
  color: rgba(255, 255, 255, 0.15);
  line-height: 1;
}
.flog-ev-ph-text {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

/* ── Root Cause Matrix ── */
.flog-matrix-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 48px;
  border-top: 1px solid var(--glass-border);
}
.flog-matrix-h3 {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 8px;
}
.flog-matrix-sub {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 24px;
  line-height: 1.6;
}
.flog-matrix-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.flog-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 600px;
}
.flog-matrix th {
  text-align: left;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 14px;
  border-bottom: 1px solid var(--glass-border);
  font-weight: 500;
}
.flog-matrix td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--ink);
  line-height: 1.5;
}
.flog-matrix tr:last-child td { border-bottom: none; }
.flog-matrix tr:hover td { background: rgba(255, 255, 255, 0.02); }
.flog-mat-id {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  color: var(--os-cyan);
}

/* ── Iteration Flow ── */
.flog-flow-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 48px;
  border-top: 1px solid var(--glass-border);
}
.flog-flow-h3 {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 28px;
}
.flog-flow-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: nowrap;
}
.flog-flow-step {
  flex: 1 1 0;
  padding-right: 8px;
}
.flog-flow-arrow {
  flex: 0 0 28px;
  height: 24px;
  margin-top: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.2)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.flog-flow-n {
  display: block;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--os-cyan);
  margin-bottom: 4px;
}
.flog-flow-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.flog-flow-desc {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* ── Credibility Note ── */
.flog-credibility {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 48px 64px;
  border-top: 1px solid var(--glass-border);
}
.flog-cred-note {
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
  margin: 0;
}
.flog-cred-note em {
  color: var(--ink);
  font-style: normal;
  font-weight: 500;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .flog-case { grid-template-columns: 120px 1fr; }
  .flog-case-ev { display: none; }
  .flog-cases-wrap { padding: 24px; }
  .flog-matrix-wrap,
  .flog-flow-wrap,
  .flog-credibility,
  .flog-opening,
  .flog-principle { padding-left: 24px; padding-right: 24px; }
  .flog-flow-steps { flex-wrap: wrap; }
  .flog-flow-arrow { display: none; }
  .flog-flow-step { flex: 1 1 140px; padding: 0 0 16px; }
}
@media (max-width: 580px) {
  .flog-case { grid-template-columns: 1fr; }
  .flog-case-rail {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 14px 18px;
    gap: 8px;
  }
  .flog-dl-row { grid-template-columns: 1fr; gap: 2px; }
  .flog-strip-item { padding: 14px 16px; }
  .flog-opening { padding: 40px 20px 32px; }
  .flog-principle { padding: 0 20px 40px; }
  .flog-cases-wrap { padding: 20px; }
  .flog-matrix-wrap,
  .flog-flow-wrap,
  .flog-credibility { padding-left: 20px; padding-right: 20px; }
  .flog-flow-step { flex: 0 0 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .flog-reveal,
  .flog-will-reveal { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEAM COMMONS — tc-* (redesign)
   Function group colors:
     Leadership    #2fffe0   Fabrication  #ff7a7a
     Materials     #a8b4ff   Testing      #ffd45c
     Publication   #a8d8ff
   Track badge colors match Failure Log (flog-*):
     Structural    #ff7a7a   Environmental #78e5ff
     Documentation #a8d8ff   Operations    #2fffe0
   ═══════════════════════════════════════════════════════════════════════════ */

.tc-will-reveal {
  opacity: 0;
  transform: translateY(26px);
}

/* ── Opening ── */
.tc-opening {
  padding: 72px 48px 48px;
  max-width: 960px;
  margin: 0 auto;
}
.tc-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--os-cyan);
  margin: 0 0 14px;
}
.tc-h2 {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.12;
  margin: 0 0 20px;
}
.tc-thesis {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  max-width: 680px;
  margin: 0;
}
.tc-strip {
  display: flex;
  flex-wrap: wrap;
  margin-top: 44px;
  border-top: 1px solid var(--glass-border);
}
.tc-strip-item {
  flex: 1 1 120px;
  padding: 20px 24px;
  border-right: 1px solid var(--glass-border);
}
.tc-strip-item:last-child { border-right: none; }
.tc-strip-num {
  display: block;
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 4px;
}
.tc-strip-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Groups ── */
.tc-groups-wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 48px 32px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.tc-group {
  border-left: 3px solid transparent;
  padding-left: 20px;
}
.tc-group--leadership  { border-left-color: #2fffe0; }
.tc-group--fabrication { border-left-color: #ff7a7a; }
.tc-group--materials   { border-left-color: #a8b4ff; }
.tc-group--testing     { border-left-color: #ffd45c; }
.tc-group--publication { border-left-color: #a8d8ff; }

.tc-group-header {
  margin-bottom: 20px;
}
.tc-group-tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 3px;
  margin-bottom: 8px;
}
.tc-tag--leadership  { background: rgba(47,  255, 224, 0.1); color: #2fffe0; }
.tc-tag--fabrication { background: rgba(255, 122, 122, 0.1); color: #ff7a7a; }
.tc-tag--materials   { background: rgba(168, 180, 255, 0.1); color: #a8b4ff; }
.tc-tag--testing     { background: rgba(255, 212, 92,  0.1); color: #ffd45c; }
.tc-tag--publication { background: rgba(168, 216, 255, 0.1); color: #a8d8ff; }

.tc-group-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
  max-width: 600px;
}

/* ── Member grid ── */
.tc-member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.tc-member-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  padding: 20px;
  display: flex;
  gap: 16px;
  transition: border-color 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.tc-member-card:hover {
  border-color: rgba(255, 255, 255, 0.14);
  transform: translateY(-2px);
}
.tc-member-av {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
}
.tc-av-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tc-member-body {
  flex: 1;
  min-width: 0;
}
.tc-member-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
  line-height: 1.3;
}
.tc-name-en {
  font-weight: 400;
  color: var(--muted);
  font-size: 12px;
  display: block;
}
.tc-role-badge {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 500;
}
.tc-member-resp {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 10px;
}
.tc-member-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tc-track {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 600;
}
.tc-track--structural { background: rgba(255, 122, 122, 0.12); color: #ff7a7a; }
.tc-track--env        { background: rgba(120, 229, 255, 0.12); color: #78e5ff; }
.tc-track--doc        { background: rgba(168, 216, 255, 0.12); color: #a8d8ff; }
.tc-track--ops        { background: rgba(47,  255, 224, 0.12); color: #2fffe0; }

.tc-focus {
  font-size: 11px;
  color: var(--muted);
  opacity: 0.7;
}

/* ── Workflow ── */
.tc-workflow-wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 36px 48px;
  border-top: 1px solid var(--glass-border);
}
.tc-section-h3 {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 6px;
}
.tc-section-sub {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 24px;
  line-height: 1.6;
}
.tc-workflow-steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}
.tc-wf-step {
  flex: 1 1 80px;
  text-align: center;
  padding: 16px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  min-width: 80px;
}
.tc-wf-n {
  display: block;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--os-cyan);
  margin-bottom: 4px;
}
.tc-wf-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}
.tc-wf-arrow {
  flex: 0 0 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12M11 5l5 5-5 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* ── Commons ── */
.tc-commons-wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 36px 48px 72px;
  border-top: 1px solid var(--glass-border);
}
.tc-commons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.tc-commons-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  padding: 18px 20px;
}
.tc-commons-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.tc-commons-desc {
  font-size: 12px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .tc-groups-wrap,
  .tc-workflow-wrap,
  .tc-commons-wrap,
  .tc-opening { padding-left: 24px; padding-right: 24px; }
  .tc-member-grid { grid-template-columns: 1fr 1fr; }
  .tc-wf-arrow { display: none; }
  .tc-wf-step { flex: 1 1 100px; }
}
@media (max-width: 580px) {
  .tc-member-grid { grid-template-columns: 1fr; }
  .tc-member-card { flex-direction: column; gap: 12px; }
  .tc-member-av { width: 44px; height: 44px; }
  .tc-strip-item { padding: 14px 16px; }
  .tc-opening { padding: 40px 20px 32px; }
  .tc-groups-wrap,
  .tc-workflow-wrap,
  .tc-commons-wrap { padding-left: 20px; padding-right: 20px; }
  .tc-workflow-steps { flex-direction: column; gap: 8px; }
  .tc-wf-step { flex: none; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-will-reveal { opacity: 1; transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PUB-* — Research Documentation Archive
   ═══════════════════════════════════════════════════════════════════════════ */

.pub-header {
  margin-bottom: 52px;
}

.pub-eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--os-cyan);
  font-family: 'IBM Plex Mono', monospace;
  margin: 0 0 14px;
}

.pub-title {
  font-family: 'IBM Plex Serif', serif;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 18px;
}

.pub-subtitle {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.72;
  max-width: 660px;
  margin: 0;
}

/* Output category tiles */
.pub-categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--glass-border);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 52px;
}

.pub-cat {
  background: var(--surface-0);
  padding: 28px 24px;
}

.pub-cat-icon {
  display: block;
  font-size: 18px;
  margin-bottom: 12px;
  line-height: 1;
}

.pub-cat-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
  margin: 0 0 8px;
}

.pub-cat-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}

/* Publication cards grid */
.pub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 44px;
}

.pub-card {
  background: var(--surface-1);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.26s ease;
}

.pub-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.28);
}

.pub-card--featured {
  border-color: rgba(168, 216, 255, 0.22);
  background: rgba(168, 216, 255, 0.04);
}

.pub-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pub-track-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pub-track-label {
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  flex: 1;
}

.pub-status {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  white-space: nowrap;
}

.pub-status--draft {
  background: rgba(168, 180, 255, 0.14);
  color: #a8b4ff;
}

.pub-status--inprogress {
  background: rgba(255, 212, 92, 0.14);
  color: #ffd45c;
}

.pub-status--planned {
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}

.pub-card-cat {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.6;
}

.pub-card-title {
  font-family: 'IBM Plex Serif', serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.42;
  color: var(--ink);
  margin: 0;
}

.pub-card-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.66;
  flex: 1;
  margin: 0;
}

.pub-card-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--glass-border);
  margin-top: auto;
}

.pub-doc-type {
  font-size: 11px;
  color: var(--muted);
  opacity: 0.55;
}

.pub-card-note {
  font-size: 11px;
  color: var(--muted);
  opacity: 0.45;
  font-style: italic;
  text-align: right;
}

/* Credibility note */
.pub-credibility {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--glass-border);
  border-radius: 8px;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.018);
}

.pub-cred-label {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.65;
  margin: 0 0 8px;
}

.pub-cred-text {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.72;
  opacity: 0.65;
  margin: 0;
}

/* Reveal animation — only JS-added class carries opacity:0 */
.pub-will-reveal {
  opacity: 0;
  transform: translateY(26px);
}

/* Responsive */
@media (max-width: 900px) {
  .pub-categories {
    grid-template-columns: repeat(2, 1fr);
  }

  .pub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .pub-categories {
    grid-template-columns: 1fr;
  }

  .pub-grid {
    grid-template-columns: 1fr;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PA-* — Publish Archive System (dynamic, replaces old static pub-* design)
   Aesthetic: Editorial / Archive — horizontal list rows with track color bar
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Header ──────────────────────────────────────────────────────────────── */
.pa-eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--os-cyan);
  font-family: 'IBM Plex Mono', monospace;
  margin: 0 0 14px;
}

.pa-title {
  font-family: 'IBM Plex Serif', serif;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 16px;
}

.pa-subtitle {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.72;
  max-width: 660px;
  margin: 0 0 48px;
}

/* ── Controls row ─────────────────────────────────────────────────────────── */
.pa-controls {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.pa-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.pa-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pa-filter-btn {
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 5px 12px;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}

.pa-filter-btn:hover {
  color: var(--ink);
  background: rgba(255,255,255,0.08);
}

.pa-filter-btn.pa-filter-active {
  color: var(--ink);
  background: rgba(47, 255, 224, 0.1);
  border-color: rgba(47, 255, 224, 0.35);
}

/* ── Admin toggle button ──────────────────────────────────────────────────── */
.pa-admin-toggle {
  flex-shrink: 0;
  font-size: 12px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.06em;
  color: var(--os-cyan);
  background: rgba(47, 255, 224, 0.08);
  border: 1px solid rgba(47, 255, 224, 0.3);
  border-radius: 6px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
  margin-top: 2px;
}

.pa-admin-toggle:hover {
  background: rgba(47, 255, 224, 0.14);
  border-color: rgba(47, 255, 224, 0.5);
}

/* ── Admin panel ──────────────────────────────────────────────────────────── */
.pa-admin-panel {
  background: rgba(6, 16, 28, 0.96);
  border: 1px solid rgba(47, 255, 224, 0.18);
  border-radius: 12px;
  margin-bottom: 32px;
  overflow: hidden;
}

.pa-admin-inner {
  padding: 28px;
}

.pa-admin-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.pa-admin-h3 {
  font-family: 'IBM Plex Serif', serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}

.pa-admin-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
}

.pa-admin-close:hover {
  color: var(--ink);
  background: rgba(255,255,255,0.08);
}

.pa-admin-body {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 28px;
  align-items: start;
}

/* ── Admin form fields ────────────────────────────────────────────────────── */
.pa-admin-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pa-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pa-field--full {
  grid-column: 1 / -1;
}

.pa-field-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.pa-field-row .pa-field {
  min-width: 0;
}

.pa-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
}

.pa-input,
.pa-select,
.pa-textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--ink);
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.18s ease;
  -webkit-appearance: none;
}

.pa-input:focus,
.pa-select:focus,
.pa-textarea:focus {
  outline: none;
  border-color: rgba(47, 255, 224, 0.5);
}

.pa-input::placeholder,
.pa-textarea::placeholder {
  color: var(--muted);
  opacity: 0.5;
}

.pa-textarea {
  resize: vertical;
  min-height: 72px;
}

.pa-select option {
  background: #020b14;
  color: var(--ink);
}

/* ── Upload row ───────────────────────────────────────────────────────────── */
.pa-upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pa-upload-btn {
  font-size: 12px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.pa-upload-btn:hover {
  color: var(--ink);
  background: rgba(255,255,255,0.09);
}

.pa-upload-info {
  font-size: 12px;
  color: var(--muted);
  opacity: 0.65;
  font-family: 'IBM Plex Mono', monospace;
}

.pa-upload-prog {
  font-size: 11px;
  color: var(--os-cyan);
  font-family: 'IBM Plex Mono', monospace;
}

/* ── Form actions ─────────────────────────────────────────────────────────── */
.pa-form-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 4px;
}

.pa-submit-btn {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #020b14;
  background: var(--os-cyan);
  border: none;
  border-radius: 6px;
  padding: 10px 22px;
  cursor: pointer;
  transition: opacity 0.18s ease, transform 0.15s ease;
}

.pa-submit-btn:hover {
  opacity: 0.88;
}

.pa-submit-btn:active {
  transform: scale(0.97);
}

.pa-submit-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pa-form-msg {
  font-size: 13px;
  color: var(--muted);
}

/* ── Live preview pane ────────────────────────────────────────────────────── */
.pa-preview-pane {
  position: sticky;
  top: 24px;
}

.pa-preview-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  margin: 0 0 10px;
}

.pa-item--preview {
  opacity: 0.9;
  pointer-events: none;
}

/* ── Publication list ─────────────────────────────────────────────────────── */
.pa-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 36px;
}

/* ── Publication item row (the signature editorial element) ──────────────── */
.pa-item {
  display: flex;
  align-items: stretch;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  overflow: hidden;
  transition: background 0.2s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s ease;
}

.pa-item:hover {
  background: rgba(255,255,255,0.04);
  transform: translateX(3px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.22);
}

/* 4px colored left bar — the track indicator */
.pa-item-bar {
  width: 4px;
  flex-shrink: 0;
  background: var(--glass-border);
}

.pa-item-body {
  flex: 1;
  padding: 18px 20px 16px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pa-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Type badge */
.pa-type-badge {
  font-size: 10px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  padding: 2px 7px;
}

/* Status badges */
.pa-status-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
}

.pa-st--draft {
  background: rgba(168,180,255,0.14);
  color: #a8b4ff;
}

.pa-st--inprogress {
  background: rgba(255,212,92,0.14);
  color: #ffd45c;
}

.pa-st--planned {
  background: rgba(255,255,255,0.06);
  color: var(--muted);
}

.pa-st--archive {
  background: rgba(120,229,255,0.12);
  color: #78e5ff;
}

.pa-st--published {
  background: rgba(47,255,224,0.12);
  color: var(--os-cyan);
}

.pa-item-date {
  font-size: 11px;
  color: var(--muted);
  opacity: 0.55;
  font-family: 'IBM Plex Mono', monospace;
}

.pa-item-title {
  font-family: 'IBM Plex Serif', serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
}

.pa-item-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}

.pa-item-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* Track chip — color applied via JS inline style */
.pa-track-chip {
  font-size: 10px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* File button */
.pa-item-btn {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 5px;
  border: 1px solid var(--glass-border);
  color: var(--ink);
  background: rgba(255,255,255,0.05);
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
}

.pa-item-btn:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.2);
}

.pa-item-btn--none {
  color: var(--muted);
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

/* Delete button (admin only) */
.pa-del-btn {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s ease, color 0.15s ease;
  margin-left: auto;
}

.pa-del-btn:hover {
  opacity: 1;
  color: #ff7a7a;
  border-color: rgba(255,122,122,0.3);
}

/* ── Loading state ─────────────────────────────────────────────────────────── */
.pa-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 32px 0;
  color: var(--muted);
  font-size: 14px;
}

.pa-dots {
  display: flex;
  gap: 5px;
}

.pa-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted);
  animation: pa-dot-pulse 1.2s ease-in-out infinite;
}

.pa-dots span:nth-child(2) { animation-delay: 0.2s; }
.pa-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes pa-dot-pulse {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
  40%            { opacity: 1;    transform: scale(1); }
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.pa-empty {
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.pa-empty-msg {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

.pa-empty-reset {
  font-size: 12px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.06em;
  color: var(--os-cyan);
  background: transparent;
  border: 1px solid rgba(47,255,224,0.3);
  border-radius: 5px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.pa-empty-reset:hover {
  background: rgba(47,255,224,0.08);
}

/* ── Credibility notice ───────────────────────────────────────────────────── */
.pa-cred {
  border-left: 3px solid var(--glass-border);
  padding: 14px 20px;
  margin-top: 8px;
  background: rgba(255,255,255,0.015);
  border-radius: 0 6px 6px 0;
}

.pa-cred-text {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.7;
  opacity: 0.65;
  margin: 0;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pa-admin-body {
    grid-template-columns: 1fr;
  }

  .pa-preview-pane {
    position: static;
  }

  .pa-field-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .pa-controls {
    flex-direction: column;
  }

  .pa-admin-toggle {
    align-self: flex-start;
  }

  .pa-field-row {
    grid-template-columns: 1fr;
  }

  .pa-item-title {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pa-item { transition: none; }
  .pa-dots span { animation: none; opacity: 0.4; }
}

/* pa-* hidden attribute overrides — display: flex/block would otherwise win over [hidden] */
.pa-loading[hidden]      { display: none !important; }
.pa-empty[hidden]        { display: none !important; }
.pa-admin-panel[hidden]  { display: none !important; }


/* ════════════════════════════════════════════════════════════════════════════
   PD-* — Publishing Dashboard (admin-only internal tool)
   Aesthetic: Functional / utility dashboard — clean, dark, IBM Plex Mono heavy
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Dashboard header ─────────────────────────────────────────────────────── */
.pd-eyebrow {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--os-cyan);
  font-family: 'IBM Plex Mono', monospace;
  margin: 0 0 10px;
}

.pd-title {
  font-family: 'IBM Plex Serif', serif;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.18;
}

.pd-subtitle {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}

.pd-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.pd-header-left { flex: 1; min-width: 0; }

.pd-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-top: 6px;
}

.pd-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.35;
  flex-shrink: 0;
}

.pd-status-dot--on  { background: #2fffe0; opacity: 1; }
.pd-status-dot--off { background: #ff7a7a; opacity: 0.7; }

.pd-status-text {
  font-size: 11px;
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.04em;
}

/* ── Gate ─────────────────────────────────────────────────────────────────── */
.pd-gate { padding: 40px 0; }

.pd-gate-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 28px 32px;
  background: rgba(255,255,255,0.02);
  flex-wrap: wrap;
}

.pd-gate-msg {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  flex: 1;
  min-width: 200px;
}

.pd-gate-login {
  font-size: 13px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.04em;
  color: var(--os-cyan);
  background: rgba(47,255,224,0.08);
  border: 1px solid rgba(47,255,224,0.3);
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.pd-gate-login:hover { background: rgba(47,255,224,0.14); }

/* ── Workspace layout ─────────────────────────────────────────────────────── */
.pd-workspace {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  align-items: start;
}

/* ── Panel ────────────────────────────────────────────────────────────────── */
.pd-panel {
  background: rgba(6,16,28,0.96);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  overflow: hidden;
}

.pd-panel-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--glass-border);
}

.pd-panel-title {
  font-size: 13px;
  font-weight: 600;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.05em;
  color: var(--ink);
  margin: 0;
}

/* ── New post button ──────────────────────────────────────────────────────── */
.pd-new-btn {
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.06em;
  color: var(--os-cyan);
  background: rgba(47,255,224,0.08);
  border: 1px solid rgba(47,255,224,0.28);
  border-radius: 5px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
}

.pd-new-btn:hover { background: rgba(47,255,224,0.15); }

/* ── Post list ────────────────────────────────────────────────────────────── */
.pd-post-list {
  display: flex;
  flex-direction: column;
}

.pd-post-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--glass-border);
  transition: background 0.15s ease;
}

.pd-post-row:last-child { border-bottom: none; }
.pd-post-row:hover { background: rgba(255,255,255,0.03); }

.pd-post-track-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pd-post-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pd-post-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd-post-meta {
  font-size: 10px;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--muted);
  opacity: 0.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd-del-btn {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.pd-del-btn:hover { opacity: 1; color: #ff7a7a; border-color: rgba(255,122,122,0.3); }

/* ── List states ──────────────────────────────────────────────────────────── */
.pd-list-loading,
.pd-list-empty {
  padding: 24px 18px;
  font-size: 13px;
  color: var(--muted);
}

.pd-list-empty strong { color: var(--ink); }

/* ── Editor panel ─────────────────────────────────────────────────────────── */
.pd-panel--editor { display: flex; flex-direction: column; }

.pd-close-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.pd-close-btn:hover { background: rgba(255,255,255,0.08); color: var(--ink); }

/* ── Editor layout (form + preview side by side) ─────────────────────────── */
.pd-editor-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 20px;
  padding: 20px 18px 24px;
  align-items: start;
  min-height: 0;
}

/* ── Form fields ──────────────────────────────────────────────────────────── */
.pd-form { display: flex; flex-direction: column; gap: 13px; min-width: 0; }

.pd-field { display: flex; flex-direction: column; gap: 5px; }

.pd-field--full { grid-column: 1 / -1; }

.pd-field-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.pd-field-row--2 { grid-template-columns: 1fr 1fr; }

.pd-label {
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
}

.pd-label-note {
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.55;
}

.pd-input,
.pd-select,
.pd-textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  padding: 8px 11px;
  font-size: 13px;
  color: var(--ink);
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.16s ease;
  -webkit-appearance: none;
}

.pd-input:focus,
.pd-select:focus,
.pd-textarea:focus {
  outline: none;
  border-color: rgba(47,255,224,0.5);
}

.pd-input::placeholder,
.pd-textarea::placeholder { color: var(--muted); opacity: 0.45; }

.pd-textarea { resize: vertical; min-height: 60px; }
.pd-textarea--tall { min-height: 90px; }
.pd-select option { background: #020b14; color: var(--ink); }

/* ── Upload row ───────────────────────────────────────────────────────────── */
.pd-upload-row {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.pd-upload-btn {
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
  flex-shrink: 0;
}

.pd-upload-btn:hover { color: var(--ink); background: rgba(255,255,255,0.09); }

.pd-upload-info {
  font-size: 11px;
  color: var(--muted);
  opacity: 0.55;
  font-family: 'IBM Plex Mono', monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

.pd-upload-prog {
  font-size: 11px;
  color: var(--os-cyan);
  font-family: 'IBM Plex Mono', monospace;
}

/* ── Form actions ─────────────────────────────────────────────────────────── */
.pd-form-actions { display: flex; align-items: center; gap: 14px; padding-top: 4px; }

.pd-publish-btn {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #020b14;
  background: var(--os-cyan);
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.14s ease;
  flex-shrink: 0;
}

.pd-publish-btn:hover { opacity: 0.88; }
.pd-publish-btn:active { transform: scale(0.97); }
.pd-publish-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.pd-form-msg { font-size: 13px; color: var(--muted); }

/* ── Preview aside ────────────────────────────────────────────────────────── */
.pd-preview-aside {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pd-preview-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  margin: 0;
}

/* ── hidden attribute overrides for pd-* ─────────────────────────────────── */
.pd-gate[hidden]        { display: none !important; }
.pd-workspace[hidden]   { display: none !important; }
.pd-panel--editor[hidden] { display: none !important; }
.pd-list-empty[hidden]  { display: none !important; }
.pd-upload-prog[hidden] { display: none !important; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .pd-workspace { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .pd-editor-layout { grid-template-columns: 1fr; }
  .pd-preview-aside { position: static; }
  .pd-field-row { grid-template-columns: 1fr; }
  .pd-field-row--2 { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════════════════════
   RC-* — Research Commons (public feed inside #feed)
   Aesthetic: Editorial research archive — cards with top-accent color band,
   grid layout, IBM Plex Serif titles, mono meta labels
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Section wrapper ──────────────────────────────────────────────────────── */
.rc-section { padding-bottom: 4px; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.rc-eyebrow {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--os-cyan);
  font-family: 'IBM Plex Mono', monospace;
  margin: 0 0 12px;
}

.rc-title {
  font-family: 'IBM Plex Serif', serif;
  font-size: clamp(1.8rem, 4.2vw, 2.8rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 14px;
}

.rc-subtitle {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.72;
  max-width: 580px;
  margin: 0 0 32px;
}

.rc-header { margin-bottom: 0; }

/* ── Filter chips ─────────────────────────────────────────────────────────── */
.rc-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 28px;
}

.rc-chip {
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 5px 13px;
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
  white-space: nowrap;
}

.rc-chip:hover { color: var(--ink); background: rgba(255,255,255,0.07); }

.rc-chip--active {
  color: var(--ink);
  background: rgba(47,255,224,0.1);
  border-color: rgba(47,255,224,0.35);
}

/* ── Grid ─────────────────────────────────────────────────────────────────── */
.rc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

/* ── Card — signature element: top accent band + journal card feel ────────── */
.rc-card {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s ease,
              background 0.2s ease;
}

.rc-card-thumb {
  width: 100%;
  height: 160px;
  overflow: hidden;
  flex-shrink: 0;
}
.rc-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.rc-card:hover .rc-card-thumb img {
  transform: scale(1.04);
}

.rc-card-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(255,80,80,0.15);
  color: rgba(255,100,100,0.7);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rc-card:hover .rc-card-delete { opacity: 1; }
.rc-card-delete:hover { background: rgba(255,60,60,0.35); color: #ff6060; }
.rc-card-delete:disabled { opacity: 0.4; cursor: wait; }

.rc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
  background: rgba(255,255,255,0.04);
}

/* The 6px top accent band — track color, the card's identity mark */
.rc-card-accent {
  height: 6px;
  width: 100%;
  flex-shrink: 0;
}

.rc-card-body {
  flex: 1;
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* ── Card meta row ────────────────────────────────────────────────────────── */
.rc-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.rc-type-badge {
  font-size: 9.5px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  padding: 2px 6px;
}

.rc-status-badge {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
}

.rc-st--draft     { background: rgba(168,180,255,0.14); color: #a8b4ff; }
.rc-st--inprogress{ background: rgba(255,212,92,0.14);  color: #ffd45c; }
.rc-st--planned   { background: rgba(255,255,255,0.06); color: var(--muted); }
.rc-st--archive   { background: rgba(120,229,255,0.12); color: #78e5ff; }
.rc-st--published { background: rgba(47,255,224,0.12);  color: var(--os-cyan); }

.rc-cred-chip {
  font-size: 9px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.06em;
  color: var(--muted);
  opacity: 0.55;
  border-left: 1px solid var(--glass-border);
  padding-left: 7px;
  margin-left: 1px;
}

/* ── Card title & summary ─────────────────────────────────────────────────── */
.rc-card-title {
  font-family: 'IBM Plex Serif', serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
}

.rc-card-summary {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

/* ── Card footer ──────────────────────────────────────────────────────────── */
.rc-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.rc-track-tag {
  font-size: 10px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.8;
}

.rc-card-date {
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--muted);
  opacity: 0.5;
}

.rc-card-btn {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--glass-border);
  color: var(--ink);
  background: rgba(255,255,255,0.05);
  text-decoration: none;
  transition: background 0.15s ease;
}

.rc-card-btn:hover { background: rgba(255,255,255,0.10); }

/* Preview card — slightly muted, used inside pd-* preview pane */
.rc-card--preview {
  opacity: 0.92;
  pointer-events: none;
  user-select: none;
}

/* ── Loading / empty states ───────────────────────────────────────────────── */
.rc-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 0;
  color: var(--muted);
  font-size: 14px;
}

.rc-loading[hidden] { display: none !important; }

.rc-dots { display: flex; gap: 5px; }

.rc-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted);
  animation: rc-dot-pulse 1.2s ease-in-out infinite;
}

.rc-dots span:nth-child(2) { animation-delay: 0.2s; }
.rc-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes rc-dot-pulse {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
  40%           { opacity: 1;    transform: scale(1);   }
}

.rc-empty {
  padding: 32px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.rc-empty[hidden] { display: none !important; }

.rc-empty-msg { font-size: 14px; color: var(--muted); margin: 0; }

.rc-empty-reset {
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.06em;
  color: var(--os-cyan);
  background: transparent;
  border: 1px solid rgba(47,255,224,0.3);
  border-radius: 5px;
  padding: 5px 13px;
  cursor: pointer;
  transition: background 0.14s ease;
}

.rc-empty-reset:hover { background: rgba(47,255,224,0.08); }

/* ── Credibility note ─────────────────────────────────────────────────────── */
.rc-cred-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
  opacity: 0.55;
  margin: 0 0 28px;
  padding-left: 14px;
  border-left: 2px solid var(--glass-border);
}

/* ── Section divider ──────────────────────────────────────────────────────── */
.rc-rule {
  height: 1px;
  background: var(--glass-border);
  margin: 8px 0 36px;
  opacity: 0.5;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .rc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 580px) {
  .rc-grid { grid-template-columns: 1fr; }
  .rc-card-title { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .rc-card { transition: none; }
  .rc-dots span { animation: none; opacity: 0.4; }
}

/* ════════════════════════════════════════════════════════════════════════════
   pf-*  Member Publish Form
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Header ─────────────────────────────────────────────────────────────── */
.pf-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.pf-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--os-cyan);
  margin: 0 0 8px;
}

.pf-title {
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.15;
}

.pf-subtitle {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  max-width: 540px;
  line-height: 1.6;
}

.pf-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,255,224,0.06);
  border: 1px solid rgba(0,255,224,0.15);
  border-radius: 10px;
  padding: 10px 14px;
  flex-shrink: 0;
}

.pf-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--os-cyan);
  color: #020b14;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pf-identity-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pf-identity-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.pf-identity-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}

/* ── Gate ───────────────────────────────────────────────────────────────── */
.pf-gate {
  background: rgba(6,16,28,0.6);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 48px 40px;
  text-align: center;
}

.pf-gate-inner {
  max-width: 420px;
  margin: 0 auto;
}

.pf-gate-msg {
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 20px;
  line-height: 1.6;
}

.pf-gate-login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  background: var(--os-cyan);
  color: #020b14;
  font-size: 13px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1);
}
.pf-gate-login:hover { opacity: 0.85; transform: translateY(-1px); }

/* ── Layout (form + preview) ─────────────────────────────────────────────── */
.pf-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
  align-items: start;
  margin-bottom: 48px;
}

/* ── Form ────────────────────────────────────────────────────────────────── */
.pf-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pf-field--full { grid-column: 1 / -1; }
.pf-field--half { max-width: 260px; }

.pf-field-row {
  display: grid;
  gap: 12px;
}
.pf-field-row--3 { grid-template-columns: repeat(3, 1fr); }

.pf-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.pf-label-note {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.7;
}

.pf-required {
  color: var(--os-cyan);
}

.pf-input,
.pf-select,
.pf-textarea {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--ink);
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.pf-input:focus,
.pf-select:focus,
.pf-textarea:focus {
  outline: none;
  border-color: var(--os-cyan);
  background: rgba(0,255,224,0.04);
}

.pf-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23718096' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}

.pf-select option { background: #0a1628; }

.pf-textarea { resize: vertical; min-height: 60px; line-height: 1.5; }
.pf-textarea--tall { min-height: 80px; }

/* ── Optional fields expand ──────────────────────────────────────────────── */
.pf-optional-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pf-optional-toggle {
  align-self: flex-start;
  background: none;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--os-cyan);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.pf-optional-toggle:hover {
  background: rgba(0,255,224,0.06);
  border-color: rgba(0,255,224,0.3);
}

.pf-optional-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
}

/* ── Upload row ──────────────────────────────────────────────────────────── */
.pf-upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pf-upload-btn {
  padding: 7px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s ease;
}
.pf-upload-btn:hover { background: rgba(255,255,255,0.10); }

.pf-upload-info {
  font-size: 12px;
  color: var(--muted);
}

.pf-upload-prog {
  font-size: 11px;
  color: var(--os-cyan);
}

/* ── Photo upload list ───────────────────────────────────────────────────── */
.pf-photo-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.pf-photo-item {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border);
  flex-shrink: 0;
}

.pf-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pf-photo-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease infinite;
}

.pf-photo-meta {
  display: none; /* shown only for errors via .pf-photo--error override */
}
.pf-photo--error .pf-photo-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  position: absolute;
  inset: 0;
  padding: 4px;
  text-align: center;
}
.pf-photo--error .pf-photo-status {
  font-size: 10px;
  color: #ff6060;
  font-weight: 600;
  line-height: 1.2;
  word-break: break-word;
}

.pf-photo-rm {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 2;
}

.pf-photo-item:hover .pf-photo-rm { opacity: 1; }

.pf-photo--uploading { opacity: 0.6; }
.pf-photo--error { border-color: rgba(255,80,80,0.5); }

/* ── RC card photo grid ──────────────────────────────────────────────────── */
.rc-card-photos {
  display: grid;
  gap: 2px;
  width: 100%;
  height: 160px;
  overflow: hidden;
  flex-shrink: 0;
}

.rc-card-photos--2 { grid-template-columns: 1fr 1fr; }

.rc-card-photos--3 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.rc-card-photos--3 .rc-photo-cell:first-child { grid-row: span 2; }

.rc-card-photos--4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.rc-photo-cell {
  position: relative;
  overflow: hidden;
}

.rc-photo-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.rc-card:hover .rc-photo-cell img { transform: scale(1.04); }

.rc-photo-more-cell img { filter: brightness(0.5); }

.rc-photo-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  pointer-events: none;
}

/* ── Form actions ────────────────────────────────────────────────────────── */
.pf-form-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 4px;
}

.pf-publish-btn {
  padding: 11px 24px;
  background: var(--os-cyan);
  color: #020b14;
  font-size: 13px;
  font-weight: 700;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1);
}
.pf-publish-btn:hover  { opacity: 0.85; transform: translateY(-1px); }
.pf-publish-btn:active { transform: scale(0.97); }
.pf-publish-btn:disabled { opacity: 0.5; cursor: default; transform: none; }

.pf-form-msg {
  font-size: 12px;
  color: var(--muted);
}

/* ── Preview aside ───────────────────────────────────────────────────────── */
.pf-preview-aside {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pf-preview-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

/* ── My Posts section ────────────────────────────────────────────────────── */
.pf-myposts {
  background: rgba(6,16,28,0.6);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 24px;
  margin-top: 8px;
}

.pf-myposts-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.pf-myposts-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.pf-myposts-count {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

.pf-post-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background 0.2s ease;
}
.pf-post-row:hover { background: rgba(255,255,255,0.04); border-color: var(--glass-border); }

.pf-post-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pf-post-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pf-post-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pf-post-meta {
  font-size: 11px;
  color: var(--muted);
}

.pf-post-vis {
  font-size: 10px;
  flex-shrink: 0;
}

.pf-del-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.pf-del-btn:hover { color: #ff6b6b; border-color: rgba(255,107,107,0.3); background: rgba(255,107,107,0.08); }

.pf-myposts-loading,
.pf-myposts-empty {
  font-size: 13px;
  color: var(--muted);
  padding: 12px 0;
}

/* ── Hidden overrides for pf-* ───────────────────────────────────────────── */
.pf-gate[hidden],
.pf-workspace[hidden],
.pf-identity[hidden],
.pf-optional-body[hidden],
.pf-myposts-loading[hidden],
.pf-myposts-empty[hidden],
.pf-upload-prog[hidden] { display: none !important; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .pf-layout { grid-template-columns: 1fr; }
  .pf-preview-aside { position: static; }
  .pf-field-row--3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .pf-header { flex-direction: column; gap: 16px; }
  .pf-field-row--3 { grid-template-columns: 1fr; }
  .pf-form-actions { flex-wrap: wrap; }
}


/* ════════════════════════════════════════════════════════════════════════════
   rc-card-author  Author badge on Research Commons cards
   rc-member-filters  Member avatar filter row
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Author badge ────────────────────────────────────────────────────────── */
.rc-card-author {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.rc-author-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,255,224,0.18);
  color: var(--os-cyan);
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0;
}

.rc-author-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}

/* ── Member filter row ───────────────────────────────────────────────────── */
.rc-member-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.rc-member-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.rc-member-btn:hover {
  background: rgba(255,255,255,0.10);
  color: var(--ink);
  border-color: rgba(255,255,255,0.2);
}

.rc-member-btn--active {
  background: rgba(0,255,224,0.12);
  border-color: rgba(0,255,224,0.35);
  color: var(--os-cyan);
}

.rc-member-btn--my {
  border-style: dashed;
}

.rc-member-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,255,224,0.15);
  color: var(--os-cyan);
  font-size: 8px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rc-member-name {
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rc-member-filters[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .pf-publish-btn,
  .pf-gate-login,
  .rc-member-btn { transition: none; }
}