/* ═══════════════════════════════════════
   inOri Cybercheck — Shared Styles
   Design Tokens from inOri Plugin CSS
   ═══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --p-dark:      #1C3F5E;
  --p-mid:       #4A7FA5;
  --p-light:     #D6E8F5;
  --p-accent:    #E07820;
  --p-bg:        #F2F5F8;
  --p-white:     #FFFFFF;
  --p-border:    #D0DCE8;
  --p-text:      #1A2A38;
  --p-muted:     #6B8499;
  --p-shadow:    0 1px 4px rgba(28,63,94,.08);
  --p-shadow-lg: 0 6px 24px rgba(28,63,94,.15);
  --p-success:   #276749;
  --p-success-bg:#D1FAE5;
  --p-danger:    #C53030;
  --p-danger-bg: #FFF5F5;
  --p-warn:      #D69E2E;
  --p-warn-bg:   #FEF3E2;
  --p-info:      #2B6CB0;
  --p-info-bg:   #EBF4FF;
  --web-blue:    #367099;
  --web-blue-2:  #1f5f8b;
  --web-blue-dk: #003d68;
  --ff-body: "Open Sans", -apple-system, sans-serif;
  --ff-head: "Poppins", "Open Sans", sans-serif;
  --rad: 6px;
}

/* ── Reset inside widget ── */
.icc-widget *, .icc-widget *::before, .icc-widget *::after { box-sizing: border-box; margin: 0; padding: 0 }
.icc-widget {
  font-family: var(--ff-body);
  font-size: 15px;
  color: var(--p-text);
  -webkit-font-smoothing: antialiased;
  max-width: 780px;
  margin: 0 auto;
}
.icc-widget a { color: inherit; text-decoration: none }
.icc-widget button { font-family: inherit; cursor: pointer }
.icc-widget img { max-width: 100%; display: block }

