/* ═══════════════════════════════════════════════════════════
   DLD PRESENTATION — LATCHES
   Design: Indigo Ink × Circuit Board
   Fonts: Syne (display) + Plus Jakarta Sans (body) + Space Mono (code)
═══════════════════════════════════════════════════════════ */

/* ── CSS VARIABLES ── */
:root {
  --bg-deep:      #0D0720;
  --bg-dark:      #1B0A3C;
  --bg-mid:       #2A1260;
  --bg-card:      #1E0D45;
  --accent-main:  #7B68EE;
  --accent-bright:#A89BFF;
  --accent-glow:  #5B4FCC;
  --text-primary: #F0ECFF;
  --text-secondary:#C4B8F0;
  --text-muted:   #8A7EC0;
  --green:        #A8FF78;
  --red:          #FF8C8C;
  --gold:         #FFD700;
  --cyan:         #78DEFF;

  /* Member colors */
  --m1: #FF6B9D;
  --m2: #78DEFF;
  --m3: #A8FF78;
  --m4: #FFD700;
  --m5: #FF9F43;
  --m6: #C56BFF;

  --slide-w: 100vw;
  --slide-h: 100vh;
  --font-display: 'Syne', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'Space Mono', monospace;
}

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* ── PROGRESS BAR ── */
.progress-bar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 100;
  background: rgba(123,104,238,0.2);
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-main), var(--accent-bright));
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 0 8px var(--accent-main);
}

/* ── SLIDE COUNTER ── */
.slide-counter {
  position: fixed; top: 14px; right: 70px;
  font-family: var(--font-mono);
  font-size: 11px; color: var(--text-muted);
  z-index: 100; letter-spacing: 0.05em;
}

/* ── NOTES TOGGLE ── */
.notes-toggle {
  position: fixed; bottom: 20px; right: 20px;
  display: flex; align-items: center; gap: 6px;
  background: rgba(27,10,60,0.9);
  border: 1px solid rgba(123,104,238,0.4);
  color: var(--text-muted);
  font-family: var(--font-body); font-size: 11px;
  padding: 7px 12px; border-radius: 20px;
  cursor: pointer; z-index: 100;
  transition: all 0.2s;
  backdrop-filter: blur(8px);
}
.notes-toggle:hover { color: var(--accent-bright); border-color: var(--accent-main); }
.notes-toggle.active { color: var(--accent-bright); border-color: var(--accent-main); background: rgba(123,104,238,0.15); }

/* ── NAVIGATION BUTTONS ── */
.nav-btn {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  background: rgba(27,10,60,0.85);
  border: 1px solid rgba(123,104,238,0.35);
  color: var(--text-secondary);
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 100; transition: all 0.2s;
  backdrop-filter: blur(8px);
}
.nav-btn:hover { background: rgba(123,104,238,0.25); color: var(--accent-bright); border-color: var(--accent-main); }
.nav-btn:disabled { opacity: 0.25; cursor: not-allowed; }
.nav-prev { left: 14px; }
.nav-next { right: 14px; }

/* ── FULLSCREEN BUTTON ── */
.fullscreen-btn {
  position: fixed; top: 10px; right: 14px;
  width: 34px; height: 34px;
  background: rgba(27,10,60,0.85);
  border: 1px solid rgba(123,104,238,0.3);
  color: var(--text-muted); border-radius: 8px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  z-index: 100; transition: all 0.2s;
}
.fullscreen-btn:hover { color: var(--accent-bright); border-color: var(--accent-main); }

/* ── PRESENTATION CONTAINER ── */
.presentation {
  width: 100vw; height: 100vh;
  position: relative; overflow: hidden;
}

