:root {
  --ink: #101828;
  --muted: #475467;
  --line: #d0d5dd;
  --wash: #f8f9fc;
  --purple: #28106b;
  --violet: #4b2dd0;
  --blue: #2348b3;
  --green: #067647;
  --red: #b42318;
  --orange: #b54708;
  --white: #ffffff;
}
.workshop-toggle input { pointer-events: none; }
.risk-action select, .claim-lookup input, .containment-controls select, .restore-control-panel select { width: 100%; padding: 10px 11px; color: inherit; border: 1px solid currentColor; border-radius: 5px; background: #fff; font: inherit; }
.risk-action-hint { margin: -4px 0 0; color: #637082; font-size: 11px; }.lab-impact { display: grid; gap: 7px; margin-top: 16px; padding: 14px; border-left: 4px solid #087647; background: #edf9f1; }.lab-impact p { margin: 0; color: #355d46; font-size: 12px; }.lab-impact aside { color: #244e37; font-size: 12px; font-weight: 750; }
.risk-action-label { margin: 0; color: #43516b; font-size: 12px; }.risk-browser-identity { display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; padding: 12px; border: 1px solid #dfe6ef; background: #fff; }.risk-browser-identity > span { display: grid; width: 32px; height: 32px; place-items: center; color: #355a8b; border-radius: 50%; background: #e6edf7; font-size: 10px; font-weight: 900; }.risk-browser-identity b, .risk-browser-identity small { display: block; }.risk-browser-identity b { font-size: 12px; }.risk-browser-identity small { color: #78869c; font-size: 10px; }.risk-browser-identity em { color: #8290a6; font-size: 9px; font-style: normal; font-weight: 900; }
.claim-lookup { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: end; }.claim-lookup label, .claim-lookup small { grid-column: 1 / -1; }.claim-lookup label { color: #63574e; font-size: 11px; font-weight: 800; }.claim-lookup small { color: #7d7167; font-size: 10px; }.claim-lookup button { padding: 10px 12px; white-space: nowrap; }
.soc-threshold-control { display: grid; grid-template-columns: auto minmax(0, 1fr) 32px; gap: 10px; align-items: center; padding: 14px 18px; color: #bfcee4; border-top: 1px solid #244364; font-size: 11px; }.soc-threshold-control input { width: 100%; accent-color: #55e0ba; }.soc-threshold-control output { display: grid; height: 28px; place-items: center; color: #071426; border-radius: 50%; background: #55e0ba; font: 800 11px ui-monospace, monospace; }.soc-threshold-control small { grid-column: 2 / -1; color: #7997ba; font-size: 9px; }
.containment-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-top: 14px; padding: 13px 15px; background: #f7faf9; }.containment-controls label { display: grid; gap: 6px; color: #506461; font-size: 10px; font-weight: 800; }.command-toggle { display: flex !important; grid-template-columns: unset !important; align-items: center; gap: 7px !important; padding-bottom: 10px; }.command-toggle input { accent-color: #167361; }
.restore-control-panel { display: grid; grid-template-columns: 1fr 1.25fr; gap: 12px 18px; align-items: center; margin-top: 18px; padding: 17px; border: 1px solid #d8e2ee; background: #fff; }.restore-control-panel > div { grid-row: span 2; }.restore-control-panel h2 { margin: 3px 0 0; color: #23395e; font-size: 16px; }.restore-control-panel label { display: flex; gap: 8px; align-items: center; color: #536f8e; font-size: 11px; }.restore-control-panel label[for] { display: grid; }.restore-control-panel input { accent-color: #236cb3; }.recovery-inventory tr.is-selected td { background: #e6f4ec; }.recovery-inventory [data-select-backup] { padding: 5px 7px; color: #155795; border: 1px solid #b6cee4; border-radius: 3px; background: #f8fbff; font: inherit; font-weight: 800; cursor: pointer; }
.forensic-coach { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr) auto; gap: 20px; align-items: center; margin: 20px 0; padding: 19px 21px; border-left: 4px solid var(--violet); background: #f4f1ff; }.forensic-coach h2 { margin: 3px 0 8px; color: #2d176d; font-size: 20px; }.forensic-coach ol { display: grid; gap: 4px; margin: 0; padding-left: 20px; color: #475467; font-size: 13px; }.forensic-terms { display: grid; gap: 7px; }.forensic-terms > strong { color: #57408e; font-size: 11px; }.forensic-terms span { display: grid; grid-template-columns: 82px 1fr; gap: 8px; color: #596780; font-size: 11px; }.forensic-terms b { color: #24165d; }.forensic-coach .btn { white-space: nowrap; }
@media (max-width: 760px) { .forensic-coach, .restore-control-panel { grid-template-columns: 1fr; }.restore-control-panel > div { grid-row: auto; }.containment-controls { grid-template-columns: 1fr; }.command-toggle { padding-bottom: 0; }.claim-lookup { grid-template-columns: 1fr; }.claim-lookup button { width: 100%; } }
* { box-sizing: border-box; }
html { background: var(--white); }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: "Noto Sans Thai", "Noto Sans", Arial, sans-serif;
  line-height: 1.55;
}
a { color: var(--blue); }
code, pre, .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
header {
  border-bottom: 1px solid var(--line);
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 20;
}
.nav {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  gap: 18px;
  align-items: center;
}
.brand { display: inline-flex; align-items: center; gap: 9px; min-width: 0; text-decoration: none; }
.brand-sth-frame { display: inline-flex; align-items: center; justify-content: center; width: 112px; height: 58px; padding: 0; border-radius: 5px; background: var(--white); overflow: hidden; }
.brand-sth-frame img { width: 100%; height: 100%; object-fit: contain; }
.brand-cross { color: var(--purple); font-size: 22px; font-weight: 800; }
.brand-ciso { width: 76px; height: 76px; object-fit: contain; }
.nav-spacer { flex: 1; }
.team-pill {
  display: inline-block;
  border-radius: 999px;
  padding: 5px 11px;
  color: var(--white);
  background: linear-gradient(90deg, #111111, var(--violet));
  font-size: 13px;
  font-weight: 700;
}
.team-profile-link { text-decoration: none; }
.team-profile-link:hover { color: var(--white); filter: brightness(1.12); }
.team-profile-link:focus-visible { color: var(--white); outline: 3px solid #98a2ff; outline-offset: 3px; }
.nav-countdown { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 6px; padding: 3px 10px; border-right: 1px solid var(--line); color: #172554; text-align: right; white-space: nowrap; }.nav-countdown small { color: var(--muted); font-size: 11px; font-weight: 800; }.nav-countdown strong { font: 900 18px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .03em; }.nav-countdown.upcoming { color: #9a3412; }.nav-countdown.live { color: #067647; }
main { max-width: 1180px; margin: 0 auto; padding: 32px 24px 64px; }
.hero {
  padding: 26px;
  border: 1px solid var(--line);
  border-left: 8px solid var(--violet);
  border-radius: 14px;
  background: var(--white);
  margin-bottom: 28px;
}
.hero h1 { margin: 0 0 8px; color: var(--purple); font-size: 30px; }
.hero p { margin: 4px 0; color: var(--muted); }
.team-dashboard-hero { display: flex; align-items: center; gap: 24px; }
.team-dashboard-logo { width: 126px; height: 126px; flex: 0 0 auto; object-fit: contain; }
.team-dashboard-copy { min-width: 0; }
.team-dashboard-copy h1 { margin-bottom: 8px; }
h1, h2, h3 { line-height: 1.25; }
h2 { margin-top: 30px; color: var(--purple); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; }
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 4px 12px rgba(16, 24, 40, .05);
}
.card h3 { margin: 6px 0 8px; }
.card p { margin: 5px 0; }
.card .meta { color: var(--muted); font-size: 13px; }
.card.solved { border-color: #6ce9a6; background: #f6fef9; }
.badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.badge {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--line);
  background: var(--wash);
}
.badge.easy { color: var(--green); background: #ecfdf3; border-color: #abefc6; }
.badge.medium { color: var(--orange); background: #fff6ed; border-color: #fedf89; }
.badge.very_hard { color: var(--red); background: #fef3f2; border-color: #fecdca; }
.btn, button {
  appearance: none;
  border: 0;
  border-radius: 9px;
  padding: 10px 15px;
  background: var(--violet);
  color: var(--white);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn.secondary { background: var(--white); color: var(--purple); border: 1px solid var(--purple); }
.btn.danger { background: var(--red); }
.btn:disabled, button:disabled { opacity: .5; cursor: not-allowed; }
form.stack { display: grid; gap: 13px; max-width: 620px; }
label { font-weight: 700; }
input, select, textarea {
  width: 100%;
  border: 1px solid #98a2b3;
  border-radius: 8px;
  padding: 10px 11px;
  font: inherit;
  background: var(--white);
}
input[readonly], select:disabled { background: #f2f4f7; color: #667085; }
.notice {
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--wash);
  margin: 14px 0;
}
.notice.success { border-color: #6ce9a6; background: #ecfdf3; color: #05603a; }
.notice.error { border-color: #fda29b; background: #fef3f2; color: #912018; }
.notice.warning { border-color: #fec84b; background: #fffaeb; color: #93370d; }
.flag {
  display: block;
  overflow-wrap: anywhere;
  padding: 14px;
  border-radius: 10px;
  border: 1px dashed var(--violet);
  background: #f2efff;
  color: var(--purple);
  font-weight: 800;
  margin-top: 12px;
}
.kv { display: grid; grid-template-columns: 190px 1fr; gap: 7px 14px; }
.kv dt { font-weight: 700; color: var(--muted); }
.kv dd { margin: 0; }
table { width: 100%; border-collapse: collapse; margin: 12px 0 22px; }
th, td { border: 1px solid var(--line); padding: 9px 10px; text-align: left; vertical-align: top; }
th { background: var(--purple); color: var(--white); }
tbody tr:nth-child(even) { background: var(--wash); }
pre {
  background: #111827;
  color: #f9fafb;
  padding: 14px;
  border-radius: 10px;
  overflow-x: auto;
}
.small { font-size: 13px; color: var(--muted); }
hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.login-wrap { max-width: 980px; margin: 48px auto; }
.team-login-form { margin: 0; }
.team-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  border: 0;
}
.team-picker legend { width: 100%; margin-bottom: 4px; font-size: 21px; font-weight: 800; color: var(--purple); }
.team-picker-help { grid-column: 1 / -1; margin: -2px 0 0; color: var(--muted); }
.team-choice { min-width: 0; text-align: center; }
.team-logo-button {
  width: 100%;
  padding: 12px;
  border: 2px solid transparent;
  border-radius: 16px;
  background: var(--white);
  color: var(--ink);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.team-logo-button:hover { border-color: #b8a7f5; box-shadow: 0 10px 20px rgba(40, 16, 107, .10); transform: translateY(-2px); }
.team-logo-button:focus-visible { outline: 3px solid #9c86ee; outline-offset: 3px; }
.team-choice.selected .team-logo-button { border-color: var(--violet); box-shadow: 0 12px 24px rgba(75, 45, 208, .16); }
.team-logo-button img { display: block; width: min(100%, 184px); height: auto; margin: 0 auto 7px; }
.team-logo-button span { display: block; font-size: 15px; letter-spacing: .07em; font-weight: 800; }
.team-code-panel { display: grid; gap: 9px; margin-top: 12px; padding: 14px; text-align: left; border-top: 1px solid #d9d1fa; }
.team-code-panel[hidden] { display: none; }
.team-code-panel button { width: 100%; }
.team-code-input { text-align: center; letter-spacing: .16em; font-weight: 800; }
.challenge-objective { max-width: 960px; margin: 18px 0 0; color: #344054; line-height: 1.7; }
.challenge-objective strong { color: #251670; }
.standards-mapping { margin: -8px 0 30px; padding: 20px 0 0; border-top: 1px solid #d9e1ee; }
.standards-mapping-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.standards-mapping-heading h2 { margin: 0; color: #172554; font-size: 21px; }
.standards-mapping-heading .eyebrow { color: #3b5ccc; }
.standards-mapping-heading a { flex: 0 0 auto; color: #2f22a8; font-size: 13px; font-weight: 800; text-underline-offset: 3px; }
.standards-mapping-intro { margin: 7px 0 14px; color: #667085; font-size: 14px; }
.standards-mapping-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; overflow: hidden; border: 1px solid #d9e1ee; border-radius: 12px; background: #d9e1ee; }
.standards-mapping-item { min-width: 0; padding: 15px 17px; background: #fff; }
.standards-mapping--owasp .standards-mapping-item { border-top: 3px solid #5436d7; }
.standards-mapping--nist .standards-mapping-item { border-top: 3px solid #087c62; }
.standards-mapping-item strong { display: block; color: #172554; font-size: 14px; }
.standards-mapping-item p { margin: 7px 0 0; color: #475467; font-size: 13px; line-height: 1.55; }
.standards-function { display: inline-block; margin-bottom: 6px; color: #087c62; font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.storyline { margin: -10px 0 28px; padding: 18px 22px; border-left: 4px solid #c73431; background: #fff7f7; }
.storyline-kicker, .eyebrow { margin: 0 0 5px; color: #8f2423; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.storyline h2 { margin: 0 0 5px; color: #6e1e1d; font-size: 20px; }
.storyline p:last-child { margin: 0; color: #344054; }
.mobile-desktop-notice { display: none; }
.incident-chat-flow { max-width: 860px; margin: 0 auto 34px; }
.chat-flow-meta { display: flex; justify-content: space-between; gap: 16px; margin: 0 8px 9px; color: #58706a; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.chat-shell { overflow: hidden; border: 1px solid #cbd7d2; border-radius: 24px; background: #e8eeeb; box-shadow: 0 22px 50px rgba(17, 49, 43, .15); }
.chat-topbar { position: static; display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 15px 20px; color: #fff; border: 0; background: linear-gradient(135deg, #103b35, #1c6052); }
.chat-shield { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 14px; color: #163f36; background: #d7e43a; font-size: 30px; font-weight: 900; line-height: 1; }
.chat-topbar p { margin: 0 0 2px; color: #cce2d9; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.chat-topbar h2 { margin: 0; color: #fff; font-size: clamp(18px, 2vw, 23px); }
.chat-live { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid rgba(215, 228, 58, .6); border-radius: 999px; color: #e7f6bd; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.chat-live i { width: 7px; height: 7px; border-radius: 50%; background: #d7e43a; box-shadow: 0 0 10px #d7e43a; animation: live-pulse 1.5s infinite; }
.chat-timeline { display: grid; gap: 15px; min-height: 405px; padding: 24px clamp(18px, 4vw, 42px) 27px; background: radial-gradient(circle at 90% 5%, rgba(42, 117, 93, .13), transparent 34%), linear-gradient(180deg, #edf4f0, #e5ede9); }
.chat-date { justify-self: center; margin: 0 0 5px; padding: 5px 10px; border-radius: 999px; color: #536660; background: rgba(255,255,255,.74); font-size: 11px; font-weight: 800; }
.chat-message { display: flex; align-items: end; gap: 9px; max-width: min(660px, 88%); animation: chat-rise .42s ease-out both; }
.chat-message:nth-of-type(3) { animation-delay: .11s; }.chat-message.outgoing { justify-self: end; animation-delay: .22s; }
.chat-avatar { display: grid; flex: 0 0 auto; width: 35px; height: 35px; place-items: center; border-radius: 12px; color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .04em; }
.chat-avatar.soc { background: #d13e3b; }.chat-avatar.gov { background: #1e5fac; }
.chat-message > div { display: grid; gap: 4px; }.chat-message small { color: #596a64; font-size: 11px; font-weight: 700; }.chat-message p { margin: 0; padding: 12px 15px; border-radius: 4px 17px 17px 17px; color: #1d322c; background: #fff; box-shadow: 0 5px 12px rgba(26, 60, 52, .08); line-height: 1.6; }
.chat-message.outgoing small { text-align: right; }.chat-message.outgoing p { border-radius: 17px 4px 17px 17px; color: #193b2f; background: #cde962; }
.chat-mission { margin: 4px 0 0 44px; padding: 14px 17px; border: 1px solid #b9d747; border-left: 5px solid #769b00; border-radius: 12px; color: #e9f6c3; background: #173c33; animation: chat-rise .42s .33s ease-out both; }.chat-mission span { color: #d7e43a; font-size: 10px; font-weight: 900; letter-spacing: .12em; }.chat-mission p { margin: 5px 0 0; line-height: 1.55; }
.chat-composer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px 13px 22px; border: 0; border-top: 1px solid #cbd7d2; background: #fff; text-align: left; }.chat-composer > span { color: #98a39f; font-size: 14px; }.chat-composer button { display: inline-flex; align-items: center; gap: 13px; white-space: nowrap; padding: 11px 15px 11px 18px; color: #183b31; border: 0; border-radius: 12px; background: #d7e43a; font-weight: 900; }.chat-composer button:hover { background: #c9d936; }.chat-composer button:disabled { cursor: default; color: #3e5a51; background: #dfe9b8; }.chat-composer button b { font-size: 19px; line-height: .7; }
/* Familiar mobile-chat language: message hierarchy remains the only focus before opening the lab. */
.incident-chat-flow { max-width: 940px; }.incident-chat-flow .chat-shell { border: 1px solid #7997c5; border-radius: 28px; background: #8ea9d1; box-shadow: 0 24px 56px rgba(48, 79, 123, .18); }.incident-chat-flow .chat-topbar { display: flex; justify-content: space-between; padding: 13px 18px; color: #101828; background: #91acd5; }.chat-topbar-left { display: flex; min-width: 0; align-items: center; gap: 12px; }.incident-chat-flow .chat-back { font-size: 43px; font-weight: 300; line-height: .55; }.incident-chat-flow .chat-room-logo { width: 42px; height: 42px; flex: 0 0 auto; object-fit: contain; }.incident-chat-flow .chat-topbar p { color: #38506e; font-size: 9px; letter-spacing: .1em; }.incident-chat-flow .chat-topbar h2 { overflow: hidden; color: #101828; font-size: clamp(17px, 2vw, 22px); text-overflow: ellipsis; white-space: nowrap; }.chat-topbar-actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 17px; padding-left: 15px; color: #101828; font-size: 24px; line-height: 1; }.chat-topbar-actions span { display: grid; width: 22px; height: 28px; place-items: center; }.incident-chat-flow .chat-timeline { gap: 13px; min-height: 440px; padding: 22px clamp(18px, 4vw, 40px) 25px; background: radial-gradient(circle at 85% 75%, rgba(255,255,255,.18), transparent 32%), #8ea9d1; }.incident-chat-flow .chat-date { margin-bottom: 5px; color: #eef4ff; background: rgba(62, 93, 142, .5); }.incident-chat-flow .chat-message { align-items: flex-end; max-width: min(660px, 91%); gap: 10px; }.incident-chat-flow .chat-avatar { width: 38px; height: 38px; border: 2px solid rgba(255,255,255,.7); border-radius: 50%; box-shadow: none; }.incident-chat-flow .chat-avatar.soc { background: #de5b57; }.incident-chat-flow .chat-avatar.gov { background: #5898dc; }.incident-chat-flow .chat-message > div { min-width: 0; gap: 3px; }.incident-chat-flow .chat-message small { padding-left: 2px; color: #344a67; font-size: 11px; }.chat-bubble-row { display: flex; align-items: flex-end; gap: 7px; }.incident-chat-flow .chat-message p { position: relative; padding: 11px 14px; border-radius: 19px; color: #172b43; box-shadow: none; font-size: 15px; line-height: 1.55; }.incident-chat-flow .chat-message.incoming p { border-top-left-radius: 5px; background: #fff; }.incident-chat-flow .chat-message.incoming p::before { position: absolute; top: 0; left: -7px; width: 13px; height: 13px; background: #fff; clip-path: polygon(100% 0, 100% 100%, 0 0); content: ""; }.chat-bubble-row time { flex: 0 0 auto; padding-bottom: 2px; color: #526b8c; font-size: 10px; white-space: nowrap; }.incident-chat-flow .chat-message.outgoing { max-width: min(590px, 88%); }.incident-chat-flow .chat-message.outgoing p { border-top-right-radius: 5px; color: #173c26; background: #9de56e; }.incident-chat-flow .chat-message.outgoing p::after { position: absolute; top: 0; right: -7px; width: 13px; height: 13px; background: #9de56e; clip-path: polygon(0 0, 0 100%, 100% 0); content: ""; }.incident-chat-flow .chat-message.outgoing small { padding-right: 2px; color: #4b6380; }.chat-read { color: #5276b8 !important; text-align: right; line-height: 1.2; }.incident-chat-flow .chat-mission { margin: 7px 0 0 48px; padding: 13px 16px; border: 0; border-radius: 17px; color: #26384d; background: #fff; box-shadow: none; }.incident-chat-flow .chat-mission span { color: #5b78ad; font-size: 10px; }.incident-chat-flow .chat-mission p { margin-top: 5px; color: #26384d; }.incident-chat-flow .chat-composer { justify-content: flex-start; gap: 11px; padding: 11px 15px; border-top: 1px solid #d7e0ed; background: #fff; text-align: left; }.chat-composer-tools { display: inline-flex; align-items: center; gap: 10px; color: #4c6d9e; font-size: 22px; line-height: 1; }.chat-composer-tools span { display: grid; width: 20px; height: 26px; place-items: center; }.chat-input-placeholder { flex: 1; padding: 9px 13px; color: #98a7ba !important; border-radius: 999px; background: #f0f3f8; font-size: 13px !important; }.incident-chat-flow .chat-composer button { gap: 9px; padding: 10px 14px; color: #143824; border-radius: 999px; background: #9de56e; font-size: 13px; }.incident-chat-flow .chat-composer button:hover { background: #8bd55e; }.incident-chat-flow .chat-composer button:disabled { color: #496351; background: #d3e9c5; }
.browser-lab-cta { display: flex; justify-content: flex-end; margin-top: 14px; }.browser-lab-launch { display: inline-flex; align-items: center; gap: 10px; padding: 12px 17px; color: #143824; border: 0; border-radius: 999px; background: #9de56e; box-shadow: 0 7px 16px rgba(40, 92, 68, .14); font: 900 14px/1 inherit; cursor: pointer; }.browser-lab-launch:hover { background: #8bd55e; transform: translateY(-1px); }.browser-lab-launch:disabled { cursor: default; color: #496351; background: #d3e9c5; box-shadow: none; transform: none; }.browser-lab-launch b { font-size: 19px; line-height: .7; }.browser-lab-stage { margin-top: 28px; }.browser-lab-stage[hidden] { display: none; }.browser-lab-stage.is-open { animation: rise-in .45s ease-out both; }
.incident-chat-flow .chat-timeline { height: 440px; min-height: 440px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: rgba(39, 75, 128, .62) rgba(255,255,255,.18); scrollbar-width: thin; }.incident-chat-flow .chat-timeline:focus-visible { outline: 3px solid #d7e43a; outline-offset: -3px; }.incident-chat-flow .chat-timeline::-webkit-scrollbar { width: 10px; }.incident-chat-flow .chat-timeline::-webkit-scrollbar-thumb { border: 3px solid rgba(142,169,209,.9); border-radius: 999px; background: rgba(39,75,128,.65); }.chat-scroll-hint { position: sticky; z-index: 1; top: -12px; justify-self: center; margin: -8px 0 0; padding: 3px 8px; color: #45658e; border-radius: 999px; background: rgba(225,235,249,.88); font-size: 9px; font-weight: 800; }.incident-chat-flow .chat-message { animation-delay: var(--chat-delay, 0ms); }.incident-chat-flow .chat-message.outgoing { animation-delay: 360ms; }
.how-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: 40px; align-items: end; min-height: 340px; padding: 52px; color: var(--white); background: linear-gradient(115deg, #081a49 0%, #162d6d 58%, #b52420 140%); }
.how-hero-copy { max-width: 680px; animation: rise-in .48s ease-out both; }
.how-hero .eyebrow { color: #d7e43a; }
.how-hero h1 { margin: 0 0 12px; font-size: clamp(38px, 5vw, 64px); }
.how-hero p:not(.eyebrow) { max-width: 600px; margin: 0 0 24px; color: #eef2ff; font-size: 18px; }
.how-hero .btn { background: #d7e43a; color: #10204e; }
.how-hero-note { display: grid; gap: 8px; padding: 20px 0 20px 20px; border-left: 2px solid #d7e43a; color: #eef2ff; animation: rise-in .48s .11s ease-out both; }
.how-hero-note strong { color: #d7e43a; }
.how-workflow, .how-scoring, .how-principles, .how-rules { margin-top: 56px; }
.how-tools { margin-top: 56px; }
.how-tools .section-heading > p:last-child { margin: 10px 0 0; color: var(--muted); line-height: 1.7; }
.tool-guide-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.tool-guide { padding-top: 18px; border-top: 3px solid #cfd6e3; }
.tool-guide--browser { border-color: #4b2dd0; }.tool-guide--pcap { border-color: #2468b2; }.tool-guide--siem { border-color: #087d69; }
.tool-guide .eyebrow { margin-bottom: 8px; }.tool-guide--browser .eyebrow { color: #4b2dd0; }.tool-guide--pcap .eyebrow { color: #2468b2; }.tool-guide--siem .eyebrow { color: #087d69; }
.tool-guide h3 { margin: 0; color: var(--purple); font-size: 23px; }.tool-guide > p:not(.eyebrow) { margin: 9px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.tool-guide ol { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: tool-step; }.tool-guide li { position: relative; padding-left: 30px; color: #475467; font-size: 13px; line-height: 1.55; counter-increment: tool-step; }.tool-guide li::before { position: absolute; top: 0; left: 0; color: #344054; font: 800 11px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; content: "0" counter(tool-step); }
.how-tools-note { margin: 28px 0 0; padding: 14px 17px; color: #425466; border-left: 3px solid #d7e43a; background: #f5f9e7; font-size: 14px; line-height: 1.6; }
.section-heading { max-width: 720px; margin-bottom: 20px; }
.section-heading h2 { margin: 0; color: var(--purple); font-size: 30px; }
.how-workflow img { display: block; width: 100%; border: 1px solid #d0d5dd; border-radius: 14px; box-shadow: 0 12px 24px rgba(16, 24, 40, .09); animation: rise-in .5s .08s ease-out both; }
.principle-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 0; list-style: none; }
.principle-list li { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding-top: 18px; border-top: 2px solid #d0d5dd; }
.principle-list span { color: #b42318; font-size: 14px; font-weight: 800; letter-spacing: .06em; }
.principle-list strong { color: var(--purple); }
.principle-list p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.scoring-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.scoring-rule { padding: 22px 0 0; border-top: 2px solid #d0d5dd; }
.scoring-rule .eyebrow { margin-bottom: 8px; }
.scoring-rule h3 { max-width: 470px; margin: 0; color: var(--purple); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.22; }
.scoring-rule > p:not(.eyebrow) { max-width: 560px; margin: 12px 0 0; color: var(--muted); line-height: 1.68; }
.score-scale { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.score-scale li { display: grid; gap: 5px; padding: 10px 4px; border-bottom: 3px solid #253d92; text-align: center; }
.score-scale strong { color: var(--muted); font-size: 11px; white-space: nowrap; }
.score-scale span { color: var(--purple); font-size: 24px; font-weight: 850; line-height: 1; }
.first-blood-rule { border-color: #b52420; }
.first-blood-rule h3, .first-blood-rule .scoring-note strong { color: #a71d1a; }
.scoring-note { padding-left: 16px; border-left: 3px solid #d7e43a; font-size: 14px; }
.workshop-login-form { display: grid; gap: 12px; max-width: 440px; margin-top: 28px; }
.workshop-login-form label { display: grid; gap: 8px; color: var(--purple); font-weight: 750; }
.workshop-login-form input { padding: 13px 14px; border: 1px solid #a9b4c9; border-radius: 8px; font: inherit; }
.workshop-hero { border-left: 7px solid #d7e43a; }
.owasp-badge { color: #0f5132; background: #e7f7ed; }
.workshop-challenge-hero { padding: 30px; border-color: #4057e8; border-left-color: #7c4dff; background: linear-gradient(122deg, #111f4c 0%, #183774 54%, #28558d 100%); box-shadow: 0 16px 34px rgba(23, 45, 100, .14); }
.workshop-challenge-hero .badges { margin-bottom: 16px; }
.workshop-challenge-hero .badge { color: #eaf1ff; border-color: rgba(225, 235, 255, .45); background: rgba(8, 22, 58, .42); }
.workshop-challenge-hero .owasp-badge { color: #124b35; border-color: #9ae6ba; background: #e5f8ea; }
.workshop-challenge-hero h1 { max-width: 1000px; margin: 0; color: #fff; font-size: clamp(29px, 4vw, 44px); line-height: 1.2; letter-spacing: -.015em; }
.workshop-challenge-hero .workshop-challenge-name { margin: 9px 0 0; color: #c9d8fb; font-size: clamp(17px, 2vw, 21px); font-weight: 750; }
.workshop-challenge-hero .workshop-hero-summary { max-width: 900px; margin: 18px 0 0; color: #edf4ff; font-size: 16px; font-weight: 650; line-height: 1.65; }
.workshop-mission { max-width: 970px; margin-top: 19px; padding: 16px 18px; border: 1px solid rgba(211, 230, 255, .35); border-left: 4px solid #d7e43a; border-radius: 0 9px 9px 0; background: rgba(4, 16, 47, .34); }
.workshop-mission > span { display: block; color: #d7e43a; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.workshop-challenge-hero .workshop-mission p { max-width: none; margin: 7px 0 0; color: #f8fbff; font-size: 15px; line-height: 1.72; }
.workshop-storyline { margin-top: 32px; }
.workshop-solved-notice { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; border-left: 4px solid #12b76a; }.workshop-solved-notice > div { display: grid; gap: 2px; }.workshop-solved-notice strong { font-size: 15px; }.workshop-solved-notice span:last-child { font-size: 13px; }.workshop-solved-mark { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; color: #fff; border-radius: 50%; background: #12b76a; font-size: 18px; font-weight: 900; }
.workshop-browser-stage { margin-top: 28px; }
.workshop-browser-stage iframe { display: block; width: 100%; min-height: 470px; border: 0; background: #f7f9fc; }
.workshop-flag-reveal { display: grid; gap: 8px; margin-top: 22px; padding: 17px; border: 1px solid #9fdfbb; border-left: 4px solid #12b76a; background: #ecfdf3; }.workshop-flag-reveal .eyebrow { margin: 0; color: #087443; }.workshop-flag-reveal code { overflow-wrap: anywhere; padding: 11px 12px; color: #114c32; border: 1px dashed #66c78e; border-radius: 6px; background: #fff; font: 800 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }.workshop-flag-reveal p:last-child { margin: 0; color: #236143; font-size: 13px; line-height: 1.55; }
.workshop-walkthrough { margin-top: 28px; padding: 28px 30px; border: 1px solid #cfd9ec; border-left: 6px solid #3d5ed7; border-radius: 10px; background: linear-gradient(135deg, #f8faff, #eef4ff); box-shadow: 0 10px 24px rgba(27, 57, 121, .06); }.workshop-walkthrough .eyebrow { margin: 0 0 5px; color: #3557c8; }.workshop-walkthrough h2 { margin: 0; color: #182b5a; font-size: 24px; }.workshop-walkthrough ol { display: grid; gap: 12px; max-width: 900px; margin: 20px 0 0; padding: 0; list-style: none; counter-reset: workshop-step; }.workshop-walkthrough li { position: relative; min-height: 38px; padding: 9px 12px 9px 52px; color: #344665; border: 1px solid #d9e1f0; border-radius: 8px; background: #fff; line-height: 1.65; counter-increment: workshop-step; }.workshop-walkthrough li::before { position: absolute; top: 50%; left: 12px; display: grid; width: 27px; height: 27px; place-items: center; color: #fff; border-radius: 50%; background: #3d5ed7; content: counter(workshop-step); font: 900 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; transform: translateY(-50%); }.workshop-walkthrough-result { margin: 18px 0 0; padding: 12px 14px; color: #165b3a; border-left: 3px solid #12b76a; background: #eaf9f0; font-size: 14px; line-height: 1.6; }.workshop-walkthrough-result em { font-style: normal; font-weight: 900; }
.workshop-lab-page { --workshop-accent: #3759bd; --workshop-dark: #10204e; min-height: 100vh; margin: 0; background: #f1f5f9; color: #152452; font-family: Inter, Arial, sans-serif; }
.workshop-lab--benefits { --workshop-accent: #5b42b5; --workshop-dark: #261856; }.workshop-lab--diagnostic { --workshop-accent: #ad5d14; --workshop-dark: #4c280f; }.workshop-lab--supply { --workshop-accent: #176a9a; --workshop-dark: #123451; }.workshop-lab--transport { --workshop-accent: #0b827b; --workshop-dark: #103f4b; }.workshop-lab--search { --workshop-accent: #aa3a49; --workshop-dark: #512430; }.workshop-lab--approval { --workshop-accent: #6650c3; --workshop-dark: #2d225a; }.workshop-lab--recovery { --workshop-accent: #08765f; --workshop-dark: #123f39; }.workshop-lab--update { --workshop-accent: #437a27; --workshop-dark: #284a1d; }.workshop-lab--monitoring { --workshop-accent: #b65f16; --workshop-dark: #4d2910; }.workshop-lab--exception { --workshop-accent: #9c3359; --workshop-dark: #4a1e35; }
.workshop-lab-shell { max-width: 1040px; margin: 0 auto; padding: 24px; }
.workshop-service-header { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 19px 22px; color: #f8fafc; background: linear-gradient(115deg, var(--workshop-dark), color-mix(in srgb, var(--workshop-accent) 72%, #101828)); }.workshop-service-header div { display: grid; gap: 4px; }.workshop-service-header span { color: #d8e2f5; font-size: 10px; font-weight: 900; letter-spacing: .11em; }.workshop-service-header strong { font-size: clamp(18px, 2.6vw, 27px); }.workshop-service-header p { display: grid; gap: 3px; margin: 0; color: #fff; font: 800 13px ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; }.workshop-service-header small { color: #cfdbef; font: 600 10px Inter, Arial, sans-serif; }
.workshop-service-context { padding: 28px 30px 24px; color: #16244b; border-bottom: 1px solid #d4dce9; background: #fff; }.workshop-service-context .eyebrow { margin: 0 0 6px; color: var(--workshop-accent); }.workshop-service-context h1 { max-width: 760px; margin: 0; color: #172554; font-size: clamp(25px, 4vw, 42px); line-height: 1.14; }.workshop-service-context p:last-child { max-width: 700px; margin: 10px 0 0; color: #52627c; line-height: 1.65; }
.workshop-control-surface { display: grid; grid-template-columns: minmax(210px, .8fr) minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 21px 30px; border-bottom: 1px solid #cbd6e6; background: #edf2f9; }.workshop-control-copy { display: grid; gap: 4px; }.workshop-control-copy label { color: #22345f; font-size: 14px; font-weight: 900; }.workshop-control-copy span { color: #62718a; font-size: 11px; }.workshop-control-surface select, .workshop-token { min-width: 0; width: 100%; padding: 12px 13px; color: #172554; border: 1px solid #aebed7; border-radius: 7px; background: #fff; font: inherit; }.workshop-token { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }.workshop-control-surface > button, .workshop-choice-group--chips button { padding: 12px 15px; color: #fff; border: 0; border-radius: 7px; background: var(--workshop-accent); font: 800 13px/1 Inter, Arial, sans-serif; cursor: pointer; white-space: nowrap; }.workshop-control-surface > button:hover, .workshop-choice-group--chips button:hover { filter: brightness(.93); }.workshop-toggle { justify-self: start; display: inline-flex; align-items: center; cursor: pointer; }.workshop-toggle input { position: absolute; opacity: 0; }.workshop-toggle span { position: relative; width: 55px; height: 30px; border-radius: 999px; background: #aeb9cb; transition: background .16s ease; }.workshop-toggle span::after { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: #fff; content: ""; transition: transform .16s ease; }.workshop-toggle input:checked + span { background: var(--workshop-accent); }.workshop-toggle input:checked + span::after { transform: translateX(25px); }.workshop-control-clue { grid-column: 1 / -1; display: flex; gap: 10px; margin: 4px 0 0; padding: 13px 15px; border-left: 3px solid var(--workshop-accent); border-radius: 6px; background: #eef3fb; color: #2f4266; font-size: 13px; line-height: 1.6; }.workshop-control-clue span { color: var(--workshop-accent); font-weight: 900; }.workshop-control-clue p { margin: 0; }
.workshop-choice-group { display: flex; flex-wrap: wrap; gap: 8px; }.workshop-choice-group label { position: relative; cursor: pointer; }.workshop-choice-group input { position: absolute; opacity: 0; }.workshop-choice-group label span { display: block; padding: 11px 13px; color: #455574; border: 1px solid #b7c3d5; border-radius: 7px; background: #fff; font-size: 13px; }.workshop-choice-group input:checked + span { color: #fff; border-color: var(--workshop-accent); background: var(--workshop-accent); }.workshop-choice-group--chips button { color: #455574; border: 1px solid #b7c3d5; background: #fff; }.workshop-choice-group--chips button:last-child { color: #fff; border-color: var(--workshop-accent); background: var(--workshop-accent); }.workshop-range-control { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 12px; align-items: center; }.workshop-range-control input { width: 100%; accent-color: var(--workshop-accent); }.workshop-range-control output { display: grid; height: 34px; place-items: center; color: #fff; border-radius: 50%; background: var(--workshop-accent); font: 900 13px ui-monospace, SFMono-Regular, Menlo, monospace; }
.workshop-response { padding: 30px; background: #fff; }.workshop-response .eyebrow { margin: 0 0 7px; color: var(--workshop-accent); }.workshop-response h2 { margin: 0; color: #172554; font-size: clamp(24px, 3.4vw, 36px); line-height: 1.15; }.workshop-response > p:not(.eyebrow) { max-width: 760px; color: #52627c; line-height: 1.65; }.workshop-impact-metric { margin: 11px 0 19px; color: #19375b !important; font-size: 17px; font-weight: 800; }.workshop-impact-table { overflow-x: auto; border: 1px solid #d7e0ed; }.workshop-impact-table table { width: 100%; margin: 0; border-collapse: collapse; font-size: 13px; }.workshop-impact-table th { color: #52627c; background: #f5f8fc; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }.workshop-impact-table th, .workshop-impact-table td { padding: 11px 13px; border-bottom: 1px solid #e1e7f0; text-align: left; }.workshop-impact-table tbody tr:last-child td { border-bottom: 0; }.workshop-board-question { display: grid; gap: 5px; margin-top: 22px; padding: 15px 17px; border-left: 4px solid var(--workshop-accent); background: #f2f6fb; }.workshop-board-question span { color: var(--workshop-accent); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.workshop-board-question strong { color: #273b62; line-height: 1.5; }.workshop-response .notice { margin: 22px 0 0; }.workshop-feedback, .workshop-audit-clue { margin-top: 20px !important; padding: 13px 15px; border-left: 3px solid var(--workshop-accent); background: #f4f7fb; font-size: 14px; }.workshop-audit-clue { display: grid; gap: 5px; }.workshop-audit-clue code { color: #344767; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.admin-mode-picker { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: stretch; }
.admin-mode-picker label { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; padding: 14px; border: 1px solid #d0d5dd; border-radius: 8px; cursor: pointer; }
.admin-mode-picker label strong { grid-column: 2; color: var(--purple); }
.admin-mode-picker label span { grid-column: 2; margin-top: 4px; color: var(--muted); font-size: 13px; }
.admin-mode-picker button { align-self: center; }
.workshop-participant-list { display: grid; gap: 12px; }
.workshop-participant-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: start; padding: 14px 0; border-top: 1px solid #d0d5dd; }
.workshop-participant-row strong, .workshop-participant-row span { display: block; }
.workshop-participant-row span { margin-top: 4px; color: var(--muted); font-size: 13px; }
.podium-avatar, .team-avatar { display: inline-grid; place-items: center; color: #d7e43a; font-size: 34px; }
.team-avatar { margin-right: 10px; font-size: 18px; }
.rule-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin: 0; padding: 0; list-style: none; }
.rule-list li { position: relative; padding: 16px 0 16px 24px; border-top: 1px solid #d0d5dd; color: var(--muted); line-height: 1.55; }
.rule-list li::before { position: absolute; left: 0; color: #b42318; content: "•"; font-size: 22px; line-height: .9; }
.admin-login { max-width: 560px; margin: 72px auto; padding: 36px; border-left: 5px solid var(--violet); background: #f8f7ff; }
.admin-login h1, .admin-heading h1 { margin: 0; color: var(--purple); font-size: 34px; }
.admin-login > p:not(.eyebrow) { color: var(--muted); }
.admin-heading, .admin-section-title { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.admin-heading { margin-bottom: 36px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.admin-heading p { margin: 6px 0 0; color: var(--muted); }
.admin-section { margin: 34px 0; padding: 28px 0; border-top: 1px solid var(--line); }
.admin-section .section-heading { margin-bottom: 18px; }
.admin-schedule { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto; gap: 16px; align-items: end; }
.admin-schedule label { display: grid; gap: 7px; }
.bulk-challenge-actions { display: grid; gap: 14px; margin-top: 18px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.bulk-challenge-toolbar, .bulk-challenge-execution, .bulk-selection-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }.bulk-challenge-toolbar { justify-content: space-between; }.bulk-challenge-toolbar > div:first-child { display: grid; gap: 2px; }.bulk-challenge-toolbar strong { color: var(--purple); }.bulk-challenge-toolbar span { color: var(--muted); font-size: 13px; }.bulk-selection-actions .btn, .bulk-challenge-execution > button { padding: 8px 11px; font-size: 13px; }.bulk-challenge-execution { align-items: start; }.bulk-reset-confirm { position: relative; }.bulk-reset-confirm summary { cursor: pointer; color: #b42318; font-size: 13px; font-weight: 800; }.bulk-reset-confirm[open] { z-index: 2; width: min(420px, 100%); padding: 12px; border: 1px solid #f6c9c7; background: #fffafa; box-shadow: 0 12px 28px rgba(180, 35, 24, .12); }.bulk-reset-confirm label { display: grid; gap: 5px; margin: 10px 0; color: #7a271a; font-size: 12px; font-weight: 800; }.bulk-reset-confirm code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #912018; }.bulk-reset-confirm small { display: block; margin-top: 10px; color: #7a271a; font-size: 11px; line-height: 1.45; }
.release-list { display: grid; margin-top: 20px; border-top: 1px solid var(--line); }
.release-row { display: grid; grid-template-columns: 28px 66px 1fr auto; gap: 16px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); }.release-select { display: grid; place-items: center; margin: 0; }.release-select input { width: 18px; height: 18px; margin: 0; accent-color: var(--violet); }.release-summary { display: grid; gap: 2px; }
.release-row span { color: var(--muted); font-size: 13px; }
.release-row.released { background: linear-gradient(90deg, #effcf6, transparent 70%); }
.release-id { display: inline-grid; width: 48px; height: 48px; place-items: center; border: 1px solid #b8a7f5; border-radius: 50%; color: var(--purple); font-weight: 800; }
.release-action { display: flex; align-items: center; justify-content: end; gap: 12px; }
.release-action form { margin: 0; }
.release-state { color: var(--green) !important; font-weight: 800; }
.admin-confirm { position: relative; }.admin-confirm summary { cursor: pointer; color: #b42318; font-size: 13px; font-weight: 800; }.admin-confirm[open] { z-index: 2; width: min(360px, 100%); padding: 12px; border: 1px solid #f6c9c7; background: #fffafa; box-shadow: 0 12px 28px rgba(180, 35, 24, .12); }.admin-confirm form { display: grid; gap: 9px; margin-top: 10px; }.admin-confirm label, .competition-reset-form label { display: grid; gap: 5px; color: #7a271a; font-size: 12px; font-weight: 800; }.admin-confirm input, .competition-reset-form input { min-width: 0; }.admin-confirm code, .competition-reset-form code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #912018; }.admin-confirm small { display: block; margin-top: 10px; color: #7a271a; font-size: 11px; line-height: 1.45; }.danger-zone { border-top-color: #fda29b; }.danger-zone .section-heading .eyebrow { color: #b42318; }.danger-zone > p { max-width: 760px; color: #7a271a; }.competition-reset-form { display: grid; grid-template-columns: minmax(260px, 420px) auto; gap: 14px; align-items: end; margin-top: 18px; }.btn.danger, .danger { color: #fff; border-color: #b42318; background: #b42318; }.btn.danger:hover, .danger:hover { border-color: #912018; background: #912018; }.btn.danger-subtle { color: #b42318; border-color: #fda29b; background: #fff; }.btn.danger-subtle:hover { background: #fff0f0; }
.status-chip { display: inline-block; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.status-chip.setup { color: #6941c6; background: #f4f3ff; }.status-chip.upcoming { color: #b54708; background: #fffaeb; }.status-chip.live { color: #067647; background: #ecfdf3; }.status-chip.ended { color: #b42318; background: #fef3f2; }
.scoreboard-page { min-height: 100vh; color: #ecf1ff; background: radial-gradient(circle at 50% -20%, #273d90 0, #101b50 36%, #070d2b 76%); }
.scoreboard-shell { width: min(1800px, 100%); min-height: 100vh; margin: 0 auto; padding: clamp(20px, 2vw, 40px); }
.scoreboard-header { display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center; padding-bottom: 22px; border-bottom: 1px solid rgba(236, 241, 255, .22); background: transparent; position: static; }
.scoreboard-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.scoreboard-title { text-align: center; }.scoreboard-title p { margin: 0; color: #d7e43a; font-size: clamp(10px, 1vw, 14px); font-weight: 900; letter-spacing: .18em; }.scoreboard-title h1 { margin: 3px 0 0; color: #fff; font-size: clamp(26px, 3vw, 52px); letter-spacing: .04em; }
.countdown-panel { display: grid; justify-items: end; gap: 4px; text-align: right; }.countdown-panel strong { color: #fff; font: 800 clamp(28px, 3.3vw, 56px)/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }.countdown-panel small { color: #c6cfec; font-size: 10px; letter-spacing: .08em; }
.scoreboard-page .status-chip.live { color: #073c26; background: #d7e43a; }.scoreboard-page .status-chip.setup { color: #2f2672; background: #c9bdff; }.scoreboard-page .status-chip.upcoming { color: #5c2700; background: #fedf89; }.scoreboard-page .status-chip.ended { color: #fff; background: #b42318; }
.podium-section { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.6vw, 42px); align-items: end; max-width: 1250px; margin: clamp(30px, 5vh, 74px) auto 48px; }
.podium-entry { position: relative; display: grid; justify-items: center; align-content: end; min-height: 265px; padding: 20px 18px 0; text-align: center; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.28); border-bottom: 0; clip-path: polygon(0 12px, 12px 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.podium-entry img { width: clamp(72px, 8vw, 126px); height: clamp(72px, 8vw, 126px); object-fit: contain; filter: drop-shadow(0 8px 8px rgba(0,0,0,.28)); }.podium-team-link { display: grid; justify-items: center; color: inherit; text-decoration: none; }.podium-team-link:focus-visible { outline: 3px solid #4263c7; outline-offset: 8px; }.podium-entry p { margin: 12px 0 3px; font-size: clamp(16px, 1.7vw, 24px); font-weight: 900; letter-spacing: .05em; }.podium-entry strong { color: #fff; font-size: clamp(22px, 3vw, 42px); }.podium-entry strong small { color: #c6cfec; font-size: .36em; }.podium-entry em { margin: 8px 0 12px; color: #c6cfec; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .15em; }.podium-rank { display: grid; width: 86px; height: 86px; place-items: center; color: #101828; font-size: 48px; font-weight: 900; transform: translateY(30px); }
.rank-one { order: 2; min-height: 365px; border-color: #ffe18a; background: linear-gradient(180deg, rgba(241,185,0,.35), rgba(241,185,0,.09)); }.rank-one .podium-rank { background: linear-gradient(135deg, #fff4a7, #e5a800); }.rank-two { order: 1; min-height: 290px; border-color: #cbd5e1; }.rank-two .podium-rank { background: linear-gradient(135deg, #f6f8fb, #a9b6c8); }.rank-three { order: 3; min-height: 260px; border-color: #db9864; }.rank-three .podium-rank { background: linear-gradient(135deg, #f6c299, #a9512b); }.crown { position: absolute; top: -52px; color: #ffe475; font-size: 66px; line-height: 1; filter: drop-shadow(0 0 10px rgba(255,222,90,.65)); }.podium-empty { align-self: center; color: #c6cfec; }
.scoreboard-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr); gap: 24px; align-items: start; }.standings-panel, .activity-panel { min-height: 330px; padding: 22px; background: rgba(5, 12, 42, .55); border: 1px solid rgba(236,241,255,.22); backdrop-filter: blur(12px); }.panel-heading { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(236,241,255,.17); }.panel-heading .eyebrow { color: #d7e43a; }.panel-heading h2 { margin: 0; color: #fff; font-size: 24px; }.panel-heading > span { color: #b9c5ea; font-size: 12px; }.live-dot { color: #d7e43a !important; font-weight: 900; letter-spacing: .1em; }.live-dot::before { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #d7e43a; content: ""; box-shadow: 0 0 9px #d7e43a; animation: live-pulse 1.5s infinite; }
.projector-table { margin: 14px 0 0; color: #edf1ff; }.projector-table th { background: transparent; color: #b9c5ea; border: 0; border-bottom: 1px solid rgba(236,241,255,.14); font-size: 11px; letter-spacing: .09em; }.projector-table td { border: 0; border-bottom: 1px solid rgba(236,241,255,.12); padding: 10px; }.projector-table tbody tr { background: transparent; }.projector-table tbody tr:hover { background: rgba(215,228,58,.08); }.rank-cell { color: #d7e43a; font-weight: 900; }.score-cell { color: #fff; font-weight: 900; font-size: 18px; }.team-link { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; text-decoration: none; }.team-link img { width: 28px; height: 28px; object-fit: contain; }.row-arrow { color: #d7e43a; text-decoration: none; font-size: 22px; }
.activity-list { display: grid; gap: 0; padding: 0; margin: 12px 0 0; list-style: none; }.activity-list li { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(236,241,255,.12); color: #dce4ff; font-size: 14px; }.activity-list time { color: #d7e43a; font-weight: 800; font-variant-numeric: tabular-nums; }.activity-list b, .activity-list strong { color: #fff; }.activity-first-blood, .activity-solved, .activity-working { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; font-size: 10px; font-weight: 900; letter-spacing: .07em; }.activity-first-blood { color: #ffd3d6; }.activity-first-blood img { width: 22px; height: 22px; object-fit: contain; }.activity-solved { color: #a6f4c5; }.activity-working { color: #b9c5ea; }.activity-empty { display: block !important; color: #b9c5ea; }
.team-score-header { display: grid; grid-template-columns: auto 130px minmax(220px, 1fr) auto; gap: 24px; align-items: center; margin-bottom: 34px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }.team-score-header img { width: 120px; height: 120px; object-fit: contain; }.team-score-header h1 { margin: 0; color: var(--purple); }.team-score-header p { margin: 5px 0; color: var(--muted); }.team-score-stats { display: grid; grid-template-columns: repeat(3, minmax(70px, 1fr)); gap: 16px; margin: 0; }.team-score-stats div { display: grid; gap: 2px; padding-left: 14px; border-left: 2px solid #d8e1ef; }.team-score-stats dt { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; }.team-score-stats dd { margin: 0; color: #172554; font-size: 26px; font-weight: 900; line-height: 1; }.team-score-stats dd small { color: #667085; font-size: 10px; }.team-score-stats .first-blood-total { border-color: #dd2e44; }.team-score-stats .first-blood-total dd { color: #b42318; }
.team-profile-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr); gap: 32px; align-items: start; }.solve-timeline { padding: 0 0 0 20px; }.profile-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding-bottom: 15px; border-bottom: 2px solid #d8e1ef; }.profile-section-heading .eyebrow, .profile-panel .eyebrow { margin: 0 0 3px; color: #b42318; }.profile-section-heading h2, .profile-panel h2 { margin: 0; color: #172554; }.profile-section-heading > span { color: #b42318; font-size: 12px; font-weight: 900; }.solve-list { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; }.solve-entry { position: relative; display: grid; grid-template-columns: 58px 14px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 82px; padding: 16px 0; border-bottom: 1px solid #e6ebf2; }.solve-entry::before { position: absolute; top: 0; bottom: 0; left: 64px; width: 2px; background: #d8e1ef; content: ""; }.solve-entry:first-child::before { top: 50%; }.solve-entry:last-child::before { bottom: 50%; }.solve-entry time { position: relative; z-index: 1; color: #475467; font: 900 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }.solve-marker { position: relative; z-index: 1; width: 12px; height: 12px; border: 3px solid #fff; border-radius: 50%; background: #4263c7; box-shadow: 0 0 0 2px #a9b9e2; }.solve-detail p { margin: 0; color: #172554; font-size: 16px; }.solve-detail p strong { color: #334fb2; }.solve-detail small { color: #667085; font-size: 12px; }.solve-award { display: grid; justify-items: end; gap: 6px; color: #172554; text-align: right; }.solve-award > strong { font-size: 19px; }.solve-award > strong small { color: #667085; font-size: 10px; }.solve-entry.first-blood { margin: 0 -12px; padding: 16px 12px; border-bottom-color: #f6cbce; background: linear-gradient(90deg, #fff6f6, transparent); }.solve-entry.first-blood .solve-marker { background: #d92d20; box-shadow: 0 0 0 2px #f3a8ad; }.first-blood-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 4px; color: #a91c25; border-radius: 999px; background: #fff0f1; font-size: 10px; font-weight: 900; letter-spacing: .06em; }.first-blood-badge img { width: 25px; height: 25px; object-fit: contain; }.solve-empty { padding: 26px 0; color: #667085; }.team-profile-side { display: grid; gap: 16px; }.profile-panel { padding: 20px; border-top: 2px solid #d8e1ef; background: #f8faff; }.profile-panel p:not(.eyebrow) { margin: 8px 0 0; color: #475467; font-size: 14px; }.remaining-challenge-list { display: grid; gap: 0; padding: 0; margin: 12px 0 0; list-style: none; }.remaining-challenge-list li { display: grid; grid-template-columns: 45px 1fr; gap: 10px; padding: 10px 0; color: #475467; border-bottom: 1px solid #d8e1ef; font-size: 13px; }.remaining-challenge-list strong { color: #334fb2; }
.player-countdown { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: -8px 0 28px; padding: 18px 22px; color: #172554; border-left: 5px solid #1d4ed8; background: #eef6ff; }.player-countdown p { margin: 0 0 3px; font-size: 13px; font-weight: 800; }.player-countdown strong { display: block; color: #172554; font: 900 clamp(28px, 4vw, 46px)/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }.player-countdown > span { max-width: 300px; color: #475467; font-size: 14px; text-align: right; }.player-countdown.live { border-color: #067647; background: #ecfdf3; }
.player-countdown.ended { border-color: #b42318; background: #fef3f2; }.player-countdown.ended strong { color: #b42318; }
.player-profile-hero { margin-bottom: 20px; }.profile-preferences { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr); gap: 28px; align-items: center; padding: 28px; border: 1px solid var(--line); border-left: 5px solid #4f2bd9; background: #fff; box-shadow: 0 12px 32px rgba(17, 24, 39, .06); }.profile-preferences h2 { margin: 2px 0 8px; color: #20135b; }.profile-preferences p:last-child { max-width: 650px; margin-bottom: 0; color: var(--muted); }.preference-form { display: grid; gap: 16px; justify-items: start; }.team-alert-preferences .preference-form { margin-top: 16px; }.toggle-field { display: inline-flex; align-items: center; gap: 10px; color: #172554; font-weight: 800; cursor: pointer; }.toggle-field input { width: 18px; height: 18px; accent-color: #4f2bd9; }
.first-blood-modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(11, 20, 55, .7); backdrop-filter: blur(5px); }.first-blood-modal[hidden] { display: none; }.first-blood-dialog { width: min(500px, 100%); padding: 30px; overflow: hidden; text-align: center; border: 3px solid #f2bb3c; border-radius: 26px; background: radial-gradient(circle at 50% -20%, #fff5be 0, #fff 46%, #f5f3ff 100%); box-shadow: 0 24px 80px rgba(8, 15, 47, .45); animation: first-blood-pop .28s ease-out; }.first-blood-art { width: 112px; height: 112px; margin: -8px auto 0; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(166, 78, 10, .25)); }.first-blood-dialog .eyebrow { margin: 2px 0 0; color: #a65a00; }.first-blood-dialog h2 { margin: 2px 0 10px; color: #9f210d; font-size: clamp(34px, 7vw, 52px); letter-spacing: .06em; }.first-blood-dialog p:not(.eyebrow) { margin: 0; color: #172554; font-size: 19px; line-height: 1.55; }.first-blood-dialog small { display: block; margin-top: 8px; color: #667085; }.first-blood-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 26px; }.first-blood-actions .btn { min-width: 150px; }.first-blood-actions .secondary { background: #fff; }
@keyframes first-blood-pop { from { transform: translateY(16px) scale(.94); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
/* Projector wall: a light neutral surface lets the supplied team logos' white artboards disappear. */
.scoreboard-page { color: #172554; background: #f4f7fb; }.scoreboard-shell { width: min(1800px, 100%); }.scoreboard-header { padding: 16px 18px 22px; border-bottom: 2px solid #d8e1ef; background: #fff; }.scoreboard-brand .brand-sth-frame { width: 108px; height: 56px; }.scoreboard-brand .brand-ciso { width: 70px; height: 70px; }.scoreboard-title p { color: #364152; }.scoreboard-title h1 { color: #172554; }.countdown-panel strong { color: #172554; }.countdown-panel small { color: #667085; }.scoreboard-page .status-chip.live { color: #065f46; background: #d1fadf; }.scoreboard-page .status-chip.setup { color: #344054; background: #eaecf0; }.scoreboard-page .status-chip.upcoming { color: #9a3412; background: #ffead5; }.scoreboard-page .status-chip.ended { color: #fff; background: #b42318; }
.podium-section { margin-bottom: 32px; }.podium-entry { min-height: 250px; background: #fff; border: 1px solid #d8e1ef; border-bottom: 4px solid #94a3b8; clip-path: none; box-shadow: 0 10px 28px rgba(35, 72, 179, .08); }.podium-entry img { background: #fff; filter: none; mix-blend-mode: multiply; }.podium-entry p { color: #172554; }.podium-entry strong { color: #172554; }.podium-entry strong small, .podium-entry em { color: #667085; }.rank-one { min-height: 340px; border-color: #e6b900; border-bottom-color: #d4a900; background: linear-gradient(180deg, #fffdf4, #fff); }.rank-two { min-height: 280px; border-bottom-color: #98a2b3; }.rank-three { min-height: 250px; border-bottom-color: #b56735; }.rank-one .podium-rank { background: linear-gradient(135deg, #ffe99a, #eab308); }.rank-two .podium-rank { background: linear-gradient(135deg, #f2f4f7, #a4b1c1); }.rank-three .podium-rank { background: linear-gradient(135deg, #f4c7aa, #b65e35); }.crown { color: #d4a900; filter: none; }
.standings-panel, .activity-panel { background: #fff; border: 1px solid #d8e1ef; box-shadow: 0 8px 24px rgba(35, 72, 179, .06); backdrop-filter: none; }.panel-heading { border-bottom-color: #d8e1ef; }.panel-heading .eyebrow { color: #3b5ccc; }.panel-heading h2 { color: #172554; }.panel-heading > span { color: #667085; }.live-dot { color: #067647 !important; }.live-dot::before { background: #12b76a; box-shadow: 0 0 9px #6ce9a6; }.projector-table { color: #344054; }.projector-table th { color: #667085; border-bottom-color: #d8e1ef; }.projector-table td { border-bottom-color: #eaecf0; }.projector-table tbody tr:hover { background: #f5f8ff; }.rank-cell { color: #2543a5; }.score-cell { color: #172554; }.team-link { color: #172554; }.team-link img { background: #fff; mix-blend-mode: multiply; }.row-arrow { color: #2543a5; }.activity-list li { border-bottom-color: #eaecf0; color: #475467; }.activity-list li.activity-first_blood { background: linear-gradient(90deg, #fff3f3, transparent); }.activity-list li.activity-working { opacity: .76; }.activity-list time { color: #2543a5; }.activity-list b, .activity-list strong { color: #172554; }.activity-first-blood { color: #b42318; }.activity-solved { color: #067647; }.activity-working { color: #667085; }.activity-empty { color: #667085; }
@keyframes live-pulse { 50% { opacity: .35; transform: scale(.72); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes chat-rise { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .how-hero-copy, .how-hero-note, .how-workflow img, .chat-message, .chat-mission, .browser-lab-stage.is-open, .chat-live i { animation: none; } }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.browser-simulator { overflow: hidden; border: 1px solid #98a2b3; border-radius: 14px; background: #e4e7ec; box-shadow: 0 12px 28px rgba(16, 24, 40, .10); }
.browser-chrome { padding: 10px 12px 12px; background: #f2f4f7; border-bottom: 1px solid #d0d5dd; }
.browser-tab { display: inline-flex; align-items: center; gap: 7px; min-width: 220px; margin: 0 0 10px 4px; padding: 6px 11px; border-radius: 8px 8px 0 0; background: var(--white); color: var(--ink); font-size: 13px; font-weight: 700; }
.browser-tab-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.browser-toolbar { display: flex; align-items: center; gap: 7px; }
.browser-control { flex: 0 0 auto; padding: 6px 9px; border: 1px solid #d0d5dd; border-radius: 7px; background: var(--white); color: var(--ink); font-size: 17px; line-height: 1; }
.browser-address-form { display: flex; flex: 1; align-items: center; gap: 7px; min-width: 0; padding: 4px 5px 4px 11px; border: 1px solid #b2b5bd; border-radius: 999px; background: var(--white); }
.browser-address-form > span { color: var(--muted); }
.browser-address { min-width: 0; flex: 1; padding: 2px 0; border: 0; border-radius: 0; outline: 0; }
.browser-address-form button { padding: 6px 13px; border-radius: 999px; }
.browser-viewport { display: block; width: 100%; height: min(720px, 70vh); border: 0; background: var(--white); }
.browser-web-surface { background: var(--white); }
.browser-devtools-guide { position: relative; margin: 0; border-top: 8px solid #e4e7ec; background: #101828; color: #eaf0fb; }
.browser-devtools-heading { position: static; display: flex; align-items: end; justify-content: space-between; gap: 28px; padding: 20px 22px 15px; border: 0; background: #101828; }
.browser-devtools-heading .eyebrow { margin: 0; color: #9db5ff; font-size: 10px; letter-spacing: .12em; }
.browser-devtools-heading h3 { margin: 4px 0 0; color: #fff; font-size: 20px; }
.browser-devtools-heading > p { max-width: 390px; margin: 0; color: #b7c4db; font-size: 12px; text-align: right; }
.browser-devtools-tabs { display: flex; gap: 1px; padding: 0 16px; overflow-x: auto; border-bottom: 1px solid #344054; background: #182230; }
.browser-devtools-tabs button { flex: 0 0 auto; padding: 11px 14px 10px; color: #b7c4db; border: 0; border-bottom: 3px solid transparent; background: transparent; font: 800 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; }
.browser-devtools-tabs button:hover { color: #fff; background: #1f2937; }
.browser-devtools-tabs button[aria-selected="true"] { color: #fff; border-bottom-color: #9db5ff; background: #202b3b; }
.browser-devtools-tabs button:focus-visible { position: relative; z-index: 1; outline: 2px solid #d7e43a; outline-offset: -2px; }
.browser-devtools-panel { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 13px; align-items: start; min-height: 102px; padding: 18px 22px 21px; background: #101828; }
.browser-devtools-panel[hidden] { display: none; }
.forensic-source-label { display: inline-flex; align-items: center; min-height: 31px; padding: 0 10px; color: #b9f2df; border: 1px solid #3d8e7b; border-radius: 999px; background: rgba(7, 80, 69, .35); font: 800 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; white-space: nowrap; }
.forensic-workstation--log { border-color: #2c7c73; background: #071f24; box-shadow: 0 16px 38px rgba(6, 75, 70, .17); }.forensic-workstation--log .forensic-toolbar { border-bottom-color: #255d5a; background: #0b2d34; }.forensic-workstation--log .forensic-search input { color: #e3fff7; border-color: #3d7774; background: #103940; }.forensic-workstation--log .forensic-search input::placeholder { color: #a4c8c2; }.forensic-workstation--log .forensic-search input:focus { border-color: #6fdfc0; box-shadow: 0 0 0 3px rgba(77, 199, 166, .2); }.forensic-workstation--log .forensic-browser-list { border-right-color: #255d5a; background: #09262c; }.forensic-workstation--log .forensic-list-heading { color: #a9efe0; }.forensic-workstation--log .forensic-evidence-row { border-bottom-color: #1c5553; }.forensic-workstation--log .forensic-evidence-row:hover, .forensic-workstation--log .forensic-evidence-row.is-active { background: #10434a; }.forensic-workstation--log .forensic-evidence-row.is-active { box-shadow: inset 3px 0 #69d4b7; }.forensic-workstation--log .forensic-protocol.protocol-log { color: #b9f2df; border-color: #3d8e7b; background: #0b3c3d; }.forensic-workstation--log .forensic-inspector { background: #f4fbf8; }.forensic-workstation--log .forensic-inspector .eyebrow { color: #087d69; }.forensic-workstation--log .forensic-inspector-title { color: #123f3a; }.forensic-workstation--log .forensic-detail-field { border-bottom-color: #d6eae4; }
.browser-devtools-icon { display: grid; width: 33px; height: 33px; place-items: center; color: #d7e43a; border: 1px solid #526073; border-radius: 6px; background: #17202f; font: 800 15px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.browser-devtools-panel strong { display: block; color: #fff; font-size: 14px; }
.browser-devtools-panel p { max-width: 790px; margin: 4px 0 0; color: #c8d4e5; font-size: 13px; line-height: 1.6; }
.browser-devtools-panel .browser-devtools-focus { margin-top: 11px; padding: 9px 11px; color: #dce9ff; border-left: 2px solid #d7e43a; background: rgba(102, 126, 170, .14); font-size: 12px; }.browser-devtools-focus span { display: block; margin-bottom: 3px; color: #d7e43a; font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.browser-devtools-panel kbd { display: inline-block; padding: 1px 5px; color: #f8fafc; border: 1px solid #68758a; border-radius: 4px; background: #273244; font: 700 11px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
.forensic-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .55fr); gap: 36px; align-items: end; margin-bottom: 18px; padding: 22px 0; border-bottom: 1px solid #cfd8e6; }.forensic-intro h2 { margin: 2px 0 6px; color: #172554; font-size: clamp(24px, 4vw, 38px); letter-spacing: .04em; }.forensic-intro p { margin: 0; color: #475467; }.forensic-intro-note { padding-left: 18px; border-left: 3px solid #4b2dd0; font-size: 14px; }
.forensic-workstation { overflow: hidden; border: 1px solid #9aa9c2; border-radius: 12px; background: #0b1738; box-shadow: 0 16px 38px rgba(21, 37, 77, .16); }.forensic-toolbar { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-bottom: 1px solid #334771; background: #101f49; }.forensic-search { flex: 1; }.forensic-search input { width: 100%; padding: 10px 13px; color: #eaf1ff; border: 1px solid #61739d; border-radius: 6px; outline: 0; background: #172b5b; font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; }.forensic-search input::placeholder { color: #aab9d4; }.forensic-search input:focus { border-color: #9db5ff; box-shadow: 0 0 0 3px rgba(137, 169, 255, .22); }.forensic-protocol-filter { display: grid; gap: 2px; color: #aebcda; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.forensic-protocol-filter select { min-width: 100px; padding: 5px 7px; color: #eaf1ff; border: 1px solid #61739d; border-radius: 4px; background: #172b5b; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }.forensic-protocol-filter select:disabled { opacity: .5; }.forensic-clear-stream, .forensic-follow-stream { padding: 7px 9px; color: #dbe6ff; border: 1px solid #61739d; border-radius: 5px; background: #172b5b; font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; }.forensic-clear-stream:hover, .forensic-follow-stream:hover { border-color: #b1c8ff; background: #213c78; }.forensic-follow-stream { margin-top: 16px; color: #24499c; border-color: #a9bce8; background: #eef4ff; }.forensic-result-count { flex: 0 0 auto; color: #c8d6f4; font: 700 12px ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.forensic-viewer-grid { display: grid; grid-template-columns: minmax(330px, .9fr) minmax(0, 1.5fr); min-height: 510px; }.forensic-browser-list { overflow: auto; max-height: 680px; border-right: 1px solid #334771; background: #0d1b40; }.forensic-list-heading { margin: 0; padding: 11px 14px 7px; color: #8fa6de; font-size: 10px; font-weight: 900; letter-spacing: .13em; }.forensic-evidence-row, .forensic-file-button { display: grid; width: 100%; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 10px 12px; color: #e6efff; border: 0; border-top: 1px solid rgba(143, 166, 222, .18); background: transparent; font: inherit; text-align: left; cursor: pointer; }.forensic-evidence-row:hover, .forensic-evidence-row.is-active, .forensic-file-button:hover, .forensic-file-button.is-active { background: #1c3774; }.forensic-evidence-row:focus-visible, .forensic-file-button:focus-visible { position: relative; z-index: 1; outline: 2px solid #b1c8ff; outline-offset: -2px; }.forensic-row-index { color: #96a9d8; font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; }.forensic-row-copy { display: grid; min-width: 0; gap: 2px; }.forensic-row-copy strong { overflow: hidden; color: #f5f8ff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.forensic-row-copy small { overflow: hidden; color: #aebcda; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.forensic-protocol { padding: 2px 5px; color: #d5def4; border: 1px solid #4c6394; border-radius: 4px; font: 800 9px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }.protocol-http { color: #c2f7dd; border-color: #348b6a; }.protocol-dns { color: #f8df9b; border-color: #9c7923; }.protocol-log { color: #d6c5ff; border-color: #7359b4; }.forensic-file-button { grid-template-columns: minmax(0, 1fr); gap: 2px; padding-left: 16px; }.forensic-file-button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }.forensic-file-button small, .forensic-list-empty { color: #aebcda; font-size: 11px; }.forensic-list-empty { padding: 12px 14px; }
.forensic-inspector { overflow: auto; max-height: 680px; padding: 24px; background: #f7f9fe; }.forensic-empty-state { margin: 80px auto; color: #667085; text-align: center; }.forensic-inspector .eyebrow { margin: 0; color: #3456b9; }.forensic-inspector-title { margin: 3px 0 2px; color: #172554; font-size: 24px; }.forensic-inspector-file { margin: 0 0 20px; color: #667085; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }.forensic-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }.forensic-detail-field { min-width: 0; padding: 10px 12px; border: 1px solid #d5ddeb; border-radius: 7px; background: #fff; }.forensic-detail-field dt { margin-bottom: 5px; color: #667085; font-size: 10px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }.forensic-detail-field dd { min-width: 0; margin: 0; color: #172554; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }.forensic-value-empty { color: #98a2b3; }.forensic-object { max-height: 270px; margin: 0; overflow: auto; white-space: pre-wrap; word-break: break-word; }.forensic-answer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .5fr); gap: 22px; margin-top: 24px; align-items: start; }.forensic-answer-card { margin: 0; }.forensic-guidance { padding: 20px; border-top: 3px solid #4b2dd0; background: #f5f3ff; }.forensic-guidance .eyebrow { color: #4b2dd0; }.forensic-guidance strong { color: #20135b; font-size: 19px; }.forensic-guidance p:not(.eyebrow) { color: #475467; font-size: 14px; }
.forensic-noscript { margin-top: 18px; padding: 18px; color: #172554; border: 1px solid #c8d5ed; border-radius: 12px; background: #f7f9fe; }.forensic-noscript h2 { margin: 0 0 6px; font-size: 18px; }.forensic-noscript p { margin: 0 0 12px; color: #475467; }.forensic-noscript details { margin-top: 8px; padding: 10px 12px; border: 1px solid #d5ddeb; border-radius: 7px; background: #fff; }.forensic-noscript summary { cursor: pointer; font: 700 12px ui-monospace, SFMono-Regular, Menlo, monospace; }.forensic-noscript pre { max-height: 340px; margin: 12px 0 0; overflow: auto; white-space: pre-wrap; word-break: break-word; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
.lab-body { background: #f8f9fc; }
.lab-main { max-width: none; min-height: 100vh; padding: 20px; }
.lab-main > .gov-app, .lab-main > .legacy-app { min-height: calc(100vh - 40px); }
.gov-app header, .legacy-app header { position: static; }
/* Browser Lab products: each service gets its own government product language, not a shared card skin. */
.gov-app, .legacy-app { overflow: hidden; min-height: 660px; font-family: Inter, "Noto Sans Thai", Arial, sans-serif; }
.gov-app h1, .gov-app h2, .legacy-app h1, .legacy-app h2 { margin: 0; color: inherit; }.gov-app button, .legacy-app button { font-family: inherit; }.portal-kicker { margin: 0 0 6px; font-size: 10px; font-weight: 850; letter-spacing: .13em; }
/* W01 — Risk Governance Office */
.risk-portal { color: #17263f; background: #f3f6fb; }.gov-masthead { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 76px; padding: 13px clamp(22px, 4vw, 54px); color: #fff; background: #152b55; }.gov-lockup { display: flex; align-items: center; gap: 12px; }.agency-mark { display: grid; width: 42px; height: 42px; place-items: center; color: #152b55; border-radius: 50%; background: #e5c15a; font-size: 15px; font-weight: 900; }.gov-lockup b, .gov-lockup small { display: block; }.gov-lockup b { font-size: 16px; }.gov-lockup small { color: #b9c7dd; font-size: 9px; letter-spacing: .09em; }.env-badge { padding: 5px 9px; color: #f8e5a2; border: 1px solid #8d9ebc; border-radius: 4px; font: 800 10px ui-monospace, monospace; letter-spacing: .08em; }.gov-nav { display: flex; gap: clamp(14px, 3vw, 33px); padding: 11px clamp(22px, 4vw, 54px); border-bottom: 1px solid #dbe2ef; background: #fff; color: #65738b; font-size: 12px; }.gov-nav strong { color: #0d4a7e; }.risk-workspace { max-width: 1180px; margin: 0 auto; padding: 29px clamp(22px, 4vw, 54px) 54px; }.portal-breadcrumb, .soc-breadcrumb, .recovery-crumb, .legacy-crumb { color: #6c7d97; font-size: 11px; }.risk-title-row, .registry-toolbar, .claims-page-heading, .soc-headline, .recovery-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin: 22px 0; }.risk-title-row h1 { font-size: clamp(26px, 4vw, 34px); }.risk-title-row p { margin: 4px 0; color: #65738b; }.risk-title-row .portal-kicker, .risk-aside .portal-kicker { color: #b56618; }.risk-severity { align-self: center; padding: 7px 11px; color: #9d251d; border: 1px solid #efbbb4; border-radius: 4px; background: #fff2f0; font: 850 11px ui-monospace, monospace; letter-spacing: .1em; }.risk-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .75fr); gap: 22px; }.risk-form-panel, .risk-aside { background: #fff; box-shadow: 0 8px 25px rgba(25, 46, 85, .07); }.risk-form-panel { padding: clamp(22px, 4vw, 34px); border-top: 4px solid #c28b32; }.section-heading { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding-bottom: 15px; border-bottom: 1px solid #e0e6ef; }.section-heading h2 { font-size: 18px; }.section-heading span { color: #7b5b1c; font-size: 11px; font-weight: 800; }.form-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 24px 0; }.form-facts div { padding-bottom: 12px; border-bottom: 1px solid #ebeff5; }.form-facts dt { color: #72819a; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.form-facts dd { margin: 4px 0 0; color: #1c2b43; font-size: 14px; font-weight: 700; }.risk-action { display: grid; gap: 8px; padding: 17px; border: 1px solid #dae2ec; background: #f8fafc; }.risk-action label { color: #43516b; font-size: 12px; }.risk-action input { padding: 9px 10px; border-color: #d2dae6; border-radius: 3px; font-size: 13px; }.risk-action button { display: flex; justify-content: space-between; margin-top: 5px; border-radius: 3px; background: #1b4779; }.risk-action button:hover { background: #143961; }.risk-aside { padding: 25px; border-bottom: 3px solid #183b67; }.risk-aside h2 { margin-bottom: 22px; font-size: 19px; }.authority-person { display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; padding: 12px 0; border-top: 1px solid #e7ebf1; }.authority-person > span { display: grid; width: 32px; height: 32px; place-items: center; color: #355a8b; border-radius: 50%; background: #e6edf7; font-size: 10px; font-weight: 900; }.authority-person.required > span { color: #946119; background: #f8e6ba; }.authority-person b, .authority-person small { display: block; }.authority-person b { font-size: 12px; }.authority-person small { color: #78869c; font-size: 10px; }.authority-person em { color: #8290a6; font-size: 9px; font-style: normal; font-weight: 900; }.authority-person.required em { color: #a16c1b; }.aside-note { margin: 19px 0 0; padding: 11px 0 0 12px; color: #687891; border-left: 2px solid #c28b32; font-size: 11px; }
/* W02 — Government asset registry */
.asset-registry { color: #203143; background: #f7f9fc; }.registry-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 29px; border-bottom: 1px solid #d9e1ea; background: #fff; }.registry-brand, .registry-user { display: flex; align-items: center; gap: 10px; }.registry-glyph { display: grid; width: 34px; height: 34px; place-items: center; color: #fff; border-radius: 7px; background: #1c6675; font-size: 22px; }.registry-brand b, .registry-brand small, .registry-user b, .registry-user small { display: block; }.registry-brand b { color: #124f5e; letter-spacing: .04em; }.registry-brand small, .registry-user small { color: #7b8996; font-size: 9px; }.registry-user { color: #435261; font-size: 11px; }.user-dot { display: grid; width: 28px; height: 28px; place-items: center; color: #135363; border-radius: 50%; background: #d9eff0; font-size: 9px; font-weight: 900; }.registry-shell { display: grid; grid-template-columns: 192px 1fr; min-height: 590px; }.registry-rail { padding: 23px 13px; border-right: 1px solid #dfe5ec; background: #f0f4f7; }.registry-rail p { margin: 0 10px 8px; color: #8995a2; font-size: 9px; font-weight: 900; letter-spacing: .1em; }.registry-rail a { display: flex; justify-content: space-between; margin: 3px 0; padding: 8px 10px; color: #506171; border-radius: 5px; font-size: 11px; text-decoration: none; }.registry-rail a.active { color: #0b5665; background: #d6eff0; font-weight: 800; }.registry-rail i { padding: 1px 5px; color: #8e5210; border-radius: 99px; background: #ffe3bc; font-size: 9px; font-style: normal; }.registry-rail hr { margin: 18px 10px; border-color: #d9e1e8; }.registry-main { max-width: 1050px; padding: 28px clamp(21px, 4vw, 44px); }.registry-toolbar .portal-kicker { color: #13717a; }.registry-toolbar h1 { color: #1e3241; font-size: 27px; }.registry-filter { padding: 8px 12px; color: #315164; border: 1px solid #c8d4dd; border-radius: 5px; background: #fff; font-size: 11px; }.registry-search { display: flex; gap: 8px; align-items: center; padding: 7px 8px 7px 13px; border: 1px solid #ccd7df; border-radius: 7px; background: #fff; }.registry-search span { color: #6c7d89; }.registry-search input { padding: 6px 0; border: 0; border-radius: 0; font-size: 12px; outline: 0; }.registry-search button { border-radius: 4px; background: #176676; font-size: 11px; }.registry-alert { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin: 18px 0; padding: 12px 14px; color: #82511e; border-left: 3px solid #d58b2a; background: #fff5e5; font-size: 11px; }.registry-alert span { color: #76604b; }.registry-alert em { color: #b3630e; font-size: 10px; font-style: normal; font-weight: 850; }.registry-table-head, .asset-row { display: grid; grid-template-columns: minmax(180px, 1.6fr) minmax(100px, .85fr) minmax(100px, .8fr) minmax(100px, .75fr); gap: 13px; align-items: center; }.registry-table-head { padding: 10px 13px; color: #7d8996; border-bottom: 1px solid #d8e0e8; font-size: 9px; font-weight: 900; letter-spacing: .08em; }.asset-row { padding: 16px 13px; border-bottom: 1px solid #e1e7ed; background: #fff; font-size: 11px; }.asset-row b, .asset-row small { display: block; }.asset-row small { margin-top: 2px; color: #7d8996; font-size: 10px; }.asset-row > span, .asset-row > time { color: #536473; }.asset-row strong { width: max-content; padding: 3px 6px; border-radius: 3px; font-size: 9px; letter-spacing: .04em; }.lifecycle-live { color: #196851; background: #dff5e9; }.lifecycle-retired { color: #6d7380; background: #edf0f3; }.asset-row.muted { color: #657180; background: #fafbfc; }.registry-footnote { color: #84909d; font-size: 10px; }
/* W03 — Executive expense system */
.procurement-workspace { display: grid; grid-template-columns: 210px 1fr; color: #1b3152; background: #f6f8fb; }.procurement-nav { display: flex; flex-direction: column; padding: 24px 14px; color: #c2cee0; background: #10284d; }.procurement-logo { display: flex; align-items: center; gap: 9px; margin-bottom: 29px; color: #fff; font-size: 12px; line-height: 1.15; }.procurement-logo span { display: grid; width: 31px; height: 31px; place-items: center; color: #17345c; border-radius: 6px; background: #e2b753; font-size: 11px; font-weight: 900; }.procurement-nav > p { margin: 0 10px 7px; color: #7890b4; font-size: 9px; font-weight: 850; letter-spacing: .08em; }.procurement-nav a { padding: 8px 10px; color: #c5d1e3; border-radius: 5px; font-size: 11px; text-decoration: none; }.procurement-nav a.active { color: #fff; background: #264e83; font-weight: 750; }.procurement-nav hr { width: 100%; margin: 17px 0; border-color: #274364; }.procurement-account { display: flex; gap: 8px; align-items: center; margin-top: auto; padding: 12px 8px 0; border-top: 1px solid #274364; }.procurement-account > span { display: grid; width: 28px; height: 28px; place-items: center; color: #4b3912; border-radius: 50%; background: #f0ca70; font-size: 9px; font-weight: 900; }.procurement-account b, .procurement-account small { display: block; }.procurement-account b { color: #fff; font-size: 10px; }.procurement-account small { color: #9fb0ca; font-size: 9px; }.procurement-main { padding: 0 clamp(21px, 4vw, 52px) 42px; }.procurement-top { display: flex; justify-content: space-between; padding: 15px 0; color: #7c8ca3; border-bottom: 1px solid #dbe3ef; font-size: 10px; }.procurement-tools i { display: inline-grid; width: 14px; height: 14px; place-items: center; color: #fff; border-radius: 50%; background: #c13e3e; font-size: 8px; font-style: normal; }.claims-page-heading { align-items: center; }.claims-page-heading .portal-kicker { color: #a06d19; }.claims-page-heading h1 { font-size: 28px; }.claims-page-heading p { margin: 4px 0 0; color: #687b95; font-size: 12px; }.claims-page-heading button { padding: 9px 12px; border-radius: 4px; background: #1754a1; font-size: 11px; }.claim-tabs { display: flex; gap: 22px; padding-bottom: 11px; border-bottom: 1px solid #dbe3ef; color: #657891; font-size: 11px; }.claim-tabs b { color: #154a8d; border-bottom: 2px solid #1d64bd; }.claim-record { margin-top: 20px; padding: 24px; border: 1px solid #dae2ec; border-radius: 8px; background: #fff; box-shadow: 0 6px 18px rgba(28, 54, 93, .06); }.claim-record-title { display: flex; align-items: flex-start; gap: 12px; }.claim-icon { display: grid; width: 38px; height: 38px; place-items: center; color: #1c559f; border-radius: 6px; background: #e4effc; }.claim-record-title small { color: #8393a8; font-size: 9px; font-weight: 850; letter-spacing: .1em; }.claim-record-title h2 { margin: 2px 0; font-size: 17px; }.claim-record-title p { margin: 0; color: #6c7e96; font-size: 11px; }.claim-record-title > strong { margin-left: auto; padding: 4px 7px; color: #17734e; border-radius: 3px; background: #e4f7ed; font-size: 9px; letter-spacing: .06em; }.claim-detail-state { margin-top: 19px; padding: 16px; color: #354b68; border-top: 1px solid #e1e7ee; background: #fbfcfe; font-size: 12px; }.claim-detail-state.notice { border: 0; border-top: 1px solid #e1e7ee; border-radius: 0; }.audit-callout { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 17px; color: #554d3d; border: 1px solid #f0dfbb; border-radius: 6px; background: #fff9ed; }.audit-callout > span { color: #a8751d; font-size: 20px; }.audit-callout div { flex: 1; }.audit-callout b { font-size: 12px; }.audit-callout p { margin: 1px 0 0; color: #786d5d; font-size: 10px; }.audit-callout button { padding: 7px 10px; color: #6b552d; border: 1px solid #d7bc84; border-radius: 4px; background: transparent; font-size: 10px; }
/* W04 — National SOC */
.soc-console { color: #d9e8ff; background: #071426; font-family: Inter, "Noto Sans Thai", Arial, sans-serif; }.soc-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 24px; border-bottom: 1px solid #213b5e; background: #0b1c34; }.soc-brand { display: flex; align-items: center; gap: 9px; }.soc-radar { display: grid; width: 29px; height: 29px; place-items: center; color: #55e0ba; border: 1px solid #2a9d88; border-radius: 50%; font-size: 17px; }.soc-brand b, .soc-brand small { display: block; }.soc-brand b { color: #f1f7ff; font-size: 12px; letter-spacing: .08em; }.soc-brand small { color: #7795ba; font-size: 8px; }.soc-status { color: #78dcbf; font-size: 9px; font-weight: 800; letter-spacing: .08em; }.soc-status span, .live-dot::before { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #4dddab; box-shadow: 0 0 9px #4dddab; content: ""; }.soc-operator { color: #9eb5d4; font: 10px ui-monospace, monospace; }.soc-layout { display: grid; grid-template-columns: 190px 1fr; min-height: 590px; }.soc-nav { display: flex; flex-direction: column; padding: 22px 12px; border-right: 1px solid #1a3455; background: #09192d; }.soc-nav p { margin: 0 9px 7px; color: #5e789c; font: 9px ui-monospace, monospace; letter-spacing: .1em; }.soc-nav a { padding: 8px 9px; color: #a8bedb; border-radius: 4px; font-size: 11px; text-decoration: none; }.soc-nav a.active { color: #d6fff4; border-left: 2px solid #4bddab; border-radius: 0; background: #102c3e; }.soc-nav p:not(:first-child) { margin-top: 23px; }.soc-nav footer { margin-top: auto; padding: 12px 9px 0; color: #7089a9; border-top: 1px solid #20395a; font: 9px ui-monospace, monospace; }.soc-nav footer span { color: #54d3a9; }.soc-main { max-width: 1100px; padding: 26px clamp(20px, 4vw, 44px) 45px; }.soc-breadcrumb { color: #7290b5; }.soc-headline { margin-bottom: 18px; }.soc-headline p { margin: 0 0 5px; color: #56d9b5; font: 9px ui-monospace, monospace; letter-spacing: .1em; }.soc-headline h1 { color: #f3f8ff; font-size: 29px; }.soc-headline span { color: #7893b7; font-size: 11px; }.soc-headline button { padding: 8px 10px; color: #afc4df; border: 1px solid #29486e; border-radius: 4px; background: transparent; }.soc-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #1f3a5d; background: #0d2139; }.soc-kpis > div { padding: 14px 17px; border-right: 1px solid #1f3a5d; }.soc-kpis > div:last-child { border-right: 0; }.soc-kpis small, .soc-kpis span { display: block; color: #7490b3; font-size: 9px; font-weight: 800; letter-spacing: .06em; }.soc-kpis b { display: block; margin: 4px 0 1px; color: #eff7ff; font: 800 25px ui-monospace, monospace; }.soc-kpis .state-muted { color: #f4c666; font-size: 17px; }.soc-detection-panel { margin-top: 18px; border: 1px solid #244364; background: #0c1e33; }.soc-detection-panel header { position: static; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid #244364; background: #0c1e33; }.soc-detection-panel small { color: #6e8eaf; font: 9px ui-monospace, monospace; letter-spacing: .09em; }.soc-detection-panel h2 { margin-top: 2px; color: #edf5ff; font-size: 16px; }.live-dot { color: #5ae0bb; font: 9px ui-monospace, monospace; }.signal-track { display: flex; gap: 8px; align-items: end; height: 115px; padding: 25px 21px 17px; background: linear-gradient(#0e233b 1px, transparent 1px) 0 0/100% 25px; }.signal-track span { display: block; width: 8%; min-width: 16px; border-radius: 2px 2px 0 0; background: #2c79b8; }.signal-track span:nth-child(1) { height: 22%; }.signal-track span:nth-child(2) { height: 31%; }.signal-track span:nth-child(3) { height: 42%; }.signal-track span:nth-child(4) { height: 45%; }.signal-track span:nth-child(5) { height: 52%; }.signal-track span:nth-child(6) { height: 62%; background: #52d5a9; }.signal-track span:nth-child(7) { height: 70%; background: #52d5a9; }.signal-track span:nth-child(8) { height: 76%; background: #52d5a9; }.signal-track span:nth-child(9) { height: 90%; background: #f1b45c; }.signal-labels { display: flex; justify-content: space-between; gap: 10px; padding: 0 18px 16px; color: #7997ba; font: 10px ui-monospace, monospace; }.soc-result { margin: 0; padding: 14px 18px; color: #cbdcf2; border-top: 1px solid #244364; background: #0a192b; font-size: 12px; }.soc-result.notice { border-right: 0; border-bottom: 0; border-left: 0; border-radius: 0; }.soc-result.notice.success { color: #a5f0d6; border-color: #245747; background: #0d2c2a; }.soc-result.notice.warning { color: #f8d998; border-color: #664e27; background: #302515; }.soc-policy-note { display: flex; gap: 11px; margin-top: 17px; padding: 11px 14px; color: #9cb3d1; border-left: 2px solid #3f93dc; background: #0c1d31; font-size: 11px; }.soc-policy-note b { color: #d4e6ff; white-space: nowrap; }
/* W05 — National incident command */
.command-center { color: #152539; background: #f2f5f6; }.command-header { display: flex; align-items: center; gap: 24px; padding: 15px clamp(20px, 4vw, 46px); color: #f2f6f7; background: #10282f; }.command-brand { display: flex; align-items: center; gap: 9px; }.command-brand > span { color: #ffc85b; font-size: 23px; }.command-brand b, .command-brand small { display: block; }.command-brand b { font-size: 12px; letter-spacing: .07em; }.command-brand small { color: #9cb8b8; font-size: 8px; }.command-header nav { display: flex; gap: 18px; margin-right: auto; }.command-header nav a { color: #b4c7c7; font-size: 11px; text-decoration: none; }.command-header nav a.active { color: #fff; font-weight: 800; }.command-clock { color: #94b0b2; text-align: right; font-size: 8px; letter-spacing: .08em; }.command-clock b { color: #fff; font: 700 11px ui-monospace, monospace; }.command-main { max-width: 1150px; margin: 0 auto; padding: 25px clamp(20px, 4vw, 52px) 52px; }.incident-ribbon { display: flex; align-items: center; gap: 11px; padding: 9px 12px; color: #8d332b; border: 1px solid #e9bdb8; background: #fff4f1; font-size: 10px; }.incident-ribbon > span { padding: 3px 6px; color: #fff; background: #bb3b35; font-weight: 900; letter-spacing: .06em; }.incident-ribbon small { color: #886863; }.incident-ribbon em { margin-left: auto; color: #247764; font-style: normal; font-weight: 850; }.command-grid { display: grid; grid-template-columns: minmax(0, 1.48fr) minmax(265px, .7fr); gap: 20px; margin-top: 20px; }.incident-brief, .command-approval { background: #fff; box-shadow: 0 9px 22px rgba(17, 43, 46, .08); }.incident-brief { padding: clamp(23px, 4vw, 35px); border-top: 4px solid #c64139; }.brief-heading { display: flex; justify-content: space-between; }.brief-heading .portal-kicker, .command-approval .portal-kicker { color: #a1453b; }.brief-heading h1 { font: 800 clamp(30px, 5vw, 43px)/1 Inter, sans-serif; letter-spacing: -.04em; }.brief-heading p:last-child { margin: 5px 0 0; color: #75818b; font-size: 12px; }.severity-diamond { display: grid; width: 40px; height: 40px; place-items: center; color: #fff; background: #bd3b35; font-weight: 900; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); }.brief-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 25px 0; }.brief-facts div { padding: 12px 0; border-top: 1px solid #e5e9e9; }.brief-facts small { display: block; color: #7e8b92; font-size: 9px; font-weight: 900; letter-spacing: .08em; }.brief-facts b { display: block; margin-top: 5px; font-size: 12px; }.containment-action { display: flex; align-items: center; gap: 11px; padding: 15px; background: #f1f6f5; }.action-icon { display: grid; width: 34px; height: 34px; place-items: center; color: #0c6a5a; border-radius: 50%; background: #cfebe0; font-size: 18px; }.containment-action b, .containment-action small { display: block; }.containment-action b { font-size: 13px; }.containment-action small { color: #637876; font-size: 10px; }.command-contain { display: flex; justify-content: space-between; width: 100%; margin-top: 16px; border-radius: 3px; background: #b93b35; font-size: 12px; letter-spacing: .04em; }.command-contain:hover { background: #9d2d2a; }.incident-brief pre { min-height: 70px; margin: 15px 0 0; background: #13252d; color: #cce9e2; font-size: 11px; }.command-approval { padding: 25px; border-bottom: 3px solid #1c6d60; }.command-approval h2 { margin: 0 0 20px; font-size: 20px; }.command-approval ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }.command-approval li { display: grid; grid-template-columns: 27px 1fr; gap: 9px; align-items: center; padding: 12px 0; border-top: 1px solid #e6ebeb; }.command-approval li i { display: grid; width: 23px; height: 23px; place-items: center; color: #6d7b80; border: 1px solid #cbd5d5; border-radius: 50%; font-size: 10px; font-style: normal; font-weight: 900; }.command-approval li.complete i { color: #fff; border-color: #167361; background: #167361; }.command-approval li.active i { color: #fff; border-color: #d4962d; background: #d4962d; }.command-approval li b, .command-approval li small { display: block; }.command-approval li b { font-size: 11px; }.command-approval li small { color: #77858b; font-size: 9px; }.command-role { display: flex; gap: 9px; align-items: center; margin-top: 19px; padding: 12px; background: #eff5f4; }.command-role > span { display: grid; width: 30px; height: 30px; place-items: center; color: #1e5d56; border-radius: 50%; background: #cce3de; font-size: 10px; font-weight: 900; }.command-role small, .command-role b { display: block; }.command-role small { color: #758581; font-size: 8px; font-weight: 900; }.command-role b { font-size: 11px; }.command-note { margin: 15px 0 0; color: #7c898d; font-size: 10px; }
/* W06 — Continuity and recovery platform */
.recovery-portal { color: #1d3152; background: #f6f8fc; }.recovery-header { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 15px clamp(20px, 4vw, 45px); color: #fff; background: linear-gradient(100deg, #123d71, #245e9d); }.recovery-brand { display: flex; gap: 9px; align-items: center; }.recovery-symbol { display: grid; width: 34px; height: 34px; place-items: center; color: #154879; border-radius: 9px; background: #bbe7ef; font-size: 25px; font-weight: 700; }.recovery-brand b, .recovery-brand small { display: block; }.recovery-brand b { font-size: 13px; letter-spacing: .06em; }.recovery-brand small { color: #c5ddec; font-size: 9px; }.recovery-case { display: grid; grid-template-columns: auto auto; column-gap: 7px; align-items: baseline; font-size: 9px; }.recovery-case span { color: #c5d8eb; }.recovery-case b { font: 800 11px ui-monospace, monospace; }.recovery-case i { grid-column: 1 / -1; color: #a8edcf; font-style: normal; }.recovery-main { display: grid; grid-template-columns: 205px 1fr; min-height: 590px; }.recovery-side { display: flex; flex-direction: column; padding: 23px 13px; border-right: 1px solid #d9e2ef; background: #edf3fa; }.recovery-side a { padding: 8px 10px; color: #577090; border-radius: 5px; font-size: 11px; text-decoration: none; }.recovery-side a.active { color: #155697; background: #d7e8fb; font-weight: 800; }.recovery-side hr { width: 100%; margin: 18px 0; border-color: #d2ddeb; }.recovery-side p { margin: 0 10px 4px; color: #7c91aa; font-size: 9px; font-weight: 900; letter-spacing: .08em; }.recovery-side > b { margin-left: 10px; font-size: 11px; }.recovery-side > small { margin: 2px 10px; color: #7287a1; font-size: 10px; }.recovery-rpo { margin-top: auto; padding: 13px 10px 0; border-top: 1px solid #d2ddeb; }.recovery-rpo small, .recovery-rpo b, .recovery-rpo span { display: block; }.recovery-rpo small { color: #7d92a9; font-size: 8px; font-weight: 900; letter-spacing: .08em; }.recovery-rpo b { margin-top: 4px; color: #155795; font: 800 18px ui-monospace, monospace; }.recovery-rpo span { color: #607891; font-size: 10px; }.recovery-content { max-width: 1100px; padding: 26px clamp(20px, 4vw, 48px) 42px; }.recovery-title .portal-kicker { color: #3976a9; }.recovery-title h1 { color: #1c3254; font-size: 29px; }.recovery-title p { margin: 5px 0 0; color: #667e9b; font-size: 11px; }.recovery-status { align-self: center; padding: 5px 8px; color: #246849; border: 1px solid #a6ddbe; border-radius: 4px; background: #effaf2; font: 800 9px ui-monospace, monospace; letter-spacing: .06em; }.recovery-timeline { display: grid; grid-template-columns: repeat(4, 1fr); margin: 20px 0; padding: 18px; border: 1px solid #dce5f0; background: #fff; }.timeline-event { position: relative; display: grid; gap: 3px; padding: 0 9px; border-right: 1px solid #e0e7f0; }.timeline-event:last-child { border-right: 0; }.timeline-event span { position: absolute; top: 3px; left: -5px; width: 10px; height: 10px; border-radius: 50%; background: #6693c4; }.timeline-event:first-child span { left: 8px; }.timeline-event b { padding-top: 19px; color: #31567e; font: 800 12px ui-monospace, monospace; }.timeline-event small { color: #7389a2; font-size: 9px; }.timeline-event.selected { background: linear-gradient(90deg, transparent, #f2fbf7, transparent); }.timeline-event.selected span { background: #30a875; box-shadow: 0 0 0 4px #d8f3e6; }.timeline-event.compromise span, .timeline-event.unsafe span { background: #d15d54; }.recovery-inventory { overflow: hidden; border: 1px solid #d8e2ee; background: #fff; }.recovery-inventory header { position: static; display: flex; justify-content: space-between; align-items: center; padding: 15px 18px; border-bottom: 1px solid #e1e8f0; background: #fff; }.recovery-inventory header small { color: #7390ac; font-size: 9px; font-weight: 900; letter-spacing: .08em; }.recovery-inventory header h2 { margin: 2px 0 0; color: #23395e; font-size: 17px; }.recovery-inventory header > span { color: #7a8fa6; font-size: 10px; }.recovery-inventory #backup-table { overflow-x: auto; padding: 0 18px; }.recovery-inventory table { margin: 0; font-size: 10px; }.recovery-inventory th { color: #547090; border: 0; border-bottom: 1px solid #dce4ee; background: #f7f9fc; font-size: 9px; letter-spacing: .05em; }.recovery-inventory td { border-right: 0; border-left: 0; }.recovery-action-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding: 14px 16px; color: #425d7c; border: 1px solid #cedce9; background: #eef6ff; }.recovery-action-row b, .recovery-action-row span { display: block; }.recovery-action-row b { color: #244c79; font-size: 12px; }.recovery-action-row span { font-size: 10px; }.recovery-action-row button { border-radius: 4px; background: #236cb3; font-size: 11px; white-space: nowrap; }.recovery-content pre { margin: 16px 0 0; background: #102d4c; font-size: 11px; }
/* W02 legacy discovery service */
.legacy-app { color: #253345; background: #f4f5f7; font-family: Arial, sans-serif; }.legacy-app > header { position: static; display: flex; justify-content: space-between; align-items: center; padding: 13px 30px; color: #cad3df; border-bottom: 1px solid #384657; background: #202d3d; }.legacy-app > header b { color: #f3f5f7; font-size: 15px; }.legacy-app > header b i { color: #ebbe5d; font-style: normal; }.legacy-app > header span { font-size: 10px; }.legacy-app > main { max-width: 800px; margin: 0 auto; padding: 44px 30px; }.legacy-banner { padding: 10px 12px; color: #71624b; border: 1px solid #e4d2ae; background: #fff8e9; font-size: 11px; }.legacy-app h1 { margin-top: 30px; color: #2c3a4b; font-size: 29px; }.legacy-subtitle { margin: 4px 0 21px; color: #74808d; font-size: 12px; }.legacy-status-grid, .legacy-diagnostic-grid { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid #d9e0e8; background: #fff; }.legacy-status-grid > div, .legacy-diagnostic-grid > div { padding: 16px; border-right: 1px solid #e3e8ee; border-bottom: 1px solid #e3e8ee; }.legacy-status-grid small, .legacy-diagnostic-grid small { display: block; color: #7e8b97; font-size: 9px; font-weight: 800; letter-spacing: .07em; }.legacy-status-grid b, .legacy-diagnostic-grid b { display: block; margin-top: 5px; color: #2b3a4c; font: 700 13px ui-monospace, monospace; }.legacy-status-grid i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #31a66b; }.legacy-unassigned { color: #a65c28 !important; }.legacy-maintenance { margin-top: 20px; padding: 20px; border: 1px solid #d9e0e8; background: #fff; }.legacy-maintenance h2 { color: #334559; font-size: 17px; }.legacy-maintenance p { color: #667482; font-size: 12px; }.legacy-maintenance button { padding: 7px 10px; color: #3d5268; border: 1px solid #aebbc9; border-radius: 3px; background: #f8fafc; font-size: 11px; }.legacy-debug-state { display: flex; gap: 11px; align-items: center; padding: 13px; color: #6a491b; border: 1px solid #e6c77f; background: #fff6da; }.legacy-debug-state > span { display: grid; width: 24px; height: 24px; place-items: center; color: #fff; border-radius: 50%; background: #c18a1d; font-weight: 900; }.legacy-debug-state b, .legacy-debug-state small { display: block; }.legacy-debug-state b { font-size: 12px; }.legacy-debug-state small { font-size: 10px; }.legacy-diagnostic-grid { margin-top: 18px; }.legacy-app .flag { border-color: #ba923e; background: #fff7e0; color: #68470b; }.legacy-app > footer { padding: 15px 30px; color: #8090a0; border-top: 1px solid #d9e0e8; background: #edf0f4; font-size: 10px; }
.flash { margin-bottom: 14px; }
footer { border-top: 1px solid var(--line); padding: 22px; text-align: center; color: var(--muted); font-size: 13px; }
.site-footer { padding: 28px 22px; color: #667085; line-height: 1.45; letter-spacing: .02em; }.site-footer > span { display: inline-flex; align-items: center; gap: .32em; white-space: nowrap; }.footer-heart { color: #c72232; font-size: 1.15em; line-height: 1; }.site-footer a { color: #2f22a8; font-weight: 900; text-decoration-thickness: 2px; text-underline-offset: 3px; }.site-footer a:hover { color: #1c126e; }
.scoreboard-page .site-footer { border-top-color: #d8e1ef; background: #fff; }
@media (max-width: 680px) {
  .nav { padding: 12px 14px; }
  .brand-sth-frame { width: 86px; height: 44px; }
  .brand-cross { font-size: 18px; }
  .brand-ciso { width: 56px; height: 56px; }
  main { padding: 20px 14px 48px; }
  .hero h1 { font-size: 24px; }
  .team-dashboard-hero { gap: 15px; padding: 20px; }
  .team-dashboard-logo { width: 82px; height: 82px; }
  .kv { grid-template-columns: 1fr; }
  .team-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .team-logo-button { padding: 8px; }
  .team-logo-button img { max-width: 148px; }
  .browser-chrome { padding: 8px; }
  .browser-tab { min-width: 0; margin-bottom: 7px; }
  .browser-toolbar { gap: 4px; }
  .browser-control { padding: 6px 7px; }
  .browser-address-form { gap: 4px; padding-left: 8px; }
  .browser-address-form button { padding: 6px 10px; }
  .browser-viewport { height: 70vh; }
  .browser-devtools-heading { align-items: start; flex-direction: column; gap: 7px; padding: 17px 15px 12px; }
  .browser-devtools-heading > p { text-align: left; }
  .browser-devtools-tabs { padding-inline: 8px; }
  .browser-devtools-tabs button { padding-inline: 11px; }
  .browser-devtools-panel { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; min-height: 125px; padding: 16px 15px 18px; }
  .browser-devtools-icon { width: 29px; height: 29px; font-size: 13px; }
  .forensic-intro, .forensic-answer-grid, .forensic-viewer-grid { grid-template-columns: 1fr; }.forensic-toolbar { align-items: stretch; flex-wrap: wrap; }.forensic-search { flex-basis: 100%; }.forensic-browser-list { max-height: 320px; border-right: 0; border-bottom: 1px solid #334771; }.forensic-inspector { max-height: none; }.forensic-detail-grid { grid-template-columns: 1fr; }.forensic-intro-note { padding-top: 12px; }.forensic-result-count { margin-left: auto; }
  .storyline { margin-top: -4px; padding: 16px; }
  .standards-mapping { margin-top: 0; }.standards-mapping-heading { align-items: start; }.standards-mapping-list { grid-template-columns: 1fr; }
  .chat-flow-meta { margin-inline: 0; }.chat-shell { border-radius: 18px; }.chat-topbar { grid-template-columns: 42px 1fr; padding: 13px 15px; }.chat-shield { width: 40px; height: 40px; }.chat-live { display: none; }.chat-timeline { min-height: 0; padding: 20px 15px; }.chat-message { max-width: 94%; }.chat-message p { padding: 11px 13px; }.chat-mission { margin-left: 0; }.chat-composer { align-items: stretch; flex-direction: column; padding: 13px; }.browser-lab-cta { justify-content: stretch; }.browser-lab-launch { width: 100%; justify-content: center; }
  .how-hero { grid-template-columns: 1fr; gap: 24px; min-height: 0; padding: 34px 24px; }
  .how-hero-note { padding: 16px 0 0 16px; }
  .workshop-challenge-hero { padding: 24px 20px; }.workshop-challenge-hero h1 { font-size: 28px; }.workshop-challenge-hero .workshop-hero-summary { font-size: 15px; }.workshop-mission { padding: 14px; }.workshop-challenge-hero .workshop-mission p { font-size: 14px; }.workshop-walkthrough { padding: 22px 16px; }.workshop-walkthrough h2 { font-size: 21px; }.workshop-walkthrough li { padding-left: 48px; font-size: 14px; }
  .principle-list, .scoring-rules, .rule-list, .tool-guide-list { grid-template-columns: 1fr; gap: 18px; }
  .admin-mode-picker { grid-template-columns: 1fr; }
  .workshop-participant-row { grid-template-columns: 1fr; }
  .workshop-lab-shell { padding: 0; }
  .workshop-lab-shell > header { align-items: flex-start; flex-direction: column; }
  .workshop-urlbar { align-items: stretch; flex-wrap: wrap; }
  .workshop-service-header { align-items: flex-start; flex-direction: column; padding: 17px 16px; }.workshop-service-header p { text-align: left; }.workshop-service-context, .workshop-response { padding: 22px 16px; }.workshop-control-surface { grid-template-columns: 1fr; gap: 12px; padding: 18px 16px; }.workshop-control-surface > button { width: 100%; }.workshop-choice-group { width: 100%; }.workshop-choice-group label, .workshop-choice-group label span { flex: 1; }.workshop-choice-group--chips button { flex: 1 1 160px; }.workshop-range-control { width: 100%; }
  .score-scale { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav-countdown { display: none; }.admin-heading, .admin-section-title, .admin-schedule, .scoreboard-header, .scoreboard-grid, .team-score-header, .team-profile-grid, .profile-preferences { grid-template-columns: 1fr; display: grid; align-items: start; }
  .admin-heading, .admin-section-title { align-items: start; }.admin-schedule button, .competition-reset-form button { width: 100%; }.bulk-challenge-toolbar { align-items: start; flex-direction: column; }.bulk-selection-actions { width: 100%; }.bulk-selection-actions .btn { flex: 1 1 130px; text-align: center; }.bulk-reset-confirm[open] { width: 100%; }.release-row { grid-template-columns: 28px 48px 1fr; gap: 10px; }.release-action { grid-column: 1 / -1; justify-content: space-between; flex-wrap: wrap; }.admin-confirm[open] { width: 100%; }.competition-reset-form { grid-template-columns: 1fr; }.scoreboard-title { text-align: left; }.countdown-panel { justify-items: start; text-align: left; }.podium-section { gap: 8px; }.podium-entry { min-height: 190px; padding: 14px 6px 0; }.rank-one { min-height: 245px; }.rank-two { min-height: 210px; }.rank-three { min-height: 190px; }.podium-entry p { font-size: 11px; }.podium-entry strong { font-size: 18px; }.podium-rank { width: 55px; height: 55px; font-size: 28px; transform: translateY(18px); }.crown { top: -35px; font-size: 45px; }.standings-panel, .activity-panel { padding: 16px; }.team-score-header { grid-template-columns: auto minmax(0, 1fr); gap: 14px; }.team-score-header > .btn, .team-score-stats { grid-column: 1 / -1; }.team-score-header img { width: 76px; height: 76px; }.team-score-stats { gap: 10px; }.team-score-stats dd { font-size: 22px; }.solve-timeline { padding-left: 0; }.solve-entry { grid-template-columns: 48px 12px minmax(0, 1fr); gap: 10px; }.solve-entry::before { left: 53px; }.solve-award { grid-column: 3; justify-items: start; text-align: left; }.player-countdown { align-items: start; flex-direction: column; gap: 12px; }.player-countdown > span { text-align: left; }
}
@media (max-width: 767px) {
  .mobile-desktop-notice { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; margin: -4px 0 22px; padding: 15px 16px; color: #344054; border-left: 4px solid #2543a5; background: #eef4ff; }
  .mobile-desktop-notice > span { display: grid; width: 28px; height: 28px; place-items: center; color: #fff; border-radius: 50%; background: #2543a5; font-size: 16px; font-weight: 900; }
  .mobile-desktop-notice .eyebrow { margin: 0 0 2px; color: #2543a5; font-size: 10px; }
  .mobile-desktop-notice strong { display: block; color: #172554; font-size: 14px; }
  .mobile-desktop-notice p:last-child { margin: 3px 0 0; color: #475467; font-size: 12px; line-height: 1.55; }
}

/* Hide the desktop-only analysis tools on real touch devices only.
   Keying this on width alone deleted the Browser Lab whenever Chrome
   DevTools was docked to the right, which is Chrome's default: on a 1440px
   screen that leaves the page under 767px and the lab vanished mid-exercise. */
@media (max-width: 767px) and (pointer: coarse) {
  .incident-chat-flow, .browser-lab-cta, .browser-lab-stage, .forensic-intro, .forensic-workstation, .forensic-noscript { display: none !important; }
}

.flag-submit { margin-top: 16px; padding-top: 14px; border-top: 1px solid #d8e1ef; }
.flag-submit label { display: block; margin-bottom: 7px; color: #344054; font-size: 13px; font-weight: 800; }
.flag-submit-controls { display: flex; gap: 8px; }
.flag-submit-controls input { min-width: 0; flex: 1; padding: 10px 12px; border: 1px solid #b8c6dd; border-radius: 9px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.flag-submit-controls button { flex: 0 0 auto; padding: 10px 13px; border: 0; border-radius: 9px; background: #2f1b8f; color: #fff; font-weight: 800; cursor: pointer; }
.flag-submit-controls button:disabled { cursor: wait; opacity: .65; }
.challenge-solved-note { margin: 16px 0 0; color: #067647; font-weight: 800; }
.flag-result-modal { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(11, 20, 55, .7); backdrop-filter: blur(5px); }
.flag-result-modal[hidden] { display: none; }
.flag-result-dialog { width: min(500px, 100%); padding: 32px; text-align: center; border: 3px solid #12b76a; border-radius: 26px; background: radial-gradient(circle at 50% -20%, #d9ffe9 0, #fff 52%, #f3fff7 100%); box-shadow: 0 24px 80px rgba(8, 15, 47, .45); animation: first-blood-pop .28s ease-out; }
.flag-result-modal.is-error .flag-result-dialog { border-color: #f04438; background: radial-gradient(circle at 50% -20%, #ffe6e4 0, #fff 52%, #fff6f5 100%); }
.flag-result-dialog h2 { margin: 3px 0 12px; color: #172554; font-size: clamp(28px, 6vw, 42px); }
.flag-result-dialog > p { color: #475467; font-size: 17px; line-height: 1.5; }
.flag-result-dialog .eyebrow { margin: 0; color: #067647; letter-spacing: .12em; font-weight: 900; }
.flag-result-modal.is-error .eyebrow { color: #b42318; }
.flag-result-points { display: block; margin: 18px 0 10px; color: #067647; font-size: 34px; }
.flag-result-detail { margin: 0 0 24px !important; font-size: 15px !important; }
@media (max-width: 520px) { .flag-submit-controls { flex-direction: column; }.flag-submit-controls button { width: 100%; }.flag-result-dialog { padding: 24px 18px; } }
@media (max-width: 420px) {
  .team-picker { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .lab-main { padding: 0; }.lab-main > .gov-app, .lab-main > .legacy-app { min-height: 100vh; }
  .gov-masthead, .registry-header, .soc-topbar, .command-header, .recovery-header { padding-inline: 16px; }.gov-nav, .command-header nav, .registry-user, .soc-status, .soc-operator, .command-clock, .recovery-case { display: none; }
  .risk-workspace, .registry-main, .soc-main, .recovery-content { padding-inline: 16px; }.risk-layout, .command-grid { grid-template-columns: 1fr; }.form-facts, .brief-facts { grid-template-columns: 1fr; gap: 10px; }.risk-title-row, .registry-toolbar, .claims-page-heading, .soc-headline, .recovery-title { align-items: flex-start; flex-direction: column; }.risk-severity, .recovery-status { align-self: flex-start; }
  .registry-shell, .procurement-workspace, .soc-layout, .recovery-main { grid-template-columns: 1fr; }.registry-rail, .procurement-nav, .soc-nav, .recovery-side { display: none; }.registry-table-head, .asset-row { grid-template-columns: minmax(0, 1fr) auto; }.registry-table-head > :nth-child(2), .registry-table-head > :nth-child(4), .asset-row > :nth-child(2), .asset-row > :nth-child(4) { display: none; }
  .procurement-main { padding-inline: 16px; }.procurement-top { display: none; }.claims-page-heading { margin-top: 22px; }.claim-record { padding: 17px; }.claim-record-title { flex-wrap: wrap; }.claim-record-title > strong { margin-left: 50px; }.audit-callout { align-items: flex-start; flex-wrap: wrap; }.audit-callout button { width: 100%; }
  .soc-kpis { grid-template-columns: 1fr; }.soc-kpis > div { border-right: 0; border-bottom: 1px solid #1f3a5d; }.soc-kpis > div:last-child { border-bottom: 0; }.soc-detection-panel header { align-items: flex-start; gap: 9px; flex-direction: column; }.signal-labels { align-items: flex-start; flex-direction: column; }.soc-policy-note { align-items: flex-start; flex-direction: column; }
  .incident-ribbon { align-items: flex-start; flex-wrap: wrap; }.incident-ribbon em { width: 100%; margin-left: 0; }.brief-facts { margin: 18px 0; }.recovery-timeline { gap: 12px; grid-template-columns: repeat(2, 1fr); }.timeline-event:nth-child(2) { border-right: 0; }.timeline-event:nth-child(n + 3) { border-top: 1px solid #e0e7f0; padding-top: 12px; }.timeline-event:nth-child(n + 3) span { top: 15px; }.recovery-inventory header { align-items: flex-start; gap: 7px; flex-direction: column; }.recovery-action-row { align-items: stretch; flex-direction: column; }.recovery-action-row button { width: 100%; }
  .legacy-app > header { padding-inline: 16px; }.legacy-app > header span { display: none; }.legacy-app > main { padding: 28px 16px; }.legacy-status-grid, .legacy-diagnostic-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .incident-chat-flow .chat-topbar { padding: 12px; }.incident-chat-flow .chat-back { font-size: 37px; }.incident-chat-flow .chat-room-logo { width: 36px; height: 36px; }.chat-topbar-left { gap: 8px; }.incident-chat-flow .chat-topbar h2 { font-size: 16px; }.chat-topbar-actions { gap: 8px; padding-left: 8px; font-size: 19px; }.incident-chat-flow .chat-timeline { min-height: 370px; padding: 18px 13px; }.incident-chat-flow .chat-message { max-width: 95%; }.incident-chat-flow .chat-message p { font-size: 14px; }.incident-chat-flow .chat-mission { margin-left: 0; }.incident-chat-flow .chat-composer { flex-direction: row; flex-wrap: wrap; }.chat-composer-tools { gap: 7px; }.chat-input-placeholder { min-width: 120px; }.incident-chat-flow .chat-composer button { margin-left: auto; }
}

.admin-team-list { display: grid; gap: 12px; margin: 16px 0; }
.admin-team-row {
  display: grid;
  grid-template-columns: minmax(160px, 200px) minmax(0, 1fr) minmax(180px, 220px);
  gap: 16px;
  align-items: start;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
}
.admin-team-identity { display: flex; align-items: center; gap: 12px; }
.admin-team-identity img { width: 48px; height: 48px; object-fit: contain; flex: none; }
.admin-team-identity > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.admin-team-identity strong { word-break: break-word; }
.admin-team-key { font-size: 0.72rem; letter-spacing: 0.08em; opacity: 0.65; }
.admin-team-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px 18px;
}
.admin-team-field { display: flex; flex-direction: column; gap: 5px; margin: 0; min-width: 0; }
.admin-team-field > label { font-size: 0.8rem; opacity: 0.8; }
.admin-team-controls-row { display: flex; gap: 6px; align-items: center; }
.admin-team-controls-row input,
.admin-team-controls-row select { flex: 1 1 auto; min-width: 0; }
.admin-team-controls-row button { flex: none; white-space: nowrap; }
.admin-team-code { flex: none; width: 11ch; text-align: center; letter-spacing: 0.08em; }
.admin-team-actions { display: flex; flex-direction: column; gap: 8px; }
.admin-team-actions form { margin: 0; }
.admin-team-actions > form > button { width: 100%; }
.admin-team-create { display: grid; gap: 10px; margin-top: 22px; max-width: 480px; }
.admin-team-create label { display: flex; flex-direction: column; gap: 4px; }
.admin-brand-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.admin-brand-slots h3 { grid-column: 1 / -1; margin: 0; }
.admin-brand-slot {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
}
.admin-brand-slot img { max-height: 52px; width: auto; object-fit: contain; justify-self: start; }
.admin-brand-slot form { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.admin-brand-slot label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; }

/* The submit box, pinned above the frame instead of buried inside it. */
.lab-flag-panel {
  position: sticky;
  z-index: 3;
  /* The site header is sticky at top:0, so park below it rather than under it. */
  top: calc(var(--site-header-height, 92px) + 8px);
  display: grid;
  gap: 9px;
  margin-bottom: 12px;
  padding: 13px 16px;
  border: 1px solid #b8c6dd;
  border-radius: 12px;
  background: #f4f7fc;
  box-shadow: 0 6px 18px rgba(16, 24, 40, .10);
}
.lab-flag-panel.is-found { border-color: #56b37f; background: #eafaf0; }
.lab-flag-headline { display: flex; gap: 11px; align-items: center; }
.lab-flag-tick {
  display: grid;
  width: 30px;
  height: 30px;
  flex: none;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: #5468a8;
  font-weight: 900;
}
.lab-flag-panel.is-found .lab-flag-tick { background: #1c8f52; }
.lab-flag-headline .eyebrow { margin: 0; color: #5468a8; }
.lab-flag-panel.is-found .lab-flag-headline .eyebrow { color: #1c8f52; }
.lab-flag-headline strong { display: block; color: #1c2c4a; font-size: 14px; }
.lab-flag-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.lab-flag-form input {
  min-width: 0;
  flex: 1 1 260px;
  padding: 10px 12px;
  border: 1px solid #b8c6dd;
  border-radius: 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
.lab-flag-panel.is-found .lab-flag-form input { border-color: #56b37f; background: #fff; }
.lab-flag-form button { flex: none; }
.lab-flag-result:empty { display: none; }
.lab-flag-result { margin: 0; font-size: 13px; font-weight: 800; }
.lab-flag-result.is-correct { color: #14532d; }
.lab-flag-result.is-error { color: #9a2f2f; }

/* Shown only when a mouse-driven viewport is too narrow — i.e. DevTools is
   docked to the side. The labs are laid out for a bottom dock. */
.devtools-dock-hint {
  display: none;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: -4px 0 22px;
  padding: 15px 16px;
  color: #6a491b;
  border-left: 4px solid #c18a1d;
  background: #fff6da;
}
.devtools-dock-hint > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: #c18a1d;
  font-size: 15px;
  font-weight: 900;
}
.devtools-dock-hint strong { display: block; color: #6a4708; font-size: 14px; }
.devtools-dock-hint p:last-child { margin: 3px 0 0; font-size: 12px; line-height: 1.55; }

@media (max-width: 900px) and (not (pointer: coarse)) {
  /* Widths in this range are now real working widths, because a side-docked
     DevTools panel no longer hides the exercise. Let the nav wrap instead of
     letting the brand collide with the links. */
  .nav { flex-wrap: wrap; row-gap: 8px; }
  .nav-spacer { display: none; }
  .brand-sth-frame { width: 84px; height: 42px; }
  .brand-ciso { width: 46px; height: 46px; }
}

@media (max-width: 767px) and (not (pointer: coarse)) {
  /* Anything that is not a coarse pointer at this width is a desktop with a
     docked DevTools panel, not a phone. Written as "not coarse" rather than
     "fine" because headless and some embedded browsers report no pointer at
     all, and those must still get the hint rather than the mobile notice. */
  .mobile-desktop-notice { display: none; }
  .devtools-dock-hint { display: grid; }
}

/* Scenery inside a lab: visible, legible, and obviously not clickable. */
.lab-main .is-decor {
  cursor: default;
  opacity: .55;
  filter: saturate(.45);
  pointer-events: none;
  user-select: none;
}
.lab-main button.is-decor { border-style: dashed; box-shadow: none; }
/* The controls that do something get the opposite treatment. */
.lab-main button.is-live-control { position: relative; cursor: pointer; }
.lab-main button.is-live-control:focus-visible { outline: 3px solid #2543a5; outline-offset: 2px; }

/* A numbered path through the exercise, so "what do I actually do" is answered
   before the player opens the lab. */
.challenge-steps {
  margin: 18px 0 22px;
  padding: 18px 20px;
  border: 1px solid #c7d7f0;
  border-radius: 12px;
  background: #f4f8ff;
}
.challenge-steps-heading .eyebrow { margin: 0 0 2px; color: #2543a5; }
.challenge-steps-heading h2 { margin: 0 0 10px; color: #172554; font-size: 18px; }
.challenge-steps-list { display: grid; gap: 8px; margin: 0 0 10px; padding-left: 20px; }
.challenge-steps-list li { color: #344054; font-size: 14px; line-height: 1.6; }
.challenge-steps-list li::marker { color: #2543a5; font-weight: 900; }
.challenge-steps > .small { margin: 0; color: #667085; }

/* In-app request inspector: history on the left, repeater on the right. */
.lab-devtools { border-top: 1px solid #cbd5e1; background: #f8fafc; }
.lab-devtools-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px 10px;
}
.lab-devtools-heading .eyebrow { margin: 0 0 2px; color: #2543a5; }
.lab-devtools-heading h3 { margin: 0; color: #172554; font-size: 16px; }
.lab-devtools-heading > p { max-width: 62ch; margin: 0; color: #475467; font-size: 12px; line-height: 1.6; }
.lab-devtools-body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 16px;
  padding: 0 18px 18px;
}
.lab-devtools-label { margin: 0 0 6px; color: #667085; font-size: 10px; font-weight: 900; letter-spacing: .09em; }
.lab-devtools-empty { margin: 0; color: #667085; font-size: 12px; }
.http-history { max-height: 260px; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.http-history li {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 44px auto;
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 6px;
  background: #fff;
}
.http-history li.is-selected { border-color: #2543a5; background: #eef4ff; }
.http-method { color: #2543a5; font: 900 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.http-path {
  overflow: hidden;
  color: #344054;
  font: 500 11px ui-monospace, SFMono-Regular, Menlo, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.http-status { font: 900 11px ui-monospace, monospace; }
.http-status.is-ok, .repeater-status.is-ok { color: #1c8f52; }
.http-status.is-error, .repeater-status.is-error { color: #b42318; }
.http-history li button { padding: 5px 9px; font-size: 11px; }
.repeater-pane { display: grid; gap: 8px; align-content: start; }
.repeater-pane[hidden] { display: none; }
.repeater-line { display: flex; gap: 6px; }
/* Two global rules set select{width:100%}, which stretched the method
   picker and pushed the URL field out of the panel. */
.repeater-line select { width: auto; min-width: 6.5rem; flex: 0 0 auto; padding: 8px; border: 1px solid #b8c6dd; border-radius: 8px; }
.repeater-line input {
  min-width: 0;
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #b8c6dd;
  border-radius: 8px;
  font: 500 12px ui-monospace, SFMono-Regular, Menlo, monospace;
}
.repeater-line button { flex: none; }
.repeater-field { display: grid; gap: 4px; color: #475467; font-size: 11px; font-weight: 800; }
.repeater-field select { padding: 8px 10px; border: 1px solid #b8c6dd; border-radius: 8px; font: 500 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.repeater-field textarea {
  padding: 9px 10px;
  border: 1px solid #b8c6dd;
  border-radius: 8px;
  font: 500 12px ui-monospace, SFMono-Regular, Menlo, monospace;
  resize: vertical;
}
.repeater-response-head { display: flex; gap: 8px; align-items: baseline; }
.repeater-response-head .lab-devtools-label { margin: 0; }
.repeater-status { font: 900 12px ui-monospace, monospace; }
.repeater-response {
  max-height: 200px;
  overflow: auto;
  margin: 0;
  padding: 10px;
  color: #1c2c4a;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  font: 500 11.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}
@media (max-width: 900px) { .lab-devtools-body { grid-template-columns: minmax(0, 1fr); } }
.repeater-note:empty { display: none; }
.repeater-note {
  margin: 0;
  padding: 9px 11px;
  color: #344054;
  border-left: 3px solid #2543a5;
  border-radius: 0 7px 7px 0;
  background: #eef4ff;
  font-size: 12px;
  line-height: 1.55;
}
.repeater-note.is-warning { color: #6a491b; border-left-color: #c18a1d; background: #fff6da; }
.devtools-external-tools { padding: 0 18px 14px; }
.devtools-external-tools ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.devtools-external-tools li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.devtools-external-tools li > span { color: #475467; font-size: 12px; }
.devtools-external-tools a { flex: none; text-decoration: none; }
.workshop-walkthrough-alt {
  margin-top: 16px;
  padding: 14px 16px;
  border-left: 3px solid #1c8f52;
  border-radius: 0 9px 9px 0;
  background: #eafaf0;
}
.workshop-walkthrough-alt .eyebrow { margin: 0 0 6px; color: #1c8f52; }
.workshop-walkthrough-alt ol { margin: 0; padding-left: 20px; }
.workshop-walkthrough-alt li { margin-bottom: 5px; color: #14532d; font-size: 13.5px; line-height: 1.6; }
.workshop-walkthrough-alt code { padding: 1px 5px; border-radius: 4px; background: #ffffff; font-size: 12px; }