/* =============================================
   STYLES.CSS — shared styling for lab/module pages.
   Used by: resources, email-lab, sms-smishing,
   mfa-fatigue, targeted-phishing.
   Pairs with theme.css for chrome (nav, footer).
============================================= */

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-void);
}

.container { max-width: 1100px; margin: 0 auto; padding: 24px; }
.container-wide { max-width: 90%; padding: 24px 40px; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* ========== Drill header (lab pages) ========== */
.drill-header {
  padding: 64px 0 48px;
  text-align: center;
  background:
    radial-gradient(ellipse at center, rgba(34,211,238,0.06) 0%, transparent 60%),
    var(--bg-deep);
  border-bottom: 1px solid var(--border-subtle);
}
.drill-header .back-link,
.page-header .back-link,
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  min-height: 24px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 18px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color var(--transition);
}
.drill-header .back-link:hover { color: var(--cyan-bright); }
.drill-header h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.drill-header p {
  max-width: 720px;
  margin: 0 auto 28px;
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.6;
}
.drill-controls {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* Countdown timer */
.countdown {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  color: var(--cyan-bright);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 10px 28px;
  border-radius: 10px;
  min-width: 140px;
  text-align: center;
  transition: all var(--transition);
}
.countdown.countdown--warning { color: var(--amber-bright); border-color: rgba(251,191,36,0.4); }
.countdown.countdown--danger  { color: var(--red-bright);   border-color: rgba(255,59,48,0.4); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cyan);
  color: #0a0a0f;
  border: 0;
  padding: 12px 26px;
  border-radius: 8px;
  font-weight: 700;
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
}
.btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 24px rgba(34,211,238,0.35);
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; transform: none; filter: none; }
.btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-mid);
}
.btn--secondary:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.2);
  box-shadow: none;
}
.btn--pumpkin {
  background: var(--orange);
  color: #0a0a0f;
}
.btn--pumpkin:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 24px rgba(249,115,22,0.4);
}
.btn--sms {
  background: var(--cyan);
  color: #0a0a0f;
}
.btn--sms:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 24px rgba(34,211,238,0.35);
}

/* Cards */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 32px;
  margin: 24px 0;
}
.card h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.card h3 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.card p {
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 12px;
}

.hidden { display: none; }
.helper-text {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
  margin: 12px 0 0;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 18px;
}
.back-link:hover { color: var(--cyan-bright); }

/* ========== SMS smishing page ========== */
.smishing-body { background: var(--bg-void); color: var(--text-primary); min-height: 100vh; }
.smishing-hero {
  position: relative;
  padding: 64px 0 48px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at center, rgba(34,211,238,0.06) 0%, transparent 60%),
    var(--bg-deep);
  border-bottom: 1px solid var(--border-subtle);
}
.smishing-hero__glow { display: none; }
.smishing-hero__inner {
  position: relative;
  text-align: center;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.smishing-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 48px);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
}
.smishing-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.6;
}
.smishing-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(34,211,238,0.08);
  border: 1px solid rgba(34,211,238,0.25);
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cyan-bright);
  font-size: 11px;
}
.countdown--sms {
  background: var(--bg-card);
  border-color: rgba(34,211,238,0.3);
  color: var(--cyan-bright);
}
.challenge-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
  margin-top: 12px;
}

/* ========== Resources page ========== */
.resources-grid { display: grid; gap: 18px; margin-top: 18px; }
@media (min-width: 640px) { .resources-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 960px) { .resources-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.resource-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 22px;
  transition: border-color var(--transition);
}
.resource-item:hover { border-color: var(--cyan); }
.resource-icon { font-size: 28px; margin-bottom: 12px; }
.resource-item h3 {
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-primary);
  font-weight: 700;
}
.resource-item p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.resource-item a {
  color: var(--cyan-bright);
  text-decoration: none;
  font-weight: 600;
}
.resource-item a:hover { text-decoration: underline; }

.resource-links { display: grid; gap: 24px; margin-top: 18px; }
.link-section h3 {
  color: var(--text-primary);
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
}
.link-section ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.link-section li { line-height: 1.65; color: var(--text-secondary); font-size: 14px; }
.link-section a { color: var(--cyan-bright); text-decoration: none; font-weight: 600; }
.link-section a:hover { text-decoration: underline; }

