/* ============================================================
   Case study pages — shared layout and mock-UI primitives
   Figma: "Case study 01 · Zobot", "02 · Design system", "03 · Operator Console"
   ============================================================ */
:root {
  --cs-line: #d7dae0;
  --cs-surface: #f5f5f3;
  --cs-card: #ffffff;
  --cs-blue-tint: #e8f0ff;
  --cs-blue-tint-2: #eaf1ff;
  --cs-cream: #fff6d6;
  --cs-green-tint: #e1f5ea;
  --cs-red-tint: #fde8eb;
  --cs-code: #1c1e24;
  --cs-dark: #15161a;
  --cs-grey: #50545f;
  --cs-green: #3e7d5b;
  --cs-green-2: #2ea05a;
  --cs-amber: #966e00;
  --cs-amber-2: #b07800;
  --cs-red: #de364d;
  --cs-console-line: #e5e7eb;
  --cs-console-bg: #fafaf9;
}
:root[data-theme="dark"] {
  --cs-line: #2a2d36;
  --cs-surface: #17181c;
  --cs-card: #121317;
  --cs-blue-tint: #172036;
  --cs-blue-tint-2: #172036;
  --cs-cream: #2a2412;
  --cs-green-tint: #14261c;
  --cs-red-tint: #2c161a;
  --cs-console-line: #2a2d36;
  --cs-console-bg: #0f1013;
}

.cs-page { background: var(--bg); color: var(--ink); }
.cs-page .nav-slot { padding-top: 12px; }
.cs-top { position: relative; padding: 0 var(--gutter); }

/* --- Hero --- */
.cs-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 72px var(--gutter) 56px;
}
.lbl {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
.lbl--12 { font-size: 12px; }
.lbl--10 { font-size: 10px; }
.lbl--9 { font-size: 9px; }
.lbl--blue { color: var(--blue); }
.lbl--sun { color: var(--sun); }
.lbl--ink { color: var(--ink); }
.lbl--green { color: var(--cs-green); }
.lbl--amber { color: var(--cs-amber); }
.lbl--red { color: var(--cs-red); }
.lbl--soft { color: #b7bac2; }
.lbl--case { text-transform: none; }
a.lbl:hover { color: var(--ink); }

.cs-tags { display: flex; gap: 16px; align-items: baseline; font-family: var(--font-mono); font-weight: 500; }
.cs-tags .tag { color: var(--blue); font-size: 13px; letter-spacing: 0.02em; }
.cs-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 68px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 920px;
  color: var(--ink);
}
.cs-lede { font-size: 20px; line-height: 1.5; color: var(--muted); max-width: 840px; }
.cs-meta { width: 100%; padding-top: 16px; display: flex; flex-direction: column; gap: 20px; }
.cs-meta hr { margin: 0; border: 0; height: 1px; background: var(--cs-line); }
.cs-meta dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.cs-meta dt { margin-bottom: 6px; }
.cs-meta dd { font-size: 15px; line-height: 1.5; color: var(--ink); }

/* --- Visual frame --- */
.cs-visual { padding: 0 var(--gutter) 24px; display: flex; flex-direction: column; gap: 12px; }
.cs-frame {
  width: 100%;
  background: var(--cs-surface);
  border: 1px solid var(--cs-line);
  border-radius: 16px;
  overflow: hidden;
}
.cs-frame__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--cs-card);
}
.cs-frame__bar .title { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; color: var(--ink); }
.cs-scroll { overflow-x: auto; }

/* --- NDA note --- */
.cs-note { padding: 24px var(--gutter); }
.cs-note__box {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 18px 24px;
  border-radius: 12px;
  background: rgba(var(--sun-rgb), 0.22);
  color: var(--ink);
}
.cs-note__box .lbl { color: var(--ink); padding-top: 4px; }
.cs-note__box p { font-size: 15px; line-height: 1.55; }