/* ── CIRCUIT BACKGROUND ── */
.circuit-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(123,104,238,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123,104,238,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none; z-index: 0;
}
.circuit-bg::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 20%, rgba(123,104,238,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 85% 80%, rgba(91,79,204,0.10) 0%, transparent 60%);
}
.circuit-bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='40' cy='40' r='2' fill='%237B68EE' opacity='0.15'/%3E%3Ccircle cx='160' cy='80' r='2' fill='%237B68EE' opacity='0.1'/%3E%3Ccircle cx='100' cy='160' r='2' fill='%237B68EE' opacity='0.12'/%3E%3Cline x1='40' y1='40' x2='100' y2='40' stroke='%237B68EE' stroke-width='0.5' opacity='0.08'/%3E%3Cline x1='100' y1='40' x2='160' y2='80' stroke='%237B68EE' stroke-width='0.5' opacity='0.08'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ── SLIDES ── */
.slide {
  position: absolute; inset: 0;
  background: var(--bg-deep);
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transform: translateX(60px);
  transition: opacity 0.45s cubic-bezier(0.4,0,0.2,1),
              transform 0.45s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}
.slide.active {
  opacity: 1; pointer-events: all;
  transform: translateX(0);
}
.slide.exit-left {
  opacity: 0; transform: translateX(-60px);
}

/* ── SPEAKER NOTES ── */
.slide-notes {
  display: none;
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(10,5,25,0.96);
  border-top: 1px solid rgba(123,104,238,0.3);
  padding: 14px 24px;
  font-size: 13px; line-height: 1.6;
  color: var(--text-secondary);
  font-family: var(--font-body);
  z-index: 50;
  backdrop-filter: blur(12px);
}
.slide-notes::before {
  content: '🎤 Speaker Notes';
  display: block;
  font-size: 10px; font-weight: 700;
  color: var(--accent-main);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 6px;
}
body.notes-visible .slide-notes { display: block; }

/* ══════════════════════════════════════════════════════════
   TITLE SLIDE
══════════════════════════════════════════════════════════ */
.slide-title {
  background: radial-gradient(ellipse 80% 70% at 50% 40%, #2A1260 0%, #0D0720 70%);
  align-items: center; justify-content: center;
}
.title-content {
  position: relative; z-index: 1;
  text-align: center; max-width: 820px;
  padding: 0 40px;
}
.subject-tag {
  display: inline-block;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--accent-main); letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid rgba(123,104,238,0.4);
  padding: 5px 16px; border-radius: 20px;
  margin-bottom: 24px;
  background: rgba(123,104,238,0.08);
}
.main-title {
  font-family: var(--font-display);
  font-size: clamp(64px, 10vw, 110px);
  font-weight: 800; line-height: 0.9;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #F0ECFF 0%, #A89BFF 50%, #7B68EE 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
}
.subtitle {
  font-size: 18px; color: var(--text-secondary);
  font-weight: 400; letter-spacing: 0.02em;
  margin-bottom: 32px;
}
.title-divider {
  width: 80px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-main), transparent);
  margin: 0 auto 28px;
}
.group-label {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-muted); letter-spacing: 0.15em;
  text-transform: uppercase; margin-bottom: 20px;
}
.members-grid {
  display: flex; flex-wrap: wrap;
  gap: 8px; justify-content: center;
}
.member-chip {
  font-size: 12px; font-weight: 600;
  padding: 6px 14px; border-radius: 20px;
  border: 1px solid; display: flex; align-items: center; gap: 8px;
}
.member-chip span {
  font-family: var(--font-mono); font-size: 10px;
  opacity: 0.7;
}
.member-chip.m1 { color: var(--m1); border-color: rgba(255,107,157,0.35); background: rgba(255,107,157,0.08); }
.member-chip.m2 { color: var(--m2); border-color: rgba(120,222,255,0.35); background: rgba(120,222,255,0.08); }
.member-chip.m3 { color: var(--m3); border-color: rgba(168,255,120,0.35); background: rgba(168,255,120,0.08); }
.member-chip.m4 { color: var(--m4); border-color: rgba(255,215,0,0.35); background: rgba(255,215,0,0.08); }
.member-chip.m5 { color: var(--m5); border-color: rgba(255,159,67,0.35); background: rgba(255,159,67,0.08); }
.member-chip.m6 { color: var(--m6); border-color: rgba(197,107,255,0.35); background: rgba(197,107,255,0.08); }