/* ── Module Chrome (macOS-style window) ── */
.icc-chrome {
  background: var(--p-bg);
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(28,63,94,.06), 0 12px 40px rgba(28,63,94,.14), 0 0 0 1px rgba(28,63,94,.08);
  overflow: hidden;
}
.icc-chrome-header {
  background: linear-gradient(180deg, #E8EEF4 0%, #DCE5EE 100%);
  border-bottom: 1px solid #C8D5E0;
  padding: 10px 16px;
  display: flex; align-items: center; gap: 10px;
}
.icc-dots { display: flex; gap: 5px }
.icc-dot { width: 10px; height: 10px; border-radius: 50% }
.icc-dot-r { background: #FF5F57; border: 1px solid #E0443E }
.icc-dot-y { background: #FEBC2E; border: 1px solid #D4A017 }
.icc-dot-g { background: #28C840; border: 1px solid #1AAB29 }
.icc-chrome-sep { width: 1px; height: 18px; background: #C0CDD8 }
.icc-chrome-title { font-size: 12.5px; font-weight: 700; color: var(--p-dark) }
.icc-chrome-badge {
  margin-left: auto;
  background: #E8F5EE; border: 1px solid #B8DFC8;
  color: #1A7A3F; padding: 2px 8px; border-radius: 20px;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; gap: 4px;
}
.icc-chrome-badge::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: #28C840;
  animation: icc-blink 2s ease-in-out infinite;
}
@keyframes icc-blink { 50% { opacity: .3 } }

.icc-body { background: #fff; padding: 0 }
.icc-inner { padding: 28px clamp(20px, 3.5vw, 36px) }

/* ── Header ── */
.icc-header { text-align: center; padding: 32px 20px 24px }
.icc-header-icon { font-size: 44px; margin-bottom: 10px }
.icc-header h1 {
  font-family: var(--ff-head);
  font-size: clamp(22px, 3.5vw, 28px);
  font-weight: 700; color: var(--p-dark);
  letter-spacing: -.02em;
  margin: 0 0 6px;
}
.icc-header p { color: var(--p-muted); font-size: 14.5px; line-height: 1.5 }
.icc-header .icc-tag {
  display: inline-block; margin-bottom: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--p-accent); padding: 4px 12px;
  background: rgba(224,120,32,.08); border-radius: 4px;
}

/* ── Progress Bar ── */
.icc-progress { background: var(--p-bg); border-radius: 20px; height: 8px; margin: 0 0 20px; overflow: hidden }
.icc-progress-fill { height: 100%; background: linear-gradient(90deg, var(--web-blue), var(--p-mid)); border-radius: 20px; transition: width .5s ease }
.icc-counter { text-align: center; color: var(--p-muted); font-size: 13px; margin-bottom: 18px; font-weight: 600 }

/* ── Cards ── */
.icc-card {
  background: #fff; border: 1px solid var(--p-border);
  border-radius: 8px; padding: 24px; margin-bottom: 16px;
  box-shadow: var(--p-shadow);
  animation: icc-slideUp .3s ease;
}
.icc-card h2 {
  font-family: var(--ff-head);
  font-size: 17px; font-weight: 600; line-height: 1.5;
  color: var(--p-dark); margin: 0 0 16px;
}

/* ── Module Tags ── */
.icc-mtag {
  display: inline-block; padding: 3px 10px; border-radius: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  margin-bottom: 12px;
}
.icc-mtag-phishing  { background: var(--p-danger-bg); color: var(--p-danger) }
.icc-mtag-passwort  { background: var(--p-warn-bg); color: var(--p-warn) }
.icc-mtag-geraete   { background: var(--p-info-bg); color: var(--p-info) }
.icc-mtag-dsg       { background: var(--p-success-bg); color: var(--p-success) }
.icc-mtag-social    { background: #F3E8FF; color: #7C3AED }

/* ── Buttons ── */
.icc-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 13px 28px; border: none;
  background: var(--web-blue-2); color: #fff;
  border-radius: var(--rad); font-size: 15px; font-weight: 600;
  transition: all .18s;
}
.icc-btn-primary:hover { background: var(--web-blue-dk); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,73,125,.15) }

.icc-btn-accent {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 13px 28px; border: none;
  background: var(--p-accent); color: #fff;
  border-radius: var(--rad); font-size: 15px; font-weight: 600;
  transition: all .18s;
}
.icc-btn-accent:hover { background: #C8661A; transform: translateY(-1px) }

.icc-btn-block { display: block; width: 100% }

.icc-btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 13px 28px;
  background: transparent; border: 1.5px solid var(--p-border); color: var(--p-dark);
  border-radius: var(--rad); font-size: 15px; font-weight: 600;
  transition: all .18s;
}
.icc-btn-outline:hover { border-color: var(--web-blue); color: var(--web-blue) }

/* ── Options (Quiz) ── */
.icc-option {
  display: block; width: 100%; padding: 14px 18px; margin-bottom: 8px;
  background: var(--p-bg); border: 1.5px solid var(--p-border);
  border-radius: var(--rad); color: var(--p-text);
  font-family: inherit; font-size: 14.5px; font-weight: 500;
  cursor: pointer; text-align: left; transition: all .18s; line-height: 1.5;
}
.icc-option:hover:not(:disabled) { border-color: var(--web-blue); background: #EEF5FB }
.icc-option:disabled { cursor: default }
.icc-option.correct { border-color: var(--p-success); background: var(--p-success-bg) }
.icc-option.wrong { border-color: var(--p-danger); background: var(--p-danger-bg) }
.icc-opt-letter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--p-border);
  font-size: 12px; font-weight: 700; color: var(--p-muted);
  margin-right: 10px; vertical-align: middle; transition: all .18s;
}
.icc-option.correct .icc-opt-letter { background: var(--p-success); border-color: var(--p-success); color: #fff }
.icc-option.wrong .icc-opt-letter { background: var(--p-danger); border-color: var(--p-danger); color: #fff }

/* ── Feedback ── */
.icc-feedback {
  margin-top: 14px; padding: 18px; border-radius: var(--rad);
  font-size: 14px; line-height: 1.6; animation: icc-slideUp .3s ease;
}
.icc-feedback.correct { background: var(--p-success-bg); border: 1px solid #9AE6B4 }
.icc-feedback.wrong   { background: var(--p-danger-bg); border: 1px solid #FCA5A5 }
.icc-fb-title { font-weight: 700; font-size: 15px; margin-bottom: 6px }
.icc-feedback.correct .icc-fb-title { color: var(--p-success) }
.icc-feedback.wrong .icc-fb-title   { color: var(--p-danger) }
.icc-fb-detail { color: var(--p-muted) }

/* ── Hint Tags ── */
.icc-hints { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px }
.icc-hint-tag {
  background: var(--p-warn-bg); color: var(--p-warn);
  padding: 3px 10px; border-radius: 3px;
  font-size: 11px; font-weight: 700;
}

/* ── Email Card (Module 1) ── */
.icc-email {
  background: #fff; border: 1px solid var(--p-border);
  border-radius: 8px; overflow: hidden; margin-bottom: 16px;
}
.icc-email-header {
  padding: 16px 20px; border-bottom: 1px solid var(--p-border);
  background: var(--p-bg);
}
.icc-email-field { display: flex; gap: 8px; font-size: 13px; margin-bottom: 4px; align-items: baseline }
.icc-email-field:last-child { margin-bottom: 0 }
.icc-email-label { color: var(--p-muted); min-width: 50px; font-weight: 600; font-size: 12px }
.icc-email-value { color: var(--p-text); word-break: break-all }
.icc-email-value.suspicious { color: var(--p-danger); font-weight: 600 }
.icc-email-body { padding: 20px; font-size: 14.5px; line-height: 1.7; color: var(--p-text) }
.icc-email-body .fake-link { color: var(--p-danger); text-decoration: underline; cursor: default; font-size: 13px }
.icc-email-body .fake-btn {
  display: inline-block; background: var(--p-danger); color: #fff;
  padding: 6px 16px; border-radius: var(--rad); margin: 10px 0; font-size: 13px; font-weight: 600;
}
.icc-email-body .real-link { color: var(--web-blue); text-decoration: underline; cursor: default; font-size: 13px }

/* ── Button Row ── */
.icc-btn-row { display: flex; gap: 10px; margin-top: 14px }
.icc-btn-choice {
  flex: 1; padding: 14px; border: 1.5px solid var(--p-border);
  border-radius: var(--rad); background: var(--p-bg); color: var(--p-text);
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  cursor: pointer; text-align: center; transition: all .18s;
}
.icc-btn-choice:hover { border-color: var(--web-blue); background: #EEF5FB }
.icc-btn-choice.safe:hover { border-color: var(--p-success); background: var(--p-success-bg) }
.icc-btn-choice.phish:hover { border-color: var(--p-danger); background: var(--p-danger-bg) }
.icc-btn-choice:disabled { opacity: .5; cursor: default; pointer-events: none }

/* ── Intro Screen ── */
.icc-intro { text-align: center; padding: 24px 16px }
.icc-rules {
  background: var(--p-bg); border: 1px solid var(--p-border);
  border-radius: 8px; padding: 20px; margin: 20px 0; text-align: left;
}
.icc-rules h3 { font-family: var(--ff-head); font-size: 15px; font-weight: 600; margin-bottom: 12px; color: var(--p-dark) }
.icc-rule-item { display: flex; gap: 10px; align-items: center; padding: 7px 0; font-size: 13.5px; color: var(--p-muted); line-height: 1.5 }
.icc-rule-icon { font-size: 18px; flex-shrink: 0 }

/* ── Pills ── */
.icc-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; justify-content: center }
.icc-pill {
  padding: 4px 12px; border-radius: 3px; font-size: 11px; font-weight: 700;
}

/* ── Result Screen ── */
.icc-result { text-align: center; padding: 32px 16px }
.icc-score-ring { position: relative; width: 150px; height: 150px; margin: 0 auto 24px }
.icc-score-ring svg { transform: rotate(-90deg) }
.icc-score-ring .icc-score-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.icc-score-num { font-family: var(--ff-head); font-size: 38px; font-weight: 700; line-height: 1 }
.icc-score-label { font-size: 12px; color: var(--p-muted); margin-top: 4px }

.icc-review-grid { display: grid; gap: 8px; margin: 20px 0; text-align: left }
.icc-review-item {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 14px; background: var(--p-bg);
  border: 1px solid var(--p-border); border-radius: var(--rad); font-size: 13.5px;
}
.icc-review-item .r-icon { font-size: 16px; flex-shrink: 0 }
.icc-review-item .r-label { font-weight: 600; color: var(--p-dark) }
.icc-review-item .r-detail { font-size: 12px; color: var(--p-muted); margin-top: 1px }

/* ── Certificate Section ── */
.icc-cert-section { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--p-border) }
.icc-cert-section h3 { font-family: var(--ff-head); font-size: 17px; font-weight: 600; margin-bottom: 6px; color: var(--p-dark) }
.icc-cert-section > p { color: var(--p-muted); font-size: 13.5px; margin-bottom: 14px; line-height: 1.5 }
.icc-name-row { display: flex; gap: 10px; margin-bottom: 14px }
.icc-name-input {
  flex: 1; padding: 12px 16px;
  background: var(--p-bg); border: 1.5px solid var(--p-border);
  border-radius: var(--rad); color: var(--p-text);
  font-family: inherit; font-size: 14.5px; outline: none; transition: border-color .18s;
}
.icc-name-input:focus { border-color: var(--web-blue); box-shadow: 0 0 0 3px rgba(54,112,153,.12) }
.icc-name-input::placeholder { color: var(--p-muted) }
.icc-cert-canvas { max-width: 100%; border-radius: 8px; border: 2px solid var(--p-accent); margin-top: 16px }

/* ── Password Module ── */
.icc-pw-display {
  background: var(--p-bg); border: 1px solid var(--p-border);
  border-radius: var(--rad); padding: 14px 18px; margin-bottom: 10px;
}
.icc-pw-text { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 600; color: var(--p-dark); word-break: break-all }
.icc-pw-time { font-size: 12px; color: var(--p-muted); margin-top: 4px }
.icc-pw-bar {
  height: 8px; border-radius: 20px; background: var(--p-bg); overflow: hidden; margin: 8px 0;
}
.icc-pw-bar-fill { height: 100%; border-radius: 20px; transition: width .4s ease, background .4s ease }
.icc-criteria-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 12px 0;
}
.icc-criterion {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--p-bg);
  border: 1px solid var(--p-border); border-radius: var(--rad);
  font-size: 12.5px; color: var(--p-muted); transition: all .18s;
}
.icc-criterion.met { background: var(--p-success-bg); border-color: #9AE6B4; color: var(--p-success) }
.icc-criterion .c-icon { font-size: 14px }

/* ── Wimmelbild ── */
.icc-scene-wrap { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--p-border) }
.icc-scene-wrap svg { display: block; width: 100%; height: auto }
.icc-hotspot {
  position: absolute; width: 44px; height: 44px;
  padding: 0; margin: 0; font: inherit; color: inherit;
  border-radius: 50%; cursor: pointer;
  background: rgba(224,120,32,.15); border: 2px solid rgba(224,120,32,.5);
  transition: all .2s; animation: icc-pulse 2s ease-in-out infinite;
}
.icc-hotspot:hover { background: rgba(224,120,32,.3); transform: scale(1.1) }
.icc-hotspot.found { background: var(--p-success-bg); border-color: var(--p-success); animation: none }
.icc-timer {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ff-head); font-size: 20px; font-weight: 700; color: var(--p-dark);
  background: var(--p-bg); padding: 8px 16px; border-radius: var(--rad);
  border: 1px solid var(--p-border);
}
.icc-timer.urgent { color: var(--p-danger); border-color: #FCA5A5; background: var(--p-danger-bg) }

.icc-popup {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: #fff; border-radius: 10px; padding: 24px; max-width: 400px; width: 90%;
  box-shadow: var(--p-shadow-lg); border: 1px solid var(--p-border);
  z-index: 1000; animation: icc-slideUp .3s ease;
}
.icc-popup h3 { font-family: var(--ff-head); font-size: 16px; font-weight: 600; color: var(--p-dark); margin-bottom: 8px }
.icc-popup p { font-size: 14px; color: var(--p-muted); line-height: 1.6; margin-bottom: 14px }
.icc-overlay { position: fixed; inset: 0; background: rgba(28,63,94,.4); z-index: 999 }

/* ── DSG Scenario ── */
.icc-scenario-card {
  background: #fff; border: 1px solid var(--p-border);
  border-left: 4px solid var(--p-accent);
  border-radius: 8px; padding: 20px; margin-bottom: 14px;
  font-size: 14.5px; line-height: 1.7; color: var(--p-muted);
}

/* ── Summary Box ── */
.icc-summary {
  background: var(--p-bg); border: 1px solid var(--p-border);
  border-radius: 8px; padding: 20px; margin-top: 20px;
}
.icc-summary h3 { font-family: var(--ff-head); font-size: 15px; font-weight: 600; margin-bottom: 12px; color: var(--p-dark) }
.icc-summary-item { display: flex; gap: 8px; padding: 6px 0; font-size: 13.5px; color: var(--p-text); line-height: 1.5 }
.icc-summary-item::before {
  content: "";
  width: 16px; height: 16px; min-width: 16px;
  border-radius: 50%; background: var(--p-light); margin-top: 3px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%231C3F5E' d='M6.5 10.9L3.5 7.9l1-1 2 2 4.5-4.5 1 1z'/></svg>");
  background-repeat: no-repeat; background-position: center;
}

/* ── Checklist (Module 3) ── */
.icc-checklist { margin-top: 16px }
.icc-check-item {
  display: flex; gap: 10px; align-items: start;
  padding: 8px 0; font-size: 13.5px; color: var(--p-text); line-height: 1.5;
}
.icc-check-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px }

/* ── Animations ── */
@keyframes icc-slideUp { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: translateY(0) } }
@keyframes icc-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,120,32,.3) } 50% { box-shadow: 0 0 0 8px rgba(224,120,32,0) } }