.tips-grid { display: grid; gap: 18px; margin-top: 18px; }
@media (min-width: 640px) { .tips-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 960px) { .tips-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.tip-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 22px;
  text-align: center;
  transition: border-color var(--transition);
}
.tip-card:hover { border-color: var(--cyan); }
.tip-icon { font-size: 30px; margin-bottom: 12px; }
.tip-card h3 {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 700;
}
.tip-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.help-section {
  line-height: 1.7;
  color: var(--text-secondary);
}
.help-section a { color: var(--cyan-bright); text-decoration: none; font-weight: 600; }
.help-section a:hover { text-decoration: underline; }
.help-section ol { padding-left: 22px; margin: 14px 0; }
.help-section li { margin: 8px 0; line-height: 1.65; }
.help-section strong { color: var(--text-primary); font-weight: 600; }

/* ========== Training-list (general) ========== */
.training-list {
  margin: 16px 0;
  padding-left: 22px;
  display: grid;
  gap: 10px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.training-list li { line-height: 1.55; }
.training-list strong { color: var(--text-primary); font-weight: 700; }
.training-list ul { margin-top: 8px; padding-left: 20px; color: var(--text-muted); font-size: 0.92rem; }

/* ========== One-at-a-time scenario layout ========== */
.scenario-container { min-height: 500px; }
.scenario-single {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 36px;
  position: relative;
}
.scenario-progress-bar {
  height: 4px;
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  margin-bottom: 22px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  transition: width 0.5s ease;
  border-radius: 999px;
}
.scenario-number {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.scenario-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 28px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.scenario-email-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 22px;
  margin-bottom: 22px;
}
.scenario-content {
  background: rgba(34,211,238,0.04);
  border-left: 3px solid var(--cyan);
  padding: 22px;
  border-radius: 10px;
  margin-bottom: 28px;
}
.scenario-content p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-primary);
  margin: 0;
}
.scenario-question {
  text-align: center;
  margin-bottom: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border-subtle);
}
.question-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.choice-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.choice-btn {
  padding: 12px 22px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  border: 1.5px solid;
  cursor: pointer;
  transition: all var(--transition);
  background: var(--bg-surface);
  min-width: 160px;
}
.choice-btn--danger { border-color: var(--red); color: var(--red-bright); }
.choice-btn--danger:hover {
  background: rgba(239,68,68,0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(239,68,68,0.25);
}
.choice-btn--safe { border-color: var(--green); color: var(--green-bright); }
.choice-btn--safe:hover {
  background: rgba(34,197,94,0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(34,197,94,0.25);
}
.scenario-result {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 20px;
  margin-top: 22px;
}
.result-correct   { background: rgba(34,197,94,0.06);  border-color: rgba(34,197,94,0.3); }
.result-incorrect { background: rgba(239,68,68,0.06);  border-color: rgba(239,68,68,0.3); }
.result-header {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 12px;
}
.result-correct .result-header   { color: var(--green-bright); }
.result-incorrect .result-header { color: var(--red-bright); }
.result-verdict { font-size: 14px; margin-bottom: 14px; color: var(--text-primary); font-weight: 600; }
.result-action {
  background: rgba(34,211,238,0.06);
  border: 1px solid rgba(34,211,238,0.2);
  padding: 14px;
  border-radius: 8px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.result-action strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cyan-bright);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.result-insights { margin-top: 16px; }
.result-insights strong {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.result-insights ul { list-style: none; padding: 0; margin: 0; }
.result-insights li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.result-insights li:last-child { border-bottom: none; }
.result-insights li::before {
  content: '→';
  color: var(--cyan-bright);
  font-weight: bold;
  display: inline-block;
  width: 1.2em;
  margin-right: 6px;
}
.scenario-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
}
.nav-btn {
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--border-mid);
  cursor: pointer;
  transition: all var(--transition);
  background: transparent;
  color: var(--text-primary);
}
.nav-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-1px);
}
.nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.nav-btn--primary {
  background: var(--cyan);
  color: #0a0a0f;
  border: 0;
}
.nav-btn--primary:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(34,211,238,0.35);
}