/* --- Content sections --- */
.cs-content { padding: 88px var(--gutter) 120px; display: flex; flex-direction: column; gap: 112px; }
.cs-section { display: flex; flex-direction: column; gap: 28px; width: 100%; min-width: 0; }
.cs-head { display: flex; flex-direction: column; gap: 10px; }
.cs-h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: 820px;
  color: var(--ink);
}
.cs-sub { font-size: 18px; line-height: 1.55; color: var(--muted); max-width: 720px; }

/* --- Grids & tiles --- */
.g { display: grid; gap: 16px; width: 100%; align-items: stretch; }
.g--2 { grid-template-columns: repeat(2, 1fr); }
.g--3 { grid-template-columns: repeat(3, 1fr); }
.g--4 { grid-template-columns: repeat(4, 1fr); }
.g--20 { gap: 20px; }
.g--start { align-items: start; }
.row { display: flex; gap: 16px; width: 100%; min-width: 0; }
.row--center { align-items: center; }
.row--20 { gap: 20px; }
.col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.grow { flex: 1 1 0; min-width: 0; }

.tile {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 24px;
  border-radius: 20px;
  background: var(--cs-surface);
}
.tile--p28 { padding: 28px; }
.tile--p22 { padding: 22px; }
.tile--g10 { gap: 10px; }
.tile--g16 { gap: 16px; }
.tile--r16 { border-radius: 16px; }
.tile--center { align-items: center; }
.tile--blue { background: var(--cs-blue-tint); }
.tile--cream { background: var(--cs-cream); }
.tile--green { background: var(--cs-green-tint); }
.tile--red { background: var(--cs-red-tint); }
.tile--white { background: var(--cs-card); border: 1px solid var(--cs-line); }
.tile--ink { background: var(--cs-dark); }
.tile--ink .t-h, .tile--ink .t-serif, .tile--ink .lbl--white { color: #fff; }
.tile--ink .t-p { color: #b7bac2; }
.tile--code { background: var(--cs-code); }
.t-h { font-weight: 600; font-size: 20px; line-height: 1.3; color: var(--ink); }
.t-h--17 { font-size: 17px; line-height: 1.3; }
.t-h--16 { font-size: 16px; }
.t-h--15 { font-size: 15px; }
.t-p { font-size: 14px; line-height: 1.5; color: var(--muted); }
.t-p--13 { font-size: 13px; }
.t-p--16 { font-size: 16px; }
.t-serif {
  font-family: var(--font-serif);
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 28px;
  line-height: 1.15;
  color: var(--ink);
}
.t-serif--40 { font-size: 40px; line-height: 1; letter-spacing: -0.01em; }
.t-serif--24 { font-size: 24px; line-height: 1; }
.t-serif--36 { font-size: 36px; line-height: 1; color: var(--blue); }
.t-serif--44 { font-size: 44px; line-height: 1; color: var(--blue); }

/* --- Code block --- */
.code {
  width: 100%;
  padding: 18px 20px;
  border-radius: 12px;
  background: var(--cs-code);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.6;
}
.code pre { margin: 0; font: inherit; white-space: pre; overflow-x: auto; }
.code .dim { color: #b7bac2; }
.code .blue { color: var(--blue); }
.code--14 { font-size: 14px; line-height: 1.7; }

/* --- Mini blocks for flows --- */
.flow { display: flex; flex-direction: column; align-items: center; width: 100%; }
.mb {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 300px;
  max-width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--cs-line);
  border-radius: 12px;
  background: var(--cs-card);
}
.mb .lbl { font-size: 10px; color: var(--blue); }
.mb .txt { font-size: 14px; line-height: 1.4; color: var(--ink); }
.mb--active { border: 2px solid var(--blue); }
.mb--sm { width: 240px; padding: 10px 12px; border-radius: 10px; gap: 4px; }
.mb--sm .lbl { font-size: 9px; }
.mb--sm .txt { font-size: 12px; line-height: 1.35; }
.mb--xs { width: 140px; }
.conn { width: 2px; height: 24px; background: #b7bac2; flex-shrink: 0; }
.conn--20 { height: 20px; }
.branches { display: flex; gap: 20px; }
.branches--12 { gap: 12px; }

/* --- Pills, chips, avatars, badges --- */
.pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  padding: 4px 10px;
  border: 1px solid var(--cs-line);
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
}
.pill--dark { border-color: var(--cs-grey); color: #fff; }
.pill--fill { border: 0; background: var(--cs-surface); font-weight: 600; font-size: 11px; padding: 3px 9px; }
.pill--white { border: 0; background: var(--cs-card); font-weight: 600; font-size: 11px; padding: 3px 9px; }
.pill--ink { border: 0; background: var(--cs-dark); color: #fff; font-weight: 600; font-size: 11px; padding: 3px 9px; }
.pill--blue { border: 0; background: var(--cs-blue-tint-2); color: var(--blue); font-weight: 600; }
.pill--green { border: 0; background: var(--cs-green-tint); color: var(--cs-green-2); font-weight: 600; }
.pill--red { border: 0; background: var(--cs-red-tint); color: var(--cs-red); font-weight: 600; }
.pill--amber { border: 0; background: var(--cs-cream); color: var(--cs-amber-2); font-weight: 600; }
.pill--sm { font-size: 11px; padding: 3px 9px; }
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 11px;
  flex-shrink: 0;
}
.avatar--blue { background: var(--cs-blue-tint-2); color: var(--blue); }
.avatar--green { background: var(--cs-green-tint); color: var(--cs-green-2); }
.avatar--amber { background: var(--cs-cream); color: var(--cs-amber-2); }
.avatar--red { background: var(--cs-red-tint); color: var(--cs-red); }
.avatar--grey { background: var(--cs-surface); color: var(--muted); }
.avatar--white { background: var(--cs-card); color: var(--blue); }
.avatar--36 { width: 36px; height: 36px; }
.avatar--44 { width: 44px; height: 44px; font-size: 13px; }
.avatar--30 { width: 30px; height: 30px; }
.badge { padding: 4px 8px; border-radius: 6px; font-weight: 600; font-size: 11px; }
.badge--green { background: var(--cs-green-tint); color: var(--cs-green); }
.badge--amber { background: var(--cs-cream); color: var(--cs-amber); }
.btn-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}
.btn-mini--primary { background: var(--blue); color: #fff; }
.btn-mini--secondary { background: var(--cs-card); border: 1px solid var(--cs-line); color: var(--ink); }
.btn-mini--ghost { background: var(--cs-card); color: var(--blue); }
.btn-mini--sm { padding: 7px 12px; font-size: 12px; }
.btn-mini--pill { border-radius: 999px; padding: 8px 18px; background: var(--cs-dark); color: #fff; font-weight: 500; }
.field {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--cs-line);
  border-radius: 8px;
  background: var(--cs-card);
  font-size: 13px;
  color: var(--ink);
}
.field--muted { color: var(--muted); }
.field--grey { background: var(--cs-surface); border: 0; color: var(--muted); }
.swatch { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }
.swatch--28 { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--cs-line); }
.token-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--cs-surface);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  color: var(--ink);
}
.kv { display: flex; justify-content: space-between; gap: 12px; width: 100%; font-size: 12px; }
.kv .k { color: var(--muted); }
.kv .v { color: var(--ink); font-weight: 600; }
.kv--13 { font-size: 13px; }
.kv--14 { font-size: 14px; }
.skel { height: 6px; border-radius: 3px; background: var(--cs-line); flex-shrink: 0; }
.skel--blue { background: var(--blue); }
.skel--mid { background: #b7bac2; }
.skel--7 { height: 7px; border-radius: 3.5px; }
.skel--5 { height: 5px; border-radius: 2.5px; }

/* --- Numbered rows --- */
.nrows { width: 100%; }
.nrow { display: flex; gap: 40px; align-items: flex-start; padding: 26px 0; border-top: 1px solid var(--cs-line); }
.nrow:last-child { border-bottom: 1px solid var(--cs-line); }
.nrow .n { width: 80px; flex-shrink: 0; }
.nrow h3 { font-weight: 600; font-size: 22px; line-height: 1.3; color: var(--ink); margin-bottom: 6px; }
.nrow p { font-size: 16px; line-height: 1.5; color: var(--muted); }
.nrow--tile { gap: 20px; align-items: center; padding: 20px 22px; border: 0; border-radius: 16px; background: var(--cs-surface); }
.nrow--tile:last-child { border: 0; }
.nrow--tile .n { width: 56px; }
.nrow--tile h3 { font-size: 17px; margin-bottom: 4px; }
.nrow--tile p { font-size: 14px; }

/* --- Pipeline (5 steps) --- */
.cs-steps { display: flex; align-items: stretch; gap: 10px; width: 100%; }
.cs-steps .arrow { align-self: center; color: #b7bac2; font-size: 18px; flex-shrink: 0; }
.cs-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 20px 18px; border-radius: 16px; background: var(--cs-surface); }
.cs-step--ink { background: var(--cs-dark); }
.cs-step--ink .t-h { color: #fff; }
.cs-step--ink .t-p { color: #b7bac2; }

/* --- Diagram boxes (absolute shapes) --- */
.diagram { position: relative; width: 100%; height: 200px; border-radius: 12px; background: var(--cs-card); overflow: hidden; }
.diagram--dark { background: var(--cs-code); }
.diagram i { position: absolute; display: block; border-radius: 6px; }

/* --- Closing quote + CTA --- */
.cs-quote { display: flex; flex-direction: column; gap: 14px; width: 100%; padding: 48px 56px; border-radius: 24px; background: var(--cs-cream); }
.cs-quote .q {
  font-family: var(--font-serif);
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 52px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cs-quote .q--48 { font-size: 48px; line-height: 1.12; }
.cs-quote p { font-size: 18px; line-height: 1.55; color: var(--muted); }
.cs-cta { display: flex; gap: 24px; align-items: center; width: 100%; padding: 28px 32px; border-radius: 20px; background: var(--cs-dark); }
.cs-cta h3 { font-weight: 600; font-size: 22px; color: #fff; margin-bottom: 6px; }
.cs-cta p { font-size: 15px; line-height: 1.5; color: #b7bac2; }
.btn-sun {
  flex-shrink: 0;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--sun);
  color: #15161a;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  transition: transform 0.2s ease;
}
.btn-sun:hover { transform: translateY(-2px); }

/* --- Next --- */
.cs-next {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 72px var(--gutter);
  background: #15161a;
  color: #fff;
}
.cs-next__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 48px;
  line-height: 1.1;
  color: #fff;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cs-next__title:hover { transform: translateX(6px); }

/* --- Builder mock (Zobot) --- */
.builder__ws { display: flex; align-items: stretch; min-width: 880px; }
.builder__palette { width: 200px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; padding: 20px 16px; background: var(--cs-card); }
.builder__palette .item { padding: 10px 12px; border-radius: 8px; background: var(--cs-surface); font-size: 13px; color: var(--ink); }
.builder__canvas { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 40px; }
.builder__inspector { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; padding: 20px; background: var(--cs-card); }
.builder__field { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.builder__field > span { font-size: 12px; color: var(--muted); }
.toggle-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink); }

/* --- Token pipeline mock (Design system) --- */
.pipe__body { display: flex; flex-direction: column; gap: 20px; padding: 36px; }
.pipe__col { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--cs-line); border-radius: 12px; background: var(--cs-card); }
.pipe__out { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 12px; background: var(--cs-dark); }
.pipe__out b { font-weight: 600; font-size: 14px; color: #fff; }
.pipe__out span { font-size: 12px; line-height: 1.5; color: #b7bac2; }

/* --- Device mocks (Design system 01) --- */
.widget { width: 260px; max-width: 100%; display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; border: 1px solid var(--cs-line); border-radius: 16px; background: var(--cs-card); overflow: hidden; }
.widget__head { padding: 14px 16px; background: var(--cs-dark); color: #fff; font-weight: 600; font-size: 13px; }
.widget__body { display: flex; flex-direction: column; gap: 10px; padding: 0 16px; }
.bubble { align-self: flex-start; padding: 9px 12px; border-radius: 10px; background: var(--cs-surface); font-size: 12px; color: var(--ink); }
.phone { width: 190px; display: flex; flex-direction: column; gap: 12px; padding: 18px 14px 22px; border: 1px solid var(--cs-line); border-radius: 28px; background: var(--cs-card); }
.phone__notch { width: 48px; height: 5px; margin: 0 auto; border-radius: 3px; background: var(--cs-line); }
.wa { width: 240px; display: flex; flex-direction: column; gap: 8px; padding: 16px 14px; border-radius: 16px; background: #ece5dd; }
.wa__msg { padding: 10px 12px; border-radius: 10px; background: #fff; font-size: 12px; line-height: 1.45; color: #15161a; }
.wa__btn { display: flex; justify-content: center; padding: 9px 12px; border-radius: 10px; background: #fff; font-weight: 600; font-size: 13px; color: var(--blue); }

/* --- Component sampler (Design system 03) --- */
.sample { display: flex; flex-direction: column; gap: 14px; padding: 20px 20px 16px; border-radius: 16px; background: var(--cs-surface); }
.sample__stage { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 0; }
.segment { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--cs-line); border-radius: 10px; background: var(--cs-card); }
.segment span { padding: 6px 10px; border-radius: 8px; font-size: 12px; color: var(--muted); }
.segment .on { background: var(--cs-dark); color: #fff; }

/* --- Console mock (Operator Console) --- */
.console { height: 720px; background: var(--cs-card); border: 1px solid var(--cs-console-line); border-radius: 16px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06); overflow: hidden; display: flex; flex-direction: column; min-width: 1100px; }
.console__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--cs-console-line); }
.console__search { width: 420px; padding: 9px 14px; border-radius: 10px; background: var(--cs-surface); font-size: 13px; color: var(--muted); }
.console__body { display: flex; flex: 1 1 0; min-height: 0; }
.console__rail { width: 64px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 12px; border-right: 1px solid var(--cs-console-line); }
.console__rail i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; }
.console__rail i::before { content: ""; width: 16px; height: 16px; border: 1.6px solid #b7bac2; border-radius: 4px; }
.console__rail i.on { background: var(--cs-blue-tint-2); }
.console__rail i.on::before { border-color: var(--blue); }
.console__folders { width: 200px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; padding: 16px 12px; background: var(--cs-console-bg); border-right: 1px solid var(--cs-console-line); }
.console__folders .head { display: flex; justify-content: space-between; padding: 0 6px 10px; font-weight: 600; font-size: 14px; color: var(--ink); }
.console__folders .head span { color: var(--muted); font-weight: 500; font-size: 16px; }
.console__folders .group { padding: 12px 10px 4px; }
.console__folders .f { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--ink); }
.console__folders .f.on { background: var(--cs-card); border: 1px solid var(--cs-console-line); color: var(--blue); font-weight: 600; }
.cnt { padding: 1px 7px; border-radius: 999px; font-weight: 600; font-size: 12px; color: var(--muted); }
.cnt--blue { background: var(--cs-blue-tint-2); color: var(--blue); }
.cnt--red { background: var(--cs-red-tint); color: var(--cs-red); }
.cnt--amber { background: var(--cs-cream); color: var(--cs-amber-2); }
.console__queue { width: 270px; flex-shrink: 0; display: flex; flex-direction: column; border-right: 1px solid var(--cs-console-line); }
.console__queue .head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px; font-weight: 600; font-size: 14px; color: var(--ink); }
.console__queue .filters { display: flex; gap: 6px; padding: 0 16px 12px; }
.console__queue .list { display: flex; flex-direction: column; gap: 2px; padding: 0 8px 8px; }
.qitem { display: flex; gap: 10px; align-items: flex-start; padding: 11px 10px; border-radius: 10px; }
.qitem.on { background: var(--cs-blue-tint-2); }
.qitem .body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.qitem .top { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--ink); }
.qitem .top span { font-weight: 500; font-size: 11px; color: var(--muted); }
.qitem .top span.now { color: var(--blue); }
.qitem .line { font-size: 12px; color: var(--muted); }
.qitem .tagrow { padding-top: 3px; }
.console__chat { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; background: var(--cs-console-bg); }
.console__chat .head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--cs-card); border-bottom: 1px solid var(--cs-console-line); }
.console__chat .head .name { font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 6px; }
.console__chat .head .tags { display: flex; align-items: center; gap: 6px; }
.console__chat .msgs { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 18px 22px; }
.msg { display: flex; }
.msg--out { justify-content: flex-end; }
.msg__b { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px 8px; border-radius: 14px; background: var(--cs-card); border: 1px solid var(--cs-console-line); font-size: 13px; line-height: 1.45; color: var(--ink); }
.msg__b time { font-size: 10px; color: #b7bac2; }
.msg--out .msg__b { background: var(--blue); border-color: var(--blue); color: #fff; }
.msg--out .msg__b time { color: #dce8ff; }
.msg--note .msg__b { background: var(--cs-cream); border-color: var(--cs-cream); color: var(--ink); }
.msg--note .msg__b time { color: #b7bac2; }
.composer { margin: 0 18px 16px; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--cs-console-line); border-radius: 14px; background: var(--cs-card); }
.composer .tabs { display: flex; gap: 16px; font-size: 13px; color: var(--muted); }
.composer .tabs .on { color: var(--blue); font-weight: 600; display: flex; flex-direction: column; gap: 4px; }
.composer .tabs .on::after { content: ""; width: 36px; height: 2px; background: var(--blue); }
.composer .ph { font-size: 13px; color: #b7bac2; }
.composer .foot { display: flex; align-items: center; justify-content: space-between; }
.composer .tools { display: flex; gap: 14px; font-family: var(--font-mono); font-weight: 500; font-size: 13px; color: var(--muted); }
.console__ctx { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; padding: 18px; border-left: 1px solid var(--cs-console-line); }
.ctx__id { display: flex; align-items: center; gap: 12px; }
.ctx__id .avatar { position: relative; }
.ctx__id .avatar img { position: absolute; left: 34px; top: 34px; }
.ctx__id b { display: block; font-weight: 600; font-size: 15px; color: var(--ink); }
.ctx__id span { font-size: 12px; color: var(--muted); }
.ctx__contact { display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--ink); }
.ctx__stat { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--cs-surface); }
.ctx__stat .lbl { font-size: 8px; }
.ctx__acc { display: flex; flex-direction: column; }
.ctx__acc > div { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-top: 1px solid var(--cs-console-line); }
.ctx__acc .t { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 13px; color: var(--ink); }

/* --- Anatomy skeleton cards (Operator Console 01) --- */
.anatomy { display: flex; gap: 12px; width: 100%; padding: 20px; border-radius: 20px; background: var(--cs-surface); }
.anat { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 18px; border-radius: 14px; background: var(--cs-card); min-width: 0; }
.anat__stage { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 8px; width: 100%; }
.anat__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 6px; }
.anat__row--on { background: var(--cs-blue-tint); }
.anat__chat { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; }
.anat__chat--on { background: var(--cs-blue-tint); }
.anat__bubble { padding: 9px 10px; border-radius: 8px; background: var(--cs-surface); display: inline-flex; }
.anat__bubble--out { background: var(--cs-blue-tint); }

/* --- Operators (Operator Console 03) --- */
.op { display: flex; align-items: center; gap: 14px; width: 100%; }
.op .name { width: 90px; font-size: 15px; color: var(--ink); }
.op .bar { flex: 1 1 0; height: 10px; border-radius: 999px; background: var(--cs-surface); overflow: hidden; }
.op .bar i { display: block; height: 100%; border-radius: 5px; }
.op .val { width: 80px; font-family: var(--font-mono); font-weight: 500; font-size: 14px; color: var(--ink); text-align: right; }

/* --- Slash composer (Operator Console 04) --- */
.slash { display: flex; align-items: center; gap: 2px; width: 100%; padding: 14px; border-radius: 10px; background: var(--cs-surface); font-family: var(--font-mono); font-weight: 500; font-size: 15px; color: var(--ink); }
.slash .blue { color: var(--blue); }
.slash-list { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 6px; border: 1px solid var(--cs-line); border-radius: 10px; }
.slash-list div { display: flex; gap: 12px; padding: 8px 10px; border-radius: 8px; font-size: 12px; }
.slash-list div.on { background: var(--cs-blue-tint); }
.slash-list .cmd { font-family: var(--font-mono); font-weight: 500; color: var(--blue); }
.slash-list .desc { color: var(--muted); }

/* --- Responsive --- */
@media (max-width: 1080px) {
  .cs-title { font-size: 52px; }
  .cs-h2 { font-size: 36px; }
  .cs-meta dl { grid-template-columns: repeat(2, 1fr); }
  .g--4 { grid-template-columns: repeat(2, 1fr); }
  .g--3 { grid-template-columns: 1fr; }
  .row--wrap { flex-wrap: wrap; }
  .cs-steps { flex-wrap: wrap; }
  .cs-steps .arrow { display: none; }
  .cs-step { flex: 1 1 calc(50% - 10px); }
  .cs-quote { padding: 36px; }
  .cs-quote .q, .cs-quote .q--48 { font-size: 36px; }
  .cs-next__title { font-size: 36px; }
  .anatomy { flex-wrap: wrap; }
  .anat { width: calc(50% - 6px) !important; flex: none !important; }
  .nrow { gap: 20px; }
}
@media (max-width: 720px) {
  .cs-hero { padding-top: 48px; }
  .cs-title { font-size: 38px; }
  .cs-lede { font-size: 17px; }
  .cs-h2 { font-size: 30px; }
  .cs-content { gap: 72px; padding-top: 56px; padding-bottom: 80px; }
  .cs-meta dl, .g--2, .g--4 { grid-template-columns: 1fr; }
  .row { flex-direction: column; }
  .row > .fixed { width: 100% !important; }
  .cs-step { flex: 1 1 100%; }
  .cs-cta { flex-direction: column; align-items: flex-start; }
  .anat { width: 100% !important; }
  .nrow .n { width: 56px; }
  .cs-quote .q, .cs-quote .q--48 { font-size: 30px; }
  .cs-next { padding: 48px var(--gutter); }
}

/* --- Case-page navigation: back, counter, next --- */
.nav__pill--case .nav__link { white-space: nowrap; }
.nav__case { padding: 8px 10px; font-size: 12px; color: #9a9ea8; white-space: nowrap; position: relative; z-index: 1; }
.nav__link--next { color: var(--sun); }
.nav__link--next.is-active { color: var(--sun); }
.cs-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--cs-line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cs-back:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); transform: translateX(-2px); }
.cs-next { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px; }
.cs-next__main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cs-next__title { font-size: 56px; display: inline-flex; align-items: baseline; gap: 16px; }
.cs-next__arrow { color: var(--sun); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.cs-next__title:hover .cs-next__arrow { transform: translateX(8px); }
.cs-next__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: 1px solid var(--cs-grey);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.cs-next__all:hover { background: #fff; border-color: #fff; color: #15161a; }
@media (max-width: 1080px) { .cs-next__title { font-size: 40px; } }
@media (max-width: 720px) {
  .cs-next { flex-direction: column; align-items: flex-start; }
  .cs-next__title { font-size: 32px; }
  .nav__case { display: none; }
}