/* ══════════════════════════════════════════════════════════
   MEMBER BANNER
══════════════════════════════════════════════════════════ */
.member-banner {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 28px;
  border-bottom: 1px solid rgba(123,104,238,0.15);
  background: rgba(13,7,32,0.6);
  backdrop-filter: blur(8px);
  flex-shrink: 0;
}
.member-name {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
}
.member-id {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-muted); letter-spacing: 0.08em;
}
.topic-tag {
  margin-left: auto;
  font-size: 10px; font-weight: 600;
  padding: 3px 10px; border-radius: 10px;
  letter-spacing: 0.05em; text-transform: uppercase;
}

.m1-banner { border-left: 3px solid var(--m1); }
.m1-banner .member-name { color: var(--m1); }
.m1-banner .topic-tag { background: rgba(255,107,157,0.12); color: var(--m1); border: 1px solid rgba(255,107,157,0.3); }

.m2-banner { border-left: 3px solid var(--m2); }
.m2-banner .member-name { color: var(--m2); }
.m2-banner .topic-tag { background: rgba(120,222,255,0.12); color: var(--m2); border: 1px solid rgba(120,222,255,0.3); }

.m3-banner { border-left: 3px solid var(--m3); }
.m3-banner .member-name { color: var(--m3); }
.m3-banner .topic-tag { background: rgba(168,255,120,0.12); color: var(--m3); border: 1px solid rgba(168,255,120,0.3); }

.m4-banner { border-left: 3px solid var(--m4); }
.m4-banner .member-name { color: var(--m4); }
.m4-banner .topic-tag { background: rgba(255,215,0,0.12); color: var(--m4); border: 1px solid rgba(255,215,0,0.3); }

.m5-banner { border-left: 3px solid var(--m5); }
.m5-banner .member-name { color: var(--m5); }
.m5-banner .topic-tag { background: rgba(255,159,67,0.12); color: var(--m5); border: 1px solid rgba(255,159,67,0.3); }

.m6-banner { border-left: 3px solid var(--m6); }
.m6-banner .member-name { color: var(--m6); }
.m6-banner .topic-tag { background: rgba(197,107,255,0.12); color: var(--m6); border: 1px solid rgba(197,107,255,0.3); }

/* ══════════════════════════════════════════════════════════
   SLIDE BODY
══════════════════════════════════════════════════════════ */
.slide-body {
  position: relative; z-index: 1;
  flex: 1; display: flex; flex-direction: column;
  padding: 28px 48px 24px;
  overflow: hidden;
}

/* ── SLIDE HEADER ── */
.slide-header {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 24px; flex-shrink: 0;
}
.slide-num-tag {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--accent-main); letter-spacing: 0.1em;
  background: rgba(123,104,238,0.12);
  border: 1px solid rgba(123,104,238,0.3);
  padding: 3px 10px; border-radius: 4px;
  flex-shrink: 0;
}
.slide-header h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.2vw, 36px);
  font-weight: 700; line-height: 1.1;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.slide-subtitle {
  font-size: 14px; color: var(--text-muted);
  font-weight: 400; margin-left: 4px;
}

/* ── TWO COLUMN LAYOUT ── */
.two-col {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 32px; flex: 1; align-items: start;
}
.col-main, .col-side { display: flex; flex-direction: column; gap: 16px; }

/* ── BULLET LIST ── */
.bullet-list {
  list-style: none; display: flex; flex-direction: column; gap: 12px;
}
.bullet-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 15px; line-height: 1.5; color: var(--text-secondary);
}
.bullet-icon {
  color: var(--accent-main); font-size: 12px;
  margin-top: 3px; flex-shrink: 0;
}
.bullet-list strong { color: var(--text-primary); }
.sub-list {
  list-style: none; margin-top: 6px; margin-left: 4px;
  display: flex; flex-direction: column; gap: 4px;
}
.sub-list li {
  font-size: 13px; color: var(--text-muted);
  padding-left: 12px; position: relative;
}
.sub-list li::before {
  content: '–'; position: absolute; left: 0;
  color: var(--accent-glow);
}