@media (max-width: 640px) {
  .choice-buttons { flex-direction: column; }
  .choice-btn { min-width: auto; width: 100%; }
  .scenario-nav { flex-direction: column; }
  .nav-btn { width: 100%; }
}

/* ========== Email lab specific ========== */
.email-single .scenario-email-box { display: none; }
.email-full-view {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 16px;
}
.email-header-section {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 14px;
}
.email-row { display: flex; gap: 12px; margin-bottom: 8px; align-items: flex-start; }
.email-row:last-child { margin-bottom: 0; }
.email-label {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-weight: 600;
  min-width: 70px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.email-value {
  color: var(--text-primary);
  flex: 1;
  word-break: break-word;
  font-size: 13px;
  font-family: var(--font-mono);
}
.email-subject { color: var(--text-primary); font-weight: 600; font-family: var(--font-body); }
.email-links code {
  background: var(--bg-base);
  padding: 4px 8px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--cyan-bright);
  display: inline-block;
  margin: 3px 0;
  border: 1px solid var(--border-subtle);
}
.email-attachment {
  color: var(--amber-bright);
  font-weight: 600;
  font-family: var(--font-mono);
}
.email-body-section {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 16px;
  margin-top: 14px;
}
.email-body-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.email-body-content {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  white-space: pre-wrap;
}