/* ── Responsive ── */
@media (max-width: 600px) {
  .icc-inner { padding: 20px 16px }
  .icc-header h1 { font-size: 20px }
  .icc-card { padding: 18px }
  .icc-criteria-grid { grid-template-columns: 1fr }
  .icc-name-row { flex-direction: column }
  .icc-btn-row { flex-direction: column }
}

/* ═══════════════════════════════════════
   v3.2 — A11y, Session Banner, Toast
   ═══════════════════════════════════════ */

/* Screen-reader-only utility */
.icc-sr-only {
  position: absolute !important; left: -9999px !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
}

/* Focus ring — visible keyboard navigation for trainees with motor/visual challenges */
.icc-widget :focus-visible {
  outline: 3px solid var(--p-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Minimum touch target for primary actions — WCAG 2.5.5 (44×44) for older users on tablets.
   Small icon-only buttons (.sb-btn, .icc-dot etc.) keep their explicit size. */
.icc-widget .icc-btn-choice,
.icc-widget .icc-btn-primary,
.icc-widget .icc-btn-outline,
.icc-widget .icc-btn-accent,
.icc-widget .icc-option,
.icc-widget .m8-buzzer {
  min-height: 44px;
}

/* Session banner shown at top of every module when joined via session */
.icc-session-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: linear-gradient(90deg, var(--p-info-bg) 0%, #DDEBF8 100%);
  border: 1px solid #B7D3EA;
  color: var(--p-dark);
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 500;
}
.icc-session-banner .icc-sb-icon { font-size: 18px; line-height: 1 }
.icc-session-banner .icc-sb-text { flex: 1; min-width: 200px }
.icc-session-banner .icc-sb-text code {
  font-family: "JetBrains Mono", monospace;
  background: rgba(28,63,94,.08);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 1px;
}
.icc-session-banner .icc-sb-hint {
  font-size: 11px;
  color: var(--p-muted);
  font-weight: 400;
}

/* Floating toast after a score-report */
.icc-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  background: var(--p-dark);
  color: #fff;
  padding: 12px 20px;
  border-radius: 24px;
  font-family: var(--ff-body);
  font-size: 14px;
  box-shadow: 0 8px 28px rgba(28,63,94,.3);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 9999;
  pointer-events: none;
}
.icc-toast.show { opacity: 1; transform: translate(-50%, 0) }
.icc-toast strong { color: var(--p-accent); margin-left: 4px }

/* Respect users who request reduced motion */
@media (prefers-reduced-motion: reduce) {
  .icc-toast { transition: opacity .01s }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ═══════════════════════════════════════
   v4.0 — Team Journey
   ═══════════════════════════════════════ */

/* Floating "back to hub" pill — appears on module pages when in a session */
.icc-hub-pill {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--p-accent);
  color: #fff !important;
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(224,120,32,.35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.icc-hub-pill:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(224,120,32,.45); color: #fff !important; }
.icc-hub-pill:focus-visible { outline: 3px solid var(--p-dark); outline-offset: 3px }
@media (max-width: 480px) {
  .icc-hub-pill { right: 10px; bottom: 10px; padding: 8px 12px; font-size: 12.5px }
}

/* Speed-bonus strip at the top of a live challenge: shrinks while the question is open */
.icc-speed {
  position: fixed;
  left: 0; right: 0; top: 0;
  z-index: 9997;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--p-dark);
  color: #fff;
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(28,63,94,.25);
}
.icc-speed .icc-speed-lbl { white-space: nowrap }
.icc-speed .icc-speed-track { flex: 1; height: 10px; background: rgba(255,255,255,.18); border-radius: 8px; overflow: hidden }
.icc-speed .icc-speed-track i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #34d399, #F6C066); border-radius: 8px; transition: width .15s linear }
.icc-speed.low .icc-speed-track i { background: linear-gradient(90deg, #E07820, #C53030) }
.icc-speed .icc-speed-val { font-family: var(--ff-head); font-size: 16px; min-width: 52px; text-align: right; color: #F6C066 }
.icc-speed.low .icc-speed-val { color: #FCA5A5 }
body:has(.icc-speed:not([style*="display: none"])) { padding-top: 40px }

/* Fixed bottom bar after a challenge is finished: the one obvious next step */
.icc-done-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--p-dark);
  color: #fff;
  font-family: var(--ff-body);
  font-size: 14px;
  box-shadow: 0 -6px 24px rgba(28,63,94,.25);
}
.icc-done-bar .icc-done-txt { flex: 1; min-width: 180px }
.icc-done-bar .icc-done-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--p-accent);
  color: #fff !important;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  font-size: 15px;
}
.icc-done-bar .icc-done-btn:hover { background: #C8661A }
body:has(.icc-done-bar) { padding-bottom: 72px }

/* Banner shown when an answer arrives after the moderator moved on */
.icc-locked-banner {
  position: fixed;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--p-warn);
  color: #fff;
  padding: 14px 22px;
  border-radius: 30px;
  box-shadow: 0 10px 30px rgba(214,158,46,.5);
  font-family: var(--ff-body);
  font-size: 14px;
  max-width: 92vw;
  font-weight: 500;
}
.icc-locked-banner strong { color: #FFF }

/* Full-screen lock overlay shown when player tries to access a module
   that the trainer hasn't activated. */
.icc-step-lock {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(28,63,94,.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.icc-step-lock-card {
  max-width: 480px;
  width: 100%;
  background: #fff;
  border-radius: 16px;
  padding: 36px 30px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.icc-step-lock-card h1 {
  font-family: var(--ff-head);
  font-size: 22px;
  font-weight: 700;
  color: var(--p-dark);
  margin: 16px 0 8px;
}
.icc-step-lock-card p {
  font-size: 14px;
  color: var(--p-muted);
  line-height: 1.6;
  margin: 0 0 18px;
}
.icc-step-lock-card code {
  background: var(--p-bg);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--p-dark);
}
.icc-step-lock-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--p-accent);
  color: #fff !important;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
}
.icc-step-lock-btn:hover { background: #C8661A }
.icc-step-lock-hint {
  font-size: 12px !important;
  color: var(--p-muted);
  margin-top: 14px !important;
}