/**
 * GCSE CPU Architecture & LMC Module Stylesheet
 * Integrates with shared/styles.css
 */
@import url('../../shared/styles.css');

/* Main Module Container */
.module-container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 16px 20px 48px 20px;
  position: relative;
  z-index: 1;
}

/* Tab Navigation */
.view-tabs {
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  gap: 4px;
}

.view-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.view-tab-btn:hover {
  color: var(--text-primary);
  background: var(--bg-surface-elevated);
}

.view-tab-btn.active {
  background: var(--accent-primary);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.35);
}

.badge-extension {
  font-size: 9.5px;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
  font-weight: 700;
}

/* Tab Views */
.tab-view {
  display: none;
  animation: fadeIn 200ms ease-out forwards;
}

.tab-view.active {
  display: block;
}

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

/* Common View Banner */
.view-banner {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 16px 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .view-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.banner-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.banner-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.banner-text h2 {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 3px 0;
}

.banner-text p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

/* Layout Grids */
.fde-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

@media (min-width: 1024px) {
  .module-container {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .view-banner {
    padding: 10px 14px;
    margin-bottom: 8px;
  }
  .explainer-card {
    margin-bottom: 8px;
  }
  .toolbar-row {
    margin-bottom: 8px;
    padding: 6px 12px !important;
  }
  .fde-grid {
    grid-template-columns: 1.45fr 1fr;
    gap: 12px;
    margin-bottom: 8px;
  }
  .panel {
    padding: 12px 14px;
    border-radius: var(--radius-lg);
  }
  .panel-title-bar {
    margin-bottom: 8px;
  }
}

/* Panel Containers */
.panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
}

.panel-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.panel-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

/* Control Toolbar */
.toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}

.control-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.control-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.control-select {
  padding: 6px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-surface-elevated);
  color: var(--text-primary);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
}

.control-select:focus {
  border-color: var(--accent-primary);
}

.control-btn {
  padding: 6px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-surface-elevated);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition-fast);
}

.control-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
  background: var(--bg-surface-hover);
}

.control-btn.active {
  background: var(--accent-primary);
  color: #ffffff;
  border-color: var(--accent-primary);
}

.control-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* CPU Architecture Clean 2D Schematic Frame */
.arch-diagram-card {
  background: var(--bg-root);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  position: relative;
  overflow-x: auto;
  margin-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}

.cpu-diagram-container {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) minmax(130px, 0.85fr) minmax(190px, 1.15fr);
  gap: 10px;
  min-width: 600px;
  align-items: stretch;
}

/* CPU Core Subsystem */
.cpu-box {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-hover);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cpu-box-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--accent-soft-text);
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cpu-subtag {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* 1. Core Logic Units Grid: CU & ALU */
.core-units-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.component-block {
  background: var(--bg-surface-elevated);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  transition: all var(--transition-fast);
}

.component-block.active-glow {
  border-color: #6366f1;
  box-shadow: 0 0 14px rgba(99, 102, 241, 0.45);
  background: rgba(99, 102, 241, 0.12);
}

.component-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.component-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
}

.badge-cu {
  background: rgba(99, 102, 241, 0.2);
  color: var(--accent-soft-text);
  font-size: 8.5px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
}

.badge-alu {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  font-size: 8.5px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
}

.component-status {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--accent-soft-text);
}
.component-status strong {
  color: #ffffff;
}
.alu-status {
  color: #34d399;
}

/* 2. Registers Section */
.registers-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.registers-header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
}
.registers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.register-card {
  background: var(--bg-surface-elevated);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  transition: all var(--transition-fast);
  position: relative;
}

#regPC { border-left: 3.5px solid #3b82f6; }
#regMAR { border-left: 3.5px solid #f59e0b; }
#regMDR { border-left: 3.5px solid #10b981; }
#regACC { border-left: 3.5px solid #ec4899; }

.register-card.active-target {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.5);
  background: rgba(56, 189, 248, 0.16);
  animation: targetPulse 1.2s ease-in-out infinite;
}

.register-card.active-source {
  border-color: #34d399 !important;
  box-shadow: 0 0 14px rgba(52, 211, 153, 0.5);
  background: rgba(52, 211, 153, 0.16);
  animation: sourcePulse 1.2s ease-in-out infinite;
}