/* ── DEFINITION CARD ── */
.definition-card {
  background: rgba(123,104,238,0.08);
  border: 1px solid rgba(123,104,238,0.25);
  border-left: 3px solid var(--accent-main);
  border-radius: 8px; padding: 16px 18px;
}
.def-label {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--accent-main); letter-spacing: 0.15em;
  text-transform: uppercase; margin-bottom: 8px;
}
.definition-card p {
  font-size: 14px; line-height: 1.6;
  color: var(--text-secondary); font-style: italic;
}
.definition-card strong { color: var(--text-primary); font-style: normal; }

/* ── BISTABLE VISUAL ── */
.bistable-visual {
  display: flex; align-items: center; gap: 12px;
  justify-content: center; padding: 16px;
  background: rgba(13,7,32,0.5);
  border: 1px solid rgba(123,104,238,0.2);
  border-radius: 8px;
}
.state-box {
  padding: 10px 20px; border-radius: 6px;
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
}
.state-0 { background: rgba(255,140,140,0.15); border: 1px solid rgba(255,140,140,0.4); color: var(--red); }
.state-1 { background: rgba(168,255,120,0.15); border: 1px solid rgba(168,255,120,0.4); color: var(--green); }
.state-arrow { font-size: 20px; color: var(--accent-main); }

/* ── PURPOSE GRID ── */
.purpose-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; flex: 1;
}
.purpose-card {
  background: rgba(27,10,60,0.7);
  border: 1px solid rgba(123,104,238,0.2);
  border-radius: 10px; padding: 18px 16px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color 0.2s, transform 0.2s;
}
.purpose-card:hover { border-color: rgba(123,104,238,0.5); transform: translateY(-2px); }
.purpose-icon { font-size: 24px; }
.purpose-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.purpose-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.purpose-highlight {
  background: linear-gradient(135deg, rgba(123,104,238,0.2), rgba(91,79,204,0.1));
  border: 1px solid rgba(123,104,238,0.4);
  border-radius: 10px; padding: 18px 16px;
  display: flex; flex-direction: column; gap: 6px;
  justify-content: center;
}
.ph-label {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--accent-main); letter-spacing: 0.15em; text-transform: uppercase;
}
.ph-text { font-size: 15px; color: var(--text-primary); }
.ph-text strong { color: var(--accent-bright); }

/* ── TYPE LIST ── */
.section-label {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--accent-main); letter-spacing: 0.15em;
  text-transform: uppercase; margin-bottom: 10px;
}
.type-list { display: flex; flex-direction: column; gap: 8px; }
.type-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: rgba(27,10,60,0.6);
  border: 1px solid rgba(123,104,238,0.15);
  border-radius: 8px;
  font-size: 14px; color: var(--text-secondary);
  transition: border-color 0.2s;
}
.type-item:hover { border-color: rgba(123,104,238,0.4); }
.type-badge {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 4px;
  background: rgba(123,104,238,0.2);
  color: var(--accent-bright); border: 1px solid rgba(123,104,238,0.3);
  min-width: 36px; text-align: center;
}
.t-sr .type-badge { color: var(--m2); background: rgba(120,222,255,0.1); border-color: rgba(120,222,255,0.3); }
.t-gsr .type-badge { color: var(--m3); background: rgba(168,255,120,0.1); border-color: rgba(168,255,120,0.3); }
.t-d .type-badge { color: var(--m4); background: rgba(255,215,0,0.1); border-color: rgba(255,215,0,0.3); }
.t-jk .type-badge { color: var(--m5); background: rgba(255,159,67,0.1); border-color: rgba(255,159,67,0.3); }
.t-t .type-badge { color: var(--m6); background: rgba(197,107,255,0.1); border-color: rgba(197,107,255,0.3); }