/* ========== SMS smishing simulator ========== */
.sms-simulator { max-width: 800px; margin: 0 auto; padding: 16px; }
.sms-progress-bar {
  height: 3px;
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  margin-bottom: 10px;
  overflow: hidden;
}
.sms-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  transition: width 0.5s ease;
}
.sms-progress-text {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.phone-container { display: flex; justify-content: center; margin-bottom: 20px; }
.phone-frame-large {
  width: 100%;
  max-width: 290px;
  background: linear-gradient(145deg, #1d1d1f, #2d2d2f);
  border-radius: 36px;
  padding: 10px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 6px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
  position: relative;
}
.phone-notch {
  position: absolute;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 20px;
  background: #000;
  border-radius: 0 0 14px 14px;
  z-index: 10;
}
.phone-screen-large {
  background: #000;
  border-radius: 28px;
  overflow: hidden;
  min-height: 430px;
  display: flex;
  flex-direction: column;
}
.phone-status-bar {
  display: flex;
  justify-content: space-between;
  padding: 30px 14px 8px;
  background: rgba(0,0,0,0.3);
  font-size: 10px;
  color: #a8a8a8;
}
.messages-header-bar {
  background: rgba(20,20,20,0.95);
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.contact-info { display: flex; flex-direction: column; gap: 2px; }
.contact-name { font-size: 13px; font-weight: 600; color: #fff; }
.contact-number { font-size: 11px; color: #a8a8a8; }

.conversation-area {
  flex: 1;
  background: #000;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  min-height: 260px;
}
.message-bubble-container {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
.message-bubble {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.4;
  word-wrap: break-word;
}
.message-bubble.received {
  background: rgba(58,58,60,0.95);
  color: #fff;
  border-bottom-left-radius: 4px;
}
.message-bubble.sent {
  background: var(--cyan);
  color: #0a0a0f;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}
.message-bubble-container:has(.sent) { align-items: flex-end; }
.message-time { font-size: 9px; color: #888; padding: 0 4px; }
.hidden { display: none !important; }

.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  background: rgba(58,58,60,0.95);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  width: fit-content;
}
.typing-dot {
  width: 6px;
  height: 6px;
  background: #c7c7cc;
  border-radius: 50%;
  animation: typing 1.4s infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.7; }
  30%           { transform: translateY(-8px); opacity: 1; }
}

/* SMS Answer + Result sections */
.answer-section {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 22px;
  margin-top: 16px;
  text-align: center;
}
.answer-section h3 {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
}
.answer-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.answer-btn {
  flex: 1;
  min-width: 140px;
  padding: 12px 16px;
  border: 1.5px solid;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  background: var(--bg-surface);
}
.answer-btn-danger {
  border-color: var(--red);
  color: var(--red-bright);
}
.answer-btn-danger:hover:not(:disabled) {
  background: rgba(239,68,68,0.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(239,68,68,0.25);
}
.answer-btn-safe {
  border-color: var(--green);
  color: var(--green-bright);
}
.answer-btn-safe:hover:not(:disabled) {
  background: rgba(34,197,94,0.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(34,197,94,0.25);
}

.result-section { margin-top: 20px; }
.result-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
}
.result-correct   { border: 1px solid var(--green); border-left: 3px solid var(--green); }
.result-incorrect { border: 1px solid var(--red);   border-left: 3px solid var(--red); }
.result-icon { font-size: 36px; margin-bottom: 6px; }
.result-title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text-primary);
}
.result-explanation {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
  line-height: 1.65;
}
.result-details {
  text-align: left;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}
.result-details strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.result-details ul { margin: 0; padding-left: 18px; }
.result-details li {
  margin-bottom: 5px;
  line-height: 1.55;
  color: var(--text-secondary);
  font-size: 13px;
}
.continue-btn {
  background: var(--cyan);
  color: #0a0a0f;
  border: 0;
  padding: 12px 28px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
}
.continue-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(34,211,238,0.35);
}

/* ========== MFA fatigue: phone frame & notifications ========== */
.drill-main { display: grid; gap: 28px; padding-bottom: 48px; }
@media (min-width: 960px) { .drill-main { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); } }

.phone-frame {
  margin: 0 auto;
  max-width: 380px;
  background: linear-gradient(180deg, #111a2f, #0c1529);
  border-radius: 32px;
  padding: 18px 16px 28px;
  border: 1px solid rgba(53,79,128,0.45);
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
}
.phone-screen {
  background: rgba(4,11,26,0.9);
  border-radius: 24px;
  padding: 18px;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}
.phone-status {
  display: flex;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}
.notification-stack { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.notification-card {
  background: rgba(14,23,43,0.95);
  border: 1px solid rgba(34,211,238,0.18);
  border-radius: 18px;
  padding: 16px;
  display: grid;
  gap: 10px;
  box-shadow: 0 12px 28px rgba(4,16,30,0.45);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.notification-card.active {
  border-color: rgba(34,211,238,0.55);
  box-shadow: 0 18px 36px rgba(34,211,238,0.32);
}
.notification-provider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 0.92rem;
  color: #e6eefb;
}
.prompt-timer {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--cyan-bright);
}
.prompt-timer.resolved { color: var(--green-bright); }
.prompt-timer.missed   { color: var(--red-bright); }
.notification-title { font-weight: 700; font-size: 1.05rem; color: #f8fbff; }
.notification-meta { font-size: 0.78rem; color: var(--text-muted); display: grid; gap: 4px; }
.notification-meta strong { color: #e6eefb; font-weight: 600; }
.notification-context { font-size: 0.84rem; color: #c7d7ff; line-height: 1.5; }
.notification-placeholder {
  margin: auto;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  padding-top: 40px;
}

.response-panel { position: relative; }
.score-pill {
  position: absolute;
  top: 18px;
  right: 18px;
  background: rgba(34,211,238,0.1);
  border: 1px solid rgba(34,211,238,0.35);
  color: var(--cyan-bright);
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  font-family: var(--font-mono);
}
.actions-grid { display: grid; gap: 14px; margin: 20px 0; }
@media (min-width: 640px) { .actions-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.action-button {
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-primary);
  padding: 16px;
  border-radius: 12px;
  font-weight: 600;
  text-align: left;
  line-height: 1.4;
  cursor: pointer;
  transition: all var(--transition);
}
.action-button:hover {
  transform: translateY(-2px);
  border-color: var(--cyan);
  box-shadow: 0 12px 26px rgba(34,211,238,0.2);
}
.action-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.action-button[data-variant="danger"] {
  border-color: rgba(239,68,68,0.35);
  background: rgba(127,29,29,0.25);
}
.action-button[data-variant="danger"]:hover {
  border-color: rgba(239,68,68,0.6);
  box-shadow: 0 12px 26px rgba(239,68,68,0.2);
}
.feedback {
  min-height: 46px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.feedback.success { color: var(--green-bright); }
.feedback.error   { color: var(--red-bright); }
.event-log {
  margin-top: 18px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 16px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  display: grid;
  gap: 12px;
  max-height: 220px;
  overflow-y: auto;
}
.event-log-entry strong { color: var(--text-primary); }
.summary-banner {
  margin-top: 20px;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid rgba(45,212,191,0.3);
  background: rgba(13,32,45,0.85);
  color: #d6faff;
  font-weight: 600;
  text-align: center;
}

/* ========== Email lab cards ========== */
.email-grid { display: grid; gap: 22px; margin: 20px 0; }
.email-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 22px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.email-card--correct {
  border-color: rgba(34,197,94,0.5);
  box-shadow: 0 12px 24px rgba(34,197,94,0.18);
}
.email-card--incorrect {
  border-color: rgba(239,68,68,0.5);
  box-shadow: 0 12px 24px rgba(239,68,68,0.18);
}
.email-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.email-index {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--cyan-bright);
  font-size: 0.85rem;
}
.expand-btn {
  background: transparent;
  border: 1px solid rgba(34,211,238,0.3);
  color: var(--cyan-bright);
  padding: 6px 14px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.expand-btn:hover {
  background: rgba(34,211,238,0.08);
  border-color: var(--cyan);
}
.email-preview { display: grid; gap: 8px; margin-bottom: 14px; }
.email-details {
  display: grid;
  gap: 8px;
  margin: 14px 0;
  padding: 16px;
  background: var(--bg-surface);
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
}
.email-meta-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  font-size: 0.92rem;
  line-height: 1.5;
}
.email-body {
  margin-top: 16px;
  padding: 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  line-height: 1.7;
  color: var(--text-secondary);
  font-size: 0.95rem;
}
.email-body a {
  color: var(--cyan-bright);
  text-decoration: underline;
  font-weight: 600;
}
.email-body strong { color: var(--text-primary); font-weight: 700; }
.email-verdict {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}
.verdict-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.email-reveal {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}

/* ========== SMS lab cards ========== */
.messages-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.messages-header h2 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: var(--text-primary);
}
.sms-conversation-list {
  display: grid;
  gap: 14px;
  max-height: 500px;
  overflow-y: auto;
  padding-right: 8px;
}
.sms-message {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.sms-message:hover {
  border-color: var(--purple);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(168,85,247,0.15);
}
.sms-message--active {
  border-color: var(--purple);
  box-shadow: 0 8px 20px rgba(168,85,247,0.25);
}
.sms-message--correct {
  border-color: var(--green);
  box-shadow: 0 8px 16px rgba(34,197,94,0.18);
}
.sms-message--incorrect {
  border-color: var(--red);
  box-shadow: 0 8px 16px rgba(239,68,68,0.18);
}
.sms-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.sms-sender {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.92rem;
}
.sms-time {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.sms-from {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  margin-bottom: 8px;
}
.sms-text {
  color: var(--text-secondary);
  line-height: 1.5;
  font-size: 0.92rem;
}
.sms-reveal {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}
.verdict-section { display: grid; gap: 14px; }
.verdict-message-info {
  background: var(--bg-card);
  padding: 14px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  margin-bottom: 8px;
}
.verdict-message-preview {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-top: 6px;
  font-style: italic;
}

/* ========== Module Grid (homepage; legacy class set) ========== */
.training-modules { padding-bottom: 48px; }
.modules-grid { display: grid; gap: 22px; margin-top: 22px; }
@media (min-width: 640px) { .modules-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 960px) { .modules-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.module-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(34,211,238,0.12);
  border: 1px solid rgba(34,211,238,0.3);
  color: var(--cyan-bright);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.module-meta {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  margin-top: 8px;
  font-weight: 600;
}

/* ========== Instructions screen / scenario screen / summary screen ========== */
.placeholder-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
}
.placeholder-content { text-align: center; padding: 56px 20px; }
.placeholder-icon { font-size: 56px; margin-bottom: 18px; }
.placeholder-content h2 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  margin-bottom: 12px;
  color: var(--text-primary);
}
.placeholder-content p { font-size: 16px; color: var(--text-secondary); }

.instructions-screen { max-width: 900px; margin: 0 auto; padding: 36px 20px; }
.instructions-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 40px;
}
.instructions-icon { font-size: 56px; text-align: center; margin-bottom: 20px; }
.instructions-card h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 400;
  text-align: center;
  margin-bottom: 14px;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.instructions-intro {
  font-size: 17px;
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: 32px;
  line-height: 1.65;
}
.instructions-section { margin-bottom: 36px; }
.instructions-section h3 {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 18px;
  color: var(--text-primary);
}
.instructions-list { list-style: none; padding: 0; margin: 0; }
.instructions-list li {
  padding: 10px 0 10px 30px;
  position: relative;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.instructions-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--cyan-bright);
  font-weight: 700;
  font-size: 18px;
}
.instructions-list strong { font-weight: 700; color: var(--text-primary); }
.indicators-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.indicator-item {
  text-align: center;
  padding: 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}
.indicator-icon { font-size: 28px; display: block; margin-bottom: 10px; }
.indicator-item strong {
  display: block;
  font-size: 15px;
  margin-bottom: 6px;
  color: var(--text-primary);
}
.indicator-item p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.55;
}
.instructions-footer {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}
.time-note { font-size: 14px; color: var(--text-muted); margin-bottom: 22px; }
.btn-large { padding: 14px 36px; font-size: 16px; }

.scenario-screen { max-width: 100%; margin: 0 auto; padding: 14px; }
.scenario-header-bar { margin-bottom: 16px; }
.scenario-progress-info { margin-bottom: 8px; }
.scenario-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  transition: width 0.5s ease;
  border-radius: 999px;
}
.scenario-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 26px;
}
.email-display { margin-bottom: 22px; }
.email-headers {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
.email-field {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
  align-items: flex-start;
}
.email-field:last-child { margin-bottom: 0; }
.email-field-label {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-weight: 600;
  min-width: 70px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.email-field-value {
  color: var(--text-primary);
  flex: 1;
  word-break: break-word;
  font-size: 13px;
  font-family: var(--font-mono);
}

.summary-screen { max-width: 600px; margin: 0 auto; padding: 28px 14px; }
.summary-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 32px;
  text-align: center;
}
.summary-icon { font-size: 44px; margin-bottom: 14px; }
.summary-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 400;
  margin-bottom: 22px;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.summary-score-display { margin-bottom: 22px; }
.summary-score {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 10px;
}
.summary-score.excellent { color: var(--green-bright); }
.summary-score.good      { color: var(--cyan-bright); }
.summary-score.fair      { color: var(--amber-bright); }
.summary-score.poor      { color: var(--red-bright); }
.summary-grade {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-primary);
}
.summary-breakdown {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
}
.summary-message {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 22px;
  padding: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}
.summary-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 22px;
  padding: 22px 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.stat-item { text-align: center; }
.stat-icon { font-size: 22px; margin-bottom: 4px; }
.stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.stat-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--text-primary);
}
.summary-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .instructions-card { padding: 28px 22px; }
  .scenario-card { padding: 22px; }
  .summary-card { padding: 28px 22px; }
  .summary-stats { grid-template-columns: 1fr; gap: 14px; }
  .summary-actions { flex-direction: column; }
  .summary-actions .btn { width: 100%; }
  .indicators-grid { grid-template-columns: 1fr; }
}