@keyframes targetPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

@keyframes sourcePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

.register-name {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.reg-sublabel {
  font-size: 8.5px;
  font-weight: 500;
  color: var(--text-muted);
}

.register-val {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-primary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* System Buses Conduit (Persistent Lines & Glowing Packets) */
.buses-conduit {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 8px;
  padding: 4px 0;
}

.bus-line {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: all var(--transition-fast);
}

.bus-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bus-name {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bus-type {
  font-size: 8px;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.bus-line-address .bus-name { color: #f59e0b; }
.bus-line-data .bus-name { color: #10b981; }
.bus-line-control .bus-name { color: #a855f7; }

/* Pathway connector lines */
.bus-wire {
  height: 10px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.bus-pathway {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.wire-trace {
  flex: 1;
  height: 2px;
  background: currentColor;
  opacity: 0.35;
}

.wire-arrow, .wire-arrow-left {
  font-size: 10px;
  opacity: 0.65;
  user-select: none;
  line-height: 1;
}

.pathway-address { color: #f59e0b; }
.pathway-data { color: #10b981; }
.pathway-control { color: #a855f7; }

/* Bus Packet gliding pulse */
.bus-packet {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 6px;
  border-radius: 3px;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}
.packet-address { background: #f59e0b; box-shadow: 0 0 10px #f59e0b; }
.packet-data { background: #10b981; box-shadow: 0 0 10px #10b981; }
.packet-control { background: #a855f7; box-shadow: 0 0 10px #a855f7; }

.bus-packet.packet-to-ram {
  animation: packetSlideToRAM 0.75s ease-in-out infinite;
}
.bus-packet.packet-to-cpu {
  animation: packetSlideToCPU 0.75s ease-in-out infinite;
}

@keyframes packetSlideToRAM {
  0% { left: 0%; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { left: 85%; opacity: 0; }
}
@keyframes packetSlideToCPU {
  0% { left: 85%; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { left: 0%; opacity: 0; }
}

.bus-line.bus-active {
  background: var(--bg-surface-elevated);
}
#busAddress.bus-active {
  border-color: #f59e0b !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.45);
}
#busData.bus-active {
  border-color: #10b981 !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.45);
}
#busControl.bus-active {
  border-color: #a855f7 !important;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.45);
}

.bus-readout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
}
.bus-status-tag {
  font-size: 8px;
  font-weight: 700;
  color: var(--text-muted);
}
.bus-data {
  font-weight: 700;
  color: var(--text-primary);
}

/* RAM Subsystem Box */
.ram-box {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-hover);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
}

.ram-header {
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border-color);
}

.ram-box-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: #34d399;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.badge-ram-stats {
  font-size: 8.5px;
  font-family: var(--font-mono);
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 1px 5px;
  border-radius: 3px;
}

.ram-substats {
  font-size: 8.5px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3px;
}

.ram-table-scroll-wrap {
  flex: 1;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.ram-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10.5px;
}

.ram-table th {
  position: sticky;
  top: 0;
  background: var(--bg-surface-elevated);
  padding: 3px 6px;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-color);
  z-index: 2;
  text-align: left;
}

.ram-table td {
  padding: 3.5px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-family: var(--font-mono);
}

.ram-row {
  transition: all 0.2s ease;
}

.ram-row.unallocated {
  opacity: 0.42;
  font-style: italic;
}

.ram-row.active-ram-read {
  background: rgba(56, 189, 248, 0.22) !important;
  outline: 1.5px solid #38bdf8;
}

.ram-row.active-ram-write {
  background: rgba(245, 158, 11, 0.22) !important;
  outline: 1.5px solid #f59e0b;
}

.architecture-footnote {
  margin-top: 5px;
  font-size: 9.5px;
  color: var(--text-muted);
  text-align: right;
}

/* Right-Hand Tracer Panel Overhaul */
.trace-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Card 1: Current Action Card */
.action-card {
  background: var(--bg-root);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.action-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cycle-instr-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  color: var(--accent-soft-text);
}

.stage-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.stage-fetch {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.stage-decode {
  background: rgba(99, 102, 241, 0.2);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.35);
}

.stage-execute {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.stage-halted {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.action-title {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.narrative-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.field-label {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--accent-primary);
  letter-spacing: 0.5px;
}

.field-text {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-secondary);
  margin: 0;
}

.aqa-exam-box {
  background: rgba(99, 102, 241, 0.08);
  border-left: 3.5px solid var(--accent-primary);
  border-radius: 0 6px 6px 0;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.aqa-exam-header {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--accent-soft-text);
}

.aqa-exam-text {
  font-size: 11px;
  font-style: italic;
  line-height: 1.35;
  color: var(--text-primary);
  margin: 0;
}

/* Card 2: Live Register State Table */
.register-state-card {
  background: var(--bg-root);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.register-state-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.reg-card-title {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.register-table-wrap {
  overflow-x: auto;
}

.register-state-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10.5px;
}

.register-state-table th {
  padding: 3px 5px;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-color);
  text-align: left;
}

.register-state-table td {
  padding: 4px 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.reg-state-row {
  transition: all 0.3s ease;
}

.reg-state-row.register-row-updated {
  background: rgba(56, 189, 248, 0.18) !important;
  box-shadow: inset 0 0 10px rgba(56, 189, 248, 0.35);
}

.reg-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
  display: inline-block;
}
.tag-pc { background: rgba(59, 130, 246, 0.2); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.4); }
.tag-mar { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.4); }
.tag-mdr { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.4); }
.tag-acc { background: rgba(236, 72, 153, 0.2); color: #f472b6; border: 1px solid rgba(236, 72, 153, 0.4); }

.reg-name-cell {
  color: var(--text-secondary);
  font-weight: 600;
}
.reg-val-cell {
  font-weight: 800;
  color: var(--text-primary);
}
.reg-hex-cell {
  color: var(--text-muted);
}
.reg-role-cell {
  font-size: 9.5px;
  color: var(--text-muted);
}

/* ========================================================================= */
/* TAB 2: LMC ASSEMBLY STYLES                                               */
/* ========================================================================= */
.lmc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 1024px) {
  .lmc-grid {
    grid-template-columns: 1fr 1.2fr;
  }
}

.editor-wrapper {
  display: flex;
  flex-direction: column;
  height: 380px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-root);
}

.lmc-editor {
  flex: 1;
  width: 100%;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  padding: 12px 14px;
  border: none;
  outline: none;
  resize: none;
}

.mailbox-grid-container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  background: var(--bg-root);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.mailbox-cell {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 4px 2px;
  text-align: center;
  font-family: var(--font-mono);
  transition: all var(--transition-fast);
}

.mailbox-cell.active-pc {
  background: rgba(99, 102, 241, 0.3);
  border-color: #6366f1;
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.4);
}

.mailbox-cell.active-data {
  background: rgba(52, 211, 153, 0.25);
  border-color: #34d399;
}

.mailbox-num {
  font-size: 9px;
  color: var(--text-muted);
}

.mailbox-val {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
}

.io-card {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-top: 14px;
}

.io-console {
  background: var(--bg-root);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  min-height: 60px;
  max-height: 90px;
  overflow-y: auto;
  color: #34d399;
  margin-top: 8px;
}

/* ========================================================================= */
/* TAB 3: PERFORMANCE SANDBOX STYLES                                        */
/* ========================================================================= */
.perf-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 1024px) {
  .perf-grid {
    grid-template-columns: 1.1fr 1fr;
  }
}

.core-meter-bar {
  background: var(--bg-root);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 10px;
}

.core-progress-track {
  height: 10px;
  background: var(--bg-surface-elevated);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: 8px;
}

.core-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #6366f1 0%, #38bdf8 100%);
  transition: width 100ms linear;
}

/* ========================================================================= */
/* TAB 4: REVISION CARDS & TRAPS                                             */
/* ========================================================================= */
.trap-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--color-warning);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 16px;
}

.trap-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.trap-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.qa-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
  overflow: hidden;
}

.qa-header {
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  background: var(--bg-surface);
  transition: background var(--transition-fast);
}

.qa-header:hover {
  background: var(--bg-surface-elevated);
}

.qa-question {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.5;
}

.qa-body {
  display: none;
  padding: 16px 18px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-root);
}

.qa-body.revealed {
  display: block;
}

.mark-scheme-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.mark-scheme-step:last-child {
  margin-bottom: 0;
}

.mark-badge {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 800;
  font-size: 10.5px;
  flex-shrink: 0;
}