/* ── CHARACTERISTICS LIST ── */
.char-list {
  list-style: none; display: flex; flex-direction: column; gap: 10px;
}
.char-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--text-secondary);
}
.char-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-main); flex-shrink: 0;
  box-shadow: 0 0 6px var(--accent-main);
}

/* ── IO CARD ── */
.io-card {
  background: rgba(27,10,60,0.7);
  border: 1px solid rgba(123,104,238,0.2);
  border-radius: 10px; padding: 18px 20px;
}
.io-section { margin-bottom: 12px; }
.io-label {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--accent-main); letter-spacing: 0.15em;
  text-transform: uppercase; margin-bottom: 10px;
}
.io-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px;
}
.io-signal {
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  padding: 4px 12px; border-radius: 5px; min-width: 44px; text-align: center;
}
.sig-s  { color: var(--m2); background: rgba(120,222,255,0.12); border: 1px solid rgba(120,222,255,0.3); }
.sig-r  { color: var(--red); background: rgba(255,140,140,0.12); border: 1px solid rgba(255,140,140,0.3); }
.sig-q  { color: var(--green); background: rgba(168,255,120,0.12); border: 1px solid rgba(168,255,120,0.3); }
.sig-qb { color: var(--red); background: rgba(255,140,140,0.12); border: 1px solid rgba(255,140,140,0.3); }
.sig-d  { color: var(--m4); background: rgba(255,215,0,0.12); border: 1px solid rgba(255,215,0,0.3); }
.sig-en { color: var(--gold); background: rgba(255,215,0,0.12); border: 1px solid rgba(255,215,0,0.3); }
.io-desc { font-size: 13px; color: var(--text-secondary); }
.io-divider {
  height: 1px; background: rgba(123,104,238,0.2);
  margin: 12px 0;
}

/* ── CIRCUIT DIAGRAM ── */
.circuit-diagram {
  background: rgba(13,7,32,0.8);
  border: 1px solid rgba(123,104,238,0.25);
  border-radius: 10px; padding: 16px;
}
.cd-title {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--accent-main); letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 10px;
}
.latch-svg { width: 100%; height: auto; }
.sr-diagram { min-height: 180px; }

/* ── CONDITIONS GRID ── */
.conditions-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; flex: 1;
}
.condition-card {
  border-radius: 10px; padding: 20px 22px;
  border: 1px solid;
  display: flex; flex-direction: column; gap: 8px;
}
.cond-label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
}
.cond-equation {
  font-family: var(--font-mono); font-size: 18px; font-weight: 700;
  color: var(--text-primary);
}
.cond-desc { font-size: 13px; color: var(--text-muted); }
.val-1 { color: var(--green); }
.val-0 { color: var(--red); }
.val-q { color: var(--accent-bright); }
.val-x { color: var(--gold); }

.cond-set   { background: rgba(168,255,120,0.06); border-color: rgba(168,255,120,0.25); }
.cond-set .cond-label { color: var(--green); }
.cond-reset { background: rgba(255,140,140,0.06); border-color: rgba(255,140,140,0.25); }
.cond-reset .cond-label { color: var(--red); }
.cond-hold  { background: rgba(123,104,238,0.06); border-color: rgba(123,104,238,0.25); }
.cond-hold .cond-label { color: var(--accent-bright); }
.cond-invalid { background: rgba(255,215,0,0.06); border-color: rgba(255,215,0,0.3); }
.cond-invalid .cond-label { color: var(--gold); }