/* Icon sizing lives in theme.css — every page that renders icons loads it,
   including lab.html and quiz.html, which do not load this file. */

/* ─── Email Client Chrome ─────────────────────────────────────────────────── */
.email-client-chrome{border:1px solid var(--border-subtle);border-radius:12px;overflow:hidden;margin:16px 0;background:var(--bg-card)}
.email-brand-header{padding:14px 20px;display:flex;align-items:center;gap:10px}
.brand-name{color:#fff;font-weight:700;font-size:1rem;letter-spacing:.02em}
.email-meta-panel{border-bottom:1px solid var(--border-subtle);background:var(--bg-surface)}
.email-meta-field{display:grid;grid-template-columns:80px 1fr;gap:8px;padding:7px 20px;border-bottom:1px solid var(--border-subtle);font-size:.88rem}
.email-meta-field:last-child{border-bottom:0}
.meta-label{color:var(--text-secondary);font-weight:600}
.meta-value{color:var(--text-primary);word-break:break-all}
.subject-value{font-weight:600;font-size:.94rem}
.meta-mismatch{background:rgba(245,158,11,.08);border-left:3px solid var(--amber)}
.meta-mismatch .meta-label::after{content:" ⚠";color:var(--amber)}
.email-body-render{padding:24px;font-size:.9rem;line-height:1.6;max-height:400px;overflow-y:auto;background:#f8f9fa;color:#1d1d1f}
.email-attach-bar{padding:10px 20px;background:rgba(245,158,11,.08);border-top:1px solid var(--border-subtle);font-size:.85rem;color:var(--amber-bright);display:flex;align-items:center;gap:8px}
.sim-link{position:relative;color:var(--blue);cursor:pointer;border-bottom:1px dashed var(--blue)}
.link-url-preview{display:none;position:absolute;bottom:calc(100% + 6px);left:0;background:#1d1d1f;color:#fff;padding:5px 10px;border-radius:6px;font-size:.75rem;white-space:nowrap;max-width:320px;overflow:hidden;text-overflow:ellipsis;z-index:10;pointer-events:none}
.sim-link:hover .link-url-preview{display:block}
.link-inspector{margin:12px 20px 16px;border:1px solid var(--border-mid);border-radius:8px;background:var(--bg-surface);overflow:hidden}
.link-inspector-header{background:var(--bg-deep);color:var(--text-primary);padding:8px 14px;font-weight:600;font-size:.85rem;display:flex;justify-content:space-between;align-items:center}
.link-inspector-body{padding:12px 14px;font-size:.83rem;display:grid;gap:6px;color:var(--text-primary)}
.link-part{display:flex;gap:8px}
.link-part-label{color:var(--text-secondary);min-width:70px;font-weight:600}
.link-risk{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;font-weight:600;font-size:.8rem;margin-top:4px}
.link-risk--warn{background:rgba(245,158,11,.12);color:var(--amber-bright)}
.link-risk--ok{background:rgba(34,197,94,.12);color:var(--green-bright)}

/* ─── Domain Analyzer ─────────────────────────────────────────────────────── */
.analyzer-input-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.analyzer-input{flex:1;min-width:200px;padding:12px 16px;border:1px solid var(--border-mid);border-radius:10px;font-size:1rem;font-family:var(--font-body);outline:none;background:var(--bg-surface);color:var(--text-primary);transition:border-color .2s}
.analyzer-input:focus{border-color:var(--blue)}
.presets{display:flex;flex-wrap:wrap;gap:8px}
.preset-btn{padding:6px 14px;border:1px solid var(--border-mid);border-radius:999px;background:transparent;color:var(--text-secondary);cursor:pointer;font-size:.85rem;font-family:var(--font-body);transition:all .2s}
.preset-btn:hover{border-color:var(--blue);color:var(--blue)}
.results-section{display:grid;gap:20px;margin-top:24px}
.result-group{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:14px;overflow:hidden}
.result-group-header{padding:14px 20px;background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;gap:10px}
.result-group-title{font-weight:700;font-size:1rem;color:var(--text-primary)}
.result-group-count{background:var(--blue);color:#fff;padding:2px 8px;border-radius:99px;font-size:.75rem;font-weight:600}
.result-item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:10px 20px;border-bottom:1px solid var(--border-subtle)}
.result-item:last-child{border-bottom:0}
.result-domain{font-family:var(--font-mono);font-size:.92rem;color:var(--text-primary)}
.result-desc{font-size:.78rem;color:var(--text-secondary);margin-top:2px}
.diff-mark{color:var(--red);font-weight:700;text-decoration:underline}
.copy-btn{padding:5px 12px;border:1px solid var(--border-mid);border-radius:6px;background:transparent;color:var(--text-secondary);cursor:pointer;font-size:.78rem;font-family:var(--font-body);white-space:nowrap;transition:all .2s}
.copy-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.copy-btn.copied{background:rgba(34,197,94,.12);color:var(--green-bright);border-color:var(--green-bright)}
.no-results{padding:32px;text-align:center;color:var(--text-muted)}