/* ── TRUTH TABLE ── */
.table-center {
  display: flex; justify-content: center; align-items: flex-start;
  flex: 1;
}
.truth-table {
  border-collapse: collapse;
  font-family: var(--font-mono); font-size: 14px;
  min-width: 480px;
}
.truth-table th {
  background: rgba(123,104,238,0.2);
  color: var(--accent-bright);
  padding: 12px 24px; text-align: center;
  border: 1px solid rgba(123,104,238,0.25);
  font-size: 13px; letter-spacing: 0.05em;
}
.truth-table td {
  padding: 11px 24px; text-align: center;
  border: 1px solid rgba(123,104,238,0.15);
  color: var(--text-secondary); font-size: 14px;
}
.truth-table tbody tr:hover td { background: rgba(123,104,238,0.06); }

.row-hold td { background: rgba(123,104,238,0.04); }
.row-set td  { background: rgba(168,255,120,0.04); }
.row-reset td { background: rgba(255,140,140,0.04); }
.row-invalid td { background: rgba(255,215,0,0.04); }

.q-hold { color: var(--accent-bright) !important; font-weight: 700; }
.q-0    { color: var(--red) !important; font-weight: 700; }
.q-1    { color: var(--green) !important; font-weight: 700; }
.q-invalid { color: var(--gold) !important; font-weight: 700; }

.cond-badge {
  display: inline-block; padding: 3px 10px; border-radius: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
}
.badge-hold    { background: rgba(123,104,238,0.15); color: var(--accent-bright); border: 1px solid rgba(123,104,238,0.3); }
.badge-set     { background: rgba(168,255,120,0.15); color: var(--green); border: 1px solid rgba(168,255,120,0.3); }
.badge-reset   { background: rgba(255,140,140,0.15); color: var(--red); border: 1px solid rgba(255,140,140,0.3); }
.badge-invalid { background: rgba(255,215,0,0.15); color: var(--gold); border: 1px solid rgba(255,215,0,0.3); }

/* ── EN NOTE ── */
.en-note {
  margin-top: 16px; padding: 12px 18px;
  background: rgba(123,104,238,0.08);
  border: 1px solid rgba(123,104,238,0.2);
  border-radius: 8px; font-size: 13px;
  color: var(--text-secondary);
}
.en-on  { color: var(--green); font-weight: 700; font-family: var(--font-mono); }
.en-off { color: var(--red); font-weight: 700; font-family: var(--font-mono); }

/* ── TIMING DIAGRAM ── */
.timing-container {
  flex: 1; display: flex; align-items: center;
  background: rgba(13,7,32,0.6);
  border: 1px solid rgba(123,104,238,0.2);
  border-radius: 10px; padding: 16px;
}
.timing-svg { width: 100%; height: auto; }

/* ── IMPROVEMENT TAG ── */
.improvement-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  color: var(--accent-bright);
  background: rgba(123,104,238,0.1);
  border: 1px solid rgba(123,104,238,0.3);
  padding: 7px 14px; border-radius: 20px;
  align-self: flex-start;
}

/* ── APPLICATION GRID ── */
.app-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 14px; flex: 1; align-items: start;
}
.app-card {
  background: rgba(27,10,60,0.7);
  border: 1px solid rgba(123,104,238,0.2);
  border-radius: 10px; padding: 20px 14px;
  text-align: center; display: flex; flex-direction: column; gap: 8px;
  transition: border-color 0.2s, transform 0.2s;
}
.app-card:hover { border-color: rgba(123,104,238,0.5); transform: translateY(-3px); }
.app-icon { font-size: 28px; }
.app-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.app-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; }

/* ── D PURPOSE CARD ── */
.d-purpose-card {
  background: rgba(255,215,0,0.06);
  border: 1px solid rgba(255,215,0,0.25);
  border-radius: 10px; padding: 18px;
}
.dp-title {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--gold); letter-spacing: 0.15em;
  text-transform: uppercase; margin-bottom: 10px;
}
.dp-body { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.dp-body strong { color: var(--text-primary); }
.dp-formula {
  margin-top: 12px; padding: 10px 14px;
  background: rgba(13,7,32,0.6);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 6px;
  font-family: var(--font-mono); font-size: 14px;
  color: var(--gold); letter-spacing: 0.1em;
}

/* ── BUILD LIST ── */
.build-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.build-item {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; color: var(--text-secondary);
  padding: 10px 14px;
  background: rgba(27,10,60,0.5);
  border: 1px solid rgba(123,104,238,0.15);
  border-radius: 8px;
}
.build-badge {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(123,104,238,0.2);
  border: 1px solid rgba(123,104,238,0.4);
  color: var(--accent-bright);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── FORMULA BOX ── */
.formula-box {
  background: rgba(13,7,32,0.7);
  border: 1px solid rgba(123,104,238,0.25);
  border-radius: 8px; padding: 14px 18px;
}
.formula-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px;
}
.f-label {
  font-family: var(--font-mono); font-size: 14px;
  color: var(--text-muted); min-width: 30px;
}
.f-val {
  font-family: var(--font-mono); font-size: 16px; font-weight: 700;
  color: var(--accent-bright);
}
.formula-note {
  font-size: 11px; color: var(--text-muted);
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(123,104,238,0.15);
}

/* ── IO TABLE ── */
.io-table { min-width: 560px; }
.type-in  { color: var(--m2); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; }
.type-out { color: var(--m3); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; }

/* ── WORKING SPLIT ── */
.working-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px; flex: 1;
}
.working-card {
  border-radius: 12px; padding: 24px;
  border: 1px solid; display: flex; flex-direction: column; gap: 12px;
}
.wc-active { background: rgba(168,255,120,0.05); border-color: rgba(168,255,120,0.25); }
.wc-hold   { background: rgba(123,104,238,0.05); border-color: rgba(123,104,238,0.25); }
.wc-en { font-size: 14px; font-weight: 600; }
.wc-equation {
  font-family: var(--font-mono); font-size: 28px; font-weight: 700;
  color: var(--text-primary);
}
.wc-active .wc-equation { color: var(--green); }
.wc-hold .wc-equation { color: var(--accent-bright); }
.wc-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.wc-desc strong { color: var(--text-primary); }
.wc-example {
  margin-top: 4px; padding: 12px 14px;
  background: rgba(13,7,32,0.5);
  border-radius: 8px; display: flex; flex-direction: column; gap: 6px;
}
.ex-row {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 13px;
  color: var(--text-secondary);
}
.ex-arrow { color: var(--accent-main); }

/* ── CHARACTERISTICS GRID ── */
.char-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 14px; flex: 1; align-items: start;
}
.char-card {
  background: rgba(27,10,60,0.7);
  border: 1px solid rgba(123,104,238,0.2);
  border-radius: 10px; padding: 20px 14px;
  text-align: center; display: flex; flex-direction: column; gap: 8px;
  transition: border-color 0.2s, transform 0.2s;
}
.char-card:hover { border-color: rgba(123,104,238,0.5); transform: translateY(-3px); }
.char-icon { font-size: 26px; }
.char-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.char-body { font-size: 11px; color: var(--text-muted); line-height: 1.4; }

/* ── ADVANTAGES / DISADVANTAGES ── */
.adv-disadv {
  display: grid; grid-template-columns: 1fr 2px 1fr;
  gap: 0; flex: 1;
}
.adv-col, .disadv-col {
  padding: 0 24px; display: flex; flex-direction: column; gap: 14px;
}
.adv-divider { background: rgba(123,104,238,0.2); }
.adv-header {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  color: var(--green); margin-bottom: 4px;
}
.disadv-header {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  color: var(--red); margin-bottom: 4px;
}
.adv-item, .disadv-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: 8px;
}
.adv-item { background: rgba(168,255,120,0.05); border: 1px solid rgba(168,255,120,0.15); }
.disadv-item { background: rgba(255,140,140,0.05); border: 1px solid rgba(255,140,140,0.15); }
.adv-icon {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(168,255,120,0.2); color: var(--green);
  font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.disadv-icon {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,140,140,0.2); color: var(--red);
  font-weight: 700; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.adv-item div, .disadv-item div { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.adv-item strong, .disadv-item strong { color: var(--text-primary); display: block; margin-bottom: 2px; }
.adv-item small, .disadv-item small { color: var(--text-muted); font-size: 11px; }

/* ── REAL LIFE GRID ── */
.reallife-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 16px; flex: 1; align-items: start;
}
.rl-card {
  background: rgba(27,10,60,0.7);
  border: 1px solid rgba(123,104,238,0.2);
  border-radius: 12px; padding: 24px 16px;
  text-align: center; display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.2s, transform 0.2s;
}
.rl-card:hover { border-color: rgba(123,104,238,0.5); transform: translateY(-4px); }
.rl-icon { font-size: 32px; }
.rl-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.rl-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; }

/* ── COMPARE TABLE ── */
.compare-table-wrap {
  flex: 1; display: flex; justify-content: center; align-items: flex-start;
}
.compare-table {
  border-collapse: collapse; min-width: 560px;
  font-size: 14px;
}
.compare-table th {
  padding: 14px 28px; text-align: center;
  border: 1px solid rgba(123,104,238,0.25);
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
}
.compare-feature { background: rgba(27,10,60,0.8); color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; }
.compare-latch { background: rgba(120,222,255,0.1); color: var(--m2); }
.compare-ff    { background: rgba(197,107,255,0.1); color: var(--m6); }
.compare-table td {
  padding: 12px 28px; text-align: center;
  border: 1px solid rgba(123,104,238,0.15);
  font-family: var(--font-body);
}
.compare-table tbody tr:hover td { background: rgba(123,104,238,0.05); }
.latch-val { color: var(--m2); font-weight: 600; }
.ff-val    { color: var(--m6); font-weight: 600; }

/* ── CONCLUSION SLIDE ── */
.conclusion-body {
  justify-content: space-between;
}
.conclusion-points {
  display: flex; flex-direction: column; gap: 12px;
  flex: 1;
}
.cp-item {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 20px;
  background: rgba(27,10,60,0.6);
  border: 1px solid rgba(123,104,238,0.2);
  border-radius: 10px;
  transition: border-color 0.2s;
}
.cp-item:hover { border-color: rgba(123,104,238,0.4); }
.cp-num {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--accent-main); min-width: 28px;
}
.cp-text { font-size: 15px; color: var(--text-secondary); }
.cp-text strong { color: var(--text-primary); }

.thank-you {
  text-align: center; padding: 24px;
  background: linear-gradient(135deg, rgba(123,104,238,0.12), rgba(91,79,204,0.06));
  border: 1px solid rgba(123,104,238,0.3);
  border-radius: 12px; margin-top: 16px;
}
.ty-text {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800; letter-spacing: -0.02em;
  background: linear-gradient(135deg, #F0ECFF, #A89BFF);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ty-sub {
  font-size: 14px; color: var(--text-muted); margin-top: 4px;
}
.ty-group {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--accent-main); letter-spacing: 0.15em;
  text-transform: uppercase; margin-top: 10px;
}

/* ── GATED SR SPECIFIC ── */
.en-note strong { color: var(--text-primary); }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .slide-body { padding: 20px 24px 16px; }
  .two-col { grid-template-columns: 1fr; gap: 16px; }
  .purpose-grid { grid-template-columns: repeat(2, 1fr); }
  .app-grid, .char-grid, .reallife-grid { grid-template-columns: repeat(3, 1fr); }
  .conditions-grid { grid-template-columns: 1fr; }
  .working-split { grid-template-columns: 1fr; }
  .adv-disadv { grid-template-columns: 1fr; }
  .adv-divider { display: none; }
  .members-grid { gap: 6px; }
  .main-title { font-size: 56px; }
}

@media (max-width: 600px) {
  .app-grid, .char-grid, .reallife-grid { grid-template-columns: repeat(2, 1fr); }
  .purpose-grid { grid-template-columns: 1fr; }
  .truth-table { font-size: 12px; }
  .truth-table th, .truth-table td { padding: 8px 12px; }
}